在Markdown中使用Mermaid画流程图

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

  1. 首先按照官网提示的语法格式写流程图,例如:
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
  1. 将以上内容放入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

如果你对本文有任何疑问或建议,欢迎联系我。本博客所有文章除特别声明外,均为原创文章,未经授权请勿转载!

每一位程序员手中都应该有一把「奥卡姆剃刀」 上一篇
如何用Hexo搭建个人博客 下一篇

 目录