From 62d8c7c5c3bc36fbaa1bfba099e3bf04a00c300d Mon Sep 17 00:00:00 2001
From: NtskwK <natsukawa247@outlook.com>
Date: Thu, 26 Mar 2026 10:18:46 +0800
Subject: refactor(mermaid): improve svg rendering with DOMParser

---
 packages/docs/app/components/mermaid.tsx | 30 +++++++++++++-----------------
 1 file changed, 13 insertions(+), 17 deletions(-)

(limited to 'packages/docs/app/components/mermaid.tsx')

diff --git a/packages/docs/app/components/mermaid.tsx b/packages/docs/app/components/mermaid.tsx
index 04d89d9..3a54a04 100644
--- a/packages/docs/app/components/mermaid.tsx
+++ b/packages/docs/app/components/mermaid.tsx
@@ -13,24 +13,20 @@ export function Mermaid({ chart }: { chart: string }) {
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    const renderChart = async () => {
-      if (!ref.current) return;
-
-      try {
-        const id = `mermaid-${Math.random().toString(36).slice(2, 9)}`;
-        const { svg } = await mermaid.render(id, chart);
-        // Use innerHTML with sanitized SVG from mermaid.render
-        // biome-disable-next-line security/noInnerHtml
-        ref.current.innerHTML = svg;
-      } catch {
-        // Invalid chart definition, render nothing
-        if (ref.current) {
-          ref.current.innerHTML = "";
+    const id = `mermaid-${Math.random().toString(36).slice(2, 9)}`;
+    mermaid
+      .render(id, chart)
+      .then(({ svg }) => {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(svg, "image/svg+xml");
+        const svgEl = doc.querySelector("svg");
+        if (ref.current && svgEl) {
+          ref.current.replaceChildren(svgEl);
         }
-      }
-    };
-
-    renderChart();
+      })
+      .catch(() => {
+        ref.current?.replaceChildren();
+      });
   }, [chart]);
 
   return (
-- 
cgit v1.2.3-70-g09d2

