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

docs/js/mermaid-zoom.js

@@ -1,52 +1,96 @@
-// Mermaid 图表点击放大 — 事件委托方案
+// Mermaid 渲染 + 点击放大
 ;(function () {
-  function openZoom(svgEl) {
-    if (!svgEl) return;
-    if (document.querySelector('.mermaid-zoom-overlay')) return;
-
-    var clone = svgEl.cloneNode(true);
-    clone.removeAttribute('width');
-    clone.removeAttribute('height');
-    clone.style.width = 'auto';
-    clone.style.height = 'auto';
-    clone.style.maxWidth = '95vw';
-    clone.style.maxHeight = '95vh';
-
-    var overlay = document.createElement('div');
-    overlay.className = 'mermaid-zoom-overlay';
-    overlay.appendChild(clone);
-
-    overlay.addEventListener('click', function () {
-      overlay.classList.remove('active');
-      setTimeout(function () { overlay.remove(); }, 200);
-    });
-
-    document.addEventListener('keydown', function handler(e) {
-      if (e.key === 'Escape') {
-        overlay.classList.remove('active');
-        setTimeout(function () { overlay.remove(); }, 200);
-        document.removeEventListener('keydown', handler);
-      }
-    });
-
-    document.body.appendChild(overlay);
-    requestAnimationFrame(function () {
-      overlay.classList.add('active');
-    });
+  // 等待 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);
   }
 
-  // 事件委托：点击 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');
+  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;
       }
-      if (!svg) 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();
-      openZoom(svg);
-    }
-  });
+
+      var clone = target.cloneNode(true);
+      clone.removeAttribute('width');
+      clone.removeAttribute('height');
+      clone.style.width = 'auto';
+      clone.style.height = 'auto';
+      clone.style.maxWidth = '95vw';
+      clone.style.maxHeight = '95vh';
+
+      var overlay = document.createElement('div');
+      overlay.className = 'mermaid-zoom-overlay';
+      overlay.appendChild(clone);
+
+      overlay.addEventListener('click', function () {
+        overlay.classList.remove('active');
+        setTimeout(function () { overlay.remove(); }, 200);
+      });
+
+      document.addEventListener('keydown', function handler(e) {
+        if (e.key === 'Escape') {
+          overlay.classList.remove('active');
+          setTimeout(function () { overlay.remove(); }, 200);
+          document.removeEventListener('keydown', handler);
+        }
+      });
+
+      document.body.appendChild(overlay);
+      requestAnimationFrame(function () {
+        overlay.classList.add('active');
+      });
+    });
+  }
 })();

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: