Skip to content
产品

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

JieGou 全新的视觉化画布让您透过拖放步骤来建构 workflow,用边线连接步骤,并即时观看执行流程在图形中运行。

JT
JieGou Team
· · 3 分钟阅读

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 编排开始免费试用

workflow-canvas visual-editor drag-and-drop dag workflow-builder
分享这篇文章

喜欢这篇文章吗?

在您的信箱中获取工作流程技巧、产品更新和自动化指南。

No spam. Unsubscribe anytime.