flowmaker 是一个 Claude Code / Agent 技能。给它一段流程,它就产出一个自包含的 .html 文件:浅色玻璃拟态风格,带判断菱形、起止圆角条、处理矩形三种标准形状,在浏览器里就能拖节点、改连线、双击重命名、增删。
和"文字转流程图"工具不同 —— 它们给你一张静态图或一段 Mermaid,只要有人想挪个框、改个字、加个分支就卡住了。flowmaker 的产物是一个真正可编辑的成品:双击文件即开,没有服务端,不用构建,也不必安装任何东西。可以邮件发出去、塞进 wiki,或者直接丢给不懂技术的同事,对方在浏览器里就能重新排布。
从一句话到可编辑流程图,中间只有四步。
用自然语言讲清起点、关键步骤、判断分支与各分支去向。
Claude 把流程拆成 nodes + edges 的 JSON,优先省略坐标交给自动布局。
把 JSON 写进 template.html,渲染引擎已内置在模板里。
浏览器打开即可交互:拖节点、改连线、双击重命名、增删。
不一定要有大模型 —— 引擎本身就在 assets/template.html 里,你也可以手写 JSON 直接替换。
流程图的语义靠形状区分,flowmaker 内置三种。
普通步骤、动作、操作。默认形状。
流程的开始与结束。起点配蓝、终点配金。
分支点。标题用问句,向外引"是/否"两三条边。
一个文件,零后端 —— 所有东西都在这张 .html 里。
nodes + edges,内联在 <script> 标签里。
自动布局、三种形状、拖拽交互,全封装好。
视觉为浅色 ppvi:玻璃磨砂节点、金/蓝/灰状态色,判断菱形用 SVG 多边形均匀描边绘制,锐角不会糊成灰块。
React Flow 与 dagre 在运行时从 CDN 加载,无需构建、无需服务器,也没有任何部署环节。
拖拽布局、从节点圆点拉出连线、双击节点改标题/形状/配色、单击连线改文字、Delete 键删除。
只给 nodes 和 edges,dagre 就自动排版(从上到下或从左到右);要精确版式时才手动给坐标。
把命令、配置、详细步骤收进「详情 ▾」弹层,而不是把节点撑大,保持版面紧凑。
git clone https://github.com/xntj-ai/flowmaker.git ~/.claude/skills/flowmaker
比如"用 flowmaker 把这个审批流程画成可编辑的网页流程图",它会补齐信息、生成数据、产出 .html。
拖节点、改连线、双击重命名 —— 改完就是交付物。也可不经 Claude,直接复制 assets/template.html 换 JSON。