平常用 markdown 简单写点东西,需要一些流程图,时序图,甘特图, makedown 支持的不错。 而 hexo 博客也能很轻松的开启。

这里记录下,方便查阅使用。

标准流程图

最简单的

```flow
start=>start: 接收到消息
info=>operation: 读取信息
setCache=>operation: 更新缓存
end=>end: 处理结束
start->info->setCache->end
```
start=>start: 接收到消息 info=>operation: 读取信息 setCache=>operation: 更新缓存 end=>end: 处理结束 start->info->setCache->end

简易四步骤流程图

```flow
st=>start: 开始
op=>operation: 操作
cond=>condition: 判断是否?
e=>end: 结束
st->op->cond
cond(yes)->e
cond(no)->op
```
st=>start: 开始 op=>operation: 操作 cond=>condition: 判断是否? e=>end: 结束 st->op->cond cond(yes)->e cond(no)->op

简易五步骤流程图

```flow
start=>start: API请求
cache=>operation: 读取Redis缓存
cached=>condition: 是否有缓存?
sendMq=>operation: 发送MQ,后台服务更新缓存
info=>operation: 读取信息
setCache=>operation: 保存缓存
end=>end: 返回信息
start->cache->cached
cached(yes)->sendMq
cached(no)->info
info->setCache
setCache->end
sendMq->end
```
start=>start: API请求 cache=>operation: 读取Redis缓存 cached=>condition: 是否有缓存? sendMq=>operation: 发送MQ,后台服务更新缓存 info=>operation: 读取信息 setCache=>operation: 保存缓存 end=>end: 返回信息 start->cache->cached cached(yes)->sendMq cached(no)->info info->setCache setCache->end sendMq->end

复杂三支线流程图

```flow
st=>start: Start|past:>http://www.google.com[blank]
e=>end: End:>http://www.google.com
op1=>operation: get_hotel_ids|past
op2=>operation: get_proxy|current
sub1=>subroutine: get_proxy|current
op3=>operation: save_comment|current
op4=>operation: set_sentiment|current
op5=>operation: set_record|current
cond1=>condition: ids_remain空?
cond2=>condition: proxy_list空?
cond3=>condition: ids_got空?
cond4=>condition: 爬取成功??
cond5=>condition: ids_remain空?
io1=>inputoutput: ids-remain
io2=>inputoutput: proxy_list
io3=>inputoutput: ids-got
st->op1(right)->io1->cond1
cond1(yes)->sub1->io2->cond2
cond2(no)->op3
cond2(yes)->sub1
cond1(no)->op3->cond4
cond4(yes)->io3->cond3
cond4(no)->io1
cond3(no)->op4
cond3(yes, right)->cond5
cond5(yes)->op5
cond5(no)->cond3
op5->e
```
st=>start: Start|past:>http://www.google.com[blank] e=>end: End:>http://www.google.com op1=>operation: get_hotel_ids|past op2=>operation: get_proxy|current sub1=>subroutine: get_proxy|current op3=>operation: save_comment|current op4=>operation: set_sentiment|current op5=>operation: set_record|current cond1=>condition: ids_remain空? cond2=>condition: proxy_list空? cond3=>condition: ids_got空? cond4=>condition: 爬取成功?? cond5=>condition: ids_remain空? io1=>inputoutput: ids-remain io2=>inputoutput: proxy_list io3=>inputoutput: ids-got st->op1(right)->io1->cond1 cond1(yes)->sub1->io2->cond2 cond2(no)->op3 cond2(yes)->sub1 cond1(no)->op3->cond4 cond4(yes)->io3->cond3 cond4(no)->io1 cond3(no)->op4 cond3(yes, right)->cond5 cond5(yes)->op5 cond5(no)->cond3 op5->e

时序图

标准时序图

```sequence
Title:时序图示例
客户端->服务端: 我想找你拿下数据 SYN
服务端-->客户端: 我收到你的请求啦 ACK+SYN
客户端->>服务端: 我收到你的确认啦,我们开始通信吧 ACK
Note right of 服务端: 我是一个服务端
Note left of 客户端: 我是一个客户端
Note over 服务端,客户端: TCP 三次握手
participant 观察者
```
Title:时序图示例 客户端->服务端: 我想找你拿下数据 SYN 服务端-->客户端: 我收到你的请求啦 ACK+SYN 客户端->>服务端: 我收到你的确认啦,我们开始通信吧 ACK Note right of 服务端: 我是一个服务端 Note left of 客户端: 我是一个客户端 Note over 服务端,客户端: TCP 三次握手 participant 观察者

UML时序图

```sequence
客户端->打印机: 打印请求(id)
打印机->数据库:请求数据(id)
Note right of 数据库: 执行SQL获取数据
数据库-->打印机:返回数据信息
Note right of 打印机:使用数据打印
打印机-->>客户端:返回打印结果
客户端->客户端:等待提取结果
```
客户端->打印机: 打印请求(id) 打印机->数据库: 请求数据(id) Note right of 数据库: 执行SQL获取数据 数据库-->打印机: 返回数据信息 Note right of 打印机: 使用数据打印 打印机-->>客户端: 返回打印结果 客户端->客户端: 等待提取结果

mermaid 图

流程图

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```
graph TD
  A((开始)) --> B{判断}
  B -->|是| C[处理]
  B -->|否| D[跳过]
  C --> E((结束))
  D --> E

时序图

```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
```
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

甘特图

```mermaid
gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d

section B section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 2d
Future task               :         des3, after des2, 3d
Future task2               :         des4, after des3, 6d

section C section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 1d
Future task               :         des3, after des2, 6d
Future task2               :         des4, after des3, 2d
```
gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d

section B section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 2d
Future task               :         des3, after des2, 3d
Future task2               :         des4, after des3, 6d

section C section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 1d
Future task               :         des3, after des2, 6d
Future task2               :         des4, after des3, 2d

类图

```mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
```
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label

git 流程

```mermaid
gitGraph
   commit
   commit
   branch develop
   checkout develop
   commit
   commit
   checkout main
   merge develop
   commit
   commit
```
gitGraph
   commit
   commit
   branch develop
   checkout develop
   commit
   commit
   checkout main
   merge develop
   commit
   commit

其他图

mermaid js 支持画的图形远不止文中提交,还可以画饼图, 用户旅行图等等,参考 About Mermaid

```mermaid
journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me
```
journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me
```mermaid
pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
```
pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15

参考文档

  1. About Mermaid

  2. MarkDown流程图全指导