vyuh-tech/vyuh_node_flow

Vyuh Node Flow

Vyuh Node Flow Banner

A flexible, high-performance node-based flow editor for Flutter applications, inspired by React Flow. This monorepo contains the core library and demo application.

Pub Version License Live Demo

📦 Packages

This repository is organized as a Dart workspace with the following packages:

vyuh_node_flow

The core Flutter package providing the node-based flow editor functionality.

Features:

• High-performance reactive rendering with MobX
• Level of Detail (LOD) for automatic visual simplification at zoom levels
• Type-safe node data with generics
• Fully customizable themes for nodes, connections, and ports
• Flexible port system with multiple shapes and positions
• Connection animation effects (flowing dashes, particles, gradients, pulse)
• Multiple connection styles (bezier, smoothstep, straight, step) with customizable endpoints
• AutoPan when dragging near viewport edges
• Viewport animations for smooth navigation transitions
• Annotations (sticky notes, markers, groups)
• Built-in minimap for navigation
• Comprehensive keyboard shortcuts
• Read-only viewer mode
• JSON serialization for saving/loading flows
• Extension architecture for modular, pluggable features

Installation:

dependencies:
  vyuh_node_flow: <latest version>

demo

A comprehensive demo application showcasing all features of the Vyuh Node Flow editor.

Includes:

• Interactive workbench with full editor controls
• Multiple example workflows (manufacturing, healthcare, IoT, etc.)
• Theme customization controls
• Layout and alignment tools
• Connection validation examples
• Annotation demonstrations

Try it online: 🚀 Live Demo

🚀 Getting Started

Prerequisites

• Flutter SDK 3.32.0 or higher
• Dart SDK 3.9.0 or higher

Development Setup

This project uses Melos for workspace management.

1. Clone the repository:

   git clone https://github.com/vyuh-tech/vyuh_node_flow.git
   cd vyuh_node_flow
   

2. Install dependencies:

   dart pub get
   

3. Bootstrap the workspace:

   dart run melos bootstrap
   

4. Run the demo:

   cd packages/demo
   flutter run -d chrome
   

Documentation

• Package Documentation
• API Reference
• Live Demo

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Made with ❤️ by the Vyuh Team