From 55e1d04fed455f2f83e0aa33da50af973f28183e Mon Sep 17 00:00:00 2001
From: Winzlieb <winzlieb@c3d2.de>
Date: Thu, 8 Aug 2024 12:18:17 +0200
Subject: [PATCH] add mermaid story block (for diagrams)

---
 apps/exhibition-live/.storybook/blocks/SBMermaid.tsx | 9 +++++++++
 apps/exhibition-live/package.json                    | 4 +++-
 2 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 apps/exhibition-live/.storybook/blocks/SBMermaid.tsx

diff --git a/apps/exhibition-live/.storybook/blocks/SBMermaid.tsx b/apps/exhibition-live/.storybook/blocks/SBMermaid.tsx
new file mode 100644
index 00000000..daee130d
--- /dev/null
+++ b/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 });
+};
diff --git a/apps/exhibition-live/package.json b/apps/exhibition-live/package.json
index e259d912..c08b2360 100644
--- a/apps/exhibition-live/package.json
+++ b/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"
   }
 }