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