cc-viz
A Claude Code skill that turns complex terminal output into styled HTML pages you actually want to read.
Ask Claude to explain a system architecture, review a diff, or compare requirements against a plan. Instead of ASCII art and box-drawing tables, it generates a self-contained HTML page and opens it in your browser:
> draw a diagram of our authentication flow
> /diff-review
> /plan-review ~/docs/refactor-plan.md
Each one produces a single .html file with real typography, dark/light theme support, and interactive Mermaid diagrams with zoom and pan. No build step, no dependencies beyond a browser.
Why
Every coding agent defaults to ASCII art when you ask for a diagram. Box-drawing characters, monospace alignment hacks, text arrows. It works for trivial cases, but anything beyond a 3-box flowchart turns into an unreadable mess that nobody would put in a presentation or share with a team.
Tables are worse. Ask the agent to compare 15 requirements against a plan and you get a wall of pipes and dashes that wraps and breaks in the terminal. The data is there but it's painful to read.
Install
/plugin marketplace add zm2231/cc-viz
Then /plugin menu, select cc-viz, and restart Claude Code.
Manual install:
git clone https://github.com/zm2231/cc-viz.git
cd cc-viz
cp -r .claude/* ~/.claude/
cp -r .claude-plugin/* ~/.claude-plugin/
Usage
Claude loads the skill when you mention diagrams, architecture, flowcharts, schemas, or visualizations. It also kicks in automatically when it's about to dump a complex table in the terminal (4+ rows or 3+ columns) — it renders HTML instead and opens it in the browser. Output goes to ~/.agent/diagrams/.
The skill ships with six prompt templates:
| Command | What it does |
|---|
/generate-web-diagram | Generate an HTML diagram for any topic |
/generate-slides | Generate a magazine-quality slide deck for any topic |
/diff-review | Visual diff review with architecture comparison, code review, decision log |
/plan-review | Compare a plan against the codebase with risk assessment |
/project-recap | Mental model snapshot for context-switching back to a project |
/fact-check | Verify accuracy of a review page or plan doc against actual code |
Any prompt that produces a scrollable page also supports a --slides flag to generate a slide deck instead:
/diff-review --slides # slide deck version of a diff review
/project-recap --slides 2w # slide deck recap of last 2 weeks
/diff-review is probably the most useful. Run it with no arguments to diff against main, or pass any git ref:
/diff-review # feature branch vs main (default)
/diff-review abc123 # single commit
/diff-review main..HEAD # committed changes only
/diff-review #42 # pull request
It generates a full page with before/after architecture diagrams, KPI dashboard, structured Good/Bad/Ugly code review, decision log with confidence indicators, and re-entry context for your future self.
/plan-review does something similar but for implementation plans — pass it a plan file and it cross-references every claim against the actual codebase, produces current vs. planned architecture diagrams, and flags risks and gaps:
/plan-review ~/docs/refactor-plan.md
/project-recap is designed for context-switching back to a project after days away. It scans recent git activity and produces an architecture snapshot, decision log, and cognitive debt hotspots. /fact-check takes any document that makes claims about code and verifies every one of them.
How It Works
SKILL.md (workflow + design principles)
↓
references/ ← agent reads before each generation
├── css-patterns.md (layouts, animations, theming, depth tiers)
├── libraries.md (Mermaid theming, Chart.js, anime.js, font pairings)
├── responsive-nav.md (sticky sidebar TOC for multi-section pages)
└── slide-patterns.md (slide engine, 10 slide types, transitions, presets)
↓
templates/ ← agent reads the matching reference template
├── architecture.html (CSS Grid cards — terracotta/sage palette)
├── mermaid-flowchart.html (Mermaid + ELK — teal/cyan palette)
├── data-table.html (tables with KPIs and badges — rose/cranberry palette)
└── slide-deck.html (viewport-fit slides — midnight editorial palette)
↓
~/.agent/diagrams/filename.html → opens in browser
