ERD Editor

Entity-Relationship Diagram Editor for Visual Studio Code

Design a database schema visually, right next to your code. Diagrams are plain .erd.json files in your repository, and the editor never connects to a database.

Getting started

1. Create an empty file with a .erd.json extension and open it. It opens in ERD Editor.
2. Add a table with Alt+N and a column with Alt+Enter, or right-click the canvas and choose Import to start from a .sql, GraphQL, DBML or AML file.
3. Save as you save any file. Undo and redo are the diagram's own history, not VS Code's.

The icon in the editor title bar switches between the diagram and its JSON source; hold Alt to open the other view to the side. Source Control shows a changed diagram as a JSON text diff.

Features

• Design — tables, columns, memos and table groups, four relationship cardinalities, ON DELETE and ON UPDATE, alternate keys, Auto Layout
• Naming standards — logical and physical names, physical names and data types derived from word, term and domain dictionaries, which have their own tab with CSV import and export and checks
• Import — SQL DDL, GraphQL SDL, DBML and AML, replacing the diagram or adding to it
• Export — DDL for eight databases, code in 22 languages and ORMs, PNG and SVG
• Navigate — command palette (Ctrl/Cmd+K), an Explorer tree with find and replace, Graph and Flow views
• History — undo and redo, time travel through the session, a diff viewer against another file
• 25 languages and a System, Light or Dark theme, following VS Code by default
• Coding agents — Claude Code or Codex edits the diagram live on the canvas (below)

Databases: Databricks, MariaDB, MSSQL, MySQL, Oracle, PostgreSQL, Snowflake, SQLite

Code: TypeScript, GraphQL, C#, Java, JPA, Kotlin, Scala, Go, SQLAlchemy, TypeORM, Sequelize, Drizzle, DBML, AML, Mermaid, PHP, Doctrine, Rust, SeaORM, Swift, Zod, JSON Schema

Every feature step by step: the Editing Guide.

Coding agents

A coding agent such as Claude Code or Codex edits the diagrams in your workspace through the ERD Editor MCP server. Each change shows up on the canvas as it happens and stays unsaved until you, Auto Save or the agent saves it, and the agent's undo reverts only its own edits.

Add it with one command, in your project folder (Node.js 22.12 or later):

# Claude Code
claude mcp add --transport stdio erd-editor -- npx -y @dineug/erd-editor-mcp
# Codex
codex mcp add erd-editor -- npx -y @dineug/erd-editor-mcp

Then trust the workspace, start the agent in the same folder and ask, for example "Add a reviews table to schema.erd.json, related to users and products". In a folder with no .erd.json file yet, create one in VS Code first, or the agent's new diagram stays on disk without opening.

The dineug.erd-editor.agentHub.enabled setting turns the connection off for the window; the agent can then read the diagrams but never writes them. Other clients and the tool list are in the MCP server's README.

Settings

auto follows VS Code's color theme and display language. The editor's theme builder and language button write their picks back to these settings.

Documentation

• Editing Guide — every editor feature
• MCP — the MCP server and its tools
• Documentation

Also available

• Web app — installable PWA with real-time collaboration
• Google Drive app — open and save diagrams in Google Drive
• IntelliJ plugin
• Obsidian plugin
• @dineug/erd-editor — the editor as a custom element for your own app
• @dineug/erd-editor-mcp — the MCP server coding agents edit diagrams through

Issues

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

License

MIT © SeungHwan-Lee