前言¶
设计评审、接口对齐或写技术文档时，往往需要系统架构图、业务流程图或时序图。常见做法是切到 draw.io、PlantUML 或 Mermaid Live，手工改节点和连线，再贴回 Markdown 或聊天窗口。对话里若能让 Agent 按同一套规范出图，并支持内联预览或 Mermaid 源码，往返会少很多。下面介绍 SkillHub 上的「架构图与流程图绘制专家」，以及如何在 Cursor 等环境里安装与触发。
这是什么¶
「架构图与流程图绘制专家」是面向开发场景的 Agent Skill，坐标为 @user_04c33885/diagram-builder，当前版本 1.0.3，来源为 community，发布者为 user_04c33885，分类为 dev-programming。SkillHub 页面标注 requires_api_key=false，安装后无需额外 API Key。
它解决的是：在对话中根据自然语言描述，生成多种技术向图表，并以 show_widget 内联 SVG 或 Mermaid 代码块 两种方式交付，便于在支持 Skill 的客户端里直接查看或二次编辑。
核心功能¶
依据 SkillHub 简介，该 Skill 覆盖的图表类型包括：
- 系统架构图、微服务架构
- 网络拓扑图
- 业务流程图、数据流图
- 时序图、状态机、ER 图
输出形态有两类：
- show_widget 内联 SVG：适合在支持 widget 渲染的界面里直接看图。
- Mermaid 代码块：适合放进仓库文档、Wiki 或 CI 可读的 Markdown，便于版本管理与 diff。
触发上，官方列出的关键词包括：架构图、流程图、时序图、状态机、拓扑图、ER图、数据流图，以及英文 draw、diagram、flowchart、architecture。在对话里带上图种或上述词，更容易命中该 Skill 的绘制流程。
安装与启用¶
SkillHub 推荐两种方式：把安装提示发给 AI，或使用 skillhub CLI。安装前需确认 CLI 是否可用：
command -v skillhub && skillhub --version
若未安装，可按 SkillHub 安装文档执行完整安装（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/ 时，部分客户端不会自动加载。官方页面给出的安装提示为：
请根据 https://skillhub.cn/install/skillhub.md，安装
@user_04c33885/diagram-builder。
CLI 安装示例（将 <skills 目录> 换成你当前环境的路径）：
skillhub install user_04c33885/diagram-builder --dir <skills 目录>
常用客户端的 skills 目录（来自 SkillHub 安装文档）：
| 客户端 | skills 目录 |
|---|---|
| Cursor | ~/.cursor/skills/ |
| Claude Code | ~/.claude/skills/ |
| Codex | ~/.codex/skills/ 或项目下 .agents/skills/ |
| Windsurf | ~/.codeium/windsurf/skills/ 或 .windsurf/skills/ |
装到对应目录后，按你所用客户端的说明刷新或重启 Agent，使 Skill 生效。Codex CLI、Claude Code 与 Cursor 的差异主要在 skills 路径 与是否需重启；安装命令本身一致，均为 skillhub install … --dir …。
典型用法¶
官方资料未附带固定示例仓库，用法以对话驱动为主。可复现的起步方式如下。
- 确认 Skill 已安装到当前 Agent 的 skills 目录并完成加载。
- 在对话中说明要画的图种与内容，并带上触发词，例如：「画一张 微服务架构图，包含网关、订单服务、支付服务」或「用 时序图 描述登录流程」。
- 根据 Agent 与客户端能力，结果可能是 Mermaid fenced code block（可复制到文档），或通过 show_widget 渲染的 内联 SVG。
若你需要 Mermaid 源码长期维护，可在同一句里明确要求「输出 Mermaid 代码块」；若客户端支持 widget，可说明希望内联预览。具体排版与语法细节由 Skill 内 SKILL.md 约束，以安装后的本地 Skill 文件为准。
适用场景与注意¶
适合谁： 需要在技术讨论、设计说明或文档草稿中快速出图的开发者；已使用 Cursor、Claude Code、Codex 等支持 Skill 的环境，且希望减少在专用绘图工具与编辑器之间来回切换。
限制与注意：
- 图表质量依赖你对边界、组件名称与关系的描述是否清楚；复杂拓扑建议分步补全，而不是一次堆过多节点。
- show_widget 与 Mermaid 是否都能正常展示，取决于当前客户端是否支持对应渲染；不支持 widget 时，以 Mermaid 代码块为主更稳妥。
- SkillHub 页面统计（截至资料抓取）为评分 100000、下载 78239；社区来源 Skill 的版本为 1.0.3，升级可用
skillhub对同一坐标 reinstall/update（以 SkillHub 文档为准）。
结尾¶
「架构图与流程图绘制专家」把架构、流程、时序、状态机、ER 等常见技术图种收敛到一个 Skill 里，并统一两种交付方式：内联 SVG 与 Mermaid。若你已在用 SkillHub 管理 Agent 技能，可按上文路径安装 @user_04c33885/diagram-builder，在对话里用官方关键词触发即可。
- SkillHub 页面：https://www.skillhub.cn/skills/user_04c33885/diagram-builder
- 技能 API 坐标页：https://api.skillhub.cn/user_04c33885/diagram-builder
- 安装说明：https://skillhub.cn/install/skillhub.md
