;
+
+ const promise = setPromise();
+ cache.set(key, promise);
+ return promise;
+}
+
+function MermaidContent({ chart }: { chart: string }) {
+ const id = useId();
+ const { resolvedTheme } = useTheme();
+ const { default: mermaid } = use(
+ cachePromise("mermaid", () => import("mermaid")),
+ );
+
+ mermaid.initialize({
+ startOnLoad: false,
+ securityLevel: "loose",
+ fontFamily: "inherit",
+ themeCSS: "margin: 1.5rem auto 0;",
+ theme: "default",
+ });
+
+ const { svg, bindFunctions } = use(
+ cachePromise(`${chart}-${resolvedTheme}`, () => {
+ return mermaid.render(id, chart.replaceAll("\\n", "\n"));
+ }),
+ );
+
+ return (
+ {
+ if (container) bindFunctions?.(container);
+ }}
+ dangerouslySetInnerHTML={{ __html: svg }}
+ />
+ );
+}
diff --git a/src/mdx-components.tsx b/src/mdx-components.tsx
index 01d06731..026ac9a2 100644
--- a/src/mdx-components.tsx
+++ b/src/mdx-components.tsx
@@ -16,6 +16,7 @@ import {
WrenchIcon,
} from "lucide-react";
import type { MDXComponents } from "mdx/types";
+import { Mermaid } from "@/components/mdx/mermaid";
import OZWizard from "./components/oz-wizard";
// use this function to get MDX components, you will need it for rendering MDX
@@ -37,6 +38,7 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents {
ShieldCheckIcon,
RefreshCwIcon,
PlugIcon,
+ Mermaid,
...components,
};
}