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:

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: