使用 Typora 画图

typora画图

先在 Typora 中，输入 ```mermaid 然后敲击回车，即可初始化一张空白图。

参考：

mermaid官方文档（详细，博客只是常用一些）: https://mermaid-js.github.io/mermaid/#/flowchart

参考文章（只是常用几个）： https://zhuanlan.zhihu.com/p/172635547

一、流程图

语法解释：graph 关键字就是声明一张流程图，TD 表示的是方向，这里的含义是 Top-Down 由上至下

TD从上到下，LR从左到右

graph TD; 
    A-->B;
    A-->C;
    B-->D;
1
2
3
4

二、时序图

语法解释：->> 代表实线箭头，-->> 则代表虚线

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
1
2
3

三、状态图

语法解释：[*] 表示开始或者结束，如果在箭头右边则表示结束

stateDiagram
    [*] --> s1
    s1 --> [*]
1
2
3

四、类图

语法解释：<|-- 表示继承，+ 表示 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()
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

五、甘特图

甘特图一般用来表示项目的计划排期，目前在工作中经常会用到

语法也非常简单，从上到下依次是图片标题、日期格式、项目、项目细分的任务

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
1
2
3
4
5
6
7
8
9

六、饼图

饼图使用 pie 表示，标题下面分别是区域名称及其百分比

pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5
1
2
3
4
5
6