Flowchart Shapes Overview

DiagramKit provides 19 flowchart shapes to create professional, standardized process diagrams. Each shape has a specific purpose and meaning in flowchart design.

Shape Categories

Basic Control Flow Shapes

These are the fundamental shapes every flowchart uses:

• Start/End - Terminal points for your process
• Process - Standard processing steps and actions
• Decision - Conditional branching with yes/no paths
• Connector - On-page flow connections
• Off-page Connector - Cross-page references

Data and Storage Shapes

Shapes for representing data operations:

• Data I/O - General input/output operations
• Manual Input - User data entry
• Document - Paper documents and reports
• Database - Database operations
• Stored Data - File storage operations

Processing Shapes

Specialized processing operations:

• Preparation - Setup and initialization
• Predefined Process - Subroutines and modules
• Manual Operation - Human-performed tasks

Display and Timing

Output and timing-related shapes:

• Display - Screen output
• Delay - Wait states and pauses

Data Operations

Advanced data manipulation shapes:

• Sort - Sorting operations
• Collate - Collating and organizing
• Merge - Merging data streams
• Extract - Extracting data

Modern Additions

• Cloud - Cloud computing and remote services

Quick Reference Chart

Shape	Name	Primary Use	Color Code
⬭	Start/End	Process boundaries	Slate
▭	Process	Standard operations	Blue
◇	Decision	Conditional logic	Yellow
▱	Data I/O	Input/output	Green
🗄	Database	Data storage	Emerald
📄	Document	Reports/files	Purple
⌨️	Manual Input	User entry	Pink
🖥	Display	Screen output	Blue
⚙️	Preparation	Setup steps	Orange
📦	Stored Data	File storage	Green
⏱	Delay	Wait states	Red
⬍	Sort	Sorting data	Purple
⬍	Collate	Organizing data	Green
▽	Merge	Combining streams	Yellow
△	Extract	Extracting data	Red
○	Connector	Page links	Yellow
⬠	Off-page	Cross-page	Slate
☁️	Cloud	Remote services	Blue
▭	Predefined Process	Subroutines	Dark Blue
▭	Manual Operation	Human tasks	Red

Choosing the Right Shape

For Process Steps

• Simple action? → Process
• Needs setup first? → Preparation
• Calls another process? → Predefined Process
• Done by hand? → Manual Operation

For Data Operations

• General I/O? → Data I/O
• User typing? → Manual Input
• Paper output? → Document
• Screen output? → Display
• Database query? → Database
• File operation? → Stored Data

For Logic and Flow

• Yes/no question? → Decision
• Same page connection? → Connector
• Different page? → Off-page Connector
• Time delay? → Delay

For Data Manipulation

• Sorting items? → Sort
• Organizing data? → Collate
• Combining sources? → Merge
• Pulling specific data? → Extract

Best Practices

Do's

✅ Use standard ISO 5807 shapes for clarity ✅ Label every shape clearly and concisely ✅ Maintain consistent flow direction (top-to-bottom, left-to-right) ✅ Use appropriate shapes for their intended purpose ✅ Keep flowcharts simple and readable

Don'ts

❌ Don't mix non-standard shapes with ISO shapes ❌ Don't overcomplicate - split into multiple diagrams if needed ❌ Don't skip Start/End symbols ❌ Don't use Process boxes for everything ❌ Don't cross lines unnecessarily

Common Flowchart Patterns

Linear Process

[Start] → [Process] → [Process] → [End]

Decision Branch

[Start] → [Decision]
            ↙        ↘
       [Process]  [Process]
            ↓        ↓
         [End]    [End]

Loop Pattern

[Start] → [Process] → [Decision]
            ↑             ↓ No
            └─────────────┘
                     Yes ↓
                      [End]

Database Operation

[Start] → [Input] → [Database] → [Process] → [Output] → [End]

Shape Dimensions Reference

Each shape has optimized dimensions for readability:

• Standard boxes: 160×80px
• Decisions: 120×120px (diamond)
• Database: 180×110px (cylinder)
• Connectors: 28×28px (small circles)
• Cloud: 160×100px (cloud shape)

All shapes maintain proper aspect ratios and spacing for professional diagrams.

Accessibility Features

All shapes include:

• Clear visual distinction
• Color-coded categories
• Text labels (editable)
• Keyboard navigation support
• Screen reader compatibility

Learning Path

1. Start with Start/End, Process, and Decision
2. Add data shapes: Data I/O and Database
3. Learn connectors: Connector and Off-page
4. Explore specialized shapes as needed

Next Steps

• Start/End Symbol - Begin with terminal points
• Process Shape - Learn about action steps
• Decision Shape - Master conditional logic
• Quick Start Guide - Build your first flowchart

Standards Compliance

DiagramKit strictly follows:

• ISO 5807:1985 - Information processing documentation symbols
• ANSI/ISO standards for process flowcharts
• Industry best practices for technical documentation

This ensures your diagrams are professional, portable, and universally understood.