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

# Visual Canvas Builder

> Edit, visualize, and optimize your automation flows using the drag-and-drop canvas.

Once a Flow is generated, it opens in the **Visual Canvas**. This is your workspace for fine-tuning the campaign.

## The Interface

The canvas represents your campaign timeline from left to right.

* **Nodes:** The boxes representing actions (e.g., "Send Email").
* **Edges:** The lines connecting the nodes, representing the path of the lead.

{/* Save as 'full-canvas-view.png' */}

<img className="block dark:hidden" src="https://mintcdn.com/cybernauts/YpPbgKwEEgbtR4wS/images/logic-node-light.png?fit=max&auto=format&n=YpPbgKwEEgbtR4wS&q=85&s=ba5d5215e4beed706bedda8090dfcb08" alt="Canvas Light" width="1678" height="696" data-path="images/logic-node-light.png" />

<img className="hidden dark:block" src="https://mintcdn.com/cybernauts/YpPbgKwEEgbtR4wS/images/logic-node-dark.png?fit=max&auto=format&n=YpPbgKwEEgbtR4wS&q=85&s=d5f33e0f71936be9147c7be8b7fcf4ed" alt="Canvas Dark" width="1677" height="694" data-path="images/logic-node-dark.png" />

## Understanding Nodes

There are four main types of nodes you will see on the canvas:

<CardGroup cols={2}>
  <Card title="Trigger Node" icon="play">
    The starting point. Usually "New Lead Added" or "Audience Upload".
  </Card>

  <Card title="Action Node" icon="bolt">
    Performs a task. Examples: **Send Email**, **WhatsApp Message**.
  </Card>

  <Card title="Logic Node" icon="code-branch">
    Diamond-shaped boxes that make decisions (e.g., "Did they reply?").
  </Card>

  <Card title="Delay Node" icon="clock">
    Pauses the flow. Example: "Wait 24 Hours".
  </Card>
</CardGroup>

## Editing a Flow

To change settings, simply **click on any node**. A configuration panel will slide out from the right side of the screen.

{/* Save as 'node-settings-panel.png' */}

<img className="h-64 block dark:hidden" src="https://mintcdn.com/cybernauts/YpPbgKwEEgbtR4wS/images/email-config-light.png?fit=max&auto=format&n=YpPbgKwEEgbtR4wS&q=85&s=c13a688a166c94c61a78c54fcae8f569" alt="Settings Panel Light" width="624" height="811" data-path="images/email-config-light.png" />

<img className="h-64 hidden dark:block" src="https://mintcdn.com/cybernauts/YpPbgKwEEgbtR4wS/images/email-config-dark.png?fit=max&auto=format&n=YpPbgKwEEgbtR4wS&q=85&s=c64056d1c0fd5bd023c99c13b30d1402" alt="Settings Panel Dark" width="616" height="814" data-path="images/email-config-dark.png" />

### Common Actions

* **Edit Content:** Click an Email node to change the Subject Line or Body text.
* **Delete Step:** Click the trash icon on a node to remove it.
* **Reconnect:** Click and drag from the circle on one node to the circle on another to create a new path.