blog
blog copied to clipboard
Qingquan-Li
使用Markdown（Typora）绘制图表
Typora Markdown编辑器下载：https://typora.io 本文参考：http://support.typora.io/Draw-Diagrams-With-Markdown
一、Sequence序列图
```sequence Alice->Bob: Hello Bob, how are you? Note right of Bob: Bob thinks Bob-->Alice: I am good thanks! ```
```sequence participant 客户端 participant 服务器 participant 通行证中心 Note over 客户端: 用户输入通行证的账号、密码 客户端->通行证中心: 发送账号、密码 Note over 通行证中心: 验证账号、密码 通行证中心-->>客户端: 返回token 客户端->服务器: 发送token 服务器->通行证中心: 验证token 通行证中心-->>服务器: 验证成功 服务器-->>客户端: 登陆成功 ```
二、Flowchat流程图
```flow st=>start: Start op=>operation: Your Operation cond=>condition: Yes or No? e=>end
st->op->cond cond(yes)->e cond(no)->op ```
三、Mermaid
3.1 Sequence序列图
```mermaid %% Example of sequence diagram sequenceDiagram Alice->>Bob: Hello Bob, how are you? alt is sick Bob->>Alice: Not so good :( else is well Bob->>Alice: Feeling fresh like a daisy end opt Extra response Bob->>Alice: Thanks for asking end ```
3.2 Flowchat流程图
```mermaid graph LR A[Hard edge] -->B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two] ```
3.3 Gantt 甘特图
```mermaid %% Example with slection of syntaxes gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality 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 Critical tasks Completed task in the critical line :crit, done, 2014-01-06,24h Implement parser and jison :crit, done, after des1, 2d Create tests for parser :crit, active, 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :1d
section Documentation Describe gantt syntax :active, a1, after des1, 3d Add gantt diagram to demo page :after a1 , 20h Add another diagram to demo page :doc1, after a1 , 48h
section Last section Describe gantt syntax :after doc1, 3d Add gantt diagram to demo page : 20h Add another diagram to demo page : 48h ```
