注水：mermaid 学习笔记

mermaid 学习笔记

mermaid

mermaid 是一个 JS 库。

Generation of diagram and flowchart from text in a similar manner as markdown

通过设计一些语法规则，实现将符合该语法的语句转化成相应的说明图，例如流程图、通讯图和甘特图。

盗其 git-book 的图，如下

一篇文章中，通过文字的大小，是否加粗，是否为斜体，来表现相应内容在整篇文章中的层次，结构以及重要与否。Markdown 就通过定义好一系列的标示，对应着文字不同的样式，从而使作者将更多精力放在内容上，而不是文字的样式上。例如

# 代表文章标题

## 代表大标题

### 代表中标题

#### 代表小标题

mermaid 和 Markdown 类似，其通过定义了一系列规则，符合这些规则的语句，最后会呈现为相应的说明图。

同时 mermaid 作为一个 JS 库，它有一系列的 API ，例如 init() 等。不过我目前的主要目的是用它在 typora（一个 Markdown 的文本编辑器）中辅助做笔记， typora 内置这个 JS 库，故暂时忽略其 API 的使用。

绘制流程图

声明进行流程图绘制的语法是：

graph TB

其中 graph 代表后面的内容表达的是一个流程图， TB 代表的是流向，流向有四种

1. TB 意味着 Top-bottom
2. BT 意味着 Bottom-top
3. RL 意味着 Right-left
4. LR 意味着 Left-right

绘制一个包含开始，过程和结束的流程图的语法如下

graph TB
    start[开始]-->process[过程]
    process-->end[结束]

from[源节点的样式]-->to[目的节点的样式]

在一次信息流的传递过程中，有以下几个参数可选

1. 源节点的内容
2. 源节点的样式，不同的样式，代表不用的含义，例如用菱形代表条件选择（if-else）
3. 传递的方式
4. 目的节点的内容
5. 目的节点的样式

其中源节点的内容就是框中所要表现的文字，而源节点的样式就是只包裹文字的框的样式，有默认的方形方框、圆角方框、圆、不对称方框以及菱形，用说明图表示如下

对应源码

graph LR
    C[节点的样式]
    C-->F1[默认方框]
    C-->F2(圆角方框)
    C-->F3((圆形节点))
    C-->F4>不对称节点]
    C-->F5{菱形节点}

传递的方式用流程图表示如下：

对应源码如下

graph LR
    subgraph 例子
    B-->B1[箭头]
    C---C1[无箭头]
    D-->|文字|D1[文字]
    E-.->E1[虚线]
    F==>F1[粗线]
    end
    subgraph 传递的方式
    A[分类]
    A-->A1[有无箭头]
    A-->A2[有无文字]
    A-->A3[线的形状]
    end