Tutorial: Model a UML Class Diagram

1. Classes and attributes

UMLClass keeps attributes and operations as lists, which the node renders in its three compartments.

using Beep.Skia;
using Beep.Skia.UML;

var manager = new DrawingManager();

var order = new UMLClass { ClassName = "Order", X = 60, Y = 80, Width = 220, Height = 140 };
order.Attributes.Add("- Id : int");
order.Attributes.Add("- PlacedAt : DateTime");
order.Attributes.Add("- Total : decimal");
order.Operations.Add("+ CalculateTotal() : decimal");
manager.AddComponent(order);

2. Interfaces and inheritance

Relationship shapes are created by connecting the components, exactly like any other line.

var auditable = new UMLInterface { InterfaceName = "IAuditable", X = 380, Y = 60, Width = 200, Height = 90 };
manager.AddComponent(auditable);

manager.ConnectComponents(order, auditable);
var inheritance = manager.GetLines().Last();
inheritance.RoutingMode = LineRoutingMode.Orthogonal;
inheritance.Label1 = "realizes";

3. Sequence sketch

For interaction diagrams, add lifelines and messages. Lifelines render as dashed vertical lines with activation bars.

var client = new UMLLifeline { ClassName = "Client", X = 120, Y = 260, Width = 120, Height = 240 };
var service = new UMLLifeline { ClassName = "OrderService", X = 340, Y = 260, Width = 140, Height = 240 };
manager.AddComponent(client);
manager.AddComponent(service);

manager.ConnectComponents(client, service);
manager.GetLines().Last().Label1 = "PlaceOrder()";

4. Export XMI

var exporter = new XmiExporter();
string xmi = exporter.Export(manager.GetComponents(), manager.GetLines());
File.WriteAllText("model.xmi", xmi);

The XMI opens in Enterprise Architect, Visual Paradigm or Papyrus.