Auto Layout
This example shows how you can automatically arrange nodes after adding items from a sidebar. This a common UI pattern for workflow editors and lets you create a flow quickly. The layout is calculated every time the graph changes.
This is a Pro example. Get all pro examples, 1:1 support from the xyflow team and prioritized Github issues with a React Flow Pro subscription.
About this Pro Example
- Once subscribed, you’ll get access to two different versions of this example: One using d3-hierarchy and the other one using dagre.js as a layout engine.
- Dependencies: reactflow, d3-hierarchy or dagre