Flow Chart
Flow is a high-performance general-purpose flow chart/node editor component using a hybrid rendering architecture (SVG + Canvas + Virtual Scrolling), supporting 10,000+ nodes.
Features
- High-performance rendering: Supports 10,000+ nodes with virtual scrolling + incremental updates.
- Hybrid rendering architecture: Nodes are rendered as Vue components, edges are rendered with SVG, and the background with Canvas.
- Rich interaction: Node dragging, edge creation, box selection, and keyboard shortcuts.
- Complete plugin system: Built-in plugins like Minimap, Controls, Grid, Snap, Export, etc.
- Flexible extension: Support for custom nodes, custom edges, and nested nodes.
- TypeScript Support: Complete type definitions and generic support.
Installation
bash
npm install @yh-ui/flowBasic Usage
Input Node
Process Node
Output Node
Basic Usage
With Controls and Minimap
Start
Process A
Process B
End
Controls & Minimap
Interaction
- Pan Viewport: Click and drag on empty space, or use the mouse wheel.
- Zoom: Use the mouse wheel or
Ctrl + wheel. - Select Nodes: Click a node, or use
Shift + clickfor multiple selection. - Box Selection: Press
Alt/Optionand drag to box select. - Connect Nodes: Drag from a handle on one node to another.
- Delete: Press the
Deletekey when a node or edge is selected. - Undo/Redo:
Ctrl + Z/Ctrl + Shift + Z.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| nodes | Node[] | [] | Node data |
| edges | Edge[] | [] | Edge data |
| modelValue | ViewportTransform | { x: 0, y: 0, zoom: 1 } | Viewport transform |
| minZoom | number | 0.1 | Minimum zoom level |
| maxZoom | number | 5 | Maximum zoom level |
| zoomStep | number | 0.1 | Zoom step size |
| nodesDraggable | boolean | true | Whether nodes can be dragged |
| edgesConnectable | boolean | true | Whether edges can be connected |
| selectable | boolean | true | Whether items are selectable |
| background | 'none' | 'dots' | 'grid' | 'dots' | Background type |
| backgroundColor | string | - | Background color |
| gridSize | number | 15 | Grid size |
| snapToGrid | boolean | false | Whether to snap to grid |
| snapGrid | [number, number] | [15, 15] | Grid snap size |
| readonly | boolean | false | Whether the editor is read-only |
| showControls | boolean | false | Whether to show control bar |
| showMinimap | boolean | false | Whether to show minimap |
| minimapNodeColor | string | - | Node color in minimap |
| showAlignmentLines | boolean | true | Whether to show alignment lines |
| snapThreshold | number | 10 | Node snapping threshold |
| history | boolean | true | Whether to enable history |
| maxHistory | number | 50 | Maximum history items |
| keyboardShortcuts | boolean | true | Whether to enable keyboard shortcuts |
Events
| Event | Parameters | Description |
|---|---|---|
| update:modelValue | (value: ViewportTransform) | Triggered when viewport changes |
| update:nodes | (nodes: Node[]) | Triggered when nodes change |
| update:edges | (edges: Edge[]) | Triggered when edges change |
| nodeClick | { node: Node; nativeEvent: MouseEvent } | Node clicked |
| nodeDblClick | { node: Node; nativeEvent: MouseEvent } | Node double-clicked |
| nodeDragStart | { node: Node; nativeEvent: MouseEvent } | Node drag start |
| nodeDrag | { node: Node; nativeEvent: MouseEvent; position: { x: number; y: number } } | Node dragging |
| nodeDragEnd | { node: Node; nativeEvent: MouseEvent } | Node drag end |
| nodeContextMenu | { node: Node; nativeEvent: MouseEvent } | Node context menu |
| edgeClick | { edge: Edge; nativeEvent: MouseEvent } | Edge clicked |
| edgeDblClick | { edge: Edge; nativeEvent: MouseEvent } | Edge double-clicked |
| edgeContextMenu | { edge: Edge; nativeEvent: MouseEvent } | Edge context menu |
| edgeConnect | Connection | Edge connected successfully |
| selectionChange | { selectedNodes: Node[]; selectedEdges: Edge[] } | Selection changed |
| historyChange | { canUndo: boolean; canRedo: boolean } | History change |
| viewportChange | ViewportTransform | Viewport transform change |
Note: If you need to implement "Delete Selected", toolbars that show based on selection, etc., please listen to
@selection-changeand update local state (like selected ID sets) based onselectedNodes/selectedEdges.
Next
- Node Types - Understand built-in node types
- Edge Types - Understand different edge types
- Interaction - Learn more about interactive features
- Alignment - Use alignment and distribution
- Plugin System - Use and create plugins