Mermaid流程图

​​Markdown文档生成流程图、时序图、类图、状态图、ER图、用户旅程图、甘特图、饼图等​​

​​官网​​

​​Github 项目地址​​

一、介绍

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​​ ]}

【自定义代码】