[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-73603":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":15,"stars7d":16,"stars30d":17,"stars90d":14,"forks30d":14,"starsTrendScore":18,"compositeScore":19,"rankGlobal":9,"rankLanguage":9,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":9,"pushedAt":9,"updatedAt":25,"readmeContent":26,"aiSummary":27,"trendingCount":14,"starSnapshotCount":14,"syncStatus":28,"lastSyncTime":29,"discoverSource":30},73603,"architecture-diagram-generator","Cocoon-AI\u002Farchitecture-diagram-generator","Cocoon-AI","Generate beautiful dark-themed system architecture diagrams as standalone HTML\u002FSVG files. Works as a Claude AI skill.    ",null,"HTML",5783,436,11,0,185,336,894,555,38.92,"MIT License",false,"main",true,[],"2026-06-12 02:03:15","# Architecture Diagram Generator\n\n**Need an architecture diagram? Get AI to build you one.**\n\nUse [Claude.ai](https:\u002F\u002Fclaude.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 \u002F PNG \u002F PDF buttons baked into every diagram\n\n![Version](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fversion-1.1-blue)\n![License](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-MIT-green)\n![Claude](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FClaude-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:\u002F\u002Fclaude.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:\u002F\u002Fclaude.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\u002FExpress 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\u002Fimages\u002Fweb-app.png)\n\n### AWS Serverless (Lambda + API Gateway + DynamoDB)\n\n![AWS Serverless Architecture](examples\u002Fimages\u002Faws-serverless.png)\n\n### Microservices (Kubernetes + API Gateway)\n\n![Microservices Architecture](examples\u002Fimages\u002Fmicroservices.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\u002FML         |\n| Cloud\u002FAWS      | 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 \u002F Pro \u002F Max — turn on under **Settings → Capabilities**\n> - Team \u002F Enterprise — admin enables under **Organization settings → Skills**\n\n> 📚 **New to Claude Skills?** Check out the official guide: [Use Skills in Claude](https:\u002F\u002Fsupport.claude.com\u002Fen\u002Farticles\u002F12512180-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 ~\u002F.claude\u002Fskills\u002F\n\n# Or project-local\nunzip architecture-diagram.zip -d .\u002F.claude\u002Fskills\u002F\n```\n\n### Manual Setup\n\nSimply ensure both files are accessible to Claude:\n\n```\narchitecture-diagram\u002F\n├── SKILL.md              # Skill instructions\n└── resources\u002F\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\u003C!DOCTYPE html>\n\u003Chtml>\n  \u003Chead>\n    \u003C!-- Embedded styles, Google Fonts -->\n  \u003C\u002Fhead>\n  \u003Cbody>\n    \u003Cdiv class=\"container\">\n      \u003Cdiv class=\"header\">\u003C!-- Title -->\u003C\u002Fdiv>\n      \u003Cdiv class=\"diagram-container\">\n        \u003Csvg>\u003C!-- Architecture diagram -->\u003C\u002Fsvg>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"cards\">\u003C!-- Summary cards -->\u003C\u002Fdiv>\n      \u003Cp class=\"footer\">\u003C!-- Metadata -->\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\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:\u002F\u002Fgithub.com\u002FCocoon-AI\u002Fprocess-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:\u002F\u002Fcocoon-ai.com)\n","Architecture Diagram Generator 项目通过 Claude AI 技能帮助用户快速生成美观的暗色主题系统架构图，以独立的 HTML\u002FSVG 文件形式提供。其核心功能包括无需设计技能即可用自然语言描述系统架构，并由 AI 自动生成专业图表；支持快速迭代修改组件、布局或样式；输出文件易于分享和查看，且内置了复制、PNG 和 PDF 导出选项。适用于需要快速创建或调整系统架构图的各种场景，特别是对于那些希望简化设计流程同时保持高质量视觉呈现的技术团队和个人开发者来说非常实用。",2,"2026-06-11 03:46:22","high_star"]