Visualize Your
Data Flow
A high-performance, fully customizable node-based flow editor for Flutter. Build workflow editors and process automation tools with fluid precision.
Declarative & Type-Safe
Built for Flutter developers who love clean, maintainable code. Define your nodes, connections, and logic in pure Dart with full type safety.
Reactive State
Changes to your data automatically update the graph. No manual redraws needed.
Strict Typing
Catch errors at compile time with generic node data types.
import 'package:flutter/material.dart';
import 'package:vyuh_node_flow/vyuh_node_flow.dart';
class SimpleFlowEditor extends StatefulWidget {
@override
State createState() => _SimpleFlowEditorState();
}
class _SimpleFlowEditorState extends State {
late final NodeFlowController controller;
@override
void initState() {
super.initState();
// 1. Initialize the controller
controller = NodeFlowController();
// 2. Add nodes programmatically
controller.addNode(Node(
id: 'node-1',
type: 'input',
position: const Offset(100, 100),
data: 'Start',
outputPorts: [Port(id: 'out', name: 'Output')],
));
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: NodeFlowEditor(
controller: controller,
theme: NodeFlowTheme.light,
// 3. Customize node rendering
nodeBuilder: (context, node) => Container(
padding: EdgeInsets.all(16),
child: Text(node.data),
),
),
);
}
} Designed for Your Brand
Don't settle for default styles. Our comprehensive theming system allows you to customize every pixel - from node borders and shadows to connection colors and grid patterns.
- Dark & Light mode support out of the box
- Granular control over ports, labels, and handles
- Custom shapes for endpoints and markers
Fluid Interactions
Make your flows feel tangible. Connections snap into place, nodes glow on selection, and data flow is visualized with beautiful, performant animations.
- 60fps animations even with complex graphs
- Connection effects: FlowingDash, Particles, Pulse, Rainbow
- Drag-and-drop with snap-to-port validation
Built for Scale
Whether you're rendering 10 nodes or 10,000, Vyuh Node Flow maintains buttery smooth performance using efficient rendering techniques and virtualization.
- Virtualized viewport rendering
- Optimized gesture handling
- Minimal memory footprint
Touch Optimized
Designing for mobile? No problem. Our interaction model adapts seamlessly to touch gestures, making it perfect for tablet and phone interfaces.
- Multi-touch zoom and pan support
- Large touch targets for ports and handles
- Haptic feedback integration ready
Everything You Need
A complete toolkit for building professional node-based interfaces.
Infinite Use Cases
From simple logic to complex state machines, Vyuh Node Flow handles it with ease.
Visual step-by-step logic engines.
Real-time device network topologies.
Custom node-based programming editors.
Dialogue tree and response mapping.
Schema visualization and relationship mapping.
Infinite canvas for collaborative ideas.
Cloud infrastructure visualization.
Electronic and logic gate simulation.
Ready to create?
Join developers building the next generation of visual tools with Flutter and Vyuh Node Flow.
Start building your flows today.