From d98294791b892732f0e6c65c4d9b61a8ee729650 Mon Sep 17 00:00:00 2001
From: hmol233 <82594500+hmol233@users.noreply.github.com>
Date: Sun, 12 Sep 2021 20:39:48 +0800
Subject: [PATCH] fix: mermaid chart rendering (again)

---
 docs/.vuepress/theme/components/Mermaid.vue  | 5 ++---
 docs/.vuepress/theme/plugin/mermaidPlugin.ts | 8 +++-----
 2 files changed, 5 insertions(+), 8 deletions(-)

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