Flow canvas: the toolbar, panels, menus, and debug controls that every tool shares, and what differs between Studio Web, VS Code, and Studio Desktop.

The Flow canvas is the visual workspace where you build Flow processes, in every environment: VS Code, Studio Web, and Studio Desktop. Each step of a workflow is a node, and the lines between nodes set the order in which steps run. The canvas opens when you create or open a .flow file.

The canvas works the same way in all three tools. The sections below describe what they share, and What differs between tools covers the rest.

A strip of icons at the right edge opens the Properties panel, the logs, and the watches panel.

The bottom toolbar has these controls, from left to right:

The + button in the bottom toolbar opens the Add node panel, which has a search box and groups of nodes by purpose.

In order, the categories are Agent, Connector, Data, Document, Human, Control, Tool, and Wait for event, followed by the categories that call existing work. Scroll the panel to see the rest. A Trigger category appears when you add a node from the bottom toolbar. Node reference lists every node by category.

For example, the Tool category holds Script, Conversational tools, Queue tools, and Voice tools. Tool describes them.

The + on a node's outgoing handle adds a new node and connects it in one step.

Nodes connect through handles, the small dots on the edges of a node. An output handle on the right side of a node connects to an input handle on the left side of the next node. The canvas validates connections in real time: green indicates a valid connection, and red indicates an invalid one. Connections respect node constraints, for example a trigger cannot connect to another trigger.

Edge segments can be dragged to reposition them. The adjusted path is kept for the session but does not affect the saved document or the undo history.

The properties panel opens on the right when a node is selected, showing that node's configuration. Tabs vary by node type, for example a Script node shows Parameters, Error handling, and Advanced.

Variables that belong to the whole workflow are not managed in the properties panel. They live in the separate Variables panel, which Variables and data flow describes.

A node's full-screen expanded view is available from its hover toolbar. The expanded view has three columns: Input, which shows the data the node can read in a Schema or JSON view, Properties, which holds the node's configuration, and Output, which shows the data the node produced. The Output column has a mode menu with Live, Static mock, and Generated, which Output mocking describes.

Run Debug (▶) in the bottom toolbar runs the workflow on the canvas. If the trigger has inputs, a dialog asks for their values first. As the run progresses, each node shows its status, and the panel below the canvas shows the run and its execution trace.

During a run, the bottom toolbar shows the run controls: a red Stop debug button, Continue, and Next step. The debug session also ends when you change the workflow.

Breakpoints are markers on nodes. To set one, hover over the node, then select ⋮ (More options) > Add breakpoint in its toolbar. The run pauses when it reaches a breakpoint. A breakpoint appears as a red dot on the node, and a run that pauses there shows a pause icon on it. Continue and Next step control how the run continues. Breakpoints can be set before a run and during a run.

After a debug run, a panel appears below the canvas.

Selecting a node in the execution trace highlights the corresponding node on the canvas.

The menu of a node opens from ⋮ (More options) in its hover toolbar, or when you right-click the node. It has Add breakpoint, Add probe, Copy, Cut, Paste, and Delete. On a trigger, it also has Debug and Set as default entry point.

Set as default entry point sets the selected trigger as the default entry point of the workflow. Add probe attaches a Probe panel to the node. The panel shows the value of an expression, starting with $self.output, which is the node's own output, and the + in the panel adds another expression.

Right-clicking the canvas background shows layout options:

After Tidy up nodes or Tidy selected, edges route around nodes instead of passing through them, keeping the diagram readable when nodes are repositioned. Loop edges (self-connections and loop-back handles) keep their existing handle-based routing.

Key canvas shortcuts:

Keyboard shortcuts lists every shortcut of the canvas.

Each tool adds its own explorer and toolbar around the canvas.

The Debug menu at the top left of the Studio Web toolbar has these options:

During a debug run, the Logs panel on the right shows the preparation steps of the run.

In VS Code and Studio Desktop, the sliders icon next to Properties, above the canvas, opens a menu that changes how the properties panel looks:

You can also drag the Parameters and Variables tabs by their grip to rearrange them.