Введение

erd-editor — это редактор диаграмм «сущность — связь». Он доступен как веб-приложение, приложение для Google Drive, расширение для VS Code, плагин для IntelliJ, плагин для Obsidian, а также как пользовательский элемент <erd-editor>, который можно встроить в свою страницу. Во всех случаях это один и тот же редактор и один и тот же формат документа.

Где получить

Платформа	Установка	Что вы получаете
Веб-приложение	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> без привязки к фреймворкам — см. Установка
Агенты для программирования	@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 везде, где вы обмениваетесь диаграммами: версия, выпущенная до появления групп таблиц, не показывает значки первичного ключа в файле, сохраненном текущей версией, а сохранение файла в ней удаляет из него группы таблиц и скрипты Схемы 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), оттенок серого и цвет акцента. См. Язык и тема.
• Сохраняйте изменения в Git чистыми: положение прокрутки и масштаб, открытая вкладка, язык и стили имен Генератора кода, а также тип кавычек по умолчанию заблокированы, поэтому в файле хранятся значения, которые были у них в момент блокировки, и ни прокрутка, ни масштабирование, ни переключение вкладок никогда его не меняют. Файл записывается в фиксированном порядке и не содержит измеренных значений ширины, порядка наложения, точек привязки линий связи и удаленных элементов, поэтому если открыть диаграмму и закрыть ее без правок, файл останется прежним.
• Позвольте агенту для программирования, например Claude Code или Codex, редактировать диаграмму через MCP-сервер: вживую в VS Code, Obsidian или IDE JetBrains, где каждое изменение сразу появляется на холсте, либо в самом файле.
• Редактируйте вместе в реальном времени в веб-приложении (экспериментальная функция). Сеансы являются одноранговыми и защищены сквозным шифрованием, поэтому ни один сервер не хранит схему, а участники видят курсоры, фокус и выделения друг друга. На вашей собственной странице метод getSharedStore() дает тот же поток действий поверх транспорта по вашему выбору.

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

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

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