@ktrysmt/beautiful-mermaid 1.4.2 → 1.4.4

package/README.md

@@ -1,6 +1,6 @@
 <div align="center">
 
-# beautiful-mermaid
+# @ktrysmt/beautiful-mermaid
 
 **Render Mermaid diagrams as beautiful SVGs or ASCII art**
 
@@ -8,32 +8,23 @@ Ultra-fast, fully themeable, zero DOM dependencies. Built for the AI era.
 
 ![beautiful-mermaid sequence diagram example](hero.png)
 
-[![npm version](https://img.shields.io/npm/v/beautiful-mermaid.svg)](https://www.npmjs.com/package/beautiful-mermaid)
+[![npm version](https://img.shields.io/npm/v/@ktrysmt/beautiful-mermaid.svg)](https://www.npmjs.com/package/@ktrysmt/beautiful-mermaid)
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
 
-[**Live Demo & Samples**](https://agents.craft.do/mermaid)
-
-**[→ Use it live in Craft Agents](https://agents.craft.do)**
-
 </div>
 
 ---
 
-## Why We Built This
-
-Diagrams are essential for AI-assisted programming. When you're working with an AI coding assistant, being able to visualize data flows, state machines, and system architecture—directly in your terminal or chat interface—makes complex concepts instantly graspable.
-
-[Mermaid](https://mermaid.js.org/) is the de facto standard for text-based diagrams. It's brilliant. But the default renderer has problems:
-
-- **Aesthetics** — Might be personal preference, but wished they looked more professional
-- **Complex theming** — Customizing colors requires wrestling with CSS classes
-- **No terminal output** — Can't render to ASCII for CLI tools
-- **Heavy dependencies** — Pulls in a lot of code for simple diagrams
+## About This Fork
 
-We built `beautiful-mermaid` at [Craft](https://craft.do) to power diagrams in [Craft Agents](https://agents.craft.do). It's fast, beautiful, and works everywhere—from rich UIs to plain terminals.
+This is a fork of [beautiful-mermaid](https://github.com/lukilabs/beautiful-mermaid), originally built by the team at [Craft](https://craft.do). This fork is independently maintained by [@ktrysmt](https://github.com/ktrysmt) with additional bug fixes and improvements including:
 
+- CJK/Unicode label support for subgraphs
+- Subgraph layout fixes (vertical stacking, containment, label width)
+- Edge routing improvements
+- Scoped npm package (`@ktrysmt/beautiful-mermaid`)
 
-The ASCII rendering engine is based on [mermaid-ascii](https://github.com/AlexanderGrooff/mermaid-ascii) by Alexander Grooff. We ported it from Go to TypeScript and extended it. Thank you Alexander for the excellent foundation! (And inspiration that this was possible.)
+The ASCII rendering engine is based on [mermaid-ascii](https://github.com/AlexanderGrooff/mermaid-ascii) by Alexander Grooff, ported from Go to TypeScript. Thank you Alexander for the excellent foundation!
 
 ## Features
 
@@ -50,11 +41,11 @@ The ASCII rendering engine is based on [mermaid-ascii](https://github.com/Alexan
 ## Installation
 
 ```bash
-npm install beautiful-mermaid
+npm install @ktrysmt/beautiful-mermaid
 # or
-bun add beautiful-mermaid
+bun add @ktrysmt/beautiful-mermaid
 # or
-pnpm add beautiful-mermaid
+pnpm add @ktrysmt/beautiful-mermaid
 ```
 
 ## Quick Start
@@ -62,7 +53,7 @@ pnpm add beautiful-mermaid
 ### SVG Output
 
 ```typescript
-import { renderMermaidSVG } from 'beautiful-mermaid'
+import { renderMermaidSVG } from '@ktrysmt/beautiful-mermaid'
 
 const svg = renderMermaidSVG(`
   graph TD
@@ -79,7 +70,7 @@ Need async? Use `renderMermaidSVGAsync()` — same output, returns a `Promise<st
 ### ASCII Output
 
 ```typescript
-import { renderMermaidASCII } from 'beautiful-mermaid'
+import { renderMermaidASCII } from '@ktrysmt/beautiful-mermaid'
 
 const ascii = renderMermaidASCII(`graph LR; A --> B --> C`)
 ```
@@ -99,7 +90,7 @@ const ascii = renderMermaidASCII(`graph LR; A --> B --> C`)
 Because rendering is synchronous, you can use `useMemo()` for zero-flash diagram rendering:
 
 ```tsx
-import { renderMermaidSVG } from 'beautiful-mermaid'
+import { renderMermaidSVG } from '@ktrysmt/beautiful-mermaid'
 
 function MermaidDiagram({ code }: { code: string }) {
   const { svg, error } = React.useMemo(() => {
@@ -224,7 +215,7 @@ const svg = renderMermaidSVG(diagram, {
 | `one-dark` | Dark | `#282c34` | `#c678dd` |
 
 ```typescript
-import { renderMermaidSVG, THEMES } from 'beautiful-mermaid'
+import { renderMermaidSVG, THEMES } from '@ktrysmt/beautiful-mermaid'
 
 const svg = renderMermaidSVG(diagram, THEMES['tokyo-night'])
 ```
@@ -259,7 +250,7 @@ Use **any VS Code theme** directly via Shiki integration. This gives you access
 
 ```typescript
 import { getSingletonHighlighter } from 'shiki'
-import { renderMermaidSVG, fromShikiTheme } from 'beautiful-mermaid'
+import { renderMermaidSVG, fromShikiTheme } from '@ktrysmt/beautiful-mermaid'
 
 // Load any theme from Shiki's registry
 const highlighter = await getSingletonHighlighter({
@@ -437,7 +428,7 @@ The chart renderer follows a clean, minimal design philosophy inspired by Apple
 For terminal environments, CLI tools, or anywhere you need plain text, render to ASCII or Unicode box-drawing characters:
 
 ```typescript
-import { renderMermaidASCII } from 'beautiful-mermaid'
+import { renderMermaidASCII } from '@ktrysmt/beautiful-mermaid'
 
 // Unicode mode (default) — prettier box drawing
 const unicode = renderMermaidASCII(`graph LR; A --> B`)
@@ -580,6 +571,6 @@ MIT — see [LICENSE](LICENSE) for details.
 
 <div align="center">
 
-Built with care by the team at [Craft](https://craft.do)
+Originally built by the team at [Craft](https://craft.do). Fork maintained by [@ktrysmt](https://github.com/ktrysmt).
 
 </div>

package/dist/index.js

@@ -263,8 +263,11 @@ function measureMultilineText(text, fontSize, fontWeight) {
 
 // src/multiline-utils.ts
 function normalizeBrTags(label) {
-  const unquoted = label.startsWith('"') && label.endsWith('"') ? label.slice(1, -1) : label;
-  return unquoted.replace(/<br\s*\/?>/gi, "\n").replace(/\\n/g, "\n").replace(/<\/?(?:sub|sup|small|mark)\s*>/gi, "").replace(/\*\*(.+?)\*\*/g, "<b>$1</b>").replace(/(?<!\*)\*([^\s*](?:[^*]*[^\s*])?)\*(?!\*)/g, "<i>$1</i>").replace(/~~(.+?)~~/g, "<s>$1</s>");
+  let result = label.replace(/<br\s*\/?>/gi, "\n").replace(/\\n/g, "\n").trim();
+  if (result.startsWith('"') && result.endsWith('"')) {
+    result = result.slice(1, -1);
+  }
+  return result.replace(/<\/?(?:sub|sup|small|mark)\s*>/gi, "").replace(/\*\*(.+?)\*\*/g, "<b>$1</b>").replace(/(?<!\*)\*([^\s*](?:[^*]*[^\s*])?)\*(?!\*)/g, "<i>$1</i>").replace(/~~(.+?)~~/g, "<s>$1</s>").trim();
 }
 function escapeXml(text) {
   return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
@@ -336,8 +339,43 @@ ${textEl}`;
 }
 
 // src/parser.ts
+function joinMultilineDefinitions(lines) {
+  const result = [];
+  let buffer = "";
+  let bracketDepth = 0;
+  let parenDepth = 0;
+  let inQuote = false;
+  for (const line of lines) {
+    if (bracketDepth === 0 && parenDepth === 0 && !inQuote) {
+      buffer = line;
+    } else {
+      if (/<br\s*\/?>\s*$/i.test(buffer)) {
+        buffer += line;
+      } else {
+        buffer += "<br>" + line;
+      }
+    }
+    for (const ch of line) {
+      if (ch === '"') {
+        inQuote = !inQuote;
+      } else if (!inQuote) {
+        if (ch === "[") bracketDepth++;
+        else if (ch === "]") bracketDepth = Math.max(0, bracketDepth - 1);
+        else if (ch === "(") parenDepth++;
+        else if (ch === ")") parenDepth = Math.max(0, parenDepth - 1);
+      }
+    }
+    if (bracketDepth === 0 && parenDepth === 0 && !inQuote) {
+      result.push(buffer);
+      buffer = "";
+    }
+  }
+  if (buffer) result.push(buffer);
+  return result;
+}
 function parseMermaid(text) {
-  const lines = text.split("\n").map((l) => l.trim()).filter((l) => l.length > 0 && !l.startsWith("%%"));
+  const rawLines = text.split("\n").map((l) => l.trim()).filter((l) => l.length > 0 && !l.startsWith("%%"));
+  const lines = joinMultilineDefinitions(rawLines);
   if (lines.length === 0) {
     throw new Error("Empty mermaid diagram");
   }
@@ -1691,7 +1729,7 @@ function isFreeInGrid(grid, c) {
   return !grid.has(gridKey(c));
 }
 var MAX_ITERATIONS = 5e4;
-function getPath(grid, from, to) {
+function getPath(grid, from, to, congestion) {
   const pq = new MinHeap();
   pq.push({ coord: from, priority: 0 });
   const costSoFar = /* @__PURE__ */ new Map();
@@ -1719,7 +1757,8 @@ function getPath(grid, from, to) {
       if (!isFreeInGrid(grid, next) && !gridCoordEquals(next, to)) {
         continue;
       }
-      const newCost = currentCost + 1;
+      const congestionPenalty = congestion?.get(gridKey(next)) ?? 0;
+      const newCost = currentCost + 1 + congestionPenalty * 3;
       const nextKey = gridKey(next);
       const existingCost = costSoFar.get(nextKey);
       if (existingCost === void 0 || newCost < existingCost) {
@@ -1863,17 +1902,17 @@ function determineStartAndEndDir(edge, graphDirection) {
   }
   return [preferredDir, preferredOppositeDir, alternativeDir, alternativeOppositeDir];
 }
-function determinePath(graph, edge) {
+function determinePath(graph, edge, congestion) {
   const sourceSg = getNodeSubgraph(graph, edge.from);
   const targetSg = getNodeSubgraph(graph, edge.to);
   const effectiveDir = sourceSg && sourceSg === targetSg && sourceSg.direction ? sourceSg.direction : graph.config.graphDirection;
   const [preferredDir, preferredOppositeDir, alternativeDir, alternativeOppositeDir] = determineStartAndEndDir(edge, effectiveDir);
   const prefFrom = gridCoordDirection(edge.from.gridCoord, preferredDir);
   const prefTo = gridCoordDirection(edge.to.gridCoord, preferredOppositeDir);
-  let preferredPath = getPath(graph.grid, prefFrom, prefTo);
+  let preferredPath = getPath(graph.grid, prefFrom, prefTo, congestion);
   const altFrom = gridCoordDirection(edge.from.gridCoord, alternativeDir);
   const altTo = gridCoordDirection(edge.to.gridCoord, alternativeOppositeDir);
-  let alternativePath = getPath(graph.grid, altFrom, altTo);
+  let alternativePath = getPath(graph.grid, altFrom, altTo, congestion);
   if (preferredPath !== null && alternativePath !== null) {
     preferredPath = mergePath(preferredPath);
     alternativePath = mergePath(alternativePath);
@@ -1904,11 +1943,41 @@ function determinePath(graph, edge) {
   edge.endDir = preferredOppositeDir;
   edge.path = [prefFrom, prefTo];
 }
+function pathToCells(path) {
+  const cells = [];
+  for (let i = 0; i < path.length - 1; i++) {
+    const p1 = path[i];
+    const p2 = path[i + 1];
+    if (p1.x === p2.x) {
+      const minY = Math.min(p1.y, p2.y);
+      const maxY = Math.max(p1.y, p2.y);
+      for (let y = minY; y <= maxY; y++) {
+        cells.push({ x: p1.x, y });
+      }
+    } else {
+      const minX = Math.min(p1.x, p2.x);
+      const maxX = Math.max(p1.x, p2.x);
+      for (let x = minX; x <= maxX; x++) {
+        cells.push({ x, y: p1.y });
+      }
+    }
+  }
+  return cells;
+}
+function segmentMidpointKey(line) {
+  const isVertical = line[0].x === line[1].x;
+  if (isVertical) {
+    const mid = Math.floor((line[0].y + line[1].y) / 2);
+    return `v:${line[0].x}:${mid}`;
+  } else {
+    const mid = Math.floor((line[0].x + line[1].x) / 2);
+    return `h:${line[0].y}:${mid}`;
+  }
+}
 function determineLabelLine(graph, edge) {
   if (edge.text.length === 0) return;
   const lenLabel = maxLineWidth(edge.text);
   const pathLen = edge.path.length;
-  const isVerticalFlow = graph.config.graphDirection === "TD";
   const segments = [];
   for (let i = 1; i < pathLen; i++) {
     const p1 = edge.path[i - 1];
@@ -1918,21 +1987,26 @@ function determineLabelLine(graph, edge) {
     const isVertical = p1.x === p2.x;
     segments.push({ line, width, index: i, isVertical });
   }
-  const suitableSegments = segments.filter((s) => s.width >= lenLabel && s.index > 1);
+  const used = graph.usedLabelMidpoints ?? /* @__PURE__ */ new Set();
+  const middleIdx = Math.floor(pathLen / 2);
+  const scoreSeg = (s) => {
+    const key = segmentMidpointKey(s.line);
+    let score = 0;
+    if (!used.has(key)) score += 1e3;
+    if (s.index > 1) score += 100;
+    score -= Math.abs(s.index - middleIdx);
+    return score;
+  };
+  const candidates = segments.filter((s) => s.width >= lenLabel);
   let largestLine;
-  if (suitableSegments.length > 0) {
-    suitableSegments.sort((a, b) => b.index - a.index);
-    largestLine = suitableSegments[0].line;
+  if (candidates.length > 0) {
+    candidates.sort((a, b) => scoreSeg(b) - scoreSeg(a));
+    largestLine = candidates[0].line;
   } else {
-    const fallbackSegments = segments.filter((s) => s.width >= lenLabel);
-    if (fallbackSegments.length > 0) {
-      fallbackSegments.sort((a, b) => b.index - a.index);
-      largestLine = fallbackSegments[0].line;
-    } else {
-      segments.sort((a, b) => b.width - a.width);
-      largestLine = segments[0]?.line ?? [edge.path[0], edge.path[1]];
-    }
+    segments.sort((a, b) => b.width - a.width);
+    largestLine = segments[0]?.line ?? [edge.path[0], edge.path[1]];
   }
+  used.add(segmentMidpointKey(largestLine));
   const minX = Math.min(largestLine[0].x, largestLine[1].x);
   const maxX = Math.max(largestLine[0].x, largestLine[1].x);
   const middleX = minX + Math.floor((maxX - minX) / 2);
@@ -2853,8 +2927,9 @@ function drawArrow(graph, edge) {
     return [empty, empty, empty, empty, empty, empty];
   }
   const labelCanvas = drawArrowLabel(graph, edge);
-  const [pathCanvas, linesDrawn, lineDirs] = drawPath(graph, edge.path, edge.style);
-  const boxStartCanvas = drawBoxStart(graph, edge.path, linesDrawn[0], edge.from.shape);
+  const endCoordOverride = computeEndCoordOverride(graph, edge);
+  const [pathCanvas, linesDrawn, lineDirs] = drawPath(graph, edge.path, edge.style, void 0, endCoordOverride);
+  const boxStartCanvas = drawBoxStart(graph, edge.path, linesDrawn[0], edge.from);
   let arrowHeadEndCanvas;
   if (edge.hasArrowEnd) {
     arrowHeadEndCanvas = drawArrowHead(
@@ -2883,6 +2958,38 @@ function drawArrow(graph, edge) {
   const cornersCanvas = drawCorners(graph, edge.path);
   return [pathCanvas, boxStartCanvas, arrowHeadEndCanvas, arrowHeadStartCanvas, cornersCanvas, labelCanvas];
 }
+function computeEndCoordOverride(graph, edge) {
+  if (edge.path.length < 2) return void 0;
+  const lastPathCoord = edge.path[edge.path.length - 1];
+  const prevPathCoord = edge.path[edge.path.length - 2];
+  const dir = determineDirection(prevPathCoord, lastPathCoord);
+  const defaultDC = gridToDrawingCoord(graph, lastPathCoord);
+  const targetDC = edge.to.drawingCoord;
+  const targetGC = edge.to.gridCoord;
+  if (!targetDC || !targetGC) return void 0;
+  let boxW = 0;
+  for (let i = 0; i < 2; i++) boxW += graph.columnWidth.get(targetGC.x + i) ?? 0;
+  let boxH = 0;
+  for (let i = 0; i < 2; i++) boxH += graph.rowHeight.get(targetGC.y + i) ?? 0;
+  if (dirEquals(dir, Left)) {
+    const borderX = targetDC.x + boxW;
+    if (borderX === defaultDC.x) return void 0;
+    return { x: borderX, y: defaultDC.y };
+  } else if (dirEquals(dir, Right)) {
+    const borderX = targetDC.x;
+    if (borderX === defaultDC.x) return void 0;
+    return { x: borderX, y: defaultDC.y };
+  } else if (dirEquals(dir, Up)) {
+    const borderY = targetDC.y + boxH;
+    if (borderY === defaultDC.y) return void 0;
+    return { x: defaultDC.x, y: borderY };
+  } else if (dirEquals(dir, Down)) {
+    const borderY = targetDC.y;
+    if (borderY === defaultDC.y) return void 0;
+    return { x: defaultDC.x, y: borderY };
+  }
+  return void 0;
+}
 function reverseDirection(dir) {
   if (dirEquals(dir, Up)) return Down;
   if (dirEquals(dir, Down)) return Up;
@@ -2894,15 +3001,16 @@ function reverseDirection(dir) {
   if (dirEquals(dir, LowerRight)) return UpperLeft;
   return Middle;
 }
-function drawPath(graph, path, style = "solid") {
+function drawPath(graph, path, style = "solid", startCoordOverride, endCoordOverride) {
   const canvas = copyCanvas(graph.canvas);
   let previousCoord = path[0];
   const linesDrawn = [];
   const lineDirs = [];
+  const lastIdx = path.length - 1;
   for (let i = 1; i < path.length; i++) {
     const nextCoord = path[i];
-    const prevDC = gridToDrawingCoord(graph, previousCoord);
-    const nextDC = gridToDrawingCoord(graph, nextCoord);
+    const prevDC = i === 1 && startCoordOverride ? startCoordOverride : gridToDrawingCoord(graph, previousCoord);
+    const nextDC = i === lastIdx && endCoordOverride ? endCoordOverride : gridToDrawingCoord(graph, nextCoord);
     if (drawingCoordEquals(prevDC, nextDC)) {
       previousCoord = nextCoord;
       continue;
@@ -2916,18 +3024,45 @@ function drawPath(graph, path, style = "solid") {
   }
   return [canvas, linesDrawn, lineDirs];
 }
-function drawBoxStart(graph, path, firstLine, sourceShape) {
+function drawBoxStart(graph, path, firstLine, sourceNode) {
   const canvas = copyCanvas(graph.canvas);
   if (graph.config.useAscii) return canvas;
-  if (sourceShape === "state-start" || sourceShape === "state-end") {
+  if (sourceNode.shape === "state-start" || sourceNode.shape === "state-end") {
     return canvas;
   }
   const from = firstLine[0];
   const dir = determineDirection(path[0], path[1]);
-  if (dirEquals(dir, Up)) canvas[from.x][from.y + 1] = "\u2534";
-  else if (dirEquals(dir, Down)) canvas[from.x][from.y - 1] = "\u252C";
-  else if (dirEquals(dir, Left)) canvas[from.x + 1][from.y] = "\u2524";
-  else if (dirEquals(dir, Right)) canvas[from.x - 1][from.y] = "\u251C";
+  const dc = sourceNode.drawingCoord;
+  const gc = sourceNode.gridCoord;
+  if (dirEquals(dir, Right)) {
+    let boxW = 0;
+    for (let i = 0; i < 2; i++) boxW += graph.columnWidth.get(gc.x + i) ?? 0;
+    const borderX = dc.x + boxW;
+    canvas[borderX][from.y] = "\u251C";
+    for (let x = borderX + 1; x < from.x; x++) {
+      canvas[x][from.y] = "\u2500";
+    }
+  } else if (dirEquals(dir, Left)) {
+    const borderX = dc.x;
+    canvas[borderX][from.y] = "\u2524";
+    for (let x = from.x + 1; x < borderX; x++) {
+      canvas[x][from.y] = "\u2500";
+    }
+  } else if (dirEquals(dir, Down)) {
+    let boxH = 0;
+    for (let i = 0; i < 2; i++) boxH += graph.rowHeight.get(gc.y + i) ?? 0;
+    const borderY = dc.y + boxH;
+    canvas[from.x][borderY] = "\u252C";
+    for (let y = borderY + 1; y < from.y; y++) {
+      canvas[from.x][y] = "\u2502";
+    }
+  } else if (dirEquals(dir, Up)) {
+    const borderY = dc.y;
+    canvas[from.x][borderY] = "\u2534";
+    for (let y = from.y + 1; y < borderY; y++) {
+      canvas[from.x][y] = "\u2502";
+    }
+  }
   return canvas;
 }
 function drawArrowHead(graph, lastLine, fallbackDir) {
@@ -3815,7 +3950,14 @@ function createMapping(graph) {
         const parentSg = getNodeSubgraph(graph, node);
         const childSg = getNodeSubgraph(graph, child);
         const edgeDir = parentSg && parentSg === childSg && parentSg.direction ? parentSg.direction : graph.config.graphDirection;
-        let childLevel = edgeDir === "LR" ? gc.x + 4 : gc.y + 4;
+        let maxPredLevel = edgeDir === "LR" ? gc.x : gc.y;
+        for (const e of graph.edges) {
+          if (e.to.name === child.name && e.from.gridCoord !== null) {
+            const predLevel = edgeDir === "LR" ? e.from.gridCoord.x : e.from.gridCoord.y;
+            if (predLevel > maxPredLevel) maxPredLevel = predLevel;
+          }
+        }
+        let childLevel = maxPredLevel + 4;
         if (childSg && parentSg !== childSg && deferredRoots.size > 0) {
           let placedDeferred = false;
           for (const dr of [...deferredRoots]) {
@@ -3880,17 +4022,44 @@ function createMapping(graph) {
   for (const node of graph.nodes) {
     setColumnWidth(graph, node);
   }
+  const labeledInDegree = /* @__PURE__ */ new Map();
+  for (const edge of graph.edges) {
+    if (edge.text.length > 0) {
+      labeledInDegree.set(edge.to.name, (labeledInDegree.get(edge.to.name) ?? 0) + 1);
+    }
+  }
+  for (const node of graph.nodes) {
+    const deg = labeledInDegree.get(node.name) ?? 0;
+    if (deg >= 3 && node.gridCoord) {
+      const approachRow = node.gridCoord.y - 1;
+      if (approachRow >= 0) {
+        const extra = Math.min((deg - 2) * 2, 10);
+        const current = graph.rowHeight.get(approachRow) ?? 0;
+        graph.rowHeight.set(approachRow, Math.max(current, current + extra));
+      }
+    }
+  }
   graph.bundles = analyzeEdgeBundles(graph);
   processBundles(graph);
+  graph.usedLabelMidpoints = /* @__PURE__ */ new Set();
+  const congestion = /* @__PURE__ */ new Map();
   for (const edge of graph.edges) {
     if (edge.bundle && edge.path.length > 0) {
       increaseGridSizeForPath(graph, edge.path);
       determineLabelLine(graph, edge);
+      for (const cell of pathToCells(edge.path)) {
+        const k = gridKey(cell);
+        congestion.set(k, (congestion.get(k) ?? 0) + 1);
+      }
       continue;
     }
-    determinePath(graph, edge);
+    determinePath(graph, edge, congestion);
     increaseGridSizeForPath(graph, edge.path);
     determineLabelLine(graph, edge);
+    for (const cell of pathToCells(edge.path)) {
+      const k = gridKey(cell);
+      congestion.set(k, (congestion.get(k) ?? 0) + 1);
+    }
   }
   for (const node of graph.nodes) {
     node.drawingCoord = gridToDrawingCoord(graph, node.gridCoord);