Support theming: (Example: Border color is hardcoded to gray)

[rion18]

Hi! It seems that AWSCommon.puml now has a procedure defined as:

!procedure $AWS_common_skinparam()
    FontColor $AWS_FG_COLOR
    BackgroundColor $AWS_BG_COLOR
    BorderColor $AWS_COLOR_GRAY
!endprocedure

It seems $AWS_BORDER_COLOR is no longer used, except for a few examples. Shouldn't we still reference $AWS_BORDER_COLOR where needed, or remove this variable?

This, by itself is not really a problem, except for a name that is kind of confusing.

It would be awesome if the project could support some degree of theming, at least with colors.

Something like this:

!$AWS_BORDER_COLOR = "#FF9900"

could become

!if %not(%variable_exists("$AWS_BORDER_COLOR"))
!$AWS_BORDER_COLOR = "#FF9900"
!endif

Is this something that could be implemented?

This would certainly be faster than adding

!definelong AWSEntityColoring(stereo)
skinparam rectangle<<stereo>> {
    $AWS_common_skinparam()
    BorderColor $AWS_BORDER_COLOR
    BorderThickness 2
}
!enddefinelong

after importing AWSCommon...

Thanks a lot!

[hakanson]

Good catch, previously we had AWS_BORDER_COLOR which I wanted to leave defined for backward compatibility. I didn't need to add $AWS_BORDER_COLOR since it was an older value for the orange color (which is now $AWS_COLOR_SMILE). I'll probably remove in future docs, but leave defined as to not break anyone.

For built-in theming, I updated color palette to align with AWS branding and to support toggling between light and dark mode, which uses the same BorderColor $AWS_COLOR_GRAY.

What kind of color theming where you thinking about? Would you mind creating a sample diagram and posting the source / image as an example? You might be able to just add your own skinparam sections in your diagram to override the BorderColor.

skinparam rectangle {
    BorderColor #FF9900
}

[rion18]

So... the way I do this right now is using the following on a theme file:

!$AWS_DARK = false
!$PUML_MODE = 'dark'

!$CUSTOM_COLOR_BLUE_DARK = '#240E89'
!$CUSTOM_COLOR_ORANGE_LIGHTEST = '#FAE2D2'
!$CUSTOM_COLOR_ORANGE_LIGHT = '#F1B66A'
!$CUSTOM_COLOR_ORANGE_DARK = '#E18815'
!$CUSTOM_COLOR_PURPLE_LIGHT = '#DCDEEB'
!$CUSTOM_COLOR_PURPLE_DARK = '#903AA9'

!define AWSPuml https://raw.githubusercontent.com/awslabs/aws-icons-for-plantuml/v16.0/dist
!include AWSPuml/AWSCommon.puml

skinparam Default {
  TextAlignment center
}

skinparam Database {
  ArrowColor $CUSTOM_COLOR_BLUE_DARK
  ArrowFontColor $CUSTOM_COLOR_BLUE_DARK
  BackgroundColor $CUSTOM_COLOR_PURPLE_LIGHT
  BorderColor $CUSTOM_COLOR_PURPLE_DARK
  BorderThickness 2
  FontColor $INFO
}

skinparam frame {
  ArrowColor $CUSTOM_COLOR_BLUE_DARK
  ArrowFontColor $CUSTOM_COLOR_BLUE_DARK
  BackgroundColor $CUSTOM_COLOR_PURPLE_LIGHT
  BorderColor $CUSTOM_COLOR_PURPLE_DARK
  BorderThickness 2
  FontColor $INFO
  FrameFontColor $INFO
}

skinparam rectangle {
  ArrowColor $CUSTOM_COLOR_BLUE_DARK
  ArrowFontColor $CUSTOM_COLOR_BLUE_DARK
  BorderColor $CUSTOM_COLOR_PURPLE_DARK
  BackgroundColor $CUSTOM_COLOR_PURPLE_LIGHT
  FontColor $DARK_DARK
}

skinparam component {
  ArrowColor $CUSTOM_COLOR_BLUE_DARK
  ArrowFontColor $CUSTOM_COLOR_BLUE_DARK
  BackgroundColor $CUSTOM_COLOR_ORANGE_LIGHTEST
  BorderColor $CUSTOM_COLOR_ORANGE_DARK
  FontColor $DARK_DARK
}

skinparam legend {
  ArrowColor $CUSTOM_COLOR_BLUE_DARK
  ArrowFontColor $CUSTOM_COLOR_BLUE_DARK
  BackgroundColor $CUSTOM_COLOR_ORANGE_LIGHT
  BorderColor $CUSTOM_COLOR_ORANGE_DARK
  FontColor $CUSTOM_COLOR_BLUE_DARK
  BorderThickness 3
}

left to right direction

!definelong AWSEntityColoring(stereo)
skinparam rectangle<<stereo>> {
  $AWS_common_skinparam()
  BackgroundColor $CUSTOM_COLOR_ORANGE_LIGHTEST
  BorderColor $CUSTOM_COLOR_ORANGE_DARK
  BorderThickness 2
  FontColor $DARK_DARK
}
!enddefinelong

!procedure $AWSGroupColoring($stereo, $border_color=$AWS_FG_COLOR, $border_style="plain")
skinparam rectangle<<$stereo>> {
  ArrowColor $CUSTOM_COLOR_BLUE_DARK
  BackgroundColor $CUSTOM_COLOR_PURPLE_LIGHT
  BorderColor $CUSTOM_COLOR_PURPLE_DARK
  BorderStyle $border_style
  BorderThickness 2
  FontColor $AWS_FG_COLOR
  FontSize 25
  Shadowing false
  StereotypeFontSize 0
}
!endprocedure

!include all_the_puml_files_I_need

It's very extensible, but there's a risk of it becoming difficult to maintain (for instance, migrating from v14 to v16 was a bit tougher than I expected). It would be fantastic if we could have some sort of alias for colors that are reused among all of the components. for instance:

!$AWS_DARK = false
!$PUML_MODE = 'dark'

!$CUSTOM_COLOR_BLUE_DARK = '#240E89'
!$CUSTOM_COLOR_ORANGE_LIGHTEST = '#FAE2D2'
!$CUSTOM_COLOR_ORANGE_LIGHT = '#F1B66A'
!$CUSTOM_COLOR_ORANGE_DARK = '#E18815'
!$CUSTOM_COLOR_PURPLE_LIGHT = '#DCDEEB'
!$CUSTOM_COLOR_PURPLE_DARK = '#903AA9'

!$AWS_FG_COLOR = $DARK_DARK
!$AWS_BG_COLOR = $CUSTOM_COLOR_PURPLE_LIGHT
!$AWS_ARROW_COLOR = $CUSTOM_COLOR_BLUE_DARK

!define AWSPuml https://raw.githubusercontent.com/awslabs/aws-icons-for-plantuml/v16.0/dist
!include AWSPuml/AWSCommon.puml
!include all_the_puml_files_I_need

This way we can fully color ALL the components thanks to
AWS_deployment_skinparam, AWSEntityColoring, AWSGroupColoring

etc...

[socketbox]

Yes, it would be nice to color the borders of certain components such that they could be implicitly grouped according to some common characteristic (AWS account, for example) while still being arranged and laid out according to another (say, proximity to client request, for example).