> ## Documentation Index
> Fetch the complete documentation index at: https://docs.imagine.art/llms.txt
> Use this file to discover all available pages before exploring further.
# Canvas Interface
> Navigate the Workflows canvas, add and connect nodes, organize your workspace, and run your first workflow.
The **Canvas Interface** is the central space where you create, manage, and fine-tune your workflows. It provides a visual layout of connected nodes so you can see exactly how your tasks relate to each other—and modify, run, or monitor them at any point.
## Building your first workflow
Go to [imagine.art/flow](https://www.imagine.art/flow) and create a new workflow, or open an existing one from your dashboard.
Click the **+** button (or **Toolbox**) in the left toolbar to open the node picker. You can also right-click anywhere on the canvas, or press `Space`, to open the search panel.
Browse by category or search for a node by name, then click it to place it on the canvas.
Click the node to select it. The **right sidebar** displays the node's settings and the available AI models for that node type. Set your model, parameters (resolution, aspect ratio, seed, etc.), and any required inputs.
Add additional nodes as needed for your pipeline. To connect two nodes, click and drag from an **output handle** (right side of a node) to a compatible **input handle** (left side of another node), then release to form the connection.
Connections are type-safe: image handles connect only to image handles, text to text, and video to video.
Click the **Run** button inside a node or in the right sidebar, or press `Ctrl/Cmd + Enter` to execute. The workflow processes each node in sequence. You can also select specific nodes and click **Run Selected Nodes** to execute only part of your pipeline.
Review the output, adjust prompts or settings, and re-run. Workflows are designed for iteration—tweak any node and re-run without rebuilding from scratch.
## Canvas navigation
**Panning**
* Click and drag on empty canvas space to pan.
* Use the **middle mouse button** or a **two-finger drag** on a trackpad.
**Zooming**
* Scroll the mouse wheel up/down, or use a pinch gesture on a trackpad.
* Use the zoom controls in the bottom-right corner of the canvas.
**Minimap**
The minimap in the bottom-right gives you an overview of your full canvas layout, useful for large workflows with many nodes.
## Adding and managing nodes
| Action | How to do it |
| ----------------- | ------------------------------------------------------------------------- |
| Add a node | Click **+** in the left toolbar, right-click the canvas, or press `Space` |
| Search for a node | Press `Cmd/Ctrl + K` or use the Search button in the toolbar |
| Move a node | Click and drag it to the desired position |
| Duplicate a node | Select it and press `Ctrl/Cmd + D` |
| Delete a node | Select it and press `Delete` or `Backspace` |
## Connecting and removing handles
**To connect a handle:** Drag from an output slot on the right side of a node to a compatible input slot on the left side of another node. Release to form the connection.
**To remove a handle:** Hover over the connection handle—an **×** button appears. Click it to disconnect, or select the connection and press `Delete` or `Backspace`.
If a connection snaps back when you release, the two handles are incompatible types. Check that you're connecting an image output to an image input, text to text, or video to video.
## Left toolbar
The toolbar on the left side of the canvas gives you access to all major tools:
| Button | Function |
| ----------------- | ---------------------------------------------------------------------------- |
| **Core Nodes** | Essential generation nodes: Generate Image, Generate Video, Prompt, and more |
| **Utility Nodes** | Supporting nodes: Upscale, Crop, Resize, Extract Frame, Import, Export, etc. |
| **Search** | Find any node instantly (`Cmd/Ctrl + K`) |
| **Assets** | Access all previous generations from your account |
| **Move/Pan** | Switch to the pan tool for navigating the canvas |
| **Sections** | Add organizational sections to group related nodes together |
| **Collaboration** | Add shapes and sticky notes, and share the project link with your team |
## Right sidebar
When you select a node (or multiple nodes), the right sidebar shows settings specific to that selection:
* **Node properties and model settings** — Configure parameters for the selected node.
* **Model selection** — Choose from available AI models. Settings like aspect ratio, resolution, and other parameters update dynamically based on the model you select.
* **Number of runs** — Specify how many times the selected node(s) should execute per run.
* **Run selected nodes** — Execute only the selected nodes with their current settings.
## Version History
Every change you make to a workflow is automatically tracked. Version History lets you browse past states of your canvas and roll back to any previous version — so you can experiment freely without worrying about losing work.
**To access Version History:**
Click the **Version History** button in the top toolbar (clock icon), or open it from the workflow's context menu.
The panel lists all saved states with timestamps. Click any entry to preview that version of the canvas.
Select the version you want and click **Restore**. The canvas reverts to that state. Your current version is preserved as an entry in the history so you can always go forward again.
## Draw on Canvas
You can sketch, annotate, and ideate directly on the workflow canvas without leaving the platform. Drawing is free-form — use it to mark up connections, diagram ideas, or leave visual notes for collaborators.
**To start drawing:**
Click the **Draw** icon in the left toolbar (pencil icon) to activate free-draw mode.
Click and drag anywhere on the canvas to draw freely. Drawings float above the node layer so they don't interfere with connections.
Switch to the **Eraser** tool to remove specific strokes, or use **Clear Drawing** to wipe all annotations at once.
## Organizing your workspace
Use **Sections** (from the left toolbar) to group related nodes into labeled containers. This keeps large workflows readable and makes it easy to identify different stages of a pipeline—for example, separating a "Generation" section from a "Post-processing" section.
You can also use the **Collaboration** tools (shapes and sticky notes) to annotate your canvas with explanations or design decisions, which is useful when sharing workflows with teammates.
## Keyboard shortcuts
| Shortcut | Action |
| ---------------------- | ---------------------------------- |
| `Ctrl/Cmd + Enter` | Run the entire workflow |
| `Space` or right-click | Open node picker on canvas |
| `Cmd/Ctrl + K` | Search for a node |
| `Ctrl/Cmd + D` | Duplicate selected node |
| `Delete` / `Backspace` | Delete selected node or connection |
| `P` | Add a Prompt node |
| `T` | Add an AI Copilot node |