Проблема визуального шума в ComfyUI
По мере усложнения рабочих процессов в ComfyUI количество соединений между узлами может достигать сотен, превращая рабочее пространство в «спагетти», где трудно отследить логику потока данных. Разработчик safzanpirani представил расширение Zip Ties, которое решает эту проблему, визуально объединяя связанные провода в единые ленточные кабели, скрепленные виртуальными стяжками. Идея вдохновлена прототипом от @cmzw_ и реализована в виде легковесного фронтенд-расширения без Python-зависимостей.
Как это работает: жесты и управление
Расширение интегрируется в Canvas через перехват событий мыши, позволяя создавать и управлять стяжками интуитивными жестами. Каждая новая стяжка получает случайный цвет, но пользователь может настроить её на совпадение с цветом проводов или сделать серой. Основные операции описаны в таблице ниже:
| Действие | Жест / Команда |
|---|---|
| Создать стяжку | Зажать Shift и провести линией через провода |
| Переместить стяжку | Перетащить мышью (стяжка движется вместе с узлами) |
| Удалить стяжку | Провести линией через стяжку или двойной клик |
| Повернуть стяжку | Shift + перетаскивание (шаг 15°) или с Alt (свободно) |
| Изменить цвет | Правый клик по стяжке |
| Выделить несколько | Ctrl/Cmd+клик или рамка выделения |
Важная особенность: провода сохраняют свои цвета и идут параллельно внутри стяжки. Если провод проходит через несколько стяжек, он остается связанным. Поворот стяжки меняет направление изгиба проводов, что позволяет создавать четкие углы (например, 90° при повороте одной из стяжек).
Интеграция с узлами и Reroute
Zip Ties корректно работает с узлами Reroute. Стяжка фиксирует сегмент провода между двумя точками Reroute, выходом узла или входом. Если узел перемещается, стяжка следует за ним, сохраняя визуальную связь. При копировании и вставке узлов вместе с ними переносятся и их стяжки, если все провода в стяжке были скопированы. Это работает в рамках одного шага отмены (undo).
Расширение добавляет поле extra.zipTies в JSON-файл рабочего процесса. Это означает, что данные сохраняются нативно. Если открыть файл в ComfyUI без установленного расширения, граф загрузится корректно, просто отобразив обычные провода без визуальных стяжек.
Технические детали и установка
Расширение состоит из одного файла web/zip_ties.js и использует методы renderLink и drawConnections для рендеринга. Оно протестировано на ComfyUI 0.42.0 с фронтендом 1.57.1 и поддерживает как классический Canvas, так и Vue-ноды. Ограничения включают невозможность привязки проводов, скрытых через бейдж ссылки, и особенности работы с прямыми линиями (вместо сплайнов).
Установить расширение можно через ComfyUI-Manager по названию "Zip Ties" или через CLI:
comfy node install comfyui-zip-tiesИли вручную, клонировав репозиторий в папку ComfyUI/custom_nodes.
Источник: Github ↗