add mermaid story block (for diagrams)

apps/exhibition-live/.storybook/blocks/SBMermaid.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { Mermaid as MdxMermaid } from "mdx-mermaid/Mermaid";
+
+export const SBMermaid = ({ chart }: { chart: string }) => {
+  if (!chart) {
+    return null;
+  }
+  return React.createElement(MdxMermaid, { chart });
+};

apps/exhibition-live/package.json

@@ -208,6 +208,8 @@
     "typescript": "5.1.6",
     "webpack": "^5.75.0",
     "vite": "^5.2.0",
-    "@vitejs/plugin-react-swc": "^3.5.0"
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "mermaid": "^10.9.1",
+    "mdx-mermaid": "^2.0.0"
   }
 }