Architecture Diagram Generator：让AI替你画架构图

你是否曾为画一张清晰的系统架构图而头疼？花半小时在 Figma 里调矩形和箭头，最后效果还是像手绘草图。或者你花 200 美元买了一套 PPT 素材包，结果导出 PDF 之后字体全变成了宋体。

Cocoon-AI/architecture-diagram-generator 解决的就是这个问题——你只需要用文字描述系统架构，AI 就能生成一张专业级的暗色主题架构图，而且是自包含的 HTML 文件，任何浏览器打开都一模一样。

Web应用架构图示例

图1：Web应用架构图示例，包含前端、API层、数据库、缓存和CDN

背景：从"AI画图"到"AI画架构"

这个项目诞生于 2025 年底，作者是 Cocoon AI 团队。它本质上是一个 Claude AI Skill（技能），通过预置的设计规范（SKILL.md）引导 Claude 生成符合工业标准的架构图。

项目的核心洞察是：AI 助手已经能理解系统架构，却无法把理解变成可视化成果。这个 gap 催生了大量"截图转图表"的中间件工具——但它们无一例外都需要你手动排版。而 Architecture Diagram Generator 直接把这个工作也交给 AI。

当前仓库已积累 5,400+ Stars，fork 400+ 次，issue 数为 0（维护状态极佳），最新一次提交是 2026 年 5 月 13 日。

微服务架构图示例

图2：微服务架构图，展示服务网格、消息队列和云原生组件

核心功能：AI 驱动的架构图生成

操作流程（三步完成）

安装 Skill：下载仓库中的 architecture-diagram.zip，上传到 Claude.ai 的 Skills 页面，启用即可。支持 Free/Pro/Max/Team/Enterprise 全系列账号（需开启 Code Execution）。
准备架构描述：三种方式获取——让 AI 分析你的代码库、直接手写组件列表、或让 AI 生成典型架构模板。
让 Claude 使用 Skill：粘贴架构描述到 Claude 对话框，AI 自动生成 HTML 文件。

生成后，你可以直接在浏览器中查看，也可以点击 Copy / PNG / PDF 按钮导出，导出功能通过 html2canvas 和 JSPDF 库在浏览器端完成，无需服务器。

AWS无服务器架构图示例

图3：AWS无服务器架构图，展示Lambda、API Gateway、DynamoDB等云服务组件

技术实现：SKILL.md 里的设计系统

项目的工程量集中在 architecture-diagram/SKILL.md 这份设计规范文件里，约 8,000 字，详细定义了：

色彩语义体系：每个组件类型对应特定颜色——前端青色（#22d3ee）、后端翠绿（#34d399）、数据库紫罗兰（#a78bfa）、云/AWS 琥珀色（#fbbf24）、安全组件玫瑰红（#fb7185）、消息总线橙色（#fb923c）。这种语义着色让图的信息密度大幅提升，读者一眼就能区分服务类型。

背景与网格：深空黑（#020617）底色配合 40px 网格线，营造出终端/IDE 的技术感，同时让组件轮廓更突出。

排版规范：统一使用 JetBrains Mono 等宽字体，组件名 12px、子标签 9px、注释 8px、微标签 7px，保证极端复杂架构下文字也不会溢出。

区域边界：AWS 区域用 12px 圆角 + 虚线框表示，安全组用透明填充 + 虚线描边，层次分明。

适用场景

技术写作者：写博客、文档、RFC 时再也不用手动画图。描述一次架构，导出 PNG 插入文章，专业度立马上升一个档次。

架构师/团队负责人：评审设计文档时，让 AI 把文字方案转成可视化草图，减少沟通摩擦。

面试准备：准备系统设计面试时，快速生成典型架构图辅助表达，比白板手画更清晰。

开源项目维护者：README 里放一张漂亮的架构图，让新贡献者 5 分钟理解项目结构。

局限与注意事项

这个工具并非万能。以下几点值得注意：

生成的图依赖你的描述质量：你描述得越精确，AI 输出越准确。"一个处理支付的微服务"和"一个使用 Stripe SDK 接收 HTTP POST 请求、将交易写入 PostgreSQL 的 Node.js 12 Factor App"，生成的图质量差距巨大。
不支持中文描述输入：Skill 基于英文关键词设计，用中文描述可能触发意外的布局结果。
复杂架构需要迭代：超过 15 个组件的系统，AI 通常无法一次性生成完美布局，需要通过对话逐步调整。
仅输出 HTML：如果你需要 Visio/Gliffy/Lucidchart 原生格式，这个工具不适用——它只产出自包含 HTML+SVG 文件。

行业意义：文档自动化的下一个节点

Architecture Diagram Generator 代表了一个趋势：AI 生成式文档。过去我们用 AI 生成文字，现在开始用 AI 生成图形。传统的文档生成流水线（AsciiDoc/Markdown → CI 渲染 → 发布）正在演变为（自然语言描述 → AI 生成 → 一键导出多格式）。

这类工具的竞品包括 Mermaid、PlantUML 等文本图表语言，但它们需要学习语法，AI 原生程度较低。Architecture Diagram Generator 的优势在于"零学习成本"——你不需要知道什么是 rect 或 process，只需要描述你的系统长什么样。

项目由 Cocoon AI 团队维护，采用 MIT 许可证，可自由用于商业和非商业项目。如果你也在为文档中的架构图发愁，不妨试试这个工具。

分析基于 GitHub 公开数据，图片均为仓库 examples 目录中的示例输出。

Architecture Diagram Generator：让AI替你画架构图

Web应用架构图示例

图1：Web应用架构图示例，包含前端、API层、数据库、缓存和CDN

背景：从"AI画图"到"AI画架构"

当前仓库已积累 5,400+ Stars，fork 400+ 次，issue 数为 0（维护状态极佳），最新一次提交是 2026 年 5 月 13 日。

微服务架构图示例

图2：微服务架构图，展示服务网格、消息队列和云原生组件

核心功能：AI 驱动的架构图生成

操作流程（三步完成）

安装 Skill：下载仓库中的 architecture-diagram.zip，上传到 Claude.ai 的 Skills 页面，启用即可。支持 Free/Pro/Max/Team/Enterprise 全系列账号（需开启 Code Execution）。
准备架构描述：三种方式获取——让 AI 分析你的代码库、直接手写组件列表、或让 AI 生成典型架构模板。
让 Claude 使用 Skill：粘贴架构描述到 Claude 对话框，AI 自动生成 HTML 文件。

生成后，你可以直接在浏览器中查看，也可以点击 Copy / PNG / PDF 按钮导出，导出功能通过 html2canvas 和 JSPDF 库在浏览器端完成，无需服务器。

AWS无服务器架构图示例

图3：AWS无服务器架构图，展示Lambda、API Gateway、DynamoDB等云服务组件

技术实现：SKILL.md 里的设计系统

项目的工程量集中在 architecture-diagram/SKILL.md 这份设计规范文件里，约 8,000 字，详细定义了：

背景与网格：深空黑（#020617）底色配合 40px 网格线，营造出终端/IDE 的技术感，同时让组件轮廓更突出。

排版规范：统一使用 JetBrains Mono 等宽字体，组件名 12px、子标签 9px、注释 8px、微标签 7px，保证极端复杂架构下文字也不会溢出。

区域边界：AWS 区域用 12px 圆角 + 虚线框表示，安全组用透明填充 + 虚线描边，层次分明。

适用场景

技术写作者：写博客、文档、RFC 时再也不用手动画图。描述一次架构，导出 PNG 插入文章，专业度立马上升一个档次。

架构师/团队负责人：评审设计文档时，让 AI 把文字方案转成可视化草图，减少沟通摩擦。

面试准备：准备系统设计面试时，快速生成典型架构图辅助表达，比白板手画更清晰。

开源项目维护者：README 里放一张漂亮的架构图，让新贡献者 5 分钟理解项目结构。

局限与注意事项

这个工具并非万能。以下几点值得注意：

生成的图依赖你的描述质量：你描述得越精确，AI 输出越准确。"一个处理支付的微服务"和"一个使用 Stripe SDK 接收 HTTP POST 请求、将交易写入 PostgreSQL 的 Node.js 12 Factor App"，生成的图质量差距巨大。
不支持中文描述输入：Skill 基于英文关键词设计，用中文描述可能触发意外的布局结果。
复杂架构需要迭代：超过 15 个组件的系统，AI 通常无法一次性生成完美布局，需要通过对话逐步调整。
仅输出 HTML：如果你需要 Visio/Gliffy/Lucidchart 原生格式，这个工具不适用——它只产出自包含 HTML+SVG 文件。

行业意义：文档自动化的下一个节点

项目由 Cocoon AI 团队维护，采用 MIT 许可证，可自由用于商业和非商业项目。如果你也在为文档中的架构图发愁，不妨试试这个工具。

分析基于 GitHub 公开数据，图片均为仓库 examples 目录中的示例输出。