# dash-flows — React Flow node graphs for Dash

> dash-flows — React Flow (@xyflow/react 12) node-graph components for Plotly Dash: interactive flow diagrams with a glass-morphism theme, ELK layouts, custom node/edge types, undo/redo, sub-flows and full Dash callback integration. By Pip Install Python.

> **React Flow (@xyflow/react) node-graph components for Plotly Dash** — glass-morphism theming, ELK layouts, DashIconify icons, and full Dash callback interoperability.

![dash-flows](assets/current_project.png)

---

## What is dash-flows?

**dash-flows** wraps [React Flow 12](https://reactflow.dev) (`@xyflow/react`) as a
[Plotly Dash](https://dash.plotly.com) component library. Build interactive,
node-based diagrams — workflows, pipelines, org charts, state machines — that
talk to your Python callbacks like any other Dash component.

- **React Flow 12.11** under the hood — nodes, edges, handles, minimap, controls, background
- **Glass-morphism theme** with light/dark/system color modes and 6 color schemes
- **ELK layouts** for automatic graph arrangement
- **Rich node & edge types** — default, input, output, group, resizable, circle, toolbar; straight, step, smoothstep, bezier, button, data, animated, floating
- **Deep Dash integration** — clicks, selection, connections, drag/drop, context menus, undo/redo, copy/paste, save/restore, image export — all as callback props
- **Dash 4.1+** compatible (React 18; docs site developed against 4.2+)

---

## Install

```bash
pip install dash-flows
```

```python
import dash
from dash import html
import dash_flows

app = dash.Dash(__name__)

app.layout = html.Div(
    dash_flows.DashFlows(
        id="flow",
        nodes=[
            {"id": "1", "type": "input",  "data": {"label": "Start"}, "position": {"x": 100, "y": 100}},
            {"id": "2", "type": "default","data": {"label": "Process"}, "position": {"x": 100, "y": 240}},
            {"id": "3", "type": "output", "data": {"label": "End"}, "position": {"x": 100, "y": 380}},
        ],
        edges=[
            {"id": "e1-2", "source": "1", "target": "2", "animated": True},
            {"id": "e2-3", "source": "2", "target": "3"},
        ],
        style={"height": "500px"},
        showControls=True,
        showMiniMap=True,
    ),
    style={"height": "100vh"},
)

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

---

## Explore the docs

Use the sidebar to explore each area of the library. Every page shows live,
runnable examples with their source code:

- **Getting Started** — your first flow, nodes, edges, and styling
- **Nodes** — all built-in node types, handle configuration, Dash components & icons inside nodes
- **Edges** — every edge type, including floating edges
- **Canvas & Controls** — backgrounds, controls, minimap, viewport
- **Interactions & Selection** — clicks, context menus, connection validation & limits
- **Layout & Handles** — ELK layouts, smart handles, helper lines, animated layout
- **Save, Restore & Export** — persistence, image export, copy/paste
- **Drag & Drop** — palette drag-and-drop and add-node-on-edge-drop
- **Theming & UI** — color modes, color schemes, and UI building blocks
- **Advanced Features** — undo/redo, computing flows, sub-flows, viewport portal, accessibility
- **API Reference** — the full `DashFlows` prop table

---

*Built by [Pip Install Python](https://2plot.dev) · [GitHub](https://github.com/pip-install-python/dash-flows) · MIT licensed*

## Other sizes of this document

- [/llms-small.txt](https://flows.2plot.dev/llms-small.txt): compact briefing — start here if context is tight. (3.6 KB, ~925 tok)
- [/llms.txt](https://flows.2plot.dev/llms.txt): this document — the index you are reading. (11.5 KB, ~2.9k tok)
- [/llms-full.txt](https://flows.2plot.dev/llms-full.txt): every page's prose in one document — 14 pages. (416.5 KB, ~106.6k tok)

## Access policy

- Terms: these documents are free to fetch. A free account unlocks any gated document.
- Identity: agents may present a key by appending `?key=<value>` to any document URL. Get one: https://2plot.ai
- Rate: prefer ONE `/llms-full.txt` fetch over N per-page fetches. On 429, honour `Retry-After` and back off exponentially.
- Coordination: start at https://2plot.dev/llms.txt — one index enumerates every site; do not rediscover the network by crawling it.
- Crawler policy (mirrors /robots.txt): allowed: GPTBot, ClaudeBot, CCBot, Google-Extended, FacebookBot, Omgili, ByteSpider, Amazonbot, Applebot-Extended, meta-externalagent, AI2Bot, Diffbot, Timpibot, ImagesiftBot, ChatGPT-User, Claude-User, Claude-SearchBot, PerplexityBot, OAI-SearchBot, Perplexity-User, Googlebot, Bingbot, Slurp, DuckDuckBot, GoogleOther, Google-InspectionTool, Storebot-Google, AdsBot-Google.
- Accounting: every document read is logged with the requesting vendor (verified against published IP ranges where the operator publishes them). See https://2plot.dev/llms.txt

## Pages

Every page in this application. Each has a Markdown version at the `llms.txt` URL beside it.

- [dash-flows — React Flow node graphs for Dash](https://flows.2plot.dev/): dash-flows — React Flow (@xyflow/react 12) node-graph components for Plotly Dash: interactive flow diagrams with a glass-morphism theme, ELK layouts, custom node/edge types, undo/redo, sub-flows and full Dash callback integration. By Pip Install Python.
  - Machine-readable: https://flows.2plot.dev/llms.txt (11.5 KB, ~2.9k tok)
- [Advanced Features](https://flows.2plot.dev/advanced): Undo/redo, computing flows, sub-flows, viewport portal, accessibility, and more.
  - Machine-readable: https://flows.2plot.dev/advanced/llms.txt (96.0 KB, ~24.6k tok)
- [API](https://flows.2plot.dev/api): Component props reference for dash_flows.
  - Machine-readable: https://flows.2plot.dev/api/llms.txt (33.0 KB, ~8.4k tok)
- [API Reference](https://flows.2plot.dev/api-reference): The full DashFlows prop table plus node and edge component props.
  - Machine-readable: https://flows.2plot.dev/api-reference/llms.txt (33.4 KB, ~8.6k tok)
- [Canvas & Controls](https://flows.2plot.dev/canvas): Background variants, zoom/pan controls, the minimap, and viewport control.
  - Machine-readable: https://flows.2plot.dev/canvas/llms.txt (16.3 KB, ~4.2k tok)
- [Changelog](https://flows.2plot.dev/changelog): Version history of dash-flows, rendered from CHANGELOG.md.
  - Machine-readable: https://flows.2plot.dev/changelog/llms.txt (32.5 KB, ~8.3k tok)
- [Drag & Drop](https://flows.2plot.dev/drag-drop): Drag nodes from a palette onto the canvas, and create nodes by dropping an edge.
  - Machine-readable: https://flows.2plot.dev/drag-drop/llms.txt (12.7 KB, ~3.3k tok)
- [Edges](https://flows.2plot.dev/edges): Every edge type, including floating edges that attach to the nearest border.
  - Machine-readable: https://flows.2plot.dev/edges/llms.txt (11.7 KB, ~3.0k tok)
- [Getting Started](https://flows.2plot.dev/getting-started): Build your first dash-flows graph: nodes, edges, and styling.
  - Machine-readable: https://flows.2plot.dev/getting-started/llms.txt (5.2 KB, ~1.3k tok)
- [Interactions & Selection](https://flows.2plot.dev/interactions): Clicks, context menus, connection validation and limits, and multi-select.
  - Machine-readable: https://flows.2plot.dev/interactions/llms.txt (51.2 KB, ~13.1k tok)
- [Layout & Handles](https://flows.2plot.dev/layout): Automatic ELK layouts, smart handles, helper lines, and animated layout transitions.
  - Machine-readable: https://flows.2plot.dev/layout/llms.txt (27.6 KB, ~7.1k tok)
- [Nodes](https://flows.2plot.dev/nodes): Built-in node types, handle configuration, and Dash components or icons inside nodes.
  - Machine-readable: https://flows.2plot.dev/nodes/llms.txt (47.7 KB, ~12.2k tok)
- [Save, Restore & Export](https://flows.2plot.dev/persistence): Persist and restore flow state, export to PNG, and copy/paste.
  - Machine-readable: https://flows.2plot.dev/persistence/llms.txt (21.7 KB, ~5.6k tok)
- [Theming & UI](https://flows.2plot.dev/theming): Color modes, glass/solid/minimal presets, color schemes, and UI building blocks.
  - Machine-readable: https://flows.2plot.dev/theming/llms.txt (26.9 KB, ~6.9k tok)

## About The 2plot network

Open-source Dash component libraries by Pip Install Python. Each component has its own documentation site and its own llms.txt; 2plot.dev indexes all of them, and 2plot.ai is the hub.

Network index: [https://2plot.dev](https://2plot.dev/llms.txt)

## Network

Other applications in this network. Same operator; each one serves its own `/llms.txt` in this format.

- [2plot.ai](https://2plot.ai): Network hub and account origin.
  - Machine-readable: https://2plot.ai/llms.txt
- [2plot.dev](https://2plot.dev): Package index for every open-source component in the network.
  - Machine-readable: https://2plot.dev/llms.txt
- [Documentation boilerplate](https://boilerplate.2plot.dev): The markdown-driven documentation template every satellite site is built from.
  - Machine-readable: https://boilerplate.2plot.dev/llms.txt
- [dash-leaflet2](https://leaflet.2plot.dev): Leaflet 2 maps as Dash components.
  - Machine-readable: https://leaflet.2plot.dev/llms.txt
- [dash-mui-scheduler](https://muischeduler.2plot.dev): MUI X Scheduler — calendars and event scheduling for Dash.
  - Machine-readable: https://muischeduler.2plot.dev/llms.txt
- [dash-mui-charts](https://muicharts.2plot.dev): MUI X charts, tree views and time pickers for Dash.
  - Machine-readable: https://muicharts.2plot.dev/llms.txt
- [flexlayout-dash](https://flexlayout.2plot.dev): IDE-style dockable, resizable and floatable window panels.
  - Machine-readable: https://flexlayout.2plot.dev/llms.txt
- [dash-improve-my-llms](https://llms.2plot.dev): The AI/LLM and SEO package every site in this network is built on.
  - Machine-readable: https://llms.2plot.dev/llms.txt
- [dash-pannellum](https://pannellum.2plot.dev): 360° panorama and virtual-tour viewer.
  - Machine-readable: https://pannellum.2plot.dev/llms.txt
- [dash-emoji-mart](https://emojimart.2plot.dev): Emoji picker component.
  - Machine-readable: https://emojimart.2plot.dev/llms.txt
- [dash-email](https://email.2plot.dev): Email composition and delivery components.
  - Machine-readable: https://email.2plot.dev/llms.txt
- [dash-model-viewer](https://modelviewer.2plot.dev): 3D model viewer with AR support, built on Google's model-viewer.
  - Machine-readable: https://modelviewer.2plot.dev/llms.txt
- [dash-excalidraw](https://excalidraw.2plot.dev): Excalidraw virtual whiteboard and sketching canvas.
  - Machine-readable: https://excalidraw.2plot.dev/llms.txt

## Related projects

Projects by the same author on their own domains. Built on the same stack, but not part of the primary network.

- [Pirate's Bargain](https://piratesbargain.com): Deal aggregator built on the same Dash stack.
  - Machine-readable: https://piratesbargain.com/llms.txt
- [ai-agent.buzz](https://ai-agent.buzz): Agent tooling directory.
  - Machine-readable: https://ai-agent.buzz/llms.txt
- [2plot.media](https://2plot.media): Media and streaming, on the same Dash stack.
  - Machine-readable: https://2plot.media/llms.txt

## External references

Third-party documentation this project depends on or references. Not affiliated — listed so an agent can follow a dependency directly instead of searching for it.

- [Dash Mantine Components](https://www.dash-mantine-components.com): The UI component layer these docs are built with.
  - Machine-readable: https://www.dash-mantine-components.com/llms.txt
- [Plotly Dash documentation](https://dash.plotly.com): Upstream framework documentation.
  - Machine-readable: https://dash.plotly.com/llms.txt