zombie-mermaid 1.4.0 → 1.5.0

package/README.md

@@ -6,11 +6,14 @@
 
 Ultra-fast, fully themeable, zero DOM dependencies. A maintained fork of [`beautiful-mermaid`](https://github.com/lukilabs/beautiful-mermaid).
 
-![zombie-mermaid sequence diagram example](hero.png)
+![Raw Mermaid source rendering into a themed, animated diagram, drawn by zombie-mermaid itself](hero.svg)
 
-[**Live demo →**](https://dfadler.github.io/zombie-mermaid/)
+[![Live Demo](https://img.shields.io/badge/Live_Demo-view_the_sample_gallery-1f6feb?style=for-the-badge)](https://dfadler.github.io/zombie-mermaid/)
 
 [![npm version](https://img.shields.io/npm/v/zombie-mermaid.svg)](https://www.npmjs.com/package/zombie-mermaid)
+[![CI](https://github.com/dfadler/zombie-mermaid/actions/workflows/ci.yml/badge.svg)](https://github.com/dfadler/zombie-mermaid/actions/workflows/ci.yml)
+[![codecov](https://codecov.io/gh/dfadler/zombie-mermaid/branch/main/graph/badge.svg)](https://codecov.io/gh/dfadler/zombie-mermaid)
+[![Socket Security](https://socket.dev/api/badge/npm/package/zombie-mermaid)](https://socket.dev/npm/package/zombie-mermaid)
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
 
 </div>
@@ -145,11 +148,3 @@ Thank you Alexander for the excellent foundation!
 ## License
 
 MIT — see [LICENSE](LICENSE) for details.
-
----
-
-<div align="center">
-
-Built with care by the team at [Craft](https://craft.do)
-
-</div>

package/dist/cli.js

@@ -800,13 +800,8 @@ function parseFlowchart(lines) {
       applyClickStatement(line, graph);
       continue;
     }
-    const edgeMetaMatch = line.match(/^([\w-]+)(?=@\{)/);
-    if (edgeMetaMatch && graph.edges.some((e) => e.id === edgeMetaMatch[1])) {
-      const block = matchExpandedBlock(line.slice(edgeMetaMatch[1].length));
-      if (block) {
-        applyEdgeMeta(graph, edgeMetaMatch[1], parseExpandedMeta(block.body));
-        continue;
-      }
+    if (tryApplyEdgeMetaLine(line, graph)) {
+      continue;
     }
     const linkStyleMatch = line.match(/^linkStyle\s+(default|[\d,\s]+)\s+(.+)$/);
     if (linkStyleMatch) {
@@ -920,6 +915,9 @@ function parseStateDiagram(lines) {
       }
       continue;
     }
+    if (tryApplyEdgeMetaLine(line, graph)) {
+      continue;
+    }
     const compositeMatch = line.match(
       /^state\s+(?:"([^"]+)"\s+as\s+)?([\w\p{L}]+)\s*\{$/u
     );
@@ -953,10 +951,11 @@ function parseStateDiagram(lines) {
       continue;
     }
     const transitionMatch = line.match(
-      /^(\[\*\]|[\w\p{L}-]+)\s*(-->)\s*(\[\*\]|[\w\p{L}-]+)(?:\s*:\s*(.+))?$/u
+      /^(\[\*\]|[\w\p{L}-]+)\s*(?:([\w-]+)@)?-->\s*(\[\*\]|[\w\p{L}-]+)(?:\s*:\s*(.+))?$/u
     );
     if (transitionMatch) {
       let sourceId = transitionMatch[1];
+      const edgeId = transitionMatch[2];
       let targetId = transitionMatch[3];
       const rawTransitionLabel = transitionMatch[4]?.trim();
       const edgeLabel = rawTransitionLabel ? normalizeBrTags(rawTransitionLabel) : void 0;
@@ -988,7 +987,8 @@ function parseStateDiagram(lines) {
         label: edgeLabel,
         style: "solid",
         hasArrowStart: false,
-        hasArrowEnd: true
+        hasArrowEnd: true,
+        ...edgeId !== void 0 ? { id: edgeId } : {}
       });
       continue;
     }
@@ -1162,6 +1162,17 @@ function applyClickStatement(line, graph) {
     graph.interactions.set(nodeId, interaction);
   }
 }
+var EDGE_META_ID_REGEX = /^([\w-]+)(?=@\{)/;
+function tryApplyEdgeMetaLine(line, graph) {
+  const edgeMetaMatch = line.match(EDGE_META_ID_REGEX);
+  if (!edgeMetaMatch || !graph.edges.some((e) => e.id === edgeMetaMatch[1])) {
+    return false;
+  }
+  const block = matchExpandedBlock(line.slice(edgeMetaMatch[1].length));
+  if (!block) return false;
+  applyEdgeMeta(graph, edgeMetaMatch[1], parseExpandedMeta(block.body));
+  return true;
+}
 function applyEdgeMeta(graph, edgeId, meta) {
   for (const edge of graph.edges) {
     if (edge.id !== edgeId) continue;
@@ -1623,7 +1634,12 @@ function getReadableTextColor(fill, fallback) {
   const luminance = perceptualLuminance(...rgb);
   return luminance > 0.5 ? "#000000" : "#FFFFFF";
 }
-function svgOpenTag(width, height, colors, transparent) {
+var titleIdCounter = 0;
+function nextTitleId() {
+  titleIdCounter += 1;
+  return `zm-title-${titleIdCounter}`;
+}
+function svgOpenTag(width, height, colors, transparent, title, decorative, hasInteractiveLinks) {
   const vars = [
     `--bg:${colors.bg}`,
     `--fg:${colors.fg}`,
@@ -1634,7 +1650,27 @@ function svgOpenTag(width, height, colors, transparent) {
     colors.border ? `--border:${colors.border}` : ""
   ].filter(Boolean).join(";");
   const bgStyle = transparent ? "" : ";background:var(--bg)";
-  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}" style="${vars}${bgStyle}">`;
+  let a11yAttrs = "";
+  let titleEl = "";
+  if (hasInteractiveLinks) {
+    if (title) {
+      const id = nextTitleId();
+      a11yAttrs = ` aria-labelledby="${id}"`;
+      titleEl = `
+  <title id="${id}">${escapeXml(title)}</title>`;
+    }
+  } else if (decorative) {
+    a11yAttrs = ' aria-hidden="true"';
+  } else {
+    a11yAttrs = ' role="img"';
+    if (title) {
+      const id = nextTitleId();
+      a11yAttrs += ` aria-labelledby="${id}"`;
+      titleEl = `
+  <title id="${id}">${escapeXml(title)}</title>`;
+    }
+  }
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}"${a11yAttrs} style="${vars}${bgStyle}">` + titleEl;
 }
 
 // src/ascii/ansi.ts
@@ -1908,19 +1944,44 @@ function colorizeText(text, hex, mode) {
 
 // src/ascii/display-width.ts
 var WIDE_CHAR_PLACEHOLDER = "";
-function charDisplayWidth(char) {
-  return isWideChar(char) ? 2 : 1;
+var COMBINING_MARK_REGEX = /\p{Mn}|\p{Me}/u;
+function isCombiningMark2(char) {
+  return COMBINING_MARK_REGEX.test(char);
+}
+var graphemeSegmenter = new Intl.Segmenter(void 0, {
+  granularity: "grapheme"
+});
+function graphemeClusters(text) {
+  const clusters = [];
+  for (const { segment } of graphemeSegmenter.segment(text)) {
+    clusters.push(segment);
+  }
+  return clusters;
+}
+function charDisplayWidth(cluster) {
+  let sawWide = false;
+  let sawNonMark = false;
+  for (const ch of cluster) {
+    if (isWideChar(ch)) sawWide = true;
+    if (!isCombiningMark2(ch)) sawNonMark = true;
+  }
+  if (sawWide) return 2;
+  return sawNonMark ? 1 : 0;
 }
 function displayWidth(text) {
   let width = 0;
-  for (const ch of text) width += charDisplayWidth(ch);
+  for (const cluster of graphemeClusters(text)) {
+    width += charDisplayWidth(cluster);
+  }
   return width;
 }
 function toDisplayCells(text) {
   const cells = [];
-  for (const ch of text) {
-    cells.push(ch);
-    if (isWideChar(ch)) cells.push(WIDE_CHAR_PLACEHOLDER);
+  for (const cluster of graphemeClusters(text)) {
+    const width = charDisplayWidth(cluster);
+    if (width === 0) continue;
+    cells.push(cluster);
+    if (width === 2) cells.push(WIDE_CHAR_PLACEHOLDER);
   }
   return cells;
 }
@@ -2278,10 +2339,28 @@ var Grid = class {
   add(key) {
     this.#cells.add(key);
   }
+  /**
+   * Release a single cell. For temporary reservations only (see
+   * `rerouteAroundStyleConflicts` in grid.ts) — every other reservation in
+   * this module (node blocks, in particular) is permanent for the life of
+   * a render, so a real caller should rarely need this.
+   */
+  delete(key) {
+    this.#cells.delete(key);
+  }
+  /** Iterate the reserved cell keys. Read-only — see `cloneGrid`. */
+  keys() {
+    return this.#cells.keys();
+  }
 };
 function createGrid() {
   return new Grid();
 }
+function cloneGrid(grid) {
+  const clone = createGrid();
+  for (const key of grid.keys()) clone.add(key);
+  return clone;
+}
 var NODE_BLOCK_SIZE = 3;
 function isOccupied(grid, coord) {
   return grid.has(gridKey(coord));
@@ -2313,6 +2392,42 @@ function placeBlock(grid, origin, size = NODE_BLOCK_SIZE) {
     }
   }
 }
+var MAX_WALK_STEPS = 1e5;
+function pathCells(path) {
+  if (path.length === 0) return [];
+  const cells = [path[0]];
+  for (let i = 1; i < path.length; i++) {
+    const from = path[i - 1];
+    const to = path[i];
+    let x = from.x;
+    let y = from.y;
+    const absDx = Math.abs(to.x - from.x);
+    const absDy = Math.abs(to.y - from.y);
+    const sx = from.x < to.x ? 1 : -1;
+    const sy = from.y < to.y ? 1 : -1;
+    let err = absDx - absDy;
+    let steps = 0;
+    while (x !== to.x || y !== to.y) {
+      if (steps >= MAX_WALK_STEPS) {
+        throw new Error(
+          `pathCells: segment from (${from.x},${from.y}) to (${to.x},${to.y}) did not reach its endpoint within ${MAX_WALK_STEPS} steps`
+        );
+      }
+      const e2 = 2 * err;
+      if (e2 > -absDy) {
+        err -= absDy;
+        x += sx;
+      }
+      if (e2 < absDx) {
+        err += absDx;
+        y += sy;
+      }
+      cells.push({ x, y });
+      steps++;
+    }
+  }
+  return cells;
+}
 
 // src/ascii/converter.ts
 function convertToAsciiGraph(parsed, config) {
@@ -3128,6 +3243,26 @@ function processBundles(graph) {
   }
 }
 
+// src/ascii/edge-cell-styles.ts
+function createEdgeCellStyles() {
+  return /* @__PURE__ */ new Map();
+}
+function findStyleConflict(grid, cellStyles, path, style) {
+  for (const cell of pathCells(path)) {
+    if (isOccupied(grid, cell)) continue;
+    const existing = cellStyles.get(gridKey(cell));
+    if (existing !== void 0 && existing !== style) return cell;
+  }
+  return null;
+}
+function claimPathCells(grid, cellStyles, path, style) {
+  for (const cell of pathCells(path)) {
+    if (isOccupied(grid, cell)) continue;
+    const key = gridKey(cell);
+    if (!cellStyles.has(key)) cellStyles.set(key, style);
+  }
+}
+
 // src/ascii/multiline-utils.ts
 function splitLines(label) {
   return label.split("\n");
@@ -4903,6 +5038,26 @@ function increaseGridSizeForPath(graph, path) {
     }
   }
 }
+var MAX_STYLE_CONFLICT_REROUTES = 8;
+function rerouteAroundStyleConflicts(graph, edge, cellStyles, nodeOnlyGrid) {
+  const temporarilyBlocked = [];
+  try {
+    for (let i = 0; i < MAX_STYLE_CONFLICT_REROUTES; i++) {
+      const conflict = findStyleConflict(
+        nodeOnlyGrid,
+        cellStyles,
+        edge.path,
+        edge.style
+      );
+      if (!conflict) return;
+      graph.grid.add(gridKey(conflict));
+      temporarilyBlocked.push(conflict);
+      determinePath(graph, edge);
+    }
+  } finally {
+    for (const cell of temporarilyBlocked) graph.grid.delete(gridKey(cell));
+  }
+}
 function isNodeInAnySubgraph(graph, node) {
   return graph.subgraphs.some((sg) => sg.nodes.includes(node));
 }
@@ -5257,14 +5412,19 @@ function createMapping(graph) {
   graph.pathBudget = createPathBudget();
   graph.bundles = analyzeEdgeBundles(graph);
   processBundles(graph);
+  const cellStyles = createEdgeCellStyles();
+  const nodeOnlyGrid = cloneGrid(graph.grid);
   for (const edge of graph.edges) {
     if (edge.bundle && edge.path.length > 0) {
       increaseGridSizeForPath(graph, edge.path);
+      claimPathCells(nodeOnlyGrid, cellStyles, edge.path, edge.style);
       determineLabelLine(graph, edge);
       continue;
     }
     determinePath(graph, edge);
+    rerouteAroundStyleConflicts(graph, edge, cellStyles, nodeOnlyGrid);
     increaseGridSizeForPath(graph, edge.path);
+    claimPathCells(nodeOnlyGrid, cellStyles, edge.path, edge.style);
     determineLabelLine(graph, edge);
   }
   for (const node of graph.nodes) {
@@ -9232,16 +9392,27 @@ function pointsToPath(points, curve = "linear") {
 }
 
 // src/renderer.ts
-function renderSvg(graph, colors, font = "Inter", transparent = false, fontSizes = FONT_SIZES, curve = "linear", embedSource) {
+function renderSvg(graph, colors, font = "Inter", transparent = false, fontSizes = FONT_SIZES, curve = "linear", embedSource, animationEnabled = true, title, decorative) {
   const parts = [];
+  const hasInteractiveLinks = graph.nodes.some(
+    (n) => Boolean(safeHref(n.interaction?.href))
+  );
   parts.push(
     withDataSrc(
-      svgOpenTag(graph.width, graph.height, colors, transparent),
+      svgOpenTag(
+        graph.width,
+        graph.height,
+        colors,
+        transparent,
+        title,
+        decorative,
+        hasInteractiveLinks
+      ),
       embedSource
     )
   );
   parts.push(buildStyleBlock(font, false));
-  if (graph.edges.some((e) => e.animate)) {
+  if (animationEnabled && graph.edges.some((e) => e.animate)) {
     parts.push(edgeAnimationStyle());
   }
   parts.push("<defs>");
@@ -9260,7 +9431,7 @@ function renderSvg(graph, colors, font = "Inter", transparent = false, fontSizes
     parts.push(renderGroup(group, font, fontSizes));
   }
   for (const edge of graph.edges) {
-    parts.push(renderEdge(edge, curve));
+    parts.push(renderEdge(edge, curve, animationEnabled));
   }
   for (const edge of graph.edges) {
     if (edge.label) {
@@ -9331,8 +9502,9 @@ function renderGroup(group, font, fontSizes) {
   parts.push("</g>");
   return parts.join("\n");
 }
-function renderEdge(edge, curve) {
+function renderEdge(edge, curve, animationEnabled = true) {
   if (edge.points.length < 2) return "";
+  const animate = animationEnabled && (edge.animate ?? false);
   const curved = curve !== "linear";
   const invisible = edge.style === "invisible";
   const dashArray = edge.style === "dotted" ? ' stroke-dasharray="4 4"' : "";
@@ -9349,9 +9521,9 @@ function renderEdge(edge, curve) {
       markers += ` marker-start="url(#arrowhead-start${suffix})"`;
   }
   const dataAttrs = [
-    // An animated edge (`e1@{ animate: true }`) carries an extra class; its
-    // keyframes live in the shared style block.
-    `class="edge${edge.animate ? " edge-animated" : ""}"`,
+    // An animated edge (`e1@{ animate: true }`, with animation enabled)
+    // carries an extra class; its keyframes live in the shared style block.
+    `class="edge${animate ? " edge-animated" : ""}"`,
     `data-from="${escapeAttr(edge.source)}"`,
     `data-to="${escapeAttr(edge.target)}"`,
     `data-style="${edge.style}"`,
@@ -9364,7 +9536,7 @@ function renderEdge(edge, curve) {
   if (edge.id) {
     dataAttrs.push(`data-id="${escapeAttr(edge.id)}"`);
   }
-  const animatedDash = edge.animate && !dashArray ? ' stroke-dasharray="8 6"' : "";
+  const animatedDash = animate && !dashArray ? ' stroke-dasharray="8 6"' : "";
   const geometry = curved ? `d="${pointsToPath(edge.points, curve)}"` : `points="${pointsToPolylinePath(edge.points)}"`;
   return `<${curved ? "path" : "polyline"} ${dataAttrs.join(" ")} ${geometry} fill="none" stroke="${strokeColor}" stroke-width="${strokeWidth}"${dashArray}${animatedDash}${markers} />`;
 }
@@ -10279,11 +10451,18 @@ function layoutSequenceDiagram(diagram, options = {}) {
 }
 
 // src/sequence/renderer.ts
-function renderSequenceSvg(diagram, colors, font = "Inter", transparent = false, fontSizes = FONT_SIZES, embedSource) {
+function renderSequenceSvg(diagram, colors, font = "Inter", transparent = false, fontSizes = FONT_SIZES, embedSource, title, decorative) {
   const parts = [];
   parts.push(
     withDataSrc(
-      svgOpenTag(diagram.width, diagram.height, colors, transparent),
+      svgOpenTag(
+        diagram.width,
+        diagram.height,
+        colors,
+        transparent,
+        title,
+        decorative
+      ),
       embedSource
     )
   );
@@ -10680,11 +10859,18 @@ var CLS_FONT = {
   annotationSize: 10,
   annotationWeight: 500
 };
-function renderClassSvg(diagram, colors, font = "Inter", transparent = false, fontSizes = FONT_SIZES, embedSource) {
+function renderClassSvg(diagram, colors, font = "Inter", transparent = false, fontSizes = FONT_SIZES, embedSource, title, decorative) {
   const parts = [];
   parts.push(
     withDataSrc(
-      svgOpenTag(diagram.width, diagram.height, colors, transparent),
+      svgOpenTag(
+        diagram.width,
+        diagram.height,
+        colors,
+        transparent,
+        title,
+        decorative
+      ),
       embedSource
     )
   );
@@ -11068,11 +11254,18 @@ var ER_FONT = {
   keySize: 9,
   keyWeight: 600
 };
-function renderErSvg(diagram, colors, font = "Inter", transparent = false, fontSizes = FONT_SIZES, embedSource) {
+function renderErSvg(diagram, colors, font = "Inter", transparent = false, fontSizes = FONT_SIZES, embedSource, title, decorative) {
   const parts = [];
   parts.push(
     withDataSrc(
-      svgOpenTag(diagram.width, diagram.height, colors, transparent),
+      svgOpenTag(
+        diagram.width,
+        diagram.height,
+        colors,
+        transparent,
+        title,
+        decorative
+      ),
       embedSource
     )
   );
@@ -11807,7 +12000,7 @@ var TIP = {
   minY: 4,
   pointerSize: 6
 };
-function renderXYChartSvg(chart, colors, font = "Inter", transparent = false, interactive = false, embedSource) {
+function renderXYChartSvg(chart, colors, font = "Inter", transparent = false, interactive = false, embedSource, title, decorative) {
   const parts = [];
   const maxColorIdx = Math.max(
     0,
@@ -11815,10 +12008,14 @@ function renderXYChartSvg(chart, colors, font = "Inter", transparent = false, in
     ...chart.lines.map((l) => l.colorIndex)
   );
   const svgTag = withDataSrc(
-    svgOpenTag(chart.width, chart.height, colors, transparent).replace(
-      "<svg ",
-      `<svg data-xychart-colors="${maxColorIdx}" `
-    ),
+    svgOpenTag(
+      chart.width,
+      chart.height,
+      colors,
+      transparent,
+      title,
+      decorative
+    ).replace("<svg ", `<svg data-xychart-colors="${maxColorIdx}" `),
     embedSource
   );
   parts.push(svgTag);
@@ -12234,6 +12431,18 @@ function buildColors(options) {
     border: options.border
   };
 }
+function resolveInteractivity(options) {
+  return options.interactivity ?? "static";
+}
+function resolveAnimationEnabled(options) {
+  return resolveInteractivity(options) !== "none";
+}
+function resolveXYChartInteractive(options) {
+  if (options.interactivity !== void 0) {
+    return options.interactivity === "full";
+  }
+  return options.interactive ?? false;
+}
 function renderMermaidSVG(text, options = {}) {
   const originalText = text;
   text = decodeXML(text);
@@ -12243,6 +12452,8 @@ function renderMermaidSVG(text, options = {}) {
   const fontSizes = resolveFontSizes(options.fontSizes);
   const diagramType = detectDiagramType(text);
   const embedSource = options.embedSource ? originalText : void 0;
+  const title = options.title;
+  const decorative = options.decorative;
   const lines = splitStatements(text);
   switch (diagramType) {
     case "sequence": {
@@ -12254,7 +12465,9 @@ function renderMermaidSVG(text, options = {}) {
         font,
         transparent,
         fontSizes,
-        embedSource
+        embedSource,
+        title,
+        decorative
       );
     }
     case "class": {
@@ -12266,7 +12479,9 @@ function renderMermaidSVG(text, options = {}) {
         font,
         transparent,
         fontSizes,
-        embedSource
+        embedSource,
+        title,
+        decorative
       );
     }
     case "er": {
@@ -12278,7 +12493,9 @@ function renderMermaidSVG(text, options = {}) {
         font,
         transparent,
         fontSizes,
-        embedSource
+        embedSource,
+        title,
+        decorative
       );
     }
     case "xychart": {
@@ -12289,8 +12506,10 @@ function renderMermaidSVG(text, options = {}) {
         colors,
         font,
         transparent,
-        options.interactive ?? false,
-        embedSource
+        resolveXYChartInteractive(options),
+        embedSource,
+        title,
+        decorative
       );
     }
     case "flowchart":
@@ -12305,7 +12524,10 @@ function renderMermaidSVG(text, options = {}) {
         transparent,
         fontSizes,
         effective.curve ?? "linear",
-        embedSource
+        embedSource,
+        resolveAnimationEnabled(options),
+        title,
+        decorative
       );
     }
   }