refactor: Implement Mermaid YAML Frontmatter Theming (#8756)

Author: tobiu

src/component/wrapper/Mermaid.mjs

@@ -25,6 +25,16 @@ class Mermaid extends Component {
          * @protected
          */
         ntype: 'mermaid',
+        /**
+         * @member {Object} themeMap
+         */
+        themeMap: {
+            'neo-theme-cyberpunk': 'dark',
+            'neo-theme-dark'     : 'dark',
+            'neo-theme-light'    : 'default',
+            'neo-theme-neo-dark' : 'dark',
+            'neo-theme-neo-light': 'neutral'
+        },
         /**
          * The mermaid diagram code.
          * Changing this value will automatically trigger a re-render of the diagram.
@@ -115,10 +125,13 @@ class Mermaid extends Component {
         if (me.mounted && me.value) {
             await me.ready();
 
+            const
+                theme = me.themeMap[me.theme] || 'default',
+                code  = `---\nconfig:\n  theme: ${theme}\n---\n${me.value}`;
+
             await me.addon.render({
-                code    : me.value,
+                code,
                 id      : me.id,
-                theme   : me.theme,
                 windowId: me.windowId
             })
         }

src/main/addon/Mermaid.mjs

@@ -9,8 +9,6 @@ import DomAccess from '../DomAccess.mjs';
  *
  * Key features:
  * - **Lazy Loading:** Dynamically loads the Mermaid library only when needed.
- * - **Theme Mapping:** Automatically translates Neo.mjs application themes (e.g., 'neo-theme-dark') to Mermaid's internal themes.
- * - **Dynamic Re-rendering:** Handles theme switches at runtime by re-initializing the library.
  * - **SVG Generation:** Uses `mermaid.render()` to generate idempotent SVG output, ensuring reliable DOM updates.
  *
  * It is primarily consumed by:
@@ -22,20 +20,6 @@ import DomAccess from '../DomAccess.mjs';
  * @see Neo.component.wrapper.Mermaid
  */
 class Mermaid extends Base {
-    /**
-     * Maps Neo.mjs theme names to Mermaid.js theme names.
-     * This allows the addon to automatically select the most appropriate visual style
-     * based on the current application theme.
-     * @member {Object} themeMap
-     */
-    static themeMap = {
-        'neo-theme-cyberpunk': 'dark',
-        'neo-theme-dark'     : 'dark',
-        'neo-theme-light'    : 'default',
-        'neo-theme-neo-dark' : 'dark',
-        'neo-theme-neo-light': 'default'
-    }
-
     static config = {
         /**
          * @member {String} className='Neo.main.addon.Mermaid'
@@ -70,12 +54,6 @@ class Mermaid extends Base {
         useLazyLoading: true
     }
 
-    /**
-     * Tracks the currently active Mermaid theme to prevent redundant re-initialization.
-     * @member {String} currentTheme='default'
-     */
-    currentTheme = 'default'
-
     /**
      * Loads the Mermaid library if it is not already present.
      * Initializes the library with `startOnLoad: false` to allow manual control over rendering.
@@ -92,32 +70,20 @@ class Mermaid extends Base {
      * Renders a Mermaid diagram into a specific DOM element.
      *
      * This method orchestrates the full rendering pipeline:
-     * 1. **Theme Resolution:** Maps the requested Neo theme to a Mermaid theme.
-     * 2. **Re-initialization:** If the theme has changed, it re-configures Mermaid globally.
-     * 3. **SVG Generation:** Generates a fresh SVG string for the diagram code.
-     * 4. **DOM Injection:** Safely injects the SVG into the target container.
+     * 1. **SVG Generation:** Generates a fresh SVG string for the diagram code.
+     * 2. **DOM Injection:** Safely injects the SVG into the target container.
      *
      * It includes error handling to display rendering failures inline (e.g., syntax errors)
      * instead of crashing the application.
      *
      * @param {Object} data
      * @param {String} [data.code] The mermaid diagram syntax/code.
      * @param {String} data.id The DOM ID of the container element.
-     * @param {String} [data.theme] The neo theme to use (e.g. 'neo-theme-dark').
      */
     async render(data) {
-        const
-            element = document.getElementById(data.id),
-            me      = this;
+        const element = document.getElementById(data.id);
 
         if (element) {
-            const theme = me.getStaticConfig('themeMap')[data.theme] || 'default';
-
-            if (me.currentTheme !== theme) {
-                me.currentTheme = theme;
-                mermaid.initialize({startOnLoad: false, theme})
-            }
-
             try {
                 const {svg} = await mermaid.render(data.id + '__svg', data.code);
                 element.innerHTML = svg