fix: mermaid charts rendering

docs/.vuepress/config.ts

@@ -9,7 +9,6 @@ const isProduction = process.env.NODE_ENV === "production";
 export default defineUserConfig<DefaultThemeOptions>({
   theme: path.join(__dirname, "./theme"),
   plugins: [
-    ["vuepress-plugin-mermaidjs"],
     [
       "@vuepress/plugin-search",
       {

docs/.vuepress/theme/clientAppEnhance.ts

@@ -1,8 +1,10 @@
 import { defineClientAppEnhance } from "@vuepress/client";
 import Tab from "./components/Tab.vue";
 import Tabs from "./components/Tabs.vue";
+import Mermaid from "./components/Mermaid.vue";
 
 export default defineClientAppEnhance(({ app, router, siteData }) => {
   app.component("Tab", Tab);
   app.component("Tabs", Tabs);
+  app.component("Mermaid", Mermaid);
 });

docs/.vuepress/theme/components/Mermaid.vue

@@ -0,0 +1,67 @@
+<template>
+  <div v-html="payload.innerHtml"></div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  onMounted,
+  nextTick,
+  toRef,
+  watch,
+  reactive,
+} from "vue";
+import { useDarkMode } from "@vuepress/theme-default/lib/client";
+export default defineComponent({
+  name: "Mermaid",
+  props: {
+    identifier: String,
+    graph: String,
+  },
+  setup(props) {
+    const dark = useDarkMode();
+    const chartID = toRef(props, "identifier");
+    const rawGraph = toRef(props, "graph");
+    const html = reactive({ innerHtml: "" });
+    onMounted(() => {
+      nextTick(async function () {
+        console.log(chartID, rawGraph);
+        const mermaid = await import("mermaid");
+        mermaid.default.initialize({
+          startOnLoad: false,
+          theme: dark.value ? "dark" : "default",
+        });
+        mermaid.default.render(
+          chartID.value,
+          rawGraph.value,
+          (svgCode, bindFunc) => {
+            html.innerHtml = svgCode;
+          }
+        );
+      });
+    });
+
+    watch(dark, async () => {
+      const mermaid = await import("mermaid");
+      mermaid.default.initialize({
+        startOnLoad: false,
+        theme: dark.value ? "dark" : "default",
+      });
+      mermaid.default.render(
+        chartID.value,
+        rawGraph.value,
+        (svgCode, bindFunc) => {
+          html.innerHtml = svgCode;
+        }
+      );
+    });
+
+    return {
+      tag: chartID,
+      payload: html,
+    };
+  },
+});
+</script>
+
+<style scoped></style>

docs/.vuepress/theme/index.ts

@@ -1,11 +1,15 @@
 import { path } from "@vuepress/utils";
 import { Theme } from "@vuepress/core";
+import { MermaidPlugin } from "./plugin/mermaidPlugin";
 
 export const docsPlugin: Theme = (options, app) => {
   return {
     name: "xray-docs-theme",
     extends: "@vuepress/theme-default",
     clientAppEnhanceFiles: path.resolve(__dirname, "clientAppEnhance.ts"),
+    extendsMarkdown: (md) => {
+      md.use(MermaidPlugin);
+    },
   };
 };
 

docs/.vuepress/theme/plugin/mermaidPlugin.ts

@@ -0,0 +1,25 @@
+// Reference: https://github.com/mermaid-js/mermaid
+
+import { PluginSimple } from "markdown-it/lib";
+import { hash } from "@vuepress/utils";
+
+const MermaidPlugin: PluginSimple = function (md) {
+  const fence = md.renderer.rules.fence;
+  md.renderer.rules.fence = (...args) => {
+    const [tokens, idx] = args;
+    const { info } = tokens[idx];
+    if (info.trim(" ") === "mermaid") {
+      const token = tokens[idx];
+      const key = `mermaid_${hash(idx)}`;
+      let { content } = token;
+      content = content.replaceAll(";\n", ";");
+      content = content.replaceAll("\n\n", ";");
+      content = content.replaceAll("\n", ";");
+      return `<Mermaid identifier="${key}" graph="${content}"></Mermaid>`;
+    }
+    const rawCode = fence(...args);
+    return `${rawCode}`;
+  };
+};
+
+export { MermaidPlugin };