Skip to content

A flexible, high-performance node-based flow editor for Flutter. Build visual programming interfaces, workflow editors, diagrams, and data pipelines with customizable theming, and comprehensive interaction support.

License

Notifications You must be signed in to change notification settings

vyuh-tech/vyuh_node_flow

Repository files navigation

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:

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

Features:

  • High-performance reactive rendering with MobX
  • Type-safe node data with generics
  • Fully customizable themes for nodes, connections, and ports
  • Flexible port system with multiple shapes and positions
  • Annotations (sticky notes, markers, groups)
  • Built-in minimap for navigation
  • Comprehensive keyboard shortcuts
  • Multiple connection styles (bezier, smoothstep, straight, step)
  • Read-only viewer mode
  • JSON serialization for saving/loading flows
  • Auto-layout algorithms (grid, hierarchical, alignment, distribution)

Installation:

dependencies:
  vyuh_node_flow: ^0.2.5

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

🤝 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

About

A flexible, high-performance node-based flow editor for Flutter. Build visual programming interfaces, workflow editors, diagrams, and data pipelines with customizable theming, and comprehensive interaction support.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Contributors 3

  •  
  •  
  •  

Languages