loading improvements

public/script/external/marked-mermaid.js

@@ -24,33 +24,35 @@ function markedMermaid(options) {
         renderer(token) {
           const id = 'mermaid-' + Math.random().toString(36).substr(2, 9);
           
-          // Initialize Mermaid if not already done
-          if (typeof mermaid !== 'undefined' && !window.mermaidInitialized) {
-            mermaid.initialize({ 
-              startOnLoad: false,
-              theme: 'default',
-              securityLevel: 'loose'
-            });
-            window.mermaidInitialized = true;
-          }
-          
           // Create a div that will be processed by Mermaid
           const div = `<div class="mermaid" id="${id}">${token.text}</div>`;
-          
+
+          // Trigger lazy-load of mermaid if not yet loaded
+          if (typeof mermaid === 'undefined' && typeof window.loadMermaid === 'function') {
+            window.loadMermaid();
+          }
+
           // Schedule Mermaid rendering for after DOM insertion
           setTimeout(() => {
-            if (typeof mermaid !== 'undefined') {
-              try {
-                const element = document.getElementById(id);
-                if (element && !element.getAttribute('data-processed')) {
-                  mermaid.init(undefined, element);
-                  element.setAttribute('data-processed', 'true');
-                }
-              } catch (error) {
-                console.error('Mermaid rendering error:', error);
-              }
+            if (typeof mermaid === 'undefined') return;
+            if (!window.mermaidInitialized) {
+              mermaid.initialize({
+                startOnLoad: false,
+                theme: 'default',
+                securityLevel: 'loose'
+              });
+              window.mermaidInitialized = true;
             }
-          }, 0);
+            try {
+              const element = document.getElementById(id);
+              if (element && !element.getAttribute('data-processed')) {
+                mermaid.init(undefined, element);
+                element.setAttribute('data-processed', 'true');
+              }
+            } catch (error) {
+              console.error('Mermaid rendering error:', error);
+            }
+          }, 100);
           
           return div;
         }