代码流程图_Typora笔记之绘制流程图详述（一）

前言

---

之前在文章 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