编辑器：画布基础与节点连接

适用版本：ChengOS v0.1.0+ ｜ 最后核对：2026-08-12 ｜ 来源：chengflow-ui/src/features/editor/components

编辑器是一张 React Flow 画布：左侧是节点面板，中间是图，右侧是属性面板。本文讲如何浏览画布并组装一张图；配置选中节点的部分见节点配置。

布局

添加节点

从面板把节点拖到画布上。位置对引擎没有任何意义——执行顺序来自连线，而不是从左到右的摆放——但按阅读顺序排布会让图好懂得多，而编辑器不会替你自动整理。

节点面板是「装了什么」的权威列表：它由后端的节点注册表生成，因此新增的节点类型无需前端发版就会出现。

连接节点

从某个节点右边缘的输出端口拖动到另一个节点左边缘的输入端口。

连接是做类型检查的。 每个端口都声明了类型，编辑器会拒绝无法安全传递数据的搭配。一个不接受你连线的端口，是在告诉你类型不兼容——这个检查是针对节点注册表的 O(1) 操作，所以它是即时的，而不是你稍后手动触发的一次校验。修正方式通常是插入一个 utils/type_cast 节点，或者改用另一个输出端口。

输入端口一般只接受一条连线；输出端口可以连向多个下游节点，这就是把一个值扇出到并行分支的方式。

选择与编辑

• 单击选中节点并打开它的属性。
• 在空白画布上框选可以选中多个节点，批量操作会作用于全部选中项。
• 右键节点打开上下文菜单——复制、删除、最小化。
• 最小化会把节点折叠成紧凑卡片。这纯粹是视觉效果，在图超出一屏后很有用；被最小化的节点仍会显示标记了 x-collapsed-visible 的字段。

键盘操作

便签与整理

画布支持自由浮动的便签，它们是注释而非图的参与者——永远不会执行，也不承载数据。用它们记录某个分支为什么存在，而这恰恰是图自身无法表达的东西。

保存

用工具栏按钮或 Ctrl+S 保存。首次保存会要求输入名称。工作流持久化在 PostgreSQL 中，而不是浏览器存储里，因此它立刻对所有客户端和 API 可用。

未保存的改动按标签页跟踪，编辑器只会把标签页标记为已修改，而不会自动保存——这样你放弃的一次实验就不会覆盖原本可用的版本。

导入已有工作流

把工作流 JSON 文件拖到画布上即可导入。这与 GET /api/v1/workflows/:id/export 产出的格式相同，因此「导出—编辑—导入」是一种正当手段，用来完成那些靠鼠标会非常繁琐的批量机械修改。

下一步

• 节点配置——属性面板与 Schema 驱动表单。
• 测试与调试——运行一张图并读懂发生了什么。
• 第一个工作流——一次带引导的搭建。