Markdown Mermaid

目录

• 1. 饼状图
• 2. 流程图
• 3. 序列图
• 4. 类图
• 5. 甘特图
• 6. 状态图
• 7. 用户旅程图
• 8. 历史版本点线图
• 9. 实体关系图

---

1. 饼状图

pie关键字

```mermaid
pie
    title 为什么总是宅在家里？
    "喜欢宅" : 15
    "天气太热或太冷" : 20
    "穷" : 500
```

pie title 为什么总是宅在家里？ "喜欢宅" : 15 "天气太热或太冷" : 20 "穷" : 500

---

2. 流程图

graph关键字，直线
flowchart关键字，曲线

1. 方向

   • TB：自顶向下
   • BT：自底向上
   • RL：从右到左
   • LR：从左到右
   • TD：和TB一样

2. 节点

   • 定义矩形形状的节点：id[text]
   • 定义圆角矩形的节点：id(text)
   • 定义椭圆形的节点：id([text])
   • 定义圆柱形的节点：id[(text)]
   • 定义圆形的节点：id((text))
   • 定义非对称图形的节点：id>text]
   • 定义菱形的节点：id{text}
   • 定义六角形的节点：id{{text}}
   • 定义平行四边形的节点(两个方向)：id[/text/]或者[\text]
   • 定义梯形的节点(两个方向)：id[/text] 或者 di[\text/]

3. 箭头

   • 实线箭头：A–>B
   • 实线无箭头：A–B
   • 无箭头实线上带文本：A–text–B
   • 实线箭头带文本：A–>|text|B 或者 A–text–>B
   • 虚线箭头：A-.->B
   • 虚线箭头带文本：A-.text.->B
   • 粗线箭头：A==>B
   • 粗线箭头带箭头：A==text==>B

```mermaid
graph LR
	emperor((朱八八))-.子.->朱五四-.子.->朱四九-.子.->朱百六
	朱雄英--长子-->朱标--长子-->emperor
	emperor2((朱允炆))--次子-->朱标
	朱樉--次子-->emperor
	朱棡--三子-->emperor
	emperor3((朱棣))--四子-->emperor
	emperor4((朱高炽))--长子-->emperor3
```

graph LR emperor((朱八八))-.子.->朱五四-.子.->朱四九-.子.->朱百六 朱雄英--长子-->朱标--长子-->emperor emperor2((朱允炆))--次子-->朱标 朱樉--次子-->emperor 朱棡--三子-->emperor emperor3((朱棣))--四子-->emperor emperor4((朱高炽))--长子-->emperor3

4. 子图表

subgraph 子图表名称
子图表中的描述语句...
end

```mermaid
graph TB
    id1(圆角矩形)--普通线-->id2[矩形]
    subgraph 子图表
        id2==粗线==>id3{菱形}
        id3-.虚线.->id4>右向旗帜]
        id3--无箭头---id5((圆形))
    end
```

graph TB id1(圆角矩形)--普通线-->id2[矩形] subgraph 子图表 id2==粗线==>id3{菱形} id3-.虚线.->id4>右向旗帜] id3--无箭头---id5((圆形)) end

---

3. 序列图

sequenceDiagram关键字

1. 箭头和线段

   • 实线并且没有箭头：A->B:text
   • 虚线没有箭头：A–>B:text
   • 实线带箭头：A->>B:text
   • 虚线带箭头：A–>>B:text
   • 实线并且在终点带一个x：A-xB:text
   • 虚线并且在终点带一个x：A–xB:text

2. 循环

loop 循环的条件
循环体描述语句
end

3. 判断

alt 条件 1 描述
分支 1 描述语句
else 条件 2 描述 # else 分支可选
分支 2 描述语句
else ...
...
end

或

opt 条件描述
分支描述语句
end

```mermaid
sequenceDiagram
	A->>B:Qdown是啥？
	B-->>A:Qdown是全功能的下载软件！
	A->>B:哪里可以下载呀？
	B-->>A:http://lightzhan.xyz/index.php/qdown/
	loop 日复一日
    A->>B: 吃了吗您呐？
    B-->>A: 吃了，您呢？
	   activate A
		Note left of A: 想了一下
		alt 还没吃
			A-xB: 还没呢，正准备回去吃
		else 已经吃了
			A-xB: 我也吃过了，哈哈
		end
	end
```

sequenceDiagram participant A as 张三 participant B as 李四 A->>B:Qdown是啥？ B-->>A:Qdown是全功能的下载软件！ A->>B:哪里可以下载呀？ B-->>A:http://lightzhan.xyz/index.php/qdown/ loop 日复一日 A->>B: 吃了吗您呐？ B-->>A: 吃了，您呢？ activate A Note left of A: 想了一下 alt 还没吃 A-xB: 还没呢，正准备回去吃 else 已经吃了 A-xB: 我也吃过了，哈哈 end opt 大过年的 B-->A: 祝您新年好啊 end end

---

4. 类图

classDiagram关键字

1. 变量类型

   • + public
   • \– private
   • # protected
   • ~ Package/Internal

2. 抽象函数

括号的后面添加*

someAbstractMethod()*

```mermaid
classDiagram
	class BankAccount{
	  +String owner
	  +BigDecimal balance
	  +deposit(amount) bool
	  +withdrawl(amount)
	  -someAbstractMethod()*
	}
```

classDiagram class BankAccount{ +String owner +BigDecimal balance +deposit(amount) bool +withdrawl(amount) -someAbstractMethod()* }

---

5. 甘特图

gantt关键字

|标记 | 简介 | 例子|
| ------ | ------- |
|title| 标题| 标题|
|dateFormat| 日期格式| Mermaid甘特图日期|
|axisFormat| 自定义的日期格式|Mermaid甘特图日期|
|excludes | 排除非工作日期| 周末（weekends）和特定的日期（日期格式 YYYY-MM-DD）|
|section| 模块| 开发阶段 |
|done| 状态| 完成|
|active| 状态 | 进行中 |
|crit| 状态 | 紧急 |
| after | 任务依赖 | after al|
| milestone | 里程碑 | 一个点的标记|
|future| 时间 | 后续待处理 |
|开始日期缺失| 时间 | 默认上一个任务完成后|
|结束日期缺失| 时间 | 默认当前时间后|

```mermaid
gantt
%% 时间格式
dateFormat  YYYY-MM-DD
%% 标题
title 项目开发流程
%% 排除非工作日
excludes weekends
  section 项目确定
    需求分析   : done, id1, 2016-06-22, 3d
    可行性报告  : crit, done, after id1, 5d
    概念验证   : active,  5d
  section 项目实施
    概要设计   : crit,  2016-07-05, 5d
    详细设计   : done,2016-07-08, 10d
    编码      : done,active,crit, 2016-07-15, 10d
    测试      : active,done, id3, 2016-07-22, 5d
  section 发布验收
    开心 : milestone, 1h
    发布: 2d
    验收: after id3, 5d
    待处理 : future
```

gantt %% 时间格式 dateFormat YYYY-MM-DD %% 标题 title 项目开发流程 %% 排除非工作日 excludes weekends section 项目确定 需求分析 : done, id1, 2016-06-22, 3d 可行性报告 : crit, done, after id1, 5d 概念验证 : active, 5d section 项目实施 概要设计 : crit, 2016-07-05, 5d 详细设计 : done,2016-07-08, 10d 编码 : done,active,crit, 2016-07-15, 10d 测试 : active,done, id3, 2016-07-22, 5d section 发布验收 开心 : milestone, 1h 发布: 2d 验收: after id3, 5d 待处理 : future

---

6. 状态图

stateDiagram关键字

1. 状态

```mermaid
stateDiagram-v2
  s1
```

stateDiagram-v2 s1

2. 过渡

```mermaid
stateDiagram-v2
  s1 --> s2
```

stateDiagram-v2 s1 --> s2

3. 开始与结束

```mermaid
stateDiagram-v2
  [*] --> s1
  s1 --> [*]
```

stateDiagram-v2 [*] --> s1 s1 --> [*]

4. 复合状态

```mermaid
stateDiagram-v2
	[*] --> First
	state First {
		[*] --> second
		second --> [*]
	}
```

stateDiagram-v2 [*] --> First state First { [*] --> second second --> [*] }

```mermaid
stateDiagram-v2
	[*] --> First
	state First {
		[*] --> Second
		state Second {
			[*] --> second
			second --> Third
			state Third {
				[*] --> third
				third --> [*]
			}
		}
	}
```

stateDiagram-v2 [*] --> First state First { [*] --> Second state Second { [*] --> second second --> Third state Third { [*] --> third third --> [*] } } }

```mermaid
stateDiagram-v2
	[*] --> First
	First --> Second
	First --> Third
	state First {
		[*] --> fir
		fir --> [*]
	}
	state Second {
		[*] --> sec
		sec --> [*]
	}
	state Third {
		[*] --> thi
		thi --> [*]
	}
```

stateDiagram-v2 [*] --> First First --> Second First --> Third state First { [*] --> fir fir --> [*] } state Second { [*] --> sec sec --> [*] } state Third { [*] --> thi thi --> [*] }

5. 选择

```mermaid
stateDiagram-v2
	state if_state <<choice>>
	[*] --> IsPositive
	IsPositive --> if_state
	if_state --> False: if n < 0
	if_state --> True : if n >= 0
```

stateDiagram-v2 state if_state <<choice>> [*] --> IsPositive IsPositive --> if_state if_state --> False: if n < 0 if_state --> True : if n >= 0

6. 分叉

```mermaid
stateDiagram-v2
	state fork_state <<fork>>
	  [*] --> fork_state
	  fork_state --> State2
	  fork_state --> State3

	  state join_state <<join>>
	  State2 --> join_state
	  State3 --> join_state
	  join_state --> State4
	  State4 --> [*]
```

stateDiagram-v2 state fork_state <<fork>> [*] --> fork_state fork_state --> State2 fork_state --> State3 state join_state <<join>> State2 --> join_state State3 --> join_state join_state --> State4 State4 --> [*]

7. 便利贴

```mermaid
stateDiagram-v2
	State1: The state with a note
	note right of State1
		Important information! You can write
		notes.
	end note
	State1 --> State2
	note left of State2 : This is the note to the left.
```

stateDiagram-v2 State1: The state with a note note right of State1 Important information! You can write notes. end note State1 --> State2 note left of State2 : This is the note to the left.

8. 并发

```mermaid
stateDiagram-v2
	[*] --> Active
	state Active {
		[*] --> NumLockOff
		NumLockOff --> NumLockOn : EvNumLockPressed
		NumLockOn --> NumLockOff : EvNumLockPressed
		--
		[*] --> CapsLockOff
		CapsLockOff --> CapsLockOn : EvCapsLockPressed
		CapsLockOn --> CapsLockOff : EvCapsLockPressed
		--
		[*] --> ScrollLockOff
		ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
		ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
	}
```

stateDiagram-v2 [*] --> Active state Active { [*] --> NumLockOff NumLockOff --> NumLockOn : EvNumLockPressed NumLockOn --> NumLockOff : EvNumLockPressed -- [*] --> CapsLockOff CapsLockOff --> CapsLockOn : EvCapsLockPressed CapsLockOn --> CapsLockOff : EvCapsLockPressed -- [*] --> ScrollLockOff ScrollLockOff --> ScrollLockOn : EvScrollLockPressed ScrollLockOn --> ScrollLockOff : EvScrollLockPressed }

9. 设定图的方向

```mermaid
stateDiagram-v2
	direction LR
	[*] --> A
	A --> B
	B --> C
	state B {
	  direction LR
	  a --> b
	}
	B --> D
```

stateDiagram-v2 direction LR [*] --> A A --> B B --> C state B { direction LR a --> b } B --> D

来源网站https://daobook.github.io/mermaid/stateDiagram.html#notes

---

7. 用户旅程图

journey关键字

```mermaid
journey
	title 我工作的一天
	section 去工作
	  沏茶: 5: 我
	  	测试4: 4: 我
	  上楼: 3: 我
	  测试2: 2: 我
	  工作: 1: 我, 猫
	section 回家
	  下楼: 5: 我
	  坐下休息: 5: 我
```

journey title 我工作的一天 section 去工作 沏茶: 5: 我 测试4: 4: 我 上楼: 3: 我 测试2: 2: 我 工作: 1: 我, 猫 section 回家 下楼: 5: 我 坐下休息: 5: 我

---

8. 历史版本点线图

gitGraph关键字

```mermaid
gitGraph:
options
{
    "nodeSpacing": 50,
    "nodeRadius": 2
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch
```

gitGraph: options { "nodeSpacing": 50, "nodeRadius": 2 } end commit branch newbranch checkout newbranch commit commit checkout master commit commit merge newbranch

---

9. 实体关系图

~~~ ```mermaid erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains CUSTOMER }|..|{ DELIVERY-ADDRESS : uses ``` ~~~ ```mermaid erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains CUSTOMER }|..|{ DELIVERY-ADDRESS : uses ```

```mermaid
erDiagram
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER {
        string name
        string custNumber
        string sector
    }
    ORDER ||--|{ LINE-ITEM : contains
    ORDER {
        int orderNumber
        string deliveryAddress
    }
    LINE-ITEM {
        string productCode
        int quantity
        float pricePerUnit
    }
```

erDiagram CUSTOMER ||--o{ ORDER : places CUSTOMER { string name string custNumber string sector } ORDER ||--|{ LINE-ITEM : contains ORDER { int orderNumber string deliveryAddress } LINE-ITEM { string productCode int quantity float pricePerUnit }

来源网站https://daobook.github.io/mermaid/entityRelationshipDiagram.html

---