搜索插件、代码仓与 APP 分类

插件详情v0.32.0

vyuh_node_flow

一个灵活且高性能的基于节点的流程编辑器,适用于 Flutter。用于构建可视化编程界面、工作流编辑器、图表和数据管道。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
6920
喜欢数
168
Pub 分数
150

安装插件

flutter pub add vyuh_node_flow

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

Vyuh Node Flow 是一个高性能、灵活的节点式流程编辑器,专为 Flutter 设计,使开发者能够创建可视化编程界面、工作流编辑器、图表和数据管道。它提供直观的拖放界面,用于构建具有自定义输入、输出和连接的互联节点。该组件支持跨平台使用,兼容 Android、iOS、Web、macOS、Windows 和 Linux。该包非常适合需要动态视觉逻辑表示的应用程序,例如低代码工具、数据处理工作流或交互式绘图系统。

适合场景

  • 可视化编程界面
  • 工作流程与流程设计
  • 数据管道可视化
  • 交互式图表编辑器
  • 低代码应用开发

主要特点

  • 拖拽节点操作
  • 可自定义的节点模板
  • 实时连接处理
  • 跨平台兼容性
  • 高性能渲染
  • 可扩展的插件架构

适合对象

  • 开发交互式图表工具的开发者
  • 创建低代码平台的团队
  • 带有视觉逻辑的教育类应用程序
  • 数据流和管道可视化
  • 需要基于节点的工作流的UI密集型应用程序

使用建议

  • 需要理解基于节点的逻辑设计
  • 复杂的UI可能需要自定义样式
  • 性能取决于节点数量和复杂度
  • 有限的内置节点类型(可通过插件扩展)
  • 新用户可能需要一定的学习曲线来完成初始设置

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

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

🤝 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

所属分类

依赖

依赖清单 7 项

源码仓库

使用此插件的项目

暂无相关数据。