Introducere

erd-editor este un editor de diagrame entitate-relație. Este disponibil ca aplicație web, ca aplicație pentru Google Drive, ca extensie pentru VS Code, ca plugin pentru IntelliJ, ca plugin pentru Obsidian și ca element personalizat <erd-editor> pe care îl puteți încorpora în propria pagină. Toate acestea sunt un singur editor, cu un singur format de document.

De unde îl obțineți

Platformă	Instalare	Ce obțineți
Aplicație web	erd-editor.io	PWA instalabilă, funcționează offline, colaborare în timp real
Google Drive	Google Workspace Marketplace	Adaugă ERD Editor în meniurile Open with și New din Drive și salvează înapoi în același fișier
VS Code	Marketplace	Deschide fișierele .erd.json într-un editor personalizat
IntelliJ	JetBrains Marketplace	Același editor, pentru IDE-urile bazate pe IntelliJ
Obsidian	Community plugins	Deschide fișierele .erd și .erd.json într-o filă a seifului, doar pe desktop
Pagina proprie	npm install @dineug/erd-editor	Elementul personalizat <erd-editor>, independent de orice framework (consultați Instalare)
Agenți de programare	@dineug/erd-editor-mcp	Un server MCP prin care Claude Code, Codex sau alt client pot edita o diagramă în direct în VS Code, într-un IDE JetBrains sau în Obsidian, ori în fișierul propriu-zis

Pentru a-l încerca într-un IDE, creați un fișier gol cu extensia .erd.json și deschideți-l. În Obsidian, rulați ERD Editor: Create new diagram din paleta de comenzi sau alegeți New ERD din meniul contextual al unui folder din exploratorul de fișiere. Oricare dintre ele creează un fișier .erd gol și îl deschide. În Google Drive, alegeți New → More → ERD Editor, apoi conectați-vă cu Google. ERD Editor accesează doar fișierele pe care le creați sau le deschideți cu el. În aplicația web, în Google Drive, în VS Code, într-un IDE JetBrains și în Obsidian, o diagramă nouă, goală, se deschide pe ecranul de bun venit, un meniu cu primii pași: New Table, New Memo, Import, Command Palette și Shortcuts. Derularea, modificarea zoomului și comutarea filelor lasă neschimbat fișierul gol al unei diagrame noi, deoarece într-o diagramă nouă toate blocările sunt activate. Consultați Blocare. VS Code deschide un fișier ERD ca text JSON în Source Control, Local History, Compare with Saved, în revizuirile editărilor din chatul VS Code și ale agenților de programare, de exemplu GitHub Copilot și Claude Code, precum și în vizualizările de revizii ale extensiilor, de exemplu GitLens, GitHub Pull Requests și Git Graph, astfel încât o modificare se compară linie cu linie. Comanda Reopen Editor With... afișează o revizie Git ca diagramă doar în citire.

După actualizarea pluginului pentru Obsidian, reporniți Obsidian: până atunci, fereastra păstrează editorul încărcat de versiunea anterioară. Actualizați ERD Editor oriunde partajați diagrame: o versiune anterioară grupurilor de tabele nu afișează pictogramele cheii primare într-un fișier salvat de versiunea curentă, iar salvarea fișierului acolo îi elimină grupurile de tabele și scripturile din fila Schemă SQL. Un fișier salvat de o astfel de versiune este rescris în forma curentă la prima modificare pe care fișierul o păstrează (consultați Blocare). Până atunci, un editor JSON care îl validează în raport cu proprietatea sa $schema îl raportează ca invalid.

Ce face

• Desenați tabele, coloane și note pe o pânză nelimitată și conectați-le prin patru tipuri de relații: Zero One, Zero N, One Only, One N. Consultați Începerea editării. Indexurile se definesc în panoul de proprietăți al tabelului. Un index unic pe două sau mai multe coloane este o cheie alternativă, iar cu opțiunea de afișare Alternate Key activată, diagrama îi marchează coloanele cu AK1.1, AK1.2 și așa mai departe. Consultați Indexuri și Chei alternative.
• Încheiați o relație pe coloane pe care un tabel le are deja: în timp ce trasați o relație cu mouse-ul sau cu stiloul, butonul Map to existing columns de lângă tabelul pe care aceasta se termină împerechează cheia părintelui cu coloanele acelui tabel, iar butonul Create new columns adaugă coloane noi. Elementul Map Columns din meniul contextual al unei relații îi schimbă ulterior coloanele. Consultați Mapare coloane. O relație poate avea și acțiuni ON DELETE și ON UPDATE. Consultați ON DELETE și ON UPDATE.
• Editați rapid: Alt + N adaugă un tabel; Alt + Enter adaugă o coloană; Alt + K activează sau dezactivează cheia primară pe coloana activă sau pe fiecare coloană selectată, când coloana activă se numără printre ele; iar Delete sau Backspace șterge selecția. Fiecare reprezintă un singur pas de anulare. Consultați Comenzi rapide. Și bara de instrumente a pânzei, din partea de jos a pânzei, adaugă un tabel sau o notă cu un singur clic.
• Colorați un tabel, o notă sau un grup de tabele dintr-un selector care oferă culori predefinite și culorile pe care diagrama le folosește deja și eliminați o culoare cu No color sau Remove color. Consultați Setarea culorii tabelelor și notelor.
• Adunați tabelele înrudite în grupuri de tabele: un chenar așezat în spatele lor, pe care îl puteți denumi și colora. Trasați unul cu Alt + G sau cu New Table Group din meniul contextual al pânzei, din bara de instrumente a pânzei sau din căutarea rapidă, ori creați unul din tabelele selectate cu T apoi G sau cu elementul Group selected tables din meniul lor contextual. Un tabel intră într-un grup când îl lăsați înăuntru și iese din el când îl lăsați în afară, iar glisarea unui grup de bara de titlu îi mută tabelele odată cu el. DBML păstrează grupurile atât la import, cât și la export, sub formă de blocuri TableGroup.
• Importați o schemă existentă din json, Schema SQL, GraphQL, DBML sau AML. Consultați Importarea sau exportarea fișierelor. Un fișier Schemă SQL, GraphQL, DBML sau AML este importat cu tabelele aranjate de-a lungul relațiilor sau pe rânduri, dacă nu are relații. Elementul Import and Add adaugă un fișier sub diagramă în loc să o înlocuiască.
• Exportați diagrama ca json; ca Schemă SQL din fila Schemă SQL, salvată ca fișier .sql sau copiată; ori din caseta de dialog Export image, ca imagine PNG sau SVG ori ca imagine PNG în clipboard.
• Scrieți codul Schemă SQL în sintaxa a opt sisteme de baze de date: Databricks, MSSQL, MariaDB, MySQL, Oracle, PostgreSQL, Snowflake și SQLite. Consultați Funcții pentru tabele. Panoul de opțiuni al filei Schemă SQL alege instrucțiunile, antetul și grupurile de tabele care se scriu și păstrează propriul dumneavoastră cod SQL, salvat în diagramă, care se scrie înainte și după tabele.
• Generați cod pentru douăzeci și două de ținte: limbajele C#, Go, Java, Kotlin, PHP, Rust, Scala, Swift și TypeScript; ORM-urile Doctrine, Drizzle, JPA, SeaORM, Sequelize, SQLAlchemy și TypeORM; și AML, DBML, GraphQL, JSON Schema, Mermaid și Zod. Panoul de opțiuni al filei Generator de cod alege limbajul, baza de date și stilurile de denumire, iar codul se salvează ca fișier cu extensia limbajului sau se copiază. Consultați Generator de cod.
• Citiți schema în fila Vizualizare, în modul Graph, bazat pe forțe, sau în modul Flow, cu carduri de tabel aranjate de-a lungul relațiilor, unde trecerea indicatorului peste un tabel evidențiază tot ce este legat de el. Apăsați Alt + F în fila ERD pentru focalizarea pe tabelele selectate și pe tabelele înrudite cu ele.
• Lucrați pe o pânză fără margini: deplasați pânza oriunde ajunge diagrama, schimbați nivelul de zoom între 10% și 150% cu Ctrl + Wheel (⌘ + Wheel pe Mac), cu tastatura sau prin ciupire și ascundeți tot în afară de diagramă cu modul Zen. O glisare cu butonul din mijloc al mouse-ului deplasează pânza din orice loc al acesteia, chiar și de deasupra unui tabel. Consultați Deplasarea pe pânză.
• Aranjați o diagramă întreagă într-un singur pas cu aranjarea automată: o simulare de forțe, un flux de la stânga la dreapta sau un arbore în oricare dintre direcții, cu fiecare grup de tabele păstrat laolaltă.
• Rulați o comandă de oriunde cu căutarea rapidă sau începeți căutarea cu #, @ sau : pentru a sări la un tabel, la o coloană sau la un comentariu ori o notă. Parcurgeți istoricul editărilor cu Anulare, refacere, redați istoricul acestei sesiuni pe pânză cu călătoria în timp sau comparați diagrama cu un alt fișier .json în vizualizatorul de diferențe. Arborele acestuia, alături de cele două versiuni, listează tabelele, coloanele, indexurile, cheile străine, notele și grupurile de tabele care au fost adăugate, modificate, șterse sau redenumite.
• Răsfoiți diagrama în explorator, un arbore andocat în stânga pânzei: tabelele, fiecare cu coloanele, indexurile și cheile sale străine, apoi grupurile de tabele și notele. Faceți clic pe un rând pentru a merge la ceea ce reprezintă acesta pe pânză; un rând de cheie străină evidențiază și relația ei. Butonul Explorer din bara de instrumente, de lângă Search, îl deschide și îl închide.
• Găsiți text cu funcția Găsire și înlocuire, din partea de sus a exploratorului. Funcția caută în numele tabelelor, coloanelor, indexurilor și grupurilor de tabele, precum și în comentarii și note, odată ce le activați, și afișează potrivirile în arborele exploratorului. Înlocuiți o potrivire sau pe toate; opțiunea Preserve Case dă fiecărei înlocuiri literele mari și mici ale textului pe care îl înlocuiește. Ctrl + F (⌘ + F pe Mac) deschide exploratorul cu cursorul de text în câmpul Găsire, iar o nouă apăsare închide exploratorul.
• Folosiți editorul în 25 de limbi, pe care le alegeți din butonul Display Language din bara de instrumente sau din căutarea rapidă. Opțiunea System urmează limba browserului sau a aplicației gazdă, iar în arabă, ebraică și persană editorul este așezat de la dreapta la stânga, în timp ce diagrama rămâne de la stânga la dreapta. Se schimbă doar textul propriu al editorului: numele, codul SQL și codul generat rămân așa cum au fost scrise. Configuratorul de teme din bara de instrumente alege aspectul (System, Light sau Dark), un ton de gri și o culoare de accent. Consultați Limbă și temă.
• Păstrați diferențele curate: poziția de derulare și nivelul de zoom, fila deschisă, limbajul și stilurile de denumire ale generatorului de cod și tipul de delimitator sunt blocate implicit, astfel încât fișierul păstrează valorile pe care acestea le aveau la blocare, iar derularea, modificarea zoomului sau comutarea filelor nu îl modifică niciodată. Fișierul este scris într-o ordine fixă și omite lățimile măsurate, ordinea de suprapunere, punctele de ancorare ale conectorilor și elementele eliminate, astfel încât deschiderea unei diagrame și închiderea ei fără nicio editare lasă fișierul așa cum era.
• Permiteți unui agent de programare, de exemplu Claude Code sau Codex, să editeze diagrama prin serverul MCP: în direct în VS Code, în Obsidian sau într-un IDE JetBrains, unde fiecare modificare apare pe pânză pe măsură ce se produce, ori în fișierul propriu-zis.
• Editați împreună în timp real în aplicația web (experimental). Sesiunile sunt peer-to-peer și criptate integral, astfel încât niciun server nu vă păstrează schema, iar partenerii își văd unii altora cursoarele, focusul și selecțiile. În propria pagină, metoda getSharedStore() vă oferă același flux de acțiuni prin mecanismul de transport pe care îl alegeți.

Începeți cu Ghidul de editare.

Motivul din spatele acestui proiect

Instrumentele de modelare existente nu ofereau experiența de utilizare la nivelul pe care mi-l doream.
Prin urmare, am inițiat acest proiect pentru a oferi cea mai bună experiență de utilizare.
Prioritatea principală a proiectului este experiența de editare a utilizatorului.
Vă va oferi o experiență uimitoare în editare.