fix(mermaid): make mermaid render client-side

.gitignore

@@ -27,11 +27,14 @@ pnpm-debug.log*
 generated/*.json
 src/content/docs/*.mdx
 src/content/docs/*.md
+src/content/docs/*.png
 src/content/*
 !src/content/docs/
-src/content/docs/*.mdx
 src/content/docs/**/*.md
+src/content/docs/**/*.mdx
+src/content/docs/**/*.png
 !src/content/docs/index.mdx
 !src/content/docs/general.mdx
 public/json-schema/**/*.json
+public/json-schema/**/*.yaml
 public/llms.txt

astro.config.mjs

@@ -1,7 +1,7 @@
 import { defineConfig } from "astro/config";
 import starlight from "@astrojs/starlight";
 import * as fs from "fs";
-import rehypeMermaid from "rehype-mermaid";
+import { remarkMermaid } from "./src/plugins/remark-mermaid.js";
 import starlightBlog from "starlight-blog";
 import tailwindcss from "@tailwindcss/vite";
 
@@ -134,7 +134,7 @@ export default defineConfig({
   redirects: redirects,
 
   markdown: {
-    rehypePlugins: [[rehypeMermaid, { dark: true }]],
+    remarkPlugins: [remarkMermaid],
   },
 
   integrations: [

package.json

@@ -22,12 +22,12 @@
     "astro": "^5.7.3",
     "jsonpath": "^1.1.1",
     "marked": "^14.1.2",
-    "playwright": "^1.49.0",
+    "mermaid": "^11.12.3",
     "rehype-graphviz": "^0.3.0",
-    "rehype-mermaid": "^3.0.0",
     "sharp": "^0.32.5",
     "starlight-blog": "^0.24.0",
     "tailwindcss": "^4.1.4",
+    "unist-util-visit": "^5.1.0",
     "vite-plugin-radar": "^0.9.6"
   },
   "devDependencies": {
@@ -41,6 +41,5 @@
     "ts-jest": "^29.4.5",
     "tsx": "^4.17.0",
     "typescript": "^5.5.4"
-  },
-  "postinstall": "playwright install chromium"
+  }
 }

scripts/build.sh

@@ -28,6 +28,5 @@ if [ ! -d "${AEP_EDITION_2026}" ]; then
 fi
 
 npm install
-npx playwright install --with-deps chromium
 npm run generate
 npm run build

src/components/overrides/Head.astro

@@ -16,4 +16,59 @@ import Default from "@astrojs/starlight/components/Head.astro";
   })(window, document, "script", "dataLayer", "GTM-NSXMVSDN");
 </script>
 <!-- End Google Tag Manager -->
+<script>
+  import mermaid from "mermaid";
+
+  const getMermaidTheme = () => {
+    const theme = document.documentElement.dataset.theme;
+    if (theme === 'light') return 'default';
+    if (theme === 'dark') return 'dark';
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default';
+  };
+
+  mermaid.initialize({ startOnLoad: false, theme: getMermaidTheme() });
+
+  class MermaidDiagram extends HTMLElement {
+    constructor() {
+      super();
+    }
+
+    async renderDiagram() {
+      const content = decodeURIComponent(this.dataset.content || "");
+      if (!content) return;
+
+      try {
+        const id = `mermaid-${crypto.randomUUID()}`;
+        const { svg } = await mermaid.render(id, content);
+        this.innerHTML = svg;
+      } catch (error) {
+        console.error("Failed to render Mermaid diagram:", error);
+        this.innerHTML = `<pre><code>${content}</code></pre>`;
+      }
+    }
+
+    connectedCallback() {
+      this.renderDiagram();
+    }
+  }
+
+  customElements.define("mermaid-diagram", MermaidDiagram);
+
+  const observer = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      if (mutation.attributeName === 'data-theme') {
+        mermaid.initialize({ theme: getMermaidTheme() });
+        document.querySelectorAll('mermaid-diagram').forEach((el) => {
+          el.renderDiagram();
+        });
+      }
+    }
+  });
+
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['data-theme']
+  });
+</script>
+
 <Default {...Astro.locals.starlightRoute}><slot /></Default>

src/plugins/remark-mermaid.js

@@ -0,0 +1,13 @@
+import { visit } from "unist-util-visit";
+
+export function remarkMermaid() {
+  return (tree) => {
+    visit(tree, "code", (node) => {
+      if (node.lang === "mermaid") {
+        const encodedContent = encodeURIComponent(node.value);
+        node.type = "html";
+        node.value = `<mermaid-diagram data-content="${encodedContent}"></mermaid-diagram>`;
+      }
+    });
+  };
+}