FlowEdge
An SVG edge with bezier/straight/smoothstep paths, an arrowhead, an optional label, and animation.
Category: display · WCAG 2.1-AA · flow, edge, connector, animated, svg
Variants
- bezier
- straight
- smoothstep
States
- default
- selected
- animated
Props
| Prop | Type | Default | Description |
|---|---|---|---|
sourceX | number | — | Source anchor x (flow coords). |
sourceY | number | — | Y coordinate of the edge’s source point. |
targetX | number | — | X coordinate of the edge’s target point. |
targetY | number | — | Y coordinate of the edge’s target point. |
type | 'bezier' | 'straight' | 'smoothstep' | bezier | Edge path style ('bezier' | 'straight' | 'smoothstep'). |
animated | boolean | false | When true, animates the edge path (dashed flow). |
label | ReactNode | — | Text label for the control. |
selected | boolean | false | Whether the edge is rendered as selected. |
markerStart | boolean | false | Arrowhead at the source (points back toward the source) — set both for bidirectional. |
markerEnd | boolean | true | Arrowhead at the target. Set false for an undirected line. |
className | string | — | Additional CSS class names merged onto the root element. |
active | boolean | undefined | — | Highlight the edge (used by FlowStory's active step). |
direction | 'forward' | 'reverse' | undefined | 'forward' | Direction the dash travels when animated. |
id | string | — | Edge identifier, used to target it via `activeEdgeId`. |
sourcePosition | HandlePosition | undefined | 'right' | Handle side the edge leaves from. |
targetPosition | HandlePosition | undefined | 'left' | Handle side the edge arrives at. |
Design tokens
--cascivo-color-border-strong--cascivo-color-accent--cascivo-color-surface
When to use
- Connecting two nodes with a directed path and arrowhead
- Animating flow direction along a connection ("marching ants")
When not to use
- For undirected relationships where an arrowhead would mislead — set markerEnd={false}
Examples
Edge path types
Bezier, straight, smoothstep, and an animated edge.
() => (
<div style={{ position: 'relative', height: 220 }}>
<FlowEdge sourceX={20} sourceY={30} targetX={260} targetY={30} type="bezier" label="bezier" />
<FlowEdge sourceX={20} sourceY={90} targetX={260} targetY={90} type="smoothstep" label="step" />
<FlowEdge sourceX={20} sourceY={150} targetX={260} targetY={150} animated label="animated" />
</div>
)Arrow direction
Forward (default), backward, bidirectional, or undirected — via markerStart/markerEnd.
() => (
<div style={{ position: 'relative', height: 260 }}>
<FlowEdge sourceX={20} sourceY={30} targetX={260} targetY={30} label="forward" />
<FlowEdge sourceX={20} sourceY={90} targetX={260} targetY={90} markerEnd={false} markerStart label="backward" />
<FlowEdge sourceX={20} sourceY={150} targetX={260} targetY={150} markerStart label="both" />
<FlowEdge sourceX={20} sourceY={210} targetX={260} targetY={210} markerEnd={false} label="undirected" />
</div>
)