Anatomy skill: interactive diagrams explained
The Anatomy skill by Ryan helps coding agents build interactive, isometric illustrations. If you found it through the /anatomy command, this guide explains where to start and how to explore visual explanations in your browser.
Learnatomy is an independent learning app built with the MIT-licensed Anatomy kit. Ryan maintains the original skill and collection; this website is not the official Anatomy project.
Try an explanation in your browser
Start with a question below. Each Learnatomy explanation has playback controls, a written transcript and components you can inspect by hovering or tapping. These examples are ready to explore without an account.
- Inside a computer — A computer turns instructions into actions by moving information between its input devices, memory, processor, storage, and output devices.
- Four-stroke engine — A four-stroke gasoline engine repeats intake, compression, power, and exhaust to turn fuel energy into mechanical motion.
- Adding fractions — To add fractions, count pieces of the same size. For 1/2 + 1/3, sixths give a shared unit: 3/6 + 2/6 = 5/6.
- How caching works — A cache keeps reusable results close to where they are needed. A matching valid entry avoids repeating a slower operation.
- Inside a refrigerator — A refrigerator uses electrical work to move heat from its cooler interior into the warmer room through a repeating refrigerant cycle.
- An electric circuit — A simple steady-current circuit needs a conducting path from one battery terminal, through its components, and back to the other terminal.
- A message queue — A queue holds messages until a consumer can process them. Producers can submit work without waiting for each job to finish, while consumers handle it at their own pace.
What makes an interactive diagram useful?
A still image shows where things are. A sequence can show what happens next. In our computer explanation, follow an instruction from input to memory, processing and output. Pause at memory and inspect its description: that makes it easier to distinguish temporary working space from persistent storage.
For a cache, ask two separate questions: what happens when the requested item is present, and what happens when it is missing? Follow each path before moving on. For fractions, check the equal-sized pieces against the calculation. Motion helps direct attention, but the quantities and explanation still need to agree.
Using the original Anatomy skill
The original project supports Claude Code, OpenCode and Codex. Follow its official quick start for installation and current commands. The invocation is /anatomy in Claude Code and OpenCode, or $anatomy in Codex. Browse Ryan’s original collection for his interactive figures.
How Learnatomy differs
The skill is a tool for building illustrations in a coding workflow. Learnatomy presents explanations in a browser, with a consistent player and readable steps. Our homepage includes three original Anatomy collection figures with attribution. Our step-by-step examples use our own explanations and assemblies.
Custom generation is being prepared and is not available yet. You can explore and share the existing public examples now.
Learn with the diagram, then check it
Pause before a step and predict what will happen. Inspect a component you do not recognise, then read the full transcript. Finally, explain the process without looking. If the diagram uses a physical analogy for software, read “About this visual model” to see where the analogy stops.
These are simplified educational models. Follow the references on each authored explanation to check details; generated explanations can contain errors. A convincing animation alone does not establish that an explanation is correct.