DBML Diagram 2.1: цветные группы и свободный канвас для схем БД в JetBrains IDE

Привет, Хабр! Продолжаем развивать DBML Diagram в Boost for Java.

В предыдущем обзоре мы показывали интеграцию с dbdiagram.io, экспорт SQL и проверку отношений между таблицами. В следующем обновлении сосредоточились на работе с самой диаграммой: как ориентироваться в схеме, отделять одну предметную область от другой и перемещать связанные таблицы вместе.

В версии 2.0.0 появилась визуализация TableGroup — цветные рамки с названиями групп. В 2.1.0 мы перешли на свободный SVG-канвас: убрали ограничение перемещения слева и сверху, добавили сетку, перенос групп и более удобную навигацию.

Версия 2.1.0 уже доступна в JetBrains Marketplace. Ниже расскажем, что изменилось, какие ограничения остались и какую обратную связь нам сейчас особенно хотелось бы получить.

Страница плагина · Исходный код

Почему понадобилось менять рабочее поле

Открыть DBML и увидеть таблицы со связями — только начало. Дальше хочется расположить схему так, чтобы её было удобно обсуждать и читать.

Например, выделить блок пользователей, отдельно поставить каталог, а заказы разместить между ними. Или передвинуть целую предметную область, освободив место для новых таблиц.

В прежнем предпросмотре этому мешали две вещи.

Первая — ограничение координат. Таблицы нельзя было увести дальше определённой границы слева и сверху. Панорамирование существовало, но само расположение объектов оставалось привязано к положительной области.

Вторая — отсутствие перемещения группы целиком. Даже когда таблицы объединялись визуально, переносить их приходилось по одной.

Для небольшой схемы с этим можно было жить. По мере её роста ограничения становились заметнее.

TableGroup теперь действительно виден на диаграмме

В DBML есть конструкция TableGroup, позволяющая объединять таблицы в именованные группы.

Раньше локальный предпросмотр пропускал такие объявления с предупреждением. Таблицы и отношения отображались, но визуальное разделение на группы терялось.

Теперь для каждой группы рисуется рамка с названием, цветом и количеством входящих в неё таблиц.

В существующую схему можно добавить, например, такие объявления:

TableGroup Identity [color: #3b82f6] {
  customers
  addresses
}

TableGroup Catalog [color: #10b981] {
  categories
  products
}

TableGroup Sales [color: #a78bfa] {
  orders
  order_items
}

Здесь предполагается, что сами таблицы уже описаны в файле. Полный пример доступен в репозитории.

Цвет можно задать в форматах #rgb и #rrggbb. Если его нет, плагин выбирает цвет из палитры на основе имени группы. Некорректное значение вызывает предупреждение и заменяется стандартным цветом.

При автоматической раскладке группы размещаются отдельными блоками. Таблицы без группы остаются вне этих блоков.

Если переместить отдельную таблицу, рамка подстроится под её новое положение. Названия и цвета групп сохраняются при экспорте в SVG и PNG.

Важная граница: группа — это визуальная организация схемы, а не новая сущность базы данных. Она не создаёт SQL-схему, не меняет внешние ключи и не влияет на DDL.

Перешли на свободный канвас

В 2.1.0 рабочее поле перестало ограничивать движение объектов слева и сверху. Таблицы и управляющие точки связей можно перемещать через начало координат, в том числе в отрицательную область.

Поверх поля появилась точечная сетка. Её можно отключить кнопкой Grid, а кнопкой Snap — включить привязку перемещаемых объектов к сетке. Шаг привязки составляет 24 единицы схемы и не зависит от масштаба.

Навигация теперь устроена следующим образом:

• Space + перетаскивание левой кнопкой — перемещение по полю, даже если курсор находится над таблицей, связью или заголовком группы.

• Перетаскивание средней кнопкой мыши — такое же панорамирование без клавиатуры.

• Обычная прокрутка — перемещение по полю; Shift + колесо позволяет двигаться горизонтально.

• Ctrl/Cmd + колесо — масштабирование относительно курсора.

• Fit — показать содержимое диаграммы целиком.

• 100% — вернуться к натуральному масштабу и центрировать содержимое.

Зум относительно курсора особенно полезен на больших схемах: нужный участок остаётся под мышью, вместо того чтобы после изменения масштаба снова искать его на экране.

Положение камеры, масштаб и настройки Grid/Snap сохраняются для конкретного DBML-файла в рабочем пространстве IDE. Обновление предпросмотра и правки текста больше не должны возвращать пользователя к исходному ракурсу.

Небольшое техническое уточнение

Под канвасом здесь понимается свободное рабочее поле. Мы сохранили SVG-отрисовку, а не заменили её на HTML Canvas API.

Для решения этой задачи важнее было разделить координаты объектов и положение камеры. Таблица имеет своё положение в схеме, а камера определяет, какая её часть сейчас видна и в каком масштабе.

Благодаря этому можно свободно перемещаться по диаграмме, сохраняя векторное представление, работу с отдельными элементами и SVG-экспорт.

Свободные координаты при этом не означают неограниченную производительность: размер схемы, количество связей и сложность маршрутов по-прежнему имеют значение.

Группу можно переместить целиком

Теперь за заголовок группы можно потянуть все входящие в неё таблицы.

При таком перемещении:

• сохраняются относительные расстояния между таблицами;

• вместе с группой перемещаются управляющие точки её внутренних связей;

• внешние связи перестраиваются с учётом нового положения;

• позиции таблиц и внутренние маршруты сохраняются одним обновлением раскладки.

Отдельную таблицу по-прежнему можно двигать за её собственный заголовок.

При этом перенос карточки внутрь чужой рамки не меняет её принадлежность к группе. Состав группы определяется текстом TableGroup. Чтобы перенести таблицу в другую предметную область, нужно изменить DBML.

Так сохраняется понятное разделение: текст описывает структуру и членство, а действия мышью — личную раскладку.

Что изменилось в пересчёте связей

Перемещение таблицы может повлиять не только на её собственные связи. Карточка способна оказаться на пути линии между двумя другими таблицами, поэтому проверять только непосредственно связанные отношения недостаточно.

Мы сохранили проверку препятствий, но объединили пересчёт маршрутов в один проход на кадр анимации. Геометрия таблиц и препятствий внутри такого прохода используется повторно.

Это уменьшает повторную работу при движении мыши. Однако для плотных схем с большим количеством циклов автоматическая прокладка линий всё ещё может требовать ручной корректировки.

Экспорт учитывает содержимое, а не историю перемещений

Свободные координаты потребовали изменить и расчёт границ экспорта.

Если таблицы расположены левее или выше начала координат, они не должны обрезаться. Если всю схему сдвинули далеко вправо, в изображение не нужно включать огромное пустое пространство между ней и нулевой точкой.

Теперь границы SVG и PNG рассчитываются по текущему положению таблиц, рамок групп и линий связей.

Экспортируется вся диаграмма, а не только видимая часть окна. Навигационная сетка в изображение не попадает.

Для PNG сохраняются защитные ограничения: не более 16 384 пикселей по одной стороне и 40 миллионов пикселей суммарно. Поэтому очень далеко разнесённые таблицы всё ещё могут сделать растровый экспорт слишком большим. В таком случае стоит уплотнить раскладку или использовать SVG.

Не только визуальные изменения

Между предыдущим обзором и веткой 2.x также доработали обработку сложных схем:

• исправили сценарии разбора, приводившие к Java heap space;

• добавили обработку табличных CHECK-ограничений и inline-проверок;

• расширили поддержку составных внешних ключей, включая проверку и экспорт полного набора колонок.

CHECK-выражения сохраняются в SQL-экспорте, но плагин не вычисляет их и не переводит автоматически между диалектами.

В подготовленной сборке 2.1.0 прошли 144 автоматических теста. Отдельно проверяли взаимодействие мышью: перенос таблиц и групп, работу стрелок, панорамирование, масштабирование и восстановление камеры. Совместимость проверена на IDEA 2024.1.7, IDEA 2025.2.6 и платформе 262 в PyCharm 2026.2.2.

Это не заменяет проверку на реальных рабочих схемах — именно здесь нам нужна помощь пользователей.

Какие ограничения остались

Чтобы ожидания совпадали с текущими возможностями:

• множественного выделения таблиц и Undo/Redo для раскладки пока нет;

• отдельные sticky notes ещё не отображаются;

• локальный парсер поддерживает не весь DBML;

• пересекающиеся карточки и сложные маршруты могут потребовать ручного размещения;

• локальная раскладка не синхронизируется с расположением таблиц на сайте dbdiagram.io.

Редактор, просмотр схемы, локальные проверки и экспорт продолжают работать без подключения к облаку. Интеграция с dbdiagram.io остаётся необязательной.

Попробуйте на своей схеме — и расскажите, что неудобно

Для новых возможностей нужна версия 2.1.0. Её можно установить или обновить через Settings → Plugins либо открыть страницу DBML Diagram в Marketplace.

Для знакомства достаточно открыть .dbml в режиме Code + Preview, попробовать переместить группу, включить Snap и изменить масштаб около нужной таблицы.

Если файл уже имеет сохранённую раскладку, она останется на месте. Кнопка Reset layout применит автоматическое расположение и сбросит личные настройки камеры. Сам DBML она не меняет.

Нам особенно интересна обратная связь по нескольким вопросам:

1. Стало ли удобнее перемещаться по схеме? Каким устройством пользуетесь: мышью, тачпадом или чем-то ещё? Понятны ли сочетания для панорамирования и зума?

2. Помогают ли группы в реальной работе? Делите схему по сервисам, предметным областям, командам или другому принципу?

3. Как плагин ведёт себя на больших схемах? Сколько примерно таблиц и связей, на каких действиях появляются задержки?

4. Что происходит со связями при переносе? Есть ли случаи, когда стрелки проходят через карточки, неверно выбирают маршрут или неудобно редактируются?

5. Что важнее сделать следующим? Множественное выделение, Undo/Redo, поиск таблицы на поле, мини-карту, сворачивание групп или улучшение автоматической раскладки?

Для сообщения об ошибке пригодится такой набор информации:

Версия IDE и DBML Diagram:
Операционная система:
Примерное число таблиц и связей:
Мышь или тачпад:
Последовательность действий:
Ожидаемый и фактический результат:
Минимальный DBML-пример, если возможно:

Пожалуйста, не публикуйте внутренние схемы с чувствительными названиями и комментариями. Лучше подготовить небольшой обезличенный пример, в котором сохраняется проблемная конструкция.

Ошибки удобнее собирать в GitHub Issues. Сценарии использования и идеи можно обсудить в комментариях к статье или в Boost for Java Community. Написать напрямую — @v_d_roman.

Хочется понять не только то, какие кнопки ещё добавить, но и на каком действии инструмент пока мешает работать. Именно такие примеры помогут выбрать следующий шаг.

Попробовать DBML Diagram · Посмотреть исходники · Сообщить о проблеме