Mermaid – 用程序员的方式画流图

Mermaid 什么是？

Mermaid是一种基于Javascript的绘图工具，使用类似于Markdown的语法，可以方便快捷地通过代码创建图表。就像用 Markdown 码字一样，高效制作简易流图。

Github项目地址：https://github.com/mermaid-js/mermaid （star：45k+）

为什么推荐Mermaid？

相信大部分开发同学都非常熟悉Markdown语法，并且习惯于使用Markdown作为写作工具。那么有没有想过使用类似的Markdown 「标记式」的语法来快速“画”出一个漂亮的流程图呢？

当然，Mermaid 就是这样的一个工具。

Mermaid的优势

一、 高效简单 – 易于编辑和生成图画

与MD类似，Mermaid并不需要特定的编辑器（如：Visio、drawio），并且主流的MD编辑器都原生集成了Mermaid（如：Typora、印象笔记等），在这些集成了Mermaid的编辑器中，可以实时查看到渲染结果。

当然，如果不需要查看渲染结果，普通的文本编辑器都能胜任。

示例一 – 流程图：

flowchart TD
	A --> |hello| B
	A --> C
	B --> D
	C --> D

示例二 – 时序图：

sequenceDiagram
    actor user as 用户
    user ->>+ sysA: req
    sysA ->>+ sysB: hello
    sysB ->>- sysA: hi
    sysA ->>- user: rsp

二、支持多种图

1. 流程图
2. 时序图
3. 类图
4. 实体关系图
5. 状态图
6. 甘特图
7. 饼图
8. Git 分支提交图
9. …

可以通过官方在线体验：https://mermaid.live/

三、更易于分享和存档

Mermaid 和 Markdown 一样，都是纯文本格式存储的语言，更加利于自己掌握内容，易于存储、解析、分享，内容不受制于特定应用的软件（Visio）或网站平台（drawio）。

四、Web友好，拥有完整的生态

Mermaid 的核心是一个基于 JS 的解析库，集成Mermaid 后可以把 Mermaid 文本直接嵌入到自己的网站中，访问者就能 直接看到 渲染后的流图。

越来越多Markdown编辑器原生集成Mermaid，Gitlab 10.3版本也集成了Mermaid。

除了核心解析库，Mermaid生态还提供了基于Monaco编辑器的语法插件，支持语法关键字提示、快速补全功能，进一步优化编写体验，降低上手成本。

最后

Mermaid 作为一个 新兴的标记语言，像极了当年 的 Markdown。假以时日，希望 Mermaid 会变得更加成熟，在有专业需求的领域里，变得更加普及，成为一种「约定俗成」的高效率标准。