Auto-layout

How to set up auto-layout (automatic node position)?

Auto-layout can automatically organize your nodes to minimize edge crossings and optimize spacing between nodes. Here's how to use it:

Option 1: Enable during data loading

In your Load nodes and edges action, enable "Enable auto layout". This will automatically position nodes when they are loaded into the chart.

Option 2: Apply layout to existing diagrams

Use the Auto layout action in your workflows. Trigger it with a button click or any event to instantly reorganize existing nodes into a clean layout.

Configuration settings (for both options)

Both methods use the configuration from your ReactFlow element properties in the "Auto layout" section:

• Layout direction - Choose TB (top-to-bottom), BT (bottom-to-top), LR (left-to-right), or RL (right-to-left)

• Node width for layout and Node height for layout - Node size in pixels for layout calculations

The auto-layout uses the industry-standard Dagre algorithm.