> ## Documentation Index
> Fetch the complete documentation index at: https://docs.comfy.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Subgraph - Simplify your workflow

> An introduction to the Subgraph feature in ComfyUI, including how to create, navigate, and manage subgraphs.

<Note>
  The subgraph feature requires ComfyUI frontend version 1.24.3 or later. If you don't see this feature, please refer to: [How to Update ComfyUI](/installation/update_comfyui)

  * Images in this document are made with nightly version frontend, please refer to the actual interface
  * Some features like converting subgraph back to nodes will be supported in the future
</Note>

<Tip>
  For developer documentation on working with subgraphs programmatically, see the [Subgraph Developer Guide](/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 />

A subgraph is a powerful ComfyUI feature that lets you package complex workflows into a single reusable subgraph node, making them easier to manage and share.

<img src="https://mintcdn.com/dripart/EgZuQyCGLVUEw53Z/images/interface/features/subgraph/subgraph.jpg?fit=max&auto=format&n=EgZuQyCGLVUEw53Z&q=85&s=931b7a8e3c9c167864a963b46602208f" alt="Subgraph" width="3080" height="814" data-path="images/interface/features/subgraph/subgraph.jpg" />

Think of a subgraph as a "folder" for your workflow – you can group related nodes together and use the entire collection as one unified subgraph node.

**Use subgraphs to:**

* Simplify complex workflows
* Reuse common node combinations
* Build more efficient workflows with modular components

## Creating a Subgraph

<Steps>
  <Step title="Select nodes">
    Select the nodes you want to group in ComfyUI
  </Step>

  <Step title="Click the subgraph icon">
    <img src="https://mintcdn.com/dripart/EgZuQyCGLVUEw53Z/images/interface/features/subgraph/subgraph_icon.jpg?fit=max&auto=format&n=EgZuQyCGLVUEw53Z&q=85&s=03070a0d4e9ea4289c32d63d0c99ae8d" alt="Subgraph icon" width="1517" height="700" data-path="images/interface/features/subgraph/subgraph_icon.jpg" />

    Find the subgraph icon in the toolbar
  </Step>

  <Step title="Subgraph created">
    <img src="https://mintcdn.com/dripart/EgZuQyCGLVUEw53Z/images/interface/features/subgraph/workflow_using_subgraph.jpg?fit=max&auto=format&n=EgZuQyCGLVUEw53Z&q=85&s=66f5a81ffad4b33458c9f3c273601caa" alt="Workflow using subgraph" width="1820" height="884" data-path="images/interface/features/subgraph/workflow_using_subgraph.jpg" />

    ComfyUI automatically creates a subgraph based on your selected nodes' inputs and outputs
  </Step>

  <Step title="Customize your subgraph">
    Refer to [Editing Subgraphs](#editing-subgraphs), you can edit and organize the subgraph to create a fully functional node

    <img src="https://mintcdn.com/dripart/EgZuQyCGLVUEw53Z/images/interface/features/subgraph/subgraph_after_edited.jpg?fit=max&auto=format&n=EgZuQyCGLVUEw53Z&q=85&s=091d4223d6fb2cd2d44009cfee191bab" alt="Workflow using subgraph" width="1820" height="884" data-path="images/interface/features/subgraph/subgraph_after_edited.jpg" />
  </Step>
</Steps>

## Working with Subgraphs

### Basic Operations

Subgraphs work just like regular nodes. You can:

* Change colors and names
* Use bypass to disable
* Apply all standard node operations

### Editing Subgraphs

**To enter edit mode:**

* Double-click the empty area inside the subgraph (not on widgets), or
* Click the subgraph edit button

<img src="https://mintcdn.com/dripart/EgZuQyCGLVUEw53Z/images/interface/features/subgraph/editing_subgraph.jpg?fit=max&auto=format&n=EgZuQyCGLVUEw53Z&q=85&s=4802435f0ede07e1172b9f7fbd459399" alt="Subgraph editing mode" width="1820" height="1203" data-path="images/interface/features/subgraph/editing_subgraph.jpg" />

**In edit mode you'll see:**

1. **Navigation bar**: Exit the current subgraph and return to the parent level
2. **Input slots**: Internal node inputs exposed to the outside
   * Connect outputs to slots like normal nodes
   * **Right-click** connection points to rename/delete exposed slots
3. **Output slots**: Outputs exposed to the outside (same functionality as input slots)

<img src="https://mintcdn.com/dripart/EgZuQyCGLVUEw53Z/images/interface/features/subgraph/subgraph_slot.jpg?fit=max&auto=format&n=EgZuQyCGLVUEw53Z&q=85&s=5f4cdd87ea46007d9bf35921576f12cb" alt="Subgraph slots" width="1736" height="921" data-path="images/interface/features/subgraph/subgraph_slot.jpg" />

**Working with slots:**

1. **Default slot** (labeled 1): Use this to add new input/output connections
2. **Right-click** existing slots to rename, delete, or disconnect from original nodes

> Note: Slot connections follow standard data type validation rules

### Parameters Panel

With ComfyUI v0.3.66 or later, you can edit the subgraph parameters directly from the parameters panel without entering the subgraph.

You can select any subgraph and use the "Edit Subgraph Widgets" button to open the parameters panel.

<img src="https://mintcdn.com/dripart/l9YPgCbipT00aLbn/images/interface/features/subgraph/parameters_panel_open.jpg?fit=max&auto=format&n=l9YPgCbipT00aLbn&q=85&s=efe2c0c6b281f2fe19b2e814454c2f82" alt="Open Parameters Panel" width="1330" height="1176" data-path="images/interface/features/subgraph/parameters_panel_open.jpg" />

After it is opened, you can edit the order and visibility of the subgraph widgets directly in the parameters panel.

<img src="https://mintcdn.com/dripart/l9YPgCbipT00aLbn/images/interface/features/subgraph/parameters_panel_edit.jpg?fit=max&auto=format&n=l9YPgCbipT00aLbn&q=85&s=4c77e4e50454e6ccd15c2d02a64feb0e" alt="Open Parameters Panel" width="1456" height="1492" data-path="images/interface/features/subgraph/parameters_panel_edit.jpg" />

1. Reordering: you use right-click and hold the widget to drag it to the desired position
2. Visibility: you can check the visibility of the widget by clicking the eye icon

### Nested Subgraphs

Create even more complex workflows by nesting subgraphs within subgraphs.

<img src="https://mintcdn.com/dripart/EgZuQyCGLVUEw53Z/images/interface/features/subgraph/subgraph_nested.jpg?fit=max&auto=format&n=EgZuQyCGLVUEw53Z&q=85&s=7e92ac585c91b067ab2527da1b5c521c" alt="Nested subgraph" width="1820" height="1203" data-path="images/interface/features/subgraph/subgraph_nested.jpg" />

The navigation bar shows your current level and lets you easily move between nested subgraphs.

<img src="https://mintcdn.com/dripart/EgZuQyCGLVUEw53Z/images/interface/features/subgraph/subgraph_navigation.jpg?fit=max&auto=format&n=EgZuQyCGLVUEw53Z&q=85&s=81b0b1bdb46f54e856600de892cf7089" alt="Nested subgraph navigation" width="1820" height="1203" data-path="images/interface/features/subgraph/subgraph_navigation.jpg" />

### Exit subgraph

To exit a subgraph and return to the parent level:

* Use the **Navigation bar** (labeled 1 in the image) at the top of the canvas, or
* Press the **Esc** key

<img src="https://mintcdn.com/dripart/EgZuQyCGLVUEw53Z/images/interface/features/subgraph/editing_subgraph.jpg?fit=max&auto=format&n=EgZuQyCGLVUEw53Z&q=85&s=4802435f0ede07e1172b9f7fbd459399" alt="Subgraph editing mode" width="1820" height="1203" data-path="images/interface/features/subgraph/editing_subgraph.jpg" />

Click on the navigation bar or press Esc to exit the current subgraph and return to the parent workflow.

## Unpack Subgraphs to Nodes

When you're done creating a subgraph, you can convert it back to nodes if you need to.

<img src="https://mintcdn.com/dripart/EgZuQyCGLVUEw53Z/images/interface/features/subgraph/subgraph_to_nodes.jpg?fit=max&auto=format&n=EgZuQyCGLVUEw53Z&q=85&s=3f6dfede84ad760f7775846259e0b3e6" alt="Subgraph to node" width="912" height="548" data-path="images/interface/features/subgraph/subgraph_to_nodes.jpg" />

1. You can select the subgraph node then use right-click menu "Unpack subgraph" to convert it back to nodes.
2. Click the "Unpack subgraph" button in the select toolbox to convert it back to nodes.

## Subgraph Blueprint

With ComfyUI frontend version 1.27.7 or later, you can publish your subgraph to the node library.

This feature allows you to convert a subgraph to a `Subgraph Blueprints` node, which means it's a reusable subgraph node.

### Publish Subgraph to Node Library

<img src="https://mintcdn.com/dripart/fLKXN8EDUY0BDXQk/images/interface/features/subgraph/subgraph_publishing.jpg?fit=max&auto=format&n=fLKXN8EDUY0BDXQk&q=85&s=5079af05b2211b0547a3cc3b999c3c1a" alt="Publish Subgraph" width="1286" height="1214" data-path="images/interface/features/subgraph/subgraph_publishing.jpg" />

Currently, you have two ways to publish subgraph to node library, both are in the selection toolbox:

1. Click the `book(publish)` icon on the selection toolbox
2. Open the selection toolbox menu, use the `Add Subgraph to Library` menu to publish subgraph

After you click on the `book(publish)` icon or `Add Subgraph to Library` menu, you will see the following dialog:

<img src="https://mintcdn.com/dripart/fLKXN8EDUY0BDXQk/images/interface/features/subgraph/subgraph_naming.jpg?fit=max&auto=format&n=fLKXN8EDUY0BDXQk&q=85&s=0b20fc138a6e4e8ac826176067b5848e" alt="Subgraph naming" width="1286" height="840" data-path="images/interface/features/subgraph/subgraph_naming.jpg" />

By default, the subgraph will use the name of the subgraph node as the name of the subgraph blueprint.

After publishing, you will see the subgraph blueprint node in the node library.

<img src="https://mintcdn.com/dripart/fLKXN8EDUY0BDXQk/images/interface/features/subgraph/subgraph_blueprints.jpg?fit=max&auto=format&n=fLKXN8EDUY0BDXQk&q=85&s=90242f76da15ce0de949692114757aeb" alt="Subgraph blueprint node" width="2003" height="1242" data-path="images/interface/features/subgraph/subgraph_blueprints.jpg" />

Now, you can drag or search the subgraph just like a normal node. The new subgraph node that has been added from Subgraph Blueprints is still isolated, which means after adding it to the workflow, it can be edited independently, they will not affect each other.

### Edit Subgraph Blueprint

If you want to edit the subgraph blueprint, you can click the edit button just like the image below, you can delete it as well.

<img src="https://mintcdn.com/dripart/fLKXN8EDUY0BDXQk/images/interface/features/subgraph/edit_subgraph_blueprints.jpg?fit=max&auto=format&n=fLKXN8EDUY0BDXQk&q=85&s=d5d63e62403ea8cf4b95274c968ab835" alt="Edit Subgraph Blueprint" width="2000" height="1245" data-path="images/interface/features/subgraph/edit_subgraph_blueprints.jpg" />

This will enable the subgraph editing mode

<img src="https://mintcdn.com/dripart/fLKXN8EDUY0BDXQk/images/interface/features/subgraph/subgraph_editing_mode.jpg?fit=max&auto=format&n=fLKXN8EDUY0BDXQk&q=85&s=de6bfcfe9561003dc7fe738eff6acdc2" alt="Subgraph editing mode" width="2000" height="1359" data-path="images/interface/features/subgraph/subgraph_editing_mode.jpg" />

After editing the subgraph blueprint, you can go to the parent level to preview the subgraph.

<img src="https://mintcdn.com/dripart/fLKXN8EDUY0BDXQk/images/interface/features/subgraph/save_updated_subgraph.jpg?fit=max&auto=format&n=fLKXN8EDUY0BDXQk&q=85&s=976ddb2fc548798253b795d6f19aa044" alt="Update Subgraph Blueprint" width="2000" height="1359" data-path="images/interface/features/subgraph/save_updated_subgraph.jpg" />

If you want to save the updated subgraph blueprint, you can click the save button or use the shortcut key Ctrl + S.
