From b577fdf15b7656ceaaa452a5b41e1598491358de Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Fri, 23 Feb 2024 11:31:11 +0800
Subject: [PATCH] :art: fix https://github.com/siyuan-note/siyuan/issues/10374

---
 app/src/protyle/render/mermaidRender.ts | 10 +++++-----
 app/src/types/index.d.ts                |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/src/protyle/render/mermaidRender.ts b/app/src/protyle/render/mermaidRender.ts
index 09eac7398..6af9fbf90 100644
--- a/app/src/protyle/render/mermaidRender.ts
+++ b/app/src/protyle/render/mermaidRender.ts
@@ -56,7 +56,7 @@ export const mermaidRender = (element: Element, cdn = Constants.PROTYLE_CDN) =>
 };
 
 const initMermaid = (mermaidElements: Element[]) => {
-    mermaidElements.forEach((item, index) => {
+    mermaidElements.forEach(async (item: HTMLElement) => {
         if (item.getAttribute("data-render") === "true") {
             return;
         }
@@ -67,10 +67,10 @@ const initMermaid = (mermaidElements: Element[]) => {
 </div>`);
         }
         const renderElement = item.firstElementChild.nextElementSibling as HTMLElement;
-        renderElement.innerHTML = `<span style="position: absolute;left:0;top:0;width: 1px;">${Constants.ZWSP}</span><div contenteditable="false">${Lute.UnEscapeHTMLStr(item.getAttribute("data-content"))}</div>`;
-        setTimeout(() => {
-            window.mermaid.init(undefined, renderElement.lastElementChild);
-        }, Constants.TIMEOUT_LOAD * index);
+        const id = "mermaid" + item.dataset.nodeId;
+        renderElement.innerHTML = `<span style="position: absolute;left:0;top:0;width: 1px;">${Constants.ZWSP}</span><div contenteditable="false"><span id="${id}"></span></div>`;
+        const mermaidData = await window.mermaid.render(id, Lute.UnEscapeHTMLStr(item.getAttribute("data-content")));
+        renderElement.lastElementChild.innerHTML = mermaidData.svg;
         item.setAttribute("data-render", "true");
     });
 };
diff --git a/app/src/types/index.d.ts b/app/src/types/index.d.ts
index 502c2577c..0de21a661 100644
--- a/app/src/types/index.d.ts
+++ b/app/src/types/index.d.ts
@@ -147,7 +147,7 @@ interface Window {
     }
     mermaid: {
         initialize(options: any): void,
-        init(options: any, element: Element): void
+        render(id: string, text: string): { svg:string }
     };
     plantumlEncoder: {
         encode(options: string): string,