Home
Chart & Graph
Customizable Flowchart Component For Vue 3

Customizable Flowchart Component For Vue 3

bcakmakoglu Last Updated: 2 weeks ago

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:

Customizable Flowchart Component For Vue 3

Changelog:

v0.4.40 (09/14/2022)

  • fix(nodes): align snap grid to 0,0
  • fix: use elementFromPoint

v0.4.39 (09/12/2022)

  • feat(edges): updated smoothstep edge routing
  • fix(nodes): skip applying node extent on mount
  • chore(resize-rotate): update demo
  • feat(resize-rotate): save frame data of node
  • chore(resize-rotate): bump version

v0.4.38 (08/30/2022)

  • chore(store): pass vueflow id to scope on each call
  • feat(edges): hide edge while updating
  • fix(nodes): apply initial node extent
  • chore: re-apply node extent only if flow is ready
  • refactor: allow ref to be passed to useKeyPress
  • chore: cleanup unused vars and remove setState usage
  • fix(nodes): add missing updateNodeInternals event
  • fix(nodes): apply global node extent when changed
  • Updated UpdatableEdgeExample to still have a label on the updatable edge
  • Changed updatable prop from boolean to type Updatable
  • refactor(resize-rotate): set fixed styles on resize rotate node
  • feat(resize-rotate): add snappable
  • fix: cast watchable props to ref
  • fix: watch translate extent separately

v0.4.37 (08/09/2022)

  • fix(nodes): pass node as prop to wrapper

v0.4.36 (08/08/2022)

  • fix(nodes): use flush timing post in NodeWrapper.vue

v0.4.35 (08/03/2022)

  • refactor: move watch flush timing to pre
  • feat(viewpane): block keypress on inputs and .nokey elements

v0.4.34 (08/01/2022)

  • fix(store): cleanup default change handlers on watch scope dispose
  • chore: remove unused code
  • chore: update pnpm-lock.yaml
  • docs: update links and headlines
  • refactor(store): reset store on unmount and skip re-creating hooks on re-mount
  • fix(nodes): force update clause in updateDimensions
  • refactor(store): re-bind hooks on mount and use hooks ref
  • refactor(nodes): recreate scope on mount
  • refactor(viewpane): accept KeyFilter instead of KeyCode

v0.4.33 (07/30/2022)

  • Bugfixes

v0.4.32 (07/28/2022)

  • fix(nodes): prevent initial dimensions being emitted twice

v0.4.31 (07/27/2022)

  • chore(store): initial $destroy fn
  • fix(edges): create new effect scope when pane ready is called
  • fix(store): only run scope dispose on parent caller
  • feat(store): add $destroy action
  • revert(types): use state viewport zoom to calculate handlebounds
  • revert(types): explicitly bind emits
  • feat: bind pane mouse events
  • feat(viewpane): add viewpane mouseevents
  • feat(store): add findNode & findEdge actions
  • refactor: import Emits type
  • chore: update vueuse
  • chore(store): remove unused prop in store
  • chore: update auto-imports.d.ts
  • fix(store): remove generic from node getter
  • feat: set vueflow & viewport elements in store
  • chore(gh): unfreeze lockfile
  • fix: prevent falsy values from stopping prop watcher
  • feat: expose flow store and element ref

v0.4.30 (07/23/2022)

  • update

v0.4.29 (07/18/2022)

  • fix(nodes): remove child nodes when parent gets removed
  • fix(nodes): check parent dimensions before extending

v0.4.28 (07/17/2022)

  • fix(edges): pass auto-connector result as new edge params
  • fix(handles): correctly calculate handle pos by using viewport zoom
  • chore(zoom): fix typing
  • refactor(zoom): don’t interrupt while zoom/pan is active
  • fix(edges): auto-connector always triggered even when not set
  • fix(graph): getIncomers always returning itself

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

Related Posts

Tags:

Add Comment