Mermaid 实体关系图、泳道图、流程图简要使用教程

本文主要介绍 Mermaid 中三种常用图表：

实体关系图（ER Diagram）
流程图（Flowchart）
泳道图（Swimlane）

示例以项目管理相关业务为基础，重点介绍实体、字段、关系、节点、连线、判断、泳道和样式等常用语法。

Mermaid 全局配置

Mermaid 支持通过配置块对图表的整体显示效果进行统一设置，例如主题、字体、颜色等。

如果希望本文档中的 Mermaid 图表统一使用基础主题，可以在 Mermaid 代码块中加入以下配置：

---
config:
    theme: base
---

Mermaid 示例

---
config:
    theme: base
---

graph LR

    A(营销订单) --> B(实施项目) --> C[[产值计价]]

语法解释

配置由 --- 包围：

---
config:
    ...
---

其中：

config:

表示开始定义 Mermaid 的配置项。

theme: base

表示使用 Mermaid 的 base 基础主题。

theme 用于控制 Mermaid 图表的整体主题风格。常见主题包括：

主题	说明
`default`	Mermaid 默认主题
`base`	基础主题，可进一步自定义颜色等样式
`dark`	深色主题
`forest`	森林绿色主题
`neutral`	中性主题

如果后续还需要对节点颜色、字体等进行统一定制，使用 base 主题更加方便。

例如：

---
config:
    theme: base
---

整体代码结构：

```mermaid
---
config:
    theme: base
---
(Mermaid 图表语法)
```

一、实体关系图 ER Diagram

1. 基本结构

以下代码用于定义实体关系图：

erDiagram
  direction LR

  E[employee员工] {
      string name "姓名"
      string phone "手机号"
      bool enable "启用"
  }

  P[project项目] {
      string code "编码"
      string name "名称"
      date start "开始时间"
  }

  P ||--o{ E : "项目成员"

Mermaid 示例

---
config:
    theme: base
---
erDiagram

    E[employee员工] {
        string name "姓名"
        string phone "手机号"
        bool enable "启用"
    }

    P[project项目] {
        string code "编码"
        string name "名称"
        date start "开始时间"
    }

    P ||--o{ E : "项目成员"

语法解释

erDiagram 表示创建实体关系图。

实体ID[实体名称] {
    字段类型 字段名称 "字段说明"
}

例如：

P[project项目]

其中：

P：实体 ID
project项目：实体显示名称

实体中的字段格式：

string code "编码"

分别表示：

string：字段类型
code：字段名称
"编码"：字段说明

二、ER 图字段

erDiagram

  PROJECT项目 {
      string code "编码"
      string? fullName "全称"
      int order "排序"
      bool enable "启用"
      date start "开始时间"
      md remark "备注"
      file files "附件"
      ref manager "项目经理"
      refs members "项目成员"
  }

Mermaid 示例

---
config:
    theme: base
---
erDiagram

    PROJECT项目 {
        string code "编码"
        string? fullName "全称"
        int order "排序"
        bool enable "启用"
        date start "开始时间"
        md remark "备注"
        file files "附件"
        ref manager "项目经理"
        refs members "项目成员"
    }

语法解释

常见字段类型可以按照业务含义理解：

类型	含义
`string`	字符串
`string?`	可选字符串
`int`	整数
`bool`	布尔值
`date`	日期
`md`	Markdown / 富文本
`file`	文件
`poi`	地图坐标
`ref`	单关联
`refs`	多关联
`kv`	键值/枚举类数据

其中 ? 可以用于表示可选字段，例如：

string? fullName
ref? customer

表示该字段不是必填项。

三、ER 图实体关系

实体关系图的核心是实体之间的关系。

erDiagram

  PROJECT项目 ||--o{ MEMBER项目成员 : "包含"

  EMPLOYEE员工 ||--|| MEMBER项目成员 : "对应"

  ORDER订单 ||..o| PROJECT项目 : "关联"

  PROJECT项目 ||..o{ OUTPUT产值计价 : "产生"

Mermaid 示例

---
config:
    theme: base
---
erDiagram

    PROJECT项目 ||--o{ MEMBER项目成员 : "包含"

    EMPLOYEE员工 ||--|| MEMBER项目成员 : "对应"

    ORDER订单 ||..o| PROJECT项目 : "关联"

    PROJECT项目 ||..o{ OUTPUT产值计价 : "产生"

语法解释

Mermaid ER 图关系主要通过两端的符号表示数量关系。

常见形式：

写法	含义
`\|\|--\|\|`	一对一
`\|\|--o{`	一对多
`\|\|..o\|`	一对零或一
`\|\|..\|{`	一对一或多

例如：

PROJECT ||--o{ MEMBER

表示：

一个项目可以对应多个项目成员。

可以理解为：

项目 1 ───── N 项目成员

关系中间的文字：

: "包含"

用于描述关系含义。其中的--和..表示实线和虚线

四、ER 图方向

erDiagram
  direction LR

  A实体A {
      string name "名称"
  }

  B实体B {
      string code "编码"
  }

  A ||--o{ B : "关联"

Mermaid 示例

---
config:
    theme: base
---
erDiagram

    direction LR

    A实体A {
        string name "名称"
    }

    B实体B {
        string code "编码"
    }

    A ||--o{ B : "关联"

语法解释

direction 用于控制图表方向。

常见方向：

代码	含义
`LR`	从左到右
`RL`	从右到左
`TB`	从上到下
`BT`	从下到上

五、ER 图完整示例

erDiagram
  direction LR

  projectBase项目基础 {
      string code "编码"
      string fullCode "全编码"
      string? fullName "全称"
      string name "名称"
      string longName "全名称"
      poi poid "地图坐标"
      string profile "简介"
      md remark "备注"
      file files "附件"
      int order "排序"
      bool enable "启用"
      ref parent "上级"
      refs children "子级"
  }

  E[employee员工]

  P[tabPMProject实施项目] {
      date planStart "计划开始时间"
      date planEnd "计划结束时间"
      int planDays "计划工期"
      date start "实际开始时间"
      date end "实际结束时间"
      int days "实际工期"
      ref PM "项目经理"
      refs PEs "项目成员"
      ref? CPC "利润中心"
      ref? customer "客户"
      ref? customerProject "客户项目"
      ref? order "订单"
  }

  PE[tabPMProjectsEmployees项目成员] {
      ref project "项目"
      ref employee "员工"
      kv? role "团队角色"
      bool enable "启用"
  }

  P ||--o{ PE : ""
  E ||--|| PE : ""

  P ||..o{ OUTPUT产值计价 : ""
  P ||..o{ TASK任务管理 : ""

  CRM_ORDER客户订单 ||..o| P : ""
  projectBase项目基础 ||--o| P : ""

Mermaid 示例

---
config:
    theme: base
---
erDiagram

    direction LR

    PROJECT_BASE项目基础 {
        string code "编码"
        string fullCode "全编码"
        string? fullName "全称"
        string name "名称"
        string longName "全名称"
        poi poid "地图坐标"
        string profile "简介"
        md remark "备注"
        file files "附件"
        int order "排序"
        bool enable "启用"
        ref parent "上级"
        refs children "子级"
    }

    EMPLOYEE员工

    PROJECT实施项目 {
        date planStart "计划开始时间"
        date planEnd "计划结束时间"
        int planDays "计划工期"
        date start "实际开始时间"
        date end "实际结束时间"
        int days "实际工期"
        ref PM "项目经理"
        refs PEs "项目成员"
        ref? CPC "利润中心"
        ref? customer "客户"
        ref? customerProject "客户项目"
        ref? order "订单"
    }

    PROJECT_MEMBER项目成员 {
        ref project "项目"
        ref employee "员工"
        kv? role "团队角色"
        bool enable "启用"
    }

    PROJECT实施项目 ||--o{ PROJECT_MEMBER项目成员 : "包含"
    EMPLOYEE员工 ||--|| PROJECT_MEMBER项目成员 : "参与"

    PROJECT实施项目 ||..o{ OUTPUT产值计价 : "产生"
    PROJECT实施项目 ||..o{ TASK任务管理 : "包含"

    CRM_ORDER客户订单 ||..o| PROJECT实施项目 : "转化"
    PROJECT_BASE项目基础 ||--o| PROJECT实施项目 : "对应"

语法解释

这个示例综合使用了：

erDiagram

定义 ER 图；

direction LR

控制从左向右布局；

实体 {
    类型 字段 "说明"
}

定义实体字段；

A ||--o{ B

定义一对多关系；

A ||--|| B

定义一对一关系；

A ||..o| B

定义一对零或一关系。

六、流程图 Flowchart

1. 基本流程

graph LR

A(营销订单) --> B(实施项目) --> C[[产值计价]]

A --> C

B --> D[[项目管理]]

Mermaid 示例

---
config:
    theme: base
---
graph LR

    A(营销订单) --> B(实施项目) --> C[[产值计价]]

    A --> C

    B --> D[[项目管理]]

语法解释

graph LR

表示创建一个从左到右的流程图。

节点格式：

A(营销订单)

其中：

A：节点 ID
营销订单：节点名称
( )：圆角节点

常见节点：

写法	形状	常见用途
`A[文本]`	矩形	普通步骤
`A(文本)`	圆角矩形	业务操作
`A{文本}`	菱形	条件判断
`A[[文本]]`	双边框	重点模块

---
config:
    theme: base
---
graph LR

    A[普通节点]

    B(圆角节点)

    C{判断节点}

    D[[重点节点]]

七、流程图连接线

graph LR

A(开始) --> B(处理)

B -.-> C(辅助处理)

C -->|通过| D(结束)

C -.->|不通过| E(重新处理)

Mermaid 示例

---
config:
    theme: base
---
graph LR

    A(开始) --> B(处理)

    B -.-> C(辅助处理)

    C -->|通过| D(结束)

    C -.->|不通过| E(重新处理)

语法解释

实线箭头：

A --> B

表示主要流程。

虚线箭头：

A -.-> B

通常表示辅助流程、异常流程或回退流程。

带文字的箭头：

A -->|通过| B

表示在连线上增加说明。

例如：

H -->|同意| J
H -.->|不同意| C

可以表示：

        ┌─ 同意 ──→ J
H 判断 ─┤
        └─ 不同意 ─→ C

九、流程图样式

graph LR

A(营销订单) --> B(实施项目) --> C[[产值计价]]

A --> C

B --> D[[项目管理]]

style B fill:#fef9c3,stroke:#ca8a04,color:#1cc8a04

Mermaid 示例

---
config:
    theme: base
---
graph LR

    A(营销订单) --> B(实施项目) --> C[[产值计价]]

    A --> C

    B --> D[[项目管理]]

    style B fill:#fef9c3,stroke:#ca8a04,color:#1cc8a04

语法解释

使用：

style 节点ID fill:背景色,stroke:边框颜色,color:文字颜色

设置节点样式。

例如：

style B fill:#fef9c3,stroke:#ca8a04,color:#1cc8a04

表示修改 B 节点的：

fill：背景颜色
stroke：边框颜色
color：文字颜色

十、泳道图 Swimlane

1. 基本结构

swimlane-beta

    subgraph 项目经理
        A(建立项目)
        B(任务分解)
        C(任务分配)
    end

    subgraph PMO
        G(任务点数评估)
        H{里程碑确认}
    end

    subgraph 执行人
        I(工时预估)
        J(任务开始)
        K(任务完成)
    end

    A --> B --> G --> C --> I --> J --> K

Mermaid 示例

---
config:
    theme: base
---
swimlane-beta

    subgraph 项目经理
        A(建立项目)
        B(任务分解)
        C(任务分配)
    end

    subgraph PMO
        G(任务点数评估)
        H{里程碑确认}
    end

    subgraph 执行人
        I(工时预估)
        J(任务开始)
        K(任务完成)
    end

    A --> B --> G --> C --> I --> J --> K

语法解释

泳道图的核心结构：

subgraph 泳道名称
    节点
end

例如：

subgraph 项目经理
    A(建立项目)
    B(任务分解)
end

表示创建一个名为项目经理的泳道，并将：

建立项目
任务分解

放入该泳道。

泳道通常用于区分不同角色或部门。

十一、泳道中的跨角色流程

swimlane-beta

    subgraph 项目经理
        A(建立项目)
        B(任务分解)
        C(任务分配)
        D(项目排期)
    end

    subgraph PMO
        G(任务点数评估)
        H{里程碑确认}
    end

    subgraph 执行人
        I(工时预估)
        J(任务开始)
        P(任务更新)
        K(任务完成)
    end

    A --> B --> G --> C --> I --> D --> H
    H -->|同意| J --> P --> K
    H -.->|不同意| C

Mermaid 示例

---
config:
    theme: base
---
swimlane-beta

    subgraph 项目经理
        A(建立项目)
        B(任务分解)
        C(任务分配)
        D(项目排期)
    end

    subgraph PMO
        G(任务点数评估)
        H{里程碑确认}
    end

    subgraph 执行人
        I(工时预估)
        J(任务开始)
        P(任务更新)
        K(任务完成)
    end

    A --> B --> G --> C --> I --> D --> H
    H -->|同意| J --> P --> K
    H -.->|不同意| C

语法解释

泳道图的重点不是单纯描述节点，而是描述：

哪个角色负责哪个节点，以及流程如何在不同角色之间流转。

例如：

A --> B --> G --> C

表示：

项目经理
建立项目
   ↓
任务分解
   ↓
PMO
任务点数评估
   ↓
项目经理
任务分配

因此泳道图特别适合描述跨角色业务流程。

十二、泳道图判断与分支

swimlane-beta

    subgraph PMO
        H{里程碑确认}
    end

    subgraph 执行人
        J(任务开始)
    end

    subgraph 项目经理
        C(任务分配)
    end

    H -->|同意| J
    H -.->|不同意| C

Mermaid 示例

---
config:
    theme: base
---
swimlane-beta

    subgraph PMO
        H{里程碑确认}
    end

    subgraph 执行人
        J(任务开始)
    end

    subgraph 项目经理
        C(任务分配)
    end

    H -->|同意| J
    H -.->|不同意| C

语法解释

使用：

H{里程碑确认}

创建判断节点。

然后使用：

H -->|同意| J

表示：

如果同意，则进入任务开始。

使用：

H -.->|不同意| C

表示：

如果不同意，则返回任务分配。

这种结构特别适合审批流程。

十三、泳道图统一样式

swimlane-beta

    subgraph 项目经理
        F(临时任务)
        ZE(项目冲刺)
    end

    subgraph PMO
        Q(进度报告)
    end

    classDef branch fill:#E5F6DA,stroke:#569230,color:#111

    class F,Q,ZE branch

Mermaid 示例

---
config:
    theme: base
---
swimlane-beta

    subgraph 项目经理
        F(临时任务)
        ZE(项目冲刺)
    end

    subgraph PMO
        Q(进度报告)
    end

    classDef branch fill:#E5F6DA,stroke:#569230,color:#111

    class F,Q,ZE branch

语法解释

classDef 用于定义一组通用样式：

classDef 样式名称 fill:背景色,stroke:边框颜色,color:文字颜色

例如：

classDef branch fill:#E5F6DA,stroke:#569230,color:#111

定义一个叫 branch 的样式。

然后：

class F,Q,ZE branch

表示让 F、Q、ZE 三个节点使用 branch 样式。

这种方式适合统一设置：

异常节点
特殊节点
临时节点
关键节点

十四、完整泳道图示例

swimlane-beta

    subgraph 项目经理
        A(建立项目)
        B(任务分解)
        C(任务分配)
        D(项目排期)
        F(临时任务)
        ZE(项目冲刺)
    end

    subgraph PMO
        G(任务点数评估)
        H{里程碑确认}
        O(项目分析)
        Q(进度报告)
    end

    subgraph 执行人
        I(工时预估)
        J(任务开始)
        P(任务更新)
        K(任务完成)
    end

    A --> B --> G --> C --> I --> D --> H
    H -->|同意| J --> P --> K --> O --> Q
    Q -.->|进度滞后| D
    H -.->|不同意| C
    H -->|同意| ZE --> J
    F --> C

    classDef branch fill:#E5F6DA,stroke:#569230,color:#111
    class F,Q,ZE branch

Mermaid 示例

---
config:
    theme: base
---
swimlane-beta

    subgraph 项目经理
        A(建立项目)
        B(任务分解)
        C(任务分配)
        D(项目排期)
        F(临时任务)
        ZE(项目冲刺)
    end

    subgraph PMO
        G(任务点数评估)
        H{里程碑确认}
        O(项目分析)
        Q(进度报告)
    end

    subgraph 执行人
        I(工时预估)
        J(任务开始)
        P(任务更新)
        K(任务完成)
    end

    A --> B --> G --> C --> I --> D --> H
    H -->|同意| J --> P --> K --> O --> Q
    Q -.->|进度滞后| D
    H -.->|不同意| C
    H -->|同意| ZE --> J
    F --> C

    classDef branch fill:#E5F6DA,stroke:#569230,color:#111
    class F,Q,ZE branch

语法解释

这个示例综合使用了泳道图中的主要语法：

swimlane-beta

定义泳道图。

subgraph 项目经理
    ...
end

定义项目经理泳道。

A(建立项目)

定义业务节点。

H{里程碑确认}

定义判断节点。

H -->|同意| J

定义带条件的流程。

Q -.->|进度滞后| D

定义异常/回退流程。

classDef branch ...

定义统一样式。

class F,Q,ZE branch

为指定节点应用统一样式。

十五、三种图表的核心语法对照

图表	核心语法	主要用途
ER Diagram	`erDiagram`	数据模型设计
ER Diagram	`A \|\|--o{ B`	实体关系
ER Diagram	`A { ... }`	实体字段
Flowchart	`graph LR`	流程设计
Flowchart	`A --> B`	主流程（实线）
Flowchart	`A -.-> B`	辅助/异常流程（虚线）
Flowchart	`A{判断}`	条件判断
Flowchart	`A -->\|条件\| B`	条件分支
Flowchart	`style A ...`	节点样式
Swimlane	`swimlane-beta`	角色流程
Swimlane	`subgraph 角色`	创建泳道
Swimlane	`A --> B`	跨节点流程
Swimlane	`classDef`	定义统一样式
Swimlane	`class A,B xxx`	应用统一样式

Mermaid 实体关系图、泳道图、流程图简要使用教程

Mermaid 全局配置

Mermaid 示例

语法解释

一、实体关系图 ER Diagram

1. 基本结构

Mermaid 示例

语法解释

二、ER 图字段

Mermaid 示例

语法解释

三、ER 图实体关系

Mermaid 示例

语法解释

四、ER 图方向

Mermaid 示例

语法解释

五、ER 图完整示例

Mermaid 示例

语法解释

六、流程图 Flowchart

1. 基本流程

Mermaid 示例

语法解释

七、流程图连接线

Mermaid 示例

语法解释

九、流程图样式

Mermaid 示例

语法解释

十、泳道图 Swimlane

1. 基本结构

Mermaid 示例

语法解释

十一、泳道中的跨角色流程

Mermaid 示例

语法解释

十二、泳道图判断与分支

Mermaid 示例

语法解释

十三、泳道图统一样式

Mermaid 示例

语法解释

十四、完整泳道图示例

Mermaid 示例

语法解释

十五、三种图表的核心语法对照

相关网站