> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tied.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Canvas basics

> Nodes and edges, a side panel that switches jobs, and a simulator that never touches a real conversation.

Open a flow from the list and you land in the builder: a canvas of connected nodes, a header with the flow's name and status, and a side panel that does three different jobs depending on what you're doing.

## The canvas

Each node is one step from [Node types](/chatbot/nodes) — a box with a type, its own configuration, and a position. Edges connect them. This is a direct view of what actually gets saved: the same nodes-and-edges structure the engine walks when a real conversation runs the flow.

<Steps>
  <Step title="Add a node" icon="plus">
    Drag one in from the library, or click a library entry to drop it, unconnected, at the centre of the
    viewport — clicking doesn't draw an edge to it. To append a node after the one you're working on
    instead, use the separate "append" control on the selected node's Step panel, which both creates the
    node and connects it for you.
  </Step>

  <Step title="Connect it" icon="git-branch">
    Draw an edge from one node to the next. `branch_on_reply` is the exception — its edges come from the
    match clauses in its own configuration rather than from a line you draw, so the canvas renders those
    connections for you once the clauses exist. **Configuring those clauses from the canvas is coming
    soon** — see [Branching and variables](/chatbot/branching) for what that means today.
  </Step>

  <Step title="Select it" icon="mouse-pointer-click">
    Click a node to open its configuration in the side panel.
  </Step>
</Steps>

<Warning>
  **The library offers seven buildable entries today, not nine:** `send_message`, `send_amb_primitive`,
  `wait_for_reply`, `branch_on_reply`, `assign_to_agent`, `end`, and `integration`. The last is really six
  separate entries — one for each connected app (Linear, Slack, HubSpot, Notion, GitHub, and Attio) — and
  all six are **coming soon**: dropping one onto the canvas creates a node, but none of them is wired to a
  backend yet, so a flow that reaches one does nothing.

  `set_conversation_attribute`, `add_label`, `conditional`, and `delay` are fully implemented in the
  engine — see [Node types](/chatbot/nodes) — but as of this writing there's no library block or
  quick-add option that creates one. The engine runs any of these correctly wherever a graph contains
  one — the gap is only in how you'd add one from the canvas. If your design needs one of those four today,
  flag it to your Tied contact.
</Warning>

## The side panel does three jobs

The panel on the right is one surface with three states, not three separate panels:

| State | What's in it |
| - | - |
| **Blocks** | The node library — grouped by what a node does: interactions, logic, handoff |
| **Step** | The selected node's own configuration — different fields per type, covered in [Node types](/chatbot/nodes) |
| **Simulator** | A running test conversation against the graph you're looking at right now |

Selecting a node switches the panel to **Step** automatically. Deselecting, or toggling the simulator on, switches it back.

## The simulator panel

Opening the simulator replaces the library/inspector view with a chat log: type a message, see how the flow responds, reset and try again. It runs against the graph exactly as it sits on your canvas — including edits you haven't saved anywhere yet.

That's worth its own page — see [Testing and simulation](/chatbot/testing) for what it faithfully reproduces and what it doesn't.

## Saving what you build

The header shows **Save draft** and **Publish** while a flow isn't live — both write your graph somewhere,
and what they actually do is not fully explained by the labels. Once the flow is live, Publish is replaced
by the **Live** toggle, and **Save draft becomes the only save control** — it still republishes
immediately. Read [Versions and publishing](/chatbot/versions) before you rely on any of them.

## Who can do this

Building and editing a flow requires an account administrator. See [Roles and permissions](/roles-permissions).

## Next

<CardGroup cols={2}>
  <Card title="Node types" icon="boxes" href="/chatbot/nodes">
    What each block in the library actually does.
  </Card>

  <Card title="Versions and publishing" icon="history" href="/chatbot/versions">
    What the two save controls really do, and what happens to conversations already running.
  </Card>

  <Card title="Testing and simulation" icon="flask-conical" href="/chatbot/testing">
    What the simulator gets right, and the node types it fakes.
  </Card>

  <Card title="Branching and variables" icon="split" href="/chatbot/branching">
    How connections work for branch\_on\_reply specifically.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.