Customizable Flowchart Component For Vue 3

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