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 .

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