fix: Make processMermaidDiagrams globally accessible for fallback

- Made processMermaidDiagrams available on window object
- Fixed fallback script to use window.processMermaidDiagrams
- Added delay check for mermaid loading
- Ensures diagrams process correctly in all scenarios

Author: rayraycodes

docs_site/_layouts/default.html

@@ -769,10 +769,15 @@
       });
     }
 
-    // Function to process Mermaid diagrams
-    function processMermaidDiagrams() {
+    // Make processMermaidDiagrams available globally
+    window.processMermaidDiagrams = function() {
       console.log('Processing Mermaid diagrams...');
 
+      if (typeof mermaid === 'undefined') {
+        console.error('Mermaid not loaded yet');
+        return;
+      }
+      
       // Find all code blocks with mermaid language
       const mermaidBlocks = document.querySelectorAll('code.language-mermaid, pre code.language-mermaid, code[class*="mermaid"]');
 
@@ -844,13 +849,15 @@
           console.log('No Mermaid diagrams found to render');
         }
       }
-    }
+    };
 
     // Wait for everything to be ready
     function initMermaid() {
       // Wait a bit for Jekyll/Kramdown to finish processing
       setTimeout(() => {
-        processMermaidDiagrams();
+        if (typeof window.processMermaidDiagrams === 'function') {
+          window.processMermaidDiagrams();
+        }
       }, 300); // Increased delay for GitHub Pages
     }
 
@@ -865,45 +872,47 @@
 
   <!-- Fallback: Load Mermaid via regular script if module fails -->
   <script>
-    // If mermaid wasn't loaded via module, load it via regular script
-    if (typeof window.mermaid === 'undefined') {
-      console.log('Loading Mermaid via fallback script...');
-      const script = document.createElement('script');
-      script.src = 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js';
-      script.onload = function() {
-        mermaid.initialize({
-          startOnLoad: false,
-          theme: 'default',
-          securityLevel: 'loose',
-          flowchart: { useMaxWidth: true },
-          sequence: { useMaxWidth: true },
-          gantt: { useMaxWidth: true }
-        });
-        window.mermaid = mermaid;
-        
-        // Process diagrams after loading
-        setTimeout(() => {
-          if (typeof processMermaidDiagrams === 'function') {
-            processMermaidDiagrams();
-          } else {
-            // Fallback processing
-            const mermaidBlocks = document.querySelectorAll('code.language-mermaid, pre code.language-mermaid, code[class*="mermaid"]');
-            mermaidBlocks.forEach((block) => {
-              const preElement = block.parentElement;
-              if (preElement && preElement.tagName === 'PRE') {
-                const mermaidCode = block.textContent || block.innerText;
-                const mermaidDiv = document.createElement('div');
-                mermaidDiv.className = 'mermaid';
-                mermaidDiv.textContent = mermaidCode;
-                preElement.parentNode.replaceChild(mermaidDiv, preElement);
-              }
-            });
-            mermaid.run();
-          }
-        }, 100);
-      };
-      document.head.appendChild(script);
-    }
+    // Check if mermaid was loaded after a delay
+    setTimeout(() => {
+      if (typeof window.mermaid === 'undefined') {
+        console.log('Loading Mermaid via fallback script...');
+        const script = document.createElement('script');
+        script.src = 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js';
+        script.onload = function() {
+          mermaid.initialize({
+            startOnLoad: false,
+            theme: 'default',
+            securityLevel: 'loose',
+            flowchart: { useMaxWidth: true },
+            sequence: { useMaxWidth: true },
+            gantt: { useMaxWidth: true }
+          });
+          window.mermaid = mermaid;
+          
+          // Process diagrams after loading
+          setTimeout(() => {
+            if (typeof window.processMermaidDiagrams === 'function') {
+              window.processMermaidDiagrams();
+            } else {
+              // Fallback processing
+              const mermaidBlocks = document.querySelectorAll('code.language-mermaid, pre code.language-mermaid, code[class*="mermaid"]');
+              mermaidBlocks.forEach((block) => {
+                const preElement = block.parentElement;
+                if (preElement && preElement.tagName === 'PRE') {
+                  const mermaidCode = block.textContent || block.innerText;
+                  const mermaidDiv = document.createElement('div');
+                  mermaidDiv.className = 'mermaid';
+                  mermaidDiv.textContent = mermaidCode;
+                  preElement.parentNode.replaceChild(mermaidDiv, preElement);
+                }
+              });
+              mermaid.run();
+            }
+          }, 200);
+        };
+        document.head.appendChild(script);
+      }
+    }, 500);
   </script>
 </body>