Интерактивные диаграммы PlantUML

PlantUML — это мощный и универсальный инструмент, который позволяет легко и быстро создавать разнообразные виды диаграмм. С помощью простого и интуитивно понятного синтаксиса пользователи могут создавать такие диаграммы, как UML-диаграммы, схемы бизнес-процессов, блок-схемы и многое другое, что делает PlantUML отличным выбором для тех, кто хочет визуализировать свои идеи и процессы без глубоких знаний программирования.

Идея использования PlantUML

Идея использовать PlantUML возникла во время работы над доработкой 1С:СППР в контексте моделирования архитектуры приложений, бизнес-архитектуры и архитектуры данных. Этот подход был представлен на партнерском семинаре компании 1С в 2024 году.

Да, среди статей есть примеры использования PlantUML, но основной минус примеров - отсутствие интерактивности, т.к. диаграммы формируются как «картинка» без возможности добавления интерактивных функций.  

Постановка задачи

Основная цель заключается в реализации функционала на платформе «1С:Предприятие 8», позволяющего генерировать интерактивные (кликабельные) диаграммы без необходимости подключения к интернету. Примером такой задачи является создание схемы интеграционных потоков между различными приложениями в рамках корпоративной ИТ-инфраструктуры.

Для демонстрации возможностей инструмента была создана упрощенная версия примера, которая показывает основные функции PlantUML. Хотя этот пример носит учебный характер, он вполне способен продемонстрировать, каким образом использование PlantUML может значительно улучшить удобство работы, например, с 1С:СППР.

Результат:

Интерактивная диаграммы информационных потоков, позволяющая пользователям управлять визуализацией информационных потоков различными способами:

• Генерация диаграммы локально (смотри документацию) - диаграмма может быть создана без подключения к интернету, что особенно полезно в случаях, когда работа ведется в изолированных системах или закрытых контурах, где доступ в сеть ограничен или отсутствует;
• Открытие форм элементов справочников - пользователь может легко получить доступ к приложениям и разделам учета, просто кликнув на соответствующую гиперссылку;
• Расшифровка интеграционных потоков - для получения дополнительной информации о конкретных потоках данных достаточно кликнуть на стрелки диаграммы, что открывает подробную расшифровку потока, предоставляя пользователям дополнительные сведения;
• Исключение приложений из диаграммы - если нужно исключить определенные приложения из отображаемой схемы, пользователи могут воспользоваться специальной гиперссылкой "Исключить из диаграммы". Эта функция помогает сосредоточиться на наиболее важных элементах системы.
• Сохранение диаграммы в формате SVG - готовая диаграмма может быть сохранена в виде файла формата SVG. Этот формат удобен для дальнейшего просмотра и редактирования, поскольку его можно открыть в любом современном браузере.

Эти функции делают работу с интерактивной диаграммой удобной и эффективной, позволяя пользователям адаптировать её под свои нужды и условия работы.

Метамодель базы:

• Подсистема «ВизуализациияPlantUML» - функциональность генерации диаграммы «локально». Работает в текущем пример для операционной системы Windows; 
• Подсистема «ТехническаяПодсистема» - справочники, используемые при реализации примера справочник «Разделы учета» - разделы учета предприятия;
• Справочник «Приложения» - приложения или сервисы, например, конкретные информационные базы 1С. Приложения могут быть дополнительно детализированы до разделов учета (отдельная табличная часть). Пример «вырожденный», т.к. решается задача показать, как можно диализировать элемент диаграммы гиперссылками;
• Справочник «Интеграционные потоки между приложениями» - интеграционные потоки между приложениями;
• Обработка «ФормированиеКартыИнтеграционныхПотоков» - обработка формирования диаграммы.

Пошаговый сценарий использования:

• Запустить обработку «Формирование карты интеграционных потоков»;
• Перейдите на страницу «Приложения» и нажмите на кнопку «Заполнить приложения», что приведет к заполнению таблицы на основе данных из справочника «Приложения». Если установлен флажок (чекбокс) напротив какого-либо приложения, оно будет отображаться на формируемой диаграмме;
• Нажмите на кнопку «Сформировать диаграмму». После завершения формирования диаграммы:
  • Страница «Диаграмма» автоматически откроется и станет активной, вся «магия» в методе ртВизуализациияPlantUMLСервер.СгенерированноеSVG(ИсходныйКод).
  • Таблица на странице «Реестр интеграционных потоков» будет заполнена соответствующими данными.
  • Код для формирования диаграммы на языке PlantUML появится на странице «Исходный код».
• При нажатии на гиперссылку названия приложения, например, 1С:ERP будет открыта форма справочника «Приложения». Стек вызова:
  • РезультатОбработкиSVGПриНажатии
  • ОбработатьПереходПоНавигационнойСсылке
• При нажатии на гиперссылку названия раздела учета внутри приложения, например, «Управление НСИ» будет открыта форма справочника «Разделы учета». Стек вызова:
  • РезультатОбработкиSVGПриНажатии
  • ОбработатьПереходПоНавигационнойСсылке
• При нажатии на гиперссылку «Исключить из диаграммы» в таблице «Приложения» будет снят флаг (чекбокс) у соответствующего приложения. Стек вызова:
  • РезультатОбработкиSVGПриНажатии
  • ОбработатьИсключениеПриложенияИзДиаграммы
• При нажатии на гиперссылку «(Количество интеграционных потоков) активной страницей будет установлена страница «Реестр интеграционных потоков» и в таблице будет установлен отбор по приложению источнику и приемнику. Стек вызова:
  • РезультатОбработкиSVGПриНажатии
  • ОбработатьПереходВТаблицуИнтеграционныхПотоков

P.S. Исходный код можно использовать для создания диаграммы онлайн через сервис PlantUML. Важно отметить, что перед использованием кода необходимо удалить строку !pragma layout elk, чтобы избежать возможных конфликтов, но вид диаграммы немножко изменится. 

PlantUML использует механизм внешней компоновки для некоторых диаграмм (классы, варианты использования и т.д.).  По умолчанию используется GraphViz / dot. Это означает, что PlantUML должен вызвать внешний процесс для создания некоторых диаграмм. ELK предоставляет альтернативный механизм компоновки, который может быть полезен для сложных диаграмм. Подробнее: https://plantuml.com/ru/elk
 

Исходный код:

Результат онлайн генерации:

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

---

• ОС - Windows
• Платформа - 1С:Предприятие 8.3 (8.3.25.1394)
• JAVA: version "11.0.6" 2020-01-15 LTS

Продолжение статьи: Использование 1С + PlantUML + JavaScript для расширения интерактивных функций формируемых диаграмм