ERD Editor

Entity-Relationship Diagram Editor for Visual Studio Code

Design a database schema visually, right next to your code. Diagrams are plain JSON files in your repository, so they diff and review like any other source file.

The editor never connects to a database — it reads and writes files only. You bring a schema in from a .sql dump or a GraphQL SDL file, and take one back out as DDL.

Getting started

Create an empty file with a .erd.json extension and open it in VS Code. The diagram opens in the ERD Editor by default.

Editing marks the tab dirty like any other file; the diagram is written to disk when you save. Undo and redo are the diagram editor's own history, not VS Code's.

On the empty canvas, Alt+N adds a table and Alt+Enter adds a column to it. To start from a schema you already have, right-click the canvas and choose Import → Schema SQL for a .sql dump, or Import → GraphQL for a .graphql, .gql or .graphqls file. Either one replaces the diagram in one undoable step.

Use the icon in the editor title bar to switch between the diagram and its JSON source — hold Alt while clicking to open the other view to the side instead. These are title-bar actions only; they do not appear in the Command Palette.

Features

• Visual schema design — tables, columns, memos, and four relationship cardinalities (zero-one, zero-N, one-only, one-N)
• SQL DDL import — bring in a .sql dump from any of the seven vendors below. The parser reads CREATE TABLE, CREATE INDEX and ALTER TABLE constraints and skips what it does not recognize, so an awkward dump imports partially rather than failing outright
• GraphQL SDL import — bring in a schema from any tool that emits SDL. Object types become tables, scalars map to the diagram's own dialect, and the fields pointing at another type become the relationships; the generated types an API layer wraps its rows in are left out rather than drawn as tables
• DBML import — bring in a .dbml file written for dbdiagram.io or dbdocs.io, or emitted by sql2dbml or prisma-dbml-generator. Tables, columns, indexes, enums and every Ref spelling arrive; a Project, TableGroup or sticky Note is skipped rather than refused
• AML import — bring in an .aml file written for Azimutt, in either the v2 or the legacy v1 spelling. Entities, attributes, indexes, enums and every relation arrow arrive; a check, a struct type and a view are skipped rather than refused
• SQL DDL export — Databricks, MariaDB, MSSQL, MySQL, Oracle, PostgreSQL, Snowflake, SQLite
• Code generation — TypeScript, GraphQL, C#, Java, JPA, Kotlin, Scala, Go, SQLAlchemy, TypeORM, Sequelize, Drizzle, DBML, AML
• Visualization — a force-directed view of how the tables actually relate
• Export — .erd.json, .sql, .png
• Quick search — Ctrl/Cmd+K to jump to any table, or run any editor command
• Time travel — replay this editing session's history on the canvas and jump to any point in it
• Undo / redo and a built-in theme builder

Keeping diffs clean

By default the document also stores the canvas scroll position and zoom level, so panning around shows up in git diff. Turn off Save Scroll Information and Save Zoom Information in the editor's settings to keep diffs limited to schema changes.

Multiple editors per document

The same document can be open in several editors at once, and they stay in sync.

Settings

Changing any of these re-themes every open diagram immediately. auto follows your VS Code color theme and switches with it; note that the default is dark whichever theme you use.

The theme builder inside the editor changes these same three values and writes them back here, so a theme you pick on the canvas persists.

Documentation

• Editing Guide — editing, import and export, relationships, quick search, visualization, code generation, settings
• Documentation

Also available

• Web app — installable PWA with real-time collaboration
• IntelliJ plugin
• @dineug/erd-editor — the editor as a custom element for your own app

Issues

Found a bug or want a feature? Open an issue.

License

MIT © SeungHwan-Lee