描述一段流程 → 得到一个单 HTML 文件：浅色玻璃风、判断菱形、可拖拽编辑、节点可展开详情、一键导出 PNG。零后端，双击即开。
↑ 这是真实产物，不是截图。拖动节点 · 拖圆点连线 · 双击节点改名 · 单击连线改字 · 点蓝色「详情 ▾」看展开浮层 · 右上角导出 PNG
在线产品出图好看却锁在平台里；Mermaid 渲染干净却只能改文本不能拖；专业库要么收费要么得自己搭工程。flowmaker 把"好看 / 可改 / 单文件 / 零后端"凑齐在一个产物里。
一个文件，双击用浏览器打开就跑。没有服务器、没有构建、没有依赖安装。
拖节点、拖圆点连线、双击改名、面板增删。交给别人也能继续改，不是死图。
处理矩形、起止圆角条、判断菱形——分支逻辑一眼能读，不是堆方块。
整张图按 2× 清晰度完整截出，含画布外没滚到的部分，直接进文档/PPT。
flowmaker 把"引擎"和"内容"彻底分开：模板里封好渲染与交互，AI 只需产出 nodes/edges 的 JSON，省略坐标就交给 dagre 自动排版。改一段描述、换一个 JSON，图就变了。
一句话或几句话讲清步骤与分支
拆成 nodes / edges 结构化数据
替换 HTML 里的数据岛
自动算坐标，省去手工排版
React Flow 出图，可拖可导出
扁菱形的锐角用 CSS clip-path 描边会糊成灰三角；改用 SVG polygon，描边在任何角度都均匀。
宽度不一致时中心对不齐，连线会拐 Z。统一固定宽 + 主干对齐同一轴，竖线才真直。
html-to-image 不渲染 CSS 定义的 SVG 填充；颜色全改内联，导出时临时关阴影/毛玻璃，出图干净。
# 克隆到技能目录 git clone https://github.com/xntj-ai/flowmaker \ ~/.claude/skills/flowmaker # 然后直接对 Claude 说： "用 flowmaker 把这个审核流程 画成可编辑的网页流程图"
{
"title": "审核流程",
"nodes": [
{ "id":"a", "title":"提交", "shape":"terminator" },
{ "id":"b", "title":"通过？", "shape":"decision" },
{ "id":"c", "title":"归档", "variant":"gold" }
],
"edges": [
{ "source":"a", "target":"b" },
{ "source":"b", "target":"c", "label":"是" }
]
}