mermaid

.vitepress/config.mts

@@ -1,4 +1,5 @@
 import { defineConfig } from "vitepress";
+import { MermaidMarkdown, MermaidPlugin } from "vitepress-plugin-mermaid";
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -8,6 +9,22 @@ export default defineConfig({
   description: "Xray-core",
   head: [["link", { rel: "icon", href: "/logo.png" }]],
   lastUpdated: true,
+
+  markdown: {
+    config(md) {
+      md.use(MermaidMarkdown);
+    },
+  },
+  vite: {
+    plugins: [MermaidPlugin()],
+    optimizeDeps: {
+      include: ["mermaid"],
+    },
+    ssr: {
+      noExternal: ["mermaid"],
+    },
+  },
+
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
     nav: [

package.json

@@ -1,7 +1,9 @@
 {
   "devDependencies": {
     "medium-zoom": "^1.1.0",
-    "vitepress": "2.0.0-alpha.15"
+    "mermaid": "^11.12.2",
+    "vitepress": "2.0.0-alpha.15",
+    "vitepress-plugin-mermaid": "^2.0.17"
   },
   "scripts": {
     "docs:dev": "vitepress dev",