Support mermaid graphs

Signed-off-by: Nelo-T. Wallus <[email protected]>
Signed-off-by: Nelo-T. Wallus <[email protected]>

Author: ntnn

.vitepress/components/Mermaid.vue

@@ -0,0 +1,42 @@
+<template>
+  <div v-html="svg"></div>
+</template>
+
+<script setup lang="ts">
+import { watchEffect, ref } from 'vue';
+import { useData } from 'vitepress'
+
+import mermaid from 'mermaid'
+import type { MermaidConfig } from 'mermaid'
+
+const {isDark} = useData()
+
+const svg = ref<string>('')
+
+const props = defineProps({
+  graph: {
+    type: String,
+    required: true,
+  },
+  id: {
+    type: String,
+    required: true,
+  },
+});
+
+const render = async (id: string, code: string, config: MermaidConfig): Promise<string> => {
+  mermaid.initialize(config)
+  const {svg} = await mermaid.render(id, code)
+  return svg
+}
+
+watchEffect(async () => {
+  const mermaidConfig: MermaidConfig = {
+    securityLevel: 'loose',
+    startOnLoad: false,
+    theme: isDark.value ? 'dark' : 'default',
+  };
+
+  svg.value = await render(props.id, props.graph, mermaidConfig);
+}, { immediate: true });
+</script>

.vitepress/config.mts

@@ -8,23 +8,42 @@ export default defineConfig({
     // https://vitepress.dev/reference/default-theme-config
     nav: [
       { text: 'Home', link: '/' },
-      // { text: 'Scenarios', link: '/scenarios' }
+      { text: 'Scenarios', link: '/scenarios' }
     ],
 
     outline: [2, 3, 4, 5],
 
-    sidebar: [
-      {
-        text: 'Examples',
-        items: [
-          { text: 'Markdown Examples', link: '/markdown-examples' },
-          { text: 'Runtime API Examples', link: '/api-examples' }
-        ]
-      }
-    ],
+    sidebar: {
+        '/scenarios': {
+            test: 'Scenarios',
+            items:  [
+                { text: 'Provider to Consumer (P2C)', link: '/scenarios/provider-to-consumer' },
+            ],
+        },
+    },
 
     socialLinks: [
       { icon: 'github', link: 'https://github.com/platform-mesh' }
     ]
-  }
+  },
+ markdown: {
+    config: md => {
+      md.renderer.rules.fence = (tokens, index, options, env, slf) => {
+        const token = tokens[index]
+        if (token.info.trim() === 'mermaid') {
+          const key = index
+          return `
+          <Suspense>
+            <template #default>
+              <Mermaid id="mermaid-${key}"  graph="${token.content}"></Mermaid>
+            </template>
+            <template #fallback>
+              Loading...
+            </template>
+          </Suspense>
+`
+        }
+      }
+    }
+ },
 })

.vitepress/theme/index.ts

@@ -0,0 +1,11 @@
+import type { Theme } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+
+import Mermaid from '../components/Mermaid.vue'
+
+export default {
+  extends: DefaultTheme,
+  enhanceApp({ app }) {
+    app.component('Mermaid', Mermaid)
+  }
+} satisfies Theme