Documentation

Introduction

React Arch Diagrams turns a serializable graph description into precise React diagrams without requiring callers to calculate positions.

What the package owns

The library owns node measurement, layout, endpoint geometry, routing, SVG paths, camera controls, and default interaction. Your application owns the graph data, custom React renderers, selection state, and any persisted manual positions.

render pipeline

Diagram document
  ├─ nodes: serializable node records
  ├─ edges: serializable connection records
  └─ layout: arrangement intent

computeDiagram()
  ├─ measure and arrange nodes
  ├─ resolve anchors and ports
  ├─ intersect shape boundaries
  └─ return positioned nodes and SVG paths

Choose the smallest entry point

Import	Use it for
react-arch-diagrams	Normal React applications. Exports the core and React API.
react-arch-diagrams/core	Headless layout, geometry, routing, builders, and Web Animations helpers.
react-arch-diagrams/react	Diagram, default renderers, renderer contracts, and the layout hook.
react-arch-diagrams/elk	The explicit ELK adapter for headless layered layout.
react-arch-diagrams/styles.css	Default nodes, edges, ports, camera, and CSS animation styles.

The React component lazy-loads ELK only when the document requests layouts.layered(). Row, column, grid, and manual layouts do not download the ELK chunk.

Current scope

Version 0.1 covers the geometry and rendering foundation. It includes draggable nodes, selection callbacks, pan, zoom, ports, and SVG serialization. A complete visual editor with connection handles, nested groups, keyboard CRUD, and multiplayer state is later work.