Cathryn Lavery
53bd8dde0f
Thirteen editorial diagram types (architecture, flowchart, sequence, state, ER, timeline, swimlane, quadrant, nested, tree, layers, venn, pyramid) as self-contained HTML files with inline SVG. Progressive disclosure: lean SKILL.md points to per-type references. Neutral stone+rust default skin, first-run gate that prompts users to customize the style guide from their own website, URL-based onboarding, annotation-callout primitive, sketchy filter variant, live gallery at assets/index.html.
1.1 KiB
1.1 KiB
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
- Oval (
- 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 lightassets/example-flowchart-dark.html— minimal darkassets/example-flowchart-full.html— full editorial