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

Чтобы бизнес-требования и системные различались с первого взгляда, добавьте им 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 — дополнительный стиль границы

Задайте красный цвет бизнес-требованиям с высоким приоритетом — и Architeezy найдёт в SVG-файле все элементы с классом fill и перекрасит их атрибут fill в красный.

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

Ещё в SVG-файле есть прямоугольник с идентификатором label. Он очерчивает область для названия объекта, чтобы надпись не наезжала на значок слева.

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

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

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

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