flowchart

Progress

Quality GatesBlocked

Checklist (0/7)

• ○Phase 3: Self-CheckEvery node has exactly 1 class from the standard symbols
• ○Phase 3: Self-CheckNo self-loop edges (`source === target`)
• ○Phase 3: Self-CheckOverview ≤ 10 nodes (groups collapsed)
• ○Phase 3: Self-CheckPrimary flow is clean L→R or T→B, no large detours
• ○Phase 3: Self-CheckSecondary edges labeled; primary edges unlabeled
• ○Phase 3: Self-CheckNo orphan nodes (every node has ≥ 1 connection)
• ○Phase 3: Self-CheckLegend included

Workflow Phases

1. **Logic-to-Symbol Correctness** — **The #1 purpose of a flowchart is to make complex logic clear.** Every code construct MUST map to its correct standard symbol. This is the most important rule — a flowchart with wrong symbols is worse than no flowchart at all. See §Logic-to-Symbol Mapping below.
2. **Lines must be straight** — if two nodes can be aligned (same X or same Y), the edge MUST be a single straight segment with zero bends
3. **No overlap** — nodes never overlap nodes; edges never pass through unconnected nodes; edge crossings = 0
4. **No self-loops** — `source === target` edges are always filtered out
5. **Primary flow = orthogonal** — no bezier curves on main path; only right-angle bends when nodes are offset
6. **Fixed ports** — L→R: left-in, right-out · T→B: top-in, bottom-out
7. **Overview = 10 nodes** — exactly 10: split if fewer, group if more
8. **Overview only shows Primary Flow** — all other edges hidden by default
9. **No dangling edges** — every arrow endpoint (both source and target) MUST connect to a visible node; no edge may point into empty space
10. **Grep for conditionals**: `if`, `elif`, `else`, `case`, `switch` → each one MUST appear as a diamond
11. **Grep for loops**: `for`, `while`, `do`, `until`, `retry`, `backtrack` → each one MUST show a backtrack arrow
12. **Grep for gates**: `pass/fail`, `go/no-go`, `verify`, `check` → each one MUST be a diamond with labeled branches
13. **Cross-check**: count diamonds in flowchart vs conditionals in code. If diamonds < conditionals, logic is hidden.
14. Read the D2 classes reference:
15. Copy the full `classes:` block into your `.d2` file
16. Declare nodes with classes:
17. Connect with Primary Flow (no inline styles needed for main path):
18. Add secondary edges with inline styles (copy from reference)
19. **3-second test** — Without clicking, narrate the main flow in 3 seconds
20. **Shape scan** — Each node's shape instantly tells you what it is per the standard
21. **Zero self-loops** — No edge where source === target
22. **Straight spine** — Primary flow edges are orthogonal, no large bends
23. **Visual hierarchy** — Secondary edges obviously lighter than primary
24. **fitView test** — "Show All" fits everything, no overlap, no drag needed