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