# Getting Started

> Build your first dash-flows graph: nodes, edges, and styling.

**Site index:** [https://flows.2plot.dev/llms.txt](https://flows.2plot.dev/llms.txt) — every page on this site, as Markdown.  
**Network index:** [https://2plot.dev/llms.txt](https://2plot.dev/llms.txt) — The 2plot network; start here to discover sibling sites.  
**Sibling sites:** 13 more in The 2plot network — listed in the site index above.  
**Sitemap:** https://flows.2plot.dev/sitemap.xml  


---



### Overview

**dash-flows** renders interactive node graphs in Plotly Dash using [React Flow 12](https://reactflow.dev). A flow needs three things: a list of `nodes`, a list of `edges`, and a `style` with a `height`. Node `type` picks the visual (`input`, `default`, `output`, …); edges connect nodes by `source` and `target` id. Set `animated=True` on an edge for a moving dashed line.

### Live demo

Drag the nodes, pan, and zoom — the canvas below is a real, running `DashFlows` component (no callbacks, just the rendered graph):



```python
# File: docs/getting_started/demo.py

"""Live, callback-free demo for the docs page. Rendered via `.. exec::docs.getting_started.demo`."""
import dash_flows

nodes = [{'id': '1', 'type': 'input', 'data': {'label': 'Start'}, 'position': {'x': 120, 'y': 40}},
 {'id': '2', 'type': 'default', 'data': {'label': 'Process A'}, 'position': {'x': 40, 'y': 180}},
 {'id': '3', 'type': 'default', 'data': {'label': 'Process B'}, 'position': {'x': 220, 'y': 180}},
 {'id': '4', 'type': 'output', 'data': {'label': 'End'}, 'position': {'x': 120, 'y': 320}}]

edges = [{'id': 'e1-2', 'source': '1', 'target': '2', 'animated': True},
 {'id': 'e1-3', 'source': '1', 'target': '3'},
 {'id': 'e2-4', 'source': '2', 'target': '4'},
 {'id': 'e3-4', 'source': '3', 'target': '4', 'animated': True}]

component = dash_flows.DashFlows(
    id="getting_started-demo",
    nodes=nodes,
    edges=edges,
    style={'border': '1px solid var(--mantine-color-default-border)',
 'borderRadius': '8px',
 'height': '440px'},
    showControls=True,
    showMiniMap=True,
    fitView=True,
    colorMode='system',
)
```

    :defaultExpanded: false
    :withExpandedButton: true

### Examples

Each example below is a complete, runnable Dash app from the [`examples/`](https://github.com/pip-install-python/dash-flows/tree/main/examples) folder. Run any of them with `python examples/<file>`.

#### Basic Nodes and Edges

The fundamentals — creating typed nodes, connecting them with edges, and basic positioning and styling. Use this pattern as the starting point for any new flow.



```python
# File: examples/01_basic_nodes_and_edges.py

"""
Example 01: Basic Nodes and Edges
=================================
This example demonstrates the fundamental building blocks of DashFlows:
- Creating nodes with different types
- Connecting nodes with edges
- Basic styling and positioning
"""

import dash
from dash import html
import dash_flows

app = dash.Dash(__name__)

# Define basic nodes
nodes = [
    {
        "id": "node-1",
        "type": "default",
        "data": {"label": "Start Node"},
        "position": {"x": 100, "y": 100},
    },
    {
        "id": "node-2",
        "type": "default",
        "data": {"label": "Process A"},
        "position": {"x": 100, "y": 250},
    },
    {
        "id": "node-3",
        "type": "default",
        "data": {"label": "Process B"},
        "position": {"x": 300, "y": 250},
    },
    {
        "id": "node-4",
        "type": "default",
        "data": {"label": "End Node"},
        "position": {"x": 200, "y": 400},
    },
]

# Define edges connecting the nodes
edges = [
    {
        "id": "edge-1-2",
        "source": "node-1",
        "target": "node-2",
        "animated": True,  # Shows animated dashed line
    },
    {
        "id": "edge-1-3",
        "source": "node-1",
        "target": "node-3",
    },
    {
        "id": "edge-2-4",
        "source": "node-2",
        "target": "node-4",
        "label": "Step 1",  # Edge with label
    },
    {
        "id": "edge-3-4",
        "source": "node-3",
        "target": "node-4",
        "label": "Step 2",
    },
]

app.layout = html.Div([
    html.H1("Basic Nodes and Edges Example"),
    html.P("This shows the fundamental elements of a flow diagram."),
    dash_flows.DashFlows(
        id="basic-flow",
        nodes=nodes,
        edges=edges,
        style={"height": "600px", "border": "1px solid #ddd"},
        fitView=True,
        showControls=True,
        showMiniMap=True,
    ),
])

if __name__ == "__main__":
    app.run(debug=True, port=8070)
```

    :defaultExpanded: false
    :withExpandedButton: true

**How it works**

- `nodes` — a plain list of dicts, each with an `id`, `type` (`"default"` here), `data.label`, and a `position` in canvas pixels.
- `edges` — connect nodes by `source`/`target` id; the `id` on each edge just needs to be unique.
- `animated=True` on an edge draws a moving dashed line, useful for highlighting active/primary paths.
- `label` on an edge renders text along the connector (see `"Step 1"` / `"Step 2"`).
- `style={"height": ...}` is required — React Flow needs an explicit container height to size the canvas.
- `fitView`, `showControls`, and `showMiniMap` are convenience toggles for the zoom/pan controls and minimap overlay.


---

*Source: /getting-started*