Custom Shapes

Overview

TeeTree includes a comprehensive library of custom shapes beyond the standard rectangle, circle, and diamond. The TreeFlow.pas unit provides flowchart shapes, geometric shapes, and specialized symbols perfect for diagrams, organizational charts, and process flows.

All custom shapes are located in the TreeFlow unit. Add it to your uses clause:

uses TreeFlow;

Flowchart Shapes

Professional flowchart symbols for process diagrams:

Process Shapes

Process
Decision
Terminal

Standard process/operation box:

var
  Node: TProcessShape;
begin
  Node := TProcessShape.Create(Self);
  Node.Parent := Tree1;
  Node.Text.Add('Process Step');
  Node.Style := tssRectangle;  // Rectangle by default
end;

Decision diamond shape:

var
  Node: TDecisionShape;
begin
  Node := TDecisionShape.Create(Self);
  Node.Parent := Tree1;
  Node.Text.Add('Condition?');
  Node.Style := tssDiamond;  // Diamond by default
  Node.Brush.Color := clRed;
  Node.Font.Color := clWhite;
end;

Start/End terminal shape (rounded rectangle):

var
  Node: TTerminalShape;
begin
  Node := TTerminalShape.Create(Self);
  Node.Parent := Tree1;
  Node.Text.Add('Start');
  // Uses custom GetShapePoints for rounded ends
end;

Input/Output Shapes

// Parallelogram shape for input/output
var
  Node: TInputOutputShape;
begin
  Node := TInputOutputShape.Create(Self);
  Node.Parent := Tree1;
  Node.Text.Add('Read Data');
  Node.Slant := 12.5;  // Adjust slant angle (percentage)
  Node.Brush.Color := clYellow;
end;

Storage Shapes

Document

Document shape with wavy bottom:

var
  Doc: TDocumentShape;
begin
  Doc := TDocumentShape.Create(Self);
  Doc.Parent := Tree1;
  Doc.Text.Add('Report');
  Doc.Brush.Color := $00FF80FF;
end;

Online Storage

Data storage shape:

var
  Storage: TOnlineStorageShape;
begin
  Storage := TOnlineStorageShape.Create(Self);
  Storage.Parent := Tree1;
  Storage.Text.Add('Database');
end;

Magnetic Tape

Tape storage symbol:

var
  Tape: TMagneticTapeShape;
begin
  Tape := TMagneticTapeShape.Create(Self);
  Tape.Parent := Tree1;
  Tape.Text.Add('Backup');
end;

Complete Flowchart Shape List

From TreeFlow.pas (lines 1946-1962), these shapes are registered:

Shape Class	Description	Default Style	Default Color
`TDecisionShape`	Decision diamond	`tssDiamond`	Red
`TProcessShape`	Process rectangle	`tssRectangle`	Default
`TPredefinedProcessShape`	Predefined process with side bars	`tssRectangle`	Default
`TTerminalShape`	Start/End rounded rectangle	Custom	Default
`TConnectorShape`	Connector circle	`tssCircle`	Default
`TInputOutputShape`	Input/Output parallelogram	Custom	Yellow
`TManualOperationShape`	Manual operation trapezoid	Custom	Aqua
`TSelectShape`	Selection hexagon	Custom	Lime
`TDocumentShape`	Document with wave	Custom	Pink
`TPunchCardShape`	Punch card	Custom	Orange
`TPunchTapeShape`	Punch tape	Custom	Gray
`TDelayShape`	Delay symbol	Custom	Light green
`TManualInputShape`	Manual input	Custom	Light blue
`TAndShape`	Logic AND gate	`tssCircle`	Default
`TOrShape`	Logic OR gate	`tssCircle`	Default
`TOnlineStorageShape`	Online storage	Custom	Default
`TMagneticTapeShape`	Magnetic tape	`tssCircle`	Default

Geometric Shapes

Polygons and geometric figures:

Polygons
Arrows
Star & Cross

// Pentagon (5 sides)
var Pentagon: TPentagonShape;
Pentagon := TPentagonShape.Create(Self);
Pentagon.Parent := Tree1;
Pentagon.AngleOffset := 18;  // Rotation offset

// Hexagon (6 sides)
var Hexagon: THexagonShape;
Hexagon := THexagonShape.Create(Self);
Hexagon.Parent := Tree1;

// Octagon (8 sides)
var Octagon: TOctagonShape;
Octagon := TOctagonShape.Create(Self);
Octagon.Parent := Tree1;
Octagon.AngleOffset := 22.5;

// Arrow pointing up
var Arrow: TArrowUpShape;
Arrow := TArrowUpShape.Create(Self);
Arrow.Parent := Tree1;
Arrow.PercentHoriz := 25;  // Arrow width
Arrow.PercentVert := 33;   // Arrow head size

// Also available:
// TArrowDownShape
// TArrowLeftShape  
// TArrowRightShape

// Star shape
var Star: TStarShape;
Star := TStarShape.Create(Self);
Star.Parent := Tree1;
Star.Text.Add('Important');

// Cross/Plus shape
var Cross: TCrossShape;
Cross := TCrossShape.Create(Self);
Cross.Parent := Tree1;
Cross.PercentHoriz := 25;  // Cross arm width
Cross.PercentVert := 25;   // Cross arm height

Special Shapes

Customizable Shapes with Handles

Some shapes have special handles for interactive customization:

These shapes provide custom resize handles beyond the standard corner handles.

InputOutputShape with Slant Handle

var
  IO: TInputOutputShape;
begin
  IO := TInputOutputShape.Create(Self);
  IO.Parent := Tree1;
  IO.Slant := 15.0;  // Percentage of slant (0-100)
  
  // User can drag the slant handle at design time
  // to adjust the parallelogram angle
end;

HouseShape with WallSize

var
  House: THouseShape;
begin
  House := THouseShape.Create(Self);
  House.Parent := Tree1;
  House.WallSize := 50;  // Percentage (0-100)
  
  // User can drag to adjust roof/wall ratio
end;

CallOutShape with Pointer

var
  CallOut: TCallOutShape;
begin
  CallOut := TCallOutShape.Create(Self);
  CallOut.Parent := Tree1;
  CallOut.Text.Add('Note');
  
  // User can drag the callout pointer position
end;

Grid Shape

Create tables and grids:

var
  Grid: TGridShape;
  Row, Col: Integer;
begin
  Grid := TGridShape.Create(Self);
  Grid.Parent := Tree1;
  Grid.Rows := 3;
  Grid.Columns := 4;
  Grid.Width := 200;
  Grid.Height := 150;
  Grid.Transparent := True;
  
  // Access individual cells
  for Row := 0 to Grid.Rows - 1 do
    for Col := 0 to Grid.Columns - 1 do
      Grid.Cells[Row, Col].Text.Add(
        Format('R%dC%d', [Row, Col])
      );
  
  // Customize grid lines
  Grid.GridLines.Color := clGray;
  Grid.GridLines.SmallDots := True;
end;

Shape Registration

From TreeFlow.pas initialization section (lines 1935-1982):

initialization
  // Flowchart shapes registered under 'Flow' tab
  RegisterCustomTreeShape(TeeTree_tabFlow, 'Decision', TDecisionShape);
  RegisterCustomTreeShape(TeeTree_tabFlow, 'Process', TProcessShape);
  RegisterCustomTreeShape(TeeTree_tabFlow, 'Terminal', TTerminalShape);
  // ... etc
  
  // Other shapes registered under 'Other' tab
  RegisterCustomTreeShape(TeeTree_tabOther, 'Pentagon', TPentagonShape);
  RegisterCustomTreeShape(TeeTree_tabOther, 'Hexagon', THexagonShape);
  RegisterCustomTreeShape(TeeTree_tabOther, 'Star', TStarShape);
  // ... etc
finalization
  UnRegisterCustomTreeShapes([...]);
end.

Creating Custom GetShapePoints

Define your own shape by overriding GetShapePoints:

type
  TMyCustomShape = class(TCustomTreeShape)
  protected
    function GetShapePoints(const R: TRect; 
      var P: TShapePoints): Integer; override;
  end;

function TMyCustomShape.GetShapePoints(const R: TRect; 
  var P: TShapePoints): Integer;
begin
  result := 5;  // Number of points
  
  // Define pentagon points
  P[0] := TeePoint(R.Left + (R.Right - R.Left) div 2, R.Top);
  P[1] := TeePoint(R.Right, R.Top + (R.Bottom - R.Top) div 3);
  P[2] := TeePoint(R.Right - 20, R.Bottom);
  P[3] := TeePoint(R.Left + 20, R.Bottom);
  P[4] := TeePoint(R.Left, R.Top + (R.Bottom - R.Top) div 3);
end;

Specialized Shapes

BeveledShape

3D beveled rectangle:

var
  Bevel: TBeveledShape;
begin
  Bevel := TBeveledShape.Create(Self);
  Bevel.Parent := Tree1;
  Bevel.Bevel := bvRaised;  // bvRaised, bvLowered, bvNone
  Bevel.BevelSize := 1;     // Border width
  Bevel.Color := clBtnFace;
end;

EnvelopeShape

var
  Envelope: TEnvelopeShape;
begin
  Envelope := TEnvelopeShape.Create(Self);
  Envelope.Parent := Tree1;
  Envelope.OffsetY := 33;  // Flap position percentage
  Envelope.Text.Add('Message');
end;

RingShape

Circle with inner circle:

var
  Ring: TRingShape;
begin
  Ring := TRingShape.Create(Self);
  Ring.Parent := Tree1;
  Ring.Style := tssCircle;
  Ring.Text.Add('Ring');
end;

Best Practices

Use Appropriate Shapes

Match shape types to their standard meanings (e.g., diamonds for decisions).

Set Default Colors

Many shapes have recommended default colors—use them for consistency.

Test Custom Handles

Shapes with custom handles need testing for proper interaction.

Consider Performance

Complex polygon shapes may impact rendering speed with thousands of nodes.

Shape Aliases

Some shapes have alias names (TreeFlow.pas lines 1938-1943):

TConditionShape = TDecisionShape  // Same as Decision
TTitleShape = TInputOutputShape   // Same as Input/Output  
TCardShape = TPunchCardShape      // Same as Punch Card
TManualShape = TManualInputShape  // Same as Manual Input
TDataShape = TOnlineStorageShape  // Same as Online Storage
TTapeShape = TMagneticTapeShape   // Same as Magnetic Tape

All flowchart shapes follow standard ANSI/ISO flowchart symbol conventions for maximum compatibility.

Get Started

Core Concepts

Guides

VCL & FMX

Overview

Flowchart Shapes

Process Shapes

Input/Output Shapes

Storage Shapes

Complete Flowchart Shape List

Geometric Shapes

Special Shapes

Customizable Shapes with Handles

Grid Shape

Shape Registration

Creating Custom GetShapePoints

Specialized Shapes

BeveledShape

EnvelopeShape

RingShape

Best Practices

Use Appropriate Shapes

Set Default Colors

Test Custom Handles

Consider Performance

Shape Aliases

Build docs developers (and LLMs) love

Get Started

Core Concepts

Guides

VCL & FMX

​Overview

​Flowchart Shapes

​Process Shapes

​Input/Output Shapes

​Storage Shapes

​Complete Flowchart Shape List

​Geometric Shapes

​Special Shapes

​Customizable Shapes with Handles

​Grid Shape

​Shape Registration

​Creating Custom GetShapePoints

​Specialized Shapes

​BeveledShape

​EnvelopeShape

​RingShape

​Best Practices

Use Appropriate Shapes

Set Default Colors

Test Custom Handles

Consider Performance

​Shape Aliases

Build docs developers (and LLMs) love

Overview

Flowchart Shapes

Process Shapes

Input/Output Shapes

Storage Shapes

Complete Flowchart Shape List

Geometric Shapes

Special Shapes

Customizable Shapes with Handles

Grid Shape

Shape Registration

Creating Custom GetShapePoints

Specialized Shapes

BeveledShape

EnvelopeShape

RingShape

Best Practices

Shape Aliases