https://github.com/sango-tech/vue3-mermaid
https://github.com/sango-tech/vue3-mermaid
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/sango-tech/vue3-mermaid
- Owner: sango-tech
- License: mit
- Created: 2021-03-18T15:42:20.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2022-05-25T13:16:09.000Z (about 4 years ago)
- Last Synced: 2025-03-29T22:51:13.225Z (about 1 year ago)
- Language: JavaScript
- Size: 15.1 MB
- Stars: 1
- Watchers: 3
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vue3-mermaid
> flowchart of mermaid with vue componet
## Requirements
- [Vue.js](https://github.com/vuejs/vue)
- [mermaid](https://github.com/knsv/mermaid)
## Install Setup
```bash
# install dependencies
npm install --save vue3-mermaid
```
## Usage
### Register component
```js
import Vue3Mermaid from "vue3-mermaid";
Vue.use(Vue3Mermaid);
```
### Use component
```js
export default {
data: function() {
return {
data: [
{
id: "11",
text: "A",
link: "---",
next: ["2"],
editable: true,
style: "fill:#f9f,stroke:#333,stroke-width:4px",
},
{ id: "22", text: "B", edgeType: "circle", next: ["3"] },
{ id: "33", text: "C", next: ["4", "6"] },
{ id: "44", text: "D", link: "-- This is the text ---", next: ["5"] },
{ id: "55", text: "E" },
{ id: "66", 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"}
],
```
### Template
```vue
```
### Group Type
```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" }
]
};
}
};
```
### Theme
- To change theme, you can pass in a config object, for available themes, you can refer to [mermaidjs themes](https://github.com/mermaid-js/mermaid/tree/master/src/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
```