用markdown画流程图

January 16, 20213分钟阅读

程序架构设计或多或少需要流程图,流程图的绘制因人而异。 使用 markdown 能用接近于编程的视角绘制流程图,更能体验逻辑正确. 本文主要基于 mermaid 绘制流程图

安装

mermaid 提供多种安装方式, 一般与 markdown 解析器能都完美集成。 当前博客基于 gatsby 实现,通过插件即可直接接入gatsby-remark-mermaid

画法

详细的教程在官网有说明,这里只介绍一些通用的规则

  • 第一行用去声明图类型 graph TD 则为线框图, 如果后续有参数如 TD 表明是改图标的参数

graph

graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]
Get money
One
Two
Three
Christmas
Go shopping
Let me think
Laptop
iPhone
Car

class

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
Class01int chimpint gorillasize()AveryLongClassClass03Class04Class05Class06Class07Object[] elementDataequals()Class08Class09C2C3CoolWhere am i?Cool label

sequence

sequenceDiagram
    participant A as Alice
    participant J as John
    A->>J: Hello John, how are you?
    J->>A: Great!, How about you
AliceJohnHello John, how are you?Great!, How about youAliceJohn

gantt

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d
2014-01-052014-01-122014-01-192014-01-262014-02-022014-02-092014-02-16A task Task in sec another task Another task SectionAnotherA Gantt Diagram

pie

pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
79%17%3%Pets adopted by volunteersDogsCatsRats

Reference

未经许可, 不可转载