Anatomy: Get Claude to Draw the Machine, Not the Boxes
Install the free Claude Code skill that turns one line about an idea into a live, working machine you can turn, press and read.
Back to all free guidesSo in the reel I showed Anatomy, the free Claude Code skill that draws the real machine instead of another slide of boxes and arrows. Here's the install line, the first prompts I'd try, and the maker's tips for getting a figure that actually explains something.
What it does
- It's free and open source. MIT licence, made by Ryan, and past 20,000 stars on GitHub.
- You name an idea in one line. Claude invents a machine that does it and draws it as a live figure you can turn, press and read.
- It's built from real parts. Every figure is dozens to hundreds of small solid parts that actually move.
- It checks its own work. It zooms in on every joint, and every number a figure shows comes from the same small model that moves its parts.
- The gallery is worth a look. The maker has 33 live figures up, including a Rolls-Royce Trent 970 where you drag the thrust lever and watch the thrust climb.
Before you start
You'll need Claude Code set up and signed in, plus:
- Node.js 20.10 or newer. The skills installer itself asks for 22.20 or newer, so check with
node -vfirst. - Chrome or Chromium. Anatomy uses it for the checks it runs on its own drawings.
Install it
Paste this into your terminal. The -a claude-code part skips the question about which agents to set up.
npx skills add wheresryan22/anatomy -g -a claude-codeThere's no API key and nothing else to install.
Your first figure
Start with the README's own first prompt. It's a good test because a rate limiter is exactly the kind of thing people normally draw as boxes and arrows.
/anatomy explain how a token bucket rate limiter works, interactiveIf you already know the machine you want, name it and say what should move:
/anatomy a heat-exchanger espresso machine with the side panel off: boiler, heat-exchanger tube, group head, pump, steam wand and gauge. Show the water flowing when you pull a shot. Standalone HTML, light theme.Explain your own idea
This is the one I'd use for a product or a process you have to explain at work. Fill in the two lines at the end:
/anatomy explain how the idea below works, as an interactive figure on a standalone HTML page, light theme. Use the real numbers I give you for anything the figure shows.
Idea:
Real numbers:The maker's tips
- Name the idea, not the drawing. Say what it should explain, and let Claude pick the machine.
- Give it the real numbers. The figure's readouts come from them.
- Say where it'll live. A standalone HTML page, an SVG file or a React component, light or dark.
- Let it take its time. It builds slowly on purpose, so set a figure going and come back to it.
Links
- The repo and README: github.com/wheresryan22/anatomy
- The maker's gallery, jet engine included: skills.wheresryan.sh/anatomy