Getting Started

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

Overview

dash-flows renders interactive node graphs in Plotly Dash using React Flow 12. 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):

# 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/ 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.

# 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