Create StunningGraph Visualizationswith Zero Effort

import { Graph } from 'diagrammatic-ui'

function MyDiagram() {
  // Define your graph data
  const graphData = {
    nodes: [
      { id: 'node1', name: 'Node 1', type: 'component' },
      { id: 'node2', name: 'Node 2', type: 'service' },
      { id: 'node3', name: 'Node 3', type: 'model' },
      { id: 'node4', name: 'Node 4', type: 'component' },
      { id: 'node5', name: 'Node 5', type: 'context' },
    ],
    edges: [
      { id: 'edge1', source: 'node1', target: 'node2' },
      { id: 'edge2', source: 'node2', target: 'node3' },
      { id: 'edge3', source: 'node3', target: 'node4' },
      { id: 'edge4', source: 'node4', target: 'node5' },
      { id: 'edge5', source: 'node5', target: 'node1' },
    ]
  };

  return (
    <Graph
      data={graphData}
      height={500}
      theme="light"
      onNodeClick={(nodeId) => console.log('Clicked:', nodeId)}
    />
  );
}