前言
本文将就如何利用Typora在md文档中直接通过代码实现绘图的学习体会进行分享，希望能对感兴趣的朋友有所帮助。
本次分享的内容如下：
前言
1. Typora代码绘图简介
2. 绘制流程图概述
2.1 利用flow代码块绘制流程流程图
2.2 利用mermaid代码块绘制流程图
3. 绘制序列图概述
3.1 利用sequence代码块绘制序列图
3.2 利用mermaid代码块绘制流程图
4. 绘制类图概述
5. 绘制状态图概述
6. 绘制实体关系图概述
7. 绘制甘特图概述
8. 绘制饼图概述
9. 绘制用户旅程图概述
结尾
参考资料
1. Typora代码绘图简介
一、背景
Markdown作为一种轻量级的标记语言，由于其“易读易写、纯文本格式编写、语法简单、容易上手”的特性，已经得到非常广泛的应用，尤其是深受开发人员和学生群体的钟爱，他们会利用Markdown编辑器来撰写技术类md文档(技术博客、技术文档、学习笔记等)。
当在我们撰写技术类md文档时，有时会遇到需要在文档中展示一些特定图(如：流程图、序列图、类图、状态图、甘特图、饼图等)，比较常见的传统实现方式是在文档中插入图片文件。其实现步骤大致如下：
- Step1：找到并安装好一个绘图软件；
- Step2：利用该绘图软件绘制好符合要求的图；
- Step3：导出该图的图片文件(如png格式)，并存放在可访问的指定位置；
- Step4：在md文档中插入该图的图片文件(访问路径)；
- Step5：对md文档中该图片文件的显示位置和显示比例根据需要进行相应调整；
- Step6：保存md文件，至此达成目标。
可以看出，这种传统实现方式存在一些不足：操作步骤比较繁琐；实现效率较低；尤其是当涉及图的数量较多时，会导致整体md文档的文件数量增多、总文件大小增大；如果是撰写技术博客，还会涉及到这些图片文件的网络存储及访问带来的问题。
有没有一种可以克服传统实现方式的一些不足的新的实现方式呢？回答是肯定的，因为Markdown扩展语法是支持在md文档中直接通过代码绘制特定类型图的。
二、Typora代码绘图介绍
Typora就是一款能较好支持代码绘图的Markdown编辑器。它非常好用、功能强大，集成了 Markdown绘图扩展，支持在md文档中直接通过代码来绘制流程图、序列图、类图、状态图、实体关系图、甘特图、饼图、用户旅程图等图。
注：建议采用最新版本的Typora，支持绘图更为完善。
Typora代码绘图的操作步骤是：
- Step1：在md文档指定位置插入一段绘图代码块，该代码块经渲染后即可展示相应图；
- Step2：保存该md文件即可。
很明显，代码绘图方式操作更为简单、实现效率更高、不需要额外的绘图软件、md文档文件大小较小、不涉及图片文件的保存和访问问题。虽然目前支持的代码绘图的类型还不多，但相信随着技术的发展，会越来越趋于完善，得到更广泛的应用。
三、Typora代码绘图的实现方式
Typora代码绘图的通用语法如下：
Typora目前支持如下三类代码块来绘制并展示图：
注1：目前最新版本(v0.9.92beta)的Typora已经支持最新版本(v8.5.2)的mermaid，支持的mermaid图类型包括：流程图、序列图、类图、状态图、实体关系图、甘特图、饼图、用户旅程图等。
四、Typora软件绘图设置
要使 Typora 支持代码绘图，需要对 Typora 软件进行相应设置：从 Typora 的【文件】-【偏好设置...】-【Markdown】-【 Markdown扩展语法】下启用 图表 (序列图、流程图和Marmaid图) 复选项(如下图示)，并重启 Typora 生效。
注：当 Typora 将 Markdown 文档导出为 HTML、PDF、epub、docx 文件格式时，相关渲染图也将包括在内；但是当 Typora 将 Markdown 导出为当前版本的其他文件格式时，相关渲染图将不包括在内。
2. 绘制流程图概述
2.1 利用flow代码块绘制流程图概述
一、整体语法及说明
利用 flow代码块 绘制流程图(Flowchart Diagrams)的整体语法如下：
说明：上述 flow代码块 会自动被 flowchart.js 解析和渲染。
二、样例
样例代码如下：
经 flowchart.js 解析和渲染后的流程图效果如下：
2.2 利用mermaid代码块绘制流程图概述
一、整体语法及说明
利用 mermaid代码块 绘制流程图(Flowchart Diagrams)的整体语法如下：
说明：上述 mermaid代码块 会自动被 mermaid 解析和渲染。
二、样例
样例代码如下：
经 mermaid 解析和渲染后的流程图效果如下：
3. 绘制序列图概述
3.1 利用sequence代码块绘制序列图概述
一、整体语法及说明
利用 sequence代码块 绘制序列图(Sequence Diagrams)的整体语法如下：
说明：上述 sequence代码块 会自动被 js-sequence 解析和渲染。
二、样例
样例代码如下：
经 js-sequence 解析和渲染后的序列图效果如下：
3.2 利用mermaid代码块绘制序列图概述
一、整体语法及说明
利用 mermaid代码块 绘制序列图(Sequence Diagrams)的整体语法如下：
说明：上述 mermaid代码块 会自动被 mermaid 解析和渲染。
二、样例
样例代码如下：
经 mermaid 解析和渲染后的序列图效果如下：
4. 绘制类图概述
一、整体语法及说明
利用 mermaid代码块 绘制类图(Class Diagrams)的整体语法如下：
说明：上述 mermaid代码块 会自动被 mermaid 解析和渲染。
二、样例
样例代码如下：
经 mermaid 解析和渲染后的类图效果如下：
5. 绘制状态图概述
一、整体语法及说明
利用 mermaid代码块 绘制状态图( State Diagrams)的整体语法如下：
说明：上述 mermaid代码块 会自动被 mermaid 解析和渲染。
二、样例
样例代码如下：
经 mermaid 解析和渲染后的状态图效果如下：
6. 绘制实体关系图概述
一、整体语法及说明
利用 mermaid代码块 绘制实体关系图(Entity Relationship Diagrams)的整体语法如下：
说明：上述 mermaid代码块 会自动被 mermaid 解析和渲染。
二、样例
样例代码如下：
经 mermaid 解析和渲染后的实体关系图效果如下：
7. 绘制甘特图概述
一、整体语法及说明
利用 mermaid代码块 绘制甘特图(Gantt Diagrams)的整体语法如下：
说明：上述 mermaid代码块 会自动被 mermaid 解析和渲染。
二、样例
样例代码如下：
经 mermaid 解析和渲染后的甘特图效果如下：
8. 绘制饼图概述
一、整体语法及说明
利用 mermaid代码块 绘制饼图(Pie Chart Diagrams)的整体语法如下：
说明：上述 mermaid代码块 会自动被 mermaid 解析和渲染。
二、样例
样例代码如下：
经 mermaid 解析和渲染后的饼图效果如下：
9. 绘制用户旅程图概述
一、整体语法及说明
利用 mermaid代码块 绘制用户旅程图(User Journey Diagrams)的整体语法如下：
说明：上述 mermaid代码块 会自动被 mermaid 解析和渲染。
二、样例
样例代码如下：
经 mermaid 解析和渲染后的用户旅程图效果如下：
结尾
通过上面内容的介绍，相信感兴趣的朋友们已经对利用Typora在md文档中直接通过代码绘图有了一个整体的概念和印象，后续我将会针对绘制不同类型的图逐一进行详细介绍，敬请大家关注后续文章！
本文为原创，是我在头条上发布的第一篇文章，如果文章对您有所帮助，喜欢的话就点个赞加关注支持一下哈：) 如果有问题也可以评论私聊我，我会尽力给予回复。
参考资料
撰写本文参考了如下资料：
2011
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
