Forget boxes: make the concept move #
Every diagram tool you’ve ever used draws boxes and arrows. This new AI skill, called Anatomy, has one rule: don't do that. Its core idea is that a conventional diagram only shows what exists, while a physical machine can show how a mechanism behaves.
Anatomy makes the AI invent a physical machine whose mechanism mirrors your concept. A cache key becomes a pin-tumbler lock, where the right key lines up pins to open the door. A TCP handshake is letters passed along a rope, and an LRU cache demonstrates state changes as it runs.
These aren't static images. Anatomy renders an interactive machine that you can poke and prod. This is a crucial distinction from tools like Mermaid, D2, Excalidraw, or other architecture diagram skills.
Those tools draw topology, mapping what connects to what across an entire system. Anatomy, however, explains one mechanism – how a single thing behaves. It builds a precise, small model to illuminate that specific process, not to map a whole system’s architecture.
The clever part happens before the drawing #
Anatomy’s real genius lies in its “Truth First” approach. The AI agent doesn't just start drawing; it first gathers all the rules and values, then builds a small, pure mathematical model of how the concept behaves. Only after this rigorous modeling does it plan and draw the visual.
This means interactive readouts on screen are wired directly into that underlying model, not just faked. When you change a control on an Anatomy diagram, you're not triggering a decorative animation; you're updating the actual demonstrated state based on the model’s calculations.
Geometry self-checks are also baked in. The system can confirm that nothing clips through other parts or that connections land where they should. It even ensures proper isometric z-ordering.
However, a crucial validation boundary exists: these checks only verify the picture, not the facts. The agent can confirm the geometry is sound, but it cannot establish that the facts or the metaphor itself are truly accurate. An explanation is only as true as its analogy. This is why you should always read the metaphor before you trust the drawing.
From connection pools to rocket engines #
So, how do you actually use this thing? You prompt the agent with a concept and its behavior, then add instructions like “interactive.” The video’s demo, for instance, models a database connection pool of ten connections, showing them borrowed, returned, and queued when all are busy.
Anatomy comes with several built-in examples that show off its range. These include a simple dial indicator, an interactive computer where you can type on the screen, and a detailed Raptor rocket engine that explodes into 11 assemblies with a WebGL exhaust plume. This demonstrates how it scales from basic devices to complex systems.
Anatomy is an open-source agent skill for compatible coding agents like Claude Code, OpenAI OpenAI Codex, OpenCode, and Antigravity. You can install it with npx or by cloning the repository. For more details, check out GitHub - wheresryan22/anatomy: An agent skill for creating detailed, interactive isometric illustrations.
The output is a standalone HTML/SVG file or a React component, which you can steer with options like dark mode or WebGL. This means developers can easily embed these dynamic visuals into documentation, blog posts, or landing pages, making abstract concepts genuinely interactive.
Enjoying this? Get one like it in your inbox each morning.
one email a day · unsubscribe in two clicks · no third-party tracking
A brilliant explainer—with a token meter #
Anatomy’s brilliant explanations come at a cost. Generating an interactive figure is not a quick whiteboard sketch; expect significant time and token consumption. A "normal" figure might take 30 to 90 minutes, while an "Epic" render can consume 2 to 4 hours, or even over 48 hours for highly complex designs. Estimates vary widely, so budget accordingly on metered plans.
This tool shines for specific use cases where a unique, interactive explanation justifies the effort. Consider it for:
- Technical documentation
- Teaching complex concepts
- Product landing pages
- Engaging blog posts
Always approach the output with a critical eye. Inspect the underlying physical metaphor: is it truly accurate? Test the interaction yourself. Budget for revisions, as the AI’s self-checks verify geometric integrity, not factual correctness of the analogy. A visual audit is no substitute for rigorous subject-matter review.
Frequently Asked Questions #
What is the Anatomy AI skill?
Anatomy is an open-source agent skill that creates interactive, illustrated machines to explain how technical concepts behave.
How is Anatomy different from Mermaid diagrams?
Mermaid maps components and connections; Anatomy builds a physical metaphor that models one mechanism and can respond to interaction.
What does Anatomy generate?
It can produce a standalone HTML page with SVG visuals or an embeddable React component, with optional WebGL or experimental 3D.
Is Anatomy fast or inexpensive to use?
Not necessarily. Complex figures can require lengthy agent runs and substantial tokens, so check the scope and cost before starting.
Can Anatomy verify that its explanation is correct?
It can test aspects of the geometry and interaction, but those checks do not prove that the chosen metaphor or technical explanation is accurate.