vm

@carpathian-ninjas/vue-mermaid

flowchart of mermaid with vue component

Showing:

Popularity

Downloads/wk

3

GitHub Stars

96

Maintenance

Last Commit

5mos ago

Contributors

9

Package

Dependencies

1

Size (min+gzip)

254.2KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

vue-mermaid

flowchart of mermaid with vue componet

Requirements

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"],
          editable: true,
          style: "fill:#f9f,stroke:#333,stroke-width:4px",
        },
        { 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" }
      ]
    };
  },
  methods: {
    editNode(nodeId) {
      alert(nodeId);
    }
  }
};
nodes: [
        {
          id: "1",
          text: "A",
          link: ["-- yes -->", "-- no -->"],
          linkNumber: 1,
          linkStyle: "fill:none,stroke:red,stroke-width:1px;",
          next: ["2", "3"],
          editable: true
        },
        { id: "2", text: "B" },
        { id: "3", text: "C"}
      ],

links

Possible edgeType values:

edge.default

Template

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

Result

Flowchart

Group Type

export default {
  data: function() {
    return {
      data: [
        {
          id: "1",
          text: "A",
          link: "---",
          next: ["2"],
          group: "one"
        },
        { id: "2", text: "B", edgeType: "circle", next: ["3"], group: "one" },
        { id: "3", text: "C", next: ["4", "6"], group: "two" },
        {
          id: "4",
          text: "D",
          link: "-- This is the text ---",
          next: ["5"],
          group: "two"
        },
        { id: "5", text: "E", group: "three" },
        { id: "6", text: "F", group: "three", , url: "http://www.github.com" }
      ]
    };
  }
};

Group

Theme

  • To change theme, you can pass in a config object, for available themes, you can refer to mermaidjs themes
<template>
  <vue-mermaid
    type="graph LR"
    :config="config"
  ></vue-mermaid>
</template>
export default {
  data: function() {
    return {
      config: {
        theme: 'neutral'
      }
    };
  }
};

Build Setup

# install dependencies
npm install

# build for production with minification
npm run build

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100