Update Mermaid implementation to use ES modules and direct diagram format

dox-theme/_layouts/default.html

@@ -18,7 +18,18 @@
         <!-- Theme scripts (deferred) -->
         <script src="{{ site.baseurl }}/dox-theme/assets/js/vendor/jquery.min.js" defer></script> <!-- Keep vendor -->
         <script src="{{ site.baseurl }}/dox-theme/assets/js/vendor/highlight.pack.js" defer></script> <!-- Keep vendor -->
-        <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js" defer></script>
+        <script type="module">
+          import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+          mermaid.initialize({
+            startOnLoad: true,
+            theme: 'dark',
+            themeVariables: {
+              primaryColor: '#7fb100',
+              secondaryColor: '#446200',
+              tertiaryColor: '#4682b4'
+            }
+          });
+        </script>
         <script src="{{ site.baseurl }}/dox-theme/assets/js/theme-toggle.js" defer></script> <!-- Restore -->
         <script src="{{ site.baseurl }}/dox-theme/assets/js/navigation.js" defer></script> <!-- Keep navigation.js -->
         <script src="{{ site.baseurl }}/dox-theme/assets/js/page-nav.js" defer></script> <!-- Restore -->
@@ -70,21 +81,6 @@
             } else {
               console.error('Highlight.js (hljs) not loaded');
             }
-
-            // Initialize Mermaid
-            if (typeof mermaid !== 'undefined') {
-              mermaid.initialize({ 
-                startOnLoad: true,
-                theme: 'dark',
-                themeVariables: {
-                  primaryColor: '#7fb100',
-                  secondaryColor: '#446200',
-                  tertiaryColor: '#4682b4'
-                }
-              });
-            } else {
-              console.error('Mermaid.js not loaded');
-            }
           });
         </script>
 

dox-theme/assets/js/code-blocks.js

@@ -4,19 +4,6 @@
  */
 
 document.addEventListener('DOMContentLoaded', function() {
-    // Initialize Mermaid if it exists
-    if (typeof mermaid !== 'undefined') {
-        mermaid.initialize({ 
-            startOnLoad: true,
-            theme: 'dark',
-            themeVariables: {
-                primaryColor: '#7fb100',
-                secondaryColor: '#446200',
-                tertiaryColor: '#4682b4'
-            }
-        });
-    }
-
     // Initialize Highlight.js if it exists
     if (typeof hljs !== 'undefined') {
         hljs.configure({
@@ -25,26 +12,12 @@ document.addEventListener('DOMContentLoaded', function() {
         hljs.highlightAll();
     }
 
-    // Convert Mermaid code blocks to proper format
-    document.querySelectorAll('pre > code.language-mermaid').forEach(block => {
-        const pre = block.parentElement;
-        if (!pre.classList.contains('mermaid')) {
-            // Create new mermaid div
-            const mermaidDiv = document.createElement('div');
-            mermaidDiv.className = 'mermaid';
-            mermaidDiv.textContent = block.textContent;
-            
-            // Replace pre with mermaid div
-            pre.parentNode.replaceChild(mermaidDiv, pre);
-        }
-    });
-
     // Find all code blocks with copy buttons
     const copyButtons = document.querySelectorAll('.code-block .copy-button');
     
     if (copyButtons.length === 0) {
         // If no copy buttons found in theme-style blocks, look for pre>code blocks
-        // and add copy buttons to them
+        // and add copy buttons to them (excluding mermaid diagrams)
         const codeBlocks = document.querySelectorAll('pre:not(.no-copy):not(.mermaid) > code[class*="language-"], pre:not(.no-copy):not(.mermaid) > code[class*="hljs"]');
         
         codeBlocks.forEach(codeBlock => {
@@ -66,7 +39,7 @@ document.addEventListener('DOMContentLoaded', function() {
                 let language = 'code';
                 const langClass = codeBlock.className.match(/language-(\w+)/) || codeBlock.className.match(/hljs language-(\w+)/);
                 if (langClass && langClass[1]) {
-                    language = langClass[1].toLowerCase() === 'mermaid' ? 'MERMAID' : langClass[1].toUpperCase();
+                    language = langClass[1].toUpperCase();
                 }
                 
                 const langLabel = document.createElement('span');

guides/index.md

@@ -45,13 +45,16 @@ MainWP uses specific terminology to distinguish between different types of add-o
 
 Use this decision tree to determine whether you should build an Extension or an Integration:
 
-<pre><code class="language-mermaid">
+<pre class="mermaid">
 flowchart TD
-    A[Do you need to connect with\na third-party service or plugin?] -->|Yes| B[Integration]
+    A[Do you need to connect with
+    a third-party service or plugin?] -->|Yes| B[Integration]
     A -->|No| C[Extension]
-    B --> D[Examples: WooCommerce Integration,\nGoogle Analytics Integration]
-    C --> E[Examples: Advanced Uptime Monitor,\nAdvanced Reports Extension]
-</code></pre>
+    B --> D[Examples: WooCommerce Integration,
+    Google Analytics Integration]
+    C --> E[Examples: Advanced Uptime Monitor,
+    Advanced Reports Extension]
+</pre>
 
 ## Who These Guides Are For