@rse/gradia 1.2.3 → 1.3.0

package/README.md

@@ -269,8 +269,6 @@ following conditions hold:
 - Every edge either points to or originates from that primary node. An
   edge between two non-primary nodes is rejected.
 
-- The primary node carries no self-loop.
-
 - Every non-primary node is an input or an output of the primary node,
   i.e., no node is free-standing.
 
@@ -279,6 +277,11 @@ twice, once in the input column and once in the output column. The second
 placement is rendered as a dashed "ghost" box, colored by the
 `color-node-ghost-*` options.
 
+A self-loop on the primary node is unrolled: the primary node is placed a
+second time on top of the output column, as the target of the self-loop.
+This second placement is rendered as a dashed "self" box, colored by the
+(darker grey) `color-node-self-*` options.
+
 The diagram type `grid` rejects the input with an error as soon as the
 graph contains at least one edge.
 
@@ -304,31 +307,33 @@ command-line options (`font-embed` being command-line only, see below).
 The recognized options, and their default values, are:
 
 ```
-font-family                Helvetica    size-edge-corner-radius    20
-font-embed                 false        size-edge-hop-radius       8
-color-node-regular-name    #336699      size-edge-track-gap        12
-color-node-regular-box     #e0f0ff      size-edge-port-gap         24
-color-node-regular-border  #c0d0e0      group-box-padding          30
-color-node-primary-name    #ffffff      group-box-gap              40
-color-node-primary-box     #336699      container-box-padding      30
-color-node-primary-border  #003366      graph-columns-max          4
-color-node-ghost-name      #666666      graph-channel-width-max    140
-color-node-ghost-box       #f0f0f0      graph-channel-width-min    24
-color-node-ghost-border    #a0a0a0      graph-gutter-height-max    90
-color-group-name           #6699cc      graph-gutter-height-min    20
-color-group-box            #f4f8fc      graph-node-separation      30
-color-group-border         #c0d0e0      graph-rank-separation      60
-color-container-name       #666666      graph-node-degree-max      3
-color-container-box        #f6f6f6      hub-channel-width-max      340
-color-container-border     #a0a0a0      hub-channel-width-min      240
-color-edge-line            #999999      hub-node-gap               20
-color-edge-name            #333333      hub-node-degree-max        3
-color-edge-arity           #333333      grid-columns-max           4
-color-edge-halo            #ffffff      grid-columns-min           3
-size-canvas-margin         40           grid-gap-horizontal        40
-size-node-width-min        220          grid-gap-vertical          20
-size-node-width-max        0            grid-node-width-equal      true
-size-node-height-scale     2.25         grid-node-height-equal     true
+font-family                Helvetica    size-node-height-scale     2.25
+font-embed                 false        size-edge-corner-radius    20
+color-node-regular-name    #336699      size-edge-hop-radius       8
+color-node-regular-box     #e0f0ff      size-edge-track-gap        12
+color-node-regular-border  #c0d0e0      size-edge-port-gap         24
+color-node-primary-name    #ffffff      group-box-padding          30
+color-node-primary-box     #336699      group-box-gap              40
+color-node-primary-border  #003366      container-box-padding      30
+color-node-ghost-name      #666666      graph-columns-max          4
+color-node-ghost-box       #f0f0f0      graph-channel-width-max    140
+color-node-ghost-border    #a0a0a0      graph-channel-width-min    24
+color-node-self-name       #444444      graph-gutter-height-max    90
+color-node-self-box        #e0e0e0      graph-gutter-height-min    20
+color-node-self-border     #707070      graph-node-separation      30
+color-group-name           #6699cc      graph-rank-separation      60
+color-group-box            #f4f8fc      graph-node-degree-max      3
+color-group-border         #c0d0e0      hub-channel-width-max      340
+color-container-name       #666666      hub-channel-width-min      240
+color-container-box        #f6f6f6      hub-node-gap               20
+color-container-border     #a0a0a0      hub-node-degree-max        3
+color-edge-line            #999999      hub-node-count-max         0
+color-edge-name            #333333      grid-columns-max           4
+color-edge-arity           #333333      grid-columns-min           3
+color-edge-halo            #ffffff      grid-gap-horizontal        40
+size-canvas-margin         40           grid-gap-vertical          20
+size-node-width-min        220          grid-node-width-equal      true
+size-node-width-max        0            grid-node-height-equal     true
 ```
 
 The `size-*`, `group-*`, `container-*`, `graph-*`, `hub-*`, and
@@ -371,6 +376,15 @@ unlabeled diagram can be spaced out, while the `-max` options cap it, so
 that neither many parallel edges nor a long label can push the nodes
 apart without bound.
 
+The `hub-node-count-max` option controls the wrapping of the input and
+output column of a `hub` diagram: given a positive value, a column of
+more nodes than this wraps into two staggered sub-columns, whose nodes
+alternate between the outer sub-column and the inner one, with every
+outer node vertically centered onto a gap between two inner nodes,
+through which its edges reach the primary node. This trades nearly
+half of the height of a large diagram for additional width. The value
+`0` disables the wrapping entirely.
+
 The `grid-columns-min` and `grid-columns-max` options control the column
 count of a `grid` diagram, which by default is derived from the node
 count as a roughly square grid: `grid-columns-min` raises the derived
@@ -399,6 +413,15 @@ hard-coded into the SVG instead. The resulting precedence is: first
 `#config`/`--config`, then the CSS custom property `--gradia-<option>`,
 and finally the built-in default.
 
+The styling is not repeated on every element of the generated SVG, but
+declared once as CSS classes in a `<style>` element, which the elements
+reference. A class is named `gradia-<digest>` after the digest of its
+own declarations, so equal declarations always yield the very same
+class. As the class names are global once multiple diagrams are embedded
+into the very same document, the embedding document can hence strip the
+`<style>` elements off the diagrams and declare the union of their
+rules (one per line) a single time on its own.
+
 The `font-family` option is either a built-in font family, a plain font
 family name, or the path to a WOFF2 file. The only built-in font family
 is `Source Sans 3`, shipped as a variable WOFF2 file by the NPM

package/dst/gradia-api-config.d.ts

@@ -10,6 +10,9 @@ export declare const configDefaults: {
     "color-node-ghost-name": string;
     "color-node-ghost-box": string;
     "color-node-ghost-border": string;
+    "color-node-self-name": string;
+    "color-node-self-box": string;
+    "color-node-self-border": string;
     "color-group-name": string;
     "color-group-box": string;
     "color-group-border": string;
@@ -43,6 +46,7 @@ export declare const configDefaults: {
     "hub-channel-width-min": number;
     "hub-node-gap": number;
     "hub-node-degree-max": number;
+    "hub-node-count-max": number;
     "grid-columns-max": number;
     "grid-columns-min": number;
     "grid-gap-horizontal": number;

package/dst/gradia-api-config.js

@@ -20,6 +20,9 @@ export const configDefaults = {
     "color-node-ghost-name": "#666666",
     "color-node-ghost-box": "#f0f0f0",
     "color-node-ghost-border": "#a0a0a0",
+    "color-node-self-name": "#444444",
+    "color-node-self-box": "#e0e0e0",
+    "color-node-self-border": "#707070",
     "color-group-name": "#6699cc",
     "color-group-box": "#f4f8fc",
     "color-group-border": "#c0d0e0",
@@ -53,6 +56,7 @@ export const configDefaults = {
     "hub-channel-width-min": 240, /*  hub: min width of column channels      */
     "hub-node-gap": 20, /*  hub: vertical gap of stacked nodes     */
     "hub-node-degree-max": 3, /*  hub: max edges/side before growth      */
+    "hub-node-count-max": 0, /*  hub: max nodes/column before wrapping  */
     "grid-columns-max": 4, /*  grid: max side-by-side tiles           */
     "grid-columns-min": 3, /*  grid: min side-by-side tiles           */
     "grid-gap-horizontal": 40, /*  grid: horizontal gap between tiles     */
@@ -160,7 +164,7 @@ export const resolveFont = (config) => {
             return { family };
     }
     else if (config["font-embed"])
-        throw new Error("option \"font-embed\" requires option \"font-family\" to be a built-in font " +
+        throw new Error("configuration option \"font-embed\" requires configuration option \"font-family\" to be a built-in font " +
             `family (${Object.keys(fontsBuiltIn).map((name) => `"${name}"`).join(", ")}) ` +
             "or the path to a WOFF2 file");
     else

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

@@ -38,9 +38,9 @@ export const textWrap = (text, size, maxWidth) => {
     lines.push(line);
     return lines;
 };
-/*  escape a string for use in XML/SVG content (control characters are
-    stripped, as XML forbids them even in their escaped form)  */
-export const escapeXML = (text) => text.replace(/[\u0000-\u0008\u000B\u000C\u000E-\u001F\u007F]/g, "")
+/*  escape a string for use in XML/SVG content (control and non-characters
+    are stripped, as XML forbids them even in their escaped form)  */
+export const escapeXML = (text) => text.replace(/[\u0000-\u0008\u000B\u000C\u000E-\u001F\u007F\uFFFE\uFFFF\p{Cs}]/gu, "")
     .replace(/&/g, "&")
     .replace(/</g, "&lt;")
     .replace(/>/g, "&gt;")

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

@@ -12,6 +12,7 @@ import { simplifyPoly } from "./gradia-api-render-edge.js";
     container with one of its own members, and every "container"
     annotation has to name a valid diagram type  */
 export const containmentOf = (graph, types) => {
+    /*  collect the parent/children relations of the nodes  */
     const parentOfId = new Map();
     const childrenOf = new Map();
     for (const node of graph.nodes.values()) {
@@ -30,6 +31,7 @@ export const containmentOf = (graph, types) => {
         else
             children.push(node);
     }
+    /*  reject the containment cycles  */
     for (const id of parentOfId.keys()) {
         const seen = new Set([id]);
         for (let p = parentOfId.get(id); p !== undefined; p = parentOfId.get(p)) {
@@ -38,6 +40,7 @@ export const containmentOf = (graph, types) => {
             seen.add(p);
         }
     }
+    /*  reject the edges connecting a container with one of its own members  */
     const isAncestor = (a, id) => {
         for (let p = parentOfId.get(id); p !== undefined; p = parentOfId.get(p))
             if (p === a)
@@ -253,7 +256,7 @@ export const renderContained = async (graph, containment, type, types, config) =
             const tt = topOf(edge.target);
             if (ts === undefined && tt === undefined)
                 return;
-            if (ts !== undefined && tt !== undefined && ts === tt && inner.has(ts) && edge.source !== ts)
+            if (ts !== undefined && ts === tt && inner.has(ts) && edge.source !== ts)
                 return;
             let source;
             let target;

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

@@ -18,7 +18,8 @@ export const simplifyPoly = (pts) => {
     /*  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])
+        const q = out.at(-1);
+        if (q !== undefined && q[0] === p[0] && q[1] === p[1])
             continue;
         out.push(p);
     }
@@ -70,10 +71,11 @@ export const assignPorts = (edges, sides, cx, cy, boxW, boxH, portGap, approachY
         const px = cx(id) + (side === "e" ? +1 : -1) * boxW.get(id) / 2;
         /*  place the fixed ports at their given offsets  */
         const fixedOf = (p) => fixedY?.(p.edge, p.role);
+        const place = (p, py) => portPos.set(`${p.edge}:${p.role}`, { x: px, y: py });
         const taken = [];
         for (const p of group.filter((p) => fixedOf(p) !== undefined)) {
             const py = cy(id) + fixedOf(p);
-            portPos.set(`${p.edge}:${p.role}`, { x: px, y: py });
+            place(p, py);
             taken.push(py);
         }
         taken.sort((a, b) => a - b);
@@ -86,7 +88,6 @@ export const assignPorts = (edges, sides, cx, cy, boxW, boxH, portGap, approachY
         free.sort((a, b) => (keyOf(a) - keyOf(b)) || (a.edge - b.edge));
         const n = free.length + taken.length;
         const spacing = Math.min(portGap, (boxH.get(id) - PORT_PAD) / n);
-        const place = (p, py) => portPos.set(`${p.edge}:${p.role}`, { x: px, y: py });
         if (taken.length === 0) {
             free.forEach((p, idx) => place(p, cy(id) + (idx - (n - 1) / 2) * spacing));
             continue;
@@ -348,15 +349,15 @@ export const pathOf = (poly, hop, rounding, hopRadius) => {
                 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]) <= hopRadius * 2 + 14)
+                const g = groups.at(-1);
+                if (g !== undefined && Math.abs(hx - g.at(-1)) <= hopRadius * 2 + 14)
                     g.push(hx);
                 else
                     groups.push([hx]);
             }
             for (const g of groups) {
                 let x1 = g[0] - dir * hopRadius;
-                let x2 = g[g.length - 1] + dir * hopRadius;
+                let x2 = g.at(-1) + dir * hopRadius;
                 /*  clamp the arc into the drawable segment part, so
                     crossings close to a corner still get their hop  */
                 if ((x1 - p0[0]) * dir < 0)

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

@@ -17,9 +17,11 @@ export const groupOf = (node) => node.attrs.findLast((attr) => attr.key === "gro
     deviating group of its own. Edges have to stay within a single
     group, so reject any group-crossing edge  */
 export const partitionGroups = (graph, containment) => {
+    /*  short-circuit when no node uses a group at all  */
     const nodes = Array.from(graph.nodes.values());
     if (!nodes.some((node) => groupOf(node) !== undefined))
         return null;
+    /*  assign every node to the group of its outermost container  */
     const parts = new Map();
     const nameOf = new Map();
     for (const node of nodes) {
@@ -37,6 +39,7 @@ export const partitionGroups = (graph, containment) => {
         }
         part.nodes.set(node.id, node);
     }
+    /*  assign every edge to the common group of its endpoints  */
     for (const edge of graph.edges) {
         const sg = nameOf.get(edge.source);
         const tg = nameOf.get(edge.target);
@@ -45,6 +48,7 @@ export const partitionGroups = (graph, containment) => {
                 `crosses groups "${sg}" and "${tg}"`);
         parts.get(sg).edges.push(edge);
     }
+    /*  provide the partitions in order of first appearance  */
     return Array.from(parts.entries()).map(([name, subgraph]) => ({ name, graph: subgraph }));
 };
 /*  compose the per-group layouts into a single layout: the groups are

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

@@ -79,12 +79,11 @@ export const linesOfNode = (node, config) => {
         attrs: attrsOfNode(node).flatMap((attr) => textWrap(`${attr.key}: ${attr.val}`, FS_ATTR, max))
     };
 };
-/*  determine node box sizes from their textual content
-    (boxes are scaled up in height by a per-node factor, but never
-    below the content height, to give the edges more attachment
-    room), except for the nodes
-    of a fixed size (the container placeholders and gate nodes
-    of a containment level), which are taken as given  */
+/*  determine node box sizes from their textual content (boxes are
+    scaled up in height by a per-node factor, but never below the
+    content height, to give the edges more attachment room), except
+    for the nodes of a fixed size (the container placeholders and gate
+    nodes of a containment level), which are taken as given  */
 export const measureNodes = (nodes, config, scaleOf, fixed) => {
     /*  the resulting node box dimensions  */
     const boxW = new Map();

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

@@ -20,11 +20,13 @@ const escapeCSS = (text) => text.replace(/[\\"']/g, "\\$&").replace(/[\r\n\f]/g,
 const NS_GRADIA = new UUID(5, "ns:URL", "https://github.com/rse/gradia").format();
 /*  derive a per-document identifier prefix from a seed, as the SVG
     identifiers are DOM-global and would collide once multiple diagrams
-    are embedded into the very same document. The prefix is a UUID v5 of
-    the seed and hence stays stable across regenerations of an unchanged
-    diagram (the Base16 format keeps it alphanumeric and thus a valid XML
-    name and CSS/URL fragment)  */
-const idPrefix = (seed) => `gradia-${new UUID(5, NS_GRADIA, seed).format("b16").toLowerCase()}`;
+    are embedded into the very same document. The prefix is derived from
+    the UUID v5 of the seed and hence stays stable across regenerations
+    of an unchanged diagram (the Base16 format keeps it alphanumeric and
+    thus a valid XML name and CSS/URL fragment, and its leading 12 digits
+    keep the identifiers short, as every edge references one, while
+    still making a collision among the diagrams of a document unlikely)  */
+const idPrefix = (seed) => `gradia-${new UUID(5, NS_GRADIA, seed).format("b16").toLowerCase().slice(0, 12)}`;
 /*  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   */
@@ -66,12 +68,12 @@ const labelPlacer = (layout, hops, hopRadius) => {
     const collisions = (boxes, box) => boxes.filter((o) => box[0] < o[2] && box[2] > o[0] && box[1] < o[3] && box[3] > o[1]).length;
     const claim = (candidates) => {
         let box = candidates[0];
-        let worst = Infinity;
+        let lowest = Infinity;
         for (const c of candidates) {
             const score = collisions(occupied, c) * (lines.length + 1) + collisions(lines, c);
-            if (score < worst) {
+            if (score < lowest) {
                 box = c;
-                worst = score;
+                lowest = score;
             }
             if (score === 0)
                 break;
@@ -83,7 +85,7 @@ const labelPlacer = (layout, hops, hopRadius) => {
 };
 /*  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, color, config) => {
+const renderNode = (node, layout, style, styler, config) => {
     const { cx, cy, boxW, boxH, contentH } = layout;
     const w = boxW.get(node.id);
     const h = boxH.get(node.id);
@@ -93,7 +95,7 @@ const renderNode = (node, layout, style, font, color, config) => {
     const url = urlOf(node);
     const parts = [];
     parts.push(`<rect x="${x}" y="${y}" width="${w}" height="${h}" rx="6" ` +
-        `style="fill: ${color(style.fill)}; stroke: ${color(style.stroke)}" stroke-width="4.0"` +
+        `class="${styler.box(style.fill, style.stroke, 4)}"` +
         `${style.dash !== undefined ? ` stroke-dasharray="${escapeXML(style.dash)}"` : ""}/>`);
     /*  vertically center the textual content block within the box, with
         the optional type lines shifting the name and attributes down and
@@ -105,20 +107,18 @@ const renderNode = (node, layout, style, font, color, config) => {
         ty + th + MIN_H / 2 + FS_NAME * 0.36 : cy(node.id) + th / 2 + FS_NAME * 0.36 - nh / 2;
     lines.type.forEach((line, k) => {
         parts.push(`<text x="${cx(node.id)}" ` +
-            `y="${nameY - TYPE_D - (lines.type.length - 1 - k) * TYPE_H}" text-anchor="middle" ` +
-            `font-size="${FS_TYPE}" ` +
-            `style="font-family: ${font}; fill: ${color(style.text)}">${escapeXML(line)}</text>`);
+            `y="${nameY - TYPE_D - (lines.type.length - 1 - k) * TYPE_H}" ` +
+            `class="${styler.text(style.text, FS_TYPE, { middle: true })}">${escapeXML(line)}</text>`);
     });
     lines.name.forEach((line, k) => {
-        parts.push(`<text x="${cx(node.id)}" y="${nameY + k * NAME_H}" text-anchor="middle" ` +
-            `font-size="${FS_NAME}" font-weight="600" ` +
-            `style="font-family: ${font}; fill: ${color(style.text)}">${escapeXML(line)}</text>`);
+        parts.push(`<text x="${cx(node.id)}" y="${nameY + k * NAME_H}" ` +
+            `class="${styler.text(style.text, FS_NAME, { bold: true, middle: true })}">` +
+            `${escapeXML(line)}</text>`);
     });
     lines.attrs.forEach((line, k) => {
         parts.push(`<text x="${cx(node.id)}" ` +
-            `y="${ty + th + nh + MIN_H + ATTR_P + k * ATTR_H}" text-anchor="middle" ` +
-            `font-size="${FS_ATTR}" ` +
-            `style="font-family: ${font}; fill: ${color(style.text)}">${escapeXML(line)}</text>`);
+            `y="${ty + th + nh + MIN_H + ATTR_P + k * ATTR_H}" ` +
+            `class="${styler.text(style.text, FS_ATTR, { middle: true })}">${escapeXML(line)}</text>`);
     });
     if (url === undefined)
         return parts;
@@ -157,11 +157,7 @@ const viewBoxOf = (layout, boxes, margin) => {
     optional name, placed near the middle of the route, and its optional
     arity, placed near the arrow head (both dodging into a collision-free
     position through the "claim" of the label placer)  */
-const renderEdgeLabels = (edge, poly, claim, font, color) => {
-    /*  the halo rendered behind the edge labels for readability
-        (its color is emitted into the style attribute below, as only
-        there the CSS custom property lookup can be resolved)  */
-    const halo = "stroke-width=\"4.5\" paint-order=\"stroke\" stroke-linejoin=\"round\"";
+const renderEdgeLabels = (edge, poly, claim, styler) => {
     const parts = [];
     if (edge.name !== undefined) {
         const w = textWidth(edge.name, FS_EDGE);
@@ -178,11 +174,9 @@ const renderEdgeLabels = (edge, poly, claim, font, color) => {
             }
         }
         const box = claim(candidates);
-        parts.push(`<text x="${(box[0] + box[2]) / 2}" y="${box[3] - 3}" text-anchor="middle" ` +
-            `font-size="${FS_EDGE}" ` +
-            `style="font-family: ${font}; fill: ${color("color-edge-name")}; ` +
-            `stroke: ${color("color-edge-halo")}" ` +
-            `${halo}>${escapeXML(edge.name)}</text>`);
+        parts.push(`<text x="${(box[0] + box[2]) / 2}" y="${box[3] - 3}" ` +
+            `class="${styler.text("color-edge-name", FS_EDGE, { middle: true, halo: true })}">` +
+            `${escapeXML(edge.name)}</text>`);
     }
     if (edge.arity !== undefined) {
         const w = textWidth(edge.arity, FS_ARITY);
@@ -211,43 +205,38 @@ const renderEdgeLabels = (edge, poly, claim, font, color) => {
             ];
         }
         const box = claim(candidates);
-        parts.push(`<text x="${(box[0] + box[2]) / 2}" y="${box[3] - 3}" text-anchor="middle" ` +
-            `font-size="${FS_ARITY}" ` +
-            `style="font-family: ${font}; fill: ${color("color-edge-arity")}; ` +
-            `stroke: ${color("color-edge-halo")}" ` +
-            `${halo}>${escapeXML(edge.arity)}</text>`);
+        parts.push(`<text x="${(box[0] + box[2]) / 2}" y="${box[3] - 3}" ` +
+            `class="${styler.text("color-edge-arity", FS_ARITY, { middle: true, halo: true })}">` +
+            `${escapeXML(edge.arity)}</text>`);
     }
     return parts;
 };
 /*  generate the SVG fragments for a single group box and its tag
     in the top-left corner  */
-const renderGroup = (group, font, color) => [
+const renderGroup = (group, styler) => [
     `<rect x="${group.x}" y="${group.y}" width="${group.w}" height="${group.h}" rx="12" ` +
-        `style="fill: ${color("color-group-box")}; ` +
-        `stroke: ${color("color-group-border")}" stroke-width="3.0"/>`,
+        `class="${styler.box("color-group-box", "color-group-border", 3)}"/>`,
     `<text x="${group.x + TAG_DX}" y="${group.y + TAG_DY + FS_GROUP}" ` +
-        `font-size="${FS_GROUP}" font-weight="600" ` +
-        `style="font-family: ${font}; fill: ${color("color-group-name")}">${escapeXML(group.name)}</text>`
+        `class="${styler.text("color-group-name", FS_GROUP, { bold: true })}">${escapeXML(group.name)}</text>`
 ];
 /*  generate the SVG fragments for a single container box and its tag
     in the top-left corner, with the optional type line above the name
     (a container with a "url" attribute becomes a hyperlink covering
     the whole box)  */
-const renderContainer = (c, font, color) => {
+const renderContainer = (c, styler) => {
     const type = typeOf(c.node);
     const url = urlOf(c.node);
     const parts = [
         `<rect x="${c.x}" y="${c.y}" width="${c.w}" height="${c.h}" rx="12" ` +
-            `style="fill: ${color("color-container-box")}; ` +
-            `stroke: ${color("color-container-border")}" stroke-width="3.0" stroke-dasharray="10 6"/>`,
+            `class="${styler.box("color-container-box", "color-container-border", 3)}" ` +
+            "stroke-dasharray=\"10 6\"/>",
         ...(type !== undefined ? [
             `<text x="${c.x + TAG_DX}" y="${c.y + TAG_DY + FS_TYPE}" ` +
-                `font-size="${FS_TYPE}" ` +
-                `style="font-family: ${font}; fill: ${color("color-container-name")}">${escapeXML(type)}</text>`
+                `class="${styler.text("color-container-name", FS_TYPE)}">${escapeXML(type)}</text>`
         ] : []),
         `<text x="${c.x + TAG_DX}" y="${c.y + containerHead(c.node) - HEAD_H + TAG_DY + FS_GROUP}" ` +
-            `font-size="${FS_GROUP}" font-weight="600" ` +
-            `style="font-family: ${font}; fill: ${color("color-container-name")}">${escapeXML(c.node.name)}</text>`
+            `class="${styler.text("color-container-name", FS_GROUP, { bold: true })}">` +
+            `${escapeXML(c.node.name)}</text>`
     ];
     if (url === undefined)
         return parts;
@@ -264,7 +253,7 @@ export const renderSVG = (layout, config, explicit, seed) => {
         values: explicitly configured values are hard-coded, while all
         others are fetched at display time from the "--gradia-<option>"
         CSS custom properties, falling back to the built-in defaults  */
-    const color = (key) => escapeXML(cssValueOf(explicit, key));
+    const color = (key) => cssValueOf(explicit, key);
     /*  derive the collision-free identifiers of this SVG document  */
     const prefix = idPrefix(seed);
     const idArrow = `${prefix}-arrow`;
@@ -273,7 +262,29 @@ export const renderSVG = (layout, config, explicit, seed) => {
     const stack = Object.hasOwn(explicit, "font-family") ?
         `'${escapeCSS(family)}'` :
         `var(--gradia-font-family, '${escapeCSS(family)}')`;
-    const font = escapeXML(`${stack}, ui-sans-serif, -apple-system, Helvetica, Arial, sans-serif`);
+    const font = `${stack}, ui-sans-serif, -apple-system, Helvetica, Arial, sans-serif`;
+    /*  collect the CSS classes the rendered elements reference (the
+        halo behind an edge label keeps it readable on top of a line)  */
+    const rules = new Map();
+    const classOf = (decls) => {
+        let name = rules.get(decls);
+        if (name === undefined) {
+            name = `gradia-${new UUID(5, NS_GRADIA, decls).format("b16").toLowerCase().slice(0, 8)}`;
+            rules.set(decls, name);
+        }
+        return name;
+    };
+    const styler = {
+        text: (fill, size, options = {}) => classOf(`font-family: ${font}; font-size: ${size}px; ` +
+            (options.bold ? "font-weight: 600; " : "") +
+            (options.middle ? "text-anchor: middle; " : "") +
+            `fill: ${color(fill)}` +
+            (options.halo ? `; stroke: ${color("color-edge-halo")}; stroke-width: 4.5; ` +
+                "paint-order: stroke; stroke-linejoin: round" : "")),
+        box: (fill, stroke, width) => classOf(`fill: ${color(fill)}; stroke: ${color(stroke)}; stroke-width: ${width}`)
+    };
+    const classEdge = classOf(`fill: none; stroke: ${color("color-edge-line")}; stroke-width: 3`);
+    const classArrow = classOf(`fill: ${color("color-edge-line")}`);
     /*  detect the edge crossings requiring rendered hops  */
     const hops = computeHops(polys);
     /*  prepare the collision-free placement of the edge labels  */
@@ -282,38 +293,39 @@ export const renderSVG = (layout, config, explicit, seed) => {
     const svgEdges = [];
     const svgLabels = [];
     edges.forEach((edge, i) => {
-        svgEdges.push(`<path d="${pathOf(polys[i], hops[i], config["size-edge-corner-radius"], config["size-edge-hop-radius"])}" fill="none" ` +
-            `style="stroke: ${color("color-edge-line")}" stroke-width="3.0" marker-end="url(#${idArrow})"/>`);
-        svgLabels.push(...renderEdgeLabels(edge, polys[i], claim, font, color));
+        svgEdges.push(`<path d="${pathOf(polys[i], hops[i], config["size-edge-corner-radius"], config["size-edge-hop-radius"])}" ` +
+            `class="${classEdge}" marker-end="url(#${idArrow})"/>`);
+        svgLabels.push(...renderEdgeLabels(edge, polys[i], claim, styler));
     });
     /*  generate the SVG fragments for the node boxes  */
-    const svgNodes = nodes.flatMap((node) => renderNode(node, layout, styleOf(node), font, color, config));
+    const svgNodes = nodes.flatMap((node) => renderNode(node, layout, styleOf(node), styler, config));
     /*  generate the SVG fragments for the group boxes (drawn below
         everything else) and the container boxes (drawn below the edges
         and nodes, an outer box before its nested ones)  */
-    const svgGroups = groups.flatMap((group) => renderGroup(group, font, color));
-    const svgContainers = containers.flatMap((c) => renderContainer(c, font, color));
+    const svgGroups = groups.flatMap((group) => renderGroup(group, styler));
+    const svgContainers = containers.flatMap((c) => renderContainer(c, styler));
     /*  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 containerBoxes = containers.map((c) => [c.x, c.y, c.x + c.w, c.y + c.h]);
     const vb = viewBoxOf(layout, [...occupied, ...groupBoxes, ...containerBoxes], config["size-canvas-margin"]);
-    /*  assemble the final SVG document  */
+    /*  assemble the final SVG document (with one CSS rule per line)  */
     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>",
+        "<style>",
         ...(embed !== undefined ? [
-            "<style>",
             `@font-face { font-family: "${escapeXML(escapeCSS(family))}"; ` +
                 (weight !== undefined ? `font-weight: ${escapeXML(escapeCSS(weight))}; ` : "") +
-                `src: url(data:font/woff2;base64,${embed}) format("woff2"); }`,
-            "</style>"
+                `src: url(data:font/woff2;base64,${embed}) format("woff2"); }`
         ] : []),
+        ...Array.from(rules, ([decls, name]) => `.${name} { ${escapeXML(decls)} }`),
+        "</style>",
         `<marker id="${idArrow}" 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" style="fill: ${color("color-edge-line")}"/>`,
+        `<path d="M 0 1 L 9 5 L 0 9 z" class="${classArrow}"/>`,
         "</marker>",
         "</defs>",
         ...svgGroups,