Inleiding

erd-editor is een editor voor entiteit-relatiediagrammen. Het is beschikbaar als webapp, Google Drive-app, VS Code-extensie, IntelliJ-plug-in en Obsidian-plug-in, en als custom element <erd-editor> dat je in je eigen pagina kunt insluiten. In al deze vormen is het één editor met één documentformaat.

Waar je het vindt

Platform	Installatie	Wat je krijgt
Webapp	erd-editor.io	Installeerbare PWA, werkt offline, realtime gezamenlijk bewerken
Google Drive	Google Workspace Marketplace	Voegt ERD Editor toe aan de menu's Open with en New van Drive, en slaat op in hetzelfde bestand
VS Code	Marketplace	Opent .erd.json-bestanden in een aangepaste editor
IntelliJ	JetBrains Marketplace	Dezelfde editor, voor IDE's op basis van IntelliJ
Obsidian	Community plugins	Opent .erd- en .erd.json-bestanden in een tabblad van de kluis, alleen op desktop
Je pagina	npm install @dineug/erd-editor	Het frameworkvrije custom element <erd-editor> — zie Installeren
Codeeragents	@dineug/erd-editor-mcp	Een MCP-server waarmee Claude Code, Codex of een andere client een diagram live bewerkt in VS Code, een JetBrains-IDE of Obsidian, of in het bestand zelf

Maak een leeg bestand met de extensie .erd.json en open het om het in een IDE te proberen. Voer in Obsidian ERD Editor: Create new diagram uit vanuit het opdrachtpalet, of kies New ERD in het contextmenu van een map in de bestandsverkenner. Beide maken een leeg .erd-bestand aan en openen het. Kies in Google Drive New → More → ERD Editor en meld je daarna aan met Google. ERD Editor heeft alleen toegang tot de bestanden die je ermee maakt of opent. In de webapp, Google Drive, VS Code, een JetBrains-IDE en Obsidian opent een nieuw, leeg diagram met het welkomstscherm, een menu met eerste stappen: New Table, New Memo, Import, Command Palette en Shortcuts. Scrollen, zoomen en van tabblad wisselen laten het lege bestand van een nieuw diagram ongewijzigd, omdat in een nieuw diagram elke vergrendeling aanstaat. Zie Vergrendeling. VS Code opent een ERD-bestand als JSON-tekst in Source Control, Local History, Compare with Saved, in de bewerkingsreviews van de chat van VS Code en van codeeragents zoals GitHub Copilot en Claude Code en in de revisieweergaven van extensies zoals GitLens, GitHub Pull Requests en Git Graph, zodat een wijziging regel voor regel wordt vergeleken. Reopen Editor With... toont een Git-revisie als diagram in alleen-lezenmodus.

Start Obsidian opnieuw nadat je de Obsidian-plug-in hebt bijgewerkt: tot dan houdt het venster de editor die de vorige versie heeft geladen. Werk ERD Editor bij overal waar je diagrammen deelt: een versie van vóór de tabelgroepen toont geen pictogrammen voor primaire sleutels in een bestand dat de huidige versie heeft opgeslagen, en door het bestand daar op te slaan gaan de tabelgroepen en Schema SQL-scripts ervan verloren. Een bestand dat zo'n versie heeft opgeslagen, wordt in de huidige vorm herschreven bij de eerste wijziging die in het bestand wordt vastgelegd — zie Vergrendeling. Tot dan meldt een JSON-editor die het bestand aan de hand van zijn $schema valideert, dat het ongeldig is.

Wat het doet

• Teken tabellen, kolommen en memo's op een onbegrensd canvas en verbind ze met vier relatietypen: Zero One, Zero N, One Only, One N. Zie Beginnen met bewerken. Indexen worden gedefinieerd in het eigenschappenpaneel van de tabel. Een unieke index op twee of meer kolommen is een alternatieve sleutel, en met de weergaveoptie Alternate Key ingeschakeld markeert het diagram de kolommen ervan met AK1.1, AK1.2 enzovoort. Zie Indexen en Alternatieve sleutels.
• Laat een relatie eindigen op kolommen die een tabel al heeft: terwijl je met een muis of een pen een relatie tekent, koppelt Map to existing columns naast de tabel waarop de relatie eindigt de sleutel van de oudertabel aan de kolommen van die tabel, en voegt Create new columns nieuwe kolommen toe. Map Columns in het contextmenu van een relatie wijzigt later de kolommen ervan. Zie Kolommen toewijzen. Een relatie kan ook acties voor ON DELETE en ON UPDATE hebben. Zie ON DELETE en ON UPDATE.
• Bewerk snel: Alt + N voegt een tabel toe; Alt + Enter voegt een kolom toe; Alt + K schakelt de primaire sleutel in of uit voor de gefocuste kolom, of voor elke geselecteerde kolom als de gefocuste kolom daar een van is; en Delete of Backspace verwijdert de selectie. Elk daarvan is één stap in de geschiedenis. Zie Sneltoetsen. De canvaswerkbalk onder aan het canvas voegt ook met één klik een tabel of een memo toe.
• Geef een tabel, memo of tabelgroep een kleur via een kleurkiezer met vooraf ingestelde kleuren en de kleuren die het diagram al gebruikt, en haal een kleur weg met No color of Remove color. Zie Kleur van tabellen en memo's instellen.
• Breng gerelateerde tabellen samen in tabelgroepen: een kader achter de tabellen dat je een naam en een kleur kunt geven. Teken er een met Alt + G of met New Table Group in het contextmenu van het canvas, op de canvaswerkbalk of in het palet Snel zoeken, of maak er een van de geselecteerde tabellen met T en daarna G of met Group selected tables in hun contextmenu. Een tabel wordt lid van een groep als je haar erin neerzet en verlaat de groep als je haar erbuiten neerzet, en als je een groep aan de titelbalk sleept, verplaatsen de tabellen ervan mee. DBML neemt groepen in beide richtingen mee, als blokken TableGroup.
• Importeer een bestaand schema uit json, Schema SQL, GraphQL, DBML of AML. Zie Bestanden importeren of exporteren. Bij een Schema SQL-, GraphQL-, DBML- of AML-bestand worden de tabellen langs hun relaties ingedeeld, of in rijen als er geen relaties zijn. Import and Add voegt een bestand onder het diagram toe in plaats van het diagram te vervangen.
• Exporteer het diagram als json; als Schema SQL vanuit het tabblad Schema SQL, opgeslagen als .sql-bestand of gekopieerd; of vanuit het dialoogvenster Export image als PNG- of SVG-afbeelding, of als PNG op het klembord.
• Schrijf Schema SQL in de syntaxis van acht databasesystemen: Databricks, MSSQL, MariaDB, MySQL, Oracle, PostgreSQL, Snowflake en SQLite. Zie Functies voor tabellen. In het optiepaneel van het tabblad Schema SQL kies je de instructies, de kop en de tabelgroepen die worden geschreven, en het paneel bewaart je eigen SQL, opgeslagen in het diagram, om vóór en na de tabellen te schrijven.
• Genereer code voor tweeëntwintig doelen: de talen C#, Go, Java, Kotlin, PHP, Rust, Scala, Swift en TypeScript; de ORM's Doctrine, Drizzle, JPA, SeaORM, Sequelize, SQLAlchemy en TypeORM; en AML, DBML, GraphQL, JSON Schema, Mermaid en Zod. In het optiepaneel van het tabblad Codegenerator kies je de taal, de database en de naamnotaties, en de code wordt opgeslagen als bestand met de extensie van de taal of gekopieerd. Zie Codegenerator.
• Bekijk het schema in Visualisatie, als krachtgerichte Graph of als Flow van tabelkaarten die langs hun relaties zijn ingedeeld, waarbij het aanwijzen van een tabel alles laat oplichten wat die tabel raakt. Druk op het ERD-tabblad op Alt + F om te focussen op de geselecteerde tabellen en op de tabellen die eraan gerelateerd zijn.
• Werk op een canvas zonder randen: pan overal waar het diagram heen gaat, zoom van 10% tot 150% met Ctrl + Wheel (⌘ + Wheel op een Mac), het toetsenbord of een knijpbeweging, en verberg met de zen-modus alles behalve het diagram. Slepen met de middelste muisknop pant vanaf elke plek op het canvas, zelfs boven een tabel. Zie Navigeren op het canvas.
• Rangschik een heel diagram in één stap met Automatische indeling: een krachtsimulatie, een stroom van links naar rechts of een boom in een van beide richtingen, waarbij elke tabelgroep bij elkaar blijft.
• Voer vanaf elke plek een opdracht uit met Snel zoeken, of begin de zoekopdracht met #, @ of : om naar een tabel, een kolom of een opmerking of memo te springen. Doorloop de bewerkingsgeschiedenis met Ongedaan maken, opnieuw uitvoeren, speel de geschiedenis van deze sessie af op het canvas met Tijdreizen of vergelijk het diagram met een ander .json-bestand in de Verschilweergave. Naast de twee versies toont de boomstructuur ervan de tabellen, kolommen, indexen, refererende sleutels, memo's en tabelgroepen die zijn toegevoegd, gewijzigd, verwijderd of hernoemd.
• Blader door het diagram in de Verkenner, een boomstructuur die links naast het canvas is vastgezet: de tabellen, elk met haar kolommen, indexen en refererende sleutels, daarna de tabelgroepen en de memo's. Klik op een rij om op het canvas te gaan naar wat die rij voorstelt; een rij van een refererende sleutel laat ook de bijbehorende relatie oplichten. De knop Explorer op de werkbalk, naast Search, opent en sluit de Verkenner.
• Zoek tekst met Zoeken en vervangen boven in de Verkenner. De functie doorzoekt namen van tabellen, kolommen, indexen en tabelgroepen, en ook opmerkingen en memo's zodra je die inschakelt, en toont de overeenkomsten in de boomstructuur van de Verkenner. Vervang één overeenkomst of alle overeenkomsten; Preserve Case geeft elke vervanging het hoofdlettergebruik van de tekst die ze vervangt. Ctrl + F (⌘ + F op een Mac) opent de Verkenner met de tekstcursor in het zoekveld, en als je er nogmaals op drukt, wordt de Verkenner gesloten.
• Gebruik de editor in 25 talen, te kiezen met de knop Display Language op de werkbalk of in het palet Snel zoeken. System volgt de taal van de browser of de hostapp, en in het Arabisch, Hebreeuws en Perzisch wordt de editor van rechts naar links ingedeeld terwijl het diagram van links naar rechts blijft. Alleen de eigen tekst van de editor verandert: namen, SQL en gegenereerde code blijven zoals ze zijn geschreven. Met de themabouwer op de werkbalk kies je het uiterlijk (System, Light of Dark), een grijstint en een accentkleur. Zie Taal en thema.
• Houd diffs schoon: de scrollpositie en het zoomniveau, het geopende tabblad, de taal en naamnotaties van de Codegenerator en het type aanhalingstekens zijn standaard vergrendeld, zodat het bestand de waarden behoudt die ze bij het vergrendelen hadden, en scrollen, zoomen of van tabblad wisselen het bestand nooit verandert. Het bestand wordt in een vaste volgorde geschreven en laat gemeten breedtes, de stapelvolgorde, ankerpunten van verbindingslijnen en verwijderde items weg, zodat een diagram openen en zonder bewerking weer sluiten het bestand laat zoals het was.
• Laat een codeeragent zoals Claude Code of Codex het diagram bewerken via de MCP-server: live in VS Code, Obsidian of een JetBrains-IDE, waar elke wijziging op het canvas verschijnt terwijl die plaatsvindt, of in het bestand zelf.
• Bewerk samen in realtime in de webapp (experimenteel). Sessies zijn peer-to-peer en end-to-end versleuteld, zodat geen enkele server je schema bewaart, en peers zien elkaars cursors, focus en selecties. In je eigen pagina geeft getSharedStore() je dezelfde actiestream via een transport naar keuze.

Begin met de Bewerkingshandleiding.

Waarom dit project

Bestaande modelleertools boden niet het niveau van gebruikerservaring dat ik voor ogen had.
Daarom ben ik dit project begonnen om de ultieme gebruikerservaring te bieden.
De hoogste prioriteit van het project is de bewerkingservaring van de gebruiker.
Het zal je een verbluffende bewerkingservaring bieden.