Добавьте изображения

Чтобы визуально различать бизнес- и системные требования, добавьте для них SVG-изображения. Вы можете создать их самостоятельно в графическом редакторе или воспользоваться готовыми примерами из этого руководства.

Создайте файл BusinessRequirement.svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 70" width="200" height="70"
     preserveAspectRatio="none">
  <rect class="stroke stroke-dasharray"
        x="1" y="1" width="198" height="68" rx="3"
        fill="white" stroke="#bfbfbf" stroke-width="2"
        vector-effect="non-scaling-stroke" />
  <path class="fill fill--stroke"
        d="M4 1 H196 a3 3 0 0 1 3 3 V5 H31 V69 H4 a3 3 0 0 1 -3 -3 V4 a3 3 0 0 1 3 -3z"
        fill="#f59e0b" stroke="#f59e0b" stroke-width="2"
        vector-effect="non-scaling-stroke" />
  <rect x="7" y="25" width="18" height="22" rx="2"
        fill="none" stroke="white" stroke-width="2" />
  <path d="M12 25v-3h8v3 M11 30h10 M11 35h10 M11 40h6"
        fill="none" stroke="white" stroke-width="2"
        stroke-linejoin="round" stroke-linecap="round" />
  <rect id="label" x="33" y="7" width="164" height="60" fill="none" />
</svg>

Создайте файл SystemRequirement.svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 70" width="200" height="70"
     preserveAspectRatio="none">
  <rect class="stroke stroke-dasharray"
        x="1" y="1" width="198" height="68" rx="3"
        fill="white" stroke="#bfbfbf" stroke-width="2"
        vector-effect="non-scaling-stroke" />
  <path class="fill fill--stroke"
        d="M4 1 H196 a3 3 0 0 1 3 3 V5 H31 V69 H4 a3 3 0 0 1 -3 -3 V4 a3 3 0 0 1 3 -3z"
        fill="#94a3b8" stroke="#94a3b8" stroke-width="2"
        vector-effect="non-scaling-stroke" />
  <path d="M6 25h7c0-4 6-4 6 0h7v7c4 0 4 6 0 6v7h-7c0-4-6-4-6 0H6v-7c4 0 4-6 0-6z"
        fill="white" />
  <rect id="label" x="33" y="7" width="164" height="60" fill="none" />
</svg>

Обратите внимание, что в SVG-файлах для некоторых элементов указаны CSS-классы. Они позволяют динамически изменять цвета и другие стили в зависимости от атрибутов объекта.

Доступные параметры для изменения:

• fill — основной цвет фигуры
• stroke — основной цвет границы
• stroke-width — основная толщина границы
• stroke-dasharray — основной стиль границы
• secondary-fill — дополнительный цвет фигуры
• secondary-stroke — дополнительный цвет границы
• secondary-stroke-width — дополнительная толщина границы
• secondary-stroke-dasharray — дополнительный стиль границы

Например, если вы укажете, что бизнес-требования с высоким приоритетом должны отображаться красным цветом, система найдет в SVG-файле все элементы с классом fill и заменит значение их атрибута fill на красный.

Если цвет фигуры в вашем SVG задается через атрибут stroke, используйте комбинированный класс fill--stroke. Название такого класса строится по принципу: [параметр фигуры]--[атрибут SVG].

В SVG-файле присутствует прямоугольник с идентификатором label. Он является техническим: этот элемент определяет область, внутри которой будет размещен текст (название объекта). Благодаря этому надпись не накладывается на значок в левой части фигуры.

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

Выделите в метамодели класс BusinessRequirement и на форме свойств в разделе Представление выберите изображение из выпадающего списка:

Сделайте то же самое для класса SystemRequirement.

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