vue-mermaid

> flowchart of mermaid with vue componet

Requirements

- Vue.js
- mermaid

Install Setup

``bash


install dependencies

npm install --save vue-mermaid

`

Usage

$3

`js
import VueMermaid from "vue-mermaid";
Vue.use(VueMermaid);
`

$3

`js
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);
}
}
};
`
#### Different link values of next:

`vue
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

$3

`vue

`

$3

!Flowchart

$3

`js
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

$3

- To change theme, you can pass in a config object, for available themes, you can refer to mermaidjs themes

`vue

`

`js
export default {
data: function() {
return {
config: {
theme: 'neutral'
}
};
}
};
`




Build Setup

`bash


install dependencies

npm install

build for production with minification

npm run build
``