Flowchart Shapes

Specialized shape classes for creating professional flowcharts and process diagrams

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

See Also

Basic Shapes

Fundamental geometric shapes

UML Shapes

Shapes for UML diagrams

Electric Shapes

Circuit diagram shapes

Custom Shapes

Create custom shapes