svg-diagramslisted

# Drawing a diagram Diagrams here are hand-authored inline SVG. They inherit the surrounding design tokens, so they retarget when the document does, and they are checked before they ship. Work in this order. ## ① Decide whether a diagram earns its place A diagram is worth making when the relationship between things is the point. If the content is a sequence of items, write a list. If it is values across two axes, use a table: `.matrix` in `interior.css` already handles those, and a table is not a drawing. ## ② Pick the archetype Read `references/archetypes.md`. Six archetypes cover most of what a technical book needs: flow, pipeline, cycle, layered stack, node map, annotated anatomy. Each links a worked example under `assets/examples/` that already passes the checker. Start from the closest one rather than from an empty file. ## ③ Draw it Read `references/grammar.md` before writing any SVG. Three rules do most of the work: - **One user unit is one point.** `font-size="9"` then means 9pt on paper. - **Maximum width is 410.4 units**, the text measure at the default 7 × 10in trim. - **Every colour is `var(--token, fallback)`.** Never a literal hex. The constraint that catches people: **the palette has three tonal levels, not seven colours.** In greyscale `--accent` and `--support` sit at 1.14:1, `--caution` and `--muted` at 1.02:1, and even `--paper` against `--pale` at 1.13:1. Those pairs are the same grey on paper. So a diagram can encode at most three categories by