docs: add Mermaid architecture diagrams and VitePress renderer

docs/.vitepress/theme/index.ts

@@ -1,4 +1,77 @@
 import DefaultTheme from 'vitepress/theme';
+import { useRoute } from 'vitepress';
+import { nextTick, onMounted, watch } from 'vue';
 import '@catppuccin/vitepress/theme/macchiato/mauve.css';
 
-export default DefaultTheme;
+let mermaidLoader: Promise<any> | null = null;
+
+async function getMermaid() {
+  if (!mermaidLoader) {
+    mermaidLoader = import(
+      /* @vite-ignore */ 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs'
+    ).then((mod) => {
+      const mermaid = mod.default ?? mod;
+      mermaid.initialize({
+        startOnLoad: false,
+        securityLevel: 'loose',
+      });
+      return mermaid;
+    });
+  }
+  return mermaidLoader;
+}
+
+async function renderMermaidBlocks() {
+  if (typeof document === 'undefined') {
+    return;
+  }
+  const blocks = Array.from(
+    document.querySelectorAll<HTMLElement>('div.language-mermaid'),
+  );
+  if (blocks.length === 0) {
+    return;
+  }
+
+  const mermaid = await getMermaid();
+  const nodes: HTMLElement[] = [];
+
+  for (const block of blocks) {
+    if (block.dataset.mermaidRendered === 'true') {
+      continue;
+    }
+    const code = block.querySelector('pre code');
+    const source = code?.textContent?.trim();
+    if (!source) {
+      continue;
+    }
+
+    const mount = document.createElement('div');
+    mount.className = 'mermaid';
+    mount.textContent = source;
+
+    block.replaceChildren(mount);
+    block.dataset.mermaidRendered = 'true';
+    nodes.push(mount);
+  }
+
+  if (nodes.length > 0) {
+    await mermaid.run({ nodes });
+  }
+}
+
+export default {
+  ...DefaultTheme,
+  setup() {
+    const route = useRoute();
+    const render = () => {
+      nextTick(() => {
+        renderMermaidBlocks().catch((error) => {
+          console.error('Failed to render Mermaid diagram:', error);
+        });
+      });
+    };
+
+    onMounted(render);
+    watch(() => route.path, render);
+  },
+};