The agent graph
Opening a flow from the Flows list takes you to the agent graph — the visual editor for your multi-agent system. The canvas shows each sub-agent as a node, with arrows between them representing the routing relationships you've defined.
Reading the canvas
Each node on the canvas represents a sub-agent. The node card shows:
| Element | What it means |
|---|---|
| Name | The sub-agent's display name |
| ID | The sub-agent's unique identifier (shown in truncated form below the name) |
| Description | A short summary of this sub-agent's role |
| Model badge | The model this sub-agent uses, if it overrides the root agent's model |
| ENTRY badge | Marks the sub-agent that receives every new conversation first |
Only one sub-agent carries the ENTRY badge at a time. This is the entry point for the flow — every message from a user or external caller lands here first, and routing decisions fan out from it.
Arrows between nodes represent connections. The label on an arrow tells you the relationship type — transfer (control passes entirely to the target) or delegation (work fans out and the result comes back). A connection can carry both directions at once.
The toolbar
The top bar gives you the controls you'll use most:
| Control | What it does |
|---|---|
| ← Back | Returns to the Flows list |
| Agent name | Click to rename the flow inline |
| Vertical / Horizontal | Switches the canvas layout direction |
| Align Nodes | Runs an auto-layout pass to tidy overlapping nodes |
| Settings | Opens the root agent configuration panel — model, system prompt, permission mode |
| View Spec | Shows the complete JSON representation of the agent graph |
| Versions | Opens the version history — promote a draft or roll back to a previous version |
| A2A | Shows the agent card that remote agents see when they discover this flow |
| Undo / Redo | Steps through your edit history |
| Save | Persists the current state — shows "Saving…", "Save Changes", or "Saved" |
Changes are not auto-saved. If you navigate away with unsaved edits, you'll be prompted to confirm.
Adding sub-agents
Click + Add Sub-Agent below the toolbar. A new node appears on the canvas. Select it to open the sub-agent editor in the right panel, where you can set its name, routing alias, model, system prompt, skills, and tools.
Every new sub-agent starts with no connections. Wire it to other nodes by dragging from one node's connection handle to another, or select an existing connection to edit its routing type.
The right panel
The panel on the right changes based on what you're doing. Four tabs are available:
Panel — the default view. When nothing is selected, it shows the Flow Overview: total sub-agent count, connection count, and a shortcut to execution history. When you select a node, it becomes the sub-agent editor. When you select a connection, it becomes the connection editor.
Playground — a live chat interface connected to this agent. Send a message and watch the canvas animate as the agent runs: nodes light up as each sub-agent executes, edges pulse during handoffs. This is the fastest way to verify your routing logic without leaving the builder.
Usage — a summary of cost, success rate, and latency for this flow over the last 24 hours, 7 days, or 30 days.
Call Agent — ready-to-copy integration code. Grab the endpoint URL, agent ID, and project API key, then copy a JavaScript, Python, or cURL snippet to call the agent from your own application.
Canvas navigation
| Action | How |
|---|---|
| Pan | Click and drag on the background |
| Zoom | Scroll wheel, or the + / − buttons |
| Fit to screen | The reset button (⟲) in the bottom-left corner |
| Select a node | Click it — the right panel switches to the sub-agent editor |
| Select a connection | Click the arrow — the right panel switches to the connection editor |
| Deselect | Click the canvas background |
Start with Align Nodes
After adding several sub-agents, the canvas can get cluttered. Hit Align Nodes to auto-arrange everything into a clean layout before fine-tuning positions manually.