在Markdown中使用Mermaid画流程图

在Markdown中绘制流程图其实很简单，可以使用现成的工具Mermaid。

• Mermaid官网
• 参考链接

1. 首先按照官网提示的语法格式写流程图，例如：

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

2. 将以上内容放入markdown的代码块内：用```mermaid开头，渲染后的效果如下

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

以下是官网给出的一些示例，除了流程图之外还可以画序列图、ER图、类图、饼图，可见其功能还是非常强大的。

序列图 Sequence diagram

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!

ER 实体关系图

erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

类图

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

Pie图

pie title 时间管理
         "玩手机的时间" : 90
         "看书的时间" : 10

pie title 手机App使用时间
         "微信" : 90
         "王者荣耀" : 100
         "其他" : 10