Mermaid画图教程

Mermaid是一种简单的类似 Markdown 的脚本语言，通过 JavaScript 编程语言，将文本转换为图片。

Mermaid 支持绘制非常多种类的图，常见的有时序图、流程图、类图、甘特图等等。

Mermaid在线使用地址：

1、https://codepen.io/tdkn/pen/vZxQzd

2、https://mermaidjs.github.io/mermaid-live-editor/

一、时序图

样式时序图

基本语法同标准时序图，不同的是

• 需要使用 mermaid 解析，并在开头使用关键字 sequenceDiagram 指明
• 绘制A与B之间的对话
  • -> 表示实线（无箭头）
  • --> 表示实心箭头
  • ->> 表示虚线（无箭头）
  • -->> 表示虚线箭头

示例：

```mermaid
sequenceDiagram
​ title: ABC
​ A ->> B: hello
​ B -> C:world
​ C -->> B:fine

```

标准时序图

基本语法：

• 使用 sequence 解析

• Title:标题 ：指定时序图的标题

• Note direction of 对象:描述 ： 在对象的某一侧添加描述，direction 可以为 right/left/over ， 对象 可以是多个对象，以 , 作为分隔符

• participant 对象 ：创建一个对象

• loop...end ：创建一个循环体

• 对象A->对象B:描述
  

• 绘制A与B之间的对话，以实线连接

  • -> 表示实心箭头
  • ->>表示空心箭头
  • --> 表示虚线箭头
  • -->>表示空心箭头

与mermaid相比，sequence可以创建没有连接的对象，箭头可以为实心也可以为空心，但不箭头不能缺失。

示例：

```mermaid
sequenceDiagram

participant A
participant B
participant C
participant D

A->B: hello
B->>C:world
C–>>B:fine

```

二、流程图

样式流程图

基本语法：

• graph 指定流程图方向：graph LR 横向，graph TD 纵向
• 元素的形状定义：
  • id[描述] 以直角矩形绘制
  • id(描述) 以圆角矩形绘制
  • id{描述} 以菱形绘制
  • id>描述] 以不对称矩形绘制
  • id((描述)) 以圆形绘制
• 线条定义：
  • A-->B 带箭头指向
  • A---B 不带箭头连接
  • A-.-B 虚线连接
  • A-.->B 虚线指向
  • A==>B 加粗箭头指向
  • A--描述---B 不带箭头指向并在线段中间添加描述
  • A--描述-->B 带描述的箭头指向
  • A-.描述.->B 带描述的虚线连指向
  • A==描述==>B 带描述的加粗箭头指向

示例：

```mermaid
graph TD
A(open)–>B[User Input]
A(open)–>|no|F{GoSignUp, Yes or No?}
B[User Input]–>C[Process]
C[Process]–>D{Yes or No?}
D{Yes or No?}-.yes.-> E(end)
D{Yes or No?}-.no.->F{GoSignUp, Yes or No?}
F{GoSignUp, Yes or No?}–>G(SignUp)

```

标准流程图

tag=type: content:>url

• tag 节点名称

• type 节点类型

  • start 开始节点
  • end 结束节点
  • operation 操作节点
  • subroutine 子程序节点
  • condition 条件节点
  • inputoutput 输入或产出节点

• content 节点描述

• url 超连接，与文本绑定

• 用 -> 来关两个节点，如果是 condition 节点将会有 yes 和 no 两个分支。

示例：

```mermaid
sequenceDiagram
open=>start: Open:>https://github.com/knsv/mermaid
userInput=>inputoutput: User Input
processes=>operation: Processes
results=>condition: Yes or No?
regis=>condition: GoSignUp,Yes or No?
userr=>operation: SignUp
end=>end: End
open->userInput->processes->results
results(yes)->end
results(no)->regis
regis(yes)->userr
regis(no)->userInput

```

三、状态图

在开头使用关键字 stateDiagram 指明，[*] 表示开始或者结束，如果在箭头右边则表示结束。

示例：

```mermaid

stateDiagram
[*] --> s1
s1 --> s2: 01
s2 --> s1: 11
s2 --> s2: 00
s2 --> s3: 10
s3 --> [*]

```

四、类图

在开头使用关键字 classDiagram 指明，<|-- 表示继承，+ 表示 public，- 表示 private

示例：

```mermaid

classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}

```

五、甘特图

• 在开头使用关键字 gantt 指明

• deteFormat 格式 指明日期的显示格式

• title 标题 设置图标的标题

• section 描述 定义纵向上的一个环节

• 定义步骤：每个步骤有两种状态done （已完成）/ active（执行中）

  • 描述: 状态,id,开始日期,结束日期/持续时间
  • 描述: 状态,id,after id2,持续时间
  • crit ：可用于标记该步骤需要被修正，将高亮显示
  • 如果不指定具体的开始时间或在某个步骤之后，将默认依次顺序排列

示例：

```mermaid
gantt
dateFormat YYYY-MM-DD

title 软件开发甘特图

section 设计
需求:done,des1, 2019-01-06,2019-01-08
原型:active,des2, 2019-01-09, 3d
UI设计:des3, after des2, 5d
未来任务:des4, after des3, 5d

section 开发
理解需求:crit, done, 2019-01-06,24h
设计框架:crit, done, after des2, 2d
开发:crit, active, 3d
未来任务:crit, 5d
休息时间:2d

section 测试
功能测试:active, a1, after des3, 3d
压力测试:after a1, 20h
测试报告: 48h
```

六、饼图

在开头使用关键字 pie 指明，标题下面分别是区域名称及其百分比。

示例：

```mermaid

​ pie
​ title 数学成绩饼图
​ “90分以上” : 15
​ “80-90分” : 21
​ “70-80分” : 12
​ “60-70分” : 8
​ “60分以下” : 3

```