# 安利一款画架构图的Skill，一键生成。
**作者**: 李岳
**日期**: 2026-04-15T16:15:15.000Z
**来源**: [https://x.com/liyue_ai/status/2044449483803787632](https://x.com/liyue_ai/status/2044449483803787632)
---
大家好，我是岳哥。
今天给大家分享一款Hermes Agent刚更新的技能：architecture_diagram，专门用来画各种架构图。
你只需要提供相应的组件，AI就可以帮你直接生成。
## Skill来源
这个功能原本是一个Claude Code的Skill开源项目，项目地址：
> https://github.com/Cocoon-AI/architecture-diagram-generator
## Claude如何生成专业的架构图
只需要3步即可生成前面漂亮的架构图。
1、安装Skills
有了项目地址，我们可以直接下载解压后存放到Claude Code的Skills目录下面。
或者直接跟AI说：
> 帮我安装这个Skill，[Skill项目地址]
安装还是非常简单的。
2、 准备架构描述
这是最关键的一步，你需要告诉 AI 你的系统长什么样。
不用担心描述得不够“专业”，这里有三种方法可以让你描述清楚：
- 让 AI 分析你的代码库：直接把你的项目代码路径（或仓库链接）发给 Claude，然后问它:
- 简单地列出核心组件和它们之间的关系。例如：
- 如果你不知道从何说起，可以直接问 Claude：
三种方法，总有一种适合你。
3、生成图表
当你有了清晰的架构描述后，在 Claude 的对话框里，先输入一句“咒语”来触发技能，然后粘贴你的描述。 格式如下：
> 使用architecture_diagram这个Skill来描述创建图表：
> [在这里粘贴你的架构描述]
例如：
发送后，Claude 就会调用已安装的技能，处理你的描述，并最终生成一个可以直接下载的 HTML 文件。 点击下载，用浏览器打开，你的专业架构图就诞生了。
## 具体案例
看完了步骤，如果你还是有点不确定“架构描述”到底该怎么写。可以参考以下几种提示词写法。
1、全栈Web应用
就可以得到下面这样一张图：
2、AWS无服务器架构
就可以得到下面这样一张图：
3、微服务
就可以得到下面这样一张图：
我们可以通过上面的示例，总结一些小技巧：
- 组件命名尽量通用：用“前端”、“后端”、“数据库”，而不是具体的项目代号。
- 连接关系说清楚：使用“连接”、“访问”、“发送数据到”等词明确组件间如何交互。
- 技术栈要具体：写明是“React”还是“Vue”，是“PostgreSQL”还是“MySQL”，这会影响图标和颜色编码。
- 可以描述层级：例如“用户通过浏览器访问负载均衡器，负载均衡器将流量分发给后端的多个应用服务器实例。”
## Hermes如何生成
Hermes Agent最近刚更新进去，使用起来更加方便。
直接在对话框里输入
> /architecture_diagram [架构图描述提示词]
例如：
同样可以生成微服务的架构图。
当然你需要将Hermes更新到最新版本，使用命令：
> hermes update
更新即可。
以上就是这个Skill的具体介绍，对于做开发的同学画架构图还是很方便的。
## 相关链接
- [@liyue_ai](https://x.com/liyue_ai)
- [10K](https://x.com/liyue_ai/status/2044449483803787632/analytics)
- [https://github.com/Cocoon-AI/architecture-diagram-generator](https://github.com/Cocoon-AI/architecture-diagram-generator)
- [Upgrade to Premium](https://x.com/i/premium_sign_up)
- [12:15 AM · Apr 16, 2026](https://x.com/liyue_ai/status/2044449483803787632)
- [10.8K Views](https://x.com/liyue_ai/status/2044449483803787632/analytics)
---
*导出时间: 2026/4/16 14:35:01*