implement svg zoom for mermaid diagram visualization

packages/ui/package.json

@@ -14,7 +14,6 @@
     "clean": "rimraf dist tsconfig.tsbuildinfo",
     "prepack": "pnpm build"
   },
-  "dependencies": {},
   "devDependencies": {
     "@fontsource/roboto": "^5.0.8",
     "@nomicfoundation/ignition-core": "workspace:^",
@@ -32,6 +31,7 @@
     "react-router-dom": "6.11.0",
     "react-tooltip": "^5.21.4",
     "styled-components": "5.3.10",
+    "svg-pan-zoom": "^3.6.1",
     "vite": "^5.0.0",
     "vite-plugin-singlefile": "^2.0.1"
   }

packages/ui/src/components/mermaid.tsx

@@ -1,11 +1,13 @@
 import React, { useEffect, useMemo } from "react";
 import styled from "styled-components";
+import svgPanZoom from "svg-pan-zoom";
 
 import {
   IgnitionModule,
   IgnitionModuleResult,
 } from "@nomicfoundation/ignition-core/ui-helpers";
 import mermaid from "mermaid";
+
 import { toMermaid } from "../utils/to-mermaid";
 
 export const Mermaid: React.FC<{
@@ -23,6 +25,7 @@ export const Mermaid: React.FC<{
 
   useEffect(() => {
     mermaid.initialize({
+      maxTextSize: 500000,
       flowchart: {
         padding: 50,
       },
@@ -31,6 +34,20 @@ export const Mermaid: React.FC<{
     mermaid.contentLoaded();
   });
 
+  // requestAnimationFrame is used to ensure that the svgPanZoom is called after the svg is rendered
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      setTimeout(() => {
+        svgPanZoom(".mermaid > svg", {
+          zoomEnabled: true,
+          controlIconsEnabled: true,
+          fit: true,
+          center: true,
+        });
+      }, 0);
+    });
+  });
+
   return (
     <Wrap>
       <div className="mermaid">{diagram}</div>

packages/ui/src/main.css

@@ -45,11 +45,24 @@ body {
 
 /* mermaid styles */
 
+.mermaid {
+  background: #fbfbfb;
+}
+
 .mermaid * {
   font-family: "Roboto", sans-serif;
   font-size: 30px;
 }
 
+.mermaid svg {
+  height: 300px;
+  vertical-align: middle;
+}
+
+.mermaid span {
+  cursor: default;
+}
+
 .mermaid rect {
   rx: 5;
   ry: 5;