fix: 加载 mermaid.js 库 + 主动渲染 + 点击放大

docs/js/mermaid-zoom.js

@@ -1,10 +1,68 @@
-// Mermaid 图表点击放大 — 事件委托方案
+// Mermaid 渲染 + 点击放大
 ;(function () {
-  function openZoom(svgEl) {
-    if (!svgEl) return;
-    if (document.querySelector('.mermaid-zoom-overlay')) return;
+  // 等待 Mermaid 库加载
+  function waitForMermaid(cb, tries) {
+    tries = tries || 0;
+    if (typeof mermaid !== 'undefined') { cb(); return; }
+    if (tries > 50) { console.error('[mermaid-zoom] mermaid lib not found'); return; }
+    setTimeout(function () { waitForMermaid(cb, tries + 1); }, 200);
+  }
 
-    var clone = svgEl.cloneNode(true);
+  waitForMermaid(function () {
+    // 初始化 mermaid（如果还没初始化）
+    mermaid.initialize({
+      startOnLoad: false,
+      theme: 'default',
+      securityLevel: 'loose'
+    });
+
+    // 找所有未渲染的 .mermaid div，逐一渲染
+    var els = document.querySelectorAll('.mermaid');
+    var queue = [];
+    els.forEach(function (el, i) {
+      var src = el.textContent.trim();
+      if (!src || el.getAttribute('data-processed')) return;
+      queue.push({ el: el, id: 'mermaid-svg-' + i, src: src });
+    });
+
+    // 串行渲染，避免并发冲突
+    function renderNext() {
+      if (queue.length === 0) {
+        // 全部渲染完，绑定点击
+        bindClickZoom();
+        return;
+      }
+      var item = queue.shift();
+      mermaid.render(item.id, item.src).then(function (result) {
+        item.el.innerHTML = result.svg;
+        item.el.setAttribute('data-processed', 'true');
+        renderNext();
+      }).catch(function (err) {
+        console.warn('[mermaid-zoom] render failed for', item.id, err);
+        // 跳过失败的，继续渲染下一个
+        item.el.innerHTML = '<p style="color:#c62828;padding:8px">图表渲染失败</p>';
+        item.el.setAttribute('data-processed', 'true');
+        renderNext();
+      });
+    }
+
+    renderNext();
+  });
+
+  function bindClickZoom() {
+    document.addEventListener('click', function (e) {
+      var target = e.target.closest('.mermaid svg');
+      if (!target) {
+        // 也试 .mermaid 容器本身
+        var m = e.target.closest('.mermaid');
+        if (m) target = m.querySelector('svg');
+      }
+      if (!target) return;
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      var clone = target.cloneNode(true);
       clone.removeAttribute('width');
       clone.removeAttribute('height');
       clone.style.width = 'auto';
@@ -33,20 +91,6 @@
       requestAnimationFrame(function () {
         overlay.classList.add('active');
       });
-  }
-
-  // 事件委托：点击 article 内的 svg（Mermaid 渲染产出）
-  document.addEventListener('click', function (e) {
-    var svg = e.target.closest('article .mermaid svg, article .mermaid');
-    if (svg) {
-      // 如果点击的是 .mermaid 容器本身，找里面的 svg
-      if (svg.tagName !== 'svg') {
-        svg = svg.querySelector('svg');
-      }
-      if (!svg) return;
-      e.preventDefault();
-      e.stopPropagation();
-      openZoom(svg);
-    }
     });
+  }
 })();

mkdocs.yml

@@ -82,6 +82,7 @@ extra_css:
   - css/mermaid-zoom.css
 
 extra_javascript:
+  - https://unpkg.com/mermaid@10/dist/mermaid.min.js
   - js/mermaid-zoom.js
 
 nav: