diff --git a/documentation/src/components/mdx/mermaid.tsx b/documentation/src/components/mdx/mermaid.tsx
new file mode 100644
index 0000000..cf7724b
--- /dev/null
+++ b/documentation/src/components/mdx/mermaid.tsx
@@ -0,0 +1,56 @@
+'use client';
+
+import { use, useEffect, useId, useState } from 'react';
+import { useTheme } from 'next-themes';
+
+export function Mermaid({ chart }: { chart: string }) {
+	const [mounted, setMounted] = useState(false);
+
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+
+	if (!mounted) return;
+	return <MermaidContent chart={chart} />;
+}
+
+const cache = new Map<string, Promise<unknown>>();
+
+function cachePromise<T>(key: string, setPromise: () => Promise<T>): Promise<T> {
+	const cached = cache.get(key);
+	if (cached) return cached as Promise<T>;
+
+	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: resolvedTheme === 'dark' ? 'dark' : 'default',
+	});
+
+	const { svg, bindFunctions } = use(
+		cachePromise(`${chart}-${resolvedTheme}`, () => {
+			return mermaid.render(id, chart.replaceAll('\\n', '\n'));
+		}),
+	);
+
+	return (
+		<div
+			ref={(container) => {
+				if (container) bindFunctions?.(container);
+			}}
+			// biome-ignore lint/security/noDangerouslySetInnerHtml: conform usage
+			dangerouslySetInnerHTML={{ __html: svg }}
+		/>
+	);
+}
\ No newline at end of file