Introduction

erd-editor is an Entity-Relationship Diagram editor. It is available as a web app, a Google Drive app, a VS Code extension, an IntelliJ plugin, an Obsidian plugin, and as an <erd-editor> custom element you can embed in your own page, with <erd-viewer> beside it to show a diagram read-only. A site that loads no script of its own can frame a read-only diagram from erd-editor.io/embed instead. It is one editor and one document format across all of them.

Where to Get It

Platform	Install	What you get
Web app	erd-editor.io	Installable PWA, works offline, real-time collaboration
Google Drive	Google Workspace Marketplace	Adds ERD Editor to Drive's Open with and New menus, and saves back to the same file
VS Code	Marketplace	Opens .erd.json files in a custom editor
IntelliJ	JetBrains Marketplace	The same editor, for IntelliJ-based IDEs
Obsidian	Community plugins	Opens .erd and .erd.json files in a vault tab, desktop only
Your page	npm install @dineug/erd-editor	The framework-free <erd-editor> custom element, and <erd-viewer>, which shows a diagram read-only — see Install and ErdViewerElement
Any site	erd-editor.io/embed	A read-only diagram in an iframe, from a document's URL, with no code — see Embedding
Coding agents	@dineug/erd-editor-mcp	An MCP server that lets Claude Code, Codex, or another client edit a diagram live in VS Code, a JetBrains IDE, or Obsidian, or in the file itself

To try it in an IDE, create an empty file with a .erd.json extension and open it. In Obsidian, run ERD Editor: Create new diagram from the command palette, or choose New ERD from a folder's context menu in the file explorer. Either one creates an empty .erd file and opens it. In Google Drive, choose New → More → ERD Editor, then sign in with Google. ERD Editor reaches only the files you create or open with it. In the web app, Google Drive, VS Code, a JetBrains IDE, and Obsidian, a new, empty diagram opens on the welcome screen, a menu of first steps: New Table, New Memo, Import, Command Palette, and Shortcuts. Scrolling, zooming, switching tabs, and switching the Name View leave a new diagram's empty file as it is, since every lock is on in a new diagram. See Lock. VS Code opens an ERD file as JSON text in Source Control, Local History, Compare with Saved, the edit reviews of VS Code's chat and of coding agents such as GitHub Copilot and Claude Code, and the revision views of extensions such as GitLens, GitHub Pull Requests, and Git Graph, so a change diffs line by line. Reopen Editor With... shows a Git revision as a read-only diagram.

After updating the Obsidian plugin, restart Obsidian: until then, the window keeps the editor that the earlier version loaded. Update ERD Editor and @dineug/erd-editor-mcp wherever you share diagrams. A release from before the Dictionary tab, or an earlier MCP server editing a file on disk, saves the diagram without its logical names, domain links, and dictionaries. A release from before table groups also shows no primary key icons in a file the current release saved, and saving the file there drops its table groups and Schema SQL scripts. A file an earlier release saved is rewritten in the current form on the first change the file keeps — see Lock. That save also drops the empty text, lists, and collections the earlier release wrote, so it changes more of the file than the edit does. Until then, a JSON editor that validates a file from a release before table groups against its $schema reports it as invalid.

What It Does

• Draw tables, columns, and memos on an unbounded canvas, and connect them with four relationship types: Zero One, Zero N, One Only, One N. See Editing Start. Indexes are defined in the table's property panel. A unique index over two or more columns is an alternate key, and with the Alternate Key view option on, the diagram marks its columns AK1.1, AK1.2, and so on. See Indexes and Alternate Keys.
• End a relationship on columns a table already has: while you draw one with a mouse or a pen, Map to existing columns beside the table it ends on pairs the parent's key with that table's columns, and Create new columns adds new ones. Map Columns in a relationship's context menu changes its columns later. See Map Columns. A relationship can also carry ON DELETE and ON UPDATE actions. See ON DELETE and ON UPDATE.
• Edit quickly: Alt + N adds a table; Alt + Enter adds a column; Alt + K toggles the primary key on the focused column, or on every selected column when it is one of them; and Delete or Backspace deletes the selection. Each is one undo step. See Shortcuts. The canvas toolbar at the bottom of the canvas adds a table or a memo with one click too.
• Color a table, memo, or table group from a picker with presets and the colors the diagram already uses, and take a color off with No color or Remove color. See Table and Memo Color Specification.
• Gather related tables into table groups: a box behind them that you can name and color. Draw one with Alt + G or with New Table Group from the canvas context menu, the canvas toolbar, or Quick Search, or make one from the selected tables with T then G or Group selected tables in their context menu. A table joins a group when you drop it inside and leaves when you drop it outside, and dragging a group by its title bar moves its tables with it. DBML carries groups both ways, as TableGroup blocks.
• Give tables and columns logical names, the names people read, such as Customer Name for CUST_NM, beside the physical names that Schema SQL and the Code Generator write. The Name View (Physical Names, Logical Names, or Both Names) decides which of them the canvas draws, and most other places that name a table or a column, such as the Explorer's table and column rows, Flow, and an exported image, follow it. Pick it from the canvas toolbar's Name View button, the canvas context menu, the Visualization toolbar in Flow, or Quick Search.
• Keep the diagram's naming standard on the Dictionary tab. Its Domains, Words, and Terms sheets are searched, sorted, and edited like a spreadsheet, each with an undo history of its own. The sheets import and export CSV: an import reads the editor's own layout or that of Korea's public data standard, in UTF-8 or EUC-KR, and an export writes the editor's own. The logical name cell completes term names. A logical name gives its table or column a physical name from the matching term, or from the abbreviations of the words it splits into, until you write the name yourself. After a word or term changes, Derive Physical Names Again derives the names again, names you wrote yourself included. A column linked to a domain, by hand or by its term, takes the domain's data type and follows its changes, and the Domain view option shows each column's domain. The Checks sheet lists forbidden, unregistered, and synonym words, duplicate names, unknown domains, physical names that differ from their term's, and column types that differ from their domain's. The canvas colors the logical and physical names that the word and term checks flag.
• Import an existing schema from json, Schema SQL, GraphQL, DBML, or AML. See Importing or Exporting Files. A Schema SQL, GraphQL, DBML, or AML file arrives with its tables laid out along their relationships, or in rows when it has none. Import and Add adds a file below the diagram instead of replacing it.
• Export the diagram as json; as Schema SQL from the Schema SQL tab, saved as a .sql file or copied; or from the Export image dialog as a PNG or SVG image, or a PNG on the clipboard.
• Show a diagram read-only on another site: frame erd-editor.io/embed with the URL of a file, one on GitHub included, or load the <erd-viewer> element in your own page. A reader pans, zooms, searches, and lights relationships, and nothing edits the diagram.
• Write Schema SQL in the syntax of eight database vendors: Databricks, MSSQL, MariaDB, MySQL, Oracle, PostgreSQL, Snowflake, and SQLite. See Table-related Functions. The Schema SQL tab's options panel picks the statements, the header, and the table groups to write, can write logical names into empty comments, and keeps SQL of your own, saved in the diagram, to write before and after the tables.
• Generate code for twenty-two targets: the languages C#, Go, Java, Kotlin, PHP, Rust, Scala, Swift, and TypeScript; the ORMs Doctrine, Drizzle, JPA, SeaORM, Sequelize, SQLAlchemy, and TypeORM; and AML, DBML, GraphQL, JSON Schema, Mermaid, and Zod. The Code Generator tab's options panel picks the language, the database, and the name cases, and the code is saved as a file with the language's extension or copied. See Code Generator.
• Read the schema in Visualization, as a force-directed Graph or as a Flow of table cards laid out along their relationships, where hovering a table lights up everything it touches. Press Alt + F on the ERD tab to focus on the selected tables and the tables related to them. In Flow, Previous table and Next table step back and forward through what Flow has been narrowed to, as the undo and redo keys do there.
• Work on a canvas with no edges: pan wherever the diagram goes, zoom from 10% to 150% with Ctrl + Wheel (⌘ + Wheel on Mac), the keyboard, or a pinch, and clear everything but the diagram with zen mode. A drag with the middle mouse button pans from anywhere on the canvas, even over a table. See Getting Around the Canvas.
• Arrange a whole diagram in one step with Auto Layout: a force simulation, a left-to-right flow, or a tree in either direction, each table group kept together.
• Run a command from anywhere with Quick Search, or start the search with #, @, or : to jump to a table, a column, or a comment or memo; # and @ match logical names too. Step through the edit history with Undo, Redo, replay this session's history on the canvas with Time Travel, or compare the diagram with another .json file in the Diff Viewer. Its tree, beside the two versions, lists the tables, columns, indexes, foreign keys, memos, and table groups that were added, modified, deleted, or renamed.
• Browse the diagram in the Explorer, a tree docked at the left of the canvas: the tables, each with its columns, indexes, and foreign keys, then the table groups and the memos. Click a row to go to what it stands for on the canvas; a foreign key row lights its relationship as well. The toolbar's Explorer button, next to Search, opens and closes it.
• Find text with Find and Replace at the top of the Explorer. It searches the names of tables, columns, indexes, and table groups, the logical names of tables and columns, and, once you turn them on, comments and memos, and shows the matches in the Explorer's tree. Replace one match or all of them; Preserve Case gives each replacement the case of the text it replaces. Ctrl + F (⌘ + F on Mac) opens the Explorer with the caret in the Find field, and pressing it again closes the Explorer.
• Use the editor in 25 languages, picked from the toolbar's Display Language button or from Quick Search. System follows the language of the browser or the host app, and Arabic, Hebrew, and Persian lay the editor out right to left while the diagram stays left to right. Only the editor's own text changes: names, SQL, and generated code stay as written. The toolbar's theme builder picks the appearance (System, Light, or Dark), a gray color, and an accent color. See Language and Theme.
• Keep diffs clean: the scroll position and zoom, the open tab, the Code Generator's language and name cases, the bracket type, and the Name View are locked by default, so the file keeps the values they had when locked, and scrolling, zooming, switching tabs, or switching the Name View never changes it. The file is written in a fixed order, with one line for each dictionary row, and leaves out measured widths, the stacking order, connector anchors, removed items, an item's empty text, and the lists and collections of a kind the diagram holds none of, so opening a diagram and closing it without an edit leaves the file as it was.
• Let a coding agent such as Claude Code or Codex edit the diagram through the MCP server: live in VS Code, Obsidian, or a JetBrains IDE, where each change shows up on the canvas as it happens, or in the file itself. It can also set logical names and column domains, edit the dictionaries, derive physical names again, and list what the Checks sheet finds.
• Edit together in real time in the web app (experimental). Sessions are peer-to-peer and end-to-end encrypted, so no server holds your schema, and peers see each other's cursors, focus, and selections. In your own page, getSharedStore() gives you the same action stream over the transport of your choice, and @dineug/erd-editor-yjs keeps the diagram in step through a Yjs document and any provider that carries it, offline edits and presence included.

Start with the Editing Guide.

Reason Behind This Project

Existing modeling tools didn't provide the level of user experience I desired.
Hence, I initiated this project to deliver the ultimate user experience.
The project's top priority is the user's editing experience.
It will offer you an astounding experience in editing.