1、流程图
先在 Typora 中,输入 ```mermaid然后敲击回车,即可初始化一张空白图。
语法解释:graph
关键字就是声明一张流程图,TD
向下、LR
向右边,这里的含义是 Top-Down 由上至下。
graph TD
A[Hard edge] -->B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
2、时序图
先在 Typora 中,输入 ```mermaid然后敲击回车,即可初始化一张空白图。
语法解释:->>
代表实线箭头,-->>
则代表虚线。
sequenceDiagram
Alice-->>Bob: Hello Bob, how are you?
alt is sick
Bob->Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end
Bob->>Alice: Thanks
3、状态图
先在 Typora 中,输入 ```mermaid然后敲击回车,即可初始化一张空白图。
语法解释:[*]
表示开始或者结束,如果在箭头右边则表示结束。
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
4、类图
先在 Typora 中,输入 ```mermaid然后敲击回车,即可初始化一张空白图。
语法解释:<|--
表示继承,+
表示 public
,-
表示 private
。
classDiagram
Animal <|--Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
5、甘特图
甘特图一般用来表示项目的计划排期,目前在工作中经常会用到。
先在 Typora 中,输入 ```mermaid然后敲击回车,即可初始化一张空白图。
语法也非常简单,从上到下依次是图片标题、日期格式、项目、项目细分的任务。
gantt
title 工作计划
dateFormat YYYY-MM-DD
section Section
A task :a1, 2020-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2020-01-12 , 12d
another task : 24d
6、饼图
先在 Typora 中,输入 ```mermaid然后敲击回车,即可初始化一张空白图。
饼图使用 pie
表示,标题下面分别是区域名称及其百分比。
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5