Markdown流程图构建

markdown流程图构建-mermaid

最近写markdown的时候需要自己绘出一些流程，之前没有接触过此类工具，今天在此写个教程以供后续使用。

Markdown图表支持类型包括：

• 流程图：指定 mermaid（样式流程图） 或 flow （标准流程图）解析语言

• 时序图：指定 sequence（标准时序图） 或 mermaid（样式时序图） 解析语言

• 甘特图：指定 mermaid 解析语言

这些复杂图形的绘制都是使用代码块实现的，指定代码块的解析语言，按照响应的绘制语法即可实现。

Mermaid

实例

在流程图申明的框架内，首先申明图类型，其次是图的内容。可以在参考链接3指定的网站在线练习相关案例。

对于注释，使用%%。

对于end会导致流程图的错误，因此需要使用引用来避免。

对于嵌套的节点，需要使用` 引用。

erDiagram
          CUSTOMER }|..|{ DELIVERY-ADDRESS : has
          CUSTOMER ||--o{ ORDER : places
          CUSTOMER ||--o{ INVOICE : "liable for"
          DELIVERY-ADDRESS ||--o{ ORDER : receives
          INVOICE ||--|{ ORDER : covers
          ORDER ||--|{ ORDER-ITEM : includes
          PRODUCT-CATEGORY ||--|{ PRODUCT : contains
          PRODUCT ||--o{ ORDER-ITEM : "ordered in"         

erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "liable for"
DELIVERY-ADDRESS ||--o{ ORDER : receives
NVOICE ||--|{ ORDER : covers
ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"

支持的图类型

• flowchart
• sequenceDiagram
• classDiagram
• stateDiagram-v2
• erDiagram
• journey
• gantt
• pie
• requirementDiagram
• gitGraph
• C4Context 开发中
• ~~mindmap~~开发中

General

流程图方向

流程图分为横向和纵向两种。

mermaid总共四个方向：

• T：上方
• B/D：下方
• L：左边
• R：右边

使用方法时横向和纵向的两两结合。
e.g. 从左到右为LR、从右到左为RL、从上到下为TB或TD、从下到上为BT

语法使用~~~mermaid ***** ~~~声明

​<pre class="mermaid">graph LR
A-->B
​</pre>

graph LR
A-->B

流程图节点

流程图的节点包括矩形[]、圆角矩形()、不对称矩形>]、菱形{}、圆形(()) 、([])、[[]]、[()]、{{}}、[//]、[\\]、[/\]、((()))。声明节点时，需要在前面使用唯一标识符标识该节点ID。

​<pre class="mermaid">graph TD
a1[矩形]
a2(圆形)
a3>不对称矩形]
a4{菱形}
a5((圆形))
​</pre>

graph TD
a1[矩形]
a2(圆形)
a3>不对称矩形]
a4{菱形}
a5((圆形))

节点之间的连接关系

• 节点之间的连接线分为：实线---、加粗实线===、虚线-.-、不可见线~~~
• 带箭头的连接线：带箭头实线-->、带箭头加粗实线==>、带箭头虚线-.->、--o、--x、x--x、o--o
• 连接线加备注，有两种方式：
  • 实线备注--备注---、加粗实线备注==备注===、虚线备注-.备注.-（连接线长短-.备注...-、==备注======、--备注------，只需改变后部的. = -个数即可）
  • 带箭头实线备注--备注-->、带箭头加粗实线备注==备注==>、带箭头虚线备注-.备注.->
  • 除了中间备注外，也可以在尾端使用||备注，即A---|备注|B
• 当A、B节点并列时，使用&

Length	1	2	3
Normal	---	----	-----
Normal with arrow	-->	--->	---->
Thick	===	====	=====
Thick with arrow	==>	===>	====>
Dotted	-.-	-..-	-...-
Dotted with arrow	-.->	-..->	-...->

每种连接符号的左边是开始节点，右边是结束节点，可以由同一个节点指向不同节点，也可以由不同节点指向同一个节点，实现各种指向方式都是通过节点ID标注。

graph LR
    A10[A10] --- A11[A11]
    A20[A20] === A21[A21]
    A30[A30] -.- A31[A31]
    B10[B10] --> B11[B11]
    B20[B20] ==> B21[B21]
    B30[B30] -.-> B31[B31]
    C10[C10] --yes--> C11[C11]
    C20[C20] ==yes==> C21[C21]
    C30[C30] -.yes.-> C31[C31]

​<pre class="mermaid">graph LR
    A10[A10] --- A11[A11]
    A20[A20] === A21[A21]
    A30[A30] -.- A31[A31]
    B10[B10] --> B11[B11]
    B20[B20] ==> B21[B21]
    B30[B30] -.-> B31[B31]
    C10[C10] --yes--> C11[C11]
    C20[C20] ==yes==> C21[C21]
    C30[C30] -.yes.-> C31[C31]
​</pre>

​<pre class="mermaid">graph LR
A[Start]-->B>End1]
A-->C{End2}
​</pre>

graph LR
A[Start]--> B>End1]
A-->C{End2}

Flowchart

所有的Flowchart由节点、几何形状、边界、箭头组成

子图

subgraph title
    graph definition
end

​<pre class="mermaid">flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
​</pre>

flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

自定义节点

flowchart LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

flowchart LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

flowchart LR
    A:::someclass --> B
    classDef someclass fill:#f96;

flowchart LR
    A:::someclass --> B
    classDef someclass fill:#f96;

flowchart LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

Class diagrams

在软件工程中，统一建模语言(UML)中的类图是一种静态结构图，它通过显示系统的类、它们的属性、操作(或方法)以及对象之间的关系来描述系统的结构。

类图是面向对象建模的主要构建块。它用于应用程序结构的一般概念建模，以及用于将模型转换为编程代码的详细建模。类图也可以用于数据建模。类图中的类既表示主要元素、应用程序中的交互，也表示要编程的类。

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
    class Zebra{
        +bool is_wild
        +run()
    }

Gantt

甘特图是一种柱状图，最早由Karol Adamiecki在1896年开发，由Henry Gantt在1910年代独立开发，用于说明项目时间表和任何一个项目完成所需的时间。甘特图说明了项目的终端元素和总结元素的开始和结束日期之间的天数。

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

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

gantt
    dateFormat  YYYY-MM-DD
    title       Adding GANTT diagram functionality to mermaid
    excludes    weekends
    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)

    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
    Functionality added                 :milestone, 2014-01-25, 0d

    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

gantt
    dateFormat  YYYY-MM-DD
    title       Adding GANTT diagram functionality to mermaid
    excludes    weekends
    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)

    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
    Functionality added                 :milestone, 2014-01-25, 0d

    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

State diagrams

状态图是一种用于计算机科学和相关领域的图，用于描述系统的行为。状态图要求所描述的系统由有限数量的状态组成;有时确实如此，而有时这是一种合理的抽象

stateDiagram-v2
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

stateDiagram-v2
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

stateDiagram-v2
    [*] --> First

    state First {
        [*] --> Second

        state Second {
            [*] --> second
            second --> Third

            state Third {
                [*] --> third
                third --> [*]
            }
        }
    }

stateDiagram-v2
    [*] --> First

    state First {
        [*] --> Second

        state Second {
            [*] --> second
            second --> Third

            state Third {
                [*] --> third
                third --> [*]
            }
        }
    }

stateDiagram-v2
    [*] --> Active

    state Active {
        [*] --> NumLockOff
        NumLockOff --> NumLockOn : EvNumLockPressed
        NumLockOn --> NumLockOff : EvNumLockPressed
        --
        [*] --> CapsLockOff
        CapsLockOff --> CapsLockOn : EvCapsLockPressed
        CapsLockOn --> CapsLockOff : EvCapsLockPressed
        --
        [*] --> ScrollLockOff
        ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
        ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
    }

stateDiagram-v2
    [*] --> Active

    state Active {
        [*] --> NumLockOff
        NumLockOff --> NumLockOn : EvNumLockPressed
        NumLockOn --> NumLockOff : EvNumLockPressed
        --
        [*] --> CapsLockOff
        CapsLockOff --> CapsLockOn : EvCapsLockPressed
        CapsLockOn --> CapsLockOff : EvCapsLockPressed
        --
        [*] --> ScrollLockOff
        ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
        ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
    }

SequenceDiagrams

序列图是一种交互图，它显示了流程如何以何种顺序相互操作

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-->John: See you later!

语法

• Participants：Participants可以隐式定义，如本页的第一个示例所示。Participants或actors是按照图源文本中出现的顺序呈现的。有时，您可能希望以不同于它们在第一条消息中出现的顺序显示Participants。可以通过执行以下操作来指定actor的出现顺序:

  sequenceDiagram
      participant Alice
      participant Bob
      Alice->>Bob: Hi Bob
      Bob->>Alice: Hi Alice

• actors：如果你特别想使用actor符号而不是带有文本的矩形，你可以使用如下所示的actor语句。

  sequenceDiagram
      actor Alice
      actor Bob
      Alice->>Bob: Hi Bob
      Bob->>Alice: Hi Alice

• Aliases：可以使用标识符来指定actor

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

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

• [Actor][Arrow][Actor]:Message text

  Type	Description
  ->	Solid line without arrow
  –>	Dotted line without arrow
  ->>	Solid line with arrowhead
  –>>	Dotted line with arrowhead
  -x	Solid line with a cross at the end
  –x	Dotted line with a cross at the end.
  -)	Solid line with an open arrow at the end (async)
  –)	Dotted line with a open arrow at the end (async)

• Notes

  sequenceDiagram
      participant John
      Note right of John: Text in note

  	sequenceDiagram
        participant John
        Note right of John: Text in note

  sequenceDiagram
      Alice->John: Hello John, how are you?
      Note over Alice,John: A typical interaction

  	sequenceDiagram
        Alice->John: Hello John, how are you?
        Note over Alice,John: A typical interaction

• 更多用法参见官网

PieChart

关键词：

• pie：指定图类型
  showdata：图例后面显示真实数据
• 之后跟着title和其值，给定图标题
• 数据
  • label：以","为指示
  • ：
  • 数值

pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15

pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15

pie showData  %% 旧版本不支持
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5

Journey Diagram

用户旅程非常详细地描述了不同用户在系统、应用程序或网站中完成特定任务时所采取的步骤。该技术显示了当前(现有的)用户工作流，并揭示了未来工作流的改进领域。

每个用户旅程被分成几个部分，这些部分描述了用户试图完成的任务的一部分。

语法：Task name: <score>: <comma separated list of actors>

journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me

journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me

参考链接

[1] Markdown高级使用之流程图 - 知乎 (zhihu.com)(https://zhuanlan.zhihu.com/p/340853710)

[2] Syntax and Configuration (mermaid-js.github.io)(https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference)

[3] Online FlowChart & Diagrams Editor - Mermaid Live Editor (mermaid-js.github.io)(https://mermaid-js.github.io/mermaid-live-editor/edit)