0%

Mermaid 使用指南

起因

在 MarkDown 中 使用 Mermaid 画流程图很方便,但是需要有一定规则, 做个记录

配置环境

  • Node v12.18
  • Hexo v4.2.1
  • Mermaid(hexo-filter-mermaid-diagrams) v1.0.5

安装

1
npm install hexo-filter-mermaid-diagrams

修改配置 site/themes/next/_config.yml

1
2
3
4
5
# Mermaid tag
mermaid:
enable: true
# Available themes: default | dark | forest | neutral
theme: forest

使用声明

在markdown中使用 需要将代码声明在 mermaid 代码块中

1
2
3
(```)mermaid
code
(```)

请忽略括号,这里是为了防止转义

流程图

基础Graph

graph 需要有声明

1
graph $Ori

流程图方向

代码 方向 说明
TB/TD top to bottom
BT bottom to top
LR left to right
RL right to left
1. 示例 TD
1
2
graph TD;
Start --> Stop
  graph TD;
      Start --> Stop
2. 示例 LR
1
2
graph LR;
Start --> Stop
  graph LR;
      Start --> Stop

节点/图形

默认
1
2
graph LR;
id;
graph LR;
    id;
带文本的Node
1
2
graph LR;
id1[This is the text in the box];
graph LR;
    id1[This is the text in the box];
圆角Node
1
2
graph LR;
id1(This is the text in the box);
graph LR;
    id1(This is the text in the box);
体育场式圆角Node
1
2
graph LR;
id1([This is the text in the box]);
graph LR;
    id1([This is the text in the box]);
子程序Node
1
2
graph LR;
id1[[This is the text in the box]];
graph LR;
    id1[[This is the text in the box]];
圆柱Node
1
2
graph LR;
id1[(This is the text in the box)];
graph LR;
    id1[(This is the text in the box)];
圆Node
1
2
graph LR;
id1((This is the text in the box));
graph LR;
    id1((This is the text in the box));
不对称Node (现在只有这一种形式)
1
2
graph LR;
id1>This is the text in the box];
graph LR;
    id1>This is the text in the box];
菱形Node
1
2
graph LR;
id1{This is the text in the box};
graph LR;
    id1{This is the text in the box};
六角形Node
1
2
graph LR;
id1{{This is the text in the box}};

我的博客不容许我显示这个效果!

平行四边形Node
1
2
graph LR;
id1[/This is the text in the box/];
graph LR;
    id1[/This is the text in the box/];
梯形Node
1
2
3
graph LR;
id1[/This is the text in the box\];
id2[\This is the text in the box/];
graph LR;
    id1[/This is the text in the box\];
    id2[\This is the text in the box/];

节点关系(连线)

线的长度

Length 1 2 3
Normal —- —— ——-
Normal with arrow —> —-> ——>
Thick === ==== =====
Thick with arrow ==> ===> ====>
Dotted -.- -..- -…-
Dotted with arrow -.-> -..-> -…->

线的类型

代码 名称 说明
—- 普通线段
—> 带箭头
=== 粗线
==> 粗线带箭头
-.- 虚线
-.-> 虚线带箭头
普通箭头
1
2
graph LR
A-->B
graph LR
    A-->B
直接连线
1
2
graph LR
A --- B
graph LR
    A --- B
带文字的连线
1
2
3
graph LR
A-- This is the text! ---B
C---|This is the text|D
graph LR
    A-- This is the text! ---B
    C---|This is the text|D
带文字带箭头的连线
1
2
3
graph LR
A -- text --> B
C -->| text |D
graph LR
    A -- text --> B
    C -->| text |D
虚线
1
2
3
4
5
graph LR;
A-.-B;
C-.->D;
E-. text .-> F
H-.->|text|G
graph LR;
   A-.-B;
   C-.->D;
   E-.text.-> F
   H-.->|text|G
厚线
1
2
3
4
5
graph LR;
A===B;
C==>D;
E==text==> F
H==>|text|G
graph LR;
   A===B;
   C==>D;
   E==text==> F
   H==>|text|G
串联
1
2
3
graph LR
A -- text --> B -- text2 --> C
a --> b & c--> d
graph LR
   A -- text --> B -- text2 --> C
   a --> b & c--> d
1
2
graph TB
A & B--> C & D
graph TB
    A & B--> C & D
1
2
3
4
5
graph TB
A --> C
A --> D
B --> C
B --> D
graph TB
    A --> C
    A --> D
    B --> C
    B --> D

特殊字符

1
2
graph LR
id1["This is the (text) in the box"]
graph LR
    id1["This is the (text) in the box"]

子图

定义

1
2
3
subgraph title
graph definition
end

示例

1
2
3
4
5
6
7
8
9
10
11
graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

也可以这样

1
2
3
4
5
graph TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
graph TB
    c1-->a2
    subgraph ide1 [one]
    a1-->a2
    end

注释

注释以%% 开头

1
2
3
graph LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
graph LR
%% this is a comment A -- text --> B{node}
   A -- text --> B -- text2 --> C

最后给个例子

1
2
3
4
5
graph LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
graph LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

换个写法

1
2
3
4
5
6
7
8
9
10
11
graph TD
A[Hard edge];
B(Round edge);
C{Decision};
D[Result one];
E[Result two];

A-->|Link text|B;
B-->C;
C-->|One|D;
C-->|Two|E;
graph TD
    A[Hard edge];
    B(Round edge);
    C{Decision};
    D[Result one];
    E[Result two];
    A-->|Link text|B;
    B-->C;
    C-->|One|D;
    C-->|Two|E;

参考网站

Hexo博客系列

欢迎关注我的其它发布渠道