Flowcharts

Under the flowchart header the graph flows top to bottom, the natural direction for a process with decisions and branches. Everything from the architecture grammar applies: nodes, groups, edges, fan-out. The difference is direction and the flowchart shape vocabulary.

flowchart
Start [ellipse] -> Check [diamond]: ready?
Check -> Ship [rectangle]: yes
Check -> Wait [rectangle]: no
Wait -> Check: retry

A decision diamond with labelled yes/no branches, and a retry loop back.

Flowchart shapes#

Flowcharts lean on a handful of classic shapes. You can name the shape directly (rectangle, diamond, ellipse, parallelogram, hexagon) or use a role alias that reads like the step it represents.

Role alias	Draws	Means
`process`	rectangle	a step or action
`decision`	diamond	a branch
`terminator` / `start` / `end`	ellipse	start or stop
`data` / `io`	parallelogram	input or output
`prep` / `preparation`	hexagon	setup
`subroutine`	predefined-process	a named sub-process
`doc`	document	a document or report

flowchart
Begin [terminator] -> Read input [data]
Read input -> Validate [decision]: valid?
Validate -> Process [process]: yes
Validate -> Report error [doc]: no
Process -> Done [terminator]
Report error -> Done

Role aliases pick the shape that matches each step.

Labelled branches#

A labelled statement labels every edge it creates. In practice, yes and no branches each take their own line, so each carries its own label. Self-edges are dropped with a diagnostic (the canvas rejects them).

flowchart
Order received [ellipse] -> In stock [diamond]: check
In stock -> Reserve [process]: yes
In stock -> Backorder [process]: no
Reserve -> Charge [process]
Backorder -> Notify [process]
Charge -> Ship [ellipse]
Notify -> Ship

Direction#

Flowcharts default to down. Set direction: to flow another way; left and up lay out then mirror.

flowchart
direction: right
Draft -> Review [diamond]: ok?
Review -> Publish: yes
Review -> Draft: no

A left-to-right approval loop.

A CI/CD pipeline with a grouped deploy stage and a coloured failure path.

flowchart
title: CI/CD pipeline

Push [ellipse] -> Build [process]
Build -> Tests [diamond]: pass?
Tests -> Deploy [process]: yes [green]
Tests -> Notify team [process]: no [red]

group Production {
  Canary [process]
  Rollout [process]
}
Deploy -> Canary -> Healthy [diamond]: ok?
Healthy -> Rollout: yes
Healthy -> Rollback [process, red]: no

A user onboarding flow with a decision loop.

flowchart
title: Onboarding

Sign up [terminator] -> Verify email [decision]: verified?
Verify email -> Resend [process]: no
Resend -> Verify email
Verify email -> Profile [process]: yes
Profile -> Invite team [decision]: skip?
Invite team -> Dashboard [terminator]: yes
Invite team -> Send invites [data]: no
Send invites -> Dashboard