Flowchart Symbols Standard

Source: heflo.com/blog/flowchart-symbols Extracted: 2026-02-21 | This is the SINGLE SOURCE OF TRUTH for all flowchart shapes.

24 Standard Flowchart Symbols

1. Arrow (Flow Line)

• Shape: Line with directional arrowhead
• Usage: Connection symbol used to indicate a link between two other symbols and the direction of flow
• Note: This is an EDGE, not a node

2. Terminator (Start / End)

• Shape: Oval / rounded rectangle (stadium)
• Usage: Marks the start or end of a process. Labeled "Start", "End", or "Exit"
• D2 shape: oval

3. Process

• Shape: Rectangle
• Usage: Represents a specific task, action, or operation that needs to be performed
• D2 shape: rectangle

4. Decision

• Shape: Diamond
• Usage: Represents a point where a choice must be made — typically a yes/no or true/false question
• D2 shape: diamond

5. Delay

• Shape: "D"-shaped semicircle (flat side on left)
• Usage: Represents a pause or waiting period in a process
• D2 shape: queue

6. Data (Input / Output)

• Shape: Parallelogram (slanted rectangle)
• Usage: Represents information entering or leaving the system — input data or output results
• D2 shape: parallelogram

7. Document

• Shape: Rectangle with wavy bottom edge
• Usage: Represents a single document generated, received, or used in a process
• D2 shape: page

8. Multiple Documents

• Shape: Stacked rectangles with wavy bottom edges
• Usage: Indicates several documents involved in a step
• D2 shape: page + style.3d: true

9. Subroutine (Predefined Process)

• Shape: Rectangle with double vertical bars on left and right sides
• Usage: Represents a named process or function that is defined elsewhere
• D2 shape: step

10. Preparation

• Shape: Hexagon
• Usage: Represents a setup or initialization step before the main process begins
• D2 shape: hexagon

11. Display

• Shape: Rectangle with concave (curved inward) left edge
• Usage: Represents information being shown to the user — usually on a screen or monitor
• D2 shape: rectangle (approximation; D2 has no native display shape)

12. Manual Input (Manual Entry)

• Shape: Rectangle with slanted top edge (trapezoid, narrower at top)
• Usage: Represents a step where a user manually inputs data into the system
• D2 shape: parallelogram (approximation; D2 has no native manual-input shape)

13. Manual Loop

• Shape: Rectangle with notched top corners (resembles an upside-down trapezoid)
• Usage: Represents a repetitive process that is performed manually until a condition is met
• D2 shape: hexagon (approximation)

14. Loop Limit

• Shape: Pentagon (flat bottom, angled top corners)
• Usage: Represents the end point or boundary of a loop, controlling how many times it repeats
• D2 shape: package (approximation)

15. Stored Data

• Shape: Open-ended rectangle with curved right side (magnetic tape / drum shape)
• Usage: Represents information that is saved for later use — general persistent storage
• D2 shape: stored_data

16. Connector (On-page)

• Shape: Small circle with a label inside
• Usage: Used to link different parts of a flowchart that are on the same page
• D2 shape: circle

17. Off-page Connector

• Shape: Pentagon (home-plate shape, pointing down)
• Usage: Shows that the flow continues on a different page or section of the flowchart
• D2 shape: package

18. Summing Junction

• Shape: Circle divided into four equal quadrants (+ inside circle)
• Usage: Used when multiple process paths must converge into a single flow
• D2 shape: circle (with "+" label)

19. AND (Or Junction)

• Shape: Circle divided diagonally into four sections (X pattern inside circle)
• Usage: Used when multiple conditions or inputs must all be true or complete before proceeding
• D2 shape: circle (with "x" label)

20. Collate (Merge)

• Shape: Hourglass (two triangles meeting tip-to-tip)
• Usage: Used when two or more inputs are brought together to be organized, matched, or compared
• D2 shape: diamond (approximation; D2 has no hourglass shape)

21. Sort

• Shape: Diamond with a horizontal line through the middle
• Usage: Used when a process step involves arranging items in a specific order
• D2 shape: diamond (with "Sort" label)

22. Offline Storage

• Shape: Solid triangle pointing downward
• Usage: Used when a process involves storing data or documents in a physical or offline location
• D2 shape: stored_data (approximation; D2 has no triangle shape)

23. Database

• Shape: Cylinder (like a barrel/can viewed from the side)
• Usage: Represents structured data storage, typically in a relational database
• D2 shape: cylinder

24. Internal Storage

• Shape: Rectangle with a small square notch cut from the upper-left corner
• Usage: Represents data held within the process or system's internal memory (RAM, cache)
• D2 shape: square (approximation; use thick inner border convention)

Classification by Frequency of Use

Tier 1 — Core (use in 90%+ of flowcharts)

Tier 2 — Common (use in ~50% of flowcharts)

Tier 3 — Specialized (use when needed)

Tier 4 — Rare (specialized diagrams only)

Shape-to-Meaning Quick Lookup

Color Standard

Every symbol has a fixed hue tied to its semantic role. These colors are used as fill/stroke in D2 and as category colors in React Flow.

Node Color Palette

Edge Color Palette

Edge Types — 6 Standard Types

1. Primary Flow (main path)

• Style: Black solid, 3px
• Usage: The main sequential path through the flowchart. THE ONLY edge visible in Overview.
• Label: None (unlabeled)

2. Gate Pass (Yes branch)

• Style: Green solid, 2px
• Usage: The "Yes" / "Pass" / "True" outgoing edge from a Decision diamond.
• Label: pass (or yes, true)
• Rule: Every binary Decision MUST have exactly 1 green Pass edge + 1 red Fail edge.

3. Gate Fail (No branch)

• Style: Red dashed, 2px
• Usage: The "No" / "Fail" / "False" outgoing edge from a Decision diamond. Typically loops back to a rework step.
• Label: fail (or no, false)
• Rule: Pairs with Gate Pass. Red = stop/rework/retry.

4. Data Flow

• Style: Gray-blue thin solid, 1.5px
• Usage: Data or artifact transfer between nodes. Does NOT compete visually with the primary path.
• Label: Name of data (e.g., "report.csv", "config")

5. Skip / Depth Jump

• Style: Slate gray dashed, 1.5px
• Usage: Skip ahead, depth-level jump, or cross-reference link. Neutral, non-directional feel.
• Label: Optional (e.g., "skip to", "see also")

6. Feedback

• Style: Purple dotted, 1.5px
• Usage: Iteration, retry, teachback, or loop-back edge. Always points upstream.
• Label: Optional (e.g., "retry", "teachback")
• Rule: Max 1 feedback edge in Overview. NEVER self-loop.

Gate Design Rule

A binary Decision (diamond) always has exactly 2 outgoing edges:

           ┌─── pass (green solid) ──→ [Next Step]
 [Decision]
           └─── fail (red dashed) ──→ [Rework / Retry]

The color alone tells the reader "pass" or "fail" at a glance — no need to read labels.