React Flow

React Flow Learn · React Flow UI 기준.

적용 시점

• @xyflow/react로 인터랙티브 플로우/다이어그램을 새로 만들거나 수정할 때
• 커스텀 노드·엣지, 그룹/서브플로우, 레이아웃, 상태 연동을 설계·리뷰할 때
• React Flow UI(shadcn) 컴포넌트를 도입·커스터마이즈할 때

패키지·설치

npm install @xyflow/react

• 패키지명은 @xyflow/react (구 reactflow 아님)
• CSS 필수: @xyflow/react/dist/style.css
• 부모 컨테이너에 width·height 필수 (100% 또는 고정 px)