Vyuh Node Flow

Visual Graph Editor

A powerful node-based flow editor for Flutter applications. Build visual programming interfaces, workflow editors, and interactive diagrams with a highly customizable canvas.

Why Node Flow?

Drag & Drop

Intuitive node manipulation with smooth animations and gesture support.

Smart Connections

Auto-routing edges with customizable path styles and connection validation.

Infinite Canvas

Pan, zoom, and navigate large graphs with minimap and viewport controls.

Fully Themeable

Complete control over node appearance, edge styles, and canvas theming.

Quick Example

// Create a flow editor
NodeFlowEditor(
  controller: NodeFlowController(
    nodes: [
      FlowNode(
        id: 'start',
        position: Offset(100, 100),
        type: 'input',
        data: {'label': 'Start'},
      ),
      FlowNode(
        id: 'process',
        position: Offset(300, 100),
        type: 'default',
        data: {'label': 'Process'},
      ),
    ],
    edges: [
      FlowEdge(
        id: 'e1',
        source: 'start',
        target: 'process',
      ),
    ],
  ),
  nodeBuilder: (node) => CustomNodeWidget(node: node),
  edgeStyle: EdgeStyle.bezier,
  onConnect: (connection) => print('Connected: $connection'),
  onNodeDragEnd: (node, offset) => print('Node moved: ${node.id}'),
);

Core Features

Multi-SelectBox selection and group operations

Undo/RedoFull history management built-in

Keyboard ShortcutsCopy, paste, delete, and more

Interactive Demo

Interactive demo coming soon

Try the full-featured node flow editor

Coming Soon

Comprehensive documentation is being developed. Check back soon for:

• Installation and setup guide
• Node customization
• Edge routing algorithms
• Event handling
• Performance optimization