Imported from xntj-ai/flowmaker (
SKILL.md). Install upstream withnpx skills add xntj-ai/flowmaker. Copyright stays with the author.
flowmaker — 单 HTML 网页流程图生成器
把一段流程描述，变成一个自包含 HTML 文件：浅色 ppvi 玻璃风、可拖拽编辑、零后端、双击文件即开。引擎（React Flow + dagre + 三形状）已封装在 assets/template.html，你只需产出流程的 JSON 数据并注入模板。
工作流
- 澄清流程（信息不足时）：起点/终点、关键步骤、判断分支、各分支去向。能从描述推断就直接画，别过度追问。
- 建数据：把流程拆成
nodes+edges，写成下方 schema 的 JSON。- 优先省略坐标，让 dagre 自动布局（最省事，任意流程都能排）。
- 只有要精确复刻某个版式时才手动给
x/y（给了坐标就不触发自动布局）。
- 生成文件：复制
assets/template.html→ 把<script id="flow-data">块整体替换为你的 JSON → 把<title>__TITLE__</title>的__TITLE__换成流程标题 → 另存为outputs/{YYYY-MM-DD}-{主题}-flowchart.html。 - 打开验证：用浏览器打开确认渲染正常（节点、连线、菱形、可拖拽）。
数据 Schema
{
"title": "顶栏标题",
"subtitle": "顶栏副标题（可省略）",
"direction": "TB",
"nodes": [
{ "id": "唯一id", "title": "主标题", "sub": "子标题/概述(可省)", "kicker": "小标签(可省)",
"detail": "点「详情 ▾」弹层显示的长内容(可省，支持多行)",
"shape": "process|terminator|decision", "variant": "|start|gold|muted",
"x": 0, "y": 0 }
],
"edges": [
{ "source": "id", "target": "id", "label": "线上文字(可省)",
"dashed": false, "sh": "b", "th": "t" }
]
}字段说明：
| 字段 | 取值 | 含义 |
|---|---|---|
shape |
process（默认，矩形）/ terminator（起止，圆角条）/ decision（判断，扁菱形） |
节点形状 |
variant |
空（普通）/ start（蓝，起点）/ gold（金，强调/终点）/ muted（灰虚线，弱化/失败分支） |
配色 |
kicker |
短文本 | 节点上方小标签；菱形节点会自动隐藏 kicker/sub，只显示一行灰色小字，所以判断节点只写 title |
detail |
HTML 字符串 | 节点显示「详情 ▾」按钮，点开浮层模态看完整内容。详细攻略/命令/配置放这里，节点本身只写概述，避免撑乱排版。按 HTML 渲染：<a href target="_blank"> 可点链接、<pre><code> 代码块、<span class="os win/mac"> 区分系统、<ul>/<p>/<b>、<span class="tip"> 提示框。攻略类要详细、分 Windows/macOS、把用户当小白、多写解释 |
dashed |
true/false | 虚线（用于"否/出局/失败"等弱分支），自动取消流动动画 |
sh/th |
t/b/l/r（默认 b→t） |
连线接哪个 handle；侧向分支用 "sh":"r","th":"tl" 走右侧更顺 |
x/y |
数字 | 手动坐标；全部节点都给才生效，否则整体走 dagre 自动布局 |
形状用法约定
- 起点 / 终点 →
terminator（起点配start蓝，终点配gold金） - 普通步骤 →
process - 判断 / 分支点 →
decision，title 用问句（"通过审核？"），向外引两三条带label（"是"/"否"）的边，弱分支加dashed - 主干尽量用同一套 handle（默认 b→t）走直线；侧向分支才用
r/tl
排版控制（节点别太胖）
节点宽度固定、高度随内容自适应。控制高度靠内容，不靠改尺寸：
- 节点上只放概述：
title一行 +sub一行短句（≤ ~10 字，避免换行撑高）。 - 详细内容（命令、配置、分系统说明）全放
detail浮层，别堆在sub。 - 起止节点（terminator）尤其要短：
title一行，长描述移到sub或detail，否则圆角卡片会变高。
交互（产物自带，无需额外代码）
拖动节点 · 从节点圆点拖出新连线 · 双击节点开编辑面板（改 kicker/标题/子标题/形状/配色） · 单击连线改线上文字 · 面板内删节点/删连线 · Delete 键删 · ＋添加节点。
技术说明
- 单文件，运行时通过 esm.sh CDN 加载 React 18 / @xyflow/react 12 / @dagrejs/dagre 1 / htm，无构建、无后端，需联网拉 CDN。
- 自动布局用 dagre（
direction控制 TB/LR/RL/BT）。 - 视觉为浅色 ppvi：玻璃磨砂节点、金/蓝/灰状态色、判断菱形为 SVG 多边形（均匀描边、不会在锐角处糊成灰块）。
参考 examples/worldcup.json（手动坐标版）与模板内置示例（自动布局版）。
