前言¶

需求评审、技术方案或数据库设计里，经常要把文字逻辑落成图：流程怎么走、模块怎么拆、表怎么关联。自己在 ProcessOn 里拖节点可以，但从零搭骨架往往占掉不少时间；让模型只输出 Mermaid 或 ASCII，又常常还要再导入、再改样式。

下面介绍的是 SkillHub 上的 ProcessOn Diagram Generator（@user_697d94c5/processon-diagramgen，当前版本 v2.5.2）。它由 ProcessOn 官方研发，挂在社区技能（community）的 design-media 分类下，标签标明 requires_api_key=false，安装时无需单独配置 API Key。技能目标是：把自然语言（以及 Mermaid 数据）转成 精美、专业、可在线编辑 的 ProcessOn 图表，而不是停留在对话里的静态示意。

这是什么¶

一句话：面向 Agent 的 ProcessOn 官方绘图技能，在用户提出「画图 / 生成图表 / 可视化业务流程」等需求时，由模型调用技能完成出图。

• 坐标：@user_697d94c5/processon-diagramgen
• 维护方：ProcessOn 官方（SkillHub 页面与已抓取资料一致）
• 解决的问题：结构化图表从描述到可编辑成品之间的手工搭建成本

与「只在回复里贴 Mermaid 代码」相比，本技能强调产出 ProcessOn 专业可视化图表，并支持 Mermaid 数据直接绘制（资料原文表述）。

核心功能¶

以下能力均来自 SkillHub 简介与页面说明，不展开未在资料中出现的接口细节。

1. 自然语言一键成图
   用口语描述业务或系统，生成可编辑的在线图表。

2. 多类图表类型（资料列举）
   - 流程图：含业务流程图、泳道图、标准流程
   - 时序图：系统交互、API 调用顺序
   - 架构图：软件架构、云架构、系统模块划分
   - ER 图：数据库建模
   - 组织结构图：团队层级
   - 时间轴、信息图

3. Mermaid 直连
   已有 Mermaid 描述时，可走「mermaid 数据直接绘制」路径，减少重复排版。

4. Agent 侧触发语义（技能说明中的强制触发场景）
   当用户要求生成、绘制、重绘、渲染或可视化结构化图表，或出现「自动画图」「在线制作流程图」「生成系统架构」「把这段逻辑画出来」「转成可编辑图」「重绘草图」等表达时，应优先调用本技能，而不是跳过技能仅用纯文本描述图。

目标用户画像在官方文案中为：开发者、产品经理、设计师。

安装与启用¶

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. 安装本技能¶

安装时必须用 --dir 指向当前 Agent 的 skills 目录，否则默认落在 ./skills/，Agent 可能识别不到。

skillhub install user_697d94c5/processon-diagramgen --dir <你的 skills 目录>

SkillHub 页面亦提供「交给 AI 安装」的提示：让 Agent 根据 https://skillhub.cn/install/skillhub.md 安装 @user_697d94c5/processon-diagramgen。

3. 常见 Agent 的 skills 目录¶

（摘自 SkillHub 安装文档，按你实际使用的客户端选择路径。）

安装后若 Agent 未立刻加载新技能，按所用客户端说明重启或刷新技能列表（安装文档提到 OpenClaw 等场景需指向正确目录）。

典型用法¶

资料未给出逐步截图教程，可复现的用法是：在已启用技能的 Agent 里，用自然语言或 Mermaid 提出绘图需求，由模型调用 @user_697d94c5/processon-diagramgen 完成生成。

自然语言示例（意图对齐官方触发语）

1. 向 Agent 说明：「请用 ProcessOn 画一张订单支付业务流程图，包含创建订单、支付回调、发货三个主阶段。」
2. Agent 应识别为图表生成请求并调用本技能，而不是只输出文字步骤。
3. 在技能返回的 ProcessOn 链接或编辑入口中继续微调版式与节点文案。

Mermaid 示例（能力来自「支持 mermaid 数据直接绘制」）

1. 先写好 Mermaid 源码（例如 flowchart TD 或 sequenceDiagram）。
2. 说明：「用 ProcessOn Diagram Generator 把下面 Mermaid 画成可编辑图」，并附上代码块。
3. 由技能完成导入式绘制，再在 ProcessOn 中编辑。

搜索技能时也可在 CLI 中检索：

skillhub search processon

再按第三节命令安装到对应 --dir。

适用场景与注意¶

适合

• 需要 在线、可协作、可继续编辑 的流程图、架构图、ER 图等，且希望从描述快速起稿。
• 团队已使用 ProcessOn，希望 Agent 产出与现有工具链一致的图表，而非孤立图片。
• 不想为绘图技能单独申请 API Key（requires_api_key=false）。

注意

• 技能归属 community 源，安装前可按 SkillHub 惯例确认版本（当前页面为 v2.5.2）与来源说明。
• 页面展示的统计为评分 100000、下载 18261、安装 433（以 SkillHub 页面实时数据为准，写作时自资料核对）。
• 具体返回形式（链接、嵌入方式等）以技能包内 SKILL.md 与运行时代码为准；本文未写入资料中未出现的配置项或环境变量。
• 复杂草图重绘、路线图、金字塔图等也在技能触发说明范围内，但细节能力仍以官方简介列举的类型为主，不宜假定未列出的专有图表引擎。

结尾¶

ProcessOn Diagram Generator 把「描述 / Mermaid → ProcessOn 可编辑专业图」封装成 Agent Skill，适合在写方案、对齐流程、画架构时减少从零排版。无需 API Key 即可按 SkillHub 流程安装到 Cursor、Claude Code、Codex 等环境的 skills 目录。

• SkillHub 页面：https://www.skillhub.cn/skills/user_697d94c5/processon-diagramgen
• API 坐标页：https://api.skillhub.cn/user_697d94c5/processon-diagramgen
• 安装说明：https://skillhub.cn/install/skillhub.md