커스텀 엣지
커스텀 edge — `edgeTypes` prop에 path 함수 등록 ({sourceX, sourceY, targetX, targetY, ...} → SVG path d). 여기선 wavy(사인파)와 arc(반원) 두 가지 사용자 정의.
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가 비어있을 때 표시 |