plan-visualizer

# Plan Visualizer

Generates HTML visualizations from markdown implementation plans. Opens in any browser — shows BEFORE/AFTER architecture with diff-marked components, mermaid architecture diagrams, key decisions, risks, and interactive feedback annotations.

![Plan Visualizer demo](assets/demo.gif)

## Installation

Add the marketplace to Claude Code:

```
/plugin marketplace add omril321/claude-plan-visualizer
```

Then install the plugin:

```
/plugin install plan-visualizer@claude-plan-visualizer
```

## Configuration

Create `~/.claude/plan-visualizer.json` to customize the URL protocol for plan file links:

```json
{"url_protocol": "open-cursor"}
```

Supported protocols: `file` (default), `open-cursor`, `vscode`, or any custom protocol handler.

If this file doesn't exist, the plugin defaults to `file://` links.

## Usage

Invoke the agent manually by asking Claude to visualize a plan:

```
Visualize the plan at plans/my-plan.md
```

Or use it programmatically from a planning skill by invoking the `plan-visualizer:plan-visualizer` agent with the plan file path.

## What It Does

1. **Reads config** — checks `~/.claude/plan-visualizer.json` for URL protocol preference
2. **R…