画流程图、状态图、时序图、甘特图的JS库-mermaid-js
参考地址：https://github.com/mermaid-js/mermaid
原生使用方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./js/mermaid.min.js"></script>
<script>
mermaid.initialize({ startOnLoad: true });
</script>
</head>
<body>
Here is one mermaid diagram:
<div class="mermaid">
graph TD
A[Client] --> B[Load Balancer]
B --> C[Server1]
B --> D[Server2]
</div>
And here is another:
<div class="mermaid">
graph TD
A[Client] -->|tcp_123| B
B(Load Balancer)
B -->|tcp_456| C[Server1]
B -->|tcp_456| D[Server2]
</div>
</body>
</html>
效果图：
vue简单使用方式：
index.html静态模板引入mermaid.js:
<script type="text/javascript" src="./static/mermaid.min.js"></script>
在static下放一个模拟后端返回的mock数据，这儿让后端返回html格式的如result.html：
graph TD
A[Client] --> B[Load Balancer]
B --> C[Server1]
B --> D[Server2]
style A fill:#0f0,stroke-width:5px,stroke:#0f0,opacity:0.5
style B fill:#0f0,stroke-width:5px,stroke:#0f0,opacity:0.5
在vue页面使用如下：
<template>
<div class="mermaid" v-html="html"></div>
</template>
<script>
import axios from 'axios';
export default {
data () {
return {
html: ''
}
},
created() {
axios({
method: 'get',
url: '/static/result.html',
responseType: 'html'
}).then((res) => {
this.html = res.data;
})
},
mounted() {
mermaid.initialize({ startOnLoad: true });
}
}
</script>
