流程图的魅力在markdown中使用mermaid格式制作流程图
Posted 水香木鱼
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了流程图的魅力在markdown中使用mermaid格式制作流程图相关的知识，希望对你有一定的参考价值。
🚀作者简介
主页：水香木鱼的博客
专栏：产品思维
能量：🔋容量已消耗1%，自动充电中…
笺言：用博客记录每一次成长，书写五彩人生。
📒技术聊斋
mermaid支持三种图形的绘制, 分别是
①流程图,②时序图和③甘特图
流程图方向有下面几个值
- TB 从上到下
- BT 从下到上
- RL 从右到左
- LR 从左到右
- TD 同TB
（一）从上到下
graph TD
A --> B
效果：
（二）从左到右
graph LR
A --> B
效果：
（三）基本图形
- id + [文字描述]矩形
- id + (文字描述)圆角矩形
- id + >文字描述]不对称的矩形
- id + 文字描述菱形
- id + ((文字描述))圆形
示例
graph TD
id[带文本的矩形]
id4(带文本的圆角矩形)
id3>带文本的不对称的矩形]
id1带文本的菱形
id2((带文本的圆形))
效果：
（四）节点之间的连接
A --> B：A带箭头指向BA --- B：A不带箭头指向BA -.- B：A用虚线指向BA -.-> B：A用带箭头的虚线指向BA ==> B： A用加粗的箭头指向BA -- 描述 --- B：A不带箭头指向B并在中间加上文字描述A -- 描述 --> B：A带箭头指向B并在中间加上文字描述A -. 描述 .-> B：A用带箭头的虚线指向B并在中间加上文字描述A == 描述 ==> B： A用加粗的箭头指向B并在中间加上文字描述
示例
graph LR
A[A] --> B[B]
A1[A] --- B1[B]
A4[A] -.- B4[B]
A5[A] -.-> B5[B]
A7[A] ==> B7[B]
A2[A] -- 描述 --- B2[B]
A3[A] -- 描述 --> B3[B]
A6[A] -. 描述 .-> B6[B]
A8[A] == 描述 ==> B8[B]
效果：
（五）子流程图
格式
subgraph title
graph definition
end
示例
graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
效果：
（六）自定义样式
语法：style id 具体样式
示例
graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px,fill-opacity:0.5
style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 10,5
效果：
（七）demo
绘制一个流程图,找出 A、 B、 C 三个数中最大的一个数。
写法
graph LR
start[开始] --> input[输入A,B,C]
input --> conditionAA是否大于B
conditionA -- YES --> conditionCA是否大于C
conditionA -- NO --> conditionBB是否大于C
conditionC -- YES --> printA[输出A]
conditionC -- NO --> printC[输出C]
conditionB -- YES --> printB[输出B]
conditionB -- NO --> printC[输出C]
printA --> stop[结束]
printC --> stop
printB --> stop
效果：