Markdown 3 - 流程图表 mermaid

---

• Markdown 1 - 图文音视频等
  https://blog.csdn.net/lovechris00/article/details/126065244
• Markdown 2 - Latex 数学
  https://blog.csdn.net/lovechris00/article/details/122120691

---

Mermaid 流程图

---

实例1：

---

```mermaid
graph LR
A[长方形] -- 链接 --> B((圆))
A --> C(圆角长方形)
B --> D{菱形}
C --> D
```

---

实例2：

---

```mermaid
graph TB
A[开始] --> B{判断}
B --> C(过程)
B --> D{菱形}
C --> E((结束))
D --> E
```

---

每个编辑器支持的特性不同，这里简单介绍下，使用时需要具体测试。

---

1、显示方向

• TB/TD（ top bottom / top down）表示从上到下
• BT（bottom top）表示从下到上
• RL（right left）表示从右到左
• LR（left right）表示从左到右

---

2、节点类型

节点本身的展现形式，是通过不同括号来代表各自不同的形状，默认为矩形。

• 默认节点： A
• 矩形节点： B[矩形]
• 圆角矩形节点： C(圆角矩形)
• 圆形节点： D((圆形))
• 非对称节点： E非对称]
• 菱形节点： F{菱形}

---

3、节点连线

线条本身的形式有多种，通过常规的英文格式的格式来标识，具体如下：

• 箭头连接 A1--B1
• 开放连接 A2---B2
• 虚线箭头连接 A3.-B3 或者 A3-.-B3
• 虚线连接A4.-B4 或者 A4-.-B4
• 粗线箭头连接 A5==B5
• 粗线开放连接 A6===B6
• 标签虚线箭头连接 A7-.text.-B7
• 标签开放连接 A8--text---B8

---

Flowchart 流程图

---

```mermaid
flowchat
st=>start: 开始
e=>end: 结束
op=>operation: 我的操作
cond=>condition: 确认？

st->op->cond
cond(yes)->e
cond(no)->op
```

---

UML图

---

```mermaid
sequenceDiagram
张三 ->> 李四: 你好！李四, 最近怎么样?
李四-->>王五: 你最近怎么样，王五？
李四--x 张三: 我很好，谢谢!
李四-x 王五: 我很好，谢谢!
Note right of 王五: 李四想了很长时间, 文字太长了<br/>不适合放在一行.

李四-->>张三: 打量着王五...
张三->>王五: 很好... 王五, 你怎么样?
```

---

classDiagram 类图

---

```mermaid
classDiagram
    Class01 <|-- AveryLongClass : Cool
    <<interface>> Class01
    Class09 --> C2 : Where am i?
    Class09 --* C3
    Class09 --|> Class07
    Class07 : equals()
    Class07 : Object[] elementData
    Class01 : size()
    Class01 : int chimp
    Class01 : int gorilla
    class Class10 {
        >>service>>
        int id
        size()
    }
```

---

甘特图

---

```mermaid
gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid
        section 现有任务
        已完成               :done,    des1, 2014-01-06,2014-01-08
        进行中               :active,  des2, 2014-01-09, 3d
        计划中               :         des3, after des2, 5d
```