wip: mermaid

client/package.json

@@ -86,10 +86,12 @@
     "react-speech-recognition": "^3.10.0",
     "react-textarea-autosize": "^8.4.0",
     "react-transition-group": "^4.4.5",
+    "react-zoom-pan-pinch": "^3.6.1",
     "recoil": "^0.7.7",
     "regenerator-runtime": "^0.14.1",
     "rehype-highlight": "^6.0.0",
     "rehype-katex": "^6.0.2",
+    "rehype-mermaid": "^2.1.0",
     "rehype-raw": "^7.0.0",
     "remark-directive": "^3.0.0",
     "remark-gfm": "^4.0.0",

client/src/components/Artifacts/Mermaid.tsx

@@ -0,0 +1,33 @@
+import React, { useEffect, useRef } from 'react';
+import mermaid from 'mermaid';
+
+interface MermaidProps {
+  chart: string;
+}
+
+const Mermaid: React.FC<MermaidProps> = ({ chart }) => {
+  const mermaidRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    mermaid.initialize({
+      startOnLoad: true,
+      theme: 'default',
+      securityLevel: 'strict',
+    });
+    mermaid.contentLoaded();
+  }, []);
+
+  useEffect(() => {
+    if (chart && mermaidRef.current) {
+      mermaid.render('mermaid-svg', chart).then((svgCode) => {
+        if (mermaidRef.current) {
+          mermaidRef.current.innerHTML = svgCode.svg;
+        }
+      });
+    }
+  }, [chart]);
+
+  return <div ref={mermaidRef} />;
+};
+
+export default Mermaid;