Flow Demo Components

FlowBasicDemo

Basic flow diagram with sequential nodes

Step 1
Step 2
Step 3

FlowVerticalDemo

Vertical flow diagram with sequential nodes

Step 1
Step 2
Step 3

FlowVerticalParallelDemo

Vertical flow diagram with parallel branching

Start
Branch A
Branch B
Branch C
End

FlowParallelDemo

Flow diagram with parallel branching

Start
- Branch A1
- Branch A2
Branch B
Branch C
End

FlowCustomContentDemo

Flow diagram with custom node styling using render prop

my-worker

FlowComplexDemo

Complex flow diagram example

HTTP Trigger
Cron Trigger
Process Request
Log Analytics
Update Cache
Send Notification
Complete

FlowAnchorDemo

Flow diagram with custom anchor points

Load balancer
my-worker
Bindings2
DATABASE
OTHER_SERVICE

FlowCenteredDemo

Flow diagram with vertically centered nodes

my-worker
Taller node

FlowPanningDemo

Large flow diagram demonstrating panning

Start
Authenticate
Validate
Transform
Process
Store
Notify
Log
Complete
End

FlowDisabledDemo

Flow diagram with disabled nodes

Request
Primary Handler
Backup Handler (disabled)
Response

FlowParallelAlignEndDemo

Flow diagram with right-aligned parallel nodes

Start
Short
Medium Length
Very Long Node Name
End

FlowParallelNestedListDemo

Flow diagram with parallel branches containing nested node sequences

- Client Users
- Engineering Team Access
- All Authenticated Users
- Client Users
- Site Users
- Contractor Access
Destinations

FlowSequentialParallelDemo

Flow diagram with two parallel groups in sequence, back-to-back

Incoming Request
Validate Headers
Check Auth Token
Write to DB
Update Cache
Return Response

FlowDynamicNodeDemo

Flow diagram with a node that can be added and removed dynamically

Start
End

FlowExpandableDemo

Flow diagram with expandable nodes in a parallel group — click a node to reveal more content

Incoming Request
Route to Origin