diff --git a/app/src/protyle/render/abcRender.ts b/app/src/protyle/render/abcRender.ts
index de566eae1..c5540bbd1 100644
--- a/app/src/protyle/render/abcRender.ts
+++ b/app/src/protyle/render/abcRender.ts
@@ -22,14 +22,11 @@ export const abcRender = (element: Element, cdn = Constants.PROTYLE_CDN) => {
                 if(!e.firstElementChild.classList.contains("protyle-icons")) {
                     e.insertAdjacentHTML("afterbegin", genIconHTML());
                 }
-                if (e.childElementCount < 4) {
-                    e.lastElementChild.insertAdjacentHTML("beforebegin", `<span style="position: absolute">${Constants.ZWSP}</span>`);
-                }
                 const renderElement = e.firstElementChild.nextElementSibling as HTMLElement;
-                window.ABCJS.renderAbc(renderElement, Lute.UnEscapeHTMLStr(e.getAttribute("data-content")), {
+                renderElement.innerHTML = `<span style="position: absolute;left:0;top:0;width: 1px;">${Constants.ZWSP}</span><div contenteditable="false"></div>`;
+                window.ABCJS.renderAbc(renderElement.lastElementChild, Lute.UnEscapeHTMLStr(e.getAttribute("data-content")), {
                     responsive: "resize"
                 });
-                renderElement.setAttribute("contenteditable", "false");
                 e.setAttribute("data-render", "true");
             });
         });
diff --git a/app/src/protyle/render/flowchartRender.ts b/app/src/protyle/render/flowchartRender.ts
index f45a73d66..6de68fdb2 100644
--- a/app/src/protyle/render/flowchartRender.ts
+++ b/app/src/protyle/render/flowchartRender.ts
@@ -40,25 +40,16 @@ const initFlowchart = (flowchartElements: Element[]) => {
         if (item.getAttribute("data-render") === "true") {
             return;
         }
-        //  preview 不需要进行设置
-        if (item.getAttribute("data-node-id")) {
-            if (!item.firstElementChild.classList.contains("protyle-icons")) {
-                item.insertAdjacentHTML("afterbegin", genIconHTML());
-            }
-            if (item.childElementCount < 4) {
-                item.lastElementChild.insertAdjacentHTML("beforebegin", `<span style="position: absolute">${Constants.ZWSP}</span>`);
-            }
+        if (!item.firstElementChild.classList.contains("protyle-icons")) {
+            item.insertAdjacentHTML("afterbegin", genIconHTML());
         }
-        const renderElement = (item.firstElementChild.nextElementSibling || item.firstElementChild) as HTMLElement;
-        const flowchartObj = flowchart.parse(Lute.UnEscapeHTMLStr(item.getAttribute("data-content")));
-        renderElement.innerHTML = "";
+        const renderElement = item.firstElementChild.nextElementSibling;
+        renderElement.innerHTML = `<span style="position: absolute;left:0;top:0;width: 1px;">${Constants.ZWSP}</span><div class="ft__error" contenteditable="false"></div>`;
         try {
-            flowchartObj.drawSVG(renderElement);
+            flowchart.parse(Lute.UnEscapeHTMLStr(item.getAttribute("data-content"))).drawSVG(renderElement.lastElementChild);
         } catch (error) {
-            renderElement.classList.add("ft__error");
-            renderElement.innerHTML = `Flow Chart render error: <br>${error}`;
+            renderElement.innerHTML = `<span style="position: absolute;left:0;top:0;width: 1px;">${Constants.ZWSP}</span><div class="ft__error" contenteditable="false">Flow Chart render error: <br>${error}</div>`;
         }
-        renderElement.setAttribute("contenteditable", "false");
         item.setAttribute("data-render", "true");
     });
 };
diff --git a/app/src/protyle/render/graphvizRender.ts b/app/src/protyle/render/graphvizRender.ts
index 89f2fbc94..145d6fd66 100644
--- a/app/src/protyle/render/graphvizRender.ts
+++ b/app/src/protyle/render/graphvizRender.ts
@@ -30,15 +30,9 @@ export const graphvizRender = (element: Element, cdn = Constants.PROTYLE_CDN) =>
                 const worker = new Worker(blobUrl);
                 new Viz({worker})
                     .renderSVGElement(Lute.UnEscapeHTMLStr(e.getAttribute("data-content"))).then((result: HTMLElement) => {
-                    renderElement.innerHTML = result.outerHTML;
-                    renderElement.classList.remove("ft__error");
-                    renderElement.setAttribute("contenteditable", "false");
-                    if (!e.textContent.endsWith(Constants.ZWSP)) {
-                        e.insertAdjacentHTML("beforeend", `<span style="position: absolute">${Constants.ZWSP}</span>`);
-                    }
+                    renderElement.innerHTML = `<span style="position: absolute;left:0;top:0;width: 1px;">${Constants.ZWSP}</span><div contenteditable="false">${result.outerHTML}</div>`;
                 }).catch((error) => {
-                    renderElement.innerHTML = `graphviz render error: <br>${error}`;
-                    renderElement.classList.add("ft__error");
+                    renderElement.innerHTML = `<span style="position: absolute;left:0;top:0;width: 1px;">${Constants.ZWSP}</span><div class="ft__error" contenteditable="false">graphviz render error: <br>${error}</div>`;
                 });
             } catch (e) {
                 console.error("Graphviz error", e);
diff --git a/app/src/protyle/render/mermaidRender.ts b/app/src/protyle/render/mermaidRender.ts
index cec9c7f86..16a718167 100644
--- a/app/src/protyle/render/mermaidRender.ts
+++ b/app/src/protyle/render/mermaidRender.ts
@@ -67,15 +67,10 @@ const initMermaid = (mermaidElements: Element[]) => {
 </div>`);
         }
         const renderElement = item.firstElementChild.nextElementSibling as HTMLElement;
-        renderElement.removeAttribute("data-processed");
-        renderElement.textContent = Lute.UnEscapeHTMLStr(item.getAttribute("data-content"));
+        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);
+            window.mermaid.init(undefined, renderElement.lastElementChild);
         }, Constants.TIMEOUT_LOAD * index);
         item.setAttribute("data-render", "true");
-        renderElement.setAttribute("contenteditable", "false");
-        if (!item.textContent.endsWith(Constants.ZWSP)) {
-            item.insertAdjacentHTML("beforeend", `<span style="position: absolute">${Constants.ZWSP}</span>`);
-        }
     });
 };