# The builder (/docs/workflows/the-builder)

> A tour of the workflow canvas, the node settings panel, connections, and branches.

The builder is a canvas. Nodes are boxes, connections are dotted lines, and
work flows from top to bottom.

![The workflow builder](/docs-images/workflows/builder-tour.jpg)

1. **Components**: the library of every node. Drag one onto the canvas, or search for it.
2. **Canvas**: click any node to open its settings. Drag nodes to rearrange them.
3. **Workflow name**: click to rename.
4. **Status**: Draft means you have changes that are not live yet.
5. **Zoom** in or out, **fit** everything on screen, or **lock** the canvas.
6. **Executions** lists this workflow's runs.
7. **View Published** appears once something is live.
8. **Test** runs the workflow with sample data you type in.
9. **Publish** makes the current version live.
10. **Save** stores your draft. Leaving the page without saving discards changes.

The curved arrows next to **Executions** undo and redo canvas changes.

## The settings panel [#the-settings-panel]

Click any node and its **Properties** panel opens on the right.

![The Properties panel of a Voice AI Call node](/docs-images/workflows/settings-panel.jpg)

1. **Variables from previous nodes**: information earlier nodes produce. Drag a chip into a field to use it. See [Passing data between nodes](/docs/workflows/variables).
2. **Test node** (flask icon) runs only this node. See [AI scoring and routing](/docs/workflows/ai-routing#test-a-single-node).
3. **Expand** the panel for more room.
4. **Close** the panel.
5. to 8. The node's own settings. For a Voice AI Call: the agent, the number to call from, the number to call, and optional custom variables.

When something is missing, a red **Incomplete configuration** box at the top
of the panel lists exactly what to fix, and the node gets a red outline on
the canvas.

## Add and connect nodes [#add-and-connect-nodes]

![Dragging a Slack Message node onto the canvas and connecting it](/docs-images/workflows/add-and-connect.gif)

### Find the node [#find-the-node]

Look in **Components**, or type in **Search nodes**.

### Drop it on the canvas [#drop-it-on-the-canvas]

Drag it onto an empty area.

### Connect it [#connect-it]

Press on the small dot under the earlier node (or under one of its branch
labels), drag to the top dot of the new node, and release.

### Configure it [#configure-it]

Click the new node and fill in its settings.

## Branches [#branches]

Some nodes have more than one exit. Each exit is labeled, and you connect
each one to whatever should happen in that case.

![Condition and Voice AI Call branches](/docs-images/workflows/branches.jpg)

- **A and B**: a Condition exits through **TRUE** or **FALSE**.
- **C and D**: a Voice AI Call exits through **COMPLETED** when the call connected, or **REJECTED** when it failed, was busy, or wasn't answered.

A branch with nothing connected ends the run there.

One branch can feed several nodes. They then run in parallel, for example
an email and a Slack alert at the same time.