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.

See Pricing Plans Sign In

About this Pro Example

Dependencies: @xyflow/react , @dagrejs/dagre , d3-hierarchy , elkjs
Includes a configurable useAutoLayout hook 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
License: xyflow Pro License