isogram

Diagrams that build the thing they explain.

isogram is a skill for Claude. Describe a feature and Claude builds a small isometric machine whose motion shows how it works, with a caption for each step. Drop it into a page as a web component, or export a GIF, PNG or SVG.

Download the skill How to install

Free and open source (MIT). Works in Claude.ai and Claude Code.

Look

Each one started as a sentence

Every diagram here was built by Claude with the skill, from the request under it. Click one to step through it, or use the arrow keys.

Rocket round trip
A rocket being built, launched into space, landing on a new platform and taken apart, then the loop starts over.
Jack-o'-lantern
Carving a jack-o'-lantern in five steps, on a spooky altar.
Robot assembly
The body flickers into existence, the head spirals down to screw on, claws bring in the arms, and the legs come up from below.
Request and response
A request travelling to a server and the response coming back.

Try every option

This is the same component you embed. Change it here, then copy the tag or export a file.

Embed code
Diagram

The four examples from above.

Look

How the same scene is drawn. Any diagram works in every look.

Theme

Starts on the theme the diagram was drawn for. Leave theme off your tag and it follows each visitor's system setting.

Show

The card around the diagram, the step captions and readout, and the progress bar.

Accent

The one colour for whatever is active right now: lit parts, the current step.

Pixel size

Pixel look only: how many screen pixels make one art pixel. Automatic keeps the art about 320 pixels across.

Export

PNG and SVG save the frame on screen: pause, then scrub or step a frame at a time (, and .) to pick it. GIF and WebM record the whole loop. SVG is for the vector looks.

From sentence to diagram

Claude does the drawing. You describe the feature and say what to change.

  1. Describe the feature

    “Show how our webhook retries work, vector look, for the docs.” Real numbers help: timeouts, limits, counts.

  2. Claude picks a machine

    Not boxes and arrows: an object whose working is the feature, like a tape deck for voicemail or a drawer cabinet for a cache.

  3. It checks its own frames

    It renders every step in every look, looks at them, and fixes what overlaps or reads badly before handing it over.

  4. You drop it in

    One script and one tag. It sizes to its box, pauses offscreen, respects reduced motion and steps with the arrow keys.

<script src="webhooks.isogram.js"></script>
<iso-gram name="webhooks" look="vector" theme="auto"></iso-gram>

Install

The skill is a folder of instructions and two small scripts. Pick where you use Claude.

  1. Download isogram.skill.
  2. Add it in Claude's settings, where your other skills are, by uploading the file.
  3. Ask for one: “Make an isogram of how our search indexing works.”

What's in the file

  • Instructions in plain text. SKILL.md and two reference files tell Claude how to design and check a diagram.
  • Nothing runs when you install it. Adding a skill only makes the instructions available.
  • Two small scripts, no dependencies. A Python script bundles a diagram into files; an optional Node script exports images if a browser is already installed. Neither installs anything.
  • The diagrams run in the page. The component draws on a canvas in your visitor's browser and makes no network requests.
  • You can read all of it. A .skill file is a zip: rename it and open it, or browse the source.

Questions

What's a skill?

A folder of instructions Claude loads when a task needs it. This one teaches Claude to design isometric diagrams and gives it the runtime that draws them.

Can I use the diagrams commercially?

Yes. The skill and the runtime are MIT licensed, and what you make with them is yours.

Does it need a framework?

No. The output is one script defining an <iso-gram> element. It works in plain HTML, React, Vue, Astro or a docs site.

Is it accessible?

Each diagram has a label and a list of its step captions for screen readers, steps with the arrow keys, and shows a still frame when reduced motion is on.

How do I update it?

Download the skill again and replace the old one. Diagrams you've exported keep working: each carries its own copy of the runtime.