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

# The Just Flow It canvas: navigating your workspace

> A tour of the Just Flow It diagram canvas — the toolbar, AI chat panel, element palette, zoom controls, and cloud auto-save explained.

When you open a diagram in Just Flow It, you land on the canvas — the central workspace where your BPMN diagram lives and where all editing, refinement, and export actions take place. The canvas is designed to stay out of your way: most of the time you are reading or refining a diagram that the AI has already built, rather than constructing it from scratch. This page walks through every area of the canvas so you can navigate your workspace with confidence from day one.

## Canvas layout overview

The canvas is divided into four main areas:

<CardGroup cols={2}>
  <Card title="Canvas area" icon="object-group">
    The large central space where your BPMN diagram is displayed and edited. You can pan by clicking and dragging on empty space, and zoom with the scroll wheel or the zoom controls in the bottom-right corner.
  </Card>

  <Card title="Toolbar" icon="bars">
    A horizontal bar at the top of the canvas. Contains actions for auto-layout, undo/redo, export, sharing, and diagram settings.
  </Card>

  <Card title="AI chat panel" icon="message-lines">
    A collapsible panel on the right side of the canvas. Type or speak a refinement instruction here and the AI edits the live diagram in response.
  </Card>

  <Card title="Element palette" icon="shapes">
    A vertical sidebar on the left. Lists all BPMN 2.0 elements — events, tasks, gateways, pools, lanes — that you can drag onto the canvas manually.
  </Card>
</CardGroup>

## The toolbar

The toolbar runs across the top of the canvas and contains the most frequently used actions:

| Action               | Description                                                                                                                                                  |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Auto-layout**      | Automatically repositions all elements for maximum readability. Run this any time the diagram starts to look cluttered after manual edits or AI refinements. |
| **Undo / Redo**      | Steps back or forward through your edit history. Keyboard shortcuts `Ctrl+Z` / `Cmd+Z` and `Ctrl+Y` / `Cmd+Y` also work.                                     |
| **Zoom**             | Fit the diagram to the screen, or enter a specific zoom percentage. Also accessible via the zoom controls in the bottom-right corner.                        |
| **Export**           | Opens the export menu: download as a `.bpmn` file, PNG image, or SVG image.                                                                                  |
| **Share**            | Generates a read-only share link you can send to anyone — no Just Flow It account required to view.                                                          |
| **Diagram settings** | Rename the diagram, change the canvas background, or delete the diagram.                                                                                     |

<Tip>
  Press `Ctrl+Shift+F` / `Cmd+Shift+F` at any time to fit the entire diagram to your screen — useful after zooming deep into a complex process.
</Tip>

## The AI chat panel

The AI chat panel is where you refine your diagram after the initial generation. Click the **chat bubble icon** on the right edge of the canvas to expand or collapse it.

<Steps>
  <Step title="Type or speak your instruction">
    Describe the change you want in plain language — for example, "Add a notification email task after the approval gateway" — then press **Enter** or click **Send**.
  </Step>

  <Step title="Review the AI's edit">
    The diagram updates live on the canvas. Changed or newly added elements are briefly highlighted so you can spot exactly what the AI modified.
  </Step>

  <Step title="Accept, undo, or iterate">
    If the result looks right, simply continue working. If not, press **Undo** (`Ctrl+Z`) to revert the AI's last edit, or send a follow-up instruction to adjust the change.
  </Step>
</Steps>

<Note>
  Each message sent to the AI chat panel uses one AI prompt credit on the **Free plan**. On **Pro** and **Team** plans, chat refinement is unlimited.
</Note>

## The element palette

The element palette sits on the left side of the canvas. It lists every standard BPMN 2.0 element you can add manually:

* **Events** — Start, Intermediate, End (and their variants: Timer, Message, Error, and more)
* **Tasks** — User, Service, Business Rule, Manual, Sub-Process
* **Gateways** — Exclusive (XOR), Parallel (AND), Inclusive (OR)
* **Containers** — Pool, Lane
* **Connectors** — Sequence Flow, Message Flow

To add an element, drag it from the palette and drop it onto the canvas. Connect elements by hovering over an existing shape until the connection handles appear, then dragging to the target shape.

<Tip>
  You rarely need to use the palette directly — asking the AI to add elements is usually faster and more accurate. The palette is most useful for small, precise manual adjustments.
</Tip>

## Zoom and pan controls

| Control           | How to use                                                                                                                                              |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Pan**           | Click and drag on empty canvas space, or hold `Space` and drag anywhere.                                                                                |
| **Zoom in / out** | Scroll the mouse wheel, or use the **+** / **−** buttons in the bottom-right corner.                                                                    |
| **Fit to screen** | Click the **fit** icon in the bottom-right corner, or press `Ctrl+Shift+F` / `Cmd+Shift+F`.                                                             |
| **Mini-map**      | A thumbnail of the full diagram in the bottom-right corner helps you navigate very large diagrams. Click any part of the mini-map to jump to that area. |

## Auto-save and cloud storage

Every change you make — whether through the AI or by hand — is saved to the cloud automatically within seconds. There is no manual save button and no risk of losing work if you close the browser tab.

<Warning>
  Auto-save requires an active internet connection. If you lose connectivity, a banner appears at the top of the canvas. Your edits are queued locally and synced as soon as the connection is restored.
</Warning>

## Diagram limits by plan

Diagrams are **unlimited on every plan**, including Free — save as many as you like. What differs by plan is AI generation:

| Plan | Saved diagrams |     AI generation     |
| ---- | :------------: | :-------------------: |
| Free |    Unlimited   | 1 advanced prompt/day |
| Pro  |    Unlimited   |       Unlimited       |
| Team |    Unlimited   |       Unlimited       |

On the **Free plan**, your one advanced AI prompt refreshes automatically each day at UTC midnight. Your diagrams, settings, and version history carry over automatically when you upgrade.

<CardGroup cols={2}>
  <Card title="AI Generation" icon="wand-magic-sparkles" href="/concepts/ai-generation">
    Learn how to write prompts and use the AI chat panel effectively.
  </Card>
</CardGroup>