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

# How to use the Graph view in Release0

> Visually design conversation flows by arranging and connecting elements in the graph editor to create dynamic and interactive chatbot experiences. Learn how to start a flow, add elements, and use gestures for efficient navigation.

The Graph is where you arrange your conversation flow and connect the Agent [elements](./elements/overview) together.
It provides a visual representation of how the conversation will progress, allowing you to see the connections between different elements and how they interact with each other.

<Frame style={{ maxWidth: '800px' }}>
  <img src="https://mintcdn.com/release0-13d037a7/wBCYRe8zYj7SPCzD/images/flow.png?fit=max&auto=format&n=wBCYRe8zYj7SPCzD&q=85&s=df13efc4188d2485bb79fff6f6c11a5e" alt="Release0.com - Flow Graph" width="1459" height="777" data-path="images/flow.png" />
</Frame>

## Starting a Flow

It all begins with a **Start element** element, which is the entry point of your flow. From there, you can add various elements to create a dynamic and interactive conversation experience.

<Frame style={{ maxWidth: '800px' }}>
  <img src="https://mintcdn.com/release0-13d037a7/vX1JZFMC29thox6n/images/start-element.png?fit=max&auto=format&n=vX1JZFMC29thox6n&q=85&s=fed9e44a1a0320327c30e45544624dc0" alt="Release0.com - Start element" width="1416" height="592" data-path="images/start-element.png" />
</Frame>

## Adding elements

You can then drag and drop elements from the left sidebar directly onto the graph.
Connect elements by clicking on the small circles at their edges. This creates a line that indicates the direction of the conversation flow.
To delete a element, select it and press the `Delete` key, or click the element and choose the `Delete` icon from the element menu.
You can move elements by dragging them to new positions on the graph to reorganize your conversation flow as needed.

<Frame style={{ maxWidth: '800px' }}>
  <img src="https://mintcdn.com/release0-13d037a7/4hYvy03xcqDAWJXp/images/add-element.gif?s=c765202e85a062fc5d5d6c9714307e24" alt="Release0.com - Start and connect element" width="2770" height="1490" data-path="images/add-element.gif" />
</Frame>

## Gestures

In the user preferences, under the `Graph Gestures` section, you can choose between `Mouse` and `Trackpad` gestures.

### Mouse

**Select**: `Shift` + `Left click` drag

**Zoom**: `Ctrl` + `Mouse wheel`

**Pan**: `Left click` drag or `Mouse wheel` for vertical pan and `Shift` + `Mouse wheel` for horizontal pan

### Trackpad

**Select**: `Click` + drag

**Zoom**: Pinch

**Pan**: Use two finger