ComfyUI-NodeAlign

ComfyUI-NodeAlign
★ 36

界面增强节点布局生产力工具快捷键支持
轻量级 ComfyUI 节点对齐工具栏，提供快速对齐、等尺寸与分布节点操作，支持拖拽、浮动/附着与快捷键。
💡 快速对选中节点进行对齐、等大和等间距分布。
🍴 2 Forks💻 JavaScript🔄 2025-12-19
📦
网盘下载
复制链接后前往夸克网盘下载
https://pan.quark.cn/s/8f9eee5e2cdb
NodeAlign
📄 README

ComfyUI-NodeAlign

ComfyUI-NodeAlign is a lightweight alignment toolbar for ComfyUI graphs. It provides quick alignment, equal size, and distribution actions, with optional keyboard shortcuts, designed for simplicity and ease of use.

Features

  • Toolbar Customization: Change the position, size, and visibility of the alignment toolbar.
  • Node Alignment: Align selected nodes horizontally or vertically.
  • Equalize Node Dimensions: Equalize the width and/or height of selected nodes.
  • Distribute Nodes: Distribute nodes horizontally or vertically with custom gaps.
  • Toolbar Dragging: Drag and position the toolbar anywhere on the screen.
  • Floating/Attached Mode: Toggle between floating and attaching the toolbar to the menu.
  • Keyboard Shortcuts: Use the Shift + WASD keys to quickly align nodes (Up, Left, Down, Right).
  • Customizable Colors and Opacity: Modify the toolbar’s background color, opacity, and icon colors.

    • https://github.com/user-attachments/assets/40b117d9-91f7-47c3-8640-014f8fd06fce

    Compatibility

  • Tested with ComfyUI v3.7.3 front-end.
  • If the toolbar fails to show, hard refresh with cache disabled and check console for [NodeAlign.Settings] loaded and [NodeAlign] init.

    • Installation

    To install ComfyUI-NodeAlign, follow these steps:

  • Clone or download the repository.
  • Place the add-on in the ComfyUI extensions directory.
  • Restart ComfyUI.

    • Example:

    git clone https://github.com/1038lab/ComfyUI-NodeAlign.git

    Configuration

    Available Settings

    The add-on allows you to customize the behavior and appearance of the Node Alignment toolbar. Here are the available settings:

  • Node Alignment Toolbar Display Mode:

  • Permanent: Always visible.
  • On-Select: Display only when a node is selected.
  • Disabled: Toolbar is hidden.

  • Enable Quick Alignment Shortcuts:

  • Shift + W: Align top.
  • Shift + A: Align left.
  • Shift + S: Align bottom.
  • Shift + D: Align right.

  • Toolbar Position Mode:

  • Always: Toolbar floats above the OEM bar (default).
  • Attached: Toolbar attaches to the OEM bar.
  • Floating: Toolbar is free-floating.

  • Toolbar Button Size: Adjust the size of toolbar buttons (default: 25px).
  • Always Reset Toolbar Position on Load: If enabled, the toolbar resets to its default position on each load.
  • Toolbar Background Opacity: Adjust the opacity of the toolbar background (range 0-100).
  • Toolbar Background Color: Set the background color of the toolbar using hex codes (default: #1b1b1b).
  • Icon Background Color: Set the background color of the icons in the toolbar (default: #2a2a2a).
  • Icon Color: Adjust the color of the icons in the toolbar (default: #e0e0e0).
  • Divider Color: Set the color of dividers between toolbar icons (default: #666666).

    • Example Configuration

    To achieve a minimalistic design for your toolbar:

  • Node Alignment Toolbar Display Mode: Permanent
  • Enable Quick Alignment Shortcuts: True
  • Toolbar Position Mode: Floating
  • Toolbar Button Size: 20px
  • Toolbar Background Color: #1C1C1C
  • Toolbar Background Opacity: 90
  • Icon Background Color: #363636
  • Icon Color: #FFFFFF
  • Divider Color: #00FF55

    • This setup will provide a floating, compact toolbar with a dark background, light icons, and visible dividers.

    Usage

    Once installed, you will have a new toolbar for NodeAlign. You can use the toolbar to align and distribute selected nodes.

    Node Alignment Actions:

  • Align Left: Align all selected nodes to the leftmost position.
  • Align Center (Horizontal): Center selected nodes horizontally.
  • Align Right: Align all selected nodes to the rightmost position.
  • Align Top: Align all selected nodes to the topmost position.
  • Align Center (Vertical): Center selected nodes vertically.
  • Align Bottom: Align all selected nodes to the bottommost position.

    • Equalize Node Dimensions:

  • Equal Width: Equalize the width of all selected nodes.
  • Equal Height: Equalize the height of all selected nodes.

    • Distribute Nodes:

  • Horizontal Distribution: Evenly distribute selected nodes along the X-axis.
  • Vertical Distribution: Evenly distribute selected nodes along the Y-axis.

    • Drag and Position the Toolbar:

  • Floating Mode: Drag the toolbar anywhere on the screen.
  • Attached Mode: Attach the toolbar to the top or bottom of the menu bar.

    • Troubleshooting

    If the toolbar is not appearing or not behaving as expected:

  • Ensure the add-on is installed in the correct extensions directory.
  • Make sure your ComfyUI version is compatible with this add-on.
  • Try resetting the toolbar position (double-click on the toolbar) to restore the default layout.

    • Credits & Background

  • Based on the original NodeAligner by Tenney95 (https://github.com/Tenney95/ComfyUI-NodeAligner)
  • Also inspired by kk8bit/kaytool (https://github.com/kk8bit/kaytool)
  • This repo exists because the original versions were not updated for newer ComfyUI (e.g., v3.7.3) and the toolbar stopped working; this repo provides a compatible, maintained implementation.

    • License

    GPL-3.0 License