Introduction

erd-editor is an Entity-Relationship Diagram editor. It is available as a web app, a VS Code extension, an IntelliJ plugin, and as an <erd-editor> custom element you can embed in your own page. 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
VS Code	Marketplace	Opens .erd.json files in a custom editor
IntelliJ	JetBrains Marketplace	The same editor, for IntelliJ-based IDEs
Your page	npm install @dineug/erd-editor	The framework-free <erd-editor> custom element — see Install

To try it in an IDE, create an empty file with a .erd.json extension and open it.

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. See Indexes.
• Import an existing schema from json, Schema SQL, GraphQL, DBML, or AML. See Importing or Exporting Files.
• Export the diagram as json, Schema SQL, or png.
• Write Schema SQL in the syntax of eight database vendors: Databricks, MSSQL, MariaDB, MySQL, Oracle, PostgreSQL, Snowflake, and SQLite. See Table-related Functions.
• Generate code for fourteen targets: C#, Go, Java, Kotlin, Scala, TypeScript, Drizzle, JPA, Sequelize, SQLAlchemy, TypeORM, AML, DBML, and GraphQL. 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.
• 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. 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.
• Find a table or run a command from anywhere with Quick Search, and step through the edit history with Undo, Redo.
• Let a coding agent such as Claude Code or Codex edit the diagram through the MCP server: live in VS Code, where each change shows up on the canvas as it happens, or in the file itself.
• Edit together in real time (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.

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.