ComfyUI Extension: ComfyUI-Align

Authored by Moooonet

Created 2 months ago

Updated 19 days ago

120 stars

A powerful node alignment and color management plugin for ComfyUI, designed to enhance your workflow efficiency

Custom Nodes (0)

README

</div>

ComfyUI-Align provides a powerful set of node alignment, stretching, and color configuration tools, addressing the lack of node alignment functionality in ComfyUI. All features also support node groups.

When using ComfyUI's native color functionality, I noticed it colors both the node's title bar and panel. This adds "color" and "bgcolor" parameters to the corresponding nodes in the workflow, but the background of the parameters within the node remains unchanged (default dark gray). This can lead to two issues:

Readability problems, making node titles or panel parameters difficult to read (especially with high-brightness or over-saturated colors)
Ugly visual disharmony between parameter backgrounds and panel colors, creating aesthetically unbearable nodes

This is why this plugin's color management defaults to only changing the title bar background - making different nodes immediately distinguishable while keeping the workflow clean. This inspiration comes from Blender.

However, you can still configure how colors are applied in the settings:

Apply color to node header - Apply color to the node title bar (checked by default)
Apply color to node panel (background) - Apply color to the node panel (background area)

<div align="left"> <p> <span>Video tutorials:</span> <a href="https://youtu.be/p1niyxwsOes">Youtube</a> | <a href="https://www.bilibili.com/video/BV1XJ53zuE2g">BiliBili</a> </p> </div>

Tested on ComfyUI Desktop version and portable package - smoother than OCD grid alignment. Happy pixel-perfect aligning!

If this plugin successfully preserved your sanity: please leave a ⭐ (used to maintain caffeine dependency)

Features

The following features support both nodes and groups

Basic Alignment - Align nodes or groups to top, bottom, left, or right
Basic Stretching - Stretch nodes or groups to top, bottom, left, or right
Equal Distribution - By default, horizontally or vertically distribute nodes or groups with equal spacing, using the leftmost node as the target
Dual-side Stretching - By default, stretch nodes or groups simultaneously left-right or top-bottom, using the widest/tallest node as the target
Node Coloring - Change the color of node titles or backgrounds, supports node group coloring
Advanced Color Picker - Click the moon icon to open the Color Picker panel, supports area color selection, eyedropper, hue, and transparency
Color Presets - The Color Picker panel supports saving custom color presets and applying color presets with one click

Installation

   cd ComfyUI/custom_nodes

   git clone https://github.com/Moooonet/ComfyUI-Align.git

Usage

Default Operation Method

Use Alt+A to activate the cross panel
Hold the Shift key to keep the cross panel displayed for continuous operations

Smoother Operation Method

Check Hold Shortcut Mode, change the shortcut to Tab or other suitable keys, such as ~ key
Hold the Tab key to activate the cross panel, move the cursor over an icon without clicking, release the Tab key to execute the operation
Hold the Tab key and click on icons for continuous operations

Advanced Alignment and Stretching Tips

Hold the Alt key for reverse operations, for example:

Horizontal Equal Distribution - By default, nodes or groups are equally distributed with the leftmost node or group as the target; when holding the Alt key, the rightmost node or group becomes the target
Vertical Equal Distribution - By default, nodes or groups are equally distributed with the topmost node or group as the target; when holding the Alt key, the bottommost node or group becomes the target
Horizontal Dual-side Stretching - By default, horizontal stretching uses the widest node or group as the target; when holding the Alt key, the narrowest node or group becomes the target
Vertical Dual-side Stretching - By default, vertical stretching uses the tallest node or group as the target; when holding the Alt key, the shortest node or group becomes the target

When a single node group is selected:

Basic top, bottom, left, and right alignment operations will constrain nodes within that node group (requires selecting both the node group and nodes within it)
Stretching operations will stretch the node group edges to fit the edges of the nodes within it (only requires selecting the node group)

Advanced Color Picker

Area Color - Adjust color brightness and saturation
Eyedropper Tool - Pick colors from the screen
Hue Slider - Adjust hue
Transparency Slider - Adjust color transparency
Color Presets - Without selecting a node, click Save to save all node colors to a preset, click Apply to apply colors from the preset to corresponding nodes. The Save and Apply buttons are only valid when a node is selected
Delete Presets - Click Clear to delete all colors in the preset. Right-click on any color in the preset color list to delete a specific color.

Parameter Configuration

Color Application
- Apply color to node header - Change the color of the node title bar (checked by default)
- Apply color to node panel - Change the color of the node panel (check according to personal preference)
Shortcuts
- Default shortcut - Alt+A
- Hold Shortcut Mode - When checked, hold the shortcut key to display the panel, move the cursor over an icon, and release to execute the operation. You can also hold the shortcut key and click on icons for continuous operations
- Recommended setting: If you check Hold Shortcut Mode, change the shortcut to the Tab or ~ key for smoother operation.
Spacing Settings
- Node Horizontal Spacing
- Node Vertical Spacing
- Group Horizontal Spacing
- Group Vertical Spacing