前言
写作时难免会有图表绘制需求 比如下面几种
示例
第一种样式时序图
1 |
|
第二种样式时序图
sequenceDiagram
participant Alice
participant Bob
Alice->John: Hello John, how are you?
loop Healthcheck
John->John: Fight against hypochondria
end
Note right of John: Rational thoughts
prevail...
John-->Alice: Great!
John->Bob: How about you?
Bob-->John: Jolly good!
甘特图
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3,6d
上下流程图
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
左右流程图
graph LR; 律动乐器-->律动+氛围乐器-->律动+鼓组贝斯-->律动+鼓组贝斯+氛围乐器; 铺底+氛围-->铺底+氛围+律动-->铺底+氛围+律动+鼓组贝斯-->追加间奏乐器;
自定义style的流程图
graph LR;
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
各种形状的流程图
graph TD;
A[/Christmas\]--> B[\This is the text in the box\]-->
C[\Go shopping/]-->D[/This is the text in the box/]-->E{{This is the text in the box}}-->F{This is the text in the box}-->G>This is the text in the box]-->H((This is the text in the circle))-->J(This is the text in the box)
语法实现
时序图demo代码：
1 | <pre class="mermaid"> sequenceDiagram |
<pre class="mermaid"> gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d</pre>流程图demo代码：
<pre class="mermaid"> graph TD;
A-->B;
A-->C;
B-->D;
C-->D;</pre>
### 总结
以上只是列举其中几种 , 除此之外还可以绘制饼状图 状态图 类图 需求图等等
更多技巧可以参考`mermaid`文档: 《[mermaid官方文档](https://mermaid-js.github.io/mermaid/#/flowchart)》
**本文为作者原创转载时请注明出处 谢谢**
*[乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站](https://code.newban.cn/)*
