> ## 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.

# 子图功能 - ComfyUI 中的工作流组织工具

> 讲解 ComfyUI 中子图（Subgraph）功能的使用方法，包括创建、导航和管理子图

<Note>
  子图功能需要至少 ComfyUI 前端版本 1.24.3 版本的支持，如果你未在你的 ComfyUI 中发现此功能，请参考这篇文档进行更新： [如何更新ComfyUI](/zh/installation/update_comfyui)

  * 本文示例图片使用nightly 版本前端制作，界面请以实际为准
</Note>

<Tip>
  有关以编程方式使用子图的开发者文档，请参阅[子图开发者指南](/zh/custom-nodes/js/subgraphs)。
</Tip>

<iframe className="w-full aspect-video rounded-xl" src="//player.bilibili.com/player.html?isOutside=true&aid=114987263593651&bvid=BV1GotzzREmn&cid=31547131769&p=1&autoplay=0" title="ComfyUI Selection Toolbox New Features" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

子图是 ComfyUI 中的一个高级功能，它允许你将复杂的工作流打包成一个新的节点，使得它更易管理和复用。

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

简单来说，子图就像是工作流程中的"文件夹"，你可以将相关的节点组织在一起像使用单个节点一样使用整个子图。

你可以使用子图达到：

* 简化复杂工作流
* 轻松复用一些常见的节点组合
* 创建可快速复用的节点组合来提高搭建工作流的效率

## 如何创建子图？

<Steps>
  <Step title="选中任意节点">
    在 ComfyUI 中选中任意节点
  </Step>

  <Step title="点击选择工具项中的子图对应功能的图标">
    <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="子图icon" width="1517" height="700" data-path="images/interface/features/subgraph/subgraph_icon.jpg" />
  </Step>

  <Step title="完成子图创建">
    <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="使用子图的工作流" width="1820" height="884" data-path="images/interface/features/subgraph/workflow_using_subgraph.jpg" />

    ComfyUI 会根据选中节点的输入输出，自动创建一个子图，并将其添加到画布中。
  </Step>

  <Step title="编辑子图">
    <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="使用子图的工作流" width="1820" height="884" data-path="images/interface/features/subgraph/subgraph_after_edited.jpg" />

    经过编辑和整理，你可以将子图调整成一个具备完善功能的节点。
  </Step>
</Steps>

## 编辑子图

### 1. 子图有和普通节点一样的编辑功能

你可以像一般节点一样使用子图：

1. 修改外观节点颜色
2. 修改节点名称
3. 使用绕过（Bypass）来禁用
4. 等等

### 2. 子图的编辑

* 在子图非组件（widget） 空白处双击以进入子图编辑状态，
* 点击子图编辑按钮

下面为进入子图的编辑状态

<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="子图编辑状态" width="1820" height="1203" data-path="images/interface/features/subgraph/editing_subgraph.jpg" />

1. 子图导航，你可以通过这里退出当前子图，并返回上级
2. 输入插槽（slot）: 会显示在子图外部的内部节点输入
   * 你可以像链接正常节点一样将输出连接到插槽中
   * 通过在连接点上**点击鼠标右键**，你可以重命名/删除 暴露在子图外部的插槽
3. 输出插槽（slot）: 暴露在子图外部的输出,和输入插槽功能类似

<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="子图插槽" width="1736" height="921" data-path="images/interface/features/subgraph/subgraph_slot.jpg" />

1. 图中数字为 1 的插槽为**默认插槽**： 用于新增 输出 / 输出 连接以暴露给上级的子图视图
2. 在已有插槽上**点击鼠标右键**，可以重命名、删除、取消已原有的节点的连接

> 插槽连接同样遵循数据类型验证

### 3. 子图的嵌套

在子图中你可以进一步嵌套的子图，来创建更复杂的工作流

<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="子图嵌套" width="1820" height="1203" data-path="images/interface/features/subgraph/subgraph_nested.jpg" />

同时在编辑嵌套的子图时也提供了多级的导航来方便你返回到上一级

<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="嵌套子图导航" width="1820" height="1203" data-path="images/interface/features/subgraph/subgraph_navigation.jpg" />

### 4. 参数面板

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

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

<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="打开参数面板" width="1330" height="1176" data-path="images/interface/features/subgraph/parameters_panel_open.jpg" />

打开后，可以直接在参数面板中调整子图控件的顺序和可见性。

<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="编辑参数面板" width="1456" height="1492" data-path="images/interface/features/subgraph/parameters_panel_edit.jpg" />

1. 调整顺序：按住右键拖动控件，即可更改其排列位置
2. 控件可见性：点击眼睛图标可以设置控件是否显示

### 5. 退出子图

要退出子图并返回上一级：

* 使用画布顶部的**导航栏**(图中标记为 1)，或
* 按 **Esc** 键

<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="子图编辑状态" width="1820" height="1203" data-path="images/interface/features/subgraph/editing_subgraph.jpg" />

点击导航栏或按 Esc 键即可退出当前子图，返回到父级工作流。

## 将子图转回普通节点

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

<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="子图转回普通节点" width="912" height="548" data-path="images/interface/features/subgraph/subgraph_to_nodes.jpg" />

## 发布子图

从 ComfyUI 前端版本 1.27.7 开始，你可以将子图发布到节点库中。

此功能允许你将子图转换为 `子图蓝图(Blueprint)`，也就是可复用的子图节点。

### 发布子图到节点库

<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="发布子图" width="1286" height="1214" data-path="images/interface/features/subgraph/subgraph_publishing.jpg" />

目前有两种方式可以将子图发布到节点库，这两种方式都在选择工具箱中：

1. 点击选择工具箱上的 `书本（发布）` 图标
2. 打开选择工具箱菜单，选择 `添加子图到库(Add Subgraph to Library)` 菜单项来发布子图

点击 `书本（发布）` 图标或 `添加子图到库(Add Subgraph to Library)` 菜单后，你会看到如下对话框：

<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="子图命名" width="1286" height="840" data-path="images/interface/features/subgraph/subgraph_naming.jpg" />

默认情况下，子图蓝图会使用子图节点的名称作为子图蓝图的名称，你可以在这一步进行修改

发布后，你将在节点库中看到子图蓝图节点。

<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="子图蓝图节点" width="2003" height="1242" data-path="images/interface/features/subgraph/subgraph_blueprints.jpg" />

现在，你可以像普通节点一样拖拽或搜索该子图。通过子图蓝图添加的新子图节点是相互独立的，也就是说，添加到工作流后可以单独编辑并不相互影响

### 编辑子图蓝图

如果你想编辑子图蓝图，可以点击下图所示的编辑按钮，也可以删除它。

<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="编辑子图蓝图" width="2000" height="1245" data-path="images/interface/features/subgraph/edit_subgraph_blueprints.jpg" />

这将进入子图编辑模式

<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="子图编辑模式" width="2000" height="1359" data-path="images/interface/features/subgraph/subgraph_editing_mode.jpg" />

编辑完子图蓝图后，你可以返回上一级预览子图。

<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="更新子图蓝图" width="2000" height="1359" data-path="images/interface/features/subgraph/save_updated_subgraph.jpg" />

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