メインコンテンツへ移動
ドキュメントワークフローの構築ビジュアルエディター

ビジュアルエディター

Canvas + YAML デュアルカラム、ツールバー、インポートとエクスポート、バージョンスナップショット、共同編集ロック - すべてのボタンが導入されています。

ワークフロー エディターは、毎日最も多くの時間を費やすページです。この記事では、すべての領域とすべてのボタンについて説明しているので、X を実行する場合にどこをクリックすればよいかがわかります。

全体のレイアウト

エディターは典型的な 3 列レイアウトです。

  • 上部のツールバー — 保存/検証/実行/インポート/エクスポート/バージョン履歴などの主要な操作。
  • 左列キャンバス — ドラッグ アンド ドロップ ノード、接続、ズーム、ミニマップを使用した DAG 視覚化
  • 右列 YAML — Monaco Editor は、構文ハイライト/オートコンプリート/エラー プロンプトを使用して YAML ソースを直接編集します
  • 下部のステータスバー — 状態の保存、ロック保持者の編集、コラボレーターのカーソル位置、最終検証時刻
  • 右の引き出し — AI アシスタント、ブレークポイント パネル、変数スナップショット (オンデマンドでオープン)

Canvas と YAML: 双方向のバイトレベル同期

これがBraidrunと他のブランドの最も明らかな違いです。 DAG グラフと YAML はバイトレベルで同等です。

  • YAML で行を変更すると、キャンバス上の対応するノードが即座に更新されます。
  • キャンバス上で接続線をドラッグすると、YAML の対応する depend_on フィールドが同時に表示されます。
  • コメント、空白行、フィールドの順序は失われません。エクスポートされた YAML は、エディターに表示されるものとまったく同じです。
いつどちら側を使用するか?
  • キャンバス: 全体の構造を確認し、新しいステップのトポロジを描画し、コード レビューを行います。
  • YAML: 詳細フィールドの変更、ブロックのコピー＆ペースト、細かい制御。
  • 両方ともオンになっており、一方を変更するともう一方も追従し、いつでも切り替えられます。

上部のツールバー

保存する

デフォルトでは、5 秒間入力を停止すると、自動的に 1 回保存されます。 Ctrl / Cmd + S を押して手動でトリガーすることもできます。保存するたびに、 バージョンスナップショット(単純なオーバーライドではありません)。

元に戻す / やり直し

ツールバーには元に戻す / やり直しの 2 つのボタンがあり、ショートカットキーは Ctrl / Cmd + Z と Ctrl / Cmd + Shift + Z です。これはエディターレベルの履歴スタックで、キャンバスのドラッグ、YAML の修正、AI アシスタントが段階的に構築した各ステップがすべて同じ履歴に入ります。「AI が 1 ステップ失敗した」場合もワンクリックで戻せます。連続した入力は 1 件のレコードにまとめられ、自動保存の書き戻しによるタイムスタンプは余分な履歴を生成しません。最大で直近 50 個のスナップショットを保持し、別のワークフローに切り替えると履歴はリセットされます。

検証する

ラウンドトリップを行うためにプラットフォーム パーサーを呼び出します。

  1. YAML → WorkflowDefinition オブジェクト (構文レイヤー)
  2. WorkflowDefinition → セマンティック検証 (変数参照が解析できるかどうか、プリセットが見つかるかどうか、依存関係にループがあるかどうか)
  3. WorkflowDefinition → YAML 往復（逸脱がある場合はエラーが報告されます）

エラーは YAML の行レベルで赤い波線で示され、クリックすると該当行にジャンプします。ディープ検証の結果も、下記で説明する診断問題パネルに統合されます。きれいに修正してから保存・公開します。

実行する

このボタンをクリックするとダイアログ ボックスが表示され、次のことが可能になります。

  • ワークフローの変数を入力します (デフォルト値が事前に入力されます)。
  • 確認・キャンセル dry-run (デフォルトでチェックされています - 初めて実行する場合に強く推奨されます)
  • トリガーソースの選択（マニュアル/スケジュールシミュレーション）

「実行の開始」をクリックすると、エディターは自動的に右側のドロワーを開き、リアルタイムのイベント フローを表示し、同時に現在のタブで実行の詳細を開きます。

インポート/エクスポート

  • YAML のインポート - ファイル/ペーストボード/URL から YAML をロードし、現在のコンテンツを上書きします。
  • YAML のエクスポート - 現在の YAML をローカル ファイルにダウンロードします。 gitのバージョン管理に適しています。
  • Dify/Langflow などの外部形式をインポートします - Pro 以降のパッケージが必要です。プラットフォームは自動的に Braidrun YAML に変換します。

バージョン履歴

保存するたびにスナップショットが作成され、デフォルトで 100 のバージョンが保持されます (Enterprise の場合は制限なし)。次のことができます。

  • すべてのスナップショットをリストします (時間、セーバー、変更された行数を含む)
  • 現在のバージョンの差分と比較する
  • 任意の履歴バージョンにロールバックします (ロールバックすると新しいスナップショットが作成され、実際には履歴が上書きされません)

Promote to module / Demote from module

キャンバス上で連続するいくつかのステップを選択し、「モジュールにプロモート」をクリックすると、これらのステップが独立した sub_workflow モジュールに抽出され、元の位置がモジュール呼び出しになります。逆の操作を降格します。詳細を見る モジュール化と再利用。

左列のキャンバス操作

新しいノードを追加する

  • 左下隅の「+」ボタンはステップタイプセレクターを開き、メインモードを選択します。
  • 右カラムから「ステップテンプレートフラグメント」をキャンバスにドラッグしても追加できます。

接続する

あるノードの出力エンドポイントを別のノードの入力エンドポイントにドラッグすると、YAML に depend_on 関係が自動的に追加されます。このプラットフォームでは、ループを形成するエッジを描画することはできません。ループを描画しようとすると、跳ね返されてトーストされます。

ノードの右クリックメニュー

  • 編集 - 部分的に編集するには、このステップの YAML スニペットを開きます。
  • コピー - 現在のステップのコピーを複製します (ID には自動的に接尾辞が付けられます)。
  • 削除 - 削除時に下流に参照がある場合は警告が表示されます。
  • 開始/終了として設定 - ワークフローの明示的な開始/終了をマークします (state_machine にのみ必要)。

ズームとミニマップ

右下隅にはミニマップがあり、複雑なワークフローがキャンバス サイズを超える場合に、すぐにジャンプできます。 Ctrl / Cmd + スクロールホイールでズームします。スペースを押しながらドラッグしてパンします。

右列 YAML

オートコンプリート

JSON スキーマに基づいて、一般的なフィールド名、プリセット名、既存のステップ ID を完成させることができます。 Ctrl / Cmd + 宇宙軍の覚醒。

Fold / Unfold

ステップ全体を折りたたむには、左側の行番号の横にある矢印をクリックします。ショートカット キー Ctrl / Cmd + Shift + [ / ]。

検索と置換

Ctrl / Cmd + F 検索、Ctrl / Cmd + H 置換。規則性をサポートします。現在のワークフローにのみ影響し、他のワークフローには影響しません。

診断と問題パネル

エディターには 2 層の lint があり、同じルールコードを共有しています。

  • クライアント側の即時診断 — 編集のたびにローカルで即座に再計算し（依存関係の循環、宙に浮いた参照、綴りが似た step id の提案などの構造ルール）、遅延ゼロで問題パネル、ノードのバッジ、ツールバーのバッジを駆動します。
  • サーバー側のディープ検証 — ツールバーの「検証」をクリックすると呼び出されます POST /api/workflows/lint。一度にすべての問題を取得し（保存時の検証は最初のエラーで停止しますが、lint は停止しません）、agent プリセットやモジュール契約といったサーバー側のデータを必要とするルールも補完します。

ツールバーのバッジはエラー / 警告の数をリアルタイムで表示します（エラーがある場合は赤、警告のみの場合は黄）。クリックするとディープ検証が実行され、問題パネルが開きます。パネル内の各問題にはステップ位置特定チップ（クリックで該当ノードにジャンプ）と修正提案が付いています。個別または全部を「AI に修正を任せる」こともでき、エディターは問題を構造化された prompt に組み立てて AI アシスタントに送信します。

右の引き出し

AI アシスタント

右列中央の「AI Assistant」アイコンをクリックして展開します。サポート:

  • 自然言語を使用して変更するロジックを説明すると、アシスタントが差分プレビューを表示します。
  • Slash コマンド: /execute、/validate、/export、/new、/undo、/help。
  • /undo はアシスタントの変更を元に戻します（最大 10 ステップ）。エディター自体の Ctrl / Cmd + Z でも AI の変更を 1 つずつ元に戻せます。

完全な機能を参照 AI アシスタントを使用したオーケストレーション。

ブレークポイントパネル

このパネルは、デバッグ モードで実行中に点灯します。一時停止中にブレークポイントの追加/削除、ヒット履歴の表示、変数の編集を行うことができます。詳細を見る ブレークポイントのデバッグ。

変数スナップショット

ステップをクリックすると、ステップが実行される前に使用可能なすべての変数 (var:* /steps.*.data / classifier.* / credentials.* を含む) が表示されます (資格情報の値は感度を下げて表示されます)。

共同編集ロック

同じワークフローを編集できるのは一度に 1 人だけです。最初に入力した人がロックを取得します。他の人がアクセスすると読み取り専用モードになり、ステータスバーに「xxx は編集中」と表示されます。ロックは 5 分間操作がないと自動的に解除されるか、管理者によって強制的にロックが解除されます。

複数人のコラボレーションプロセス

推奨プロセス: A. 変更後に保存 → ロックを解除 → B. ロックを解除 → 変更を続行します。並行して変更を加えたい場合は、複数のサブワークフローに分割し、個別に編集します。

よく使うショートカットキー

エディターで最もよく使用されるもののいくつか - 完全なリストを参照してください キーボードショートカット。

  • Ctrl / Cmd + S — 保存する
  • Ctrl / Cmd + E — 実行(ダイアログボックスを開く)
  • Ctrl / Cmd + Shift + V — 検証する
  • Ctrl / Cmd + Z — 元に戻す (YAML エディターと AI アシスタントの両方に適用)
  • Ctrl / Cmd + Shift + Z — やり直し
  • Alt + A — AIアシスタントドロワーを切り替える
  • Alt + B — ブレークポイントパネルの切り替え

次のステップ