# Canvas Build workflows effortlessly using a drag-and-drop canvas in the Designer. Our interface provides a versatile environment for both technical and non-technical users with fine-grained control over your workflow, enabling powerful automations and modular design. Quickly search for nodes in the topbar, assemble your flow and start building in seconds. To enter the canvas, head to **Designer > Flows** and select your workflow. ### Canvas Basics A workflow is a collection of nodes and their connecting edges. The canvas is your building environment for composing and managing the workflows — simply add, move, configure and connect nodes to build your automation logic.

Adding a new node

* Click the **'** Add new node' button in the top toolbar of the canvas. Search for a specific node by name (partial match) or select one from the list * Click the button in the [node options](#node-options) to add a new node before or after the selection

Moving a node

* Click and drag any node to move it to a new location.

Selecting multiple nodes / edges

* Hold `Ctrl/Cmd` and click to select multiple nodes or edges * Hold `Shift` and drag the pointer to make a selection bounding box

Deleting a node / edge

* Select a node or edge and press `Backspace/Delete`

Editing a node

* Double click on a node * Hover over a node and press the button

Connecting two nodes

* Drag a line between node ports to create an directed edge between two nodes (link what is a node port) * Click the button in the [node options](#node-options) to add and connect a new node before or after the selection {% hint style="warning" %} In the event of a connection mismatch, an alert will trigger with descriptive text to help you resolve the conflict. {% endhint %}

### Navigation Moving around the canvas uses similar controls to many standard design tools:

		Cover image
Zooming	Use the , buttons on the side toolbar to zoom in and out. Alternatively, scroll or use pinch gestures inside the Minimap	zoom in-out.gif
Panning	Click and drag on empty space to move around the canvas	panning.gif
Selecting	Hold `Ctrl/Cmd` and click to select multiple nodes or edges	selecting.gif
Bounding Box	Hold `Shift` and drag the pointer to make a selection bounding box	bounding-box.gif

### Saving a Workflow Save your work frequently to keep your workflow synchronized with your latest design: * Commit Progress: Click **Save Changes** in the top toolbar to secure your work. * Validation: Saving is only possible if the workflow is valid and contains no errors. In this event, a warning message will appear specifying the necessary adjustments to your workflow. * Exit Protection: If you attempt to navigate away or close the page without saving, a prompt will ask you to confirm to ensure your progress isn’t lost. ### Canvas Controls The canvas offers 3 main control points to manage the workflow: the top toolbar, the side toolbar and local controls for individual nodes.

#### Top Toolbar

Add new node

Search for a specific node by name (partial match) or select one from the list.

Enter full screen

Toggle the canvas to fill your entire window. Perfect for handling complex workflows.

Change layout

Automatically adjust the node layout to vertical or horizontal flow direction. This action also adjusts the orientation of the node ports. {% hint style="info" %} Use the button to revert to your previous layout. {% endhint %}

#### Side Toolbar

Symbol	Description on hover	Action
	Zoom in	Zoom to center
	Zoom out	Zoom out from center
	Fit view	Center your flow in the window
/	Toggle interactivity	Prevent accidental node movement
	Undo	Revert recent changes
	Redo	Restore recent changes
	Export diagram	Download your flow configuration as an image or pdf
	Flow settings	Access flow settings
	Align graph to layout	Snap all nodes to the vertical or horizontal layout
	Sticky note	Add comments to your flow

{% hint style="success" %} Sticky notes are for documentation and organization purposes only. We recommend using them frequently to explain complex logic, define sections, onboard new users and to facilitate collaboration on a shared flow. {% endhint %} #### Node Options Hover over a node to reveal its controls. Available options vary by node type.

Symbol	Action
	Edit the node configuration
	Delete the node from the canvas permanently
	Duplicate node immediately
	Add new node before or after the selection and link them

### Minimap For large flows, use the Minimap in the bottom-right corner to see a bird’s-eye view of your entire graph. You can click and drag the pointer to quickly move the view box around the canvas. To zoomin/out the canvas use the scroll wheel or pinch gestures while hovering inside the Minimap.

### Shortcuts Build faster with these shortcuts: | Shortcut | Action | | ------------------ | ---------------- | | `Ctrl/Cmd` + `C` | Copy selection | | `Ctrl/Cmd` + `V` | Paste selection | | `Ctrl/Cmd` + `S` | Save changes | | `Backspace/Delete` | Delete selection | ### Best Practices * Keep it Modular: Break very large flows into smaller, manageable sub-flows * Use Descriptive Names: Name your flows appropriately and give LLM nodes a friendly name to reflect their specific function in the workflow * Label the Canvas: Document your workflow using sticky notes for better readability * Save Frequently: Click 'Save Changes' often to avoid data loss, especially before exiting the Editor * Align Nodes: Use the Align tool in the toolbar to keep your connections clean and readable --- # 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.helvia.ai/build/canvas.md?ask= ``` 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.