2.2 KiB

Raw Blame History

Flowchart Layout

Shape Vocabulary

Shape	Meaning	SVG Element
Rounded rect (large radius)	Start / End	`<rect rx="25">`
Rectangle	Process / Action	`<rect rx="6">`
Diamond	Decision	`<polygon>` rotated 45°
Parallelogram	Input / Output	`<polygon>` with skew
Cylinder	Data store	Ellipse + rect combo

Flow Direction

Primary flow: top to bottom. Branch flows go left/right from decisions.

Layout Algorithm

Identify the main path (happy path / most common flow) — this runs straight down the center
Branch from decisions: "Yes" continues down center, "No" branches right (or left if space is tight)
Merge paths: Route branches back to the main path using L-shaped connectors
Loop-backs: Route upward on the far left/right side of the diagram with curved paths

Spacing

Step-to-step vertical gap: 60-80px (enough for arrow + optional label)
Decision diamond height: 70px (point to point)
Decision diamond width: 100px (point to point)
Branch horizontal offset: 200px from center
Merge connector clearance: 20px from any box

Decision Labels

Place "Yes" / "No" (or "True" / "False", "是" / "否") labels directly on the exit arrows, 10px from the diamond edge:

<!-- Decision diamond at center (400, 200) -->
<!-- Yes: downward -->
<line x1="400" y1="235" x2="400" y2="300" stroke="#64748b" marker-end="url(#arrow)"/>
<text x="412" y="260" fill="#34d399" font-size="8">Yes</text>

<!-- No: rightward -->
<line x1="450" y1="200" x2="550" y2="200" stroke="#64748b" marker-end="url(#arrow)"/>
<text x="480" y="193" fill="#fb7185" font-size="8">No</text>

Coloring Strategy

Start/End nodes: Highlight color (blue)
Process steps: Primary (cyan) or Secondary (emerald)
Decision diamonds: Accent (amber) — they draw the eye naturally
Error/exception paths: Alert (rose) dashed arrows
Happy path arrows: Slightly brighter than branch arrows (stroke-opacity difference)

Complex Flowcharts

For flowcharts with 10+ steps:

Group related steps into swim lanes (vertical columns with header bars)
Add a "phase" row header at the top of each swim lane
Use the region boundary pattern from Architecture for swim lanes

2.2 KiB Raw Blame History