references/type-flowchart.md

Flowchart

Best for: decision logic, algorithms, user-facing branching flows ("Should I…?"), onboarding routing, support-triage trees.

Layout conventions

• Shape carries type, not color:
  • Oval (rx=20) — start / end
  • Rectangle (rx=6) — step / action
  • Diamond — decision (≤3 exits)
  • Small filled ink dot (r=4) — merge point where branches rejoin
• Flow runs top→down. From a diamond, conventional exits: Yes to the right, No below — but label every outgoing arrow regardless.
• Use coral on the happy path or on the single most consequential decision — never on every decision.
• If two arrows must cross, use a small arc jump on one so the crossing is readable.

Anti-patterns

• Using fill color to signal node type (shape does that).
• Decision diamond with 4+ exits — refactor into nested diamonds.
• Unlabeled decision branches.

Examples

• assets/example-flowchart.html — minimal light
• assets/example-flowchart-dark.html — minimal dark
• assets/example-flowchart-full.html — full editorial