【Markdown图表用法总结】

文章目录

一、Markdown简介
二、Markdown流程图
- 2.1 标准流程图
- 2.2 简易流程图
三、Markdown饼图
四、Markdown时序图
五、Markdown甘特图
附：参考文档

一、Markdown简介

Markdown 是一种轻量级标记语言，创始人为约翰·格鲁伯（John Gruber）。它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的 XHTML（或者HTML）文档。Markdown支持HTML语法。

二、Markdown流程图

2.1 标准流程图

语法格式：

```mermaid
flowchat
语句...
```

节点语法：
nodeName=>nodeType: nodeText[|flowstate][:>urlLink]，其中[]项是可选的。

类型	含义
nodeName	流程图文档中的节点变量名称
nodeType	节点的类型
nodeText	被插入到节点中的文本。允许换行
flowstate	可选的，使用`\|`为节点指定额外的样式
urlLink	可选的，它使用`:>`运算符指定要链接到的地址

节点类型nodeType

节点类型	表示方法	释义
开始	`st=>start: start`	用作流开始的第一个节点。默认文本是`Start`
结束	`e=>end: end`	用作流程结束的最后一个节点。默认文本是`End`
运算操作	`op=>operation: operation`	指示流程中需要发生操作
输入输出	`io=>inputoutput: inputoutput`	指示`IO`在流程中发生
子程序	`sub=>subroutine: subroutine`	表示流程中发生了一个子例程
判断	`cond=>condition: condition`	允许条件或逻辑语句将流程引导到两个路径之一(`yes`or`no`)
平行线	`para=>parallel: parallel`	允许多个流程同时发生

链接urlLink
使用运算符:>将外部链接添加到节点，如下所示：

  st=>start: start:>https://www.csdn.net[blank]	// 由于[blank]的修饰，该st节点将通过打开新选项卡方式加载https://www.csdn.net地址
  e=>end: end:>https://www.csdn.net				// 将通过页面导航的方式导航到https://www.csdn.net地址，而不是打开新选项卡

连接语法：
<node variable name>[(<specification1>[, <specification2])]-><node variable name>[[(<specification1>[, <specification2])]-><node variable name>]，其中[]项是可选的。连接在节点定义下方各自的部分中定义，通过运算符->指定从一个节点到另一个节点的连接。例如：

nodeVar1->nodeVar2

nodeVar2->nodeVar3
- 方向direction
  定义离开节点的方向，使用<direction>表示，<direction>取值范围为以下四种情况中的一种：
  - left
  - right
  - top
  - buttom
- 特定说明符specification
  每个节点变量都有可选的说明符，比如方向，在变量名之后使用()包含，,分离，如下所示：
  nodeVar(spec1, spec2)

示例：

  ```mermaid
  flowchat
  st=>start: 开始:>https://www.csdn.net[blank]
  e=>end: 结束:>https://www.csdn.net
  op=>operation: My Operation
  sub=>subroutine: My Subroutine
  cond=>condition: linear or polynomial
  io=>inputoutput: catch something...
  para=>parallel: 3 possibilities

  st->op->cond
  cond(yes)->io->e
  cond(no)->sub(right)
  sub(right)->para
  para(path1, top)->cond
  para(path2, right)->op
  para(path3, bottom)->e
  ```

参考资料：https://github.com/adrai/flowchart.js

2.2 简易流程图

语法格式：

```mermaid
graph(flowchart) <dirction>
语句...
```

graph与flowchart都可用来表示简易流程图。<dirction>表示流程图方向，取值范围为以下五种情况中的一种：

LR：left to right，方向从左到右
RL：right to left，方向从右到左
TB：top to buttom，方向从上到下
BT：buttom to top，方向从下到上
TD：top to down，方向从上到下，等同于TB

流程块样式：

流程块样式	含义
( )	圆角框，标准流程图中的开始/结束框
[ ]	方形框，标准流程图中的运算框
[[ ]]	复合方形框，标准流程图中的子程序框
{ }	菱形框，标准流程图中的判断框
(( ))	圆形
> ]	非对称
{{ }}	六边形
[/ /] or [\ \]	平行四边形，标准流程图中的输入输出框
[/ \] or [\ /]	梯形
\| \|	表示条件结果之一，其后跟上对应的执行结果，一般前面与判断框相连

连接线样式：

连接线样式含义
--> 实线带箭头
-.-> 虚线带箭头
--- 实线不带箭头
-.- 虚线不带箭头
==> 加粗的实线带箭头
=== 加粗的实线不带箭头
流程图分组：
流程图分组可通过关键字subgraph，end实现。示例：
```
  ```mermaid
  graph TB
  	subgraph 第三组
  	C1 --> C2
  	end
  	subgraph 第二组
  	B1 --> B2
  	end
  	subgraph 第一组
  	A1 --> A2
  	end
  ```
```

连接线样式	含义
`-->`	实线带箭头
`-.->`	虚线带箭头
`---`	实线不带箭头
`-.-`	虚线不带箭头
`==>`	加粗的实线带箭头
`===`	加粗的实线不带箭头

示例：

  ```mermaid
  graph LR
  A(开始) --> B[operation] --> C{judgment} --> |是|something -.-> D[/do something/]
  C{judgment} -.否.-> E[[subroutine]] -.-> H>idle]
  D[/do something/] --> G(结束)
  F[possibility] ---> C{judge}
  F[possibility] -.-> B[operation]
  E[[subroutine]] --> F[possibility] --> G(结束)
  ```

三、Markdown饼图

语法格式：

```mermaid
pie [showData] [title titleValue]
数据集...
```

其中[]项是可选的，showData表示是否在饼图中呈现实际数据值，数据集格式为"dataKey"：dataValue，其中dataValue表示一个正数值，支持小数点。

示例：

  ```mermaid
  pie showData title 空气成分比例
  "氮气" : 0.781
  "氧气" : 0.209
  "其他气体" : 0.01
  ```

四、Markdown时序图

语法格式：

```mermaid
sequenceDiagram
[participant 别名 as 对象显示名]
语句...
```

其中[]项，直接使用对象显示名时，可以不写。

连接方式：
<对象1> <箭头类型> <对象2> : [消息内容]，其中:号是不可省略的，:号右边的空格 也是不可省略的，[]项是可选的，<箭头类型>有以下8种样式：

箭头类型	含义
`->`	不带箭头的实线
`-->`	不带箭头的虚线
`->>`	带箭头的实线
`-->>`	带箭头的虚线
`-x`	带`x`的实线
`--x`	带`x`的虚线
`-)`	实线末端带有一个空心箭头
`--)`	虚线末端带有一个空心箭头

常用语法：
- 1. 激活与停用：
  表示对象的生存周期，在时序图中通过竖状的矩形框表示。可使用activate，deactivate来表示激活与停用，也可通过+号，-号来表示。语法格式：
```
  # 直接激活
  activate <对象>
  deactivate <对象>
  
  # 符号激活
  +<对象>
  -<对象>
```
- 2. 注释：
  Note <位置> <对象>: <注释内容>，其中<对象>包含2个时，可以通过,号隔开；<位置>取值有三种，分别是：
  - right of
  - left of
  - over
- 3. 循环：
  适用于当满足一定条件时，需要重复发送消息的情况。语法格式：
```
  loop <消息说明>
  	消息流...
  end
```
- 4. 选择：
  适用于需要对多个条件做出判断的情况。语法格式：
```
  alt <条件说明>
  	消息流...
  else
  	消息流...
  else
  	消息流...
  end
```
- 5. 可选：
  满足条件时才执行。语法格式：
```
  opt <条件说明>
  	消息流...
  end
```
- 6. 并行：
  某个时间段，同时发生的动作。语法格式：
```
  par <消息说明1>
  	消息流...
  and [消息说明2]
  	消息流...
  and [消息说明3]
  	消息流...
  end
```
- 7. 背景颜色：
  设置时序图某一段的颜色背景。语法格式：
```
  rect RGB([0, 255], [0, 255], [0, 255])
  	消息流...
  end
```

示例：

  ```mermaid
  sequenceDiagram
  participant A as 对象A
  participant B as 对象B
  participant C as 对象C
  participant D as 对象D

  Note left of A: I am A
  Note right of C: I am C
  activate A
  A ->> +B : 
  B -->> A : 

  loop DoSomething
  	B -) C : do something
  end

  rect RGB(150, 150, 150)
  	alt cond1
  		C --) D : do something 1
  	else cond2
  		C --x D : do something 2
  	end
  end

  opt cond3
  	A -x B : do something 3
  end
  deactivate A

  par cond
  	B -) C : do something
  and
  	B ->> -B : do something
  end
  Note over A,B: We are family
  ```

五、Markdown甘特图

语法格式：

```mermaid
gantt [title titleValue]
[dateFormat <format>]
[axisFormat <format>]
[section <任务描述>]
任务...
```

其中[]项是可选的。

日期格式：
dateFormat <format>，其中<format>项的默认格式为YYYY-MM-DD，以下列举了一些常用的日期格式：
日期格式描述
YYYY 4位数的年份
MM 月份[01, 12]
DD 一个月中的第几天[01, 31]
HH 24小时制[00, 23]
mm 分钟[00, 59]
ss 秒[00, 59]
轴上的输出日期格式：
axisFormat <format>，其中<format>项的默认格式为%Y-%m-%d，以下列举了一些常用的日期格式：
日期格式描述
%Y 十进制数的年份
%m 月份[01, 12]
%d 一个月中的第几天[01, 31]
%H 24小时制[00, 23]
%M 分钟[00, 59]
%s 秒[00, 59]
任务的定义：
<任务名> : [crit], [[active] [done]], [任务ID], [开始日期], <周期>，其中[]项是可选的。
- [开始日期]的格式要求与dateFormat的格式一致，也可以使用after 任务ID1，表示该任务在任务ID1之后开始。
- <周期>的格式可以是dateFormat格式，表示任务的结束日期，也可以是任务的持续时间，如1d(1天)，3h(3小时)，10min(10分钟)等。
里程碑：
<任务名> : milestone, [任务ID], <开始日期>, <周期>，其中[]项是可选的。里程碑与任务不同，里程碑与任务不同，它代表一个单一的时间瞬间，由关键字milestone标识。里程碑的确切位置是由里程碑的初始日期和持续时间决定的，即：初始日期 + 持续时间 / 2。
示例：
- 示例1：
```
  ```mermaid
    gantt
    dateFormat HH:mm
    axisFormat %H:%M
    Initial: milestone, m1, 17:50, 10min
    taska2 : 10min
    taska3 : 5min
    Final: milestone, m2, 18:29, 2min
  ```
```
- 示例2：
```
  ```mermaid
    gantt title Adding GANTT diagram functionality to mermaid
    dateFormat  YYYY-MM-DD
    section 现有任务
    已完成 : crit, done, id1, 2014-01-06,2014-01-08
    进行中 : active, id2, 2014-01-09, 3d
    计划中 : id3, after id2, 5d
  ```
```

日期格式	描述
YYYY	`4`位数的年份
MM	月份`[01, 12]`
DD	一个月中的第几天`[01, 31]`
HH	24小时制`[00, 23]`
mm	分钟`[00, 59]`
ss	秒`[00, 59]`

日期格式	描述
%Y	十进制数的年份
%m	月份`[01, 12]`
%d	一个月中的第几天`[01, 31]`
%H	24小时制`[00, 23]`
%M	分钟`[00, 59]`
%s	秒`[00, 59]`

附：参考文档

Markdown常用语法
- https://blog.csdn.net/ZTH_G/article/details/129913830
Markdown图表语法
- https://mermaid.js.org/intro
- https://www.5axxw.com/wiki/content/xbl296