architecture-diagram-generator README

The project's README from github.com/Cocoon-AI/architecture-diagram-generator. As one markdown file: README.md.

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.

Version License Claude

🚀 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)

  1. Download architecture-diagram.zip
  2. Go to claude.ai → Customize → Skills
  3. Click the + button → + Create skill → Upload a skill, then upload the zip file
  4. 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)

Web App Architecture

AWS Serverless (Lambda + API Gateway + DynamoDB)

AWS Serverless Architecture

Microservices (Kubernetes + API Gateway)

Microservices Architecture

📤 Export your diagram

Open the HTML file in any modern browser and use the toolbar in the header:

No install. No command line. Just open the file and click.

✨ Features

🎨 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 plans

Prerequisite: 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

  1. Download architecture-diagram.zip
  2. Go to Customize → Skills
  3. Click the + button, then + Create skill, then Upload a skill
  4. Choose the zip file and toggle the skill on

Claude.ai Projects (Alternative)

  1. In your Claude.ai Project, upload the architecture-diagram.zip to 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:

📐 What's Included in Output

Each generated diagram includes:

  1. Header — Project title with animated status indicator
  2. Main diagram — SVG with all components and connections
  3. Summary cards — 3 info cards highlighting key details
  4. Footer — Project metadata

🛠 Customization

The skill uses a consistent design system, but Claude will adapt:

📄 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

📄 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:

📬 Contact

Cocoon AI 📧 [email protected]

Made with ❤️ by Cocoon AI

architecture-diagram-generator (Cocoon-AI/architecture-diagram-generator)

architecture-diagram
Searching Database…

7.5K ·GitHub
Architecture-diagram-generator
What is this?It's a Claude AI skill that turns a plain-English description of your system into a beautiful, dark-themed architecture diagram, rendered as a standalone HTML/SVG file you can open in any browser.
Is this a standalone app or something I install into Claude?It's a Claude Skill package (a zip file) that you upload into claude.ai, Claude.ai Projects, or Claude Code CLI — not a separate application.
How do I install and use this skill?Download architecture-diagram.zip, go to Customize → Skills on claude.ai, create/upload the skill from the zip, toggle it on, then describe your system (or paste codebase analysis) and ask Claude to generate the diagram.
What do I need before I can use it?You need a claude.ai account on any plan (Free, Pro, Max, Team, or Enterprise) with Code Execution enabled in Settings → Capabilities before uploading custom skills.
Can I edit the diagram after it's generated?Yes — you iterate entirely through chat, asking Claude to add components, change layouts, update styles, or fix issues, and the HTML file updates accordingly; there's no separate visual editor.
How does the color coding work in generated diagrams?Each component type gets a fixed semantic color: cyan for frontend, emerald for backend, violet for database/storage, amber for cloud/AWS, rose for security, and slate for generic external systems.
Is there a related skill for workflows instead of architecture?Yes — a sister skill called process-flow-diagram-generator uses the same dark design language but for step-by-step flows like approval processes, runbooks, and automation pipelines.
What font and visual style does the output use?Diagrams use JetBrains Mono typography on a slate-950 (#020617) background with a subtle 40px grid pattern, and arrows are drawn first so they render cleanly behind component boxes.
What are similar projects?live-panel-skill, system-atlas, drawio-skill, d2, archify, draw-architecture, diagram-design, answer-me-with-html
Which topics is it in?dark-theme, diagramming, architecture-diagram, diagram, claude-skill, no-code, dark-mode, architecture, svg, visualization, claude-skills, skill
Creator
Cocoon-AI
Size
0.5 MB
Stars
7.5K
Updated
CommitMay 13Release1.1May 09
Age
9mo
Commits · 90 Days