What is Anatomy?

Anatomy is an open-source agent skill and drawing kit for explaining technical ideas through interactive isometric figures. A compatible coding agent turns a concept into a concrete mechanism, builds its parts with the supplied kit and connects pointer or keyboard interaction to a small state model. The result is editable source rather than a flattened generated picture.

The project supports static SVG, standalone HTML and React or Next.js components. WebGL layers add effects such as water, light or exhaust inside the same projected scene. A separate beta 3D mode handles parts that rotate or move in true three-dimensional space. These output paths have different runtime and verification requirements.

The workflow starts with the idea and the values the figure must explain, then plans parts, constructs geometry, adds motion and inspects the output. Numbers in a readout are intended to come from the same model that moves the figure. That model still needs a valid explanation and assumptions; visual coherence is not scientific or engineering certification.

The reviewed release is Anatomy 1.1.0, published October 12, 2026, under MIT. The documentation names Claude Code, OpenCode and Codex as compatible hosts. The gallery shows official example figures captured by the project.

Inside the application

Anatomy screenshots

Explore the interface. Open a screenshot to view it at full size.

View full size ↗

Anatomy screenshot 1

Official example of Anatomy's beta 3D mode. This is a captured generated figure, not a design-editor interface.

View full size ↗

Exploded engine figure

Official generated example from the project. The figure illustrates a mechanism and is not a certified engineering model.

View full size ↗

Ripple-tank figure

Official SVG and WebGL example supplied by the project; not an iThub-created simulation or scientific validation.

Source: official Anatomy project page.

Key capabilities

A concept-to-mechanism workflow The skill asks what a figure should explain before choosing the object to draw. A stateful software idea can become an inspectable physical analogy with parts, motion and a live readout. Supply the true counts, units and thresholds so the generated mechanism has something concrete to represent.
A programmatic isometric drawing API The kit API documents projection, solids, shading, parts, pipes and geometry audits. TypeScript and plain ESM variants support source-controlled builds. This is a drawing-library API used inside a project, not a hosted image-generation endpoint.
SVG and standalone HTML output Framework-free figures can be delivered as a page or a standalone SVG with embedded styles. Static geometry remains inspectable and can be versioned with documentation. Interactivity needs the corresponding runtime; exporting a lone image does not retain every interaction from the HTML figure.
React component output React output separates server-safe drawing components from client-side interaction hooks. The documented requirement is React 18 or later for that path. The React guide explains integration choices; the kit's general no-dependency statement does not remove the host application's React dependency.
Registered WebGL effects The WebGL layer sits between back and front SVG geometry using the same isometric camera. It can represent effects that a collection of simple outlines cannot. The WebGL reference describes this arrangement. Browser capability and graphics performance still need checking on the intended devices.
Geometry and visual verification The toolkit checks configured intersections, attachments and depth ordering, while browser scripts capture close-ups and interactions. These checks help find broken joins and rendering mistakes. They do not establish that the illustrated machine, physical dimensions or teaching model is correct outside the authored scene.
Light, dark and motion behavior The documented workflow considers both themes and reduced-motion behavior. Pointer and keyboard interactions are part of the figure design. Review them in the page that will host the output, including a static or reduced-motion state, rather than judging accessibility from an attractive still image.
An explicitly beta 3D path Moving 3D groups are reprojected and reshaded while other scene parts can remain static. The project labels this path beta and documents complexity-related limits. It should be evaluated on a representative scene and target device, especially when many parts or continuous movement are involved.

Where Anatomy fits

Explaining a software mechanism in documentation

Start with the actual state transitions: a request entering a queue, a connection being borrowed or a cache item expiring. Provide the counts and conditions that make the behavior meaningful. Ask for a figure whose interaction reveals those changes, then review its labels and readouts against the real system rather than only the visual analogy.

Building an interactive technical article

Choose standalone HTML when the figure should be easy to inspect without a framework. Choose React output when it needs to live inside an existing React application. Test the figure at the article's real content width. A full-screen example can become illegible when embedded beside text or inside a narrow mobile column.

Illustrating a machine or instrument

Name the parts and the movement that carry the explanation. Use the included drawing primitives to keep geometry and animation connected, then inspect joints and depth order. The example engines, gauges and ripple tank show the intended style; they do not establish exact accuracy for a different machine generated from a prompt.

Maintaining a visual with source control

Keep the generated build script, model, geometry and relevant kit version alongside the page. When a system parameter changes, update the model and the explanation together, rebuild and rerun the checks. The verification guide describes the evidence to inspect after a visual or interaction change.