Mermaid
非常喜欢!画图太方便了!和飞书适配性极高!!!
最后更新于
https://mermaid.nodejs.cn/intro/syntax-reference.html?#diagram-breaking
https://github.com/mermaid-js/mermaid
节点定义
基本语法:节点的格式通常是[节点名称]
或者(节点名称)
,方括号和圆括号在显示上略有不同,方括号一般用于矩形节点,圆括号用于圆形节点。例如A[这是一个矩形节点]
、B(这是一个圆形节点)
。
带样式的节点:可以通过在节点定义中添加样式来改变节点外观。例如,style [节点名称] fill:#f9f,stroke:#333,stroke - width:4px;
,这里fill
表示填充颜色,stroke
表示边框颜色,stroke - width
表示边框宽度。
节点之间的连线
基本连线:使用-->
来表示节点之间的简单连线,方向是从左边节点指向右边节点。例如A[节点A] --> B[节点B]
,表示从节点 A 连接到节点 B。
带文本的连线:如果要在连线上添加文本,可以使用|文本内容|
的格式放在连线中间。例如A[节点A] -->|这是连线文本|B[节点B]
。
不同样式的连线:可以对线的样式进行修改,如-.-
表示虚线,==>
表示粗线等。例如A[节点A] -.-|这是虚线连线文本|B[节点B]
。
流程图方向
从上到下(默认):使用graph TD
来定义一个从上到下(Top - Down)的流程图,其中T
表示顶部(Top),D
表示底部(Down)。例如:
从左到右:使用graph LR
来定义一个从左到右(Left - Right)的流程图,其中L
表示左边(Left),R
表示右边(Right)。例如:
其他方向:还可以定义从下到上(graph BT
)或者从右到左(graph RL
)的流程图,不过这两种方向相对较少使用。
\
子图(Subgraph)
定义子图:使用subgraph
关键字来定义一个子图,后面跟着子图的标题。例如:
嵌套子图:子图可以进行嵌套,以构建更复杂的层次结构。例如:
注释
在 Mermaid 流程图中,可以使用%%
来添加注释。注释内容不会在流程图中显示,只是用于帮助理解代码。例如: