vue-mermaid

flowchart of mermaid with vue componet

Requirements

• Vue.js
• mermaid

Install Setup

# install dependencies
npm install --save vue-mermaid

Usage

Register component

import VueMermaid from 'vue-mermaid'
Vue.use(VueMermaid)

Use component

export default {
  data:function(){
    return {
      data:[
        {id:'1',text:'A',link:'---',next:['2']},
        {id:'2',text:'B',edgeType:'circle',next:['3']},
        {id:'3',text:'C',next:['4','6']},
        {id:'4',text:'D',link:'-- This is the text ---',next:['5']},
        {id:'5',text:'E'},
        {id:'6',text:'F'}
      ]
    }
  }
}

Possible edgeType values:

Template

<template>
  <vue-mermaid :nodes="data" type="graph LR"></vue-mermaid>
</template>

Result

Build Setup

# install dependencies
npm install

# build for production with minification
npm run build