平常用 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 观察者
```sequence
客户端->打印机: 打印请求(id)
打印机->数据库:请求数据(id)
Note right of 数据库: 执行SQL获取数据
数据库-->打印机:返回数据信息
Note right of 打印机:使用数据打印
打印机-->>客户端:返回打印结果
客户端->客户端:等待提取结果
```
客户端->打印机: 打印请求(id) 打印机->数据库: 请求数据(id) Note right of 数据库: 执行SQL获取数据 数据库-->打印机: 返回数据信息 Note right of 打印机: 使用数据打印 打印机-->>客户端: 返回打印结果 客户端->客户端: 等待提取结果
```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
```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参考文档
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。