diff --git a/app/src/protyle/render/mermaidRender.ts b/app/src/protyle/render/mermaidRender.ts
index 6af9fbf90..557c085ea 100644
--- a/app/src/protyle/render/mermaidRender.ts
+++ b/app/src/protyle/render/mermaidRender.ts
@@ -69,8 +69,15 @@ const initMermaid = (mermaidElements: Element[]) => {
         const renderElement = item.firstElementChild.nextElementSibling as HTMLElement;
         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;
+        try {
+            const mermaidData = await window.mermaid.render(id, Lute.UnEscapeHTMLStr(item.getAttribute("data-content")));
+            renderElement.lastElementChild.innerHTML = mermaidData.svg;
+        } catch (e) {
+            const errorElement = document.querySelector("#" + id);
+            renderElement.lastElementChild.innerHTML = `${errorElement.outerHTML}<div class="fn__hr"></div><div class="ft__error">${e.message.replace(/\n/, "<br>")}</div>`;
+            errorElement.parentElement.remove();
+        }
+
         item.setAttribute("data-render", "true");
     });
 };