Interactive guide to the algorithms that arrange nodes on a canvas — from classic force-directed physics to modern spectral embeddings. Every demo is live and tunable.
Libraries you can use with React Flow and other canvas frameworks to implement these algorithms.
@dagrejs/dagreQuick hierarchical / tree layouts
View docs →d3-forceInteractive physics simulation
View docs →d3-hierarchySingle-root trees, treemaps
View docs →webcolaConstraint-based layout with smooth transitions
View docs →elkjsComplex hierarchies, compound nodes, radial
View docs →graphology-layout-forceatlas2Web worker ForceAtlas2 for large graphs
View docs →cytoscapeFull graph visualization with 20+ layout extensions
View docs →@cosmograph/cosmosGPU-accelerated layout for very large graphs
View docs →Layout algorithms used by well-known graph visualization and knowledge management tools.
| Tool | Primary Layout | Details |
|---|---|---|
| Obsidian | Force-directed | Custom implementation with 4 tunable force parameters |
| Gephi | ForceAtlas2 | Also: FR, Yifan Hu, OpenOrd (1M+ nodes), circular, hierarchical |
| Neo4j Bloom | GPU force-based | Two variants: compact and spread. Also hierarchical |
| Roam Research | Force-directed | d3-style graph view. Canvas features via tldraw |
| Logseq | Force-directed | Similar to Obsidian. Whiteboard via tldraw |
| yEd | Full suite | Hierarchical, organic, orthogonal, circular, tree, balloon, radial, and more |
| draw.io | Multiple | Flow, tree, radial, organic, circle, parallels, org chart |
Different graph sizes need different strategies. What works for 50 nodes breaks at 5,000.
Any algorithm works. FR or KK for quality, dagre for hierarchy.
ForceAtlas2, fCoSE, or dagre. Memoize layouts.
Multi-level (Yifan Hu, FM3). Barnes-Hut required. Node aggregation.
GPU-accelerated (cosmos.gl), OpenOrd. Density rendering, not individual nodes.