Skip to main content

Visual Workflow Builder

The Visual Builder is the editing surface for a workflow version. It is a React Flow canvas, and its central promise is that the graph you see is the graph that executes — there is no separate deployment step that could differ from the picture.

Nodes, handles, edges​

A node is a card on the canvas representing one step. It has input handles on its left and output handles on its right; an edge connects an output handle to an input handle and defines the order data flows. Nodes with several outcomes expose several output handles — True/False on IF, one per rule plus Default on Switch, Loop/Done on Loop.

The + on an output handle is the fastest way to grow a graph: it opens the Node Store in attach mode and wires the chosen node to that handle. Dropping a node onto an existing edge inserts it between the two nodes.

Configuration lives on the node​

Each node carries the operation it performs (a store node like Gmail has dozens) and that operation's parameters. The builder renders the parameter form from the node's manifest, so every node configures itself the same way: a fixed value or an expression per field, a Connections section for nodes that need credentials, and Settings for retry and error behaviour. Single-click opens the quick panel; double-click opens the full editor with the upstream Input and declared Output fields alongside.

Configuration is part of the version. Saving snapshots nodes, edges, mappings, conditions, sticky notes, and every parameter together.

Mapping and conditions​

Data between nodes is mapped with expressions (${output.field}) or with the edge's Mapper (visual, JSON, or preview views). Edges and IF/Switch nodes carry conditions built with the Condition Builder, which stores a condition tree you can inspect as JSON.

Validation before save and run​

The builder validates before it saves or runs: the graph must begin at a trigger, every node must be connected, and required parameters must be present. An invalid flow is refused with the offending node highlighted rather than saved in a broken state.

Versions and the Active version​

Saving creates a new version; the Versions panel lists them and lets you activate, view, restore, or delete any one. The Active version is what webhooks, schedules, forms, and error triggers execute. The canvas may be on a newer draft than the Active version — that is the normal way to iterate safely.

Running and observing from the canvas​

Run executes the version on the canvas and streams the run into the Logs panel; node cards show their live status. Execute step runs one node. The Chat panel drives conversational workflows through the manual trigger. Everything the panel shows is also available under Runs.

Sticky notes​

Markdown notes on the canvas document intent next to the nodes. They are saved with the version and ignored at run time.

The same builder everywhere​

The builder ships as @burdenoff/fluidgrids-fe-sdk. The FluidGrids app, the read-only share page, the embed iframe, and third-party products embedding FluidGrids all render the same component, so a workflow looks and behaves the same wherever it appears.

Next steps​