> ## Documentation Index
> Fetch the complete documentation index at: https://dripart-context-windows.mintlify.site/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>

<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-context-windows/Olcku1qyt5_V10Wd/images/interface/features/subgraph/subgraph.jpg?fit=max&auto=format&n=Olcku1qyt5_V10Wd&q=85&s=7def2e579b4f41ce733ab7f385b02c8b" 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-context-windows/Olcku1qyt5_V10Wd/images/interface/features/subgraph/subgraph_icon.jpg?fit=max&auto=format&n=Olcku1qyt5_V10Wd&q=85&s=95f45d490767a345e77b830406518215" 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-context-windows/Olcku1qyt5_V10Wd/images/interface/features/subgraph/workflow_using_subgraph.jpg?fit=max&auto=format&n=Olcku1qyt5_V10Wd&q=85&s=72b7c700f42e6b36475f446439ce61ac" 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-context-windows/Olcku1qyt5_V10Wd/images/interface/features/subgraph/subgraph_after_edited.jpg?fit=max&auto=format&n=Olcku1qyt5_V10Wd&q=85&s=24002e0e09b6d88b0730593c688c0d87" 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-context-windows/Olcku1qyt5_V10Wd/images/interface/features/subgraph/editing_subgraph.jpg?fit=max&auto=format&n=Olcku1qyt5_V10Wd&q=85&s=06276877b0a4065eb97866375dfffeb8" 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-context-windows/Olcku1qyt5_V10Wd/images/interface/features/subgraph/subgraph_slot.jpg?fit=max&auto=format&n=Olcku1qyt5_V10Wd&q=85&s=4b35c0e44b7f40c93d317f6f25d374af" 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

### Nested Subgraphs

Create even more complex workflows by nesting subgraphs within subgraphs.

<img src="https://mintcdn.com/dripart-context-windows/Olcku1qyt5_V10Wd/images/interface/features/subgraph/subgraph_nested.jpg?fit=max&auto=format&n=Olcku1qyt5_V10Wd&q=85&s=2bbf24c29f5a9fb7d1112ca5342e6a9a" 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-context-windows/Olcku1qyt5_V10Wd/images/interface/features/subgraph/subgraph_navigation.jpg?fit=max&auto=format&n=Olcku1qyt5_V10Wd&q=85&s=308ed392b4424e1c239a4dec651f9691" alt="Nested subgraph navigation" width="1820" height="1203" data-path="images/interface/features/subgraph/subgraph_navigation.jpg" />

## 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-context-windows/WX2V81_wLZLyd0em/images/interface/features/subgraph/subgraph_to_nodes.jpg?fit=max&auto=format&n=WX2V81_wLZLyd0em&q=85&s=1b67f4f4434cd3fa2eeef91630d2c070" 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.
