ERD Studio – Visual ER Diagram Designer

English | 简体中文

Design database schemas visually inside VS Code. Diagrams are plain, readable JSON files (.erd) that live in your repository, diff cleanly in git and use VS Code's own undo/redo, save and hot exit.

Features

• Visual modeling – tables with typed columns, primary/foreign keys, unique constraints, defaults, auto increment, indexes, comments and logical names (show physical names, logical names or both); groups (subject areas that carry their tables along) and Markdown notes. A spreadsheet-style column grid in the inspector lets you edit without leaving the keyboard.
• Relationships the way you think – drag from a column to another table, or press R and click parent then child; a many-to-many wizard creates the junction table. Crow's foot notation (optionally with 1 / N labels) with identifying/non-identifying lines, cardinalities on both ends and ON DELETE / ON UPDATE actions. Hovering or selecting a table highlights its related tables, columns and lines.
• Hand-tuned relationship lines – select a line to drag its segments, double-click to add a bend (collinear bends merge automatically) or drag an end to reconnect it to another table or column; Reset to automatic brings the computed route back. Routes are saved in the file and exported images match the canvas.
• Enums, CHECK constraints and more – enum types, table and column CHECK constraints, generated columns, ON UPDATE expressions, partial (WHERE) and prefix indexes, from modeling through DDL generation and SQL import.
• Large diagrams stay usable – auto layout (ELK layered layout in a web worker, whole diagram or selection, left→right or top→down, one undo step), alignment guides, align / distribute, resizable tables, display modes (all columns / keys only / names only), hide tables, minimap, legend and a simplified rendering when zoomed out; hundreds of tables remain fluid.
• SQL in, SQL out – import CREATE TABLE scripts (MySQL / MariaDB, PostgreSQL, SQLite; SQL Server and Oracle on a best-effort basis) through one import dialog with preview and conflict handling (skip, replace, or add as new tables) — from the diagram, from a .sql file or SQL editor, with the source dialect detected. Foreign keys that reference tables outside the script are linked to the tables of that name already in the diagram. Statements that cannot be parsed are skipped and reported with their line, the rest is imported in a single undo step and laid out automatically. Generate DDL for MySQL, PostgreSQL, SQLite, SQL Server and Oracle with dependency-ordered tables, comments, indexes and foreign keys, optionally with IF NOT EXISTS and DROP TABLE; a live DDL preview sits at the bottom of the editor, and the diagram's dialect can be switched with a preview of the type changes.
• Find & Replace – search names, logical names, comments and types with match case, whole word, regular expressions and preserve case; Replace All is a single undo step and keeps references intact. The command palette (/ or Ctrl/Cmd+F) jumps to tables (#), columns (@), comments and notes (:) or runs commands (>).
• ERD Outline – an Explorer view listing tables (with their color), columns, indexes, foreign keys, CHECK constraints, relationships, enums, groups and notes of the active diagram; click an entry to reveal it on the canvas (a CHECK constraint opens in the inspector), or to jump to its JSON when the file is open as text. Breadcrumbs, the Outline view and Go to Symbol work in the JSON text too.
• More exports – PNG / SVG images (scale, background), Mermaid erDiagram, DBML, PlantUML and a Markdown data dictionary; right-click tables to copy them as SQL, Markdown or Mermaid.
• Native VS Code integration – Ctrl/Cmd+Z undoes diagram edits, one gesture = one undo step, dirty state / save / revert / hot exit just work, and the JSON source can be opened side by side and edited live.
• Problems panel – syntax errors, dangling references, duplicate names, missing primary keys, type mismatches, reserved words and over-long identifiers are reported with exact line and column, in the VS Code display language; the diagram has its own problem list that reveals the entity.
• Fits your theme – light, dark and high-contrast themes; English and Chinese UI (Simplified Chinese, also used when VS Code runs in Traditional Chinese).

Screenshots

Hand-tuned relationship lines – drag segments, add bends and reconnect ends; the route is saved in the file.

Inspector – the spreadsheet-style column grid with the column details drawer (default, ON UPDATE, generated column, logical name, comment).

Command palette – jump to tables, columns, comments and notes or run commands, with a live preview of the table.

Find & Replace – matches are highlighted on the canvas; Replace All is a single undo step.

Import SQL – preview new and conflicting tables before importing; foreign keys to tables outside the script are linked to the tables already in the diagram.

Getting started

1. Run ERD Studio: New ER Diagram… from the Command Palette, or right-click a folder in the Explorer and choose New ER Diagram…. Pick a file name and a database dialect.
2. Press T to add a table, R to draw a relationship and ? to see every shortcut.
3. Already have a schema? Right-click a .sql file in the Explorer (or use the title bar or context menu of a SQL editor) and choose Import SQL into ER Diagram…. The import dialog opens in the active diagram — or in a diagram you pick, or in a new one — with the SQL filled in and its dialect detected.
4. Use the editor title buttons to open the JSON source, export DDL, run auto layout or export an image.

Prefer to look around first? Run ERD Studio: Open Sample Diagram for an e-commerce model, or follow the Get Started with ERD Studio walkthrough.

Keyboard shortcuts

Single-key shortcuts work when the canvas has focus and no text field is being edited. Press ? in a diagram for the complete, searchable list.

In the inspector's column grid:

Commands

All commands are in the Command Palette under the ERD Studio category.

Settings

Settings live in ~/.x1/erd-studio/conf.yaml, not in the VS Code settings. Run ERD Studio: Open Configuration File (conf.yaml) to open it; the first time, the file is created with every key commented out at its default value — remove the leading # from a line and save. Saved changes apply right away, whether the file is saved in VS Code or changed by another program. Keys that are left out or have invalid values use the defaults; if the file cannot be parsed, a warning is shown and the last valid settings stay in effect.

defaultDialect: mysql
edgeStyle: bezier
naming:
  foreignKeyColumn: "{target}_{column}"   # values starting with { must be quoted

The naming templates are copied into a diagram when it is created; afterwards they can be changed per diagram in its document settings. Export DDL… keeps the options picked last under ddlExportOptions in the same file.

The .erd file format

A diagram is a single JSON document identified by "format": "erd-studio" and an integer "version". Entities reference each other by stable ids, enums are readable strings and the output is deterministic: keys in a fixed order, default values omitted, coordinates rounded, and small "leaf" objects (positions, columns, relationship ends, routes) written on one line — so moving a table or editing a column changes exactly one line. View state such as zoom, scroll position or selection is never written to the file.

{
  "format": "erd-studio",
  "version": 1,
  "name": "shop",
  "dialect": "postgresql",
  "tables": [
    {
      "id": "tbl_k3j9x0a2qz",
      "name": "users",
      "position": { "x": 80, "y": 120 },
      "columns": [
        { "id": "col_a1b2c3d4e5", "name": "id", "type": "bigint", "primaryKey": true, "autoIncrement": true },
        { "id": "col_f6g7h8i9j0", "name": "email", "type": "varchar(255)", "nullable": false, "unique": true }
      ]
    }
  ],
  "relationships": []
}

The full specification (in Chinese) is in docs/spec/erd-file-format.md and the JSON Schema in schemas/erd-studio.v1.schema.json; both are included in the extension package. Existing line endings (LF / CRLF) and indentation are preserved when the diagram writes the file. Unknown fields are kept, so files stay intact when opened by an older version.

Text mode and JSON validation

ERD Studio registers an erd language for *.erd files: it reuses the built-in JSON grammar for highlighting and joins the JSON language service (via jsonLanguageParticipants, activating the built-in JSON extension when a .erd file is opened), so the text editor provides JSON formatting, folding and validation against the bundled schema. The schema only applies to files whose format is erd-studio, so JSON-based .erd files of other tools are not flagged; DBeaver (XML) and bigER (DSL) .erd files are switched to the XML / plain-text language when opened, so they are neither highlighted nor validated as JSON. JSON syntax errors are reported once — by the JSON language service, or by ERD Studio when that service is disabled (json.validate.enable). Independently of the text editor, ERD Studio's own semantic checks are always reported in the Problems panel, in the VS Code display language, located at the entity they belong to. Format-on-save is disabled for .erd files by default to keep the canonical one-line-per-object layout.

ERD Studio provides the document symbols of the text editor: breadcrumbs and the Outline view list tables with their columns, indexes and CHECK constraints, then relationships, enums, notes and groups (JSON files of other tools show their raw JSON tree). The JSON language service also reports a symbol for every JSON key; ERD Studio hides those kinds (modules, arrays, strings, numbers, booleans, variables) in the outline and breadcrumbs of the erd language through language-specific defaults ("[erd]": { "outline.show…": false, "breadcrumbs.show…": false }), which you can override in your settings. VS Code's Go to Symbol in Editor (@) does not apply these filters, so it lists the JSON keys as well — type @: to group the list by kind, where the ERD Studio entries (classes, fields, keys, packages…) are kept apart from the JSON ones. For very large files the JSON language service may show a "too many symbols" status (json.maxItemsComputed); ERD Studio's own symbols are not limited.

Working with git

• Diagrams are text: commits, diffs, merges and blame work as usual.
• Historical versions (git: and similar read-only schemes, pull request and merge views) open in the text editor by default, so source control shows a JSON diff. When a diagram is opened from a read-only location it is shown read-only.
• Files with merge-conflict markers, invalid JSON or a newer format version open read-only with an explanation; nothing is ever overwritten automatically. Fix the file in the text editor and the diagram updates instantly.

Coexisting with ERD Editor and ERD Designer

Other extensions (for example ERD Editor and ERD Designer) also register the .erd extension, so VS Code may ask which editor to use. ERD Studio recognizes their files (as well as DBeaver and bigER .erd files) and shows an explanation with an Open in Text Editor button instead of touching them — the file is never modified. To choose a default editor, add to your settings:

// settings.json
"workbench.editorAssociations": {
  "*.erd": "erdStudio.editor"
}

To keep another tool as the default for a particular folder while using ERD Studio elsewhere, use path patterns, e.g. "legacy/**/*.erd": "editor.erd" (ERD Editor's view type). You can always switch with Reopen Editor With….

Development

The browser harness runs the real webview with a mock extension host. URL parameters: doc=sample|empty|large (with n=200), theme=dark|light|hc, locale=en|zh-cn, readonly=1, parseError=1, conflict=1, foreign=erd-editor|erd-designer|dbeaver|biger|unknown-json, dialect=…, fileName=…, notation=crowsfoot|labels and any editor setting such as density=comfortable. Automated tests drive it through window.__erdHarness (getDocument(), sendCommand(), undo(), redo(), externalEdit(), flush('manual' | 'auto'), openImportSql(sql, dialect?, fileName?), setNextSqlFile(), messages, sent, viewState, lastImage, lastTextExport, …). The view state the webview reports is sanitized like in VS Code and kept in sessionStorage, so reloading the page restores it.

License

MIT

简体中文

在 VS Code 中可视化设计数据库结构。ER 图保存为可读的 JSON 文件（.erd），与代码一起放在仓库里，git diff 清晰，撤销/重做、保存与热退出都由 VS Code 原生处理。

功能

• 可视化建模：表、列（类型、主键、外键、唯一、自增、默认值）、索引、注释与逻辑名（可显示物理名、逻辑名或两者）；分组（主题域，拖动时带着成员表一起移动）与 Markdown 便签。属性面板中的电子表格式列网格可全程用键盘编辑。
• 顺手地建关系：从列拖到另一张表，或按 R 后依次点击父表、子表；多对多向导自动创建关联表。鸦爪记法（可附 1 / N 标签），区分标识/非标识关系，两端基数与 ON DELETE / ON UPDATE 均可编辑。悬停或选中表时联动高亮相关的表、列与连线。
• 手动调整连线：选中连线后拖动线段平移，双击线段插入拐点（共线拐点自动合并），拖动端点可重连到其他表或列；"重置为自动"恢复自动路由。路由写入文件，导出的图片与画布一致。
• 枚举、CHECK 及更多：枚举类型、表级与列级 CHECK 约束、生成列、ON UPDATE 表达式、部分索引（WHERE）与前缀索引，从建模、DDL 生成到 SQL 导入全链路支持。
• 大图依然好用：自动布局（ELK 分层布局在 Web Worker 中运行，可布局全图或所选，左→右或上→下，计 1 步撤销）、对齐辅助线、对齐与均匀分布、表宽可调、显示模式（全部列 / 仅键列 / 仅表名）、隐藏表、小地图、图例，缩小时简化渲染；数百张表依然流畅。
• SQL 双向：导入 CREATE TABLE 脚本（MySQL / MariaDB、PostgreSQL、SQLite；SQL Server 与 Oracle 尽力解析），无论从图内、.sql 文件还是 SQL 编辑器发起，都进入同一个带预览与冲突处理（跳过、替换或作为新表加入）的导入对话框，并自动识别源方言。引用脚本外表的外键会按名称关联到图中已有的同名表。无法解析的语句会被跳过并报告行号，其余内容一次导入（计 1 步撤销）并自动布局。为 MySQL、PostgreSQL、SQLite、SQL Server、Oracle 生成按依赖排序、含注释、索引与外键的 DDL，可选 IF NOT EXISTS 与 DROP TABLE；编辑器底部提供实时 DDL 预览，还可在预览类型变化后切换整张图的方言。
• 查找与替换：在名称、逻辑名、注释与类型中查找，支持区分大小写、全词匹配、正则表达式与保留大小写；"全部替换"计 1 步撤销，引用保持完整。命令面板（/ 或 Ctrl/Cmd+F）可跳转到表（#）、列（@）、注释与便签（:），或执行命令（>）。
• ERD 大纲：资源管理器中的视图，列出当前图的表（带表色）、列、索引、外键、CHECK 约束、关系、枚举、分组与便签；点击即可在画布上定位（CHECK 约束会在属性面板中展开），文件以文本方式打开时跳到对应的 JSON。JSON 文本同样支持面包屑、大纲视图与"转到符号"。
• 更多导出：PNG / SVG 图片（倍率、背景可选）、Mermaid erDiagram、DBML、PlantUML、Markdown 数据字典；右键表可复制为 SQL、Markdown 或 Mermaid。
• 原生集成：Ctrl/Cmd+Z 撤销图上的编辑，一次手势 = 一个撤销步骤；脏标记、保存、还原、热退出开箱即用；可并排打开 JSON 源码实时双向同步。
• 问题面板：JSON 语法错误、悬空引用、重名、缺少主键、外键类型不一致、保留字、标识符超长等问题精确到行列，并使用 VS Code 的显示语言；图内另有问题列表，点击即可定位到实体。
• 融入主题：亮色、暗色、高对比度主题；界面支持英文与中文（简体中文；VS Code 使用繁体中文时同样显示简体中文）。

截图

手动调整连线：拖动线段、插入拐点、拖动端点重连，路由保存在文件中。

属性面板：电子表格式列网格与列详情抽屉（默认值、ON UPDATE、生成列、逻辑名、注释）。

命令面板：跳转到表、列、注释与便签，或执行命令，并实时预览表卡片。

查找与替换：匹配项在画布上高亮，"全部替换"计 1 步撤销。

导入 SQL：导入前预览新增与冲突的表；引用脚本外表的外键按名称关联到图中已有的表。

快速开始

1. 在命令面板执行 ERD Studio: 新建 ER 图…，或在资源管理器中右键文件夹选择 新建 ER 图…，输入文件名并选择数据库方言。
2. 按 T 新建表，按 R 画关系，按 ? 查看全部快捷键。
3. 已有 SQL？在资源管理器中右键 .sql 文件（或使用 SQL 编辑器的标题栏、右键菜单）选择 导入 SQL 到 ER 图…：导入对话框会在当前 ER 图（或你选择的图、新建的图）中打开，预填 SQL 并识别其方言。
4. 通过编辑器标题栏按钮打开 JSON 源码、导出 DDL、自动布局或导出图片。

想先看看效果？执行 ERD Studio: 打开示例图（电商模型），或跟随 开始使用 ERD Studio 引导。

快捷键

单键快捷键仅在画布获得焦点且未在输入框中编辑时生效。在图中按 ? 可查看完整且可搜索的列表。

属性面板的列网格中：

命令

所有命令都在命令面板的 ERD Studio 分类下。

设置

设置保存在 ~/.x1/erd-studio/conf.yaml 中，而不是 VS Code 设置。执行 ERD Studio: 打开配置文件（conf.yaml） 打开该文件；首次打开时会创建它，其中所有键都按默认值列出并注释掉——去掉某行开头的 # 并保存即可。保存后立即生效，无论是在 VS Code 中保存还是被其他程序修改。没有写出或取值不合法的键使用默认值；文件解析失败时会给出提示，并继续使用上一次有效的设置。

defaultDialect: mysql
edgeStyle: bezier
naming:
  foreignKeyColumn: "{target}_{column}"   # 以 { 开头的值必须加引号

命名模板在新建图时复制到图中，之后可在该图的文档设置中单独修改。导出 DDL… 上次勾选的选项也记在该文件的 ddlExportOptions 下。

.erd 文件格式

一张图是一个 JSON 文档，以 "format": "erd-studio" 和整数 "version" 作为签名。实体之间用稳定 id 引用，枚举值是可读字符串，输出完全确定：字段顺序固定、省略默认值、坐标取整，位置、列、关系端点、连线路由等"叶子对象"单行输出——移动一张表或修改一列只改动一行。缩放、滚动位置、选中状态等视图状态从不写入文件。

完整规范见 docs/spec/erd-file-format.md，JSON Schema 见 schemas/erd-studio.v1.schema.json，两者都随扩展一起打包。写回文件时保留原有换行符（LF / CRLF）与缩进；未识别的字段会原样保留，旧版本插件打开新文件也不会丢失内容。

文本模式与 JSON 校验

ERD Studio 为 *.erd 注册了 erd 语言：复用内置 JSON 语法高亮，并通过 jsonLanguageParticipants 接入 JSON 语言服务（打开 .erd 时会激活内置 JSON 扩展），因此在文本编辑器中同样拥有 JSON 格式化、折叠以及基于内置 Schema 的校验。Schema 只对 format 为 erd-studio 的文件生效，不会误报其他工具基于 JSON 的 .erd 文件；DBeaver（XML）与 bigER（DSL）的 .erd 文件打开时会切换为 XML / 纯文本语言，不会按 JSON 高亮或报错。JSON 语法错误只报告一次：由 JSON 语言服务报告，该服务被禁用（json.validate.enable）时由 ERD Studio 报告。无论是否打开文本编辑器，ERD Studio 自己的语义校验结果都会出现在 问题 面板，使用 VS Code 的显示语言，并定位到所属实体。为保持"一个对象一行"的规范布局，.erd 默认关闭保存时格式化。

文本编辑器的文档符号由 ERD Studio 提供：面包屑与 大纲 视图列出表及其列、索引与 CHECK 约束，以及关系、枚举、便签与分组（其他工具的 JSON 文件显示原始 JSON 树）。JSON 语言服务还会为每个 JSON 键生成符号；ERD Studio 通过 erd 语言的默认设置（"[erd]": { "outline.show…": false, "breadcrumbs.show…": false }）在大纲与面包屑中隐藏这些种类（模块、数组、字符串、数字、布尔值、变量），你可以在自己的设置中覆盖。VS Code 的 转到编辑器中的符号（@）不应用这些过滤，因此其中仍会列出 JSON 键——输入 @: 可按种类分组，ERD Studio 的条目（类、字段、键、包等）与 JSON 条目分开显示。文件很大时 JSON 语言服务可能提示符号数量超出上限（json.maxItemsComputed），ERD Studio 自己的符号不受此限制。

与 git 协作

• ER 图就是文本：提交、对比、合并、blame 一切照常。
• 历史版本（git: 等只读 scheme、PR 与合并视图）默认用 文本编辑器 打开，源代码管理中看到的是 JSON diff；从只读位置打开的图以只读方式显示。
• 含合并冲突标记、JSON 非法或格式版本过新的文件以只读方式打开并给出说明，绝不会被自动覆写。在文本编辑器中修好后，图会立即刷新。

与 ERD Editor、ERD Designer 共存

ERD Editor、ERD Designer 等扩展同样认领 .erd 扩展名，VS Code 可能会询问使用哪个编辑器。ERD Studio 能识别它们的文件（以及 DBeaver、bigER 的 .erd 文件），显示说明页和 用文本编辑器打开 按钮，绝不改动这些文件。指定默认编辑器：

// settings.json
"workbench.editorAssociations": {
  "*.erd": "erdStudio.editor"
}

如需在某个目录继续使用其他工具，可用路径模式，例如 "legacy/**/*.erd": "editor.erd"（ERD Editor 的 viewType）。随时可以通过 使用...重新打开编辑器 切换。

开发

浏览器调试页用模拟宿主运行真实的 webview。URL 参数：doc=sample|empty|large（配合 n=200）、theme=dark|light|hc、locale=en|zh-cn、readonly=1、parseError=1、conflict=1、foreign=erd-editor|erd-designer|dbeaver|biger|unknown-json、dialect=…、fileName=…、notation=crowsfoot|labels，以及任意编辑器设置（如 density=comfortable）。自动化测试通过 window.__erdHarness（getDocument()、sendCommand()、undo()、redo()、externalEdit()、flush('manual' | 'auto')、openImportSql(sql, dialect?, fileName?)、setNextSqlFile()、messages、sent、viewState、lastImage、lastTextExport 等）驱动。webview 上报的视图状态与 VS Code 中一样经过清洗，并保存在 sessionStorage 中，刷新页面后恢复。

许可证

MIT