Markdown 流程图语法指南

流程图简介

Markdown 中绘制流程图主要使用 Mermaid 语法。Mermaid 是一个基于 JavaScript 的图表绘制工具，支持流程图、时序图、甘特图等多种图表类型。大多数 Markdown 编辑器（如 Typora、VS Code 的 Markdown 预览增强插件等）和在线平台（如 GitHub、GitLab）都支持 Mermaid。

基本语法结构

在 Markdown 中使用 Mermaid 绘制流程图，需要将代码包裹在 ```mermaid 代码块中：

```mermaid
graph TD
    A[开始] --> B[处理流程]
    B --> C{判断条件}
    C -->|是| D[执行操作]
    C -->|否| E[其他操作]
    D --> F[结束]
    E --> F
```

流程图方向

使用关键词定义流程图的方向：

语法	方向	说明
`graph TD`	从上到下 (Top-Down)	最常用的方向
`graph LR`	从左到右 (Left-Right)	水平流程图
`graph RL`	从右到左 (Right-Left)	反向水平
`graph BT`	从下到上 (Bottom-Top)	反向垂直

示例：

graph LR
    A --> B
    B --> C

节点定义

1. 基本节点

graph TD
    A
    B[矩形节点]
    C(圆角矩形)
    D((圆形))
    E{菱形}
    F>不对称图形]
    H{{六边形}}

2. 节点语法

默认节点：节点名称
矩形节点：节点名称[显示文本]
圆角矩形：节点名称(显示文本)
圆形：节点名称((显示文本))
菱形：节点名称{显示文本}
不对称图形：节点名称>显示文本]
六边形：节点名称{{显示文本}}

连接线样式

1. 基本连接线

graph LR
    A --> B
    A -- 文本 --> B
    A --- B
    A -.- B
    A -.-> B
    A -. 文本 .-> B
    A ==> B
    A == 文本 ==> B

2. 连接线长度

可以通过增加 - 或 = 的数量调整连接线长度：

graph LR
    A ---- B
    A ===== B

3. 多方向连接

含义：A连接到B和C，然后B和C都连接到D

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


    X --> Y
    X --> Z

子图（子流程）

使用 subgraph 定义子流程：

```mermaid
graph TB
    A[开始] --> B{判断}

    subgraph 子流程1 [数据处理]
        C[提取数据]
        D[清洗数据]
        C --> D
    end

    subgraph 子流程2 [分析]
        E[统计分析]
        F[生成报告]
        E --> F
    end

    B -->|是| 子流程1
    B -->|否| 子流程2
    D --> G[结束]
    F --> G
```

实际效果：

graph TB
    A[开始] --> B{判断}

    subgraph 子流程1 [数据处理]
        C[提取数据]
        D[清洗数据]
        C --> D
    end

    subgraph 子流程2 [分析]
        E[统计分析]
        F[生成报告]
        E --> F
    end

    B -->|是| 子流程1
    B -->|否| 子流程2
    D --> G[结束]
    F --> G

样式自定义

1. 节点样式

graph LR
    A[开始]:::startclass
    B{判断}:::conditionclass
    C[结束]:::endclass

    classDef startclass fill:#9f9,stroke:#333,stroke-width:2px;
    classDef conditionclass fill:#f9f,stroke:#333,stroke-width:2px;
    classDef endclass fill:#f96,stroke:#333,stroke-width:4px;

    A --> B --> C

2. 链接样式

graph LR
    A -->|普通连接| B
    A -.->|虚线连接| C
    A ==>|粗线连接| D

    linkStyle 0 stroke:#f66,stroke-width:2px;
    linkStyle 1 stroke:#66f,stroke-width:2px,stroke-dasharray: 5 5;
    linkStyle 2 stroke:#6f6,stroke-width:4px;

注释

在 Mermaid 中使用 %% 添加注释：

graph TD
    A[开始] --> B
    %% 这是一条注释
    B --> C{判断}
    C -->|条件成立| D[执行操作]
    C -->|不成立| E[跳过]

综合示例

以下是一个完整的流程图示例：

```mermaid
graph TD
    %% 用户登录流程
    Start[用户访问系统] --> LoginPage[显示登录页面]
    LoginPage --> Input[用户输入凭据]
    Input --> Validate{验证输入}

    Validate -->|无效| ShowError[显示错误信息]
    ShowError --> Input

    Validate -->|有效| Auth{身份验证}

    Auth -->|失败| AuthFail[认证失败]
    AuthFail --> LogFail[记录失败日志]
    LogFail --> ShowError

    Auth -->|成功| AuthSuccess[认证成功]
    AuthSuccess --> CheckRole{检查用户角色}

    CheckRole -->|管理员| AdminPage[跳转管理后台]
    CheckRole -->|普通用户| UserPage[跳转用户主页]
    CheckRole -->|访客| GuestPage[跳转访客页面]

    AdminPage --> End[流程结束]
    UserPage --> End
    GuestPage --> End

    %% 样式定义
    classDef startend fill:#e1f5e1,stroke:#4caf50,stroke-width:2px;
    classDef process fill:#e3f2fd,stroke:#2196f3,stroke-width:2px;
    classDef decision fill:#fff3e0,stroke:#ff9800,stroke-width:2px;
    classDef error fill:#ffebee,stroke:#f44336,stroke-width:2px;

    class Start,End startend;
    class LoginPage,Input,ShowError,AuthSuccess,AdminPage,UserPage,GuestPage,LogFail process;
    class Validate,Auth,CheckRole decision;
    class AuthFail,ShowError error;
```

注意事项

兼容性：确保你的 Markdown 编辑器或平台支持 Mermaid
节点ID：节点ID不能包含空格，建议使用英文或拼音
文本转义：如果文本中包含特殊字符，可以用双引号包裹：A["特殊字符: < >"]
代码结构：保持代码缩进可读性，虽然 Mermaid 不要求严格缩进
在线测试：可以使用 Mermaid Live Editor 在线测试流程图
本站在线工具：本站也提供了云信益站-在线工具 - Mermaid 在线测试工具

工具推荐

Typora：优秀的 Markdown 编辑器，内置 Mermaid 支持
VS Code：安装 "Markdown Preview Enhanced" 插件
Mermaid Live Editor：在线编辑和预览
GitHub/GitLab：多数代码托管平台原生支持 Mermaid