Вступ

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

Де отримати

Платформа	Встановлення	Що ви отримуєте
Вебзастосунок	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> і <erd-viewer>, який показує діаграму лише для читання — див. встановлення і ErdViewerElement
Будь-який сайт	erd-editor.io/embed	Діаграма лише для читання в iframe за URL документа, без коду — див. вбудовування
Агенти для програмування	@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 і @dineug/erd-editor-mcp усюди, де ви ділитеся діаграмами. Випуск, у якому ще не було вкладки словника, або старіший MCP-сервер, що редагує файл на диску, зберігає діаграму без її логічних назв, прив’язок до доменів і словників. Випуск, що вийшов до появи груп таблиць, також не показує значків первинного ключа у файлі, який зберіг поточний випуск, а збереження файлу в такому випуску видаляє з нього групи таблиць і скрипти схеми 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.
• Задавати таблицям і стовпцям логічні назви — назви, які читають люди, як-от Customer Name для CUST_NM, — поруч із фізичними назвами, які записують схема SQL і генератор коду. Відображення назв (Physical Names, Logical Names або Both Names) визначає, яку з них показує полотно, і його враховує більшість інших місць, де показується назва таблиці чи стовпця, як-от рядки таблиць і стовпців в оглядачі, режим Flow та експортоване зображення. Вибрати варіант можна кнопкою Name View на панелі інструментів полотна, у контекстному меню полотна, на панелі інструментів вкладки візуалізації в режимі Flow або у швидкому пошуку.
• Підтримувати стандарт іменування діаграми на вкладці словника. На її аркушах Domains, Words і Terms можна шукати, сортувати й редагувати рядки, як в електронній таблиці, і кожен аркуш має власну історію змін. Аркуші імпортують і експортують CSV: імпорт читає власну структуру редактора або структуру корейського стандарту публічних даних у кодуванні UTF-8 чи EUC-KR, а експорт записує власну структуру редактора. Клітинка логічної назви доповнює назви термінів. Логічна назва дає своїй таблиці чи стовпцю фізичну назву з відповідного терміна або зі скорочень слів, на які вона розбивається, доки ви не задасте назву самі. Після зміни слова чи терміна пункт Derive Physical Names Again повторно формує назви, зокрема й ті, які ви задали самі. Стовпець, прив’язаний до домену вручну або через свій термін, отримує тип даних домену й відстежує його зміни, а параметр відображення Domain показує домен кожного стовпця. Аркуш Checks показує заборонені й незареєстровані слова, слова-синоніми, повторювані назви, невідомі домени, фізичні назви, що відрізняються від назви їхнього терміна, і типи стовпців, що відрізняються від типу їхнього домену. Полотно виділяє кольором логічні й фізичні назви, які позначають перевірки слів і термінів.
• Імпортувати наявну схему з json, Schema SQL, GraphQL, DBML або AML. Див. імпорт і експорт файлів. Таблиці з файлу схеми SQL, GraphQL, DBML або AML з’являються розміщеними вздовж їхніх зв’язків, а якщо зв’язків немає, то рядами. Import and Add додає файл під діаграмою, а не замінює її.
• Експортувати діаграму як json; як схему SQL із вкладки схеми SQL, зберігши її у файл .sql або скопіювавши; або з діалогового вікна Export image як PNG- чи SVG-зображення або як PNG-зображення в буфері обміну.
• Показувати діаграму лише для читання на іншому сайті: вставте erd-editor.io/embed з URL файлу, зокрема з GitHub, або завантажте елемент <erd-viewer> на власній сторінці. Читач панорамує, масштабує, шукає й підсвічує зв’язки, але ніщо не редагує діаграму.
• Створювати схему 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, щоб сфокусуватися на виділених таблицях і таблицях, пов’язаних із ними. У режимі Flow кнопки Previous table і Next table кроками назад і вперед проходять те, до чого звужувався режим Flow, як це роблять там клавіші відміни й повторення.
• Працювати на полотні без меж: панорамувати всюди, куди простягається діаграма, змінювати масштаб від 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, де кожна зміна з’являється на полотні тієї ж миті, коли відбувається, або в самому файлі. Він також може задавати логічні назви й домени стовпців, редагувати словники, повторно формувати фізичні назви й показувати те, що виявляє аркуш Checks.
• Редагувати спільно в реальному часі у вебзастосунку (експериментально). Сеанси є одноранговими (peer-to-peer) і мають наскрізне шифрування, тож жоден сервер не зберігає вашу схему, а учасники бачать курсори, фокус і виділення один одного. На власній сторінці метод getSharedStore() надає вам той самий потік дій через транспорт на ваш вибір, а @dineug/erd-editor-yjs тримає діаграму в синхронізації через документ Yjs і будь-який провайдер, що його несе, включно з офлайн-змінами та присутністю.

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

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

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