#Makepad Flow

https://github.com/mofa-org/makepad-flow

A visual dataflow graph library and viewer built with Makepad. Create, visualize, and interact with node-based dataflow graphs.

#Features

• FlowCanvas Widget: GPU-accelerated canvas for rendering node graphs
• Interactive Editing: Drag nodes, create connections, zoom and pan
• Customizable Nodes: Multiple shapes (rounded, diamond, circle), colors by category
• Edge Styling: Solid, dashed, dotted lines with animated flow particles
• YAML Import: Load dataflow definitions from YAML files
• Filtering: Search, category filters, enable/disable nodes and ports

#Quick Start

1# Clone the repository
2git clone https://github.com/mofa-org/makepad-flow.git
3cd makepad-flow
4
5# Run the DORA Viewer demo
6cargo run --bin dora-viewer

#Renderings

#Project Structure

#DORA Viewer

The DORA Viewer is a complete application for visualizing DORA dataflow definitions.

#Running

1cargo run --bin dora-viewer

#Features

#Canvas Navigation

#Enable/Disable System

The viewer supports enabling and disabling nodes and ports to filter the dataflow visualization.

#Ctrl+Click to Toggle

In the tree panel on the left, use Ctrl+Click on any item to toggle its enabled state:

• Ctrl+Click on a Node: Toggles the node AND all its ports
• Ctrl+Click on a Port: Toggles only that specific port

#Enable States

#Visual Indicators

• Enabled items: Normal text color in tree
• Disabled items: Dimmed/grayed text in tree
• Hidden connections: Edges to disabled ports are not drawn on canvas
• Hidden nodes: Nodes that lose ALL connections (due to disabled ports) automatically disappear from the canvas

#Batch Operations

#Example Workflow

1. Type "control" in search box
2. Click Toggle Match → All ports containing "control" are disabled
3. Nodes that only had "control" connections disappear from canvas
4. Click Toggle Match again → Ports re-enabled, nodes reappear

#Controls Summary

#FlowCanvas Library

The core makepad-flow crate provides the FlowCanvas widget for building your own flow-based applications.

#Basic Usage

1use makepad_flow::flow_canvas::*;
2
3live_design! {
4    use link::theme::*;
5    use link::widgets::*;
6    use makepad_flow::flow_canvas::FlowCanvas;
7
8    App = {{App}} {
9        ui: <Window> {
10            body = <FlowCanvas> {}
11        }
12    }
13}

#Adding Nodes

1// Add a node programmatically
2let canvas = self.ui.flow_canvas(id!(body));
3canvas.add_node(cx, NodeType::Processor);

#Node Categories

Nodes can be assigned categories for color-coding:

#YAML Dataflow Format

1nodes:
2  - id: node-name
3    path: executable/path
4    inputs:
5      input-port: source-node/output-port
6    outputs:
7      - output-port-name

#Example

1nodes:
2  - id: camera
3    path: camera-capture
4    outputs:
5      - image
6      - metadata
7
8  - id: detector
9    path: object-detector
10    inputs:
11      frame: camera/image
12    outputs:
13      - detections
14      - confidence
15
16  - id: tracker
17    path: object-tracker
18    inputs:
19      detections: detector/detections
20      frame: camera/image
21    outputs:
22      - tracks

#Documentation

• DORA Viewer Usage - Detailed usage guide
• API Gaps - Known limitations
• Roadmap - Future development plans

#Requirements

• Rust (latest stable)
• Makepad framework