Wprowadzenie

erd-editor to edytor diagramów związków encji. Jest dostępny jako aplikacja internetowa, aplikacja Google Drive, rozszerzenie VS Code, wtyczka IntelliJ, wtyczka Obsidian oraz jako element niestandardowy <erd-editor>, który możesz osadzić na własnej stronie, a obok niego <erd-viewer> do pokazywania diagramu tylko do odczytu. Strona, która nie ładuje żadnego własnego skryptu, może zamiast tego osadzić diagram tylko do odczytu z erd-editor.io/embed. We wszystkich tych postaciach jest to ten sam edytor i ten sam format dokumentu.

Skąd pobrać

Platforma	Instalacja	Co otrzymujesz
Aplikacja internetowa	erd-editor.io	Instalowalna aplikacja PWA, działanie offline, współpraca w czasie rzeczywistym
Google Drive	Google Workspace Marketplace	Dodaje ERD Editor do menu Open with i New w Google Drive, a zmiany zapisuje z powrotem w tym samym pliku
VS Code	Marketplace	Otwiera pliki .erd.json w edytorze niestandardowym
IntelliJ	JetBrains Marketplace	Ten sam edytor dla IDE opartych na IntelliJ
Obsidian	Community plugins	Otwiera pliki .erd i .erd.json na karcie sejfu, tylko w aplikacji desktopowej
Własna strona	npm install @dineug/erd-editor	Element niestandardowy <erd-editor> niezależny od frameworków oraz <erd-viewer>, który pokazuje diagram tylko do odczytu – zobacz strony Instalacja i ErdViewerElement
Dowolna strona	erd-editor.io/embed	Diagram tylko do odczytu w elemencie iframe, z adresu URL dokumentu, bez kodu – zobacz stronę Osadzanie
Agenci kodujący	@dineug/erd-editor-mcp	Serwer MCP, dzięki któremu Claude Code, Codex lub inny klient może edytować diagram na żywo w VS Code, IDE JetBrains lub aplikacji Obsidian albo w samym pliku

Aby wypróbować edytor w IDE, utwórz pusty plik z rozszerzeniem .erd.json i otwórz go. W aplikacji Obsidian uruchom polecenie ERD Editor: Create new diagram z palety poleceń albo wybierz New ERD w menu kontekstowym folderu w eksploratorze plików. Każdy z tych sposobów tworzy pusty plik .erd i go otwiera. W Google Drive wybierz New → More → ERD Editor, a następnie zaloguj się przez Google. ERD Editor ma dostęp tylko do plików, które za jego pomocą utworzysz lub otworzysz. W aplikacji internetowej, Google Drive, VS Code, IDE JetBrains i aplikacji Obsidian nowy, pusty diagram otwiera się na ekranie powitalnym, czyli w menu pierwszych kroków: New Table, New Memo, Import, Command Palette i Shortcuts. Przewijanie, powiększanie, przełączanie kart i przełączanie Widoku nazw pozostawiają pusty plik nowego diagramu bez zmian, ponieważ w nowym diagramie wszystkie blokady są włączone. Zobacz sekcję Blokada. VS Code otwiera plik ERD jako tekst JSON w Source Control, Local History i Compare with Saved, w przeglądach zmian czatu VS Code i agentów kodujących, takich jak GitHub Copilot i Claude Code, oraz w widokach rewizji rozszerzeń, takich jak GitLens, GitHub Pull Requests i Git Graph, dzięki czemu zmiany są porównywane wiersz po wierszu. Polecenie Reopen Editor With... pokazuje rewizję Git jako diagram tylko do odczytu.

Po zaktualizowaniu wtyczki Obsidian uruchom ponownie aplikację Obsidian: do tego czasu okno zachowuje edytor wczytany przez poprzednią wersję. Zaktualizuj ERD Editor i pakiet @dineug/erd-editor-mcp wszędzie tam, gdzie udostępniasz diagramy. Wersja sprzed karty Słownik lub starszy serwer MCP edytujący plik na dysku zapisuje diagram bez jego nazw logicznych, powiązań z domenami i słowników. Wersja sprzed wprowadzenia grup tabel nie pokazuje też ikon klucza podstawowego w pliku zapisanym przez bieżącą wersję, a zapisanie w niej tego pliku usuwa z niego grupy tabel i skrypty Schematu SQL. Plik zapisany przez starszą wersję jest przepisywany do bieżącej postaci przy pierwszej zmianie, którą zachowuje plik – zobacz sekcję Blokada. Ten zapis usuwa też puste teksty, listy i kolekcje zapisane przez starszą wersję, więc zmienia w pliku więcej niż sama edycja. Do tego czasu edytor JSON, który waliduje plik z wersji sprzed wprowadzenia grup tabel względem jego właściwości $schema, zgłasza go jako nieprawidłowy.

Możliwości

• Rysuj tabele, kolumny i notatki na nieograniczonej kanwie i łącz je relacjami czterech typów: Zero One, Zero N, One Only, One N. Zobacz stronę Rozpoczęcie edycji. Indeksy definiuje się w panelu właściwości tabeli. Indeks unikatowy obejmujący dwie lub więcej kolumn jest kluczem alternatywnym, a przy włączonej opcji widoku Alternate Key diagram oznacza jego kolumny jako AK1.1, AK1.2 i tak dalej. Zobacz sekcje Indeksy i Klucze alternatywne.
• Kończ relację na kolumnach, które tabela już ma: gdy rysujesz relację myszą lub piórem, przycisk Map to existing columns obok tabeli, na której się ona kończy, łączy w pary klucz tabeli nadrzędnej z kolumnami tej tabeli, a przycisk Create new columns dodaje nowe kolumny. Pozycja Map Columns w menu kontekstowym relacji pozwala później zmienić jej kolumny. Zobacz sekcję Mapuj kolumny. Relacja może też mieć akcje ON DELETE i ON UPDATE. Zobacz sekcję ON DELETE i ON UPDATE.
• Edytuj szybko: Alt + N dodaje tabelę; Alt + Enter dodaje kolumnę; Alt + K włącza i wyłącza klucz podstawowy w kolumnie z fokusem albo we wszystkich zaznaczonych kolumnach, jeśli ta kolumna jest jedną z nich; a Delete lub Backspace usuwa zaznaczone elementy. Każda z tych operacji stanowi jeden krok cofania. Zobacz sekcję Skróty klawiaturowe. Pasek narzędzi kanwy u dołu kanwy również dodaje tabelę lub notatkę jednym kliknięciem.
• Koloruj tabelę, notatkę lub grupę tabel w selektorze kolorów z kolorami predefiniowanymi i kolorami, których diagram już używa, a kolor usuwaj opcją No color lub pozycją Remove color. Zobacz sekcję Ustawianie kolorów tabel i notatek.
• Zbieraj powiązane tabele w grupy tabel: każda grupa to ramka za tabelami, której możesz nadać nazwę i kolor. Narysuj grupę skrótem Alt + G lub poleceniem New Table Group w menu kontekstowym kanwy, na pasku narzędzi kanwy lub w Szybkim wyszukiwaniu albo utwórz ją z zaznaczonych tabel skrótem T, a potem G lub pozycją Group selected tables w ich menu kontekstowym. Tabela dołącza do grupy, gdy upuścisz ją wewnątrz ramki, i opuszcza grupę, gdy upuścisz ją na zewnątrz, a przeciągnięcie grupy za pasek tytułu przenosi razem z nią jej tabele. Format DBML zachowuje grupy w obu kierunkach jako bloki TableGroup.
• Nadawaj tabelom i kolumnom nazwy logiczne, czyli nazwy czytane przez ludzi, takie jak Customer Name dla CUST_NM, obok nazw fizycznych, które zapisują Schemat SQL i Generator kodu. Widok nazw (Physical Names, Logical Names lub Both Names) decyduje o tym, które z nich wyświetla kanwa, a podąża za nim większość innych miejsc, w których pojawia się nazwa tabeli lub kolumny, takich jak wiersze tabel i kolumn w Eksploratorze, tryb Przepływ i wyeksportowany obraz. Wybierz go przyciskiem Name View na pasku narzędzi kanwy, w menu kontekstowym kanwy, na pasku narzędzi karty Wizualizacja w trybie Flow lub w Szybkim wyszukiwaniu.
• Przechowuj standard nazewnictwa diagramu na karcie Słownik. Jej arkusze Domains, Words i Terms przeszukuje się, sortuje i edytuje jak arkusz kalkulacyjny, a każdy z nich ma własną historię cofania. Arkusze importują i eksportują pliki CSV: import odczytuje własny układ edytora lub układ koreańskiego standardu danych publicznych, w kodowaniu UTF-8 lub EUC-KR, a eksport zapisuje własny układ edytora. Komórka nazwy logicznej uzupełnia nazwy terminów. Nazwa logiczna nadaje swojej tabeli lub kolumnie nazwę fizyczną na podstawie pasującego terminu albo skrótów słów, na które się dzieli, dopóki nie wpiszesz nazwy samodzielnie. Po zmianie słowa lub terminu polecenie Derive Physical Names Again ponownie generuje nazwy, łącznie z nazwami wpisanymi samodzielnie. Kolumna powiązana z domeną, ręcznie lub przez swój termin, przyjmuje typ danych domeny i podąża za zmianami domeny, a opcja widoku Domain pokazuje domenę każdej kolumny. Arkusz Checks wymienia słowa zakazane, niezarejestrowane i będące synonimami, zduplikowane nazwy, nieznane domeny, nazwy fizyczne niezgodne z nazwą z ich terminu oraz typy kolumn niezgodne z typem ich domeny. Kanwa koloruje nazwy logiczne i fizyczne zgłaszane przez kontrole słów i terminów.
• Importuj istniejący schemat w formacie json, Schema SQL, GraphQL, DBML lub AML. Zobacz stronę Importowanie i eksportowanie plików. Tabele z pliku w formacie Schemat SQL, GraphQL, DBML lub AML są rozmieszczane wzdłuż ich relacji, a gdy plik nie ma relacji – w rzędach. Operacja Import and Add dodaje plik poniżej diagramu, zamiast go zastępować.
• Eksportuj diagram jako json; jako Schemat SQL z karty Schemat SQL, zapisany jako plik .sql lub skopiowany; albo z okna dialogowego Export image jako obraz PNG lub SVG albo jako obraz PNG w schowku.
• Pokaż diagram tylko do odczytu na innej stronie: osadź erd-editor.io/embed z adresem URL pliku, także z GitHuba, albo załaduj element <erd-viewer> na własnej stronie. Czytelnik przesuwa widok, powiększa, wyszukuje i podświetla relacje, a nic nie edytuje diagramu.
• Generuj Schemat SQL w składni ośmiu systemów baz danych: Databricks, MSSQL, MariaDB, MySQL, Oracle, PostgreSQL, Snowflake i SQLite. Zobacz stronę Operacje na tabelach. Panel opcji karty Schemat SQL pozwala wybrać instrukcje, nagłówek i grupy tabel do wygenerowania, może wpisywać nazwy logiczne do pustych komentarzy oraz przechowuje zapisany w diagramie własny kod SQL, który jest wstawiany przed tabelami i po nich.
• Generuj kod w dwudziestu dwóch formatach docelowych: języki C#, Go, Java, Kotlin, PHP, Rust, Scala, Swift i TypeScript; biblioteki ORM Doctrine, Drizzle, JPA, SeaORM, Sequelize, SQLAlchemy i TypeORM; a także AML, DBML, GraphQL, JSON Schema, Mermaid i Zod. Panel opcji karty Generator kodu pozwala wybrać język, bazę danych i style nazw, a kod można zapisać jako plik z rozszerzeniem danego języka lub skopiować. Zobacz stronę Generator kodu.
• Analizuj schemat na karcie Wizualizacja w trybie Graph jako graf o układzie siłowym albo w trybie Flow jako kafelki tabel rozmieszczone wzdłuż ich relacji, gdzie najechanie wskaźnikiem na tabelę podświetla wszystko, z czym jest ona połączona. Naciśnij Alt + F na karcie ERD, aby skupić widok na zaznaczonych tabelach i tabelach z nimi powiązanych. W trybie Flow przyciski Previous table i Next table przechodzą wstecz i do przodu po kolejnych zawężeniach trybu Przepływ, tak jak robią to tam klawisze cofania i ponawiania.
• Pracuj na kanwie bez krawędzi: przesuwaj widok wszędzie, dokąd sięga diagram, zmieniaj powiększenie od 10% do 150% skrótem Ctrl + Wheel (⌘ + Wheel na komputerach Mac), za pomocą klawiatury lub gestu szczypania i ukrywaj w trybie zen wszystko oprócz diagramu. Przeciąganie środkowym przyciskiem myszy przesuwa widok z dowolnego miejsca kanwy, nawet nad tabelą. Zobacz sekcję Poruszanie się po kanwie.
• Uporządkuj cały diagram w jednym kroku za pomocą funkcji Automatyczny układ: symulacji sił, przepływu od lewej do prawej lub drzewa w dowolnym z dwóch kierunków, przy czym tabele każdej grupy pozostają razem.
• Uruchom z dowolnego miejsca polecenie w palecie Szybkie wyszukiwanie albo zacznij wyszukiwanie od #, @ lub :, aby przejść do tabeli, kolumny albo komentarza lub notatki; # i @ dopasowują też nazwy logiczne. Przechodź krok po kroku przez historię zmian za pomocą funkcji Cofanie i ponawianie, odtwórz historię bieżącej sesji na kanwie za pomocą funkcji Podróż w czasie albo porównaj diagram z innym plikiem .json w Podglądzie różnic. Jego drzewo, widoczne obok obu wersji, wymienia tabele, kolumny, indeksy, klucze obce, notatki i grupy tabel, które dodano, zmieniono lub usunięto albo którym zmieniono nazwę.
• Przeglądaj diagram w panelu Eksplorator, czyli drzewie zadokowanym po lewej stronie kanwy: tabele, każda ze swoimi kolumnami, indeksami i kluczami obcymi, a następnie grupy tabel i notatki. Kliknij wiersz, aby przejść na kanwie do elementu, który ten wiersz przedstawia; wiersz klucza obcego dodatkowo podświetla swoją relację. Przycisk Explorer na pasku narzędzi, obok przycisku Search, otwiera i zamyka ten panel.
• Wyszukuj tekst za pomocą funkcji Znajdź i zamień u góry Eksploratora. Przeszukuje ona nazwy tabel, kolumn, indeksów i grup tabel, nazwy logiczne tabel i kolumn oraz, gdy je włączysz, komentarze i notatki, i pokazuje dopasowania w drzewie Eksploratora. Zamień jedno dopasowanie lub wszystkie; opcja Preserve Case nadaje każdej zamianie wielkość liter tekstu, który zastępuje. Skrót Ctrl + F (⌘ + F na komputerach Mac) otwiera Eksplorator z kursorem tekstowym w polu wyszukiwania, a jego ponowne naciśnięcie zamyka Eksplorator.
• Używaj edytora w 25 językach, wybieranych przyciskiem Display Language na pasku narzędzi lub w Szybkim wyszukiwaniu. Opcja System podąża za językiem przeglądarki lub aplikacji hosta, a w językach arabskim, hebrajskim i perskim edytor ma układ od prawej do lewej, podczas gdy diagram pozostaje od lewej do prawej. Zmienia się tylko tekst samego edytora: nazwy, kod SQL i wygenerowany kod pozostają w niezmienionej postaci. Kreator motywu na pasku narzędzi pozwala wybrać wygląd (System, Light lub Dark), odcień szarości i kolor akcentu. Zobacz stronę Język i motyw.
• Utrzymuj przejrzyste różnice w plikach: pozycja przewijania i powiększenie, otwarta karta, język i style nazw Generatora kodu, typ cudzysłowu oraz Widok nazw są domyślnie zablokowane, więc plik zachowuje wartości z chwili zablokowania, a przewijanie, powiększanie, przełączanie kart czy przełączanie Widoku nazw nigdy go nie zmienia. Plik jest zapisywany w stałej kolejności, z jedną linią na każdy wiersz słownika, i pomija zmierzone szerokości, kolejność warstw, punkty zaczepienia łączników, usunięte elementy, pusty tekst elementu oraz listy i kolekcje rodzaju, którego diagram w ogóle nie zawiera, dzięki czemu otwarcie diagramu i zamknięcie go bez żadnej zmiany pozostawia plik w niezmienionym stanie.
• Pozwól agentowi kodującemu, takiemu jak Claude Code lub Codex, edytować diagram za pośrednictwem serwera MCP: na żywo w VS Code, aplikacji Obsidian lub IDE JetBrains, gdzie każda zmiana pojawia się na kanwie w chwili, gdy zachodzi, albo w samym pliku. Może też ustawiać nazwy logiczne i domeny kolumn, edytować słowniki, ponownie generować nazwy fizyczne i pobierać listę tego, co wykrywa arkusz Checks.
• Edytuj wspólnie w czasie rzeczywistym w aplikacji internetowej (funkcja eksperymentalna). Sesje działają w modelu peer-to-peer i są szyfrowane end-to-end, więc żaden serwer nie przechowuje twojego schematu, a uczestnicy widzą nawzajem swoje kursory, fokus i zaznaczenia. Na własnej stronie funkcja getSharedStore() zapewnia ten sam strumień akcji przez transport, który wybierzesz, a pakiet @dineug/erd-editor-yjs synchronizuje diagram za pośrednictwem dokumentu Yjs i dowolnego dostawcy, który go przenosi, łącznie z edycjami offline i obecnością.

Zacznij od działu Przewodnik po edycji.

Dlaczego powstał ten projekt

Istniejące narzędzia do modelowania nie zapewniały oczekiwanego przeze mnie poziomu doświadczenia użytkownika.
Dlatego powstał ten projekt, który ma zapewnić najlepsze możliwe doświadczenie użytkownika.
Najwyższym priorytetem projektu jest doświadczenie użytkownika podczas edycji.
Ten projekt zapewni ci niezwykłe wrażenia z edycji.