markdown的流程图、时序图、甘特图画法

推荐使用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
``` 
markdown的流程图、时序图、甘特图画法_第1张图片
流程图效果

UML序列图

语法参考:https://bramp.github.io/js-sequence-diagrams/

```sequence
Title:连接建立的过程
客户主机->服务器主机: 连接请求(SYN=1,seq=client_isn) 
服务器主机->客户主机: 授予连接(SYN=1,seq=client_isn)\n ack=client_isn+1
客户主机->服务器主机: 确认(SYN=0,seq=client_isn+1)\nack=server_isn+1
``` 
markdown的流程图、时序图、甘特图画法_第2张图片
时序图效果

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
``` 
markdown的流程图、时序图、甘特图画法_第3张图片
mermaid效果

你可能感兴趣的:(markdown的流程图、时序图、甘特图画法)