Anatomy vs Mermaid
Which should you use? A side-by-side look at what each one does, who it suits, what it costs, how hard it is to set up, and where each falls short.
Open source · MIT
A Claude skill that builds interactive isometric SVG illustrations of machines to explain technical ideas.
Open source · MIT
Generate diagrams from Markdown-like text, for docs and code.
The short answer
Choose Anatomy if you need…
- Developers who want an explanatory diagram of a system or algorithm they can interact with
- Students learning how a mechanism or technical concept works
- Teachers preparing interactive visual explanations
- People already using Claude Code, Codex, OpenCode, or Antigravity who want illustrations from their agent
Choose Mermaid if you need…
- Developers who want diagrams stored as text alongside their code and docs
- Teams whose documentation is written in Markdown and needs diagrams
- Non-programmers who want to make diagrams using the Live Editor
- Projects that generate documentation as part of a build or production script
Side-by-side
| Anatomy | Mermaid | |
|---|---|---|
| Type | AI model / agent | Dev tool |
| Price | Free and open source | Free and open source |
| Licence | MIT | MIT |
| GitHub stars | 24k | 91k |
| Setup difficulty | Beginner | Beginner |
| How you get it | Install with a package manager | Install with a package manager |
| Main language | JavaScript | TypeScript |
| Last code update | 18 days ago | 4 days ago |
What each one is
Anatomy
Anatomy is an agent skill for Claude and other coding agents. You ask for a figure explaining a technical idea, and it builds a physical object whose working mirrors that idea, drawn as an interactive isometric SVG with optional WebGL shader effects and beta 3D parts. The README says it uses only Node's built-in modules and needs no API keys.
Mermaid
Mermaid is a JavaScript tool that turns short text descriptions into diagrams such as flowcharts and sequence diagrams. You write the diagram in a Markdown-inspired syntax and the renderer draws it, so the diagram can be edited as plain text. Its stated purpose is to keep documentation up to date with development.
Best for
Anatomy
- Developers who want an explanatory diagram of a system or algorithm they can interact with
- Students learning how a mechanism or technical concept works
- Teachers preparing interactive visual explanations
- People already using Claude Code, Codex, OpenCode, or Antigravity who want illustrations from their agent
Mermaid
- Developers who want diagrams stored as text alongside their code and docs
- Teams whose documentation is written in Markdown and needs diagrams
- Non-programmers who want to make diagrams using the Live Editor
- Projects that generate documentation as part of a build or production script
Strengths
Anatomy
- Installs with one command and needs no API keys or extra npm packages, per the README
- Figures are built to be interactive and to show live readouts from the same model that moves the parts
- Works across several agents (Claude Code, Antigravity, OpenCode, Codex, MiniMax Code) under the MIT license
Mermaid
- Diagrams are plain text, so they are easy to edit, diff, and version-control
- Works inside tools such as GitHub, according to the README
- Large, active open-source project with a published documentation site
Not ideal for
Anatomy
- Users who need plain static diagrams or charts for data reports, since the output is stylized isometric art
- People without a supported coding agent, because the skill runs inside one
- Anyone needing production-ready 3D graphics; the README labels the 3D mode as beta
Mermaid
- People who need pixel-precise, freeform illustration; the README describes it as text-defined diagrams rendered by a renderer
- Users who need a visual drag-and-drop editor as their main workflow, since the README centers on text input via the Live Editor
Trade-offs
Anatomy
- The 3D mode is marked beta and is limited to a few moving parts in the examples
- Output depends on the underlying agent's model, so results will vary with the prompt and agent used
- The README is truncated, so details of the full feature set and limits are not fully visible here
Mermaid
- Layout and styling are controlled by the renderer, so fine visual control is limited by what the syntax supports
- Requires learning the Mermaid syntax for each diagram type
Getting started
Anatomy
Install for Claude Code (global)
npx skills add wheresryan22/anatomy -g -a claude-codeInstall with the skills CLI, prompting for agents
npx skills add wheresryan22/anatomy -gFrequently asked questions
What is the difference between Anatomy and Mermaid?
Anatomy: A Claude skill that builds interactive isometric SVG illustrations of machines to explain technical ideas. Mermaid: Generate diagrams from Markdown-like text, for docs and code. Anatomy suits developers who want an explanatory diagram of a system or algorithm they can interact with, while Mermaid suits developers who want diagrams stored as text alongside their code and docs.
Are Anatomy and Mermaid free?
Anatomy: Free and open source. Mermaid: Free and open source.
Is Anatomy or Mermaid more popular?
Mermaid has more GitHub stars (91k) than Anatomy (24k). Popularity isn't the same as fit — check which one matches your use case above.
What are other alternatives to Anatomy and Mermaid?
Other options people compare them with include Excalidraw, watermarks-remover.
Keep comparing
Built from our catalogue entries for both products: open-source details come from each project's README (AI-assisted, refreshed weekly) and GitHub data; AI-tool details are editorial. Spotted something wrong? Let us know from either product's page.