vue2-flow

Vue2 Flow

simple and customizable vue 2 flow chart component.

About The Project

You can build flow diagrams or develop editors to make users able to build ones with vue2 flow. The rest is your imagination.

Demo project: https://codesandbox.io/s/vue2-flow-demo-mjdogn

Features

• Simple Use: Designed for the dummiest user
• Easy Setup: Charts can be created with few lines of code
• Utils: Built-in zooming and panning, dragging and resizing
• Extensible: Lots of exposed slots, events and properties

Getting Started

To install vue2 flow, use npm i vue2-flow or yarn add vue2-flow for yarn.

Basics

Flow renders nodes and connections separately. Therefore, it expects array of nodes and connections.

The only constraint for them is that both require unique id. Even addNode method handles it, you can also use generateId method to have one.

A simple example is as follows.

<script setup>
import VFlow from "vue2-flow";

export default {
  data() {
    return {
      nodes: [
        {
          id: 1,
          x: 84,
          y: 189,
          width: 120,
          height: 50,
          name: "Start",
          type: "input",
        },
        {
          id: 2,
          x: 782,
          y: 188,
          width: 120,
          height: 50,
          name: "End",
          type: "output",
        },
      ],
      conns: [],
    };
  },
};
</script>

<template>
  <v-flow :nodes="nodes" :conns="conns" />
</template>

Definitely check documentation folder for the api and practicises.

Development

Run npm run serve command to start dev application located at dev/serve.vue. However, it requires Vue CLI to be installed.

It mounts editor example located at examples. You can change it to whichever you want and play with them or directly import vue2 flow and start fresh one.

Contribution

All contributions are welcome, there are lots of thing to do :)

Do not hesitate to create issues about bugs and ideas.

To Do

• Tests***
• Readonly mode
• Connection texts
• Shapes
• Component based nodes
• Improve connection paths
• More examples

License

Distributed under the MIT License. See LICENSE.txt for more information.