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[]) => {
`);
}
const renderElement = item.firstElementChild.nextElementSibling as HTMLElement;
- renderElement.innerHTML = `${Constants.ZWSP}
${Lute.UnEscapeHTMLStr(item.getAttribute("data-content"))}
`;
- setTimeout(() => {
- window.mermaid.init(undefined, renderElement.lastElementChild);
- }, Constants.TIMEOUT_LOAD * index);
+ const id = "mermaid" + item.dataset.nodeId;
+ renderElement.innerHTML = `${Constants.ZWSP}
`;
+ 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,