Mermaid 流程图的语法
·
基础语法
1.声明流程图的方向
| 代码 | 方向 | 说明 |
|---|---|---|
flowchart TD | Top-Down | 从上到下 |
flowchart LR | Left-Right | 从左到右 |
flowchart RL | Right-Left | 从右到左 |
flowchart BT | Bottom-Top | 从下到上 |
2.基本节点形状以及命名
A[矩形]
B(圆矩形)
C{菱形}
D((圆形))
E[/左斜/]
F[\右斜\]
3.连接节点（在2定义的基础上）
A-->|可添加描述内容|B
4.子图（Subgraph）
subgraph one [文本描述]
a1-->a2 // 图内的节点连接
end
subgraph two [文本描述]
b1-->b2 // 图内的节点连接
end
图间连接
one-->two
图间节点连接
a1-->b1
进阶语法
1.箭头样式
A --> B | 实线箭头 |
A --- B | 实线无箭头 |
A -.-> B | 虚线箭头 |
A ==> B | 粗线箭头 |
A -- 文本 --- B//注意这个后一个是三个减号 | 无箭头连线 |
A -- 文本 --> B | 带文本箭头 |
A o--o B | 圆圈连接 |
A <--> B | 双向箭头 |
A x--x B | 叉线连接 |
2.节点外观
2.1语法：style 节点ID fill:#节点颜色,stroke:#边框色,stroke-width:边框宽度,color:节点内文字颜色
2.2类提前定义，节点调用
语法：
类的定义：classDef 类名 fill:颜色,stroke:边框色，stroke-width:边框宽度,color:节点内文字颜色
类的引用：class 节点名 类名
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
7
0- 0
已为社区贡献2条内容
所有评论(0)