流程图的魅力【在markdown中使用mermaid格式制作流程图】

尔滨丶陈春波

已于 2022-10-20 17:48:21 修改

阅读量1k

点赞数 3

文章标签：流程图 mermaid

于 2022-10-19 16:43:55 首次发布

陈春波

本文链接：https://blog.csdn.net/weixin_48337566/article/details/127410182

版权

🚀作者简介

主页：水香木鱼的博客

专栏：产品思维

能量：🔋容量已消耗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带箭头指向B
A --- B ：A不带箭头指向B
A -.- B ：A用虚线指向B
A -.-> B：A用带箭头的虚线指向B
A ==> B： A用加粗的箭头指向B
A -- 描述 --- 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 --> conditionA{A是否大于B}
    conditionA -- YES --> conditionC{A是否大于C}
    conditionA -- NO --> conditionB{B是否大于C}
    conditionC -- YES --> printA[输出A]
    conditionC -- NO --> printC[输出C]
    conditionB -- YES --> printB[输出B]
    conditionB -- NO --> printC[输出C]
    printA --> stop[结束]
    printC --> stop
    printB --> stop

效果：