Markdown高级语法之mermaid流程图markdown高级语法，markdown画mermaid流程图，mark

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天 Markdown教程

一、mermaid流程图

graph LR
A[方形]-->B(圆角)
B-->C{条件a}
C-->|a=1|D[结果1]
C-->|a=2|E[结果2]

使用mermaid(美人鱼)语言
第一行要用graph(图表)开头,graph+空格+方向,方向必须大写

标识码意义
TB 上to下(top to bottom)
TD(不建议使用,因为没有DT) 也是从上to下(top to down)
BT 下to上(bottom to top)
RL 右to左(right to left)
LR 左to右(left to right)
```
graph TB
A[方形]-->B[圆角]
B-->C{条件a}
C-->|a=1|D[结果1]
C-->|a=2|E[结果2]
```
每个节点由节点标识和节点内容两个部分组成,节点内容不是必须的,如果没有节点内容,就会将节点标识显示在节点上,为了便于表示节点之间的关系,建议将“节点标识”定为英文,也可以中文或英文小写都可
- 节点标识:代码A[方形],A就是节点标识
- 节点内容:代码A[方形],括号里面的内容就是节点内容,没有内容[方形]就会将节点标识A显示出来,括号代表形状
  
  括号形状
  [] ==方形==
  () ==圆角==
  {} ==菱形==
  ([]) 两头半圆
  [[]] 两边小竖线
  [()] 圆柱形
  (()) 圆形
  >] 旗帜形
  {{}} 两头尖
  [\\] ==平行四边形==
  [/\] 梯形(正)
  [\/] 梯形(倒)
```
graph LR
a([两头半圆])-->b[[两边小竖线]]
b-->c[(圆柱形)]
c-->d((圆形))
d-->e>旗尖型]
e-->f{{两头尖}}
f-->g[\平行四边形\]
g-->h[/梯形\]
```
节点关系使用-->连接,只有一个节点第一次出现时,才需要完全定义形式,后面只需要使用节点标识即可
两个节点关系要放在独立行内,新的关系要独起一行
如果想要在线上加内容,可以使用A-->|a=1|D[内容],a=1就会被加到A到D的线上

标识码	意义
TB	上to下(top to bottom)
TD(不建议使用,因为没有DT)	也是从上to下(top to down)
BT	下to上(bottom to top)
RL	右to左(right to left)
LR	左to右(left to right)

括号	形状
[]	==方形==
()	==圆角==
{}	==菱形==
([])	两头半圆
[[]]	两边小竖线
[()]	圆柱形
(())	圆形
>]	旗帜形
{{}}	两头尖
[\\]	==平行四边形==
[/\]	梯形(正)
[\/]	梯形(倒)

连接线

线	形状
-->	带箭头
---	无箭头
--a=1--(两边至少有两个短线)或者---\|a=1\|	无箭头,a=1在线上
--a=1-->或者-->\|a=1\|	有箭头,a=1在线上
-.->	虚线箭头
==>	粗箭头
--o	圆形头
--x	叉形头
<--> o--o x--x	双箭头

subgraph-end语句可以增加框

二、公式编辑

基于latex(乳胶)编码排版
显示在行内与独行
- 显示在行内使用两个$: $\Gamma(n)=(n-1)$ $\Gamma(n)=(n-1)$
- 独行显示使用四个$: $x_n\stackrel{p}\longrightarrow\mu$
上标下标与组合
- 上标^如 $x^{43}$ : $x^{43}$
- 下标_如 $x_{43}$ : $x_{43}$
- 组合{}如 ${16}_{8}{2+}_{2}$ ${16}_{8}{2+}_{2}$
汉字字体与格式
- 汉字形式:\mbox{}如 $V_{\mbox{初始}}$ : $V_{\mbox{初始}}$ 如果不使用 $V_{初始}$ : $V_{初始}$
- 字体控制:\displaystyle可以让公式显示的更大一些如 $\displaystyle\frac{x+y}{y+z}$ : $\displaystyle\frac{x+y}{y+z}$ 如果不使用 $\frac{x+y}{y+z}$ : $\frac{x+y}{y+z}$
- 下划线符号:\underline如 $\underline{x+y}$ : $\underline{x+y}$
- 上大括号:\overbrace(算式)如 $\overbrace{a+b+c+d}^{2.0}$ $\overbrace{a+b+c+d}^{2.0}$ $\overbrace{a+b+c+d}_{2.0}$ $\overbrace{a+b+c+d}_{2.0}$ $\overbrace{a+b+c+d}$ $\overbrace{a+b+c+d}$
- 下大括号:\underbrace如 $a+\underbrace{b+c}_{1.0}+d$ $a+\underbrace{b+c}_{1.0}+d$
- 上位符号:\stackrel如 $\vec{x}\stackrel{\mathrm{def}}={x_1,\dots,x_n}$ $\vec{x}\stackrel{\mathrm{def}}={x_1,\dots,x_n}$
占位符
- 一个\quad如 $x \quad y$ : $x \quad y$
- 两个\qquad如 $x \quad y \qquad z$ : $x \quad y \qquad z$

三、饼图(很简单）

pie
  title Key elements in Product X
  "Calcium" : 42.96
  "Potassium" : 50.05
  "Magnesium" : 10.01
  "Iron" :  5

pie
  title Key elements in Product X
  "Calcium" : 42.96
  "Potassium" : 50.05
  "Magnesium" : 10.01
  "Iron" :  5