플로우 차트
플로우 차트 — SVG 기반 노드-엣지 그래프. 내장 4종 edge(straight/bezier/step/smoothstep) + 사용자가 path 함수를 등록해 임의 모양 edge 추가. 마우스 드래그로 캔버스 pan 가능.
API
FlowChartProps
| Property | Type | 기본값 | 설명 |
|---|---|---|---|
| nodes | FlowNode[] | 필수 | 노드 배열. 각 노드: { id, label?, x, y, width?, height?, fill?, stroke?, textColor? } |
| edges | FlowEdge[] | 필수 | 엣지 배열. { source, target, type?, label?, color?, animated?, dashed?, arrow?, sourcePosition?, targetPosition? } |
| edgeTypes | Record<string, FlowEdgePathFn> | {} | 사용자 정의 edge path. (sourceX, sourceY, targetX, targetY, ...) → SVG path d 문자열 반환 |
| height | number | 400 | SVG 캔버스 높이(px) |
| pannable | boolean | true | 마우스 드래그로 캔버스 pan 가능 여부 |
| showGrid | boolean | true | 배경 dot grid 표시 |
| className | string | - | 외부 wrapper className |
| emptyState | ReactNode | - | nodes가 비어있을 때 표시 |