Typora笔记之绘图综述

---

前言

本文将就如何利用Typora在md文档中直接通过代码实现绘图的学习体会进行分享，希望能对感兴趣的朋友有所帮助。

---

1. Typora代码绘图简介

1.1 背景

Markdown作为一种轻量级的标记语言，由于其“易读易写、纯文本格式编写、语法简单、容易上手”的特性，已经得到非常广泛的应用，尤其是深受开发人员和学生群体的钟爱，他们会利用Markdown编辑器来撰写技术类md文档（技术博客、技术文档、学习笔记等）。

当在我们撰写技术类md文档时，有时会遇到需要在文档中展示一些特定图（如：流程图、序列图、类图、状态图、甘特图、饼图等），比较常见的传统实现方式是在文档中插入图片文件。其实现步骤大致如下：

- Step1：找到并安装好一个绘图软件；

- Step2：利用该绘图软件绘制好符合要求的图；

- Step3：导出该图的图片文件（如png格式），并存放在可访问的指定位置；

- Step4：在md文档中插入该图的图片文件（访问路径）；

- Step5：对md文档中该图片文件的显示位置和显示比例根据需要进行相应调整；

- Step6：保存md文件，至此达成目标。

可以看出，这种传统实现方式存在一些不足：操作步骤比较繁琐；实现效率较低；尤其是当涉及图的数量较多时，会导致整体md文档的文件数量增多、总文件大小增大；如果是撰写技术博客，还会涉及到这些图片文件的网络存储及访问带来的问题。

有没有一种可以克服传统实现方式的一些不足的新的实现方式呢？回答是肯定的，因为Markdown扩展语法是支持在md文档中直接通过代码绘制特定类型图的。

---

1.2 用Typora通过代码绘制展示图

Typora就是一款能较好支持代码绘图的Markdown编辑器。它非常好用、功能强大，集成了 Markdown绘图扩展，支持在md文档中直接通过代码来绘制流程图、序列图、类图、状态图、实体关系图、甘特图、饼图、用户旅程图等图。

注：建议采用最新版本的Typora，支持绘图更为完善。

Typora代码绘图的操作步骤是：

- Step1：在md文档指定位置插入一段绘图代码块，该代码块经渲染后即可展示相应图；

- Step2：保存该md文件即可。

很明显，代码绘图方式操作更为简单、实现效率更高、不需要额外的绘图软件、md文档文件大小较小、不涉及图片文件的保存和访问问题。虽然目前支持的代码绘图的类型还不多，但相信随着技术的发展，会越来越趋于完善，得到更广泛的应用。

---

1.3 Typora代码绘图的实现方式

Typora代码绘图的通用语法如下：

​```{lang}
绘图代码段
​```

Typora目前支持如下三类代码块来绘制并展示图：

注：目前最新版本（v0.9.92beta）的Typora已经支持最新版本（v8.5.2）的mermaid，支持的mermaid图类型包括：流程图、序列图、类图、状态图、实体关系图、甘特图、饼图、用户旅程图等。

---

1.4 Typora绘图设置

要使 Typora 支持代码绘图，需要对 Typora 软件进行相应设置：从 Typora 的【文件】-【偏好设置…】-【Markdown】-【 Markdown扩展语法】下启用图表 （序列图、流程图和Marmaid图） 复选项（如下图示），并重启 Typora 生效。

注：当 Typora 将 Markdown 文档导出为 HTML、PDF、epub、docx 文件格式时，相关渲染图也将包括在内；但是当 Typora 将 Markdown 导出为当前版本的其他文件格式时，相关渲染图将不包括在内。

---

2. 绘制流程图概述

2.1 利用flow代码块绘制流程图

2.1.1 整体语法及说明

利用flow代码块绘制流程图（Flowchart Diagrams）的整体语法如下：

​```mermaid
flowchat
flow代码段
​```

说明：上述flow代码块会自动被 flowchart.js 解析和渲染。

---

2.1.2 样例

样例代码如下：