流程图

基本语法

Mermaid 的流程图使用 graph 关键字来开始定义图表，之后可以指定图的布局方向(只能指定一次, 不可重复或嵌套指定)：

  • graph TD：从上到下
  • graph LR：从左到右
  • graph BT：从下到上
  • graph RL：从右到左

节点和节点之间的连线用 --> 表示，节点可以用方括号 []、圆括号 () 等符号来表示不同的形状。

示例

  1. ```` md
    1
    2
    3
    4
    5
    6
    graph LR
        A[开始] --> B[步骤1]
        B --> C{条件?}
        C -->|是| D[步骤2]
        C -->|否| E[步骤3]
        E --> F[结束]
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19

       > ``` mermaid
       > graph LR
       >     A[开始] --> B[步骤1]
       >     B --> C{条件?}
       >     C -->|是| D[步骤2]
       >     C -->|否| E[步骤3]
       >     E --> F[结束]
       > ```

    2. ```` md
       ``` mermaid
       graph TD
           A[开始] --> B[步骤1]
           B --> C{条件?}
           C -->|是| D[步骤2]
           C -->|否| E[步骤3]
           E --> F[结束]
       ```
    1
    2
    3
    4
    5
    6
    graph TD
        A[开始] --> B[步骤1]
        B --> C{条件?}
        C -->|是| D[步骤2]
        C -->|否| E[步骤3]
        E --> F[结束]

高级用法

  1. **子图 (Subgraph)**：你可以使用 subgraph 来定义子图。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    ``` mermaid
    graph TD
        subgraph 子图1
            A --> B
        end
        subgraph 子图2
            C --> D
        end
        B --> C
    ```
    1
    2
    3
    4
    5
    6
    7
    8
    graph TD
        subgraph 子图1
            A --> B
        end
        subgraph 子图2
            C --> D
        end
        B --> C

  2. 节点样式：你可以自定义节点的样式，比如颜色、形状等。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    ```mermaid
    graph TD
        A[方形节点]
        B((圆形节点))
        C>自定义节点]
        D((特殊样式)):::special

        classDef special fill:#f96,stroke:#333,stroke-width:2px;
    ```
    1
    2
    3
    4
    5
    6
    7
    graph TD
        A[方形节点]
        B((圆形节点))
        C>自定义节点]
        D((特殊样式)):::special

        classDef special fill:#f96,stroke:#333,stroke-width:2px;

  3. 链接样式：你可以自定义链接的样式，比如颜色、线条类型等。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    ``` mermaid
    graph TD
        A[开始] --> B[步骤1]  
        B -.-> C{条件?}
        C ==> D[步骤2]
        C -->|否| E[步骤3]
        E --> F[结束]

        linkStyle 0 stroke:#f96,stroke-width:4px;
        %% linkStyle 1 stroke:#2f2,stroke-width:2px,stroke-dasharray: 5 5;
        %% linkStyle 2 stroke:#f00,stroke-width:2px;
        linkStyle 3 stroke:#000,stroke-width:3px,stroke-dasharray: 5 5;
        %% linkStyle 4 stroke:#000,stroke-width:3px,stroke-dasharray: 5 5;
    ```
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    graph TD
        A[开始] --> B[步骤1]  
        B -.-> C{条件?}
        C ==> D[步骤2]
        C -->|否| E[步骤3]
        E --> F[结束]

        linkStyle 0 stroke:#f96,stroke-width:4px;
        %% linkStyle 1 stroke:#2f2,stroke-width:2px,stroke-dasharray: 5 5;
        %% linkStyle 2 stroke:#f00,stroke-width:2px;
        linkStyle 3 stroke:#000,stroke-width:3px,stroke-dasharray: 5 5;
        %% linkStyle 4 stroke:#000,stroke-width:3px,stroke-dasharray: 5 5;
    • linkStyle 可以用来定义每个链接的样式, 后面的序号是链接线的唯一标识, 顺序是从上至下, 从左至右来排列。->权威标准是: 仅在源码中看从上至下即可。。
    • stroke：定义线条颜色。
    • stroke-width：定义线条宽度。
    • stroke-dasharray：定义虚线样式。比如 5 5 表示5个单位长度的实线加5个单位长度的空白。
    • %%: 是用于注释的语法, 注释不会影响图表的渲染，是编写和维护 Mermaid 图表时非常有用的工具。

完整示例

  1. 基本

    1
    2
    3
    4
    5
    6
    graph LR
        A[开始] -->|第一步| B{条件?}
        B -->|是| C[进行步骤1]
        B -->|否| D[进行步骤2]
        C --> E[结束]
        D --> E[结束]

  2. 复杂

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
graph LR
    A[开始] --> B[步骤1]
    B --> C{条件?}

    subgraph 子图1
        D[子步骤1]
        subgraph 嵌套子图
            E[子步骤1.1]
            F[子步骤1.2]
        end
        G[子步骤2]
    end

    C -->|是| D
    C -->|否| G
    D --> E
    E --> F
    F --> G
    G --> H[结束]

这些是 Mermaid 流程图的一些基本语法和高级用法。还可以前往 Mermaid 的官方文档寻找更多的参考示例。