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, Elements } from '@braks/vue-flow';
// core stylesheet
@import "node_modules/@braks/vue-flow/dist/styles.css";
// default theme (optional)
@import "node_modules/@braks/vue-flow/dist/theme-default.css";

2. Add the vue-flow component to the template.

<VueFlow :elements="elements" />

3. Add nodes to the flowchart.

const elements: Elements = [
  {
    id: '1',
    type: 'input', // input node
    data: { label: 'Input Node' },
    position: { x: 250, y: 25 },
  },
  {
    id: '2',
    // you can pass a Vue component, string or html-string as a label
    data: { label: '<div>Default Node</div>' },
    position: { x: 100, y: 125 },
  },
  {
    id: '3',
    type: 'output', // output node
    data: { label: 'Output Node' },
    position: { x: 250, y: 250 },
  },
  // animated edge
  { id: 'e1-2', source: '1', target: '2', animated: true },
  { id: 'e2-3', source: '2', target: '3' },
]

Preview:

Changelog:

v0.4.27 (06/26/2022)

• chore(nodes): check if node ref exists before updating dimensions
• feat(edges): add connectionLineOptions prop
• chore(deps): update deps
• feat(nodes): allow node internals to be updated by event

v0.4.26 (06/24/2022)

• refactor: trigger viewport size update on window resize
• feat(components): add pattern-container slot to Background

v0.4.25 (06/24/2022)

• fix(components): use v-if on slots instead of lock icons

v0.4.24 (06/23/2022)

• perf(edges): too many loops in grouping watcher
• fix(edges): remove sourcePosition & targetPosition from initial edge options
• feat(edges): add contextual edge events
• chore(nodes): correct name of useNodeHooks
• chore(edges): simplify elevateEdgesOnSelect logic
• refactor(types): remove unnecessary generics
• chore(nodes): use scope for node watchers
• refactor(edges): edges z-index 0 by default
• fix(nodes): use correct zindex on selection
• refactor(nodes): use content-box for resize observer
• refactor(nodes): apply node specific snapGrid on drag
• chore(nodes): remove nodeElement from NodeProps type
• chore(nodes): remove computedPosition from NodeProps
• chore(types): add generic for custom events on node associated types
• feat(nodes,types): update node event types
• feat(nodes): add useNodeHooks composable
• feat(nodes): add contextual node events
• feat(edges): move connection lines to separate container
• chore: deprecate useZoomPanHelper
• fix(nodes): apply node extent
• chore: update vite-config.ts
• chore: use fetch-depth 0

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