Auto Layout
This example demonstrates how to automatically arrange nodes. It introduces a reusable useAutoLayout hook and showcases three popular layout engines that you can switch between at runtime: dagre , d3-hierarchy , and elk .
This is a Pro example. Get all pro examples, templates, 1:1 support from the xyflow team and prioritized Github issues with a React Flow Pro subscription.
About this Pro Example
- Dependencies: @xyflow/react , @dagrejs/dagre , d3-hierarchy , elkjs
- Includes a configurable
useAutoLayouthook that can be reused in your applications - Provides a comparison of different layout algorithms with interactive controls
- Note: In your own applications, you typically only need to choose one layout engine
Last updated on