MermaidDiagram MermaidDiagram.tsx

100% Statements 12/12

50% Branches 1/2

100% Functions 3/3

100% Lines 12/12

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31  
 
 
 
 
 
 
1x
2x
 
2x
2x
2x
2x
2x
2x
1x
 
1x
 
 
 
 
2x
 
 
2x
 
 
 
  import React, { useEffect, useRef } from "react";
import mermaid from "mermaid";
 
interface MermaidDiagramProps {
  code: string;
}
 
const MermaidDiagram: React.FC<MermaidDiagramProps> = ({ code }) => {
  const diagramRef = useRef<HTMLDivElement>(null);
 
  useEffect(() => {
    const renderDiagram = async () => {
      const cleanedCode = code.replace(/^```mermaid\n?|```$/g, "").trim();
      Eif (diagramRef.current) {
        try {
          const { svg } = await mermaid.render("mermaidId", cleanedCode);
          diagramRef.current.innerHTML = svg;
        } catch (error) {
          console.error("Mermaid diagram rendering error:", error);
        }
      }
    };
 
    renderDiagram();
  }, [code]);
 
  return <div ref={diagramRef} className="mermaid-diagram-container" />;
};
 
export default MermaidDiagram;