AI 채팅을 넘어선 캔버스 인터페이스: React Flow 기반 동적 마인드맵 & 비주얼 다이어그램 생성기

import React, { useCallback } from "react";
import { ReactFlow, addEdge, Background, Controls, useNodesState, useEdgesState } from "@xyflow/react";
import "@xyflow/react/dist/style.css";
import dagre from "dagre";

// Dagre 기반 노드 자동 레이아웃 함수
export function getLayoutedElements(nodes: any[], edges: any[], direction = "TB") {
  const dagreGraph = new dagre.graphlib.Graph();
  dagreGraph.setDefaultEdgeLabel(() => ({}));
  dagreGraph.setGraph({ rankdir: direction, ranksep: 60, nodesep: 40 });

  nodes.forEach((node) => dagreGraph.setNode(node.id, { width: 180, height: 60 }));
  edges.forEach((edge) => dagreGraph.setEdge(edge.source, edge.target));
  dagre.layout(dagreGraph);

  const layoutedNodes = nodes.map((node) => {
    const nodeWithPosition = dagreGraph.node(node.id);
    return {
      ...node,
      position: { x: nodeWithPosition.x - 90, y: nodeWithPosition.y - 30 },
    };
  });

  return { nodes: layoutedNodes, edges };
}

export default function GenerativeMindmap({ initialNodes, initialEdges }: any) {
  const { nodes: layoutedN, edges: layoutedE } = getLayoutedElements(initialNodes, initialEdges);
  const [nodes, setNodes, onNodesChange] = useNodesState(layoutedN);
  const [edges, setEdges, onEdgesChange] = useEdgesState(layoutedE);

  return (
    <div className="h-[600px] w-full rounded-2xl border border-zinc-200 bg-zinc-50 shadow-inner">
      <ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} fitView>
        <Background color="#cbd5e1" gap={16} />
        <Controls />
      </ReactFlow>
    </div>
  );
}