fix: clean up mermaid diagram rendering — separate dangerouslySetInnerHTML from children

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,6 +183,7 @@ export function MermaidDiagram({ chart }: MermaidDiagramProps) {
       onMouseLeave={handleMouseUp}
       style={fullHeight ? { height: "100%" } : { minHeight: "100px" }}
     >
+      {svgHtml ? (
         <div
           className="mermaid-diagram flex items-center justify-center"
           style={{
@@ -192,14 +192,20 @@ export function MermaidDiagram({ chart }: MermaidDiagramProps) {
             transition: isPanning ? "none" : "transform 0.15s ease-out",
             minHeight: fullHeight ? "100%" : "100px",
           }}
-        dangerouslySetInnerHTML={svgHtml ? { __html: svgHtml } : undefined}
+          dangerouslySetInnerHTML={{ __html: svgHtml }}
+        />
+      ) : (
+        <div
+          className="mermaid-diagram flex items-center justify-center"
+          style={{ minHeight: fullHeight ? "100%" : "100px" }}
         >
-        {!svgHtml && !isReady && (
+          {!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>
   );