パッケージ、リポジトリ、アプリカテゴリを検索

パッケージ詳細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 件

ソースリポジトリ

このパッケージを使用しているプロジェクト

データはまだありません。