Introduzione

erd-editor è un editor di diagrammi entità-relazione. È disponibile come app web, app per Google Drive, estensione per VS Code, plugin per IntelliJ, plugin per Obsidian e come elemento personalizzato <erd-editor> che si può incorporare nella propria pagina, con accanto <erd-viewer> per mostrare un diagramma in sola lettura. Un sito che non carica alcuno script proprio può invece incorporare in un frame un diagramma di sola lettura da erd-editor.io/embed. In tutti questi casi si tratta di un unico editor e di un unico formato di documento.

Dove ottenerlo

Piattaforma	Installazione	Cosa si ottiene
App web	erd-editor.io	PWA installabile, funziona offline, collaborazione in tempo reale
Google Drive	Google Workspace Marketplace	Aggiunge ERD Editor ai menu Open with e New di Drive e salva le modifiche nello stesso file
VS Code	Marketplace	Apre i file .erd.json in un editor personalizzato
IntelliJ	JetBrains Marketplace	Lo stesso editor, per gli IDE basati su IntelliJ
Obsidian	Community plugins	Apre i file .erd e .erd.json in una scheda del vault, solo su desktop
La propria pagina	npm install @dineug/erd-editor	L’elemento personalizzato <erd-editor>, senza framework, e <erd-viewer>, che mostra un diagramma in sola lettura — vedere Installazione e ErdViewerElement
Qualsiasi sito	erd-editor.io/embed	Un diagramma di sola lettura in un iframe, dall’URL di un documento, senza codice — vedere Incorporare
Agenti di programmazione	@dineug/erd-editor-mcp	Un server MCP che consente a Claude Code, Codex o un altro client di modificare un diagramma live in VS Code, in un IDE JetBrains o in Obsidian, oppure nel file stesso

Per provarlo in un IDE, creare un file vuoto con estensione .erd.json e aprirlo. In Obsidian, eseguire ERD Editor: Create new diagram dal riquadro comandi oppure scegliere New ERD dal menu contestuale di una cartella nell’esplora file. Entrambi creano un file .erd vuoto e lo aprono. In Google Drive, scegliere New → More → ERD Editor e poi accedere con Google. ERD Editor ha accesso solo ai file creati o aperti con esso. Nell’app web, in Google Drive, in VS Code, in un IDE JetBrains e in Obsidian, un nuovo diagramma vuoto si apre sulla schermata di benvenuto, un menu di primi passi: New Table, New Memo, Import, Command Palette e Shortcuts. Scorrere, eseguire lo zoom, cambiare scheda e cambiare la Visualizzazione nomi lasciano invariato il file vuoto di un nuovo diagramma, poiché in un nuovo diagramma ogni blocco è attivo. Vedere Blocco. VS Code apre un file ERD come testo JSON in Source Control, in Local History, in Compare with Saved, nella revisione delle modifiche della chat di VS Code e degli agenti di programmazione come GitHub Copilot e Claude Code e nelle viste delle revisioni di estensioni come GitLens, GitHub Pull Requests e Git Graph, quindi le differenze di una modifica appaiono riga per riga. Reopen Editor With... mostra una revisione Git come diagramma di sola lettura.

Dopo aver aggiornato il plugin per Obsidian, riavviare Obsidian: fino ad allora, la finestra mantiene l’editor caricato dalla versione precedente. Aggiornare ERD Editor e @dineug/erd-editor-mcp ovunque si condividano i diagrammi. Una versione precedente alla scheda Dizionario, o un server MCP meno recente che modifica un file su disco, salva il diagramma senza i suoi nomi logici, i collegamenti ai domini e i dizionari. Una versione precedente ai gruppi di tabelle, inoltre, non mostra alcuna icona di chiave primaria in un file salvato dalla versione attuale, e salvare il file con quella versione ne elimina i gruppi di tabelle e gli script Schema SQL. Un file salvato da una versione precedente viene riscritto nella forma attuale alla prima modifica che il file conserva — vedere Blocco. Quel salvataggio elimina anche i testi, gli elenchi e le collezioni vuoti che la versione precedente scriveva, quindi modifica il file più di quanto faccia la modifica stessa. Fino ad allora, un editor JSON che convalida rispetto al suo $schema un file di una versione precedente ai gruppi di tabelle lo segnala come non valido.

Cosa fa

• Disegnare tabelle, colonne e memo su un’area di disegno illimitata e collegarli con quattro tipi di relazione: Zero One, Zero N, One Only, One N. Vedere Iniziare a modificare. Gli indici si definiscono nel pannello delle proprietà della tabella. Un indice univoco su due o più colonne è una chiave alternativa e, con l’opzione di visualizzazione Alternate Key attiva, il diagramma ne contrassegna le colonne con AK1.1, AK1.2 e così via. Vedere Indici e Chiavi alternative.
• Terminare una relazione su colonne già presenti in una tabella: mentre se ne disegna una con il mouse o con una penna, il pulsante Map to existing columns accanto alla tabella su cui termina associa la chiave della tabella padre alle colonne di quella tabella, e Create new columns ne aggiunge di nuove. La voce Map Columns nel menu contestuale di una relazione ne modifica le colonne in un secondo momento. Vedere Associa colonne. Una relazione può anche avere azioni ON DELETE e ON UPDATE. Vedere ON DELETE e ON UPDATE.
• Modificare rapidamente: Alt + N aggiunge una tabella; Alt + Enter aggiunge una colonna; Alt + K attiva o disattiva la chiave primaria sulla colonna che ha il focus, oppure su ogni colonna selezionata quando questa è una di esse; e Delete o Backspace elimina la selezione. Ognuno corrisponde a un solo passo di annullamento. Vedere Tasti di scelta rapida. Anche la barra degli strumenti dell’area di disegno, in fondo all’area di disegno, aggiunge una tabella o un memo con un solo clic.
• Assegnare un colore a una tabella, a un memo o a un gruppo di tabelle da un selettore con colori predefiniti e con i colori già usati nel diagramma, e rimuovere un colore con No color o Remove color. Vedere Colore di tabelle e memo.
• Raccogliere le tabelle correlate in gruppi di tabelle: un riquadro dietro di esse a cui è possibile assegnare un nome e un colore. Disegnarne uno con Alt + G o con New Table Group dal menu contestuale dell’area di disegno, dalla barra degli strumenti dell’area di disegno o dalla Ricerca rapida, oppure crearne uno dalle tabelle selezionate con T e poi G o con Group selected tables nel loro menu contestuale. Una tabella entra in un gruppo quando viene rilasciata al suo interno e ne esce quando viene rilasciata all’esterno, e trascinare un gruppo per la barra del titolo sposta con sé le sue tabelle. DBML porta i gruppi sia in importazione sia in esportazione, come blocchi TableGroup.
• Assegnare a tabelle e colonne dei nomi logici, i nomi letti dalle persone, come Customer Name per CUST_NM, accanto ai nomi fisici che scrivono Schema SQL e il Generatore di codice. La Visualizzazione nomi (Physical Names, Logical Names o Both Names) determina quali di essi vengono disegnati nell’area di disegno, e la seguono anche la maggior parte degli altri punti che riportano il nome di una tabella o di una colonna, come le righe delle tabelle e delle colonne del pannello Esplora, la modalità Flusso e un’immagine esportata. Sceglierla dal pulsante Name View della barra degli strumenti dell’area di disegno, dal menu contestuale dell’area di disegno, dalla barra degli strumenti della Visualizzazione in Flow o dalla Ricerca rapida.
• Conservare lo standard di denominazione del diagramma nella scheda Dizionario. I suoi fogli Domains, Words e Terms si cercano, si ordinano e si modificano come in un foglio di calcolo, ciascuno con una propria cronologia delle modifiche. I fogli importano ed esportano file CSV: un’importazione legge la struttura propria dell’editor o quella dello standard coreano dei dati pubblici, in UTF-8 o EUC-KR, e un’esportazione scrive quella propria dell’editor. La cella del nome logico completa i nomi dei termini. Un nome logico dà alla sua tabella o colonna un nome fisico ricavato dal termine corrispondente, o dalle abbreviazioni delle parole in cui si divide, finché il nome non viene scritto dall’utente. Dopo la modifica di una parola o di un termine, Derive Physical Names Again deriva di nuovo i nomi, compresi quelli scritti dall’utente. Una colonna collegata a un dominio, manualmente o tramite il suo termine, assume il tipo di dati del dominio e ne segue le modifiche, e l’opzione di visualizzazione Domain mostra il dominio di ogni colonna. Il foglio Checks elenca le parole vietate, le parole non registrate e i sinonimi, i nomi duplicati, i domini sconosciuti, i nomi fisici che differiscono da quello del loro termine e i tipi di colonna che differiscono da quello del loro dominio. L’area di disegno colora i nomi logici e fisici segnalati dai controlli sulle parole e sui termini.
• Importare uno schema esistente da json, Schema SQL, GraphQL, DBML o AML. Vedere Importare o esportare file. Un file Schema SQL, GraphQL, DBML o AML arriva con le tabelle disposte lungo le relazioni, oppure in righe quando non ne ha. Import and Add aggiunge un file sotto il diagramma invece di sostituirlo.
• Esportare il diagramma come json; come Schema SQL dalla scheda Schema SQL, salvato come file .sql o copiato; oppure dalla finestra di dialogo Export image come immagine PNG o SVG, o come PNG negli Appunti.
• Mostrare un diagramma in sola lettura su un altro sito: incorporare in un frame erd-editor.io/embed con l’URL di un file, anche su GitHub, oppure caricare l’elemento <erd-viewer> nella propria pagina. Un lettore sposta la vista, esegue lo zoom, cerca ed evidenzia le relazioni, e nulla modifica il diagramma.
• Scrivere Schema SQL nella sintassi di otto fornitori di database: Databricks, MSSQL, MariaDB, MySQL, Oracle, PostgreSQL, Snowflake e SQLite. Vedere Funzioni relative alle tabelle. Nel pannello opzioni della scheda Schema SQL si scelgono le istruzioni, l’intestazione e i gruppi di tabelle da scrivere, si possono scrivere i nomi logici nei commenti vuoti e si conserva il proprio codice SQL, salvato nel diagramma, da scrivere prima e dopo le tabelle.
• Generare codice per ventidue destinazioni: i linguaggi C#, Go, Java, Kotlin, PHP, Rust, Scala, Swift e TypeScript; gli ORM Doctrine, Drizzle, JPA, SeaORM, Sequelize, SQLAlchemy e TypeORM; e AML, DBML, GraphQL, JSON Schema, Mermaid e Zod. Nel pannello opzioni della scheda Generatore di codice si scelgono il linguaggio, il database e gli stili dei nomi, e il codice viene salvato come file con l’estensione del linguaggio oppure copiato. Vedere Generatore di codice.
• Leggere lo schema in Visualizzazione, come grafo a forze Graph o come Flow di card delle tabelle disposte lungo le relazioni, dove passare il puntatore su una tabella evidenzia tutto ciò a cui è collegata. Premere Alt + F nella scheda ERD per focalizzare le tabelle selezionate e le tabelle a esse correlate. In Flow, Previous table e Next table ripercorrono all’indietro e in avanti i restringimenti applicati alla modalità Flusso, come fanno lì i tasti di annullamento e ripetizione.
• Lavorare su un’area di disegno senza bordi: spostare la vista ovunque arrivi il diagramma, eseguire lo zoom dal 10% al 150% con Ctrl + Wheel (⌘ + Wheel su Mac), con la tastiera o con un gesto di pinch, e nascondere tutto tranne il diagramma con la modalità Zen. Un trascinamento con il pulsante centrale del mouse sposta la vista da qualsiasi punto dell’area di disegno, anche sopra una tabella. Vedere Muoversi nell’area di disegno.
• Disporre un intero diagramma in un solo passaggio con il Layout automatico: una simulazione di forze, un flusso da sinistra a destra o un albero in una delle due direzioni, mantenendo unito ogni gruppo di tabelle.
• Eseguire un comando da qualsiasi punto con la Ricerca rapida, oppure iniziare la ricerca con #, @ o : per saltare a una tabella, a una colonna o a un commento o memo; # e @ trovano anche i nomi logici. Muoversi passo per passo nella cronologia delle modifiche con Annulla, Ripeti, riprodurre la cronologia di questa sessione sull’area di disegno con il Viaggio nel tempo o confrontare il diagramma con un altro file .json nel Visualizzatore differenze. Il suo albero, accanto alle due versioni, elenca le tabelle, le colonne, gli indici, le chiavi esterne, i memo e i gruppi di tabelle aggiunti, modificati, eliminati o rinominati.
• Sfogliare il diagramma nel pannello Esplora, un albero ancorato a sinistra dell’area di disegno: le tabelle, ciascuna con le sue colonne, i suoi indici e le sue chiavi esterne, poi i gruppi di tabelle e i memo. Fare clic su una riga per andare all’elemento che rappresenta nell’area di disegno; una riga di chiave esterna evidenzia anche la sua relazione. Il pulsante Explorer della barra degli strumenti, accanto a Search, lo apre e lo chiude.
• Trovare del testo con Trova e sostituisci, nella parte superiore del pannello Esplora. Cerca nei nomi di tabelle, colonne, indici e gruppi di tabelle, nei nomi logici di tabelle e colonne e, una volta attivati, nei commenti e nei memo, e mostra le corrispondenze nell’albero del pannello Esplora. Sostituire una sola corrispondenza o tutte; l’opzione Preserve Case dà a ogni sostituzione le maiuscole/minuscole del testo che sostituisce. Ctrl + F (⌘ + F su Mac) apre il pannello Esplora con il punto di inserimento nel campo Trova, e premerlo di nuovo chiude il pannello Esplora.
• Usare l’editor in 25 lingue, da scegliere con il pulsante Display Language della barra degli strumenti o dalla Ricerca rapida. System segue la lingua del browser o dell’app host, e con arabo, ebraico e persiano l’editor è disposto da destra a sinistra, mentre il diagramma resta da sinistra a destra. Cambia solo il testo proprio dell’editor: i nomi, il codice SQL e il codice generato restano come sono stati scritti. Con il generatore di temi della barra degli strumenti si scelgono l’aspetto (System, Light o Dark), una tonalità di grigio e un colore principale. Vedere Lingua e tema.
• Mantenere puliti i diff: la posizione di scorrimento e lo zoom, la scheda aperta, il linguaggio e gli stili dei nomi del Generatore di codice, il tipo di delimitatore e la Visualizzazione nomi sono bloccati per impostazione predefinita, quindi il file conserva i valori che avevano al momento del blocco, e scorrere, eseguire lo zoom, cambiare scheda o cambiare la Visualizzazione nomi non lo modifica mai. Il file viene scritto in un ordine fisso, con una riga di testo per ogni riga dei dizionari, e tralascia le larghezze misurate, l’ordine di sovrapposizione, i punti di ancoraggio dei connettori, gli elementi rimossi, il testo vuoto di un elemento e gli elenchi e le collezioni di un tipo di cui il diagramma non contiene alcun elemento, quindi aprire un diagramma e chiuderlo senza modifiche lascia il file com’era.
• Lasciare che un agente di programmazione come Claude Code o Codex modifichi il diagramma tramite il server MCP: live in VS Code, in Obsidian o in un IDE JetBrains, dove ogni modifica compare sull’area di disegno nel momento in cui avviene, oppure nel file stesso. Può anche impostare i nomi logici e i domini delle colonne, modificare i dizionari, derivare di nuovo i nomi fisici ed elencare ciò che rileva il foglio Checks.
• Modificare insieme in tempo reale nell’app web (sperimentale). Le sessioni sono peer-to-peer e crittografate end-to-end, quindi nessun server conserva lo schema, e ogni peer vede i cursori, il focus e le selezioni degli altri. Nella propria pagina, getSharedStore() fornisce lo stesso flusso di azioni sul trasporto che si preferisce, e @dineug/erd-editor-yjs mantiene il diagramma allineato tramite un documento Yjs e qualsiasi provider che lo trasporti, comprese le modifiche offline e la presenza.

Iniziare dalla Guida alla modifica.

Perché questo progetto

Gli strumenti di modellazione esistenti non offrivano il livello di esperienza utente che desideravo.
Ho quindi avviato questo progetto per offrire l’esperienza utente migliore in assoluto.
La massima priorità del progetto è l’esperienza di modifica dell’utente.
Offrirà un’esperienza di modifica straordinaria.