Use interactive-diagram

Turn a codebase, a system description, a process or a database schema into one self-contained interactive HTML diagram (architecture, workflow, data flow, lifecycle…

Turn a codebase, a system description, a process or a database schema into one self-contained interactive HTML diagram (architecture, workflow, data flow, lifecycle, ERD, sequence, class, tree, timeline or waterfall) where every box and arrow cites the file and line or the words it came from, anything inferred is drawn dashed as an assumption, and each cited line is checked against the repository before the page is written. Laid out automatically, opens offline with no CDN, and exports SVG, PNG and Mermaid.

Reach for it when the user asks to "visualize", "map" or "make an interactive diagram of" a repo, a request path, a pipeline, an approval process, a set of tables, an incident's events or a slow trace, or wants a diagram they can click through and share as one file.

Install it

npx skilldrop-cli install interactive-diagram                 # Claude Code, your user folder
npx skilldrop-cli install interactive-diagram --project       # Claude Code, this repo
npx skilldrop-cli install interactive-diagram --ide cursor    # or kiro, codex, antigravity, copilot

It is part of the Solution architect pack: --pack solution-architect installs it with its neighbours.

It ships scripts, so it needs Python 3 (standard library only, nothing to install). What they may touch is declared in its manifest.

Ask for it

Say it the way you would to a colleague. Requests like these route to it:

• "Make an interactive diagram of what happens when someone places an order in this repo"
• "Visualize our request flow as an HTML page I can click around and send to the team"
• "Turn this description of our purchase approval process into an interactive flowchart"
• "Give me an explorable ERD of schema.sql as a single HTML file"
• "Map how this service talks to the database and the queue, with links back to the code"

Requests like these belong to a different skill, so it shouldn't answer them:

• "Write a Mermaid C4 container diagram for the design doc from this description"
• "My mermaid flowchart says parse error on line 3, can you fix it and export a PNG"
• "Reverse-engineer the as-is architecture from our Terraform and write it up in C4 levels"

If another skill answers instead, ask for this one by name: "use interactive-diagram".

Check what you get

A good result:

• Every part and connection cites its source or is drawn as an assumption. No exceptions for the "obvious" ones.
• Every file citation was checked against the repository, with the count in the reply.
• Nothing on the map comes only from a README, a plan or what such systems usually have.
• The map answers one stated question, and what was left out is said.
• One HTML file that works offline: no CDN, no external fonts, no network requests.
• The link and the takeaway lead the reply, with at most one short line about the build before them and no account of how it was made.

See a worked example

• checkout map

Use something else when

• A Mermaid, PlantUML or C4 diagram to paste into a doc — use architecture-diagrams
• An as-is architecture write-up in C4 levels from infrastructure files — use reverse-architecture
• Fixing or rendering an existing Mermaid diagram; the agent does that well on its own, with npx @mermaid-js/mermaid-cli for images
• Charts of numbers, dashboards or metrics — this draws structure, not data

Next

• SKILL.md, the instructions the agent reads
• Its page on the site
• Related: architecture-diagrams, reverse-architecture

Edit this page on GitHub · View source