bcakmakoglu/vue-flow
Vue Flow
Vue Flow is a TypeScript library for building interactive node-based editors and flowcharts. It provides the core infrastructure for creating diagrams where users can drag, select, and connect nodes with edges, supporting pan and zoom navigation of the canvas.
The library offers extensive control over graph behavior and appearance, including the ability to customize connection lines, define custom edge types, and configure zoom constraints and viewport defaults. It includes built-in components like a minimap for navigation, zoom controls, and a fit-view button, along with features for node resizing, toolbar attachment, and handle positioning on any side of a node.
Data and state management are handled through composable functions that allow retrieval of all nodes, edges, and viewport state, as well as synchronization with external data via v-model. The library supports reactive rendering that updates only changed elements, and provides programmatic control over viewport position, zoom level, and fit-to-content functionality.
Features
- Node-Based Diagramming Frameworks - Creates interactive flowcharts with draggable, selectable nodes and edges that users can zoom and pan.
- Edge Creators - Connects nodes by passing edge definitions to the component or using the addEdges action from the composable.
- Edge Retrievals - Returns the list of all edges currently stored in the flow state.
- Predefined Edge Types - Renders connections as bezier, step, smoothstep, or straight lines using built-in edge types.
- Edge Data Updates - Provides composable functions to mutate edge data reactively within the node editor.
- Edge Path Calculations - Calculates bezier, smoothstep, or straight paths between node handles for custom edge rendering.
- Connection Path Customization - Ships a customizable connection line component that replaces the default drag-and-drop line.
- Edge Removals - Provides composable functions to delete edges from the diagram data model.
- Node Retrievals - Returns the list of all nodes currently stored in the flow state.
- Edge Type Registrations - Defines new edge components via template slots, a prop object, or global registration for unique visual connections.
- Node and Edge Customizations - Extends the appearance and behavior of nodes, edges, and connection lines to match design requirements.
- Connectivity Graph State Managers - Provides composable functions to read and manipulate the graph structure and data programmatically.
- State-Synchronized Bindings - Binds the flow internal node and edge state to external data via v-model, keeping both in sync.
- Event Handling - Binds event handlers to edges to respond to user interactions within the diagram.
- Interaction Controls - Provides interaction controls to enable or disable node dragging, selection, and edge connection.
- Diagram State Queries - Returns the complete list of nodes and edges currently stored in the flow state.
- Zoom Constraints - Sets minimum and maximum zoom levels and default zoom factor for the graph viewport.
- Handle Positionings - Allows attaching connection handles to any side of a node to control edge routing.
- Multiple Handles per Node - Supports an unlimited number of source or target handles on a single node, each with a unique id.
- Handle Connection Limits - Restricts how many edges a handle can accept using a boolean, number, or custom validation function.
- Zoom-Aware Overlays - Positions elements inside the viewport transformation so they scale and move with the graph's zoom and pan.
- Fit View - Ships a dedicated button that resets the viewport to show all diagram elements.
- Zoom - Zooms in and out of the canvas using dedicated buttons in the control panel.
- Fixed Overlay Elements - Places custom UI elements inside the graph wrapper that stay fixed regardless of viewport zoom or pan.
- Data-to-Pixel Mapping - Converts pixel coordinates from the screen to the internal coordinate system of the node editor.
- Handle Position Refreshers - Refreshes node internals when handles are added or repositioned at runtime to keep edges aligned.
- Floating Toolbars - Shows a floating toolbar on a selected node with quick actions for manipulating that node.
- Element Locks - Toggles interactivity on and off for the entire diagram to prevent accidental edits.
- Node Change Validators - Disables automatic change handling and lets users validate or reject node and edge modifications.
- Viewport Defaults - Allows setting the default viewport position and zoom level that the graph opens with.
- Component Appearance Customizers - Overrides default edge styles and applies custom CSS properties to control visual presentation.
- Exact Zoom Level Setting - Provides programmatic control to set the viewport zoom to any precise numeric level.
- Programmatic Zoom Controls - Offers programmatic methods to move the viewport to any coordinate and zoom level.
- Stepwise Zoom Controls - Ships dedicated zoom-in and zoom-out buttons for stepwise viewport adjustment.
- Zoom Control Panels - Places a panel with zoom-in, zoom-out, and fit-to-view buttons for easy viewport adjustment.
- Full State Snapshots - Returns the current elements, viewport position, and zoom level as a single object.
- Minimap Navigation - Renders a small overview of the entire node graph in a corner for quick navigation.
- Node Resizings - Lets users drag a node edge or corner handle to change its width and height interactively.
- Viewport Fitting Controls - Provides a fit-view button that adjusts zoom and position to show all nodes.
- Trees and Graphs - Interactive flowchart and graph editor.
- Vue3 项目 - Listed in the “Vue3 项目” section of the Great Open Source Project awesome list.
