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