WorkflowBuilder
Drag-and-drop graph editor for building typed workflows. Connects trigger, condition, action, transform, and output nodes. Outputs a serializable WorkflowGraph via onChange.
Installation
npx dafink-ui add workflow-builderRequires: @xyflow/react
Demo
Examples
WorkflowBuilder
Drag nodes to reposition. Drag from a right handle to a left handle to connect. Click a label to edit inline. Hover a node and click × (or press Delete/Backspace) to remove it. Click ▶ Run in the toolbar to animate execution: a pulse dot travels each edge, nodes glow when active and dim with ✓ when complete. At condition nodes both branches fire simultaneously. Click ◼ Stop to cancel mid-run.
Pre-built graph via defaultGraph
Pass a WorkflowGraph to defaultGraph to pre-populate the canvas.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| defaultGraph | WorkflowGraph | - | Pre-populated graph loaded on first render. Not reactive after mount; state is managed internally. |
| onChange | (graph: WorkflowGraph) => void | - | Fired after every change: node move, edge connection, label edit, or node add/delete. |
| height | number | 500 | Canvas height in pixels. |
| className | string | "" | Additional classes on the root container. |