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.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