@ktrysmt/beautiful-mermaid 1.3.0 → 1.4.1

package/dist/index.js

@@ -1013,6 +1013,201 @@ function colorizeText(text, hex, mode) {
   return `${code}${text}${RESET}`;
 }
 
+// src/ascii/cjk.ts
+var CJK_PAD = "\uE000";
+function isFullwidthChar(code) {
+  return (
+    // --- CJK ---
+    code >= 4352 && code <= 4447 || // Hangul Jamo
+    code >= 9001 && code <= 9002 || // Angle Brackets (EAW=W)
+    code >= 11904 && code <= 12031 || // CJK Radicals Supplement
+    code >= 12032 && code <= 12255 || // Kangxi Radicals
+    code >= 12288 && code <= 12351 || // CJK Symbols and Punctuation
+    code >= 12352 && code <= 12447 || // Hiragana
+    code >= 12448 && code <= 12543 || // Katakana
+    code >= 12544 && code <= 12591 || // Bopomofo
+    code >= 12592 && code <= 12687 || // Hangul Compatibility Jamo
+    code >= 12688 && code <= 12799 || // Kanbun + extensions
+    code >= 12800 && code <= 13311 || // Enclosed CJK + Compatibility
+    code >= 13312 && code <= 19903 || // CJK Extension A
+    code >= 19968 && code <= 40959 || // CJK Unified Ideographs
+    code >= 44032 && code <= 55215 || // Hangul Syllables
+    code >= 63744 && code <= 64255 || // CJK Compatibility Ideographs
+    code >= 65072 && code <= 65103 || // CJK Compatibility Forms
+    code >= 65280 && code <= 65376 || // Fullwidth ASCII
+    code >= 65504 && code <= 65510 || // Fullwidth symbols
+    // --- Emoji SMP (EAW=W, always 2 columns) ---
+    code === 126980 || code === 127183 || code === 127374 || code >= 127377 && code <= 127386 || code >= 127456 && code <= 127487 || // Regional indicators
+    code >= 127488 && code <= 127490 || // Enclosed Ideographic Supplement
+    code >= 127504 && code <= 127547 || // Squared CJK Unified Ideograph
+    code >= 127552 && code <= 127560 || // Tortoise Shell Bracketed CJK
+    code >= 127568 && code <= 127569 || // Circled Ideograph
+    code >= 127744 && code <= 128591 || // Misc Symbols & Emoticons
+    code >= 128640 && code <= 128767 || // Transport & Map
+    code >= 128992 && code <= 129003 || // Colored circles/squares
+    code >= 129280 && code <= 129535 || // Supplemental Symbols
+    code >= 129536 && code <= 129647 || // Chess Symbols
+    code >= 129648 && code <= 129791 || // Symbols Extended-A
+    // --- BMP emoji (EAW=W only, always 2 columns) ---
+    code === 8986 || code === 8987 || code >= 9193 && code <= 9196 || code === 9200 || code === 9203 || code === 9725 || code === 9726 || code === 9748 || code === 9749 || code >= 9800 && code <= 9811 || // zodiac
+    code === 9855 || code === 9875 || code === 9889 || // ⚡ EAW=W (NOT ⚠ which is EAW=N)
+    code === 9898 || code === 9899 || code === 9917 || code === 9918 || code === 9924 || code === 9925 || code === 9934 || code === 9940 || code === 9962 || code === 9970 || code === 9971 || code === 9973 || code === 9978 || code === 9981 || code === 9989 || // ✅ EAW=W
+    code === 9994 || code === 9995 || // ✊✋ EAW=W
+    code === 10024 || // ✨ EAW=W
+    code === 10060 || code === 10062 || code >= 10067 && code <= 10069 || code === 10071 || code >= 10133 && code <= 10135 || code === 10160 || code === 10175 || code === 11035 || code === 11036 || code === 11088 || code === 11093 || code === 12336 || code === 12349 || code === 12951 || code === 12953 || // --- CJK Extension B through I + Compatibility Supplement ---
+    // FIX: replaced overly broad `>= 0x20000` with precise ranges
+    code >= 131072 && code <= 173791 || // CJK Extension B
+    code >= 173824 && code <= 177983 || // CJK Extension C
+    code >= 177984 && code <= 178207 || // CJK Extension D
+    code >= 178208 && code <= 183983 || // CJK Extension E
+    code >= 183984 && code <= 191471 || // CJK Extension F
+    code >= 194560 && code <= 195103 || // CJK Compatibility Ideographs Supplement
+    code >= 196608 && code <= 201551 || // CJK Extension G
+    code >= 201552 && code <= 205743 || // CJK Extension H
+    code >= 191472 && code <= 194559
+  );
+}
+function isEmojiModifiable(code) {
+  return code === 9888 || // ⚠
+  code === 9986 || // ✂
+  code === 9992 || code === 9993 || // ✈✉
+  code === 9996 || code === 9997 || // ✌✍
+  code === 9999 || code === 10002 || // ✏✒
+  code === 10004 || code === 10006 || // ✔✖
+  code === 10013 || code === 10017 || // ✝✡
+  code === 10035 || code === 10036 || // ✳✴
+  code === 10052 || code === 10055 || // ❄❇
+  code === 10083 || code === 10084 || // ❣❤
+  code === 10145 || // ➡
+  code === 10548 || code === 10549 || // ⤴⤵
+  code >= 11013 && code <= 11015 || // ⬅⬆⬇
+  // FIX: added missing EAW=N emoji (©️ ®️ ™️ ℹ️ ↔️ etc.)
+  code === 169 || // © copyright
+  code === 174 || // ® registered
+  code === 8482 || // ™ trade mark
+  code === 8505 || // ℹ information
+  code >= 8596 && code <= 8601 || // ↔↕↖↗↘↙
+  code >= 8617 && code <= 8618 || // ↩↪
+  code === 8986 || code === 8987 || // ⌚⌛ (also EAW=W, but FE0F doesn't hurt)
+  code >= 9193 && code <= 9203 || // ⏩-⏳
+  code >= 9208 && code <= 9210 || // ⏸⏹⏺
+  code === 9642 || code === 9643 || // ▪▫
+  code === 9654 || code === 9664 || // ▶◀
+  code === 9723 || code === 9724 || // ◻◼
+  code === 9728 || code === 9729 || // ☀☁
+  code >= 9730 && code <= 9732 || // ☂☃☄
+  code === 9742 || // ☎
+  code === 9745 || // ☑
+  code >= 9752 && code <= 9757 || // ☘-☝
+  code === 9760 || // ☠
+  code === 9762 || code === 9763 || // ☢☣
+  code === 9766 || code === 9770 || // ☦☪
+  code === 9774 || code === 9775 || // ☮☯
+  code >= 9784 && code <= 9786 || // ☸☹☺
+  code === 9792 || code === 9794 || // ♀♂
+  code >= 9824 && code <= 9832 || // ♠-♨
+  code === 9851 || code === 9854;
+}
+function isZeroWidth(code) {
+  return code >= 65024 && code <= 65039 || // Variation Selectors (VS1-VS16)
+  code === 8203 || // Zero Width Space
+  code === 8204 || // Zero Width Non-Joiner
+  code === 8205 || // Zero Width Joiner
+  code === 65279 || // BOM / Zero Width No-Break Space
+  code >= 917760 && code <= 917999 || // Variation Selectors Supplement
+  // FIX: added combining marks (zero display width)
+  code >= 768 && code <= 879 || // Combining Diacritical Marks
+  code >= 1155 && code <= 1161 || // Combining Cyrillic
+  code >= 1425 && code <= 1469 || // Hebrew combining
+  code >= 1552 && code <= 1562 || // Arabic combining
+  code >= 1611 && code <= 1631 || // Arabic combining
+  code >= 8400 && code <= 8447;
+}
+function displayWidth(str) {
+  let w = 0;
+  let prevWasNarrowEmoji = false;
+  for (const ch of str) {
+    const code = ch.codePointAt(0);
+    if (code === void 0) continue;
+    if (code === 65039) {
+      if (prevWasNarrowEmoji) {
+        w += 1;
+        prevWasNarrowEmoji = false;
+      }
+      continue;
+    }
+    if (isZeroWidth(code)) continue;
+    if (isFullwidthChar(code)) {
+      w += 2;
+      prevWasNarrowEmoji = false;
+    } else {
+      w += 1;
+      prevWasNarrowEmoji = isEmojiModifiable(code);
+    }
+  }
+  return w;
+}
+function drawCJKText(canvas, x, y, text, forceOverwrite = false, roleCanvas, role, maxCols) {
+  let offset = 0;
+  let lastWrittenCx = -1;
+  let lastWasNarrowEmoji = false;
+  let lastCharWritten = false;
+  const h = canvas[0]?.length ?? 0;
+  for (const ch of text) {
+    const code = ch.codePointAt(0);
+    if (code === void 0) continue;
+    if (code === 65039) {
+      if (lastWasNarrowEmoji && lastCharWritten) {
+        if (maxCols === void 0 || offset < maxCols) {
+          if (lastWrittenCx >= 0 && lastWrittenCx < canvas.length && y >= 0 && y < h) {
+            canvas[lastWrittenCx][y] = (canvas[lastWrittenCx][y] ?? "") + ch;
+          }
+          const px = x + offset;
+          if (px >= 0 && px < canvas.length && y >= 0 && y < h) {
+            canvas[px][y] = CJK_PAD;
+          }
+          offset++;
+        }
+        lastWasNarrowEmoji = false;
+      } else if (lastCharWritten && lastWrittenCx >= 0 && lastWrittenCx < canvas.length && y >= 0 && y < h) {
+        canvas[lastWrittenCx][y] = (canvas[lastWrittenCx][y] ?? "") + ch;
+      }
+      continue;
+    }
+    if (isZeroWidth(code)) continue;
+    const charWidth = isFullwidthChar(code) ? 2 : 1;
+    if (maxCols !== void 0 && offset + charWidth > maxCols) break;
+    const cx = x + offset;
+    let written = false;
+    if (cx >= 0 && cx < canvas.length && y >= 0 && y < h) {
+      if (forceOverwrite || canvas[cx][y] === " ") {
+        canvas[cx][y] = ch;
+        if (roleCanvas && role !== void 0 && cx < roleCanvas.length && y < (roleCanvas[0]?.length ?? 0)) {
+          roleCanvas[cx][y] = role;
+        }
+        written = true;
+      }
+    }
+    if (written) {
+      lastWrittenCx = cx;
+    }
+    lastCharWritten = written;
+    offset++;
+    if (isFullwidthChar(code)) {
+      lastWasNarrowEmoji = false;
+      if (written) {
+        const px = x + offset;
+        if (px >= 0 && px < canvas.length && y >= 0 && y < h) {
+          canvas[px][y] = CJK_PAD;
+        }
+      }
+      offset++;
+    } else {
+      lastWasNarrowEmoji = isEmojiModifiable(code);
+    }
+  }
+}
+
 // src/ascii/canvas.ts
 function mkCanvas(x, y) {
   const canvas = [];
@@ -1173,6 +1368,7 @@ function canvasToString(canvas, options) {
     if (colorMode === "none" || !roleCanvas) {
       let line = "";
       for (let x = 0; x <= maxX; x++) {
+        if (canvas[x][y] === CJK_PAD) continue;
         line += canvas[x][y];
       }
       lines.push(line);
@@ -1180,6 +1376,7 @@ function canvasToString(canvas, options) {
       const chars = [];
       const roles = [];
       for (let x = 0; x <= maxX; x++) {
+        if (canvas[x][y] === CJK_PAD) continue;
         chars.push(canvas[x][y]);
         roles.push(roleCanvas[x]?.[y] ?? null);
       }
@@ -1230,14 +1427,8 @@ function flipRoleCanvasVertically(roleCanvas) {
   return roleCanvas;
 }
 function drawText(canvas, start, text, forceOverwrite = false) {
-  increaseSize(canvas, start.x + text.length, start.y);
-  for (let i = 0; i < text.length; i++) {
-    const x = start.x + i;
-    const current = canvas[x][start.y];
-    if (forceOverwrite || current === " ") {
-      canvas[x][start.y] = text[i];
-    }
-  }
+  increaseSize(canvas, start.x + displayWidth(text), start.y);
+  drawCJKText(canvas, start.x, start.y, text, forceOverwrite);
 }
 function setCanvasSizeToGrid(canvas, columnWidth, rowHeight) {
   let maxX = 0;
@@ -1415,6 +1606,18 @@ function buildSgMap(mSgs, aSgs, result) {
   }
 }
 
+// src/ascii/multiline-utils.ts
+function splitLines(label) {
+  return label.split("\n");
+}
+function maxLineWidth(label) {
+  const lines = splitLines(label);
+  return Math.max(...lines.map((l) => displayWidth(l)), 0);
+}
+function lineCount(label) {
+  return splitLines(label).length;
+}
+
 // src/ascii/pathfinder.ts
 var MinHeap = class {
   items = [];
@@ -1703,7 +1906,7 @@ function determinePath(graph, edge) {
 }
 function determineLabelLine(graph, edge) {
   if (edge.text.length === 0) return;
-  const lenLabel = edge.text.length;
+  const lenLabel = maxLineWidth(edge.text);
   const pathLen = edge.path.length;
   const isVerticalFlow = graph.config.graphDirection === "TD";
   const segments = [];
@@ -1904,18 +2107,6 @@ function processBundles(graph) {
   }
 }
 
-// src/ascii/multiline-utils.ts
-function splitLines(label) {
-  return label.split("\n");
-}
-function maxLineWidth(label) {
-  const lines = splitLines(label);
-  return Math.max(...lines.map((l) => l.length), 0);
-}
-function lineCount(label) {
-  return splitLines(label).length;
-}
-
 // src/ascii/shapes/corners.ts
 var SHAPE_CORNERS = {
   // Standard rectangular shapes
@@ -1994,9 +2185,10 @@ function getCorners(shape, useAscii) {
 // src/ascii/shapes/rectangle.ts
 function getBoxDimensions(label, options) {
   const lines = splitLines(label);
-  const maxLineWidth3 = Math.max(...lines.map((l) => l.length), 0);
+  const maxLineWidth3 = Math.max(...lines.map((l) => displayWidth(l)), 0);
   const lineCount3 = lines.length;
-  const innerWidth = 2 * options.padding + maxLineWidth3;
+  const rawInnerWidth = 2 * options.padding + maxLineWidth3;
+  const innerWidth = rawInnerWidth % 2 === 0 ? rawInnerWidth + 1 : rawInnerWidth;
   const width = innerWidth + 2;
   const rawInnerHeight = lineCount3 + 2 * options.padding;
   const innerHeight = rawInnerHeight % 2 === 0 ? rawInnerHeight + 1 : rawInnerHeight;
@@ -2041,14 +2233,9 @@ function renderBox(label, dimensions, corners, useAscii) {
   const startY = centerY - Math.floor((lines.length - 1) / 2);
   for (let i = 0; i < lines.length; i++) {
     const line = lines[i];
-    const textX = Math.floor(w / 2) - Math.ceil(line.length / 2) + 1;
-    for (let j = 0; j < line.length; j++) {
-      const x = textX + j;
-      const y = startY + i;
-      if (x >= 0 && x < canvas.length && y >= 0 && y < canvas[0].length) {
-        canvas[x][y] = line[j];
-      }
-    }
+    const innerW = width - 2;
+    const textX = 1 + Math.floor((innerW - displayWidth(line)) / 2);
+    drawCJKText(canvas, textX, startY + i, line);
   }
   return canvas;
 }
@@ -2227,7 +2414,7 @@ var roundedRenderer = {
 var stadiumRenderer = {
   getDimensions(label, options) {
     const lines = splitLines(label);
-    const maxLineWidth3 = Math.max(...lines.map((l) => l.length), 0);
+    const maxLineWidth3 = Math.max(...lines.map((l) => displayWidth(l)), 0);
     const lineCount3 = lines.length;
     const innerWidth = 2 * options.padding + maxLineWidth3;
     const width = innerWidth + 4;
@@ -2279,14 +2466,8 @@ var stadiumRenderer = {
     const startY = centerY - Math.floor((lines.length - 1) / 2);
     for (let i = 0; i < lines.length; i++) {
       const line = lines[i];
-      const textX = Math.floor(width / 2) - Math.floor(line.length / 2);
-      for (let j = 0; j < line.length; j++) {
-        const x = textX + j;
-        const y = startY + i;
-        if (x > 0 && x < width - 1 && y >= 0 && y < height) {
-          canvas[x][y] = line[j];
-        }
-      }
+      const textX = Math.floor(width / 2) - Math.floor(displayWidth(line) / 2);
+      drawCJKText(canvas, textX, startY + i, line);
     }
     return canvas;
   },
@@ -2307,7 +2488,7 @@ var hexagonRenderer = {
 var subroutineRenderer = {
   getDimensions(label, options) {
     const lines = splitLines(label);
-    const maxLineWidth3 = Math.max(...lines.map((l) => l.length), 0);
+    const maxLineWidth3 = Math.max(...lines.map((l) => displayWidth(l)), 0);
     const lineCount3 = lines.length;
     const innerWidth = 2 * options.padding + maxLineWidth3;
     const width = innerWidth + 4;
@@ -2352,14 +2533,8 @@ var subroutineRenderer = {
     const startY = centerY - Math.floor((lines.length - 1) / 2);
     for (let i = 0; i < lines.length; i++) {
       const line = lines[i];
-      const textX = Math.floor(width / 2) - Math.floor(line.length / 2);
-      for (let j = 0; j < line.length; j++) {
-        const x = textX + j;
-        const y = startY + i;
-        if (x > 1 && x < width - 2 && y > 0 && y < height - 1) {
-          canvas[x][y] = line[j];
-        }
-      }
+      const textX = Math.floor(width / 2) - Math.floor(displayWidth(line) / 2);
+      drawCJKText(canvas, textX, startY + i, line);
     }
     return canvas;
   },
@@ -2376,7 +2551,7 @@ var doublecircleRenderer = {
 var cylinderRenderer = {
   getDimensions(label, options) {
     const lines = splitLines(label);
-    const maxLineWidth3 = Math.max(...lines.map((l) => l.length), 0);
+    const maxLineWidth3 = Math.max(...lines.map((l) => displayWidth(l)), 0);
     const lineCount3 = lines.length;
     const innerWidth = 2 * options.padding + maxLineWidth3;
     const width = innerWidth + 2;
@@ -2421,14 +2596,8 @@ var cylinderRenderer = {
     const startY = centerY - Math.floor((lines.length - 1) / 2);
     for (let i = 0; i < lines.length; i++) {
       const line = lines[i];
-      const textX = Math.floor(width / 2) - Math.floor(line.length / 2);
-      for (let j = 0; j < line.length; j++) {
-        const x = textX + j;
-        const y = startY + i;
-        if (x > 0 && x < width - 1 && y > 1 && y < height - 2) {
-          canvas[x][y] = line[j];
-        }
-      }
+      const textX = Math.floor(width / 2) - Math.floor(displayWidth(line) / 2);
+      drawCJKText(canvas, textX, startY + i, line);
     }
     return canvas;
   },
@@ -2530,12 +2699,9 @@ function drawBoxWithGridDimensions(node, graph) {
   const startY = textCenterY - Math.floor((lines.length - 1) / 2);
   for (let i = 0; i < lines.length; i++) {
     const line = lines[i];
-    const textX = from.x + Math.floor(w / 2) - Math.ceil(line.length / 2) + 1;
-    for (let j = 0; j < line.length; j++) {
-      if (textX + j >= 0 && textX + j < box.length && startY + i >= 0 && startY + i < box[0].length) {
-        box[textX + j][startY + i] = line[j];
-      }
-    }
+    const boxInnerW = to.x - from.x - 1;
+    const textX = from.x + 1 + Math.floor((boxInnerW - displayWidth(line)) / 2);
+    drawCJKText(box, textX, startY + i, line);
   }
   return box;
 }
@@ -2546,7 +2712,7 @@ function drawMultiBox(sections, useAscii, padding = 1) {
   let maxTextWidth = 0;
   for (const section of sections) {
     for (const line of section) {
-      maxTextWidth = Math.max(maxTextWidth, line.length);
+      maxTextWidth = Math.max(maxTextWidth, displayWidth(line));
     }
   }
   const innerWidth = maxTextWidth + 2 * padding;
@@ -2582,9 +2748,7 @@ function drawMultiBox(sections, useAscii, padding = 1) {
     const lines = section.length > 0 ? section : [""];
     for (const line of lines) {
       const startX = 1 + padding;
-      for (let i = 0; i < line.length; i++) {
-        canvas[startX + i][row] = line[i];
-      }
+      drawCJKText(canvas, startX, row, line);
       row++;
     }
     if (s < sections.length - 1) {
@@ -2875,7 +3039,7 @@ function drawTextOnLine(canvas, line, label, isUpwardEdge) {
   const startY = middleY - Math.floor((lines.length - 1) / 2);
   for (let i = 0; i < lines.length; i++) {
     const lineText = lines[i];
-    const startX = middleX - Math.floor(lineText.length / 2);
+    const startX = middleX - Math.floor(displayWidth(lineText) / 2);
     drawText(canvas, { x: startX, y: startY + i }, lineText);
   }
 }
@@ -3175,13 +3339,9 @@ function drawSubgraphLabel(sg, graph) {
   for (let i = 0; i < lines.length; i++) {
     const line = lines[i];
     const labelY = 1 + i;
-    let labelX = Math.floor(width / 2) - Math.floor(line.length / 2);
+    let labelX = Math.floor(width / 2) - Math.floor(displayWidth(line) / 2);
     if (labelX < 1) labelX = 1;
-    for (let j = 0; j < line.length; j++) {
-      if (labelX + j < width && labelY < height) {
-        canvas[labelX + j][labelY] = line[j];
-      }
-    }
+    drawCJKText(canvas, labelX, labelY, line);
   }
   return [canvas, { x: sg.minX, y: sg.minY }];
 }
@@ -3492,18 +3652,37 @@ function ensureSubgraphSpacing(graph) {
     for (let j = i + 1; j < rootSubgraphs.length; j++) {
       const sg1 = rootSubgraphs[i];
       const sg2 = rootSubgraphs[j];
-      if (sg1.minX < sg2.maxX && sg1.maxX > sg2.minX) {
-        if (sg1.maxY >= sg2.minY - minSpacing && sg1.minY < sg2.minY) {
-          sg2.minY = sg1.maxY + minSpacing + 1;
-        } else if (sg2.maxY >= sg1.minY - minSpacing && sg2.minY < sg1.minY) {
-          sg1.minY = sg2.maxY + minSpacing + 1;
+      const hOverlap = sg1.minX <= sg2.maxX && sg1.maxX >= sg2.minX;
+      const vOverlap = sg1.minY <= sg2.maxY && sg1.maxY >= sg2.minY;
+      if (!hOverlap || !vOverlap) continue;
+      if (hOverlap) {
+        if (sg1.maxY >= sg2.minY - minSpacing && sg1.minY <= sg2.minY) {
+          const newMinY = sg1.maxY + minSpacing + 1;
+          if (newMinY > sg2.maxY) {
+            sg2.maxY = newMinY + (sg2.maxY - sg2.minY);
+          }
+          sg2.minY = newMinY;
+        } else if (sg2.maxY >= sg1.minY - minSpacing && sg2.minY <= sg1.minY) {
+          const newMinY = sg2.maxY + minSpacing + 1;
+          if (newMinY > sg1.maxY) {
+            sg1.maxY = newMinY + (sg1.maxY - sg1.minY);
+          }
+          sg1.minY = newMinY;
         }
       }
-      if (sg1.minY < sg2.maxY && sg1.maxY > sg2.minY) {
-        if (sg1.maxX >= sg2.minX - minSpacing && sg1.minX < sg2.minX) {
-          sg2.minX = sg1.maxX + minSpacing + 1;
-        } else if (sg2.maxX >= sg1.minX - minSpacing && sg2.minX < sg1.minX) {
-          sg1.minX = sg2.maxX + minSpacing + 1;
+      if (sg1.minY <= sg2.maxY && sg1.maxY >= sg2.minY) {
+        if (sg1.maxX >= sg2.minX - minSpacing && sg1.minX <= sg2.minX) {
+          const newMinX = sg1.maxX + minSpacing + 1;
+          if (newMinX > sg2.maxX) {
+            sg2.maxX = newMinX + (sg2.maxX - sg2.minX);
+          }
+          sg2.minX = newMinX;
+        } else if (sg2.maxX >= sg1.minX - minSpacing && sg2.minX <= sg1.minX) {
+          const newMinX = sg2.maxX + minSpacing + 1;
+          if (newMinX > sg1.maxX) {
+            sg1.maxX = newMinX + (sg1.maxX - sg1.minX);
+          }
+          sg1.minX = newMinX;
         }
       }
     }
@@ -3572,6 +3751,14 @@ function createMapping(graph) {
     }
   }
   const shouldSeparate = dir === "LR" && hasExternalRoots && hasSubgraphRootsWithEdges;
+  const downstreamSgs = /* @__PURE__ */ new Set();
+  for (const edge of graph.edges) {
+    const fromSg = getNodeSubgraph(graph, edge.from);
+    const toSg = getNodeSubgraph(graph, edge.to);
+    if (fromSg && toSg && fromSg !== toSg && !fromSg.parent && !toSg.parent) {
+      downstreamSgs.add(toSg);
+    }
+  }
   let externalRootNodes;
   let subgraphRootNodes = [];
   if (shouldSeparate) {
@@ -3580,8 +3767,18 @@ function createMapping(graph) {
   } else {
     externalRootNodes = rootNodes;
   }
-  const rootsByTarget = /* @__PURE__ */ new Map();
+  const deferredRoots = /* @__PURE__ */ new Set();
+  const primaryRoots = [];
   for (const root of externalRootNodes) {
+    const sg = getNodeSubgraph(graph, root);
+    if (sg && downstreamSgs.has(sg)) {
+      deferredRoots.add(root);
+    } else {
+      primaryRoots.push(root);
+    }
+  }
+  const rootsByTarget = /* @__PURE__ */ new Map();
+  for (const root of primaryRoots) {
     const children = getChildren(graph, root);
     const targetName = children.length > 0 ? children[0].name : "__ungrouped__";
     const group = rootsByTarget.get(targetName) ?? [];
@@ -3607,7 +3804,7 @@ function createMapping(graph) {
   for (const edge of graph.edges) {
     inDegree.set(edge.to.name, (inDegree.get(edge.to.name) ?? 0) + 1);
   }
-  let placedCount = externalRootNodes.length + subgraphRootNodes.length;
+  let placedCount = primaryRoots.length + subgraphRootNodes.length;
   while (placedCount < graph.nodes.length) {
     const prevCount = placedCount;
     for (const node of graph.nodes) {
@@ -3618,7 +3815,25 @@ 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;
-        const childLevel = edgeDir === "LR" ? gc.x + 4 : gc.y + 4;
+        let childLevel = edgeDir === "LR" ? gc.x + 4 : gc.y + 4;
+        if (childSg && parentSg !== childSg && deferredRoots.size > 0) {
+          let placedDeferred = false;
+          for (const dr of [...deferredRoots]) {
+            if (dr.gridCoord !== null) continue;
+            const drSg = getNodeSubgraph(graph, dr);
+            if (drSg !== childSg) continue;
+            const drPerp = highestPositionPerLevel[childLevel] ?? 0;
+            const drRequested = edgeDir === "LR" ? { x: childLevel, y: drPerp } : { x: drPerp, y: childLevel };
+            reserveSpotInGrid(graph, graph.nodes[dr.index], drRequested, edgeDir);
+            highestPositionPerLevel[childLevel] = drPerp + 4;
+            deferredRoots.delete(dr);
+            placedCount++;
+            placedDeferred = true;
+          }
+          if (placedDeferred) {
+            childLevel += 4;
+          }
+        }
         let highestPosition;
         if (edgeDir !== graph.config.graphDirection) {
           highestPosition = edgeDir === "LR" ? gc.y : gc.x;
@@ -3628,6 +3843,30 @@ function createMapping(graph) {
         } else {
           highestPosition = highestPositionPerLevel[childLevel];
         }
+        if (childSg) {
+          const existingSgNodes = childSg.nodes.filter((n) => n !== child && n.gridCoord !== null);
+          if (existingSgNodes.length > 0) {
+            const perpPositions = existingSgNodes.map(
+              (n) => graph.config.graphDirection === "TD" ? n.gridCoord.x : n.gridCoord.y
+            );
+            const sgMinPerp = Math.min(...perpPositions);
+            highestPosition = Math.max(highestPosition, sgMinPerp);
+          } else if (parentSg && parentSg !== childSg) {
+            const parentSgNodes = parentSg.nodes.filter((n) => n.gridCoord !== null);
+            if (parentSgNodes.length > 0) {
+              const parentLevels = parentSgNodes.map(
+                (n) => graph.config.graphDirection === "TD" ? n.gridCoord.y : n.gridCoord.x
+              );
+              const parentMaxLevel = Math.max(...parentLevels) + 2;
+              if (childLevel <= parentMaxLevel) {
+                const maxPerp = Math.max(...parentSgNodes.map(
+                  (n) => graph.config.graphDirection === "TD" ? n.gridCoord.x : n.gridCoord.y
+                ));
+                highestPosition = Math.max(highestPosition, maxPerp + 4);
+              }
+            }
+          }
+        }
         const requested = edgeDir === "LR" ? { x: childLevel, y: highestPosition } : { x: highestPosition, y: childLevel };
         reserveSpotInGrid(graph, graph.nodes[child.index], requested, edgeDir);
         if (edgeDir === graph.config.graphDirection) {
@@ -3912,7 +4151,7 @@ function renderSequenceAscii(text, config, colorMode, theme) {
         curY += 1;
         const note = diagram.notes[n];
         const nLines = splitLines(note.text);
-        const nWidth = Math.max(...nLines.map((l) => l.length)) + 4;
+        const nWidth = Math.max(...nLines.map((l) => displayWidth(l))) + 4;
         const nHeight = nLines.length + 2;
         const aIdx = actorIdx.get(note.actorIds[0]) ?? 0;
         let nx;
@@ -3951,7 +4190,7 @@ function renderSequenceAscii(text, config, colorMode, theme) {
     const msg = diagram.messages[m];
     if (msg.from === msg.to) {
       const fi = actorIdx.get(msg.from);
-      const selfRight = llX[fi] + 6 + 2 + msg.label.length;
+      const selfRight = llX[fi] + 6 + 2 + displayWidth(msg.label);
       totalW = Math.max(totalW, selfRight + 1);
     }
   }
@@ -3980,10 +4219,8 @@ function renderSequenceAscii(text, config, colorMode, theme) {
       setC(left, row, V, "border");
       setC(left + w - 1, row, V, "border");
       const line = lines2[i];
-      const ls = left + 1 + boxPad + Math.floor((maxW - line.length) / 2);
-      for (let j = 0; j < line.length; j++) {
-        setC(ls + j, row, line[j], "text");
-      }
+      const ls = left + 1 + boxPad + Math.floor((maxW - displayWidth(line)) / 2);
+      drawCJKText(canvas, ls, row, line, true, rc, "text");
     }
     const bottomY = topY + h - 1;
     setC(left, bottomY, BL, "border");
@@ -4023,9 +4260,7 @@ function renderSequenceAscii(text, config, colorMode, theme) {
       setC(fromX + loopW, y0, useAscii ? "+" : "\u2510", "corner");
       setC(fromX + loopW, y0 + 1, V, "line");
       const labelX = fromX + loopW + 2;
-      for (let i = 0; i < msg.label.length; i++) {
-        if (labelX + i < totalW) setC(labelX + i, y0 + 1, msg.label[i], "text");
-      }
+      drawCJKText(canvas, labelX, y0 + 1, msg.label, true, rc, "text");
       const arrowChar = isFilled ? useAscii ? "<" : "\u25C0" : useAscii ? "<" : "\u25C1";
       setC(fromX, y0 + 2, arrowChar, "arrow");
       for (let x = fromX + 1; x < fromX + loopW; x++) setC(x, y0 + 2, lineChar, "line");
@@ -4038,12 +4273,9 @@ function renderSequenceAscii(text, config, colorMode, theme) {
       const msgLines = splitLines(msg.label);
       for (let lineIdx = 0; lineIdx < msgLines.length; lineIdx++) {
         const line = msgLines[lineIdx];
-        const labelStart = midX - Math.floor(line.length / 2);
+        const labelStart = midX - Math.floor(displayWidth(line) / 2);
         const y = labelY + lineIdx;
-        for (let i = 0; i < line.length; i++) {
-          const lx = labelStart + i;
-          if (lx >= 0 && lx < totalW) setC(lx, y, line[i], "text");
-        }
+        drawCJKText(canvas, labelStart, y, line, true, rc, "text");
       }
       if (leftToRight) {
         for (let x = fromX + 1; x < toX; x++) setC(x, arrowY, lineChar, "line");
@@ -4080,9 +4312,7 @@ function renderSequenceAscii(text, config, colorMode, theme) {
     const hdrLines = splitLines(hdrLabel);
     for (let lineIdx = 0; lineIdx < hdrLines.length && topY + lineIdx < botY; lineIdx++) {
       const line = hdrLines[lineIdx];
-      for (let i = 0; i < line.length && bLeft + 1 + i < bRight; i++) {
-        setC(bLeft + 1 + i, topY + lineIdx, line[i], "text");
-      }
+      drawCJKText(canvas, bLeft + 1, topY + lineIdx, line, true, rc, "text", bRight - bLeft - 1);
     }
     setC(bLeft, botY, BL, "border");
     for (let x = bLeft + 1; x < bRight; x++) setC(x, botY, H, "border");
@@ -4101,9 +4331,7 @@ function renderSequenceAscii(text, config, colorMode, theme) {
       const dLabel = block.dividers[d].label;
       if (dLabel) {
         const dStr = `[${dLabel}]`;
-        for (let i = 0; i < dStr.length && bLeft + 1 + i < bRight; i++) {
-          setC(bLeft + 1 + i, dY, dStr[i], "text");
-        }
+        drawCJKText(canvas, bLeft + 1, dY, dStr, true, rc, "text", bRight - bLeft - 1);
       }
     }
   }
@@ -4117,9 +4345,7 @@ function renderSequenceAscii(text, config, colorMode, theme) {
       const ly = np.y + 1 + l;
       setC(np.x, ly, V, "border");
       setC(np.x + np.width - 1, ly, V, "border");
-      for (let i = 0; i < np.lines[l].length; i++) {
-        setC(np.x + 2 + i, ly, np.lines[l][i], "text");
-      }
+      drawCJKText(canvas, np.x + 2, ly, np.lines[l], true, rc, "text");
     }
     const by = np.y + np.height - 1;
     setC(np.x, by, BL, "border");
@@ -4421,7 +4647,7 @@ function renderClassAscii(text, config, colorMode, theme) {
     classSections.set(cls.id, sections);
     let maxTextW = 0;
     for (const section of sections) {
-      for (const line of section) maxTextW = Math.max(maxTextW, line.length);
+      for (const line of section) maxTextW = Math.max(maxTextW, displayWidth(line));
     }
     const boxW = maxTextW + 4;
     let totalLines = 0;
@@ -4737,7 +4963,7 @@ function renderClassAscii(text, config, colorMode, theme) {
     }
     if (rel.label) {
       const lines2 = splitLines(rel.label);
-      const maxLabelWidth = Math.max(...lines2.map((l) => l.length)) + 2;
+      const maxLabelWidth = Math.max(...lines2.map((l) => displayWidth(l))) + 2;
       let baseMidY;
       let idealMidX;
       if (fromBY < toTY) {
@@ -4788,20 +5014,16 @@ function renderClassAscii(text, config, colorMode, theme) {
       const startY = labelY - halfHeight;
       for (let lineIdx = 0; lineIdx < lines2.length; lineIdx++) {
         const paddedLine = ` ${lines2[lineIdx]} `;
-        const idealLabelStart = idealMidX - Math.floor(paddedLine.length / 2);
+        const paddedLineW = displayWidth(paddedLine);
+        const idealLabelStart = idealMidX - Math.floor(paddedLineW / 2);
         const labelStart = Math.max(0, idealLabelStart);
         const y = startY + lineIdx;
-        const labelEnd = labelStart + paddedLine.length;
+        const labelEnd = labelStart + paddedLineW;
         if (labelEnd > 0 && y >= 0) {
           increaseSize(canvas, Math.max(labelEnd, 1), Math.max(y + 1, 1));
           increaseRoleCanvasSize(rc, Math.max(labelEnd, 1), Math.max(y + 1, 1));
         }
-        for (let i = 0; i < paddedLine.length; i++) {
-          const lx = labelStart + i;
-          if (lx >= 0 && y >= 0) {
-            setC(lx, y, paddedLine[i], "text");
-          }
-        }
+        drawCJKText(canvas, labelStart, y, paddedLine, true, rc, "text");
       }
     }
   }
@@ -4998,7 +5220,7 @@ function renderErAscii(text, config, colorMode, theme) {
     entitySections.set(ent.id, sections);
     let maxTextW = 0;
     for (const section of sections) {
-      for (const line of section) maxTextW = Math.max(maxTextW, line.length);
+      for (const line of section) maxTextW = Math.max(maxTextW, displayWidth(line));
     }
     const boxW = maxTextW + 4;
     let totalLines = 0;
@@ -5108,16 +5330,11 @@ function renderErAscii(text, config, colorMode, theme) {
         const gapMid = Math.floor((startX + endX) / 2);
         for (let lineIdx = 0; lineIdx < lines2.length; lineIdx++) {
           const line = lines2[lineIdx];
-          const labelStart = Math.max(startX, gapMid - Math.floor(line.length / 2));
+          const labelStart = Math.max(startX, gapMid - Math.floor(displayWidth(line) / 2));
           const labelY = lineY + 1 + lineIdx;
-          increaseSize(canvas, Math.max(labelStart + line.length, 1), Math.max(labelY + 1, 1));
-          increaseRoleCanvasSize(rc, Math.max(labelStart + line.length, 1), Math.max(labelY + 1, 1));
-          for (let i = 0; i < line.length; i++) {
-            const lx = labelStart + i;
-            if (lx >= startX && lx <= endX) {
-              setC(lx, labelY, line[i], "text");
-            }
-          }
+          increaseSize(canvas, Math.max(labelStart + displayWidth(line), 1), Math.max(labelY + 1, 1));
+          increaseRoleCanvasSize(rc, Math.max(labelStart + displayWidth(line), 1), Math.max(labelY + 1, 1));
+          drawCJKText(canvas, labelStart, labelY, line, true, rc, "text", endX - labelStart + 1);
         }
       }
     } else {
@@ -5159,14 +5376,9 @@ function renderErAscii(text, config, colorMode, theme) {
           const labelX = lineX + 2;
           const y = startLabelY + lineIdx;
           if (y >= 0) {
-            for (let i = 0; i < line.length; i++) {
-              const lx = labelX + i;
-              if (lx >= 0) {
-                increaseSize(canvas, lx + 1, y + 1);
-                increaseRoleCanvasSize(rc, lx + 1, y + 1);
-                setC(lx, y, line[i], "text");
-              }
-            }
+            increaseSize(canvas, labelX + displayWidth(line) + 1, y + 1);
+            increaseRoleCanvasSize(rc, labelX + displayWidth(line) + 1, y + 1);
+            drawCJKText(canvas, labelX, y, line, true, rc, "text");
           }
         }
       }
@@ -5391,7 +5603,7 @@ function renderVertical(chart, ch, colorMode, theme) {
   const yRange = chart.yAxis.range;
   const yTicks = niceTickValues(yRange.min, yRange.max);
   const yLabels = yTicks.map((v) => formatTickValue(v));
-  const yGutter = Math.max(...yLabels.map((l) => l.length)) + 1;
+  const yGutter = Math.max(...yLabels.map((l) => displayWidth(l))) + 1;
   const plotW = Math.max(PLOT_WIDTH, dataCount * 6);
   const plotH = PLOT_HEIGHT;
   const bandW = Math.floor(plotW / dataCount);
@@ -5417,7 +5629,7 @@ function renderVertical(chart, ch, colorMode, theme) {
   };
   const bandCenter = (i) => plotLeft + Math.floor(bandW * (i + 0.5));
   if (hasTitle && titleRow >= 0) {
-    writeText(canvas, roles, titleRow, Math.floor(totalW / 2 - chart.title.length / 2), chart.title, "text");
+    writeText(canvas, roles, titleRow, Math.floor(totalW / 2 - displayWidth(chart.title) / 2), chart.title, "text");
   }
   if (hasLegend) {
     const legendRow = hasTitle ? 1 : 0;
@@ -5434,7 +5646,7 @@ function renderVertical(chart, ch, colorMode, theme) {
     const displayRow = plotTop + (plotH - 1 - row);
     const label = formatTickValue(tick);
     set(canvas, roles, displayRow, plotLeft - 1, row === 0 ? ch.origin : ch.yTick, "border");
-    const labelStart = yGutter - label.length;
+    const labelStart = yGutter - displayWidth(label);
     writeText(canvas, roles, displayRow, Math.max(0, labelStart), label, "text");
   }
   for (let c = plotLeft; c < plotLeft + bandW * dataCount; c++) {
@@ -5444,12 +5656,12 @@ function renderVertical(chart, ch, colorMode, theme) {
     const cx = bandCenter(i);
     set(canvas, roles, xAxisRow, cx, ch.xTick, "border");
     const label = catLabels[i];
-    const labelStart = cx - Math.floor(label.length / 2);
+    const labelStart = cx - Math.floor(displayWidth(label) / 2);
     writeText(canvas, roles, xLabelRow, Math.max(0, labelStart), label, "text");
   }
   if (hasXTitle && xTitleRow >= 0) {
     const title = chart.xAxis.title;
-    writeText(canvas, roles, xTitleRow, Math.floor(totalW / 2 - title.length / 2), title, "text");
+    writeText(canvas, roles, xTitleRow, Math.floor(totalW / 2 - displayWidth(title) / 2), title, "text");
   }
   for (const tick of yTicks) {
     const row = valueToRow(tick);
@@ -5507,7 +5719,7 @@ function renderHorizontal(chart, ch, colorMode, theme) {
   const yRange = chart.yAxis.range;
   const valueTicks = niceTickValues(yRange.min, yRange.max);
   const catLabels = getCategoryLabels(chart, dataCount);
-  const catGutter = Math.max(...catLabels.map((l) => l.length)) + 1;
+  const catGutter = Math.max(...catLabels.map((l) => displayWidth(l))) + 1;
   const plotW = Math.max(PLOT_WIDTH, 40);
   const bandH = Math.max(2, Math.floor(PLOT_HEIGHT / dataCount));
   const plotH = bandH * dataCount;
@@ -5529,7 +5741,7 @@ function renderHorizontal(chart, ch, colorMode, theme) {
   };
   const bandMid = (i) => plotTop + Math.floor(bandH * (i + 0.5));
   if (hasTitle) {
-    writeText(canvas, roles, 0, Math.floor(totalW / 2 - chart.title.length / 2), chart.title, "text");
+    writeText(canvas, roles, 0, Math.floor(totalW / 2 - displayWidth(chart.title) / 2), chart.title, "text");
   }
   if (hasLegend) {
     const legendRow = hasTitle ? 1 : 0;
@@ -5542,7 +5754,7 @@ function renderHorizontal(chart, ch, colorMode, theme) {
   for (let i = 0; i < dataCount; i++) {
     const my = bandMid(i);
     const label = catLabels[i];
-    const labelStart = catGutter - label.length;
+    const labelStart = catGutter - displayWidth(label);
     writeText(canvas, roles, my, Math.max(0, labelStart), label, "text");
   }
   for (let c = plotLeft; c < plotLeft + plotW; c++) {
@@ -5553,11 +5765,11 @@ function renderHorizontal(chart, ch, colorMode, theme) {
     if (cx < plotLeft || cx >= plotLeft + plotW) continue;
     set(canvas, roles, xAxisRow, cx, ch.xTick, "border");
     const label = formatTickValue(tick);
-    writeText(canvas, roles, xAxisRow + 1, cx - Math.floor(label.length / 2), label, "text");
+    writeText(canvas, roles, xAxisRow + 1, cx - Math.floor(displayWidth(label) / 2), label, "text");
   }
   if (hasYTitle) {
     const title = chart.yAxis.title;
-    writeText(canvas, roles, totalH - 1, Math.floor(totalW / 2 - title.length / 2), title, "text");
+    writeText(canvas, roles, totalH - 1, Math.floor(totalW / 2 - displayWidth(title) / 2), title, "text");
   }
   for (const tick of valueTicks) {
     const cx = valueToCol(tick);
@@ -5733,7 +5945,7 @@ function drawLegend(canvas, roles, hexCanvas, chart, row, totalW, ch, seriesColo
   let totalLen = 0;
   for (let i = 0; i < items.length; i++) {
     if (i > 0) totalLen += 2;
-    totalLen += 1 + 1 + items[i].label.length;
+    totalLen += 1 + 1 + displayWidth(items[i].label);
   }
   const startCol = Math.max(0, Math.floor(totalW / 2 - totalLen / 2));
   let col = startCol;
@@ -5744,7 +5956,7 @@ function drawLegend(canvas, roles, hexCanvas, chart, row, totalW, ch, seriesColo
     col += 1;
     col += 1;
     writeText(canvas, roles, row, col, item.label, "text");
-    col += item.label.length;
+    col += displayWidth(item.label);
   }
 }
 function createCanvas(width, height) {
@@ -5770,9 +5982,7 @@ function get(canvas, row, col) {
   return " ";
 }
 function writeText(canvas, roles, row, startCol, text, role) {
-  for (let i = 0; i < text.length; i++) {
-    set(canvas, roles, row, startCol + i, text[i], role);
-  }
+  drawCJKText(canvas, startCol, row, text, true, roles, role);
 }
 function canvasToString2(canvas, roles, hexCanvas, colorMode, theme) {
   if (canvas.length === 0) return "";
@@ -5784,6 +5994,7 @@ function canvasToString2(canvas, roles, hexCanvas, colorMode, theme) {
     const rowRoles = [];
     const rowHex = [];
     for (let col = 0; col < width; col++) {
+      if (canvas[col][row] === CJK_PAD) continue;
       chars.push(canvas[col][row]);
       rowRoles.push(roles[col][row]);
       rowHex.push(hexCanvas[col][row]);