Diagram Cookbook

A reference catalog of inline SVG diagrams in the house style — copy, paste, adapt.

FiledMay 10, 2026Read53mChannelOpen

This page is the library, not an essay. It exists to be browsed when a piece needs a diagram. Everything below is a small SVG that already speaks in the site's vocabulary: deep moss for grids, sage for the cool side, amber for the hot side, mono for axis labels. Copy any block into an .mdx file inside <Diagram number="…" caption="…">…</Diagram> and adapt the labels.

Every diagram uses the same viewBox (0 0 720 320) so they sit at consistent heights inside the prose column. Stroke widths and font sizes are tuned for that scale.

Curves & trajectories

The first family of diagrams is for shapes that change over time. Use them whenever an essay is about pace, momentum, or the difference between two trajectories.

Fig. 01Linear vs compound — the canonical 'silent zone' diagram.

Fig. 02Exponential decay — half-life. Use when arguing about attention, novelty, memory, or any quantity that erodes.

Fig. 03S-curve / saturation — growth that finds a ceiling. Useful for adoption, learning, complexity budgets.

Fig. 04Step function — the threshold cliff. Things look the same until they don't.

Fig. 05Wave under noise — the signal you keep missing. Use when arguing for patience or repeated measurement.

Cycles, fields & space

When time isn't the right axis, reach for a shape: a wheel, a topology, a 2x2.

Fig. 06Phase wheel — four quadrants of a cycle. Seasons, sleep stages, project phases.

Fig. 072x2 quadrant — the eternal essay shape. Two axes, four kinds of thing.

Fig. 08Topographic contours — rings of a single peak. Use for influence, attention gradient, or expertise depth.

Fig. 09Tilted orbit with a single body — for essays about time, place, or recurrence.

Networks, hierarchies, paths

When the relationship between things matters more than the trajectory.

Fig. 10Feedback loop — three nodes pulling on each other in a circle. The classic dynamics primitive.

Fig. 11Branching futures — a decision tree. Use when arguing about path-dependence or option value.

Fig. 12Network with weighted edges — two clusters linked by a thin bridge. The 'small world' essay shape.

Fig. 13Path with waypoints — a winding trail through a labeled itinerary.

Stacks, fields, distributions

Diagrams of substance and proportion — when the essay is about composition, not motion.

Fig. 14Strata — sediment-style horizontal bands. Use for layers of a system, history, or accumulated work.

Fig. 15Distribution — a long-tail histogram. Use for power laws, success curves, or attention.

Fig. 16Attention heat strip — time across the X axis, intensity in color. Useful for sleep, energy, focus, productivity charts.

Fig. 17Funnel / cascade — narrowing stages. Adoption funnels, attention drop-off, decisions narrowing.

Fig. 18Time blocks — Gantt-style horizontal bars showing parallel tracks.

Science

The first themed set. Diagrams from physics labs, observatories, and chalkboards. Use when an essay leans on a model from the natural sciences.

Fig. 19Light cone — past and future at a single 'now'. The cleanest spacetime diagram for arguments about causality.

Fig. 20Standing wave — two sinusoids meeting in interference. Use for resonance, coupling, or any 'in-phase / out-of-phase' argument.

Fig. 21Phase transition — temperature climbs but the substance pauses on plateaus. Energy goes into changing state, not heat.

Fig. 22Phase space — a pendulum's closed orbit in (position, velocity). Useful for any periodic system that returns to itself.

Fig. 23Energy levels — discrete rungs and the photons that jump between them. Use for quantization or any 'permitted state' argument.

Theology

For essays about meaning, faith, ritual, or sacred geometry. The shapes here are older than physics; they reward restraint.

Fig. 24Trinity — three persons, one substance. A relational triangle with bidirectional bonds.

Fig. 25Sefirot — ten emanations on three columns. The kabbalistic tree as a pure node-and-edge graph.

Fig. 26Mandala — concentric rings unfolding from a still center. For ritual, contemplation, or any inside-out argument.

Fig. 27Pilgrim's path — winding route with stations. The shape of any practice that stops, prays, then continues.

Fig. 28Shaft of light — a beam descending into the dark. For grace, revelation, or any 'something breaks in' moment.

Philosophy

Old shapes for old problems. These earn their keep when the essay is about how we know, what we ought, or whether the table is real.

Fig. 29Plato's cave — the prisoner, the fire, the wall, the shadow. The original 'mediated reality' diagram.

Fig. 30Ship of Theseus — every plank slowly replaced. A timeline of identity under continuous change.

Fig. 31Trolley problem — branching track and a weighted lever. A diagram for any zero-sum moral choice.

Fig. 32Hegelian dialectic — thesis, antithesis, synthesis. Two arrows meeting in a third position.

Fig. 33Map and territory — two grids, mostly aligned, with a few telling gaps. For arguments about models that almost fit.

AI & agents

Diagrams for the new field. Use sparingly — every essay about AI already contains too many diagrams.

Fig. 34Attention matrix — tokens attending to tokens, brighter where the weight is higher. The transformer's signature visual.

Fig. 35Agent loop — observe, think, act, observe again. The minimal control loop for any closed-loop system, biological or otherwise.

Fig. 36Loss curve — staircase descent with plateaus where progress hides. The training-run shape every researcher recognizes.

Fig. 37Embedding space — concepts cluster, with a few anchor terms labeled. A lossy 2D view of a much higher-dim manifold.

Fig. 38Tool-use tree — an agent expands a task by calling tools and reading results. Branches close as side-effects resolve.

Work

For essays about teams, calendars, careers, and the long shape of a job. Restraint helps; org charts get ugly fast.

Fig. 39Org chart — a clean three-tier hierarchy. Use only when the structure itself is the point.

Fig. 40Sprint cadence — fixed-width blocks repeating with planning, build, ship, retro. The shape of any drumbeat process.

Fig. 41Career S-curves — overlapping climbs across roles. Each new curve starts before the last one peaks.

Fig. 42Maker vs. manager day — the same hours, two different shapes. Big blocks for one, small chops for the other.

Fig. 43Swim lanes — parallel responsibilities crossing the same horizontal time axis. Hand-offs become explicit.

Psychology

Cognition and feeling. Use carefully — these diagrams age fast as the underlying science shifts.

Fig. 44Maslow pyramid — needs stacked from base to peak. The most-used and most-misread stack in pop psych.

Fig. 45Yerkes-Dodson — the inverted-U of arousal and performance. Too little and you're flat; too much and you crash.

Fig. 46Confirmation funnel — wide intake, narrow filter, lopsided belief. Whatever survives the filter shapes the conclusion.

Fig. 47Emotion wheel — concentric petals from broad valence to specific feelings. Based on Plutchik, simplified.

Fig. 48Habit loop — cue, routine, reward, repeat. The minimal cycle behind every learned behavior.

Biology

For arguments grounded in living systems. Use the strongest one shape and trust the reader to fill in the rest.

Fig. 49Cell — membrane, nucleus, organelles. The most-drawn diagram in any introductory text.

Fig. 50Phylogenetic tree — common ancestors and the branches that lead to today. Read time as flowing left to right.

Fig. 51Predator and prey — out-of-phase oscillations. When one rises, the other falls; the cycle never settles.

Fig. 52Membrane gradient — ions piled on one side, channels letting them flow back. The basic unit of a nerve impulse.

Fig. 53DNA — two phase-shifted strands joined by rungs. Use when the essay leans on inheritance, copy, or replication.

Technology

For essays about systems, networks, and stacks. The diagrams here are deliberately schematic — the metaphor matters more than the topology.

Fig. 54System architecture — four boxes, the calls between them, an external boundary. Strip until only the load-bearing arrows remain.

Fig. 55Network topology — a star at left, a mesh at right. Two ways to wire the same four nodes.

Fig. 56Layered stack — strict isolation, each layer talks only to its neighbors. The OSI shape and many of its descendants.

Fig. 57Memory hierarchy — small, fast, and expensive at the top; large, slow, and cheap below. The latency pyramid.

Fig. 58Data pipeline — ingest, transform, enrich, load. Each stage owns one verb; the queue between them is what bends.

How to use a diagram

Inside any .mdx file, wrap one of the SVGs above in a <Diagram> block:

<Diagram number="03" caption="Your caption goes here.">
<svg viewBox="0 0 720 320" xmlns="http://www.w3.org/2000/svg">
  ...
</svg>
</Diagram>

Three rules of thumb. (a) Use sage for the calm side, amber for the consequential side, deep moss for grids and labels. (b) Keep stroke widths between 1 and 1.8. (c) Captions are mono and short, in lowercase sentence case after the number.

If a diagram needs more than one of these primitives, it usually means the essay is doing too much. Pick the one shape that earns its place, and let the prose carry the rest.

— Everett

//continue reading