State machine Layout Grammar & Editorial Diagram Guide

Describe legal states, transition events, and recovery paths.

When to use this diagram

Describe legal states, transition events, and recovery paths. Choose this grammar when that relationship is the main question your reader needs to answer. Establish the scope and the audience before adding detail; if ownership, timing, or quantity is the real question, compare the neighboring diagram families in the directory.

How to organize the layout

Choose a dominant flow direction and separate normal completion from failure or recovery. Label transitions with the event and any guard.

What to put in your source

Name the subject, its initial and terminal states, and every legal transition. Include event names and conditions; do not substitute call order for state logic. Keep the source specific and review the generated result against those facts before sharing it.

The 6 Editorial Diagram Design Principles & Geometry Laws

4px Grid: Align node coordinates, widths, heights, and corner radii to multiples of four. A shared grid makes tiers line up, gives labels predictable clearance, and lets small manual adjustments remain consistent.
Orthogonal r=8 Elbows: Route off-axis architecture and flow connectors through horizontal and vertical segments with 8px rounded turns. Keep arrows away from labels. Charts such as Sankey and polar plots retain the curves their data encoding requires.
Single Accent Focal Rule: Choose a primary decision, integration point, or bottleneck as the visual focus. Reserve coral for that story and keep supporting components quiet. Labels and shapes must still communicate meaning when color is removed.
5 Semantic Color Tokens: Use --paper for the canvas, --ink for primary text, --muted for annotations, --soft for quiet boundaries, and --accent for emphasis. Change the palette without changing what each visual role means.
Instrument Serif + Geist Typography: Set editorial headings in Instrument Serif, component names in Geist, and technical annotations in Geist Mono. Distinct text roles separate the diagram’s story from implementation details without adding decoration.
WCAG AA Brand Extraction: Enter a public brand URL to extract the five-color palette. The extractor checks ink against paper at a minimum 4.5:1 contrast ratio and corrects that pair when needed. Review the full diagram separately for accessibility.