一、介绍
Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中
二、流程图基础
1、流程图符号和含义
Mermaid 的流程图的图形含义使用象形的表达形式，非常类似中国象形，理解起来也不难，比如矩形
[],圆角矩形(),圆形(())
| 图形 | 符号含义 | |
|---|---|---|
| 圆角矩形 | 表示开始和结束 | id(“文字”) |
| 矩形 | 表示过程环节 | id["文字"] |
| 单向箭头线段 | 表示流程进行方向 | |
| 菱形 | 决策判断 | id{"文字"} |
| 圆形 | 表示连接，避免流程图 | id(("文字")) |
| 右向旗帜节点 | 标志提示 | id>"文字"] |
示例：
graph TB
start("圆角矩形")
rectangle["矩形"]
rhombus{"菱形"}
round(("圆形"))
right_arrow>"右向旗帜节点"]
流程图形状.png
2、节点之间的连线
| 表述 | 说明 | 使用示例 |
|---|---|---|
--> |
添加尾部箭头 | A(把你送进去监牢)-->B{打开监牢} |
--- |
不添加尾部箭头 | A(把你送进去监牢)---B{打开监牢} |
-- |
单线 | A(把你送进去监牢)--B{打开监牢} |
--text-- |
单线上加文字 | A(把你送进去监牢)--你好亲爱的--B{打开监牢} |
== |
粗线 | A(把你送进去监牢)==>B{打开监牢} |
==text== |
粗线加文字 | |
-.- |
虚线 | |
-.text.- |
虚线加文字 |
代码示例 1:箭头连线示例
graph TD
A(把你送进去监牢)-->B{打开监牢门}
B-->|"你是初犯,使用小箭头"|C["放进去小监牢"]
C---E("三杠没有箭头指向")
B==>|"你是老犯,使用大箭头"|D["换个大监牢"]
D-- "终身监禁" ---forever("没出头了")
D---|"终身监禁"|forever("没出头了")
箭头连线示例.png
代码示例 2：箭头上加文字
加文字方式：节点连线表述定义+文字+节点连线表述定义
如：-.|“文字”|.->id("")
graph TB
connect["数据库连接"]--"root 127.0.0.1"-->start{"开始连接"}
start-.虚线加文字.->ok["连接成功"]
start-.->faild["虚线不加文字"]
箭头加文字.png
代码示例3：结合fontawesome使用
graph TD
B["fa:fa-weixin weixin"]
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner waitting);
fontawesome结合.png
代码示例4：给流程表做标题
将其添加到流程图TD定义之后的顶部。
这将定义一个框，用下划线（<u>）设置其文本的样式，并使框填充和描边为空白#FFF（样式标题）并将其链接到实际的第一步/框（FirstStep），从而使其显示在顶部，同时使使用linkStyle 0隐藏链接
graph TD
title[<u>My Title</u>]
title-->FirstStep
style title fill:#FFF,stroke:#FFF
linkStyle 0 stroke:#FFF,stroke-width:0;
FirstStep-->...
标题.png
3、布局方向
| TB/TB | Top Bottom 从上到下 |
|---|---|
| BT | bottom top 从下到上 |
| LR | left right 从左到右 |
| RL | right left 从右到左 |
4、子图
格式：
subgraph title graph definition end
代码示例：
graph TB
subgraph 图3
two1---two2
end
subgraph 图2
three1 ==> three2
end
subgraph 图1
one1-->one2
end
one1-->two2
style 图2 fill:#f9f,stroke:#333,stroke-width:4px
子图.png
三、代码格式
基本格式：
graph {布局方向[
TB|BT|LR|RL]} 【自定义代码】
