@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.4.0-0] - 2021-12-20

4663bb2...082bc51

Bug Fixes

• Edges not properly calculating position (2350d83)
• Correct usage of store in testing (44f8eb1)
• Connection line not showing up when no edges are defined (9abd768)
• Move replace & copy plugin (9dea4bc)
• Marker types & flowstate id removed from state (0eb162f)
• Duplicate prop binding (db726d1)
• Correct tests (d2961de)
• Improper style encapsulation (6dcf5d8)
• Correct test for testing custom node/edge types (97f4c0e)
• Replace useStore with useVueFlow (f6007d0)
• Add props to smoothstep edge explicitly (ca33de0)
• Replace store id with flow id (600e386)
• Import path of initial state helper (304e8f5)
• Re-set elements if elements are empty and modelValue contains els (535f7e6)
• Check if state initialized (bb91ab7)
• Properly set store (63bf3b3)
• Shims overwriting component internal instance type (25b64fe)
• Selection changes overwriting itself (425fc50)
• Handles emitting connect and update simulteanously (983c86c)
• Correctly calculate xyzpos from parent (0e82420)
• Watch parent nodes deeply to trigger xyz-pos calculation (fbe62b9)

Features

• Add store id as class to handles (9c1f044)
• Export getNodesInside utility (106342c)
• Extend Element generics to DataNode and DataEdge (368b0de)
• Add grouping example (ecd38b2)
• Nested boundaries (3f0b0db)
• Flatten child map of nodes (0450ba2)
• Add addSelectedNodes, addSelectedEdges, updateNodePosition actions (2d611b8)
• Add transformation pane (2210c59)
• Group edges by z-index level (3dae06c)
• Calculate xyz pos if nested (eead00a)
• Add new zoom pan helper functions + transition for all helpers (7cb6192)
• Remove node/edge-types prop (774cb2e)
• Add handlebounds type (46a76b7)
• Add event listener to vueflow object (d875cfe)
• Add apply changes handlers (81c8145)
• Add useNode/useEdge-state helpers (c80ab8f)
• Add setNodes and OnNodesChange / setEdges OnEdgesChange utils to useNode/Edge-state (65b2e0d)
• Add utilities to useState functions (518d12d)
• Use vModel for elements, nodes and edges (be725c6)
• Add store as refs to useVueFlow (91009e1)
• Add source-target-pos to graph-edge (1b206c9)
• Export applychanges utilities separately (994dd99)
• Add option to disable default change handlers globally (e2e094b)
• Add selectable option to edges (e91188d)
• Add state as refs, getters and actions to vueFlow object for easier access (7736915)
• Narrow options type for useNodesState/useEdgesState/useElementsState (a9e7eb3)

Miscellaneous Tasks

• Update draggable to ^0.4.1 (fe3f6e6)
• Remove unused imports (3e42948)
• Update vite-plugin-vue-type-imports to ^0.1.3 (cc7cedf)
• Remove unused imports (b9a417a)

Refactor

• Remove get and invoke imports (c522806)
• Use vite-plugin-import-types (74c3037)
• Change xPos yPos props to position (4ef58e9)
• Remove Node/TranslateExtent (da54bc3)
• Change node and edge types to extend element (fe0eeae)
• Remove ElementId type (f00f34d)
• Remove internal __vf field (f28e10b)
• Remove elements and replace with nodes and edges (b803414)
• Use plugin to import prop interface (5359e3a)
• Remove draggable options, boolean only (419b123)
• Use plugin to import prop interface (076ff4c)
• Remove index from keys (76ae73c)
• Use stored node data when re-parsing elements (6bdea72)
• Properly nest components (c96f62f)
• Set stored elements from nodes and edges (4353104)
• Move store utils to state (6903dcb)
• Remove arrowhead and replace with markertype (056bcd5)
• Use selection change hook (d367f3a)
• Replace selectedElements with selectedNodes and selectedEdges (14fc678)
• Remove renderer and move logic to zoom pane (943479e)
• Move user selection rect drawing into component (7a8aed4)
• Use markerEnd and markerStart (a7bacb7)
• Use computedPosition when checking inner bounds (b365e94)
• Add selectednodesbbox back to state (4065354)
• Use watcher to calc xyzpos (60fcbc2)
• Remove useStore.ts and move logic to store.ts (a80d475)
• Add getters for selected nodes/edges (ca2eca4)
• When adding elements as selected disable emit (02911b4)
• Replace useStore with useVueFlow (a604dd8)
• Move hooks to store dir (c1da504)
• Replace store injection with VueFlow injection (17a1b08)
• Add slots to node/edge labels (d9e0675)
• Use plugin to import prop types (fe4798e)
• Apply default change handlers by default (9f95749)
• Rename isReady to paneReady (758f4f2)
• Use watcher to change every prop as a single item (f8a23c5)
• Export useNodesState and useEdgesState separately from useVueFlow (39501d0)
• Remove separate apply changes function and add them to useNodesState useEdgesState (423f6aa)
• Disable connecting handles inside the same node (8118325)
• Lowercase event names (OnPaneLoad -> onPaneLoad) (b12863f)
• Add options to useElementsState (4c7cf39)
• Remove setting elements without parsing in state (5457106)
• Watch models (ee6bf32)
• Make nodes/edges for useStates helpers optional (35165c3)
• Replace getMarkerEnd utility with getMarkerId (8fbfca1)
• Make opts for useElementsState optional (c283769)
• Set elements when initializing store (2910731)
• Remove defaults for props (dcbe986)

Update

• Use MouseTouchEvent type for drag events (8cf2279)
• Add getElements helper (c82ca4e)
• Add source/target nodes on edge parsing (e2d60be)
• Remove omit elements from flowoptions type (9e06d6e)
• Add new stylings for container and transformation pane (232fd30)
• Filter edges by visibility (1060370)
• Add utils to state (63301cc)
• Remove slots (c8d701d)
• Remove transform from NodeRenderer (503264a)
• Implement new marker props (2b34b12)
• Clean up edgewrapper props (c9ff178)
• Add container class to background (d54c981)
• Adapt examples (d730869)
• Use node 14 (d1809a5)
• Add new zoom pan helper functions to instance (55b8434)
• Add slot for zoom-pane (cd41090)
• Defer update pos to nexttick (97c0254)
• Remove LoadingIndicator.vue (aaf216a)
• Use computedPosition in GroupNode.vue (a983858)
• Correct examples (5139b07)
• Fix examples (69dc45c)
• Add draggable,selectable and connectable as props to nodes (947baef)
• Use node/edge component type to define defaults (212c911)
• Watch source/target pos to update position so edges get properly re-rendered (8f6ce13)
• Remove computed properties in nodes selection (a62a891)
• Rename FlowActions/FlowGetters etc. to Actions, Getters (e64f6b7)
• Add key to NodesSelection.vue (f0f68ff)
• Use draggablecore for nodes selection (a76e2ca)
• Correct examples (445718d)
• V-if on node/edgerenderer (7367345)
• Correctly overwrite nodes on re-parsing (d2ac41e)
• Remove v-if on edge-renderer (df17da7)
• Use computed getters to group edges by z-level (f2fe93f)
• Correct examples (124338b)