许多工作者的日常工作中，除了写字记录，有时还会需要画一些简单的「示意图」，这些示意图会让我们的文档或报告变得形象生动，便于理解，例如下面这些图：
如果我们恰好同时对Markdown的「标记式」记录方法高度认可的话，那么有没有想过使用类似Markdown形式的语言，快速「写」一个「流图」出来？
说到Markdown，可能已经是很多朋友熟悉的一种记录语言了。在互联网时代，Markdown被广泛普及运用。很多人用Markdown写博客，写日志，写备忘，网上也有一堆支持Markdown的写作工具，例如：熊掌记（bear），iaWriter，Ulysses，DayOne，甚至印象笔记也在近几年开始支持Markdown语法。对于不少追求效率的朋友来说，Markdown是近来文字记录领域中难以忽视的方案。
那么在「绘制流图」的领域当中，也有类似Markdown的方案呢？
细细想来，流图或关系图，主要强调的是拓扑关系，流向，节点内容，而不是一些花哨的排版。这点和Markdown秉承的「重内容，重结构，轻排版」的思路有不谋而合之处。所以，火箭君这次想介绍的就是，「流图界」的Markdown语言，也被称之为Mermaid语言。
本文的目的，就在于给大家一个入门的介绍，帮助大家认识到Mermaid的威力以及上手融入工作的方法。
通过Mermaid，我们不用专门的流图工具（例如：微软的Visio），我们需要编辑的只是文本，因此不少现成的Markdown编辑器都可以用上，如果不看渲染结果，仅作编辑的话，普通文本编辑器都能胜任。
一个简单的例子，短短几行就能生成一个流图：
graphTD;
A-->B;
A-->C;
B-->D;
C-->D;
Mermaid和Markdown一样，都是纯文本格式存储的语言。纯文本文件打破了很多软件封闭格式的限制，更加利于用户掌握自己的内容。也易于我们存储，解析，发送文件内容，而不是受制于特定应用的软件或网站平台。
Mermaid的核心是一个基于JS的解析库，这意味着我们可以把Mermaid文本，直接嵌入网页中，而访问者就能直接看到渲染后的流图了。
顺便说一下，Mermaid的JS解析库，被评为2019年JSOpenSourceAwards「Themostexcitinguseoftechnology」分类下的大奖。
以后，只要页面略作调整，就能在公司官网，在线创作平台，在线文档，在线笔记之类的网页里嵌入流图了。而以往我们需要这样做：
而现在，利用Mermaid只要一步（编辑Mermaid代码）就可以了。
我们已经知道，Mermaid本质是一种标记语言，借由一个解析库将文本「翻译渲染」成「图画」。
虽然通过一个纯文本编辑器，例如：写字板，我们可以撰写Mermaid文本，但显然不能指望这样就可以「渲染」出「绘图」来。这和Markdown的原理是一样的，渲染需要专门的编辑器。好消息是，Mermaid已经被很多Markdown编辑器直接或间接支持。也就是说直接用现有的Markdown编辑器就可以上手一试了，几乎没有额外负担。
这里是部分支持Mermaid的编辑器
需要注意的是，由于Mermaid本身还在发展，并非所有特性都能被所有Markdown编辑器支持。不过，常见的流图编辑模式已经比较成熟，大多被支持。至于具体渲染效果如何，我们还是要以编辑器的实际输出为准。
目前这个Mermaid主要可支持的「绘图」有：
还是要再次提请注意，不是所有的Markdown编辑器都支持所有的绘图类型。即使编辑器支持渲染，渲染出的效果也各不相同。这点就像早期不同的浏览器会选择性支持部分的HTML网页标准一样。目前来看，主流的Markdown编辑器，至少会支持「流图」和「序列图」，至于其它类型就要看运气了。
上文提到的「Mermaid官方网页版编辑器」是一个不错的参考，从这个在线编辑器里，我们可以看到目前Mermaid全部支持的类型，以及目前处于「实验室」阶段的类型。
首先，我们要打开一个支持Mermaid的Markdown编辑器。，这里以火箭君目前最爱的Typora编辑器为例。
我们知道Markdown语法能支持代码块，所谓代码块就是一种特殊段落，其中的文字，会按照特殊的语法进行处理显示。
一般来说，例如网页标记语言，编程语言之类代码块，都会按照语法高亮显示。
Mermaid也采用了代码块进行展现和渲染。
因此，我们首先需要在编辑器里单独一行内输入```Mermaid，表示以下是Mermaid语言专属的代码块。
然后，在```这行下面按照语法，就可以撰写绘图的脚本了。
我们用「序列图」来描述一个银行存钱的过程，里面有三个角色：
通过序列图，我们可以把存钱的过程如下描述出来：
sequenceDiagram
客户->>银行柜台:我要存钱
银行柜台->>后台:改一下这个账户数字哦
后台->>银行柜台:账户的数字改完了，明天起息
银行柜台->>客户:好了，给你回单，下一位
我们注意到，只要通过->>和冒号这种简单的文本标记，就能把各种关系和方向清晰的表达出来了。
Mermaid的渲染结果如下：
同理，我们再看看，如何画一个简单的「流图」。
首先还是从输入```Mermaid开始
然后输入：
graphTD
A(起床)-->B[洗漱]
B-->C{扔硬币}
C-->|正面朝上|D[喝牛奶]
C-->|反面朝上|E[喝果汁]
我们注意到，只要也是通过纯文本的箭头符号和括号就能把一段逻辑描述清楚了。
如果有兴趣的话，我们还可以在上面的例子里自行修改，这样就能轻易扩充出更加复杂的逻辑关系。
Mermaid支持更复杂的玩法，远不止上面列出的这些，但都非常容易被理解，一般不外乎就是各种符号的组合，这点就充分继承了Markdown类语言的精髓。火箭君更喜欢称之为「文字游戏」，通过文字的组合可以表达正文内容以外，更复杂的含义，或者说某种「元信息」（metainfo）。
Mermaid详细语法参考可以参见Github上MermaidJS项目的文档：
除了描述逻辑关系的语法，Memraid还提供了简单的「换皮主题」的语法，
通过这套「换皮」语法，我们可以给每个类型的元素更换主题色，例如箭头颜色，例如流程块的背景色……特别适合，对绘图的颜值有要求，而且有折腾精神的用户使用。参考语法如下：
看到这里，如果想立刻上手试试看的话，可以用MermaidJS官方网页版编辑器立刻行动（相当于一个代码playground）
在线编辑器，本身就是一个很好的教程，里面已经分门别类列好了各种图的类型，供我们选择。而且每种图下面都有Sample代码，新手上去改改就能看到结果。
火箭君相信，需要绘制流图之类的小伙伴们，一般都会有很强的生产力需求，而不太会是仅仅出于「自嗨」，例如：我们需要用一个「序列图」来描述一段运营工作流程时，往往希望这个图能够被讨论，被迭代，最终被分发到运营人员手上，而不是画出来仅供自我欣赏。
额外值得一提的是，Mermaid有一个在线渲染的服务，我们可以把一段Mermaid代码转换为URL网址。这样，我们就可以将URL嵌入各种文档，阅读文档时，在线网址将URL翻译成图像展现出来。和普通图片上传的区别是，这个URL只是提供Mermaid代码，并没有真的上传图像到服务器上，因此也不依赖服务器是否实际存储或删除了我们的图像。这也意味着URL可以被其它Mermaid渲染服务网站接手从而产生图像。
更简单的做法是，用户双方都使用同种类型的MD编辑器，例如Typora，印象笔记，那么大家交流的效率就会更高。几十采用不同的编辑器，也只是渲染效果不同，语义逻辑应该还是一致的。
总之，Mermaid作为一个新兴的标记语言，像极了当年的Markdown。假以时日，希望Mermaid会变得更加成熟，在有专业需求的领域里，变得更加普及，成为一种「约定俗成」的高效率标准。