System Map Visualiser

What it does

Draft a JSON file describing a system's architecture or a phased roadmap, run one script, and get a themed, animated HTML page: curved dependency edges, a click-a-node impact probe, a story-mode walkthrough, and ten built-in themes. No server, no build step, no framework; the output is a single HTML file that opens in any browser.

Ask for an architecture diagram or a progress tracker — the agent drafts the JSON and runs generate.py.

A fork of VizCraft by Kimanzi Collins (MIT). This fork adds the improved architecture template used by default (legible per-kind edges, a click-a-node dependency probe, search, a real walkthrough player, offline operation with no CDN calls) and a coordinate-free auto-layout example for diagrams too large to hand-place coordinates for. View the original

How it works

1. Understand the request. A system architecture diagram, or a phased progress tracker.
2. Draft the JSON. Groups, nodes and edges for an architecture map, or phases and tasks for a tracker, following the schema in SKILL.md.
3. Save it. Write the JSON to a file in the workspace.
4. Compile. Run generate.py against it, which renders a self-contained HTML file from the bundled template.
5. Open it. The output is a single file; open it directly in a browser, no server needed.

Install

git clone https://github.com/Kaikhalid/system-map-visualiser.git ~/.claude/skills/system-map-visualiser && rm -rf ~/.claude/skills/system-map-visualiser/.git ~/.claude/skills/system-map-visualiser/assets ~/.claude/skills/system-map-visualiser/demos

git clone https://github.com/Kaikhalid/system-map-visualiser.git ~/.codex/skills/system-map-visualiser && rm -rf ~/.codex/skills/system-map-visualiser/.git ~/.codex/skills/system-map-visualiser/assets ~/.codex/skills/system-map-visualiser/demos