UML Shapes - TeeTree

Overview

The TreeUML unit provides specialized shapes for creating UML (Unified Modeling Language) diagrams in TeeTree. These shapes support class diagrams, use case diagrams, activity diagrams, and other UML diagram types.

Inheritance Hierarchy

TCustomTreeShape
  └── TUMLShape (base class for UML shapes)
        ├── TActorShape
        ├── TUMLRectangle
        │     ├── TClassShape
        │     └── TInterfaceShape
        ├── TPackageShape
        ├── TActionShape
        ├── TProcShape
        ├── TNoteShape
        └── TStoreShape

Base Classes

TUMLShape

UML Shape

Base class for all UML shapes.

Description: Alias for TCustomTreeShape, provides foundation for UML-specific shapes.

TUMLShape = class(TCustomTreeShape);

TUMLRectangle

UML Rectangle

Base rectangular shape for UML elements.

Default Properties:

ImageIndex: tiNone (no default image)
VertTextAlign: vtaTop (text aligned to top)

Usage:

var
  UMLRect: TUMLRectangle;
begin
  UMLRect := TUMLRectangle.Create(Tree);
  UMLRect.VertTextAlign := vtaTop;
end;

Class Diagram Shapes

TClassShape

Class

Represents a class in UML class diagrams.

Description: Rectangle divided into three sections:

Class name (top)
Attributes (middle)
Methods (bottom)

Features:

Automatically draws horizontal divider lines
Top section for class name
Text aligned to top by default

Usage:

var
  Class_: TClassShape;
begin
  Class_ := TClassShape.Create(Tree);
  with Class_ do
  begin
    Text.Add('Customer');
    Text.Add('----------');
    Text.Add('+ name: string');
    Text.Add('+ email: string');
    Text.Add('----------');
    Text.Add('+ getName(): string');
    Text.Add('+ setName(n: string)');
    X0 := 100;
    Y0 := 100;
    Width := 180;
    AutoSize := True;
  end;
end;

Drawing Behavior:

Draws horizontal line after first text line (class name)
Draws another line to separate attributes from methods
Lines are calculated based on text height

TInterfaceShape

Interface

Represents an interface in UML diagrams.

Description: Similar to class shape but with only two sections:

Interface name (with stereotype)
Methods

Usage:

var
  Interface_: TInterfaceShape;
begin
  Interface_ := TInterfaceShape.Create(Tree);
  with Interface_ do
  begin
    Text.Add('<<interface>>');
    Text.Add('ICustomer');
    Text.Add('----------');
    Text.Add('+ getName(): string');
    Text.Add('+ getEmail(): string');
    AutoSize := True;
  end;
end;

TPackageShape

Package

Represents a package or namespace.

Description: Rectangle with a tab at the top-left corner. Features:

Custom polygon shape with tab
Tab size: 1/4 height, 1/3 width
Horizontal line separates tab from main body

Usage:

var
  Package: TPackageShape;
begin
  Package := TPackageShape.Create(Tree);
  Package.Text.Add('com.example.model');
  Package.Width := 200;
  Package.Height := 150;
end;

Use Case Diagram Shapes

TActorShape

Actor

Represents an actor in use case diagrams.

Description: Stick figure representing a user or external system. Drawing Components:

Circle for head (top 1/3)
Horizontal line for arms (at 1/3 from top)
Vertical line for body
Two diagonal lines for legs

Usage:

var
  Actor: TActorShape;
begin
  Actor := TActorShape.Create(Tree);
  Actor.Text.Add('User');
  Actor.Width := 60;
  Actor.Height := 100;
  Actor.VertTextAlign := vtaBottom; // Text below figure
end;

TActionShape

Action/Use Case

Represents a use case or action.

Description: Ellipse/oval shape. Features:

Custom curved shape with rounded ends
Uses bezier-like curves for smooth appearance
34 points for smooth rendering

Usage:

var
  UseCase: TActionShape;
begin
  UseCase := TActionShape.Create(Tree);
  UseCase.Text.Add('Login');
  UseCase.Width := 120;
  UseCase.Height := 60;
end;

Activity Diagram Shapes

TProcShape

Procedure/Activity

Represents a procedure or activity node.

Description: Circle with an incoming arrow on the left side. Default Style: tssCircle Features:

Draws a small incoming arrow line
Arrow positioned at left-center

Usage:

var
  Proc: TProcShape;
begin
  Proc := TProcShape.Create(Tree);
  Proc.Text.Add('Process');
  Proc.Style := tssCircle;
end;

TStoreShape

Data Store

Represents a data store or database in activity diagrams.

Description: Circle with an outgoing arrow at the bottom. Default Style: tssCircle Features:

Draws a small outgoing arrow line at bottom-center
Arrow points downward

Usage:

var
  Store: TStoreShape;
begin
  Store := TStoreShape.Create(Tree);
  Store.Text.Add('Database');
  Store.Style := tssCircle;
end;

Documentation Shapes

TNoteShape

Note/Comment

Represents a note or comment annotation.

Description: Rectangle with a folded corner (dog-ear effect). Features:

Folded corner at top-right
Corner fold is 10% of shape size
Lines drawn to show fold

Usage:

var
  Note: TNoteShape;
begin
  Note := TNoteShape.Create(Tree);
  Note.Text.Add('This is a note');
  Note.Text.Add('explaining the');
  Note.Text.Add('design decision');
  Note.Brush.Color := clYellow;
  Note.AutoSize := True;
end;

Complete UML Class Diagram Example

uses
  TeeTree, TreeUML;

procedure CreateUMLClassDiagram(Tree: TTree);
var
  BaseClass, DerivedClass, Interface_: TTreeNodeShape;
  Association: TTreeConnection;
begin
  // Base class
  BaseClass := TClassShape.Create(Tree);
  with TClassShape(BaseClass) do
  begin
    Text.Add('Animal');
    Text.Add('----------');
    Text.Add('- name: string');
    Text.Add('- age: integer');
    Text.Add('----------');
    Text.Add('+ eat()');
    Text.Add('+ sleep()');
    X0 := 100;
    Y0 := 50;
    AutoSize := True;
  end;

  // Derived class
  DerivedClass := TClassShape.Create(Tree);
  with TClassShape(DerivedClass) do
  begin
    Text.Add('Dog');
    Text.Add('----------');
    Text.Add('- breed: string');
    Text.Add('----------');
    Text.Add('+ bark()');
    Text.Add('+ wagTail()');
    X0 := 100;
    Y0 := 250;
    AutoSize := True;
  end;

  // Interface
  Interface_ := TInterfaceShape.Create(Tree);
  with TInterfaceShape(Interface_) do
  begin
    Text.Add('<<interface>>');
    Text.Add('IPet');
    Text.Add('----------');
    Text.Add('+ play()');
    Text.Add('+ cuddle()');
    X0 := 350;
    Y0 := 150;
    AutoSize := True;
  end;

  // Inheritance connection (filled triangle arrow)
  Association := DerivedClass.AddConnection(BaseClass);
  with Association do
  begin
    ArrowTo.Style := casLines;
    ArrowTo.Size := 12;
    Border.Color := clBlack;
  end;

  // Implementation connection (dashed line)
  Association := DerivedClass.AddConnection(Interface_);
  with Association do
  begin
    ArrowTo.Style := casLines;
    Border.Style := psDash;
  end;
end;

Use Case Diagram Example

procedure CreateUseCaseDiagram(Tree: TTree);
var
  Actor1, UseCase1, UseCase2, Note: TTreeNodeShape;
begin
  // Actor
  Actor1 := TActorShape.Create(Tree);
  with Actor1 do
  begin
    Text.Add('Customer');
    X0 := 50;
    Y0 := 150;
    VertTextAlign := vtaBottom;
  end;

  // Use case 1
  UseCase1 := TActionShape.Create(Tree);
  with UseCase1 do
  begin
    Text.Add('Place Order');
    X0 := 200;
    Y0 := 100;
  end;

  // Use case 2
  UseCase2 := TActionShape.Create(Tree);
  with UseCase2 do
  begin
    Text.Add('Make Payment');
    X0 := 200;
    Y0 := 200;
  end;

  // Note
  Note := TNoteShape.Create(Tree);
  with TNoteShape(Note) do
  begin
    Text.Add('Payment required');
    Text.Add('for order');
    X0 := 400;
    Y0 := 180;
    Brush.Color := clYellow;
    AutoSize := True;
  end;

  // Connect actor to use cases
  Actor1.AddConnection(UseCase1);
  Actor1.AddConnection(UseCase2);
  
  // Connect note with dashed line
  with UseCase2.AddConnection(Note) do
    Border.Style := psDash;
end;

Activity Diagram Example

procedure CreateActivityDiagram(Tree: TTree);
var
  Start, Action1, Action2, Store, End_: TTreeNodeShape;
begin
  // Start node (filled circle)
  Start := TTreeNodeShape.Create(Tree);
  with Start do
  begin
    Style := tssCircle;
    Width := 30;
    Height := 30;
    Brush.Color := clBlack;
    X0 := 200;
    Y0 := 50;
  end;

  // Activity 1
  Action1 := TActionShape.Create(Tree);
  with Action1 do
  begin
    Text.Add('Receive Order');
    Parent := Start;
  end;

  // Data store
  Store := TStoreShape.Create(Tree);
  with Store do
  begin
    Text.Add('Save');
    Parent := Action1;
  end;

  // Activity 2
  Action2 := TActionShape.Create(Tree);
  with Action2 do
  begin
    Text.Add('Process Payment');
    Parent := Store;
  end;

  // End node (circle with border)
  End_ := TTreeNodeShape.Create(Tree);
  with End_ do
  begin
    Style := tssCircle;
    Width := 30;
    Height := 30;
    Brush.Color := clBlack;
    Border.Width := 3;
    Parent := Action2;
  end;

  Tree.GlobalFormat.ChildManager.ApplyFormat;
end;

UML Shape Registration

UML shapes are automatically registered in the component palette under the “UML” tab:

Package
Class
Interface
Action
Actor
Procedure
Note
Store

Common UML Patterns

Inheritance

Use connections with triangle arrows:

with DerivedClass.AddConnection(BaseClass) do
begin
  ArrowTo.Style := casLines; // Hollow triangle
  ArrowTo.Size := 12;
end;

Association

Use simple lines:

Class1.AddConnection(Class2);

Aggregation

Use diamond arrow:

with Container.AddConnection(Element) do
begin
  ArrowTo.Style := casDiamond;
  ArrowTo.Brush.Color := clWhite; // Hollow diamond
end;

Composition

Use filled diamond:

with Whole.AddConnection(Part) do
begin
  ArrowTo.Style := casDiamond;
  ArrowTo.Brush.Color := clBlack; // Filled diamond
end;

Dependency

Use dashed line:

with Client.AddConnection(Supplier) do
begin
  Border.Style := psDash;
  ArrowTo.Style := casSolid;
end;

Basic Shapes

Fundamental geometric shapes

Flowchart Shapes

Process diagram shapes

Electric Shapes

Circuit diagram shapes

Custom Shapes

Create custom shapes

Components

Shapes

Child Managers

Utilities

Documentation Index

​Overview

​Inheritance Hierarchy

​Base Classes

​TUMLShape

UML Shape

​TUMLRectangle

UML Rectangle

​Class Diagram Shapes

​TClassShape

Class

​TInterfaceShape

Interface

​TPackageShape

Package

​Use Case Diagram Shapes

​TActorShape

Actor

​TActionShape

Action/Use Case

​Activity Diagram Shapes

​TProcShape

Procedure/Activity

​TStoreShape

Data Store

​Documentation Shapes

​TNoteShape

Note/Comment

​Complete UML Class Diagram Example

​Use Case Diagram Example

​Activity Diagram Example

​UML Shape Registration

​Common UML Patterns

​Inheritance

​Association

​Aggregation

​Composition

​Dependency

​See Also

Basic Shapes

Flowchart Shapes

Electric Shapes

Custom Shapes

Build docs developers (and LLMs) love

Overview

Inheritance Hierarchy

Base Classes

TUMLShape

TUMLRectangle

Class Diagram Shapes

TClassShape

TInterfaceShape

TPackageShape

Use Case Diagram Shapes

TActorShape

TActionShape

Activity Diagram Shapes

TProcShape

TStoreShape

Documentation Shapes

TNoteShape

Complete UML Class Diagram Example

Use Case Diagram Example

Activity Diagram Example

UML Shape Registration

Common UML Patterns

Inheritance

Association

Aggregation

Composition

Dependency

See Also