“My flow is running but I don’t know what’s actually happening.”
We heard this exact phrase from a print operator during a JobFlow Pro demo. They had a flow with 40 nodes processing PDFs. The canvas looked clean. Wires connected everything logically. But when they hit “Deploy,” nothing visible changed.
Were messages flowing? Which paths were active? Was that switch node working correctly? The only way to know was to open the debug panel and scroll through hundreds of log entries.
The Problem with Debug Panels
Debug panels work fine for developers. We’re comfortable reading JSON, filtering logs, and correlating timestamps. But print operators shouldn’t need developer skills to verify their workflows are running.
The canvas shows structure. It doesn’t show activity. You can see what could happen, but not what is happening.
Wire Thickness as Information
The solution came from watching network monitoring tools. They visualize traffic flow with line thickness. Heavy traffic = thick lines. Minimal traffic = thin lines.
We applied this to Node-RED wires:
- Thickness: Represents message throughput (messages per second)
- Color intensity: Shows recent activity (bright = active now, faded = idle)
- Animated flow: Direction arrows move along active wires
Now when you deploy a flow, the canvas comes alive. You instantly see:
- Which paths are processing messages
- Where bottlenecks exist (thin wire → thick wire transition)
- If a conditional branch is ever reached
- When processing stops
Technical Approach
Flow Visualizer hooks into Node-RED’s message passing system. Every time a message moves through a wire, we:
- Record the timestamp
- Calculate throughput over a sliding window
- Update wire styling via CSS custom properties
- Animate direction indicators
The performance overhead is minimal. We batch updates and use requestAnimationFrame for smooth rendering.
Real-World Impact
After installing Flow Visualizer, that print operator deployed their flow again. They immediately spotted the problem: a switch node was routing everything to the wrong output. The wire they expected to be thick was thin. The unexpected wire was thick.
They fixed it in 30 seconds. No debug panel. No console logs. Just visual confirmation that the flow was doing what they intended.
What’s Next
Current development focuses on:
- Payload size visualization (wire color gradient based on message size)
- Historical replay (scrub through past message flow)
- Conditional highlighting (emphasize specific message properties)
We’re also exploring whether wire animation speed should correlate with processing latency. Fast animation = quick processing. Slow animation = bottleneck detected.
If you want to try Flow Visualizer, it’s available in our NPM registry. Let us know what you think.