可视化工作流编排画布，用于设计人机协作流程。
在线使用: https://hezi-ywt.github.io/flow-canvas/
当企业引入 AI Agent 协助工作时，真正的挑战不是 Agent 本身的能力，而是如何把人、Agent、脚本的协作流程讲清楚。
一个复杂业务流程（如内容生产、数据处理、审批链路）通常涉及：
- 人做决策和审核
- Agent做分析和生成
- 脚本做执行和自动化
- 中间有大量产物在各环节间流转
这些角色之间的依赖关系、流转顺序、反馈回路，用文字描述容易遗漏，用代码写死又难以调整。FlowCanvas 的定位是：用可视化的节点图把流程结构化，导出 JSON 供 Agent 编排系统消费。
FlowCanvas 产出的 JSON 是 Agent 管理系统的流程描述层，配合 Skill 使用：
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ FlowCanvas │ │ Skill │ │ Agent 运行时 │
│ (流程设计) │──导出 JSON──→│ (流程→JSON) │──喂给 Agent──→│ (流程执行) │
└──────────────┘ └──────────────┘ └──────────────┘
画布上画流程/ Agent 读 SOP 文档 Agent 按 JSON
或 Agent 用 Skill 自动生成画布 JSON 调度人/Agent/脚本
从文档生成 JSON
两种产出 JSON 的方式：
- 人工画 — 在画布上拖拽节点、连线，直接导出 JSON
- Agent 生成 — 给 Agent 配一个
workflow-to-jsonSkill（见skills/目录），Agent 阅读 SOP 文档或口头描述，自动产出符合画布格式的 JSON，导入画布即可可视化
流程图不等于代码。节点描述的是业务步骤（"章节拆解"、"编辑审核"），不是可执行函数。Agent 运行时读取 JSON 后，根据节点的 type、executor、description 自行决定如何调度——调哪个模型、跑哪个脚本、等谁审批。
这种分离的好处：
- 业务人员在画布上调整流程，不需要改代码
- Agent 用 Skill 从文档自动生成流程 JSON，不需要人工画图
- 同一份流程 JSON 可以被不同的 Agent 运行时消费（换执行引擎不影响流程定义）
- 节点 = 任务，不是函数 — 节点描述的是业务语义（"章节拆解"、"人工审核"），不是技术实现
- 描述驱动 — 不在节点里塞结构化 schema/参数，用自然语言 description 携带语义，Agent 自行理解
- 执行者是属性，不是类型 — 同一个任务可以在不同流程中分配给不同执行者（人做审核 vs Agent 做审核）
- 产物显式建模 — 中间数据不是隐式传递，而是作为产物节点显式出现在流程中，让数据流可见
详细图文说明见 docs/guide/使用说明.md
从左侧边栏拖拽节点类型到画布上，或点击类型后在弹出面板中创建。内置 6 种节点类型：
| 类型 | 说明 | 默认执行者 |
|---|---|---|
| 分析 | 拆解、评估、提取信息 | Agent |
| 执行 | 执行具体操作或自动化任务 | 脚本 |
| 审核 | 确认、批准或驳回 | 人 |
| 输入 | 流程的外部输入数据 | — |
| 输出 | 流程的最终交付结果 | — |
| 产物 | 流程中的中间产物 | — |
鼠标按住节点左侧或右侧的端口，拖拽到另一个节点的端口上松开。反馈回路（驳回/重试）会自动用虚线弧线渲染。
把相关节点归入带标题的视觉容器，按流程阶段组织：
- 侧边栏「分组 ＋新建」创建空分组
- Shift+拖拽框选多节点 → 右键「创建分组」
- 拖拽分组标题栏 → 整组移动
- 拖节点进/出分组区域 → 自动加入/脱离
- 自动排列时，同组节点聚拢在一起
- 产物 — 隐藏/显示产物节点，只看任务流
- 连线名称 — 隐藏/显示连线上的文字标签
- 鼠标滚轮缩放，拖拽空白区域平移
- 亮色/暗色主题一键切换
- 导出 JSON — 保存流程为文件（含节点、连线、分组、坐标）
- 导入 JSON — 加载流程文件，无坐标时自动排列
- 分享链接 — 流程数据压缩编码到 URL，对方打开直接看到，不需要文件
| 快捷键 | 功能 |
|---|---|
| Delete / Backspace | 删除选中的节点、连线或分组 |
| Ctrl+Z / Cmd+Z | 撤销 |
| Ctrl+Shift+Z | 重做 |
| Escape | 取消选中 |
| Shift+拖拽 | 框选多个节点 |
node serve.js
# 打开 http://localhost:8080零依赖，无需 npm install。纯 vanilla JS + ES Modules，无构建步骤。
canvas/
├── state.js # 数据模型：nodeTypes[], nodes[], edges[], groups[], selection
├── render.js # DOM 渲染：节点、SVG 连线、分组容器
├── main.js # 事件绑定：拖拽、选中、连线、分组交互、右键菜单
├── layout.js # 自动排列：Sugiyama 分层 + 反向边检测 + 两级分组布局
├── inspector.js # 右侧属性面板：节点/连线/分组的编辑表单
├── io.js # JSON 导入导出 + 分享链接（deflate 压缩）
├── connect.js # 端口连线交互
├── viewport.js # 平移、缩放、滚轮
├── autosave.js # localStorage 自动保存（500ms 防抖）
├── history.js # 撤销/重做（全量快照，最多 50 步）
├── events.js # 发布/订阅事件总线
├── utils.js # toast、HTML 转义
└── index.html # HTML 结构 + 全部 CSS
skills/
└── workflow-to-json.md # Agent Skill：从文档/SOP 自动生成画布 JSON
// NodeType — 任务模板
{ name, category: '任务'|'产物', description, color, defaultExecutor?, extra }
// Node — 任务实例
{ name, type, description, executor: '人'|'Agent'|'脚本'|'', x, y, extra, group }
// Edge — 流程连线
{ from, to, description }
// Group — 分组容器
{ name, color, collapsed, extra }name是节点和分组的唯一标识node.group指向所属分组的name，空字符串表示不属于任何分组render字段可省略，导入后自动触发排列
{
"name": "流程名称",
"description": "流程描述",
"groups": [
{ "name": "阶段一", "color": "#7c6cff" }
],
"nodes": [
{ "name": "节点名", "type": "分析", "description": "...", "executor": "Agent", "group": "阶段一" }
],
"edges": [
{ "from": "节点A", "to": "节点B", "description": "条件说明" }
],
"render": {
"nodes": { "节点名": { "x": 100, "y": 200 } },
"vpX": 60, "vpY": 60, "vpScale": 1
}
}基于 Sugiyama 分层布局，针对工作流场景优化：
- DFS 检测反向边 — 驳回/重试等回环连线，分层前临时移除
- 最长路径分层 — 节点按依赖深度分配到列
- 重心排序（8 轮） — 最小化连线交叉
- 反向边弧线渲染 — 虚线弧线绕回，区分主流向
- 两级分组布局 — 有分组时，先排组间拓扑序，再排组内节点
MIT