From 8035eabb859d8adde4c972592ecf3a37253829cb Mon Sep 17 00:00:00 2001
From: NtskwK <natsukawa247@outlook.com>
Date: Thu, 26 Mar 2026 09:38:29 +0800
Subject: chore(docs): refactor Mermaid component and clean up imports in
 documentation pages

---
 packages/docs/app/components/mermaid.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(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 2df47cc..85ab342 100644
--- a/packages/docs/app/components/mermaid.tsx
+++ b/packages/docs/app/components/mermaid.tsx
@@ -17,7 +17,7 @@ export function Mermaid({ chart }: { chart: string }) {
         nodes: [ref.current],
       });
     }
-  }, [chart]);
+  }, []);
 
   return (
     <div className="not-prose my-6">
-- 
cgit v1.2.3-70-g09d2


From 8f2f72a857083122bce14277089ebccd64312061 Mon Sep 17 00:00:00 2001
From: NtskwK <natsukawa247@outlook.com>
Date: Thu, 26 Mar 2026 10:00:35 +0800
Subject: fix(mermaid): update chart dependency in effect

---
 packages/docs/app/components/mermaid.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(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 85ab342..d408aad 100644
--- a/packages/docs/app/components/mermaid.tsx
+++ b/packages/docs/app/components/mermaid.tsx
@@ -13,11 +13,12 @@ export function Mermaid({ chart }: { chart: string }) {
 
   useEffect(() => {
     if (ref.current) {
+      ref.current.innerHTML = chart;
       mermaid.run({
         nodes: [ref.current],
       });
     }
-  }, []);
+  }, [chart]);
 
   return (
     <div className="not-prose my-6">
-- 
cgit v1.2.3-70-g09d2


From 14832b994f2ad504c70f5e101ddfa96018e657d6 Mon Sep 17 00:00:00 2001
From: NtskwK <natsukawa247@outlook.com>
Date: Thu, 26 Mar 2026 10:08:23 +0800
Subject: chore(docs): refactor Mermaid component to render charts
 asynchronously and improve security

---
 packages/docs/app/components/mermaid.tsx | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 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 d408aad..04d89d9 100644
--- a/packages/docs/app/components/mermaid.tsx
+++ b/packages/docs/app/components/mermaid.tsx
@@ -6,25 +6,36 @@ import { useEffect, useRef } from "react";
 mermaid.initialize({
   startOnLoad: false,
   theme: "default",
+  securityLevel: "strict",
 });
 
 export function Mermaid({ chart }: { chart: string }) {
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    if (ref.current) {
-      ref.current.innerHTML = chart;
-      mermaid.run({
-        nodes: [ref.current],
-      });
-    }
+    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 = "";
+        }
+      }
+    };
+
+    renderChart();
   }, [chart]);
 
   return (
     <div className="not-prose my-6">
-      <div ref={ref} className="mermaid">
-        {chart}
-      </div>
+      <div ref={ref} className="mermaid" />
     </div>
   );
 }
-- 
cgit v1.2.3-70-g09d2


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


From d69e408ece77d011d7097a711636f7edf9b0756c Mon Sep 17 00:00:00 2001
From: NtskwK <natsukawa247@outlook.com>
Date: Thu, 26 Mar 2026 10:22:16 +0800
Subject: fix(mermaid): prevent memory leak on unmount

---
 packages/docs/app/components/mermaid.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

(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 3a54a04..fe153ec 100644
--- a/packages/docs/app/components/mermaid.tsx
+++ b/packages/docs/app/components/mermaid.tsx
@@ -13,10 +13,12 @@ export function Mermaid({ chart }: { chart: string }) {
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
+    let current = true;
     const id = `mermaid-${Math.random().toString(36).slice(2, 9)}`;
     mermaid
       .render(id, chart)
       .then(({ svg }) => {
+        if (!current) return;
         const parser = new DOMParser();
         const doc = parser.parseFromString(svg, "image/svg+xml");
         const svgEl = doc.querySelector("svg");
@@ -25,8 +27,11 @@ export function Mermaid({ chart }: { chart: string }) {
         }
       })
       .catch(() => {
-        ref.current?.replaceChildren();
+        if (current) ref.current?.replaceChildren();
       });
+    return () => {
+      current = false;
+    };
   }, [chart]);
 
   return (
-- 
cgit v1.2.3-70-g09d2

