🎨 https://github.com/siyuan-note/siyuan/issues/13852

app/src/assets/scss/component/_typography.scss

@@ -396,12 +396,7 @@
     [contenteditable="false"] svg {
       border-radius: var(--b3-border-radius);
       max-width: 100%; // https://github.com/siyuan-note/siyuan/issues/11181
-
-      /* 由于会覆盖颜色，先移除看看有没有副作用 https://github.com/siyuan-note/siyuan/issues/7735
-      polygon {
-        fill: var(--b3-theme-on-primary);
-      }
-      */
+      height: 100%; // https://github.com/siyuan-note/siyuan/issues/13852
     }
   }
 

app/src/protyle/render/graphvizRender.ts

@@ -14,7 +14,7 @@ export const graphvizRender = (element: Element, cdn = Constants.PROTYLE_CDN) =>
     if (graphvizElements.length === 0) {
         return;
     }
-    addScript(`${cdn}/js/graphviz/viz.js?v=0.0.0`, "protyleGraphVizScript").then(() => {
+    addScript(`${cdn}/js/graphviz/viz.js?v=3.11.0`, "protyleGraphVizScript").then(() => {
         const wysiswgElement = hasClosestByClassName(element, "protyle-wysiwyg", true);
         graphvizElements.forEach((e: HTMLDivElement) => {
             if (e.getAttribute("data-render") === "true") {
@@ -25,14 +25,9 @@ export const graphvizRender = (element: Element, cdn = Constants.PROTYLE_CDN) =>
             }
             const renderElement = e.firstElementChild.nextElementSibling as HTMLElement;
             try {
-                const blob = new Blob([`importScripts('${(document.getElementById("protyleGraphVizScript") as HTMLScriptElement).src.replace("viz.js", "full.render.js")}');`],
-                    {type: "application/javascript"});
-                const url = window.URL || window.webkitURL;
-                const blobUrl = url.createObjectURL(blob);
-                const worker = new Worker(blobUrl);
-                new Viz({worker})
-                    .renderSVGElement(Lute.UnEscapeHTMLStr(e.getAttribute("data-content"))).then((result: HTMLElement) => {
-                    renderElement.innerHTML = `<span style="position: absolute;left:0;top:0;width: 1px;">${Constants.ZWSP}</span><div contenteditable="false">${result.outerHTML}</div>`;
+                Viz.instance().then((viz) => {
+                    const svgElement = viz.renderSVGElement(Lute.UnEscapeHTMLStr(e.getAttribute("data-content")));
+                    renderElement.innerHTML = `<span style="position: absolute;left:0;top:0;width: 1px;">${Constants.ZWSP}</span><div contenteditable="false">${svgElement.outerHTML}</div>`;
                 }).catch((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>`;
                 });

app/src/types/protyle.d.ts

@@ -125,9 +125,9 @@ interface ILuteOptions extends IMarkdownConfig {
 }
 
 declare class Viz {
-    constructor(worker: { worker: Worker });
+    public static instance(): Promise<Viz>;
 
-    renderSVGElement: (code: string) => Promise<any>;
+    renderSVGElement: (code: string) => SVGElement;
 }
 
 declare class Viewer {