Basic Flow Example

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