An easy, customizable, fast, interactive flowchart component for Vue 3.
Basic usage:
1. Import the vue-flow.
import { VueFlow } from '@vue-flow/core' // core stylesheet @import "@vue-flow/core/dist/style.css"; // default theme (optional) @import "@vue-flow/core/dist/theme-default.css";
2. Add the vue-flow component to the template.
<template> <VueFlow v-model="elements"></VueFlow> </template>
3. Add nodes to the flowchart.
const elements = ref([ { id: '1', type: 'input', // input node label: 'Input Node', position: { x: 250, y: 25 }, }, { id: '2', label: 'Label 2', position: { x: 100, y: 125 }, }, { id: '3', type: 'output', label: 'Output Node', position: { x: 250, y: 250 }, }, // edges { id: 'e1-3', source: '1', target: '3', }, // animated nodes { id: 'e1-2', source: '1', target: '2', animated: true }, { id: '4', label: 'Node 4', position: { x: 250, y: 5 }, // additional CSS classes class: 'my-custom-node-class', // or using inline styles style: { backgroundColor: 'green', width: '200px', height: '100px' }, // or using a function style: (el) => { if (el.selected) return { background: 'purple' } return { background: 'green' } } } ])
4. All available FlowChart props.
id?: string modelValue?: Elements nodes?: Node[] edges?: Edge[] /** either use the edgeTypes prop to define your edge-types or use slots (<template #edge-mySpecialType="props">) */ edgeTypes?: EdgeTypesObject /** either use the nodeTypes prop to define your node-types or use slots (<template #node-mySpecialType="props">) */ nodeTypes?: NodeTypesObject connectionMode?: ConnectionMode /** @deprecated use {@link ConnectionLineOptions.type} */ connectionLineType?: ConnectionLineType /** @deprecated use {@link ConnectionLineOptions.style} */ connectionLineStyle?: CSSProperties | null connectionLineOptions?: ConnectionLineOptions deleteKeyCode?: KeyFilter selectionKeyCode?: KeyFilter multiSelectionKeyCode?: KeyFilter zoomActivationKeyCode?: KeyFilter snapToGrid?: boolean snapGrid?: SnapGrid onlyRenderVisibleElements?: boolean edgesUpdatable?: EdgeUpdatable nodesDraggable?: boolean nodesConnectable?: boolean elementsSelectable?: boolean selectNodesOnDrag?: boolean /** move pane on drag, replaced prop `paneMovable` */ panOnDrag?: boolean minZoom?: number maxZoom?: number defaultZoom?: number defaultPosition?: [number, number] translateExtent?: CoordinateExtent nodeExtent?: CoordinateExtent defaultMarkerColor?: string zoomOnScroll?: boolean zoomOnPinch?: boolean panOnScroll?: boolean panOnScrollSpeed?: number panOnScrollMode?: PanOnScrollMode zoomOnDoubleClick?: boolean /** enable this to prevent vue flow from scrolling inside the container, i.e. allow for the page to scroll */ preventScrolling?: boolean edgeUpdaterRadius?: number fitViewOnInit?: boolean /** allow connection with click handlers, i.e. support touch devices */ connectOnClick?: boolean /** apply default change handlers for position, dimensions, adding/removing nodes. set this to false if you want to apply the changes manually */ applyDefault?: boolean /** automatically create an edge when connection is triggered */ autoConnect?: boolean | Connector noDragClassName?: string noWheelClassName?: string noPanClassName?: string /** does not work for the `addEdge` utility! */ defaultEdgeOptions?: DefaultEdgeOptions /** elevates edges when selected and applies z-Index to put them above their nodes */ elevateEdgesOnSelect?: boolean
Preview:
Changelog:
v1.22.3 (08/21/2023)
- fix smooth step edge horizontally or vertically aligned nodes
- Fix scroll speed when using Control btn on windows
- Use os specific key defaults (Windows -> Control, Mac -> Meta)
- Add role img to edges if not focusable
- Improve smoothstep edge label positioning
- Fix horizontal scroll on windows
- Clear pressed key on keyup event, so that key combinations only work while simulteanously pressing keys
- Allow passing key combinations as a simple string instead of wrapping in an array
- Reset isPressed value when switching from a boolean keyFilter to another type of keyFilter
v1.22.2 (07/27/2023)
- Check if viewport transform is defined before setting in fromObj action
v1.22.1 (07/24/2023)
- Deprecate position and zoom props on FlowExportObj and replace with viewport
- ESC key press causing browser error when blur on nodeEl is called
- Wait for viewport helper when calling fromObject action
v1.21.2 (07/19/2023)
- Use flush timing when calculating node positions
- Use noop functions instead of waiting for promise to be resolved when triggering viewport actions like fitView, setCenter etc.
- Pass missing handle dom node to valid handle result obj
- Fix connection line status prop type. Can be string or null.
v1.21.1 (07/13/2023)
- Correct nested nodes position calculation
v1.21.0 (07/10/2023)
- Expose template refs from base edge component
- Resolve slot templates before falling back to default node/edge components
- Deprecate template prop for nodes
- Clamp node extent by node dimensions to avoid node overflowing the extent by its size
- Priotize handle below during handle lookup
- Add style and ref to base edge props to avoid volar ts error
v1.20.2 (06/15/2023)
- Correct handle position calculation during lookup
- Consider handle dimensions when calculating distance
- Trigger connect if connection end handle is stored in state
- Set interaction edge (invisible overlay path) to no animation to avoid breaking pointer on hover
- Use isValidHandle with null as closest handle when none can be found
- Fix connection line path calculation
- Reset connection end handle state on connection end
- Wrap each edge element in a separate svg container to allow changing z-index of edges without causing a re-render on all of them.
v1.20.1 (05/15/2023)
- Fetch current node in drag handler, fixes drag handler using outdated node obj when it has been overwritten
- Avoid inserting invalid nodes into state and throw error msg if invalid node is passed
- Allow passing a MaybeComputedRef type as isValidConnection arg for useHandle composable
- Use all handles in connection radius and select closest one that is valid
- Set default viewport type as partial
v1.20.0 (05/11/2023)
- Add parent class name to parent nodes
- Allow passing a single element to removeNodes and removeEdges actions
- Add id prop to BaseEdge component and pass id to the edge path
- Add fromObject function to load a graph from a flow export obj
- Allow passing a single element to addNodes or addEdges actions
- When handles are on top of each other, try to pick the one closest to center and/or one that is of type target
- Do not render edges that are connected to a hidden node
v1.19.4 (05/10/2023)
- Check if transform has changed in panBy before applying the new transform
- Properly reset the store state when using $reset and retain reactivity of store state
v1.19.3 (05/06/2023)
- Check if node exists during drag
- Emit pane mouse move event if no active selection exists
- Return bool from panBy and use the val to check if auto-pan should be triggered
- Prevent orphaned edge warning for edges with deletable: false when calculating max z-index of edges
- Pass selectionKeyCode ref to useKeyPress
v1.19.2 (04/26/2023)
- Fix focus,focus-visible and selected styles not using proper border colors
- Set vue flow version as regular string instead of a ref
v1.19.0 (04/11/2023)
- Allow CoordinateExtent as range for extended node extent
- Allow passing node ids as string array to getConnectedEdges
- Add getConnectedNodes utility function
- Allow passing undefined as id to findNode & findEdge
- Allow passing plain number as padding for extent range
- Add ToGraphNode and ToGraphEdge utility types
- Allow passing regular edge type to getConnectedEdges
- Add missing Type generic to node types
- Limit auto-pan when dragging a node by translate extent, so nodes cannot be dragged infinitely into the background.
- Deprecate class and style funcs for node/edge types
- Add missing Type generic to edge types
- Add exports field to package.json
v1.18.2 (04/07/2023)
- Set handle connectable prop to undefined as it’s default value.
v1.18.1 (04/04/2023)
- Use connectionClickStartHandle for click connect
- Remove duplicate event bindings from handle
- Add noPanClassName to handles
- Allow null values to be set for key codes
- Use fallback for connectableStart and connectableEnd
v1.18.0 (04/04/2023)
- Add clickConnectStart and clickConnectEnd events
- Add type to edge updater anchor class
- Add connectableStart and connectableEnd handle props. Can be used to enable/disable starting or ending a connection on a specific handle.
- Add connection start and end handles to store state
- Do not remove orphaned edges from state. They will not be rendered but stay in the state, so a user can potentially fix the edge.
v1.17.6 (04/02/2023)
- Bugfixes
v1.17.5 (03/31/2023)
- Prevent handles with connectable false from being considered valid handles
- Unwrap nodesConnectable ref in onClick handler of handles
- Fix edges and connection line paths not matching up
v1.17.2 (03/29/2023)
- Make wheel and touchstart event listeners passive to avoid warnings
v1.17.1 (03/24/2023)
- Add missing emit definition for error
- Fix return type of getIncomers & getOutgoers
- Check if node handle bounds exist in getNodesInitialized
- Use visible nodes to check if onNodesInitialized should be triggered
v1.17.0 (03/22/2023)
- Allow passing objects with only id to getConnectedEdges nodes arg
- Add onError hook which allows handling vue flow errors by users. Will default to console.warn if no handler is passed
- Remove stop from EdgeRenderer as watcher has been removed and stop refers to window.stop which causes requests to be cancelled when VueFlow is unmounted
v1.16.5 (03/22/2023)
- Use Object.assign when parsing node to avoid mutating the original object.
- Fix non-passive wheel event listener violation
v1.16.4 (03/18/2023)
- Unwrap refs in node wrapper
- Rename parentNode prop for custom nodes to parent to avoid TypeError which occurs as div already has parentNode defined which cannot be overwritten
v1.16.3 (03/17/2023)
- Add missing source and target position values on GraphEdge type objects if available
- Use render fn for node wrapper. Fixes props being hyphanated instead of camelcase when passed to custom components.
v1.16.2 (03/11/2023)
- Use computed properties for edge class and style props
- Correct check if valid connection func was passed
v1.16.1 (03/08/2023)
- Add handle validation result into store state
- Pass targetNode and targetHandle as props to custom connection lines
- Export clamp utility
- Add isValidConnection prop to allow for validating edge updates or use a global validator for all handles
- Force update node dimensions when ResizeObserver callback is triggered
v1.15.5 (03/07/2023)
- Check if handle is connectable before trying to validate
- Blur node element after unselecting
v1.15.4 (03/03/2023)
- Compare internal node dimensions against calculated ones when trying to update node dimensions
v1.15.3 (03/02/2023)
- emove duplicate connectStart and connectEnd emits
- prevent selecting nodes when node selectable is false
- Make shouldReplaceId arg in updateEdge optional
- Add noPanClassName when node is draggable
- Wait until all nodes are initialized before triggering viewport actions
v1.15.2 (02/24/2023)
- Fix umd pkg names and use the correct vue flow core umd pkg name in plugins
- Prevent undefined being passed to updateNodeInternals
- Fix resize-observer throwing when node el doesn’t exist but effect is run
- Fix nodes not using zIndex option
- Prevent writing process.env into umd build
- Wait until viewport helper is initialized before triggering viewport functions and pane ready event
v1.15.1 (02/22/2023)
- Remove export of SelectionPane as the component doesn’t exist anymore
- Downgrade auto imports. Fixes broken type imports.
v1.15.0 (02/22/2023)
- Add option to enable/disable replacing edge id when updateEdge action is used
- Omit internal properties when using toObject
- Prevent layout shift on initial render by hiding viewport until initial nodes have width/height
- Remove Promises from viewport helper functions, will not await viewport anymore but instead return no-op functions if called too early
- Use snapGrid values to clamp initial node positions
v1.14.3 (02/15/2023)
- fix(core): prevent rendering edges that have been removed
- chore(core): remove any typecast
- refactor(core): use watcheffect to observe node dimensions
- refactor(core): fit view initially when node dimensions are updated
- refactor(core,types): use MouseTouchEvent for EdgeMouseEvent type
- refactor(core): set user-select: none for edge labels
v1.14.2 (02/07/2023)
- bugfixes
v1.14.1 (02/05/2023)
- fix(core): check if prevClosestHandle exists in pointer up
- refactor(core): cleanup useHandle and set status on action
v1.14.0 (02/05/2023)
- fix(core): ios connection error
- fix(core): avoid undraggable selected nodes being dragged
- chore: correct links in issue template
- feat(core): add connection status to connection lines
- refactor(core): use opposite position for connection lines
- feat(core): add vue flow error class
v1.13.2 (02/02/2023)
- fix(core): ref access when passing default edge options
v1.13.1 (02/01/2023)
- fix(core): pass valid connection func params
v1.13.0 (02/01/2023)
- feat(core): export getSimpleEdgeCenter & getBezierEdgeCenter
- feat(core): implement connection radius
- feat(core): export isGraphNode & isGraphEdge typeguards
- feat(core): add auto pan props
- feat(core): allow setting node/edge type with generic
v1.12.7 (01/23/2023)
- fix(core): hide node selection if no selected nodes exist
v1.12.6 (01/20/2023)
- refactor(core): add warning if trying to duplicate an element
- fix(core): use computed var to get current node in drag handler
v1.12.5 (01/19/2023)
- bugfixes
v1.12.2 (01/16/2023)
- bugfixes
v1.12.1 (01/12/2023)
- bugfixes
v1.12.0 (01/11/2023)
- feat(core): add zIndex option to elements
v1.11.1 (01/07/2023)
- refactor(workflows): update cache key for turborepo
- fix(core): add focus and focus-visible styles to nodes to avoid browser styles
v1.11.0 (01/07/2023)
- fix(core): prevent unselectable elements from being selected
- refactor(core): use pre flush in NodeWrapper
- feat(core): add deletable option to nodes and edges
v1.10.3 (01/06/2023)
- refactor(core): check if element still exists before attempting removal
v1.10.2 (01/05/2023)
- bugfixes
v1.10.1 (01/04/2023)
- refactor(core): allow omitting width/height styles for parent nodes
- feat(core): allow setting padding for extent parent
v1.10.1 (01/04/2023)
- fix(core): reapply node extent on change
v1.9.4 (12/31/2022)
- feat(workflows): add concurrency
- fix(core,nodes): slot props undefined on first render
v1.9.3 (12/30/2022)
- fix(a11y): use correct vue flow aria names
- fix(background): set container styles for bg
v1.9.2 (12/30/2022)
- refactor(workflows): use node 18
- refactor(workflows): use frozen lockfile
- fix(core,edges): correct edge component prop types
v1.9.1 (12/26/2022)
- fix(core): use regexp to fetch imports in slots patch
v1.9.0 (12/25/2022)
- more customization options to the selection behavior
v1.8.0 (12/22/2022)
- refactor(core): rename viewpane to viewpor
- refactor(core): merge defaultZoom & defaultPosition to defaultViewport
- fix(core): prevent expandParent from moving parent node while expanding
- feat(core): A11y
v1.7.2 (12/19/2022)
- refactor(core,edges): make label coords optional
- fix(core): input focus preventing selection rect / multi-select
- feat(core,nodes): add elevateNodesOnSelect option
- refactor(core,edges): group edges on edge selection changes
Download Details:
Author: bcakmakoglu
Live Demo: https://vueflow.dev/examples
Download Link: https://github.com/bcakmakoglu/vue-flow/archive/refs/heads/master.zip
Official Website: https://github.com/bcakmakoglu/vue-flow
Install & Download:
# Yarn
$ yarn add @braks/vue-flow
# NPM
$ npm i @braks/vue-flow