前言

之前在文章 Typora笔记之绘图综述 中对Typora在md文档中直接通过代码绘图进行了整体描述，本文在此基础上对Typora通过flowchart.js插件实现代码绘制流程图进行详细介绍，希望能对感兴趣的朋友有所帮助。

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

前言

流程图简介

Typora绘制流程图简介

flowchart.js简介

flowchart.js插件DSL语法及说明

样例

结束语

参考资料

1. 流程图简介

流程图对于开发人员和学生群体想必已经是非常熟悉了，不过为了照顾一部分对流程图尚不太了解的读者，这里做个简单介绍。

流程图（Flowchart Diagram），是表示算法、工作流或流程的一种框图表示，它以不同类型的框代表不同种类的步骤，每两个步骤之间则以箭头连接。

流程图的一些标准符号及说明如下表：

2. Typora绘制流程图简介2.1 Typora代码绘图原理

Typora代码绘图的实现原理：

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

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

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

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

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

注：限于篇幅，本文只详细介绍Typora通过flowchart.js插件实现代码绘制流程图，针对Typora通过mermaid插件实现代码绘制流程图将在下一篇文章中进行详细介绍。

3. flowchart.js简介

flowchart.js是一款能在浏览器和终端中运行的流程图DSL和SVG渲染器，可以通过DSL（图的文本表示）来绘制简单的SVG流程图。换个角度表述，flowchart.js是一个用JavaScript编写的、用来绘制流程图的插件（或库）。

注：SVG（Scalable Vector Graphics，可缩放矢量图形）是一种基于XML（可扩展标记语言），用于描述二维矢量图形的图形格式。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容。SVG支持显示矢量显示对象（矩形、圆、椭圆、多边形、直线、任意曲线等）、嵌入式外部图像和文字对象。SVG图形格式支持多种滤镜和特殊效果，可以用来动态生成图形。

4. flowchart.js插件DSL语法及说明4.1 DSL语法描述

flowchart.js插件的DSL语法如下：

4.2 DSL语法整体说明

flowchart.js插件的DSL语法分为四部分：

flow关键字代码块部分定义流程图节点部分连接流程图节点部分强调流程图特定路径部分

注1：节点和连接是分别定义的，因此可以重复使用节点，并可以快速更改连接。

注2：流程图特定路径强调不是必要部分，为可选的。

4.3 定义节点语法说明

一、DSL中定义节点语法规则各项说明

二、节点类型补充说明

4.4 连接节点语法说明

一、DSL中连接节点语法规则各项说明

二、各类型节点说明符补充说明

三、方向说明符补充说明

（1）方向说明符(<direction>)定义了连接将从起始节点离开到下一个节点时的方向，例：

st(right)->op(bottom)->cond

（2）如果节点说明符不止一个，则用,加以分隔，且方向说明符总是位于最后的那个，例：

cond(no, right)

（3）除end节点外，其他类型的节点都有可选的方向说明符(<direction>)。

（4）方向说明符(<direction>)共有4种走向（默认值是bottom向下）：

top（向上）bottom（向下）left（向左）right（向右）4.5 强调特定路径语法说明

如果需要在流程图中强调特定路径，则可以单独进行定义。

语法规则如下：

语法说明如下：

示例应用：

请参见样例章节，在3个样例DSL中的最后部分，分别对需要强调的各节点之间路径（连接线）的颜色、宽度、类型进行了强调定义。

5. 样例

经过对上面flowchart.js插件DSL语法的讲解后，相信大家已经可以开始动手绘制流程图了。

下面给出几个Typora使用flowchart.js插件代码绘制流程图的样例，供大家参考。

5.1 样例1 - 简单示例流程图

样例1代码（符合flowchart.js规范定义的DSL）：

上述DSL经flowchart.js插件解析和渲染后的流程图显示如下：

5.2 样例2 - 简单示例流程图（含所有节点类型）

样例2代码（符合flowchart.js规范定义的DSL）：

上述DSL经flowchart.js插件解析和渲染后的流程图显示如下：

5.3 样例3 - 简单应用流程图

样例3代码（符合flowchart.js规范定义的DSL）：

上述DSL经flowchart.js插件解析和渲染后的流程图显示如下：

结束语

通过上面内容的介绍，相信感兴趣的朋友们已经对Typora通过flowchart.js插件实现代码绘制流程图有了一个比较深入的了解，接下来我将继续针对Typora通过mermaid插件实现代码绘制流程图进行详细介绍，敬请大家关注后续文章！

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

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

参考资料

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