Mermaid语法绘制图表
Typora 在画图方面的小技巧Mermaid，Mermaid是一种简单的类似 Markdown 的脚本语言，通过 JavaScript 编程语言，将文本转换为图片，支持绘制非常多种类的图，常见的有时序图、流程图、类图、甘特图等。
Mermaid
https://mermaid-js.github.io/mermaid/#/
Github
https://github.com/mermaid-js/mermaid
Mermaid Live Editor
https://mermaid-js.github.io/mermaid-live-editor/
画图示例
输入 ```mermaid然后敲击回车，即可初始化一张空白图
- 流程图 Flowchart
graph 关键字就是声明流程图，TD表示竖向(Top-Down)，LR表示横向(Left-Right)，[]方形，()圆角，{}条件
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
A
B
C
D
graph LR;
A-->B;
A-->C;
B-->D;
C-->D;
A
B
C
D
- 时序图 Sequence diagram
sequenceDiagram声明时序图，
->>代表实线箭头，-->>则代表虚线
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts
prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
Alice Bob John Hello John, how are you? Fight against hypochondria loop [Healthcheck] Rational thoughts prevail! Great! How about you? Jolly good! Alice Bob John
- 甘特图 Gantt diagram
gantt声明甘特图，甘特图一般用来表示项目的计划排期，目前在工作中经常会用到，语法：从上到下依次是图片标题、日期格式、项目、项目细分的任务
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
2014-01-07 2014-01-09 2014-01-11 2014-01-13 2014-01-15 2014-01-17 2014-01-19 2014-01-21 Completed task Active task Future task Future task2 A section Adding GANTT diagram to mermaid
- 类图 Class diagram
classDiagram声明类图，
<|--表示继承，+表示 public，-表示 private
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
Cool
Where am i?
Cool label
Class01
int chimp
int gorilla
size()
AveryLongClass
Class03
Class04
Class05
Class06
Class07
Object[] elementData
equals()
Class08
Class09
C2
C3
- 饼图 Pie
pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15
79% 17% 3% Dogs Cats Rats
- 实体关系图 Entity Relationship Diagram
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
CUSTOMER ORDER LINE-ITEM DELIVERY-ADDRESS places contains uses
- 用户旅程图 User Journey Diagram
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
Cat Me
Go to work Me
Make tea Me
Go upstairs Me Cat
Do work
Go home Me
Go downstairs Me
Sit down My working day
Go to work
Make tea
Go upstairs
Do work
Go home
Go downstairs
Sit down