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 };

package.json

@@ -8,6 +8,7 @@
   "devDependencies": {
     "@types/bootstrap": "^5.1.4",
     "@types/jquery": "^3.5.6",
+    "@types/mermaid": "^8.2.7",
     "@vuepress/bundler-vite": "^2.0.0-beta.25",
     "@vuepress/plugin-back-to-top": "^2.0.0-beta.25",
     "@vuepress/plugin-debug": "^2.0.0-beta.25",
@@ -30,6 +31,7 @@
     "esbuild": "^0.12.26",
     "jquery": "^3.6.0",
     "markdown-it-footnote": "^3.0.3",
+    "mermaid": "^8.12.1",
     "vuepress-plugin-mermaidjs": "^1.8.1"
   }
 }

yarn.lock

@@ -217,6 +217,11 @@
   resolved "https://registry.yarnpkg.com/@types/mdurl/-/mdurl-1.0.2.tgz#e2ce9d83a613bacf284c7be7d491945e39e1f8e9"
   integrity sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==
 
+"@types/mermaid@^8.2.7":
+  version "8.2.7"
+  resolved "https://registry.yarnpkg.com/@types/mermaid/-/mermaid-8.2.7.tgz#1f9610c241361f66ed0591d3186e0bf3ed2211c8"
+  integrity sha512-fHgKYloGociOIEftp1IXWEktRZOw4qhEWWZe4a8RKd0AIuhj70its8VV3+sM1DmaWRLPW9rbVD83JR0XJzEh8g==
+
 "@types/mime@^1":
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/@types/mime/-/mime-1.3.2.tgz#93e25bf9ee75fe0fd80b594bc4feb0e862111b5a"
@@ -1602,7 +1607,7 @@ d3-zoom@1:
     d3-selection "1"
     d3-transition "1"
 
-d3@^5.14, d3@^5.7.0:
+d3@^5.14, d3@^5.16.0, d3@^5.7.0:
   version "5.16.0"
   resolved "https://registry.yarnpkg.com/d3/-/d3-5.16.0.tgz#9c5e8d3b56403c79d4ed42fbd62f6113f199c877"
   integrity sha512-4PL5hHaHwX4m7Zr1UapXW23apo6pexCgdetdJ5kTmADpG/7T9Gkxw0M0tf/pjoB63ezCCm0u5UaFYy2aMt0Mcw==
@@ -1805,6 +1810,11 @@ domhandler@^4.0.0, domhandler@^4.2.0:
   dependencies:
     domelementtype "^2.2.0"
 
+dompurify@2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.3.1.tgz#a47059ca21fd1212d3c8f71fdea6943b8bfbdf6a"
+  integrity sha512-xGWt+NHAQS+4tpgbOAI08yxW0Pr256Gu/FNE2frZVTbgrBUn8M7tz7/ktS/LZ2MHeGqz6topj0/xY+y8R5FBFw==
+
 domutils@^2.5.2, domutils@^2.6.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.7.0.tgz#8ebaf0c41ebafcf55b0b72ec31c56323712c5442"
@@ -2686,7 +2696,7 @@ jsonfile@^6.0.1:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
-khroma@^1.1.0:
+khroma@^1.1.0, khroma@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/khroma/-/khroma-1.4.1.tgz#ad6a5b6a972befc5112ce5129887a1a83af2c003"
   integrity sha512-+GmxKvmiRuCcUYDgR7g5Ngo0JEDeOsGdNONdU2zsiBQaK4z19Y2NvXqfEDE0ZiIrg45GTZyAnPLVsLZZACYm3Q==
@@ -2867,6 +2877,21 @@ merge2@^1.3.0:
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
+mermaid@^8.12.1:
+  version "8.12.1"
+  resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-8.12.1.tgz#6b55617bcfc970a7bf724e027368b281feb62539"
+  integrity sha512-0UCcSF0FLoNcPBsRF4f9OIV32t41fV18//z8o3S+FDz2PbDA1CRGKdQF9IX84VP4Tv9kcgJI/oqJdcBEtB/GPA==
+  dependencies:
+    "@braintree/sanitize-url" "^3.1.0"
+    d3 "^5.16.0"
+    dagre "^0.8.5"
+    dagre-d3 "^0.6.4"
+    dompurify "2.3.1"
+    graphlib "^2.1.8"
+    khroma "^1.4.1"
+    moment-mini "^2.24.0"
+    stylis "^4.0.10"
+
 mermaid@^8.8.3:
   version "8.10.1"
   resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-8.10.1.tgz#9573f702024e2173f4aa07d9b207d750507cf838"
@@ -2975,7 +3000,7 @@ mkdirp@^0.5.5:
   dependencies:
     minimist "^1.2.5"
 
-moment-mini@^2.22.1:
+moment-mini@^2.22.1, moment-mini@^2.24.0:
   version "2.24.0"
   resolved "https://registry.yarnpkg.com/moment-mini/-/moment-mini-2.24.0.tgz#fa68d98f7fe93ae65bf1262f6abb5fb6983d8d18"
   integrity sha512-9ARkWHBs+6YJIvrIp0Ik5tyTTtP9PoV0Ssu2Ocq5y9v8+NOOpWiRshAp8c4rZVWTOe+157on/5G+zj5pwIQFEQ==
@@ -3867,6 +3892,11 @@ stylis@^3.5.2:
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
   integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
 
+stylis@^4.0.10:
+  version "4.0.10"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.10.tgz#446512d1097197ab3f02fb3c258358c3f7a14240"
+  integrity sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg==
+
 supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"