feat: support mermaid rendering (#84)

Author: chilingling

.vitepress/config.mts

@@ -2,6 +2,7 @@ import vueJsx from '@vitejs/plugin-vue-jsx'
 import { defineConfig } from 'vitepress'
 import { vitepressDemoPlugin } from 'vitepress-demo-plugin'
 import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'
+import { isMermaidFence, renderMermaidFence } from './theme/markdown/mermaid'
 import path from 'path'
 import { fileURLToPath } from 'url'
 
@@ -197,6 +198,9 @@ export default defineConfig({
       const langMap: Record<string, string> = { env: 'bash', vue3: 'vue' }
       md.renderer.rules.fence = (tokens, idx, options, env, self) => {
         const token = tokens[idx]
+        if (token && isMermaidFence(token)) {
+          return renderMermaidFence(token, idx, env || {})
+        }
         if (token && token.info) {
           const info = token.info.trim()
           const lang = info.split(/\s+/)[0]

.vitepress/theme/components/MermaidBlock.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="vp-mermaid-wrapper">
+    <div v-if="errorMessage" class="vp-mermaid-error">
+      <p class="vp-mermaid-error-title">Mermaid 渲染失败，已回退为源码：</p>
+      <pre><code>{{ sourceCode }}</code></pre>
+    </div>
+    <div v-else-if="!svgCode" class="vp-mermaid-loading">Rendering Mermaid...</div>
+    <div v-else class="vp-mermaid-diagram" v-html="svgCode"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useRoute } from 'vitepress'
+import type { MermaidPalette } from '../utils/mermaid'
+import { renderMermaidSvg } from '../utils/mermaid'
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  graph: {
+    type: String,
+    required: true,
+  },
+})
+
+const route = useRoute()
+
+const svgCode = ref('')
+const errorMessage = ref('')
+const renderVersion = ref(0)
+let mutationObserver: MutationObserver | null = null
+
+const safeId = computed(() => props.id.replace(/[^a-zA-Z0-9_-]/g, '_'))
+
+const sourceCode = computed(() => {
+  try {
+    return decodeURIComponent(props.graph)
+  } catch (error) {
+    return props.graph
+  }
+})
+
+const getIsDarkMode = () => {
+  if (typeof document === 'undefined') {
+    return false
+  }
+  return document.documentElement.classList.contains('dark')
+}
+
+const readThemePalette = (): MermaidPalette => {
+  const styles = getComputedStyle(document.documentElement)
+  const read = (name: string, fallback: string) => {
+    const value = styles.getPropertyValue(name).trim()
+    return value || fallback
+  }
+
+  return {
+    bg: read('--vp-c-bg', getIsDarkMode() ? '#0b1220' : '#ffffff'),
+    bgSoft: read('--vp-c-bg-soft', getIsDarkMode() ? '#1f2937' : '#f6f8fa'),
+    text1: read('--vp-c-text-1', getIsDarkMode() ? '#f8fafc' : '#1f2937'),
+    text2: read('--vp-c-text-2', getIsDarkMode() ? '#cbd5e1' : '#475569'),
+    border: read('--vp-c-border', getIsDarkMode() ? '#64748b' : '#94a3b8'),
+    brand: read('--vp-c-brand-1', getIsDarkMode() ? '#60a5fa' : '#2563eb'),
+  }
+}
+
+const renderDiagram = async () => {
+  if (typeof window === 'undefined') {
+    return
+  }
+
+  const currentVersion = renderVersion.value + 1
+  renderVersion.value = currentVersion
+  svgCode.value = ''
+  errorMessage.value = ''
+
+  try {
+    const svg = await renderMermaidSvg({
+      id: `${safeId.value}-${currentVersion}`,
+      code: sourceCode.value,
+      isDark: getIsDarkMode(),
+      palette: readThemePalette(),
+    })
+
+    if (currentVersion !== renderVersion.value) {
+      return
+    }
+
+    svgCode.value = svg
+  } catch (error) {
+    if (currentVersion !== renderVersion.value) {
+      return
+    }
+    errorMessage.value = error instanceof Error ? error.message : String(error)
+  }
+}
+
+onMounted(() => {
+  mutationObserver = new MutationObserver(() => {
+    renderDiagram()
+  })
+  mutationObserver.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['class'],
+  })
+  renderDiagram()
+})
+
+watch(() => props.graph, renderDiagram)
+watch(() => route.path, renderDiagram)
+
+onBeforeUnmount(() => {
+  mutationObserver?.disconnect()
+  mutationObserver = null
+  renderVersion.value += 1
+})
+</script>

.vitepress/theme/index.ts

@@ -5,6 +5,7 @@ import { setupDarkModeListener } from './color-mode'
 import Layout from './Layout.vue'
 import HomePage from './home/index.vue'
 import CustomTable from './components/CustomTable.vue'
+import MermaidBlock from './components/MermaidBlock.vue'
 import '@opentiny/tiny-robot-style'
 import {nextTick, watch} from 'vue';
 import {useRoute} from 'vitepress';
@@ -37,6 +38,7 @@ export default {
     })
     app.component('HomePage', HomePage)
     app.component('CustomTable', CustomTable)
+    app.component('MermaidBlock', MermaidBlock)
     enhanceAppWithTabs(app)
   },
   Layout,

.vitepress/theme/markdown/mermaid.ts

@@ -0,0 +1,24 @@
+type MarkdownEnv = Record<string, unknown>
+
+const MERMAID_LANGS = new Set(['mermaid', 'mmd'])
+
+const sanitizeId = (value: string) => value.replace(/[^a-zA-Z0-9_-]/g, '_')
+
+const getFenceLang = (info = '') => info.trim().split(/\s+/)[0]
+
+export const isMermaidFence = (token: { info?: string }) => {
+  const lang = getFenceLang(token?.info)
+  return MERMAID_LANGS.has(lang)
+}
+
+export const renderMermaidFence = (
+  token: { content?: string },
+  idx: number,
+  env: MarkdownEnv = {},
+) => {
+  const pagePath = (env.relativePath || env.path || env.filePath || 'page') as string
+  const blockId = sanitizeId(`${pagePath}-${idx}`)
+  const graph = encodeURIComponent(token?.content || '')
+
+  return `<ClientOnly><MermaidBlock id="${blockId}" graph="${graph}"></MermaidBlock></ClientOnly>`
+}