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