視覺化 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 編排或開始免費試用。