关于markdown:Mermaid-流程图入门

Markdown 文档在开发中曾经必不可少了，但只有文字描述始终有些干燥，波及到做图表的话又须要切换到其余工具中，绘制好后再黏贴回来，如果要批改，万一源文件失落就更麻烦了。对于这种问题实际上也早有办法，就是在各种古代 Markdown 编辑器都能见到的 Mermaid 渲染计划。

Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创立和动静批改。Mermaid 诞生的次要目标是让文档的更新可能及时跟上开发进度。

Mermaid 反对的图表也很丰盛：流程图、时序图、类图、状态图、实体关系图、用户旅程图、甘特图、饼图、需要图、Git 图。

就以流程图为例，来理解一下如何在 Markdown 中绘图的。

示例

来先看看样子（官网在线编辑器地址：Online FlowChart & Diagrams Editor）：

flowchart TD
    NodeA
    NodeB[NodeB]
    NodeA --> NodeB
    NodeA <--> NodeB
    NodeC(((start))) --Text--> NodeD{if}
    NodeD -->|No| NodeN((loop)) -..- NodeC
    NodeD -->|Yes| NodeY{{OK}}
    NodeY --> NodeF & NodeE --x NodeG & NodeH
    NodeH --> NodeI["中文与 #quot; 引号#quot; 与 空格"]

渲染后是这样：

根底语法

既然是在 Markdown 中绘图，语法必定必不可少，但不必怕，流程图比较简单语法也很易学。

与 Markdown 代码块一样，应用反引号语法填写 mermaid 标识绘图的代码区域开始，用三个反引号闭合。

流程图首行要以 flowchart 开始，表明是流程图。

流程图方向

在 flowchart 之后加上空格能够传入参数，能够定义流程图方向。

示例中的 flowchart TD 就是标识从上到下。

节点

节点：每一行输出任意字符都会被辨认为一个新节点。输出的字符将被作为节点的 ID，同时默认作为节点名称显示。默认形态是矩形。

形态

除了矩形还有多种形态可选，在节点前面减少符号对即可。如示例中的NodeB[NodeB]，即是矩形。

整顿了一份图形表：

名称

形态符号中输出字符作为展现的名称。

默认能够不必引号，但如果须要应用本义符、或者括号，则须要用引号包裹。

如示例中的最初节点NodeI["中文与 #quot; 引号#quot; 与 空格"]，即是应用了引号本义符。

连接线

语法结构大抵是：节点 ID 连接线符号 节点 ID（示例中的NodeA <--> NodeB）。

如果一行开端没有节点 ID，则会找到下一行第一个节点 ID 连贯，也就意味着连接线的语法是能够换行的。

如果节点 ID 是前文没有呈现过的，会当做一个新的节点解决。所以节点的创立与连贯是能够一次性书写的。

线的定义

连接线由三个字符组成，开端符号代表端点图形，第一二个符号代表线的款式。

绘制双向箭头的话，须要在头部减少一个符号，一共是四个字符。

两头符号能够反复，反复会渲染出更长的连接线。

如示例中 NodeA <--> NodeB 就是双箭头符号，两头代表线段形态，头尾代表箭头形态。

线的形态

线条有三种：

箭头形态

箭头形态也有三种：

双向箭头：

多个节点连贯

&符号能够让图形一次性连贯多个节点：

文字正文

能够在连接线上减少连接线的正文。正文有两种写法：

写在开端：||符号，只须要在连接线符号开端减少 —>| 文字 | 即可展现。

写在两头：相似—文字—>、-. 文字 .->，等于是反复连贯符号，前半部分是定义上一个图形到文字的连接线款式，后半局部是定义文字到图形的连接线款式。

通常来说写在开端会比拟不便点。

正文

%%号为正文符，会将符号之后到此行完结都视为正文。

子图（分组）

以上外围的概念曾经讲完，根本画图足够用了。但 mermaid 能反对的还不止这些，像是流程图中套流程图、流程图减少事件、应用 CSS 定义流程图款式等。后两个编辑器不肯定会反对，但子图还会比拟罕用的。

子图实际上就是给图形分组，减少一个背景色块，应用 subgraph ID、end 包裹，两头图语法与此前一样。

subgraph ID之后用方括号包裹能够定义显示名称。其中元素能够任意连贯，用子图 ID 能够定义子图与子图的连接线。

flowchart TB
    c1-->a2
    subgraph one [子图一]
    a1-->a2
    end
    subgraph two [子图二]
    b1-->b2
    end
    subgraph three [子图三]
    c1-->c2
    end
    one --> two

总结

至此流程图的逻辑就讲完了，文字看着多，但实际上并不难，自身也是因为流程图元素比拟少而易学。来最初演绎一下。

节点：任意字符都会渲染成一个节点元素。后续追随的符号对代表图形形态，符号对两头代表图形展现文字。

连线：应用横线定义连线，连线头尾能够用不同符号代表不同形态。

连线文字：应用 || 符号或是在连线两头输出文字。

正文：应用 %% 符号。

子图：应用 subgraph ID、end 包裹，外部语法一样。其中元素能够任意连贯。

参考

mermaid 阐明文档

mermaid 流程图文档