Anatomy Agent Skill: Build Interactive Isometric SVGs

Your technical diagram is full of boxes and arrows, but readers still cannot understand how the machine or system actually works.

Anatomy is an open-source agent skill that helps coding agents create detailed, interactive isometric illustrations. It generates SVG-based machines with moving parts, optional WebGL effects, and experimental 3D interactions. Developers can use it to explain technical concepts visually and publish the results as standalone HTML, SVG, or React components.

If you searched for "anatomy: an agent skill for creating detailed, interactive isometric illustrations of real-world machines and complex systems. generates polished svgs with optional webgl shaders and 3d effe", you're looking for the Anatomy GitHub repository maintained by wheresryan22.

Unlike a traditional diagram editor, Anatomy gives an AI coding agent the instructions and drawing tools needed to build a working visual explanation.

Here's how to install it, generate a figure, and add that figure to a real website.

1. Understand What the Anatomy Isometric Illustration Skill Creates

Anatomy is not a standalone drawing application or an image-generation API.

It is an Agent Skill: a repository containing a SKILL.md instruction file, a JavaScript drawing kit, reference documentation, example illustrations, and verification scripts.

A compatible coding agent reads these instructions and uses the included tools to construct mechanical illustrations.

The repository supports three main output types:

Output	Best use
SVG	Interactive machines, equipment diagrams, documentation
SVG + WebGL	Fire, smoke, water, lighting, exhaust, and other visual effects
Experimental 3D	Rotating parts, mechanical movement, and spatial interaction

For example, imagine explaining API rate limiting.

A traditional diagram might show a client, an API server, and a database connected by arrows.

With Anatomy, you could represent the rate limiter as a mechanical token dispenser. Requests consume tokens, an internal mechanism replenishes them, and a live display shows the available capacity.

The illustration becomes an explanation users can interact with.

The official repository includes examples involving a rocket engine, an arcade cabinet, a dial indicator, and a ripple tank.

These examples demonstrate the kind of mechanical detail the drawing kit can produce. They are not guarantees that every generated illustration will have the same quality.

2. Install Anatomy for Claude Code, Codex, or OpenCode

Before installing Anatomy, check that your development environment has Node.js and npm available.

Open a terminal:

node --version
npm --version
npx --version

Anatomy's drawing tools require Node.js 20.10 or newer. The documented skills CLI may require a newer Node.js release, so Node.js 22.20 or later is a suitable choice for the CLI installation method described here.

You also need a supported coding agent, such as Claude Code, Codex, OpenCode, or Antigravity.

Install for Claude Code

Run:

npx skills add wheresryan22/anatomy -g -a claude-code

The -g flag installs Anatomy for your user account. The -a flag selects the target coding agent.

For Codex:

npx skills add wheresryan22/anatomy -g -a codex

For OpenCode:

npx skills add wheresryan22/anatomy -g -a opencode

For a project-specific installation, run the following inside the project directory:

npx skills add wheresryan22/anatomy

The installer will guide you through agent selection.

Anatomy's drawing kit uses Node.js built-in modules, so it does not require a separate npm install inside the skill repository. React integration is an exception because React itself must already be available in the target application.

If Claude Code does not recognize the skill after installation, try:

/reload-skills

Review third-party skill files before allowing an agent to execute their scripts.

3. Generate an Interactive SVG With Anatomy

Now let's build something useful.

We'll create an interactive illustration explaining a token bucket rate limiter, a common mechanism used to control API request volume.

Open Claude Code in your project and enter:

/anatomy explain how a token bucket API rate limiter works.

Create an interactive isometric mechanical illustration.

Use these demonstration settings:
- Bucket capacity: 10 tokens
- Refill rate: 2 tokens per second
- Every request consumes 1 token
- Reject requests when no tokens are available

Show tokens entering, being consumed, and replenishing.
Include a live token counter and accepted/rejected request status.

Use SVG with smooth mechanical movement.
Include keyboard interaction and reduced-motion support.

Generate a self-contained HTML file named rate-limiter.html.
Use a light theme.

These numbers are illustrative configuration values, not benchmarks or defaults imposed by Anatomy.

The agent should construct the illustration using the Anatomy kit.

Depending on the generated design, the output may include a build script, SVG geometry, JavaScript interaction logic, and the HTML page.

What should the result look like?

The important elements are:

• A recognizable mechanical system representing token storage.
• Visible movement when a request consumes a token.
• A readout consistent with the underlying token model.
• Clear feedback when requests are rejected.
• Interactions that work beyond a static screenshot.

If the illustration looks attractive but displays incorrect token counts, it is not finished.

The visual behavior must agree with the logic it claims to explain.

4. Build an Existing Anatomy SVG Example

Before integrating a generated illustration into production, it's worth examining an example supplied by the repository.

Clone the source:

git clone https://github.com/wheresryan22/anatomy.git
cd anatomy

Build the dial indicator example:

node examples/dial-indicator/build.mjs

The script generates example pages alongside its source files.

The dial indicator demonstrates how Anatomy combines shaded mechanical parts with pointer-driven movement.

To request the light theme:

node examples/dial-indicator/build.mjs --light

You can also explore a more complex illustration:

node examples/arcade-cabinet/build.mjs

This example models an arcade cabinet containing mechanical and electronic components.

For an example that includes a geometry audit, run:

node examples/arcade-cabinet/build.mjs --audit

The audit is designed to detect problems involving geometry, connections, and depth ordering.

That's one of Anatomy's interesting differences from an ordinary AI image generator: its output is source code and geometry that can be inspected and checked.

The repository also provides browser screenshot and interaction scripts.

Chrome or Chromium is required for those browser-based checks.

5. Add the Generated Illustration to Laravel or React

Suppose you're building documentation for a Laravel application.

You want visitors to understand how the application's API rate limiter works without making them read a long technical explanation.

The simplest integration is a standalone HTML illustration.

Ask your coding agent to generate the file directly inside your Laravel project:

/anatomy create an interactive token bucket rate limiter illustration.

Save the output as:
public/anatomy/rate-limiter.html

Make it a standalone HTML document with its required
styles, scripts, and SVG included.

Do not depend on external CDN resources.

After confirming the file exists, embed it in a Blade template:

<section class="rate-limiter-explainer">
    <h2>How Our API Rate Limiter Works</h2>

    <iframe
        src="{{ asset('anatomy/rate-limiter.html') }}"
        title="Interactive API rate limiter illustration"
        loading="lazy"
        style="width: 100%; min-height: 600px; border: 0;"
    ></iframe>
</section>

The browser loads the illustration separately from the surrounding Laravel page.

This approach avoids mixing the generated drawing logic with your Blade template.

It also makes replacing the illustration straightforward.

For React or Next.js, Anatomy supports a different output structure, including static geometry and client-side interaction components.

Request that explicitly:

/anatomy explain database connection pooling.

Build an interactive isometric machine illustration.

Output React components compatible with React 18 or newer.
Separate static rendering from client-side interactions.

Include a live readout showing active, idle,
and waiting database connections.

Use the generated React files according to their imports and dependencies.

Don't assume a standalone HTML export can be imported directly as a React component.

For other agent-assisted development workflows, see our Gemini 4 Argon guide for web developers.

6. Compare Anatomy With Mermaid, SVG Editors, and Three.js

Anatomy is useful, but it does not replace every visualization tool developers already use.

Here is where it fits.

Tool	Strength	Limitation compared with Anatomy
Mermaid	Flowcharts and architecture diagrams	Not designed for detailed mechanical illustrations
Figma	Manual visual design	Complex animation requires additional implementation
Inkscape	Precise SVG editing	Interaction logic must be developed separately
D3.js	Data-driven visualizations	Mechanical illustrations require custom drawing work
Three.js	Full 3D scenes	More rendering and scene-development work
Anatomy	Agent-generated mechanical explainers	Narrower scope and potentially lengthy generation

I would choose Mermaid for a deployment flowchart, D3.js for a data dashboard, and Anatomy for explaining how a physical mechanism or software concept operates.

For example, Anatomy makes sense when describing a cache, queue, database connection pool, or machine assembly.

It is less appropriate for ordinary business charts, geographic maps, or illustrations of people.

There are also technical limitations.

WebGL effects depend on browser graphics support. The underlying SVG remains readable without WebGL, according to the project's documentation.

The true 3D functionality is still marked beta in the repository.

Complex illustrations require additional review, particularly when they describe actual engineering equipment. A convincing drawing should never be treated as proof of mechanical accuracy.

Anatomy is an explanation tool, not an engineering verification system.

Quick Verification: Check the Generated Figure

After generating your Laravel illustration, start the application:

php artisan serve

Open:

http://127.0.0.1:8000/anatomy/rate-limiter.html

Confirm that the illustration appears, pointer and keyboard interactions work, the token count changes correctly, and no JavaScript errors appear in the browser console.

Check the page at mobile width and with reduced-motion settings enabled.

If browser verification fails because your coding agent's sandbox blocks headless Chrome, run the repository's checking scripts in an appropriately permitted local environment rather than disabling every sandbox restriction.

The repository documents these checks in its official README.

Next steps: Start with one relatively simple SVG illustration and validate its behavior before adding WebGL or experimental 3D. For production documentation, prioritize understandable motion, correct numbers, keyboard accessibility, and reasonable loading performance over visual complexity.

FAQ

Is Anatomy free and open source?

Yes. The Anatomy repository is published under the MIT license. Its drawing kit does not require a separate API key, although the coding agent you use may have its own access requirements or usage costs.

Does Anatomy require Claude Code?

No. Anatomy was developed around Claude Code but also documents support for Codex, OpenCode, and Antigravity. Installation and invocation differ by agent; Claude Code and OpenCode support /anatomy, while Codex uses $anatomy.

Can Anatomy generate SVG without WebGL?

Yes. SVG is Anatomy's core output format. WebGL is optional and intended for effects such as fire, steam, reflections, and water that are difficult to express using ordinary SVG geometry alone.

Can I use Anatomy illustrations in Laravel or WordPress?

Yes. You can serve standalone HTML or SVG output as part of a website, provided you include any required assets. Laravel can serve an HTML illustration from its public directory, while WordPress can embed a hosted illustration using an iframe or a suitable custom integration.

Is Anatomy better than an AI image generator?

That depends on the job. Image generators are useful for static visual artwork, while Anatomy focuses on source-based, interactive mechanical explanations that developers can inspect and modify. If you reached this guide through the search phrase "anatomy: an agent skill for creating detailed, interactive isometric illustrations of real-world machines and complex systems. generates polished svgs with optional webgl shaders and 3d effe", the key distinction is that Anatomy builds functioning visual explainers rather than simply generating pictures.