ChangeGuard

A VSCode extension that visualizes code changes as interactive Mermaid.js graphs during vibe coding with Claude Code.

When you ask Claude to make changes, it first generates a visual graph showing your code's architecture — how functions call each other, how data flows — and highlights exactly what will be added, modified, or deleted. Before touching any code. You review the graph, approve or reject, and only then does Claude proceed.

How It Works

You ask Claude to make changes
        |
        v
Claude writes a Mermaid diagram to .changeguard/graph.mmd
        |
        v
Extension detects the file change, renders the graph in a panel
        |
        v
Claude asks: "Should I proceed with these changes?"
        |
        v
You review the graph, approve or reject
        |
        v
Claude makes the code changes (or adjusts based on your feedback)

The graphs show your code's real structure with 4 color-coded states:

• Green — Added (new files, functions, or code)
• Yellow — Modified (changed files, functions, or code)
• Red — Deleted (removed files, functions, or code)
• Gray — Unchanged (related context for orientation)

Setup

1. Install the Extension

Install from the VSCode Marketplace, or install the .vsix package manually.

2. Configure Claude Code Hooks

Click the $(gear) Setup Hooks button in the status bar, or open the command palette (Ctrl+Shift+P) and run:

ChangeGuard: Setup Claude Code Hooks

This one-time setup:

• Creates a .changeguard/ directory in your project
• Writes a PreToolUse hook script that reminds Claude to generate graphs
• Adds the ChangeGuard prompt to .claude/CLAUDE.md (your root CLAUDE.md stays untouched)
• Adds .changeguard/ to your .gitignore

3. Restart Claude Code

Restart your Claude Code session so it picks up the new hooks and instructions.

4. Start Coding

Open the visualization panel with Ctrl+Shift+G (or Cmd+Shift+G on Mac), then ask Claude to make changes. The graph will appear automatically before any code is modified.

Commands

Status Bar

Two buttons appear in the status bar after the extension activates:

• $(type-hierarchy) ChangeGuard — Click to open the visualization panel
• $(check) Enabled / $(circle-slash) Disabled — Click to toggle the plugin on/off. When disabled, the prompt and hooks are removed so Claude stops generating graphs.

Visualization Panel

The panel supports:

• Mouse wheel to zoom in/out (zooms toward cursor position)
• Click and drag to pan around the graph
• Toolbar buttons: + / - for zoom, Fit to auto-fit, 1:1 to reset to 100%
• Auto-fits the graph on each new render
• Respects VSCode dark/light themes

How the Claude Integration Works

ChangeGuard uses two mechanisms to ensure Claude generates visualizations:

1. .claude/CLAUDE.md — Contains the prompt that tells Claude to write a Mermaid diagram to .changeguard/graph.mmd before making any code changes, and to ask for user approval before proceeding. This keeps your root CLAUDE.md clean.

2. PreToolUse Hook — A lightweight hook that fires before every Edit or Write tool call. It outputs a reminder to Claude via stderr, nudging it to write the graph if it hasn't already. The hook never blocks — it's a safety net.

Customizing the Prompt

You can customize how Claude generates graphs in two ways:

• From VSCode: Run ChangeGuard: Edit Visualization Prompt from the command palette to open .claude/CLAUDE.md directly.
• From source: Edit the CLAUDE_PROMPT constant in src/claude/hooks.ts and re-run "Setup Claude Code Hooks" to apply.

Disabling the Plugin

Click the Enabled/Disabled toggle in the status bar, or run ChangeGuard: Toggle Enable/Disable from the command palette. This removes the prompt and hooks — Claude will stop generating graphs until you re-enable.

Project Structure

src/
  extension.ts          Entry point: commands, file watcher, status bar
  types.ts              Shared TypeScript interfaces
  webview/
    panel.ts            Webview panel with Mermaid rendering + zoom/pan
  claude/
    hooks.ts            Claude Code integration (prompt, hook setup, toggle)

Requirements

• VSCode 1.109.0+
• Claude Code CLI (for the AI integration)
• Node.js (for the hook scripts)

Development

npm install
npm run compile

Press F5 in VSCode to launch the extension development host.

License

MIT