Оформление

В «Помощнике SA» диаграммы рисуются в единой теме сайта (светлой или тёмной — как у интерфейса). Настройки оформления из кода применяются поверх темы, поэтому их стоит использовать умеренно — например, чтобы выделить важные элементы цветом.

Цвета элементов и связей

Цвет указывается после объявления элемента: имя цвета (#pink, #palegreen) или шестнадцатеричный код (#FFE0E0); #цвет1/цвет2 — градиент. У связи цвет и стиль указываются в квадратных скобках внутри стрелки.

@startuml
class Заказ #palegreen
class Платёж #FFE0E0
class Возврат #lightblue/white
Заказ --> Платёж
Платёж -[#red,dashed]-> Возврат : при ошибке
Заказ -[#green,bold]-> Возврат
@enduml

Стили стрелки: dashed, dotted, bold, hidden (невидимая — помогает с раскладкой).

skinparam

skinparam меняет параметры оформления для всей диаграммы или для вида элементов.

@startuml
skinparam classBackgroundColor #FFF8E1
skinparam classBorderColor #B58900
skinparam arrowColor #6B7787
skinparam roundCorner 12
skinparam shadowing false
class Заказ
class Клиент
Клиент --> Заказ
@enduml

Параметры можно сгруппировать:

@startuml
skinparam sequence {
  ParticipantBackgroundColor #EEF3FA
  ParticipantBorderColor #1F3A5F
  LifeLineBorderColor #8D97A5
}
Клиент -> Сервис : запрос
@enduml

Стили (<style>)

Современный способ оформления — блок <style> с синтаксисом, похожим на CSS. Правила можно задать для типа диаграммы, вида элементов и стереотипа.

@startuml
<style>
classDiagram {
  class {
    BackgroundColor #F7F4EC
    RoundCorner 10
  }
  arrow {
    LineColor #1F3A5F
  }
}
.critical {
  BackgroundColor #FFE0E0
}
</style>
class Заказ
class Платёж <<critical>>
Заказ --> Платёж
@enduml

Темы

Встроенная тема подключается директивой !theme, например !theme plain, !theme cerulean, !theme sketchy. Тема заменяет большую часть оформления сайта; для документов, которые будут вставлены в светлые и тёмные интерфейсы, удобнее оставить тему сайта.

@startuml
!theme plain
Клиент -> Сервис : запрос
Сервис --> Клиент : ответ
@enduml

Размер, направление и раскладка

• scale 1.5, scale 800 width, scale max 1024*768 — масштаб изображения;
• left to right direction, top to bottom direction — направление раскладки;
• skinparam linetype ortho (прямые углы) или polyline — форма линий;
• skinparam nodesep 60, skinparam ranksep 80 — расстояния между элементами;
• together { … } — держать элементы рядом.

@startuml
left to right direction
skinparam linetype ortho
skinparam nodesep 40
together {
  class Заказ
  class Позиция
}
class Склад
Заказ --> Позиция
Позиция --> Склад
@enduml

Шрифты и текст

• skinparam defaultFontSize 13, skinparam defaultFontName … — шрифт по умолчанию;
• в тексте работают HTML-подобные теги: <b>, <i>, <u>, <color:red>, <size:16>, <back:yellow>;
• <&icon> — значки OpenIconic, например <&person>, <&lock-locked>.

@startuml
rectangle "<&person> <b>Клиент</b>\n<size:10><color:gray>внешний пользователь" as C
rectangle "<&lock-locked> Авторизация" as A
C --> A
@enduml