UML Diagram Family

UML diagrams with 17 node types covering class, interface, use case, sequence, activity, and deployment views.

UML family: classes, interfaces, actors, lifelines and relationships

Table of Contents

Overview

Base Control: UMLControl : MaterialControl
Namespace: Beep.Skia.UML

The UMLControl is the root control for this diagram family. It inherits MaterialControl and provides shared port management, styling, and template methods for all nodes in the family.

This family contains 13 node types.

Node Types

Node ClassShapeDescription
UMLClass3-section rectangleClass with name, properties, and methods compartments.
UMLInterfaceRectangle with <>Interface with stereotype and method signatures.
UMLActorStick figureUse case actor (user/role/system).
UMLLifelineDashed vertical lineSequence diagram lifeline for object/actor.
UMLAssociationSolid lineAssociation relationship between classes.
UMLInheritanceHollow triangle arrowInheritance/generalization relationship.
UMLMessageArrow lineSequence diagram message between lifelines.
UMLActionNodeRounded rectangleActivity diagram action step.
UMLConditionNodeDiamondActivity diagram decision/branch.
UMLDataSourceNodeDatabase iconData source in deployment/component diagram.
UMLTransformNodeGearTransform node in component diagram.
UMLOutputNodeOutput iconOutput/sink node.
UMLTriggerNodeEvent iconTrigger/event source for activity.

UMLClass

Class with name, properties, and methods compartments.

Shape3-section rectangle
Input Ports2+ (sides)
Output Ports2+ (sides)

UMLInterface

Interface with stereotype and method signatures.

ShapeRectangle with <>
Input Ports2+
Output Ports2+

UMLActor

Use case actor (user/role/system).

ShapeStick figure
Input Ports1
Output Ports1

UMLLifeline

Sequence diagram lifeline for object/actor.

ShapeDashed vertical line
Input Ports0
Output Ports1+

UMLAssociation

Association relationship between classes.

ShapeSolid line
Input Ports0
Output Ports0

UMLInheritance

Inheritance/generalization relationship.

ShapeHollow triangle arrow
Input Ports0
Output Ports0

UMLMessage

Sequence diagram message between lifelines.

ShapeArrow line
Input Ports0
Output Ports0

UMLActionNode

Activity diagram action step.

ShapeRounded rectangle
Input Ports1
Output Ports1

UMLConditionNode

Activity diagram decision/branch.

ShapeDiamond
Input Ports1
Output Ports2+

UMLDataSourceNode

Data source in deployment/component diagram.

ShapeDatabase icon
Input Ports1
Output Ports1

UMLTransformNode

Transform node in component diagram.

ShapeGear
Input Ports1
Output Ports1

UMLOutputNode

Output/sink node.

ShapeOutput icon
Input Ports1
Output Ports0-1

UMLTriggerNode

Trigger/event source for activity.

ShapeEvent icon
Input Ports0
Output Ports1

Connection Points

Every node in this family exposes connection points (ports) for linking to other nodes. Port positions are computed lazily by LayoutPorts(), which runs when MarkPortsDirty() flags the layout as stale after a move or resize.

Node ClassInput PortsOutput PortsExtra
UMLClass2+ (sides)2+ (sides)—
UMLInterface2+2+—
UMLActor11—
UMLLifeline01+—
UMLAssociation00—
UMLInheritance00—
UMLMessage00—
UMLActionNode11—
UMLConditionNode12+—
UMLDataSourceNode11—
UMLTransformNode11—
UMLOutputNode10-1—
UMLTriggerNode01—

Connection Conventions

When building diagrams with this family, follow these conventions:

  • Class diagram: inheritance uses hollow triangle, association uses open arrow
  • Sequence diagram: lifelines with activation bars, messages as horizontal arrows
  • Activity diagram: action nodes connected by control flow arrows

Usage Example

Complete example showing creation, node placement, and connection:

C# Example

var uml = new UMLControl
{
    X = 50, Y = 50,
    Width = 700, Height = 500
};
drawingManager.AddComponent(uml);

var cls = new UMLClass
{
    X = 100, Y = 80,
    ClassName = "Order",
    Width = 200
};
cls.Attributes.Add("- Id : int");
cls.Attributes.Add("- Date : DateTime");
cls.Operations.Add("+ CalculateTotal() : decimal");
drawingManager.AddComponent(cls);

var iface = new UMLInterface
{
    X = 400, Y = 80,
    InterfaceName = "IOrderService",
    Width = 200
};
drawingManager.AddComponent(iface);

drawingManager.ConnectComponents(cls, iface);