Customizable Flowchart Component For Vue 3

Description:

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.2.2 (11/27/2021)

  • update(store): use setElements for addElements with force set false
  • refactor(edges): Make edge updating optional
  • update: watch node height too for updating dimensions

v0.2.1 (11/25/2021)

  • fix: setState syntax error
  • update: zoom-pane style
  • fix: import paths in components
  • update(nodes): watch nodes width for dimension update
  • refactor(flow): deferr initial loading to Renderer.vue component
  • refactor(graph): async process elements

v0.2.0 (11/25/2021)

  • update(graph): mutate elements arr on updateEdge
  • update(flow): remove store, worker props
  • update(nodes): add __vf to node props
  • update(flow): remove worker prop
  • fix(flow): props not being watched on time
  • update(store): remove promise from setState 233e915
    fix(store): parsing overwriting __vf fields or not writing them at all
  • fix(store): check if state option is typeof undefined before setting (not just false-ish)
  • feat(nodes): add option to pass a valid target pos / valid source pos func to nodes
  • update(flow): set modelValue after initialization of elements
  • update(store): typing of edges
  • update(types): remove promise from addelements
  • update(edges): Add edge as param to edgeupdateend event
  • fix(types): edge-text typing
  • refactor(store): check if state variables have to be re-set
  • feat(utils): make addEdge and removeElement mutate the array passed in
  • refactor: move init function to store as setState
  • refactor: move parseElements to graph utils
  • update: types in SelectionPane.vue
  • refactor(types): Remove SourceTargetNode-type
  • update(examples): remove watchEffect from UpdateNodeExample.vue
  • refactor(options)!: remove worker and store option
  • refactor(store): remove nodes/edges field
  • update: use getNodes in zoom pan helper
  • update: import path in node wrapper
  • refactor: remove node-pos actions
  • refactor: remove updateNodePosDiff from node selection
  • refactor: remove vf prop
  • refactor(nodes): use v-model to reactively change node props
  • refactor(nodes): remove __vf.position
  • update(connection): pass source node to ConnectionLine as prop
  • update: use getNodes in minimap instead of directly accessing nodes state val
  • fix(examples): wrong type added to button-edge
  • fix(flow): check diff before re-parsing elements
  • fix(flow): Add watcher that observes elements length for re-parsing
  • fix(examples): interaction example firing events wrong
  • fix(nodes): pass correct store values to node wrapper
  • fix(nodes): missing element click event
  • feat(nodes): Allow nodes to pass all draggable options
  • feat(nodes): Allow nodes to have their own snapGrid option
  • feat(types): add DefaultEdgeTypes-type
  • feat(zoom): Add offset to fitview-params
  • fix(types): hooks to return a graph-node type

v0.1.7 (11/23/2021)

  • fix(edges): edges not reacting to hidden nodes
  • feat(types): Add GraphEdge type
  • update(types): export flowprops and custom connection line props type
  • update(zoom): when zoom is deactivated we disbale scrolling

v0.1.6 (11/23/2021)

  • fix(flow): preventScrolling missing in props definition

v0.1.5 (11/23/2021)

  • chore(deps): update revue-draggable to 0.3.9
  • update: add scale prop to draggable
  • fix: node selection not working if selectable === undefined
  • update: remove fallback operator
  • fix: missing props on Draggable

v0.1.4 (11/23/2021)

  • feat(connection): Extend connection line props for more advanced usage

v0.1.3 (11/23/2021)

  • fix: connection line position incorrectly calculated

v0.1.2 (11/23/2021)

  • fix(edges): edges not reacting to hidden nodes
  • feat(types): Add GraphEdge type
  • update(types): export flowprops and custom connection line props type
  • update(zoom): when zoom is deactivated we disbale scrolling

v0.1.1 (11/22/2021)

  • fix(types): edge text type
  • refactor: remove node/edge-renderer slots
  • refactor: change prop types for NodeWrapper
  • refactor: change prop types for EdgeWrapper
  • update(types): remove null types and use undefined
  • fix!: prop typings
  • update: define emittable events for EdgeWrapper
  • update: pass selected elements as prop to nodesselection
  • update: remove useStore from handle
  • update: use controlledComputed for edges/nodes
  • update: pass store state as props to edge-renderer and edge
  • update!: Remove renderer exports
  • update: Pass down values as props instead of relying on store
  • refactor: pass props to edge/nodewrapper separately

v0.1.0 (11/22/2021)

  • feat: add draghandle prop to node
  • refactor(types)!: Change ConnectionLineComponentProps to ConnectionLineProps
  • fix: skip dimensions check when ssr
  • update: Add name to flow component
  • update: add hmr to statestore
  • fix: minimap prop type missing
  • fix: add missing click and doubleclick events to nodes/edges
  • update: Add names to components
  • update: move component related types to component-type file
  • update!: graphnode and node typing
  • update(edges): useAttrs on edges to use style
  • update(types): Correct __vf typing
  • refactor: rename internal data field to __vf
  • fix: zoom values being initialized before zoom is ready
  • feat(slots): Add node and edge renderer slots
  • refactor(types)!: Remove elements prop, change EdgeTypes/NodeTypes prop to string[]
  • update: some comments
  • feat: make worker optional
  • feat: Add dedicated default loading component
  • feat: Add loading indicator slot and prop
  • feat: offload parsing elements to worker

v0.0.34 (11/20/2021)

  • update: make types for nodes and edges a computed prop
  • update: dont render nodes, edges if dimensions dont return a truthy value
  • fix: load hook timing

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

You Might Be Interested In:

Add Comment