Настройка диаграмм

Создание диаграммы

Создать новую диаграмму можно в реестре диаграмм (пункт " Диаграммы" главного меню платформы). При создании новой диаграммы в карточке диаграммы должны быть указаны название и графическая нотация диаграммы.

В качестве графической нотации диаграммы можно выбрать одну из базовых нотаций:

• BPMN 2.0 (Business Process Model and Notation, нотация и модель бизнес-процессов)
• ArchiMate 3.0 (нотация моделирования архитектуры предприятия)
• cтандартная нотация,

или одну из пользовательских нотаций.

Разработка (редактирование) диаграммы

Откройте диаграмму кликнув по иконке (Открыть диаграмму) в строке реестра диаграмм или в карточке диаграммы.

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

Сохранение диаграммы в процессе редактирования происходит автоматически.

Редактирование связанных данных

Редактирование данных, связанных с элементами диаграмм, возможно если для диаграммы установлен признак Сохранять экземпляры элементов диаграмм (признак устанавливается в карточке диаграммы в реестре диаграмм).

Для редактирования связанных данных элемента диаграммы необходимо в контекстном меню элемента диаграммы вызвать пункт "Открыть карточку":

Связь с другими диаграммами

Для того чтобы связать элемент диаграммы с другой диаграммой необходимо в контекстном меню элемента диаграммы выбрать пункт "Связать с дочерней диаграммой". Элементы диаграмм, имеющие связи с другими диаграммами, помечаются иконкой +, при клике по которой происходит переход к связанной диаграмме.

Связать элемент диаграммы с другой диаграммой возможно если для диаграммы установлен признак Сохранять экземпляры элементов диаграмм (признак устанавливается в карточке диаграммы в реестре диаграмм).

Реестры диаграммы

Функциональность реестров диаграмм позволяет отобразить связанные с диаграммой данные в табличном виде (в виде реестра), а также обеспечивает возможность фильтрации связанных данных при кликах по элементам диаграммы.

Настройка реестров

Настройка реестров диаграммы осуществляется на закладке "Реестры" карточки диаграммы в реестре диаграмм.

При добавлении нового реестра необходимо указать следующие параметры:

• Контекст - класс узла ограничителя, используется для фильтрации реестра при кликах по элементам указанного класса. Для создаваемых вручную диаграмм в качестве контекста может выступать только сама диаграмма (класс "Диаграммы"). Для автогенерируемых диаграмм может быть указан контекст, который используется в параметрах автогенерации.
• Семантический поиск - семантический поиск, который задает структуру и правила поиска данных, отображаемых в реестре. Семантический поиск должен содержать колонку, тип (класс) которой совпадает с классом, указанным в поле "Контекст". Семантический поиск, результаты которого предполагается фильтровать при кликах по связям диаграммы, должен содержать поля с кодами from и to.
• Наименование реестра - наименование реестра, которое будет отображено в режиме редактирования или просмотра диаграммы
• Фильтровать при кликах по элементам - если результаты семантического поиска предполагается фильтровать при кликах по узлам или связям диаграммы, это необходимо указать

Отображение реестров

Для отображения реестра в режиме просмотра или редактирования диаграммы необходимо кликнуть по иконке (Реестры (таблицы)) в панели инструментов диаграммы:

Автогенерируемые диаграммы

Функциональность автогенерируемых диаграмм (далее - а-диаграмм) позволяет строить диаграммы в автоматическом режиме на основе данных семантических поисков. Для создания а-диаграммы необходимо установить признак "Автогенерация" в карточке диаграммы в реестре диаграмм.

Внимание

• доступ к а-диаграммам осуществляется в результате перехода от элементов других диаграмм: открывать а-диаграммы из реестра не имеет смысла
• а-диаграммы нельзя редактировать, они доступны только для чтения

Настройка автогенерации

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

Для каждого семантического поиска должны быть определены следующие параметры:

• Тип поиска - указание на то, что вернет семантический поиск: набор связей или узлов диаграммы
• Поиск - семантический поиск, который задает структуру и правила поиска данных (узлов или связей), отображаемых в диаграмме
• Контекст (класс узла ограничителя) - определяет контекст для автогенерации диаграммы. Например, если диаграмма будет открыта в контексте класса "А" (т.е. будет осуществлен переход к а-диаграмме из элемента типа "А"), то для автогенерации будут использованы все семантические поиски, для которых в качестве узла-ограничителя установлен класс "А"
• Переопределение цвета - не обязательно для заполнения, используется для переопределения цвета узлов и связей (могут быть указаны несколько параметров через точку с запятой, например, fillColor=#eee;dashed=1;strokeColor=#000;):
  • fillColor=#eee - цвет заливки для узлов диаграммы
  • dashed=1 - штриховая линия контура для узла диаграммы или для связи
  • strokeColor=#000 - цвет контура для узла диаграммы или для связи

Все семантические поиски должны удовлетворять следующим условиям:

• Класс корневого узла семантического поиска должен совпадать с классом узла-ограничителя (при этом для корневого класса, в качестве параметров поиска, должно быть указано имя экземпляра) ИЛИ среди полей поиска должны присутствовать поля, типизируемые классом узла-ограничителя
• Вспомогательные поля семантического поиска желательно не показывать в результатах для снижения объема передаваемых данных

Результат семантического поиска для узлов диаграммы должен содержать три поля, для которых указаны следующие коды:

• id - узел
• type - код класса узла
• color - цвет, определенный для класса узла

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

• from - начальный узел связи
• to - конечный узел связи

Переход к а-диаграммам

Настройка переходов к а-диаграммам осуществляется на закладке "Переходы" карточки диаграммы в реестре диаграмм.

При добавлении нового перехода необходимо указать:

• Тип элемента, с которого можно перейти к другой диаграмме - необходимо указать тип элемента, из контекстного меню которого будет возможным осуществить переход к а-диаграмме
• Автогенерируемая диаграмма, к которой нужно перейти - необходимо указать диаграмму с признаком "Автогенерация"

Переход к а-диаграмме осуществляется из контекстного меню элемента диаграммы, если его тип (класс) совпадает с типом элемента, указанным в настройках переходов.

Ролевая модель (доступ к диаграмме)

Назначение пользователей на роли диаграммы производится на закладке "Роли" карточки диаграммы в реестре диаграмм.

Пользователи платформы могут быть назначены на следующие роли:

• Архитектор
• Владелец
• Редактор
• Участник
• Читатель

Права на редактирование диаграммы есть у создателя диаграммы и у всех пользователей, назначенных на роль "Редактор". Пользователи, назначенные на другие роли, имеют доступ к диаграмме в режиме чтения.

Пользовательская нотация

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

Основные классы, используемые для настройки пользовательской нотации представлены на схеме ниже:

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

В режиме редактирования диаграммы слои нотации и элементы слоев нотации отображаются так, как показано на рисунке:

Требования к классам, на которых базируются элементы

Класс, на котором базируется элемент слоя должен удовлетворять следующим условиям:

• должен наследовать классу Узлы или классу Коннекторы, в зависимости от того, является ли элемент узлом или коннектором
• должен иметь уникальный код (может быть указано в поле Код карточки класса)
• должен принадлежать предметной области "Диаграммы" (может быть указано в поле Предметная область карточки класса)

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

Форма элемента слоя

Форма элемента слоя может быть определена либо с помощью XML-описания формы в свойстве Форма элемента (см. https://jgraph.github.io/mxgraph/docs/js-api/files/shape/mxStencil-js.html), либо с помощью стиля в свойстве Стиль элемента.

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

Ограничения элементов нотации

Для элемента слоя могут быть указаны следующие ограничения:

• Минимальное число исходящих связей - если не указано, то без ограничений
• Максимальное число исходящих связей - если не указано, то без ограничений
• Минимальное число входящих связей - если не указано, то без ограничений
• Максимальное число входящих связей - если не указано, то без ограничений
• Разрешенные соединения - элементы слоев, с которыми элемент может быть соединен исходящим коннектором. Если разрешенные соединения не указаны, то разрешены все соединения.

Элементы которые не удовлетворяют установленным ограничениям, выделяются красным пунктирным контуром. При наведении курсора мыши на такие элементы всплывает сообщение о нарушенных ограничениях:

Индикаторы элементов диаграмм

Для пользовательской нотации диаграмм могут быть настроены правила отображения индикаторов на элементах диаграммы в зависимости от различных условий:

Для настройки индикаторов необходимо выполнить следующие действия:

1. Создать индикатор (экземпляр класса) в классе Индикатор элемента нотации. Для каждого индикатора должны быть указаны следующие параметры:
   • Подсказка на индикаторе - текст, который будет отображаться при наведении курсора мыши на индикатор. Необязательный параметр.
   • Ссылка на иконку индикатора - иконка должна быть в формате SVG, ссылка обязательно должна содержать расширение файла иконки (*.svg). Например: https://eding.devtas.ru/img/ui.svg - допустимая ссылка, а https://eding.devtas.ru/img/icon - недопустимая ссылка. Обязательный параметр.
   • Элементы для индикации - семантический поиск (см. ниже требования к настройке семантического поиска), результатами которого являются элементы диаграмм, для которых должны быть отображены индикаторы. Обязательный параметр.
2. Для экземпляра-нотации в классе Нотация диаграммы в свойстве имеет индикаторы установить отношения с созданными экземплярами-индикаторами.

Важно

• Для нотации может быть указано несколько индикаторов
• Индикаторы могут быть отображены только для диаграмм имеющих признак Сохранять экземпляры элементов диаграмм
• Индикаторы могут быть отображены как на узлах, так и на коннекторах диаграммы

Настройка семантического поиска

Семантический поиск, указываемый в свойстве Элементы для индикации должен удовлетворять следующим условиям:

1. Семантический поиск должен содержать видимую колонку с элементами диаграмм. Для колонки должен быть установлен код id.
2. Семантический поиск должен содержать колонку, в которой приведена информация о диаграмме, которой принадлежит элемент диаграммы. Для колонки должен быть установлен код diagram. Колонка может быть скрыта из результатов поиска.
3. Семантический поиск может содержать фильтры, в которых реализована логика отбора элементов диаграмм, на которых должны быть отображены индикаторы.

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

Настройка стилизованных подписей элементов диаграммы

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

1. Укажите целевое свойство. В системном свойстве 65950839-5a24-43eb-8a1a-32cc4ad99ea6 (свойство для вычисления надписей узлов) для вашей нотации задайте пользовательское свойство, которое будет вычислять подписи.
2. Привяжите свойство к элементам. Добавьте созданное свойство к тем классам элементов диаграммы, для которых требуется кастомная подпись.
3. Настройте правило вычисления. Для выбранного свойства создайте правило, определяющее логику формирования текста подписи (объединение полей, условная подстановка, форматирование и т. д.).

💡 Поддержка HTML
Вычисляемые подписи могут содержать HTML-разметку. Это позволяет управлять размером шрифта, цветом, начертанием и структурой текста. Пример корректной разметки:

<font style="font-size: 16px"><b>Название элемента</b></font>
<div>[Контейнер:&nbsp;JavaScript, Angular]</div>
<br />
<div style="font-size: 11px; color: #e6e6e6">Краткое описание...</div>

Настройка представлений для карточек элементов диаграммы

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

1. Создайте представление. Настройте представление для соответствующего класса элемента диаграммы (определите состав вкладок, полей и их параметры).
2. Привяжите представление к элементу слоя. В карточке элемента слоя диаграммы найдите системное свойство 974e133a-c92f-4d5d-81eb-d060560d4164 (представление для отображения в карточке) и укажите в нем созданное представление.