image captions and Mermaid responsive styles, rewrite blog content for

clarity
2026-05-18 17:08:21 +08:00
parent 24c2545b13
commit 01d7d2ed2a
5 changed files with 237 additions and 2028 deletions
@@ -17,3 +17,52 @@
            });
    });
 </script>
+
+<!-- Mermaid config + viewBox fix -->
+<script>
+    (function () {
+        function patch() {
+            if (typeof mermaid === "undefined") return setTimeout(patch, 50);
+            var orig = mermaid.initialize;
+            mermaid.initialize = function (cfg) {
+                cfg = cfg || {};
+                cfg.flowchart = cfg.flowchart || {};
+                cfg.flowchart.useMaxWidth = true;
+                cfg.flowchart.wrappingWidth = 180;
+                cfg.theme = "neutral";
+                return orig.call(this, cfg);
+            };
+        }
+        patch();
+
+        // Fix oversized viewBox on flowcharts
+        function fixViewBox() {
+            document.querySelectorAll(".mermaid svg").forEach(function (svg) {
+                var vb = svg.getAttribute("viewBox");
+                if (!vb) return;
+                var p = vb.split(" ").map(Number);
+                if (p.length !== 4) return;
+                var h = p[3],
+                    w = p[2];
+                if (h < 600 && w < 800) return;
+                var g = svg.querySelector("g");
+                if (!g) return;
+                var bb = g.getBBox();
+                if (bb.width === 0 && bb.height === 0)
+                    return setTimeout(fixViewBox, 200);
+                var pad = 20;
+                svg.setAttribute(
+                    "viewBox",
+                    [
+                        bb.x - pad,
+                        bb.y - pad,
+                        bb.width + pad * 2,
+                        bb.height + pad * 2,
+                    ].join(" "),
+                );
+            });
+        }
+        setTimeout(fixViewBox, 600);
+        setTimeout(fixViewBox, 1200);
+    })();
+</script>