@rse/gradia 0.9.0

package/dst/gradia-api-render-edge.js

@@ -0,0 +1,211 @@
+/*
+**  Gradia -- Object Graph Diagram Rendering
+**  Copyright (c) 2026 Dr. Ralf S. Engelschall <rse@engelschall.com>
+**  Distributed under MIT license <https://spdx.org/licenses/MIT.html>
+*/
+import { RADIUS, HOP, SLOT } from "./gradia-api-render-base.js";
+/*  edge attachment port geometry  */
+const PORT_SEP = 24; /*  maximum separation of adjacent ports     */
+const PORT_PAD = 10; /*  padding of the port band inside the box  */
+/*  drop duplicate and collinear intermediate points of a polyline  */
+export const simplifyPoly = (pts) => {
+    /*  drop the collinear intermediate points first, as collapsing
+        a backtracking triple leaves a duplicate point pair behind  */
+    const flat = [...pts];
+    for (let k = flat.length - 2; k > 0; k--) {
+        const [a, b, c] = [flat[k - 1], flat[k], flat[k + 1]];
+        if ((a[0] === b[0] && b[0] === c[0]) || (a[1] === b[1] && b[1] === c[1]))
+            flat.splice(k, 1);
+    }
+    /*  drop the remaining duplicate points  */
+    const out = [];
+    for (const p of flat) {
+        if (out.length > 0 && out[out.length - 1][0] === p[0] && out[out.length - 1][1] === p[1])
+            continue;
+        out.push(p);
+    }
+    return out;
+};
+/*  distribute the edge attachment ports along each node side,
+    ordered by the vertical position of the opposite endpoint  */
+export const assignPorts = (edges, sides, cx, cy, boxW, boxH) => {
+    /*  group the edge endpoints by the node side they attach to  */
+    const portGroups = new Map();
+    const addPort = (key, edge, role) => {
+        const group = portGroups.get(key);
+        if (group === undefined)
+            portGroups.set(key, [{ edge, role }]);
+        else
+            group.push({ edge, role });
+    };
+    edges.forEach((edge, i) => {
+        addPort(`${edge.source}:${sides[i].s}`, i, "s");
+        addPort(`${edge.target}:${sides[i].t}`, i, "t");
+    });
+    /*  place the ports of each group, ordered by the opposite endpoint  */
+    const portPos = new Map();
+    for (const [key, group] of portGroups) {
+        const sep = key.lastIndexOf(":"); /*  ids may contain a colon themselves  */
+        const id = key.slice(0, sep);
+        const side = key.slice(sep + 1);
+        const otherOf = (p) => p.role === "s" ? edges[p.edge].target : edges[p.edge].source;
+        group.sort((a, b) => (cy(otherOf(a)) - cy(otherOf(b))) || (a.edge - b.edge));
+        const spacing = Math.min(PORT_SEP, (boxH.get(id) - PORT_PAD) / group.length);
+        group.forEach((p, idx) => {
+            portPos.set(`${p.edge}:${p.role}`, {
+                x: cx(id) + (side === "e" ? +1 : -1) * boxW.get(id) / 2,
+                y: cy(id) + (idx - (group.length - 1) / 2) * spacing
+            });
+        });
+    }
+    return portPos;
+};
+/*  assign the parallel tracks within a channel or gutter: the users are
+    ordered by their entry/exit positions, so that a track-following
+    segment never has to cross the entering segment of a parallel
+    neighbor (back turners get near tracks entry-position-ordered,
+    forward turners far tracks, reversed for mirrored users which
+    enter the channel/gutter from the far side)  */
+export const assignTracks = (users, width, pad) => {
+    const order = (list, mirror) => {
+        const dir = mirror ? -1 : +1;
+        const backs = list.filter((u) => u.posOut < u.posIn)
+            .sort((a, b) => dir * ((a.posIn - b.posIn) || (a.posOut - b.posOut)));
+        const fores = list.filter((u) => u.posOut >= u.posIn)
+            .sort((a, b) => dir * ((b.posIn - a.posIn) || (b.posOut - a.posOut)));
+        return [...backs, ...fores];
+    };
+    const ordered = [
+        ...order(users.filter((u) => !u.mirror), false),
+        ...order(users.filter((u) => u.mirror), true)
+    ];
+    const step = Math.min(SLOT, (width - pad) / Math.max(ordered.length - 1, 1));
+    const offsets = new Map();
+    ordered.forEach((u, idx) => {
+        offsets.set(u.edge, (idx - (ordered.length - 1) / 2) * step);
+    });
+    return offsets;
+};
+/*  detect edge crossings: for every horizontal segment determine the
+    vertical segments of all other edges crossing it (hops are always
+    drawn on the horizontal segment of the crossing pair)  */
+export const computeHops = (polys) => {
+    /*  collect all vertical segments once, instead of re-scanning
+        every polyline again for each single horizontal segment  */
+    const verts = [];
+    polys.forEach((poly, j) => {
+        for (let m = 0; m < poly.length - 1; m++) {
+            const [c, d] = [poly[m], poly[m + 1]];
+            if (c[0] !== d[0])
+                continue;
+            verts.push({ owner: j, x: c[0], y1: Math.min(c[1], d[1]), y2: Math.max(c[1], d[1]) });
+        }
+    });
+    return polys.map((poly, i) => {
+        const result = new Map();
+        for (let k = 0; k < poly.length - 1; k++) {
+            const [a, b] = [poly[k], poly[k + 1]];
+            if (a[1] !== b[1])
+                continue;
+            const hy = a[1];
+            const hx1 = Math.min(a[0], b[0]);
+            const hx2 = Math.max(a[0], b[0]);
+            const xs = [];
+            for (const v of verts)
+                if (v.owner !== i && v.x > hx1 + 1 && v.x < hx2 - 1 && hy > v.y1 + 1 && hy < v.y2 - 1)
+                    xs.push(v.x);
+            if (xs.length > 0)
+                result.set(k, xs);
+        }
+        return result;
+    });
+};
+/*  convert an edge polyline into an SVG path with rounded corners
+    at the bends and semi-circular hops at the crossing points  */
+export const pathOf = (poly, hop) => {
+    const len = (a, b) => Math.abs(b[0] - a[0]) + Math.abs(b[1] - a[1]);
+    const radius = (k) => {
+        if (k <= 0 || k >= poly.length - 1)
+            return 0;
+        let r = Math.min(RADIUS, len(poly[k - 1], poly[k]) / 2, len(poly[k], poly[k + 1]) / 2);
+        /*  shrink the corner rounding when a crossing hop sits close
+            to the bend, so the hop is never swallowed by the arc  */
+        for (const seg of [k - 1, k])
+            for (const hx of hop.get(seg) ?? [])
+                r = Math.min(r, Math.max(Math.abs(hx - poly[k][0]) - HOP - 2, 4));
+        return r;
+    };
+    const d = [];
+    for (let k = 0; k < poly.length - 1; k++) {
+        const [a, b] = [poly[k], poly[k + 1]];
+        const l = len(a, b);
+        const ux = (b[0] - a[0]) / l;
+        const uy = (b[1] - a[1]) / l;
+        const r0 = radius(k);
+        const r1 = radius(k + 1);
+        const p0 = [a[0] + ux * r0, a[1] + uy * r0];
+        const p1 = [b[0] - ux * r1, b[1] - uy * r1];
+        if (k === 0)
+            d.push(`M ${p0[0]} ${p0[1]}`);
+        if (a[1] === b[1] && hop.has(k)) {
+            const dir = Math.sign(b[0] - a[0]);
+            const xs = hop.get(k)
+                .filter((hx) => (hx - p0[0]) * dir > 2 && (p1[0] - hx) * dir > 2)
+                .sort((m, n) => (m - n) * dir);
+            /*  merge closely adjacent crossings into groups, each
+                rendered as one single wide "long hop" arc (crossings
+                are merged whenever the flat line piece left between
+                their individual hops would be shorter than 14px)  */
+            const groups = [];
+            for (const hx of xs) {
+                const g = groups[groups.length - 1];
+                if (g !== undefined && Math.abs(hx - g[g.length - 1]) <= HOP * 2 + 14)
+                    g.push(hx);
+                else
+                    groups.push([hx]);
+            }
+            for (const g of groups) {
+                let x1 = g[0] - dir * HOP;
+                let x2 = g[g.length - 1] + dir * HOP;
+                /*  clamp the arc into the drawable segment part, so
+                    crossings close to a corner still get their hop  */
+                if ((x1 - p0[0]) * dir < 0)
+                    x1 = p0[0];
+                if ((p1[0] - x2) * dir < 0)
+                    x2 = p1[0];
+                d.push(`L ${x1} ${a[1]}`);
+                d.push(`A ${Math.abs(x2 - x1) / 2} ${HOP} 0 0 ${dir > 0 ? 1 : 0} ${x2} ${a[1]}`);
+            }
+        }
+        d.push(`L ${p1[0]} ${p1[1]}`);
+        if (k < poly.length - 2) {
+            const c = poly[k + 1];
+            const n = poly[k + 2];
+            const nl = len(c, n);
+            const q = [
+                c[0] + (n[0] - c[0]) / nl * r1,
+                c[1] + (n[1] - c[1]) / nl * r1
+            ];
+            d.push(`Q ${b[0]} ${b[1]} ${q[0]} ${q[1]}`);
+        }
+    }
+    return d.join(" ");
+};
+/*  determine a point on a polyline at a given fraction of its length  */
+export const pointAt = (poly, fraction) => {
+    const lens = poly.slice(0, -1).map((p, k) => Math.abs(poly[k + 1][0] - p[0]) + Math.abs(poly[k + 1][1] - p[1]));
+    const total = lens.reduce((a, b) => a + b, 0);
+    let want = total * fraction;
+    for (let k = 0; k < lens.length; k++) {
+        if (want <= lens[k] || k === lens.length - 1) {
+            const t = lens[k] > 0 ? want / lens[k] : 0;
+            return {
+                x: poly[k][0] + (poly[k + 1][0] - poly[k][0]) * Math.min(t, 1),
+                y: poly[k][1] + (poly[k + 1][1] - poly[k][1]) * Math.min(t, 1),
+                horizontal: poly[k][1] === poly[k + 1][1]
+            };
+        }
+        want -= lens[k];
+    }
+    return { x: poly[0][0], y: poly[0][1], horizontal: true };
+};

package/dst/gradia-api-render-group.d.ts

@@ -0,0 +1,9 @@
+import { Node, Graph } from "./gradia-api-model.js";
+import { Layout } from "./gradia-api-render-svg.js";
+export declare const groupOf: (node: Node) => string | undefined;
+export interface GroupPart {
+    name: string;
+    graph: Graph;
+}
+export declare const partitionGroups: (graph: Graph) => GroupPart[] | null;
+export declare const composeGroups: (parts: GroupPart[], layouts: Layout[]) => Layout;

package/dst/gradia-api-render-group.js

@@ -0,0 +1,103 @@
+/*
+**  Gradia -- Object Graph Diagram Rendering
+**  Copyright (c) 2026 Dr. Ralf S. Engelschall <rse@engelschall.com>
+**  Distributed under MIT license <https://spdx.org/licenses/MIT.html>
+*/
+import { FS_GROUP, MARGIN, textWidth } from "./gradia-api-render-base.js";
+/*  rendering geometry constants  */
+const GROUP_PAD = 30; /*  inner padding of group boxes              */
+const GROUP_HEAD = 34; /*  extra top space for the group tag         */
+const GROUP_GAP = 40; /*  vertical gap between stacked group boxes  */
+/*  the special "group" annotation (assigning a node to a named group)  */
+export const groupOf = (node) => node.attrs.findLast((attr) => attr.key === "group")?.val;
+/*  partition the graph into its named groups (in order of first
+    appearance), implying "group: default" for the nodes without one,
+    or return null when no node uses a group at all. Edges have to
+    stay within a single group, so reject any group-crossing edge  */
+export const partitionGroups = (graph) => {
+    const nodes = Array.from(graph.nodes.values());
+    if (!nodes.some((node) => groupOf(node) !== undefined))
+        return null;
+    const parts = new Map();
+    const nameOf = new Map();
+    for (const node of nodes) {
+        const name = groupOf(node) ?? "default";
+        nameOf.set(node.id, name);
+        let part = parts.get(name);
+        if (part === undefined) {
+            part = { nodes: new Map(), edges: [] };
+            parts.set(name, part);
+        }
+        part.nodes.set(node.id, node);
+    }
+    for (const edge of graph.edges) {
+        const sg = nameOf.get(edge.source);
+        const tg = nameOf.get(edge.target);
+        if (sg !== tg)
+            throw new Error(`edge "${edge.source}" --> "${edge.target}" ` +
+                `crosses groups "${sg}" and "${tg}"`);
+        parts.get(sg).edges.push(edge);
+    }
+    return Array.from(parts.entries()).map(([name, graph]) => ({ name, graph }));
+};
+/*  determine the bounding box of a laid out group (nodes and edges)  */
+const boundsOf = (layout) => {
+    const { nodes, cx, cy, boxW, boxH, polys } = layout;
+    let [minX, minY, maxX, maxY] = [Infinity, Infinity, -Infinity, -Infinity];
+    for (const node of nodes) {
+        minX = Math.min(minX, cx(node.id) - boxW.get(node.id) / 2);
+        minY = Math.min(minY, cy(node.id) - boxH.get(node.id) / 2);
+        maxX = Math.max(maxX, cx(node.id) + boxW.get(node.id) / 2);
+        maxY = Math.max(maxY, cy(node.id) + boxH.get(node.id) / 2);
+    }
+    for (const poly of polys) {
+        for (const [px, py] of poly) {
+            minX = Math.min(minX, px);
+            minY = Math.min(minY, py);
+            maxX = Math.max(maxX, px);
+            maxY = Math.max(maxY, py);
+        }
+    }
+    return { minX, minY, maxX, maxY };
+};
+/*  compose the per-group layouts into a single layout: the groups are
+    stacked vertically, each one shifted into its surrounding group box
+    (a node id is unique across the groups, as every node is a member
+    of exactly one group, so the maps can be merged and the coordinate
+    functions can dispatch on the node id)  */
+export const composeGroups = (parts, layouts) => {
+    /*  stack the group boxes vertically and determine the coordinate
+        offset which shifts each layout into its group box  */
+    const groups = [];
+    const dxs = [];
+    const dys = [];
+    const groupIdx = new Map();
+    let y = MARGIN;
+    layouts.forEach((layout, i) => {
+        const b = boundsOf(layout);
+        const w = Math.max(b.maxX - b.minX + GROUP_PAD * 2, textWidth(parts[i].name, FS_GROUP) + GROUP_PAD * 2);
+        const h = b.maxY - b.minY + GROUP_PAD * 2 + GROUP_HEAD;
+        dxs.push(MARGIN + GROUP_PAD - b.minX);
+        dys.push(y + GROUP_HEAD + GROUP_PAD - b.minY);
+        for (const node of layout.nodes)
+            groupIdx.set(node.id, i);
+        groups.push({ name: parts[i].name, x: MARGIN, y, w, h });
+        y += h + GROUP_GAP;
+    });
+    /*  merge the per-group layouts into the composed layout  */
+    const merge = (pick) => new Map(layouts.flatMap((layout) => Array.from(pick(layout).entries())));
+    const groupIdxOf = (id) => groupIdx.get(id);
+    return {
+        nodes: layouts.flatMap((layout) => layout.nodes),
+        edges: layouts.flatMap((layout) => layout.edges),
+        cx: (id) => layouts[groupIdxOf(id)].cx(id) + dxs[groupIdxOf(id)],
+        cy: (id) => layouts[groupIdxOf(id)].cy(id) + dys[groupIdxOf(id)],
+        boxW: merge((layout) => layout.boxW),
+        boxH: merge((layout) => layout.boxH),
+        contentH: merge((layout) => layout.contentH),
+        polys: layouts.flatMap((layout, i) => layout.polys.map((poly) => poly.map(([px, py]) => [px + dxs[i], py + dys[i]]))),
+        styleOf: layouts.every((layout) => layout.styleOf !== undefined) ?
+            (node) => layouts[groupIdxOf(node.id)].styleOf(node) : undefined,
+        groups
+    };
+};

package/dst/gradia-api-render-node.d.ts

@@ -0,0 +1,18 @@
+import { Attr, Node } from "./gradia-api-model.js";
+import { Config } from "./gradia-api-config.js";
+import { NodeStyle } from "./gradia-api-render-base.js";
+export declare const isPrimary: (node: Node) => boolean;
+export declare const defaultStyleOf: (config: Config) => (node: Node) => NodeStyle;
+export declare const typeOf: (node: Node) => string | undefined;
+export declare const attrsOfNode: (node: Node) => Attr[];
+export declare const urlOf: (node: Node) => string | undefined;
+export declare const MIN_H = 64;
+export declare const ATTR_H = 30;
+export declare const ATTR_P = 8;
+export declare const TYPE_H = 26;
+export declare const TYPE_D = 36;
+export declare const measureNodes: (nodes: Node[], scaleOf: (node: Node) => number) => {
+    boxW: Map<string, number>;
+    boxH: Map<string, number>;
+    contentH: Map<string, number>;
+};

package/dst/gradia-api-render-node.js

@@ -0,0 +1,74 @@
+/*
+**  Gradia -- Object Graph Diagram Rendering
+**  Copyright (c) 2026 Dr. Ralf S. Engelschall <rse@engelschall.com>
+**  Distributed under MIT license <https://spdx.org/licenses/MIT.html>
+*/
+import { FS_NAME, FS_TYPE, FS_ATTR, textWidth } from "./gradia-api-render-base.js";
+/*  the special "primary" annotation (rendered as a distinct node coloring)  */
+export const isPrimary = (node) => node.attrs.findLast((attr) => attr.key === "primary")?.val === "true";
+/*  the default node box coloring (primary node boxes get a distinct one)  */
+export const defaultStyleOf = (config) => (node) => isPrimary(node) ? {
+    fill: config["color-node-primary-box"],
+    stroke: config["color-node-primary-border"],
+    text: config["color-node-primary-name"]
+} : {
+    fill: config["color-node-regular-box"],
+    stroke: config["color-node-regular-border"],
+    text: config["color-node-regular-name"]
+};
+/*  the special "type" annotation (rendered above the node name)  */
+export const typeOf = (node) => node.attrs.findLast((attr) => attr.key === "type")?.val;
+/*  split the attributes rendered as text lines from the special
+    "url", "type", "primary", and "group" attributes consumed by the renderers  */
+export const attrsOfNode = (node) => node.attrs.filter((attr) => attr.key !== "url" && attr.key !== "type"
+    && attr.key !== "primary" && attr.key !== "group");
+/*  the special "url" attribute (rendered as a hyperlink on the whole node
+    box, restricted to relative URLs and safe schemes, as the generated
+    SVG anchor would otherwise execute an injected "javascript:" URL)  */
+const URL_SCHEME = /^\s*([A-Za-z][A-Za-z0-9+.-]*):/;
+const URL_SAFE = ["http", "https", "mailto"];
+export const urlOf = (node) => {
+    const raw = node.attrs.findLast((attr) => attr.key === "url")?.val;
+    if (raw === undefined)
+        return undefined;
+    /*  strip control characters, as browsers remove them before
+        resolving the URL and they would otherwise hide an unsafe scheme  */
+    const url = raw.replace(/[\u0000-\u001F\u007F]/g, "");
+    const scheme = URL_SCHEME.exec(url);
+    if (scheme !== null && !URL_SAFE.includes(scheme[1].toLowerCase()))
+        return undefined;
+    return url;
+};
+/*  node box text metrics (shared by the measuring and the text placement)  */
+export const MIN_H = 64; /*  minimum node box height                   */
+export const ATTR_H = 30; /*  height of a single attribute line         */
+export const ATTR_P = 8; /*  top padding of the attribute block        */
+export const TYPE_H = 26; /*  extra height of the type line             */
+export const TYPE_D = 36; /*  baseline distance of the type to the name */
+/*  determine node box sizes from their textual content
+    (boxes are scaled up in height by a per-node factor to
+    give the edges more attachment room)  */
+export const measureNodes = (nodes, scaleOf) => {
+    const MIN_W = 220; /*  minimum node box width            */
+    const PAD_W = 18; /*  left/right node box text padding  */
+    /*  the resulting node box dimensions  */
+    const boxW = new Map();
+    const boxH = new Map();
+    const contentH = new Map();
+    /*  measure the text content of every node  */
+    for (const node of nodes) {
+        const attrs = attrsOfNode(node);
+        const type = typeOf(node);
+        let w = textWidth(node.name, FS_NAME);
+        if (type !== undefined)
+            w = Math.max(w, textWidth(type, FS_TYPE));
+        for (const attr of attrs)
+            w = Math.max(w, textWidth(`${attr.key}: ${attr.val}`, FS_ATTR));
+        const h = MIN_H + (type !== undefined ? TYPE_H : 0) +
+            (attrs.length > 0 ? attrs.length * ATTR_H + ATTR_P : 0);
+        boxW.set(node.id, Math.max(MIN_W, Math.ceil(w) + PAD_W * 2));
+        boxH.set(node.id, Math.ceil(h * scaleOf(node)));
+        contentH.set(node.id, h);
+    }
+    return { boxW, boxH, contentH };
+};

package/dst/gradia-api-render-svg.d.ts

@@ -0,0 +1,23 @@
+import { Node, Edge } from "./gradia-api-model.js";
+import { Config } from "./gradia-api-config.js";
+import { Poly, NodeStyle } from "./gradia-api-render-base.js";
+export interface GroupBox {
+    name: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+export interface Layout {
+    nodes: Node[];
+    edges: Edge[];
+    cx: (id: string) => number;
+    cy: (id: string) => number;
+    boxW: Map<string, number>;
+    boxH: Map<string, number>;
+    contentH: Map<string, number>;
+    polys: Poly[];
+    styleOf?: (node: Node) => NodeStyle;
+    groups?: GroupBox[];
+}
+export declare const renderSVG: (layout: Layout, config: Config) => string;

package/dst/gradia-api-render-svg.js

@@ -0,0 +1,199 @@
+/*
+**  Gradia -- Object Graph Diagram Rendering
+**  Copyright (c) 2026 Dr. Ralf S. Engelschall <rse@engelschall.com>
+**  Distributed under MIT license <https://spdx.org/licenses/MIT.html>
+*/
+import { resolveFont } from "./gradia-api-config.js";
+import { FS_NAME, FS_TYPE, FS_ATTR, FS_EDGE, FS_ARITY, FS_GROUP, MARGIN, textWidth, escapeXML } from "./gradia-api-render-base.js";
+import { attrsOfNode, typeOf, urlOf, defaultStyleOf, MIN_H, ATTR_H, ATTR_P, TYPE_H, TYPE_D } from "./gradia-api-render-node.js";
+import { computeHops, pathOf, pointAt } from "./gradia-api-render-edge.js";
+/*  escape a string for use inside a CSS string literal (the XML escaping
+    is resolved by the parser before the CSS is parsed, so quotes and
+    backslashes have to be neutralized to prevent a CSS injection)  */
+const escapeCSS = (text) => text.replace(/[\\"']/g, "\\$&").replace(/[\r\n]/g, " ");
+/*  the placement of a group tag in the top-left corner of its group box  */
+const TAG_DX = 18; /*  left offset of the group tag  */
+const TAG_DY = 12; /*  top offset of the group tag   */
+/*  track occupied areas (node boxes and already placed labels) to
+    let subsequent labels dodge into a collision-free position (the
+    returned "occupied" array grows with every claimed label box and
+    hence also serves as the box input of the overall bounding box)  */
+const labelPlacer = (layout) => {
+    const { nodes, cx, cy, boxW, boxH } = layout;
+    const occupied = nodes.map((node) => [
+        cx(node.id) - boxW.get(node.id) / 2, cy(node.id) - boxH.get(node.id) / 2,
+        cx(node.id) + boxW.get(node.id) / 2, cy(node.id) + boxH.get(node.id) / 2
+    ]);
+    /*  let the labels also dodge the group tags in the group box corners  */
+    for (const group of layout.groups ?? [])
+        occupied.push([group.x + TAG_DX, group.y + TAG_DY,
+            group.x + TAG_DX + textWidth(group.name, FS_GROUP), group.y + TAG_DY + FS_GROUP * 1.2]);
+    const collides = (box) => occupied.some((o) => box[0] < o[2] && box[2] > o[0] && box[1] < o[3] && box[3] > o[1]);
+    const claim = (candidates) => {
+        const box = candidates.find((c) => !collides(c)) ?? candidates[0];
+        occupied.push(box);
+        return box;
+    };
+    return { claim, occupied };
+};
+/*  generate the SVG fragments for a single node box (a node with a
+    "url" attribute becomes a hyperlink covering the whole box)  */
+const renderNode = (node, layout, style, font) => {
+    const { cx, cy, boxW, boxH, contentH } = layout;
+    const w = boxW.get(node.id);
+    const h = boxH.get(node.id);
+    const x = cx(node.id) - w / 2;
+    const y = cy(node.id) - h / 2;
+    const attrs = attrsOfNode(node);
+    const type = typeOf(node);
+    const url = urlOf(node);
+    const parts = [];
+    parts.push(`<rect x="${x}" y="${y}" width="${w}" height="${h}" rx="6" ` +
+        `fill="${escapeXML(style.fill)}" stroke="${escapeXML(style.stroke)}" stroke-width="4.0"` +
+        `${style.dash !== undefined ? ` stroke-dasharray="${escapeXML(style.dash)}"` : ""}/>`);
+    /*  vertically center the textual content block within the box, with
+        the optional type line shifting the name and attributes down  */
+    const ty = cy(node.id) - contentH.get(node.id) / 2;
+    const th = type !== undefined ? TYPE_H : 0;
+    const nameY = attrs.length > 0 ? ty + th + 42 : cy(node.id) + th / 2 + FS_NAME * 0.36;
+    if (type !== undefined)
+        parts.push(`<text x="${cx(node.id)}" y="${nameY - TYPE_D}" text-anchor="middle" ` +
+            `font-family="${font}" font-size="${FS_TYPE}" ` +
+            `fill="${escapeXML(style.text)}">${escapeXML(type)}</text>`);
+    parts.push(`<text x="${cx(node.id)}" y="${nameY}" text-anchor="middle" ` +
+        `font-family="${font}" font-size="${FS_NAME}" font-weight="600" ` +
+        `fill="${escapeXML(style.text)}">${escapeXML(node.name)}</text>`);
+    attrs.forEach((attr, k) => {
+        parts.push(`<text x="${cx(node.id)}" y="${ty + th + MIN_H + ATTR_P + k * ATTR_H}" text-anchor="middle" ` +
+            `font-family="${font}" font-size="${FS_ATTR}" ` +
+            `fill="${escapeXML(style.text)}">${escapeXML(`${attr.key}: ${attr.val}`)}</text>`);
+    });
+    if (url === undefined)
+        return parts;
+    return [`<a href="${escapeXML(url)}" xlink:href="${escapeXML(url)}">`, ...parts, "</a>"];
+};
+/*  determine the overall bounding box of all rendered elements (the
+    node boxes and the placed labels are handed over as already
+    computed areas, the edge polylines are scanned here)  */
+const viewBoxOf = (layout, boxes) => {
+    const { polys } = layout;
+    let [minX, minY, maxX, maxY] = [Infinity, Infinity, -Infinity, -Infinity];
+    for (const [bx1, by1, bx2, by2] of boxes) {
+        minX = Math.min(minX, bx1);
+        minY = Math.min(minY, by1);
+        maxX = Math.max(maxX, bx2);
+        maxY = Math.max(maxY, by2);
+    }
+    for (const poly of polys) {
+        for (const [px, py] of poly) {
+            minX = Math.min(minX, px);
+            minY = Math.min(minY, py);
+            maxX = Math.max(maxX, px);
+            maxY = Math.max(maxY, py);
+        }
+    }
+    if (!Number.isFinite(minX))
+        [minX, minY, maxX, maxY] = [0, 0, 0, 0];
+    return {
+        x: Math.floor(minX - MARGIN / 2),
+        y: Math.floor(minY - MARGIN / 2),
+        w: Math.ceil(maxX - minX + MARGIN),
+        h: Math.ceil(maxY - minY + MARGIN)
+    };
+};
+/*  render a laid out graph into an SVG document  */
+export const renderSVG = (layout, config) => {
+    const { nodes, edges, polys } = layout;
+    const groups = layout.groups ?? [];
+    const styleOf = layout.styleOf ?? defaultStyleOf(config);
+    /*  resolve the configured font into the rendered font family stack  */
+    const { family, embed } = resolveFont(config);
+    const font = escapeXML(`'${escapeCSS(family)}', ui-sans-serif, -apple-system, Helvetica, Arial, sans-serif`);
+    /*  detect the edge crossings requiring rendered hops  */
+    const hops = computeHops(polys);
+    /*  prepare the collision-free placement of the edge labels  */
+    const { claim, occupied } = labelPlacer(layout);
+    /*  generate the SVG fragments for the edges (paths below, labels above)  */
+    const svgEdges = [];
+    const svgLabels = [];
+    /*  the white halo rendered behind the edge labels for readability  */
+    const halo = "stroke=\"#ffffff\" stroke-width=\"4.5\" paint-order=\"stroke\" stroke-linejoin=\"round\"";
+    edges.forEach((edge, i) => {
+        svgEdges.push(`<path d="${pathOf(polys[i], hops[i])}" fill="none" ` +
+            `stroke="${escapeXML(config["color-edge-line"])}" stroke-width="3" marker-end="url(#arrow)"/>`);
+        if (edge.name !== undefined) {
+            const w = textWidth(edge.name, FS_EDGE);
+            const candidates = [];
+            for (const f of [0.50, 0.40, 0.60, 0.30, 0.70, 0.20, 0.80]) {
+                const p = pointAt(polys[i], f);
+                if (p.horizontal) {
+                    candidates.push([p.x - w / 2, p.y - 23, p.x + w / 2, p.y - 3]);
+                    candidates.push([p.x - w / 2, p.y + 3, p.x + w / 2, p.y + 23]);
+                }
+                else {
+                    candidates.push([p.x + 5, p.y - 10, p.x + 5 + w, p.y + 10]);
+                    candidates.push([p.x - 5 - w, p.y - 10, p.x - 5, p.y + 10]);
+                }
+            }
+            const box = claim(candidates);
+            svgLabels.push(`<text x="${(box[0] + box[2]) / 2}" y="${box[3] - 3}" text-anchor="middle" ` +
+                `font-family="${font}" font-size="${FS_EDGE}" ` +
+                `fill="${escapeXML(config["color-edge-name"])}" ${halo}>${escapeXML(edge.name)}</text>`);
+        }
+        if (edge.arity !== undefined) {
+            const w = textWidth(edge.arity, FS_ARITY);
+            const p = pointAt(polys[i], 1.0);
+            const prev = pointAt(polys[i], 0.999);
+            const dx = Math.sign(p.x - prev.x) || 1;
+            const ax = p.x - dx * (24 + w / 2);
+            const box = claim([
+                [ax - w / 2, p.y - 17, ax + w / 2, p.y - 4],
+                [ax - w / 2, p.y + 4, ax + w / 2, p.y + 17],
+                [ax - w / 2 - dx * 14, p.y - 17, ax + w / 2 - dx * 14, p.y - 4]
+            ]);
+            svgLabels.push(`<text x="${(box[0] + box[2]) / 2}" y="${box[3] - 3}" text-anchor="middle" ` +
+                `font-family="${font}" font-size="${FS_ARITY}" ` +
+                `fill="${escapeXML(config["color-edge-arity"])}" ${halo}>${escapeXML(edge.arity)}</text>`);
+        }
+    });
+    /*  generate the SVG fragments for the node boxes  */
+    const svgNodes = nodes.flatMap((node) => renderNode(node, layout, styleOf(node), font));
+    /*  generate the SVG fragments for the group boxes (drawn below
+        everything else) and their tags in the top-left corners  */
+    const svgGroups = groups.flatMap((group) => [
+        `<rect x="${group.x}" y="${group.y}" width="${group.w}" height="${group.h}" rx="12" ` +
+            `fill="${escapeXML(config["color-group-box"])}" ` +
+            `stroke="${escapeXML(config["color-group-border"])}" stroke-width="3.0"/>`,
+        `<text x="${group.x + TAG_DX}" y="${group.y + TAG_DY + FS_GROUP}" ` +
+            `font-family="${font}" font-size="${FS_GROUP}" font-weight="600" ` +
+            `fill="${escapeXML(config["color-group-name"])}">${escapeXML(group.name)}</text>`
+    ]);
+    /*  determine the overall bounding box of all rendered elements  */
+    const groupBoxes = groups.map((group) => [group.x, group.y, group.x + group.w, group.y + group.h]);
+    const vb = viewBoxOf(layout, [...occupied, ...groupBoxes]);
+    /*  assemble the final SVG document  */
+    return [
+        "<?xml version=\"1.0\" encoding=\"UTF-8\"?>",
+        "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" " +
+            `viewBox="${vb.x} ${vb.y} ${vb.w} ${vb.h}" width="${vb.w}" height="${vb.h}">`,
+        "<defs>",
+        ...(embed !== undefined ? [
+            "<style>",
+            `@font-face { font-family: "${escapeXML(escapeCSS(family))}"; ` +
+                `src: url(data:font/woff2;base64,${embed}) format("woff2"); }`,
+            "</style>"
+        ] : []),
+        "<marker id=\"arrow\" viewBox=\"0 0 10 10\" refX=\"9\" refY=\"5\" " +
+            "markerWidth=\"21\" markerHeight=\"21\" markerUnits=\"userSpaceOnUse\" " +
+            "orient=\"auto-start-reverse\">",
+        `<path d="M 0 1 L 9 5 L 0 9 z" fill="${escapeXML(config["color-edge-line"])}"/>`,
+        "</marker>",
+        "</defs>",
+        ...svgGroups,
+        ...svgEdges,
+        ...svgNodes,
+        ...svgLabels,
+        "</svg>",
+        ""
+    ].join("\n");
+};

package/dst/gradia-api-type-graph.d.ts

@@ -0,0 +1,4 @@
+import { Graph } from "./gradia-api-model.js";
+import { Config } from "./gradia-api-config.js";
+import { Layout } from "./gradia-api-render-svg.js";
+export declare const render: (graph: Graph, _config: Config) => Promise<Layout>;