Dagre Tree

This example shows how you can integrate dagre.js (opens in a new tab) with React Flow to create simple tree layouts. Good alternatives to dagre are d3-hierarchy (opens in a new tab) or elkjs (opens in a new tab) if you are looking for a more advanced layouting library.

This example is a demonstration of static layouting. If the nodes or edges in the graph change, the layout won't recalculate! It is possible to do dynamic layouting with dagre (and other libraries), though: see the auto layout pro example for an example of this.