React Arch
Menu
Get started

React Arch Diagrams · MIT

Architecture diagrams,
in code.

Define relationships. Get measured nodes, exact endpoints, orthogonal routes, automatic layout, and scalable SVG.

Open playgroundDocumentation ↗
Live architectureELK layout · SVG routes
01

No coordinate work.

Use row, column, grid, or layered ELK layout. The diagram measures and arranges itself.

02

Exact connections.

Connect to a node, side, or named port. Paths terminate on rectangle and ellipse boundaries.

03

Motion without weight.

Draw paths with the included CSS. No animation framework is required.

Small, explicit API

The source reads like the system.

Nodes and relationships stay reviewable. Geometry is derived. Use the headless core, React renderer, or lazy ELK adapter independently.

View exported API ↗
architecture.tsx
const diagram = defineDiagram({
  layout: layouts.layered({ direction: "right" }),
  nodes: [
    node("client", { label: "Client" }),
    node("gateway", { label: "Gateway" }),
    node("database", { label: "Database", shape: "ellipse" })
  ],
  edges: [
    edge("request", "client", "gateway", {
      route: routes.orthogonal("horizontal"),
      animated: "draw"
    }),
    edge("persist", "gateway", "database", {
      route: routes.straight(),
      animated: "draw"
    })
  ]
});

<Diagram {...diagram} />;