Mermaid简介

Mermaid是一个基于JavaScript的图表绘制工具，通过渲染Mermaid语法格式的文本来动态创建和修改图表。

mermaid – Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs. (mermaid-js.github.io)^[1]

Mermaid的语法用于创建图表，语法、部署、配置共同构成了整个Mermaid。

Mermaid支持绘制流程图、序列图、类图、状态图、甘特图、饼图等图表，每种图表类型的语法在Mermaid网站中都有详细介绍（下方阅读原文跳转，国内访问较慢）。

使用Mermaid

有四种方式使用Mermaid：

使用Mermaid在线编辑器
在你熟悉的程序里使用Mermaid插件
调用Mermaid Javascript API
将Mermaid作为依赖部署

一般用户使用前两种方式即可，各种方法的详细介绍参见Mermaid网站中的说明：

Deployment (mermaid-js.github.io)^[2]

Mermaid在线编辑器

Online FlowChart & Diagrams Editor – Mermaid Live Editor (mermaid-js.github.io)^[3]

通常在线编辑器足够满足Mermaid的大多数一般用途，并且非常适合开始进行学习。

初学者可以从在线编辑器开始上手，了解Mermaid的语法及生成图表的效果。

在线编辑器左上方为Mermaid语法格式的文本，右侧为渲染效果，左下角可以设置导出图片。

例如，流程图效果如下：

序列图效果如下：

饼图效果如下：

Mermaid插件

一些编辑器中可以安装Mermaid插件来绘制Mermaid图表，例如，Markdown-轻量级标记语言中提到的Markdown编辑器Obsidian就默认支持绘制Mermaid图表，Visual Studio Code也可以安装Markdown Preview Mermaid Support等插件来渲染Mermaid图表（未安装插件时看到的是原始Mermaid文本，而不是渲染后的图表）。

在Markdown文件中插入Mermaid图表需要使用Markdown围栏代码块（在代码块之前和之后的行上使用三个反引号”“`”，并在代码块之前的反引号旁边指定Mermaid语言），如：