前言
之前在文章 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插件实现代码绘制流程图进行详细介绍，敬请大家关注后续文章！
文章中难免存在疏忽或理解不到之处，如果朋友们发现问题请评论私聊我，我会尽力给予反馈。欢迎大家一起讨论学习，共同进步！
本文为原创，如果文章对您有所帮助，喜欢的话就点个赞加关注支持一下哈：)
参考资料
撰写本文参考了如下资料：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。