diff --git a/development/core-concepts/links.mdx b/development/core-concepts/links.mdx index 2bf900f6f..0b1fc5f17 100644 --- a/development/core-concepts/links.mdx +++ b/development/core-concepts/links.mdx @@ -4,52 +4,50 @@ description: "Understand connection links in ComfyUI" icon: "share-nodes" --- - -As ComfyUI is still in rapid iteration and development, we are continuously improving it every day. Therefore, some operations mentioned in this article may change or be omitted. Please refer to the actual interface. If you find changes in actual operations, it may be due to our iterative updates. You can also fork [this repo](https://github.com/Comfy-Org/docs) and help us improve this documentation. - - ## Links connect nodes -In the terminology of ComfyUI, the lines or curves between nodes are called **_links_**. They're also known as **_connections_** or wires. Links can be displayed in several ways, such as curves, right angles, straight lines, or completely hidden. +In ComfyUI, the lines or curves drawn between nodes are called **_links_** (also referred to as **_connections_** or wires). They carry data from one node's output to another node's input, defining the flow of your workflow. + +Links can be displayed in several visual styles: curves, right angles, straight lines, or hidden entirely. ![Link styles](/images/interface/link/link_styles.jpg) -You can modify the link style in **Setup Menu** --> **Display (Lite Graph)** --> **Graph** --> **Link Render Mode**. +To change the link style, go to **Setup Menu** → **Display (Lite Graph)** → **Graph** → **Link Render Mode**. -![Canvas Menu](/images/interface/link/render_mode.jpg) +![Render mode setting](/images/interface/link/render_mode.jpg) -You can also temporarily hide links in the **Canvas Menu**. +You can also temporarily hide all links from the **Canvas Menu**. ![Canvas Menu](/images/interface/link/canvas_menu.jpg) -Link display is crucial. Depending on the situation, it may be necessary to see all links. Especially when learning, sharing, or even just understanding workflows, the visibility of links enables users to follow the flow of data through the graph. For packaged workflows that aren't intended to be altered, it might make sense to hide the links to reduce clutter. + +Showing links is especially useful when learning, sharing, or debugging a workflow — they make the data flow visible at a glance. For finished workflows that aren't meant to be edited, hiding links can reduce visual clutter. + ### Reroute node -If legibility of the graph structure is important, then link wires can be manually routed in the 2D space of the graph with a tiny node called **Reroute**. Its purpose is to position the beginning and/or end points of link wires to ensure visibility. We can design a workflow so that link wires don't pass behind nodes, don't cross other link wires, and so on. +When a workflow becomes complex, link wires can overlap or pass behind nodes, making it hard to read. The **Reroute** node lets you manually redirect a wire through any point in the 2D graph space, keeping the layout clean and legible. ![ComfyUI Reroute node](/images/interface/link/reroute.jpg) -We are also continuously improving the native reroute functionality in litegraph. We recommend using this feature in the future to reorganize connections. +ComfyUI also has a built-in native reroute feature in the graph canvas. We recommend using this for new workflows. ![ComfyUI Native Reroute](/images/interface/link/native_reroute.jpg) ## Color-coding -The data type of node properties is indicated by color coding of input/output ports and link connection wires. We can always tell which inputs and outputs can be connected to one another by their color. Ports can only be connected to other ports of the same color to ensure matching data types. - -Common data types: +Every data type in ComfyUI has a distinct color. Node input and output ports, as well as the link wires connecting them, all share this color scheme. **You can only connect ports of the same color** — this ensures type safety across your workflow. ![ComfyUI Node Data Types](/images/concepts/node/data_type.jpg) -| Data type | Color | -|------------------------------------|--------------------------------------------------------------------------------------------------------------------| -| diffusion model | lavender | -| CLIP model | yellow | -| VAE model | rose | -| conditioning | orange | -| latent image | pink | -| pixel image | blue | -| mask | green | -| number (integer or float) | light green | -| mesh | bright green | \ No newline at end of file +| Data type | Color | +|---------------------------|-------------| +| Diffusion model | Lavender | +| CLIP model | Yellow | +| VAE model | Rose | +| Conditioning | Orange | +| Latent image | Pink | +| Pixel image | Blue | +| Mask | Green | +| Number (integer or float) | Light green | +| Mesh | Bright green|