Documentation
API reference
The supported exports in React Arch Diagrams 0.1.0. Unlisted source files are implementation details.
React exports
| Export | Purpose |
|---|
| Diagram | Renders positioned nodes, SVG edges, labels, ports, camera interaction, selection, and dragging. |
| DefaultNode | The default HTML node renderer. |
| DefaultEdge | The default SVG edge renderer. |
| useDiagramLayout | Runs asynchronous layout and discards stale results. |
Builders
| Export | Purpose |
|---|
| defineDiagram(document) | Preserves generic inference for a diagram document. |
| node(id, options?) | Creates a serializable node. |
| edge(id, from, to, options?) | Creates a serializable edge. |
| anchors.auto(nodeId) | Clips toward the next route point. |
| anchors.side(nodeId, side, position?, offset?) | Targets an exact side position. |
| anchors.port(nodeId, portId) | Targets a named port. |
| anchors.point(x, y) | Creates an absolute endpoint. |
| routes.straight() | Creates a direct route. |
| routes.elbow(axis?, radius?) | Creates a one-bend route. |
| routes.orthogonal(axis?, split?, radius?) | Creates a middle-corridor route. |
| routes.manual(points, radius?) | Preserves supplied waypoints. |
| routes.auto(radius?) | Uses an engine route or orthogonal fallback. |
| layouts.manual() | Uses node positions. |
| layouts.row(options?) | Places nodes left to right. |
| layouts.column(options?) | Places nodes top to bottom. |
| layouts.grid(options?) | Places nodes into measured grid cells. |
| layouts.layered(options?) | Requests layered ELK layout. |
Headless functions
| Export | Purpose |
|---|
| computeDiagram | Runs layout and routing. |
| arrangeDocument | Runs manual, row, column, or grid layout synchronously. |
| routeEdge / routeEdges | Resolves endpoints and returns SVG paths. |
| resolveEndpoint | Resolves point, node, side, and port endpoints. |
| rectangleIntersection | Intersects a center ray with a rectangle. |
| ellipseIntersection | Intersects a center ray with an ellipse. |
| pointsToPath | Converts points to a rounded SVG path. |
| boundsOfNodes | Calculates positioned diagram bounds. |
| animateElement | Reduced-motion-aware Web Animations wrapper. |
ELK exports
Import layoutWithElk and elkLayoutEngine from react-arch-diagrams/elk.
Public types
PointSizeBoundsDirectionSideEndpointPortSpecRouteSpecDiagramNode<T>DiagramEdge<T>LayoutSpecDiagramDocument<NodeData, EdgeData>PositionedNode<T>RoutedEdge<T>DiagramResult<NodeData, EdgeData>ShapeDefinitionShapeRegistryLayoutEngineDiagramProps<NodeData, EdgeData>DiagramHandleNodeRendererProps<T>EdgeRendererProps<T>
Diagram handle
| Method | Purpose |
|---|
| fit() | Fits all positioned nodes. |
| zoomTo(zoom, center?) | Sets zoom relative to fitted bounds. |
| panTo(center) | Centers the current camera. |
| getSvgElement() | Returns the live SVG element. |
| toSvgString() | Serializes SVG and foreignObject node content. |