Specimen
Diagrams
A specimen of every diagram, chart, and illustration primitive — the visual counterpart to the kitchen sink.
This page is to diagrams what the kitchen sink is to type: a living catalog of every figure primitive the site can render, so visual regressions show up before they ship. Two families share one visual language — static figures authored in Typst and compiled to SVG, and interactive islands driven by a small state machine. Both are drawn in currentColor, so they theme with light and dark alike.
Static diagrams (Typst)
Authored as Typst source under content/diagrams/, compiled to SVG at build time, and inlined into the page. The shared helpers in lib.typ (node, arrow, gloss) give every figure one hand.
The four-step pipeline every build system implements:
Interactive — a state machine you can drive
A transition graph with two alphabets: solid arrows are the user's events, dashed arrows the programmatic ones (hidden until revealed). Fire events and watch the current state move; the mixed state has no solid arrow into it — a state you can leave but never enter.
Interactive — the incremental fold at scale
Slide the leaf count to tens of thousands and toggle a checkbox: the readout shows the edit recomputes only the leaf's ancestor chain — the tree's depth — while the total node count explodes. The visible rows are a virtualized window over the whole tree.
Interactive — the configuration quotient
A checkbox tree's state space, drivable. The leaf row is a binary number you can poke; the grid draws one cell per configuration, colored by the summary glyph the parent would show (one all-checked cell, one all-unchecked, everything else the dash). Slide the leaf count and watch outrun the grid, then the clicking hand, then the age of the universe.
Interactive — dependency ripple
A build graph. Click a node to "edit" it and watch the dirty set propagate downstream, one dependency-hop per tick — cost proportional to the change, not the file count.
Bar chart
Direct-labeled, one accent bar for the subject. Bars grow in on first paint.
Slope chart — before / after
Tufte's slope: one line per item from before to after. A descending line (faster) takes the accent; the line itself carries the story.
Profiling timeline
Swimlanes of build actions over time. Hover a span for its duration; the critical path takes the accent.
Flamegraph
A profile as a tree of frames; width is proportional to sample count. Click a frame to zoom in; click a breadcrumb above to zoom back out.
Step-through (the restart renderer)
A discrete, narrated walkthrough for an "aha" mechanic — here, a function that asks for a dependency, gives up, and is restarted once the dependency is ready. Step and Reset advance the machine.