关于使用Draw.io画数据库E-R图的说明

背景简介

E-R图也称实体-联系图(Entity Relationship Diagram)，提供了表示实体类型、属性和联系的方法，用来描述现实世界的概念模型。

diagrams.net是用于构建图表应用程序的开源技术堆栈，也是世界上最广泛使用的基于浏览器的最终用户图表软件。

安装Draw.io

方式一，无需安装，在线使用

https://app.diagrams.net

方式二，安装桌面版，离线使用

Drawio-Desktop v14.9.6 Download

备用：

• https://github.com/jgraph/drawio-desktop/releases

方式三，VSC插件

在Visual Studio Code里面左侧菜单扩展项搜索关键词draw.io即可

目前来说，这个还在非官方发布模式，建议先用Insider版。

如果你不满意当前主题，可以在VSC的设置-扩展-Draw.io Integration-Theme中选择。

新建E-R图

打开Draw.io，在对话框中选择创建新绘图

选择创建E-R图

提取SQL导入

连接你的Mysql、MsSql、Sqlite等数据，针对你需要加入E-R图的表提取Create创建语句。

CREATE TABLE `DatabaseName` (
  `Id` bigint(20) NOT NULL,
  `VersionNo` bigint(20) NOT NULL,
  PRIMARY KEY (`Id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

在创建语句的基础上做一些修剪替换，其中关键的要点如下：

• 将主键挪到第一个，其他外键可以紧随在主键后面。
• 主键后面追加PRIMARY KEY关键字，以便后续自动生成样式
• 追加;以表示结束位置
• 留下所有的NOT NULL标记，移除不必要的内容
• 仅保留字段名、字段类型、是否支持为空、注释信息

最终我们将得到一个规范后的格式，举例如下：

CREATE TABLE DatabaseName '数据表名'
(
  Id bigint(20) NOT NULL PRIMARY KEY
  VersionNo bigint(20) '版本号'
  .....
);

在Draw.io中部菜单找到+号菜单，找到高级中的从SQL导入。

粘贴上一步得到的最终SQL语句到输入框中，可以同时填入多个表，只要有;号间隔结尾就行。

最终我们将看到几个带PK主键标记的图。

如果你没看到上图的PK样式，一定是因为主键你没追加PRIMARY KEY标记

我们可以给他们全选设置字体、颜色等等。

同时，针对其中关联的外键，我们需要添加FK标记，并且将整行设置为斜线样式。

如下图所示，斜线行代表外键。

接下来，我们可以把有关系的外键和主键连接起来，并且可以设置两端的箭头样式。

完成这些，我们就基本上可以开始构建完整的全套E-R图了。

导出SVG

左上角-文件-导出为-SVG

建议设置一定的边框宽度，比如100，以便可以留下一些距离。

附录

• https://www.diagrams.net