zombie-mermaid 1.3.0 → 1.4.0

package/README.md

@@ -122,6 +122,7 @@ zombie-mermaid --help                                   # Show all options
 - [Supported Diagrams](docs/diagrams.md) — syntax for every diagram type, XY chart styling, and ASCII rendering options
 - [React Integration](docs/react-integration.md) — zero-flash rendering with `useMemo()`
 - [API Reference](docs/api-reference.md) — full function and options reference
+- [Migrating from `beautiful-mermaid`](docs/migrating-from-beautiful-mermaid.md) — what's drop-in, which fixes change rendered output, and how to audit your own diagrams before upgrading
 
 More design write-ups and reference material live in [docs/](docs/).
 

package/dist/cli.js

@@ -1539,11 +1539,32 @@ function isSafeCssVarReference(font) {
   }
   return depth === 0;
 }
+var GENERIC_FONT_FAMILIES = /* @__PURE__ */ new Set([
+  "sans-serif",
+  "serif",
+  "monospace",
+  "system-ui",
+  "ui-sans-serif",
+  "ui-serif",
+  "ui-monospace",
+  "ui-rounded",
+  "cursive",
+  "fantasy",
+  "math",
+  "emoji",
+  "fangsong"
+]);
+function isFontStackOrGenericFamily(font) {
+  const trimmed = font.trim();
+  if (trimmed.includes(",")) return true;
+  return GENERIC_FONT_FAMILIES.has(trimmed.toLowerCase());
+}
 function buildStyleBlock(font, hasMonoFont) {
   const isVarReference = isSafeCssVarReference(font);
   const safeFont = isVarReference ? font.trim() : font.replace(/[<>{};'"]/g, "");
+  const skipImport = isVarReference || isFontStackOrGenericFamily(font);
   const fontImports = [
-    ...isVarReference ? [] : [
+    ...skipImport ? [] : [
       `@import url('https://fonts.googleapis.com/css2?family=${encodeURIComponent(safeFont)}:wght@400;500;600;700&amp;display=swap');`
     ],
     ...hasMonoFont ? [
@@ -9211,9 +9232,14 @@ function pointsToPath(points, curve = "linear") {
 }
 
 // src/renderer.ts
-function renderSvg(graph, colors, font = "Inter", transparent = false, fontSizes = FONT_SIZES, curve = "linear") {
+function renderSvg(graph, colors, font = "Inter", transparent = false, fontSizes = FONT_SIZES, curve = "linear", embedSource) {
   const parts = [];
-  parts.push(svgOpenTag(graph.width, graph.height, colors, transparent));
+  parts.push(
+    withDataSrc(
+      svgOpenTag(graph.width, graph.height, colors, transparent),
+      embedSource
+    )
+  );
   parts.push(buildStyleBlock(font, false));
   if (graph.edges.some((e) => e.animate)) {
     parts.push(edgeAnimationStyle());
@@ -9865,6 +9891,16 @@ function renderNodeLabel(node, _font, fontSizes) {
 function escapeAttr(value) {
   return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
+function escapeMultilineAttr(value) {
+  return escapeAttr(value).replace(/\r/g, "&#13;").replace(/\n/g, "&#10;").replace(/\t/g, "&#9;");
+}
+function withDataSrc(svgTag, source) {
+  if (source === void 0) return svgTag;
+  return svgTag.replace(
+    "<svg ",
+    `<svg data-src="${escapeMultilineAttr(source)}" `
+  );
+}
 function sanitizeClassName(className) {
   if (!className) return void 0;
   return /^-?[a-zA-Z_][a-zA-Z0-9_-]*$/.test(className) ? className : void 0;
@@ -10243,9 +10279,14 @@ function layoutSequenceDiagram(diagram, options = {}) {
 }
 
 // src/sequence/renderer.ts
-function renderSequenceSvg(diagram, colors, font = "Inter", transparent = false, fontSizes = FONT_SIZES) {
+function renderSequenceSvg(diagram, colors, font = "Inter", transparent = false, fontSizes = FONT_SIZES, embedSource) {
   const parts = [];
-  parts.push(svgOpenTag(diagram.width, diagram.height, colors, transparent));
+  parts.push(
+    withDataSrc(
+      svgOpenTag(diagram.width, diagram.height, colors, transparent),
+      embedSource
+    )
+  );
   parts.push(buildStyleBlock(font, false));
   parts.push("<defs>");
   parts.push(arrowMarkerDefs2());
@@ -10639,9 +10680,14 @@ var CLS_FONT = {
   annotationSize: 10,
   annotationWeight: 500
 };
-function renderClassSvg(diagram, colors, font = "Inter", transparent = false, fontSizes = FONT_SIZES) {
+function renderClassSvg(diagram, colors, font = "Inter", transparent = false, fontSizes = FONT_SIZES, embedSource) {
   const parts = [];
-  parts.push(svgOpenTag(diagram.width, diagram.height, colors, transparent));
+  parts.push(
+    withDataSrc(
+      svgOpenTag(diagram.width, diagram.height, colors, transparent),
+      embedSource
+    )
+  );
   parts.push(buildStyleBlock(font, true));
   parts.push("<defs>");
   parts.push(relationshipMarkerDefs());
@@ -11022,9 +11068,14 @@ var ER_FONT = {
   keySize: 9,
   keyWeight: 600
 };
-function renderErSvg(diagram, colors, font = "Inter", transparent = false, fontSizes = FONT_SIZES) {
+function renderErSvg(diagram, colors, font = "Inter", transparent = false, fontSizes = FONT_SIZES, embedSource) {
   const parts = [];
-  parts.push(svgOpenTag(diagram.width, diagram.height, colors, transparent));
+  parts.push(
+    withDataSrc(
+      svgOpenTag(diagram.width, diagram.height, colors, transparent),
+      embedSource
+    )
+  );
   parts.push(buildStyleBlock(font, true));
   parts.push("<defs>");
   parts.push("</defs>");
@@ -11756,19 +11807,20 @@ var TIP = {
   minY: 4,
   pointerSize: 6
 };
-function renderXYChartSvg(chart, colors, font = "Inter", transparent = false, interactive = false) {
+function renderXYChartSvg(chart, colors, font = "Inter", transparent = false, interactive = false, embedSource) {
   const parts = [];
   const maxColorIdx = Math.max(
     0,
     ...chart.bars.map((b) => b.colorIndex),
     ...chart.lines.map((l) => l.colorIndex)
   );
-  const svgTag = svgOpenTag(
-    chart.width,
-    chart.height,
-    colors,
-    transparent
-  ).replace("<svg ", `<svg data-xychart-colors="${maxColorIdx}" `);
+  const svgTag = withDataSrc(
+    svgOpenTag(chart.width, chart.height, colors, transparent).replace(
+      "<svg ",
+      `<svg data-xychart-colors="${maxColorIdx}" `
+    ),
+    embedSource
+  );
   parts.push(svgTag);
   parts.push(buildStyleBlock(font, false));
   const maxLinePoints = Math.max(...chart.lines.map((l) => l.points.length), 0);
@@ -12183,28 +12235,51 @@ function buildColors(options) {
   };
 }
 function renderMermaidSVG(text, options = {}) {
+  const originalText = text;
   text = decodeXML(text);
   const colors = buildColors(options);
   const font = options.font ?? "Inter";
   const transparent = options.transparent ?? false;
   const fontSizes = resolveFontSizes(options.fontSizes);
   const diagramType = detectDiagramType(text);
+  const embedSource = options.embedSource ? originalText : void 0;
   const lines = splitStatements(text);
   switch (diagramType) {
     case "sequence": {
       const diagram = parseSequenceDiagram(lines);
       const positioned = layoutSequenceDiagram(diagram, options);
-      return renderSequenceSvg(positioned, colors, font, transparent, fontSizes);
+      return renderSequenceSvg(
+        positioned,
+        colors,
+        font,
+        transparent,
+        fontSizes,
+        embedSource
+      );
     }
     case "class": {
       const diagram = parseClassDiagram(lines);
       const positioned = layoutClassDiagramSync(diagram, options);
-      return renderClassSvg(positioned, colors, font, transparent, fontSizes);
+      return renderClassSvg(
+        positioned,
+        colors,
+        font,
+        transparent,
+        fontSizes,
+        embedSource
+      );
     }
     case "er": {
       const diagram = parseErDiagram(lines);
       const positioned = layoutErDiagramSync(diagram, options);
-      return renderErSvg(positioned, colors, font, transparent, fontSizes);
+      return renderErSvg(
+        positioned,
+        colors,
+        font,
+        transparent,
+        fontSizes,
+        embedSource
+      );
     }
     case "xychart": {
       const chart = parseXYChart(lines);
@@ -12214,7 +12289,8 @@ function renderMermaidSVG(text, options = {}) {
         colors,
         font,
         transparent,
-        options.interactive ?? false
+        options.interactive ?? false,
+        embedSource
       );
     }
     case "flowchart":
@@ -12228,7 +12304,8 @@ function renderMermaidSVG(text, options = {}) {
         font,
         transparent,
         fontSizes,
-        effective.curve ?? "linear"
+        effective.curve ?? "linear",
+        embedSource
       );
     }
   }

package/dist/index.cjs

@@ -205,11 +205,32 @@ function isSafeCssVarReference(font) {
   }
   return depth === 0;
 }
+var GENERIC_FONT_FAMILIES = /* @__PURE__ */ new Set([
+  "sans-serif",
+  "serif",
+  "monospace",
+  "system-ui",
+  "ui-sans-serif",
+  "ui-serif",
+  "ui-monospace",
+  "ui-rounded",
+  "cursive",
+  "fantasy",
+  "math",
+  "emoji",
+  "fangsong"
+]);
+function isFontStackOrGenericFamily(font) {
+  const trimmed = font.trim();
+  if (trimmed.includes(",")) return true;
+  return GENERIC_FONT_FAMILIES.has(trimmed.toLowerCase());
+}
 function buildStyleBlock(font, hasMonoFont) {
   const isVarReference = isSafeCssVarReference(font);
   const safeFont = isVarReference ? font.trim() : font.replace(/[<>{};'"]/g, "");
+  const skipImport = isVarReference || isFontStackOrGenericFamily(font);
   const fontImports = [
-    ...isVarReference ? [] : [
+    ...skipImport ? [] : [
       `@import url('https://fonts.googleapis.com/css2?family=${encodeURIComponent(safeFont)}:wght@400;500;600;700&amp;display=swap');`
     ],
     ...hasMonoFont ? [
@@ -9176,9 +9197,14 @@ function pointsToPath(points, curve = "linear") {
 }
 
 // src/renderer.ts
-function renderSvg(graph, colors, font = "Inter", transparent = false, fontSizes = FONT_SIZES, curve = "linear") {
+function renderSvg(graph, colors, font = "Inter", transparent = false, fontSizes = FONT_SIZES, curve = "linear", embedSource) {
   const parts = [];
-  parts.push(svgOpenTag(graph.width, graph.height, colors, transparent));
+  parts.push(
+    withDataSrc(
+      svgOpenTag(graph.width, graph.height, colors, transparent),
+      embedSource
+    )
+  );
   parts.push(buildStyleBlock(font, false));
   if (graph.edges.some((e) => e.animate)) {
     parts.push(edgeAnimationStyle());
@@ -9830,6 +9856,16 @@ function renderNodeLabel(node, _font, fontSizes) {
 function escapeAttr(value) {
   return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
+function escapeMultilineAttr(value) {
+  return escapeAttr(value).replace(/\r/g, "&#13;").replace(/\n/g, "&#10;").replace(/\t/g, "&#9;");
+}
+function withDataSrc(svgTag, source) {
+  if (source === void 0) return svgTag;
+  return svgTag.replace(
+    "<svg ",
+    `<svg data-src="${escapeMultilineAttr(source)}" `
+  );
+}
 function sanitizeClassName(className) {
   if (!className) return void 0;
   return /^-?[a-zA-Z_][a-zA-Z0-9_-]*$/.test(className) ? className : void 0;
@@ -10208,9 +10244,14 @@ function layoutSequenceDiagram(diagram, options = {}) {
 }
 
 // src/sequence/renderer.ts
-function renderSequenceSvg(diagram, colors, font = "Inter", transparent = false, fontSizes = FONT_SIZES) {
+function renderSequenceSvg(diagram, colors, font = "Inter", transparent = false, fontSizes = FONT_SIZES, embedSource) {
   const parts = [];
-  parts.push(svgOpenTag(diagram.width, diagram.height, colors, transparent));
+  parts.push(
+    withDataSrc(
+      svgOpenTag(diagram.width, diagram.height, colors, transparent),
+      embedSource
+    )
+  );
   parts.push(buildStyleBlock(font, false));
   parts.push("<defs>");
   parts.push(arrowMarkerDefs2());
@@ -10604,9 +10645,14 @@ var CLS_FONT = {
   annotationSize: 10,
   annotationWeight: 500
 };
-function renderClassSvg(diagram, colors, font = "Inter", transparent = false, fontSizes = FONT_SIZES) {
+function renderClassSvg(diagram, colors, font = "Inter", transparent = false, fontSizes = FONT_SIZES, embedSource) {
   const parts = [];
-  parts.push(svgOpenTag(diagram.width, diagram.height, colors, transparent));
+  parts.push(
+    withDataSrc(
+      svgOpenTag(diagram.width, diagram.height, colors, transparent),
+      embedSource
+    )
+  );
   parts.push(buildStyleBlock(font, true));
   parts.push("<defs>");
   parts.push(relationshipMarkerDefs());
@@ -10987,9 +11033,14 @@ var ER_FONT = {
   keySize: 9,
   keyWeight: 600
 };
-function renderErSvg(diagram, colors, font = "Inter", transparent = false, fontSizes = FONT_SIZES) {
+function renderErSvg(diagram, colors, font = "Inter", transparent = false, fontSizes = FONT_SIZES, embedSource) {
   const parts = [];
-  parts.push(svgOpenTag(diagram.width, diagram.height, colors, transparent));
+  parts.push(
+    withDataSrc(
+      svgOpenTag(diagram.width, diagram.height, colors, transparent),
+      embedSource
+    )
+  );
   parts.push(buildStyleBlock(font, true));
   parts.push("<defs>");
   parts.push("</defs>");
@@ -11721,19 +11772,20 @@ var TIP = {
   minY: 4,
   pointerSize: 6
 };
-function renderXYChartSvg(chart, colors, font = "Inter", transparent = false, interactive = false) {
+function renderXYChartSvg(chart, colors, font = "Inter", transparent = false, interactive = false, embedSource) {
   const parts = [];
   const maxColorIdx = Math.max(
     0,
     ...chart.bars.map((b) => b.colorIndex),
     ...chart.lines.map((l) => l.colorIndex)
   );
-  const svgTag = svgOpenTag(
-    chart.width,
-    chart.height,
-    colors,
-    transparent
-  ).replace("<svg ", `<svg data-xychart-colors="${maxColorIdx}" `);
+  const svgTag = withDataSrc(
+    svgOpenTag(chart.width, chart.height, colors, transparent).replace(
+      "<svg ",
+      `<svg data-xychart-colors="${maxColorIdx}" `
+    ),
+    embedSource
+  );
   parts.push(svgTag);
   parts.push(buildStyleBlock(font, false));
   const maxLinePoints = Math.max(...chart.lines.map((l) => l.points.length), 0);
@@ -12148,28 +12200,51 @@ function buildColors(options) {
   };
 }
 function renderMermaidSVG(text, options = {}) {
+  const originalText = text;
   text = (0, import_entities.decodeXML)(text);
   const colors = buildColors(options);
   const font = options.font ?? "Inter";
   const transparent = options.transparent ?? false;
   const fontSizes = resolveFontSizes(options.fontSizes);
   const diagramType = detectDiagramType(text);
+  const embedSource = options.embedSource ? originalText : void 0;
   const lines = splitStatements(text);
   switch (diagramType) {
     case "sequence": {
       const diagram = parseSequenceDiagram(lines);
       const positioned = layoutSequenceDiagram(diagram, options);
-      return renderSequenceSvg(positioned, colors, font, transparent, fontSizes);
+      return renderSequenceSvg(
+        positioned,
+        colors,
+        font,
+        transparent,
+        fontSizes,
+        embedSource
+      );
     }
     case "class": {
       const diagram = parseClassDiagram(lines);
       const positioned = layoutClassDiagramSync(diagram, options);
-      return renderClassSvg(positioned, colors, font, transparent, fontSizes);
+      return renderClassSvg(
+        positioned,
+        colors,
+        font,
+        transparent,
+        fontSizes,
+        embedSource
+      );
     }
     case "er": {
       const diagram = parseErDiagram(lines);
       const positioned = layoutErDiagramSync(diagram, options);
-      return renderErSvg(positioned, colors, font, transparent, fontSizes);
+      return renderErSvg(
+        positioned,
+        colors,
+        font,
+        transparent,
+        fontSizes,
+        embedSource
+      );
     }
     case "xychart": {
       const chart = parseXYChart(lines);
@@ -12179,7 +12254,8 @@ function renderMermaidSVG(text, options = {}) {
         colors,
         font,
         transparent,
-        options.interactive ?? false
+        options.interactive ?? false,
+        embedSource
       );
     }
     case "flowchart":
@@ -12193,7 +12269,8 @@ function renderMermaidSVG(text, options = {}) {
         font,
         transparent,
         fontSizes,
-        effective.curve ?? "linear"
+        effective.curve ?? "linear",
+        embedSource
       );
     }
   }