Architecture Diagram Generator
Need an architecture diagram? Get AI to build you one.
Use Claude.ai with this special skill to generate professional architecture diagrams in seconds. Describe your system, and Claude creates a beautiful, dark-themed diagram as a standalone HTML file you can open in any browser.
- No design skills needed — just describe your architecture in plain English
- Iterate quickly — ask Claude to add components, change layouts, or update styles
- Share easily — output is a single HTML file, no special software required
- Export built in — Copy / PNG / PDF buttons baked into every diagram
🚀 Quick Start (3 Steps)
Step 1: Install the Skill
⚠️ Available on Free, Pro, Max, Team, and Enterprise plans (Code Execution must be enabled in Settings → Capabilities first)
- Download
architecture-diagram.zip - Go to claude.ai → Customize → Skills
- Click the + button → + Create skill → Upload a skill, then upload the zip file
- Toggle the skill on
📚 Need help? See the full installation guide below.
Step 2: Get Text that Describes Your Architecture
You just need a text description of your system. Pick whichever works for you:
Option A: Have AI analyze your codebase
Open your code in Cursor, Claude Code, Windsurf, or ChatGPT and ask:
Analyze this codebase and describe the architecture. Include all major
components, how they connect, what technologies they use, and any cloud
services or integrations. Format as a list for an architecture diagram.
Option B: Write it yourself
Just list your components and how they connect:
- React frontend talking to a Node.js API
- PostgreSQL database
- Redis for caching
- Hosted on AWS with CloudFront CDN
Option C: Ask for a typical architecture
Don't have a specific system? Ask Claude for a starting point:
What's a typical architecture for a SaaS application?
Step 3: Generate Your Diagram by Asking Claude to Use the Skill
Take the output from Step 2 and paste it into Claude (with the Architecture Diagram Generator skill installed):
Use your architecture diagram skill to create an architecture diagram from this description:
[PASTE YOUR ARCHITECTURE DESCRIPTION HERE]
That's it! Claude will generate a beautiful HTML file you can open in any browser.
Then! You can iterate simply by using chat. Ask Claude: Please update XYZ to see your diagram update in real time. You can ask Claude to fix any issues you have with the diagram as well.
Example Prompts for Common Scenarios
For a web app:
Create an architecture diagram for a web application with:
- React frontend
- Node.js/Express API
- PostgreSQL database
- Redis cache
- JWT authentication
For AWS serverless:
Create an architecture diagram showing:
- CloudFront CDN
- API Gateway
- Lambda functions (Node.js)
- DynamoDB
- S3 for static assets
- Cognito for auth
For microservices:
Create an architecture diagram for a microservices system with:
- React web app and mobile clients
- Kong API Gateway
- User Service (Go), Order Service (Java), Product Service (Python)
- PostgreSQL, MongoDB, and Elasticsearch databases
- Kafka for event streaming
- Kubernetes orchestration
📸 Examples
Web Application (React + Node.js + PostgreSQL)
AWS Serverless (Lambda + API Gateway + DynamoDB)
Microservices (Kubernetes + API Gateway)
📤 Export your diagram
Open the HTML file in any modern browser and use the toolbar in the header:
- 📋 Copy — copy a high-resolution PNG to your clipboard, paste straight into Slides, Docs, or Slack
- 🖼️ PNG — download a high-resolution PNG file (great for slides and screenshots)
- 📄 PDF — download a PDF that preserves the dark theme
No install. No command line. Just open the file and click.
✨ Features
- Beautiful dark theme — Slate-950 background with subtle grid pattern
- Semantic color coding — Consistent colors for frontend, backend, database, cloud, and security components
- Self-contained output — Single HTML file with embedded CSS and inline SVG
- Works in any browser — nothing to install, just open the file
- Professional typography — JetBrains Mono for that technical aesthetic
- Smart layering — Arrows render cleanly behind component boxes
🎨 Color Palette
| Component Type | Color | Use For |
|---|---|---|
| Frontend | Cyan | Client apps, UI, edge devices |
| Backend | Emerald | Servers, APIs, services |
| Database | Violet | Databases, storage, AI/ML |
| Cloud/AWS | Amber | Cloud services, infrastructure |
| Security | Rose | Auth, security groups, encryption |
| External | Slate | Generic, external systems |
📦 Installation
⚠️ Available on: Free, Pro, Max, Team, and Enterprise plansPrerequisite: Code Execution must be enabled before you can upload a custom skill:
- Free / Pro / Max — turn on under Settings → Capabilities
- Team / Enterprise — admin enables under Organization settings → Skills
📚 New to Claude Skills? Check out the official guide: Use Skills in Claude
Claude.ai (Recommended)
- Download
architecture-diagram.zip - Go to Customize → Skills
- Click the + button, then + Create skill, then Upload a skill
- Choose the zip file and toggle the skill on
Claude.ai Projects (Alternative)
- In your Claude.ai Project, upload the
architecture-diagram.zipto the Project Knowledge
Claude Code CLI
Extract to your skills directory:
# Global skills
unzip architecture-diagram.zip -d ~/.claude/skills/
# Or project-local
unzip architecture-diagram.zip -d ./.claude/skills/Manual Setup
Simply ensure both files are accessible to Claude:
architecture-diagram/
├── SKILL.md # Skill instructions
└── resources/
└── template.html # Base template
💾 Output
Claude generates a self-contained HTML file that you can:
- Open directly in any browser
- Share with teammates (just send the file!)
- Include in documentation
- Print or export to PDF
- Host on any static site
📐 What's Included in Output
Each generated diagram includes:
- Header — Project title with animated status indicator
- Main diagram — SVG with all components and connections
- Summary cards — 3 info cards highlighting key details
- Footer — Project metadata
🛠 Customization
The skill uses a consistent design system, but Claude will adapt:
- Layout — Components positioned based on your system's flow
- Connections — Arrows showing data flow and relationships
- Labels — Protocols, ports, and annotations
- Groupings — Security groups, cloud regions, bounded contexts
📄 Example Output
The generated HTML structure:
<!DOCTYPE html>
<html>
<head>
<!-- Embedded styles, Google Fonts -->
</head>
<body>
<div class="container">
<div class="header"><!-- Title --></div>
<div class="diagram-container">
<svg><!-- Architecture diagram --></svg>
</div>
<div class="cards"><!-- Summary cards --></div>
<p class="footer"><!-- Metadata --></p>
</div>
</body>
</html>🔧 Technical Details
- SVG viewBox: Typically 1000-1100px wide, scales responsively
- Font: JetBrains Mono (loaded from Google Fonts)
- Background:
#020617with 40px grid pattern - Z-ordering: Arrows drawn first, masked by opaque backgrounds under transparent component fills
📄 Sister skill
For step-by-step workflows that unfold in time — approval flows, runbooks, automation pipelines, process-flow-diagram-generator — same design language, different shape language.
📝 License
MIT License — Free to use, modify, and distribute.
👥 Contributing
Suggestions and improvements welcome! Feel free to:
- Open an issue for bugs or feature requests
- Submit a PR with enhancements
- Share your generated diagrams
📬 Contact
Cocoon AI 📧 hello@cocoon-ai.com
Made with ❤️ by Cocoon AI
