Figures that stay true

Every figure here is SVG whose colours are var(--…). They are inlined on this page, so they wear its theme — and if your system asks for dark, they follow it with nothing re-rendered.

Fifteen diagram forms and the chart forms are documented in the skills; these are the ones the examples use, each with the question it answers.

Drawn where position means something

Architecture, change views, deployment maps and dependency graphs are hand-authored on a 4px grid with one accent, because their layout carries meaning.

Laid out where the protocol decides

Sequence diagrams are prerendered from Mermaid; charts are computed with Plot. Both come out as SVG on tokens, never as images.

Checked, not eyeballed

Eighteen geometry and markup rules run on every figure's coordinates, and every page is rendered at 1280px, 390px and print to catch clipping.

The same figures as standalone documents, for comparing themes: editorial-coral · console-violet.