@adecore/diagram 0.39.0 → 0.40.1

package/src/order.ts

@@ -15,23 +15,29 @@ export function orderLayers(layering: Layering): void {
     const position = new Array<number>(units.length).fill(0);
     const bandPosition = bands.map((band) => new Array<number>(band.last - band.first + 1).fill(0));
     const hopsByLayer: number[][] = items.map(() => []);
+
     hops.forEach((hop, index) => {
         hopsByLayer[units[hop.from]!.layer]!.push(index);
     });
 
     const flatten = (layer: number): void => {
         let at = 0;
+
         for (const code of items[layer]!) {
             if (code >= 0) {
                 position[code] = at++;
+
                 continue;
             }
+
             const band = bands[bandOfCode(code)]!;
             const members = band.members[layer - band.first]!;
             bandPosition[bandOfCode(code)]![layer - band.first] = at;
+
             if (members.length === 0) {
                 at++;
             }
+
             for (const member of members) {
                 position[member] = at++;
             }
@@ -42,13 +48,16 @@ export function orderLayers(layering: Layering): void {
         const row = items[layer]!;
         const slots: number[] = [];
         const present: number[] = [];
+
         row.forEach((code, index) => {
             if (code < 0) {
                 slots.push(index);
                 present.push(bandOfCode(code));
             }
         });
+
         present.sort((left, right) => bands[left]!.rank - bands[right]!.rank);
+
         slots.forEach((slot, index) => {
             row[slot] = bandCode(present[index]!);
         });
@@ -57,27 +66,35 @@ export function orderLayers(layering: Layering): void {
     const sortLayer = (layer: number, towardsUp: boolean): void => {
         const keyOf = (unit: number): number => {
             const neighbors = towardsUp ? units[unit]!.up : units[unit]!.down;
+
             if (neighbors.length === 0) {
                 return position[unit]!;
             }
+
             let sum = 0;
+
             for (const neighbor of neighbors) {
                 sum += position[neighbor]!;
             }
+
             return sum / neighbors.length;
         };
+
         const keyed = items[layer]!.map((code, index) => {
             if (code >= 0) {
                 return { code, index, key: keyOf(code) };
             }
+
             const band = bands[bandOfCode(code)]!;
             const slot = layer - band.first;
             const members = band.members[slot]!.map((unit) => ({ unit, key: keyOf(unit), at: position[unit]! }));
             members.sort((left, right) => left.key - right.key || left.at - right.at);
             band.members[slot] = members.map((member) => member.unit);
             const key = members.length > 0 ? members.reduce((sum, member) => sum + member.key, 0) / members.length : bandPosition[bandOfCode(code)]![slot]!;
+
             return { code, index, key };
         });
+
         keyed.sort((left, right) => left.key - right.key || left.index - right.index);
         items[layer] = keyed.map((entry) => entry.code);
         enforceBandOrder(layer);
@@ -87,13 +104,17 @@ export function orderLayers(layering: Layering): void {
     const updateRanks = (): void => {
         const scores = bands.map((band, index) => {
             let sum = 0;
+
             for (let layer = band.first; layer <= band.last; layer++) {
                 const row = items[layer]!;
                 sum += row.indexOf(bandCode(index)) / row.length;
             }
+
             return sum / (band.last - band.first + 1);
         });
+
         const order = bands.map((_, index) => index).sort((left, right) => scores[left]! - scores[right]! || bands[left]!.rank - bands[right]!.rank);
+
         order.forEach((band, rank) => {
             bands[band]!.rank = rank;
         });
@@ -105,47 +126,59 @@ export function orderLayers(layering: Layering): void {
             if (!items[layer]!.some((code) => code < 0)) {
                 continue;
             }
+
             const previousIndex = new Map<number, number>();
             (items[layer - 1] ?? []).forEach((code, index) => previousIndex.set(code, index));
             const free = items[layer]!.filter((code) => code >= 0);
+
             for (const unit of free) {
                 const row = items[layer]!;
                 const present = row.filter((code) => code < 0).map(bandOfCode);
                 let lower = 0;
                 let upper = present.length;
+
                 const narrow = (source: number, sourceLayer: number): void => {
                     let low = 0;
                     let high = present.length;
+
                     present.forEach((band, slot) => {
                         const target = bands[band]!;
                         const sourceBand = units[source]!.band;
+
                         if (sourceLayer < target.first || sourceLayer > target.last || sourceBand === band) {
                             return;
                         }
+
                         const before =
                             sourceBand >= 0 ? bands[sourceBand]!.rank < target.rank : previousIndex.get(source)! < previousIndex.get(bandCode(band))!;
+
                         if (before) {
                             high = Math.min(high, slot);
                         } else {
                             low = Math.max(low, slot + 1);
                         }
                     });
+
                     if (Math.max(lower, low) <= Math.min(upper, high)) {
                         lower = Math.max(lower, low);
                         upper = Math.min(upper, high);
                     }
                 };
+
                 for (const source of units[unit]!.up) {
                     narrow(source, layer - 1);
                 }
+
                 // A member of a group in the next layer cannot move, so the free unit follows it instead.
                 for (const target of units[unit]!.down) {
                     if (units[target]!.band >= 0) {
                         narrow(target, layer + 1);
                     }
                 }
+
                 const at = row.indexOf(unit);
                 const slot = row.slice(0, at).filter((code) => code < 0).length;
+
                 if (slot < lower) {
                     row.splice(at, 1);
                     row.splice(row.indexOf(bandCode(present[lower - 1]!)) + 1, 0, unit);
@@ -159,26 +192,34 @@ export function orderLayers(layering: Layering): void {
 
     const crossings = (): number => {
         let total = 0;
+
         for (let layer = 0; layer + 1 < items.length; layer++) {
             const pairs = hopsByLayer[layer]!.map((index) => [position[hops[index]!.from]!, position[hops[index]!.to]!] as const);
+
             if (pairs.length < 2) {
                 continue;
             }
+
             pairs.sort((left, right) => left[0] - right[0] || left[1] - right[1]);
             // A Fenwick tree over the positions of the next layer counts the pairs that come in out of order.
             const size = pairs.reduce((largest, pair) => Math.max(largest, pair[1]), 0) + 2;
             const tree = new Array<number>(size + 1).fill(0);
+
             pairs.forEach(([, to], seen) => {
                 let atMost = 0;
+
                 for (let i = to + 1; i > 0; i -= i & -i) {
                     atMost += tree[i]!;
                 }
+
                 total += seen - atMost;
+
                 for (let i = to + 1; i <= size; i += i & -i) {
                     tree[i]! += 1;
                 }
             });
         }
+
         return total;
     };
 
@@ -186,6 +227,7 @@ export function orderLayers(layering: Layering): void {
         items.forEach((_, layer) => enforceBandOrder(layer));
         keepSides();
         items.forEach((_, layer) => flatten(layer));
+
         return crossings();
     };
 
@@ -196,10 +238,10 @@ export function orderLayers(layering: Layering): void {
     });
 
     items.forEach((_, layer) => flatten(layer));
+
     // A band's first layer always holds a member, which is what made it the first.
-    const firstSeen = bands.map((band, index) => [band.first, position[band.members[0]![0]!]!, index] as const);
-    firstSeen
-        .slice()
+    bands
+        .map((band, index) => [band.first, position[band.members[0]![0]!]!, index] as const)
         .sort((left, right) => left[0] - right[0] || left[1] - right[1] || left[2] - right[2])
         .forEach(([, , band], rank) => {
             bands[band]!.rank = rank;
@@ -207,6 +249,7 @@ export function orderLayers(layering: Layering): void {
 
     let bestCount = settle();
     let best = snapshot();
+
     for (let sweep = 0; sweep < SWEEPS && bestCount > 0; sweep++) {
         if (sweep % 2 === 0) {
             for (let layer = 1; layer < items.length; layer++) {
@@ -217,8 +260,10 @@ export function orderLayers(layering: Layering): void {
                 sortLayer(layer, false);
             }
         }
+
         updateRanks();
         const count = settle();
+
         if (count < bestCount) {
             bestCount = count;
             best = snapshot();
@@ -228,6 +273,7 @@ export function orderLayers(layering: Layering): void {
     best.items.forEach((row, layer) => {
         items[layer] = row;
     });
+
     bands.forEach((band, index) => {
         band.members = best.members[index]!;
         band.rank = best.ranks[index]!;

package/src/protocol.ts

@@ -83,6 +83,7 @@ export const EMPTY_DIAGRAM: DiagramDocument = { version: 1, rev: 0, meta: { titl
 /* One version so far, so reading is a parse. A file that is not a diagram at all reads as null. */
 export function migrateDiagram(value: unknown): DiagramDocument | null {
     const parsed = DiagramDocumentSchema.safeParse(value);
+
     return parsed.success ? parsed.data : null;
 }
 
@@ -95,35 +96,47 @@ export function diagramProblemIn(content: Pick<DiagramContent, 'nodes' | 'groups
     if (content.nodes.length > DIAGRAM_LIMITS.nodes) {
         return `A diagram holds at most ${DIAGRAM_LIMITS.nodes} nodes, and this one has ${content.nodes.length}`;
     }
+
     if (content.edges.length > DIAGRAM_LIMITS.edges) {
         return `A diagram holds at most ${DIAGRAM_LIMITS.edges} edges, and this one has ${content.edges.length}`;
     }
+
     // Nodes and groups share one namespace, so an id always says which box it means.
     const nodes = new Set<string>();
+
     for (const node of content.nodes) {
         if (nodes.has(node.id)) {
             return `Two nodes share the id "${node.id}"`;
         }
+
         nodes.add(node.id);
     }
+
     const groups = new Set<string>();
     const groupOf = new Map<string, string>();
+
     for (const group of content.groups) {
         if (nodes.has(group.id) || groups.has(group.id)) {
             return `The group id "${group.id}" is already taken`;
         }
+
         groups.add(group.id);
+
         for (const id of group.wraps) {
             if (!nodes.has(id)) {
                 return `The group "${group.id}" wraps "${id}", which is not a node`;
             }
+
             const other = groupOf.get(id);
+
             if (other !== undefined) {
                 return `The node "${id}" is in two groups, "${other}" and "${group.id}"`;
             }
+
             groupOf.set(id, group.id);
         }
     }
+
     for (const edge of content.edges) {
         for (const end of [edge.from, edge.to]) {
             if (!nodes.has(end)) {
@@ -131,5 +144,6 @@ export function diagramProblemIn(content: Pick<DiagramContent, 'nodes' | 'groups
             }
         }
     }
+
     return null;
 }

package/src/reading-order.ts

@@ -13,14 +13,19 @@ function nameOf(node: DiagramNode | undefined, id: string): string {
 export function readingOrder(document: Pick<DiagramDocument, 'nodes' | 'groups' | 'edges'>): string[] {
     const byId = new Map(document.nodes.map((node) => [node.id, node]));
     const layers = layersOf(document.nodes, document.edges);
+
     const nodes = document.nodes
         .map((node, index) => ({ node, index, layer: layers.get(node.id) ?? 0 }))
         .sort((left, right) => left.layer - right.layer || left.index - right.index)
         .map(({ node }) => (node.sub ? `${nameOf(node, node.id)} (${node.sub})` : nameOf(node, node.id)));
+
     const edges = document.edges.map((edge) => {
         const line = `${nameOf(byId.get(edge.from), edge.from)} -> ${nameOf(byId.get(edge.to), edge.to)}`;
+
         return edge.label ? `${line}: ${edge.label}` : line;
     });
+
     const groups = document.groups.map((group) => `${group.label || group.id} wraps: ${group.wraps.map((id) => nameOf(byId.get(id), id)).join(', ')}`);
+
     return [...nodes, ...edges, ...groups];
 }

package/src/route.ts

@@ -1,13 +1,14 @@
+import { intersects } from '@adecore/drawing';
 import type { Point, Rect } from './layout.ts';
 
-export const TRACK_GAP = 12;
+const TRACK_GAP = 12;
 /* Space between the lane of labels and the first track. */
 const LANE_GAP = 12;
 /* Space between two labels side by side in a lane. */
 const LABEL_GAP = 8;
 /* How far a label keeps from the line it belongs to. */
 const LABEL_OFFSET = 4;
-export const MIN_CHANNEL = 64;
+const MIN_CHANNEL = 64;
 /* Two horizontal lines closer than this read as one. */
 const COLLINEAR = 4;
 /* Two vertical ranges closer than this need tracks of their own. */
@@ -48,10 +49,6 @@ export interface ChannelResult {
     labels: Map<number, Rect>;
 }
 
-function overlaps(left: Rect, right: Rect): boolean {
-    return left.x < right.x + right.w && right.x < left.x + left.w && left.y < right.y + right.h && right.y < left.y + left.h;
-}
-
 function inflate(rect: Rect, by: number): Rect {
     return { x: rect.x - by, y: rect.y - by, w: rect.w + by * 2, h: rect.h + by * 2 };
 }
@@ -60,31 +57,39 @@ function inflate(rect: Rect, by: number): Rect {
  * How badly two orthogonal polylines get in each other's way: a crossing counts once, a stretch where
  * they run on top of each other counts four times, since that is the one a reader cannot follow.
  */
-export function conflictsOf(left: readonly Point[], right: readonly Point[]): number {
+function conflictsOf(left: readonly Point[], right: readonly Point[]): number {
     let total = 0;
+
     for (let i = 1; i < left.length; i++) {
         const a0 = left[i - 1]!;
         const a1 = left[i]!;
+
         for (let j = 1; j < right.length; j++) {
             const b0 = right[j - 1]!;
             const b1 = right[j]!;
             const aFlat = a0.y === a1.y;
             const bFlat = b0.y === b1.y;
+
             if (aFlat !== bFlat) {
                 const [h0, h1, v0, v1] = aFlat ? [a0, a1, b0, b1] : [b0, b1, a0, a1];
+
                 if (v0.x > Math.min(h0.x, h1.x) && v0.x < Math.max(h0.x, h1.x) && h0.y > Math.min(v0.y, v1.y) && h0.y < Math.max(v0.y, v1.y)) {
                     total += 1;
                 }
+
                 continue;
             }
+
             const [along0, along1, other0, other1, gap] = aFlat
                 ? [Math.min(a0.x, a1.x), Math.max(a0.x, a1.x), Math.min(b0.x, b1.x), Math.max(b0.x, b1.x), Math.abs(a0.y - b0.y)]
                 : [Math.min(a0.y, a1.y), Math.max(a0.y, a1.y), Math.min(b0.y, b1.y), Math.max(b0.y, b1.y), Math.abs(a0.x - b0.x)];
+
             if (gap < COLLINEAR && Math.min(along1, other1) > Math.max(along0, other0)) {
                 total += 4;
             }
         }
     }
+
     return total;
 }
 
@@ -107,11 +112,14 @@ function sketchOf(hop: ChannelHop, track: number): Point[] {
 export function routeChannel(input: ChannelInput): ChannelResult {
     const vertical = input.hops.filter((hop) => hop.ya !== hop.yb);
     const count = vertical.length;
+
     const near = (left: ChannelHop, right: ChannelHop): boolean =>
         Math.min(Math.max(left.ya, left.yb), Math.max(right.ya, right.yb)) + RANGE_CLEARANCE >
         Math.max(Math.min(left.ya, left.yb), Math.min(right.ya, right.yb));
+
     // cost[i * count + j]: how much i and j conflict when i's track is left of j's.
     const cost = new Array<number>(count * count).fill(0);
+
     for (let i = 0; i < count; i++) {
         for (let j = 0; j < count; j++) {
             if (i !== j && near(vertical[i]!, vertical[j]!)) {
@@ -119,39 +127,52 @@ export function routeChannel(input: ChannelInput): ChannelResult {
             }
         }
     }
+
     const score = vertical.map((_, i) => {
         let sum = 0;
+
         for (let j = 0; j < count; j++) {
             sum += cost[i * count + j]! - cost[j * count + i]!;
         }
+
         return sum;
     });
+
     const order = vertical.map((_, i) => i).sort((left, right) => score[left]! - score[right]! || left - right);
+
     for (let pass = 0; pass < count; pass++) {
         let swapped = false;
+
         for (let slot = 0; slot + 1 < count; slot++) {
             const left = order[slot]!;
             const right = order[slot + 1]!;
+
             if (cost[right * count + left]! < cost[left * count + right]!) {
                 order[slot] = right;
                 order[slot + 1] = left;
                 swapped = true;
             }
         }
+
         if (!swapped) {
             break;
         }
     }
+
     const track = new Array<number>(count).fill(0);
     let tracks = 0;
+
     order.forEach((index, slot) => {
         let at = 0;
+
         for (let earlier = 0; earlier < slot; earlier++) {
             const other = order[earlier]!;
+
             if (near(vertical[other]!, vertical[index]!)) {
                 at = Math.max(at, track[other]! + 1);
             }
         }
+
         track[index] = at;
         tracks = Math.max(tracks, at + 1);
     });
@@ -171,25 +192,31 @@ export function routeChannel(input: ChannelInput): ChannelResult {
 
     const touches = (x0: number, x1: number, y0: number, y1: number, rect: Rect): boolean =>
         x1 >= rect.x - 3 && x0 <= rect.x + rect.w + 3 && y1 >= rect.y - 3 && y0 <= rect.y + rect.h + 3;
+
     const blocked = (zone: Zone, rect: Rect): boolean =>
-        placed.some((other) => other.zone === zone && overlaps(inflate(other.rect, 4), rect)) ||
+        placed.some((other) => other.zone === zone && intersects(inflate(other.rect, 4), rect)) ||
         input.obstacles.some((obstacle) => obstacle.y < rect.y + rect.h && rect.y < obstacle.y + obstacle.h);
+
     const onLine = (zone: Zone, rect: Rect, label: ChannelLabel): boolean =>
         input.hops.some((hop) => {
             if (zone === 'before') {
                 return hop.hop !== label.hop && hop.ya > rect.y - 3 && hop.ya < rect.y + rect.h + 3;
             }
+
             const own = hop.hop === label.hop;
             const at = trackOf.get(hop.hop);
+
             if (at === undefined) {
                 return !own && touches(-Infinity, Infinity, hop.ya, hop.ya, rect);
             }
+
             return (
                 (!own && touches(-Infinity, at, hop.ya, hop.ya, rect)) ||
                 (!own && touches(at, at, Math.min(hop.ya, hop.yb), Math.max(hop.ya, hop.yb), rect)) ||
                 touches(at, Infinity, hop.yb, hop.yb, rect)
             );
         });
+
     const inLane = (label: ChannelLabel, x: number, y: number, above: boolean): Rect => ({
         x: x + Math.floor((slotAlong - label.along) / 2),
         y: above ? y - LABEL_OFFSET - label.across : y + LABEL_OFFSET,
@@ -199,10 +226,14 @@ export function routeChannel(input: ChannelInput): ChannelResult {
 
     for (const label of input.labels) {
         const hop = input.hops.find((candidate) => candidate.hop === label.hop);
+
         const before = (slot: number) => [true, false].map((above) => ({ zone: 'before' as Zone, rect: inLane(label, slot * slotStep, label.y, above) }));
+
         const after = (slot: number) =>
             hop ? [true, false].map((above) => ({ zone: 'middle' as Zone, rect: inLane(label, afterStart + slot * slotStep, hop.yb, above) })) : [];
+
         const at = trackOf.get(label.hop);
+
         const beside =
             hop && at !== undefined
                 ? [
@@ -212,32 +243,42 @@ export function routeChannel(input: ChannelInput): ChannelResult {
                       }
                   ]
                 : [];
+
         const existing = [
             ...Array.from({ length: slotsBefore }, (_, slot) => before(slot)).flat(),
             ...beside,
             ...Array.from({ length: slotsAfter }, (_, slot) => after(slot)).flat()
         ];
+
         const clear = (candidate: { zone: Zone; rect: Rect }): boolean =>
             !blocked(candidate.zone, candidate.rect) && !onLine(candidate.zone, candidate.rect, label);
+
         let choice = existing.find(clear);
+
         if (!choice) {
             choice = before(slotsBefore).find(clear);
+
             if (choice) {
                 slotsBefore += 1;
             }
         }
+
         if (!choice) {
             choice = after(slotsAfter).find(clear);
+
             if (choice) {
                 slotsAfter += 1;
             }
         }
+
         // A place beside no line may not exist, since every line in a lane runs its whole width; a free place is enough.
         choice ??= existing.find((candidate) => !blocked(candidate.zone, candidate.rect));
+
         if (!choice) {
             choice = before(slotsBefore)[0]!;
             slotsBefore += 1;
         }
+
         placed.push(choice);
         chosen.set(label.edge, choice);
     }
@@ -246,11 +287,13 @@ export function routeChannel(input: ChannelInput): ChannelResult {
     const laneWidth = Math.max(0, ...placed.filter((entry) => entry.zone === 'before').map((entry) => entry.rect.x + entry.rect.w));
     const middleLabels = placed.filter((entry) => entry.zone === 'middle');
     const hasMiddle = tracks > 0 || middleLabels.length > 0;
+
     const middleWidth = Math.max(
         tracksSpan,
         slotsAfter > 0 ? afterStart + slotsAfter * slotStep - LABEL_GAP : 0,
         ...middleLabels.map((entry) => entry.rect.x + entry.rect.w)
     );
+
     const laneGap = laneWidth > 0 && hasMiddle ? LANE_GAP : 0;
     const needed = input.clearBefore + laneWidth + laneGap + (hasMiddle ? middleWidth : 0) + input.clearAfter;
     const width = Math.max(MIN_CHANNEL, needed);
@@ -259,8 +302,10 @@ export function routeChannel(input: ChannelInput): ChannelResult {
     const trackX = new Map<number, number>();
     trackOf.forEach((x, hop) => trackX.set(hop, middleStart + x));
     const labels = new Map<number, Rect>();
+
     chosen.forEach((entry, edge) => {
         labels.set(edge, { ...entry.rect, x: entry.rect.x + (entry.zone === 'before' ? laneStart : middleStart) });
     });
+
     return { width, trackX, labels };
 }

package/src/shapes.ts

@@ -18,6 +18,7 @@ function roundedRect(box: Rect, radius: number): string {
     const corner = Math.round(Math.min(radius, box.w / 2, box.h / 2));
     const right = box.x + box.w;
     const bottom = box.y + box.h;
+
     return [
         `M${box.x + corner} ${box.y}`,
         `H${right - corner}`,
@@ -37,6 +38,7 @@ export function shapePaths(shape: DiagramShape | undefined, box: Rect): ShapePat
     const bottom = box.y + box.h;
     const middleX = Math.round(box.x + box.w / 2);
     const middleY = Math.round(box.y + box.h / 2);
+
     switch (shape ?? 'rect') {
         case 'round':
             return { body: roundedRect(box, ROUND_RADIUS), detail: null };
@@ -50,6 +52,7 @@ export function shapePaths(shape: DiagramShape | undefined, box: Rect): ShapePat
             const ry = Math.round(lid / 2);
             const top = box.y + ry;
             const base = bottom - ry;
+
             return {
                 body: `M${box.x} ${top} A${rx} ${ry} 0 0 1 ${right} ${top} V${base} A${rx} ${ry} 0 0 1 ${box.x} ${base} Z`,
                 detail: `M${box.x} ${top} A${rx} ${ry} 0 0 0 ${right} ${top}`
@@ -77,11 +80,13 @@ export function textLinesOf(box: Pick<NodeBox, 'x' | 'y' | 'w' | 'h' | 'label' |
     const label = box.label.map((text, index) => ({ text, x, y: top + index * LABEL_LINE + 14, size: LABEL_SIZE, bold: true, muted: false }));
     const subTop = top + box.label.length * LABEL_LINE;
     const sub = box.sub.map((text, index) => ({ text, x, y: subTop + index * SUB_LINE + 12, size: SUB_SIZE, bold: false, muted: true }));
+
     return [...label, ...sub];
 }
 
 export function edgeLabelLinesOf(label: EdgeLabelBox): TextLine[] {
     const x = Math.round(label.x + label.w / 2);
+
     return label.lines.map((text, index) => ({
         text,
         x,
@@ -105,6 +110,7 @@ export function arrowHeadPath(points: readonly Point[]): string {
     const baseX = tip.x - ux * HEAD_LENGTH;
     const baseY = tip.y - uy * HEAD_LENGTH;
     const round = Math.round;
+
     return `M${tip.x} ${tip.y} L${round(baseX - uy * HEAD_WIDTH)} ${round(baseY + ux * HEAD_WIDTH)} L${round(baseX + uy * HEAD_WIDTH)} ${round(baseY - ux * HEAD_WIDTH)} Z`;
 }
 
@@ -112,8 +118,10 @@ export function dashOf(style: DiagramEdgeStyle | undefined): string | null {
     if (style === 'dashed') {
         return '8 6';
     }
+
     if (style === 'dotted') {
         return '2 5';
     }
+
     return null;
 }

package/src/svg.ts

@@ -41,6 +41,7 @@ export function toSvg(document: Pick<DiagramDocument, 'meta' | 'nodes' | 'groups
     const w = layout.bounds.w + margin * 2;
     const h = layout.bounds.h + margin * 2;
     const parts: string[] = [];
+
     if (options.background) {
         parts.push(`<rect x="${x}" y="${y}" width="${w}" height="${h}" fill="${options.background}"/>`);
     }
@@ -48,6 +49,7 @@ export function toSvg(document: Pick<DiagramDocument, 'meta' | 'nodes' | 'groups
     for (const box of layout.groups) {
         const group = groups.get(box.id)!;
         const tone = palette[group.tone ?? DEFAULT_GROUP_TONE];
+
         parts.push(
             `<rect x="${box.x}" y="${box.y}" width="${box.w}" height="${box.h}" rx="12" fill="none" stroke="${tone}" stroke-width="1" stroke-dasharray="6 4"/>`,
             `<text x="${box.labelBox.x}" y="${box.y + Math.round(GROUP_LABEL_BAND * 0.7)}" font-size="${SUB_SIZE}" font-weight="600" fill="${tone}">${escapeXml(group.label)}</text>`
@@ -58,12 +60,15 @@ export function toSvg(document: Pick<DiagramDocument, 'meta' | 'nodes' | 'groups
         const edge = document.edges[route.index]!;
         const tone = palette[edge.tone ?? DEFAULT_EDGE_TONE];
         const dash = dashOf(edge.style);
+
         parts.push(
             `<path d="${edgePath(route.points)}" fill="none" stroke="${tone}" stroke-width="2" stroke-linejoin="round"${dash ? ` stroke-dasharray="${dash}"` : ''}/>`,
             `<path d="${arrowHeadPath(route.points)}" fill="${tone}"/>`
         );
+
         if (route.label) {
             const halo = options.background ? ` stroke="${options.background}" stroke-width="4" paint-order="stroke"` : '';
+
             for (const line of edgeLabelLinesOf(route.label)) {
                 parts.push(
                     `<text x="${line.x}" y="${line.y}" font-size="${line.size}" text-anchor="middle" fill="${tone}"${halo}>${escapeXml(line.text)}</text>`
@@ -77,9 +82,11 @@ export function toSvg(document: Pick<DiagramDocument, 'meta' | 'nodes' | 'groups
         const tone = node.tone ?? DEFAULT_NODE_TONE;
         const paths = shapePaths(node.shape, box);
         parts.push(`<path d="${paths.body}" fill="${paper[tone]}" stroke="${palette[tone]}" stroke-width="2"/>`);
+
         if (paths.detail) {
             parts.push(`<path d="${paths.detail}" fill="none" stroke="${palette[tone]}" stroke-width="2"/>`);
         }
+
         for (const line of textLinesOf(box, node.shape)) {
             parts.push(
                 `<text x="${line.x}" y="${line.y}" font-size="${line.size}"${line.bold ? ' font-weight="600"' : ''} text-anchor="middle" fill="${line.muted ? palette.muted : palette.ink}">${escapeXml(line.text)}</text>`