写在前面

流程图这一类的图形经常用到，以前我使用的是PPT的简单图形绘制，虽然操作简单，但是不太好看。后来接触到了Visio，奈何MS付费软件用着虽然还可以，激活还是坚持不了多久。之后还接触到了一款开源软件Inkscape，用着也很方便，做矢量图很轻松，可惜电脑配置有点低，用着动不动就开始卡顿了。

前阶段突然想到CSDN里面的MarkDown编辑器可以绘制一些图形，查阅有关资料后知道了其实是内置了mermaid-js引擎支持。

简介

下面的这些图形（部分不常用的图形参考自官方文档），基本上就是mermaid-js的所有支持的图形了，功能很强大，语法也比较简单，有兴趣进一步了解的朋友可以看后面的参考文档¹以及mermaid-js的GitHub主页²，里面有更详细的样式定制方法可供选择。

流程图（Flowchart）

不带样式的流程图

graph RL;
A-->B;
B-->C;
B-->D;
A-->C;
D-->E;
C-->E;

带样式的流程图（程序框图）

graph TB
    A[方矩形 square rectangle] -- 线条文字 --> B((圆形 circle))
    A --> C(圆角矩形 round rectangle)
    B --> D{菱形 Rhombus}
    C --> D

一个例子(辗转相除法)

graph TB
    A(开始) --> B[/输入m, n/]
    B --> C[r=m mod n]
    C --> D[m=n]
    D --> E[n=r]
    E --> F{r=0?}
    F -->|是| G[/输出m/]
    F -->|否| B
    G --> H(结束)

另一个例子（唐朝三省六部制）

graph TD
subgraph 唐朝的三省六部制
    A[皇帝] --- B1[门下省]
    A --- B2[尚书省]
    A --- B3[中书省]
    B2 --- C1[工部]
    B2 --- C2[刑部]
    B2 --- C3[兵部]
    B2 --- C4[礼部]
    B2 --- C5[户部]
    B2 --- C6[吏部]
end

时序图

sequenceDiagram
    张三->>李四:你好！
    李四-->>张三:你也好。

状态图

stateDiagram
    [*] --> A
    A --> B
    A --> C
    A --> D
    B --> [*]
    C --> [*]
    D --> [*]

类图

甘特图（Gantt）

gantt
    title A Gantt Diagram
    %% 日期格式
    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

饼图（Pie）

pie
    title 示例
    "A" : 285
    "B" : 85
    "C" : 15
    "D" : 20

实体关系图（Entity Relationship Diagram）

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

参考