This example demonstrates a simple flow diagram with three nodes and two edges, showing how nodes can be connected and how edges can be animated.
- Input Node – starting point
- Default Node – standard content node
- Output Node – endpoint of the flow
- Input → Default (animated)
- Default → Output
- Nodes can be moved
- Edges update dynamically
- Users can drag from handles to create new edges
- Zoom, pan, and mini-map controls are available
- Flow fits viewport automatically
- Background grid for orientation
- Light and dark color modes supported