How We Built a Visual Drag-and-Drop Workflow Builder for AI Agent Teams (React Flow + Dagre)

A few days ago, I shared how I built CrewForm — an open-source platform for orchestrating AI agent teams through a web UI. The "What's next" section mentioned an interactive workflow canvas. We shipped it. Here's how it works under the hood. The problem In the original version, pipeline teams were configured through a dropdown-based step list. It worked, but: You couldn't see the full flow at a glance Rearranging steps meant a lot of up/down clicking Non-technical team members found it confusing There was no visual feedback during execution We needed a canvas where you could see agents as nodes, connections as edges, and execution status in real-time. The stack React Flow — The canvas library. Handles nodes, edges, panning, zooming, selection, and minimap out of the box. Dagre — Auto-layout engine. Given a directed graph, it computes x/y positions for every node so nothing overlaps. SSE (Server-Sent Events) — Real-time execution state. The task runner pushes status updates, and the can