# Connecting Nodes

Nodes communicate through **edges** — connections drawn between their ports. This guide explains how connections work, port types, data type compatibility, and the difference between data and trigger edges.

## How Connections Work

To connect two nodes, click and drag from an **output port** (right side of a node) to an **input port** (left side of another node). Release the mouse to create the edge.

![Drawing an edge between nodes](../../screenshots/visual-editor-workflow.png)

## Port Types

Each node has ports on its left (input) and right (output) sides.

![Port types close-up](../../screenshots/editor-layout.png)

### Input Ports (Left Side)

| Port | Purpose |
|------|---------|
| **Trigger** | Controls whether the node executes |
| **Named data ports** | Receive specific values (e.g., `message`, `data`, `text`) |
| **Unified `input`** | Accepts all inputs as a single JSON object |

### Output Ports (Right Side)

| Port | Purpose |
|------|---------|
| **Trigger** | Signals that the node completed execution |
| **Named data ports** | Emit specific output values |
| **Unified `output`** | All outputs combined as a single JSON object |
| **Branch ports** | Gateway nodes only — named branches like `True` / `False` |

## Data Types and Colors

Ports are color-coded by data type. Matching colors means matching types.

| Data Type | Color | Aliases |
|-----------|-------|---------|
| **String** | Emerald | `text` |
| **Number** | Blue | `integer`, `float` |
| **Boolean** | Purple | |
| **Array** | Amber | `list` |
| **Object** | Orange | `json` |
| **Mixed** | Orange | |
| **URL** | Cyan | `email` |
| **Date** | Lime | `datetime`, `time` |
| **File** | Red | `document` |
| **Image** | Pink | `picture` |
| **Trigger** | Dark gray | |

## Connection Rules

The rule is simple: **same type connects to same type**.

- `string` connects to `string`
- `number` connects to `number`
- `string[]` connects to `string[]`
- And so on.

If you need to convert between types, use a processing node in between. For example:

- String to number → Use a DataShaper or processing node
- Object to string → Use a DataExtractor node
- Single value to array → Use an appropriate conversion node

!!! tip
    If you cannot connect two ports, check their data types (look at the colors). You may need a conversion node in between.

## Data Edges vs Trigger Edges

FlowDrop has two kinds of edges that serve different purposes:

![Data edge vs trigger edge](../../screenshots/workflow-with-triggers.png)

### Data Edges

Data edges carry **values** between nodes. When a node finishes executing, its output data flows through data edges to the connected nodes' input ports.

- Connect from a **data output port** to a **data input port**
- The data type of both ports must be compatible
- Multiple data edges can feed into the same node

### Trigger Edges

Trigger edges control **execution flow**. They determine _if_ and _when_ a downstream node executes.

- Connect from a **trigger output port** to a **trigger input port**
- Used primarily with gateway nodes to create conditional paths
- A node with a trigger input will only execute when it receives a trigger signal

## Gateway Nodes and Branches

Gateway nodes (IfElse, SwitchGateway, BooleanGateway) create branching logic. They evaluate a condition and activate one or more output branches.

![Gateway node with branch ports](../../screenshots/visual-editor-workflow.png)

For example, an **IfElse** node has:

- One input for the value to evaluate
- A **True** branch output port
- A **False** branch output port

Only the nodes connected to the active branch will execute.

## Tips

- **Port colors guide you** — If the colors match, the connection is valid.
- **Use unified ports for flexibility** — The `input` and `output` ports accept/emit all data as a single JSON object, useful when you need maximum flexibility.
- **Gateway diamonds create branches** — Look for the diamond shape to identify branching points in your workflow.
- **One output to many inputs** — A single output port can connect to multiple input ports, fanning out data to several nodes.

## Next Steps

- **[Visual Editor](visual-editor.md)** — Master the editor interface
- **[FlowDrop Vocabulary](../../getting-started/concepts.md)** — Review workflows, nodes, and execution
- **[Troubleshooting](../troubleshooting.md)** — Common connection issues and fixes
