Update README.md

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)
+![Imgur](https://i.imgur.com/yNztWil.png)