Úvod

erd-editor je editor diagramov entít a vzťahov. Je k dispozícii ako webová aplikácia, aplikácia pre Google Drive, rozšírenie pre VS Code, doplnok pre IntelliJ, doplnok pre Obsidian a ako vlastný element <erd-editor>, ktorý môžete vložiť do vlastnej stránky. Vo všetkých je to ten istý editor a ten istý formát dokumentu.

Kde ho získať

Platforma	Inštalácia	Čo získate
Webová aplikácia	erd-editor.io	Inštalovateľná PWA, funguje offline, spolupráca v reálnom čase
Google Drive	Google Workspace Marketplace	Pridá ERD Editor do ponúk Open with a New v službe Drive a ukladá späť do toho istého súboru
VS Code	Marketplace	Otvára súbory .erd.json vo vlastnom editore
IntelliJ	JetBrains Marketplace	Ten istý editor pre IDE založené na IntelliJ
Obsidian	Community plugins	Otvára súbory .erd a .erd.json na karte v trezore, iba v desktopovej aplikácii
Vlastná stránka	npm install @dineug/erd-editor	Vlastný element <erd-editor> nezávislý od frameworkov – pozrite si stránku Inštalácia
Programovací agenti	@dineug/erd-editor-mcp	Server MCP, pomocou ktorého môže Claude Code, Codex alebo iný klient upravovať diagram naživo vo VS Code, v IDE od JetBrains alebo v aplikácii Obsidian, alebo priamo v samotnom súbore

Ak si ho chcete vyskúšať v IDE, vytvorte prázdny súbor s príponou .erd.json a otvorte ho. V aplikácii Obsidian spustite z palety príkazov príkaz ERD Editor: Create new diagram alebo v prieskumníkovi súborov vyberte položku New ERD z kontextovej ponuky priečinka. Obe možnosti vytvoria prázdny súbor .erd a otvoria ho. V službe Google Drive vyberte New → More → ERD Editor a potom sa prihláste pomocou účtu Google. ERD Editor má prístup iba k súborom, ktoré pomocou neho vytvoríte alebo otvoríte. Vo webovej aplikácii, v službe Google Drive, vo VS Code, v IDE od JetBrains a v aplikácii Obsidian sa nový prázdny diagram otvorí na uvítacej obrazovke, ktorá ponúka prvé kroky: New Table, New Memo, Import, Command Palette a Shortcuts. Posúvanie, zmena priblíženia a prepínanie kariet ponechajú prázdny súbor nového diagramu nezmenený, pretože v novom diagrame sú zapnuté všetky zamknutia. Pozrite si časť Zamknutie. VS Code otvára súbor ERD ako text JSON v Source Control, Local History, Compare with Saved, pri kontrole úprav z chatu VS Code a od programovacích agentov, napríklad GitHub Copilot a Claude Code, a v zobrazeniach revízií rozšírení, napríklad GitLens, GitHub Pull Requests a Git Graph, takže zmena sa porovnáva riadok po riadku. Príkaz Reopen Editor With... zobrazí revíziu Git ako diagram iba na čítanie.

Po aktualizácii doplnku pre Obsidian reštartujte aplikáciu Obsidian: dovtedy si okno ponechá editor, ktorý načítala predchádzajúca verzia. Aktualizujte ERD Editor všade, kde zdieľate diagramy: verzia z obdobia pred zavedením skupín tabuliek nezobrazuje v súbore uloženom aktuálnou verziou ikony primárnych kľúčov a uložením súboru v nej sa stratia jeho skupiny tabuliek a skripty karty Schéma SQL. Súbor, ktorý uložila takáto verzia, sa prepíše do aktuálnej podoby pri prvej zmene, ktorá sa zapíše do súboru – pozrite si časť Zamknutie. Dovtedy ho editor JSON, ktorý ho overuje podľa jeho $schema, hlási ako neplatný.

Čo dokáže

• Kreslite tabuľky, stĺpce a poznámky na neohraničenom plátne a spájajte ich pomocou štyroch typov vzťahov: Zero One, Zero N, One Only, One N. Pozrite si stránku Začíname s úpravami. Indexy sa definujú v paneli vlastností tabuľky. Jedinečný index nad dvoma alebo viacerými stĺpcami je alternatívny kľúč a so zapnutou možnosťou zobrazenia Alternate Key diagram označí jeho stĺpce ako AK1.1, AK1.2 a tak ďalej. Pozrite si časti Indexy a Alternatívne kľúče.
• Ukončite vzťah na stĺpcoch, ktoré tabuľka už má: kým ho kreslíte myšou alebo perom, tlačidlo Map to existing columns vedľa tabuľky, na ktorej vzťah končí, spáruje kľúč nadradenej tabuľky so stĺpcami tejto tabuľky a tlačidlo Create new columns pridá nové stĺpce. Položka Map Columns v kontextovej ponuke vzťahu slúži na neskoršiu zmenu jeho stĺpcov. Pozrite si časť Mapovať stĺpce. Vzťah môže mať aj akcie ON DELETE a ON UPDATE. Pozrite si časť ON DELETE a ON UPDATE.
• Upravujte rýchlo: Alt + N pridá tabuľku; Alt + Enter pridá stĺpec; Alt + K prepne primárny kľúč na stĺpci s fokusom alebo na každom vybratom stĺpci, ak je jedným z nich; a Delete alebo Backspace odstráni výber. Každá z týchto akcií je jeden krok histórie zmien. Pozrite si časť Klávesové skratky. Tabuľku alebo poznámku pridá jedným kliknutím aj panel nástrojov plátna v dolnej časti plátna.
• Nastavte farbu tabuľky, poznámky alebo skupiny tabuliek vo výbere farby s prednastavenými farbami a farbami, ktoré diagram už používa, a farbu odstráňte pomocou možnosti No color alebo Remove color. Pozrite si časť Nastavenie farby tabuliek a poznámok.
• Zoskupte súvisiace tabuľky do skupín tabuliek: skupina je rámec za tabuľkami, ktorému môžete nastaviť názov a farbu. Nakreslite ju pomocou Alt + G alebo pomocou New Table Group z kontextovej ponuky plátna, z panela nástrojov plátna alebo z rýchleho vyhľadávania, prípadne ju vytvorte z vybratých tabuliek pomocou T a potom G alebo položky Group selected tables v ich kontextovej ponuke. Tabuľka sa pridá do skupiny, keď ju pustíte dovnútra, a odoberie sa z nej, keď ju pustíte mimo skupiny. Keď skupinu presuniete myšou za jej záhlavie, presunú sa s ňou aj jej tabuľky. DBML prenáša skupiny v oboch smeroch ako bloky TableGroup.
• Importujte existujúcu schému z formátu json, Schema SQL, GraphQL, DBML alebo AML. Pozrite si stránku Import a export súborov. Súbor Schéma SQL, GraphQL, DBML alebo AML sa načíta s tabuľkami rozmiestnenými pozdĺž ich vzťahov alebo do riadkov, ak žiadne vzťahy nemá. Položka Import and Add pridá súbor pod diagram namiesto toho, aby ho nahradila.
• Exportujte diagram ako json; ako schému SQL z karty Schéma SQL, uložením do súboru .sql alebo skopírovaním; alebo z dialógového okna Export image ako obrázok PNG alebo SVG, prípadne ako PNG do schránky.
• Vytvárajte schému SQL v syntaxi ôsmich databázových systémov: Databricks, MSSQL, MariaDB, MySQL, Oracle, PostgreSQL, Snowflake a SQLite. Pozrite si stránku Funkcie pre tabuľky. Panel možností karty Schéma SQL určuje príkazy, hlavičku a skupiny tabuliek, ktoré sa majú zapísať, a uchováva váš vlastný kód SQL uložený v diagrame, ktorý sa zapíše pred tabuľky a za ne.
• Generujte kód pre dvadsaťdva cieľov: jazyky C#, Go, Java, Kotlin, PHP, Rust, Scala, Swift a TypeScript; nástroje ORM Doctrine, Drizzle, JPA, SeaORM, Sequelize, SQLAlchemy a TypeORM; a AML, DBML, GraphQL, JSON Schema, Mermaid a Zod. Panel možností karty Generátor kódu určuje jazyk, databázu a štýly názvov a kód sa uloží ako súbor s príponou daného jazyka alebo sa skopíruje. Pozrite si stránku Generátor kódu.
• Čítajte schému na karte Vizualizácia ako silovo riadený graf Graph alebo ako Flow z kartičiek tabuliek rozmiestnených pozdĺž ich vzťahov, kde podržanie ukazovateľa nad tabuľkou zvýrazní všetko, s čím je prepojená. Stlačte Alt + F na karte ERD, ak sa chcete zamerať na vybraté tabuľky a tabuľky, ktoré s nimi súvisia.
• Pracujte na plátne bez okrajov: posúvajte zobrazenie všade, kam diagram siaha, meňte priblíženie od 10% do 150% pomocou Ctrl + Wheel (⌘ + Wheel na Macu), klávesnice alebo gesta stiahnutia prstov a v režime Zen skryte všetko okrem diagramu. Ťahanie stredným tlačidlom myši posúva zobrazenie z ľubovoľného miesta na plátne, aj nad tabuľkou. Pozrite si časť Pohyb po plátne.
• Usporiadajte celý diagram jedným krokom pomocou automatického rozloženia: silová simulácia, tok zľava doprava alebo strom v ktoromkoľvek z dvoch smerov, pričom každá skupina tabuliek zostane pohromade.
• Spustite príkaz odkiaľkoľvek pomocou rýchleho vyhľadávania alebo začnite hľadanie znakom #, @ alebo :, ak chcete prejsť na tabuľku, stĺpec alebo komentár či poznámku. Prechádzajte históriou úprav krok po kroku pomocou funkcií Vrátiť späť, znova vykonať, prehrajte históriu tejto relácie na plátne pomocou cestovania v čase alebo porovnajte diagram s iným súborom .json v prehliadači rozdielov. Jeho strom, umiestnený vedľa oboch verzií, uvádza tabuľky, stĺpce, indexy, cudzie kľúče, poznámky a skupiny tabuliek, ktoré boli pridané, zmenené, odstránené alebo premenované.
• Prezerajte si diagram v prieskumníkovi, strome ukotvenom pri ľavom okraji plátna: tabuľky, každá so svojimi stĺpcami, indexmi a cudzími kľúčmi, potom skupiny tabuliek a poznámky. Kliknutím na riadok prejdete na plátne na to, čo daný riadok predstavuje; riadok cudzieho kľúča zvýrazní aj svoj vzťah. Tlačidlo Explorer na paneli nástrojov vedľa tlačidla Search ho otvára a zatvára.
• Hľadajte text pomocou hľadania a nahrádzania v hornej časti prieskumníka. Prehľadáva názvy tabuliek, stĺpcov, indexov a skupín tabuliek, po zapnutí aj komentáre a poznámky, a zhody zobrazuje v strome prieskumníka. Nahraďte jednu zhodu alebo všetky; možnosť Preserve Case zachová pri každom nahradení veľkosť písmen nahrádzaného textu. Klávesová skratka Ctrl + F (⌘ + F na Macu) otvorí prieskumník s textovým kurzorom v poli hľadania a jej opätovné stlačenie prieskumník zatvorí.
• Používajte editor v 25 jazykoch, ktoré vyberiete tlačidlom Display Language na paneli nástrojov alebo v rýchlom vyhľadávaní. Možnosť System sa riadi jazykom prehliadača alebo hostiteľskej aplikácie a pri arabčine, hebrejčine a perzštine sa editor rozloží sprava doľava, pričom diagram zostane zľava doprava. Mení sa iba vlastný text editora: názvy, SQL a vygenerovaný kód zostávajú tak, ako boli napísané. Výber motívu na paneli nástrojov určuje vzhľad (System, Light alebo Dark), odtieň sivej a farbu zvýraznenia. Pozrite si stránku Jazyk a motív.
• Udržujte rozdiely v súbore čisté: poloha zobrazenia a priblíženie, otvorená karta, jazyk a štýly názvov na karte Generátor kódu a typ úvodzoviek sú predvolene zamknuté, takže súbor si ponechá hodnoty, ktoré tieto nastavenia mali v čase zamknutia, a posúvanie, zmena priblíženia ani prepínanie kariet ho nikdy nezmení. Súbor sa zapisuje v pevnom poradí a vynecháva namerané šírky, poradie prekrývania, body ukotvenia spojníc a odstránené objekty, takže ak diagram otvoríte a zatvoríte bez úpravy, súbor zostane taký, aký bol.
• Nechajte programovacieho agenta, napríklad Claude Code alebo Codex, upravovať diagram prostredníctvom servera MCP: naživo vo VS Code, v aplikácii Obsidian alebo v IDE od JetBrains, kde sa každá zmena zobrazí na plátne hneď, ako nastane, alebo priamo v samotnom súbore.
• Upravujte spoločne v reálnom čase vo webovej aplikácii (experimentálne). Relácie sú peer-to-peer a šifrované end-to-end, takže vašu schému neuchováva žiadny server a účastníci navzájom vidia svoje kurzory, fokus a výbery. Na vlastnej stránke vám metóda getSharedStore() poskytne ten istý prúd akcií cez prenos, ktorý si zvolíte.

Začnite príručkou k úpravám.

Prečo vznikol tento projekt

Existujúce nástroje na modelovanie neposkytovali takú úroveň používateľského zážitku, akú som chcel.
Preto som začal tento projekt, aby som ponúkol najlepší možný používateľský zážitok.
Najvyššou prioritou projektu je používateľský zážitok pri úpravách.
Ponúkne vám ohromujúci zážitok z úprav.