mermaid render

import { useEffect, useRef } from "react";
import mermaid from "mermaid";

export default function MermaidRenderer({ text = "" }) {
  const mermaidRef = useRef(null);

  useEffect(() => {
    if (!text.trim()) {
      return
    }
    mermaid.initialize({
      startOnLoad: false,
      theme: "default",
      securityLevel: "loose",
    });

    if (mermaidRef.current && text.trim()) {
      mermaidRef.current.innerHTML = text;
      mermaid.init(undefined, mermaidRef.current);
    }
  }, [text]);

  return (
    <div className="mermaid w-full h-full overflow-hidden" ref={mermaidRef}>
    </div>
  );
}