Mermaid画流程图、序列图、饼图、甘特图(实例讲解)

https://www.iodraw.com/codechart

语法参见官 ：

https://www.iodraw.com/codechart/tutorial/zh/flowchart.html

下面使用实例展示一下流程图、序列图、饼图、甘特图的绘图过程

流程图

代码如下：

graph TB;subgraph 分情况A(开始)-->B{判断}endB--第一种情况-->C[第一种方案]B--第二种情况-->D[第二种方案]B--第三种情况-->F{第三种方案}subgraph 分种类F-.第1个.->J((测试圆形))F-.第2个.->H>右向旗帜形]endH---I(测试完毕)C--票数100---I(测试完毕)D---I(测试完毕)J---I(测试完毕)

代码说明：

T、B、L、T分别是Top/Bottom/Left/Right的缩写 id为节点的唯一标识，类似于变量。括 内为节点要显示的文字 单向箭头为流程进行方向。支持虚线与实线，有箭头与无箭头、有文字与无文字。分别是—、-.-、 –>、-.->、–文字–>、-.文字.->、–文字—、-.文字.- 支持子图。如代码、效果图所示。

Mermaid效果图如下：

流程图.png

序列图

序列图共有5个部分，分别是：参与者、消息线、循环、选择、可选、并行、注解。我们来模拟一个综合场景，如下图所示:

序列图.jpg

代码如下：

sequenceDiagramTitle: 小明买书participant consumer as 小明participant store as 书店participant publisher as 出版 consumer ->> store: 想买一本限量版书籍store -->> consumer: 缺货consumer ->> store: 隔一个月再次询问store -->> consumer: 抢完了loop 一个星期一次consumer -x +store: 有货了吗store --x -consumer: 正在订,有货马上通知你endstore ->> publisher: 我要订购一批货publisher --x store: 返回所有书籍的类别信息alt 书籍类别符合要求store ->> publisher: 请求书单信息publisher --x store: 返回该类别书单信息else 书单里的书有市场需求store ->> publisher: 购买指定数据publisher --x store: 确认订单else 书籍不符合要求store -->> publisher: 暂时不购买endpar 并行执行publisher ->> publisher : 生产publisher ->> publisher : 销售endopt 书籍购买量>=500 && 库存>=50publisher ->> store : 出货store --x publisher : 确认收货endNote left of consumer : 图书收藏家Note over consumer,store : 去书店购买书籍Note left of store : 全国知名书店Note over store,publisher : 去出版 进货Note left of publisher : 持有版权的出版 

代码说明:

1. 消息线

alt 可以理解为可替代的方案，可能的情况

opt可以理解为一个if语句，满足条件下执行的操作

Mermaid效果图如下：

序列图.png

饼图

代码如下：

pie title Pie Chart "Dogs" : 386 "cats" : 567 "rabbit" : 700 "pig":365 "tiger" : 15

Mermaid效果图如下：

饼图.png

甘特图

代码说明：

从官 上看一下语法，如下所示:

gantt dateFormat  YYYY-MM-DD    //底部的时间格式 title     Adding GANTT diagram functionality to mermaid   //甘特图名称 excludes   weekends               //周末有休息 section A         //可以理解为一个功能模块 task1        :done,des1, 2014-01-06,2014-01-08   //可以理解为这个功能模块的各项进度安排 task2        :active,des2, 2014-01-09, 3d      //以下参数都是合法的 task3        :des3, after des2, 5d          //我们等一下每个都试一下 task4        :crit, done, 2014-01-06,24h task5        :crit, done, after des1, 2d task6        :crit, active, 3d task7        :crit, 5d task8        :2d task9        :1d

这里要注意的是，时间的表示有多种，如上，

可以是

代码如下：

Mermaid展示效果如下：