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>
   );