REACT ARCH / 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.

Manual

Manual layout reads each node's position. Missing coordinates default to zero.

manual-layout.ts

const topology = {
  layout: layouts.manual(),
  nodes: [
    node("router", { position: { x: 240, y: 40 } }),
    node("web", { position: { x: 40, y: 220 } }),
    node("database", { position: { x: 440, y: 220 } })
  ],
  edges: []
};

Row and column

gap separates nodes, padding offsets the composition, and align controls the cross axis. Use start, center, end, or stretch. Stretch aligns like start and leaves node sizes unchanged.

flow-layout.ts

layouts.row({ gap: 64, padding: 20, align: "center" })
layouts.column({ gap: 40, padding: 16, align: "end" })

Grid

Grid measures each column and row independently. Omit columns to use the square-root default.

grid-layout.ts

layouts.grid({
  columns: 3,
  columnGap: 56,
  rowGap: 40,
  padding: 24,
  align: "center"
})

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.

Option	Default	Use
direction	right	right, left, down, or up.
spacing	48	Gap between nodes in one layer.
layerSpacing	80	Gap between graph layers.
edgeRouting	orthogonal	orthogonal, polyline, or spline engine routes.
options	{}	Raw ELK string options. Explicit fields above win.

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.

measured-layout.ts

const measured = new Map([
  ["title", { width: 260, height: 88 }],
  ["summary", { width: 320, height: 120 }]
]);

resolveNodeSizes(document.nodes, measured);
const result = arrangeDocument(
  { ...document, layout: layouts.row({ gap: 48 }) },
  measured
);