使用 Markdown 画图

# 60.使用 Markdown 画图

大部分 Markdown 编辑器的画图功能都是基于 mermaid 的，因此我们先介绍下它。

‍‍

# 什么是 mermaid

‍

mermaid 是一个开源的项目，旨在通过纯文本的形式来画图，支持流程图，时序图，甘特图，类图，状态图和饼图等。

开源在 GitHub：github.com/mermaid-js/mermaid (opens new window) ‍ 提前声明：画图其实并不是 Markdown 的标准语法，因此有些编辑器是不支持的。即使支持了，导出为 PDF 或 HTML 时也可能会失效（据我所知 Typora 可以正常导出）。

建议导出后检查下，如果不行就改为截图，然后插入图片。

当然，使用 mermaid 也有优点：

非常轻便，大部分 Markdown 编辑器自带有画图相关的插件，所以无需去找其他复杂的画图应用
如果有错误、修改，可以很方便地通过修改纯文本来完成；而图片一般不支持修改，得重新画图
拖拽画图时需要考虑图形尺寸和对齐问题，而用纯文本画图不需要考虑这些，一切均自动调整 ‍

# 使用方法

如果你的 Markdown 编辑器支持 mermaid，可以直接插入一个多行代码块，然后选择语言为 mermaid：

‍‍‍‍```mermaid
流程图内容
‍‍‍‍```

1
2
3

‍ 然后就可以愉快地画图了~ ‍

# Typora 与 mermaid

Typora 是支持画图的，其官方文档也写的很详细：support.typora.io/Draw-Diagrams-With-Markdown (opens new window)

或者打开本地文档：

该文档里写道，Typora 集成了 js-sequence-diagrams (opens new window)，可以很方便地画各种序列图。示例：

‍```sequence
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
‍```

1
2
3
4
5
6

效果：

‍

此外，Typora 也集成了 mermaid，并且给出了各种图表的例子，这里就不赘述了。

# 在线编辑器

如果你的 Markdown 编辑器暂时不支持 mermaid，可以去官网提供的在线编辑器，去到官网后点击右上角的 Live Editor：

就可以愉快地在线画图了（然后截图到自己的 Markdown 编辑器上保存）：

# 官网文档

接下来几篇博客我会简单说说流程图、时序图、甘特图的概念和画法。

如果你想深入学习，可以去官网文档 (opens new window)里看看，写的很详细：

‍

# 让你的博客支持 mermaid

我用的博客框架是 VuePress，使用了插件 vuepress-plugin-mermaidjs (opens new window) 后能正常渲染出结果（请看后两篇文章）。

PS：由于甘特图渲染后字体很小，因此我直接放截图了，没有用该插件

—— 完 ——

上次更新: 2025/6/3 09:31:54

← Markdown 与数学公式使用 Markdown 画流程图→