Zip Ties: ComfyUI の配線をリボンに束ねる拡張

ComfyUI Wikinews

ComfyUI のキャンバス向けフロントエンド拡張。リンクを小さな結束バンドでリボン状に束ねます。Z ドラッグで結束、右クリックで色変更や回転ができ、結束はワークフローと一緒に保存されます。

Zip Ties は、線をまたぐリンクを 1 本のリボンに束ね、移動・回転・色変更ができる小さな結束バンドで留めるフロントエンド拡張です。ノードは追加せず、Python の依存関係もありません。拡張全体が 1 つの JavaScript ファイルで構成されています。バージョン 0.4.0 は 2026 年 10 月 26 日に公開されました。

大きなワークフローにはどこでも同じ視覚的な問題があります。片側のローダーと反対側のサンプラーの間の配線が茂みのようになり、それぞれが個別のベジェ曲線で描かれていて、目で追わなければなりません。Zip Ties はそれらを隠したり、障害物を避けて迂回させたりしません。自分で引いた線をまたぐリンクを集め、ケーブルタイが束を留めるように、各リンクをその線に固定します。

この拡張は @cmzw_ によるプロトタイプをもとに作られ、最初のリリースから 1 日以内に r/comfyui と r/StableDiffusion の両方でトップページに到達しました。

デモ録画の 1 コマ

ジェスチャー

操作ジェスチャー
配線を束ねるZ を押しながら配線をまたぐように線をドラッグ
キーボードなしで配線を束ねるキャンバスが空の場所を右クリックし、Tie wires を選んでから配線をまたぐようにドラッグ
結束を移動結束をドラッグ
複数の結束を選択各結束を Ctrl/Cmd+クリック、Shift+クリックで追加、またはノードとまとめて範囲選択
結束を回転Shift+ドラッグ。15 度刻みでスナップし、Alt も押しながらだと自由に回転
色の変更、90 度または 45 度の回転、削除結束を右クリック
結束を削除Z を押しながら結束をまたぐようにドラッグ、またはダブルクリック

ドラッグ中、線をまたいだ配線は白くなります。既存の結束を線がまたぐと、線と結束の両方が赤くなり、離すとその結束が削除されます。キーは Zip Ties → Key to hold while dragging across wires で設定でき、ComfyUI が単体では使っていない文字(X、C、G、T、Y)だけが選べます。Alt、Ctrl、Cmd、Shift を押している間はドラッグが通常の意味を保つため、Alt+ドラッグはこれまで通りノードの複製になります。

リボンの挙動

新しい結束にはランダムなケーブルタイ色が割り当てられます。Zip Ties → Colour of new ties で Match wires に切り替えると結束内の配線で最も多い色が選ばれ、グレー単色にもできます。右クリックで個々の結束を変更できます。配線はそれぞれの色を保ったまま結束の間を並んで走り、結束にホバーまたはドラッグするとその結束内のすべての配線がハイライトされます。

1 本の配線は複数の結束を通せます。結束を回転すると、その結束を通る配線の向きが変わるため、0 度と 90 度の結束で直角に曲がります。リルート間の断片も結束できます。結束は描いた線がまたぐセグメントを保持し、リルートで終わる断片はそのリルートを通るすべての配線で共有されます。

結束は配線に追従します。結束が接続するすべてのノードとリルートを移動すると結束も一緒に移動し、一部だけを移動した場合はリルートと同じ規則でその場に残ります。グループ内の結束はグループと一緒に移動し、グループのフレームを Ctrl/Cmd+ドラッグすると結束はノードとともに取り残されます。選択済みの結束は選択したノードと一緒に移動し、Delete を押すと 1 回の元に戻す操作で両方が削除されます。

結束はワークフローの extra.zipTies に保存されるため、グラフの他の部分と同様に保存・読み込み・元に戻すができます。拡張なしで開いたワークフローも通常通り配線を読み込んで描画し、不正なエントリは読み込み時に破棄されます。ノードをコピー&ペーストすると、結束内のすべての配線がコピーに含まれる場合にその結束も一緒に移動し、これも 1 回の元に戻す操作にまとまります。

内部の仕組みと限界

この拡張はキャンバス上の litegraph のメソッドをいくつかラップします。renderLink は各配線の断片の始点と終点を記録し、結束された断片を結束の中心から横にオフセットしたストランドとして再描画します。_renderAllLinkSegments は結束がスクリーン内にあれば、両端が画面外でも結束された配線を描画し続けます。drawConnections は配線が消えた結束を削除し、追従すべき結束を移動します。セグメントの描画は ComfyUI 自身のリンクレンダラーに委ねられるため、色、枠線、ハイライトの挙動もそのまま引き継がれます。ドラッグのジェスチャーは window のキャプチャフェーズのリスナーで動くため、litegraph より先にポインタイベントを受け取り、描いた線は各配線のベジェカーブに対して判定されます。

プロジェクトは 2 つの制限を挙げています。リンクのバッジから引いたリルートの断片(隠しリンクのショートカット)は結束できません。また、リボンの形状はスプラインリンク向けに調整されています。ストレートおよびリニアのリンクモードでも結束を通りますが、切断判定では各セグメントを直線として扱います。ComfyUI 0.42.0 とフロントエンド 1.57.1 で、クラシックキャンバスと Vue ノードモードの両方でテストされています。

入手方法

ComfyUI-Manager で「Zip Ties」を検索するか、comfy node install comfyui-zip-ties を実行するか、リポジトリを ComfyUI/custom_nodes にクローンして再起動するとインストールできます。リリースとジェスチャーの全一覧は GitHub にあります。

コメント

GitHubでサインインしてディスカッションに参加しましょう。

コメントを読み込み中…
Zip Ties: ComfyUI の配線をリボンに束ねる拡張 | ComfyUI Wiki