Need help with vue-simple-flowchart?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

230 Stars 90 Forks MIT License 33 Commits 27 Opened issues


flowchart editor for Vue.js

Services available


Need anything else?

Contributors list

# 471,437
32 commits



a lightweight flowchart editor for Vue.js, code with vanillaJS,


This repository is not being actively maintained due to lack of time and interest.

My sincerest apologies to the open source community for allowing this project to stagnate. I hope it was useful for some of you as a jumping-off point.



  • drag to connent two node, click to delete link
  • support add, delete, save node
  • reactive flowchart data


install via npm/yarn

yarn add vue-simple-flowchart

import in script

import SimpleFlowchart from 'vue-simple-flowchart';
import 'vue-simple-flowchart/dist/vue-flowchart.css';

register the component, and add below to html:


then set data for flowchart component, for example:
data() {
    return {
        data: {
            centerX: 1024,
                centerY: 140,
                scale: 1,
                nodes: [
                        id: 2,
                        x: -700,
                        y: -69,
                        type: 'Action',
                        label: 'test1',
                        id: 4,
                        x: -357,
                        y: 80,
                        type: 'Script',
                        label: 'test2',
                        id: 6,
                        x: -557,
                        y: 80,
                        type: 'Rule',
                        label: 'test3',
                    links: [
                        id: 3,
                        from: 2, // node id the link start
                        to: 4,  // node id the link end



  • height, type: Number, default: 400


  • nodeClick, emit when node click, event = nodeID
  • nodeDelete: emit when node deleted, event = nodeID
  • linkBreak: emit when the selected link deleted, event = {id, from, to} (deleted link Object)
  • linkAdded: emit when new link added, event = {id, from, to} (new link Object)
  • canvasClick: emit when canvas click, event = { (Event Object) }

Project setup

yarn install

Compiles and hot-reloads for development

yarn run serve

Compiles and minifies for production

yarn run build

Lints and fixes files

yarn run lint


  • Add horizontal mode
  • Optimizition for large node array
  • Theme color configurable
  • Remove Console.log in build mode

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.