Typora 画图
推荐阅读 官方文档说明：https://support.typora.io/Draw-Diagrams-With-Markdown/
画图
输入 ```mermaid 然后回车，初始化一张空白图
流程图
语法解释：graph 关键字就是声明一张流程图，TD 表示的是方向，这里的含义是 Top-Down 由上至下。
graph TD;
A-->B;
A-->C;
A-->E;
B-->D;
C-->B;
C-->A;
graph TD;
A-->B;
A-->C;
A-->E;
B-->D;
C-->B;
C-->A;
-
粗线条： ==>
-
备注：A --> |备注| B
-
方形边框： 代号[名称] （直接写名称默认是这个）
-
圆角边框： 代号(名称)
-
菱形边框： 代号{名称}
例子：
graph TD;
A(RUNNING) --> |"showdown()"| B(SHUTDOWN);
B --> |"showdownNow()"| C(STOP);
A --> |"showdownNow()"| C;
B --> |"任务队列和线程池都清空后"| D(TIDYING);
C --> |"任务队列清空后"| D;
D --> |"terminated()结束后"| E(TERMINATED)
graph TD;
A(RUNNING) --> |"showdown()"| B(SHUTDOWN);
B --> |"showdownNow()"| C(STOP);
A --> |"showdownNow()"| C;
B --> |"任务队列和线程池都清空后"| D(TIDYING);
C --> |"任务队列清空后"| D;
D --> |"terminated()结束后"| E(TERMINATED)
时序图
语法解释：->> 代表实线箭头，-->> 则代表虚线。
sequenceDiagram
Alice->>John: Hello John,how are you?
John -->> Alice:Great!
Alice -> Te:haha
sequenceDiagram
Alice->>John: Hello John,how are you?
John -->> Alice:Great!
Alice -> Te:haha
状态图
语法解释：[*] 表示开始或者结束，如果在箭头右边则表示结束。
stateDiagram
[*] --> s1
s1 --> [*]
s1 --> s2
s2 --> s1
s2 --> [*]
stateDiagram
[*] --> s1
s1 --> [*]
s1 --> s2
s2 --> s1
s2 --> [*]
类图
语法解释：<|-- 表示继承，+ 表示 public，- 表示 private，学过 Java 的应该都知道。
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +isMamal()
Animal : +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+boolean is_wild
+run()
}
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +isMamal()
Animal : +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+boolean is_wild
+run()
}
甘特图
甘特图一般用来表示项目的计划排期，目前在工作中经常会用到。
语法也非常简单，从上到下依次是图片标题、日期格式、项目、项目细分的任务。
gantt
title 工作计划
dateFormat YYYY-MM-DD
section Section
A tast : a1, 2020-01-01, 30d
Another task : after a1,20d
section Another
Task in sec : 2020-01-12,12d
another task:24d
gantt
title 工作计划
dateFormat YYYY-MM-DD
section Section
A tast : a1, 2020-01-01, 30d
Another task : after a1,20d
section Another
Task in sec : 2020-01-12,12d
another task:24d
饼图
饼图使用 pie 表示，标题下面分别是区域名称及其百分比。
pie
title Key elements in Product X
"Calcium":42.96
"Potassium":20.05
"Magnesium":10.01
"Iron": 23
pie
title Key elements in Product X
"Calcium":42.96
"Potassium":20.05
"Magnesium":10.01
"Iron": 23
导出
绘制好的图片可以选择菜单/文件/导出，导出为图片或者网页格式。在网页中图片是以 SVG 格式渲染的，你可以复制 SVG 内容，导入到 SVG 的图片编辑器中进一步操作。
