前言¶
系统设计和评审里，架构图往往要反复改：模块一增删，就要在 draw.io、PPT 或 Mermaid 里对齐布局和连线。若你更希望 Agent 根据自然语言描述直接给出一份能在浏览器里打开的成品图，而不是先写 DSL 再渲染，SkillHub 上的「架构图生成器」走的是另一条路径——输出单个 .html 文件，双击即可查看。
下面介绍这个 Skill 的定位、能力与安装方式。
这是什么¶
架构图生成器（坐标 @user_7f8c14e8/architecture-diagram）是 SkillHub 社区 Skill，分类为 design-media，当前版本 1.0.0，发布者为 user_7f8c14e8（SkillHub 页面标注作者为超哥CHG）。它面向「画架构图、系统架构、模块关系图」等需求：由 Agent 按 Skill 内 SKILL.md 的约定生成 HTML，而不是依赖外部绘图 API。
Skill 标签标明 requires_api_key=false，安装后无需额外配置 API Key 即可使用。
核心功能¶
依据 SkillHub 官方简介，已核实的能力包括：
- 触发场景：当用户要求画架构图、系统架构、模块关系图，或提到「画个图」「架构图」「系统图」「模块图」等表述时，Agent 应启用该 Skill。
- 交付物：单个
.html文件，可在浏览器中直接打开。 - 视觉风格：暖色极简，参考 Paper.design 风格。
- 图元支持：分层、分组卡片、箭头连接、用户角色、图例等常见架构图元素。
安装与启用¶
Skill 遵循通用 SKILL.md 格式。在 SkillHub 上安装前，需先有 skillhub CLI；官方安装说明见 SkillHub 安装与优先源配置。
检查或安装 CLI¶
先确认本机是否已安装 skillhub：
command -v skillhub && skillhub --version
若未安装，可使用官方脚本（完整安装含 CLI 与默认 Skill）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
仅安装 CLI 时：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash -s -- --cli-only
安装本 Skill¶
安装时必须用 --dir 指向当前 Agent 的 skills 目录，否则默认会装到 ./skills/，Agent 可能无法识别。
skillhub install user_7f8c14e8/architecture-diagram --dir <skills 目录>
各客户端常用 skills 路径（摘自官方安装文档）：
| 环境 | skills 目录 |
|---|---|
| Cursor | ~/.cursor/skills/ |
| Claude Code | ~/.claude/skills/ |
| Codex | ~/.codex/skills/ 或项目下 .agents/skills/ |
| Windsurf | ~/.codeium/windsurf/skills/ 或 .windsurf/skills/ |
也可将下面提示发给支持 Skill 的 AI，由其按安装文档完成安装：
请根据 https://skillhub.cn/install/skillhub.md，安装 `@user_7f8c14e8/architecture-diagram`。
安装完成后，按你所用 Agent 的说明刷新或重启，使新 Skill 生效。
典型用法¶
启用 Skill 后，用自然语言描述系统边界与模块关系即可；Agent 会按 Skill 规则生成 HTML 文件。下列表述与官方触发说明一致，可作为起点：
帮我画一张电商系统的架构图：用户通过 Web 访问 API 网关，后面是订单、库存、支付三个服务，底层是 MySQL 和 Redis。需要分层和图例。
画个模块关系图，说明前端、BFF、微服务 A/B 之间的调用方向，用分组卡片表示各层。
生成完成后，在 Agent 给出的路径找到 .html，用浏览器打开核对布局与连线是否符合预期；需要调整时，继续用对话补充模块或改关系，让 Agent 更新同一文件或重新生成。
适用场景与注意¶
适合谁
- 需要快速出图做评审、文档附录或内部分享，且接受 HTML 作为交付格式。
- 希望少维护 Mermaid/PlantUML 源码，由 Agent 根据描述直接排版。
限制与注意
- 输出是静态 HTML，复杂交互或与企业制图规范强绑定的模板，仍需人工或专业工具二次处理。
- 图的质量取决于你对分层、模块、连线的描述是否清晰；Skill 不提供独立绘图服务，逻辑在 Agent 按
SKILL.md执行。 - 安装路径必须对准当前 Agent 的 skills 目录，否则 Skill 不会加载。
SkillHub 页面统计（以抓取资料为准）：评分 100000，下载 22524，安装 194；来源为 community。
结尾¶
架构图生成器把「描述系统结构」和「得到可打开的架构图」收成一步：无 API Key、单文件 HTML、常见架构图元素齐全。若你在 Cursor 等环境里经常要写系统图，可先按上文安装 @user_7f8c14e8/architecture-diagram，再用对话迭代图面。
官方入口：
- SkillHub 展示页：https://www.skillhub.cn/skills/user_7f8c14e8/architecture-diagram
- API 坐标页：https://api.skillhub.cn/user_7f8c14e8/architecture-diagram
