Flowchart Shapes

Overview

TeeTree includes a comprehensive set of flowchart shapes defined in the TreeFlow unit. These shapes follow standard flowchart conventions and are ideal for process diagrams, workflow visualizations, and business process modeling.

Inheritance Hierarchy

TCustomTreeShape
  └── TFlowChartShape (base class for flowchart shapes)
        ├── TDecisionShape
        ├── TProcessShape
        ├── TTerminalShape
        ├── TConnectorShape
        ├── TInputOutputShape
        └── ... (other flowchart shapes)

Process Shapes

TProcessShape

Process

Represents a process step or action.

Description: Standard rectangular shape for process steps. Default Style: tssRectangle Usage:

var
  Process: TProcessShape;
begin
  Process := TProcessShape.Create(Tree);
  Process.Text.Add('Process Data');
  Process.X0 := 100;
  Process.Y0 := 100;
end;

TPredefinedProcessShape

Predefined Process

Represents a predefined process or subroutine.

Description: Rectangle with vertical lines on the sides. Usage:

var
  SubRoutine: TPredefinedProcessShape;
begin
  SubRoutine := TPredefinedProcessShape.Create(Tree);
  SubRoutine.Text.Add('Call Subroutine');
end;

TManualOperationShape

Manual Operation

Represents a manual operation or task.

Description: Trapezoid shape with slanted top. Default Color: clAqua Usage:

var
  ManualOp: TManualOperationShape;
begin
  ManualOp := TManualOperationShape.Create(Tree);
  ManualOp.Text.Add('Manual Entry');
end;

Decision and Logic Shapes

TDecisionShape

Decision

Represents a decision point in the flow.

Description: Diamond shape for yes/no decisions. Default Style: tssDiamond Default Colors: Red background, white text Alias: TConditionShape Usage:

var
  Decision: TDecisionShape;
begin
  Decision := TDecisionShape.Create(Tree);
  Decision.Text.Add('Valid?');
  // Default colors already set
end;

TSelectShape

Select

Represents a multi-way branch or select statement.

Description: Hexagon-like shape for multi-path selection. Default Color: clLime Usage:

var
  Select: TSelectShape;
begin
  Select := TSelectShape.Create(Tree);
  Select.Text.Add('Select Case');
end;

TAndShape

AND Gate

Logical AND operation.

Description: Circle with cross pattern. Usage:

var
  AndGate: TAndShape;
begin
  AndGate := TAndShape.Create(Tree);
  AndGate.Style := tssCircle;
end;

TOrShape

OR Gate

Logical OR operation.

Description: Circle with plus pattern. Usage:

var
  OrGate: TOrShape;
begin
  OrGate := TOrShape.Create(Tree);
end;

Input/Output Shapes

TInputOutputShape

Input/Output

Represents input or output operations.

Description: Parallelogram with adjustable slant. Default Color: clYellow Alias: TTitleShape Properties:

Slant: Controls the angle of slant (default: 12.5%)

Usage:

var
  IO: TInputOutputShape;
begin
  IO := TInputOutputShape.Create(Tree);
  IO.Text.Add('Read Input');
  IO.Slant := 15.0; // Adjust slant angle
end;

TManualInputShape

Manual Input

Represents manual input from keyboard.

Description: Quadrilateral slanted on one side. Default Color: clSkyBlue Alias: TManualShape Usage:

var
  Input: TManualInputShape;
begin
  Input := TManualInputShape.Create(Tree);
  Input.Text.Add('Enter Data');
end;

Data Storage Shapes

TDocumentShape

Document

Represents a document or report.

Description: Rectangle with wavy bottom. Usage:

var
  Doc: TDocumentShape;
begin
  Doc := TDocumentShape.Create(Tree);
  Doc.Text.Add('Report');
end;

TPunchCardShape

Punched Card

Represents punched card input/output.

Alias: TCardShape Properties:

PercentHoriz: Horizontal cut percentage (default: 25)
PercentVert: Vertical cut percentage (default: 25)

Usage:

var
  Card: TPunchCardShape;
begin
  Card := TPunchCardShape.Create(Tree);
  Card.PercentHoriz := 30;
end;

TPunchTapeShape

Punched Tape

Represents punched tape storage.

Usage:

var
  Tape: TPunchTapeShape;
begin
  Tape := TPunchTapeShape.Create(Tree);
end;

TOnlineStorageShape

Online Storage

Represents online storage or database.

Alias: TDataShape Usage:

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

TMagneticTapeShape

Magnetic Tape

Represents magnetic tape storage.

Alias: TTapeShape Usage:

var
  Tape: TMagneticTapeShape;
begin
  Tape := TMagneticTapeShape.Create(Tree);
end;

Flow Control Shapes

TTerminalShape

Terminal

Represents start or end of a process.

Description: Rounded rectangle (stadium shape). Usage:

var
  Start: TTerminalShape;
begin
  Start := TTerminalShape.Create(Tree);
  Start.Text.Add('Start');
end;

TConnectorShape

Connector

Represents a connector or continuation point.

Default Style: tssCircle Usage:

var
  Conn: TConnectorShape;
begin
  Conn := TConnectorShape.Create(Tree);
  Conn.Text.Add('A');
end;

TDelayShape

Delay

Represents a delay in the process.

Description: Semi-circle on the right side. Usage:

var
  Delay: TDelayShape;
begin
  Delay := TDelayShape.Create(Tree);
  Delay.Text.Add('Wait 5s');
end;

Additional Geometric Shapes

TPentagonShape

Pentagon

Five-sided polygon.

Usage:

var
  Pentagon: TPentagonShape;
begin
  Pentagon := TPentagonShape.Create(Tree);
  Pentagon.AngleOffset := 18;
end;

THexagonShape

Hexagon

Six-sided polygon.

Usage:

var
  Hexagon: THexagonShape;
begin
  Hexagon := THexagonShape.Create(Tree);
end;

TOctagonShape

Octagon

Eight-sided polygon.

Usage:

var
  Octagon: TOctagonShape;
begin
  Octagon := TOctagonShape.Create(Tree);
  Octagon.AngleOffset := 22.5;
end;

TCrossShape

Cross

Cross or plus shape.

Properties:

PercentHoriz: Horizontal bar thickness (default: 25)
PercentVert: Vertical bar thickness (default: 25)

Usage:

var
  Cross: TCrossShape;
begin
  Cross := TCrossShape.Create(Tree);
  Cross.PercentHoriz := 30;
  Cross.PercentVert := 30;
end;

Arrow Shapes

Arrow Up

Upward-pointing arrow

Arrow Down

Downward-pointing arrow

Arrow Left

Left-pointing arrow

Arrow Right

Right-pointing arrow

Base Class: TTreeCustomArrowShape Properties:

PercentHoriz: Horizontal proportion (default: 25)
PercentVert: Vertical proportion (default: 33)

Usage:

var
  Arrow: TArrowRightShape;
begin
  Arrow := TArrowRightShape.Create(Tree);
  Arrow.PercentHoriz := 30;
  Arrow.PercentVert := 40;
end;

Special Shapes

TGridShape

Grid

Multi-cell grid shape.

Properties:

Rows: Number of rows (default: 3)
Columns: Number of columns (default: 3)
Cells[Row, Col]: Access individual cells
GridLines: Pen for grid lines

Events:

OnNewCell: Triggered when a new cell is created

Usage:

var
  Grid: TGridShape;
begin
  Grid := TGridShape.Create(Tree);
  Grid.Rows := 4;
  Grid.Columns := 3;
  Grid.Cells[0, 0].Text.Add('Header 1');
  Grid.Cells[0, 1].Text.Add('Header 2');
  Grid.Cells[1, 0].Text.Add('Data 1');
end;

THouseShape

House

House shape with adjustable roof.

Properties:

WallSize: Percentage of wall height (default: 50)

Usage:

var
  House: THouseShape;
begin
  House := THouseShape.Create(Tree);
  House.WallSize := 60;
end;

TEnvelopeShape

Envelope

Envelope shape.

Properties:

OffsetY: Flap position percentage (default: 33)

Usage:

var
  Envelope: TEnvelopeShape;
begin
  Envelope := TEnvelopeShape.Create(Tree);
  Envelope.OffsetY := 40;
end;

TCallOutShape

Callout

Speech bubble or callout.

Usage:

var
  Callout: TCallOutShape;
begin
  Callout := TCallOutShape.Create(Tree);
  Callout.Text.Add('Note!');
end;

TStarShape

Star

Five-pointed star.

Usage:

var
  Star: TStarShape;
begin
  Star := TStarShape.Create(Tree);
end;

TBeveledShape

Beveled Panel

Panel with 3D bevel effect.

Properties:

Bevel: Bevel style (bvRaised, bvLowered, bvNone)
BevelSize: Bevel width in pixels (default: 1)

Default Color: clBtnFace Usage:

var
  Panel: TBeveledShape;
begin
  Panel := TBeveledShape.Create(Tree);
  Panel.Bevel := bvRaised;
  Panel.BevelSize := 2;
end;

Complete Flowchart Example

uses
  TeeTree, TreeFlow;

procedure CreateFlowchartDemo(Tree: TTree);
var
  Start, Process1, Decision, Process2, End_: TTreeNodeShape;
begin
  // Start terminal
  Start := TTerminalShape.Create(Tree);
  with Start do
  begin
    Text.Add('Start');
    X0 := 200;
    Y0 := 50;
  end;

  // First process
  Process1 := TProcessShape.Create(Tree);
  with Process1 do
  begin
    Text.Add('Initialize');
    Parent := Start;
  end;

  // Decision point
  Decision := TDecisionShape.Create(Tree);
  with Decision do
  begin
    Text.Add('Valid?');
    Parent := Process1;
  end;

  // Process on true branch
  Process2 := TProcessShape.Create(Tree);
  with Process2 do
  begin
    Text.Add('Process Data');
    Parent := Decision;
  end;

  // End terminal
  End_ := TTerminalShape.Create(Tree);
  with End_ do
  begin
    Text.Add('End');
    Parent := Process2;
  end;

  // Arrange automatically
  Tree.GlobalFormat.ChildManager.ApplyFormat;
end;

Shape Registration

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

Decision
Process
Predefined Process
Terminal
Connector
Input/Output
Manual Operation
Select
Document
Punched Card
Punched Tape
Delay
Manual Input
AND
OR
Online Storage
Magnetic Tape

Basic Shapes

Fundamental geometric shapes

UML Shapes

Shapes for UML diagrams

Electric Shapes

Circuit diagram shapes

Custom Shapes

Create custom shapes

Components

Shapes

Child Managers

Utilities

​Overview

​Inheritance Hierarchy

​Process Shapes

​TProcessShape

Process

​TPredefinedProcessShape

Predefined Process

​TManualOperationShape

Manual Operation

​Decision and Logic Shapes

​TDecisionShape

Decision

​TSelectShape

Select

​TAndShape

AND Gate

​TOrShape

OR Gate

​Input/Output Shapes

​TInputOutputShape

Input/Output

​TManualInputShape

Manual Input

​Data Storage Shapes

​TDocumentShape

Document

​TPunchCardShape

Punched Card

​TPunchTapeShape

Punched Tape

​TOnlineStorageShape

Online Storage

​TMagneticTapeShape

Magnetic Tape

​Flow Control Shapes

​TTerminalShape

Terminal

​TConnectorShape

Connector

​TDelayShape

Delay

​Additional Geometric Shapes

​TPentagonShape

Pentagon

​THexagonShape

Hexagon

​TOctagonShape

Octagon

​TCrossShape

Cross

​Arrow Shapes

Arrow Up

Arrow Down

Arrow Left

Arrow Right

​Special Shapes

​TGridShape

Grid

​THouseShape

House

​TEnvelopeShape

Envelope

​TCallOutShape

Callout

​TStarShape

Star

​TBeveledShape

Beveled Panel

​Complete Flowchart Example

​Shape Registration

​See Also

Basic Shapes

UML Shapes

Electric Shapes

Custom Shapes

Build docs developers (and LLMs) love

Overview

Inheritance Hierarchy

Process Shapes

TProcessShape

TPredefinedProcessShape

TManualOperationShape

Decision and Logic Shapes

TDecisionShape

TSelectShape

TAndShape

TOrShape

Input/Output Shapes

TInputOutputShape

TManualInputShape

Data Storage Shapes

TDocumentShape

TPunchCardShape

TPunchTapeShape

TOnlineStorageShape

TMagneticTapeShape

Flow Control Shapes

TTerminalShape

TConnectorShape

TDelayShape

Additional Geometric Shapes

TPentagonShape

THexagonShape

TOctagonShape

TCrossShape

Arrow Shapes

Special Shapes

TGridShape

THouseShape

TEnvelopeShape

TCallOutShape

TStarShape

TBeveledShape

Complete Flowchart Example

Shape Registration

See Also