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

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

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

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

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

<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-context-windows/Olcku1qyt5_V10Wd/images/interface/features/subgraph/subgraph.jpg?fit=max&auto=format&n=Olcku1qyt5_V10Wd&q=85&s=7def2e579b4f41ce733ab7f385b02c8b" 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-context-windows/Olcku1qyt5_V10Wd/images/interface/features/subgraph/subgraph_icon.jpg?fit=max&auto=format&n=Olcku1qyt5_V10Wd&q=85&s=95f45d490767a345e77b830406518215" alt="子图icon" width="1517" height="700" data-path="images/interface/features/subgraph/subgraph_icon.jpg" />
  </Step>

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

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

  <Step title="编辑子图">
    <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="使用子图的工作流" 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-context-windows/Olcku1qyt5_V10Wd/images/interface/features/subgraph/editing_subgraph.jpg?fit=max&auto=format&n=Olcku1qyt5_V10Wd&q=85&s=06276877b0a4065eb97866375dfffeb8" 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-context-windows/Olcku1qyt5_V10Wd/images/interface/features/subgraph/subgraph_slot.jpg?fit=max&auto=format&n=Olcku1qyt5_V10Wd&q=85&s=4b35c0e44b7f40c93d317f6f25d374af" alt="子图插槽" width="1736" height="921" data-path="images/interface/features/subgraph/subgraph_slot.jpg" />

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

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

### 3. 子图的嵌套

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

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

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

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

## 将子图转回普通节点

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

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