Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions interface/features/subgraph.mdx
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
title: "Subgraph - Simplify your workflow"

Check warning on line 2 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L2

Did you really mean 'Subgraph'?
description: "An introduction to the Subgraph feature in ComfyUI, including how to create, navigate, and manage subgraphs."

Check warning on line 3 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L3

Did you really mean 'Subgraph'?

Check warning on line 3 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L3

Did you really mean 'subgraphs'?
sidebarTitle: "Subgraph"
icon: "share-nodes"
---

<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)

Check warning on line 9 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L9

Did you really mean 'subgraph'?
- 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

Check warning on line 11 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L11

Did you really mean 'subgraph'?
</Note>

<iframe
Expand All @@ -18,63 +18,63 @@
allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
></iframe>
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.

Check warning on line 21 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L21

Did you really mean 'subgraph'?

Check warning on line 21 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L21

Did you really mean 'subgraph'?

![Subgraph](/images/interface/features/subgraph/subgraph.jpg)

Check warning on line 23 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L23

Did you really mean 'Subgraph'?

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.

Check warning on line 25 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L25

Did you really mean 'subgraph'?

Check warning on line 25 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L25

Did you really mean 'subgraph'?

**Use subgraphs to:**

Check warning on line 27 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L27

Did you really mean 'subgraphs'?
- Simplify complex workflows
- Reuse common node combinations
- Build more efficient workflows with modular components

## Creating a Subgraph

Check warning on line 32 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L32

Did you really mean 'Subgraph'?

<Steps>
<Step title="Select nodes">
Select the nodes you want to group in ComfyUI
</Step>
<Step title="Click the subgraph icon">
![Subgraph icon](/images/interface/features/subgraph/subgraph_icon.jpg)

Check warning on line 39 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L39

Did you really mean 'subgraph'?
Find the subgraph icon in the toolbar
</Step>
<Step title="Subgraph created">
![Workflow using subgraph](/images/interface/features/subgraph/workflow_using_subgraph.jpg)

Check warning on line 43 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L43

Did you really mean 'subgraph'?
ComfyUI automatically creates a subgraph based on your selected nodes' inputs and outputs
</Step>
<Step title="Customize your subgraph">

Check warning on line 46 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L46

Did you really mean 'subgraph'?
Refer to [Editing Subgraphs](#editing-subgraphs), you can edit and organize the subgraph to create a fully functional node

Check warning on line 47 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L47

Did you really mean 'subgraph'?
![Workflow using subgraph](/images/interface/features/subgraph/subgraph_after_edited.jpg)
</Step>
</Steps>

## Working with Subgraphs

Check warning on line 52 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L52

Did you really mean 'Subgraphs'?

### Basic Operations

Subgraphs work just like regular nodes. You can:

Check warning on line 56 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L56

Did you really mean 'Subgraphs'?
- Change colors and names
- Use bypass to disable
- Apply all standard node operations

### Editing Subgraphs

Check warning on line 61 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L61

Did you really mean 'Subgraphs'?

**To enter edit mode:**
- Double-click the empty area inside the subgraph (not on widgets), or

Check warning on line 64 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L64

Did you really mean 'subgraph'?
- Click the subgraph edit button

Check warning on line 65 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L65

Did you really mean 'subgraph'?

![Subgraph editing mode](/images/interface/features/subgraph/editing_subgraph.jpg)

Check warning on line 67 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L67

Did you really mean 'Subgraph'?

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

1. **Navigation bar**: Exit the current subgraph and return to the parent level

Check warning on line 71 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L71

Did you really mean 'subgraph'?
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)

![Subgraph slots](/images/interface/features/subgraph/subgraph_slot.jpg)

Check warning on line 77 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L77

Did you really mean 'Subgraph'?

**Working with slots:**
1. **Default slot** (labeled 1): Use this to add new input/output connections
Expand All @@ -84,75 +84,83 @@

### Parameters Panel

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

Check warning on line 87 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L87

Did you really mean 'subgraph'?

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

Check warning on line 89 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L89

Did you really mean 'subgraph'?

Check warning on line 89 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L89

Did you really mean 'Subgraph'?
![Open Parameters Panel](/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.

Check warning on line 92 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L92

Did you really mean 'subgraph'?

![Open Parameters Panel](/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

Check warning on line 98 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L98

Did you really mean 'Subgraphs'?

Create even more complex workflows by nesting subgraphs within subgraphs.

Check warning on line 100 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L100

Did you really mean 'subgraphs'?

Check warning on line 100 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L100

Did you really mean 'subgraphs'?

![Nested subgraph](/images/interface/features/subgraph/subgraph_nested.jpg)

Check warning on line 102 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L102

Did you really mean 'subgraph'?

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

Check warning on line 104 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L104

Did you really mean 'subgraphs'?

![Nested subgraph navigation](/images/interface/features/subgraph/subgraph_navigation.jpg)

Check warning on line 106 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L106

Did you really mean 'subgraph'?

### Exit subgraph

Check warning on line 108 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L108

Did you really mean '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.

Check warning on line 110 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L110

Did you really mean 'subgraph'?

![Subgraph editing mode](/images/interface/features/subgraph/editing_subgraph.jpg)

Check warning on line 112 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L112

Did you really mean 'Subgraph'?

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

Check warning on line 114 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L114

Did you really mean 'subgraph'?

## Unpack Subgraphs to Nodes

Check warning on line 116 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L116

Did you really mean 'Subgraphs'?

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

Check warning on line 118 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L118

Did you really mean 'subgraph'?

![Subgraph to node](/images/interface/features/subgraph/subgraph_to_nodes.jpg)

Check warning on line 120 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L120

Did you really mean 'Subgraph'?

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

Check warning on line 122 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L122

Did you really mean 'subgraph'?
2. Click the "Unpack subgraph" button in the select toolbox to convert it back to nodes.

Check warning on line 123 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L123

Did you really mean 'subgraph'?

## Subgraph Blueprint

Check warning on line 125 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L125

Did you really mean 'Subgraph'?

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

Check warning on line 127 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L127

Did you really mean 'subgraph'?

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

Check warning on line 129 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L129

Did you really mean 'subgraph'?

### Publish Subgraph to Node Library

Check warning on line 131 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L131

Did you really mean 'Subgraph'?

![Publish Subgraph](/images/interface/features/subgraph/subgraph_publishing.jpg)

Check warning on line 133 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L133

Did you really mean 'Subgraph'?

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

Check warning on line 135 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L135

Did you really mean 'subgraph'?

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

Check warning on line 138 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L138

Did you really mean 'subgraph'?


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

![Subgraph naming](/images/interface/features/subgraph/subgraph_naming.jpg)

Check warning on line 143 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L143

Did you really mean 'Subgraph'?

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

Check warning on line 145 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L145

Did you really mean 'subgraph'?

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

Check warning on line 147 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L147

Did you really mean 'subgraph'?

![Subgraph blueprint node](/images/interface/features/subgraph/subgraph_blueprints.jpg)

Check warning on line 149 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L149

Did you really mean 'Subgraph'?

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.

Check warning on line 151 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L151

Did you really mean 'Subgraph'?

### Edit Subgraph Blueprint

Check warning on line 153 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L153

Did you really mean 'Subgraph'?

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.

Check warning on line 155 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L155

Did you really mean 'subgraph'?

![Edit Subgraph Blueprint](/images/interface/features/subgraph/edit_subgraph_blueprints.jpg)

Check warning on line 157 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L157

Did you really mean 'Subgraph'?

This will enable the subgraph editing mode

Check warning on line 159 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L159

Did you really mean 'subgraph'?

![Subgraph editing mode](/images/interface/features/subgraph/subgraph_editing_mode.jpg)

Check warning on line 161 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L161

Did you really mean 'Subgraph'?

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

Check warning on line 163 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L163

Did you really mean 'subgraph'?

![Update Subgraph Blueprint](/images/interface/features/subgraph/save_updated_subgraph.jpg)

Check warning on line 165 in interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

interface/features/subgraph.mdx#L165

Did you really mean 'Subgraph'?

Expand Down
14 changes: 11 additions & 3 deletions zh-CN/interface/features/subgraph.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -90,11 +90,11 @@

![嵌套子图导航](/images/interface/features/subgraph/subgraph_navigation.jpg)

### 参数面板(Parameters)
### 4. 参数面板

从 ComfyUI v0.3.66 版本开始,你可以直接在新增的参数面板中编辑子图参数,无需进入子图内部进行编辑。

你可以选中任何子图,点击编辑子图控件(Edit Subgraph Widgets)按钮来打开参数面板。
你可以选中任何子图,点击"编辑子图控件(Edit Subgraph Widgets)"按钮来打开参数面板。

Check warning on line 97 in zh-CN/interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

zh-CN/interface/features/subgraph.mdx#L97

Did you really mean 'Subgraph'?
![打开参数面板](/images/interface/features/subgraph/parameters_panel_open.jpg)

打开后,可以直接在参数面板中调整子图控件的顺序和可见性。
Expand All @@ -103,6 +103,14 @@
1. 调整顺序:按住右键拖动控件,即可更改其排列位置
2. 控件可见性:点击眼睛图标可以设置控件是否显示

### 5. 退出子图

要退出子图并返回上一级,可以使用画布顶部的**导航栏**(图中标记为 1)。

![子图编辑状态](/images/interface/features/subgraph/editing_subgraph.jpg)

点击导航栏即可退出当前子图,返回到父级工作流。

## 将子图转回普通节点

当子图编辑完成后,你可以将子图转回为普通节点,只需要选中子图后,再在选择工具箱上选择同样的按钮即可完成子图转回节点的操作,在右键菜单上也有对应的选项
Expand Down Expand Up @@ -151,4 +159,4 @@

![更新子图蓝图](/images/interface/features/subgraph/save_updated_subgraph.jpg)

如果你想保存更新后的子图蓝图,可以点击保存按钮, 或者使用 Ctrl + S 进行保存, 即可更新子图
如果你想保存更新后的子图蓝图,可以点击保存按钮, 或者使用 Ctrl + S 进行保存, 即可更新子图

Check warning on line 162 in zh-CN/interface/features/subgraph.mdx

View check run for this annotation

Mintlify / Mintlify Validation (dripart) - vale-spellcheck

zh-CN/interface/features/subgraph.mdx#L162

Did you really mean 'Ctrl'?