@braks/vue-flow

Vue Flow 🌊

Vue Flow: A highly customizable Vue3 Flowchart component.

With Vue Flow you can build your own, customized node-based applications like static diagrams or even more complex and interactive editors!

You can find a detailed explanation on how to get started in the documentation or check the examples.

If you want to see how it's used with Nuxt3, check out the docs repo!

⭐️ Features

• 👶 Easy to use: Seamless zooming & panning behaviour and single and multi-selections of elements

• 🎨 Customizable: Different and edge types and support for custom nodes with multiple handles and custom edges

• 🚀 Fast rendering: Only nodes that have changed are re-rendered and only those that are in the viewport are displayed (optionally)

• 🧲 Utils: Snap-to-grid and graph helper functions

• 📦 Additional Components:

  • 🖼 Background

  • 🧭 Minimap

  • 🕹 Controls

• 🦾 Fully written in TypeScript

🛠 Setup

$ npm i @braks/vue-flow
# or
$ yarn add @braks/vue-flow

🎮 Quickstart

A flow consists of nodes and edges (or just nodes). Together we call them elements. You can pass a set of elements as a prop to the Flow component. Each element needs a unique id. A node needs a position and a label and an edge needs a source (node id) and a target (node id). These are the most basic parameters for a flow. A simple setup could look like this:

<!-- Flowchart.vue -->
<template>
  <VueFlow :elements="elements"></VueFlow>
</template>
<script lang="ts" setup>
import { VueFlow, Elements, Position } from '@braks/vue-flow'

const elements = ref<Elements>([
  {
    id: '1',
    data: {
      label: 'node 1',
    },
    position: { x: 100, y: 100 },
    targetPosition: Position.Right
  },
  {
    id: '2',
    data: {
      label: 'node 2',
    },
    position: { x: 100, y: 200 },
    sourcePosition: Position.Left
  },
  {
    id: 'e1-2',
    label: 'default edge',
    target: '2',
    source: '1',
  },
])
</script>

Make sure to import the necessary styles:

/* main.css */

/* import the required styles */
@import "node_modules/@braks/vue-flow/dist/style.css";

/* import the default theme (optional) */
@import "node_modules/@braks/vue-flow/dist/theme-default.css";

▸ Vue 2

This library doesn't work with Vue2.

🧪 Development

# start (dev)
$ yarn dev

# build dist
$ yarn build

💝 Credit

Thanks to webkid for creating React Flow! Without their work this would've been impossible for me.

Changelog

[0.2.0] - 2021-11-25

7829b6a...50fc0f2

Bug Fixes

• Hooks to return a graph-node type (db70409)
• Missing element click event (5011bf0)
• Pass correct store values to node wrapper (f5dcd51)
• Interaction example firing events wrong (f455939)
• Add watcher that observes elements length for re-parsing (e065df5)
• Check diff before re-parsing elements (b140b84)
• Wrong type added to button-edge (409a268)
• Edge-text typing (7916b20)
• Check if state option is typeof undefined before setting (not just false-ish) (5ceee98)
• Parsing overwriting __vf fields or not writing them at all (fd83a6d)
• Props not being watched on time (bb0b904)

Features

• Add offset to fitview-params (073b25e)
• Add DefaultEdgeTypes-type (1eac951)
• Allow nodes to have their own snapGrid option (71a10b2)
• Allow nodes to pass all draggable options (da4fd4f)
• Make addEdge and removeElement mutate the array passed in (74cc61a)
• Add option to pass a valid target pos / valid source pos func to nodes (9e94196)

Refactor

• Remove __vf.position (84bad86)
• Use v-model to reactively change node props (8f65918)
• Remove vf prop (729ae4c)
• Remove updateNodePosDiff from node selection (ac2e2d5)
• Remove node-pos actions (fa63dee)
• Remove nodes/edges field (725dc8a)
• Remove worker and store option (708fa1f)
• Remove SourceTargetNode-type (8b0ddc9)
• Move parseElements to graph utils (5ffeb92)
• Move init function to store as setState (1ce41cc)
• Check if state variables have to be re-set (96d54c5)

Update

• Use getNodes in minimap instead of directly accessing nodes state val (04b64de)
• Pass source node to ConnectionLine as prop (89849f4)
• Import path in node wrapper (e6a54d4)
• Use getNodes in zoom pan helper (23bceea)
• Remove watchEffect from UpdateNodeExample.vue (729d3d5)
• Types in SelectionPane.vue (cf2ded4)
• Add edge as param to edgeupdateend event (929a6e6)
• Remove promise from addelements (9c7c236)
• Typing of edges (7b4dde4)
• Set modelValue after initialization of elements (95fc013)
• Remove promise from setState (233e915)
• Remove worker prop (3855e9f)
• Add __vf to node props (f2e38ca)
• Remove store, worker props (bd140f1)
• Mutate elements arr on updateEdge (6c3bce8)