@adecore/diagram
Directed graphs that are written rather than drawn. A diagram file names its nodes, groups and edges; the package lays them out, routes the edges and writes the result as SVG or as lines of text. The same file gives the same picture on every machine, and it needs no DOM.
Install
bun add @adecore/diagram
Use
import { layoutOf, readingOrder, toSvg } from '@adecore/diagram';
import { diagramProblemIn, migrateDiagram } from '@adecore/diagram/protocol';
const diagram = migrateDiagram(JSON.parse(file));
const problem = diagram && diagramProblemIn(diagram);
if (diagram === null || problem) {
throw new Error(problem ?? 'Not a diagram');
}
const layout = layoutOf(diagram);
const svg = toSvg(diagram, { layout });
const lines = readingOrder(diagram);
Entry points
| Import | What it holds |
|---|---|
@adecore/diagram | Layout, SVG export, the shape and text helpers and reading order |
@adecore/diagram/protocol | The Zod schemas and types of a diagram, and diagramProblemIn |
Documentation
| Page | What it covers |
|---|---|
| Documents | Nodes, groups and edges, and checking a file |
| Layout | Layers, ordering, sizes, groups, edge routes and dragged nodes |
| Painting and reading | toSvg, helpers for a painter of your own and readingOrder |
License
FSL-1.1-MIT, see LICENSE.