# Canvas

## What's the *Canvas*?

The *Canvas* is a visual and interactive design tool for building your conversation flows. Each conversation flow has its own Canvas to build all steps and possible paths. Every Canvas begins with a non-editable *Start* node from which your conversation will progress.

***

## Toolbar

Located at the top of your Canvas when opening a flow, the toolbar provides a host of options while you assemble or maintain an application's workflow.

<figure><img src="https://2737319166-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHCxYxhIU0Bqkjj942mGk%2Fuploads%2Fi4QhXkD63zC48f8i29tu%2FFlows_Canvas%20toolbar.png?alt=media&#x26;token=7b5a941c-3edc-4d53-81f3-a3fb6a3e53a5" alt=""><figcaption><p>Canvas top toolbar and mini toolbar</p></figcaption></figure>

Top left:

* *Application*: Swap between applications where the [flow is attached](https://docs.nlx.ai/platform/nlx-platform-guide/ai-applications/setup#functionality)
* *Flow*: Swap between flows attached to the current application set
* *Pages*: [Add pages](https://docs.nlx.ai/platform/nlx-platform-guide/flows-and-building-blocks/stay-organized#use-pages) and swap between them to contain branches of the current flow

Top right:

* *Analyze*: View traffic data from deployed applications
* *Validation* (*Show issues*): Check for missing error handling, infinite loops, or other issues in the flow
* [*Settings*](https://docs.nlx.ai/platform/nlx-platform-guide/flows-and-building-blocks/overview/setup): Set up routing data, enable MCP, attach slots, manage translations, restore versions, and view flow details
* *Save*: Commit all changes made while in the Canvas
* *Test* (play icon): Enable the test widget to converse with the application from the existing flow

Side (mini toolbar):

* *Add node*: Select a node to add to the Canvas&#x20;
* Add note: Adds a text box anywhere on the Canvas for internal notes
* *Bookmark*: Right-click on a node to add a highlight and keep it bookmarked or use the *Analyze* option in the [Canvas shortcut menu](#shortcut-menus) to bookmark isolated nodes or infinite loops
* *Hand tool*: Click and pan around the Canvas
* *Magic layout*: Adjust flow nodes into a level, aligned display
* *Undo/redo*: Undo or redo the last action on the Canvas
* *Search*: Scan content, trigger quick commands, and deliver generative prompts

***

## Analyze, Validation, and Test view

<figure><img src="https://2737319166-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHCxYxhIU0Bqkjj942mGk%2Fuploads%2FLKNqrLAy5M33A1unmETp%2FFlows_Documentation_Analyze%2C%20Validation%2C%20Test.png?alt=media&#x26;token=237a1f59-d7c7-4dd5-8439-65d5783541af" alt=""><figcaption><p>View modes from the Canvas toolbar</p></figcaption></figure>

Activate one or more modes simultaneously from your Canvas toolbar:

* :bar\_chart: *Analyze*: Enable to view [traffic data](https://docs.nlx.ai/platform/nlx-platform-guide/monitoring/analytics/canvas-analytics) from flows in production or filter to specific conversation sessions and troubleshoot the user's path
* :dart: *Validation* (*Show issues*): Displays detected logic or UX errors within your flow. Select the warning icon that appears above any node to read the validation error from the node's side panel
* :arrow\_forward: *Test*: To access the *Test* widget and test from the start of the current [conversation flow](https://docs.nlx.ai/platform/nlx-platform-guide/ai-applications/testing#test-a-single-flow)

You can continue to modify and build with your flow while these modes are activated. Simplify select the Canvas to adjust the flow and save changes.&#x20;

{% hint style="info" %}
De-select *Analytics* or *Validation* from the toolbar to disable these views. Re-select Test and refresh the chat widget to experience changes while actively editing your flow.
{% endhint %}

***

## Canvas controls

{% @arcade/embed flowId="qBKGymHhGHNspwRsb72e" url="<https://app.arcade.software/share/qBKGymHhGHNspwRsb72e>" %}

* *Zoom in/out*: Press Ctrl/Cmd key while scrolling mouse wheel or moving two fingers up/down on a trackpad
* *Move*: Pan the Canvas by sliding two fingers along the trackpad or press + hold Spacebar while using your mouse to click and drag                        &#x20;

{% hint style="info" %}
Explore keyboard shortcuts and additional options via the [shortcut menus](#shortcut-menus).
{% endhint %}

***

## Shortcut menus

Right-click the Canvas or a node to activate the shortcut menu for additional options:

{% @arcade/embed flowId="TXTJLe28LoMKcozsDPd4" url="<https://app.arcade.software/share/TXTJLe28LoMKcozsDPd4>" %}

### Canvas shortcut menu

* *New node: S*elect a node to add to the Canvas
* *Add note*: Adds a note box to the Canvas for internal comments, reminders, isntructions, etc.
* *Paste, Undo/Redo*
* *Zoom controls*
* *Analyze*: Easily identify cycles (great for detecting if any unintentional infinite loops exist) or disconnected nodes
* *Search*: Trigger search bar&#x20;

### Node shortcut menu

* *Copy, Cut, Duplicate, Delete*
* *Change color*: Recolor node header for visual labeling
* *Zoom selection*: Magnifies on selected node
* *Highlight selected*: Add to bookmark in Canvas toolbar
* *Extract to new page*: Moves selected node(s) to a new page within the flow and adds Redirect nodes for moving between pages


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.nlx.ai/platform/nlx-platform-guide/flows-and-building-blocks/overview/canvas.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.