[for visualization purpose] an attempt to have better layout (arrange nodes)

[phineas-pta]

update

i have a working extension here: https://github.com/phineas-pta/comfyui-auto-nodes-layout

short intro

there's already an 1-click auto-arrange graph but it relies on default arrange() of LiteGraph.js which positions the nodes according to level of dependencies, it's neat but imo the wires are very disorientated for visualization purpose

from my very limited understanding, most if not all ComfyUI workflows can be qualified as directed acyclic graph, so we can apply better graph drawing algorithm, so here is my proof-of-concept with Dagre layout

credit: inspiration from this comment

disclaimer: personal preference, not always guarantee a better layout

steps

edit file ComfyUI/web/index.html

before the line <script type="module"> add dagrejs

<script src="https://cdn.jsdelivr.net/npm/dagre/dist/dagre.min.js"></script>

after the line window.graph = app.graph; add the following script

// setup dagre
var daG = new dagre.graphlib
    .Graph()
    .setGraph({
        "rankdir": "LR", // left to right
        "ranker": "network-simplex", // values: "network-simplex", "tight-tree", "longest-path"
        "nodesep": 100, // spacing in same column, can be changed
        "ranksep": 200, // spacing between columns, can be changed
    });

// convert litegraph to dagre
app.graph._nodes.forEach((n) => daG.setNode(
    `cytoN-${n.id}`,
    {
        "label": n.type,
        "width": n.size[0],
        "height": n.size[1]
    }
));
app.graph.links.forEach((e) => daG.setEdge(
    `cytoN-${e.origin_id}`,
    `cytoN-${e.target_id}`,
    { "label": e.type }
));
dagre.layout(daG);

// retrieve nodes position
for (let n of app.graph._nodes) {
    const cytoN = daG.node(`cytoN-${n.id}`);
    n.pos[0] = cytoN.x;
    n.pos[1] = cytoN.y;
}

reload the page to see the change

note: i find that it works visually better if remove all reroute nodes before change layout (can be re-added later)

example

using noisy latent composition example

• original:
  
  remove groups coz nodes placed very differently

• using 1-click auto-arrange graph:
  

• Dagre layout:
  
  the flows are now very visible and can easily read left to right,
  additional steps would be add some reroute nodes for any wires partially hidden by nodes

other layout

ELK.js supports even more layouts

attempt with ELK.js "layered" layout (other layouts are visually bad)

<script src="https://cdn.jsdelivr.net/npm/elkjs/lib/elk.bundled.min.js"></script> const myCytoNodes = app.graph._nodes.map((n) => ({ "id": n.id, "width": n.size[0], "height": n.size[1] })); const myCytoEdges = app.graph.links.filter(Boolean).map((e) => ({ "id": e.id, "sources": [ e.origin_id ], "targets": [ e.target_id ] })); const myCytoGraph = { "id": "root", "children": myCytoNodes, "edges": myCytoEdges, "layoutOptions": { "elk.algorithm": "layered" } } const elk = new ELK(); elk.layout(myCytoGraph) .then((val) => { for (let nodeLaidOut of val.children) { const n = app.graph.getNodeById(nodeLaidOut.id); n.pos[0] = nodeLaidOut.x * 2; // add more spacing n.pos[1] = nodeLaidOut.y * 2; } }) .catch(console.error);

Cytoscape.js also has some layouts (see my original post unedited for cytoscape integration)

---

edit 0: original post

edit 1+2: typo, add more notes about layout

edit 3+4: reduce dependencies to only dagre, remove cytoscape

edit 5: attempt with ELK.js

edit 6: extension implemented

[ltdrdata]

This is a good approach!
If there's a density control function, it would be really useful.

[phineas-pta]

for now i use nodeSep and rankSep to control spacing, but i truly need to dig more into cytoscape docs

edit it seems to me that 2 options nodesep and ranksep are enough to control spacing

[phineas-pta]

@ltdrdata is there any example to write comfyui extension (add button or right click menu but not custom node) ?

[ltdrdata]

https://github.com/pythongosssss/ComfyUI-Custom-Scripts/blob/main/web/js/nodeFinder.js

[phineas-pta]

tysm, but from what i seeing, i have to write python code to copy/symlink the js code to web/scripts/ ?

[ltdrdata]

https://github.com/pythongosssss/ComfyUI-Custom-Scripts/blob/23458e2862e7a945fbf81e204401c658a31f8656/__init__.py#L24

You can set script through WEB_DIRECTORY in __init__.py

[phineas-pta]

tysm @ltdrdata i succeed tinkering to create a working prototype as comfyui extension:
https://github.com/phineas-pta/comfyui-auto-nodes-layout

biggest TODO is to add UI options to change density

[phineas-pta]

update: pop-up to change density options ✅