Something went wrong. Try again.
A lexicon-driven AppView for ATProto.
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354'use client';
import { use, useEffect, useId, useState } from 'react';import { useTheme } from 'next-themes';
const cache = new Map<string, Promise<unknown>>();
function cachePromise<T>(key: string, fn: () => Promise<T>): Promise<T> { const cached = cache.get(key); if (cached) return cached as Promise<T>; const promise = fn(); cache.set(key, promise); return promise;}
export function Mermaid({ chart }: { chart: string }) { const [mounted, setMounted] = useState(false); useEffect(() => { setMounted(true); }, []); if (!mounted) return null; return <MermaidContent chart={chart} />;}
function MermaidContent({ chart }: { chart: string }) { const id = useId().replace(/:/g, '_'); const { resolvedTheme } = useTheme(); const { default: mermaid } = use( cachePromise('mermaid', () => import('mermaid')), );
mermaid.initialize({ startOnLoad: false, securityLevel: 'strict', fontFamily: 'inherit', theme: resolvedTheme === 'dark' ? 'dark' : 'default', });
const { svg, bindFunctions } = use( cachePromise(`${chart}-${resolvedTheme}`, () => mermaid.render(id, chart.replaceAll('\\n', '\n')), ), );
return ( <div ref={(container) => { if (container) bindFunctions?.(container); }} dangerouslySetInnerHTML={{ __html: svg }} /> );}