워크플로
분기/병합 워크플로 — 결제 승인 시나리오. 노드별 색상, animated edge로 진행 강조, dashed edge로 거절 경로 차별화.
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가 비어있을 때 표시 |