VLOOK™
让你的 Markdown 有了新看wán
──
脚本化图表参考指南
最新版本V23.0


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

关于 Mermaid

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

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

流程图 顺序图 状态机图 类图 实体关系图 用户旅程地图 甘特图 饼图 Gitgraph 图 思维导图 需求图 时间线 C4 图 ZenUML 图

关于 Markdown


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

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

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

Markdown

60 秒学会、10 分钟深入学习 Markdown 语法
  1. 推荐 Github Flavored Markdown (GFM) 语法参考:Typora 目前采用该标准 详细

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

建模类图表

流程图

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

子图
子图的子图
分支
分支
分支
重要分支
条件1
条件2
条件3
条件4
数据
节点
文件
双圈圆
点击可访问
Github
可选
子流程
存档
A
(同页)
开始
准备
判断?
结束
手工输入
手动操作
B (离页)
A
(同页)

分支流程(接续上图)

B (离页)
节点
结束
查看完整画图脚本示例

流程图的画图脚本示例

更多官方教程 

关于所支持的 FontAwesome 版本

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

扩展应用说明

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

流程图特定标识应用说明

应用建议节点形状说明
开始、结束体育场(药丸)节点别名使用以下 VLOOK™ 的命名规范,会呈现出特定的样式(具体呈现效果见上图):
- 开始:命名为 START ,如:START([开始])
- 结束:命名为 END ,如:END([结束])
同页符号圆形节点别名使用以下 VLOOK™ 的命名规范,会呈现出特定的样式(具体呈现效果见上图):
inpage 为前缀,如:inpageA1((A))
离页符号旗形节点别名使用以下 VLOOK™ 的命名规范,会呈现出特定的样式(具体呈现效果见上图):
outpage 为前缀,如:inpageB1((B))

分角色流程图

用流程图模的泳道图

角色D
角色C
角色B
角色A
结束
节点4
节点31
节点3
可点击打开
Github
节点1
开始
查看完整画图脚本示例

分角色流程图的画图脚本示例

更多官方教程

顺序图

顺序图(也称:时序图)

--外部系统角色**重要系统角色普通系统--外部系统角色**重要系统角色普通系统par[平行消息]显示在外部系统左侧备注说明显示在外部系统右侧备注说明跨对象备注说明alt[抉择1][抉择2]opt[可选]loop[循环]人物角色前端触点平行发送消息11平行发送消息22平行发送消息33发送消息4内部动作5发送消息A6同步返回消息A17异步返回消息A28发送消息X9人物角色前端触点
查看完整画图脚本示例

顺序图的画图脚本示例

更多官方教程

说明
  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. 支持备注说明。

状态机图

流程图扩展的状态机图

流程图扩展的状态机图(兼容性较高)

状态集
初始
汇聚
<角色:行为>
Act / 变更处理说明
<角色:行为>
Act / 变更处理说明
<角色:行为>
Act / 变更处理说明
Act / 变更处理说明
状态 C
状态 B
多行样式
横向状态机图
状态 A
状态 D

竖向样式

状态集
初始
汇聚
<角色:行为>
Act / 变更处理说明
<角色:行为>
Act / 变更处理说明
<角色:行为>
Act / 变更处理说明
Act / 变更处理说明
状态 C
状态 B
竖向状态机图
状态 A
状态 D
查看完整画图脚本示例

流程图扩展的状态机图的画图脚本示例

更多官方教程

扩展应用说明

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

状态图特定标识应用说明

应用建议节点形状说明
初始、终止圆形节点别名使用以下 VLOOK™ 的命名规范,会呈现出特定的样式(具体呈现效果见上图):
- 初始:命名为 INIT ,如:INIT([ ])
- 结束:命名为 FINAL ,如:FINAL([ ])
汇聚、转换圆形节点别名使用以下 VLOOK™ 的命名规范,会呈现出特定的样式(具体呈现效果见上图):
join 为前缀,如:join1(( ))
:菱形join 为前缀,如:join1{ }
:矩形joinjoinv 为前缀,一般用于状态机图中,
如:join1[ ](默认横向),joinv1[ ] (竖向)
同页符号:节点别名使用以下 VLOOK™ 的命名规范,会呈现出特定的样式(具体呈现效果见上图):
inpage 为前缀,如:inpageA1((A))
离页符号旗形节点别名使用以下 VLOOK™ 的命名规范,会呈现出特定的样式(具体呈现效果见上图):
outpage 为前缀,如:inpageB1((B))

标准状态机图

新版标准状态机图 (1)

<角色:行为>
Act / 变更处理说明
状态转换说明
状态转换说明
状态转换说明
状态A
状态B
状态C
查看完整画图脚本示例

状态机图(1)的画图脚本示例

更多官方教程

 

新版标准状态机图 (2)

状态组1
<角色:行为>
Act / 变更处理说明
在此填写状态的描述内容
状态组2
状态转换说明
状态21
状态组3
状态31
按一下 CapLock 键
按一下 CapLock 键
大写【关闭】
大写【打开】
【状态组1】右边的备注信息,
内容支持换行。
【状态组2】左边的备注信息
状态4
查看完整画图脚本示例

状态机图(2)的画图脚本示例

类图

类图示例 1

Inheritance
继承
Composition
组合
Aggregation
聚合
Association
关联
*
1
Link (Solid)
*
Dependency
依赖
n
Realization
实现
Link (Dashed)
«interface»
classA
+public attribute
-private attribute
#protected attribute
~package attribute
+public method()
-private method()
#protected method()
~package method()
classB
«enumeration»
classC
Red
Blue
Green
WHITE
BLACK
classD
classE
classF
classG
classH
classI
classJ
classK
classL
classM
classN
classO
classP
查看完整画图脚本示例

类图示例 1 的画图脚本示例

更多官方教程

 

类图示例 2

Inheritance
Inheritance
Composition
*
*
Composition
*
Dependency
*
Composition
*
Dependency
*
Composition
*
Inheritance
Inheritance
Inheritance
Inheritance
Inheritance
Inheritance
Inheritance
Inheritance
Inheritance
Inheritance
Inheritance
Inheritance
人_Person
姓名
性别
年龄
学生_Student
所属学校
所属班级
学号
+交作业()
老师_Techer
所属学校
老师证号
+授课()
班级_Class
所属学校
所属年级
班名
学校_School
学校名称
所属省份
所属城市
学校类型
公司
抽象部门
市场类部门
策划部
销售部
生产类部门
研发部
实施部
IT部
支持类部门
质量部
财务部
行政人事部
查看完整画图脚本示例

类图示例 2 的画图脚本示例

实体关系图

实体关系图(ER图)

CUSTOMERDELIVERY-ADDRESSORDERINVOICEORDER-ITEMPRODUCT-CATEGORYPRODUCTCARstringregistrationNumberstringmakestringmodelNAMED-DRIVERPERSONstringfirstNamestringlastNameintagehasplacesliable forreceivescoversincludescontainsordered inallowsisEntity Relationship Diagrams example中
查看完整画图脚本示例

实体关系图(ER图)的画图脚本示例

更多官方教程

四象限图

四象限图示例

We should expandNeed to promoteRe-evaluateMay be improvedCampaign FCampaign ECampaign DCampaign CCampaign BCampaign ALow ReachHigh ReachLow EngagementHigh EngagementReach and engagement of campaigns
查看完整画图脚本示例

四象限画图脚本示例

更多官方教程

需求图

需求图示例

<<Requirement>>test_reqId: 1Text: the test text.Risk: HighVerification: Test<<Functional Requirement>>test_req2Id: 1.1Text: the second test text.Risk: LowVerification: Inspection<<Performance Requirement>>test_req3Id: 1.2Text: the third test text.Risk: MediumVerification: Demonstration<<Interface Requirement>>test_req4Id: 1.2.1Text: the fourth test text.Risk: MediumVerification: Analysis<<Physical Requirement>>test_req5Id: 1.2.2Text: the fifth test text.Risk: MediumVerification: Analysis<<Design Constraint>>test_req6Id: 1.2.3Text: the sixth test text.Risk: MediumVerification: Analysis<<Element>>test_entityType: simulationDoc Ref: None<<Element>>test_entity2Type: word docDoc Ref: reqs/test_entity<<Element>>test_entity3Type: test suiteDoc Ref: github.com/all_the_tests<<satisfies>><<traces>><<contains>><<contains>><<derives>><<refines>><<verifies>><<copies>>
查看完整画图脚本示例

需求图的画图脚本示例

更多官方教程

C4 图

C4 Context

C4 图示例_Context
<<person>>Banking Customer AA customer of the bank, with personal bank accounts.<<person>>Banking Customer B<<external_person>>Banking Customer Cdesc<<person>>Banking Customer DA customer of the bank, with personal bank accounts.<<system>>Internet Banking SystemAllows customers to view information about their bank accounts, and make payments.<<external_system_db>>Mainframe Banking SystemStores all of the core banking information about customers, accounts, transactions, etc.<<external_system>>E-mail systemThe internal Microsoft Exchange e-mail system.<<system_db>>Banking System D DatabaseA system of the bank, with personal bank accounts.<<system>>Banking System A<<system>>Banking System BA system of the bank, with personal bank accounts. next line.BankBoundary2[ENTERPRISE]<<system_queue>>Banking System F QueueA system of the bank.<<external_system_queue>>Banking System G QueueA system of the bank, with personal bank accounts.BankBoundary3[boundary]BankBoundary[ENTERPRISE]BankBoundary0[ENTERPRISE]UsesUsesSends e-mails[SMTP]Sends e-mails toSystem Context diagram for Internet Banking System

 

C4 Container

C4 图示例_Container
<<external_system>>E-Mail SystemThe internal Microsoft Exchange system<<person>>CustomerA customer of the bank, with personal bank accounts<<external_system>>Mainframe Banking SystemStores all of the core banking information about customers, accounts, transactions, etc.<<container>>Single-Page App[JavaScript, Angular]Provides all the Internet banking functionality to cutomers via their web browser<<external_container>>Mobile App[C#, Xamarin]Provides a limited subset of the Internet banking functionality to customers via their mobile device<<container>>Web Application[Java, Spring MVC]Delivers the static content and the Internet banking SPA<<container_db>>Database[SQL Database]Stores user registration information, hashed auth credentials, access logs, etc.<<external_container_db>>API Application[Java, Docker Container]Provides Internet banking functionality via APIInternet Banking[CONTAINER]Uses[HTTPS]Uses[HTTPS]UsesDeliversUses[async, JSON/HTTPS]Uses[async, JSON/HTTPS]Reads from and writes to[sync, JDBC]Sends e-mails toSends e-mails using[sync, SMTP]Uses[sync/async, XML/HTTPS]Container diagram for Internet Banking System

 

C4 Component

C4 图示例_Component
<<container>>Single Page Application[javascript and angular]Provides all the internet banking functionality to customers via their web browser.<<container>>Mobile App[Xamarin]Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.<<container_db>>Database[Relational Database Schema]Stores user registration information, hashed authentication credentials, access logs, etc.<<external_system>>Mainframe Banking SystemStores all of the core banking information about customers, accounts, transactions, etc.<<component>>Sign In Controller[MVC Rest Controller]Allows users to sign in to the internet banking system<<component>>Accounts Summary Controller[MVC Rest Controller]Provides customers with a summary of their bank accounts<<component>>Security Component[Spring Bean]Provides functionality related to singing in, changing passwords, etc.<<component>>Mainframe Banking System Facade[Spring Bean]A facade onto the mainframe banking system.API Application[CONTAINER]UsesUsesRead & write to[JDBC]Uses[XML/HTTPS]Uses[JSON/HTTPS]Uses[JSON/HTTPS]Uses[JSON/HTTPS]Uses[JSON/HTTPS]Component diagram for Internet Banking System - API Application

C4 Dynamic

C4 图示例_Dynamic
<<container_db>>Database[Relational Database Schema]Stores user registration information, hashed authentication credentials, access logs, etc.<<container>>Single-Page Application[JavaScript and Angular]Provides all of the Internet banking functionality to customers via their web browser.<<component>>Security Component[Spring Bean]Provides functionality Related to signing in, changing passwords, etc.<<component>>Sign In Controller[Spring MVC Rest Controller]Allows users to sign in to the Internet Banking System.API Application[CONTAINER]1: Submits credentials to[JSON/HTTPS]2: Calls isAuthenticated() on3: select * from users where username = ?[JDBC]Dynamic diagram for Internet Banking System - API Application

C4 Deployment

C4 图示例_Deployment
<<container>>Mobile App[Xamarin]Provides a limited subset of the Internet Banking functionality to customers via their mobile device.Customer's mobile device[Apple IOS or Android]<<container>>Single Page Application[JavaScript and Angular]Provides all of the Internet Banking functionality to customers via their web browser.Web Browser[Google Chrome, Mozilla Firefox, Apple Safari or Microsoft Edge]Customer's computer[Microsoft Windows or Apple macOS]<<container>>API Application[Java and Spring MVC]Provides Internet Banking functionality via a JSON/HTTPS API.Apache Tomcat[Apache Tomcat 8.x]bigbank-api*** x8[Ubuntu 16.04 LTS]<<container>>Web Application[Java and Spring MVC]Delivers the static content and the Internet Banking single page application.Apache Tomcat[Apache Tomcat 8.x]bigbank-web*** x4[Ubuntu 16.04 LTS]<<container_db>>Database[Relational Database Schema]Stores user registration information, hashed authentication credentials, access logs, etc.Oracle - Primary[Oracle 12c]bigbank-db01[Ubuntu 16.04 LTS]<<container_db>>Database[Relational Database Schema]Stores user registration information, hashed authentication credentials, access logs, etc.Oracle - Secondary[Oracle 12c]bigbank-db02[Ubuntu 16.04 LTS]Big Bank plc[Big Bank plc data center]Makes API calls to[json/HTTPS]Makes API calls to[json/HTTPS]Delivers to the customer's web browserReads from and writes to[JDBC]Reads from and writes to[JDBC]Replicates data toDeployment Diagram for Internet Banking System - Live

更多官方教程

ZenUML 图

ZenUML 图示例 1

process.env.VUE_APP_GIT_BRANCH:process.env.VUE_APP_GIT_HASH
Annotators
60
180
300
420
540
Hi Bob
Hi Alice
60
180
300
420
540

ZenUML 图示例 2

process.env.VUE_APP_GIT_BRANCH:process.env.VUE_APP_GIT_HASH
Reply message
60
180
300
420
540
660
method()
method()
x1

return early

x11
x2
60
Icon-compute-21
180
Icon_24px_IAM_Color
300
Icon-Architecture/16/Arch_Amazon-CloudFront_16 Created with Sketch.
420
Icon-Architecture/16/Arch_Amazon-Cognito_16 Created with Sketch.
540
Icon-Architecture/16/Arch_Amazon-Elastic-Container-Service_16 Created with Sketch.
660
Icon-Architecture/16/Arch_Amazon-Elastic-File-System_16 Created with Sketch.

更多官方教程

应用类图表

思维导图

思维导图示例

MindmapOrigins📓 Long historyPopularisationBritish popular psychologyauthor Tony BuzanOrigins 2Popularisation 2Research🍺 On effectivenessand featuresOn AutomaticcreationUsesCreative techniquesStrategic planningArgument mappingResearch 2ToolsPen and paperMermaidTools 2Pen and paper 2Tools 3
查看完整画图脚本示例

思维导图的画图脚本示例

更多官方教程

关于对 FontAwesome 的支持

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

Gitgraph 图

Gitgraph 图示例 1

maindevelopnice_featureAlpha0.0.11-9a25d9dBetaReverse5-a8fae3bHightlgithGammaRC_1Example Gitgraph diagram
查看完整画图脚本示例

Gitgraph 图(1)的画图脚本示例

更多官方教程

Gitgraph 图示例 2

mainMetroLine2MetroLine3NewYorkDallasLosAngelesChicagoHoustonPhoenixDenverAtlantaMiamiWashingtonMY JUNCTIONBostonDetroitSanFranciscoMap of MetroLine
查看完整画图脚本示例

Gitgraph 图(2)的画图脚本示例

更多官方教程

桑基图

桑基图示例

Agricultural 'waste'Bio-conversionLiquidLossesSolidGasBiofuel importsBiomass importsCoal importsCoalCoal reservesDistrict heatingIndustryHeating and cooling - commercialHeating and cooling - homesElectricity gridOver generation / exportsH2 conversionRoad transportAgricultureRail transportLighting & appliances - commercialLighting & appliances - homesGas importsNgasGas reservesThermal generationGeothermalH2HydroInternational shippingDomestic aviationInternational aviationNational navigationMarine algaeNuclearOil importsOilOil reservesOther wastePumped heatSolar PVSolar ThermalSolarTidalUK land based bioenergyWaveWind
查看完整画图脚本示例

Gitgraph 图(2)的画图脚本示例

更多官方教程

时间线

时间线示例 1

2002LinkedIn2004FacebookGoogle2005Youtube2006Twitter2023GPT-3.5GPT-4History of Social Media Platform
查看完整画图脚本示例

时间线(1)图的画图脚本示例

更多官方教程

时间线示例 2

17th-20th centuryIndustry 1.0Machinery, Waterpower, SteampowerIndustry 2.0Electricity, Internalcombustion engine,Mass productionIndustry 3.0Electronics,Computers,Automation21st centuryIndustry 4.0Internet, Robotics,Internet of ThingsIndustry 5.0Artificial intelligence,Big data,3D printingTimeline of Industrial Revolution
查看完整画图脚本示例

时间线(2)图的画图脚本示例

更多官方教程

XY 图

Sales Revenuejanfebmaraprmayjunjulaugsepoctnovdec110001050010000950090008500800075007000650060005500500045004000Revenue (in $)

 

饼图

Q3 2019 中国线上智能手机市场主要品牌市场份额数据来自:互联网

26%20%16%14%10%9%5%Q3 2019 中国线上智能手机市场主要品牌市场份额华为荣耀其他小米VIVOAppleOPPO
查看完整画图脚本示例

饼图的画图脚本示例

更多官方教程

甘特图

甘特图示例

2024-04-012024-04-022024-04-032024-04-042024-04-052024-04-062024-04-072024-04-082024-04-092024-04-102024-04-112024-04-12已完成的普通任务 执行中的普通任务 已完成的关键路径任务2 未来的任务 里程碑 执行中的关键路径任务 已完成的关键路径任务 未来的任务2 未来的关键路径任务 区块A区块B区块C这里显示甘特图标题
查看完整画图脚本示例

甘特图的画图脚本示例

更多官方教程

用户旅程地图

用户旅程地图(也称:用户体验地图)

CatMe
Go to work
Go to work
Me
Make tea
Make tea
Me
Go upstairs
Go upstairs
MeCat
Do work
Do work
Go home
Go home
Me
Go downstairs
Go downstairs
Me
Sit down
Sit down
我一天的工作
查看完整画图脚本示例

用户旅程地图的画图脚本示例

更多官方教程

The End