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:

Customizable Flowchart Component For Vue 3

Changelog:

v1.33.5 (03/24/2024)

  • Revert extending FlowEmits from separate interfaces for nodes and edges as it breaks event definitions for the actual component, causing warnings that the event was emitted by isn’t defined.

v1.33.4 (03/06/2024)

  • Revert extending FlowEmits from separate interfaces for nodes and edges as it breaks event definitions for the actual component, causing warnings that the event was emitted by isn’t defined.

v1.33.3 (03/06/2024)

  • Use separate interfaces for Edge- and NodeEvents and extend FlowEmit interface from them. Fixes edge events overwriting node event definitions when types are created.

v1.33.2 (02/28/2024)

  • Use nullish check to fallback to default center values in getSmoothstepPath
  • Check if node dimensions exist in useNodesInitialized
  • Remove ref prop from BaseEdge

v1.33.1 (02/23/2024)

  • Correct return type of useNodesData

v1.33.0 (02/21/2024)

  • Add node id and node type to return of useNodesData.
  • Use default cursor for nodes and use grab cursor if node is draggable
  • Prevent esc keypress triggers when keyboard a11y is disabled

v1.32.1 (02/15/2024)

  • Correct smoothstep edge pathing

v1.32.0 (02/15/2024)

  • Use data obj in default nodes to get label
  • Add edgeId to useHandleConnections return value
  • Update composables jsdocs
  • Wrap edge marker urls with single quotes to allow for css vars as color

v1.31.0 (02/05/2024)

  • Add useNodeId composable
  • Add updateNode action
  • Call onNodesInitialized whenever areNodesInitialized is true instead of only once
  • Omit events in nodes and edges when returning them from toObject
  • Add useHandleConnections composable

v1.30.1 (01/30/2024)

  • Check if values are numeric in isRect instead of checking for truthiness of values

v1.30.0 (01/29/2024)

  • Update

v1.29.2 (01/25/2024)

  • Check if event.key or event.code exists before trying to match keyfilter against keys

v1.29.1 (01/21/2024)

  • Watch shouldPanOnDrag & shouldPanOnScroll to determine whether listeners should be bound or not

v1.29.0 (01/21/2024)

  • Expose handleClick and handlePointerDown from handle components
  • Add useConnection composable for easy access of current connection params
  • Pass vueflow id to getMarkerId in connection line component
  • Add default event handler when no handlers for a given event exist anymore
  • Allow panning on scroll when selection is active
  • Merge connection line styles with options
  • Return false for boolean key filter and set the isPressed ref to whatever the keyFilter would be (true/false)
  • Await fitView before emitting pane-ready
  • Add fallback for connection line type (bezier as default)

v1.28.0 (01/03/2024)

  • Add source and target handle ids to removal change of edges.

v1.27.0 (12/12/2023)

  • Use relative paths for imports.

v1.27.0 (12/12/2023)

  • Set default node drag threshold to 1
  • Return promise from fromObject action. Promise is resolved when transition of setViewport ends
  • Add nullish check when looking up the edge label renderer el

v1.26.0 (11/10/2023)

  • Keep connection lines snapped while hovering over handles
  • Use correct prop value when prop watcher is executed instead of using prop key as value

v1.25.3 (11/09/2023)

  • Respect zoom activation key code when hovering an element with nopan on it
  • Use nodeRect to check for intersections

v1.25.2 (11/08/2023)

  • Revert importing types from vue instead of vueuse/core as it causes handle position to be messed up

v1.25.1 (11/08/2023)

  • Wait for d3zoom to exist before setting options
  • Import toValue from vueuse/core to avoid amiguous export with vue

v1.25.0 (11/08/2023)

  • Add currently stored nodes to isValidConnection args
  • Add slots and emits type definitions

v1.24.2 (11/04/2023)

  • Properly cleanup drag handlers when drag is disabled
  • Use existing node, if one was passed, for intersection checks
  • Add immediate flag to prop watchers. Fixes default viewport values not being available when viewport is mounted
  • Do not wait for d3zoom to be available when setting min/max zoom

v1.24.1 (10/30/2023)

  • Allow pan on drag when pan activation key is pressed and panOnDrag is set to false

v1.23.0 (10/06/2023)

  • Allow using expandParent together with parent extent
  • Add getIncomers, getOutgoers and getConnectedEdges as store actions
  • Cleanup node handlebounds when a handle is unmounted
  • Add nodeDragThreshold option
  • Add areNodesInitialized gettet to store
  • Add source and target node ids to edge removal changes
  • Add flowToScreenCoordinate & screenToFlowCoordinate to viewport actions
  • Allow passing a number as connectable prop to allow a specific number of connections per handle
  • Respect pan on scroll class name
  • Disable panning when panOnDrag is false
  • Unselect edge if selected and multi-selection is active
  • Queue node dimensions update to next tick

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

Add Comment