_VLOOK™
让你的 Markdown 有了新看^wán法
──
脚本化图表参考指南
最新版本V27.02024-11-02

MAX°孟兆
COPYRIGHT © 2016-2024. MAX°DESIGN.

关于脚本化

关于 Mermaid

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

目前 Typora + VLOOK™ 的最新版本，可支持下脚本化图表的制作和生成：

关于 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
39
1
```mermaid
2
sequenceDiagram
3
%% 设置显示消息的自动编号
4

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

11
par 平行消息
12
    User ->> Client: 平行发送消息1
13
and
14
    User -x Client: 平行发送消息2
15
and
16
Client -)+ Server: 平行发送消息3
17
Server --)- Client: 发送消息
18
end
19

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

25
Note left of Extend: 显示在外部系统<br>左侧备注说明
26
Note right of Extend: 显示在外部系统<br>右侧备注说明
27
Note over Client,Server: 跨对象备注说明
28
loop 循环
29
    Client ->>+ Extend: 发送消息A
30
    alt 抉择1
31
        Server -->> Client: 同步返回消息A1
32
    else 抉择2
33
        Server --X Client: 异步返回消息A2
34
    end
35
    opt 可选
36
        Extend ->>- Server: 发送消息X
37
    end
38
end
39
```

更多官方教程

说明

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

2. 针对 opt / alt / loop / par 标签设置不同的外观、标题位置。

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

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

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

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

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

   • 前端触点/角色：在角色名称前添加 at 符号 @ ，如 @小程序名称

     推荐_Gn 从 Typora 1.7.x 版本后建议使用 Mermaid 建议的 actor 代替 participant

6. 支持对三类标签分组在输出 HTML 后应用 VLOOK™ 插件渲染为不同的样式：

   • loop...end ：循环

   • opt...end ：可选

   • alt..else...end ：条件选择（alt = 情景1，else = 情景2）

   • par...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-beta
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
68
1
```mermaid
2
requirementDiagram
3

4
requirement test_req {
5
id: 1
6
text: the test text.
7
risk: high
8
verifymethod: test
9
}
10

11
functionalRequirement test_req2 {
12
id: 1.1
13
text: the second test text.
14
risk: low
15
verifymethod: inspection
16
}
17

18
performanceRequirement test_req3 {
19
id: 1.2
20
text: the third test text.
21
risk: medium
22
verifymethod: demonstration
23
}
24

25
interfaceRequirement test_req4 {
26
id: 1.2.1
27
text: the fourth test text.
28
risk: medium
29
verifymethod: analysis
30
}
31

32
physicalRequirement test_req5 {
33
id: 1.2.2
34
text: the fifth test text.
35
risk: medium
36
verifymethod: analysis
37
}
38

39
designConstraint test_req6 {
40
id: 1.2.3
41
text: the sixth test text.
42
risk: medium
43
verifymethod: analysis
44
}
45

46
element test_entity {
47
type: simulation
48
}
49

50
element test_entity2 {
51
type: word doc
52
docRef: reqs/test_entity
53
}
54

55
element test_entity3 {
56
type: "test suite"
57
docRef: github.com/all_the_tests
58
}
59

60
test_entity - satisfies -> test_req2
61
test_req - traces -> test_req2
62
test_req - contains -> test_req3
63
test_req3 - contains -> test_req4
64
test_req4 - derives -> test_req5
65
test_req5 - refines -> test_req6
66
test_entity3 - verifies -> test_req5
67
test_req <- copies - test_entity2
68
```

更多官方教程

C4 图

C4 Context

C4 图示例_Context

C4 Container

C4 图示例_Container

C4 Component

C4 图示例_Component

C4 Dynamic

C4 图示例_Dynamic

C4 Deployment

C4 图示例_Deployment

更多官方教程

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

桑基图

桑基图示例