@ktrysmt/beautiful-mermaid 1.4.3 → 1.5.0

package/README.md

@@ -1,39 +1,28 @@
 <div align="center">
 
-# beautiful-mermaid
+# @ktrysmt/beautiful-mermaid
 
 **Render Mermaid diagrams as beautiful SVGs or ASCII art**
 
 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 +39,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 +51,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 +68,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 +88,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 +213,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 +248,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 +426,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 +569,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

@@ -7,8 +7,8 @@ var MIX = {
   /** Primary text: near-full fg */
   text: 100,
   // just use --fg directly
-  /** Secondary text (group headers): fg mixed at 60% */
-  textSec: 60,
+  /** Secondary text (group headers, edge labels): fg mixed at 75% */
+  textSec: 75,
   /** Muted text (edge labels, notes): fg mixed at 40% */
   textMuted: 40,
   /** Faint text (de-emphasized): fg mixed at 25% */
@@ -153,7 +153,7 @@ function buildStyleBlock(font, hasMonoFont) {
   const derivedVars = `
     /* Derived from --bg and --fg (overridable via --line, --accent, etc.) */
     --_text:          var(--fg);
-    --_text-sec:      var(--muted, color-mix(in srgb, var(--fg) ${MIX.textSec}%, var(--bg)));
+    --_text-sec:      color-mix(in srgb, var(--fg) ${MIX.textSec}%, var(--bg));
     --_text-muted:    var(--muted, color-mix(in srgb, var(--fg) ${MIX.textMuted}%, var(--bg)));
     --_text-faint:    color-mix(in srgb, var(--fg) ${MIX.textFaint}%, var(--bg));
     --_line:          var(--line, color-mix(in srgb, var(--fg) ${MIX.line}%, var(--bg)));
@@ -2927,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(
@@ -2957,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;
@@ -2968,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;
@@ -2990,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) {
@@ -6533,6 +6594,7 @@ function mermaidToElk(graph, opts) {
       "elk.layered.highDegreeNodes.threshold": "8",
       "elk.layered.compaction.postCompaction.strategy": "LEFT_RIGHT_CONSTRAINT_LOCKING",
       "elk.layered.considerModelOrder.strategy": "NODES_AND_EDGES",
+      "elk.layered.cycleBreaking.strategy": "DEPTH_FIRST",
       "elk.layered.wrapping.strategy": "OFF",
       // Use SEPARATE when subgraphs have direction overrides (enables proper direction handling)
       // Use INCLUDE_CHILDREN otherwise (simpler cross-hierarchy edge routing)
@@ -6637,6 +6699,7 @@ function subgraphToElk(sg, graph, opts, edgesBySubgraph, subgraphPorts) {
     "elk.layered.spacing.edgeEdgeBetweenLayers": "12",
     "elk.layered.spacing.edgeNodeBetweenLayers": "12",
     "elk.layered.nodePlacement.bk.fixedAlignment": "BALANCED",
+    "elk.layered.cycleBreaking.strategy": "DEPTH_FIRST",
     "elk.layered.spacing.nodeNodeBetweenLayers": String(opts.layerSpacing),
     "elk.spacing.nodeNode": String(opts.nodeSpacing)
   };
@@ -6741,6 +6804,7 @@ function elkToPositioned(elkResult, graph, mergeEdges = false) {
     collectAllSubgraphIds(sg, subgraphIds);
   }
   extractNodesAndGroups(elkResult, graph, subgraphIds, nodes, groups, 0, 0);
+  expandGroupsForLabels(groups, nodes);
   const allBounds = flattenGroupBounds(groups);
   const margins = allBounds.length > 0 ? {
     leftX: Math.min(...allBounds.map((b) => b.x)) - 20,
@@ -6751,6 +6815,7 @@ function elkToPositioned(elkResult, graph, mergeEdges = false) {
   if (mergeEdges) {
     bundleEdgePaths(edges, nodes, groups, graph.direction);
   }
+  rerouteBackEdges(edges, nodes, groups, graph.direction);
   const nodeMap = new Map(nodes.map((n) => [n.id, n]));
   for (const edge of edges) {
     const sourceNode = nodeMap.get(edge.source);
@@ -6784,6 +6849,34 @@ function elkToPositioned(elkResult, graph, mergeEdges = false) {
     groups
   };
 }
+function expandGroupsForLabels(groups, nodes) {
+  for (const group of groups) {
+    if (group.children.length > 0) {
+      expandGroupsForLabels(group.children, nodes);
+    }
+    if (!group.label) continue;
+    const metrics = measureMultilineText(group.label, FONT_SIZES.groupHeader, FONT_WEIGHTS.groupHeader);
+    const needed = metrics.width + 12 + 16;
+    if (needed <= group.width) continue;
+    const extra = needed - group.width;
+    const shift = extra / 2;
+    for (const node of nodes) {
+      if (node.x >= group.x && node.x + node.width <= group.x + group.width + extra && node.y >= group.y && node.y + node.height <= group.y + group.height) {
+        node.x += shift;
+      }
+    }
+    for (const child of group.children) {
+      shiftGroupX(child, shift);
+    }
+    group.width = needed;
+  }
+}
+function shiftGroupX(group, dx) {
+  group.x += dx;
+  for (const child of group.children) {
+    shiftGroupX(child, dx);
+  }
+}
 function extractNodesAndGroups(elkNode, graph, subgraphIds, nodes, groups, offsetX, offsetY) {
   if (!elkNode.children) return;
   for (const child of elkNode.children) {
@@ -6936,6 +7029,99 @@ function orthogonalizeEdgePoints(points, margins, edgeIndex = 0) {
   }
   return result;
 }
+function rerouteBackEdges(edges, nodes, groups, direction) {
+  const isVertical = direction === "TD" || direction === "TB" || direction === "BT";
+  if (!isVertical) return;
+  const isDownward = direction === "TD" || direction === "TB";
+  const nodeMap = new Map(nodes.map((n) => [n.id, n]));
+  const backEdgeIndices = [];
+  for (let i = 0; i < edges.length; i++) {
+    const edge = edges[i];
+    const src = nodeMap.get(edge.source);
+    const tgt = nodeMap.get(edge.target);
+    if (!src || !tgt || edge.points.length < 2) continue;
+    const isBackEdge = isDownward ? src.y > tgt.y : src.y + src.height < tgt.y + tgt.height;
+    if (isBackEdge) backEdgeIndices.push(i);
+  }
+  if (backEdgeIndices.length === 0) return;
+  const nodeExitCount = /* @__PURE__ */ new Map();
+  const nodeEnterCount = /* @__PURE__ */ new Map();
+  for (const idx of backEdgeIndices) {
+    const edge = edges[idx];
+    nodeExitCount.set(edge.source, (nodeExitCount.get(edge.source) ?? 0) + 1);
+    nodeEnterCount.set(edge.target, (nodeEnterCount.get(edge.target) ?? 0) + 1);
+  }
+  const nodeTotalPorts = /* @__PURE__ */ new Map();
+  const allNodeIds = /* @__PURE__ */ new Set([...nodeExitCount.keys(), ...nodeEnterCount.keys()]);
+  for (const id of allNodeIds) {
+    nodeTotalPorts.set(id, (nodeExitCount.get(id) ?? 0) + (nodeEnterCount.get(id) ?? 0));
+  }
+  const nodeNextExitSlot = /* @__PURE__ */ new Map();
+  const nodeNextEnterSlot = /* @__PURE__ */ new Map();
+  const allBounds = flattenGroupBounds(groups);
+  for (const n of nodes) {
+    allBounds.push({ x: n.x, y: n.y, right: n.x + n.width, bottom: n.y + n.height });
+  }
+  const diagramRight = Math.max(...allBounds.map((b) => b.right));
+  const EDGE_SPACING = 12;
+  const PORT_MARGIN = 6;
+  function portY(node, slotIndex, totalSlots) {
+    if (totalSlots === 1) return node.y + node.height / 2;
+    const usable = node.height - PORT_MARGIN * 2;
+    return node.y + PORT_MARGIN + usable * (slotIndex + 0.5) / totalSlots;
+  }
+  for (let bi = 0; bi < backEdgeIndices.length; bi++) {
+    const edge = edges[backEdgeIndices[bi]];
+    const src = nodeMap.get(edge.source);
+    const tgt = nodeMap.get(edge.target);
+    const srcExitIdx = nodeNextExitSlot.get(edge.source) ?? 0;
+    nodeNextExitSlot.set(edge.source, srcExitIdx + 1);
+    const srcExitY = portY(src, srcExitIdx, nodeTotalPorts.get(edge.source));
+    const tgtEnterIdx = nodeNextEnterSlot.get(edge.target) ?? 0;
+    nodeNextEnterSlot.set(edge.target, tgtEnterIdx + 1);
+    const tgtExitOffset = nodeExitCount.get(edge.target) ?? 0;
+    const tgtEntryY = portY(tgt, tgtExitOffset + tgtEnterIdx, nodeTotalPorts.get(edge.target));
+    const srcRight = src.x + src.width;
+    const tgtRight = tgt.x + tgt.width;
+    const marginX = diagramRight + 20 + bi * EDGE_SPACING;
+    edge.points = [
+      { x: srcRight, y: srcExitY },
+      { x: marginX, y: srcExitY },
+      { x: marginX, y: tgtEntryY },
+      { x: tgtRight, y: tgtEntryY }
+    ];
+  }
+  const LABEL_PADDING = 8;
+  const placedLabels = [];
+  for (const idx of backEdgeIndices) {
+    const edge = edges[idx];
+    if (!edge.label) continue;
+    const metrics = measureMultilineText(edge.label, FONT_SIZES.edgeLabel, FONT_WEIGHTS.edgeLabel);
+    const halfW = (metrics.width + LABEL_PADDING * 2) / 2;
+    const halfH = (metrics.height + LABEL_PADDING * 2) / 2;
+    const marginX = edge.points[1].x;
+    const topY = Math.min(edge.points[1].y, edge.points[2].y);
+    const botY = Math.max(edge.points[1].y, edge.points[2].y);
+    let labelX = marginX;
+    let labelY = (topY + botY) / 2;
+    for (let attempt = 0; attempt < placedLabels.length + 1; attempt++) {
+      let overlap = false;
+      for (const prev of placedLabels) {
+        const overlapX = Math.abs(labelX - prev.x) < halfW + prev.hw;
+        const overlapY = Math.abs(labelY - prev.y) < halfH + prev.hh;
+        if (overlapX && overlapY) {
+          labelY = prev.y + prev.hh + halfH + 2;
+          overlap = true;
+          break;
+        }
+      }
+      if (!overlap) break;
+    }
+    labelY = Math.max(topY + halfH, Math.min(botY - halfH, labelY));
+    edge.labelPosition = { x: labelX, y: labelY };
+    placedLabels.push({ x: labelX, y: labelY, hw: halfW, hh: halfH });
+  }
+}
 function collectEdgeSegments(elkNode, segments, offsetX, offsetY) {
   if (elkNode.edges) {
     for (const elkEdge of elkNode.edges) {
@@ -7276,9 +7462,121 @@ function bundleEdgePaths(edges, nodes, groups, direction) {
     }
   }
 }
+function buildFlatElkGraph(compoundElk) {
+  const flatNodes = [];
+  const flatEdges = [];
+  function collectNodes(node) {
+    if (!node.children) return;
+    for (const child of node.children) {
+      if (child.children) {
+        if (child.children.length > 0) collectNodes(child);
+      } else {
+        flatNodes.push({ id: child.id, width: child.width, height: child.height, labels: child.labels });
+      }
+    }
+  }
+  collectNodes(compoundElk);
+  const flatNodeIds = new Set(flatNodes.map((n) => n.id));
+  function collectEdges(node) {
+    if (node.edges) {
+      for (const e of node.edges) {
+        if (e.id.endsWith("_internal")) continue;
+        const src = e.sources[0];
+        const tgt = e.targets[0];
+        if (src && tgt && flatNodeIds.has(src) && flatNodeIds.has(tgt)) {
+          flatEdges.push({ id: e.id, sources: [...e.sources], targets: [...e.targets] });
+        }
+      }
+    }
+    if (node.children) {
+      for (const child of node.children) collectEdges(child);
+    }
+  }
+  collectEdges(compoundElk);
+  return {
+    id: "flat_root",
+    layoutOptions: {
+      "elk.algorithm": "layered",
+      "elk.direction": compoundElk.layoutOptions?.["elk.direction"] ?? "DOWN",
+      "elk.spacing.nodeNode": compoundElk.layoutOptions?.["elk.spacing.nodeNode"] ?? "28",
+      "elk.layered.spacing.nodeNodeBetweenLayers": compoundElk.layoutOptions?.["elk.layered.spacing.nodeNodeBetweenLayers"] ?? "48",
+      "elk.spacing.edgeEdge": "12",
+      "elk.edgeRouting": "ORTHOGONAL",
+      "elk.layered.cycleBreaking.strategy": "DEPTH_FIRST",
+      "elk.layered.considerModelOrder.strategy": "NODES_AND_EDGES",
+      "elk.padding": compoundElk.layoutOptions?.["elk.padding"] ?? "[top=40,left=40,bottom=40,right=40]"
+    },
+    children: flatNodes,
+    edges: flatEdges
+  };
+}
+function extractFlatLayers(flatResult, layerSpacing, direction) {
+  const isHorizontal = direction === "LR" || direction === "RL";
+  const positions = /* @__PURE__ */ new Map();
+  for (const child of flatResult.children ?? []) {
+    positions.set(child.id, isHorizontal ? child.x ?? 0 : child.y ?? 0);
+  }
+  const sorted = [...positions.entries()].sort((a, b) => a[1] - b[1]);
+  if (sorted.length === 0) return /* @__PURE__ */ new Map();
+  const nodeLayer = /* @__PURE__ */ new Map();
+  const threshold = layerSpacing * 0.6;
+  let layerIdx = 0;
+  let prevPos = sorted[0][1];
+  nodeLayer.set(sorted[0][0], 0);
+  for (let i = 1; i < sorted.length; i++) {
+    if (sorted[i][1] - prevPos > threshold) layerIdx++;
+    nodeLayer.set(sorted[i][0], layerIdx);
+    prevPos = sorted[i][1];
+  }
+  return nodeLayer;
+}
+function addLayerConstraintEdges(elkGraph, nodeLayer, subgraphs) {
+  const sgNodeMap = /* @__PURE__ */ new Map();
+  function findSgNodes(node) {
+    if (!node.children) return;
+    for (const child of node.children) {
+      if (child.children && child.children.length > 0) {
+        sgNodeMap.set(child.id, child);
+        findSgNodes(child);
+      }
+    }
+  }
+  findSgNodes(elkGraph);
+  for (const sg of subgraphs) {
+    const elkSg = sgNodeMap.get(sg.id);
+    if (!elkSg || !elkSg.edges) continue;
+    const members = sg.nodeIds.filter((id) => nodeLayer.has(id)).sort((a, b) => nodeLayer.get(a) - nodeLayer.get(b));
+    if (members.length < 2) continue;
+    const firstLayer = nodeLayer.get(members[0]);
+    const lastLayer = nodeLayer.get(members[members.length - 1]);
+    if (firstLayer === lastLayer) continue;
+    for (let i = 0; i < members.length - 1; i++) {
+      const srcLayer = nodeLayer.get(members[i]);
+      const tgtLayer = nodeLayer.get(members[i + 1]);
+      if (srcLayer < tgtLayer) {
+        elkSg.edges.push({
+          id: `lc_${sg.id}_${i}`,
+          sources: [members[i]],
+          targets: [members[i + 1]]
+        });
+      }
+    }
+    if (sg.children.length > 0) {
+      addLayerConstraintEdges(elkGraph, nodeLayer, sg.children);
+    }
+  }
+}
 function layoutGraphSync(graph, options = {}) {
   const opts = { ...DEFAULTS2, ...options };
   const elkGraph = mermaidToElk(graph, opts);
+  if (graph.subgraphs.length > 0) {
+    const flatElk = buildFlatElkGraph(elkGraph);
+    if ((flatElk.children?.length ?? 0) >= 2 && (flatElk.edges?.length ?? 0) > 0) {
+      const flatResult = elkLayoutSync(flatElk);
+      const nodeLayer = extractFlatLayers(flatResult, opts.layerSpacing, graph.direction);
+      addLayerConstraintEdges(elkGraph, nodeLayer, graph.subgraphs);
+    }
+  }
   const result = elkLayoutSync(elkGraph);
   return elkToPositioned(result, graph, DEFAULTS2.mergeEdges);
 }
@@ -7378,7 +7676,6 @@ function renderGroup(group, font) {
 }
 function renderEdge(edge) {
   if (edge.points.length < 2) return "";
-  const pathData = pointsToPolylinePath(edge.points);
   const dashArray = edge.style === "dotted" ? ' stroke-dasharray="4 4"' : "";
   const baseStrokeWidth = edge.style === "thick" ? STROKE_WIDTHS.connector * 2 : STROKE_WIDTHS.connector;
   const strokeColor = escapeAttr(edge.inlineStyle?.stroke ?? "var(--_line)");
@@ -7398,10 +7695,41 @@ function renderEdge(edge) {
   if (edge.label) {
     dataAttrs.push(`data-label="${escapeAttr(edge.label)}"`);
   }
-  return `<polyline ${dataAttrs.join(" ")} points="${pathData}" fill="none" stroke="${strokeColor}" stroke-width="${strokeWidth}"${dashArray}${markers} />`;
+  return `<path ${dataAttrs.join(" ")} d="${pointsToRoundedPath(edge.points)}" fill="none" stroke="${strokeColor}" stroke-width="${strokeWidth}"${dashArray}${markers} />`;
 }
-function pointsToPolylinePath(points) {
-  return points.map((p) => `${p.x},${p.y}`).join(" ");
+function pointsToRoundedPath(points, radius = 6) {
+  if (points.length < 2) return "";
+  if (points.length === 2 || radius <= 0) {
+    return `M${points[0].x},${points[0].y}` + points.slice(1).map((p) => `L${p.x},${p.y}`).join("");
+  }
+  const parts = [`M${points[0].x},${points[0].y}`];
+  for (let i = 1; i < points.length - 1; i++) {
+    const prev = points[i - 1];
+    const curr = points[i];
+    const next = points[i + 1];
+    const lenIn = Math.abs(curr.x - prev.x) + Math.abs(curr.y - prev.y);
+    const lenOut = Math.abs(next.x - curr.x) + Math.abs(next.y - curr.y);
+    const r2 = Math.min(radius, lenIn / 2, lenOut / 2);
+    if (r2 < 1) {
+      parts.push(`L${curr.x},${curr.y}`);
+      continue;
+    }
+    const dx1 = curr.x - prev.x;
+    const dy1 = curr.y - prev.y;
+    const d1 = Math.sqrt(dx1 * dx1 + dy1 * dy1) || 1;
+    const startX = curr.x - dx1 / d1 * r2;
+    const startY = curr.y - dy1 / d1 * r2;
+    const dx2 = next.x - curr.x;
+    const dy2 = next.y - curr.y;
+    const d2 = Math.sqrt(dx2 * dx2 + dy2 * dy2) || 1;
+    const endX = curr.x + dx2 / d2 * r2;
+    const endY = curr.y + dy2 / d2 * r2;
+    parts.push(`L${startX},${startY}`);
+    parts.push(`Q${curr.x},${curr.y} ${endX},${endY}`);
+  }
+  const last = points[points.length - 1];
+  parts.push(`L${last.x},${last.y}`);
+  return parts.join("");
 }
 function renderEdgeLabel(edge, font) {
   const mid = edge.labelPosition ?? edgeMidpoint(edge.points);