> For the complete documentation index, see [llms.txt](https://enhancio.gitbook.io/reactflow-for-bubble.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://enhancio.gitbook.io/reactflow-for-bubble.io/guides/auto-layout.md).

# Auto-layout

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](/reactflow-for-bubble.io/element-reference/actions/load-nodes-and-edges.md) 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**](/reactflow-for-bubble.io/element-reference/actions/auto-layout.md) 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**](/reactflow-for-bubble.io/element-reference/fields.md#layout-direction) - Choose TB (top-to-bottom), BT (bottom-to-top), LR (left-to-right), or RL (right-to-left)
* [**Node width for layout**](/reactflow-for-bubble.io/element-reference/fields.md#node-width-for-layout) and [**Node height for layout**](/reactflow-for-bubble.io/element-reference/fields.md#node-height-for-layout) - Node size in pixels for layout calculations

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