Вступ

erd-editor — це редактор діаграм «сутність — зв’язок». Він доступний як вебзастосунок, застосунок для Google Drive, розширення для VS Code, плагін для IntelliJ, плагін для Obsidian, а також як користувацький елемент (custom element) <erd-editor>, який можна вбудувати у власну сторінку. У всіх цих варіантах це один редактор і один формат документа.

Де отримати

Платформа	Встановлення	Що ви отримуєте
Вебзастосунок	erd-editor.io	PWA з можливістю встановлення, робота без мережі, співпраця в реальному часі
Google Drive	Google Workspace Marketplace	Додає ERD Editor до меню Open with і New у Drive та зберігає зміни в той самий файл
VS Code	Marketplace	Відкриває файли .erd.json у користувацькому редакторі (custom editor)
IntelliJ	JetBrains Marketplace	Той самий редактор для IDE на основі IntelliJ
Obsidian	Community plugins	Відкриває файли .erd і .erd.json у вкладці сховища (vault), лише в настільній версії
Ваша сторінка	npm install @dineug/erd-editor	Незалежний від фреймворків користувацький елемент <erd-editor> — див. встановлення
Агенти для програмування	@dineug/erd-editor-mcp	MCP-сервер, який дає змогу Claude Code, Codex або іншому клієнту редагувати діаграму в режимі Live у VS Code, IDE від JetBrains чи Obsidian або в самому файлі

Щоб спробувати його в IDE, створіть порожній файл із розширенням .erd.json і відкрийте його. В Obsidian виконайте команду ERD Editor: Create new diagram із палітри команд або виберіть пункт New ERD у контекстному меню папки у файловому провіднику. Будь-який із цих способів створює порожній файл .erd і відкриває його. У Google Drive виберіть New → More → ERD Editor, а потім увійдіть через обліковий запис Google. ERD Editor має доступ лише до файлів, які ви створюєте або відкриваєте за його допомогою. У вебзастосунку, Google Drive, VS Code, IDE від JetBrains і Obsidian нова порожня діаграма відкривається на вітальному екрані, тобто в меню перших кроків: New Table, New Memo, Import, Command Palette і Shortcuts. Прокручування, масштабування й перемикання вкладок залишають порожній файл нової діаграми без змін, оскільки в новій діаграмі ввімкнено всі блокування. Див. блокування. VS Code відкриває ERD-файл як текст JSON у Source Control, Local History, Compare with Saved, у переглядах змін, які вносять чат VS Code та агенти для програмування, як-от GitHub Copilot і Claude Code, а також у поданнях ревізій у розширеннях, як-от GitLens, GitHub Pull Requests і Git Graph, тож зміни порівнюються рядок за рядком. Reopen Editor With... показує ревізію Git як діаграму лише для читання.

Після оновлення плагіна для Obsidian перезапустіть Obsidian: доти у вікні залишається редактор, який завантажила попередня версія. Оновіть ERD Editor усюди, де ви ділитеся діаграмами: випуск, що вийшов до появи груп таблиць, не показує значків первинного ключа у файлі, який зберіг поточний випуск, а збереження файлу в такому випуску видаляє з нього групи таблиць і скрипти схеми SQL. Файл, збережений таким випуском, перезаписується в поточній формі під час першої зміни, яку зберігає файл, — див. блокування. До того часу JSON-редактор, який перевіряє файл на відповідність його $schema, позначає його як недійсний.

Можливості

• Малювати таблиці, стовпці й нотатки на безмежному полотні та з’єднувати їх зв’язками чотирьох типів: Zero One, Zero N, One Only, One N. Див. початок редагування. Індекси задаються на панелі властивостей таблиці. Унікальний індекс, що охоплює два або більше стовпців, є альтернативним ключем, і коли параметр відображення Alternate Key увімкнено, діаграма позначає його стовпці як AK1.1, AK1.2 тощо. Див. індекси і альтернативні ключі.
• Завершувати зв’язок на стовпцях, які вже є в таблиці: коли ви малюєте зв’язок мишею або пером, кнопка Map to existing columns біля таблиці, на якій він закінчується, зіставляє ключ батьківської таблиці зі стовпцями цієї таблиці, а кнопка Create new columns додає нові стовпці. Пункт Map Columns у контекстному меню зв’язку згодом змінює його стовпці. Див. зіставлення стовпців. Зв’язок також може мати дії ON DELETE і ON UPDATE. Див. ON DELETE і ON UPDATE.
• Швидко редагувати: Alt + N додає таблицю; Alt + Enter додає стовпець; Alt + K вмикає або вимикає первинний ключ для стовпця у фокусі або для кожного виділеного стовпця, якщо стовпець у фокусі є одним із них; а Delete або Backspace видаляє виділене. Кожна з цих дій є одним кроком відміни. Див. сполучення клавіш. Панель інструментів полотна внизу полотна також додає таблицю або нотатку одним клацанням.
• Задавати колір таблиці, нотатки чи групи таблиць на панелі вибору кольору, де є готові кольори та кольори, які вже використовує діаграма, і прибирати колір за допомогою No color або Remove color. Див. задання кольору таблиць і нотаток.
• Об’єднувати пов’язані таблиці в групи таблиць: група — це рамка позаду таблиць, якій можна задати назву й колір. Намалюйте групу за допомогою Alt + G або New Table Group у контекстному меню полотна, на панелі інструментів полотна чи у швидкому пошуку або створіть її з виділених таблиць, натиснувши T, потім G, чи вибравши пункт Group selected tables у їхньому контекстному меню. Таблиця потрапляє до групи, коли ви відпускаєте її всередині, і виходить із групи, коли ви відпускаєте її за межами, а перетягування групи за смугу заголовка переміщує разом із нею її таблиці. Формат DBML переносить групи в обох напрямках як блоки TableGroup.
• Імпортувати наявну схему з json, Schema SQL, GraphQL, DBML або AML. Див. імпорт і експорт файлів. Таблиці з файлу схеми SQL, GraphQL, DBML або AML з’являються розміщеними вздовж їхніх зв’язків, а якщо зв’язків немає, то рядами. Import and Add додає файл під діаграмою, а не замінює її.
• Експортувати діаграму як json; як схему SQL із вкладки схеми SQL, зберігши її у файл .sql або скопіювавши; або з діалогового вікна Export image як PNG- чи SVG-зображення або як PNG-зображення в буфері обміну.
• Створювати схему SQL у синтаксисі восьми СУБД: Databricks, MSSQL, MariaDB, MySQL, Oracle, PostgreSQL, Snowflake і SQLite. Див. функції для роботи з таблицями. Панель параметрів вкладки схеми SQL визначає, які оператори, заголовок і групи таблиць записувати, і зберігає в діаграмі ваш власний SQL-код, який записується перед таблицями й після них.
• Генерувати код для двадцяти двох цільових форматів: мов C#, Go, Java, Kotlin, PHP, Rust, Scala, Swift і TypeScript; ORM Doctrine, Drizzle, JPA, SeaORM, Sequelize, SQLAlchemy і TypeORM; а також AML, DBML, GraphQL, JSON Schema, Mermaid і Zod. Панель параметрів вкладки генератора коду визначає мову, базу даних і стилі назв, а код зберігається у файл із розширенням цієї мови або копіюється. Див. генератор коду.
• Досліджувати схему на вкладці візуалізації: у режимі Graph як граф із силовим розміщенням або в режимі Flow як потік карток таблиць, розміщених уздовж їхніх зв’язків, де наведення вказівника на таблицю підсвічує все, з чим вона пов’язана. Натисніть Alt + F на вкладці ERD, щоб сфокусуватися на виділених таблицях і таблицях, пов’язаних із ними.
• Працювати на полотні без меж: панорамувати всюди, куди простягається діаграма, змінювати масштаб від 10% до 150% за допомогою Ctrl + Wheel (⌘ + Wheel на Mac), клавіатури або зведення пальців і за допомогою режиму дзен прибирати з екрана все, крім діаграми. Перетягування середньою кнопкою миші панорамує полотно з будь-якого місця, навіть над таблицею. Див. навігація полотном.
• Упорядковувати всю діаграму за один крок за допомогою автоматичного розміщення: силова симуляція, потік зліва направо або дерево в будь-якому з двох напрямків, причому таблиці кожної групи залишаються разом.
• Виконувати команду з будь-якого місця за допомогою швидкого пошуку або починати пошук із #, @ чи :, щоб перейти до таблиці, стовпця або коментаря чи нотатки. Крок за кроком проходити історію змін за допомогою відміни й повторення, відтворювати історію поточного сеансу на полотні за допомогою подорожі в часі або порівнювати діаграму з іншим файлом .json у перегляді відмінностей. Його дерево поруч із двома версіями перелічує таблиці, стовпці, індекси, зовнішні ключі, нотатки й групи таблиць, які було додано, змінено, видалено або перейменовано.
• Переглядати діаграму в оглядачі — дереві, закріпленому ліворуч від полотна: таблиці, кожна зі своїми стовпцями, індексами й зовнішніми ключами, потім групи таблиць і нотатки. Клацніть рядок, щоб перейти до об’єкта, який він представляє на полотні; рядок зовнішнього ключа також підсвічує свій зв’язок. Кнопка Explorer на панелі інструментів, поруч із кнопкою Search, відкриває й закриває оглядач.
• Шукати текст за допомогою пошуку й заміни у верхній частині оглядача. Пошук охоплює назви таблиць, стовпців, індексів і груп таблиць, а також коментарі й нотатки, коли ви їх увімкнете, і показує збіги в дереві оглядача. Можна замінити один збіг або всі одразу; параметр Preserve Case надає кожній заміні регістр тексту, який вона замінює. Ctrl + F (⌘ + F на Mac) відкриває оглядач із текстовим курсором у полі пошуку, а повторне натискання закриває оглядач.
• Користуватися редактором однією з 25 мов, яку можна вибрати кнопкою Display Language на панелі інструментів або у швидкому пошуку. Варіант System використовує мову браузера або хост-застосунку, а для арабської, івриту й перської редактор розташовується справа наліво, тоді як діаграма залишається зліва направо. Змінюється лише власний текст редактора: назви, SQL і згенерований код залишаються такими, як їх написано. Конструктор теми на панелі інструментів дає змогу вибрати вигляд (System, Light або Dark), відтінок сірого й колір акценту. Див. мова й тема.
• Зберігати порівняння версій (diff) чистими: положення прокручування й масштаб, відкрита вкладка, мова й стилі назв генератора коду, а також тип лапок за замовчуванням заблоковані, тому у файлі залишаються значення, які вони мали на момент блокування, а прокручування, масштабування чи перемикання вкладок ніколи його не змінюють. Файл записується у фіксованому порядку й не містить виміряних ширин, порядку накладання, точок прив’язки ліній зв’язку та видалених об’єктів, тож якщо відкрити діаграму й закрити її без змін, файл залишиться таким, яким був.
• Дозволяти агенту для програмування, як-от Claude Code чи Codex, редагувати діаграму через MCP-сервер: у режимі Live у VS Code, Obsidian чи IDE від JetBrains, де кожна зміна з’являється на полотні тієї ж миті, коли відбувається, або в самому файлі.
• Редагувати спільно в реальному часі у вебзастосунку (експериментально). Сеанси є одноранговими (peer-to-peer) і мають наскрізне шифрування, тож жоден сервер не зберігає вашу схему, а учасники бачать курсори, фокус і виділення один одного. На власній сторінці метод getSharedStore() надає вам той самий потік дій через транспорт на ваш вибір.

Почніть із посібника з редагування.

Причина створення проєкту

Наявні інструменти моделювання не забезпечували того рівня користувацького досвіду, якого я прагнув.
Тому я започаткував цей проєкт, щоб забезпечити найкращий користувацький досвід.
Найвищий пріоритет проєкту — досвід редагування для користувача.
Він запропонує вам неймовірний досвід редагування.