Building the visual workflow editor
The design and engineering behind kill9's drag-and-drop process builder.
The workflow editor is how you define what agents do. Drag states onto a canvas, connect them with transitions, assign agents, add quality gates. This post covers how we built it.
Canvas architecture
The editor uses a pan/zoom canvas with SVG edge routing. State nodes are positioned freely — no grid snapping, no forced layouts. You arrange the workflow however makes sense to you.
State nodes
Each state represents a phase of work: Trigger, Design, Build, Test, Review, Ship. States have an accent color, an icon, and can be assigned to specific agents. You can create custom states for any process.
Transitions and gates
Transitions connect states with directed edges. Gates sit on transitions — approval gates, document requirements, field validations, custom expressions. Nothing proceeds past a gate until its conditions are met.
Agent assignment
Drag agents from the palette onto states. Each agent has a defined role, model, temperature, and capability set. The same workflow can use different agents for different phases.
Simulation
Before deploying a workflow, you can simulate it: step through each state, see which agents would be assigned, test quality gates with sample data.