学习 mermaid 的流程图

mermaid 在要画流程图的时候很有用，这里针对性去学习一下，也能够帮助我使用图的形式进行学习。这里本来是想把所有图都涉及一下的……但这里只学一下流程图就算了，其他的图如果有需求再学，到时候直接按文档来就行了。mermaid 应当像 echarts 那样，随用随查，不然这么多东西很难记住。

什么是 Mermaid

Mermaid 不是美人鱼，也不是 D4DJ 的某个团，mermaid 是一个使用 js 实现的，支持使用纯文本来渲染各种图表的库。这里不学 mermaid 关于配置、部署的部分（博客主题已经帮我们做完这一步了），只学关于 mermaid 所使用的纯文本标记语言的部分。

Mermaid 是基于 js 的，这让它很容易 在线编辑。

各种图

Mermaid 支持多种图表类型——流程图，序列图，甘特图，类图，思维导图，四方图（比如是否重要 x 是否紧急），ER 图，以及 XY 图（典型统计图表）。每种图都有自己特定的语法，并在官方文档里单开一节，所以用什么学什么就是了，这里建立一个总体印象，先只学我可能会用到的那些。

流程图

任何图表都以一个图表声明开始——我要使用什么图表。从左到右的流程图，使用flowchart LR声明，从上到下则是flowchart TD，此外还有 RL，BT（bottom-top）。

流程图归根结底只有两种角色——元素和路径，路径连接元素。

元素，形状

这形状也太多了…………

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
flowchart LR
    %% 这是注释。注意到图表内容会有一层缩进，它是为了可读性，可选的；注释似乎必须单独处在一行，不能接在其他行后
    %% 单独出现的标识符，都会成为新的元素
    hello
    wtfman[上面的 hello 是 id 即唯一标识符] 
    world["id 后的 [] 包裹的就是显示的内容，显示的名称如果要包含 unicode，必须使用双引号包裹"]
    multipleLine["
        多行也支持
        虽然官方说在双引号内部再叠上
        反引号的话可以支持 markdown
        但我的博客模板似乎不支持"]

    %% 上面均使用方括号包裹显示内容，但其实还有其他的括号，会改变形状

    圆角的 ("圆角的")
    圆弧的 ([圆弧的])
    圆的 (（圆的）)
    DB[(Database)]
    双下巴的 [[双下巴的]]
    whatIf{whatIf}
flowchart LR
    hello
    wtfman[上面的 hello 是 id 即唯一标识符] 
    world["id 后的 [] 包裹的就是显示的内容，显示的名称如果要包含 unicode，必须使用双引号包裹"]
    multipleLine["
        多行也支持
        虽然官方说在双引号内部再叠上
        反引号的话可以支持 markdown
        但我的博客模板似乎不支持"]

    圆角的（圆角的）
    圆弧的 ([圆弧的])
    圆的 (（圆的）)
    DB[(Database)]
    双下巴的 [[双下巴的]]
    whatIf{whatIf}

这里不学太多形状……用到现查就是了。https://mermaid.js.org/syntax/flowchart.html

path

1
2
3
4
5
6
7
8
9
10
11
12
13
14
flowchart TD
    使用纯文本箭头-->互相连接 ([互相连接起来])--->这样属于是同时定义元素和路径
    使用纯文本箭头-->根据 ID 而非显示名称去重用元素
    互相连接-->根据 ID 可以重用元素
    根据 ID 可以重用元素 -----> 箭头长度似乎可以调整
    
    箭头样式 --- 普通箭头 ["感觉---和-->是一样的"]
    箭头样式 --> 普通箭头
    
    箭头样式 --注释注释（注意前面两个横线，后面三个）--- 注释箭头 
    箭头样式 ---|另一种注释方式|注释箭头

    箭头样式 -.-|以及注释|虚线 dot 箭头

flowchart TD
    使用纯文本箭头-->互相连接 ([互相连接起来])--->这样属于是同时定义元素和路径
    使用纯文本箭头-->根据 ID 而非显示名称去重用元素
    互相连接-->根据 ID 可以重用元素
    根据 ID 可以重用元素 -----> 箭头长度似乎可以调整
    
    箭头样式 --- 普通箭头 ["感觉---和-->是一样的"]
    箭头样式 --> 普通箭头
    
    箭头样式 --注释注释（注意前面两个横线，后面三个）--- 注释箭头 
    箭头样式 ---|另一种注释方式|注释箭头

    箭头样式 -.-|以及注释|虚线 dot 箭头