视觉化 Workflow 画布：拖放操作，即时观看 AI Workflow 执行

JieGou 一直提供多种方式来检视 workflow：用于快速编辑的步骤清单、用于了解结构的图表，以及用于执行顺序的 DAG 视图。但它们都无法让您以视觉化方式建构——在画布上排列步骤、绘制步骤之间的连接，并查看自动化中的空间关系。

全新的视觉化 workflow 画布改变了这一切。它是一个完整的拖放式 SVG 编辑器，具备缩放、平移、小地图、对齐网格和即时执行视觉化功能。

在画布上建构

画布将每个 workflow 步骤渲染为一个节点。节点依步骤类型以不同颜色区分——recipe 步骤、LLM 步骤、条件分支、回圈、平行群组、审批闸门等，各自拥有独特的视觉识别。

要在步骤之间新增连接，从节点的输出埠（底部）拖曳到另一个节点的输入埠（顶部）。拖曳时，一条蓝色虚线预览线会跟随您的游标移动，当您悬停在有效的放置目标上时，它会高亮显示。在埠上释放即可建立边线。边线以平滑的贝兹曲线渲染在连接的节点之间。

移动节点很简单：点击并拖曳即可。节点会对齐 20 像素的网格，因此布局无需手动对齐即可保持整洁。对齐阈值为 10 像素——离网格线够近时节点会锁定到位，但在需要时您仍然可以自由地精确定位。

导览大型 workflow

小型 workflow 可以在一个画面中显示。正式环境的 workflow 则不行。画布提供了多种导览工具：

缩放 — 滑鼠滚轮（搭配 Ctrl/Cmd）可从 0.15 倍缩放至 2.5 倍，以游标位置为中心。键盘快捷键同样有效：Cmd+0 重设为 1 倍，Cmd+= 放大，Cmd+- 缩小。

平移 — 使用触控板或滑鼠滚轮进行水平和垂直卷动。画布在节点下方平滑移动。

小地图 — 右下角有一个 200x140 像素的概览图，显示完整的 workflow 布局，并用白色矩形标示您目前的检视范围。点击小地图上的任意位置即可立即跳转到该处。

全选 — Cmd+A 选取画布上的所有节点。Escape 取消全选并取消任何进行中的拖曳操作。

即时执行视觉化

画布不仅仅是一个建构工具——它也是正在执行的 workflow 的检视器。

当 workflow 执行时，画布会即时显示执行状态。正在执行的步骤会发光。已完成的步骤显示其状态。失败的步骤会立即可见。您可以在 workflow 执行时，逐步观看自动化流程在图形中流动。

对于使用 Claude 或其他 LLM 的步骤，当您选取正在执行的步骤时，画布底部会出现一个推理覆盖层。它显示模型的思考过程——输出背后的思维链。这对于除错提示词和理解 AI 为何做出特定决策非常有用。

多代理覆盖层

对于使用多个 AI 代理的 workflow——协调者委派给专家、管道在角色专属代理之间传递工作——画布以半透明的边界框和虚线边框显示共享记忆体区域。

每个区域依代理角色以不同颜色标示：协调者为青色、专家为粉色、工作者为绿色。区域标签显示哪些共享变数连接了这些代理。这种视觉化清楚地展示了多代理 workflow 中资料如何在代理之间流动。

画布还会对多代理 workflow 执行循环侦测。如果步骤之间存在循环依赖，受影响的节点会发红光，工具列中会出现一个警告徽章，显示侦测到的循环数量。代理委派中的循环可能导致无限回圈——在设计阶段发现它们比在执行阶段好得多。

网格与埠系统

网格背景使用双层图案：20 像素的点用于精细对齐，100 像素的点用于主要网格线。如果您偏好干净的画布，可以透过工具列切换网格显示。

埠——每个节点上的连接点——半径为 6 像素，点击侦测区域为 12 像素，即使在较低的缩放层级下也容易点击。输入埠位于每个节点的顶部，输出埠位于底部。在建立边线时，当您的游标靠近埠时，它会高亮显示以确认您正在指向正确的连接点。

画布视图与其他模式并列

画布是四种 workflow 检视模式之一，可透过 workflow 详细页面上的分页切换：

• 清单 — 原始的步骤清单，最适合快速编辑个别步骤的配置
• 图表 — 唯读的结构图
• DAG — 有向无环图，显示执行依赖关系
• 画布 — 全新的视觉化编辑器，具备完整的互动功能

四种视图都反映相同的 workflow。在清单视图中编辑步骤的配置，切换到画布视图，即可立即看到变更。画布也可在 workflow 建立流程中使用——当您从自然语言产生 workflow 时，画布会显示产生步骤的预览，让您在储存前重新排列。

可用性

视觉化 workflow 画布适用于 Team 和 Enterprise 方案，与 DAG 执行模式及完整的 workflow 编排功能集一同提供。深入了解 workflow 编排或开始免费试用。