Generate beautiful dark-themed system architecture diagrams as standalone HTML/SVG files. Works as a Claude AI skill.
来自项目 README
项目解读由 AI 根据历史资料整理，尚未经人工复核。仓库资料更新于 2026-09-08，与历史解读分开保留。
项目概览
Architecture Diagram Generator 是由 Cocoon AI 开发的 AI 驱动系统架构图生成器，以 Claude.ai Skill 的形式存在。用户用自然语言描述系统架构，Claude 即可生成深色主题、自包含的 HTML 架构图文件。项目定位为 AI 辅助设计/架构可视化，目标用户是架构师、技术负责人和开发者，运行环境为 Claude.ai（Pro/Max/Team/Enterprise）。核心特性包括零设计门槛、通过对话极速迭代、输出自包含 HTML 文件（内嵌 CSS 与内联 SVG，无外部依赖），以及采用深色主题、语义色彩编码和 JetBrains Mono 字体的专业视觉系统。项目采用 MIT 协议，当前版本为 v1.0。
解决什么问题
系统架构图是软件工程中“不得不画但最不想画”的文档。传统工具链存在五大痛点：一是工具选择困难，通用绘图工具（如 draw.io、Visio）功能臃肿、学习曲线高，代码生成工具（如 Mermaid、PlantUML）有语法学习成本且布局控制弱，白板工具手动绘制效率低，设计工具需要设计师技能；二是维护成本高，系统架构变化后架构图常忘记更新，代码即文档的理念在架构图领域几乎不存在；三是视觉一致性差，不同人画出的图风格不同，缺乏统一的颜色、字体、间距标准；四是协作效率低，Visio 文件无法在 Web 上直接预览，Mermaid 渲染结果各平台不一致，版本管理混乱；五是现有 AI 工具链脱节，ChatGPT 可分析代码库架构但无法直接画图，Claude 可写系统设计文档但架构图需人工补充。
工作方式
Architecture Diagram Generator 的核心并非“画图引擎”，而是一个 Prompt Engineering Skill。其工作机制为：SKILL.md 文件定义 Claude 生成架构图时应遵循的规则；assets/template.html 提供基础 HTML 结构和 CSS 样式系统；Claude 根据用户描述、Skill 规则和模板，生成包含内联 SVG 的 HTML 文件；用户在浏览器中打开生成的 HTML 文件即可预览。项目采用语义色彩编码系统，按组件类型自动配色：Frontend 用青色（cyan-400），Backend 用翠绿（emerald-400），Database 用紫色（violet-400），Cloud/AWS 用琥珀（amber-400），Security 用玫红（rose-400），External 用石板灰（slate-400）。生成的 HTML 文件包含 Header（项目标题与动态状态指示器）、Main Diagram（SVG 格式架构图）、Summary Cards（3 张信息卡片）和 Footer（项目元信息）。安装方式有三种：在 Claude.ai 的 Settings → Capabilities → Skills 中上传 zip 文件、通过 Claude Code CLI 解压到 skills 目录、或在 Claude.ai Projects 的 Knowledge 中上传 zip 文件。获取架构描述的途径包括用 Cursor/Claude Code 分析代码库、手动编写描述、或让 AI 推荐典型架构。
核心能力
零设计门槛：用自然语言描述架构即可生成，无需设计技能
极速迭代：通过对话修改布局、组件、样式，实时更新
自包含输出：单个 HTML 文件，内嵌 CSS 与内联 SVG，无外部依赖
专业视觉系统：深色主题 + 语义色彩编码 + JetBrains Mono 字体
对话式迭代：如“把 API Gateway 放左边”即可修改
多安装方式：支持 Claude.ai / Claude Code / Projects 三种
免费开源：采用 MIT 协议
使用前需要了解
AI 整理 · 本地测试，未经人工复核；依据历史报告节选，不代表当前产品状态。
项目依赖 Claude.ai，需要 Pro/Max/Team/Enterprise 订阅才能使用，离开 Claude.ai 无法运行。输出质量可能不稳定，复杂架构可能出现布局混乱。不支持自定义样式系统，只能用预设的深色主题。无法自动同步代码，每次需要手动获取架构描述。项目很新，仅 8 个 commit，可能缺少边缘情况处理。输出是静态 SVG，无交互功能，不可缩放或拖拽。不适合需要精确像素控制的场景（如用 Figma），不适合需要交互式图表的场景（如用 D3.js/Observable）。复杂架构（50+ 组件）可能超出 AI 的布局能力，建议将大架构拆分为多个子图。输出不可逆编辑，无法“打开并修改”，只能让 AI 重新生成。
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.
选项 B：自己编写
只需列出你的组件及其连接方式：
- React frontend talking to a Node.js API
- PostgreSQL database
- Redis for caching
- Hosted on AWS with CloudFront CDN
Use your architecture diagram skill to create an architecture diagram from this description:
[PASTE YOUR ARCHITECTURE DESCRIPTION HERE]
就这样！Claude 将生成一个漂亮的 HTML 文件，你可以在任何浏览器中打开。
然后！你可以直接通过聊天进行迭代。让 Claude：请更新 XYZ 以实时查看你的图表更新。你也可以让 Claude 修复图表中的任何问题。
常见场景的示例提示词
对于 Web 应用：
Create an architecture diagram for a web application with:
- React frontend
- Node.js/Express API
- PostgreSQL database
- Redis cache
- JWT authentication
对于 AWS 无服务器：
Create an architecture diagram showing:
- CloudFront CDN
- API Gateway
- Lambda functions (Node.js)
- DynamoDB
- S3 for static assets
- Cognito for auth
对于微服务：
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
