Simplify Mermaid implementation with standard approach

Author: dennisdornon

dox-theme/_layouts/default.html

@@ -18,7 +18,6 @@
         <!-- 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@10/dist/mermaid.min.js"></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 -->
@@ -61,7 +60,7 @@ <h1 class="c-page-header__title">{{ page.title }}</h1>
 
         {% include footer.html bordered=true %}
 
-        <!-- Initialize highlighting and Mermaid after defer ensures libraries are loaded -->
+        <!-- Initialize highlighting -->
         <script defer>
           document.addEventListener('DOMContentLoaded', (event) => {
             // Initialize Highlight.js
@@ -70,24 +69,13 @@ <h1 class="c-page-header__title">{{ page.title }}</h1>
             } 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>
 
+        <!-- Mermaid -->
+        <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+        <script>mermaid.initialize({startOnLoad:true});</script>
+
         {% if site.dox.google_analytics.tracking_code and jekyll.environment == 'production' %}
             <!-- Google Analytics -->
             <script>

guides/index.md

@@ -45,16 +45,13 @@ 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 class="mermaid">
+<div class="mermaid">
 flowchart TD
-    A[Do you need to connect with
-    a 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,
-    Google Analytics Integration]
-    C --> E[Examples: Advanced Uptime Monitor,
-    Advanced Reports Extension]
-</pre>
+    B --> D[Examples: WooCommerce Integration, Google Analytics Integration]
+    C --> E[Examples: Advanced Uptime Monitor, Advanced Reports Extension]
+</div>
 
 ## Who These Guides Are For