diff --git a/README.md b/README.md index 565f832..fb1628c 100644 --- a/README.md +++ b/README.md @@ -6,15 +6,21 @@ this repo is a working prototype of my proof-of-concept in comfyanonymous/ComfyU ## short intro -there's already an [1-click auto-arrange graph](https://github.com/pythongosssss/ComfyUI-Custom-Scripts#auto-arrange-graph) but it relies on default `arrange()` of `LiteGraph.js` which [positions the nodes according to level of dependencies](https://github.com/jagenjo/litegraph.js/issues/9#issuecomment-377317416), it's neat but imo the wires are very disorientated for visualization purpose +there’s already an [1-click auto-arrange graph](https://github.com/pythongosssss/ComfyUI-Custom-Scripts#auto-arrange-graph) but it relies on default `arrange()` of `LiteGraph.js` (backbone of ComfyUI) which [positions the nodes according to level of dependencies](https://github.com/jagenjo/litegraph.js/issues/9#issuecomment-377317416), 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](https://en.wikipedia.org/wiki/Directed_acyclic_graph), so we can apply better graph drawing algorithm +my ideal is to have all wires visible, in term of direction, flow and connection to nodes -credit: inspiration from this [comment](https://github.com/jagenjo/litegraph.js/issues/9#issuecomment-376413726) +from my very limited understanding, most if not all ComfyUI workflows can be qualified as [directed acyclic graph](https://en.wikipedia.org/wiki/Directed_acyclic_graph), so we can apply better [graph drawing algorithms](https://en.wikipedia.org/wiki/Graph_drawing), in particular here i focus on [hierarchical graph drawing](https://en.wikipedia.org/wiki/Layered_graph_drawing) the most suitable for directed acyclic graph -disclaimer: personal preference, not always guarantee a better layout +**credit**: inspiration from this [comment](https://github.com/jagenjo/litegraph.js/issues/9#issuecomment-376413726) -## implementation +**disclaimer**: personal preference, graph very much larger, not always guarantee a better layout for all use-cases + +## implementation details + +the principle is use an external library to calculate all nodes position, then retrieve back to `LiteGraph.js` + +recommend: remove reroute nodes so the algorithms work better as it figures out the ranks/depth, after applied layout u can re-add reroute nodes for any wires partially hidden by nodes requirements: - ComfyUI version later than PR comfyanonymous/ComfyUI#1273 or commit `bc76b38` @@ -23,13 +29,15 @@ implemented algorithms: - Dagre layout from https://github.com/dagrejs/dagre - ELK ‘layered’ layout from https://github.com/kieler/elkjs -other possible choices (but unsatisfied to me): +other possible choices (but unsatisfying to me): - ELK layouts: https://eclipse.dev/elk/reference/algorithms.html - Cytoscape layouts: https://blog.js.cytoscape.org/2020/05/11/layouts/#choice-of-layout undo/redo possible with https://github.com/bmad4ever/ComfyUI-Bmad-DirtyUndoRedo -recommend: remove reroute nodes so the algorithms work better as it figures out the ranks/depth, after applied layout u can re-add reroute nodes for any wires partially hidden by nodes +2 options to control layout density: +- spacing between ranks/depths/columns +- spacing between nodes in same rank/depth/column **TODO**: - [x] refresh after apply layout @@ -40,9 +48,11 @@ recommend: remove reroute nodes so the algorithms work better as it figures out ## example using [noisy latent composition example](https://comfyanonymous.github.io/ComfyUI_examples/noisy_latent_composition/) +(the empty black rectangle box is browser viewport) + - original workflow: ![Imgur](https://i.imgur.com/jqa3SoD.png) -remove groups coz nodes placed very differently +remove groups coz nodes gonna be placed very differently - `LiteGraph.js` default auto-arrange: ![Imgur](https://i.imgur.com/3hTAdDU.png) @@ -51,4 +61,4 @@ remove groups coz nodes placed very differently ![Imgur](https://i.imgur.com/19TVkpT.png) - `ELK.js` ‘layered’ layout: -![Imgur](https://i.imgur.com/yNztWil.png) \ No newline at end of file +![Imgur](https://i.imgur.com/yNztWil.png)