Mermaid.js实体关系图：数据库设计的可视化工具

你是否还在为数据库设计中的表关系而头疼？实体关系图（ER Diagram，实体关系模型）作为数据库设计的核心工具，能够直观展示数据表间的关联。Mermaid.js作为一款强大的文本驱动图表工具，让你用简单代码即可生成专业的ER图，告别复杂的拖拽式设计工具。本文将带你从零掌握Mermaid.js实体关系图的绘制，完成后你将能够：

• 使用Mermaid语法定义实体与关系
• 表示一对一、一对多等复杂关联
• 添加属性与主键约束
• 在项目中快速集成ER图

什么是实体关系图？

实体关系图（Entity-Relationship Diagram，ER图）是数据库设计的基础工具，它用图形化方式展示实体（Entity）、属性（Attribute） 和关系（Relationship） 三大核心元素。Mermaid采用行业标准的乌鸦脚表示法（Crow's Foot Notation），通过简洁的符号直观表达数据模型。

官方文档对ER图的定义：实体关系图语法参考

Mermaid的ER图功能模块源码位于：src/diagrams/er/

快速上手：第一个ER图

无需安装任何软件，通过Mermaid Live Editor即可开始创作。访问Mermaid Live Editor，输入以下代码：

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

这段代码定义了三个实体（客户、订单、配送地址）及它们之间的关系：

• 客户下订单（一对多）
• 订单包含订单项（一对多）
• 客户使用配送地址（多对多）

本地部署方案

对于生产环境，推荐通过CDN引入Mermaid库。在HTML文件中添加：

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>
<pre class="mermaid">
erDiagram
    CUSTOMER ||--o{ ORDER : places
</pre>

完整部署指南见：Mermaid使用文档

核心语法详解

实体定义

实体是ER图的基本构建块，代表现实世界中的对象（如用户、商品）。Mermaid中使用以下语法定义实体：

erDiagram
    // 基础实体定义
    USER {
        string id PK "用户唯一标识"
        string username UK "登录名"
        string email "用户邮箱"
        int age "年龄"
    }
    
    // 带别名的实体
    addr[地址] {
        string zipCode "邮政编码"
        string city "城市"
    }

语法说明：

• 实体名支持字母、数字和连字符
• 使用[别名]定义显示名称（v10.5.0+新特性）
• 属性格式：类型 名称 [约束] ["注释"]

关系表示法

Mermaid使用乌鸦脚符号表示实体间的 cardinality（基数）关系，基本语法为：

<实体A> <关系符号> <实体B> : 关系标签

常见关系类型：

符号组合	含义	示例
`		--o{`
}o..o{	多对多	STUDENT }o..o{ COURSE : "选修"
`		--

关系线样式区分两种类型：

• 实线：标识关系（Identifying Relationship）- 子实体依赖父实体存在
• 虚线：非标识关系（Non-Identifying Relationship）- 实体独立存在

属性与约束

Mermaid支持定义属性的数据类型、主键(PK)、外键(FK)和唯一键(UK)约束：

erDiagram
    PRODUCT {
        string sku PK "商品编码"
        string name "商品名称"
        decimal price "售价"
        int stock "库存数量"
    }
    
    ORDER-ITEM {
        string orderId PK,FK "订单ID"
        string productSku PK,FK "商品SKU"
        int quantity "购买数量"
    }

类型定义支持：

• 基础类型：int, string, float, decimal
• 数组类型：string[]（字符串数组）
• 长度限制：string(50)（最大50字符）

高级应用示例

电商系统数据模型

以下是完整的电商系统核心ER图实现：

erDiagram
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER {
        string id PK
        string name
        string email UK
    }
    
    ORDER ||--|{ ORDER-ITEM : contains
    ORDER {
        string id PK
        date orderDate
        string status
        string customerId FK
    }
    
    ORDER-ITEM }|--|| PRODUCT : refers
    ORDER-ITEM {
        string orderId PK,FK
        string productId PK,FK
        int quantity
        decimal unitPrice
    }
    
    PRODUCT }|--o{ CATEGORY : belongs_to
    PRODUCT {
        string id PK
        string name
        decimal price
    }
    
    CATEGORY {
        string id PK
        string name
        string parentId FK
    }

这个模型展示了：

• 客户与订单的一对多关系
• 订单与订单项的组合关系
• 商品与类别的多对一关系
• 复合主键（订单项的订单ID+商品ID）

配置与样式定制

通过Mermaid配置项可以自定义ER图外观：

mermaid.initialize({
  er: {
    fill: '#f8f9fa',      // 实体背景色
    stroke: '#333',       // 边框颜色
    fontSize: 14,         // 字体大小
    useMaxWidth: false    // 禁用最大宽度限制
  }
})

更多样式配置见：Mermaid配置文档

实战案例：用户权限系统

假设需要设计一个包含用户、角色、权限的系统，使用Mermaid ER图可以这样表示：

erDiagram
    USER }|..|{ ROLE : "拥有角色"
    USER {
        string id PK
        string username UK
        string password
    }
    
    ROLE }|..|{ PERMISSION : "包含权限"
    ROLE {
        string id PK
        string name UK
        string description
    }
    
    PERMISSION {
        string id PK
        string code UK
        string name
    }
    
    USER-ROLE {
        string userId PK,FK
        string roleId PK,FK
    }
    
    ROLE-PERMISSION {
        string roleId PK,FK
        string permissionId PK,FK
    }

这个模型通过中间表（USER-ROLE、ROLE-PERMISSION）实现了多对多关系，是典型的权限系统设计模式。

项目集成与工具

开发环境集成

1. 本地安装

# 使用npm安装
npm install mermaid

# 或使用yarn
yarn add mermaid

2. 导入使用

import mermaid from 'mermaid';

mermaid.initialize({ startOnLoad: true });

编辑器插件

推荐使用以下插件提升开发体验：

• VS Code: Mermaid Preview
• JetBrains IDE: Mermaid Plugin

社区集成方案见：第三方集成文档

常见问题解决

关系线重叠

当实体较多时可能出现连线交叉，可通过以下方法优化：

• 使用subgraph对实体分组
• 调整实体定义顺序
• 使用direction TB/LR指定布局方向

中文显示问题

确保HTML文件设置正确编码：

<meta charset="UTF-8">

导出与分享

Mermaid支持导出PNG/SVG格式，或通过以下方式分享：

• 导出为Markdown代码块
• 使用Mermaid Chart在线协作
• 生成永久链接（Live Editor的Save功能）

总结与进阶

Mermaid.js实体关系图为数据库设计提供了高效的文本驱动解决方案，其优势包括：

• 版本控制友好：文本格式便于Git跟踪变更
• 开发流程集成：可嵌入文档、代码注释
• 语法简洁：学习成本远低于专业数据库设计工具

进阶学习资源：

• 官方ER图示例库
• 数据库设计最佳实践
• Mermaid CLI工具

立即尝试用Mermaid重构你的数据库模型，体验文本绘图的高效与便捷！