The Claude Architect plugin adds an interactive architecture diagram to Plan Mode so you can review, annotate, and revise the plan with Claude in real time.
The steering loop feels like a whiteboard session:
- visualize the architecture and see relationships at a glance
- drill down into containers and components to review each layer
- comment directly on any node or edge
- review updates from Claude in response to your comments
Watch a video or try the live demo
Getting Started
1. Install the plugin
claude plugin marketplace add https://github.com/willhennessy/architect.git claude plugin install architect@plugins
2. Start Claude
claude --dangerously-load-development-channels plugin:architect@plugins
3. Plan
- Switch to Plan Mode
- Run
/architect:planwith your design prompt - After drafting the plan, Claude will ask if you want an interactive diagram. Say yes.
- Open
./architecture/diagram.htmlin your browser
Or generate a diagram for your existing codebase with /architect:init.
Skills
| Name | Description |
|---|---|
architect-plan |
Enhance Plan Mode with a visual, interactive architecture diagram. |
architect-init |
Generate a diagram and structured architecture files for an existing codebase. |
architect-diagram |
Render diagram.html from existing architecture artifacts. In normal flows you should not need to call this. |
How it works
- Claude generates a semantic representation of the system architecture using the C4 model and writes the output to structured YAML files in
./architect - Claude generates SVG diagrams and injects them into an interactive HTML app at
./architect/diagram.html - You open the diagram in your browser and add comments
- Comments are sent back to Claude through a local Channel
- Claude incorporates your feedback and publishes updates to the diagram in real time