Switch to non-module Mermaid loading and move initialization to DOMContentLoaded

Author: dennisdornon

dox-theme/_layouts/default.html

@@ -18,18 +18,7 @@
         <!-- 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 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="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 -->
@@ -72,7 +61,7 @@ <h1 class="c-page-header__title">{{ page.title }}</h1>
 
         {% include footer.html bordered=true %}
 
-        <!-- Initialize highlighting after defer ensures hljs is loaded -->
+        <!-- Initialize highlighting and Mermaid after defer ensures libraries are loaded -->
         <script defer>
           document.addEventListener('DOMContentLoaded', (event) => {
             // Initialize Highlight.js
@@ -81,6 +70,21 @@ <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>