JieGouは常にワークフローを表示する複数の方法を提供してきました：クイック編集用のステップリスト、構造理解用のダイアグラム、実行順序用のDAGビュー。しかし、いずれもビジュアルに構築することはできませんでした — キャンバス上にステップを配置し、接続を描き、自動化の空間的関係を確認すること。
新しいビジュアルワークフローキャンバスがこれを変えます。ズーム、パン、ミニマップ、スナップトゥグリッド、ライブ実行ビジュアライゼーションを備えたフルドラッグ＆ドロップSVGエディタです。
キャンバスでの構築
キャンバスは各ワークフローステップをノードとしてレンダリングします。ノードはステップタイプ別にカラーコード — レシピステップ、LLMステップ、条件ブランチ、ループ、パラレルグループ、承認ゲートなど、それぞれ独自のビジュアルアイデンティティを持ちます。
ステップ間の接続を追加するには、ノードの出力ポート（下部）から別のノードの入力ポート（上部）にドラッグします。ドラッグ中にカーソルに追従する青い破線のプレビューライン。有効なドロップターゲットはホバー時にハイライト。ポートでリリースしてエッジを作成。エッジは接続されたノード間のスムーズなBezier曲線としてレンダリング。
ノードの移動は簡単：クリック＆ドラッグ。ノードは20ピクセルグリッドにスナップし、手動アラインメントなしでレイアウトがきれいに保たれます。
大規模ワークフローのナビゲーション
ズーム — マウスホイール（Ctrl/Cmd付き）でカーソル位置を中心に0.15xから2.5xまでズーム。キーボードショートカット：Cmd+0で1xにリセット、Cmd+=でズームイン、Cmd+-でズームアウト。
パン — トラックパッドまたはマウスホイールで水平・垂直スクロール。
ミニマップ — 右下隅の200x140ピクセルのオーバーバイューが完全なワークフローレイアウトを表示、白い矩形が現在のビューポートを示します。ミニマップの任意の場所をクリックして即座にジャンプ。
ライブ実行ビジュアライゼーション
キャンバスはビルダーだけでなく、実行中のワークフローのビューアーでもあります。
ワークフロー実行時、キャンバスが実行状態をリアルタイム表示。アクティブなステップが光ります。完了ステップがステータスを表示。失敗ステップが即座に可視化。自動化がグラフを通じてステップごとに流れるのを確認できます。
Claudeやその他のLLMを使用するステップでは、実行中のステップを選択するとキャンバス下部に推論オーバーレイが表示されます。モデルの思考プロセス — 出力の背後にある思考連鎖 — を表示。プロンプトのデバッグやAIの特定の判断理由の理解に有用です。
マルチエージェントオーバーレイ
複数のAIエージェントを使用するワークフロー — コーディネーターがスペシャリストに委譲、ロール固有のエージェント間でパイプラインが作業を渡す — では、キャンバスが共有メモリ領域を破線ボーダーの半透明バウンディングボックスとして表示。
各領域はエージェントロール別にカラーコード：コーディネーターはシアン、スペシャリストはピンク、ワーカーはグリーン。領域ラベルがどの共有変数がエージェントを接続しているかを表示。キャンバスはマルチエージェントワークフローでサイクル検出も実行し、循環依存関係が存在する場合は影響ノードが赤く光り、ツールバーに警告バッジが表示されます。
キャンバスビューと他のモード
キャンバスは4つのワークフロー表示モードの1つで、ワークフロー詳細ページのタブから利用可能：
- List — 個別ステップ設定のクイック編集に最適
- Diagram — 読み取り専用の構造ダイアグラム
- DAG — 実行依存関係を示す有向非循環グラフ
- Canvas — フルインタラクティビティの新しいビジュアルエディタ
4つのビューすべてが同じワークフローを反映。リストビューでステップの設定を編集し、キャンバスビューに切り替えると変更が即座に反映されます。
利用可能プラン
ビジュアルワークフローキャンバスはTeamとEnterpriseプランで利用可能です。DAG実行モードとフルワークフローオーケストレーション機能セットと共に提供。ワークフローオーケストレーションの詳細または無料トライアルを開始。