A Claude Code skill that turns any concept into an interactive HTML visualization.
Live Gallery · Install · How It Works · Contributing
Generated by /visualise data pipeline — one of eight examples in the live gallery.
Force graphs, state diagrams, Sankeys, treemaps, equity curves, heatmaps, radial trees, parallel coordinates — whatever explains your concept best. One command. No runtime. No dependencies. No config.
Every visualization below was generated by this skill. Open the live gallery to interact with each one.
 Microservice Architecture Force graph · drag to rearrange · click to trace dependencies |
 Data Pipeline Sankey · animated particles · hover to trace paths |
 Git Flow State diagram · animated commit tokens · play/pause |
 Bundle Size Analysis Treemap · click to zoom · breadcrumb navigation |
 Strategy Backtest Equity curve · drawdown chart · drag to zoom |
 Correlation Matrix Heatmap · hover highlights row + column · click for scatter |
 Project Structure Radial tree · click to expand/collapse · color-coded |
 Engineering Tradeoffs Parallel coords · brush to filter · click to pin |
git clone https://github.com/qlawd/visualise ~/.claude/skills/visualiseOne command. Then open Claude Code and go:
/visualise microservice architecture of this repo
That's it.
/visualise the auth flow as an animated state machine
/visualise correlation between these columns
/visualise git branching strategy
/visualise bundle sizes in package.json
/visualise database schema relationships
Claude reads your codebase context, picks the best visualization type, generates a self-contained interactive HTML file, and opens it in your browser. Then iterate in plain English:
> make the nodes bigger
> add a legend
> color by module instead of type
> add zoom and pan
/visualise <topic>
│
▼
┌─────────────────────┐
│ Read context │ Files, data, architecture,
│ from your project │ concepts, knowledge base
└─────────┬───────────┘
│
▼
┌─────────────────────┐
│ Pick viz type │ Force graph? Sankey? Treemap?
│ │ Heatmap? State diagram?
└─────────┬───────────┘
│
▼
┌─────────────────────┐
│ Generate HTML │ Single file, dark theme,
│ │ D3 / Canvas / SVG
└─────────┬───────────┘
│
▼
┌─────────────────────┐
│ Open in browser │ ← iterate from here
└─────────────────────┘
The skill maps topics to visualization types automatically:
| What you're visualizing | What you get |
|---|---|
| Dependencies, relationships | Force-directed graph |
| Data flows, pipelines | Sankey diagram |
| State machines, processes | Animated state diagram |
| Hierarchies, file trees | Treemap or radial tree |
| Time series, performance | Interactive line chart with zoom |
| Tradeoffs, comparisons | Parallel coordinates |
| Correlations, matrices | Heatmap with hover details |
| Distributions, statistics | Histogram + box plot |
| Architecture, system design | Box-and-arrow with zoom + pan |
| Concepts with parameters | Sliders + live-updating canvas |
| Principle | Why |
|---|---|
| Single file | Everything inline. No build step. Share by sending one .html file. |
| Dark theme | Developers live in dark mode. The visualizations match. |
| Interactive first | Every output has hover, click, drag, or animation. |
| Real data | When connected to a codebase, uses actual names, actual dependencies, actual metrics. |
| Conversational | Iterate in plain English. "Make the nodes bigger." "Add a legend." |
Fork the repo and edit SKILL.md to change defaults:
| What | Where in SKILL.md |
|---|---|
| Color palette | Design Language section — swap the 7 accent colors |
| Light theme | Change #0a0a0a / #e0e0e0 to your preferred background/text |
| Visualization types | Add new rows to the topic → viz type table |
| Output path | Change the save path in Step 4 |
python serve.pyOpens the full gallery at http://localhost:8888. Zero dependencies.
The main contribution paths are gallery examples (new visualizations) and prompt improvements (changes to SKILL.md). See CONTRIBUTING.md for the quality bar and process.
Apache 2.0 — use it however you want.