dsh-model-everything 0.5.0 → 0.5.2

package/lib/client.js

@@ -37,17 +37,844 @@ window.__ModuleLoader__.load({
     });
     module.exports = __toCommonJS(client_exports);
     
+    // src/render/components.ts
+    var PAGE_ASPECT = 1.6;
+    function weakComponents(nodes, edges) {
+      const known = new Set(nodes.map((node) => node.id));
+      const neighbours = /* @__PURE__ */ new Map();
+      const link = (from, to) => {
+        neighbours.set(from, [...neighbours.get(from) ?? [], to]);
+      };
+      for (const edge of edges) {
+        if (!known.has(edge.from) || !known.has(edge.to) || edge.from === edge.to) continue;
+        link(edge.from, edge.to);
+        link(edge.to, edge.from);
+      }
+      const seen = /* @__PURE__ */ new Set();
+      const components = [];
+      for (const node of nodes) {
+        if (seen.has(node.id)) continue;
+        const members = [];
+        const queue = [node.id];
+        seen.add(node.id);
+        for (let head = 0; head < queue.length; head += 1) {
+          const id = queue[head];
+          members.push(id);
+          for (const next of neighbours.get(id) ?? []) {
+            if (seen.has(next)) continue;
+            seen.add(next);
+            queue.push(next);
+          }
+        }
+        components.push(members);
+      }
+      return components;
+    }
+    function packRectangles(rectangles, options = {}) {
+      const gap = options.gap ?? 30;
+      const aspect = options.aspect ?? PAGE_ASPECT;
+      if (rectangles.length === 0) return { placements: [], width: 0, height: 0 };
+      const area = rectangles.reduce((total, rectangle) => total + (rectangle.width + gap) * (rectangle.height + gap), 0);
+      const targetWidth = Math.max(gap, Math.sqrt(area * aspect));
+      const order2 = rectangles.map((rectangle, index) => ({ rectangle, index })).sort((left, right) => right.rectangle.height - left.rectangle.height || right.rectangle.width - left.rectangle.width || left.index - right.index);
+      const placements = rectangles.map((rectangle) => ({ x: 0, y: 0, width: rectangle.width, height: rectangle.height }));
+      let x = 0;
+      let y = 0;
+      let shelfHeight = 0;
+      let width = 0;
+      for (const entry of order2) {
+        const rectangle = entry.rectangle;
+        if (x > 0 && x + rectangle.width > targetWidth) {
+          y += shelfHeight + gap;
+          x = 0;
+          shelfHeight = 0;
+        }
+        placements[entry.index] = { x, y, width: rectangle.width, height: rectangle.height };
+        x += rectangle.width + gap;
+        width = Math.max(width, x - gap);
+        shelfHeight = Math.max(shelfHeight, rectangle.height);
+      }
+      return { placements, width, height: y + shelfHeight };
+    }
+    
+    // src/render/channels.ts
+    var PORT_INSET = 10;
+    function spanOf(box) {
+      const lo = box.x + PORT_INSET;
+      const hi = box.x + box.width - PORT_INSET;
+      return hi > lo ? { lo, hi } : { lo: box.x + box.width / 2, hi: box.x + box.width / 2 };
+    }
+    function clamp(value, span) {
+      return Math.min(span.hi, Math.max(span.lo, value));
+    }
+    function inside(value, span) {
+      return value >= span.lo - 1e-3 && value <= span.hi + 1e-3;
+    }
+    function cut(free, blocked) {
+      const out = [];
+      for (const span of free) {
+        if (blocked.hi <= span.lo || blocked.lo >= span.hi) {
+          out.push(span);
+          continue;
+        }
+        if (blocked.lo > span.lo) out.push({ lo: span.lo, hi: blocked.lo });
+        if (blocked.hi < span.hi) out.push({ lo: blocked.hi, hi: span.hi });
+      }
+      return out;
+    }
+    function atOrAfter(value, free) {
+      let found = value;
+      for (const span of free) {
+        if (span.hi < value) continue;
+        found = Math.max(value, span.lo);
+        break;
+      }
+      return found;
+    }
+    function choose(entry) {
+      const candidates = [entry.proposal, entry.source.lo, entry.source.hi, entry.target.lo, entry.target.hi];
+      candidates.push((clamp(entry.proposal, entry.source) + clamp(entry.proposal, entry.target)) / 2);
+      let best = entry.proposal;
+      let bestBends = Infinity;
+      let bestFar = Infinity;
+      let bestReach = Infinity;
+      for (const span of entry.free) {
+        for (const value of candidates) {
+          const x = clamp(value, span);
+          const bends = (inside(x, entry.source) ? 0 : 1) + (inside(x, entry.target) ? 0 : 1);
+          const far = Math.abs(x - entry.proposal);
+          const reach = Math.abs(x - clamp(x, entry.source)) + Math.abs(x - clamp(x, entry.target));
+          const better = bends < bestBends || bends === bestBends && (far < bestFar - 1e-3 || Math.abs(far - bestFar) <= 1e-3 && reach < bestReach);
+          if (!better) continue;
+          best = x;
+          bestBends = bends;
+          bestFar = far;
+          bestReach = reach;
+        }
+      }
+      return best;
+    }
+    function adjacentPorts(source, target) {
+      const fromMiddle = source.x + source.width / 2;
+      const toMiddle = target.x + target.width / 2;
+      const fromSpan = spanOf(source);
+      const toSpan = spanOf(target);
+      const chosen = inside(fromMiddle, toSpan) ? fromMiddle : clamp(toMiddle, fromSpan);
+      return { from: clamp(chosen, fromSpan), to: clamp(chosen, toSpan) };
+    }
+    function assignChannels(input, options) {
+      const { layers, chains, chainOf, boxes, layerY, layerHeight, laneX } = input;
+      const rowOf = /* @__PURE__ */ new Map();
+      layers.forEach((row, depth) => {
+        for (const id of row) rowOf.set(id, depth);
+      });
+      const long = [];
+      for (const chain of chains) {
+        if (chain.path.length <= 2) continue;
+        const head = chain.path[0];
+        const tail = chain.path[chain.path.length - 1];
+        const from = rowOf.get(head);
+        const to = rowOf.get(tail);
+        if (from === void 0 || to === void 0 || to <= from) continue;
+        const lane = chainOf.get(chain.path[1]);
+        const source = boxes.get(head);
+        const target = boxes.get(tail);
+        if (lane === void 0 || source === void 0 || target === void 0) continue;
+        let free = [{ lo: -Infinity, hi: Infinity }];
+        for (let depth = from + 1; depth < to; depth += 1) {
+          for (const id of layers[depth]) {
+            const box = boxes.get(id);
+            if (box === void 0) continue;
+            free = cut(free, { lo: box.x - options.clearance, hi: box.x + box.width + options.clearance });
+          }
+        }
+        const centre = (source.x + source.width / 2 + target.x + target.width / 2) / 2;
+        long.push({
+          edge: chain.index,
+          lane,
+          path: chain.path,
+          from,
+          to,
+          free,
+          source: spanOf(source),
+          target: spanOf(target),
+          proposal: laneX.get(lane) ?? centre,
+          x: 0
+        });
+      }
+      for (const entry of long) entry.x = choose(entry);
+      const byGap = /* @__PURE__ */ new Map();
+      for (const entry of long) {
+        for (let gap = entry.from; gap < entry.to; gap += 1) {
+          const row = gap + 1 < entry.to ? gap + 1 : gap;
+          const id = entry.path[row - entry.from];
+          const index = layers[row].indexOf(id);
+          byGap.set(gap, [...byGap.get(gap) ?? [], { entry, index }]);
+        }
+      }
+      for (const [, list] of byGap) list.sort((left, right) => left.index - right.index);
+      for (let round = 0; round < 4; round += 1) {
+        let moved = false;
+        for (const [, list] of byGap) {
+          let previous = -Infinity;
+          for (const item of list) {
+            const x = item.entry.x < previous + options.spacing ? atOrAfter(previous + options.spacing, item.entry.free) : item.entry.x;
+            if (x !== item.entry.x) {
+              item.entry.x = x;
+              moved = true;
+            }
+            previous = item.entry.x;
+          }
+        }
+        if (!moved) break;
+      }
+      const stacks = /* @__PURE__ */ new Map();
+      const want = (gap, edge, left) => {
+        stacks.set(gap, [...stacks.get(gap) ?? [], { edge, gap, left }]);
+      };
+      for (const entry of long) {
+        const head = clamp(entry.x, entry.source);
+        const tail = clamp(entry.x, entry.target);
+        if (Math.abs(head - entry.x) > 0.5) want(entry.from, entry.edge, Math.min(head, entry.x));
+        if (Math.abs(tail - entry.x) > 0.5) want(entry.to - 1, entry.edge, Math.min(tail, entry.x));
+      }
+      for (const chain of chains) {
+        if (chain.path.length > 2) continue;
+        const head = chain.path[0];
+        const tail = chain.path[chain.path.length - 1];
+        const from = rowOf.get(head);
+        const to = rowOf.get(tail);
+        if (from === void 0 || to === void 0 || Math.abs(from - to) !== 1) continue;
+        const source = boxes.get(head);
+        const target = boxes.get(tail);
+        if (source === void 0 || target === void 0) continue;
+        const ports = adjacentPorts(source, target);
+        want(Math.min(from, to), chain.index, Math.min(ports.from, ports.to));
+      }
+      const midOf = (gap) => (layerY[gap] + layerHeight[gap] + layerY[gap + 1]) / 2;
+      const heightOf = /* @__PURE__ */ new Map();
+      for (const [gap, list] of stacks) {
+        const top = layerY[gap] + layerHeight[gap];
+        const bottom = layerY[gap + 1];
+        const pad = Math.min(8, Math.max(1, (bottom - top) / 3));
+        const lo = top + pad;
+        const hi = Math.max(lo, bottom - pad);
+        const sorted = [...list].sort((left, right) => left.left - right.left || left.edge - right.edge);
+        sorted.forEach((item, index) => {
+          const y = sorted.length === 1 ? (lo + hi) / 2 : lo + (hi - lo) * (index + 1) / (sorted.length + 1);
+          const heights = heightOf.get(item.edge) ?? /* @__PURE__ */ new Map();
+          heights.set(item.gap, y);
+          heightOf.set(item.edge, heights);
+        });
+      }
+      const lanes2 = /* @__PURE__ */ new Map();
+      for (const entry of long) {
+        const y = [];
+        for (let gap = entry.from; gap < entry.to; gap += 1) y.push(heightOf.get(entry.edge)?.get(gap) ?? midOf(gap));
+        lanes2.set(entry.edge, { x: entry.x, y });
+      }
+      const runs = /* @__PURE__ */ new Map();
+      for (const [edge, heights] of heightOf) {
+        if (lanes2.has(edge)) continue;
+        runs.set(edge, [...heights.values()][0]);
+      }
+      return { lanes: lanes2, runs };
+    }
+    
+    // src/render/coords.ts
+    function positions(rows) {
+      const at = /* @__PURE__ */ new Map();
+      for (const row of rows) row.forEach((id, index) => at.set(id, index));
+      return at;
+    }
+    function alignBlocks(frame, at) {
+      const root = /* @__PURE__ */ new Map();
+      const joined = /* @__PURE__ */ new Map();
+      for (const row of frame.rows) {
+        for (const id of row) {
+          root.set(id, id);
+          joined.set(id, id);
+        }
+      }
+      for (let depth = 1; depth < frame.rows.length; depth += 1) {
+        let previous = -1;
+        for (const id of frame.rows[depth]) {
+          const close = frame.near.get(id) ?? [];
+          if (close.length === 0) continue;
+          const sorted = [...close].sort((left, right) => at.get(left) - at.get(right));
+          const middle = (sorted.length - 1) / 2;
+          for (let cursor = Math.floor(middle); cursor <= Math.ceil(middle); cursor += 1) {
+            if (joined.get(id) !== id) break;
+            const target = sorted[cursor];
+            if (previous >= at.get(target)) continue;
+            joined.set(target, id);
+            root.set(id, root.get(target));
+            joined.set(id, root.get(id));
+            previous = at.get(target);
+          }
+        }
+      }
+      return root;
+    }
+    function compactBlocks(rows, root, widthOf, gap) {
+      const clears = /* @__PURE__ */ new Map();
+      for (const row of rows) {
+        for (let index = 1; index < row.length; index += 1) {
+          const left = row[index - 1];
+          const right = row[index];
+          const leftBlock = root.get(left);
+          const rightBlock = root.get(right);
+          const space = (widthOf(left) + widthOf(right)) / 2 + gap;
+          clears.set(rightBlock, [...clears.get(rightBlock) ?? [], { block: leftBlock, space }]);
+        }
+      }
+      const placed = /* @__PURE__ */ new Map();
+      const place2 = (block) => {
+        const known = placed.get(block);
+        if (known !== void 0) return known;
+        let value = 0;
+        for (const step of clears.get(block) ?? []) value = Math.max(value, place2(step.block) + step.space);
+        placed.set(block, value);
+        return value;
+      };
+      const x = /* @__PURE__ */ new Map();
+      for (const row of rows) {
+        for (const id of row) {
+          const block = root.get(id);
+          if (!placed.has(block)) place2(block);
+          x.set(id, placed.get(block));
+        }
+      }
+      return x;
+    }
+    function extentOf(x, rows, widthOf) {
+      let left = Infinity;
+      let right = -Infinity;
+      for (const row of rows) {
+        for (const id of row) {
+          const value = x.get(id);
+          left = Math.min(left, value - widthOf(id) / 2);
+          right = Math.max(right, value + widthOf(id) / 2);
+        }
+      }
+      return { left, right };
+    }
+    function onePass(frame, widthOf, gap) {
+      const at = positions(frame.rows);
+      const root = alignBlocks(frame, at);
+      const x = compactBlocks(frame.rows, root, widthOf, gap);
+      if (!frame.mirrored) return x;
+      const mirrored = /* @__PURE__ */ new Map();
+      for (const [id, value] of x) mirrored.set(id, -value);
+      return mirrored;
+    }
+    function frames(layers, above, below) {
+      const fromTop = layers;
+      const fromBottom = [...layers].reverse();
+      const flip = (rows) => rows.map((row) => [...row].reverse());
+      return [
+        { rows: fromTop, near: above, mirrored: false },
+        { rows: flip(fromTop), near: above, mirrored: true },
+        { rows: fromBottom, near: below, mirrored: false },
+        { rows: flip(fromBottom), near: below, mirrored: true }
+      ];
+    }
+    function assignCoordinates(input, options) {
+      const { layers, chains, sizeOf, chainOf } = input;
+      const gap = options.gap;
+      const laneIds = new Set(chainOf.values());
+      const isDummy = (id) => chainOf.has(id);
+      const isPoint = (id) => isDummy(id) || laneIds.has(id);
+      const widthOf = (id) => isPoint(id) ? 0 : sizeOf(id).width;
+      const heightOf = (id) => isPoint(id) ? 0 : sizeOf(id).height;
+      const laneOf = (id) => chainOf.get(id) ?? id;
+      const x = /* @__PURE__ */ new Map();
+      const read = (id) => x.get(laneOf(id));
+      const above = /* @__PURE__ */ new Map();
+      const below = /* @__PURE__ */ new Map();
+      const laneEnds = /* @__PURE__ */ new Map();
+      const link = (into, id, other) => {
+        into.set(id, [...into.get(id) ?? [], other]);
+      };
+      for (const chain of chains) {
+        for (let cursor = 0; cursor + 1 < chain.path.length; cursor += 1) {
+          const top2 = chain.path[cursor];
+          const bottom = chain.path[cursor + 1];
+          if (!isDummy(top2) && !isDummy(bottom)) {
+            link(below, top2, bottom);
+            link(above, bottom, top2);
+          }
+        }
+        if (chain.path.length > 2) {
+          const lane = chainOf.get(chain.path[1]);
+          if (lane !== void 0) laneEnds.set(lane, [chain.path[0], chain.path[chain.path.length - 1]]);
+        }
+      }
+      const candidates = frames(layers, above, below).map((frame) => onePass(frame, widthOf, gap));
+      const leftOrigin = extentOf(candidates[0], layers, widthOf).left;
+      const rightOrigin = extentOf(candidates[1], layers, widthOf).right;
+      for (const [index, candidate] of candidates.entries()) {
+        const extent = extentOf(candidate, layers, widthOf);
+        const shift = index % 2 === 0 ? leftOrigin - extent.left : rightOrigin - extent.right;
+        for (const [id, value] of candidate) candidate.set(id, value + shift);
+      }
+      for (const row of layers) {
+        for (const id of row) {
+          let total = 0;
+          for (const candidate of candidates) total += candidate.get(id);
+          x.set(id, total / candidates.length);
+        }
+      }
+      const reserved = layers.map((layer2) => {
+        let lowest = Infinity;
+        let highest = -Infinity;
+        for (const id of layer2) {
+          const value = x.get(id);
+          lowest = Math.min(lowest, value - widthOf(id) / 2);
+          highest = Math.max(highest, value + widthOf(id) / 2);
+        }
+        return { lowest, highest };
+      });
+      for (const [lane, ends] of laneEnds) x.set(lane, (x.get(ends[0]) + x.get(ends[1])) / 2);
+      for (const id of chainOf.keys()) x.delete(id);
+      for (const row of layers) {
+        let cursor = -Infinity;
+        for (const id of row) {
+          if (isDummy(id)) {
+            cursor = Math.max(cursor, read(id));
+            continue;
+          }
+          const width2 = widthOf(id);
+          const centre = Math.max(x.get(id), cursor + width2 / 2);
+          x.set(id, centre);
+          cursor = centre + width2 / 2 + gap;
+        }
+      }
+      let left = 0;
+      for (const [id, value] of x) left = Math.min(left, value - widthOf(id) / 2);
+      for (const [id, value] of x) x.set(id, value - left);
+      const layerHeight = layers.map((layer2) => Math.max(0, ...layer2.map((id) => heightOf(id))));
+      const layerWidth = layers.map((layer2, depth) => {
+        let lowest = reserved[depth].lowest - left;
+        let highest = reserved[depth].highest - left;
+        for (const id of layer2) {
+          const value = read(id);
+          lowest = Math.min(lowest, value - widthOf(id) / 2);
+          highest = Math.max(highest, value + widthOf(id) / 2);
+        }
+        return highest - lowest;
+      });
+      const layerY = [];
+      let top = 0;
+      for (const [depth, height] of layerHeight.entries()) {
+        layerY.push(top);
+        top += height + options.layerGap;
+      }
+      let width = 0;
+      for (const [id, value] of x) width = Math.max(width, value + widthOf(id) / 2);
+      return {
+        x,
+        layerY,
+        layerHeight,
+        layerWidth,
+        width,
+        height: layerY.length === 0 ? 0 : layerY[layerY.length - 1] + layerHeight[layerHeight.length - 1]
+      };
+    }
+    
+    // src/render/cycle-break.ts
+    function tarjan(nodes, outgoing) {
+      let counter = 0;
+      const index = /* @__PURE__ */ new Map();
+      const low = /* @__PURE__ */ new Map();
+      const stack = [];
+      const onStack = /* @__PURE__ */ new Set();
+      const found = [];
+      const visit = (node) => {
+        index.set(node, counter);
+        low.set(node, counter);
+        counter += 1;
+        stack.push(node);
+        onStack.add(node);
+        for (const next of outgoing.get(node) ?? []) {
+          if (!index.has(next)) {
+            visit(next);
+            low.set(node, Math.min(low.get(node), low.get(next)));
+            continue;
+          }
+          if (onStack.has(next)) low.set(node, Math.min(low.get(node), index.get(next)));
+        }
+        if (low.get(node) !== index.get(node)) return;
+        const component = [];
+        let member;
+        do {
+          member = stack.pop();
+          onStack.delete(member);
+          component.push(member);
+        } while (member !== node);
+        found.push(component);
+      };
+      for (const node of nodes) if (!index.has(node)) visit(node);
+      return found;
+    }
+    function breakCycles(graph) {
+      const known = new Set(graph.nodes.map((node) => node.id));
+      const position = new Map(graph.nodes.map((node, offset) => [node.id, offset]));
+      const edges = graph.edges.map((edge) => ({ ...edge }));
+      const reversed = /* @__PURE__ */ new Set();
+      const flip = (index) => {
+        const edge = edges[index];
+        const next = edge.from;
+        edge.from = edge.to;
+        edge.to = next;
+      };
+      if (graph.init !== void 0 && known.has(graph.init)) {
+        for (const [index, edge] of edges.entries()) {
+          if (edge.to === graph.init && edge.from !== graph.init) flip(index);
+        }
+      }
+      const outgoing = /* @__PURE__ */ new Map();
+      for (const edge of edges) {
+        if (!known.has(edge.from) || !known.has(edge.to) || edge.from === edge.to) continue;
+        outgoing.set(edge.from, [...outgoing.get(edge.from) ?? [], edge.to]);
+      }
+      const nodes = graph.nodes.map((node) => node.id);
+      const raw = tarjan(nodes, outgoing);
+      raw.reverse();
+      const componentOf = /* @__PURE__ */ new Map();
+      const components = raw.map((members, id) => {
+        for (const member of members) componentOf.set(member, id);
+        return { id, members };
+      });
+      const condensation = [];
+      const seen = /* @__PURE__ */ new Set();
+      for (const edge of edges) {
+        const from = componentOf.get(edge.from);
+        const to = componentOf.get(edge.to);
+        if (from === void 0 || to === void 0 || from === to) continue;
+        const key = String(from) + ">" + String(to);
+        if (seen.has(key)) continue;
+        seen.add(key);
+        condensation.push({ from, to });
+      }
+      const rank = /* @__PURE__ */ new Map();
+      for (const component of components) {
+        if (component.members.length < 2) {
+          rank.set(component.members[0], 0);
+          continue;
+        }
+        const inside2 = new Set(component.members);
+        const score = /* @__PURE__ */ new Map();
+        for (const member of component.members) score.set(member, 0);
+        for (const edge of edges) {
+          if (!inside2.has(edge.from) || !inside2.has(edge.to) || edge.from === edge.to) continue;
+          score.set(edge.from, score.get(edge.from) + 1);
+          score.set(edge.to, score.get(edge.to) - 1);
+        }
+        const ordered = [...component.members].sort((left, right) => {
+          const difference = score.get(right) - score.get(left);
+          return difference !== 0 ? difference : position.get(left) - position.get(right);
+        });
+        ordered.forEach((member, offset) => rank.set(member, offset));
+      }
+      for (const [index, edge] of edges.entries()) {
+        const from = rank.get(edge.from);
+        const to = rank.get(edge.to);
+        if (from === void 0 || to === void 0 || edge.from === edge.to) continue;
+        if (componentOf.get(edge.from) !== componentOf.get(edge.to)) continue;
+        if (from > to) flip(index);
+      }
+      edges.forEach((edge, index) => {
+        if (graph.edges[index].from !== edge.from) reversed.add(edge.index);
+      });
+      return { edges, reversed, components, componentOf, rank, condensation };
+    }
+    
+    // src/render/dummy.ts
+    function addDummies(layering, edges) {
+      const layers = layering.layers.map((layer2) => [...layer2]);
+      const chains = [];
+      const chainOf = /* @__PURE__ */ new Map();
+      const laneOf = /* @__PURE__ */ new Map();
+      for (const edge of edges) {
+        if (edge.from === edge.to) {
+          chains.push({ index: edge.index, path: [edge.from, edge.to] });
+          continue;
+        }
+        const from = layering.layerOf.get(edge.from);
+        const to = layering.layerOf.get(edge.to);
+        if (from === void 0 || to === void 0 || to <= from) {
+          chains.push({ index: edge.index, path: [edge.from, edge.to] });
+          continue;
+        }
+        const path = [edge.from];
+        for (let cursor = from + 1; cursor < to; cursor += 1) {
+          const instance = "#d" + String(edge.index) + "_" + String(cursor);
+          const lane = "#e" + String(edge.index);
+          chainOf.set(instance, lane);
+          laneOf.set(edge.index, lane);
+          layers[cursor].push(instance);
+          path.push(instance);
+        }
+        path.push(edge.to);
+        chains.push({ index: edge.index, path });
+      }
+      return { layers, chains, chainOf, laneOf };
+    }
+    
+    // src/render/network-simplex.ts
+    function slackOf(edge, rank) {
+      return rank[edge.to] - rank[edge.from] - edge.minLength;
+    }
+    function componentsOf(count, edges) {
+      const neighbours = [];
+      for (let node = 0; node < count; node += 1) neighbours.push([]);
+      for (const edge of edges) {
+        neighbours[edge.from].push(edge.to);
+        neighbours[edge.to].push(edge.from);
+      }
+      const seen = new Array(count).fill(false);
+      const components = [];
+      for (let node = 0; node < count; node += 1) {
+        if (seen[node]) continue;
+        seen[node] = true;
+        const members = [node];
+        for (let head = 0; head < members.length; head += 1) {
+          for (const next of neighbours[members[head]]) {
+            if (seen[next]) continue;
+            seen[next] = true;
+            members.push(next);
+          }
+        }
+        members.sort((left, right) => left - right);
+        components.push(members);
+      }
+      return components;
+    }
+    function buildTightTree(members, edges, rank, tree) {
+      const inside2 = /* @__PURE__ */ new Set([members[0]]);
+      while (inside2.size < members.length) {
+        let tight = -1;
+        for (const [index, edge] of edges.entries()) {
+          if (tree.has(index)) continue;
+          if (inside2.has(edge.from) === inside2.has(edge.to)) continue;
+          if (slackOf(edge, rank) === 0) {
+            tight = index;
+            break;
+          }
+        }
+        if (tight >= 0) {
+          tree.add(tight);
+          inside2.add(edges[tight].from);
+          inside2.add(edges[tight].to);
+          continue;
+        }
+        let lowest = -Infinity;
+        let highest = Infinity;
+        for (const edge of edges) {
+          const from = inside2.has(edge.from);
+          const to = inside2.has(edge.to);
+          if (from === to) continue;
+          const slack = slackOf(edge, rank);
+          if (from) lowest = Math.max(lowest, -slack);
+          else highest = Math.min(highest, slack);
+        }
+        const step = lowest > -Infinity ? lowest : highest;
+        for (const node of members) if (!inside2.has(node)) rank[node] += step;
+      }
+    }
+    function walkTree(members, edges, tree) {
+      const adjacency = /* @__PURE__ */ new Map();
+      const link = (node, other) => {
+        adjacency.set(node, [...adjacency.get(node) ?? [], { node: other }]);
+      };
+      for (const index of tree) {
+        const edge = edges[index];
+        link(edge.from, edge.to);
+        link(edge.to, edge.from);
+      }
+      const parent = /* @__PURE__ */ new Map();
+      const first = /* @__PURE__ */ new Map();
+      const size = /* @__PURE__ */ new Map();
+      const order2 = [];
+      const seen = /* @__PURE__ */ new Set();
+      const root = members[0];
+      const stack = [root];
+      seen.add(root);
+      parent.set(root, -1);
+      while (stack.length > 0) {
+        const node = stack.pop();
+        first.set(node, order2.length);
+        order2.push(node);
+        for (const step of adjacency.get(node)) {
+          if (seen.has(step.node)) continue;
+          seen.add(step.node);
+          parent.set(step.node, node);
+          stack.push(step.node);
+        }
+      }
+      for (let index = order2.length - 1; index >= 0; index -= 1) {
+        const node = order2[index];
+        size.set(node, (size.get(node) ?? 0) + 1);
+        const above = parent.get(node);
+        if (above !== void 0 && above >= 0) size.set(above, (size.get(above) ?? 0) + size.get(node));
+      }
+      return { parent, first, size, order: order2 };
+    }
+    function solveComponent(size, members, edges, rank) {
+      if (members.length < 2) {
+        if (members.length === 1) rank[members[0]] = 0;
+        return;
+      }
+      const tree = /* @__PURE__ */ new Set();
+      buildTightTree(members, edges, rank, tree);
+      const spanning = tree.size === members.length - 1;
+      if (spanning) improve(size, members, edges, tree, rank);
+      let top = Infinity;
+      for (const node of members) top = Math.min(top, rank[node]);
+      for (const node of members) rank[node] -= top;
+    }
+    function improve(size, members, edges, tree, rank) {
+      const incoming = new Float64Array(size);
+      const outgoing = new Float64Array(size);
+      for (const edge of edges) {
+        outgoing[edge.from] += edge.weight;
+        incoming[edge.to] += edge.weight;
+      }
+      const cap = Math.max(50, 8 * members.length + 4 * edges.length);
+      for (let iteration = 0; iteration < cap; iteration += 1) {
+        const walk = walkTree(members, edges, tree);
+        const entering = /* @__PURE__ */ new Map();
+        const leaving = /* @__PURE__ */ new Map();
+        for (let index = walk.order.length - 1; index >= 0; index -= 1) {
+          const node = walk.order[index];
+          entering.set(node, incoming[node] + (entering.get(node) ?? 0));
+          leaving.set(node, outgoing[node] + (leaving.get(node) ?? 0));
+          const above = walk.parent.get(node);
+          if (above === void 0 || above < 0) continue;
+          entering.set(above, (entering.get(above) ?? 0) + entering.get(node));
+          leaving.set(above, (leaving.get(above) ?? 0) + leaving.get(node));
+        }
+        const holds = (node, child) => {
+          const start = walk.first.get(child);
+          const at = walk.first.get(node);
+          return at >= start && at < start + walk.size.get(child);
+        };
+        let worst = -1;
+        let worstEdge = -1;
+        let worstChild = -1;
+        for (const index of tree) {
+          const edge = edges[index];
+          const child = walk.parent.get(edge.from) === edge.to ? edge.from : edge.to;
+          const tailInside = holds(edge.from, child);
+          const value = tailInside ? leaving.get(child) - entering.get(child) : entering.get(child) - leaving.get(child);
+          if (value < 0 && (worstEdge < 0 || value < worst)) {
+            worst = value;
+            worstEdge = index;
+            worstChild = child;
+          }
+        }
+        if (worstEdge < 0) return;
+        const leavingEdge = edges[worstEdge];
+        const headInside = !holds(leavingEdge.from, worstChild);
+        const inHead = (node) => headInside ? holds(node, worstChild) : !holds(node, worstChild);
+        let enteringEdge = -1;
+        let step = Infinity;
+        for (const [index, edge] of edges.entries()) {
+          if (tree.has(index)) continue;
+          if (!inHead(edge.from) || inHead(edge.to)) continue;
+          const slack = slackOf(edge, rank);
+          if (slack < step || slack === step && (enteringEdge < 0 || index < enteringEdge)) {
+            step = slack;
+            enteringEdge = index;
+          }
+        }
+        if (enteringEdge < 0 || step === Infinity) return;
+        if (step !== 0) {
+          for (const node of members) if (inHead(node)) rank[node] += step;
+        }
+        tree.delete(worstEdge);
+        tree.add(enteringEdge);
+      }
+    }
+    function minimumLength(problem) {
+      const rank = problem.start.slice();
+      for (const members of componentsOf(problem.count, problem.edges)) {
+        const inside2 = new Set(members);
+        const local = problem.edges.filter((edge) => inside2.has(edge.from) && inside2.has(edge.to));
+        const pinned = problem.pinned !== void 0 && inside2.has(problem.pinned) ? problem.pinned : void 0;
+        const pinnedRank = pinned === void 0 ? void 0 : rank[pinned];
+        if (pinned !== void 0 && pinnedRank !== void 0 && members.every((node) => rank[node] >= pinnedRank)) {
+          for (const node of members) if (node !== pinned) local.push({ from: pinned, to: node, minLength: 0, weight: 0 });
+        }
+        solveComponent(problem.count, members, local, rank);
+      }
+      return rank;
+    }
+    
+    // src/render/layer.ts
+    function longestPath(ids, edges, index) {
+      const rank = new Array(ids.length).fill(0);
+      const pending = new Array(ids.length).fill(0);
+      const outgoing = ids.map(() => []);
+      for (const edge of edges) {
+        outgoing[index.get(edge.from)].push(index.get(edge.to));
+        pending[index.get(edge.to)] += 1;
+      }
+      const queue = [];
+      for (let node = 0; node < ids.length; node += 1) if (pending[node] === 0) queue.push(node);
+      for (let head = 0; head < queue.length; head += 1) {
+        const node = queue[head];
+        for (const target of outgoing[node]) {
+          rank[target] = Math.max(rank[target], rank[node] + 1);
+          pending[target] -= 1;
+          if (pending[target] === 0) queue.push(target);
+        }
+      }
+      return rank;
+    }
+    function layer(graph, edges) {
+      const ids = [];
+      const seen = /* @__PURE__ */ new Set();
+      for (const node of graph.nodes) {
+        if (seen.has(node.id)) continue;
+        seen.add(node.id);
+        ids.push(node.id);
+      }
+      const index = new Map(ids.map((id, offset) => [id, offset]));
+      const forward = edges.filter((edge) => index.has(edge.from) && index.has(edge.to) && edge.from !== edge.to);
+      const rankEdges = forward.map((edge) => ({
+        from: index.get(edge.from),
+        to: index.get(edge.to),
+        minLength: 1,
+        weight: 1
+      }));
+      let pinned;
+      if (graph.init !== void 0 && index.has(graph.init)) {
+        const start = index.get(graph.init);
+        const forced = forward.some((edge) => edge.to === graph.init);
+        if (!forced) pinned = start;
+      }
+      const rank = minimumLength({ count: ids.length, edges: rankEdges, start: longestPath(ids, forward, index), ...pinned === void 0 ? {} : { pinned } });
+      const layers = [];
+      for (const [offset, id] of ids.entries()) {
+        const depth = rank[offset];
+        while (layers.length <= depth) layers.push([]);
+        layers[depth].push(id);
+      }
+      const layerOf = new Map(ids.map((id, offset) => [id, rank[offset]]));
+      return { layers, layerOf };
+    }
+    
     // src/render/layout.ts
     function rankStates(nodes, edges, init) {
       const ids = nodes.map((node) => node.id);
       const known = new Set(ids);
       const start = init !== void 0 && known.has(init) ? init : ids[0];
       const outgoing = /* @__PURE__ */ new Map();
-      const incoming = /* @__PURE__ */ new Map();
       for (const edge of edges) {
         if (!known.has(edge.from) || !known.has(edge.to)) continue;
         outgoing.set(edge.from, [...outgoing.get(edge.from) ?? [], edge.to]);
-        incoming.set(edge.to, [...incoming.get(edge.to) ?? [], edge.from]);
       }
       const depth = /* @__PURE__ */ new Map();
       if (start !== void 0) {
@@ -72,40 +899,224 @@ window.__ModuleLoader__.load({
       }
       return { rows, unreachable: ids.filter((id) => !depth.has(id)) };
     }
+    function seedOrder(graph) {
+      const ranked = rankStates(graph.nodes, graph.edges, graph.init);
+      const order2 = /* @__PURE__ */ new Map();
+      let index = 0;
+      for (const row of ranked.rows) for (const id of row) order2.set(id, index++);
+      for (const id of ranked.unreachable) order2.set(id, index++);
+      return order2;
+    }
+    
+    // src/render/order.ts
+    function locate(layers) {
+      const found = /* @__PURE__ */ new Map();
+      layers.forEach((layer2, depth) => layer2.forEach((id, index) => found.set(id, { layer: depth, index })));
+      return found;
+    }
+    function medianOf(id, neighbours, reference2, positions2) {
+      const found = (neighbours.get(id) ?? []).filter((other) => positions2.get(other)?.layer === reference2).map((other) => positions2.get(other).index).sort((left, right) => left - right);
+      if (found.length === 0) return positions2.get(id).index;
+      const middle = Math.floor(found.length / 2);
+      return found.length % 2 === 1 ? found[middle] : (found[middle - 1] + found[middle]) / 2;
+    }
+    function countCrossings(layers, chains) {
+      const positions2 = locate(layers);
+      const segments = /* @__PURE__ */ new Map();
+      for (const chain of chains) {
+        for (let cursor = 0; cursor + 1 < chain.path.length; cursor += 1) {
+          const top = positions2.get(chain.path[cursor]);
+          const bottom = positions2.get(chain.path[cursor + 1]);
+          if (top === void 0 || bottom === void 0 || bottom.layer !== top.layer + 1) continue;
+          const list = segments.get(top.layer) ?? [];
+          list.push({ top: top.index, bottom: bottom.index });
+          segments.set(top.layer, list);
+        }
+      }
+      let crossings = 0;
+      for (const list of segments.values()) {
+        for (let left = 0; left < list.length; left += 1) {
+          for (let right = left + 1; right < list.length; right += 1) {
+            if ((list[left].top - list[right].top) * (list[left].bottom - list[right].bottom) < 0) crossings += 1;
+          }
+        }
+      }
+      return crossings;
+    }
+    function order(seedLayers, chains, seed) {
+      const layers = seedLayers.map(
+        (layer2) => layer2.map((id, index) => ({ id, index })).sort((left, right) => (seed?.get(left.id) ?? Infinity) - (seed?.get(right.id) ?? Infinity) || left.index - right.index).map((entry) => entry.id)
+      );
+      const down = /* @__PURE__ */ new Map();
+      const up = /* @__PURE__ */ new Map();
+      for (const chain of chains) {
+        for (let cursor = 0; cursor + 1 < chain.path.length; cursor += 1) {
+          const top = chain.path[cursor];
+          const bottom = chain.path[cursor + 1];
+          down.set(top, [...down.get(top) ?? [], bottom]);
+          up.set(bottom, [...up.get(bottom) ?? [], top]);
+        }
+      }
+      let positions2 = locate(layers);
+      for (let round = 0; round < 4; round += 1) {
+        for (let depth = 1; depth < layers.length; depth += 1) {
+          const layer2 = layers[depth];
+          const sorted = layer2.map((id, index) => ({ id, index, median: medianOf(id, up, depth - 1, positions2) })).sort((left, right) => left.median - right.median || left.index - right.index).map((entry) => entry.id);
+          layers[depth] = sorted;
+          positions2 = locate(layers);
+        }
+        for (let depth = layers.length - 2; depth >= 0; depth -= 1) {
+          const layer2 = layers[depth];
+          const sorted = layer2.map((id, index) => ({ id, index, median: medianOf(id, down, depth + 1, positions2) })).sort((left, right) => left.median - right.median || left.index - right.index).map((entry) => entry.id);
+          layers[depth] = sorted;
+          positions2 = locate(layers);
+        }
+      }
+      let crossings = countCrossings(layers, chains);
+      for (let pass = 0; pass < 4; pass += 1) {
+        let improved = false;
+        for (const layer2 of layers) {
+          for (let index = 0; index + 1 < layer2.length; index += 1) {
+            const before = layer2[index];
+            layer2[index] = layer2[index + 1];
+            layer2[index + 1] = before;
+            const next = countCrossings(layers, chains);
+            if (next < crossings) {
+              crossings = next;
+              improved = true;
+            } else {
+              layer2[index + 1] = layer2[index];
+              layer2[index] = before;
+            }
+          }
+        }
+        if (!improved) break;
+      }
+      return { layers, crossings };
+    }
+    
+    // src/render/text.ts
+    var CHAR_WIDTH = 6.6;
+    var MAX_LINE_CHARS = 30;
+    var LINE_HEIGHT = 15;
+    var TEXT_PADDING = 12;
+    var MIN_NODE_WIDTH = 88;
+    var MAX_NODE_WIDTH = 260;
+    var BREAK = /<br\s*\/?>|\r?\n/gi;
+    function explicitLines(label) {
+      return label.split(BREAK).map((line) => line.trim());
+    }
+    function wrapLine(line, limit = MAX_LINE_CHARS) {
+      if (line === "") return [""];
+      const out = [];
+      let current = "";
+      for (const word of line.split(/\s+/).filter((part) => part !== "")) {
+        const candidate = current === "" ? word : current + " " + word;
+        if (candidate.length <= limit) {
+          current = candidate;
+          continue;
+        }
+        if (current !== "") out.push(current);
+        if (word.length <= limit) {
+          current = word;
+          continue;
+        }
+        let rest = word;
+        while (rest.length > limit) {
+          out.push(rest.slice(0, limit));
+          rest = rest.slice(limit);
+        }
+        current = rest;
+      }
+      if (current !== "") out.push(current);
+      return out.length === 0 ? [""] : out;
+    }
+    function measure(label) {
+      const lines = explicitLines(label).flatMap((line) => wrapLine(line));
+      const longest = lines.reduce((max, line) => Math.max(max, line.length), 0);
+      const width = Math.min(MAX_NODE_WIDTH, Math.max(MIN_NODE_WIDTH, longest * CHAR_WIDTH + TEXT_PADDING * 2));
+      const height = lines.length * LINE_HEIGHT + TEXT_PADDING;
+      return { lines, width, height };
+    }
+    function textWidth(text2) {
+      return text2.length * CHAR_WIDTH;
+    }
+    
+    // src/render/wrap.ts
+    var PAGE_ASPECT2 = 1.6;
+    var MIN_LAYERS_TO_WRAP = 4;
+    var STRIP_RATIO = 2;
+    function runHeight(layerHeight, first, last, gap) {
+      let total = 0;
+      for (let index = first; index <= last; index += 1) {
+        total += layerHeight[index];
+        if (index < last) total += gap;
+      }
+      return total;
+    }
+    function runWidth(layerWidth, first, last) {
+      let widest = 0;
+      for (let index = first; index <= last; index += 1) widest = Math.max(widest, layerWidth[index]);
+      return widest;
+    }
+    function shapeError(width, height, aspect) {
+      if (width <= 0 || height <= 0) return Infinity;
+      const ratio = Math.max(width, height) / Math.min(width, height);
+      return Math.abs(Math.log(ratio / aspect));
+    }
+    function planBands(layerWidth, layerHeight, gap, aspect = PAGE_ASPECT2) {
+      const count = layerWidth.length;
+      if (count === 0) return { bands: [], width: 0, height: 0 };
+      const single = {
+        bands: [{ first: 0, last: count - 1, offsetX: 0 }],
+        width: runWidth(layerWidth, 0, count - 1),
+        height: runHeight(layerHeight, 0, count - 1, gap)
+      };
+      if (count < MIN_LAYERS_TO_WRAP || single.height <= single.width * STRIP_RATIO) return single;
+      const columnGap = gap * 2;
+      let best = single;
+      let bestError = shapeError(single.width, single.height, aspect);
+      for (let bands = 2; bands < count; bands += 1) {
+        const base = Math.floor(count / bands);
+        const extra = count % bands;
+        const ranges = [];
+        let cursor = 0;
+        for (let band = 0; band < bands; band += 1) {
+          const size = base + (band < extra ? 1 : 0);
+          ranges.push({ first: cursor, last: cursor + size - 1 });
+          cursor += size;
+        }
+        let width = columnGap * (bands - 1);
+        let height = 0;
+        for (const range of ranges) {
+          width += runWidth(layerWidth, range.first, range.last);
+          height = Math.max(height, runHeight(layerHeight, range.first, range.last, gap));
+        }
+        if (shapeError(width, height, aspect) >= bestError) continue;
+        const planned = [];
+        let offsetX = 0;
+        for (const range of ranges) {
+          planned.push({ first: range.first, last: range.last, offsetX });
+          offsetX += runWidth(layerWidth, range.first, range.last) + columnGap;
+        }
+        best = { bands: planned, width, height };
+        bestError = shapeError(width, height, aspect);
+      }
+      return best;
+    }
     
     // src/render/place.ts
     var MARGIN = 20;
-    var NODE_HEIGHT = 34;
-    var ROW_GAP = 58;
-    var COLUMN_GAP = 30;
-    var MIN_NODE_WIDTH = 88;
-    var MAX_NODE_WIDTH = 220;
-    var CHAR_WIDTH = 7.2;
+    var LAYER_GAP = 44;
+    var LABELLED_LAYER_GAP = 54;
+    var NODE_GAP = 30;
+    var LANE_CLEARANCE = 12;
+    var LANE_SPACING = 14;
+    var COMPONENT_GAP = 30;
     var GROUP_PADDING = 10;
     var GROUP_HEADER = 16;
-    var BLOCK_GAP = 14;
-    var nodeWidth = (label) => Math.min(MAX_NODE_WIDTH, Math.max(MIN_NODE_WIDTH, label.length * CHAR_WIDTH + 26));
-    function placeByRanks(diagram, nodes, top) {
-      const ranked = rankStates(diagram.nodes, diagram.edges, diagram.init);
-      const rows = [...ranked.rows];
-      if (ranked.unreachable.length > 0) rows.push(ranked.unreachable);
-      const boxes = /* @__PURE__ */ new Map();
-      let widest = 0;
-      rows.forEach((row, index) => {
-        const widths = row.map((id) => nodeWidth(id));
-        widest = Math.max(widest, widths.reduce((total, width) => total + width, 0) + Math.max(0, row.length - 1) * COLUMN_GAP);
-        let x = 0;
-        row.forEach((id, position) => {
-          boxes.set(id, { x, y: top + index * (NODE_HEIGHT + ROW_GAP), width: widths[position], height: NODE_HEIGHT });
-          x += widths[position] + COLUMN_GAP;
-        });
-      });
-      rows.forEach((row) => {
-        const rowWidth = row.reduce((total, id) => total + boxes.get(id).width, 0) + Math.max(0, row.length - 1) * COLUMN_GAP;
-        const offset = (widest - rowWidth) / 2;
-        for (const id of row) boxes.get(id).x += offset + MARGIN;
-      });
-      return { boxes, groupRects: /* @__PURE__ */ new Map(), width: widest + MARGIN * 2 };
+    function textOf(node) {
+      return measure(node.label !== void 0 && node.label !== "" ? node.label : node.id);
     }
     function groupTree(groups) {
       const byId = new Map(groups.map((group) => [group.id, group]));
@@ -162,69 +1173,619 @@ window.__ModuleLoader__.load({
         if (parent === void 0) roots.push(group.id);
         else children.set(parent, [...children.get(parent) ?? [], group.id]);
       }
-      return { owner, children, roots };
+      return { owner, parentOf, children, roots };
+    }
+    function place(diagram, top) {
+      const groups = diagram.groups ?? [];
+      const nodes = [];
+      const seenNode = /* @__PURE__ */ new Set();
+      for (const node of diagram.nodes) {
+        if (seenNode.has(node.id)) continue;
+        seenNode.add(node.id);
+        nodes.push(node);
+      }
+      const nodeById = new Map(nodes.map((node) => [node.id, node]));
+      const groupById = new Map(groups.map((group) => [group.id, group]));
+      const tree = groupTree(groups);
+      const appearance = /* @__PURE__ */ new Map();
+      for (const node of nodes) if (!appearance.has(node.id)) appearance.set(node.id, appearance.size);
+      for (const group of groups) if (!appearance.has(group.id)) appearance.set(group.id, appearance.size);
+      const visible = /* @__PURE__ */ new Set();
+      const asked = /* @__PURE__ */ new Map();
+      const isVisible = (id) => {
+        const known = asked.get(id);
+        if (known !== void 0) return known;
+        const group = groupById.get(id);
+        let found = false;
+        for (const member of group.members) {
+          if (tree.owner.get(member) === id && nodeById.has(member)) {
+            found = true;
+            break;
+          }
+        }
+        if (!found) {
+          for (const child of tree.children.get(id) ?? []) {
+            if (isVisible(child)) {
+              found = true;
+              break;
+            }
+          }
+        }
+        asked.set(id, found);
+        if (found) visible.add(id);
+        return found;
+      };
+      for (const group of groups) isVisible(group.id);
+      const directNodes = (scope) => nodes.filter((node) => tree.owner.get(node.id) === scope).map((node) => node.id);
+      const directGroups = (scope) => (tree.children.get(scope) ?? []).filter((child) => visible.has(child));
+      const firstIndexCache = /* @__PURE__ */ new Map();
+      const firstIndexOf = (id) => {
+        const cached = firstIndexCache.get(id);
+        if (cached !== void 0) return cached;
+        if (nodeById.has(id)) return appearance.get(id);
+        const members = groupById.get(id).members.filter((member) => tree.owner.get(member) === id && nodeById.has(member)).map((member) => appearance.get(member));
+        const children = directGroups(id).map(firstIndexOf);
+        const all = [...members, ...children];
+        const found = Math.min(...all);
+        firstIndexCache.set(id, found);
+        return found;
+      };
+      const entityAt = (scope, id) => {
+        const boundary = groupById.get(id);
+        if (boundary !== void 0) {
+          if (!visible.has(id)) return void 0;
+          if (scope === void 0) {
+            let cursor = id;
+            while (tree.parentOf.has(cursor)) cursor = tree.parentOf.get(cursor);
+            return cursor;
+          }
+          return tree.parentOf.get(id) === scope ? id : void 0;
+        }
+        if (!nodeById.has(id)) return void 0;
+        const group = tree.owner.get(id);
+        if (scope === void 0) {
+          if (group === void 0 || !visible.has(group)) return id;
+          let cursor = group;
+          while (tree.parentOf.has(cursor)) cursor = tree.parentOf.get(cursor);
+          return cursor;
+        }
+        if (group === scope) return id;
+        if (group === void 0) return void 0;
+        return tree.parentOf.get(group) === scope && visible.has(group) ? group : void 0;
+      };
+      const groupLayouts = /* @__PURE__ */ new Map();
+      const measureGroup = (id) => {
+        const inside2 = buildLevel(id);
+        const size = {
+          width: Math.max(MIN_NODE_WIDTH, inside2.width) + GROUP_PADDING * 2,
+          height: inside2.height + GROUP_HEADER + GROUP_PADDING * 2
+        };
+        groupLayouts.set(id, inside2);
+        return size;
+      };
+      const entityOf = (id) => {
+        const node = nodeById.get(id);
+        if (node !== void 0) {
+          const text2 = textOf(node);
+          return { id, group: false, width: text2.width, height: text2.height };
+        }
+        const size = measureGroup(id);
+        return { id, group: true, width: size.width, height: size.height };
+      };
+      const entitiesIn = (scope) => {
+        const found = [];
+        if (scope === void 0) {
+          for (const node of nodes) {
+            const group = tree.owner.get(node.id);
+            if (group === void 0 || !visible.has(group)) found.push(entityOf(node.id));
+          }
+          for (const root2 of tree.roots) if (visible.has(root2)) found.push(entityOf(root2));
+        } else {
+          for (const id of directNodes(scope)) found.push(entityOf(id));
+          for (const id of directGroups(scope)) found.push(entityOf(id));
+        }
+        return found.sort((left, right2) => firstIndexOf(left.id) - firstIndexOf(right2.id));
+      };
+      const edgesIn = (scope) => {
+        const found = [];
+        diagram.edges.forEach((edge, index) => {
+          if (edge.from === edge.to) return;
+          const from = entityAt(scope, edge.from);
+          const to = entityAt(scope, edge.to);
+          if (from === void 0 || to === void 0 || from === to) return;
+          found.push({ index, from, to });
+        });
+        return found;
+      };
+      const pinnedAt = (scope) => {
+        if (diagram.init === void 0) return void 0;
+        const entity = entityAt(scope, diagram.init);
+        return entity === diagram.init || entity !== void 0 && groupById.has(entity) ? entity : void 0;
+      };
+      const layoutPiece = (entities, edges, pinned, seed) => {
+        const byId = new Map(entities.map((entity) => [entity.id, entity]));
+        const graph = {
+          nodes: entities.map((entity) => ({ id: entity.id, width: entity.width, height: entity.height })),
+          edges,
+          ...pinned === void 0 ? {} : { init: pinned }
+        };
+        const broken = breakCycles(graph);
+        const layered = layer(graph, broken.edges);
+        const augmented = addDummies(layered, broken.edges);
+        const ordered = order(augmented.layers, augmented.chains, seed);
+        const gap = edges.some((edge) => diagram.edges[edge.index].label !== "") ? LABELLED_LAYER_GAP : LAYER_GAP;
+        const coordinates = assignCoordinates(
+          {
+            layers: ordered.layers,
+            chains: augmented.chains,
+            sizeOf: (id) => {
+              const entity = byId.get(id);
+              return { width: entity.width, height: entity.height };
+            },
+            chainOf: augmented.chainOf
+          },
+          { gap: NODE_GAP, layerGap: gap }
+        );
+        const bands = planBands(coordinates.layerWidth, coordinates.layerHeight, gap);
+        const bandOfLayer = new Array(coordinates.layerHeight.length).fill(0);
+        bands.bands.forEach((band, index) => {
+          for (let depth = band.first; depth <= band.last; depth += 1) bandOfLayer[depth] = index;
+        });
+        const layerTop = [];
+        for (const band of bands.bands) {
+          let y = 0;
+          for (let depth = band.first; depth <= band.last; depth += 1) {
+            layerTop[depth] = y;
+            y += coordinates.layerHeight[depth] + gap;
+          }
+        }
+        const items = /* @__PURE__ */ new Map();
+        ordered.layers.forEach((row, depth) => {
+          const shift = bands.bands[bandOfLayer[depth]].offsetX;
+          const top2 = layerTop[depth];
+          const rowHeight = coordinates.layerHeight[depth];
+          for (const id of row) {
+            const entity = byId.get(id);
+            if (entity === void 0) continue;
+            const centre = coordinates.x.get(id);
+            items.set(id, {
+              box: {
+                x: centre + shift - entity.width / 2,
+                y: top2 + (rowHeight - entity.height) / 2,
+                width: entity.width,
+                height: entity.height
+              },
+              group: entity.group
+            });
+          }
+        });
+        const across2 = /* @__PURE__ */ new Set();
+        for (const edge of edges) {
+          const from = layered.layerOf.get(edge.from);
+          const to = layered.layerOf.get(edge.to);
+          if (bandOfLayer[from] !== bandOfLayer[to]) across2.add(edge.index);
+        }
+        const laneProposal = /* @__PURE__ */ new Map();
+        for (const chain of augmented.chains) {
+          if (chain.path.length <= 2) continue;
+          const lane = augmented.chainOf.get(chain.path[1]);
+          const fromLayer = layered.layerOf.get(chain.path[0]);
+          const proposed = coordinates.x.get(lane);
+          laneProposal.set(lane, proposed + bands.bands[bandOfLayer[fromLayer]].offsetX);
+        }
+        const itemBoxes = /* @__PURE__ */ new Map();
+        for (const [id, item] of items) itemBoxes.set(id, item.box);
+        const channels = assignChannels(
+          {
+            layers: ordered.layers,
+            chains: augmented.chains,
+            chainOf: augmented.chainOf,
+            boxes: itemBoxes,
+            layerY: layerTop,
+            layerHeight: coordinates.layerHeight,
+            laneX: laneProposal
+          },
+          { clearance: LANE_CLEARANCE, spacing: LANE_SPACING }
+        );
+        const lanes3 = /* @__PURE__ */ new Map();
+        for (const chain of augmented.chains) {
+          if (chain.path.length <= 2) continue;
+          const start = byId.get(chain.path[0]);
+          const end = byId.get(chain.path[chain.path.length - 1]);
+          if (start.group || end.group) continue;
+          const fromLayer = layered.layerOf.get(chain.path[0]);
+          const toLayer = layered.layerOf.get(chain.path[chain.path.length - 1]);
+          if (bandOfLayer[fromLayer] !== bandOfLayer[toLayer]) continue;
+          const channel = channels.lanes.get(chain.index);
+          lanes3.set(chain.index, {
+            points: channel.y.map((y) => ({ x: channel.x, y })),
+            reversed: broken.reversed.has(chain.index)
+          });
+        }
+        const runs2 = /* @__PURE__ */ new Map();
+        for (const [edgeIndex, y] of channels.runs) if (!across2.has(edgeIndex)) runs2.set(edgeIndex, y);
+        let right2 = 0;
+        let bottom = 0;
+        for (const entry of items.values()) {
+          right2 = Math.max(right2, entry.box.x + entry.box.width);
+          bottom = Math.max(bottom, entry.box.y + entry.box.height);
+        }
+        return { width: right2, height: bottom, items, lanes: lanes3, runs: runs2, across: across2 };
+      };
+      function buildLevel(scope) {
+        const entities = entitiesIn(scope);
+        if (entities.length === 0) {
+          return { width: 0, height: 0, items: /* @__PURE__ */ new Map(), lanes: /* @__PURE__ */ new Map(), runs: /* @__PURE__ */ new Map(), across: /* @__PURE__ */ new Set() };
+        }
+        const edges = edgesIn(scope);
+        const pinned = pinnedAt(scope);
+        const seed = seedOrder({ nodes: entities.map((entity) => ({ id: entity.id, width: entity.width, height: entity.height })), edges, ...pinned === void 0 ? {} : { init: pinned } });
+        const components = weakComponents(entities, edges);
+        const pieces = [];
+        for (const members of components) {
+          const inside2 = new Set(members);
+          const pieceEntities = entities.filter((entity) => inside2.has(entity.id));
+          const pieceEdges = edges.filter((edge) => inside2.has(edge.from) && inside2.has(edge.to));
+          const pin = pinned !== void 0 && inside2.has(pinned) ? pinned : void 0;
+          pieces.push(layoutPiece(pieceEntities, pieceEdges, pin, seed));
+        }
+        const packed = packRectangles(pieces.map((piece) => ({ width: piece.width, height: piece.height })), { gap: COMPONENT_GAP });
+        const layout = { width: packed.width, height: packed.height, items: /* @__PURE__ */ new Map(), lanes: /* @__PURE__ */ new Map(), runs: /* @__PURE__ */ new Map(), across: /* @__PURE__ */ new Set() };
+        pieces.forEach((piece, index) => {
+          for (const edgeIndex of piece.across) layout.across.add(edgeIndex);
+          const at = packed.placements[index];
+          for (const [id, item] of piece.items) {
+            layout.items.set(id, { box: { x: item.box.x + at.x, y: item.box.y + at.y, width: item.box.width, height: item.box.height }, group: item.group });
+          }
+          for (const [edgeIndex, lane] of piece.lanes) {
+            layout.lanes.set(edgeIndex, { points: lane.points.map((point) => ({ x: point.x + at.x, y: point.y + at.y })), reversed: lane.reversed });
+          }
+          for (const [edgeIndex, y] of piece.runs) layout.runs.set(edgeIndex, y + at.y);
+        });
+        return layout;
+      }
+      const root = buildLevel(void 0);
+      const boxes = /* @__PURE__ */ new Map();
+      const groupRects = /* @__PURE__ */ new Map();
+      const lanes2 = /* @__PURE__ */ new Map();
+      const runs = /* @__PURE__ */ new Map();
+      const across = /* @__PURE__ */ new Set();
+      const placeLevel = (layout, originX, originY) => {
+        for (const edgeIndex of layout.across) across.add(edgeIndex);
+        for (const [id, item] of layout.items) {
+          const box = { x: originX + item.box.x, y: originY + item.box.y, width: item.box.width, height: item.box.height };
+          if (item.group) {
+            groupRects.set(id, box);
+            const inside2 = groupLayouts.get(id);
+            placeLevel(inside2, box.x + (box.width - inside2.width) / 2, box.y + GROUP_HEADER + GROUP_PADDING);
+            continue;
+          }
+          boxes.set(id, box);
+        }
+        for (const [edgeIndex, lane] of layout.lanes) {
+          lanes2.set(edgeIndex, { points: lane.points.map((point) => ({ x: point.x + originX, y: point.y + originY })), reversed: lane.reversed });
+        }
+        for (const [edgeIndex, y] of layout.runs) runs.set(edgeIndex, y + originY);
+      };
+      placeLevel(root, MARGIN, top);
+      let right = MARGIN;
+      for (const box of boxes.values()) right = Math.max(right, box.x + box.width);
+      for (const box of groupRects.values()) right = Math.max(right, box.x + box.width);
+      return { boxes, groupRects, width: right + MARGIN, lanes: lanes2, runs, across };
+    }
+    
+    // src/render/route.ts
+    var LANE_GAP = 10;
+    var ROUTE_STUB = 16;
+    function normalOf(side) {
+      switch (side) {
+        case "top":
+          return { x: 0, y: -1 };
+        case "bottom":
+          return { x: 0, y: 1 };
+        case "left":
+          return { x: -1, y: 0 };
+        case "right":
+          return { x: 1, y: 0 };
+      }
+    }
+    var BEND_COST = 24;
+    function crossesBox(x1, y1, x2, y2, box) {
+      const minX = box.x + 0.5;
+      const maxX = box.x + box.width - 0.5;
+      const minY = box.y + 0.5;
+      const maxY = box.y + box.height - 0.5;
+      if (Math.abs(y1 - y2) < 1e-3) {
+        const y = y1;
+        if (y <= minY || y >= maxY) return false;
+        return Math.max(x1, x2) > minX && Math.min(x1, x2) < maxX;
+      }
+      if (Math.abs(x1 - x2) < 1e-3) {
+        const x = x1;
+        if (x <= minX || x >= maxX) return false;
+        return Math.max(y1, y2) > minY && Math.min(y1, y2) < maxY;
+      }
+      const steps = Math.max(8, Math.round(Math.hypot(x2 - x1, y2 - y1)));
+      for (let index = 0; index <= steps; index += 1) {
+        const x = x1 + (x2 - x1) * index / steps;
+        const y = y1 + (y2 - y1) * index / steps;
+        if (x > minX && x < maxX && y > minY && y < maxY) return true;
+      }
+      return false;
+    }
+    function anchor(box, side) {
+      switch (side) {
+        case "top":
+          return { x: box.x + box.width / 2, y: box.y };
+        case "bottom":
+          return { x: box.x + box.width / 2, y: box.y + box.height };
+        case "left":
+          return { x: box.x, y: box.y + box.height / 2 };
+        case "right":
+          return { x: box.x + box.width, y: box.y + box.height / 2 };
+      }
+    }
+    function approachSides(from, to) {
+      const fromCy = from.y + from.height / 2;
+      const toCy = to.y + to.height / 2;
+      if (Math.abs(toCy - fromCy) > 0.5) return toCy > fromCy ? { exit: "bottom", entry: "top" } : { exit: "top", entry: "bottom" };
+      const fromCx = from.x + from.width / 2;
+      const toCx = to.x + to.width / 2;
+      return toCx >= fromCx ? { exit: "right", entry: "left" } : { exit: "left", entry: "right" };
+    }
+    function lanes(obstacles, extra) {
+      const values = new Set(extra);
+      for (const box of obstacles) {
+        values.add(box.x - LANE_GAP);
+        values.add(box.x + box.width + LANE_GAP);
+        values.add(box.y - LANE_GAP);
+        values.add(box.y + box.height + LANE_GAP);
+      }
+      return [...values].sort((left, right) => left - right);
+    }
+    function facesAway(side, port, other) {
+      const normal = normalOf(side);
+      return normal.x * (other.x + other.width / 2 - port.x) + normal.y * (other.y + other.height / 2 - port.y) < 0;
+    }
+    function routeEdge(from, to, obstacles, anchors) {
+      const sides = approachSides(from, to);
+      const exitSide = anchors?.exitSide ?? sides.exit;
+      const entrySide = anchors?.entrySide ?? sides.entry;
+      const exit = anchors?.exit ?? anchor(from, exitSide);
+      const entry = anchors?.entry ?? anchor(to, entrySide);
+      const others = obstacles.filter((box) => box !== from && box !== to);
+      const own = [];
+      if (facesAway(exitSide, exit, to)) own.push(from);
+      if (facesAway(entrySide, entry, from)) own.push(to);
+      const blockers = own.length === 0 ? others : [...others, ...own];
+      const blockedStub = (point) => blockers.some((box) => point.x > box.x && point.x < box.x + box.width && point.y > box.y && point.y < box.y + box.height);
+      const outNormal = normalOf(exitSide);
+      const inNormal = normalOf(entrySide);
+      let exitStub = { x: exit.x + outNormal.x * ROUTE_STUB, y: exit.y + outNormal.y * ROUTE_STUB };
+      let entryStub = { x: entry.x + inNormal.x * ROUTE_STUB, y: entry.y + inNormal.y * ROUTE_STUB };
+      if (blockedStub(exitStub) || blockedStub(entryStub)) {
+        exitStub = exit;
+        entryStub = entry;
+      }
+      const straight = [exit, exitStub, entryStub, entry];
+      const axisAligned = Math.abs(exitStub.x - entryStub.x) < 0.5 || Math.abs(exitStub.y - entryStub.y) < 0.5;
+      if (axisAligned && !blockers.some((box) => crossesBox(exitStub.x, exitStub.y, entryStub.x, entryStub.y, box))) {
+        return { points: simplify(straight), routed: false };
+      }
+      const xs = lanes(blockers, [exitStub.x, entryStub.x]);
+      const ys = lanes(blockers, [exitStub.y, entryStub.y]);
+      const blocked = (x1, y1, x2, y2) => blockers.some((box) => crossesBox(x1, y1, x2, y2, box));
+      const start = { point: exitStub, axis: -1, cost: 0, bends: 0, path: exitStub === exit ? [exit] : [exit, exitStub] };
+      const queue = [start];
+      const best = /* @__PURE__ */ new Map();
+      const key = (point) => String(Math.round(point.x)) + "," + String(Math.round(point.y));
+      while (queue.length > 0) {
+        let index = 0;
+        for (let cursor = 1; cursor < queue.length; cursor += 1) if (queue[cursor].cost < queue[index].cost) index = cursor;
+        const current = queue.splice(index, 1)[0];
+        if (current.cost > (best.get(key(current.point)) ?? Infinity)) continue;
+        if (Math.abs(current.point.x - entryStub.x) < 0.5 && Math.abs(current.point.y - entryStub.y) < 0.5) {
+          return { points: simplify([...current.path, entryStub, entry]), routed: true };
+        }
+        const options = [];
+        for (const x of xs) if (Math.abs(x - current.point.x) > 0.5) options.push({ x, y: current.point.y });
+        for (const y of ys) if (Math.abs(y - current.point.y) > 0.5) options.push({ x: current.point.x, y });
+        for (const next of options) {
+          if (blocked(current.point.x, current.point.y, next.x, next.y)) continue;
+          const axis = Math.abs(next.y - current.point.y) < 0.5 ? 0 : 1;
+          const bend = current.axis === -1 || current.axis === axis ? 0 : 1;
+          const cost = current.cost + Math.abs(next.x - current.point.x) + Math.abs(next.y - current.point.y) + bend * BEND_COST;
+          const state = key(next);
+          if (cost >= (best.get(state) ?? Infinity)) continue;
+          best.set(state, cost);
+          queue.push({ point: next, axis, cost, bends: current.bends + bend, path: [...current.path, next] });
+        }
+      }
+      return { points: simplify(straight), routed: false };
+    }
+    function simplify(points) {
+      if (points.length <= 2) return points;
+      const out = [points[0]];
+      for (let index = 1; index < points.length - 1; index += 1) {
+        const previous = out[out.length - 1];
+        const current = points[index];
+        const next = points[index + 1];
+        const collinear = Math.abs(previous.x - current.x) < 0.5 && Math.abs(current.x - next.x) < 0.5 || Math.abs(previous.y - current.y) < 0.5 && Math.abs(current.y - next.y) < 0.5;
+        if (!collinear) out.push(current);
+      }
+      out.push(points[points.length - 1]);
+      return out;
+    }
+    
+    // src/render/trunk.ts
+    var TRUNK_MIN_EDGES = 3;
+    function isVerticalSide(side) {
+      return side === "top" || side === "bottom";
+    }
+    function trunkAt(box, side) {
+      if (side === "top") return box.y - ROUTE_STUB;
+      if (side === "bottom") return box.y + box.height + ROUTE_STUB;
+      if (side === "left") return box.x - ROUTE_STUB;
+      return box.x + box.width + ROUTE_STUB;
+    }
+    function alongSide(point, side) {
+      return isVerticalSide(side) ? point.x : point.y;
+    }
+    function alongNormal(point, side) {
+      return isVerticalSide(side) ? point.y : point.x;
+    }
+    function facesTrunk(point, side, at) {
+      const normal = normalOf(side);
+      const outward = isVerticalSide(side) ? normal.y : normal.x;
+      return (at - alongNormal(point, side)) * outward > 0.5;
+    }
+    function keyOf(end) {
+      return end.to + "\0" + end.entry + "\0" + (end.arrow ?? "");
+    }
+    function clearSegment(boxes, skip, x1, y1, x2, y2) {
+      for (const box of boxes) {
+        if (skip.includes(box)) continue;
+        if (crossesBox(x1, y1, x2, y2, box)) return false;
+      }
+      return true;
+    }
+    function onOneLine(group, side, at, low, high) {
+      if (isVerticalSide(group.side) !== isVerticalSide(side)) return false;
+      if (group.at !== at) return false;
+      return Math.min(group.to, high) - Math.max(group.from, low) > 0.5;
+    }
+    function planTrunks(input) {
+      const groups = [];
+      const groupOf = /* @__PURE__ */ new Map();
+      const buckets = /* @__PURE__ */ new Map();
+      for (const end of input.ends) {
+        if (end.runY === void 0) continue;
+        if (isVerticalSide(end.exit) !== isVerticalSide(end.entry)) continue;
+        const source = input.boxOf(end.from);
+        const target = input.boxOf(end.to);
+        if (source === void 0 || target === void 0) continue;
+        if (source === target) continue;
+        const exit = input.exitPortOf(end.index);
+        if (exit === void 0) continue;
+        const at = trunkAt(target, end.entry);
+        if (!facesTrunk(exit, end.exit, at)) continue;
+        const candidate = { end, source, target, at, exit, branch: alongSide(exit, end.exit) };
+        const key = keyOf(end);
+        const list = buckets.get(key);
+        if (list === void 0) buckets.set(key, [candidate]);
+        else list.push(candidate);
+      }
+      for (const list of buckets.values()) {
+        const bySource = /* @__PURE__ */ new Map();
+        for (const candidate of list) {
+          const seen = bySource.get(candidate.end.from);
+          if (seen === void 0) bySource.set(candidate.end.from, [candidate]);
+          else seen.push(candidate);
+        }
+        const members = list.filter((candidate) => bySource.get(candidate.end.from).length === 1);
+        if (members.length < TRUNK_MIN_EDGES) continue;
+        const target = members[0].target;
+        const side = members[0].end.entry;
+        const at = members[0].at;
+        const entryAlong = isVerticalSide(side) ? target.x + target.width / 2 : target.y + target.height / 2;
+        let lead = members[0];
+        for (const candidate of members) {
+          if (Math.abs(candidate.branch - entryAlong) < Math.abs(lead.branch - entryAlong) - 1e-9) lead = candidate;
+        }
+        let low = entryAlong;
+        let high = entryAlong;
+        for (const candidate of members) {
+          low = Math.min(low, candidate.branch);
+          high = Math.max(high, candidate.branch);
+        }
+        const vertical = isVerticalSide(side);
+        const run = vertical ? [low, at, high, at] : [at, low, at, high];
+        if (!clearSegment(input.boxes, [target], run[0], run[1], run[2], run[3])) continue;
+        let blocked = false;
+        for (const candidate of members) {
+          const drop = vertical ? [candidate.branch, candidate.exit.y, candidate.branch, at] : [candidate.exit.x, candidate.branch, at, candidate.branch];
+          if (!clearSegment(input.boxes, [candidate.source, target], drop[0], drop[1], drop[2], drop[3])) blocked = true;
+        }
+        if (blocked) continue;
+        if (groups.some((group) => onOneLine(group, side, at, low, high))) continue;
+        const id = groups.length;
+        groups.push({
+          id,
+          target: members[0].end.to,
+          side,
+          at,
+          entryAlong,
+          from: low,
+          to: high,
+          lead: lead.end.index,
+          members: members.map((candidate) => candidate.end.index)
+        });
+        for (const candidate of members) groupOf.set(candidate.end.index, id);
+      }
+      return { groups, groupOf };
     }
-    function placeByGroups(diagram, nodes, top) {
-      const groups = diagram.groups;
-      const byId = new Map(groups.map((group) => [group.id, group]));
-      const { owner, children, roots } = groupTree(groups);
-      const order = new Map(nodes.map((node, index) => [node.id, index]));
-      const loose = nodes.filter((node) => !owner.has(node.id)).map((node) => node.id);
-      const nodeIds = new Set(nodes.map((node) => node.id));
-      const rawContents = (groupId) => {
-        const group = byId.get(groupId);
-        const own = [...new Set(group.members)].filter((member) => owner.get(member) === groupId && nodeIds.has(member));
-        const nested = children.get(groupId) ?? [];
-        return [...own, ...nested];
-      };
-      const contents = (groupId) => rawContents(groupId).filter((child) => !byId.has(child) || rawContents(child).length > 0);
-      const measure = (id) => {
-        if (!byId.has(id)) return { width: nodeWidth(id), height: NODE_HEIGHT };
-        const items = contents(id);
-        const sizes2 = items.map(measure);
-        return {
-          width: Math.max(MIN_NODE_WIDTH, ...sizes2.map((size) => size.width)) + GROUP_PADDING * 2,
-          height: GROUP_HEADER + GROUP_PADDING * 2 + sizes2.reduce((total, size) => total + size.height, 0) + Math.max(0, items.length - 1) * BLOCK_GAP
-        };
+    
+    // src/render/symbol.ts
+    function cubicPoint(curve, t) {
+      const u = 1 - t;
+      const a = u * u * u;
+      const b = 3 * u * u * t;
+      const c = 3 * u * t * t;
+      const d = t * t * t;
+      return {
+        x: a * curve.from.x + b * curve.c1.x + c * curve.c2.x + d * curve.to.x,
+        y: a * curve.from.y + b * curve.c1.y + c * curve.c2.y + d * curve.to.y
       };
-      const boxes = /* @__PURE__ */ new Map();
-      const groupRects = /* @__PURE__ */ new Map();
-      const place2 = (id, x, y) => {
-        const size = measure(id);
-        if (!byId.has(id)) {
-          boxes.set(id, { x, y, width: size.width, height: NODE_HEIGHT });
-          return size;
-        }
-        groupRects.set(id, { x, y, width: size.width, height: size.height });
-        let cursor2 = y + GROUP_HEADER + GROUP_PADDING;
-        const inner = size.width - GROUP_PADDING * 2;
-        const ordered = [...contents(id)].sort((left, right) => firstIndex(left) - firstIndex(right));
-        for (const child of ordered) {
-          const childSize = measure(child);
-          place2(child, x + GROUP_PADDING + (inner - childSize.width) / 2, cursor2);
-          cursor2 += childSize.height + BLOCK_GAP;
+    }
+    function diamondPoints(box) {
+      return [
+        { x: box.x + box.width / 2, y: box.y },
+        { x: box.x + box.width, y: box.y + box.height / 2 },
+        { x: box.x + box.width / 2, y: box.y + box.height },
+        { x: box.x, y: box.y + box.height / 2 }
+      ];
+    }
+    function hasDiscretePorts(shape) {
+      return shape === "diamond" || shape === "circle";
+    }
+    function hexagonCut(width) {
+      return Math.min(12, width / 4);
+    }
+    function hexagonPoints(box) {
+      const cut2 = hexagonCut(box.width);
+      return [
+        { x: box.x + cut2, y: box.y },
+        { x: box.x + box.width - cut2, y: box.y },
+        { x: box.x + box.width, y: box.y + box.height / 2 },
+        { x: box.x + box.width - cut2, y: box.y + box.height },
+        { x: box.x + cut2, y: box.y + box.height },
+        { x: box.x, y: box.y + box.height / 2 }
+      ];
+    }
+    function stadiumRadius(box) {
+      return Math.min(box.height / 2, box.width / 2);
+    }
+    function cylinderCaps(box) {
+      const cap = Math.min(10, box.height / 3);
+      return {
+        cap,
+        top: {
+          from: { x: box.x, y: box.y + cap },
+          c1: { x: box.x, y: box.y },
+          c2: { x: box.x + box.width, y: box.y },
+          to: { x: box.x + box.width, y: box.y + cap }
+        },
+        bottom: {
+          from: { x: box.x + box.width, y: box.y + box.height - cap },
+          c1: { x: box.x + box.width, y: box.y + box.height },
+          c2: { x: box.x, y: box.y + box.height },
+          to: { x: box.x, y: box.y + box.height - cap }
         }
-        return size;
       };
-      const visibleRoots = roots.filter((id) => contents(id).length > 0);
-      const firstIndex = (id) => {
-        if (!byId.has(id)) return order.get(id);
-        return Math.min(...contents(id).map(firstIndex));
-      };
-      const topItems = [...loose, ...visibleRoots].sort((left, right) => firstIndex(left) - firstIndex(right));
-      const sizes = topItems.map(measure);
-      const width = Math.max(MIN_NODE_WIDTH, ...sizes.map((size) => size.width));
-      let cursor = top;
-      for (const item of topItems) {
-        const size = measure(item);
-        place2(item, MARGIN + (width - size.width) / 2, cursor);
-        cursor += size.height + BLOCK_GAP;
-      }
-      return { boxes, groupRects, width: width + MARGIN * 2 };
     }
-    function place(diagram, top) {
-      const groups = diagram.groups ?? [];
-      return groups.length > 0 ? placeByGroups(diagram, diagram.nodes, top) : placeByRanks(diagram, diagram.nodes, top);
+    function cylinderApex(box, side) {
+      const caps = cylinderCaps(box);
+      return cubicPoint(side === "top" ? caps.top : caps.bottom, 0.5);
     }
     
     // src/render/palette.ts
@@ -327,12 +1888,36 @@ window.__ModuleLoader__.load({
     
     // src/render/paint.ts
     var TITLE_HEIGHT = 26;
-    var NODE_HEIGHT2 = 34;
-    var CHANNEL_GAP = 16;
     var CAPTION_CHARS = 78;
     var CAPTION_LINE = 15;
     var CAPTION_GAP = 16;
     var CAPTION_CHAR_WIDTH = 6.2;
+    var PORT_SEPARATION = 14;
+    var PORT_SIDES = ["top", "right", "bottom", "left"];
+    var isVerticalSide2 = (side) => side === "top" || side === "bottom";
+    var MULTI_EDGE_SPACING = 20;
+    function packPorts(wanted, low, high) {
+      const placed = [];
+      let previous = low - PORT_SEPARATION;
+      for (const value of wanted) {
+        previous = Math.min(high, Math.max(value, previous + PORT_SEPARATION));
+        placed.push(previous);
+      }
+      let next = high + PORT_SEPARATION;
+      for (let index = placed.length - 1; index >= 0; index -= 1) {
+        next = Math.max(low, Math.min(placed[index], next - PORT_SEPARATION));
+        placed[index] = next;
+      }
+      return placed;
+    }
+    function centreRun(placed, low, high) {
+      if (placed.length === 0) return placed;
+      const first = placed[0];
+      const last = placed[placed.length - 1];
+      const middle = (low + high) / 2;
+      const shift = Math.min(high - last, Math.max(low - first, middle - (first + last) / 2));
+      return shift === 0 ? placed : placed.map((value) => value + shift);
+    }
     function roleOfNode(node) {
       if (node.role === "error") return "fail";
       if (node.role === "warning") return "findings";
@@ -363,6 +1948,113 @@ window.__ModuleLoader__.load({
     function captionRole(caption) {
       return roleForVerdict(caption.split(" \u2014 ")[0]);
     }
+    var LABEL_HEIGHT = 12;
+    var LABEL_PAD = 2;
+    var LABEL_STEP = 3;
+    function runsOf(points) {
+      const runs = [];
+      for (let index = 0; index + 1 < points.length; index += 1) {
+        const from = points[index];
+        const to = points[index + 1];
+        const length = Math.abs(to.x - from.x) + Math.abs(to.y - from.y);
+        if (length < 1) continue;
+        runs.push({ from, to, length, index });
+      }
+      return runs.sort((left, right) => right.length - left.length || left.index - right.index);
+    }
+    function placeLabel(label, points, boxes, placed, otherRoutes) {
+      const width = textWidth(label);
+      const height = LABEL_HEIGHT;
+      const spotAt = (x, y) => ({ x, y, width, height });
+      const hitsBox = (spot, box) => spot.x - spot.width / 2 < box.x + box.width + LABEL_PAD && spot.x + spot.width / 2 > box.x - LABEL_PAD && spot.y - spot.height / 2 < box.y + box.height + LABEL_PAD && spot.y + spot.height / 2 > box.y - LABEL_PAD;
+      const hitsSpot = (spot, other) => spot.x - spot.width / 2 < other.x + other.width / 2 + LABEL_PAD && spot.x + spot.width / 2 > other.x - other.width / 2 - LABEL_PAD && spot.y - spot.height / 2 < other.y + other.height / 2 + LABEL_PAD && spot.y + spot.height / 2 > other.y - other.height / 2 - LABEL_PAD;
+      const hitsSegment = (spot, segment) => spot.x + spot.width / 2 > Math.min(segment.x1, segment.x2) - LABEL_PAD && spot.x - spot.width / 2 < Math.max(segment.x1, segment.x2) + LABEL_PAD && spot.y + spot.height / 2 > Math.min(segment.y1, segment.y2) - LABEL_PAD && spot.y - spot.height / 2 < Math.max(segment.y1, segment.y2) + LABEL_PAD;
+      const collisionsAt = (spot, run) => {
+        let boxHits = 0;
+        let labelHits = 0;
+        let edgeHits = 0;
+        for (const box of boxes) if (hitsBox(spot, box)) boxHits += 1;
+        for (const earlier of placed) if (hitsSpot(spot, earlier)) labelHits += 1;
+        for (const route of otherRoutes) {
+          for (const segment of route) {
+            if (!hitsSegment(spot, segment)) continue;
+            edgeHits += 1;
+            break;
+          }
+        }
+        return { run, collisions: boxHits + labelHits + edgeHits, boxes: boxHits, labels: labelHits, edges: edgeHits };
+      };
+      const runs = runsOf(points);
+      if (runs.length === 0) {
+        const point = points[0] ?? { x: 0, y: 0 };
+        return { ...spotAt(point.x, point.y), run: -1, collisions: 0, boxes: 0, labels: 0, edges: 0 };
+      }
+      let best;
+      for (const [runIndex, run] of runs.entries()) {
+        const dx = run.to.x - run.from.x;
+        const dy = run.to.y - run.from.y;
+        const ux = dx / run.length;
+        const uy = dy / run.length;
+        const middle = { x: (run.from.x + run.to.x) / 2, y: (run.from.y + run.to.y) / 2 };
+        const along = Math.abs(ux) * width / 2 + Math.abs(uy) * height / 2;
+        const bound = Math.max(0, run.length / 2 - along);
+        const walk = [0];
+        for (let step = LABEL_STEP; step <= bound + 1e-3; step += LABEL_STEP) walk.push(step, -step);
+        for (const offset of walk) {
+          const spot = spotAt(middle.x + ux * offset, middle.y + uy * offset);
+          const placement = collisionsAt(spot, runIndex);
+          if (placement.collisions === 0) return { ...spot, ...placement };
+          if (best === void 0 || placement.collisions < best.collisions || placement.collisions === best.collisions && placement.boxes + placement.labels < best.boxes + best.labels) {
+            best = { ...spot, ...placement };
+          }
+        }
+      }
+      return best;
+    }
+    function drawnExtent(shapes) {
+      let width = 0;
+      let height = 0;
+      const consider = (x, y) => {
+        if (x > width) width = x;
+        if (y > height) height = y;
+      };
+      for (const shape of shapes) {
+        switch (shape.kind) {
+          case "box":
+          case "group":
+            consider(shape.x + shape.width, shape.y + shape.height);
+            break;
+          case "link":
+            consider(Math.max(shape.x1, shape.x2), Math.max(shape.y1, shape.y2));
+            if (shape.label !== "") consider(shape.labelX + textWidth(shape.label) / 2, shape.labelY + LABEL_HEIGHT / 2);
+            break;
+          case "path": {
+            for (const point of shape.points) consider(point.x, point.y);
+            if (shape.label !== "") consider(shape.labelX + textWidth(shape.label) / 2, shape.labelY + LABEL_HEIGHT / 2);
+            break;
+          }
+          case "caption":
+          case "title":
+            consider(textWidth(shape.lines?.[0] ?? "") + shape.x, shape.y + 12);
+            break;
+          case "junction":
+            break;
+        }
+      }
+      return { width, height };
+    }
+    function boxesCrossedBy(points, from, to, boxes) {
+      const crossed = [];
+      for (let index = 0; index + 1 < points.length; index += 1) {
+        const a = points[index];
+        const b = points[index + 1];
+        for (const box of boxes) {
+          if (box === from || box === to) continue;
+          if (crossesBox(a.x, a.y, b.x, b.y, box)) crossed.push(box);
+        }
+      }
+      return crossed;
+    }
     function paintWith(diagram, overrides = {}, options = {}) {
       const colours = palette(overrides, options);
       const shapes = [];
@@ -370,16 +2062,23 @@ window.__ModuleLoader__.load({
       const topOffset = MARGIN + TITLE_HEIGHT;
       const placement = place(diagram, topOffset);
       const { boxes, groupRects } = placement;
+      const endBox = (id) => boxes.get(id) ?? groupRects.get(id);
+      const shapeById = /* @__PURE__ */ new Map();
+      for (const node of diagram.nodes) if (node.shape !== void 0 && !shapeById.has(node.id)) shapeById.set(node.id, node.shape);
+      const shapeOf = (id) => shapeById.get(id) ?? "rect";
       for (const group of groups) {
         const rect = groupRects.get(group.id);
         if (rect === void 0) continue;
         shapes.push({ kind: "group", id: group.id, x: rect.x, y: rect.y, width: rect.width, height: rect.height, label: group.label, colour: "muted" });
       }
       const drawn = /* @__PURE__ */ new Set();
+      const boxList = Array.from(boxes.values());
+      const routes = [];
       for (const node of diagram.nodes) {
         if (drawn.has(node.id)) continue;
         const box = boxes.get(node.id);
         drawn.add(node.id);
+        const text2 = textOf(node);
         shapes.push({
           kind: "box",
           x: box.x,
@@ -387,23 +2086,540 @@ window.__ModuleLoader__.load({
           width: box.width,
           height: box.height,
           label: labelOf(node),
+          lines: text2.lines,
+          ...node.shape === void 0 ? {} : { shape: node.shape },
           colour: roleOfNode(node),
           initial: diagram.init === node.id
         });
       }
       const roleById = new Map(diagram.nodes.map((node) => [node.id, roleOfNode(node)]));
-      let channel = Math.max(placement.width, ...Array.from(boxes.values(), (box) => box.x + box.width)) + CHANNEL_GAP;
-      let channelUses = 0;
+      const multiEdgeSets = /* @__PURE__ */ new Map();
+      diagram.edges.forEach((edge, index) => {
+        if (edge.from === edge.to) return;
+        if (endBox(edge.from) === void 0 || endBox(edge.to) === void 0) return;
+        const key = edge.from < edge.to ? edge.from + "\0" + edge.to : edge.to + "\0" + edge.from;
+        const list = multiEdgeSets.get(key);
+        if (list === void 0) multiEdgeSets.set(key, [index]);
+        else list.push(index);
+      });
+      const fanOf = /* @__PURE__ */ new Map();
+      for (const list of multiEdgeSets.values()) {
+        if (list.length < 2) continue;
+        list.forEach((index, position) => {
+          if (position === 0) return;
+          fanOf.set(index, (position % 2 === 1 ? 1 : -1) * Math.ceil(position / 2) * MULTI_EDGE_SPACING);
+        });
+      }
+      const endKey = (index, end) => String(index) + ":" + end;
+      const endsAt = /* @__PURE__ */ new Map();
       for (const edge of diagram.edges) {
-        const source = boxes.get(edge.from);
-        const target = boxes.get(edge.to);
+        if (edge.from === edge.to) continue;
+        if (endBox(edge.from) === void 0 || endBox(edge.to) === void 0) continue;
+        endsAt.set(edge.from, (endsAt.get(edge.from) ?? 0) + 1);
+        endsAt.set(edge.to, (endsAt.get(edge.to) ?? 0) + 1);
+      }
+      const spanOf2 = (boxId, side, corner) => {
+        const box = endBox(boxId);
+        const vertical = side === "top" || side === "bottom";
+        const middle = vertical ? box.x + box.width / 2 : box.y + box.height / 2;
+        const within = (low, high) => ({ low, high: Math.max(low, high) });
+        switch (shapeOf(boxId)) {
+          // The four vertices of a diamond, and the four cardinal points of an ellipse, are the middles of its sides.
+          case "diamond":
+          case "circle":
+            return within(middle, middle);
+          case "hexagon":
+            return vertical ? within(box.x + hexagonCut(box.width), box.x + box.width - hexagonCut(box.width)) : within(middle, middle);
+          case "stadium": {
+            const radius = stadiumRadius(box);
+            return vertical ? within(box.x + radius, box.x + box.width - radius) : within(middle, middle);
+          }
+          case "cylinder": {
+            if (vertical) return within(middle, middle);
+            const cap = cylinderCaps(box).cap;
+            return within(box.y + cap, box.y + box.height - cap);
+          }
+          default: {
+            const inset = corner ? 2 : vertical ? PORT_INSET : 8;
+            return vertical ? within(box.x + inset, box.x + box.width - inset) : within(box.y + inset, box.y + box.height - inset);
+          }
+        }
+      };
+      const clampTo = (boxId, side, value, corner) => {
+        const span = spanOf2(boxId, side, corner);
+        return Math.min(span.high, Math.max(span.low, value));
+      };
+      const pointOn = (boxId, side, along) => {
+        const box = endBox(boxId);
+        if (side === "left") return { x: box.x, y: along };
+        if (side === "right") return { x: box.x + box.width, y: along };
+        if (side === "top") return { x: along, y: shapeOf(boxId) === "cylinder" ? cylinderApex(box, "top").y : box.y };
+        return { x: along, y: shapeOf(boxId) === "cylinder" ? cylinderApex(box, "bottom").y : box.y + box.height };
+      };
+      const claimed = /* @__PURE__ */ new Map();
+      const claimedAt = /* @__PURE__ */ new Map();
+      const claim = (id, index, end, side) => {
+        claimed.set(endKey(index, end), side);
+        claimedAt.set(id, [...claimedAt.get(id) ?? [], { index, side }]);
+      };
+      const takenSides = (id, except) => (claimedAt.get(id) ?? []).filter((entry) => entry.index !== except).map((entry) => entry.side);
+      const sideMiddle = (box, side) => isVerticalSide2(side) ? box.x + box.width / 2 : box.y + box.height / 2;
+      const sidePoint = (boxId, side) => pointOn(boxId, side, sideMiddle(endBox(boxId), side));
+      const facesAway2 = (box, other, side) => {
+        const out = normalOf(side);
+        const dx = other.x + other.width / 2 - (box.x + box.width / 2);
+        const dy = other.y + other.height / 2 - (box.y + box.height / 2);
+        return out.x * dx + out.y * dy < 0;
+      };
+      const stubAlong = (pinnedId, pinnedSide, freeSide) => {
+        const point = sidePoint(pinnedId, pinnedSide);
+        const out = normalOf(pinnedSide);
+        return isVerticalSide2(freeSide) ? point.x + out.x * ROUTE_STUB : point.y + out.y * ROUTE_STUB;
+      };
+      const offers = (boxId, side, value) => {
+        const span = spanOf2(boxId, side, true);
+        return value >= span.low - 0.01 && value <= span.high + 0.01;
+      };
+      const bendBudget = (fromId, toId, exit, entry, index) => {
+        const from = endBox(fromId);
+        const to = endBox(toId);
+        if (facesAway2(from, to, exit) || facesAway2(to, from, entry)) return 4;
+        if (isVerticalSide2(exit) === isVerticalSide2(entry)) {
+          const out = normalOf(exit);
+          const into = normalOf(entry);
+          const sameWay = out.x === -into.x && out.y === -into.y;
+          const fromSpan = spanOf2(fromId, exit, true);
+          const toSpan = spanOf2(toId, entry, true);
+          const meet = fromSpan.low <= toSpan.high + 0.01 && toSpan.low <= fromSpan.high + 0.01;
+          return sameWay && meet ? 0 : 2;
+        }
+        const horizontalId = isVerticalSide2(exit) ? toId : fromId;
+        const horizontalSide = isVerticalSide2(exit) ? entry : exit;
+        const verticalId = isVerticalSide2(exit) ? fromId : toId;
+        const verticalSide = isVerticalSide2(exit) ? exit : entry;
+        if (!offers(verticalId, verticalSide, stubAlong(horizontalId, horizontalSide, verticalSide))) return 2;
+        const crowded = takenSides(fromId, index).includes(exit) || takenSides(toId, index).includes(entry);
+        return crowded ? 2 : 1;
+      };
+      const bestSide = (id, otherId, end, partner, index) => {
+        const box = endBox(id);
+        const other = endBox(otherId);
+        const centre = { x: box.x + box.width / 2, y: box.y + box.height / 2 };
+        const toward = { x: other.x + other.width / 2 - centre.x, y: other.y + other.height / 2 - centre.y };
+        const reach = Math.hypot(toward.x, toward.y);
+        const taken = takenSides(id, index);
+        let best;
+        for (const side of PORT_SIDES) {
+          if (taken.includes(side)) continue;
+          const bends = end === "exit" ? bendBudget(id, otherId, side, partner, index) : bendBudget(otherId, id, partner, side, index);
+          const normal = normalOf(side);
+          const score = reach === 0 ? 0 : (normal.x * toward.x + normal.y * toward.y) / reach;
+          const point = anchor(box, side);
+          const near = Math.hypot(
+            Math.max(other.x - point.x, 0, point.x - (other.x + other.width)),
+            Math.max(other.y - point.y, 0, point.y - (other.y + other.height))
+          );
+          const partnerPoint = anchor(other, partner);
+          const ground = Math.abs(point.x - partnerPoint.x) + Math.abs(point.y - partnerPoint.y);
+          const better = best === void 0 || bends < best.bends || bends === best.bends && (score > best.score + 1e-9 || Math.abs(score - best.score) <= 1e-9 && (near < best.near - 1e-9 || Math.abs(near - best.near) <= 1e-9 && ground < best.ground - 1e-9));
+          if (better) best = { side, bends, score, near, ground };
+        }
+        return best?.side;
+      };
+      const bestPair = (fromId, toId, index) => {
+        const approach = approachSides(endBox(fromId), endBox(toId));
+        const pairs = [
+          { exit: "bottom", entry: "top" },
+          { exit: "top", entry: "bottom" },
+          { exit: "right", entry: "left" },
+          { exit: "left", entry: "right" }
+        ];
+        let best = approach;
+        let bestBends = bendBudget(fromId, toId, approach.exit, approach.entry, index);
+        for (const pair of pairs) {
+          const bends = bendBudget(fromId, toId, pair.exit, pair.entry, index);
+          if (bends >= bestBends) continue;
+          best = pair;
+          bestBends = bends;
+        }
+        return best;
+      };
+      const bestEnd = (id, otherId, end, partner, index) => {
+        const approach = end === "exit" ? approachSides(endBox(id), endBox(otherId)).exit : approachSides(endBox(otherId), endBox(id)).entry;
+        let best = approach;
+        let bestBends = end === "exit" ? bendBudget(id, otherId, approach, partner, index) : bendBudget(otherId, id, partner, approach, index);
+        for (const side of PORT_SIDES) {
+          const bends = end === "exit" ? bendBudget(id, otherId, side, partner, index) : bendBudget(otherId, id, partner, side, index);
+          if (bends >= bestBends) continue;
+          best = side;
+          bestBends = bends;
+        }
+        return best;
+      };
+      diagram.edges.forEach((edge, index) => {
+        if (edge.from === edge.to) return;
+        const source = endBox(edge.from);
+        const target = endBox(edge.to);
+        if (source === void 0 || target === void 0) return;
+        if (placement.across.has(index)) {
+          claim(edge.from, index, "exit", "right");
+          claim(edge.to, index, "entry", "left");
+          return;
+        }
+        const lane = placement.lanes.get(index);
+        if (lane === void 0 || lane.points.length === 0) return;
+        const down = target.y > source.y;
+        claim(edge.from, index, "exit", down ? "bottom" : "top");
+        claim(edge.to, index, "entry", down ? "top" : "bottom");
+      });
+      diagram.edges.forEach((edge, index) => {
+        if (edge.from === edge.to) return;
+        const source = endBox(edge.from);
+        const target = endBox(edge.to);
+        if (source === void 0 || target === void 0) return;
+        for (const end of ["exit", "entry"]) {
+          if (claimed.has(endKey(index, end))) continue;
+          const id = end === "exit" ? edge.from : edge.to;
+          if ((endsAt.get(id) ?? 0) < 2) continue;
+          if (!hasDiscretePorts(shapeOf(id))) continue;
+          const approached = approachSides(source, target);
+          const partner = claimed.get(endKey(index, end === "exit" ? "entry" : "exit")) ?? (end === "exit" ? approached.entry : approached.exit);
+          const side = bestSide(id, end === "exit" ? edge.to : edge.from, end, partner, index);
+          if (side === void 0) continue;
+          claim(id, index, end, side);
+        }
+      });
+      const facing = diagram.edges.map((edge, index) => {
+        const source = endBox(edge.from);
+        const target = endBox(edge.to);
+        if (source === void 0 || target === void 0 || edge.from === edge.to) return void 0;
+        if (placement.across.has(index)) return { exit: "right", entry: "left" };
+        const lane = placement.lanes.get(index);
+        const down = target.y > source.y;
+        if (lane !== void 0 && lane.points.length > 0) {
+          return {
+            exit: claimed.get(endKey(index, "exit")) ?? (down ? "bottom" : "top"),
+            entry: claimed.get(endKey(index, "entry")) ?? (down ? "top" : "bottom"),
+            at: lane.points[0].x
+          };
+        }
+        const exit = claimed.get(endKey(index, "exit"));
+        const entry = claimed.get(endKey(index, "entry"));
+        if (exit !== void 0 && entry !== void 0) return { exit, entry };
+        if (exit !== void 0) return { exit, entry: bestEnd(edge.to, edge.from, "entry", exit, index) };
+        if (entry !== void 0) return { exit: bestEnd(edge.from, edge.to, "exit", entry, index), entry };
+        return bestPair(edge.from, edge.to, index);
+      });
+      const laneClear = (points, x, from, to) => {
+        for (let at = 0; at + 1 < points.length; at += 1) {
+          for (const box of boxList) {
+            if (box === from || box === to) continue;
+            if (crossesBox(x, points[at].y, x, points[at + 1].y, box)) return false;
+          }
+        }
+        return true;
+      };
+      const laneShift = /* @__PURE__ */ new Map();
+      for (const list of multiEdgeSets.values()) {
+        if (list.length < 2) continue;
+        const lead = placement.lanes.get(list[0]);
+        if (lead === void 0 || lead.points.length === 0) continue;
+        const base = lead.points[0].x;
+        const taken = /* @__PURE__ */ new Set();
+        for (const index of list) {
+          const lane = placement.lanes.get(index);
+          const own = lane.points[0].x;
+          const offset = fanOf.get(index) ?? 0;
+          const edge = diagram.edges[index];
+          const from = endBox(edge.from);
+          const to = endBox(edge.to);
+          let target = own;
+          if (offset !== 0) {
+            for (const candidate of [base + offset, own + offset]) {
+              if (taken.has(candidate) || !laneClear(lane.points, candidate, from, to)) continue;
+              target = candidate;
+              break;
+            }
+          }
+          taken.add(target);
+          if (target !== own) laneShift.set(index, target - own);
+        }
+      }
+      const wanted = /* @__PURE__ */ new Map();
+      const slotKey = (boxId, side, index) => boxId + ":" + side + ":" + String(index);
+      for (const [index, entry] of facing.entries()) {
+        if (entry === void 0) continue;
+        const edge = diagram.edges[index];
+        const from = endBox(edge.from);
+        const to = endBox(edge.to);
+        const middle = (box, side) => isVerticalSide2(side) ? box.x + box.width / 2 : box.y + box.height / 2;
+        const fromMiddle = middle(from, entry.exit);
+        const toMiddle = middle(to, entry.entry);
+        const corner = entry.at !== void 0;
+        const offset = fanOf.get(index) ?? 0;
+        let exitWanted;
+        let entryWanted;
+        if (entry.at !== void 0) {
+          const chosen = entry.at + (laneShift.get(index) ?? 0);
+          exitWanted = clampTo(edge.from, entry.exit, chosen, corner);
+          entryWanted = clampTo(edge.to, entry.entry, chosen, corner);
+        } else if (isVerticalSide2(entry.exit) === isVerticalSide2(entry.entry)) {
+          const target = spanOf2(edge.to, entry.entry, false);
+          const chosen = (fromMiddle >= target.low && fromMiddle <= target.high ? fromMiddle : clampTo(edge.from, entry.exit, toMiddle, false)) + offset;
+          exitWanted = clampTo(edge.from, entry.exit, chosen, corner);
+          entryWanted = clampTo(edge.to, entry.entry, chosen, corner);
+        } else {
+          exitWanted = hasDiscretePorts(shapeOf(edge.from)) ? fromMiddle : clampTo(edge.from, entry.exit, stubAlong(edge.to, entry.entry, entry.exit), false) + offset;
+          entryWanted = hasDiscretePorts(shapeOf(edge.to)) ? toMiddle : clampTo(edge.to, entry.entry, stubAlong(edge.from, entry.exit, entry.entry), false) + offset;
+        }
+        wanted.set(slotKey(edge.from, entry.exit, index), exitWanted);
+        wanted.set(slotKey(edge.to, entry.entry, index), entryWanted);
+      }
+      const sides = /* @__PURE__ */ new Map();
+      for (const [index, entry] of facing.entries()) {
+        if (entry === void 0) continue;
+        const edge = diagram.edges[index];
+        sides.set(edge.from + ":" + entry.exit, [
+          ...sides.get(edge.from + ":" + entry.exit) ?? [],
+          { index, wanted: wanted.get(slotKey(edge.from, entry.exit, index)) }
+        ]);
+        sides.set(edge.to + ":" + entry.entry, [
+          ...sides.get(edge.to + ":" + entry.entry) ?? [],
+          { index, wanted: wanted.get(slotKey(edge.to, entry.entry, index)) }
+        ]);
+      }
+      let placedPort = /* @__PURE__ */ new Map();
+      for (let round = 0; round < 3; round += 1) {
+        placedPort = /* @__PURE__ */ new Map();
+        for (const [key, list] of sides) {
+          const [boxId, side] = key.split(":");
+          const span = spanOf2(boxId, side, true);
+          const order2 = [...list].sort((left, right) => left.wanted - right.wanted || left.index - right.index);
+          const packed = packPorts(
+            order2.map((entry) => clampTo(boxId, side, entry.wanted, true)),
+            span.low,
+            span.high
+          );
+          order2.forEach((entry, at) => placedPort.set(slotKey(boxId, side, entry.index), packed[at]));
+        }
+        let moved = false;
+        for (const [index, entry] of facing.entries()) {
+          if (entry === void 0) continue;
+          const edge = diagram.edges[index];
+          const vertical = entry.exit === "bottom" || entry.exit === "top";
+          if (!vertical) continue;
+          const exit = placedPort.get(slotKey(edge.from, entry.exit, index));
+          if (Math.abs(exit - placedPort.get(slotKey(edge.to, entry.entry, index))) < 0.01) continue;
+          if (Math.abs(clampTo(edge.to, entry.entry, exit, true) - exit) > 0.01) continue;
+          for (const slot of sides.get(edge.to + ":" + entry.entry)) {
+            if (slot.index !== index) continue;
+            slot.wanted = exit;
+            moved = true;
+          }
+        }
+        if (!moved) break;
+      }
+      const trunkEnds = [];
+      diagram.edges.forEach((edge, index) => {
+        const entry = facing[index];
+        if (entry === void 0) return;
+        const runY = placement.runs.get(index);
+        trunkEnds.push({
+          index,
+          from: edge.from,
+          to: edge.to,
+          exit: entry.exit,
+          entry: entry.entry,
+          ...edge.arrow === void 0 ? {} : { arrow: edge.arrow },
+          ...runY === void 0 ? {} : { runY }
+        });
+      });
+      const planFor = (exitPortOf) => planTrunks({
+        ends: trunkEnds,
+        // Only a node's own box is a trunk target: an arrow into a boundary points past it, not at it.
+        boxOf: (id) => boxes.get(id),
+        boxes: boxList,
+        exitPortOf
+      });
+      const packedExit = (index) => {
+        const entry = facing[index];
+        if (entry === void 0) return void 0;
+        const edge = diagram.edges[index];
+        const coordinate = placedPort.get(slotKey(edge.from, entry.exit, index));
+        return coordinate === void 0 ? void 0 : pointOn(edge.from, entry.exit, coordinate);
+      };
+      const planned = planFor(packedExit);
+      const onLane = (index, coordinate) => {
+        if (planned.groupOf.has(index)) return false;
+        const lane = placement.lanes.get(index);
+        if (lane === void 0 || lane.points.length === 0) return false;
+        return Math.abs(lane.points[0].x - coordinate) <= 0.5;
+      };
+      const rows = [];
+      const rowOf = /* @__PURE__ */ new Map();
+      for (const [key, list] of sides) {
+        const [boxId, side] = key.split(":");
+        const span = spanOf2(boxId, side, true);
+        const slots = [...list].map((entry) => ({ index: entry.index, at: placedPort.get(slotKey(boxId, side, entry.index)) })).sort((left, right) => left.at - right.at || left.index - right.index);
+        const centred = centreRun(
+          slots.map((slot) => slot.at),
+          span.low,
+          span.high
+        );
+        const first = slots[0];
+        const row = {
+          boxId,
+          side,
+          indexes: slots.map((slot) => slot.index),
+          at: slots.map((slot) => slot.at),
+          position: new Map(slots.map((slot, at) => [slot.index, at])),
+          shift: centred[0] - first.at,
+          allowed: true
+        };
+        rows.push(row);
+        rowOf.set(key, row);
+      }
+      const movedAt = (row, at) => row.at[at] + (row.allowed ? row.shift : 0);
+      const partnerOf = (boxId, side, index) => {
+        const entry = facing[index];
+        if (entry === void 0) return void 0;
+        const edge = diagram.edges[index];
+        const isExit = edge.from === boxId && entry.exit === side;
+        const groupId = planned.groupOf.get(index);
+        if (groupId !== void 0) {
+          if (!isExit) return void 0;
+          const group = planned.groups[groupId];
+          if (isVerticalSide2(side) !== isVerticalSide2(group.side)) return void 0;
+          return { coordinate: group.entryAlong };
+        }
+        const partnerId = isExit ? edge.to : edge.from;
+        const partnerSide = isExit ? entry.entry : entry.exit;
+        if (isVerticalSide2(side) !== isVerticalSide2(partnerSide)) return void 0;
+        const coordinate = placedPort.get(slotKey(partnerId, partnerSide, index));
+        if (coordinate === void 0) return void 0;
+        const row = rowOf.get(partnerId + ":" + partnerSide);
+        return { coordinate, ...row === void 0 ? {} : { row, at: row.position.get(index) } };
+      };
+      for (let pass = 0; pass < rows.length; pass += 1) {
+        let refused = false;
+        for (const row of rows) {
+          if (!row.allowed || row.shift === 0) continue;
+          const pinned = row.indexes.some((index, at) => {
+            if (onLane(index, row.at[at])) return true;
+            const partner = partnerOf(row.boxId, row.side, index);
+            if (partner === void 0) return false;
+            if (Math.abs(row.at[at] - partner.coordinate) > 0.5) return false;
+            const partnerAt = partner.row === void 0 ? partner.coordinate : movedAt(partner.row, partner.at);
+            return Math.abs(movedAt(row, at) - partnerAt) > 0.5;
+          });
+          if (!pinned) continue;
+          row.allowed = false;
+          refused = true;
+        }
+        if (!refused) break;
+      }
+      for (const row of rows) {
+        if (!row.allowed || row.shift === 0) continue;
+        row.indexes.forEach((index, at) => placedPort.set(slotKey(row.boxId, row.side, index), movedAt(row, at)));
+      }
+      const portOf = (boxId, side, edgeIndex) => {
+        const coordinate = placedPort.get(slotKey(boxId, side, edgeIndex));
+        return pointOn(boxId, side, coordinate);
+      };
+      const anchorsFor = /* @__PURE__ */ new Map();
+      for (const [index, entry] of facing.entries()) {
+        if (entry === void 0) continue;
+        const edge = diagram.edges[index];
+        anchorsFor.set(index, {
+          exit: portOf(edge.from, entry.exit, index),
+          entry: portOf(edge.to, entry.entry, index),
+          exitSide: entry.exit,
+          entrySide: entry.entry
+        });
+      }
+      const trunks = planFor((index) => anchorsFor.get(index)?.exit);
+      const sharedEntry = /* @__PURE__ */ new Map();
+      for (const group of trunks.groups) sharedEntry.set(group.id, pointOn(group.target, group.side, group.entryAlong));
+      const pointsOfRoute = (shape) => shape.kind === "path" ? shape.points : [{ x: shape.x1, y: shape.y1 }, { x: shape.x2, y: shape.y2 }];
+      const segmentsOfRoute = (shape) => {
+        const points = pointsOfRoute(shape);
+        const out = [];
+        for (let index = 0; index + 1 < points.length; index += 1) {
+          const from = points[index];
+          const to = points[index + 1];
+          out.push({ x1: from.x, y1: from.y, x2: to.x, y2: to.y });
+        }
+        return out;
+      };
+      const paintPath = (edgeIndex, edge, points, colour) => {
+        const shape = {
+          kind: "path",
+          points,
+          label: edge.label,
+          labelX: 0,
+          labelY: 0,
+          colour,
+          ...edge.dashed === void 0 ? {} : { dashed: edge.dashed },
+          ...edge.arrow === void 0 ? {} : { arrow: edge.arrow }
+        };
+        shapes.push(shape);
+        routes.push({ shape, edge: edgeIndex, fixed: false });
+      };
+      const paintRoute = (edgeIndex, edge, points, colour) => {
+        if (points.length > 2) {
+          paintPath(edgeIndex, edge, points, colour);
+          return;
+        }
+        const exit = points[0];
+        const entry = points[points.length - 1];
+        const shape = {
+          kind: "link",
+          x1: exit.x,
+          y1: exit.y,
+          x2: entry.x,
+          y2: entry.y,
+          label: edge.label,
+          labelX: 0,
+          labelY: 0,
+          colour,
+          ...edge.dashed === void 0 ? {} : { dashed: edge.dashed },
+          ...edge.arrow === void 0 ? {} : { arrow: edge.arrow }
+        };
+        shapes.push(shape);
+        routes.push({ shape, edge: edgeIndex, fixed: false });
+      };
+      const clearOfBoxes = (points, from, to) => boxesCrossedBy(points, from, to, boxList).length === 0;
+      const runRoute = (ports, runY) => {
+        const out = isVerticalSide2(ports.exitSide) ? 0 : normalOf(ports.exitSide).x * ROUTE_STUB;
+        const into = isVerticalSide2(ports.entrySide) ? 0 : normalOf(ports.entrySide).x * ROUTE_STUB;
+        const exitRun = out !== 0 && into === 0 && Math.sign(ports.entry.x - ports.exit.x) === Math.sign(out) ? ports.entry.x : ports.exit.x + out;
+        const entryRun = into !== 0 && out === 0 && Math.sign(ports.exit.x - ports.entry.x) === Math.sign(into) ? ports.exit.x : ports.entry.x + into;
+        const points = [ports.exit];
+        if (out !== 0) points.push({ x: exitRun, y: ports.exit.y });
+        points.push({ x: exitRun, y: runY }, { x: entryRun, y: runY });
+        if (into !== 0) points.push({ x: entryRun, y: ports.entry.y });
+        points.push(ports.entry);
+        return simplify(points);
+      };
+      const runFits = (ports, runY) => {
+        if (isVerticalSide2(ports.exitSide) && Math.abs(runY - ports.exit.y) > 0.5) {
+          if (Math.sign(runY - ports.exit.y) !== Math.sign(normalOf(ports.exitSide).y)) return false;
+        }
+        if (isVerticalSide2(ports.entrySide) && Math.abs(ports.entry.y - runY) > 0.5) {
+          if (Math.sign(ports.entry.y - runY) !== -Math.sign(normalOf(ports.entrySide).y)) return false;
+        }
+        return true;
+      };
+      const junctions = [];
+      for (const [edgeIndex, edge] of diagram.edges.entries()) {
+        const source = endBox(edge.from);
+        const target = endBox(edge.to);
         if (source === void 0 || target === void 0) continue;
-        const colour = roleById.get(edge.from);
-        const sameRow = Math.abs(target.y - source.y) < NODE_HEIGHT2 / 2;
+        const colour = roleById.get(edge.from) ?? "muted";
         if (edge.from === edge.to) {
           const x = source.x + source.width;
           const y = source.y + source.height / 2;
-          shapes.push({
+          const shape = {
             kind: "path",
             points: [
               { x, y: y - 9 },
@@ -412,57 +2628,116 @@ window.__ModuleLoader__.load({
               { x, y: y + 9 }
             ],
             label: edge.label,
-            labelX: x + 20,
+            // The one label that is not on its own edge: a self loop's longest run is eighteen points, and its name
+            // does not fit on that. It sits beside the loop, where it belongs to the edge and touches nothing.
+            labelX: x + 20 + textWidth(edge.label) / 2,
             labelY: y,
-            colour
-          });
+            colour,
+            ...edge.dashed === void 0 ? {} : { dashed: edge.dashed },
+            ...edge.arrow === void 0 ? {} : { arrow: edge.arrow }
+          };
+          shapes.push(shape);
+          routes.push({ shape, edge: edgeIndex, fixed: true });
           continue;
         }
-        if (target.y > source.y && !sameRow) {
-          const x1 = source.x + source.width / 2;
-          const y1 = source.y + source.height;
-          const x2 = target.x + target.width / 2;
-          const y2 = target.y;
-          shapes.push({ kind: "link", x1, y1, x2, y2, label: edge.label, labelX: (x1 + x2) / 2 + 7, labelY: (y1 + y2) / 2, colour });
-          continue;
+        const anchors = anchorsFor.get(edgeIndex);
+        const groupId = trunks.groupOf.get(edgeIndex);
+        if (groupId !== void 0 && anchors !== void 0) {
+          const group = trunks.groups[groupId];
+          const entry = sharedEntry.get(groupId);
+          const branch = isVerticalSide2(group.side) ? [anchors.exit, { x: anchors.exit.x, y: group.at }, { x: entry.x, y: group.at }, entry] : [anchors.exit, { x: group.at, y: anchors.exit.y }, { x: group.at, y: entry.y }, entry];
+          const points = simplify(branch);
+          if (clearOfBoxes(points, source, target)) {
+            paintRoute(edgeIndex, edge, points, colour);
+            const meet = isVerticalSide2(group.side) ? { x: anchors.exit.x, y: group.at } : { x: group.at, y: anchors.exit.y };
+            junctions.push({ kind: "junction", x: meet.x, y: meet.y, colour, trunk: group.id });
+            continue;
+          }
         }
-        if (sameRow) {
-          const right = source.x + source.width;
-          const left = target.x;
-          const y = source.y + source.height / 2;
-          const forward = right <= left;
-          shapes.push({
-            kind: "link",
-            x1: forward ? right : source.x,
-            y1: y,
-            x2: forward ? left : target.x + target.width,
-            y2: y,
-            label: edge.label,
-            labelX: (right + left) / 2,
-            labelY: y - 7,
-            colour
-          });
-          continue;
+        const lane = placement.lanes.get(edgeIndex);
+        if (lane !== void 0 && lane.points.length > 0 && anchors !== void 0) {
+          const shift = laneShift.get(edgeIndex) ?? 0;
+          const ordered = lane.reversed ? [...lane.points].reverse() : lane.points;
+          const waypoints = shift === 0 ? ordered : ordered.map((point) => ({ x: point.x + shift, y: point.y }));
+          const points = [anchors.exit];
+          let previous = anchors.exit;
+          for (const waypoint of waypoints) {
+            if (Math.abs(previous.x - waypoint.x) > 0.5 && Math.abs(previous.y - waypoint.y) > 0.5) points.push({ x: previous.x, y: waypoint.y });
+            points.push(waypoint);
+            previous = waypoint;
+          }
+          if (Math.abs(previous.x - anchors.entry.x) > 0.5 && Math.abs(previous.y - anchors.entry.y) > 0.5) points.push({ x: anchors.entry.x, y: previous.y });
+          points.push(anchors.entry);
+          const simplified = simplify(points);
+          if (clearOfBoxes(simplified, source, target)) {
+            paintPath(edgeIndex, edge, simplified, colour);
+            continue;
+          }
         }
-        const lane = channel + channelUses % 3 * 8;
-        channelUses += 1;
-        channel = Math.max(channel, lane);
-        const startY = source.y + source.height / 2;
-        const endY = target.y + target.height / 2;
-        shapes.push({
-          kind: "path",
-          points: [
-            { x: source.x + source.width, y: startY },
-            { x: lane, y: startY },
-            { x: lane, y: endY },
-            { x: target.x + target.width, y: endY }
-          ],
-          label: edge.label,
-          labelX: lane + 6,
-          labelY: (startY + endY) / 2,
-          colour
-        });
+        const runY = placement.runs.get(edgeIndex);
+        if (runY !== void 0 && anchors !== void 0 && runFits(anchors, runY)) {
+          const points = runRoute(anchors, runY);
+          if (clearOfBoxes(points, source, target)) {
+            paintRoute(edgeIndex, edge, points, colour);
+            continue;
+          }
+        }
+        paintRoute(edgeIndex, edge, routeEdge(source, target, boxList, anchors).points, colour);
       }
+      for (const dot of junctions) shapes.push(dot);
+      const boxEntries = Array.from(boxes.entries());
+      const routingFailures = [];
+      for (const { shape, edge } of routes) {
+        const diagramEdge = diagram.edges[edge];
+        const source = endBox(diagramEdge.from);
+        const target = endBox(diagramEdge.to);
+        if (source === void 0 || target === void 0) continue;
+        for (const segment of segmentsOfRoute(shape)) {
+          for (const [id, box] of boxEntries) {
+            if (box === source || box === target) continue;
+            if (!crossesBox(segment.x1, segment.y1, segment.x2, segment.y2, box)) continue;
+            routingFailures.push({
+              edge,
+              from: diagramEdge.from,
+              to: diagramEdge.to,
+              box: id,
+              x1: segment.x1,
+              y1: segment.y1,
+              x2: segment.x2,
+              y2: segment.y2
+            });
+          }
+        }
+      }
+      const routeSegments = routes.map(({ shape }) => segmentsOfRoute(shape));
+      const placedLabels = [];
+      routes.forEach(({ shape, fixed }, at) => {
+        if (fixed) {
+          if (shape.label !== "") {
+            placedLabels.push({ x: shape.labelX, y: shape.labelY, width: textWidth(shape.label), height: LABEL_HEIGHT });
+          }
+          return;
+        }
+        if (shape.label === "") return;
+        const placement2 = placeLabel(
+          shape.label,
+          pointsOfRoute(shape),
+          boxList,
+          placedLabels,
+          routeSegments.filter((_, other) => other !== at)
+        );
+        shape.labelX = placement2.x;
+        shape.labelY = placement2.y;
+        shape.labelPlacement = {
+          run: placement2.run,
+          collisions: placement2.collisions,
+          boxes: placement2.boxes,
+          labels: placement2.labels,
+          edges: placement2.edges
+        };
+        placedLabels.push({ x: placement2.x, y: placement2.y, width: placement2.width, height: placement2.height });
+      });
+      const labelCollisions = routes.reduce((total, { shape }) => total + ((shape.labelPlacement?.collisions ?? 0) > 0 ? 1 : 0), 0);
       shapes.push({ kind: "title", x: MARGIN, y: MARGIN + 12, text: diagram.title, colour: "text" });
       const contentRight = Math.max(
         MARGIN,
@@ -471,7 +2746,7 @@ window.__ModuleLoader__.load({
       );
       const captionLines = wrap(diagram.caption, CAPTION_CHARS);
       const captionWidth = Math.max(...captionLines.map((line) => line.length * CAPTION_CHAR_WIDTH)) + MARGIN * 2;
-      const width = Math.max(contentRight + MARGIN + (channelUses > 0 ? CHANNEL_GAP * 3 : 0), captionWidth, 240);
+      const width = Math.max(contentRight + MARGIN, captionWidth, 240);
       const contentBottom = Math.max(
         topOffset,
         ...Array.from(boxes.values(), (box) => box.y + box.height),
@@ -480,7 +2755,13 @@ window.__ModuleLoader__.load({
       const captionTop = contentBottom + CAPTION_GAP;
       shapes.push({ kind: "caption", x: MARGIN, y: captionTop, lines: captionLines, colour: captionRole(diagram.caption) });
       const height = captionTop + captionLines.length * CAPTION_LINE + MARGIN / 2;
-      return { canvas: { width: Math.round(width), height: Math.round(height), shapes }, colours };
+      const extent = drawnExtent(shapes);
+      const canvasWidth = Math.max(width, extent.width + MARGIN);
+      const canvasHeight = Math.max(height, extent.height + MARGIN);
+      return {
+        canvas: { width: Math.round(canvasWidth), height: Math.round(canvasHeight), shapes, routingFailures, labelCollisions },
+        colours
+      };
     }
     
     // src/render/from-mermaid.ts
@@ -505,10 +2786,15 @@ window.__ModuleLoader__.load({
       "requirementdiagram",
       "sankey-beta"
     ]);
-    function ensure(builder, id, label) {
+    function ensure(builder, id, label, shape) {
       const existing = builder.nodes.get(id);
       if (existing === void 0) {
-        builder.nodes.set(id, { id, role: "normal", ...label === void 0 ? {} : { label } });
+        builder.nodes.set(id, {
+          id,
+          role: "normal",
+          ...label === void 0 ? {} : { label },
+          ...shape === void 0 ? {} : { shape }
+        });
         const innermost = builder.open[builder.open.length - 1];
         if (innermost !== void 0 && !innermost.members.includes(id)) innermost.members.push(id);
         return;
@@ -520,7 +2806,12 @@ window.__ModuleLoader__.load({
       if (match === null) return void 0;
       const id = match[1];
       const label = [match[2], match[3], match[4], match[5], match[6], match[7]].find((value) => value !== void 0 && value.trim() !== "");
-      return { id, ...label === void 0 ? {} : { label: label.trim().replace(/^["']|["']$/g, "") } };
+      const shape = match[2] !== void 0 ? "cylinder" : match[3] !== void 0 ? "subroutine" : match[4] !== void 0 ? "rect" : match[5] !== void 0 ? "stadium" : match[6] !== void 0 ? "diamond" : match[7] !== void 0 ? "hexagon" : void 0;
+      return {
+        id,
+        ...label === void 0 ? {} : { label: label.trim().replace(/^["']|["']$/g, "") },
+        ...shape === void 0 ? {} : { shape }
+      };
     }
     function fromMermaid(source, title = "mermaid") {
       const lines = source.split(/\r?\n/);
@@ -537,13 +2828,13 @@ window.__ModuleLoader__.load({
         if (line === "") return;
         const where = "line " + String(index + 1) + ": ";
         const lower = line.toLowerCase();
-        const keyword = lower.split(/[\s{}]/)[0] ?? "";
+        const keyword = lower.split(/[\s{}]/)[0];
         if (UNSUPPORTED.has(keyword)) {
           refused.push(where + "`" + keyword + "` is not a diagram this renderer draws");
           return;
         }
         if (DIRECTIVE.test(line)) {
-          refused.push(where + "`" + (line.split(/\s/)[0] ?? "") + "` is a directive this renderer ignores");
+          refused.push(where + "`" + line.split(/\s/)[0] + "` is a directive this renderer ignores");
           return;
         }
         if (/^(graph|flowchart)\b/.test(lower)) {
@@ -615,8 +2906,8 @@ window.__ModuleLoader__.load({
             refused.push(where + "`" + line + "` does not name two nodes");
             return;
           }
-          ensure(builder, left.id, left.label);
-          ensure(builder, right.id, right.label);
+          ensure(builder, left.id, left.label, left.shape);
+          ensure(builder, right.id, right.label, right.shape);
           push({ from: left.id, to: right.id, label: labelled[2].trim() });
           return;
         }
@@ -628,8 +2919,8 @@ window.__ModuleLoader__.load({
             refused.push(where + "`" + line + "` does not name two nodes");
             return;
           }
-          ensure(builder, left.id, left.label);
-          ensure(builder, right.id, right.label);
+          ensure(builder, left.id, left.label, left.shape);
+          ensure(builder, right.id, right.label, right.shape);
           push({
             from: left.id,
             to: right.id,
@@ -640,7 +2931,7 @@ window.__ModuleLoader__.load({
         }
         const single = nodeFrom(line);
         if (single !== void 0) {
-          ensure(builder, single.id, single.label);
+          ensure(builder, single.id, single.label, single.shape);
           return;
         }
         refused.push(where + "`" + line + "` is not something this renderer draws");
@@ -664,17 +2955,15 @@ window.__ModuleLoader__.load({
     }
     
     // src/render/collapse.ts
-    function subtreeSize(diagram, groupId, seen) {
+    function subtreeSize(groups, groupId, seen) {
       if (seen.has(groupId)) return 0;
       seen.add(groupId);
-      const groups = diagram.groups ?? [];
       const group = groups.find((entry) => entry.id === groupId);
-      if (group === void 0) return 0;
       const children = groups.filter((entry) => entry.parent === groupId);
-      return group.members.length + children.reduce((total, child) => total + subtreeSize(diagram, child.id, seen), 0);
+      return group.members.length + children.reduce((total, child) => total + subtreeSize(groups, child.id, seen), 0);
     }
-    function ownerOf(diagram, nodeId) {
-      return (diagram.groups ?? []).find((group) => group.members.includes(nodeId))?.id;
+    function ownerOf(groups, nodeId) {
+      return groups.find((group) => group.members.includes(nodeId))?.id;
     }
     function collapse(diagram, folded) {
       const asked = new Set(folded);
@@ -684,7 +2973,7 @@ window.__ModuleLoader__.load({
       const targets = /* @__PURE__ */ new Set();
       for (const id of asked) {
         const group = byId.get(id);
-        if (group !== void 0 && subtreeSize(diagram, id, /* @__PURE__ */ new Set()) > 0) targets.add(id);
+        if (group !== void 0 && subtreeSize(groups, id, /* @__PURE__ */ new Set()) > 0) targets.add(id);
       }
       if (targets.size === 0) return diagram;
       for (const id of [...targets]) {
@@ -701,16 +2990,13 @@ window.__ModuleLoader__.load({
       }
       const removedNodes = /* @__PURE__ */ new Set();
       const removedGroups = /* @__PURE__ */ new Set();
-      const descend = (groupId, seen) => {
-        if (seen.has(groupId)) return;
-        seen.add(groupId);
+      const descend = (groupId) => {
         removedGroups.add(groupId);
         const group = byId.get(groupId);
-        if (group === void 0) return;
         for (const member of group.members) removedNodes.add(member);
-        for (const child of groups.filter((entry) => entry.parent === groupId)) descend(child.id, seen);
+        for (const child of groups.filter((entry) => entry.parent === groupId)) descend(child.id);
       };
-      for (const id of targets) descend(id, /* @__PURE__ */ new Set());
+      for (const id of targets) descend(id);
       const foldOf = (id) => {
         for (const target of targets) {
           const inSubtree = (groupId, seen) => {
@@ -720,7 +3006,7 @@ window.__ModuleLoader__.load({
             return groups.filter((entry) => entry.parent === groupId).some((child) => inSubtree(child.id, seen));
           };
           const group = byId.get(target);
-          if (group.members.includes(id) || inSubtree(ownerOf(diagram, id) ?? "", /* @__PURE__ */ new Set())) return target;
+          if (group.members.includes(id) || inSubtree(ownerOf(groups, id), /* @__PURE__ */ new Set())) return target;
         }
         return void 0;
       };
@@ -735,12 +3021,12 @@ window.__ModuleLoader__.load({
         if (fold === void 0 || emitted.has(fold)) continue;
         emitted.add(fold);
         const group = byId.get(fold);
-        nodes.push({ id: fold, label: group.label + " (" + String(subtreeSize(diagram, fold, /* @__PURE__ */ new Set())) + ")", role: "normal" });
+        nodes.push({ id: fold, label: group.label + " (" + String(subtreeSize(groups, fold, /* @__PURE__ */ new Set())) + ")", role: "normal" });
       }
       for (const id of targets) {
         if (emitted.has(id)) continue;
         const group = byId.get(id);
-        nodes.push({ id, label: group.label + " (" + String(subtreeSize(diagram, id, /* @__PURE__ */ new Set())) + ")", role: "normal" });
+        nodes.push({ id, label: group.label + " (" + String(subtreeSize(groups, id, /* @__PURE__ */ new Set())) + ")", role: "normal" });
       }
       const edges = [];
       const seenEdges = /* @__PURE__ */ new Set();
@@ -757,7 +3043,7 @@ window.__ModuleLoader__.load({
       const adopted = /* @__PURE__ */ new Map();
       for (const id of targets) {
         const parent = byId.get(id)?.parent;
-        if (parent === void 0 || targets.has(parent) || removedGroups.has(parent)) continue;
+        if (parent === void 0) continue;
         adopted.set(parent, [...adopted.get(parent) ?? [], id]);
       }
       const remaining = groups.filter((group) => !removedGroups.has(group.id) && targets.has(group.id) === false).map((group) => {
@@ -776,38 +3062,139 @@ window.__ModuleLoader__.load({
     }
     
     // src/render/from-plantuml.ts
-    var ARROW = /^(.+?)\s*(<?)(-{2,}|\.{2,})(>?)\s*(.+?)(?:\s*:\s*(.+))?$/;
-    var DECLARED = /^(component|package|node|folder|cloud|database|state|artifact|frame|rectangle)\s+(.+)$/;
+    var SHAPES = {
+      component: "rect",
+      node: "rect",
+      rectangle: "rect",
+      artifact: "rect",
+      state: "rect",
+      database: "cylinder",
+      // PlantUML draws an entity as a cylinder in a component diagram; `entity` in an ER diagram is a different
+      // symbol, and that diagram family is not one this renderer accepts.
+      entity: "cylinder",
+      // A use case is an ellipse. The `circle` symbol is written as an ellipse whose radii follow the box, so it
+      // reads as the familiar use-case oval; `stadium` is the pill a terminal state is drawn as.
+      usecase: "circle"
+    };
+    var BOUNDARY = /* @__PURE__ */ new Set(["package", "folder", "node", "component", "rectangle", "artifact"]);
+    var NOT_DRAWN = {
+      actor: "an actor is a stick figure, not one of the shapes this renderer draws",
+      participant: "a participant is a lifeline, not one of the shapes this renderer draws",
+      class: "a class box has compartments this renderer does not draw",
+      object: "an object box has compartments this renderer does not draw",
+      interface: "an interface is a circle or a boxed stereotype, neither of which this renderer draws",
+      enum: "an enum box has compartments this renderer does not draw",
+      annotation: "an annotation is not one of the shapes this renderer draws",
+      cloud: "a cloud outline is not one of the shapes this renderer draws",
+      frame: "a frame tab is not one of the shapes this renderer draws",
+      card: "a card is not one of the shapes this renderer draws",
+      file: "a file outline is not one of the shapes this renderer draws",
+      agent: "an agent is not one of the shapes this renderer draws",
+      boundary: "the boundary symbol is not one of the shapes this renderer draws",
+      control: "the control symbol is not one of the shapes this renderer draws",
+      collections: "a collections symbol is not one of the shapes this renderer draws",
+      queue: "a queue is not one of the shapes this renderer draws",
+      stack: "a stack is not one of the shapes this renderer draws",
+      storage: "a storage symbol is not one of the shapes this renderer draws",
+      note: "a note is not one of the shapes this renderer draws",
+      legend: "a legend is not one of the shapes this renderer draws"
+    };
+    var FRAGMENT = /* @__PURE__ */ new Set(["sequence", "alt", "opt", "loop", "par", "group", "ref", "break", "critical", "activate", "deactivate", "destroy", "create", "newpage", "autonumber"]);
+    var ARROW = /^(.+?)\s*(<\|?|[*o])?(-{2,}|\.{2,})(\|?>|[*o])?\s*(.+?)(?:\s*:\s*(.+))?$/;
+    var SHAPE_KEYWORDS = Object.keys(SHAPES);
+    var DECLARED = new RegExp("^(" + SHAPE_KEYWORDS.join("|") + ")\\s+(.+)$");
     var QUOTED_ALIAS = /^["'](.+?)["']\s+as\s+([A-Za-z_][\w-]*)$/;
     var BRACKET_ALIAS = /^\[(.+?)\]\s+as\s+([A-Za-z_][\w-]*)$/;
+    var PLAIN_ALIAS = /^([A-Za-z_][\w.-]*)\s+as\s+([A-Za-z_][\w-]*)$/;
     var BRACKET = /^\[(.+?)\]$/;
-    var UNSUPPORTED2 = /^(actor|participant|usecase|class|object|note|legend|alt|opt|loop|par|group\s|ref\s|activate|deactivate|destroy|create|newpage)\b/;
-    var IGNORED = /^(skinparam|!theme|!define|!include|hide|show|scale|left to right direction|top to bottom direction|together)\b/;
-    function ensure2(builder, id, label) {
+    var IGNORED = /^(skinparam|!theme|!define|!include|!pragma|hide|show|scale|left to right direction|top to bottom direction|together|allowmixing)\b/;
+    function ensure2(builder, id, label, shape, implicit = false) {
       const existing = builder.nodes.get(id);
       if (existing === void 0) {
-        builder.nodes.set(id, { id, role: "normal", ...label === void 0 ? {} : { label } });
+        builder.nodes.set(id, {
+          id,
+          role: "normal",
+          ...label === void 0 ? {} : { label },
+          ...shape === void 0 ? {} : { shape }
+        });
+        if (implicit) builder.implicit.add(id);
         const innermost = builder.open[builder.open.length - 1];
         if (innermost !== void 0 && !innermost.members.includes(id)) innermost.members.push(id);
         return;
       }
+      if (!implicit) builder.implicit.delete(id);
       if (label !== void 0 && (existing.label === void 0 || existing.label === "")) existing.label = label;
+      if (shape !== void 0 && existing.shape === void 0) existing.shape = shape;
     }
     function reference(token) {
       const text2 = token.trim();
       const bracket = BRACKET.exec(text2);
       if (bracket !== null) {
         const label = bracket[1].trim();
-        return { id: label, label };
+        return { id: label, label, shape: "rect" };
       }
       const quoted = /^["'](.+?)["']$/.exec(text2);
       if (quoted !== null) return { id: quoted[1], label: quoted[1] };
       return { id: text2 };
     }
+    function keywordOf(line) {
+      return line.split(/[\s{]/)[0].toLowerCase();
+    }
+    function boundaryOf(declaration, keyword, ordinal) {
+      const rest = declaration.slice(keyword.length).trim();
+      const alias = QUOTED_ALIAS.exec(rest) ?? BRACKET_ALIAS.exec(rest) ?? PLAIN_ALIAS.exec(rest);
+      if (alias !== null) return { id: alias[2], label: alias[1] };
+      const label = rest.replace(/^["']|["']$/g, "");
+      return { id: "group-" + String(ordinal), label: label === "" ? keyword : label };
+    }
+    function readArrow(line) {
+      const match = ARROW.exec(line);
+      if (match === null) return void 0;
+      const left = reference(match[1]);
+      const right = reference(match[5]);
+      const leftMark = match[2];
+      const rightMark = match[4];
+      const dotted = match[3].startsWith(".");
+      const label = (match[6] ?? "").trim();
+      if (leftMark !== void 0 && rightMark !== void 0) {
+        return "an edge marked at both ends is not one this renderer draws";
+      }
+      if (leftMark === "*" || leftMark === "o" || rightMark === "*" || rightMark === "o") {
+        if (dotted) return "a dotted composition or aggregation is not one this renderer draws";
+        const atRight = rightMark === "*" || rightMark === "o";
+        const mark = atRight ? rightMark : leftMark;
+        return {
+          from: atRight ? right : left,
+          to: atRight ? left : right,
+          label,
+          dashed: false,
+          arrow: mark === "*" ? "composition" : "aggregation"
+        };
+      }
+      if (leftMark !== void 0) {
+        return {
+          from: right,
+          to: left,
+          label,
+          dashed: dotted,
+          arrow: leftMark === "<|" ? dotted ? "realization" : "generalization" : dotted ? "dependency" : "association"
+        };
+      }
+      if (rightMark !== void 0) {
+        return {
+          from: left,
+          to: right,
+          label,
+          dashed: dotted,
+          arrow: rightMark === "|>" ? dotted ? "realization" : "generalization" : dotted ? "dependency" : "association"
+        };
+      }
+      return "a line with no arrow end is not one this renderer draws; name the end it points at";
+    }
     function fromPlantUml(source, title = "plantuml") {
       const lines = source.split(/\r?\n/);
       const refused = [];
-      const builder = { nodes: /* @__PURE__ */ new Map(), edges: [], groups: [], open: [] };
+      const builder = { nodes: /* @__PURE__ */ new Map(), edges: [], edgeLines: [], edgeScopes: [], groups: [], open: [], implicit: /* @__PURE__ */ new Set() };
       let startId;
       let seenAny = false;
       let groupCount = 0;
@@ -819,8 +3206,14 @@ window.__ModuleLoader__.load({
         seenAny = true;
         if (/^title\b/.test(line)) return;
         if (IGNORED.test(line)) return;
-        if (UNSUPPORTED2.test(line)) {
-          refused.push(where + "`" + (line.split(/\s/)[0] ?? "") + "` is not a diagram this renderer draws");
+        const keyword = keywordOf(line);
+        const notDrawn = NOT_DRAWN[keyword];
+        if (notDrawn !== void 0) {
+          refused.push(where + "`" + keyword + "`: " + notDrawn);
+          return;
+        }
+        if (FRAGMENT.has(keyword)) {
+          refused.push(where + "`" + keyword + "`: a sequence statement is not part of a drawing this renderer makes");
           return;
         }
         if (line === "}") {
@@ -834,56 +3227,176 @@ window.__ModuleLoader__.load({
         }
         if (line.endsWith("{")) {
           const declaration = line.slice(0, -1).trim();
-          const declared2 = DECLARED.exec(declaration);
-          const label = declared2 === null ? declaration.replace(/^["']|["']$/g, "") : declared2[2].replace(/^["']|["']$/g, "");
+          const opener = keywordOf(declaration);
+          if (!BOUNDARY.has(opener)) {
+            const reason = SHAPES[opener] === void 0 ? "`" + declaration + "` is not a boundary this renderer draws" : "a `" + opener + "` block is not a boundary this renderer draws";
+            refused.push(where + reason);
+            return;
+          }
           groupCount += 1;
-          builder.open.push({ id: "group-" + String(groupCount), label, members: [] });
+          const boundary = boundaryOf(declaration, opener, groupCount);
+          builder.open.push({ id: boundary.id, label: boundary.label, members: [] });
+          return;
+        }
+        if (line === "[*] --> [*]") return;
+        const startMarker = /^\[\*\]\s*-->\s*(.+)$/.exec(line);
+        if (startMarker !== null) {
+          const target = reference(startMarker[1]);
+          ensure2(builder, target.id, target.label, target.shape);
+          if (startId === void 0) startId = target.id;
           return;
         }
         const declared = DECLARED.exec(line);
         if (declared !== null) {
+          const shape = SHAPES[declared[1]];
           const rest = declared[2].trim();
           const quoted = QUOTED_ALIAS.exec(rest);
           if (quoted !== null) {
-            ensure2(builder, quoted[2], quoted[1]);
+            ensure2(builder, quoted[2], quoted[1], shape);
             return;
           }
           const bracketed = BRACKET_ALIAS.exec(rest);
           if (bracketed !== null) {
-            ensure2(builder, bracketed[2], bracketed[1]);
+            ensure2(builder, bracketed[2], bracketed[1], shape);
             return;
           }
-          if (/^["'](.+?)["']$/.test(rest)) return;
-          const reference_ = reference(rest);
-          ensure2(builder, reference_.id, reference_.label);
-          return;
-        }
-        if (line === "[*] --> [*]") return;
-        const startMarker = /^\[\*\]\s*-->\s*(.+)$/.exec(line);
-        if (startMarker !== null) {
-          const target = reference(startMarker[1]);
-          ensure2(builder, target.id, target.label);
-          if (startId === void 0) startId = target.id;
+          const plain = PLAIN_ALIAS.exec(rest);
+          if (plain !== null) {
+            ensure2(builder, plain[2], plain[1], shape);
+            return;
+          }
+          const written = reference(rest);
+          ensure2(builder, written.id, written.label, shape);
           return;
         }
-        const arrow = ARROW.exec(line);
-        if (arrow !== null) {
-          const left = arrow[2] === "<" ? arrow[5] : arrow[1];
-          const right = arrow[2] === "<" ? arrow[1] : arrow[5];
-          const from = reference(left);
-          const to = reference(right);
-          ensure2(builder, from.id, from.label);
-          ensure2(builder, to.id, to.label);
-          builder.edges.push({ from: from.id, to: to.id, label: (arrow[6] ?? "").trim(), ...arrow[3].startsWith(".") ? { dashed: true } : {} });
+        const arrow = readArrow(line);
+        if (arrow !== void 0) {
+          if (typeof arrow === "string") {
+            refused.push(where + arrow);
+            return;
+          }
+          ensure2(builder, arrow.from.id, arrow.from.label, arrow.from.shape, true);
+          ensure2(builder, arrow.to.id, arrow.to.label, arrow.to.shape, true);
+          builder.edges.push({
+            from: arrow.from.id,
+            to: arrow.to.id,
+            label: arrow.label,
+            ...arrow.dashed ? { dashed: true } : {},
+            arrow: arrow.arrow
+          });
+          builder.edgeLines.push(index + 1);
+          builder.edgeScopes.push(builder.open[builder.open.length - 1]?.id);
           return;
         }
         const single = BRACKET.exec(line);
         if (single !== null) {
-          ensure2(builder, single[1].trim(), single[1].trim());
+          ensure2(builder, single[1].trim(), single[1].trim(), "rect");
           return;
         }
         refused.push(where + "`" + line + "` is not something this renderer draws");
       });
+      const boundaryNames = /* @__PURE__ */ new Map();
+      const disputedNames = /* @__PURE__ */ new Set();
+      for (const group of builder.groups) {
+        for (const name of [group.id, group.label]) {
+          const existing = boundaryNames.get(name);
+          if (existing !== void 0 && existing !== group.id) disputedNames.add(name);
+          else boundaryNames.set(name, group.id);
+        }
+      }
+      for (const name of disputedNames) boundaryNames.delete(name);
+      const boundaryAt = /* @__PURE__ */ new Map();
+      const ambiguousAt = /* @__PURE__ */ new Set();
+      for (const id of builder.implicit) {
+        if (disputedNames.has(id)) {
+          ambiguousAt.add(id);
+          builder.nodes.delete(id);
+        } else {
+          const groupId = boundaryNames.get(id);
+          if (groupId === void 0) continue;
+          boundaryAt.set(id, groupId);
+          builder.nodes.delete(id);
+        }
+        for (const group of builder.groups) {
+          const at = group.members.indexOf(id);
+          if (at >= 0) group.members.splice(at, 1);
+        }
+      }
+      const groupById = new Map(builder.groups.map((group) => [group.id, group]));
+      const childrenOf = /* @__PURE__ */ new Map();
+      for (const group of builder.groups) {
+        if (group.parent === void 0) continue;
+        childrenOf.set(group.parent, [...childrenOf.get(group.parent) ?? [], group.id]);
+      }
+      const drawable = /* @__PURE__ */ new Map();
+      const hasContents = (id) => {
+        const known = drawable.get(id);
+        if (known !== void 0) return known;
+        const group = groupById.get(id);
+        let found = false;
+        for (const member of group.members) {
+          if (builder.nodes.has(member)) {
+            found = true;
+            break;
+          }
+        }
+        if (!found) {
+          for (const child of childrenOf.get(id) ?? []) {
+            if (hasContents(child)) {
+              found = true;
+              break;
+            }
+          }
+        }
+        drawable.set(id, found);
+        return found;
+      };
+      const boundaryLabel = (id) => groupById.get(id).label;
+      const within = (scope, boundary) => {
+        let cursor = scope;
+        while (cursor !== void 0) {
+          if (cursor === boundary) return true;
+          cursor = groupById.get(cursor).parent;
+        }
+        return false;
+      };
+      const keptEdges = [];
+      builder.edges.forEach((edge, index) => {
+        const where = "line " + String(builder.edgeLines[index]) + ": ";
+        const fromBoundary = boundaryAt.get(edge.from);
+        const toBoundary = boundaryAt.get(edge.to);
+        if (ambiguousAt.has(edge.from) || ambiguousAt.has(edge.to)) {
+          const name = ambiguousAt.has(edge.from) ? edge.from : edge.to;
+          refused.push(where + "`" + name + "` is the name of more than one block; an edge cannot say which boundary it means");
+          return;
+        }
+        if (fromBoundary !== void 0 && toBoundary !== void 0) {
+          refused.push(where + "`" + boundaryLabel(fromBoundary) + "` and `" + boundaryLabel(toBoundary) + "` are boundaries, not elements; an edge between two boundaries is not one this renderer draws");
+          return;
+        }
+        const boundary = fromBoundary ?? toBoundary;
+        if (boundary !== void 0) {
+          const group = groupById.get(boundary);
+          if (group.parent !== void 0) {
+            refused.push(where + "`" + group.label + "` is a block inside `" + boundaryLabel(group.parent) + "`, not an element; an edge to a nested boundary would have to enter another boundary");
+            return;
+          }
+          if (within(builder.edgeScopes[index], boundary)) {
+            refused.push(where + "`" + group.label + "` is the block this edge is written inside, not an element; an edge cannot leave a boundary and arrive at the same boundary");
+            return;
+          }
+          if (!hasContents(boundary)) {
+            refused.push(where + "`" + group.label + "` is a block with nothing drawn inside it, so there is no rectangle to attach the edge to");
+            return;
+          }
+        }
+        keptEdges.push({
+          ...edge,
+          ...fromBoundary === void 0 ? {} : { from: fromBoundary },
+          ...toBoundary === void 0 ? {} : { to: toBoundary }
+        });
+      });
+      builder.edges = keptEdges;
       if (!seenAny || builder.nodes.size === 0) {
         return { diagram: emptyDiagram(title, "no nodes found"), refused };
       }
@@ -900,6 +3413,13 @@ window.__ModuleLoader__.load({
     }
     
     // src/render/svg.ts
+    function boxText(shape, stroke) {
+      const lines = shape.lines === void 0 || shape.lines.length === 0 ? [shape.label] : shape.lines;
+      const lineHeight = 15;
+      const first = shape.y + shape.height / 2 - (lines.length - 1) * lineHeight / 2 + 4;
+      const spans = lines.map((line, index) => '<tspan x="' + n(shape.x + shape.width / 2) + '" y="' + n(first + index * lineHeight) + '">' + escape(line) + "</tspan>").join("");
+      return '<text font-size="11" text-anchor="middle" fill="' + stroke + '">' + spans + "</text>";
+    }
     var n = (value) => {
       const rounded = Math.round(value * 10) / 10;
       return Number.isInteger(rounded) ? String(rounded) : rounded.toFixed(1);
@@ -914,45 +3434,130 @@ window.__ModuleLoader__.load({
       box: (shape, colours) => {
         const stroke = colours[shape.colour];
         const width = shape.initial ? 2.5 : 1;
-        return '<rect x="' + n(shape.x) + '" y="' + n(shape.y) + '" width="' + n(shape.width) + '" height="' + n(shape.height) + '" rx="6" fill="' + colours.surface + '" stroke="' + stroke + '" stroke-width="' + n(width) + '" /><text x="' + n(shape.x + shape.width / 2) + '" y="' + n(shape.y + shape.height / 2 + 4) + '" font-size="11" text-anchor="middle" fill="' + stroke + '">' + escape(shape.label) + "</text>";
+        const tail = '" fill="' + colours.surface + '" stroke="' + stroke + '" stroke-width="' + n(width) + '" />';
+        const x = shape.x;
+        const y = shape.y;
+        const w = shape.width;
+        const h = shape.height;
+        const at = (point) => n(point.x) + " " + n(point.y);
+        const points = (list) => list.map((point) => n(point.x) + "," + n(point.y)).join(",");
+        const curve = (segment) => " C" + at(segment.c1) + " " + at(segment.c2) + " " + at(segment.to);
+        switch (shape.shape) {
+          // A decision: the notation wrote `{…}`, and a rounded rectangle would say "step".
+          case "diamond":
+            return '<polygon points="' + points(diamondPoints(shape)) + tail + boxText(shape, stroke);
+          case "hexagon":
+            return '<polygon points="' + points(hexagonPoints(shape)) + tail + boxText(shape, stroke);
+          // A datastore: the cylinder UML draws for a stored collection.
+          case "cylinder": {
+            const caps = cylinderCaps(shape);
+            const path = "M" + at(caps.top.from) + curve(caps.top) + " L" + at(caps.bottom.from) + curve(caps.bottom) + " Z";
+            return '<path d="' + path + tail + boxText(shape, stroke);
+          }
+          // A start or end state: the stadium a terminal node is drawn as.
+          case "stadium":
+            return '<rect x="' + n(x) + '" y="' + n(y) + '" width="' + n(w) + '" height="' + n(h) + '" rx="' + n(stadiumRadius(shape)) + tail + boxText(shape, stroke);
+          case "circle":
+            return '<ellipse cx="' + n(x + w / 2) + '" cy="' + n(y + h / 2) + '" rx="' + n(w / 2) + '" ry="' + n(h / 2) + tail + boxText(shape, stroke);
+          // A subroutine carries its double side lines.
+          case "subroutine":
+            return '<rect x="' + n(x) + '" y="' + n(y) + '" width="' + n(w) + '" height="' + n(h) + tail + '<line x1="' + n(x + 6) + '" y1="' + n(y) + '" x2="' + n(x + 6) + '" y2="' + n(y + h) + '" stroke="' + stroke + '" stroke-width="1" /><line x1="' + n(x + w - 6) + '" y1="' + n(y) + '" x2="' + n(x + w - 6) + '" y2="' + n(y + h) + '" stroke="' + stroke + '" stroke-width="1" />' + boxText(shape, stroke);
+          default:
+            return '<rect x="' + n(x) + '" y="' + n(y) + '" width="' + n(w) + '" height="' + n(h) + '" rx="6' + tail + boxText(shape, stroke);
+        }
       },
       link: (shape, colours) => {
         const stroke = colours[shape.colour];
-        const arrow = arrowHead(shape.x1, shape.y1, shape.x2, shape.y2, stroke);
-        return '<line x1="' + n(shape.x1) + '" y1="' + n(shape.y1) + '" x2="' + n(shape.x2) + '" y2="' + n(shape.y2) + '" stroke="' + stroke + '" stroke-width="1" />' + arrow + edgeLabel(shape.label, shape.labelX, shape.labelY, colours);
+        const marks = edgeMarks(
+          { x: shape.x1, y: shape.y1 },
+          { x: shape.x2, y: shape.y2 },
+          { x: shape.x1, y: shape.y1 },
+          { x: shape.x2, y: shape.y2 },
+          shape.arrow,
+          stroke,
+          colours.background
+        );
+        return '<line x1="' + n(shape.x1) + '" y1="' + n(shape.y1) + '" x2="' + n(shape.x2) + '" y2="' + n(shape.y2) + '" stroke="' + stroke + '" stroke-width="1"' + dash(shape) + " />" + marks + edgeLabel(shape.label, shape.labelX, shape.labelY, colours);
       },
       path: (shape, colours) => {
         const stroke = colours[shape.colour];
         const points = shape.points.map((point) => n(point.x) + "," + n(point.y)).join(" ");
         const last = shape.points[shape.points.length - 1];
         const before = shape.points[shape.points.length - 2] ?? last;
-        return '<polyline points="' + points + '" fill="none" stroke="' + stroke + '" stroke-width="1" stroke-linejoin="round" />' + arrowHead(before.x, before.y, last.x, last.y, stroke) + edgeLabel(shape.label, shape.labelX, shape.labelY, colours);
+        const first = shape.points[0];
+        const after = shape.points[1] ?? first;
+        return '<polyline points="' + points + '" fill="none" stroke="' + stroke + '" stroke-width="1" stroke-linejoin="round"' + dash(shape) + " />" + edgeMarks(first, after, before, last, shape.arrow, stroke, colours.background) + edgeLabel(shape.label, shape.labelX, shape.labelY, colours);
       },
+      // A junction dot: the visible answer to "is this a join or a crossing?". Filled in the line's own colour, so it
+      // reads as the line thickening where a branch meets it rather than as a new mark on the page.
+      junction: (shape, colours) => '<circle cx="' + n(shape.x) + '" cy="' + n(shape.y) + '" r="2.5" fill="' + colours[shape.colour] + '" />',
       title: (shape, colours) => {
         return '<text x="' + n(shape.x) + '" y="' + n(shape.y) + '" font-size="12" fill="' + colours[shape.colour] + '">' + escape(shape.text) + "</text>";
       },
       caption: (shape, colours) => {
         const colour = colours[shape.colour];
         const lines = shape.lines.map((line, index) => '<tspan x="' + n(shape.x) + '" dy="' + (index === 0 ? 0 : 15) + '">' + escape(line) + "</tspan>").join("");
-        return '<text x="' + n(shape.x) + '" y="' + n(shape.y + 11) + '" font-size="10" fill="' + colour + '">' + lines + "</text>";
+        return '<text x="' + n(shape.x) + '" y="' + n(shape.y + 11) + '" font-size="10" text-anchor="middle" fill="' + colour + '">' + lines + "</text>";
       }
     };
-    function arrowHead(x1, y1, x2, y2, stroke) {
-      const length = Math.hypot(x2 - x1, y2 - y1);
-      if (length < 1) return "";
-      const ux = (x2 - x1) / length;
-      const uy = (y2 - y1) / length;
+    function dash(shape) {
+      return shape.dashed === true ? ' stroke-dasharray="4 3"' : "";
+    }
+    function edgeMarks(source, sourceNext, targetPrev, target, arrow, stroke, background) {
+      if (arrow === "composition" || arrow === "aggregation") {
+        return diamond(source, sourceNext, stroke, arrow === "composition" ? stroke : background);
+      }
+      if (arrow === "generalization" || arrow === "realization") {
+        return hollowTriangle(targetPrev, target, stroke, background);
+      }
+      return arrowHead(targetPrev.x, targetPrev.y, target.x, target.y, stroke);
+    }
+    function tipAndBase(from, to) {
+      const length = Math.hypot(to.x - from.x, to.y - from.y);
+      if (length < 1) return void 0;
+      const ux = (to.x - from.x) / length;
+      const uy = (to.y - from.y) / length;
       const size = 7;
       const half = 3.2;
-      const baseX = x2 - ux * size;
-      const baseY = y2 - uy * size;
-      const left = n(baseX - uy * half) + "," + n(baseY + ux * half);
-      const right = n(baseX + uy * half) + "," + n(baseY - ux * half);
-      return '<polygon points="' + n(x2) + "," + n(y2) + " " + left + " " + right + '" fill="' + stroke + '" />';
+      const baseX = to.x - ux * size;
+      const baseY = to.y - uy * size;
+      return {
+        tip: n(to.x) + "," + n(to.y),
+        left: n(baseX - uy * half) + "," + n(baseY + ux * half),
+        right: n(baseX + uy * half) + "," + n(baseY - ux * half)
+      };
+    }
+    function arrowHead(x1, y1, x2, y2, stroke) {
+      const points = tipAndBase({ x: x1, y: y1 }, { x: x2, y: y2 });
+      if (points === void 0) return "";
+      return '<polygon points="' + points.tip + " " + points.left + " " + points.right + '" fill="' + stroke + '" />';
+    }
+    function hollowTriangle(from, to, stroke, background) {
+      const points = tipAndBase(from, to);
+      if (points === void 0) return "";
+      return '<polygon points="' + points.tip + " " + points.left + " " + points.right + '" fill="' + background + '" stroke="' + stroke + '" stroke-width="1" />';
+    }
+    function diamond(at, next, stroke, fill) {
+      const length = Math.hypot(next.x - at.x, next.y - at.y);
+      if (length < 1) return "";
+      const ux = (next.x - at.x) / length;
+      const uy = (next.y - at.y) / length;
+      const size = 12;
+      const half = 4;
+      const back = { x: at.x + ux * size, y: at.y + uy * size };
+      const middle = { x: at.x + ux * size / 2, y: at.y + uy * size / 2 };
+      const left = { x: middle.x - uy * half, y: middle.y + ux * half };
+      const right = { x: middle.x + uy * half, y: middle.y - ux * half };
+      const points = [at, left, back, right].map((point) => n(point.x) + "," + n(point.y)).join(" ");
+      return '<polygon points="' + points + '" fill="' + fill + '" stroke="' + stroke + '" stroke-width="1" />';
     }
     function edgeLabel(label, x, y, colours) {
       if (typeof label !== "string" || label === "") return "";
-      return '<text x="' + n(x) + '" y="' + n(y) + '" font-size="10" fill="' + colours.muted + '">' + escape(label) + "</text>";
+      const width = textWidth(label);
+      const left = x - width / 2;
+      const top = y - LABEL_HEIGHT / 2;
+      const baseline = y + 3.5;
+      return '<rect x="' + n(left) + '" y="' + n(top) + '" width="' + n(width) + '" height="' + n(LABEL_HEIGHT) + '" fill="' + colours.background + '" /><text x="' + n(x) + '" y="' + n(baseline) + '" font-size="10" text-anchor="middle" fill="' + colours.muted + '">' + escape(label) + "</text>";
     }
     function toSvg(canvas, colours, label) {
       let dropped = 0;