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
State Machine
Best for: finite state logic — order status, auth state, connection lifecycle, form wizard, job queue status.
Layout conventions
- States are rounded rectangles (
rx=8), labeled in Geist. - Start: filled ink dot (
r=6). End: ringed dot (outerr=8outline, inner filledr=5). - Transitions: curved arrows labeled in Geist Mono as
event [guard] / action(omit sections you don't need). - Self-loops curve above the state.
- Orient along the dominant flow direction (left→right or top→down); rearrange before crossing transitions.
- Coral on the state the reader should notice — typically the error state, or "happy completion".
Anti-patterns
- More transitions than states × 2 → likely two state machines.
- "From any state" transitions drawn from every state — use a single annotation (
* → Error on timeout) instead. - Unlabeled transitions (the whole point is what triggers this).
Examples
assets/example-state.html— minimal lightassets/example-state-dark.html— minimal darkassets/example-state-full.html— full editorial