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)

Searching Database…

7.4K ·GitHub
Architecture-diagram-generator
Что это такое?Это навык для Claude AI, который превращает описание вашей системы на простом английском в красивую тёмную диаграмму архитектуры, оформленную как самостоятельный HTML/SVG-файл, который можно открыть в любом браузере.
Это отдельное приложение или то, что устанавливается в Claude?Это пакет Claude Skill (zip-файл), который вы загружаете в claude.ai, Claude.ai Projects или Claude Code CLI, а не отдельное приложение.
Как установить и использовать этот навык?Скачайте architecture-diagram.zip, зайдите в Customize → Skills на claude.ai, создайте/загрузите навык из zip, включите его, затем опишите вашу систему (или вставьте анализ кодовой базы) и попросите Claude сгенерировать диаграмму.
Что нужно, чтобы начать им пользоваться?Нужен аккаунт claude.ai на любом тарифе (Free, Pro, Max, Team или Enterprise) с включённой функцией Code Execution в Settings → Capabilities перед загрузкой пользовательских навыков.
Можно ли отредактировать диаграмму после генерации?Да — вы итерируете целиком через чат, прося Claude добавить компоненты, изменить компоновку, обновить стили или исправить проблемы, и HTML-файл обновляется соответствующим образом; отдельного визуального редактора нет.
Как работает цветовое кодирование в сгенерированных диаграммах?Каждый тип компонентов получает фиксированный семантический цвет: циановый для фронтенда, изумрудный для бэкенда, фиолетовый для баз данных/хранилищ, янтарный для облака/AWS, розовый для безопасности и сланцевый для общих внешних систем.
Есть ли связанный навык для процессов вместо архитектуры?Да — сестринский навык process-flow-diagram-generator использует ту же тёмную дизайн-систему, но для пошаговых потоков вроде согласований, ранбуков и конвейеров автоматизации.
Какой шрифт и визуальный стиль у результата?Диаграммы используют типографику JetBrains Mono на фоне slate-950 (#020617) с едва заметным узором сетки 40px, а стрелки рисуются первыми, чтобы они чисто отображались позади блоков компонентов.
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.4K
Updated
CommitMay 13Release1.1May 09
Age
9mo
Commits · 90 Days