New · a 47-second film of draw-c4 at work

Point it at a repo. Get a diagram you can walk through.

A Claude Code skill that reads your code and writes one HTML file: C4 levels you can open, an inspector for every part, and runtime flows that play one hop at a time.

Open the Immich example →

$ npx skills@latest add ShibaInu0817/draw-c4-skill -g

Runs in Claude Code. The plugin updates itself. Needs Python 3, standard library only.

Back up a photo

Step 1 of 12 · Upload posted

The real output

Immich, read from its source

This is the diagram the skill wrote for Immich, a self-hosted photo server. Click into it: open a container, pick a flow on the left and press play.

examples/immich/architecture.htmlOpen full screen ↗

4levels to open

4runtime flows

18job queues found

1HTML file, no build

0pip installs

Open any part

Start at the containers and double-click into the ones with something inside. Up to four levels.

Play a request

Flows are grouped by area. Each step lights one line and says what the code does there, failures included.

The inspector showing SmartInfoService, what it talks to and what calls it

Ask what a part does

The inspector lists what each part talks to and who calls it, read from the real code.

Code over docs

Where it disagrees with Immich's own architecture page

It was built by reading the source, so it shows the system as it runs today.

~~immich-microservices~~

That container is gone

Background jobs run from the same image, started as a worker. The docs still draw a separate service.

~~web container~~

No separate web server

The API serves the built web app itself.

~~Redis as a queue~~

Redis does two jobs

It carries the job queues and is also the websocket backplane.

Getting one

Ask, and get two files

Ask in your own words
"Diagram this codebase", "how does a request flow through this?", or /draw-c4. It asks which flows and levels you want.
It reads the code
Compose files, modules, queues and handlers, not the README. Anything it cannot trace is left out.
You get two files
architecture.html to open and share, and model.json to update it next time.

# what Claude runs for you
python3 plot.py layout model.json --all
python3 plot.py check  model.json
python3 plot.py build  model.json architecture.html

Keyboard

Inside every diagram

/: Find a part
Enter: Open the focused part
←→: Previous or next flow step
Space: Play or pause a flow
F: Fit the diagram to the screen
Esc: Close, deselect, or go up a level
?: Show every shortcut

Before you install

Questions

Can I trust what it draws?

Every box is meant to trace back to a file, a config entry or a route handler. check catches a dangling reference or two overlapping boxes, but not a wrong claim. Read a new diagram before you rely on it.

What do I need installed?

Claude Code and Python 3. The scripts use the standard library only, so there is nothing to pip install.

How do I update a diagram after the code changes?

Ask Claude to refresh it. It reads the model back out of the HTML, edits it, keeps your layout and places the new parts.

Can I share the result?

Yes. It is one HTML file with no server and no build step. Commit it, send it, or open it from disk.

Point it at a repo. See your code.