@ktrysmt/beautiful-mermaid 1.4.4 → 1.5.0

package/README.md

@@ -6,8 +6,6 @@
 
 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/@ktrysmt/beautiful-mermaid.svg)](https://www.npmjs.com/package/@ktrysmt/beautiful-mermaid)
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
 

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)));
@@ -6594,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)
@@ -6698,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)
   };
@@ -6802,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,
@@ -6812,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);
@@ -6845,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) {
@@ -6997,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) {
@@ -7337,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);
 }
@@ -7439,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)");
@@ -7459,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);