其他分享
首页 > 其他分享> > 画流程图、状态图、时序图、甘特图的JS库-mermaid-js

画流程图、状态图、时序图、甘特图的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>

效果图：
image

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>

标签：--,甘特图,JS,0f0,stroke,html,状态图,tcp,mermaid
来源： https://www.cnblogs.com/moqiutao/p/16260972.html