bcakmakoglu/vue-flow

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.
• Diagramming And UI Libraries - Flowchart and node editor component for Vue 3.
• Trees and Graphs - Interactive flowchart and graph editor.
• Vue3 项目 - Listed in the “Vue3 项目” section of the Great Open Source Project awesome list.

Star history