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. 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 — vedere Installazione
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 e cambiare scheda 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 ovunque si condividano i diagrammi: una versione precedente ai gruppi di tabelle 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 del genere viene riscritto nella forma attuale alla prima modifica che il file conserva — vedere Blocco. Fino ad allora, un editor JSON che lo convalida rispetto al suo $schema 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.
• 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.
• 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, 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.
• 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. 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, e nei commenti e nei memo una volta attivati, 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 e il tipo di delimitatore sono bloccati per impostazione predefinita, quindi il file conserva i valori che avevano al momento del blocco, e scorrere, eseguire lo zoom o cambiare scheda non lo modifica mai. Il file viene scritto in un ordine fisso e tralascia le larghezze misurate, l’ordine di sovrapposizione, i punti di ancoraggio dei connettori e gli elementi rimossi, 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.
• 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.

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.