标签：Markdown -- text v2 state mermaid Mermaid stateDiagram
目录1. 饼状图
pie关键字
```mermaid
pie
title 为什么总是宅在家里？
"喜欢宅" : 15
"天气太热或太冷" : 20
"穷" : 500
```
2. 流程图
graph关键字，直线
flowchart关键字，曲线
-
方向
- TB：自顶向下
- BT：自底向上
- RL：从右到左
- LR：从左到右
- TD：和TB一样
-
节点
- 定义矩形形状的节点：id[text]
- 定义圆角矩形的节点：id(text)
- 定义椭圆形的节点：id([text])
- 定义圆柱形的节点：id[(text)]
- 定义圆形的节点：id((text))
- 定义非对称图形的节点：id>text]
- 定义菱形的节点：id{text}
- 定义六角形的节点：id{{text}}
- 定义平行四边形的节点(两个方向)：id[/text/]或者[\text]
- 定义梯形的节点(两个方向)：id[/text] 或者 di[\text/]
-
箭头
- 实线箭头：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
```
- 子图表
subgraph 子图表名称
子图表中的描述语句...
end
```mermaid
graph TB
id1(圆角矩形)--普通线-->id2[矩形]
subgraph 子图表
id2==粗线==>id3{菱形}
id3-.虚线.->id4>右向旗帜]
id3--无箭头---id5((圆形))
end
```
3. 序列图
sequenceDiagram关键字
-
箭头和线段
- 实线并且没有箭头：A->B:text
- 虚线没有箭头：A–>B:text
- 实线带箭头：A->>B:text
- 虚线带箭头：A–>>B:text
- 实线并且在终点带一个x：A-xB:text
- 虚线并且在终点带一个x：A–xB:text
-
循环
loop 循环的条件
循环体描述语句
end
- 判断
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
```
4. 类图
classDiagram关键字
-
变量类型
- + public
- \– private
- # protected
- ~ Package/Internal
-
抽象函数
括号的后面添加*
someAbstractMethod()*
```mermaid
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
```
6. 状态图
stateDiagram关键字
- 状态
```mermaid
stateDiagram-v2
s1
```
- 过渡
```mermaid
stateDiagram-v2
s1 --> s2
```
- 开始与结束
```mermaid
stateDiagram-v2
[*] --> s1
s1 --> [*]
```
- 复合状态
```mermaid
stateDiagram-v2
[*] --> First
state First {
[*] --> second
second --> [*]
}
```
```mermaid
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 --> [*]
}
```
- 选择
```mermaid
stateDiagram-v2
state if_state <<choice>>
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
```
- 分叉
```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 --> [*]
```
- 便利贴
```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.
```
- 并发
```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
}
```
- 设定图的方向
```mermaid
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: 我
```
8. 历史版本点线图
gitGraph关键字
```mermaid
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
}
```
来源网站https://daobook.github.io/mermaid/entityRelationshipDiagram.html
标签：Markdown,--,text,v2,state,mermaid,Mermaid,stateDiagram 来源： https://www.cnblogs.com/xiaostudy/p/16351303.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。