Animated diagrams: turn one picture into a living diagram

A flat picture is hard to follow. A diagram that moves leads you through it.

I ask Claude for a prompt, Codex draws the picture, then Claude rebuilds that picture as code (an SVG) and fixes the flow logic himself. The result is a diagram where the arrows move in the right order, with an Allow run and a Deny run.

The example is the “How OAuth works” diagram from How It Actually Works. I use this in every demo that has a complex diagram.

Try it yourself

Ask Claude to write you a prompt for an image model (I use Codex), describing the flow you want drawn.
Generate the picture, then hand it back to Claude.
Ask Claude to rebuild it as an SVG in code that moves in the order the flow really runs.
Have it open the result in a real browser and check it (that’s Superpower #5).

Chapters

0:00Superpower: Animated diagrams
0:18Why animated diagrams (my MCP charts are just SVG files)
0:46Step 1: Ask Claude for the Codex prompt
1:29Step 2: Codex draws the picture
2:55The mockup: a complex flow as a flat image
3:43Step 3: Claude rebuilds it as code
4:07Claude finds the flow errors himself
4:54Step 4: Playwright checks it (full video: Superpower #5)
5:05Before and after: the living diagram
5:39Watch it explain itself
6:18The deny run
6:31Why I use these in every demo

Next superpower: #4, Opus plans. Sonnet builds. →

Narration is an AI voice (a clone of my own for the lunch footage), and the animation was made with AI tools.

The robot animation is made with Kling. Try Kling with my referral link. It’s a referral link, so signing up through it may earn me credits.

The narration is made with ElevenLabs. Try ElevenLabs with my referral link. It’s an affiliate link, so signing up through it may earn me a commission.