一、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允许条件或逻辑语句将流程引导到两个路径之一( yesorno)平行线 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->nodeVar2nodeVar2->nodeVar3- 方向
direction
定义离开节点的方向，使用<direction>表示，<direction>取值范围为以下四种情况中的一种：leftrighttopbuttom
- 特定说明符
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 ```
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 ofleft ofover
-
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 ```
-
扫一扫
1497
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
