Documentation

Getting started

Install the package, describe a graph, and render a coordinate-free diagram in React.

Install

terminal

pnpm add react-arch-diagrams

React and React DOM are peer dependencies. Import the stylesheet once near your application root.

Render your first graph

Architecture.tsx

import {
  Diagram,
  anchors,
  defineDiagram,
  edge,
  layouts,
  node,
  routes
} from "react-arch-diagrams";
import "react-arch-diagrams/styles.css";

const architecture = defineDiagram({
  layout: layouts.layered({ direction: "right" }),
  nodes: [
    node("api", {
      label: "API",
      ports: [{ id: "out", side: "right" }]
    }),
    node("database", {
      label: "Database",
      shape: "ellipse",
      width: 180,
      height: 90
    })
  ],
  edges: [
    edge(
      "api-database",
      anchors.port("api", "out"),
      anchors.auto("database"),
      { route: routes.orthogonal("horizontal", 0.5, 10) }
    )
  ]
});

export function Architecture() {
  return <Diagram {...architecture} height={480} />;
}

Neither node has a position. ELK arranges the graph, then the router connects the named API port to the exact ellipse boundary.

Use a composition layout without ELK

Replace the layered layout with layouts.row({ gap: 64, align: "center" }). Row, column, and grid layouts run synchronously in the headless core.

Control the camera

The default component fits the graph and enables pan, zoom, and selection. Node dragging stays off until you request it.

interaction.tsx

<Diagram
  {...architecture}
  interactive={{
    pan: true,
    zoom: true,
    dragNodes: true,
    select: true
  }}
  onNodeMove={(id, position) => savePosition(id, position)}
/>