Введение

erd-editor — это редактор диаграмм «сущность — связь». Он доступен как веб-приложение, приложение для Google Drive, расширение для VS Code, плагин для IntelliJ, плагин для Obsidian, а также как пользовательский элемент <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 в пользовательском редакторе
IntelliJ	JetBrains Marketplace	Тот же редактор для IDE на основе IntelliJ
Obsidian	Community plugins	Открывает файлы .erd и .erd.json на вкладке хранилища, только в настольной версии
Ваша страница	npm install @dineug/erd-editor	Пользовательский элемент <erd-editor> без привязки к фреймворкам и <erd-viewer>, показывающий диаграмму только для чтения, — см. Установка и ErdViewerElement
Любой сайт	erd-editor.io/embed	Диаграмма только для чтения во фрейме iframe по URL документа, без кода — см. Встраивание
Агенты для программирования	@dineug/erd-editor-mcp	MCP-сервер, позволяющий Claude Code, Codex или другому клиенту редактировать диаграмму вживую в 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), оттенок серого и цвет акцента. См. Язык и тема.
• Сохраняйте изменения в Git чистыми: положение прокрутки и масштаб, открытая вкладка, язык и стили имен Генератора кода, тип кавычек и режим отображения имен по умолчанию заблокированы, поэтому в файле хранятся значения, которые были у них в момент блокировки, и ни прокрутка, ни масштабирование, ни переключение вкладок или режима отображения имен никогда его не меняют. Файл записывается в фиксированном порядке, с отдельной строкой для каждой строки словаря, и не содержит измеренных значений ширины, порядка наложения, точек привязки линий связи, удаленных элементов, пустого текста элементов, а также списков и коллекций тех видов, элементов которых в диаграмме нет, поэтому если открыть диаграмму и закрыть ее без правок, файл останется прежним.
• Позвольте агенту для программирования, например Claude Code или Codex, редактировать диаграмму через MCP-сервер: вживую в VS Code, Obsidian или IDE JetBrains, где каждое изменение сразу появляется на холсте, либо в самом файле. Агент также может задавать логические имена и домены столбцов, редактировать словари, заново формировать физические имена и получать список того, что находит лист Checks.
• Редактируйте вместе в реальном времени в веб-приложении (экспериментальная функция). Сеансы являются одноранговыми и защищены сквозным шифрованием, поэтому ни один сервер не хранит схему, а участники видят курсоры, фокус и выделения друг друга. На вашей собственной странице метод getSharedStore() дает тот же поток действий поверх транспорта по вашему выбору, а @dineug/erd-editor-yjs синхронизирует диаграмму через документ Yjs и любой провайдер, который его передает, включая правки, сделанные офлайн, и присутствие.

Начните с руководства по редактированию.

Почему появился этот проект

Существующие инструменты моделирования не обеспечивали того уровня пользовательского опыта, к которому я стремился.
Поэтому я начал этот проект, чтобы предложить наилучший пользовательский опыт.
Главный приоритет проекта — пользовательский опыт редактирования.
Он подарит вам потрясающие впечатления от редактирования.