npm - react-super-mermaid - Versions diffs - 0.1.0 → 0.3.1 - Mend

react-super-mermaid 0.1.0 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/index.js CHANGED Viewed

@@ -106,6 +106,7 @@ var RSM_CSS = `
   --rsm-hover: #f3f4f6;
   --rsm-surface: #ffffff;
   --rsm-canvas-bg: transparent;
+  --rsm-grid-dot: rgba(0, 0, 0, 0.08);
   --rsm-radius: 8px;
   display: flex;
   flex-direction: column;
@@ -243,7 +244,91 @@ var RSM_CSS = `
   --rsm-accent: #60a5fa;
   --rsm-hover: #1f2937;
   --rsm-surface: #111827;
+  --rsm-grid-dot: rgba(255, 255, 255, 0.10);
 }
+/* \u2500\u2500 \u80CC\u666F\u6A21\u5F0F \u2500\u2500 \u900F\u660E(\u9810\u8A2D,\u8DDF\u96A8\u9801\u9762) / \u7D14\u8272(surface) / \u9EDE\u9663\u683C\u7DDA\u3002 */
+.rsm-root.rsm-bg-solid .rsm-canvas { background: var(--rsm-surface); }
+.rsm-root.rsm-bg-grid .rsm-canvas {
+  background-color: var(--rsm-surface);
+  background-image: radial-gradient(var(--rsm-grid-dot) 1px, transparent 1px);
+  background-size: 18px 18px;
+  background-position: -9px -9px;
+}
+/* \u2500\u2500 \u5168\u87A2\u5E55\u8DF3\u7A97 \u2500\u2500 position:fixed \u8986\u84CB\u6574\u500B\u8996\u7A97,RWD \u53CB\u5584\u3002 */
+.rsm-root.rsm-fullscreen {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  width: 100dvw;
+  height: 100vh;
+  height: 100dvh;
+  max-width: 100vw;
+  max-height: 100dvh;
+  margin: 0;
+  z-index: 2147483000;
+  border: 0;
+  border-radius: 0;
+  animation: rsm-fs-in 0.16s ease-out;
+}
+@keyframes rsm-fs-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+/* \u5168\u87A2\u5E55\u53F3\u4E0A\u89D2\u7684\u96E2\u958B\u9215(toolbar \u96B1\u85CF\u6642\u4E5F\u80FD\u95DC\u9589)\u3002 */
+.rsm-fs-close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 5;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  font-size: 16px;
+  line-height: 1;
+  border: 1px solid var(--rsm-border);
+  border-radius: 8px;
+  background: var(--rsm-surface);
+  color: var(--rsm-fg);
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
+  transition: background 0.12s ease, color 0.12s ease;
+}
+.rsm-fs-close:hover { background: var(--rsm-hover); }
+/* \u2500\u2500 RWD \u2500\u2500 \u5C0F\u87A2\u5E55\u6536\u7DCA toolbar\u3001\u7E2E\u77ED\u641C\u5C0B\u6846,\u907F\u514D\u63DB\u884C\u64E0\u58D3\u756B\u5E03\u3002 */
+@media (max-width: 640px) {
+  .rsm-toolbar { gap: 6px; padding: 6px 8px; }
+  .rsm-btn { padding: 4px 8px; font-size: 12px; }
+  .rsm-label { font-size: 11px; }
+  .rsm-select { padding: 3px 6px; font-size: 12px; }
+  .rsm-zoom > button { padding: 4px 8px; font-size: 12px; }
+  .rsm-input { flex-basis: 150px; }
+}
+/* \u2500\u2500 \u6A19\u7C64\u5B57\u91CD(\u91CF\u6E2C\u968E\u6BB5\u5C31\u751F\u6548)\u2500\u2500
+ * boostLegibility \u5728\u300C\u6E32\u67D3\u5F8C\u300D\u624D\u628A\u6A19\u7C64\u5B57\u91CD\u52A0\u5230 600/700,\u4F46 mermaid \u662F\u5728\u300C\u6E32\u67D3\u4E2D\u300D
+ * \u91CF\u6E2C\u6587\u5B57\u5BEC\u5EA6\u4F86\u6C7A\u5B9A foreignObject / \u7BC0\u9EDE\u5916\u6846\u7684\u5927\u5C0F\u3002\u82E5\u53EA\u5728\u4E8B\u5F8C\u52A0\u7C97,\u7C97\u9AD4\u5B57\u6703\u6BD4\u5DF2\u91CF\u597D\u7684
+ * \u6846\u66F4\u5BEC \u2192 foreignObject \u628A\u5C3E\u5B57\u88C1\u6389(\u5FC3\u667A\u5716\u7BC0\u9EDE\u300Creact-super-mermaid\u300D\u5C3E\u5DF4\u7684 d \u4E0D\u898B\u5C31\u662F\u9019\u500B)\u3002
+ * \u89E3\u6CD5:\u628A\u540C\u6A23\u7684\u5B57\u91CD\u7528 CSS \u63D0\u524D\u5BA3\u544A,\u4E14\u300C\u4E0D\u300Dscope \u5728 .rsm-root \u4E4B\u4E0B,\u800C\u662F scope \u5728 mermaid
+ * \u7684\u6E32\u67D3 id(svg[id^="rsm-"])\u2014\u2014\u56E0\u70BA\u91CF\u6E2C\u6642\u90A3\u9846\u66AB\u6642\u7684 svg \u9084\u5728 <body> \u4E0B\u3001\u5C1A\u672A\u639B\u9032 .rsm-root\u3002
+ * \u9019\u6A23 mermaid \u91CF\u5230\u7684\u5C31\u662F\u7C97\u9AD4\u5BEC\u5EA6,\u6846\u6703\u525B\u597D\u5BB9\u7D0D,\u4E8B\u5F8C boostLegibility \u8A2D\u540C\u503C\u4E0D\u518D\u6490\u7834\u3002
+ * \u53EA scope \u6211\u5011\u81EA\u5DF1\u6E32\u67D3\u51FA\u7684 svg,\u6545\u4E0D\u6703\u6C61\u67D3 host \u9801\u9762\u5176\u5B83 mermaid\u3002 */
+svg[id^="rsm-"] g.node text,
+svg[id^="rsm-"] g.node tspan,
+svg[id^="rsm-"] g.node .nodeLabel,
+svg[id^="rsm-"] g.mindmap-node text,
+svg[id^="rsm-"] g.mindmap-node .nodeLabel,
+svg[id^="rsm-"] g[class*="timeline-node"] text,
+svg[id^="rsm-"] text.actor { font-weight: 600 !important; }
+svg[id^="rsm-"] .cluster-label text,
+svg[id^="rsm-"] .cluster-label .nodeLabel,
+svg[id^="rsm-"] text.pieTitleText { font-weight: 700 !important; }
 `;
 // src/core/ensure-styles.ts
@@ -280,16 +365,88 @@ var NODE_PALETTE = [
   // violet
 ];
 var CLUSTER_PALETTE = [
-  { fill: "rgba(59, 130, 246, 0.07)", stroke: "#93C5FD" },
-  { fill: "rgba(34, 197, 94, 0.07)", stroke: "#86EFAC" },
-  { fill: "rgba(249, 115, 22, 0.07)", stroke: "#FDBA74" },
-  { fill: "rgba(168, 85, 247, 0.07)", stroke: "#D8B4FE" },
-  { fill: "rgba(6, 182, 212, 0.07)", stroke: "#67E8F9" },
-  { fill: "rgba(239, 68, 68, 0.07)", stroke: "#FCA5A5" }
+  { fill: "rgba(59, 130, 246, 0.16)", stroke: "#3B82F6" },
+  // blue
+  { fill: "rgba(34, 197, 94, 0.16)", stroke: "#22C55E" },
+  // green
+  { fill: "rgba(249, 115, 22, 0.16)", stroke: "#F97316" },
+  // orange
+  { fill: "rgba(168, 85, 247, 0.16)", stroke: "#A855F7" },
+  // purple
+  { fill: "rgba(239, 68, 68, 0.16)", stroke: "#EF4444" },
+  // red
+  { fill: "rgba(6, 182, 212, 0.16)", stroke: "#06B6D4" },
+  // cyan
+  { fill: "rgba(234, 179, 8, 0.16)", stroke: "#EAB308" },
+  // yellow
+  { fill: "rgba(139, 92, 246, 0.16)", stroke: "#8B5CF6" }
+  // violet
+];
+var PIE_PALETTE = [
+  "#3B82F6",
+  // blue
+  "#22C55E",
+  // green
+  "#F59E0B",
+  // amber
+  "#A855F7",
+  // purple
+  "#EF4444",
+  // red
+  "#06B6D4",
+  // cyan
+  "#EC4899",
+  // pink
+  "#84CC16",
+  // lime
+  "#F97316",
+  // orange
+  "#14B8A6",
+  // teal
+  "#6366F1",
+  // indigo
+  "#EAB308"
+  // yellow
 ];
 var NODE_TEXT = "#1F2937";
 var SHADOW_FILTER_ID = "rsm-soft-shadow";
 var SVG_NS = "http://www.w3.org/2000/svg";
+function resolveSvg(root) {
+  if (root instanceof Element && root.tagName.toLowerCase() === "svg") {
+    return root;
+  }
+  return root.querySelector("svg");
+}
+function canonColor(input) {
+  const s = (input || "").trim();
+  const hex = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(s);
+  if (hex) {
+    let h = hex[1];
+    if (h.length === 3) {
+      h = h.split("").map((c) => c + c).join("");
+    }
+    const n = parseInt(h, 16);
+    return `${n >> 16 & 255},${n >> 8 & 255},${n & 255}`;
+  }
+  const rgb = /rgba?\(([^)]+)\)/i.exec(s);
+  if (rgb) {
+    const p = rgb[1].split(",").map((x) => Math.round(parseFloat(x)));
+    return `${p[0]},${p[1]},${p[2]}`;
+  }
+  return s.toLowerCase();
+}
+function readableTextOn(color) {
+  const m = /^#?([0-9a-f]{6})$/i.exec(color.trim());
+  if (!m) {
+    return "#FFFFFF";
+  }
+  const n = parseInt(m[1], 16);
+  const r = n >> 16 & 255;
+  const g = n >> 8 & 255;
+  const b = n & 255;
+  const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return lum > 0.62 ? "#1F2937" : "#FFFFFF";
+}
 function ensureShadowFilter(svg) {
   if (svg.querySelector(`#${SHADOW_FILTER_ID}`)) {
     return;
@@ -395,6 +552,17 @@ function styleEdgeLabels(svg) {
     rect.setAttribute("ry", "4");
   }
 }
+function styleLabelText(svg, dark) {
+  const color = dark ? "#E2E8F0" : NODE_TEXT;
+  for (const t of Array.from(
+    svg.querySelectorAll("text.messageText, .edgeLabel text, .edgeLabel tspan")
+  )) {
+    t.style.fill = color;
+  }
+  for (const t of Array.from(svg.querySelectorAll(".edgeLabel span, .edgeLabel p"))) {
+    t.style.color = color;
+  }
+}
 function colorizeLegacyEr(svg) {
   const erGroups = [];
   for (const rect of Array.from(svg.querySelectorAll("rect.er.entityBox"))) {
@@ -506,12 +674,194 @@ function colorizeSequence(svg, dark) {
     text.style.fill = dark ? "#E2E8F0" : NODE_TEXT;
   }
 }
+function stylePie(svg, dark) {
+  const slices = Array.from(svg.querySelectorAll("path.pieCircle"));
+  const swatches = Array.from(svg.querySelectorAll("g.legend rect"));
+  if (slices.length === 0 && swatches.length === 0) {
+    return;
+  }
+  const remap = /* @__PURE__ */ new Map();
+  let next = 0;
+  const newColorFor = (old) => {
+    const key = canonColor(old) || `#slot-${next}`;
+    let c = remap.get(key);
+    if (!c) {
+      c = PIE_PALETTE[next % PIE_PALETTE.length];
+      remap.set(key, c);
+      next += 1;
+    }
+    return c;
+  };
+  for (const slice of slices) {
+    const old = slice.style.fill || slice.getAttribute("fill") || "";
+    const c = newColorFor(old);
+    slice.style.fill = c;
+    slice.style.opacity = "1";
+    slice.style.stroke = dark ? "#0F172A" : "#FFFFFF";
+    slice.style.strokeWidth = "2px";
+    slice.style.strokeLinejoin = "round";
+  }
+  for (const sw of swatches) {
+    const old = sw.style.fill || sw.getAttribute("fill") || "";
+    const c = newColorFor(old);
+    sw.style.fill = c;
+    sw.style.stroke = c;
+    sw.setAttribute("rx", "3");
+    sw.setAttribute("ry", "3");
+  }
+  Array.from(svg.querySelectorAll("text.slice")).forEach((label, i) => {
+    const slice = slices[i];
+    const c = slice ? slice.style.fill || PIE_PALETTE[0] : PIE_PALETTE[0];
+    label.style.fill = readableTextOn(c);
+    label.style.fontWeight = "600";
+  });
+  for (const title of Array.from(svg.querySelectorAll("text.pieTitleText"))) {
+    title.style.fontWeight = "700";
+    title.style.fill = dark ? "#E2E8F0" : "#1F2937";
+  }
+  for (const t of Array.from(svg.querySelectorAll("g.legend text"))) {
+    t.style.fill = dark ? "#E2E8F0" : "#1F2937";
+  }
+  for (const oc of Array.from(svg.querySelectorAll("circle.pieOuterCircle"))) {
+    oc.style.stroke = dark ? "#334155" : "#CBD5E1";
+  }
+}
+function styleGantt(svg, dark) {
+  const tasks = Array.from(svg.querySelectorAll("rect.task"));
+  if (tasks.length === 0) {
+    return;
+  }
+  for (const task of tasks) {
+    const cls = task.getAttribute("class") ?? "";
+    if (/\b(done|active|crit|milestone)\d*\b/.test(cls)) {
+      continue;
+    }
+    const m = cls.match(/task(\d+)/);
+    if (!m) {
+      continue;
+    }
+    const entry = NODE_PALETTE[Number(m[1]) % NODE_PALETTE.length];
+    task.style.fill = entry.fill;
+    task.style.stroke = entry.stroke;
+    task.setAttribute("rx", "4");
+    task.setAttribute("ry", "4");
+  }
+  Array.from(svg.querySelectorAll("rect.section")).forEach((band) => {
+    const m = (band.getAttribute("class") ?? "").match(/section(\d+)/);
+    if (m) {
+      band.style.fill = CLUSTER_PALETTE[Number(m[1]) % CLUSTER_PALETTE.length].fill;
+    }
+  });
+  for (const inBar of Array.from(svg.querySelectorAll("text.taskText"))) {
+    if (!/Outside/.test(inBar.getAttribute("class") ?? "")) {
+      inBar.style.fill = NODE_TEXT;
+    }
+  }
+  for (const tick of Array.from(svg.querySelectorAll("g.grid g.tick line"))) {
+    tick.style.stroke = dark ? "#334155" : "#E2E8F0";
+  }
+}
+function styleTimeline(svg) {
+  const nodes = Array.from(svg.querySelectorAll('g[class*="timeline-node"]'));
+  nodes.forEach((node, i) => {
+    const m = (node.getAttribute("class") ?? "").match(/section-(-?\d+)/);
+    const section = m ? Number(m[1]) : i;
+    const entry = section < 0 ? NODE_PALETTE[7] : NODE_PALETTE[section % NODE_PALETTE.length];
+    const backgrounds = Array.from(node.querySelectorAll(".node-bkg"));
+    if (backgrounds.length > 0) {
+      for (const bkg of backgrounds) {
+        bkg.style.fill = entry.fill;
+        bkg.style.stroke = entry.stroke;
+        bkg.style.strokeWidth = "1.4px";
+      }
+    } else {
+      paintShapes(node, entry);
+    }
+    darkenNodeText(node);
+  });
+}
+function styleMindmap(svg) {
+  const nodes = Array.from(svg.querySelectorAll("g.mindmap-node"));
+  if (nodes.length === 0) {
+    return;
+  }
+  for (const node of nodes) {
+    const m = (node.getAttribute("class") ?? "").match(/section-(-?\d+)/);
+    const section = m ? Number(m[1]) : 0;
+    const entry = section < 0 ? NODE_PALETTE[7] : NODE_PALETTE[section % NODE_PALETTE.length];
+    for (const shape of Array.from(
+      node.querySelectorAll("path, rect, circle, ellipse")
+    )) {
+      if (shape.closest("g.children")) {
+        continue;
+      }
+      shape.style.fill = entry.fill;
+      shape.style.stroke = entry.stroke;
+      shape.style.strokeWidth = "1.4px";
+    }
+    darkenNodeText(node);
+  }
+  for (const edge of Array.from(svg.querySelectorAll('path[class*="edge"]'))) {
+    const m = (edge.getAttribute("class") ?? "").match(/section-edge-(-?\d+)/);
+    if (m) {
+      const section = Number(m[1]);
+      const entry = section < 0 ? NODE_PALETTE[7] : NODE_PALETTE[section % NODE_PALETTE.length];
+      edge.style.stroke = entry.stroke;
+      edge.style.strokeWidth = "2px";
+      edge.style.opacity = "0.6";
+      edge.style.fill = "none";
+    }
+  }
+}
+function styleJourney(svg) {
+  const tasks = Array.from(
+    svg.querySelectorAll('circle[class*="task-type"], rect[class*="task-type"]')
+  );
+  tasks.forEach((shape) => {
+    const m = (shape.getAttribute("class") ?? "").match(/task-type-(\d+)/);
+    if (m) {
+      const entry = NODE_PALETTE[Number(m[1]) % NODE_PALETTE.length];
+      shape.style.fill = entry.fill;
+      shape.style.stroke = entry.stroke;
+    }
+  });
+  Array.from(svg.querySelectorAll('rect[class*="section-type"]')).forEach((rect) => {
+    const m = (rect.getAttribute("class") ?? "").match(/section-type-(\d+)/);
+    if (m) {
+      const entry = CLUSTER_PALETTE[Number(m[1]) % CLUSTER_PALETTE.length];
+      rect.style.fill = entry.fill;
+      rect.style.stroke = entry.stroke;
+    }
+  });
+}
+function boostLegibility(root) {
+  const svg = resolveSvg(root);
+  if (!svg) {
+    return;
+  }
+  for (const el of Array.from(
+    svg.querySelectorAll(
+      'g.node text, g.node tspan, g.mindmap-node text, g[class*="timeline-node"] text, text.actor'
+    )
+  )) {
+    el.style.fontWeight = "600";
+  }
+  for (const el of Array.from(svg.querySelectorAll(".nodeLabel, g.node span, g.node p"))) {
+    el.style.fontWeight = "600";
+  }
+  for (const el of Array.from(svg.querySelectorAll("text"))) {
+    if (!el.style.fontWeight) {
+      el.style.fontWeight = "500";
+    }
+  }
+}
 function colorizeDiagram(root, opts = {}) {
-  const svg = root instanceof Element && root.tagName.toLowerCase() === "svg" ? root : root.querySelector("svg");
+  const svg = resolveSvg(root);
   if (!svg) {
     return;
   }
   ensureShadowFilter(svg);
+  const dark = opts.dark === true;
   Array.from(svg.querySelectorAll("g.node")).forEach((node, i) => {
     paintShapes(node, NODE_PALETTE[i % NODE_PALETTE.length]);
     darkenNodeText(node);
@@ -521,14 +871,41 @@ function colorizeDiagram(root, opts = {}) {
     for (const rect of Array.from(cluster.querySelectorAll(":scope > rect"))) {
       rect.style.fill = entry.fill;
       rect.style.stroke = entry.stroke;
-      rect.style.strokeWidth = "1.2px";
+      rect.style.strokeWidth = "1.5px";
       roundRect(rect, 10);
     }
+    const label = cluster.querySelector(":scope > .cluster-label");
+    if (label) {
+      for (const el of Array.from(label.querySelectorAll("text, tspan"))) {
+        el.style.fill = entry.stroke;
+        el.style.fontWeight = "700";
+      }
+      for (const el of Array.from(label.querySelectorAll(".nodeLabel, span, p"))) {
+        el.style.color = entry.stroke;
+        el.style.fontWeight = "700";
+      }
+      for (const lr of Array.from(label.querySelectorAll("rect"))) {
+        lr.style.fill = entry.fill;
+      }
+    }
   });
   colorizeLegacyEr(svg);
-  colorizeSequence(svg, opts.dark === true);
-  styleEdges(svg, opts.dark === true);
+  colorizeSequence(svg, dark);
+  styleEdges(svg, dark);
   styleEdgeLabels(svg);
+  styleLabelText(svg, dark);
+  const kind = svg.getAttribute("aria-roledescription") ?? "";
+  if (kind === "pie" || kind === "pieChart") {
+    stylePie(svg, dark);
+  } else if (kind === "gantt") {
+    styleGantt(svg, dark);
+  } else if (kind === "timeline") {
+    styleTimeline(svg);
+  } else if (kind === "mindmap") {
+    styleMindmap(svg);
+  } else if (kind === "journey") {
+    styleJourney(svg);
+  }
 }
 // src/core/themes/sketch.ts
@@ -812,6 +1189,7 @@ function applyPostProcess(svg, postProcess, opts) {
   } else if (postProcess === "sketch") {
     sketchifyDiagram(svg, { dark: opts.dark, seed: opts.seed });
   }
+  boostLegibility(svg);
 }
 async function renderDiagram(opts) {
   assertBrowser("renderDiagram");
@@ -1310,6 +1688,11 @@ function useMermaidViewer(opts) {
     getSvg
   };
 }
+var BACKGROUND_LABELS = {
+  transparent: { icon: "\u25A6", label: "\u900F\u660E" },
+  solid: { icon: "\u25FB", label: "\u7D14\u8272" },
+  grid: { icon: "\u229E", label: "\u683C\u7DDA" }
+};
 var DEFAULT_THEME_OPTIONS = [
   { value: "colorful", label: "Colorful" },
   { value: "sketch", label: "Excalidraw" },
@@ -1333,6 +1716,20 @@ function Toolbar(props) {
         }
       )
     ] }),
+    props.backgroundEnabled ? /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "rsm-btn",
+        onClick: props.onCycleBackground,
+        title: "\u5207\u63DB\u756B\u5E03\u80CC\u666F\uFF08\u900F\u660E / \u7D14\u8272 / \u683C\u7DDA\uFF0CB\uFF09",
+        children: [
+          BACKGROUND_LABELS[props.background].icon,
+          " \u80CC\u666F\uFF1A",
+          BACKGROUND_LABELS[props.background].label
+        ]
+      }
+    ) : null,
     /* @__PURE__ */ jsx("div", { className: "rsm-toolbar-spacer" }),
     props.searchEnabled ? /* @__PURE__ */ jsx(
       "button",
@@ -1386,9 +1783,21 @@ function Toolbar(props) {
       ),
       /* @__PURE__ */ jsx("button", { type: "button", onClick: props.onZoomIn, title: "\u653E\u5927\uFF08+\uFF09", children: "\uFF0B" }),
       /* @__PURE__ */ jsx("button", { type: "button", onClick: props.onReset, title: "\u7B26\u5408\u8996\u7A97\uFF080\uFF09", children: "\u2922" })
-    ] })
+    ] }),
+    props.fullscreenEnabled ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "rsm-btn rsm-btn-fullscreen",
+        "aria-pressed": props.fullscreen ? "true" : "false",
+        onClick: props.onToggleFullscreen,
+        title: props.fullscreen ? "\u96E2\u958B\u5168\u87A2\u5E55\uFF08Esc\uFF09" : "\u5168\u87A2\u5E55\u6AA2\u8996\uFF08F\uFF09",
+        children: props.fullscreen ? "\u2715 \u96E2\u958B\u5168\u87A2\u5E55" : "\u26F6 \u5168\u87A2\u5E55"
+      }
+    ) : null
   ] });
 }
+var BACKGROUND_CYCLE = ["transparent", "solid", "grid"];
 function usePrefersDark(explicit) {
   const [autoDark, setAutoDark] = useState(false);
   useEffect(() => {
@@ -1412,6 +1821,9 @@ var MermaidViewer = forwardRef(
       panZoom = true,
       search: searchEnabled = true,
       exportable = true,
+      background: backgroundEnabled = true,
+      fullscreen: fullscreenEnabled = true,
+      onFullscreenChange,
       keyboard = true,
       seed = 42,
       fontUrl,
@@ -1435,6 +1847,15 @@ var MermaidViewer = forwardRef(
     const [query, setQuery] = useState("");
     const [matchInfo, setMatchInfo] = useState({ current: 0, total: 0 });
     const [exporting, setExporting] = useState(false);
+    const [background, setBackgroundState] = useState(
+      props.backgroundMode ?? "transparent"
+    );
+    useEffect(() => {
+      if (props.backgroundMode) {
+        setBackgroundState(props.backgroundMode);
+      }
+    }, [props.backgroundMode]);
+    const [isFullscreen, setIsFullscreen] = useState(false);
     const rootRef = useRef(null);
     const searchInputRef = useRef(null);
     const vm = useMermaidViewer({
@@ -1497,6 +1918,85 @@ var MermaidViewer = forwardRef(
         setExporting(false);
       }
     }, [vm, onError]);
+    const cycleBackground = useCallback(() => {
+      setBackgroundState((prev) => {
+        const i = BACKGROUND_CYCLE.indexOf(prev);
+        return BACKGROUND_CYCLE[(i + 1) % BACKGROUND_CYCLE.length];
+      });
+    }, []);
+    const setBackground = useCallback((mode) => {
+      setBackgroundState(mode);
+    }, []);
+    const enterFullscreen = useCallback(() => {
+      setIsFullscreen((prev) => {
+        if (!prev) {
+          onFullscreenChange?.(true);
+        }
+        return true;
+      });
+    }, [onFullscreenChange]);
+    const exitFullscreen = useCallback(() => {
+      setIsFullscreen((prev) => {
+        if (prev) {
+          onFullscreenChange?.(false);
+        }
+        return false;
+      });
+    }, [onFullscreenChange]);
+    const toggleFullscreen = useCallback(() => {
+      setIsFullscreen((prev) => {
+        onFullscreenChange?.(!prev);
+        return !prev;
+      });
+    }, [onFullscreenChange]);
+    useEffect(() => {
+      if (!isFullscreen) {
+        return void 0;
+      }
+      const body = typeof document !== "undefined" ? document.body : null;
+      const prevOverflow = body?.style.overflow ?? "";
+      if (body) {
+        body.style.overflow = "hidden";
+      }
+      const onWinKey = (e) => {
+        if (e.key === "Escape") {
+          e.preventDefault();
+          exitFullscreen();
+        }
+      };
+      window.addEventListener("keydown", onWinKey);
+      const fitId = window.setTimeout(() => vm.reset(), 60);
+      let resizeId = 0;
+      const onResize = () => {
+        window.clearTimeout(resizeId);
+        resizeId = window.setTimeout(() => vm.reset(), 150);
+      };
+      window.addEventListener("resize", onResize);
+      window.addEventListener("orientationchange", onResize);
+      rootRef.current?.focus();
+      return () => {
+        window.removeEventListener("keydown", onWinKey);
+        window.removeEventListener("resize", onResize);
+        window.removeEventListener("orientationchange", onResize);
+        window.clearTimeout(fitId);
+        window.clearTimeout(resizeId);
+        if (body) {
+          body.style.overflow = prevOverflow;
+        }
+      };
+    }, [isFullscreen, exitFullscreen]);
+    const fsMountedRef = useRef(false);
+    useEffect(() => {
+      if (!fsMountedRef.current) {
+        fsMountedRef.current = true;
+        return void 0;
+      }
+      if (isFullscreen) {
+        return void 0;
+      }
+      const id = window.setTimeout(() => vm.reset(), 60);
+      return () => window.clearTimeout(id);
+    }, [isFullscreen]);
     useEffect(() => {
       if (!keyboard) {
         return void 0;
@@ -1522,6 +2022,11 @@ var MermaidViewer = forwardRef(
           closeSearch();
           return;
         }
+        if (e.key === "Escape" && isFullscreen) {
+          e.preventDefault();
+          exitFullscreen();
+          return;
+        }
         if (typing) {
           return;
         }
@@ -1535,11 +2040,29 @@ var MermaidViewer = forwardRef(
           vm.actualSize();
         } else if (e.key === "w" || e.key === "W") {
           vm.fit();
+        } else if (fullscreenEnabled && (e.key === "f" || e.key === "F")) {
+          e.preventDefault();
+          toggleFullscreen();
+        } else if (backgroundEnabled && (e.key === "b" || e.key === "B")) {
+          e.preventDefault();
+          cycleBackground();
         }
       };
       root.addEventListener("keydown", onKey);
       return () => root.removeEventListener("keydown", onKey);
-    }, [keyboard, searchOpen, openSearch, closeSearch, vm]);
+    }, [
+      keyboard,
+      searchOpen,
+      openSearch,
+      closeSearch,
+      vm,
+      isFullscreen,
+      exitFullscreen,
+      toggleFullscreen,
+      cycleBackground,
+      fullscreenEnabled,
+      backgroundEnabled
+    ]);
     useImperativeHandle(
       ref,
       () => ({
@@ -1557,9 +2080,25 @@ var MermaidViewer = forwardRef(
         exportPng: vm.exportPng,
         downloadSvg: vm.downloadSvg,
         downloadPng: vm.downloadPng,
-        getSvg: vm.getSvg
+        getSvg: vm.getSvg,
+        enterFullscreen,
+        exitFullscreen,
+        toggleFullscreen,
+        isFullscreen: () => isFullscreen,
+        setBackground,
+        cycleBackground,
+        getBackground: () => background
       }),
-      [vm]
+      [
+        vm,
+        enterFullscreen,
+        exitFullscreen,
+        toggleFullscreen,
+        isFullscreen,
+        setBackground,
+        cycleBackground,
+        background
+      ]
     );
     let countText = "";
     if (matchInfo.total > 0) {
@@ -1567,7 +2106,13 @@ var MermaidViewer = forwardRef(
     } else if (query.trim()) {
       countText = "0";
     }
-    const rootClassName = ["rsm-root", dark ? "rsm-dark" : "", className ?? ""].filter(Boolean).join(" ");
+    const rootClassName = [
+      "rsm-root",
+      dark ? "rsm-dark" : "",
+      `rsm-bg-${background}`,
+      isFullscreen ? "rsm-fullscreen" : "",
+      className ?? ""
+    ].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -1593,7 +2138,13 @@ var MermaidViewer = forwardRef(
               exportEnabled: exportable,
               exporting,
               onExportSvg: exportSvg,
-              onExportPng: exportPng
+              onExportPng: exportPng,
+              backgroundEnabled,
+              background,
+              onCycleBackground: cycleBackground,
+              fullscreenEnabled,
+              fullscreen: isFullscreen,
+              onToggleFullscreen: toggleFullscreen
             }
           ) : null,
           toolbar && searchEnabled && searchOpen ? /* @__PURE__ */ jsxs("div", { className: "rsm-searchbar", children: [
@@ -1633,6 +2184,17 @@ var MermaidViewer = forwardRef(
               "\u5716\u8868\u8F09\u5165\u5931\u6557\uFF1A",
               vm.error
             ] }) : null,
+            isFullscreen ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "rsm-fs-close",
+                onClick: exitFullscreen,
+                title: "\u96E2\u958B\u5168\u87A2\u5E55\uFF08Esc\uFF09",
+                "aria-label": "\u96E2\u958B\u5168\u87A2\u5E55",
+                children: "\u2715"
+              }
+            ) : null,
             /* @__PURE__ */ jsx("div", { ref: vm.stageRef, className: "rsm-stage" })
           ] })
         ]
@@ -1646,6 +2208,6 @@ var MermaidDiagram = forwardRef(
   }
 );
-export { DEFAULT_THEME_OPTIONS, DEFAULT_VIRGIL_FONT_URL, MermaidDiagram, MermaidViewer, SKETCH_FONT, Toolbar, colorizeDiagram, downloadBlob, ensureSketchFont, ensureStyles, loadMermaid, loadSvgPanZoom, prepareSvgElement, prepareSvgString, rasterizeToBlob, renderDiagram, resolveTheme, serializeLiveSvg, sketchifyDiagram, svgBlob, useMermaidViewer };
+export { DEFAULT_THEME_OPTIONS, DEFAULT_VIRGIL_FONT_URL, MermaidDiagram, MermaidViewer, SKETCH_FONT, Toolbar, boostLegibility, colorizeDiagram, downloadBlob, ensureSketchFont, ensureStyles, loadMermaid, loadSvgPanZoom, prepareSvgElement, prepareSvgString, rasterizeToBlob, renderDiagram, resolveTheme, serializeLiveSvg, sketchifyDiagram, svgBlob, useMermaidViewer };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map