Themes - different styles and languages

📄 C4-PlantUML
📄 Layout Options
📄 Themes (different styles and languages)
samples
- 📄 C4 Model Diagrams

Use theme

Similar to PlantUML themes supports C4-PlantUML C4_... specific themes too (sometimes based on existing PlantUML themes).

Additional to the standard themes with skinparam and style definitions requires C4-PlantUML corresponding variable definitions. Therefore we started with the convention that all C4-PlantUML compatible themes start with C4_... in the name (e.g. theme C4_united bases on the united theme and contains all additional required C4-PlantUML settings that it can be directly used in all C4-PlantUML diagrams).

E.g. in order to invoke theme C4_united from a remote repository, you have to use the following directive:

!theme C4_united from https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/themes

In order to invoke a local theme C4_foo, you have to use the following directive:

!theme C4_foo from /path/to/themes/folder

Starting with PlantUML v1.2023.8 the C4 themes can be invoked via C4-Stdlib or calculated paths too:

' theme from C4-Stdlib
!theme C4_united from <C4/themes>

' another alternative: theme with calculated from
!RELATIVE_INCLUDE = "https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended"
!theme C4_united from %get_variable_value("RELATIVE_INCLUDE")/themes

Following simple sample uses the C4_united theme from the official remote repository path.

@startuml

!theme C4_united from https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/themes

!include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/C4_Container.puml

Person(admin, "Administrator")
System_Boundary(c1, "Sample System") {
    Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines")
}
System(twitter, "Twitter")

Rel(admin, web_app, "Uses", "HTTPS")
Rel(web_app, twitter, "Gets tweets from", "HTTPS")

SHOW_FLOATING_LEGEND()
@enduml

List of available C4 style themes

C4_blue

C4_blue theme is the original theme and need no activation.

Theme C4_blue can be activated with

!theme C4_blue from https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/themes

C4_brown

Theme C4_brown can be activated with

!theme C4_brown from https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/themes

C4_green

Theme C4_green can be activated with

!theme C4_green from https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/themes

C4_sandstone

Theme C4_sandstone can be activated with

!theme C4_sandstone from https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/themes

C4_superhero

Theme C4_superhero can be activated with

!theme C4_superhero from https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/themes

C4_united

Theme C4_united can be activated with

!theme C4_united from https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/themes

C4_violet

Theme C4_violet can be activated with

!theme C4_violet from https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/themes

Matt Weagle themes

Matt Weagle published a set of impressive themes based on ColorBrewer and Seaborn palettes (thank you Matt).

https://github.com/mweagle/C4-PlantUML-Themes contains an overview of all his themes.

They can be simply invoked like the cb_seq_YlOrBr_9 theme

@startuml
!theme cb_seq_YlOrBr_9 from https://raw.githubusercontent.com/mweagle/C4-PlantUML-Themes/main/palettes

!include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/C4_Container.puml

Person(admin, "Administrator")
System_Boundary(c1, "Sample System") {
    Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines")
}
System(twitter, "Twitter")

Rel(admin, web_app, "Uses", "HTTPS")
Rel(web_app, twitter, "Gets tweets from", "HTTPS")

SHOW_FLOATING_LEGEND()
@enduml

Write custom themes

You can create your own theme on your local file system. You can duplicate any existing theme to create your own one.

By default, a theme file is named puml-theme-C4_foo.puml where C4_foo is the name of the theme.

In contrast to the normal themes (with skinparams and/or styles) the corresponding color,... variables have to overwritten too (e.g. that the legend is updated... details see below).

If you have any interesting theme, you can also propose a pull request so that we integrate this theme into the C4-PlantUML standard library.

Following variables could be set in a theme, additional to the skinparams and styles

stereotype and technology font size

!$STEREOTYPE_FONT_SIZE ?= 12
!$TECHN_FONT_SIZE ?= 12

default text color of all elements

!$ELEMENT_FONT_COLOR ?= "#FFFFFF"

arrow related colors and text size

!$ARROW_COLOR ?= "#666666"
!$ARROW_FONT_COLOR ?= $ARROW_COLOR
!$ARROW_FONT_SIZE ?= 12

(default) boundary related colors and style

!$BOUNDARY_COLOR ?= "#444444"
!$BOUNDARY_BG_COLOR ?= "transparent"
!$BOUNDARY_BORDER_STYLE ?= "dashed"

person related colors

!$PERSON_FONT_COLOR ?= $ELEMENT_FONT_COLOR
!$PERSON_BG_COLOR ?= "#08427B"
!$PERSON_BORDER_COLOR ?= "#073B6F"

external person related colors

!$EXTERNAL_PERSON_FONT_COLOR ?= $ELEMENT_FONT_COLOR
!$EXTERNAL_PERSON_BG_COLOR ?= "#686868"
!$EXTERNAL_PERSON_BORDER_COLOR ?= "#8A8A8A"

system related colors

!$SYSTEM_FONT_COLOR ?= $ELEMENT_FONT_COLOR
!$SYSTEM_BG_COLOR ?= "#1168BD"
!$SYSTEM_BORDER_COLOR ?= "#3C7FC0"

external system related colors

!$EXTERNAL_SYSTEM_FONT_COLOR ?= $ELEMENT_FONT_COLOR
!$EXTERNAL_SYSTEM_BG_COLOR ?= "#999999"
!$EXTERNAL_SYSTEM_BORDER_COLOR ?= "#8A8A8A"

system boundary related colors and style

!$SYSTEM_BOUNDARY_COLOR ?= $BOUNDARY_COLOR
!$SYSTEM_BOUNDARY_BG_COLOR ?= $BOUNDARY_BG_COLOR
!$SYSTEM_BOUNDARY_BORDER_STYLE ?= $BOUNDARY_BORDER_STYLE

enterprise boundary related colors and style

!$ENTERPRISE_BOUNDARY_COLOR ?= $BOUNDARY_COLOR
!$ENTERPRISE_BOUNDARY_BG_COLOR ?= $BOUNDARY_BG_COLOR
!$ENTERPRISE_BOUNDARY_BORDER_STYLE ?= $BOUNDARY_BORDER_STYLE

container related colors

!$CONTAINER_FONT_COLOR ?= $ELEMENT_FONT_COLOR
!$CONTAINER_BG_COLOR ?= "#438DD5"
!$CONTAINER_BORDER_COLOR ?= "#3C7FC0"

external container related colors

!$EXTERNAL_CONTAINER_FONT_COLOR ?= $ELEMENT_FONT_COLOR
!$EXTERNAL_CONTAINER_BG_COLOR ?= "#B3B3B3"
!$EXTERNAL_CONTAINER_BORDER_COLOR ?= "#A6A6A6"

container boundary related colors and style

!$CONTAINER_BOUNDARY_COLOR ?= $BOUNDARY_COLOR
!$CONTAINER_BOUNDARY_BG_COLOR ?= $BOUNDARY_BG_COLOR
!$CONTAINER_BOUNDARY_BORDER_STYLE ?= $BOUNDARY_BORDER_STYLE

component related colors

!$COMPONENT_FONT_COLOR ?= "#000000"
!$COMPONENT_BG_COLOR ?= "#85BBF0"
!$COMPONENT_BORDER_COLOR ?= "#78A8D8"

external component related colors

!$EXTERNAL_COMPONENT_FONT_COLOR ?= $COMPONENT_FONT_COLOR
!$EXTERNAL_COMPONENT_BG_COLOR ?= "#CCCCCC"
!$EXTERNAL_COMPONENT_BORDER_COLOR ?= "#BFBFBF"

node related colors

!$NODE_FONT_COLOR ?= "#000000"
!$NODE_BG_COLOR ?= "#FFFFFF"
!$NODE_BORDER_COLOR ?= "#A2A2A2"

legend colors and sizes

!$LEGEND_TITLE_COLOR ?= "#000000"
!$LEGEND_FONT_COLOR ?= "#FFFFFF"
!$LEGEND_BG_COLOR ?= "transparent"
!$LEGEND_BORDER_COLOR ?= "transparent"
!$LEGEND_DARK_COLOR ?= "#66622E"
!$LEGEND_LIGHT_COLOR ?= "#khaki"

!$LEGEND_DETAILS_SMALL_SIZE ?= 10
!$LEGEND_DETAILS_NORMAL_SIZE ?= 14

legend related texts

!$LEGEND_SHADOW_TEXT ?= "shadow"
!$LEGEND_NO_SHADOW_TEXT ?= "no shadow"
!$LEGEND_NO_FONT_BG_TEXT ?= "last text and back color"
!$LEGEND_NO_FONT_TEXT ?= "last text color"
!$LEGEND_NO_BG_TEXT ?= "last back color"
!$LEGEND_NO_LINE_TEXT ?= "last line color"
!$LEGEND_ROUNDED_BOX ?= "rounded box"
!$LEGEND_EIGHT_SIDED ?= "eight sided"
!$LEGEND_DOTTED_LINE ?= "dotted"
!$LEGEND_DASHED_LINE ?= "dashed"
!$LEGEND_BOLD_LINE ?= "bold"
!$LEGEND_BOUNDARY ?= "boundary"
!$LEGEND_DASHED_BOUNDARY ?= "dashed"
' transparent is ignored, produces smaller legends
' !$LEGEND_DASHED_TRANSPARENT_BOUNDARY ?= "dashed, transparent"
!$LEGEND_DASHED_TRANSPARENT_BOUNDARY ?= "dashed"

sketch related colors, font and texts

!$SKETCH_BG_COLOR ?= "#EEEBDC"
!$SKETCH_FONT_COLOR ?= ""
!$SKETCH_WARNING_COLOR ?= "red"

!$SKETCH_FONT_NAME ?= "Comic Sans MS"

!$SKETCH_FOOTER_WARNING ?= "Warning:"
!$SKETCH_FOOTER_TEXT ?= "Created for discussion, needs to be validated"

size of rectangle shape corner markers

!$ROUNDED_BOX_SIZE ?= 25
!$EIGHT_SIDED_SIZE ?= 18

(C4 styled) Sequence diagram and themes

All sequence diagram specific renderings (like sequence-lifeline-color...) can be directly defined via skinparams and styles. The advantage is that no separate variable definitions are required anymore. (But the disadvantage is that all themes have to define there own skinparams and styles.)

A theme could contain e.g. following definitions, skinparams and styles

' $BOUNDARY_BG_COLOR... have to be defined in theme itself that it can be used in styles,...
' (no default values which are defined in C4.puml) 
' If skinparams and styles are defined with concrete values no variables are required 
!$BOUNDARY_BG_COLOR ?= "transparent"
!$BOUNDARY_COLOR ?= "#444444"
!$ARROW_COLOR ?= "#666666"

' replace transparent with concrete background that it can be used as font color too
!if ($BOUNDARY_BG_COLOR == "transparent")
  !$SEQUENCE_BG_COLOR = white
!else
  !$SEQUENCE_BG_COLOR = $BOUNDARY_BG_COLOR
!endif

' "C4 styled" default is no foot boxes
hide footbox
' "C4 styled" default is that lifeline is arrow color
skinparam SequenceLifelineBorderColor $ARROW_COLOR

skinparam SequenceGroupBodyBackgroundColor $SEQUENCE_BG_COLOR
skinparam SequenceGroupFontColor $BOUNDARY_COLOR
skinparam SequenceGroupBackgroundColor $BOUNDARY_COLOR
skinparam SequenceGroupHeaderFontColor $SEQUENCE_BG_COLOR
skinparam SequenceGroupBorderColor $BOUNDARY_COLOR

skinparam SequenceReferenceBackgroundColor $SEQUENCE_BG_COLOR
skinparam SequenceReferenceFontColor $BOUNDARY_COLOR
skinparam SequenceReferenceHeaderBackgroundColor $BOUNDARY_COLOR
' VIA STYLE
' skinparam SequenceReferenceHeaderFontColor $SEQUENCE_BG_COLOR
<style>
referenceHeader {
  fontcolor $SEQUENCE_BG_COLOR
}
</style>
skinparam SequenceReferenceBorderColor $BOUNDARY_COLOR

skinparam SequenceDividerBackgroundColor $SEQUENCE_BG_COLOR
skinparam SequenceDividerFontColor $BOUNDARY_COLOR
skinparam SequenceDividerBorderColor $BOUNDARY_COLOR

' VIA STYLE
' skinparam SequenceDelayFontColor green
<style>
sequenceDiagram {
  delay {
    FontColor $BOUNDARY_COLOR
  }
}
</style>

Following sample could be used as starting point for custom themes with sequence diagram support:

List of available C4 language themes

All language themes are machine translated. If there are any errors, please let us know and create an issue with the expected fix.

If you want to create a diagram in a specific language, then you can defined ex. system labels, descriptions,... with names in the corresponding language. But independent of these changes the standard (mostly legend) labels remain in English.

Ex. following Japanese sample still displays an English legend (you could change the label with Update...() calls, but this requires a high effort per diagram):

@startuml
 ' first diagram without the C4Language_japanese theme
 ' !theme C4Language_japanese from https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/themes
 !include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/C4_Container.puml

LAYOUT_LANDSCAPE()

Person(admin, "管理者")
System_Boundary(c1, 'サンプル') {
    Container(web_app, "ウェブアプリケーション", "C#, ASP.NET Core 2.1 MVC", "複数のTwitterタイムラインを比較することができます")
}
System(twitter, "Twitter")

Rel(admin, web_app, "使用する", "HTTPS")
Rel(web_app, twitter, "ツイートを取得する", "HTTPS")

SHOW_LEGEND()
@enduml

But if you activate the C4Language_japanese theme, the legend is translated too:

@startuml
' with the C4Language_japanese theme ex. the predefined legend labels are translated too
!theme C4Language_japanese from https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/themes
!include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/C4_Container.puml

LAYOUT_LANDSCAPE()

Person(admin, "管理者")
System_Boundary(c1, 'サンプル') {
    Container(web_app, "ウェブアプリケーション", "C#, ASP.NET Core 2.1 MVC", "複数のTwitterタイムラインを比較することができます")
}
System(twitter, "Twitter")

Rel(admin, web_app, "使用する", "HTTPS")
Rel(web_app, twitter, "ツイートを取得する", "HTTPS")

SHOW_LEGEND()
@enduml

In the following list you can find all available C4 language themes (the diagram contents themselves are not translated that you simpler see the differences):

C4Language_english

C4Language_english theme is the original language theme and need no activation.

Theme C4Language_english can be activated with

!theme C4Language_english from https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/themes

C4Language_chinese

Theme C4Language_chinese can be activated with

!theme C4Language_chinese from https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/themes

C4Language_dutch

Theme C4Language_dutch can be activated with

!theme C4Language_dutch from https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/themes

C4Language_german

Theme C4Language_german can be activated with

!theme C4Language_german from https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/themes

C4Language_italian

Theme C4Language_italian can be activated with

!theme C4Language_italian from https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/themes

C4Language_japanese

Theme C4Language_japanese can be activated with

!theme C4Language_japanese from https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/themes

C4Language_korean

Theme C4Language_korean can be activated with

!theme C4Language_korean from https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/themes

C4Language_portuguese

Theme C4Language_portuguese can be activated with

!theme C4Language_portuguese from https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/themes

C4Language_russian

Theme C4Language_russian can be activated with

!theme C4Language_russian from https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/themes

C4Language_spanish

Theme C4Language_spanish can be activated with

!theme C4Language_spanish from https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/themes

C4Language_ukrainian

Theme C4Language_ukrainian can be activated with

!theme C4Language_ukrainian from https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/themes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Themes.md

Themes.md

Themes - different styles and languages

Use theme

List of available C4 style themes

C4_blue

C4_brown

C4_green

C4_sandstone

C4_superhero

C4_united

C4_violet

Matt Weagle themes

Write custom themes

Following variables could be set in a theme, additional to the skinparams and styles

(C4 styled) Sequence diagram and themes

List of available C4 language themes

C4Language_english

C4Language_chinese

C4Language_dutch

C4Language_german

C4Language_italian

C4Language_japanese

C4Language_korean

C4Language_portuguese

C4Language_russian

C4Language_spanish

C4Language_ukrainian

Files

Themes.md

Latest commit

History

Themes.md

File metadata and controls

Themes - different styles and languages

Use theme

List of available C4 style themes

C4_blue

C4_brown

C4_green

C4_sandstone

C4_superhero

C4_united

C4_violet

Matt Weagle themes

Write custom themes

Following variables could be set in a theme, additional to the skinparams and styles

(C4 styled) Sequence diagram and themes

List of available C4 language themes

C4Language_english

C4Language_chinese

C4Language_dutch

C4Language_german

C4Language_italian

C4Language_japanese

C4Language_korean

C4Language_portuguese

C4Language_russian

C4Language_spanish

C4Language_ukrainian