一、介绍
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
已为社区贡献1条内容
所有评论(0)