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. 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 – zobacz stronę Instalacja
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 i przełączanie kart 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 wszędzie tam, gdzie udostępniasz diagramy: wersja sprzed wprowadzenia grup tabel nie pokazuje 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 taką wersję jest przepisywany do bieżącej postaci przy pierwszej zmianie, którą zachowuje plik – zobacz sekcję Blokada. Do tego czasu edytor JSON, który waliduje plik 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.
• 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.
• 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 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.
• 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. 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, a także komentarze i notatki, gdy je włączysz, 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 oraz typ cudzysłowu są domyślnie zablokowane, więc plik zachowuje wartości z chwili zablokowania, a przewijanie, powiększanie czy przełączanie kart nigdy go nie zmienia. Plik jest zapisywany w stałej kolejności i pomija zmierzone szerokości, kolejność warstw, punkty zaczepienia łączników i usunięte elementy, 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.
• 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.

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.