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.

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

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.