md文档进阶用法

一、`mermaid`语法

1、`mermaid`语法介绍

什么是mermaid语法
- Mermaid是一种基于Javascript的绘图工具，使用类似于Markdown的语法，使用户可以方便快捷地通过代码创建图表。
- 项目源码：https://github.com/mermaid-js/mermaid。
如何使用该语法
- 使用集成了Mermaid渲染功能的Markdown编辑器，如Typora。
- 使用特定的Mermaid渲染器。
Mermaid能绘制那些图
1. 饼状图pie
2. 流程图graph
3. 序列图sequenceDiagram
4. 甘特图gantt
5. 类图classDiagram
6. 状态图stateDiagram
7. 用户旅程图journey
注释语法为：%%注释内容

2、详解

主要介绍饼状图和流程图，其他图几乎不用，有些还处于测试阶段暂不了解。

（1）饼状图：`pie`

会自动重新配比各个数值比例。
不能自定义颜色位置等。

pie
	title 为什么学计算机
	"嫌头发太多":20
	"嫌寿命太长":50
	"嫌晚上睡太早":50
	"嫌皮肤太好":10

显示结果：

pie
    title 为什么学计算机
    "嫌头发太多":20
    "嫌寿命太长":50
    "嫌晚上睡太早":50
    "嫌皮肤太好":10

（2）流程图：`graph`

①定义方向：

位于开头，用来定义流程图连线方向（而不是布局方向）。
默认graph或graph TB或graph TD：从上到下。
graph BT：从下到上。（graph DT无效！）
graph LR：从左到右。
graph RL：从右往左。

②定义结点：

graph
	默认方形
	节点名1[方框形状]
	节点名2(圆角矩形)
	节点名3([腰圆键形])
	节点名4[[子程序形]]
	id5[(圆柱形)]
	id6((圆形))

graph
	id7{菱形}
	id8{{六边形}}
	id9[/平行四边形/]
	id10[\反向平行四边形\]
	id11[/梯形\]
	id12[\反向梯形/]

显示结果分别为：

graph
    %%共有12种样式
    默认方形
    节点名1[方框形状]
    节点名2(圆角矩形)
    节点名3([腰圆键形])
    节点名4[[子程序形]]
    id5[(圆柱形)]
    id6((圆形))

graph
    %%共有12种样式
    id7{菱形}
    id8
    id9[/平行四边形/]
    id10[\反向平行四边形\]
    id11[/梯形\]
    id12[\反向梯形/]

注：

节点名不能有空格。
显示内容文本里的多个连续的空格只显示一个。

③定义连线：

线条样式：

普通直线---，加粗直线===，虚线-.-。

增加一个相应字符即可延长线段（虚线是加.）。
1
2
graph LR
a----b===c-...-d
```
  graph LR
    a----b===c-...-d
```
箭头样式

更改线条两端的字符即可添加箭头。
1
2
graph LR
a-->b==>c-..->d
```
  graph LR
    a-->b==>c-..->d
```
默认仅支持右箭头，将关键字graph改为floechart即可使用其他样式箭头。
1
2
flowchart LR
a <--> b o==o c x-.-x d
```
  flowchart LR
    a <--> b o==o c x-.-x d
```

添加文本

直接加在箭头中间，或者用|文本内容|加在箭头后面。

1 2	graph LR a--文本1-->b==>\|文本2\|c-.文本3.->d

  graph LR
    a--文本1-->b==>|文本2|c-.文本3.->d

flowchart格式图的文本显示在底层：

1 2	flowchart LR a <--文本--> b o==文本==o c x-.文本.-x d

  flowchart LR
    a <--文本--> b o==文本==o c x-.文本.-x d

④多对多连接：

用&字符连接结点即可：

1 2	graph a & b --> c & d

graph
    a  & b --> c & d

实例：朱元璋家谱简图，圆圈代表皇帝。

graph LR
emperor((朱八八))-.子.->朱五四-.子.->朱四九-.子.->朱百六


朱雄英--长子-->朱标--长子-->emperor
emperor2((朱允炆))--次子-->朱标
朱樉--次子-->emperor
朱棡--三子-->emperor
emperor3((朱棣))--四子-->emperor
emperor4((朱高炽))--长子-->emperor3

graph LR
emperor((朱八八))-.子.->朱五四-.子.->朱四九-.子.->朱百六


朱雄英--长子-->朱标--长子-->emperor
emperor2((朱允炆))--次子-->朱标
朱樉--次子-->emperor
朱棡--三子-->emperor
emperor3((朱棣))--四子-->emperor
emperor4((朱高炽))--长子-->emperor3

3、不知道叫什么名字

flowchart语法：

flowchart语法只有两块内容——定义元素和连接元素。

sta=>start: 开始框:>https://bilibli.com
op=>operation: 处理框
cond=>condition: 条件语句/判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
sta->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op

4、序列图

Title: 标题：复杂使用
对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象B->小三: 你好吗
小三-->>对象A: 对象B找我了
对象A->对象B: 你真的好吗？
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩

二、其它补充

按钮样式<kbd>显示文字</kbd>和强制换行<br>：
1
<kbd>Win</kbd> + <kbd>Shift</kbd> + <kbd>s</kbd> ：截<br>强制换行
显示效果：

Win + Shift + s ：截
图和强制换行
输入公式：
1
2
3
4
5
6
7
8
9
10
$$
\begin{equation}
Fib(n)=
\left \{ \begin{aligned}
Fib(n-1)+Fib(n-2), n>1 \\
1, n=1 \\
0, n=0
\end{aligned} \right.
\end{equation}
$$
显示效果：
$$
\begin{equation}
Fib(n)=
\left { \begin{aligned}
Fib(n-1)+Fib(n-2), n>1 \
1, n=1 \
0, n=0
\end{aligned} \right.
\end{equation}
$$

md文档进阶用法

一、mermaid语法

1、mermaid语法介绍

2、详解

（1）饼状图：pie

（2）流程图：graph

①定义方向：

②定义结点：

③定义连线：

④多对多连接：

3、不知道叫什么名字

4、序列图

二、其它补充

一、`mermaid`语法

1、`mermaid`语法介绍

（1）饼状图：`pie`

（2）流程图：`graph`