Complete mermaid.js integration with reliable fallback handling

Copilot · larp0 · Copilot · commit 6b79fef05df7 · 2025-06-26T19:22:20.000Z
Co-authored-by: larp0 &lt;204380501+larp0@users.noreply.github.com&gt;
diff --git a/docs.html b/docs.html
@@ -8,8 +8,8 @@
     
     <!-- Marked.js for markdown parsing - try multiple CDNs for reliability -->
     <script src="https://unpkg.com/marked/marked.min.js"></script>
-    <!-- Mermaid.js for diagram rendering - local fallback -->
-    <script src="mermaid.min.js"></script>
+    <!-- Mermaid.js for diagram rendering -->
+    <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
     <script>
         // Fallback if marked.js fails to load
         if (typeof marked === 'undefined') {
@@ -440,6 +440,8 @@
                     const mermaidDiv = document.createElement('div');
                     mermaidDiv.className = 'mermaid';
                     mermaidDiv.setAttribute('id', `mermaid-${index}`);
+                    // Preserve line breaks and whitespace properly
+                    mermaidDiv.style.whiteSpace = 'pre';
                     mermaidDiv.textContent = text;
                     
                     // Replace the code block with the mermaid div
@@ -450,31 +452,30 @@
             // Initialize mermaid if diagrams were found and library is available
             const mermaidDivs = document.querySelectorAll('.mermaid');
             if (mermaidDivs.length > 0) {
-                // Simple approach - wait a bit for the library to load, then try once
-                setTimeout(() => {
+                // Initialize mermaid when library is available
+                const initMermaid = () => {
                     if (typeof mermaid !== 'undefined') {
                         try {
                             // Configure mermaid
                             mermaid.initialize({
-                                startOnLoad: false,
+                                startOnLoad: true,
                                 theme: 'default',
-                                securityLevel: 'loose',
-                                fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", sans-serif'
+                                securityLevel: 'loose'
                             });
-                            
-                            // Render all mermaid diagrams
-                            mermaid.run();
                         } catch (error) {
-                            console.error('Error rendering mermaid diagrams:', error);
+                            console.error('Error initializing mermaid:', error);
                         }
                     } else {
                         console.warn('Mermaid library not available');
-                        // If mermaid is not available, show a message in the mermaid divs
+                        // Show fallback content
                         mermaidDivs.forEach(div => {
-                            div.innerHTML = '<p><em>Mermaid diagram (library not loaded)</em></p><pre><code>' + div.textContent + '</code></pre>';
+                            div.innerHTML = '<p><em>Mermaid diagram (requires mermaid.js)</em></p><pre style="background:#f4f4f4;padding:10px;border-radius:4px;"><code>' + div.textContent + '</code></pre>';
                         });
                     }
-                }, 1000);
+                };
+                
+                // Try to initialize after a delay to ensure library is loaded
+                setTimeout(initMermaid, 500);
             }
         }
         
diff --git a/mermaid.min.js b/mermaid.min.js
diff --git a/test_mermaid.html b/test_mermaid.html
@@ -0,0 +1,2 @@
+<div class="mermaid">flowchart TD\n    A --> B</div>
+<script src="mermaid.min.js"></script><script>mermaid.initialize({startOnLoad:true})</script>
diff --git a/test_mermaid2.html b/test_mermaid2.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <script src="mermaid.min.js"></script>
+</head>
+<body>
+    <div class="mermaid">
+    flowchart TD
+        A --> B
+    </div>
+    <script>
+        mermaid.initialize({
+            startOnLoad: true,
+            theme: 'default'
+        });
+    </script>
+</body>
+</html>

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+<div class="mermaid">flowchart TD\n A --> B</div>`
	`2`	`+<script src="mermaid.min.js"></script><script>mermaid.initialize({startOnLoad:true})</script>`