Создать доску

Редактор диаграмм

Редактор диаграмм строит схему по её текстовому описанию: вы пишете код на языке Mermaid или PlantUML — Эсборд собирает картинку и кладёт её на доску одним объектом. Это быстрый способ рисовать блок-схемы, UML и графы, не расставляя фигуры руками. Диаграмма остаётся редактируемой: на доске хранится сам код, поэтому схему можно в любой момент открыть и поправить, а не перерисовывать заново. Есть и визуальный режим Draw.io — рисование мышью прямо в окне редактора.

Редактор диаграмм доступен в облачной версии Эсборда.

Как открыть редактор диаграмм

Кнопки этого инструмента нет в самой панели инструментов. Нажмите «+» (Больше инструментов) внизу панели и выберите Редактор диаграмм.

Откроется окно Диаграмма: слева — код, справа — предпросмотр. Готовая схема добавится в центр видимой области доски по кнопке Сохранить.

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

Форматы: Mermaid, PlantUML и Draw.io

Формат выбирается полем Формат в шапке окна.

  • Mermaid — блок-схемы, диаграммы последовательности, ER-диаграммы, диаграмма Ганта и другие: вы описываете схему текстом, картинку строит Эсборд
  • PlantUML — классические UML-диаграммы: классы, активности, состояния, компоненты, варианты использования
  • Draw.io — не код, а визуальный редактор: фигуры расставляются мышью (подробнее — в разделе ниже)

Схемы Mermaid и PlantUML собираются прямо в вашем браузере — код на внешние сервисы не отправляется.

Смена формата полностью заменяет текущую диаграмму пустой. Эсборд предупредит окном Изменить формат? — «Текущая диаграмма будет заменена пустой диаграммой в выбранном формате». Автоматического перевода кода из Mermaid в PlantUML и обратно нет.

Окно редактора: код и предпросмотр

Левая панель — Код Mermaid или Код PlantUML: моноширинный шрифт, подсветка синтаксиса, длинные строки не переносятся, панель прокручивается вбок.

Правая панель — Предпросмотр: картинка пересобирается по мере ввода. Если в коде ошибка, вместо картинки появится «Не удалось построить диаграмму. Проверьте синтаксис Mermaid» (или PlantUML), а кнопка Сохранить останется неактивной — на доску попадает только то, что удалось построить.

Масштаб предпросмотра меняется кнопками Уменьшить масштаб и Увеличить масштаб (от 25 % до 400 % шагом 25 %) или Ctrl + колесо мыши (для Windows) / Cmd + колесо (для Mac). Кликните по значению масштаба, чтобы вернуть 100 %.

Масштаб предпросмотра влияет только на окно редактора и не меняет размер диаграммы на доске.

Сохранить диаграмму можно сочетанием Ctrl + Enter (для Windows) / Cmd + Enter (для Mac).

Закрыть редактор можно кнопкой Отмена или крестиком в шапке. Клавиша Esc редактор не закрывает — так правки не теряются случайно. Если в коде есть несохранённые изменения, Эсборд спросит: Закрыть без сохранения? — «Изменения диаграммы будут потеряны».

Готовые примеры

Помнить синтаксис наизусть не нужно: в шапке панели кода есть кнопка Примеры диаграмм (в узком окне — Примеры).

Для Mermaid доступны: Блок-схема, Диаграмма последовательности, Диаграмма классов, Диаграмма состояний, Диаграмма Ганта, Круговая диаграмма, ER-диаграмма, Путь пользователя, Граф Git, Архитектура C4.

Для PlantUML: Диаграмма последовательности, Диаграмма классов, Диаграмма активности, Диаграмма состояний, Диаграмма компонентов, Диаграмма вариантов использования.

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

Пример заменяет весь код в панели. Если вы уже что-то написали, Эсборд спросит Заменить текущий код? — «Изменения кода будут заменены примером диаграммы выбранного типа».

Темы оформления

Внешний вид диаграммы задаётся полем Тема рядом с полем Формат.

  • Для Mermaid доступны пять тем: Стандартная, Нейтральная, Темная, Лесная, Базовая
  • Для PlantUML и Draw.io — две: Стандартная и Темная

Тему можно поменять и позже, прямо на доске, не открывая редактор.

Draw.io: рисование мышью

Выберите в поле Формат значение Draw.io — откроется визуальный редактор с библиотекой фигур. Пока он загружается, показывается надпись «Загружаем Draw.io…».

Схема сохраняется на доску кнопкой сохранения самого Draw.io в его панели. Кнопки Сохранить и Отмена Эсборда в этом режиме не показываются, сочетание Ctrl + Enter не работает. При выходе с несохранёнными правками Эсборд спросит Закрыть без сохранения?.

Draw.io — внешний сервис diagrams.net: редактор открывается в окне Эсборда, но подгружается из интернета. Если доступ к нему закрыт — например, корпоративным файрволом, — появится сообщение «Не удалось загрузить Draw.io.».

У диаграмм Draw.io на доске нет кнопки Выбрать тему: светлое или тёмное оформление задаётся при сохранении из редактора.

Редактирование диаграммы на доске

Дважды кликните по диаграмме — откроется тот же редактор с сохранённым кодом, форматом и темой. То же самое делает кнопка Редактировать диаграмму во всплывающей панели редактирования выделенной диаграммы.

Кнопка Выбрать тему в панели редактирования меняет оформление сразу на доске, без входа в редактор. Если выделить несколько диаграмм, тема применится ко всем сразу.

Отредактировать диаграмму нельзя, если объект заблокирован, его в этот момент правит другой участник или у вас нет прав на редактирование доски.

Дополнительные действия

Диаграмма ведёт себя как обычный объект доски: её можно перемещать, менять размер за угол выделения, копировать, дублировать и удалять клавишей Delete.

Эсборд запоминает размер, до которого вы растянули диаграмму, и применяет его к следующим добавленным диаграммам.

Кроме индивидуальных опций редактирования, для диаграмм доступны общие для всех объектов действия: Добавление URL к объекту, Блокировка объекта.

При выделении объектов разных типов диаграммы отображаются в Фильтре панели редактирования как Диаграммы.

Ограничения

  • Сохранить можно только диаграмму, которая успешно построилась: пока в предпросмотре ошибка, кнопка Сохранить заблокирована
  • PlantUML: подключение внешних файлов и картинок (!include, <img:http…>, загрузка JSON или YAML по ссылке) не поддерживается — появится сообщение «PlantUML-включения и внешние ресурсы не поддерживаются»
  • PlantUML: очень сложная схема может не успеть построиться — «Построение PlantUML заняло слишком много времени. Попробуйте упростить диаграмму». В этом случае разбейте её на несколько диаграмм
  • Mermaid: HTML-разметка внутри подписей узлов не работает — только текст
  • Отдельного тарифного ограничения у инструмента нет — действуют только общие лимиты на количество объектов доски

На доске хранится код диаграммы, а картинка собирается в браузере у каждого участника. Поэтому диаграмма остаётся чёткой при увеличении и попадает в экспорт PDF без потери качества.