@startuml c4_component

!include c4_container.puml

' Styling
' ##################################

skinparam rectangle<<component>> {
    StereotypeFontColor ELEMENT_FONT_COLOR
    FontColor COMPONENT_FONT_COLOR
    BackgroundColor COMPONENT_BG_COLOR
    BorderColor COMPONENT_BORDER_COLOR
}

skinparam database<<component>> {
    StereotypeFontColor ELEMENT_FONT_COLOR
    FontColor COMPONENT_FONT_COLOR
    BackgroundColor COMPONENT_BG_COLOR
    BorderColor COMPONENT_BORDER_COLOR
}

' Layout
' ##################################

!function LAYOUT_WITH_LEGEND()_CN()
hide stereotype
legend right
|=              |= Type |
|<PERSON_BG_COLOR>      | 用户 |
|<EXTERNAL_PERSON_BG_COLOR>      | 外部用户 |
|<SYSTEM_BG_COLOR>   | 系统 |
|<EXTERNAL_SYSTEM_BG_COLOR>      | 外部系统 |
|<CONTAINER_BG_COLOR>   | 容器 |
|<COMPONENT_BG_COLOR>   | 组件 |
endlegend
!endfunction


!function LAYOUT_WITH_LEGEND()()
hide stereotype
legend right
|=              |= Type |
|<PERSON_BG_COLOR>      | person |
|<EXTERNAL_PERSON_BG_COLOR>      | external person |
|<SYSTEM_BG_COLOR>   | system |
|<EXTERNAL_SYSTEM_BG_COLOR>      | external system |
|<CONTAINER_BG_COLOR>   | container |
|<COMPONENT_BG_COLOR>   | component |
endlegend
!endfunction

' Elements
' ##################################

!define Component(e_alias, e_label, e_techn) rectangle "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//" <<component>> as e_alias
!define Component(e_alias, e_label, e_techn, e_descr) rectangle "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//\n\n e_descr" <<component>> as e_alias

!define ComponentDb(e_alias, e_label, e_techn) database "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//" <<component>> as e_alias
!define ComponentDb(e_alias, e_label, e_techn, e_descr) database "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//\n\n e_descr" <<component>> as e_alias

@enduml