跳到主要内容

简介

erd-editor 是一款实体关系图（Entity-Relationship Diagram）编辑器。 提供 Web 应用、Google Drive 应用、VS Code 扩展、IntelliJ 插件、Obsidian 插件，以及可嵌入自有页面的 <erd-editor> 自定义元素等多种形式。 所有形式都是同一个编辑器，并使用相同的文档格式。

在网店关系图中悬停连接线、添加列，并在 Flow 中聚焦 orders 表

获取方式​

平台安装提供内容
Web 应用erd-editor.io可安装的 PWA、支持离线使用、实时协同编辑
Google DriveGoogle Workspace Marketplace将 ERD Editor 添加到 Drive 的 Open with 和 New 菜单中，并保存回同一个文件
VS CodeMarketplace在自定义编辑器中打开 .erd.json 文件
IntelliJJetBrains Marketplace同一个编辑器，适用于基于 IntelliJ 的 IDE
ObsidianCommunity plugins在仓库的标签页中打开 .erd 和 .erd.json 文件，仅限桌面端
自有页面npm install @dineug/erd-editor不依赖框架的 <erd-editor> 自定义元素，参见安装
编码智能体@dineug/erd-editor-mcp一个 MCP 服务器，让 Claude Code、Codex 或其他客户端在 VS Code、JetBrains IDE 或 Obsidian 中实时编辑图，或者直接编辑文件本身

若要在 IDE 中试用，创建一个扩展名为 .erd.json 的空文件并打开即可。 在 Obsidian 中，可以从命令面板执行 ERD Editor: Create new diagram，或者在文件列表中从文件夹的右键菜单选择 New ERD。两种方式都会创建一个空的 .erd 文件并将其打开。 在 Google Drive 中，选择 New → More → ERD Editor，然后使用 Google 账号登录。ERD Editor 只能访问你用它创建或打开的文件。 在 Web 应用、Google Drive、VS Code、JetBrains IDE 和 Obsidian 中，新建的空白图会在欢迎界面上打开，这是一个列出入门操作的菜单：New Table、New Memo、Import、Command Palette 和 Shortcuts。 新建的图中所有锁定都处于开启状态，因此滚动、缩放和切换标签页都不会改动新图的空文件。参见锁定。 VS Code 在 Source Control、Local History、Compare with Saved 中，在 VS Code 聊天以及 GitHub Copilot、Claude Code 等编码智能体的编辑审阅中，以及在 GitLens、GitHub Pull Requests、Git Graph 等扩展的修订视图中，都会将 ERD 文件作为 JSON 文本打开，因此变更会逐行显示差异。Reopen Editor With... 可以将 Git 修订版本显示为只读的图。

更新 Obsidian 插件后，请重启 Obsidian：在此之前，窗口中运行的仍是旧版本加载的编辑器。 请在所有共享图的地方都更新 ERD Editor：较早的版本打开当前版本保存的文件时不会显示主键图标，而在较早的版本中保存该文件会丢失其中的表分组和 Schema SQL 脚本。 较早版本保存的文件会在第一次有变更写入该文件时以当前格式重写，参见锁定。在此之前，按照其 $schema 校验该文件的 JSON 编辑器会将其报告为无效。

主要功能​

  • 在没有边界的画布上绘制表、列和备注，并用 Zero One、Zero N、One Only、One N 四种关系类型将它们连接起来。参见开始编辑。索引在表的属性面板中定义。由两列或更多列组成的唯一索引即为备用键，开启 Alternate Key 显示选项后，图中会将其列标记为 AK1.1、AK1.2 等。参见索引和备用键。
  • 让关系连接到表中已有的列上：用鼠标或触控笔绘制关系时，关系所指向的表旁边的 Map to existing columns 会将父表的键与该表的列配对，Create new columns 则会添加新的列。之后可以通过关系右键菜单中的 Map Columns 修改其列。参见映射列。关系还可以设置 ON DELETE 与 ON UPDATE 操作。参见 ON DELETE 与 ON UPDATE。
  • 快速编辑：Alt + N 添加表；Alt + Enter 添加列；Alt + K 切换获得焦点的列的主键，如果该列是选中的列之一，则切换所有选中列的主键；Delete 或 Backspace 删除选中的对象。每项操作都只算一步 Undo。参见快捷键。
  • 通过带有预设颜色和图中已用颜色的选色器为表、备注或表分组着色，并用 No color 或 Remove color 去掉颜色。参见表与备注的颜色设置。
  • 将相关的表归入表分组：表分组是位于这些表后面、可以命名和着色的框，可以通过画布右键菜单或快速搜索中的 New Table Group 绘制，也可以在选中的表的右键菜单中用 Group selected tables 由这些表创建。把表放到分组内即加入该分组，放到分组外即离开该分组；拖动分组的标题栏时，其中的表会随之移动。DBML 的导入与导出都会以 TableGroup 块的形式保留分组。
  • 支持从 json、Schema SQL、GraphQL、DBML 或 AML 导入已有的 schema。参见导入与导出文件。导入 Schema SQL、GraphQL、DBML 或 AML 文件时，其中的表会沿着关系排布；没有关系时则逐行排列。Import and Add 会把文件添加到图的下方，而不是替换当前的图。
  • 将图导出为 json；在 Schema SQL 标签页中导出 Schema SQL，可保存为 .sql 文件或复制；或者通过 Export image 对话框导出为 PNG 或 SVG 图片，或以 PNG 复制到剪贴板。
  • 按照 Databricks、MSSQL、MariaDB、MySQL、Oracle、PostgreSQL、Snowflake 和 SQLite 八种数据库厂商的语法编写 Schema SQL。参见表相关功能。Schema SQL 标签页的选项面板可以选择要写出的语句、头部和表分组，还可以保存你自己编写的 SQL，这些 SQL 保存在图中，会写在各表之前和之后。
  • 为二十二种目标生成代码：语言 C#、Go、Java、Kotlin、PHP、Rust、Scala、Swift 和 TypeScript；ORM Doctrine、Drizzle、JPA、SeaORM、Sequelize、SQLAlchemy 和 TypeORM；以及 AML、DBML、GraphQL、JSON Schema、Mermaid 和 Zod。Code Generator 标签页的选项面板可以选择语言、数据库和名称大小写，生成的代码可以保存为带有该语言扩展名的文件，也可以复制。参见代码生成。
  • 在可视化中查看 schema，既可以是力导向的 Graph，也可以是沿着关系排布表卡片的 Flow，悬停在某个表上即可点亮它所触及的一切。在 ERD 标签页中按 Alt + F，即可聚焦选中的表以及与它们相关的表。
  • 在没有边界的画布上工作：图延伸到哪里就能平移到哪里，可以用 Ctrl + Wheel（Mac 上为 ⌘ + Wheel）、键盘或捏合手势在 10% ~ 150% 之间缩放，禅模式则只留下图本身。按住鼠标中键拖动可以从画布上的任意位置平移，即使在表的上方也可以。参见浏览画布。
  • 用自动布局一步排布整张图：Force 模拟、从左到右的 Flow，或两个方向的 Tree，每个表分组都会保持在一起。
  • 通过快速搜索可以在任意位置执行命令，也可以在搜索开头输入 #、@ 或 :，分别跳转到表、列，或者注释或备注。通过 Undo, Redo 可以逐步浏览编辑历史，通过 Time Travel 可以在画布上重放本次会话的历史，也可以在 Diff Viewer 中将图与另一个 .json 文件进行比较。
  • 通过查找与替换在表名、列名、注释和备注中查找文本，并替换其中一处匹配或全部匹配。可通过 Ctrl + F（Mac 上为 ⌘ + F）或 Search 旁边的工具栏按钮打开。
  • 以 25 种语言使用编辑器，可从工具栏的 Display Language 按钮或快速搜索中选择。System 跟随浏览器或宿主应用的语言；阿拉伯语、希伯来语和波斯语会让编辑器从右到左排布，而图仍保持从左到右。只有编辑器自身的文本会改变：名称、SQL 和生成的代码都保持原样。工具栏的主题构建器可以选择外观（System、Light 或 Dark）、灰阶色和强调色。参见语言与主题。
  • 让 diff 保持干净：滚动位置与缩放、当前打开的标签页、Code Generator 的语言与名称大小写，以及括号类型，默认都处于锁定状态，因此文件会保留它们被锁定时的值，滚动、缩放或切换标签页都不会改变文件。文件按固定顺序写出，并且不包含测量得到的宽度、叠放顺序、连接线锚点和已删除的项，因此打开图后不做任何编辑就关闭，文件会保持原样。
  • 让 Claude Code 或 Codex 等编码智能体通过 MCP 服务器编辑图：既可以在 VS Code、Obsidian 或 JetBrains IDE 中实时编辑，每处变更都会在发生的同时出现在画布上，也可以直接编辑文件本身。
  • 支持在 Web 应用中实时协同编辑（实验性）。会话基于点对点连接并进行端到端加密，因此不会有任何服务器保存 schema，参与者之间可以看到彼此的光标、焦点和选中内容。在自有页面中，getSharedStore() 可以在任意传输方式上提供相同的操作流。

建议从编辑指南开始。

项目缘起​

已有的建模工具没有提供我期望的用户体验。
因此，我发起了这个项目，希望带来极致的用户体验。
本项目的首要目标就是用户的编辑体验。
它将为你带来令人惊喜的编辑体验。