推薦使用mermaid疲吸，支持流程圖座每、時序圖、甘特圖的繪制
UML流程圖
語法參考：https://github.com/adrai/flowchart.js
```flow
st=>start: Start|past:>http://www.google.com[blank]
e=>end: End:>http://www.google.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.baidu.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|request
st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e
```
流程圖效果
UML序列圖
語法參考：https://bramp.github.io/js-sequence-diagrams/
```sequence
Title:連接建立的過程
客戶主機->服務(wù)器主機: 連接請求（SYN=1,seq=client_isn）
服務(wù)器主機->客戶主機: 授予連接（SYN=1,seq=client_isn）\n ack=client_isn+1
客戶主機->服務(wù)器主機: 確認（SYN=0,seq=client_isn+1）\nack=server_isn+1
```
時序圖效果
mermaid
語法參考：http://knsv.github.io/mermaid
```mermaid
graph TD
client1-->|read / write|SVN((SVN server))
client2-->|read only|SVN
client3-->|read / write|SVN
client4-->|read only|SVN
client5(...)-->SVN
SVN---|store the data|sharedrive
```
mermaid效果
