import { useEffect, useRef } from 'react'
import mermaid from 'mermaid'
interface DiagramRendererProps {
mermaidCode: string
className?: string
}
export default function DiagramRenderer({ mermaidCode, className = '' }: DiagramRendererProps) {
const ref = useRef<HTMLDivElement>(null)
useEffect(() => {
if (!ref.current || !mermaidCode) return
mermaid.initialize({
startOnLoad: true,
theme: 'dark',
securityLevel: 'loose',
})
const id = `mermaid-${Date.now()}`
ref.current.innerHTML = ''
mermaid.render(id, mermaidCode).then((result) => {
if (ref.current) {
ref.current.innerHTML = result.svg
}
}).catch((error) => {
console.error('Mermaid rendering error:', error)
if (ref.current) {
ref.current.innerHTML = `<div class="text-red-500 p-4">Error rendering diagram: ${error.message}</div>`
}
})
}, [mermaidCode])
return (
<div className={`bg-white rounded-lg p-4 overflow-auto ${className}`}>
<div ref={ref} className="mermaid-container"></div>
</div>
)
}
export { DiagramRenderer }
