张拼拼AI锦囊
← 回首页

AI 画出复杂流程 — 一句话生成可编辑的网页流程图

真人长视频 · EP0042 2026年6月16日 3:07
这一期讲什么

给客户、给同事讲方案的时候，经常会碰到一些复杂的步骤和流程，几句话怎么都讲不清楚——这种时候，最能帮上忙的就是一张流程图。

这一期我分享一个自己很常用的 skill「flowmaker」：你一句话描述一段流程，它就生成一张可编辑的网页版流程图——起点、终点、判断分支都符合标准规范，节点能拖、双击能改字、连线能编辑、还能展开看详情，最后一键导出 PNG 发给别人。最关键的是，它是单个 HTML 文件、零后端，双击就能打开。

配套下载 · 给你的 Claude Code 学
flowmaker · 网页流程图生成器（介绍页 + 两个可交互示例） HTML 19 KB
视频里这个 skill 的介绍页——讲清原理（AI 只写 nodes/edges 的 JSON，引擎负责自动布局与好看）、能力清单、两种用法，还内嵌两个真实产物可以直接拖着玩（世界杯赛制 / Claude Code 安装攻略，点节点「详情 ▾」看展开浮层）。skill 已开源（MIT）：github.com/xntj-ai/flowmaker。
flowmaker（开源仓库 · MIT） GITHUB
一句话描述流程 → 单 HTML、零后端、可拖拽编辑的网页流程图。把 Git 地址给 Claude Code，让它克隆到技能目录即可用。

给客户、给同事讲方案的时候，经常会碰到一些复杂的步骤和流程，几句话怎么都讲不清楚。这种时候，最能帮上忙的就是一张流程图。

这一期我分享一个自己很常用的 skill——flowmaker，已经开源了（MIT）：github.com/xntj-ai/flowmaker。它能做的事很简单也很实用：你一句话描述一段流程，它就给你画成一张可编辑的网页版流程图。

一句话，画出一张流程图

skill 装好之后，你直接跟 Claude Code 说一句「我要一张网页版的流程图，用 flowmaker 来做」，再把要画的内容告诉它就行。

比如现在正赶上世界杯——又有多少人真说得清世界杯的赛制？小组赛怎么打、32 强是怎么选出来的。这种「讲起来绕、画出来一目了然」的东西，丢给它就好。它生成出来的图，完全符合标准流程图的那些规范：有流程的起点、有终点，中间一个一个步骤列得清清楚楚。

能拖、能改、能导出——不是一张死图

这是它跟很多工具最不一样的地方：图是活的。

  • 每个节点都能拖动，位置自己摆；
  • 节点之间可以直接连线；单击、双击就能编辑节点里的内容，文字全都能改；
  • 连接线上的文字也能改，还能随手加一个新节点；
  • 画好之后，一键导出一张 PNG，直接发给别人。

节点还能展开详情

再举个例子：有的朋友不懂怎么安装 Claude Code，我就可以跟它说一句——用 flowmaker 生成一份「国内用户怎么安装 Claude Code、并连上国内第三方大模型 API」的小白流程攻略。

它做出来之后你会发现，每个节点上还有一个可以点开的小标记。点开之后，这个节点会展开——比如「安装 Node.js」这一步的详细攻略：要去哪个网站（链接能直接点开打开）、下载什么版本、不同系统下分别用什么命令安装……每一个环节都做得很细，是一个小白友好版的流程说明。

做流程图的工具很多，但同时满足这几条的几乎没有

这是我觉得它最值得说的一点。做流程图的工具一大把，但能同时做到下面这几条的，几乎没有：

  1. 单个网页文件，零后端：发给别人，别人双击就能直接用、直接编辑，不需要装环境、不需要服务器。（一个小提醒：刷新页面图就没了，编辑完一定记得导出图片保存。）
  2. 在浏览器里就能改：节点的类型、形状、颜色，连接线上的所有文字——你看到的所有东西，都是能编辑的。
  3. 一键导出 PNG 分享。

整个技术文档我都写在了 GitHub 上的 skill 说明里，分了很多细节步骤，感兴趣可以去看。

怎么用

用法很简单：把 Git 地址给 Claude Code，让它把这个 skill 克隆到技能目录就行。

你也可以直接改模板里的「数据岛」——因为这个网页本身就是一个流程图编辑器，你甚至可以从零建出一张流程图来。

当然，做成一个 skill 是最方便的方式：让大模型直接帮你调研，再把调研出来的流程、步骤，直接画成这样一张流程图。非常方便。

做流程图的工具很多，但单文件、零后端、还能在浏览器里直接拖着改的，几乎没有。