ERD Editor
Design database schemas visually: in your browser, in your IDE, or by asking your coding agent
Open erd-editor.io in your browser, nothing to install, or get it for VS Code, JetBrains IDEs, Obsidian and Google Drive.
One editor and one .erd.json file wherever you work: on the web, in Google Drive, VS Code,
JetBrains IDEs and Obsidian, inside your own app, and in your coding agent's hands.
Features
- Design — tables, columns, memos and table groups, four relationship cardinalities, ON DELETE and ON UPDATE, alternate keys, Auto Layout
- 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 with your own gray and accent colors
- Collaboration — live sessions on erd-editor.io, and coding agents that edit beside you
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
Ask Claude Code, Codex or any MCP client to change the schema, and watch it happen on the canvas.
@dineug/erd-editor-mcp gives the agent one tool per editing operation.
When VS Code, Obsidian or a JetBrains IDE holds the diagram, the agent joins it as one more
collaborator, and its undo reverts only its own edits; with no editor, it edits the file on disk.
An editor with its connection off, or an untrusted workspace or project, lets the agent read but
refuses its edits. It needs Node.js 22.12 or later. Add it with one command, in your project folder:
# 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
Other clients and the tool list: its README.
Where to use it
In an IDE, create an empty .erd.json file and open it. In Obsidian, run
ERD Editor: Create new diagram; in Google Drive, choose New → More → ERD Editor.
Real-time collaboration
Every ERD Editor shares its edits as a stream of actions, which keeps several views of one diagram in sync, such as browser tabs or split editors, and lets a coding agent join as one more collaborator.
On erd-editor.io, choose Start session from the collaboration button in the sidebar and share the link: everyone who opens it edits with you. The link is the only key, so share it only with people you would let edit. The session lives in the host's browser and ends when the host closes their last tab, so a guest who wants the diagram exports it first.
Peers connect over WebRTC, with the diagram and every edit encrypted by AES-GCM. The signaling relay never sees plaintext, and the room key lives in the URL fragment, which browsers leave out of every request.
flowchart TB
subgraph clientA["Client A"]
bcA["Broadcast Channel"]
tabA1["Tab (leader)"]
tabA2["Tab"]
swA["Shared Worker"]
idbA[("IndexedDB")]
bcA <--> tabA1
bcA <--> tabA2
tabA1 <--> swA
tabA2 <--> swA
swA <--> idbA
end
subgraph clientB["Client B (guest)"]
tabB1["Tab"]
end
relay["Signaling Relay (nostr / mqtt)"]
tabA1 <-->|"WebRTC (AES-GCM)"| tabB1
tabA1 -. "signaling" .-> relay
tabB1 -. "signaling" .-> relay
Embedding
npm install @dineug/erd-editor
import '@dineug/erd-editor';
const editor = document.createElement('erd-editor');
// the editor fills its container, and a custom element is inline by default
Object.assign(editor.style, { display: 'block', width: '100%', height: '100vh' });
document.body.appendChild(editor);
It works from any framework or from none. Attributes and the element API:
packages/erd-editor.
Documentation
- Editing Guide — every editor feature
- Element API —
<erd-editor>for your own app - MCP — the MCP server and its tools
- Documentation
Packages
A pnpm workspace. @dineug/erd-editor and
@dineug/erd-editor-mcp are published to npm, the three plugins ship
through their stores, app is erd-editor.io, and the rest are private libraries those builds take
in, all but grid, the canvas grid, which none of them takes in yet.
Development
You need Node 22.22.1+, 24.11+ or 26+ (.nvmrc pins 22.23.2), pnpm 10.34.3 and Git 2.32+; the
IntelliJ plugin also needs JDK 17+.
pnpm install
pnpm --filter @dineug/erd-editor exec playwright install --with-deps chromium # for pnpm test
pnpm --filter @dineug/erd-editor-app dev # the web app
pnpm check # format and lint
pnpm test # every package's type check and specs
pnpm build
The IntelliJ plugin builds with Gradle from packages/intellij-plugin,
and the e2e suites run apart from pnpm test. AGENTS.md has the rest: which checks a
change runs, coverage, the e2e suites and the commit rules.
Contributing
Issues and pull requests are welcome. Commit messages follow Conventional Commits.
License
MIT © SeungHwan-Lee