Einführung

erd-editor ist ein Editor für Entity-Relationship-Diagramme. Er ist als Web-App, als App für Google Drive, als Erweiterung für VS Code, als Plugin für IntelliJ, als Plugin für Obsidian und als Custom Element <erd-editor> verfügbar, das Sie in Ihre eigene Seite einbetten können. Überall ist es derselbe Editor mit demselben Dokumentformat.

Bezugsquellen

Plattform	Installation	Was Sie erhalten
Web-App	erd-editor.io	Installierbare PWA, funktioniert offline, Zusammenarbeit in Echtzeit
Google Drive	Google Workspace Marketplace	Fügt ERD Editor den Menüs Open with und New von Drive hinzu und speichert in dieselbe Datei zurück
VS Code	Marketplace	Öffnet Dateien .erd.json in einem benutzerdefinierten Editor
IntelliJ	JetBrains Marketplace	Derselbe Editor für IDEs auf Basis von IntelliJ
Obsidian	Community plugins	Öffnet Dateien .erd und .erd.json in einer Registerkarte des Vaults, nur auf dem Desktop
Ihre Seite	npm install @dineug/erd-editor	Das Custom Element <erd-editor>, ganz ohne Framework – siehe Installation
Coding-Agenten	@dineug/erd-editor-mcp	Ein MCP-Server, mit dem Claude Code, Codex oder ein anderer Client ein Diagramm live in VS Code, einer JetBrains-IDE oder Obsidian bearbeiten kann, oder auch direkt in der Datei

Um den Editor in einer IDE auszuprobieren, erstellen Sie eine leere Datei mit der Endung .erd.json und öffnen Sie sie. Führen Sie in Obsidian ERD Editor: Create new diagram aus der Befehlspalette aus, oder wählen Sie New ERD im Kontextmenü eines Ordners im Dateiexplorer. Beide Wege erstellen eine leere Datei .erd und öffnen sie. Wählen Sie in Google Drive New → More → ERD Editor, und melden Sie sich dann mit Google an. ERD Editor greift nur auf die Dateien zu, die Sie damit erstellen oder öffnen. In der Web-App, in Google Drive, VS Code, einer JetBrains-IDE und Obsidian zeigt ein neues, leeres Diagramm beim Öffnen den Willkommensbildschirm, ein Menü mit ersten Schritten: New Table, New Memo, Import, Command Palette und Shortcuts. Scrollen, Zoomen und das Wechseln von Registerkarten lassen die leere Datei eines neuen Diagramms unverändert, da in einem neuen Diagramm alle Sperren eingeschaltet sind. Siehe Sperren. VS Code öffnet eine ERD-Datei als JSON-Text in Source Control, Local History, Compare with Saved, in den Änderungsüberprüfungen des Chats von VS Code und von Coding-Agenten wie GitHub Copilot und Claude Code sowie in den Revisionsansichten von Erweiterungen wie GitLens, GitHub Pull Requests und Git Graph, sodass sich eine Änderung Zeile für Zeile vergleichen lässt. Reopen Editor With... zeigt eine Git-Revision als schreibgeschütztes Diagramm.

Starten Sie Obsidian nach dem Aktualisieren des Obsidian-Plugins neu: Bis dahin behält das Fenster den Editor, den die vorherige Version geladen hat. Aktualisieren Sie ERD Editor überall dort, wo Sie Diagramme teilen: Eine Version aus der Zeit vor den Tabellengruppen zeigt in einer Datei, die mit der aktuellen Version gespeichert wurde, keine Primärschlüsselsymbole, und wenn die Datei dort gespeichert wird, gehen ihre Tabellengruppen und die Skripte von Schema SQL verloren. Eine Datei, die mit einer solchen Version gespeichert wurde, wird bei der ersten Änderung, die in die Datei übernommen wird, in der aktuellen Form neu geschrieben – siehe Sperren. Bis dahin meldet ein JSON-Editor, der sie anhand ihrer Eigenschaft $schema validiert, sie als ungültig.

Funktionsumfang

• Zeichnen Sie Tabellen, Spalten und Notizen auf einer unbegrenzten Zeichenfläche, und verbinden Sie sie mit vier Beziehungstypen: Zero One, Zero N, One Only, One N. Siehe Mit dem Bearbeiten beginnen. Indizes werden in den Tabelleneigenschaften der Tabelle definiert. Ein eindeutiger Index über zwei oder mehr Spalten ist ein Alternativschlüssel, und bei eingeschalteter Ansichtsoption Alternate Key markiert das Diagramm dessen Spalten mit AK1.1, AK1.2 und so weiter. Siehe Indizes und Alternativschlüssel.
• Lassen Sie eine Beziehung an Spalten enden, die eine Tabelle bereits hat: Während Sie eine Beziehung mit der Maus oder einem Stift zeichnen, ordnet Map to existing columns neben der Tabelle, an der sie endet, den Schlüssel der Elterntabelle den Spalten dieser Tabelle zu, und Create new columns fügt neue hinzu. Map Columns im Kontextmenü einer Beziehung ändert ihre Spalten nachträglich. Siehe Spalten zuordnen. Eine Beziehung kann außerdem Aktionen für ON DELETE und ON UPDATE haben. Siehe ON DELETE und ON UPDATE.
• Bearbeiten Sie zügig: Alt + N fügt eine Tabelle hinzu; Alt + Enter fügt eine Spalte hinzu; Alt + K schaltet den Primärschlüssel der fokussierten Spalte ein und aus oder, wenn sie zu den ausgewählten Spalten gehört, den jeder ausgewählten Spalte; Delete oder Backspace löscht die Auswahl. Jede dieser Aktionen ist ein Rückgängig-Schritt. Siehe Tastenkombinationen. Die Symbolleiste der Zeichenfläche am unteren Rand der Zeichenfläche fügt ebenfalls mit einem Klick eine Tabelle oder eine Notiz hinzu.
• Färben Sie eine Tabelle, eine Notiz oder eine Tabellengruppe mit einer Farbauswahl ein, die vordefinierte Farbfelder und die bereits im Diagramm verwendeten Farben bietet, und entfernen Sie eine Farbe mit No color oder Remove color. Siehe Farben für Tabellen und Notizen festlegen.
• Fassen Sie zusammengehörige Tabellen in Tabellengruppen zusammen: Eine Tabellengruppe ist ein Rahmen hinter den Tabellen, den Sie benennen und einfärben können. Zeichnen Sie eine Gruppe mit Alt + G oder mit New Table Group aus dem Kontextmenü der Zeichenfläche, der Symbolleiste der Zeichenfläche oder der Schnellsuche, oder erstellen Sie eine aus den ausgewählten Tabellen mit T und dann G oder mit Group selected tables in deren Kontextmenü. Eine Tabelle wird in eine Gruppe aufgenommen, wenn Sie sie darin ablegen, und verlässt sie, wenn Sie sie außerhalb ablegen, und wenn Sie eine Gruppe an ihrer Titelleiste ziehen, bewegen sich ihre Tabellen mit. DBML überträgt Gruppen in beide Richtungen, als Blöcke TableGroup.
• Importieren Sie ein vorhandenes Schema aus json, Schema SQL, GraphQL, DBML oder AML. Siehe Dateien importieren oder exportieren. Bei einer Datei in Schema SQL, GraphQL, DBML oder AML werden die Tabellen entlang ihrer Beziehungen angeordnet oder, wenn es keine Beziehungen gibt, in Zeilen. Import and Add fügt eine Datei unterhalb des Diagramms hinzu, statt es zu ersetzen.
• Exportieren Sie das Diagramm als json; als Schema SQL über die Registerkarte Schema SQL, als Datei .sql gespeichert oder kopiert; oder über den Dialog Export image als PNG- oder SVG-Bild oder als PNG in der Zwischenablage.
• Erzeugen Sie Schema SQL in der Syntax von acht Datenbanksystemen: Databricks, MSSQL, MariaDB, MySQL, Oracle, PostgreSQL, Snowflake und SQLite. Siehe Tabellenfunktionen. Im Optionsbereich der Registerkarte Schema SQL wählen Sie die Anweisungen, den Vorspann und die auszugebenden Tabellengruppen aus und hinterlegen eigenes SQL, das im Diagramm gespeichert und vor und nach den Tabellen ausgegeben wird.
• Generieren Sie Code für zweiundzwanzig Ziele: die Sprachen C#, Go, Java, Kotlin, PHP, Rust, Scala, Swift und TypeScript; die ORMs Doctrine, Drizzle, JPA, SeaORM, Sequelize, SQLAlchemy und TypeORM; dazu AML, DBML, GraphQL, JSON Schema, Mermaid und Zod. Im Optionsbereich der Registerkarte Codegenerator wählen Sie die Sprache, die Datenbank und die Schreibweisen der Namen aus, und der Code wird als Datei mit der Endung der Sprache gespeichert oder kopiert. Siehe Codegenerator.
• Betrachten Sie das Schema in der Visualisierung, in Graph als kräftebasierten Graphen oder in Flow als Tabellenkarten, die entlang ihrer Beziehungen angeordnet sind, wobei alles, was mit einer Tabelle verbunden ist, hervorgehoben wird, wenn Sie mit dem Zeiger auf sie zeigen. Drücken Sie Alt + F auf der Registerkarte ERD, um auf die ausgewählten Tabellen und die mit ihnen verbundenen Tabellen zu fokussieren.
• Arbeiten Sie auf einer Zeichenfläche ohne Ränder: Verschieben Sie die Ansicht, wohin auch immer das Diagramm reicht, zoomen Sie von 10% bis 150% mit Ctrl + Wheel (⌘ + Wheel auf dem Mac), der Tastatur oder einer Pinch-Geste, und blenden Sie mit dem Zen-Modus alles außer dem Diagramm aus. Ein Ziehen mit der mittleren Maustaste verschiebt die Ansicht von jeder Stelle der Zeichenfläche aus, sogar über einer Tabelle. Siehe Auf der Zeichenfläche navigieren.
• Ordnen Sie ein ganzes Diagramm in einem Schritt mit dem Automatischen Layout an: als Kräftesimulation, als Flow von links nach rechts oder als Baum in einer der beiden Richtungen, wobei jede Tabellengruppe zusammenbleibt.
• Führen Sie mit der Schnellsuche von überall aus einen Befehl aus, oder beginnen Sie die Suche mit #, @ oder :, um zu einer Tabelle, zu einer Spalte oder zu einem Kommentar oder einer Notiz zu springen. Gehen Sie mit Rückgängig und Wiederholen schrittweise durch den Bearbeitungsverlauf, spielen Sie mit der Zeitreise den Verlauf dieser Sitzung auf der Zeichenfläche ab, oder vergleichen Sie das Diagramm in der Diff-Ansicht mit einer anderen Datei .json. Der Baum der Diff-Ansicht neben den beiden Versionen listet die Tabellen, Spalten, Indizes, Fremdschlüssel, Notizen und Tabellengruppen auf, die hinzugefügt, geändert, gelöscht oder umbenannt wurden.
• Erkunden Sie das Diagramm im Explorer, einem Baum, der links an der Zeichenfläche angedockt ist: die Tabellen, jeweils mit ihren Spalten, Indizes und Fremdschlüsseln, danach die Tabellengruppen und die Notizen. Klicken Sie auf eine Zeile, um auf der Zeichenfläche zu dem zu wechseln, wofür sie steht; eine Fremdschlüsselzeile hebt zusätzlich die zugehörige Beziehung hervor. Die Schaltfläche Explorer in der Symbolleiste, neben Search, öffnet und schließt ihn.
• Finden Sie Text mit Suchen und Ersetzen oben im Explorer. Durchsucht werden die Namen von Tabellen, Spalten, Indizes und Tabellengruppen sowie, sobald Sie diese einschalten, Kommentare und Notizen, und die Treffer erscheinen im Baum des Explorers. Ersetzen Sie einen Treffer oder alle; Preserve Case gibt jeder Ersetzung die Groß-/Kleinschreibung des Textes, den sie ersetzt. Ctrl + F (⌘ + F auf dem Mac) öffnet den Explorer mit dem Textcursor im Suchfeld, und erneutes Drücken schließt den Explorer.
• Verwenden Sie den Editor in 25 Sprachen, die Sie über die Schaltfläche Display Language in der Symbolleiste oder über die Schnellsuche auswählen. System richtet sich nach der Sprache des Browsers oder der Host-Anwendung, und bei Arabisch, Hebräisch und Persisch ist der Editor von rechts nach links angeordnet, während das Diagramm von links nach rechts bleibt. Nur der eigene Text des Editors ändert sich: Namen, SQL und generierter Code bleiben so, wie sie geschrieben wurden. In der Designauswahl der Symbolleiste wählen Sie das Erscheinungsbild (System, Light oder Dark), einen Grauton und eine Akzentfarbe. Siehe Sprache und Design.
• Halten Sie Diffs sauber: Die Scrollposition und der Zoom, die geöffnete Registerkarte, die Sprache und die Schreibweisen der Namen des Codegenerators sowie der Begrenzertyp sind standardmäßig gesperrt, sodass die Datei die Werte behält, die sie beim Sperren hatten, und Scrollen, Zoomen oder das Wechseln von Registerkarten verändert sie nie. Die Datei wird in einer festen Reihenfolge geschrieben und lässt gemessene Breiten, die Stapelreihenfolge, die Ankerpunkte der Verbindungslinien und entfernte Elemente weg, sodass ein Diagramm, das ohne Änderung geöffnet und wieder geschlossen wird, die Datei unverändert lässt.
• Lassen Sie einen Coding-Agenten wie Claude Code oder Codex das Diagramm über den MCP-Server bearbeiten: live in VS Code, Obsidian oder einer JetBrains-IDE, wo jede Änderung auf der Zeichenfläche erscheint, sobald sie geschieht, oder direkt in der Datei.
• Bearbeiten Sie in der Web-App gemeinsam in Echtzeit (experimentell). Sitzungen laufen Peer-to-Peer und sind Ende-zu-Ende-verschlüsselt, sodass kein Server Ihr Schema vorhält, und die Teilnehmer sehen die Mauszeiger, den Fokus und die Auswahl der jeweils anderen. Auf Ihrer eigenen Seite liefert Ihnen getSharedStore() denselben Stream von Aktionen über einen Transport Ihrer Wahl.

Beginnen Sie mit der Anleitung zum Bearbeiten.

Warum es dieses Projekt gibt

Die vorhandenen Modellierungswerkzeuge boten nicht das Maß an Benutzererfahrung, das ich mir gewünscht hatte.
Deshalb habe ich dieses Projekt ins Leben gerufen, um die ultimative Benutzererfahrung zu bieten.
Die oberste Priorität des Projekts ist das Bearbeitungserlebnis der Benutzer.
Es wird Ihnen ein erstaunliches Bearbeitungserlebnis bieten.