패키지, 저장소 및 앱 카테고리 검색

ducafecatFlutter 생태계 탐색
패키지 상세v0.32.0

vyuh_node_flow

Flutter용 유연하고 고성능의 노드 기반 흐름 편집기입니다. 시각적 프로그래밍 인터페이스, 워크플로우 편집기, 다이어그램 및 데이터 파이프라인을 구축하세요.

AndroidiOSWebmacOSWindowsLinux
pub.dev API 문서 소스 코드
30일 다운로드
6.9천
좋아요
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 개

소스 저장소

이 패키지를 사용하는 프로젝트

아직 데이터가 없습니다.