夜雨聆风
作为技术人员，你是否也有过这样的痛苦经历：花费数小时在 Visio、Draw.io 或 Lucidchart 中拖拽组件、调整布局、配色，只为画出一张看起来还算专业的系统架构图？而当系统架构发生变化时，又要重新调整半天？
今天要介绍的这个开源项目，将彻底改变你制作架构图的方式。
一个让我惊艳的发现
最近，我在 GitHub 上发现了一个令人兴奋的开源项目 —— Architecture Diagram Generator，一个基于 Claude AI 的架构图生成器。它能够在几秒钟内，根据你的文字描述自动生成专业级别的系统架构图，而且是深色主题、配色精美的独立 HTML 文件。
当我用它生成了自己项目的架构图后，我忍不住在 Twitter 上分享：“🐮太喜欢了！这个架构图质量太高了！配色也很好，把我的 Hermes 架构+第三方插件都分析出来了！”
意外的惊喜：被 Hermes 创始人看到并集成
更让我惊喜的是，这条推文被 **Hermes AI Agent 的创始人 Teknium **看到并转发了！不仅如此，他还立即决定将这个技能集成到 Hermes 中作为内置功能。
Teknium 在推文中写道：“这个技能现在已经内置到 Hermes 中了！只需使用 /architecture-diagram
能够推荐一个优秀的开源项目，并看到它被知名 AI Agent 项目采纳，这种感觉真的很棒！这也充分说明了这个工具的质量和实用性。
这个工具到底有多强大？
Architecture Diagram Generator 最大的亮点在于它的简单高效。你不需要学习复杂的绘图工具，不需要纠结组件该放在哪里，只需要用自然语言描述你的系统架构，AI 就能帮你生成一张漂亮的架构图。
三种使用方式，总有一种适合你
方式一：让 AI 分析你的代码库
如果你已经有了项目代码，可以在 Cursor、Claude Code、Windsurf 或 ChatGPT 中打开代码，然后问 AI：“请分析这个代码库的架构，列出所有组件及其连接关系。”AI 会自动分析你的代码结构，生成架构描述。
方式二：自己写架构描述
如果你清楚系统的组成，可以直接列出组件和它们之间的连接关系。比如：
•前端：React 应用
•后端：Node.js API 服务器
•数据库：PostgreSQL
•缓存：Redis
•连接关系：React → API → 数据库/缓存
方式三：请 Claude 给你一个模板
如果你还在规划阶段，可以直接问 Claude：“给我一个典型的电商系统架构”或“设计一个微服务架构的示例”，让 AI 为你提供起点。
使用流程超级简单
1.获取系统架构描述（用上面三种方式之一）
2.将描述粘贴到 Claude.ai（需要安装 Architecture Diagram Generator 技能）
3.说一句：“请根据这个描述生成架构图”
4.几秒钟后，你就能得到一个精美的 HTML 架构图文件
更棒的是，你可以通过对话持续迭代。只需要告诉 Claude：“请把数据库改成 MongoDB”或“增加一个消息队列”，架构图就会实时更新。
生成的架构图有多专业？
这个工具生成的不是简陋的示意图，而是真正专业级别的架构图。每张图都包含：
•精美的深色主题设计：现代感十足，适合技术文档和演示
•智能配色系统：不同类型的组件自动使用不同颜色
•前端组件：青色（Cyan）
•后端服务：翠绿色（Emerald）
•数据库/存储：紫罗兰色（Violet）
•云服务/基础设施：琥珀色（Amber）
•安全组件：玫瑰色（Rose）
•外部系统：灰色（Slate）
•完整的文档结构：
◦项目标题和动态状态指示器
◦主架构图（SVG 格式，可缩放）
◦三张信息卡片，突出关键细节
◦项目元数据页脚
•独立 HTML 文件：无需任何依赖，可以直接在浏览器中打开、分享给团队、嵌入文档，或导出为 PNG/PDF
适用场景广泛
无论你是在做什么类型的系统，这个工具都能帮上忙：
•Web 应用架构：前后端分离、API 网关、CDN 等
•AWS 无服务器架构：Lambda、API Gateway、DynamoDB、S3 等
•微服务架构：服务网格、消息队列、服务发现等
•数据处理管道：ETL 流程、数据湖、实时分析等
•移动应用后端：推送服务、用户认证、数据同步等
如何开始使用？
安装步骤
1.从 GitHub 下载 architecture-diagram.zip 文件
2.访问 claude.ai，进入 设置 → 功能 → 技能
3.点击 + 添加，上传 zip 文件
4.开启该技能
就这么简单！
其他使用方式
如果你在使用 Claude 项目（Projects），也可以直接将 zip 文件上传到项目知识库中。
如果你在本地使用其他工具也一样
为什么这个工具值得关注？
在技术文档制作中，架构图往往是最耗时但又最重要的部分。一张清晰的架构图能够：
•帮助团队成员快速理解系统设计
•让新人更快上手项目
•在技术评审中清晰展示设计思路
•为文档和演示提供专业视觉支持
而 Architecture Diagram Generator 将这个过程从“数小时的手工劳动”变成了“几秒钟的 AI 对话”。更重要的是，当架构发生变化时，你不需要重新绘制，只需要告诉 AI 修改什么，新的架构图立即生成。
这种效率提升不仅仅是节省时间，更是让技术人员能够把精力集中在真正重要的事情上：设计和优化系统架构本身，而不是纠结于绘图工具的使用。
开源与社区
这个项目采用 MIT 许可证，完全开源免费。你可以：
•自由使用、修改和分发
•提交问题和功能建议
•贡献代码改进
•Fork 项目进行定制开发
项目由 Cocoon AI 团队开发维护，他们欢迎社区的反馈和贡献。
结语
在 AI 工具快速发展的今天，Architecture Diagram Generator 代表了一种新的工作方式：用自然语言描述需求，让 AI 处理繁琐的执行细节。这不仅适用于架构图制作，也是未来许多技术工作的发展方向。
如果你经常需要制作架构图，或者正在为技术文档的视觉呈现而烦恼，不妨试试这个工具。它可能会让你像 @huangserva 一样感叹：“🐮太喜欢了！”
项目地址：https://github.com/Cocoon-AI/architecture-diagram-generator
你用过哪些架构图工具？对 AI 生成架构图有什么看法？欢迎在评论区分享你的经验！