visualizer

Visualizer

A Claude Code plugin that pushes interactive HTML visualizations to a browser window. Claude generates diagrams, mockups, comparisons, and dashboards — you see them live in your browser while continuing to work in the terminal.

How It Works

┌──────────────┐    stdio/JSON-RPC    ┌──────────────┐    HTTP + WebSocket    ┌──────────────┐
│  Claude Code  │◄──────────────────►│  MCP Server   │◄────────────────────►│   Browser     │
│  (terminal)   │                    │  (Node.js)    │                      │  (localhost)  │
└──────────────┘                    └──────────────┘                      └──────────────┘
       │                                   │                                      │
  You ask Claude                  Serves HTML, relays                    You see & interact
  to visualize                    user events back                      with visualizations

Claude calls MCP tools to push HTML screens to the browser and read your interactions (clicks, selections) back. No filesystem intermediary — content flows directly through WebSocket.

Install

From the marketplace

claude plugin install visualizer@visualizer

Or add the marketplace first, then install

claude plugin marketplace add stemado/visualizer-plugin
claude plugin install visualizer

Dependencies are installed automatically on first session start.

Quick Start

Just ask Claude to visualize something:

"Visualize the architecture of this project"

"Show me a side-by-side comparison of these two API designs"

"Mock up a dashboard for our deployment metrics"

Claude will:

1. Launch a session and give you a URL (e.g., http://localhost:54321)
2. Open it in your browser
3. Push interactive HTML content
4. Read your clicks and selections
5. Iterate based on your feedback

What You Can Do With It

Architecture & System Design

• "Visualize the architecture of this project" — SVG diagrams with clickable service nodes, showing data flow between layers
• "Show me how the auth middleware connects to the session store" — Trace a specific execution path visually
• "Diagram the database schema for the users module" — Entity-relationship diagrams with relationships
• "Map out the microservices and their communication patterns" — Service mesh visualization with protocol labels

Decision-Making & Comparisons

• "Compare Redux vs Zustand for our state management" — Side-by-side mockups with pros/cons cards you can click to vote on
• "Show me 3 approaches for the caching layer" — Interactive option cards where you click your preference, then Claude drills deeper
• "Help me choose between Postgres and DynamoDB for this use case" — Comparison dashboard with trade-off matrices

UI Mockups & Prototyping

• "Mock up what the settings page could look like" — HTML/CSS mockups with nav bars, sidebars, form elements
• "Show me 2-3 layout options for the dashboard" — Push multiple screens, iterate based on your clicks
• "Prototype the onboarding flow" — Multi-screen walkthrough where each click advances to the next step

Flowcharts & Process Diagrams

• "Diagram the CI/CD pipeline" — SVG flowcharts with decision nodes, color-coded stages
• "Map the user signup flow including error states" — State machines with branching paths
• "Show the deployment process step by step" — Sequential flow with decision diamonds

Concept Maps & Knowledge Graphs

• "Map out how the modules in this codebase relate to each other" — Canvas-based draggable node graphs with force-directed layout
• "Create a concept map of our API endpoints and their dependencies" — Interactive knowledge graph you can rearrange
• "Visualize the dependency tree for this package" — Hierarchical node layout

Dashboards & Data Visualization

• "Build a dashboard showing our test coverage by module" — KPI tiles with sparkline charts and status indicators
• "Visualize the performance metrics from these benchmark results" — Bar/line charts with change indicators
• "Show a health dashboard for the services" — Real-time-style tiles with green/yellow/red status

Data Exploration

• "Help me explore this JSON schema interactively" — Schema browsers with expandable nodes
• "Build a query builder UI for the API" — Interactive filter/query interfaces
• "Visualize the data pipeline stages" — Pipeline designers with syntax-highlighted previews

Code Review & Refactoring

• "Show me the before/after of this refactoring visually" — Split-view comparison of code structure
• "Visualize the call graph for this function" — Trace which functions call what
• "Diagram the class hierarchy" — Inheritance/composition trees

Project Planning