:art: https://github.com/siyuan-note/siyuan/issues/13223

app/src/protyle/render/chartRender.ts

@@ -18,19 +18,11 @@ export const chartRender = (element: Element, cdn = Constants.PROTYLE_CDN) => {
     if (echartsElements.length > 0) {
         addScript(`${cdn}/js/echarts/echarts.min.js?v=5.3.2`, "protyleEchartsScript").then(() => {
             addScript(`${cdn}/js/echarts/echarts-gl.min.js?v=2.0.9`, "protyleEchartsGLScript").then(() => {
+                const wysiswgElement = hasClosestByClassName(element, "protyle-wysiwyg", true);
                 let width: number = undefined;
-                if (echartsElements[0].firstElementChild.clientWidth === 0) {
-                    const tabElement = hasClosestByClassName(echartsElements[0], "layout-tab-container", true);
-                    if (tabElement) {
-                        Array.from(tabElement.children).find(item => {
-                            if (item.classList.contains("protyle") && !item.classList.contains("fn__none")) {
-                                width = item.querySelector(".protyle-wysiwyg").firstElementChild.clientWidth;
-                                return true;
-                            }
-                        });
-                    }
+                if (wysiswgElement && wysiswgElement.clientWidth > 0 && echartsElements[0].firstElementChild.clientWidth === 0 && wysiswgElement.firstElementChild) {
+                    width = wysiswgElement.firstElementChild.clientWidth;
                 }
-                const wysiswgElement = hasClosestByClassName(element, "protyle-wysiwyg", true);
                 echartsElements.forEach(async (e: HTMLDivElement) => {
                     if (e.getAttribute("data-render") === "true") {
                         return;

app/src/protyle/render/flowchartRender.ts

@@ -20,15 +20,19 @@ export const flowchartRender = (element: Element, cdn = Constants.PROTYLE_CDN) =
     }
     addScript(`${cdn}/js/flowchart.js/flowchart.min.js?v=0.0.0`, "protyleFlowchartScript").then(() => {
         if (flowchartElements[0].firstElementChild.clientWidth === 0) {
-            const hideElement = hasClosestByAttribute(flowchartElements[0], "fold", "1");
-            if (!hideElement) {
-                return;
-            }
             const observer = new MutationObserver(() => {
                 initFlowchart(flowchartElements);
                 observer.disconnect();
             });
-            observer.observe(hideElement, {attributeFilter: ["fold"]});
+            const hideElement = hasClosestByAttribute(flowchartElements[0], "fold", "1");
+            if (hideElement) {
+                observer.observe(hideElement, {attributeFilter: ["fold"]});
+            } else {
+                const cardElement = hasClosestByClassName(flowchartElements[0], "card__block", true);
+                if (cardElement) {
+                    observer.observe(cardElement, {attributeFilter: ["class"]});
+                }
+            }
         } else {
             initFlowchart(flowchartElements);
         }

app/src/protyle/render/mermaidRender.ts

@@ -41,15 +41,19 @@ export const mermaidRender = (element: Element, cdn = Constants.PROTYLE_CDN) =>
         }
         window.mermaid.initialize(config);
         if (mermaidElements[0].firstElementChild.clientWidth === 0) {
-            const hideElement = hasClosestByAttribute(mermaidElements[0], "fold", "1");
-            if (!hideElement) {
-                return;
-            }
             const observer = new MutationObserver(() => {
                 initMermaid(mermaidElements);
                 observer.disconnect();
             });
-            observer.observe(hideElement, {attributeFilter: ["fold"]});
+            const hideElement = hasClosestByAttribute(mermaidElements[0], "fold", "1");
+            if (hideElement) {
+                observer.observe(hideElement, {attributeFilter: ["fold"]});
+            } else {
+                const cardElement = hasClosestByClassName(mermaidElements[0], "card__block", true);
+                if (cardElement) {
+                    observer.observe(cardElement, {attributeFilter: ["class"]});
+                }
+            }
         } else {
             initMermaid(mermaidElements);
         }

app/src/protyle/render/mindmapRender.ts

@@ -15,19 +15,11 @@ export const mindmapRender = (element: Element, cdn = Constants.PROTYLE_CDN) =>
         return;
     }
     addScript(`${cdn}/js/echarts/echarts.min.js?v=0.0.0`, "protyleEchartsScript").then(() => {
+        const wysiswgElement = hasClosestByClassName(element, "protyle-wysiwyg", true);
         let width: number = undefined;
-        if (mindmapElements[0].firstElementChild.clientWidth === 0) {
-            const tabElement = hasClosestByClassName(mindmapElements[0], "layout-tab-container", true);
-            if (tabElement) {
-                Array.from(tabElement.children).find(item => {
-                    if (item.classList.contains("protyle") && !item.classList.contains("fn__none") && item.querySelector(".protyle-wysiwyg").firstElementChild) {
-                        width = item.querySelector(".protyle-wysiwyg").firstElementChild.clientWidth;
-                        return true;
-                    }
-                });
-            }
+        if (wysiswgElement && wysiswgElement.clientWidth > 0 && mindmapElements[0].firstElementChild.clientWidth === 0 && wysiswgElement.firstElementChild) {
+            width = wysiswgElement.firstElementChild.clientWidth;
         }
-        const wysiswgElement = hasClosestByClassName(element, "protyle-wysiwyg", true);
         mindmapElements.forEach((e: HTMLDivElement) => {
             if (e.getAttribute("data-render") === "true") {
                 return;