upd mermaid

index.html

@@ -1403,24 +1403,46 @@ L_t = α * CE(y_t) + (1-α) * τ^2 * KL( p_T(·|τ) || p_S(·) )</code></pre>
     }
 
     // ---------- Mermaid ----------
-    function renderMermaid() {
+    async function renderMermaid() {
       if (!window.mermaid) return;
-      const theme = document.documentElement.classList.contains('dark') ? 'dark' : 'default';
+    
+      const isDark = document.documentElement.classList.contains('dark');
       mermaid.initialize({
         startOnLoad: false,
-        theme,
+        theme: isDark ? 'dark' : 'default',
         securityLevel: 'loose',
         fontFamily: 'Inter, ui-sans-serif, system-ui',
         flowchart: { useMaxWidth: true, htmlLabels: true }
       });
-      // Re-render all mermaid blocks
-      const blocks = $$('.mermaid');
-      blocks.forEach((el, i) => {
-        const code = el.textContent;
-        const id = `mmd-${i}-${Date.now()}`;
-        el.innerHTML = '';
-        mermaid.render(id, code).then(({ svg }) => { el.innerHTML = svg; }).catch(() => {});
-      });
+    
+      const blocks = document.querySelectorAll('.mermaid');
+      let idx = 0;
+    
+      for (const el of blocks) {
+        // 1) Cache original source once (before SVG replacement)
+        if (!el.dataset.mermaidSrc) {
+          const src = (el.textContent || '').trim();
+          // If the element already contains svg (e.g., from previous render), don't overwrite cache
+          if (src.startsWith('<svg')) continue;
+          el.dataset.mermaidSrc = src;
+        }
+    
+        const code = (el.dataset.mermaidSrc || '').trim();
+        if (!code) continue;
+    
+        // 2) Render from cached source
+        const id = `mmd-${idx++}-${Date.now()}`;
+    
+        try {
+          const { svg, bindFunctions } = await mermaid.render(id, code);
+          el.innerHTML = svg;
+          if (typeof bindFunctions === 'function') bindFunctions(el);
+        } catch (err) {
+          console.error('Mermaid render error:', err, code);
+          const safe = String(err).replace(/</g, '&lt;').replace(/>/g, '&gt;');
+          el.innerHTML = `<div class="text-red-300 text-sm">Mermaid render failed: ${safe}</div>`;
+        }
+      }
     }
 
     // ---------- KaTeX ----------