feat: Mermaid 图表点击放大（lightbox）

docs/css/mermaid-zoom.css

@@ -0,0 +1,30 @@
+.mermaid-zoom-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: rgba(0, 0, 0, 0.75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: zoom-out;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.mermaid-zoom-overlay.active {
+  opacity: 1;
+}
+
+.mermaid-zoom-overlay svg {
+  max-width: 95vw;
+  max-height: 95vh;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  padding: 1.5rem;
+}
+
+/* 让 Mermaid 容器看起来可点击 */
+.mermaid {
+  cursor: zoom-in;
+}

docs/js/mermaid-zoom.js

@@ -0,0 +1,67 @@
+document.addEventListener('DOMContentLoaded', function () {
+  // 等待 Mermaid 渲染完成（Mermaid 在 DOMContentLoaded 之后异步渲染）
+  const observer = new MutationObserver(function () {
+    const svgs = document.querySelectorAll('.mermaid svg');
+    if (svgs.length > 0) {
+      observer.disconnect();
+      initMermaidZoom();
+    }
+  });
+
+  observer.observe(document.body, { childList: true, subtree: true });
+
+  // 也尝试立即初始化（以防 Mermaid 已经渲染完）
+  setTimeout(initMermaidZoom, 1000);
+});
+
+function initMermaidZoom() {
+  // 避免重复绑定
+  if (document.querySelector('.mermaid-zoom-overlay')) return;
+
+  document.querySelectorAll('.mermaid').forEach(function (el) {
+    if (el.dataset.zoomBound) return;
+    el.dataset.zoomBound = 'true';
+
+    el.addEventListener('click', function () {
+      const svg = el.querySelector('svg');
+      if (!svg) return;
+
+      const clone = svg.cloneNode(true);
+      // 让克隆的 SVG 自适应放大
+      clone.removeAttribute('width');
+      clone.removeAttribute('height');
+      clone.style.width = 'auto';
+      clone.style.height = 'auto';
+      clone.style.maxWidth = '95vw';
+      clone.style.maxHeight = '95vh';
+
+      const overlay = document.createElement('div');
+      overlay.className = 'mermaid-zoom-overlay';
+      overlay.appendChild(clone);
+
+      // 点击 overlay 关闭
+      overlay.addEventListener('click', function (e) {
+        if (e.target === overlay || e.target.closest('svg')) {
+          overlay.classList.remove('active');
+          setTimeout(function () { overlay.remove(); }, 200);
+        }
+      });
+
+      // ESC 关闭
+      function onKey(e) {
+        if (e.key === 'Escape') {
+          overlay.classList.remove('active');
+          setTimeout(function () { overlay.remove(); }, 200);
+          document.removeEventListener('keydown', onKey);
+        }
+      }
+      document.addEventListener('keydown', onKey);
+
+      document.body.appendChild(overlay);
+      // 触发动画
+      requestAnimationFrame(function () {
+        overlay.classList.add('active');
+      });
+    });
+  });
+}

mkdocs.yml

@@ -78,6 +78,12 @@ markdown_extensions:
       custom_checkbox: true
   - pymdownx.tilde
 
+extra_css:
+  - css/mermaid-zoom.css
+
+extra_javascript:
+  - js/mermaid-zoom.js
+
 nav:
   - 首页: index.md
   - 项目: