Layout

layout (Dagre)

$flow.layout(options?: {
  direction?: 'TB' | 'LR' | 'BT' | 'RL';
  nodesep?: number;
  ranksep?: number;
  adjustHandles?: boolean;
  fitView?: boolean;
  duration?: number;
}): void

Apply Dagre (directed acyclic graph) layout. Requires the dagre addon: Alpine.plugin(AlpineFlowDagre).

All four emit a layout event when the layout is computed and layout-end once the nodes have settled there — both carrying positions, keyed by node id. With a duration those are different moments (the canvas animates towards the new coordinates), so read positions off the event rather than the model, which lags one layout behind until the motion finishes.

<div @flow-layout-end="$wire.saveLayout($event.detail.positions)">

forceLayout

$flow.forceLayout(options?: {
  strength?: number;
  distance?: number;
  charge?: number;
  iterations?: number;
  center?: { x: number; y: number };
  fitView?: boolean;
  duration?: number;
}): void

Apply force-directed layout. Requires the force addon: Alpine.plugin(AlpineFlowForce).

treeLayout

$flow.treeLayout(options?: {
  layoutType?: 'tree' | 'cluster';
  direction?: 'TB' | 'LR' | 'BT' | 'RL';
  nodeWidth?: number;
  nodeHeight?: number;
  adjustHandles?: boolean;
  fitView?: boolean;
  duration?: number;
}): void

Apply hierarchy/tree layout. Requires the hierarchy addon: Alpine.plugin(AlpineFlowHierarchy).

elkLayout

$flow.elkLayout(options?: {
  algorithm?: 'layered' | 'force' | 'mrtree' | 'radial' | 'stress';
  direction?: 'DOWN' | 'RIGHT' | 'UP' | 'LEFT';
  nodeSpacing?: number;
  layerSpacing?: number;
  adjustHandles?: boolean;
  fitView?: boolean;
  duration?: number;
}): Promise<void>

Apply ELK (Eclipse Layout Kernel) layout. Async because ELK's layout returns a Promise. Requires the ELK addon: Alpine.plugin(AlpineFlowElk).