From a49f05e8df2e46543946abd70e8caf4205c25e94 Mon Sep 17 00:00:00 2001
From: Vectry <hunter@repi.fun>
Date: Mon, 9 Feb 2026 18:55:15 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20clean=20up=20mermaid=20diagram=20renderi?=
 =?UTF-8?q?ng=20=E2=80=94=20separate=20dangerouslySetInnerHTML=20from=20ch?=
 =?UTF-8?q?ildren?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/components/mermaid-diagram.tsx | 40 ++++++++++++---------
 1 file changed, 23 insertions(+), 17 deletions(-)

diff --git a/apps/web/src/components/mermaid-diagram.tsx b/apps/web/src/components/mermaid-diagram.tsx
index 55fdc58..fa8a549 100644
--- a/apps/web/src/components/mermaid-diagram.tsx
+++ b/apps/web/src/components/mermaid-diagram.tsx
@@ -9,7 +9,6 @@ interface MermaidDiagramProps {
 }
 
 export function MermaidDiagram({ chart }: MermaidDiagramProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
   const [error, setError] = useState<string | null>(null);
   const [isReady, setIsReady] = useState(false);
   const [svgHtml, setSvgHtml] = useState<string>("");
@@ -184,22 +183,29 @@ export function MermaidDiagram({ chart }: MermaidDiagramProps) {
       onMouseLeave={handleMouseUp}
       style={fullHeight ? { height: "100%" } : { minHeight: "100px" }}
     >
-      <div
-        className="mermaid-diagram flex items-center justify-center"
-        style={{
-          transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
-          transformOrigin: "center center",
-          transition: isPanning ? "none" : "transform 0.15s ease-out",
-          minHeight: fullHeight ? "100%" : "100px",
-        }}
-        dangerouslySetInnerHTML={svgHtml ? { __html: svgHtml } : undefined}
-      >
-        {!svgHtml && !isReady && (
-          <div className="flex items-center justify-center py-8">
-            <div className="w-6 h-6 border-2 border-blue-500/30 border-t-blue-500 rounded-full animate-spin" />
-          </div>
-        )}
-      </div>
+      {svgHtml ? (
+        <div
+          className="mermaid-diagram flex items-center justify-center"
+          style={{
+            transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
+            transformOrigin: "center center",
+            transition: isPanning ? "none" : "transform 0.15s ease-out",
+            minHeight: fullHeight ? "100%" : "100px",
+          }}
+          dangerouslySetInnerHTML={{ __html: svgHtml }}
+        />
+      ) : (
+        <div
+          className="mermaid-diagram flex items-center justify-center"
+          style={{ minHeight: fullHeight ? "100%" : "100px" }}
+        >
+          {!isReady && (
+            <div className="flex items-center justify-center py-8">
+              <div className="w-6 h-6 border-2 border-blue-500/30 border-t-blue-500 rounded-full animate-spin" />
+            </div>
+          )}
+        </div>
+      )}
     </div>
   );