> ## Documentation Index
> Fetch the complete documentation index at: https://dripart-docs-nav-cta-ab-test-try-cloud-free.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# サブグラフ - ワークフローを簡素化

> ComfyUI のサブグラフ機能の紹介。作成、ナビゲーション、管理方法を含みます。

<Note>
  サブグラフ機能には ComfyUI フロントエンドバージョン 1.24.3 以降が必要です。この機能が表示されない場合は、以下を参照してください：[ComfyUI の更新方法](/ja/installation/update_comfyui)

  * 本文書の画像は nightly バージョンのフロントエンドで作成されています。実際のインターフェースを参照してください
  * サブグラフをノードに戻すような一部の機能は、将来サポートされる予定です
</Note>

<Tip>
  プログラムでサブグラフを操作するための開発者ドキュメントについては、[サブグラフ開発者ガイド](/ja/custom-nodes/js/subgraphs) を参照してください。
</Tip>

<iframe className="w-full aspect-video rounded-xl" src="https://www.youtube.com/embed/xgQoGT-VpxE?si=hD5196gcX0RW-0Ko" title="ComfyUI Selection Toolbox New Features" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

サブグラフは、複雑なワークフローを単一の再利用可能なサブグラフノードにパッケージ化できる強力な ComfyUI 機能であり、管理と共有を容易にします。

<img src="https://mintcdn.com/dripart-docs-nav-cta-ab-test-try-cloud-free/NGVjCMSde10m5MUM/images/interface/features/subgraph/subgraph.jpg?fit=max&auto=format&n=NGVjCMSde10m5MUM&q=85&s=80ee0cf3e4107251a334e84d6f2e99e7" alt="Subgraph" width="4868" height="1380" data-path="images/interface/features/subgraph/subgraph.jpg" />

サブグラフをワークフローの「フォルダー」と考えてください。関連するノードをグループ化し、コレクション全体を 1 つの統一されたサブグラフノードとして使用できます。

**サブグラフの用途:**

* 複雑なワークフローを簡素化
* 一般的なノードの組み合わせを再利用
* モジュール式コンポーネントでより効率的なワークフローを構築

## サブグラフの作成

<Steps>
  <Step title="ノードを選択">
    ComfyUI でグループ化したいノードを選択します
  </Step>

  <Step title="サブグラフアイコンをクリック">
    <img src="https://mintcdn.com/dripart-docs-nav-cta-ab-test-try-cloud-free/NGVjCMSde10m5MUM/images/interface/features/subgraph/subgraph_icon.jpg?fit=max&auto=format&n=NGVjCMSde10m5MUM&q=85&s=7dab76c7dd6f58fbbfef2c0f0610c83a" alt="Subgraph icon" width="1144" height="743" data-path="images/interface/features/subgraph/subgraph_icon.jpg" />

    ツールバーでサブグラフアイコンを見つけます
  </Step>

  <Step title="サブグラフが作成されました">
    <img src="https://mintcdn.com/dripart-docs-nav-cta-ab-test-try-cloud-free/NGVjCMSde10m5MUM/images/interface/features/subgraph/workflow_using_subgraph.jpg?fit=max&auto=format&n=NGVjCMSde10m5MUM&q=85&s=275bc3e68fad0eea83254680d18c1a66" alt="Workflow using subgraph" width="1654" height="995" data-path="images/interface/features/subgraph/workflow_using_subgraph.jpg" />

    ComfyUI は、選択したノードの入力と出力に基づいて自動的にサブグラフを作成します
  </Step>

  <Step title="サブグラフをカスタマイズ">
    [サブグラフの編集](#サブグラフの編集) を参照してください。サブグラフを編集および整理して、完全に機能するノードを作成できます

    <img src="https://mintcdn.com/dripart-docs-nav-cta-ab-test-try-cloud-free/NGVjCMSde10m5MUM/images/interface/features/subgraph/subgraph_after_edited.jpg?fit=max&auto=format&n=NGVjCMSde10m5MUM&q=85&s=2eca1e00e51540a49263856242e3accb" alt="Workflow using subgraph" width="1820" height="884" data-path="images/interface/features/subgraph/subgraph_after_edited.jpg" />
  </Step>
</Steps>

## サブグラフの操作

### 基本操作

サブグラフは通常のノードと同じように機能します。以下のことが可能です:

* 色と名前の変更
* バイパスを使用して無効化
* すべての標準ノード操作の適用

### サブグラフの編集

**編集モードに入るには:**

* サブグラフ内の空白領域（ウィジェット上ではない）をダブルクリックする、または
* サブグラフ編集ボタンをクリックする

<img src="https://mintcdn.com/dripart-docs-nav-cta-ab-test-try-cloud-free/NGVjCMSde10m5MUM/images/interface/features/subgraph/editing_subgraph.jpg?fit=max&auto=format&n=NGVjCMSde10m5MUM&q=85&s=7a35f71c151937517d2613cd4a2ff5d8" alt="Subgraph editing mode" width="2174" height="1418" data-path="images/interface/features/subgraph/editing_subgraph.jpg" />

**編集モードでは以下が表示されます:**

1. **ナビゲーションバー**: 現在のサブグラフを終了し、親レベルに戻ります
2. **入力スロット**: 外部に公開された内部ノード入力
   * 通常のノードのように出力をスロットに接続します
   * 接続ポイントを**右クリック**して、公開されたスロットの名前変更/削除を行います
3. **出力スロット**: 外部に公開された出力（入力スロットと同じ機能）

<img src="https://mintcdn.com/dripart-docs-nav-cta-ab-test-try-cloud-free/NGVjCMSde10m5MUM/images/interface/features/subgraph/subgraph_slot.jpg?fit=max&auto=format&n=NGVjCMSde10m5MUM&q=85&s=b62ee9fd6435764ac5cf889f2552beed" alt="Subgraph slots" width="1736" height="921" data-path="images/interface/features/subgraph/subgraph_slot.jpg" />

**スロットの操作:**

1. **デフォルトスロット**（ラベル 1）: 新しい入力/出力接続を追加するために使用します
2. 既存のスロットを**右クリック**して、名前の変更、削除、または元のノードからの接続解除を行います

> 注：スロット接続は標準的なデータタイプ検証ルールに従います

### パラメータパネル

ComfyUI v0.3.66 以降では、サブグラフ内部に入ることなく、パラメータパネルから直接サブグラフパラメータを編集できます。

任意のサブグラフを選択し、「Edit Subgraph Widgets」ボタンを使用してパラメータパネルを開くことができます。

<img src="https://mintcdn.com/dripart-docs-nav-cta-ab-test-try-cloud-free/NGVjCMSde10m5MUM/images/interface/features/subgraph/parameters_panel_open.jpg?fit=max&auto=format&n=NGVjCMSde10m5MUM&q=85&s=12809cdbc2d48b0c716453c0e8aae3f2" alt="Open Parameters Panel" width="1377" height="1176" data-path="images/interface/features/subgraph/parameters_panel_open.jpg" />

開くと、パラメータパネルで直接サブグラフウィジェット的顺序と可視性を編集できます。

<img src="https://mintcdn.com/dripart-docs-nav-cta-ab-test-try-cloud-free/NGVjCMSde10m5MUM/images/interface/features/subgraph/parameters_panel_edit.jpg?fit=max&auto=format&n=NGVjCMSde10m5MUM&q=85&s=2f78cc68fa3661da159123000655735f" alt="Open Parameters Panel" width="2885" height="1832" data-path="images/interface/features/subgraph/parameters_panel_edit.jpg" />

1. 並べ替え：ウィジェットを右クリックして押し、希望の位置にドラッグします
2. 可視性：目のアイコンをクリックしてウィジェットの可視性を確認できます

### ネストされたサブグラフ

サブグラフ内にサブグラフをネストすることで、さらに複雑なワークフローを作成できます。

<img src="https://mintcdn.com/dripart-docs-nav-cta-ab-test-try-cloud-free/NGVjCMSde10m5MUM/images/interface/features/subgraph/subgraph_nested.jpg?fit=max&auto=format&n=NGVjCMSde10m5MUM&q=85&s=e87e44950e09812fdd2763358a18ace8" alt="Nested subgraph" width="1820" height="1203" data-path="images/interface/features/subgraph/subgraph_nested.jpg" />

ナビゲーションバーには現在のレベルが表示され、ネストされたサブグラフ間を簡単に移動できます。

<img src="https://mintcdn.com/dripart-docs-nav-cta-ab-test-try-cloud-free/NGVjCMSde10m5MUM/images/interface/features/subgraph/subgraph_navigation.jpg?fit=max&auto=format&n=NGVjCMSde10m5MUM&q=85&s=f7810d4e5331cdd7ee7f0d3b832459ef" alt="Nested subgraph navigation" width="1820" height="1203" data-path="images/interface/features/subgraph/subgraph_navigation.jpg" />

### サブグラフの終了

サブグラフを終了して親レベルに戻るには:

* キャンバス上部の**ナビゲーションバー**（画像のラベル 1）を使用する、または
* **Esc** キーを押す

<img src="https://mintcdn.com/dripart-docs-nav-cta-ab-test-try-cloud-free/NGVjCMSde10m5MUM/images/interface/features/subgraph/editing_subgraph.jpg?fit=max&auto=format&n=NGVjCMSde10m5MUM&q=85&s=7a35f71c151937517d2613cd4a2ff5d8" alt="Subgraph editing mode" width="2174" height="1418" data-path="images/interface/features/subgraph/editing_subgraph.jpg" />

ナビゲーションバーをクリックするか Esc キーを押して、現在のサブグラフを終了し、親ワークフローに戻ります。

## サブグラフをノードに展開

サブグラフの作成が完了したら、必要に応じてそれをノードに戻すことができます。

<img src="https://mintcdn.com/dripart-docs-nav-cta-ab-test-try-cloud-free/NGVjCMSde10m5MUM/images/interface/features/subgraph/subgraph_to_nodes.jpg?fit=max&auto=format&n=NGVjCMSde10m5MUM&q=85&s=2e08c43a4450716cb6c845ecc74dd563" alt="Subgraph to node" width="850" height="578" data-path="images/interface/features/subgraph/subgraph_to_nodes.jpg" />

1. サブグラフノードを選択し、右クリックメニューの「Unpack subgraph」を使用してノードに戻すことができます。
2. 選択ツールボックスの「Unpack subgraph」ボタンをクリックして、ノードに戻すことができます。

## サブグラフブループリント

ComfyUI フロントエンドバージョン 1.27.7 以降では、サブグラフをノードライブラリに公開できます。

この機能を使用すると、サブグラフを `Subgraph Blueprints` ノードに変換できます。つまり、これは再利用可能なサブグラフノードです。

### サブグラフをノードライブラリに公開

<img src="https://mintcdn.com/dripart-docs-nav-cta-ab-test-try-cloud-free/NGVjCMSde10m5MUM/images/interface/features/subgraph/subgraph_publishing.jpg?fit=max&auto=format&n=NGVjCMSde10m5MUM&q=85&s=838b119a60720bc0949c8b92c1dd66a0" alt="Publish Subgraph" width="1478" height="1236" data-path="images/interface/features/subgraph/subgraph_publishing.jpg" />

現在、サブグラフをノードライブラリに公開する方法は 2 つあり、どちらも選択ツールボックスにあります:

1. 選択ツールボックスの `book(publish)` アイコンをクリックする
2. 選択ツールボックスメニューを開き、`Add Subgraph to Library` メニューを使用してサブグラフを公開する

`book(publish)` アイコンまたは `Add Subgraph to Library` メニューをクリックすると、次のダイアログが表示されます:

<img src="https://mintcdn.com/dripart-docs-nav-cta-ab-test-try-cloud-free/NGVjCMSde10m5MUM/images/interface/features/subgraph/subgraph_naming.jpg?fit=max&auto=format&n=NGVjCMSde10m5MUM&q=85&s=1639ea53c469cc56cafa72a97c852865" alt="Subgraph naming" width="1286" height="840" data-path="images/interface/features/subgraph/subgraph_naming.jpg" />

デフォルトでは、サブグラフはサブグラフノードの名前をサブグラフブループリントの名前として使用します。

公開後、ノードライブラリにサブグラフブループリントノードが表示されます。

<img src="https://mintcdn.com/dripart-docs-nav-cta-ab-test-try-cloud-free/NGVjCMSde10m5MUM/images/interface/features/subgraph/subgraph_blueprints.jpg?fit=max&auto=format&n=NGVjCMSde10m5MUM&q=85&s=e1cf9c187022cf9db832503018617ef1" alt="Subgraph blueprint node" width="2003" height="1242" data-path="images/interface/features/subgraph/subgraph_blueprints.jpg" />

これで、通常のノードと同じようにサブグラフをドラッグまたは検索できます。サブグラフブループリントから追加された新しいサブグラフノードは依然として孤立しており、ワークフローに追加した後、独立して編集でき、互いに影響を与えません。

### サブグラフブループリントの編集

サブグラフブループリントを編集したい場合は、下の画像のように編集ボタンをクリックできます。削除も可能です。

<img src="https://mintcdn.com/dripart-docs-nav-cta-ab-test-try-cloud-free/NGVjCMSde10m5MUM/images/interface/features/subgraph/edit_subgraph_blueprints.jpg?fit=max&auto=format&n=NGVjCMSde10m5MUM&q=85&s=498ab96d11dcbcd2f9ac3cb2e2f9e5e8" alt="Edit Subgraph Blueprint" width="972" height="988" data-path="images/interface/features/subgraph/edit_subgraph_blueprints.jpg" />

これにより、サブグラフ編集モードが有効になります

<img src="https://mintcdn.com/dripart-docs-nav-cta-ab-test-try-cloud-free/NGVjCMSde10m5MUM/images/interface/features/subgraph/subgraph_editing_mode.jpg?fit=max&auto=format&n=NGVjCMSde10m5MUM&q=85&s=0a09c1656557107eda05e2dc4fb3ef48" alt="Subgraph editing mode" width="1825" height="1153" data-path="images/interface/features/subgraph/subgraph_editing_mode.jpg" />

サブグラフブループリントを編集した後、親レベルに移動してサブグラフをプレビューできます。

<img src="https://mintcdn.com/dripart-docs-nav-cta-ab-test-try-cloud-free/NGVjCMSde10m5MUM/images/interface/features/subgraph/save_updated_subgraph.jpg?fit=max&auto=format&n=NGVjCMSde10m5MUM&q=85&s=b328918bcddc95c72de24107bedcea49" alt="Update Subgraph Blueprint" width="2000" height="1268" data-path="images/interface/features/subgraph/save_updated_subgraph.jpg" />

更新されたサブグラフブループリントを保存したい場合は、保存ボタンをクリックするか、ショートカットキー Ctrl + S を使用できます。
