erd-editor

Overview of erd-editor

What it is

ERD Editor is a visual database schema design tool that runs as a web app (PWA), a Google Drive editor, a VS Code extension, a JetBrains IDE plugin, an Obsidian plugin, a custom HTML element, and an MCP server for coding agents. It uses a single .erd.json file format across all platforms. The project is open source under the MIT license.

Key features

• Design tables, columns, memos, table groups, four relationship cardinalities, ON DELETE/UPDATE, alternate keys, and Auto Layout.
• Import SQL DDL, GraphQL SDL, DBML, and AML; export DDL for eight databases (Databricks, MariaDB, MSSQL, MySQL, Oracle, PostgreSQL, Snowflake, SQLite) and code in 22 languages/ORMs (TypeScript, GraphQL, C#, Java, JPA, Kotlin, Scala, Go, SQLAlchemy, TypeORM, Sequelize, Drizzle, DBML, AML, Mermaid, PHP, Doctrine, Rust, SeaORM, Swift, Zod, JSON Schema), plus PNG and SVG.
• Navigate via command palette (Ctrl/Cmd+K), Explorer tree with find/replace, Graph and Flow views.
• Undo/redo, time travel through session history, and a diff viewer against another file.
• 25 UI languages, System/Light/Dark theme with custom gray and accent colors.
• Real-time collaboration over WebRTC with AES-GCM encryption; coding agents can join as collaborators via the MCP server.

Use cases

• Visually design new database schemas or reverse-engineer existing ones by importing DDL, GraphQL, DBML, or AML.
• Export schema definitions as DDL for multiple databases or as code in various programming languages and ORMs.
• Collaborate with team members in real time on erd-editor.io or via shared sessions.
• Embed the editor in custom web applications using the `` custom element.
• Let coding agents (Claude Code, Codex, etc.) modify the schema live through the MCP server.

Getting started

Open erd-editor.io in a browser – no installation required. For IDE integration, create an empty .erd.json file and open it with the respective extension. To embed in a web app:shnpm install @dineug/erd-editor``````jsimport '@dineug/erd-editor';const editor = document.createElement('erd-editor');Object.assign(editor.style, { display: 'block', width: '100%', height: '100vh' });document.body.appendChild(editor);To add a coding agent (requires Node.js 22.12+):sh# Claude Codeclaude mcp add --transport stdio erd-editor -- npx -y @dineug/erd-editor-mcp# Codexcodex mcp add erd-editor -- npx -y @dineug/erd-editor-mcp

License and pricing

Licensed under MIT. The software is open source and free to use. No pricing information is provided beyond the open source license.

Based on the project's public README and repository metadata.