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 — 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.