diff --git a/docs/.vuepress/theme/components/Mermaid.vue b/docs/.vuepress/theme/components/Mermaid.vue
index 8d2fd2b4f..fb59ab07a 100644
--- a/docs/.vuepress/theme/components/Mermaid.vue
+++ b/docs/.vuepress/theme/components/Mermaid.vue
@@ -25,7 +25,6 @@ export default defineComponent({
     const html = reactive({ innerHtml: "" });
     onMounted(() => {
       nextTick(async function () {
-        console.log(chartID, rawGraph);
         const mermaid = await import("mermaid");
         mermaid.default.initialize({
           startOnLoad: false,
@@ -33,7 +32,7 @@ export default defineComponent({
         });
         mermaid.default.render(
           chartID.value,
-          rawGraph.value,
+          decodeURI(rawGraph.value),
           (svgCode, bindFunc) => {
             html.innerHtml = svgCode;
           }
@@ -49,7 +48,7 @@ export default defineComponent({
       });
       mermaid.default.render(
         chartID.value,
-        rawGraph.value,
+        decodeURI(rawGraph.value),
         (svgCode, bindFunc) => {
           html.innerHtml = svgCode;
         }
diff --git a/docs/.vuepress/theme/plugin/mermaidPlugin.ts b/docs/.vuepress/theme/plugin/mermaidPlugin.ts
index 535a907de..e6424b489 100644
--- a/docs/.vuepress/theme/plugin/mermaidPlugin.ts
+++ b/docs/.vuepress/theme/plugin/mermaidPlugin.ts
@@ -12,11 +12,9 @@ const MermaidPlugin: PluginSimple = function (md) {
       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", ";");
-      content = content.replaceAll('"', "'");
-      return `<Mermaid identifier="${key}" graph="${content}"></Mermaid>`;
+      return `<Mermaid identifier="${key}" graph="${encodeURI(
+        content
+      )}"></Mermaid>`;
     }
     const rawCode = fence(...args);
     return `${rawCode}`;