前言¶

写设计文档或评审材料时，图往往比长段文字更省事：系统边界、服务依赖、业务流程、数据走向，一张图能说清大半。常见做法是切到 draw.io、PlantUML 或 Mermaid 在线编辑器，画完再贴回 Markdown 或 Wiki，上下文要在工具与对话之间来回搬。

下面介绍的是 SkillHub 上的「架构图与流程图绘制 Skill」（@user_60120345/diagram-builder-pro）。它把「按自然语言描述生成各类技术图」收进 Agent 的 Skill 流程，并支持内联 SVG（show_widget）与 Mermaid 代码块两种呈现方式，便于在支持对应能力的客户端里直接查看或二次编辑。

这是什么¶

一句话定位：面向开发场景的专业架构图与流程图绘制 Skill，版本 1.0.0，坐标 @user_60120345/diagram-builder-pro，来源为 community，分类 dev-programming，发布者为 user_60120345（SkillHub 页面展示作者为紫云墨竹）。标签 requires_api_key=false，表示按官方标注无需额外 API Key。

它要解决的是：在 Agent 会话里用关键词触发，由模型按 Skill 约定生成系统架构、微服务、拓扑、业务流程、数据流、时序、状态机、ER 等常见技术图，而不是每次手写 Mermaid 或换专用绘图工具。

核心功能¶

以下能力均来自 SkillHub 简介与元数据，未单独展开的实现细节不在本文臆测。

图类型覆盖

• 系统架构图、微服务架构
• 网络拓扑图
• 业务流程图、数据流图
• 时序图、状态机
• ER 图

两种输出方式

1. show_widget 内联 SVG 渲染：在支持 widget 展示的环境中，以 SVG 形式内联呈现图形。
2. Mermaid 代码块：输出标准 Mermaid 文本，便于复制到文档、CI 或支持 Mermaid 的渲染器。

触发关键词

在对话中涉及下列词时，更易匹配本 Skill：架构图、流程图、时序图、状态机、拓扑图、ER图、数据流图，以及英文 draw、diagram、flowchart、architecture。

社区数据（SkillHub 抓取，2026-10-20）

• 评分：100000
• 下载：4995

安装与启用¶

本 Skill 遵循通用 SKILL.md 格式。官方页面给出的安装方式是：让 AI 参照 SkillHub 安装文档，安装坐标 @user_60120345/diagram-builder-pro。

安装文档地址：

https://skillhub.cn/install/skillhub.md

若本机已安装 skillhub CLI，可按文档第三节将技能装到当前 Agent 实际使用的 skills 目录（装错目录会导致 Agent 识别不到，文档要求安装时必须使用 --dir）：

command -v skillhub && skillhub --version

未安装 CLI 时，文档提供一键安装（完整安装含 CLI 与默认 Skill）：

curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash

安装本 Skill 示例（将 <skills 目录> 换成你当前客户端的路径）：

skillhub install @user_60120345/diagram-builder-pro --dir <skills 目录>

文档列出的常用 skills 目录包括：

• Claude Code：~/.claude/skills/
• Cursor：~/.cursor/skills/
• Codex：~/.codex/skills/ 或项目下的 .agents/skills/

不同客户端路径以你实际环境为准；安装后若客户端要求重启或重新加载 Skill，按其产品说明操作。

也可将下面提示词发给已具备 Skill 安装能力的 Agent（与 SkillHub 页面一致）：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_60120345/diagram-builder-pro。

典型用法¶

公开页面未附带完整 SKILL.md 正文，因此下面只描述可复现的交互方式，不编造具体 Mermaid 或 widget payload。

1. 确认 Skill 已装入当前 Agent 的 skills 目录，并在对话里使用上文的触发词或明确说明图类型（例如「画一张微服务架构图」「用时序图描述下单流程」）。
2. 用结构化自然语言交代要素：参与方（服务/模块/用户）、关系（调用、依赖、数据流）、可选分区（VPC、可用区等）。Skill 的职责是把描述落成图，而不是替你补全未给出的业务事实。
3. 按客户端能力选择呈现：需要内联预览时，依赖 Agent 对 show_widget 的支持；需要进仓库文档时，可要求输出 Mermaid 代码块，再粘贴到 README 或设计 doc。

若安装后无响应，优先检查 --dir 是否指向当前客户端的 skills 目录，以及 Skill 是否已加载。

适用场景与注意¶

适合谁

• 需要在评审、设计说明、 onboarding 文档里快速出图的开发者
• 已在 Cursor、Claude Code、Codex 等支持 Skills 的环境里工作，希望减少「对话 → 外部绘图 → 再贴回」切换的人

限制与注意

• 图的质量取决于你对边界、命名和关系的描述是否清楚；Skill 不能替代架构决策本身。
• show_widget 与 Mermaid 的可见效果因客户端而异，以你使用的 Agent 产品为准。
• 元数据中的安装计数等字段会随 SkillHub 更新变化，以商店页面为准。

结尾¶

「架构图与流程图绘制 Skill」把多类技术图绘制收进 Agent Skill，支持 show_widget 内联 SVG 与 Mermaid 代码块，并通过中英文关键词触发，适合在写文档和沟通设计时快速出图。

• SkillHub 页面：https://www.skillhub.cn/skills/user_60120345/diagram-builder-pro
• API 坐标页：https://api.skillhub.cn/user_60120345/diagram-builder-pro