Render documentation diagrams as static Mermaid assets

docs/.vitepress/theme/components/MermaidDiagram.vue

@@ -6,7 +6,7 @@ const props = defineProps<{
   chart: string;
 }>();
 
-const svg = ref('');
+const container = ref<HTMLElement | null>(null);
 const error = ref('');
 
 let initialized = false;
@@ -20,7 +20,7 @@ function initMermaid() {
   mermaid.initialize({
     startOnLoad: false,
     theme: 'neutral',
-    securityLevel: 'strict',
+    securityLevel: 'loose',
     fontFamily: 'Inter, Arial, sans-serif',
     flowchart: {
       useMaxWidth: true,
@@ -34,7 +34,7 @@ function initMermaid() {
 const source = computed(() => props.chart.trim());
 
 async function renderDiagram() {
-  if (!import.meta.client) {
+  if (!import.meta.client || !container.value) {
     return;
   }
 
@@ -42,10 +42,13 @@ async function renderDiagram() {
     initMermaid();
     error.value = '';
     diagramId += 1;
-    const { svg: result } = await mermaid.render(`mermaid-diagram-${diagramId}`, source.value);
-    svg.value = result;
+    container.value.removeAttribute('data-processed');
+    container.value.id = `mermaid-diagram-${diagramId}`;
+    container.value.textContent = source.value;
+    await mermaid.run({
+      nodes: [container.value],
+    });
   } catch (cause) {
-    svg.value = '';
     error.value = cause instanceof Error ? cause.message : 'Failed to render Mermaid diagram.';
   }
 }
@@ -62,7 +65,7 @@ watch(source, () => {
 <template>
   <div class="mermaid-diagram">
     <div v-if="error" class="mermaid-diagram__error">{{ error }}</div>
-    <div v-else class="mermaid-diagram__canvas" v-html="svg" />
+    <pre v-else ref="container" class="mermaid-diagram__canvas mermaid" />
   </div>
 </template>
 
@@ -77,6 +80,8 @@ watch(source, () => {
 
 .mermaid-diagram__canvas {
   padding: 1rem;
+  margin: 0;
+  white-space: pre-wrap;
 }
 
 .mermaid-diagram__canvas :deep(svg) {