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