#245,#291 Themes can be defined/used
KIRCHSTH
3 years ago
parent
ac045c6361
commit
607a3a5158
@ -0,0 +1,130 @@
|
||||
# Themes (WIP), Changeable Styles
|
||||
|
||||
WIP: C4-PlantUML offers no finished themes (atm).
|
||||
It is possible to define/use custom themes.
|
||||
|
||||
- [📄 C4-PlantUML](README.md#c4-plantuml)
|
||||
- [📄 Layout Options](#layout-options)
|
||||
- [📄 Themes (WIP), Changeable Styles](#themes-wip-changeable-styles)
|
||||
- [Overall Guidance](#overall-guidance)
|
||||
- [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)
|
||||
|
||||
## Overall Guidance
|
||||
|
||||
WIP ...
|
||||
|
||||
```plantuml
|
||||
@startuml
|
||||
!theme C4_FirstTest from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes
|
||||
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml
|
||||
|
||||
Person_Ext(customer, "Customer", "A customer of Widgets Limited.")
|
||||
|
||||
Enterprise_Boundary(c0, "Widgets Limited") {
|
||||
Person(csa, "Customer Service Agent", "Deals with customer enquiries.")
|
||||
System(ecommerce, "E-commerce System", "Allows customers to buy widgts online via the widgets.com website.")
|
||||
System(fulfilment, "Fulfilment System", "Responsible for processing and shipping of customer orders.")
|
||||
}
|
||||
|
||||
System_Ext(taxamo, "Taxamo", "Calculates local tax (for EU B2B customers) and acts as a front-end for Braintree Payments.")
|
||||
System_Ext(braintree, "Braintree Payments", "Processes credit card payments on behalf of Widgets Limited.")
|
||||
System_Ext(post, "Jersey Post", "Calculates worldwide shipping costs for packages.")
|
||||
|
||||
Rel_R(customer, csa, "Asks questions to", "Telephone")
|
||||
Rel_R(customer, ecommerce, "Places orders for widgets using")
|
||||
Rel(csa, ecommerce, "Looks up order information using")
|
||||
Rel_R(ecommerce, fulfilment, "Sends order information to")
|
||||
Rel_D(fulfilment, post, "Gets shipping charges from")
|
||||
Rel_D(ecommerce, taxamo, "Delegates credit card processing to")
|
||||
Rel_L(taxamo, braintree, "Uses for credit card processing")
|
||||
Lay_D(customer, braintree)
|
||||
|
||||
SHOW_LEGEND()
|
||||
@enduml
|
||||
```
|
||||
|
||||
|
||||
|
||||
## List of available C4-themes
|
||||
|
||||
Atm we have no finished C4-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"
|
||||
!$BOUNDARY_COLOR ?= "#444444"
|
||||
!$BOUNDARY_BG_COLOR ?= "transparent"
|
||||
!$LEGEND_FONT_COLOR ?= "#FFFFFF"
|
||||
!$LEGEND_TITLE_COLOR ?= "#000000"
|
||||
!$LEGEND_DARK_COLOR ?= "#66622E"
|
||||
!$LEGEND_LIGHT_COLOR ?= "#khaki"
|
||||
!$SKETCH_BG_COLOR ?= "#EEEBDC"
|
||||
!$SKETCH_FONT_COLOR ?= ""
|
||||
!$SKETCH_WARNING_COLOR ?= "red"
|
||||
!$SKETCH_FONT_NAME ?= "Comic Sans MS"
|
||||
!$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_FOOTER_WARNING ?= "Warning:"
|
||||
!$SKETCH_FOOTER_TEXT ?= "Created for discussion, needs to be validated"
|
||||
!$STEREOTYPE_FONT_SIZE ?= 12
|
||||
!$TECHN_FONT_SIZE ?= 12
|
||||
!$ROUNDED_BOX_SIZE ?= 25
|
||||
!$EIGHT_SIDED_SIZE ?= 18
|
||||
!$ARROW_FONT_SIZE ?= 12
|
||||
!$LEGEND_DETAILS_SMALL_SIZE ?= 10
|
||||
!$LEGEND_DETAILS_NORMAL_SIZE ?= 14
|
||||
!$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"
|
||||
!$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"
|
||||
!$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"
|
||||
!$NODE_FONT_COLOR ?= "#000000"
|
||||
!$NODE_BG_COLOR ?= "#FFFFFF"
|
||||
!$NODE_BORDER_COLOR ?= "#A2A2A2"
|
||||
|
||||
```
|
||||
|
||||
@ -0,0 +1,48 @@
|
||||
@startuml
|
||||
|
||||
' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally
|
||||
!if %variable_exists("RELATIVE_INCLUDE")
|
||||
' !theme C4_FirstTest from %get_variable_value("RELATIVE_INCLUDE")/themes
|
||||
!theme C4_FirstTest from ./../themes
|
||||
|
||||
!include %get_variable_value("RELATIVE_INCLUDE")/C4_Component.puml
|
||||
!else
|
||||
!theme C4_FirstTest from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes
|
||||
|
||||
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml
|
||||
!endif
|
||||
|
||||
Person_Ext(customer, "Customer", "A customer of Widgets Limited.")
|
||||
|
||||
Enterprise_Boundary(c0, "Widgets Limited") {
|
||||
Person(csa, "Customer Service Agent", "Deals with customer enquiries.")
|
||||
|
||||
System(ecommerce, "E-commerce System", "Allows customers to buy widgts online via the widgets.com website.")
|
||||
|
||||
System(fulfilment, "Fulfilment System", "Responsible for processing and shipping of customer orders.")
|
||||
}
|
||||
|
||||
System_Ext(taxamo, "Taxamo", "Calculates local tax (for EU B2B customers) and acts as a front-end for Braintree Payments.")
|
||||
|
||||
System_Ext(braintree, "Braintree Payments", "Processes credit card payments on behalf of Widgets Limited.")
|
||||
|
||||
System_Ext(post, "Jersey Post", "Calculates worldwide shipping costs for packages.")
|
||||
|
||||
Rel_R(customer, csa, "Asks questions to", "Telephone")
|
||||
|
||||
Rel_R(customer, ecommerce, "Places orders for widgets using")
|
||||
|
||||
Rel(csa, ecommerce, "Looks up order information using")
|
||||
|
||||
Rel_R(ecommerce, fulfilment, "Sends order information to")
|
||||
|
||||
Rel_D(fulfilment, post, "Gets shipping charges from")
|
||||
|
||||
Rel_D(ecommerce, taxamo, "Delegates credit card processing to")
|
||||
|
||||
Rel_L(taxamo, braintree, "Uses for credit card processing")
|
||||
|
||||
Lay_D(customer, braintree)
|
||||
|
||||
SHOW_LEGEND()
|
||||
@enduml
|
||||
@ -0,0 +1,54 @@
|
||||
' First test with themes (it depends on a original theme, changes colors and set $TECHN_FONT_SIZE)
|
||||
|
||||
!theme cyborg
|
||||
|
||||
!$ELEMENT_FONT_COLOR = $PRIMARY_TEXT
|
||||
|
||||
!$ARROW_COLOR = $PRIMARY_LIGHT
|
||||
|
||||
!$BOUNDARY_COLOR ?= $PRIMARY_DARK
|
||||
!$BOUNDARY_BG_COLOR ?= "transparent"
|
||||
|
||||
!$LEGEND_FONT_COLOR ?= "#FFFFFF"
|
||||
!$LEGEND_TITLE_COLOR ?= "#000000"
|
||||
' %darken(darkkhaki,50), #khaki
|
||||
!$LEGEND_DARK_COLOR ?= "#66622E"
|
||||
!$LEGEND_LIGHT_COLOR ?= "#khaki"
|
||||
|
||||
!$PERSON_FONT_COLOR = $INFO_TEXT
|
||||
!$PERSON_BG_COLOR = $INFO_LIGHT
|
||||
!$PERSON_BORDER_COLOR = $INFO_DARK
|
||||
|
||||
!$EXTERNAL_PERSON_FONT_COLOR ?= $INFO_TEXT
|
||||
!$EXTERNAL_PERSON_BG_COLOR ?= $INFO_DARK
|
||||
!$EXTERNAL_PERSON_BORDER_COLOR ?= $INFO_LIGHT
|
||||
|
||||
!$SYSTEM_FONT_COLOR ?= $SUCCESS_TEXT
|
||||
!$SYSTEM_BG_COLOR ?= $SUCCESS_LIGHT
|
||||
!$SYSTEM_BORDER_COLOR ?= $SUCCESS_DARK
|
||||
|
||||
!$EXTERNAL_SYSTEM_FONT_COLOR ?= $SUCCESS_TEXT
|
||||
!$EXTERNAL_SYSTEM_BG_COLOR ?= $SUCCESS_DARK
|
||||
!$EXTERNAL_SYSTEM_BORDER_COLOR ?= $SUCCESS_LIGHT
|
||||
|
||||
!$CONTAINER_FONT_COLOR ?= $WARNING_TEXT
|
||||
!$CONTAINER_BG_COLOR ?= $DANGER_LIGHT
|
||||
!$CONTAINER_BORDER_COLOR ?= $DANGER_DARK
|
||||
|
||||
!$EXTERNAL_CONTAINER_FONT_COLOR ?= $WARNING_TEXT
|
||||
!$EXTERNAL_CONTAINER_BG_COLOR ?= $DANGER_DARK
|
||||
!$EXTERNAL_CONTAINER_BORDER_COLOR ?= $DANGER_LIGHT
|
||||
|
||||
!$COMPONENT_FONT_COLOR ?= $PRIMARY_TEXT
|
||||
!$COMPONENT_BG_COLOR ?= $PRIMARY_LIGHT
|
||||
!$COMPONENT_BORDER_COLOR ?= $PRIMARY_DARK
|
||||
|
||||
!$EXTERNAL_COMPONENT_FONT_COLOR ?= $PRIMARY_TEXT
|
||||
!$EXTERNAL_COMPONENT_BG_COLOR ?= $PRIMARY_DARK
|
||||
!$EXTERNAL_COMPONENT_BORDER_COLOR ?= $PRIMARY_LIGHT
|
||||
|
||||
!$NODE_FONT_COLOR ?= $SECONDARY_TEXT
|
||||
!$NODE_BG_COLOR ?= $SECONDARY_LIGHT
|
||||
!$NODE_BORDER_COLOR ?= $SECONDARY_DARK
|
||||
|
||||
!$TECHN_FONT_SIZE = 18
|
||||
Loading…
Reference in New Issue