fix(diagram): Mermaid.js: dynamic loading, support dark theme, background color for edgeLabel paragraph elements

- Fixes dynamic loading of Mermaid.js
- Adds MutationObserver to handle light/dark theme switching.
- Sets the background-color for edgeLabel p elements to override a white background that obscures text in the dark theme.

assets/js/components/diagram.js

@@ -1,17 +1,66 @@
 export default function Diagram({ component }) {
-  // Only load mermaid when diagrams are present
+  // Import mermaid.js module
-  const hasDiagrams = document.querySelectorAll('.mermaid').length > 0;
+  import('mermaid').then(({ default: mermaid }) => {
-  
+    // Configure mermaid with InfluxData theming
-  if (hasDiagrams) {
+    mermaid.initialize({
-    import("mermaid").then(({ mermaid }) => {
+      startOnLoad: false, // We'll manually call run()
-      mermaid.initialize({
+      theme: document.body.classList.contains('dark-theme') ? 'dark' : 'default',
-        startOnLoad: true,
+      themeVariables: {
-        themeVariables: {
+        fontFamily: 'Proxima Nova',
-          fontFamily: "Proxima Nova",
+        fontSize: '16px',
-          fontSize: '18px',
+        lineColor: '#22ADF6',
-        }
+        primaryColor: '#22ADF6',
-      });
+        primaryTextColor: '#545454',
-      mermaid.run();
+        secondaryColor: '#05CE78',
+        tertiaryColor: '#f4f5f5',
+      },
+      securityLevel: 'loose', // Required for interactive diagrams
+      logLevel: 'error'
     });
-  }
+    
+    // Process the specific diagram component
+    try {
+      mermaid.run({ nodes: [component] });
+    } catch (error) {
+      console.error('Mermaid diagram rendering error:', error);
+    }
+    
+    // Store reference to mermaid for theme switching
+    if (!window.mermaidInstances) {
+      window.mermaidInstances = new Map();
+    }
+    window.mermaidInstances.set(component, mermaid);
+  }).catch(error => {
+    console.error('Failed to load Mermaid library:', error);
+  });
+  
+  // Listen for theme changes to refresh diagrams
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      if (mutation.attributeName === 'class' && 
+          document.body.classList.contains('dark-theme') !== window.isDarkTheme) {
+        window.isDarkTheme = document.body.classList.contains('dark-theme');
+        
+        // Reload this specific diagram with new theme
+        if (window.mermaidInstances?.has(component)) {
+          const mermaid = window.mermaidInstances.get(component);
+          mermaid.initialize({
+            theme: window.isDarkTheme ? 'dark' : 'default'
+          });
+          mermaid.run({ nodes: [component] });
+        }
+      }
+    });
+  });
+  
+  // Watch for theme changes on body element
+  observer.observe(document.body, { attributes: true });
+  
+  // Return cleanup function to be called when component is destroyed
+  return () => {
+    observer.disconnect();
+    if (window.mermaidInstances?.has(component)) {
+      window.mermaidInstances.delete(component);
+    }
+  };
 }

assets/styles/layouts/article/_diagrams.scss

@@ -16,6 +16,10 @@
     background: $article-code-bg !important;
     font-size: .85em;
     font-weight: $medium;
+
+    p {
+      background: $article-bg !important;
+    }
   }
 
   .node {