前言¶
在文档、评审和结对编程里，流程图往往比长段文字更快对齐逻辑。常见做法是手写 Mermaid、在 draw.io 里拖图形，或对照国标符号表自己核对框线含义——步骤多，且容易和团队约定的符号不一致。
下面介绍 SkillHub 上的社区技能「流程图绘制助手」（@user_516d7c35/flowchart-designer，v1.0.0）。它把国标符号约定和多种图类型写进 Skill 指引，让 Agent 在用户提出「画流程图」「设计流程」「制作程序框图」等需求时，按同一套规则生成结果，并可选 Mermaid、SVG 或 HTML 形式交付。
这是什么¶
「流程图绘制助手」是发布者 user_516d7c35 在 SkillHub（分类 design-media，来源 community）上架的通用流程图 Skill。页面标注 requires_api_key=false，不依赖额外 API Key。
定位可以概括为：在对话中根据自然语言描述，绘制遵循 GB 1526-89（对应 ISO 5807-1985）的流程类图形，并支持多种输出载体，便于粘贴进 Markdown、嵌入页面或二次编辑。
官方入口：
- SkillHub 页面：https://www.skillhub.cn/skills/user_516d7c35/flowchart-designer
- API 坐标（安装与索引用）：https://api.skillhub.cn/user_516d7c35/flowchart-designer
核心功能¶
以下能力均来自 SkillHub 简介与技能页说明，未在公开页展开的实现细节不在此文臆测。
图类型（五种）¶
- 程序流程图
- 数据流程图
- 系统流程图
- 程序网络图
- 系统资源图
输出格式（三种）¶
- Mermaid 代码：适合放进仓库文档、Wiki 或由渲染器预览。
- SVG 图形：适合需要矢量图、印刷或设计工具后处理的场景。
- HTML 可视化：适合在浏览器中直接查看交互或布局效果。
触发场景¶
当用户表达绘制流程图、画流程图、设计流程、制作程序框图等意图时，Agent 应启用本 Skill，按技能内规则选符号与图型，而不是随意发明一套图形语法。
安装与启用¶
SkillHub 推荐两种方式：用 CLI 安装到当前 Agent 的 skills 目录，或把安装提示词发给 AI 让其按官方安装文档操作。
1、安装 SkillHub CLI（若尚未安装）¶
先检查是否已有 skillhub：
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
说明见：https://skillhub.cn/install/skillhub.md
2、安装本技能到 Agent 的 skills 目录¶
安装时必须用 --dir 指向当前 Agent 实际读取的 skills 目录；默认装到 ./skills/ 可能不会被识别。
skillhub install @user_516d7c35/flowchart-designer --dir <skills 目录>
常用路径（来自 SkillHub 安装文档）：
- Cursor：
~/.cursor/skills/ - Claude Code：
~/.claude/skills/ - Codex：
~/.codex/skills/或项目下的.agents/skills/
安装后若 Agent 未立刻加载新 Skill，按你所用客户端的说明重启或重新打开会话。
3、通过对话让 AI 安装（官方页同款提示）¶
技能页提供的安装提示词为：
请根据 https://skillhub.cn/install/skillhub.md，安装 `@user_516d7c35/flowchart-designer`。
将上述内容发给支持 Skill 的 Agent 即可；Agent 应参照 skillhub.md 完成 CLI 与 --dir 安装，避免装错目录。
典型用法¶
公开页未提供单独的「示例仓库」或固定测试用例；可复现的步骤主要是安装与对话描述需求。
安装（可照抄执行）¶
在终端（示例为 Cursor 用户目录）：
skillhub install @user_516d7c35/flowchart-designer --dir ~/.cursor/skills/
对话中描述图的需求¶
安装并启用后，用自然语言说明图类型、业务步骤和期望输出格式。表述可与 Skill 简介中的触发语一致，例如：
- 「请按程序流程图，把用户登录校验画出来，先给 Mermaid。」
- 「做一张数据流程图，说明订单从提交到入库，输出 SVG。」
- 「系统资源图，标出 Web、缓存、数据库，要 HTML 可视化。」
Agent 在 Skill 指引下应选用 GB 1526-89 对应符号，并在 Mermaid、SVG、HTML 中择一或按你的要求组合交付。若需改图，继续补充分支、异常路径或并行步骤即可迭代。
适用场景与注意¶
适合谁
- 需要在技术文档、设计说明、评审材料里快速出标准流程图，又不想每次查国标符号表的开发者与写作者。
- 希望 Agent 输出可直接进 Markdown（Mermaid）或前端/设计链路（SVG、HTML）的团队。
使用上需注意
- 本技能强调国标符号体系；若项目另有内部制图规范，应在对话里明确优先级或补充约束。
- 复杂布局、极大规模网络图仍可能需要人工在专业工具中微调；Skill 的价值在于统一符号与缩短从文字到初稿的路径。
- SkillHub 页面当前统计（以抓取资料为准）：评分 100000，下载 6111；标签标明无需 API Key。不同时间刷新商店，下载量可能变化。
- 未在公开资料中写明 Cursor / Codex / Claude Code 的差异化配置项时，三者差异仅体现在 skills 目录路径 与客户端是否自动热加载 Skill，其余按同一
skillhub install流程即可。
结尾¶
「流程图绘制助手」把 GB 1526-89 下的五类流程相关图与三种输出格式收敛到一个 Skill 里，适合在 Agent 对话中处理「画流程图」「设计流程」类任务。安装坐标为 @user_516d7c35/flowchart-designer，可按 https://skillhub.cn/install/skillhub.md 安装，技能主页见 https://www.skillhub.cn/skills/user_516d7c35/flowchart-designer 。
