在博客文章中使用mermaid 定义流程图，序列图，甘特图

概述

Mermaid（美人鱼）是一套markdown语法规范，用来在markdown文档中定义图形，包括流程图、序列图、甘特图等等。

它的官方网站是 https://mermaid-js.github.io/mermaid/#/

另外有一个在线的测试网站 https://mermaid.live

强烈建议用这个来编写，因为有语法智能提示，还能实时看到效果。写好后，再复制到你的文档里面来，mermaid 还提供了可以将图形文本生成网页地址，或者图形链接的功能，可以很方便地进行分享

如何使用

博客园默认就支持mermaid，它的语法很简单，下面是一个简单的例子

```mermaid
 graph LR;
 A[博客园支持 Mermaid] --> B[访问 https://mermaidjs.github.io/ 了解更多];
```

在文章中呈现的样子如下

graph LR; A[博客园支持 Mermaid] --> B[访问 https://mermaidjs.github.io/ 了解更多];

流程图（Flowchart）

用来描述一个系统流程，通常在需求分析阶段很有用

基本用法

graph LR
    A(员工发起审批)--> B{经理是否审批}
    B --> |同意| C[财务报销]
    B --> |拒绝| A
    C --> E(结束)

graph LR A(员工发起审批)--> B{经理是否审批} B --> |同意| C[财务报销] B --> |拒绝| A C --> E(结束)

语法解释

详情参考 https://mermaid-js.github.io/mermaid/#/flowchart

1. graph 定义了一个流程图
2. LR 表示从左（LEFT)至右(RIGHT)，水平流程图。如果不写，则是从上至下（TD:TOP DOWN， 或TB:TOP BUTTOM）
3. A,B,C,D,E 这些都是节点的代号，可以用任意字符，通常用简单的英文字母即可。mermaid内部会记录和复用这些节点代号，类似于变量的机制
4. --> 表示连接线，包括方向。在箭头后面跟着的 |文字| 是定义要显示在连接线上的文字

   还支持 --- , -- 文字 --> 等组合用法

5. 代号后面的文本，用来作为节点的显示文本（如果提供了的话）。
6. () 表示一个带有圆角的矩形，{}表示一个判断条件，[] 表示一个没有圆角的矩形

   还支持([]), [[]],(()),[()],{{}},{//},{\},((())) 等多种组合用法

序列图（Sequence)

序列图是一种交互图，它显示了进程如何相互作用以及以何种顺序运行。

基本用法

sequenceDiagram
    actor user as 小明
    participant client as Outlook 客户端
    participant website as Azure Blob storage
    participant aad as Azure Active Directory
    participant sbux as Starbucks backend service

    user ->> client : 打开星巴克插件
    client->>+ website : 访问网页
    website-->>- user : 要求登录
    user->>+ aad : 身份验证
    aad-->>- website : 授权成功
    user->>+ website : 门店查询
    website-->> sbux : 接口调用
    sbux -->> website : 返回门店列表
    website -->> user : 返回

sequenceDiagram actor user as 小明 participant client as Outlook 客户端 participant website as Azure Blob storage participant aad as Azure Active Directory participant sbux as Starbucks backend service user ->> client : 打开星巴克插件 client->>+ website : 访问网页 website-->>- user : 要求登录 user->>+ aad : 身份验证 aad-->>- website : 授权成功 user->>+ website : 门店查询 website-->> sbux : 接口调用 sbux -->> website : 返回门店列表 website -->> user : 返回

语法解释

详情参考 https://mermaid-js.github.io/mermaid/#/sequenceDiagram

1. sequenceDiagram 定义这是一个序列图
2. 顶部的参与者定义，并不是必须的，但用这种语法定义更加清晰 actor是指人，participant一般是指系统， 用 as 语法可以重命名
3. 参与者之间连接符， 常见的有 ->,-->,->>,-->>,-x,--x,-),--)， 两个短线表示虚线，一个短线表示实线
4. 在箭头的右侧的 +,- 指的是UML中的 activate 的意思
5. 还支持并行 par语法，循环 loop 语法等，可以参考官方文档

甘特图（Gantt)

甘特图用来表示项目计划或进度

基本用法

gantt
    title 项目进度
    dateFormat  YYYY-MM-DD
    axisFormat  %m-%d
    excludes sunday,monday,tuesday,friday,2014-03-01
    section 第一阶段
    需求分析           :crit, a1, 2014-01-01, 30d
    设计评审           :after a1, 20d

    section 第二阶段
    第一批测试      :done, 2014-01-12  , 12d
    第二批测试      :24d
    客户验收        :milestone,2h

gantt title 项目进度 dateFormat YYYY-MM-DD axisFormat %m-%d excludes sunday,monday,tuesday,friday,2014-03-01 section 第一阶段 需求分析 :crit, a1, 2014-01-01, 30d 设计评审 :after a1, 20d section 第二阶段 第一批测试 :done, 2014-01-12 , 12d 第二批测试 :24d 客户验收 :milestone,2h

语法解释

详情参考 https://mermaid-js.github.io/mermaid/#/gantt

1. gantt 表示这是一个甘特图
2. title 定义甘特图的标题
3. dateFormat 定义甘特图中日期显示的格式，更多格式可以参考 https://mermaid-js.github.io/mermaid/#/gantt?id=input-date-format
4. section 定义一个一个的区域，可以包含一个或多个任务
5. 任务定义语法： 任务名称:别名,开始日期,天数
6. 状态的修饰语法 active（表示还没有完成，会显示为蓝色）, done(表示已完成, 会显示为灰色)，crit（表示关键任务，会显示为红色）
7. 任务时长：d（天）,w（周）,h(小时)，m（分钟）
8. 任务可以有一个别名，例如上面的 a1 ，然后在其他任务中可以引用依赖，例如 after a1
9. 如果某个任务没有写开始日期，默认就是在上一个任务之后
10. excludes 是指要排除哪些日期，可以写具体的日期，也可以写 weekends(周末)，或具体的工作日，如 sunday,monday 这样的语法，可以写多种的组合
11. milestone 表示里程碑