@alauda/doom/lib/runtime/components/Mermaid.js

Doctor Doom making docs.

import { jsx as _jsx } from "react/jsx-runtime";
import { useDark } from '@rspress/core/runtime';
import { clsx } from 'clsx';
import mermaid from 'mermaid';
import { useEffect, useId, useRef } from 'react';
export const Mermaid = ({ className, children }) => {
    const id = useId();
    const isDark = useDark();
    const containerRef = useRef(null);
    useEffect(() => {
        const container = containerRef.current;
        mermaid.initialize({ theme: isDark ? 'dark' : 'default' });
        const render = async () => {
            const { svg, diagramType, bindFunctions } = await mermaid.render(`mermaid-${id.slice(1, -1)}`, children);
            container.classList.add(diagramType);
            container.innerHTML = svg;
            bindFunctions?.(container);
        };
        void render();
    }, [children, id, isDark]);
    return (_jsx("div", { ref: containerRef, id: id, className: clsx('doom-mermaid', className) }));
};
export default Mermaid;