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

Start from a diagram type

The recipe guide has complete service architecture, request path, event pipeline, deployment, state machine, data lineage, dependency graph, and network topology documents. The live gallery renders each one with the public API.

Current scope

Version 0.1 covers the geometry and rendering foundation. It includes draggable nodes, selection callbacks, pan, zoom, ports, and SVG serialization. The visual playground adds node and connection editing, ports, styling, undo/redo, browser saves, and JSON, JSX, and SVG exports. Nested groups and multiplayer state are not included.