Claude Code AVT

March 21, 2026 · View on GitHub

Architecture Visualization Tool — a live visual companion pane for Claude Code sessions in VS Code.

Renders flowcharts, dependency maps, relationship matrices, and state diagrams from Claude Code plan output. Updates in real-time as Claude Code executes. Zero API cost during passive operation.

What It Looks Like

┌─────────────────────────────────┬──────────────────────────────────────┐
│                                 │  CLAUDE CODE AVT     [-][+] 100% [⤢] ↺ ↻ │
│   Your Claude Code Session      │  ┌──────────────────────────────────┐│
│                                 │  │ FLOWCHART │ DEPS │ MATRIX │ STATE│ LIVE ││
│   > Plan this feature...        │  ├──────────────────────────────────┤│
│                                 │  │                                  ││
│   Claude Code is working...     │  │     ┌──────────┐                ││
│   Reading files...              │  │     │ Phase 1  │                ││
│   Writing tests...              │  │     └────┬─────┘                ││
│                                 │  │          │                      ││
│                                 │  │     ┌────▼─────┐                ││
│                                 │  │     │ Phase 2  │                ││
│                                 │  │     └────┬─────┘                ││
│                                 │  │          │                      ││
│                                 │  │     ┌────▼─────┐                ││
│                                 │  │     │ Phase 3  │                ││
│                                 │  │     └──────────┘                ││
│                                 │  │                                  ││
│                                 │  │   Scroll to zoom · Drag to pan  ││
│                                 │  ├──────────────────────────────────┤│
│                                 │  │ [  PRESSURE TEST  ] [ ADVERSARIAL TEST ] ││
│                                 │  ├──────────────────────────────────┤│
│                                 │  │ ▸ Event Log                     ││
│                                 │  └──────────────────────────────────┘│
└─────────────────────────────────┴──────────────────────────────────────┘

Quick Start

Option 1: Install from pre-built VSIX (fastest)

The pre-built installer is included in the repo under dist/:

git clone https://github.com/pdej7/claude-code-avt.git
code --install-extension claude-code-avt/dist/claude-code-avt-0.1.0.vsix

Or download claude-code-avt-0.1.0.vsix from the Releases page.

Option 2: Build from source

git clone https://github.com/pdej7/claude-code-avt.git
cd claude-code-avt
npm install
npm run compile
npm run package
code --install-extension claude-code-avt-0.1.0.vsix

Open the panel

Cmd+Shift+A (Mac) or Ctrl+Shift+A (Windows/Linux)

Or: Command Palette (Cmd+Shift+P) → "Claude Code AVT: Open Diagram Panel"

Features

Five Visualization Tabs

Tab	What it shows	Source
Flowchart	Plan steps, decision points, task flow	Plan markdown headings + numbered lists
Dependencies	File references, module relationships	File paths extracted from plans
Matrix	Component × component relationship heatmap	Cross-references in plan sections
State	Phase transitions, task status progression	Plan structure + hook events
Live	Real-time tool execution flow	Claude Code hook events (reads, writes, commands)

Interactive Diagram Controls

Scroll to zoom (centered on cursor)
Drag to pan
Zoom controls in header: − 100% + and fit-to-screen ⤢
Reload ↺ — re-reads the latest plan file from disk. Switch sessions or projects without restarting VS Code.
Refresh ↻ — re-renders current diagram from memory

Action Buttons

Two buttons at the bottom of the panel inject prompts into your active Claude Code session. They work exactly like you typing a prompt and pressing Enter — same session, same credits.

PRESSURE TEST

Sends a prompt that asks Claude Code to critically analyze the current plan:

Single points of failure
Missing edge cases
Race conditions and ordering dependencies
Security property violations
Scalability bottlenecks

Output: structured | Issue | Severity | Mitigation | table.

ADVERSARIAL TEST

Sends a prompt that asks Claude Code to generate hardening test scripts:

Input validation bypass attempts
Race condition exploits
Privilege escalation paths
Replay attacks with stale data
Bounded collection overflow
TOCTOU (check-then-act) gap exploits

Output: complete, runnable test files.

How injection works:

Terminal mode (Claude Code in terminal): types directly into the terminal via terminal.sendText()
GUI mode (Claude Code in webview): copies prompt to clipboard and focuses the Claude Code input. Paste with Cmd+V and press Enter.

Both prompts are fully customizable — see Configuration below.

How It Works (Zero Cost)

Claude Code writes to disk (free — it does this already)
    ├── ~/.claude/plans/*.md          ← plan files
    └── ~/.claude/projects/**/*.jsonl ← session transcripts
                │
        VS Code fs.watch (free)
                │
                ▼
    ┌───────────────────────────┐
    │  Plan Parser              │  ← regex + heuristics, no LLM call
    │  Markdown → structured AST│
    └─────────────┬─────────────┘
                  ▼
    ┌───────────────────────────┐
    │  Mermaid Generator        │  ← deterministic transform
    │  AST → Mermaid.js syntax  │
    └─────────────┬─────────────┘
                  ▼
    ┌───────────────────────────┐
    │  VS Code Webview Panel    │  ← Mermaid.js renders SVG locally
    │                           │
    │  [PRESSURE TEST]          │  ← only these two use credits
    │  [ADVERSARIAL TEST]       │     (user-initiated, same as typing)
    └───────────────────────────┘

No HTTP server. No MCP server. No hooks required for basic operation.

The parser reads plan files that Claude Code already creates. Diagrams are generated entirely client-side with Mermaid.js. The only thing that costs credits is clicking the action buttons — and that's identical to you typing the prompt yourself.

Optional: Live Hook Events

For real-time tool execution tracking (the Live tab), you can add HTTP hooks to .claude/settings.local.json:

{
  "hooks": {
    "PostToolUse": [{ "hooks": [{ "type": "http", "url": "http://localhost:9876/hook" }] }],
    "UserPromptSubmit": [{ "hooks": [{ "type": "http", "url": "http://localhost:9876/hook" }] }],
    "TaskCompleted": [{ "hooks": [{ "type": "http", "url": "http://localhost:9876/hook" }] }]
  }
}

This is optional — all other tabs work without it.

Configuration

All settings are available in VS Code Settings under "Claude Code AVT":

Setting	Default	Description
`avt.autoOpen`	`false`	Auto-open the AVT panel when a plan file is detected
`avt.diagramTheme`	`dark`	Color theme for diagrams (`dark` or `default`)
`avt.pressureTestPrompt`	(built-in)	Custom prompt for the Pressure Test button
`avt.adversarialTestPrompt`	(built-in)	Custom prompt for the Adversarial Test button

Customizing Prompts

Override the default Pressure Test or Adversarial Test prompts in your VS Code settings.json:

{
  "avt.pressureTestPrompt": "Your custom pressure test prompt here...",
  "avt.adversarialTestPrompt": "Your custom adversarial test prompt here..."
}

Keyboard Shortcuts

Shortcut	Action
`Cmd+Shift+A`	Open/focus the AVT panel

Additional commands available in the Command Palette (Cmd+Shift+P):

Claude Code AVT: Open Diagram Panel
Claude Code AVT: Reload Plan (re-read from disk)
Claude Code AVT: Refresh Diagram
Claude Code AVT: Pressure Test Plan
Claude Code AVT: Adversarial Hardening Test

Development

git clone https://github.com/pdej7/claude-code-avt.git
cd claude-code-avt
npm install
npm run watch    # auto-recompile TypeScript on save

Press F5 in VS Code to launch the Extension Development Host for testing.

Project Structure

claude-code-avt/
├── package.json              # VS Code extension manifest
├── tsconfig.json             # TypeScript config
├── src/
│   ├── extension.ts          # Activation, command registration
│   ├── actions/
│   │   └── promptInjector.ts # Pressure Test / Adversarial Test injection
│   ├── parsers/
│   │   ├── planParser.ts     # Markdown → structured diagram AST
│   │   ├── mermaidGenerator.ts # AST → Mermaid.js syntax
│   │   └── transcriptParser.ts # JSONL transcript → event stream
│   ├── state/
│   │   └── sessionState.ts   # Aggregated session state
│   ├── views/
│   │   └── architectPanel.ts # Webview panel management
│   └── watchers/
│       └── fileWatchers.ts   # Plan file + transcript watchers
├── webview/
│   ├── architect.css         # Dark theme (mistwire design tokens)
│   ├── architect.js          # Client-side Mermaid rendering + interactions
│   └── mermaid.min.js        # Bundled Mermaid.js (offline, no CDN)
└── test/
    ├── planParser.test.ts
    └── mermaidGenerator.test.ts

Building a VSIX

npm run compile
npm run package
# Output: claude-code-avt-0.1.0.vsix

Requirements

VS Code 1.94.0 or later
Claude Code (any version that writes plan files to ~/.claude/plans/)

No additional dependencies. Mermaid.js is bundled locally — works fully offline.

FAQ

Q: Does this cost API credits? A: No — passive visualization is free. Only the Pressure Test and Adversarial Test buttons use credits, and they're identical to you typing a prompt manually.

Q: Do I need to configure hooks? A: No. The Flowchart, Dependencies, Matrix, and State tabs work by reading plan files from disk. Hooks are only needed for the Live tab's real-time tool tracking.

Q: Can I use this with Claude Code in terminal mode AND GUI mode? A: Yes. The visualization panel works in both modes. The action buttons auto-detect which mode you're using.

Q: How do I switch between projects/sessions? A: Click the reload button ↺ in the header. It re-reads the latest plan file from ~/.claude/plans/ without restarting VS Code.

License

MIT — see LICENSE

Built by Paul DeJarnette