_VLOOK™
让你的 Markdown 有了新看^wán法
──
脚本化图表参考指南
最新版本V2026.32026-03-27

MAX°孟兆
Copyright © 2016-2026 MAX°DESIGN. All rights reserved.

关于脚本化

关于 Mermaid

Mermaid 是一个用于画流程图、状态机图、顺序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中。

前往 Mermaid 官网了解更多内容 ❯

关于 Markdown

Markdown 是什么？

• 2004 年，John Gruber 创造了 Markdown，一种专门针对网络写作的 文本标记语言 。使用 Markdown，你只需在写作过程中插入少量的标记符号，就能很轻松地进行排版（例如设置标题、加粗、列表、引用块等）；

• Markdown 文档以 纯文本格式存储 ，这意味着，它们可以用几乎任一种文本编辑器打开。同时，又能通过 Markdown 编辑器导出为带排版的富文本文档、HTML 网页等等。纯粹、简洁、易用、灵活，都是人们喜欢 Markdown 的原因；

• 目前 Markdown 的标准化项目是 CommonMark 。

60 秒学会、10 分钟深入学习 Markdown 语法

1. 推荐 Github Flavored Markdown (GFM) 语法参考：Typora 目前采用该标准 详细；

2. 标准化 CommonMark 语法参考：60 秒学会 Markdown 语法、10 分钟深入学习 Markdown 。

建模类图表

流程图

流程图以上的「分支流程」内容由下图进行接续）

分支流程（接续上图）

查看完整画图脚本示例

​x
1
```mermaid
2
flowchart TB
3
%% 图的方向说明
4
%% LR：从左到图，RL：从右到左，TB：从上到下，BT：从下到上
5

6
%% 连续连接
7
START(["`**开始**`"])
8
START --> pre1{{"❤ 准备"}} --> node2[节点]
9
pre1 --> node1(可选)
10

11
subgraph 子图
12
subgraph 子图的子图
13
 %% 一对多
14
 node1 --> join1{ }
15
  join1 --> |分支|groud1[["`**子流程**`"]] & database[(存档)] & inpage1(("`A<br>_(同页)_`"))
16
  %% click clickable "#Mermaid 的状态机图"
17
end   
18
node2 --> data1[/数据/]
19
node2 --> data2[\文件\]
20
node2 --> data3(((双圈圆<br>点击可访问<br>GitHub)))
21
click data3 "https://www.github.com" _blank
22
end
23

24
%% this is a comment
25

26
groud1 ==> |重要分支|cond1{"判断？"}
27
cond1 --> |条件1|END
28
cond1 --> |条件2|B[/手工输入\]
29
cond1 --> |条件3|B2[\手动操作/]
30
cond1 -.-> |条件4|outpage2>"`B _(离页)_`"]
31

32
inpage2(("`A<br>_(同页)_`")) --> END
33
END(["`**结束**`"])
34
```

更多官方教程 

关于所支持的 FontAwesome 版本

更多 FontAwesome 图标库及标识代码参考 - 详情

流程图扩展应用说明

VLOOK™ 针对流程图中特定的节点类型进行扩展，实现重绘为不同的样式，具体如下：

流程图特定标识应用说明

分角色流程图

用流程图模的泳道图

查看完整画图脚本示例

xxxxxxxxxx
32
1
```mermaid
2
flowchart LR
3
%% 图的方向说明
4
%% LR：从左到图，RL：从右到左，TB：从上到下，BT：从下到上
5

6
%% 角色A 相关的流程节点
7
subgraph 角色A
8
START([开始]) --> node1[节点1]
9
end
10

11
%% 角色B 相关的流程节点
12
subgraph 角色B
13
node1 --> join1{ } --> node2("可点击打开<br>Github")
14
click node2 "https://www.github.com" _blank
15
end
16
node2 --> END
17

18
%% 角色C 相关的流程节点
19
subgraph 角色C
20
  direction BT
21
join1 --> node3(节点3) --> node31(节点31)
22
end
23

24
%% 角色D 相关的流程节点
25
subgraph 角色D
26
node31 --> node4(节点4) --> END
27
end
28

29
角色C --> 角色D
30

31
END([结束])
32
```

更多官方教程

顺序图

顺序图（也称：时序图）

查看完整画图脚本示例

xxxxxxxxxx
50
1
```mermaid
2
sequenceDiagram
3
%% 设置显示消息的自动编号
4

5
actor User as 人物角色
6
participant Client as 前端触点
7
participant MP as 普通系统
8
participant Server as **重要系统角色
9
participant Extend as --外部系统角色
10

11
par 平行消息
12
  User ->> Client: 并行发送消息1
13
and
14
 break 例外情况
15
    User -x Client: 中断处理消息
16
 end
17
and
18
 Client -)+ Server: 并行发送消息3
19
 Server --)- Client: 发送消息
20
end
21

22
%% 设置区域高亮
23
rect rgba(128, 128, 128, 0.3)
24
  Extend ->> Extend: 内部动作
25
end
26

27
Note left of Extend: 显示在外部系统<br>左侧备注说明
28
Note right of Extend: 显示在外部系统<br>右侧备注说明
29
Note over Client,Server: 跨对象备注说明
30
loop 循环
31
  Client ->>+ Extend: 发送消息A
32
  alt 默认情况
33
    Server ->> Client: 默认情况消息A1
34
  else 非默认情况
35
    Server -->> Client: 非默认消息A2
36
  end
37

38
  opt 可选
39
    Extend ->>- Server: 发送消息X
40
  end
41

42
  critical 必须执行
43
    Server -)+ Client: 必须执行消息
44
 option 可选情况A
45
    Server ->> Client: 执行可选消息A
46
 option 可选情况B
47
    Server ->> Client: 执行可选消息B
48
 end
49
end
50
```

更多官方教程

说明

1. 针对顺序图的不同图元应用，重绘不同的外观、形状；

2. 针对 loop_Cy alt / else_Vn opt_Pu par_Og critical_Rd break_Bk 标签设置不同的外观、本地语言的标题；

3. 建议使用实体别名，以提高画图脚本的复用度和可维护性；

4. 支持三类消息线条：同步请求消息、异步请求消息、返回消息；

5. 角色在标准的一类样式的基础上，增加三类扩展的样式，在输出HTML后应用 VLOOK™ 插件后渲染为不同的样式：

   • 重要系统/角色：在角色名称前添加两个星号 ** ，如 **后端支撑系统名称

   • 外部系统/角色：在角色名称前添加两个减号 -- ，如 --外部系统名称

6. 支持以下分组在输出 HTML 渲染为不同的样式：

   • loop...end ：用于 循环

   • alt...else...end ：用于条件 分支（if / else）

   • opt...end ：用于 可选 （即只有 if、没有 else 的情况）

   • par...end ：用于 并行

   • critical...option...option...end ：用于作为一个 整体执行，并根据不同情况进行 条件 处理

   • break...end ：用于 中断

7. 支持备注说明。

状态机图

流程图扩展的状态机图

流程图扩展的状态机图（兼容性较高）

竖向样式

查看完整画图脚本示例

xxxxxxxxxx
22
1
```mermaid
2
flowchart LR
3
横向状态机图
4
%% 图的方向说明
5
%% LR：从左到图，RL：从右到左，TB：从上到下，BT：从下到上
6

7
%% 正常情况
8
INIT(( )) --> |初始|A([状态 A])
9
%% joinv 表示汇聚为竖向样式，join 表示汇聚为横向样式
10
A --> |汇聚|joinv1[ ]
11
joinv1 --> |"<角色：行为>"<br>Act / 变更处理说明|B([状态 B\n多行样式])
12
subgraph 状态集
13
  B --> |"<角色：行为>"<br>Act / 变更处理说明|C([状态 C])
14
end
15
C --> FINAL
16

17
%% 异常情况
18
joinv1 -.-> |"<角色：行为>"<br>Act / 变更处理说明|C
19
joinv1 -.-> |Act / 变更处理说明|D([状态 D])
20
D --> FINAL
21
FINAL(( ))
22
```

更多官方教程

状态机图扩展应用说明

VLOOK™ 针对流程图中特定的节点类型进行扩展，实现以流程图为基础的状态机图能渲染为不同的样式，具体如下：

状态图特定标识应用说明

标准状态机图

新版标准状态机图 (1)

查看完整画图脚本示例

xxxxxxxxxx
9
1
```mermaid
2
stateDiagram
3
[*] --> 状态A
4
状态A --> 状态B : <角色：行为><br>Act / 变更处理说明
5
状态B --> 状态C : 状态转换说明
6
状态C --> 状态B : 状态转换说明
7
状态C --> 状态A : 状态转换说明
8
状态C --> [*]
9
```

更多官方教程

新版标准状态机图 (2)

查看完整画图脚本示例

xxxxxxxxxx
42
1
```mermaid
2
stateDiagram
3
state fork_state <<fork>>
4

5
[*] --> 状态组1
6
状态组1 --> fork_state
7
fork_state --> 状态组2
8
fork_state --> 状态组3
9

10
note right of 状态组1
11
【状态组1】右边的备注信息，
12
内容支持换行。
13
end note
14
state 状态组1 {
15
状态11 : 在此填写状态的描述内容
16
[*] --> 状态11 : <角色：行为><br>Act / 变更处理说明
17
状态11 --> [*]
18
}
19

20
note left of 状态组2 : 【状态组2】左边的备注信息
21
state 状态组2 {
22
[*] --> 状态21: 状态转换说明
23
状态21 --> [*]
24
}
25

26
%% 可以编写注释（以两个英文百分号开头)
27
state 状态组3 {
28
[*] --> 状态31
29
状态31 --> [*]
30
--
31
[*] --> 大写【关闭】
32
大写【关闭】 --> 大写【打开】 : 按一下 CapLock 键
33
大写【打开】 --> 大写【关闭】 : 按一下 CapLock 键
34
}
35

36
state join_state <<join>>
37

38
状态组2 --> join_state
39
状态组3 --> join_state
40
join_state --> 状态4
41
状态4 --> [*]
42
```

类图

类图示例 (1)

查看完整画图脚本示例

xxxxxxxxxx
32
1
```mermaid
2
classDiagram
3
classA <|-- classB : Inheritance<br>继承
4
classC *-- classD : Composition<br>组合
5
classE o-- classF : Aggregation<br>聚合
6
classG "*" <-- "1" classH : Association<br>关联
7
classI "*" -- classJ : Link (Solid)
8
classK ..> "n" classL : Dependency<br>依赖
9
classM <|.. classN : Realization<br>实现
10
classO .. classP : Link (Dashed)
11

12
class classA~Class~{
13
 <<interface>>
14
 +public attribute
15
  -private attribute
16
  #protected attribute
17
  ~package attribute
18
  +public method()
19
  -private method()
20
  #protected method()
21
  ~package method()
22
}
23

24
class classC{
25
 <<enumeration>>
26
 Red
27
  Blue
28
  Green
29
  WHITE
30
  BLACK
31
}
32
```

更多官方教程

类图示例 (2)

查看完整画图脚本示例

xxxxxxxxxx
53
1
```mermaid
2
classDiagram
3

4
人_Person <|-- 学生_Student : Inheritance
5
人_Person <|-- 老师_Techer : Inheritance
6
老师_Techer "*" *-- "*" 班级_Class : Composition
7
班级_Class *-- "*" 学生_Student : Composition
8
学校_School <.. "*" 老师_Techer : Dependency
9
学校_School o-- "*" 班级_Class : Composition
10
学校_School <.. "*" 学生_Student : Dependency
11

12
class 人_Person {
13
姓名
14
性别
15
年龄
16
}
17
class 学校_School {
18
学校名称
19
所属省份
20
所属城市
21
学校类型
22
}
23
class 学生_Student {
24
所属学校
25
所属班级
26
学号
27
+交作业()
28
}
29
class 老师_Techer {
30
所属学校
31
老师证号
32
+授课()
33
}
34
class 班级_Class {
35
所属学校
36
所属年级
37
班名
38
}
39

40
公司 o-- "*" 抽象部门 : Composition
41
抽象部门 <|-- 市场类部门 : Inheritance
42
市场类部门 <|-- 策划部 : Inheritance
43
市场类部门 <|-- 销售部 : Inheritance
44
抽象部门 <|-- 生产类部门 : Inheritance
45
生产类部门 <|-- 研发部 : Inheritance
46
生产类部门 <|-- 实施部 : Inheritance
47
生产类部门 <|-- IT部 : Inheritance
48
抽象部门 <|-- 支持类部门 : Inheritance
49
支持类部门 <|-- 质量部 : Inheritance
50
支持类部门 <|-- 财务部 : Inheritance
51
支持类部门 <|-- 行政人事部 : Inheritance
52
支持类部门 <|-- IT部 : Inheritance
53
```

实体关系图

实体关系图（ER图）

查看完整画图脚本示例

xxxxxxxxxx
31
1
```mermaid
2
---
3
title: Entity Relationship Diagrams example
4
---
5
erDiagram
6
  CUSTOMER["客户"]
7
  ORDER["订单"]
8
  DELIVERY-ADDRESS["收货地址"]
9

10
 CUSTOMER }|..|{ DELIVERY-ADDRESS : has
11
 CUSTOMER ||--o{ ORDER : places
12
 CUSTOMER ||--o{ INVOICE : "liable for"
13
 DELIVERY-ADDRESS ||--o{ ORDER : receives
14
 INVOICE ||--|{ ORDER : covers
15
 ORDER ||--|{ ORDER-ITEM : includes
16
 PRODUCT-CATEGORY ||--|{ PRODUCT : contains
17
 PRODUCT ||--o{ ORDER-ITEM : "ordered in"
18

19
 CAR ||--o{ NAMED-DRIVER : allows
20
 CAR {
21
     string registrationNumber
22
     string make
23
     string model
24
 }
25
 PERSON ||--o{ NAMED-DRIVER : is
26
 PERSON {
27
     string firstName
28
     string lastName
29
     int age
30
 }
31
```

更多官方教程

方块图

方块图示例

查看完整画图脚本示例

xxxxxxxxxx
16
1
```mermaid
2
block
3
columns 1
4
db(("DB"))
5
blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
6
block:ID
7
 A
8
 B["A wide one in the middle"]
9
 C
10
end
11
space
12
D
13
ID --> D
14
C --> D
15
style B fill:#969,stroke:#333,stroke-width:4px
16
```

更多官方教程

四象限图

四象限图示例

查看完整画图脚本示例

xxxxxxxxxx
16
1
```mermaid
2
quadrantChart
3
title Reach and engagement of campaigns
4
x-axis Low Reach --> High Reach
5
 y-axis Low Engagement --> High Engagement
6
 quadrant-1 We should expand
7
 quadrant-2 Need to promote
8
 quadrant-3 Re-evaluate
9
 quadrant-4 May be improved
10
 Campaign A: [0.3, 0.6]
11
 Campaign B: [0.45, 0.23]
12
 Campaign C: [0.57, 0.69]
13
 Campaign D: [0.78, 0.34]
14
 Campaign E: [0.40, 0.34]
15
 Campaign F: [0.35, 0.78]
16
```

更多官方教程

数据包图

数据包图示例

查看完整画图脚本示例

xxxxxxxxxx
21
1
---
2
title: "TCP Packet"
3
---
4
packet
5
0-15: "Source Port"
6
16-31: "Destination Port"
7
32-63: "Sequence Number"
8
64-95: "Acknowledgment Number"
9
96-99: "Data Offset"
10
100-105: "Reserved"
11
106: "URG"
12
107: "ACK"
13
108: "PSH"
14
109: "RST"
15
110: "SYN"
16
111: "FIN"
17
112-127: "Window"
18
128-143: "Checksum"
19
144-159: "Urgent Pointer"
20
160-191: "(Options and Padding)"
21
192-255: "Data (variable length)"

更多官方教程

架构图

查看完整画图脚本示例

xxxxxxxxxx
30
1
```mermaid
2
architecture-beta
3
 group api(cloud)[API]
4

5
 service db(database)[Database] in api
6
 service disk1(disk)[Storage] in api
7
 service disk2(disk)[Storage] in api
8
 service server(server)[Server] in api
9

10
 db:L -- R:server
11
 disk1:T -- B:server
12
 disk2:T -- B:db
13

14

15
 service left_disk(disk)[Disk]
16
 service top_disk(disk)[Disk]
17
 service bottom_disk(disk)[Disk]
18
 service top_gateway(internet)[Gateway]
19
 service bottom_gateway(internet)[Gateway]
20
 junction junctionCenter
21
 junction junctionRight
22

23
 left_disk:R -- L:junctionCenter
24
 top_disk:B -- T:junctionCenter
25
 bottom_disk:T -- B:junctionCenter
26
 junctionCenter:R -- L:junctionRight
27
 top_gateway:B -- T:junctionRight
28
 bottom_gateway:T -- B:junctionRight
29

30
```

更多官方教程

ZenUML 图

ZenUML 图示例 1

ZenUML 图示例 2

更多官方教程

应用类图表

思维导图

思维导图示例

查看完整画图脚本示例

xxxxxxxxxx
24
1
```mermaid
2
mindmap
3
root((Mindmap))
4
Origins
5
  📓 Long history
6
   Popularisation
7
     (British popular psychology author Tony Buzan)
8
 Origins 2
9
   Popularisation 2
10
 Research
11
   ))🍺 On effectiveness<br>and features((
12
   )On Automatic<br>creation(
13
     Uses
14
         Creative techniques
15
         {{Strategic planning}}
16
         Argument mapping
17
 Research 2
18
 Tools
19
   [Pen and paper]
20
   [Mermaid]
21
 Tools 2
22
   Pen and paper 2
23
 Tools 3
24
```

更多官方教程

关于对 FontAwesome 的支持

不建议使用 FontAwesome 图标库特性，除非你独立构建相关资源的环境

Gitgraph 图

Gitgraph 图示例 1

查看完整画图脚本示例

xxxxxxxxxx
25
1
```mermaid
2
---
3
title: Example Gitgraph diagram
4
---
5
gitGraph
6
commit id: "Alpha" tag: "0.0.1"
7

8
commit
9
branch develop
10
branch nice_feature
11
checkout nice_feature
12
commit id: "Beta"
13
checkout main
14
merge nice_feature
15
checkout develop
16

17
commit id: "Reverse" type: REVERSE
18
commit
19

20
checkout main
21
merge develop
22
commit id: "Hightlgith" type: HIGHLIGHT
23

24
commit id: "Gamma" tag: "RC_1"
25
```

更多官方教程

Gitgraph 图示例 2

查看完整画图脚本示例

xxxxxxxxxx
26
1
```mermaid
2
---
3
title: Map of MetroLine
4
---
5
%%{init: {'mainBranchName': 'MetroLine1'}} }%%
6
gitGraph
7
commit id:"NewYork"
8
commit id:"Dallas"
9
branch MetroLine2
10
commit id:"LosAngeles"
11
commit id:"Chicago"
12
commit id:"Houston"
13
branch MetroLine3
14
commit id:"Phoenix"
15
commit type: HIGHLIGHT id:"Denver"
16
commit id:"Boston"
17
checkout main
18
commit id:"Atlanta"
19
merge MetroLine3
20
commit id:"Miami"
21
commit id:"Washington"
22
merge MetroLine2 tag:"MY JUNCTION"
23
commit id:"Boston"
24
commit id:"Detroit"
25
commit type:REVERSE id:"SanFrancisco"
26
```

更多官方教程

Gitgraph 图示例 3

桑基图

桑基图示例一

查看完整画图脚本示例一

xxxxxxxxxx
14
1
```mermaid
2
sankey
3

4
Direct, Visit, 500
5
Search, Visit, 800
6
Social, Visit, 400
7
Ads, Visit, 300
8

9
Visit, Register, 900
10
Visit, Bounce, 1100
11

12
Register, Paid, 300
13
Register, Free, 600
14
```

更多官方教程