typora 语法

Markdown原生语法不支持绘制流程图等，使用插入图片的方式插入流程图，一旦文件移动，容易导致内容的丢失。

目前使用的Markdown语法编辑器——Typora支持Mermaid语法，因此学习记录一下。

“

Mermaid 是一个方便于 Markdown 文档撰写者通过文本方式生成图形的扩展工具。相比 Visio 等绘图工具，Mermaid 轻便很多，但绘制的样式受限，只能绘制一些相对简单的图。

1 使用

```mermaid
此处内容会渲染成mermaid图形
```

2 流程图

使用graph或flowchart关键字来定义流程图。

Ⅰ 节点

节点id是流程图的基本单元，除了end，其他字符都可以作为节点id，包括END、End。

graph LR
	E     %%此时E为节点id，框的内容为E
	F[ff] %%此时F为节点id，框的内容为ff
	G[g<br>g]

“

注1：节点内容可以使用<br>进行换行，但只能在[]中使用，不知直接使用在节点id上。

“

注2：特殊字符作为内容时要用双引号引起来，例如“（”、“）”。例：id1["This is the (text) in the box"]，且要引整个方括号内部。

Ⅱ 节点形状

graph LR
id1[矩形] -->
id2(圆角) -->
id3[[subroute process]] -->
id4[(圆柱形)] -->
id5([椭圆]) -->
id6((圆形)) -->
id7>不对称形状] -->
id8{菱形} -->
id9{{六边形}} -->
id10[/This is the text in the box/]  -->
id11[This is the text in the box]  -->
 A[/Christmas] -->
 B[Go shopping/]
 
 %%总结来说就是“[”代表直角边；“（”代表圆角边；“（（”代表圆边；“{”代表角边；“[/”代表斜直边；

Ⅲ 流程图方向

TB - top to bottom

TD - top-down/ same as top to bottom

BT - bottom to top

RL - right to left

LR - left to right

Ⅳ 连接线

graph TB
   A---a	%%直线
   B--文本---b	%%直线文本
   C-->c	%%箭头
   D--文本-->d	%%箭头文本
   F-.->f	%%虚线
   G-.文本.->g	%%虚线箭头
   H===h	%%粗直线
   I==文本===i	%%粗直线文本
   J==>j	%%粗箭头
   K==文本==>k	%%粗箭头文本
   m --> n & u--> v %%“&”前后要加空格
   p & q--> y & z

“

注： 连接线上的文本可以使用<br>进行换行。

线条的长度通过添加相应的“-”、“=”、“.”来增加长度。

Ⅴ 子图

类似于一种嵌套手段。建议使用flowchart而不再使用graph

flowchart TB
    subgraph 例1     %% subgraph 上级框的名称
    a1-->a2
    a3
    end		     %% 以end结尾表示这个子图结束
    subgraph 例2     %% 可以添加多个
    b1-->b2
    end
    subgraph 例3
    c1-->c2
    end

改变子图方向使用direction命令，如direction TB等。

flowchart TB
    subgraph 例1
    direction TB %%改变方向
    a1-->a2
    a3
    end
    subgraph 例2
    direction TB %%改变方向
    b1-->b2
    end
    subgraph 例3
    direction TB %%改变方向
    c1-->c2
    end

“

注意，在子图表中定义的形状只能在该子图表中使用，不能在其他子图表或图表中使用。

3 饼图

使用pie关键字定义饼图。

pie
   title 饼图举例	%% title 用于定义图表标题
   "块1": 30		%% "块1"、"块2" 和 "块3" 分别为三个部分，并在冒号后给出数值（相加可以不为100）。
   "块2": 10
   "块3": 40
   "块4": 20

4 甘特图

使用gantt关键字定义甘特图。

gantt
   title 甘特图举例 %% title 用于定义图表标题
   dateFormat  YYYY-MM-DD        %% dateFormat 用于定义日期格式
   section 部分1                 %%定义一个部分的名称
   任务 1: 2023-01-01, 30d       %%不同任务的名称、开始时间以及对应时限。
   任务 2: 2023-02-01, 14d
   任务 3: 2023-03-01, 7d
   section 部分2
   任务 1: 2023-01-01, 15d
   任务 2: 2023-02-01, 19d
   任务 3: 2023-03-01, 7d

日期格式定义方法如下所示：

5 总结

Mermaid支持的语法图还有很多，例如象限图、状态图、思维导图等，但由于在Markdown中的使用频率较低，这里不再过多介绍~

感兴趣的话可以在参考链接中查看。

“

参考：
1.Markdown 入门教程-慕课网 (imooc.com)
2.程序员画图 - mermaid(流程图) - 知乎 (zhihu.com)
3.About Mermaid | Mermaid

        注：本文Mermaid图例经Mermaidv10.2.2 Live Editor渲染。