@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.

Documentation with live demos

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.