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

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

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

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

当然，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

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

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

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

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

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

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

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