Flow Visualizer
See your data flow in real-time
Wire thickness and color respond instantly to message throughput and payload size. No more debugging in the dark.
The Problem We Discovered
"My flow is running but I don't know what's actually happening. Messages are flowing somewhere but I can't see where or how much."
We watched hundreds of users stare at static gray wires, adding debug nodes everywhere just to understand their own workflows. They'd trigger flows and hope for the best, unable to see bottlenecks, unexpected paths, or load distribution.
Production flows were black boxes. Debug nodes cluttered the canvas. Teams couldn't demonstrate workflows effectively because viewers couldn't see the actual data movement.
Visual Feedback, Instantly
What It Does:
- Thickness = Volume: Wires grow from 3px to 20px based on message throughput
- Color = Pressure: Gray → Blue → Pink → Purple showing combined load
- Real-time Response: 200ms transitions, smooth animations
- Auto-decay: Wires return to baseline when traffic stops
- Zero Config: Works immediately, toggle with toolbar button
Technical Details:
- Combines message count (70%) and payload size (30%) into unified pressure metric
- CSS-based rendering for zero runtime overhead
- Editor-only visualization (no impact on runtime performance)
- Supports link nodes and complex routing
Watch Your Workflows Come Alive
Scenario 1: Normal Operation
- Thin gray wires at idle
- Blue pulse when message passes
- Returns to gray after 2-3 seconds
Scenario 2: High Traffic
- Thick purple wire on main path
- Medium pink on secondary routes
- Thin blue on error paths
- Instantly shows load distribution
Scenario 3: Debugging
- Unexpected thick wire reveals hidden loop
- Dead gray wires show broken connections
- Color gradient identifies bottlenecks
Get Started in 30 Seconds
# Quick install cd ~/.node-red npm install --registry https://npm.fierylab.io @fiery-lab/fiery-contrib-flow-visualizer node-red-restart # Or add our registry permanently echo "@fiery-lab:registry=https://npm.fierylab.io" >> ~/.npmrc npm install @fiery-lab/fiery-contrib-flow-visualizer
First Use:
- Look for the eye icon in toolbar (left of Deploy)
- Icon is blue when enabled (default)
- Trigger any flow to see visualization
- Click icon to toggle on/off
Fine-tune If Needed
Most users never need to change these defaults:
| Setting | Default | What It Does |
|---|---|---|
| Max Thickness | 20px | Maximum wire size at peak traffic |
| Transition Speed | 200ms | Animation smoothness |
| Decay Rate | 0.85 | How quickly wires return to baseline |
| Aggregation | 250ms | Update frequency to editor |
Color Scale:
- Idle:
#999999(Gray) - Low:
#78BFDD(Sky Blue) - Medium:
#C84579(Pink) - High:
#6A2A7F(Purple)