画流程图、状态图、时序图、甘特图的JS库-mermaid-js

参考地址：https://github.com/mermaid-js/mermaid
原生使用方式：

	
	
	
	


	Here is one mermaid diagram:
	        

	            graph TD 
	            A[Client] --> B[Load Balancer] 
	            B --> C[Server1] 
	            B --> D[Server2]
	        
	
	        And here is another:
	        

	            graph TD 
	            A[Client] -->|tcp_123| B
	            B(Load Balancer) 
	            B -->|tcp_456| C[Server1] 
	            B -->|tcp_456| D[Server2]
	        

效果图：

vue简单使用方式：

index.html静态模板引入mermaid.js:

在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页面使用如下：