使用Markdown（Typora）绘制图表

[Qingquan-Li]

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 ```

[Zuosy]

怎么画饼图啊?

[Zuosy]

怎么画饼图啊?

pie
    title 动物统计
    "猫" : 15
    "狗" : 21
    "羊" : 20
    "牛" : 40