使用MarkDown+mermaid-JS绘制简单图形-CFANZ编程社区

文章目录

写在前面
简介
流程图（Flowchart）

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

一个例子(辗转相除法)
另一个例子（唐朝三省六部制）

时序图
状态图
类图
甘特图（Gantt）
饼图（Pie）
实体关系图（Entity Relationship Diagram）
参考

写在前面

流程图这一类的图形经常用到，以前我使用的是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

线条文字

方矩形 square rectangle

圆形 circle

圆角矩形 round rectangle

菱形 Rhombus

一个例子(辗转相除法)

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(结束)

是

否

开始

输入m, n

r=m mod n

m=n

n=r

r=0?

输出m

结束

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

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 --> [*]

A B C D

类图

Animal +int age +String gender +isMammal() +mate() Duck +String beakColor +swim() +quack() Fish -int sizeInFeet -canEat() Zebra +bool is_wild +run()

甘特图（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

Mon 06 Mon 13 Mon 20 Mon 27 Mon 03 Mon 10 Mon 17 A task Another task Task in sec another task Section Another A Gantt Diagram

饼图（Pie）

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

70% 21% 4% 5% 示例 A B C D

实体关系图（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

参考

mermaid-js 官方文档 (英文)； ↩︎
mermaid-js GitHub主页； ↩︎