Architecture Diagram Generator
Generate professional architecture diagrams from natural language prompts. Supports both Python/GraphViz diagrams and Mermaid diagrams (including architecture-beta with icons). Describe your architecture, let AI generate the code, and export to PNG, SVG, DOT, and Draw.io — all from VS Code.
How It Works
- Describe — Open the Command Palette and run "Create Diagram from Prompt"
- Choose — Select your cloud provider (Azure, AWS, GCP, or Generic) and diagram type
- AI Generates — The extension creates a scaffold with your prompt embedded. Use Copilot (
Cmd+I) or Claude Code to complete the diagram code automatically
- Export — Click Generate to produce PNG, SVG, DOT, and Draw.io files instantly
The AI workflow
This extension provides the framework, styling, and cloud icons. Your AI assistant does the code generation. No API keys needed — use whatever AI tool you already have in VS Code:
- GitHub Copilot — Select the code and press
Cmd+I, ask it to "complete this diagram"
- Claude Code — Ask "complete this diagram based on the architecture prompt"
- Any AI — The scaffold includes detailed instructions that any AI can follow
Features
- Prompt-to-Diagram — Describe your architecture in plain English, get a professional diagram
- Mermaid Renderer — Render
.mmd files directly in VS Code with icons, zoom, and export to SVG/PNG
- Architecture-Beta Support — Full support for Mermaid v11+
architecture-beta diagrams with pre-bundled icons (MDI, Logos, Devicon)
- Multi-Cloud Support — Azure, AWS, GCP icons with proper styling out of the box
- Multiple Export Formats — PNG, SVG, DOT, Draw.io from every diagram
- Live Preview — View diagrams in VS Code with zoom controls and light theme
- Sample Diagrams — Complete examples covering common architecture patterns
- Sidebar Explorer — Browse and manage all diagram scripts and outputs
- Azure Import — Export live Azure infrastructure and auto-generate network diagrams
Supported Diagram Types
| Type |
Engine |
Best For |
| System Architecture |
GraphViz / Mermaid |
High-level system overview with services and data flow |
| High-Level Design |
GraphViz |
Detailed subsystem design with component interactions |
| Component Diagram |
GraphViz |
Internal structure of a single service/module |
| Flow Diagram |
GraphViz + Mermaid |
Process steps with decision points |
| Network Flow |
GraphViz |
Network topology with VNets, subnets, firewalls |
| Sequence Diagram |
Mermaid |
Time-ordered actor interactions |
| Architecture-Beta |
Mermaid v11+ |
Icon-based architecture diagrams with groups and edges |
Quick Start
- Install the extension
- Open a project folder and ensure Python 3.10+ and GraphViz are installed
Cmd+Shift+P → "Architecture Diagram: Create Diagram from Prompt"- Describe: "Microservices e-commerce with API Gateway, 3 services, PostgreSQL, Redis on Azure"
- Use your AI assistant to complete the generated scaffold
- Click Generate → your diagram is ready
Sample Diagrams Included
The extension ships with 6 complete example diagrams you can run immediately:
- E-Commerce Microservices — Full system architecture with AKS, Cosmos DB, Service Bus
- Order Processing Flow — Step-by-step order pipeline with decision points
- Payment Service Components — Internal service architecture with clean layers
- Multi-Tier Network — Azure VNet topology with subnets, NSGs, firewalls
- User Auth Sequence — Login, token refresh, OAuth2 flows
- Order System HLD — Detailed design with async processing and compensation
Prerequisites
- Python 3.10+ with the
diagrams package:
pip install diagrams graphviz
- GraphViz installed and
dot available in PATH:
Settings
| Setting |
Description |
Default |
archDiagram.pythonPath |
Path to Python executable |
Auto-detect |
archDiagram.graphvizPath |
Path to GraphViz bin directory |
Auto-detect |
archDiagram.outputFormats |
Output formats to generate |
["png","svg","dot","drawio"] |
archDiagram.autoPreview |
Auto-preview after generation |
true |
Commands
| Command |
Description |
| Create Diagram from Prompt |
Describe your architecture and generate a diagram with AI |
| Generate Diagram |
Run the current diagram script |
| Render Mermaid Diagram |
Render .mmd files with icons and export to SVG/PNG |
| Preview Diagram |
Open a diagram in the preview panel |
| New Diagram Script |
Create a new diagram from template |
| Open in Draw.io |
Open .drawio file externally |
| Import from Azure |
Export Azure resources and generate diagram |
Works With
- GitHub Copilot
- Claude Code
- Cursor AI
- Cody (Sourcegraph)
- Any AI coding assistant
| |
