Use Auto Layout

Auto layout arranges all nodes on the canvas automatically - horizontally or vertically.

Basic usage

The layout button appears in the toolbar. Click it to arrange all nodes. No code changes are needed if the Auto Layout plugin is already included.

Layout directions

Two directions are supported:

Direction	Value	Description
Top to bottom	'DOWN'	Nodes flow downward (default)
Left to right	'RIGHT'	Nodes flow rightward

The active direction is shown in the toolbar and can be toggled before running layout.

Triggering layout from code

Use the useElkLayoutAction hook inside a React component to trigger layout programmatically:

import { useElkLayoutAction } from '<root>/plugins/elk-layout/hooks/use-elk-layout-action/use-elk-layout-action';

function MyToolbarButton() {
  const { performLayout } = useElkLayoutAction();

  return <button onClick={performLayout}>Auto Layout</button>;
}

performLayout reads the current nodes and edges, computes positions with the active layout direction, updates the canvas, and calls fitView to frame the result.

Plugin

Auto layout is provided by the Auto Layout plugin. That page has full details on configuration options, custom spacing, and how the layout engine works.

When auto layout runs

Auto layout repositions all nodes. It does not change node types, properties, or edges - only position values are updated. The diagram JSON written after layout reflects the new positions.