目前来说,这个还在非官方发布模式,建议先用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
  •