Documentation

Layout

Use fast composition layouts for known structures or ELK for graph arrangement and obstacle-aware routing.

Built-in composition

layouts.ts

layouts.manual()
layouts.row({ gap: 48, align: "center" })
layouts.column({ gap: 32, align: "start" })
layouts.grid({ columns: 3, columnGap: 48, rowGap: 36 })
layouts.layered({
  direction: "right",
  spacing: 48,
  layerSpacing: 80,
  edgeRouting: "orthogonal"
})

Manual, row, column, and grid layouts run synchronously. They use explicit or measured node sizes and return deterministic positions.

Layered graphs with ELK

The layered adapter passes measured node dimensions and graph relationships to ELK. It supports right, left, down, and up direction plus spacing and raw ELK options.

ELK is a heuristic graph layout engine. It removes coordinate work, but it does not promise the same pixel result across unrelated graph changes. Use composition or manual layout when exact art direction matters more than automatic graph arrangement.

Headless layered layout

The React component imports ELK on demand. Headless users pass the adapter explicitly.

headless-layout.ts

import { computeDiagram } from "react-arch-diagrams/core";
import { elkLayoutEngine } from "react-arch-diagrams/elk";

const result = await computeDiagram(document, {
  layoutEngine: elkLayoutEngine
});

Measured nodes

Layout accepts a map of measured node sizes. Explicit node dimensions win, then measured dimensions, then minimum dimensions, then the default size of 160 by 64.