You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
185 lines
7.9 KiB
Markdown
185 lines
7.9 KiB
Markdown
# Themes
|
|
|
|
Similar to PlantUML themes supports C4-PlantUML `C4_...` specific themes (based on existing PlantUML themes).
|
|
|
|
|
|
|
|
- [📄 C4-PlantUML](README.md#c4-plantuml)
|
|
- [📄 Layout Options](LayoutOptions.md#layout-options)
|
|
- [📄 Themes](#themes)
|
|
- [Use theme](#use-theme)
|
|
- [List of available C4-themes](#list-of-available-c4-themes)
|
|
- [How to write custom theme](#how-to-write-custom-theme)
|
|
- [Following variables could be set in theme definitions too](#following-variables-could-be-set-in-theme-definitions-too)
|
|
- samples
|
|
- [📄 Core Diagrams](samples/C4CoreDiagrams.md#c4-model-diagrams)
|
|
|
|
## Use theme
|
|
|
|
WIP ...
|
|
|
|
```plantuml
|
|
@startuml
|
|
|
|
!theme C4_united from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes
|
|
|
|
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/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-themes
|
|
|
|
### C4_blue
|
|
|
|
C4_blue theme is the original theme and need no activation, but it could be used as starting point of another theme.
|
|
|
|
It can be activated with
|
|
```plantuml
|
|
!theme C4_blue from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes
|
|
```
|
|
|
|
|
|
|
|
### C4_brown
|
|
|
|
It can be activated with
|
|
```plantuml
|
|
!theme C4_brown from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes
|
|
```
|
|
|
|
|
|
|
|
|
|
### C4_green
|
|
|
|
It can be activated with
|
|
```plantuml
|
|
!theme C4_green from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes
|
|
```
|
|
|
|
|
|
|
|
### C4_united
|
|
|
|
It can be activated with
|
|
```plantuml
|
|
!theme C4_united from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes
|
|
```
|
|
|
|
|
|
|
|
|
|
### C4_violet
|
|
|
|
It can be activated with
|
|
```plantuml
|
|
!theme C4_violet from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes
|
|
```
|
|
|
|
|
|
|
|
## How to write custom theme
|
|
|
|
WIP ...
|
|
|
|
The sample theme C4_FirstTest [puml-theme-C4_FirstTest.puml](themes/puml-theme-C4_FirstTest.puml) is stored in the themes folder
|
|
|
|
### Following variables could be set in theme definitions too
|
|
|
|
``` plantuml
|
|
!$ELEMENT_FONT_COLOR ?= "#FFFFFF"
|
|
|
|
!$ARROW_COLOR ?= "#666666"
|
|
!$ARROW_FONT_COLOR ?= $ARROW_COLOR
|
|
!$ARROW_FONT_SIZE ?= 12
|
|
|
|
!$STEREOTYPE_FONT_SIZE ?= 12
|
|
!$TECHN_FONT_SIZE ?= 12
|
|
|
|
!$BOUNDARY_COLOR ?= "#444444"
|
|
!$BOUNDARY_BG_COLOR ?= "transparent"
|
|
!$BOUNDARY_BORDER_STYLE ?= "dashed"
|
|
|
|
!$PERSON_FONT_COLOR ?= $ELEMENT_FONT_COLOR
|
|
!$PERSON_BG_COLOR ?= "#08427B"
|
|
!$PERSON_BORDER_COLOR ?= "#073B6F"
|
|
!$EXTERNAL_PERSON_FONT_COLOR ?= $ELEMENT_FONT_COLOR
|
|
!$EXTERNAL_PERSON_BG_COLOR ?= "#686868"
|
|
!$EXTERNAL_PERSON_BORDER_COLOR ?= "#8A8A8A"
|
|
|
|
!$SYSTEM_FONT_COLOR ?= $ELEMENT_FONT_COLOR
|
|
!$SYSTEM_BG_COLOR ?= "#1168BD"
|
|
!$SYSTEM_BORDER_COLOR ?= "#3C7FC0"
|
|
!$EXTERNAL_SYSTEM_FONT_COLOR ?= $ELEMENT_FONT_COLOR
|
|
!$EXTERNAL_SYSTEM_BG_COLOR ?= "#999999"
|
|
!$EXTERNAL_SYSTEM_BORDER_COLOR ?= "#8A8A8A"
|
|
|
|
!$CONTAINER_FONT_COLOR ?= $ELEMENT_FONT_COLOR
|
|
!$CONTAINER_BG_COLOR ?= "#438DD5"
|
|
!$CONTAINER_BORDER_COLOR ?= "#3C7FC0"
|
|
!$EXTERNAL_CONTAINER_FONT_COLOR ?= $ELEMENT_FONT_COLOR
|
|
!$EXTERNAL_CONTAINER_BG_COLOR ?= "#B3B3B3"
|
|
!$EXTERNAL_CONTAINER_BORDER_COLOR ?= "#A6A6A6"
|
|
|
|
!$COMPONENT_FONT_COLOR ?= "#000000"
|
|
!$COMPONENT_BG_COLOR ?= "#85BBF0"
|
|
!$COMPONENT_BORDER_COLOR ?= "#78A8D8"
|
|
!$EXTERNAL_COMPONENT_FONT_COLOR ?= $COMPONENT_FONT_COLOR
|
|
!$EXTERNAL_COMPONENT_BG_COLOR ?= "#CCCCCC"
|
|
!$EXTERNAL_COMPONENT_BORDER_COLOR ?= "#BFBFBF"
|
|
|
|
!$NODE_FONT_COLOR ?= "#000000"
|
|
!$NODE_BG_COLOR ?= "#FFFFFF"
|
|
!$NODE_BORDER_COLOR ?= "#A2A2A2"
|
|
|
|
!$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_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"
|
|
'$LEGEND_DASHED_TRANSPARENT_BOUNDARY ?= "dashed, transparent"
|
|
!$LEGEND_DASHED_TRANSPARENT_BOUNDARY ?= "dashed"
|
|
|
|
!$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"
|
|
|
|
!$ROUNDED_BOX_SIZE ?= 25
|
|
!$EIGHT_SIDED_SIZE ?= 18
|
|
```
|
|
|