Help us improve
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
By zm2231
One-shot HTML visualization for Claude Code. Turn architecture, diffs, plans, and data into styled pages you actually want to read.
npx claudepluginhub zm2231/cc-viz --plugin cc-vizGenerate a visual HTML diff review — before/after architecture comparison with code review analysis
Verify the factual accuracy of a document against the actual codebase, correct inaccuracies in place
Generate a stunning magazine-quality slide deck as a self-contained HTML page
Generate a beautiful standalone HTML diagram and open it in the browser
Generate a visual HTML plan review — current codebase state vs. proposed implementation plan
Share bugs, ideas, or general feedback.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
Generate beautiful HTML pages for diagrams, diff reviews, plan reviews, slides, and data tables
Analyzes a codebase and generates animated HTML architecture reports — diagrams, data flows, component directories, metrics, and insights.
Interactive learning commands to help users understand code deeply
Sixteen HTML-output skills that help Claude Code reach for self-contained HTML artifacts (specs, diagrams, dashboards, prototypes, decks, mind maps, design tokens, comparison matrices, and more) instead of long-form markdown when HTML is the better surface.
General development utilities including Mermaid diagram creation for software documentation
Visual report generation suite: wiki analysis, diff review, plan review, project recap, and fact-checking — self-contained HTML reports with interactive diagrams, responsive navigation, and curated design system
Security auditing for vibe-coded apps. Auto-detects stack (Vercel, Supabase, Cloudflare Workers, Firebase) and runs targeted vulnerability checks.
Design engineering for Claude Code. Craft, memory, and enforcement for consistent UI. Extracts from live pages, local code, or Stitch projects.
Web browser automation for Claude Code and AI agents. Headless or headed mode, persistent auth, stealth mode, video recording.
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.
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.
/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/
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.
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