I've spent years delivering technical projects, and I keep running into the same thing: when a concept fails to land, it's rarely because the diagram was bad. It's because the metaphor was wrong.
Here's a concrete case. Explaining caching, I'd draw the usual boxes: request comes in, check cache, hit returns early, miss goes downstream. Correct — and useless. Clients would nod, then ask: "so where exactly do we save?"
Boxes and arrows describe what, not why. If the listener doesn't already understand the mechanism, the diagram doesn't help.
A different approach: draw the object, not the flow
Anatomy (7459 stars, MIT) takes the opposite route. Instead of a flowchart, it builds a real, working physical device that behaves like the concept — then renders it as an interactive isometric figure.
To explain "cache hit skips the computation," what does it draw?
A pin tumbler lock.
A row of pins inside the cylinder. Only when every pin is lifted to the same height will the lock turn. One mismatch and nothing moves.
That's a cache hit: all keys must match to take the shortcut. And it's interactive — you can manipulate the pins and watch the mechanism respond.
Same pattern elsewhere:
- Token bucket rate limiter → a bucket that actually leaks
- Cache eviction → a conveyor belt with sorting gates
- Concurrency control → interlocking gears
Output is SVG, optionally with WebGL shaders or full 3D.
Using it
npx skills add wheresryan22/anatomy -g -a claude-code
/anatomy explain how a token bucket rate limiter works, interactive
It's an agent skill — works in Claude Code, OpenCode (/anatomy), and Codex ($anatomy). No API key, no npm install (Node built-ins only).
What I actually do with it
Before a solution review, I run the key mechanisms through it and pick the figure whose metaphor lands best.
One practical tip: don't ship the first output. Ask for several variants of the same concept — the third metaphor is usually the one that clicks. Same as asking a person to explain something; the first answer tends to be the rehearsed one.
The bigger point: this step (abstract → concrete) used to depend entirely on someone's inspiration. Now it can be iterated cheaply.
Limits
- It's an explanation tool, not a drafting tool — the output is stylized isometric art, not engineering drawings
- Heavy stylization means formal materials may still need manual adjustment
- Requires an agent environment (not standalone software)
- It explains how a mechanism works — it doesn't decide whether you should do it
Chinese localization with a quick-start section: https://github.com/yangshun2005/anatomy-cn
If it's useful, a star on the original repo helps the author.
Top comments (0)