**A Mermaid diagramming skill pack designed for AI agents** — full syntax reference for 26 official diagram types, cross-platform command templates, plus battle-tested notes on puppeteer sandboxing, headless environments, stdin rendering, and dry-run validation.
数据分析
SkillFlowChart
试用生成技能流程图、决策树、工作流图。读取 SKILL.md 或技能定义文件,提取决策节点与执行步骤,输出自包含 HTML 流程图(SVG,零依赖)。适用于可视化 Skill 执行流程、画决策树、生成 agent skill 的 decision flow diagram、流程可视化。Reads a SKILL.md...
它能做什么
生成技能流程图、决策树、工作流图。读取 SKILL.md 或技能定义文件,提取决策节点与执行步骤,输出自包含 HTML 流程图(SVG,零依赖)。适用于可视化 Skill 执行流程、画决策树、生成 agent skill 的 decision flow diagram、流程可视化。Reads a SKILL.md and generates a decision flowchart HTML.
技能文档
Skill 决策流程图生成器
读取一份 SKILL.md,提取结构化数据 nodes.json,脚本确定性生成流程图 HTML。
分工
| 阶段 | 谁干 | 为什么 |
|---|---|---|
| SKILL.md → nodes.json | AI | SKILL.md 是自然语言,语义不稳定,靠 AI 理解上下文 |
| nodes.json → HTML | 脚本 | 坐标计算要确定性、可复现、对齐像素 |
AI 只输出结构化数据,绝不输出坐标或 SVG;脚本只做几何,绝不猜语义。
执行步骤
1. 读取 SKILL.md
读取用户指定的 SKILL.md。若未找到,询问用户输入路径。
2. AI 提取 nodes.json
按以下 schema 输出 JSON。每条出边必须显式标注 side 字段——这是 AI 的语义判断,脚本不会猜。
顶层结构
{
"title": "技能名称",
"subtitle": "可选描述",
"nodes": [ ... ],
"edges": [ ... ],
"loops": [ ... ],
"legend": [ ... ]
}
nodes:必填,节点数组edges:必填,有向边数组loops:可选,回环虚线(见下文)legend:通常留空[],使用默认图例
节点 type
| type | 含义 | 形状 |
|---|---|---|
entry | 流程起点 | 圆角矩形 |
decision | 决策点(是/否、有/无) | 菱形 |
process | 处理步骤 | 圆角矩形 |
output | 报告/文件输出 | 圆角矩形 |
terminal | 终止/报错退出 | 圆角矩形 |
节点 role(配色)
| role | 含义 | fill / stroke |
|---|---|---|
ai | AI 推理 / LLM 调用 | #E6F1FB / #185FA5 |
output | 报告 / 文件输出 | #EEEDFE / #534AB7 |
decision | 决策点 | #FAEEDA / #854F0B |
script | 脚本执行 | #E1F5EE / #0F6E56 |
terminal | 终止 / 报错 | #FCEBEB / #A32D2D |
一个节点只能有一个 role。 如果一个步骤涉及多种不同性质的工作(对应不同 role),必须拆成多个节点串联。例如「脚本取基线 + AI 补充分析」不能合并为一个 role=ai 的节点,必须拆成 role=script 和 role=ai 两个节点。
边 side(关键!)
| side | 含义 | 布局行为 |
|---|---|---|
bottom | 主流程向下 | target 在 from 下一层,cx 继承 from |
left | 决策左分支 / 分叉左 | 决策→同层水平连;普通→下一层正交折线 |
right | 决策右分支 / 分叉右 | 同上,方向相反 |
side 的语义判断由 AI 完成:
- 决策菱形(type=decision)的
left/right→ 与决策同层,水平连线 - 普通矩形(type=process/output)的
left/right→ 下一层,正交折线(垂直→水平→垂直,无斜线)
loops(回环,可选,虚线)
当流程中存在「回到先前步骤」的逻辑时使用,例如:
- 修复后重新审查(
apply_fix → entry) - 重试(
retry → checkpoint) - 循环直到满足条件(
recheck → validate)
{ "from": "apply_fix", "to": "entry", "label": "修复后重新审查", "path": "left_edge" }
字段说明:
from:回环起点节点 id(通常是最后一步)to:回环终点节点 id(通常是流程起点或某个检查点)label:回环标签,显示在虚线旁path:固定为"left_edge"(沿图左边缘路由)
注意:
- 回环起点到终点之间不要在 edges 里重复画边,否则会重复渲染
- loops 里的 from/to 节点不参与 depth 计算
legend
通常留空 [],脚本会使用默认 5 色图例。如需自定义:
[
{ "label": "AI 执行", "fill": "#E6F1FB", "stroke": "#185FA5" },
{ "label": "输出/报告", "fill": "#EEEDFE", "stroke": "#534AB7" },
{ "label": "决策点", "fill": "#FAEEDA", "stroke": "#854F0B" },
{ "label": "脚本", "fill": "#E1F5EE", "stroke": "#0F6E56" },
{ "label": "终止", "fill": "#FCEBEB", "stroke": "#A32D2D" }
]
3. 调用脚本生成 HTML
python3 /scripts/flowchart.py --out docs/decision-flowchart.html
脚本会:
- 校验 id 唯一性、side/type/role 合法性、from/to 引用合法性
- 自动计算层级(决策侧支同层 / 普通分叉下层 / 汇合点 = max(入边)+1)
- 自动计算 x(side 决定)和 y(按层级 + 节点高度)
- 渲染连线(水平侧支 / 正交折线 / 垂直主流程 / 汇合三段 / 回环虚线)
- 自动 viewBox + 底部图例
- 输出自包含 HTML
nodes.json 示例
docs/halucatch-v2-nodes.json— 完整示例(含 loop 回环、三叉分支、汇合点)docs/halucatch-nodes.json— 基础示例docs/security-review-nodes.json— 多决策点示例docs/self-nodes.json— 最小示例(9 节点)
自检清单
- 入口节点 type=entry 在最顶部
- 每条边都有 side 字段(bottom/left/right)
- 决策菱形的 side=left/right 是侧支(同层水平连线)
- 普通矩形的 side=left/right 是分叉(下层正交折线)
- 一节点一 role,混合步骤已拆分
- 汇合点(多条入边到同一节点)不需要特殊处理,脚本自动识别
- 回环用 loops 字段,不在 edges 里重复
- 所有节点 id 在 edges 的 from/to 中都被引用(无孤立节点)
- 图例留空
[]
相关技能
Turn a user-described business process into an automated execution flow and optionally convert it into a reusable local skill. Use when a user explains steps...
生成项目流程可视化图表;支持乌龟图(5M1E)、泳道图、流程图、时间线等多种模板;用户需要绘制项目流程图、过程乌龟图或导出流程可视化时使用
可视化图表生成技能,支持SVG/HTML/HTML+JS三种格式,包含完整设计规范,可保存为图片。触发词:画图表、生成图表、可视化、SVG、HTML图表、保存为图片、架构图、流程图、chart、meta-skill-system
生成 Agent Skill 课程的课后巩固材料与练习作业。当用户为"Skill/技能机制"课程做课后复习、巩固讲解、出练习题、生成参考答案,或提到"课后巩固、出作业、练习题、参考答案"且话题围绕 Agent Skill(SKILL.md、frontmatter、渐进式披露、技能触发)时使用。
Default skill for structured-data visualization, chart generation, and dashboard-style reporting. Use when the user asks to create charts, graphs, plots, das...