Function MermaidBlock

projects/web/src/components/MarkdownMessage.tsx:596–651

({
    block,
    selectedRange,
    density,
}: { block: Extract<MarkdownBlock, { type: "code" }>; selectedRange: { start: number; end: number } | null; density: MarkdownMessageDensity })

}

function MermaidBlock({
    block,
    selectedRange,
    density,
}: { block: Extract<MarkdownBlock, { type: "code" }>; selectedRange: { start: number; end: number } | null; density: MarkdownMessageDensity }) {
    const ref = useRef<HTMLDivElement | null>(null)
    const theme = useEditorTheme(ref)
    const [svg, setSvg] = useState<string | null>(null)
    const [error, setError] = useState<string | null>(null)

    useEffect(() => {
        let cancelled = false
        const id = `openade-mermaid-${++mermaidDiagramId}`
        setSvg(null)
        setError(null)

        mermaid.initialize({
            startOnLoad: false,
            securityLevel: "strict",
            theme: normalizeShikiTheme(theme) === "github-light" || normalizeShikiTheme(theme) === "light-plus" ? "default" : "dark",
        })

        mermaid
            .render(id, block.text)
            .then((result) => {
                if (!cancelled) setSvg(sanitizeHtml(result.svg))
            })
            .catch((err) => {
                if (!cancelled) setError(err instanceof Error ? err.message : "Unable to render diagram")
            })

        return () => {
            cancelled = true
        }
    }, [block.text, theme])

    const props = rangeProps(block.startLine, block.endLine, selectedRange)

    return (
        <div ref={ref} {...props} className={cx(props.className, "group/diagram relative my-2 border border-border bg-base-200 p-3")}>
            <CopyButton
                content={block.text}
                label="Copy diagram"
                className="absolute top-2 right-2 z-10 opacity-0 transition-opacity group-hover/diagram:opacity-100 group-focus-within/diagram:opacity-100"
            />
            {svg ? (
                // biome-ignore lint/security/noDangerouslySetInnerHtml: Mermaid renders SVG markup for diagram output.
                <div className="overflow-x-auto [&_svg]:mx-auto [&_svg]:max-w-full" dangerouslySetInnerHTML={{ __html: svg }} />
            ) : error ? (
                <HighlightedCodeBlock block={block} selectedRange={selectedRange} density={density} />
            ) : (
                <div className="text-sm text-muted">Rendering diagram…</div>
            )}
        </div>
    )
}

function renderedMarkdownClass(density: MarkdownMessageDensity) {