前言

之前已经发布了两篇Typora代码绘图的文章，如下：

1、Typora笔记之绘图综述

2、Typora笔记之绘制流程图详述（一）

本文接着对Typora通过mermaid插件实现代码绘制流程图进行详细介绍，希望能对感兴趣的朋友有所帮助。

本次分享的内容目录如下：

前言

1. Typora绘制流程图简介

2. mermaid简介

3. Typora利用mermaid插件绘制流程图典型样例

4. mermaid插件DSL语法及说明

结束语

参考资料

1. Typora绘制流程图简介1.1 Typora代码绘图原理

Typora代码绘图的实现原理：

（1）用某种 DSL 描述想要画的图；

（2）调用扩展程序（解析、渲染器）对DSL进行解析并渲染后动态生成相应图。

注：DSL （Domain Specific Language，特定领域语言）是为了解决某些特定场景下的任务而专门设计的语言。

1.2 Typora代码绘制流程图实现方式

Typora代码绘制流程图可以采用flowchart.js插件或mermaid插件两种方式实现。这两种方式的对比如下表所示：

Typora通过flowchart.js插件实现代码绘制流程图已经在上一篇文章中详细介绍了，本文只详细介绍Typora通过mermaid插件实现代码绘制流程图。

2. mermaid介绍

mermaid是一款免费开源的，能在浏览器和终端中运行的特定类型图DSL和SVG渲染器，可以通过DSL（图的文本表示）来绘制简单的SVG图。当前版本的mermaid已经支持多种特定类型图，包括：流程图（Flow Chart）、序列图（Sequence Diagram）、类图（Class Diagram)）、状态图（State Diagram）、实体关系图（Entity Relationship Diagram）、用户旅程图（User Journey Diagram）、甘特图（Gantt Diagram）、饼图（Pie Chart）、Git图（Git Graph）等。

使用mermaid通过代码绘制图非常简单，原理是将mermaid代码（Plain Text）通过渲染器（Mermaid JavaScript Library）来转化成图（Graphs, Gantt Charts, and many other Diagrams）并显示。

注：Mermaid被提名并获得了2019年度“最令人兴奋的技术应用”类别的JS开源奖。

目前使用mermaid实现代码绘图有以下三种方法：

（一）使用mermaid Live Editor：（网址：）

如下图示，在左上侧的Code区编辑修改mermaid代码，右侧的Preview区就会实时显示出经渲染后的图；在右下侧，还能将渲染后的图直接下载成png格式的图片等。

（二）用HTML调用mermaid渲染器

大多数网络浏览器（例如Firefox，Chrome和Safari）都可以渲染mermaid，所以可以直接在html文件中添加mermaid代码，这样在打开html文件时浏览器就会直接完成mermaid的渲染工作，显示出相应图。

示例代码（MermaidHtmlTest.html）：

浏览器打开html文件看到的效果：

（三）使用mermaid插件

由于mermaid的日益普及，已经存在许多包含mermaid渲染器的插件，比如编辑器插件就支持：Visual Studio Code、Sublime Text 3、Vim、Atom、Typora等。

本文就是此类应用场景，依托Typora上的mermaid插件实现代码绘制多种特定类型图。下面就进一步来进行详细介绍。

3. Typora利用mermaid插件绘制流程图典型样例

为了给大家更好的阅读体验，本文尝试先展示一个典型样例，然后再进行语法介绍。

该典型样例是我精心给大家准备的，里面融合了mermaid插件流程图各语法细节，包括：如何定义流程图（含布局方向）、如何定义节点（含节点标识、节点文本、节点类型）、如何定义节点连线（含连线序号、连线样式、连线标注、连线曲线样式）、如何定义子图（含嵌套子图）、如何自定义和应用节点样式和类、如何绑定节点点击事件、如何定义注释等。相信只要能把这个典型样例看懂了，那么你就算真正掌握了在Typora上利用mermaid插件绘制流程图，进而可以根据自己的需要来绘制所需要的流程图啦！

先来看下mermaid插件流程图典型样例效果（如下），是不是感觉还不错。

上面流程图的实现代码如下：

注：上述代码中最后第37-46行均为美化流程图所需，如不考虑美化则这些代码可以删除。

4. mermaid插件流程图DSL语法及说明

我们可以对照第3章的典型样例效果图对代码进行两遍浏览，首先对代码有个大致印象。接下来，我就对mermaid插件流程图DSL语法展开详细介绍。

4.1 整体语法概述

mermaid插件流程图DSL相对于flowchart.js插件DSL要复杂。其整体语法描述如下：

mermaid插件流程图DSL语法包括如下部分：

（1）mermaid关键字代码块部分

（2）定义流程图及布局方向部分

（3）定义流程图节点（含节点标识、节点文本、节点形状）

（4）定义流程图节点连线（含连线标注）

（5）定义流程图子图

（6）定义样式和类

（7）定义绑定节点点击事件

（8）定义注释

下面逐一详细介绍。

4.2 定义流程图（含布局方向）

Mermaid插件流程图DSL通过如下语法声明一个新图和图布局的方向。

一、定义流程图（含布局方向）语法定义

二、定义流程图（含布局方向）语法说明

每个Mermaid插件流程图DSL中只能包含一组定义流程图（含布局方向）。

语法定义中的关键字graph表示新建一个流程图，变量<direction>表示该流程图的布局方向。

语法定义中要求定义布局方向，不能省略。变量<direction>位置在关键字graph之后，中间可以留一个或多个空格，或者换行均可。

变量<direction>取值如下表（最常见的是“从上往下”和“从左往右”）：

三、定义流程图（含布局方向）示例

4.3 定义节点

节点即流程图中每个文本块，包括开始、结束、处理、判断等。每个Mermaid插件流程图DSL中可以包含多个节点。

Mermaid插件流程图DSL中每个节点都有一个节点标识（nodeID）、节点文本（nodeText）以及节点形状。

一、定义节点（含节点标识、节点文本、节点形状）语法定义

二、定义节点语法概要说明

Mermaid插件流程图DSL中定义节点语法中：

（1）变量nodeID是节点标识，该标识在节点之间连接时会用到，是必选项。为方便后续对节点的使用和代码阅读，建议节点标识起有意义的名字，名字可以为中英文，但注意不能含全角符号。

（2）变量nodeText是节点文本，即显示在节点框内的文本内容。

（3）节点是通过不同的符号组合包裹节点文本来表示不同节点形状的。

三、定义节点文本详细说明

（1）如果节点文本中包含标点符号或破坏语法的特殊字符，则需要用双引号（""）包裹起来。

（2）如果节点文本中包含HTML的转移字符，则使用该转义字符对应的十进制数。

（3）如果希望在节点文本中使用换行，请使用<br>替换换行。

节点文本示例代码：

经mermaid渲染后的节点文本显示效果如下：

四、节点形状详细说明

mermaid插件流程图DSL支持定义如下类型的节点形状：

（1）语法定义nodeID：为缺省节点，该nodeID既是节点标识，也是节点文本内容

（2）语法定义nodeID[nodeText]：为矩形节点，表示过程

（3）语法定义nodeID(nodeText)：为圆角矩形节点，一般用于开始、结束

（4）语法定义nodeID{nodeText}：为菱形节点，表示决策判断

（5）语法定义nodeID>nodeText]：为非对称形状节点

（6）语法定义nodeID[/nodeText/]：为平行四边形1节点

（7）语法定义nodeID[\nodeText\]：为平行四边形2节点

（8）语法定义nodeID[/nodeText\]：为梯形1节点

（9）语法定义nodeID[/nodeText\]：为梯形2节点

（10）语法定义nodeID((nodeText))：为圆形节点

（11）语法定义nodeID[[nodeText]]：为子例程节点

（12）语法定义nodeID([nodeText])：为体育场状节点

（13）语法定义nodeID{{nodeText}}：为六角形节点

（14）语法定义nodeID[(nodeText)]：为圆柱状节点

五、各节点类型示例

示例代码如下：

经mermaid渲染后的显示效果如下：

4.4 定义节点连线

节点之间是通过连线进行连接的。连线是在流程图中将两个节点连接起来的线。

mermaid插件流程图DSL支持多种不同类型的连线，连线可以添加方向，也可以在添加标注，以增强流程图的可读性。

一、定义节点连线

（一）定义节点连线语法描述。

（二）连线符号共以下6种类型：

（1）无箭头细虚线：-.-

（2）无箭头细实线：---

（3）无箭头粗实线：===

（4）有箭头细虚线：-.->

（5）有箭头细实线：-–>

（6）有箭头粗实线：==>

（三）定义节点连线示例

示例代码如下：

经mermaid渲染后的各类型连线显示效果如下：

二、定义连线标注

（一）添加连线标注有以下两种方式，效果一样。

（二）连线标注类型共以下6种：

（1）带标注的无箭头细虚线：nodeC-.-|标注|nodeD或nodeC–.标注.-nodeD

（2）带标注的无箭头细实线：nodeC---|标注|nodeD或nodeC--标注---nodeD

（3）带标注的无箭头粗实线：nodeC===|标注|nodeD或nodeC==标注===nodeD

（4）带标注的有箭头细虚线：nodeC-.->|标注|nodeD或nodeC–.标注.->nodeD

（5）带标注的有箭头细实线：nodeC-->|标注|nodeD或nodeC–-标注-->nodeD

（6）带标注的有箭头粗实线：nodeC==>|标注|nodeD或nodec==标注==>nodeD

（三）连线标注示例

示例代码如下：

经mermaid渲染后的各类型带标注的连线显示效果如下：

三、定义节点连线链连接

定义节点连线时，可以在同一行中声明多条连线；也可以在同一行中声明多个节点。看起来就像链一样，所以也称为链连接。

链连接示例代码如下：

经mermaid渲染后的显示效果：

4.5 定义子图

子图是流程图中的部分流程的合集整理。

一、子图语法描述

mermaid插件流程图DSL定义子图的语法如下：

二、子图语法说明

（1）subgraph：是定义每个子图的关键字。

（2）<subgraphID>[subgraphName]：定义子图标识（subgrpahID）和子图标题（subgraphName），类似节点标识和节点文本。

（3）<end>：是每个子图结束的标志。

（4）流程图中可以定义一个或多个子图。

（5）子图还可以嵌套定义一个或多个子图。

（6）子图中支持多节点语句。

三、子图示例

子图示例代码：

经mermaid渲染后的子图显示效果：

4.6 定义样式和类

虽然Mermaid在提供了缺省的样式，但我们在实际使用中，为了区别个别节点或者连线，需要对节点和连线的样式做自定义操作。

一、定义节点样式

（一）定义节点样式语法：

Mermaid插件流程图DSL中可以对各节点的样式（如：背景色、文字颜色、边框颜色、边框宽度、边框线型等）进行自定义。定义节点样式的语法为：

（二）定义节点语法说明：

1、style：是定义节点样式关键字

2、<nodeID>：是节点标识，一条style语句只可以指定一个节点标识。

3、<style>：是节点的具体样式变量。具体节点样式项包括：

（1）fill:<#value>：节点框内填充颜色，如：fill:#FFFFFF

（2）color:<#value>：节点文本字体颜色，如：color:#FF0000

（3）font-style:<value>：节点文本字体类型，如：font-style:bold

（4）font-size:<value>：节点文本字号大小，如：font-size:150%

（5）stroke:<#value>： 节点边框颜色，如：stroke:#0000FF

（6）stroke-width:<...>： 节点边框宽度：如：stroke-width:2px

（7）stroke-dasharray:<x>,<y>：节点边框虚线断点，如：stroke-dasharray:6,6

等等

（三）自定义节点样式示例

可以将特定样式（例如较粗的边框或不同的背景颜色）应用于节点。

示例代码如下：

经mermaid渲染后的节点样式示例显示效果如下：

二、定义连线样式

（一）定义连线样式语法规则：

Mermaid插件流程图DSL中定义连线样式的语法规则：

（二）定义连线语法说明：

1、linkStyle：是定义连线样式关键字

2、<No>：是连线序号变量，可以指定一个、多个还是所有连线序号。

（1）每个节点都具有节点标识，故可以通过节点标识来对具体节点进行定位。但连线本身却没有连线标识，故无法类似节点一样可以通过连线标识来对具体连线进行定位。那么如何定位具体连线呢？Mermaid插件流程图DSL中通过给每条连线标序号（该连线序号起类似节点标识的作用），然后通过连线序号来实现对具体连线进行定位。连线序号规则：流程图DSL中第一条连线序号为0，第二条连线序号为1，以此类推，第n条连线序号为n-1。

（2）一条linkStyle语句中可以同时适用于多个连线序号，用逗号（,）加以分隔。

（3）一条linkStyle语句可以适用于所有连线序号，此时No被设置为：default。

3、interpolate <curvestyle>：定义连线的曲线样式，为可选项。interpolate是关键字，<curvestyle>：是连线的曲线样式变量，取值包括：basis、linear、cardinal等。

4、<style>：是连线的具体样式变量，针对一个连线可以同时指定多个样式，各样式项中间以逗号（,）加以分隔。连线的样式项包括：连线颜色（stroke）、粗细（stroke-width）等。

（三）自定义连线样式（颜色、粗细）示例

示例代码如下：

经mermaid渲染后的连线样式示例显示效果如下：

（四）自定义连线样式（颜色、粗细、连线曲线样式）示例

上图是缺省情况下mermaid流程图连线的曲线显示效果，如果觉得缺省情况下的流程图连线的曲线不太满意，则可以通过把curve style缺省值改为basis来改变连线的曲线显示效果。

示例代码如下：

经mermaid渲染后的连线样式示例（更改曲线样式后）显示效果如下：

三、定义样式类

为了方便样式的使用，可以自定义类来使用样式。

（一）自定义样式类语法规则：

Mermaid插件流程图DSL中定义自定义样式类的语法规则：

（二）自定义样式类语法说明：

（1）classdef：是定义样式类的关键字。

（2）<classname>：是定义样式类的名称，后续针对节点使用样式类时需要用到。

（3）<style>：是具体样式，每个样式类可以指定一个或多个样式项，中间以逗号（,）加以分隔。具体同节点样式<style>说明。

（4）<class>：是使用样式类的关键字。

（5）<nodeID>：是节点标识，用来定位即将使用样式类的具体节点。一个样式类可以同时应用于一个或多个节点，中间以逗号（,）加以分隔。

（6）<nodeText>：是节点文本，具体同节点<nodeText>说明。

（7）:::：是定义节点时直接使用自定义样式类的关键字

（三）定义样式类及使用示例

示例代码：

经mermaid渲染后的自定义样式类示例显示效果如下：

4.7 绑定节点点击事件

Typora支持在mermaid插件流程图DSL中给节点绑定点击事件，语法如下：

如果想在一个流程图中，鼠标点击节点nodeA时会打开百度首页；点击节点nodeB时会打开网易首页。

上述流程图的实现代码如下：

4.8 定义注释

mermaid插件流程图DSL语法定义中允许输入注释，不过解析器在解析时将会忽略它们，故在最终显示的流程图中注释内容是看不到的。

一、注释语法定义

二、注释语法说明

语法定义中的关键字%%表示这是一个注释行，紧随其后的内容为注释内容。

（1）注释必须单独一行，并且必须以双百分号（%%）开头。

（2）从注释开始到下一个换行符之间的所有文本（包括任何流程图语法）都将被视为注释。

（3）注释可以放置在mermaid插件流程图DSL中的开头、中间空行、结束位置。

三、注释示例

注释示例代码：

示例渲染后的显示效果（注释并不显示）：

结束语

通过上面内容的详细介绍，相信感兴趣的朋友们已经对Typora通过mermaid插件实现代码绘制流程图有了一个比较深入的了解。实际上代码绘制流程图并不太难，建议大家参考典型样例多练练手，加深下印象，很快就为你所用的。

接下来我将继续针对Typora代码绘制其他特定类型的图进行详细介绍，敬请大家关注后续文章！

文章中难免存在疏忽或理解不到之处，如果朋友们发现问题请评论私聊我，我会尽力给予反馈。欢迎大家一起讨论学习，共同进步！

本文为原创，如果文章对您有所帮助，喜欢的话就点个赞加关注支持一下哈：)

参考资料

撰写本文参考了如下资料：