github-mirrors
/
C4-PlantUML
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

#245,#291 Themes can be defined/used (3a - update themes, fix PR findings)

Browse Source
pull/295/head
KIRCHSTH 3 years ago
parent a40c8b31b2
commit 933c6799e4
13 changed files with 187 additions and 242 deletions
Show Stats Download Patch File Download Diff File

2
C4.puml
Unescape Escape View File

@ -584,7 +584,7 @@ $elementSkin
!$tagDetails = $tagDetails + $LEGEND_NO_BG_TEXT + ", " !$tagDetails = $tagDetails + $LEGEND_NO_BG_TEXT + ", "
!endif !endif
!endif !endif
!if ($tagDetails=="(") !if ($tagDetails=="(" || $tagDetails=="(, ")
!$tagDetails = "</size>" !$tagDetails = "</size>"
!else !else
!$tagDetails = %substr($tagDetails, 0, %strlen($tagDetails)-2) !$tagDetails = %substr($tagDetails, 0, %strlen($tagDetails)-2)

8
C4_Container.puml
Unescape Escape View File

@ -17,6 +17,10 @@
!$CONTAINER_BG_COLOR ?= "#438DD5" !$CONTAINER_BG_COLOR ?= "#438DD5"
!$CONTAINER_BORDER_COLOR ?= "#3C7FC0" !$CONTAINER_BORDER_COLOR ?= "#3C7FC0"
!$CONTAINER_BOUNDARY_COLOR ?= $BOUNDARY_COLOR
!$CONTAINER_BOUNDARY_BG_COLOR ?= $BOUNDARY_BG_COLOR
!$CONTAINER_BOUNDARY_BORDER_STYLE ?= $BOUNDARY_BORDER_STYLE
!$EXTERNAL_CONTAINER_FONT_COLOR ?= $ELEMENT_FONT_COLOR !$EXTERNAL_CONTAINER_FONT_COLOR ?= $ELEMENT_FONT_COLOR
!$EXTERNAL_CONTAINER_BG_COLOR ?= "#B3B3B3" !$EXTERNAL_CONTAINER_BG_COLOR ?= "#B3B3B3"
!$EXTERNAL_CONTAINER_BORDER_COLOR ?= "#A6A6A6" !$EXTERNAL_CONTAINER_BORDER_COLOR ?= "#A6A6A6"
@ -26,7 +30,7 @@
UpdateElementStyle("container", $CONTAINER_BG_COLOR, $CONTAINER_FONT_COLOR, $CONTAINER_BORDER_COLOR) UpdateElementStyle("container", $CONTAINER_BG_COLOR, $CONTAINER_FONT_COLOR, $CONTAINER_BORDER_COLOR)
UpdateElementStyle("external_container", $EXTERNAL_CONTAINER_BG_COLOR, $EXTERNAL_CONTAINER_FONT_COLOR, $EXTERNAL_CONTAINER_BORDER_COLOR) UpdateElementStyle("external_container", $EXTERNAL_CONTAINER_BG_COLOR, $EXTERNAL_CONTAINER_FONT_COLOR, $EXTERNAL_CONTAINER_BORDER_COLOR)
UpdateBoundaryStyle("container", $bgColor=$BOUNDARY_BG_COLOR, $fontColor=$BOUNDARY_COLOR, $borderColor=$BOUNDARY_COLOR, $type="Container") UpdateBoundaryStyle("container", $bgColor=$CONTAINER_BOUNDARY_BG_COLOR, $fontColor=$CONTAINER_BOUNDARY_COLOR, $borderColor=$CONTAINER_BOUNDARY_COLOR, $type="Container")
' shortcuts with default colors ' shortcuts with default colors
!unquoted procedure AddContainerTag($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="", $shape="", $sprite="", $techn="", $legendText="", $legendSprite="") !unquoted procedure AddContainerTag($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="", $shape="", $sprite="", $techn="", $legendText="", $legendSprite="")
@ -36,7 +40,7 @@ UpdateBoundaryStyle("container", $bgColor=$BOUNDARY_BG_COLOR, $fontColor=$BOUNDA
$addElementTagInclReuse("external_container", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape, $sprite, $techn, $legendText, $legendSprite) $addElementTagInclReuse("external_container", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape, $sprite, $techn, $legendText, $legendSprite)
!endprocedure !endprocedure
!unquoted procedure UpdateContainerBoundaryStyle($bgColor=$BOUNDARY_BG_COLOR, $fontColor=$BOUNDARY_COLOR, $borderColor=$BOUNDARY_COLOR, $shadowing="", $shape="", $type="Container", $legendText="") !unquoted procedure UpdateContainerBoundaryStyle($bgColor=$CONTAINER_BOUNDARY_BG_COLOR, $fontColor=$CONTAINER_BOUNDARY_COLOR, $borderColor=$CONTAINER_BOUNDARY_COLOR, $shadowing="", $shape="", $type="Container", $legendText="")
UpdateBoundaryStyle("container", $bgColor, $fontColor, $borderColor, $shadowing, $shape, $type, $legendText) UpdateBoundaryStyle("container", $bgColor, $fontColor, $borderColor, $shadowing, $shape, $type, $legendText)
!endprocedure !endprocedure

16
C4_Context.puml
Unescape Escape View File

@ -25,10 +25,18 @@
!$SYSTEM_BG_COLOR ?= "#1168BD" !$SYSTEM_BG_COLOR ?= "#1168BD"
!$SYSTEM_BORDER_COLOR ?= "#3C7FC0" !$SYSTEM_BORDER_COLOR ?= "#3C7FC0"
!$SYSTEM_BOUNDARY_COLOR ?= $BOUNDARY_COLOR
!$SYSTEM_BOUNDARY_BG_COLOR ?= $BOUNDARY_BG_COLOR
!$SYSTEM_BOUNDARY_BORDER_STYLE ?= $BOUNDARY_BORDER_STYLE
!$EXTERNAL_SYSTEM_FONT_COLOR ?= $ELEMENT_FONT_COLOR !$EXTERNAL_SYSTEM_FONT_COLOR ?= $ELEMENT_FONT_COLOR
!$EXTERNAL_SYSTEM_BG_COLOR ?= "#999999" !$EXTERNAL_SYSTEM_BG_COLOR ?= "#999999"
!$EXTERNAL_SYSTEM_BORDER_COLOR ?= "#8A8A8A" !$EXTERNAL_SYSTEM_BORDER_COLOR ?= "#8A8A8A"
!$ENTERPRISE_BOUNDARY_COLOR ?= $BOUNDARY_COLOR
!$ENTERPRISE_BOUNDARY_BG_COLOR ?= $BOUNDARY_BG_COLOR
!$ENTERPRISE_BOUNDARY_BORDER_STYLE ?= $BOUNDARY_BORDER_STYLE
' Styling ' Styling
' ################################## ' ##################################
@ -37,8 +45,8 @@ UpdateElementStyle("external_person", $EXTERNAL_PERSON_BG_COLOR, $EXTERNAL_PERSO
UpdateElementStyle("system", $SYSTEM_BG_COLOR, $SYSTEM_FONT_COLOR, $SYSTEM_BORDER_COLOR) UpdateElementStyle("system", $SYSTEM_BG_COLOR, $SYSTEM_FONT_COLOR, $SYSTEM_BORDER_COLOR)
UpdateElementStyle("external_system", $EXTERNAL_SYSTEM_BG_COLOR, $EXTERNAL_SYSTEM_FONT_COLOR, $EXTERNAL_SYSTEM_BORDER_COLOR) UpdateElementStyle("external_system", $EXTERNAL_SYSTEM_BG_COLOR, $EXTERNAL_SYSTEM_FONT_COLOR, $EXTERNAL_SYSTEM_BORDER_COLOR)
UpdateBoundaryStyle("enterprise", $bgColor=$BOUNDARY_BG_COLOR, $fontColor=$BOUNDARY_COLOR, $borderColor=$BOUNDARY_COLOR, $type="Enterprise") UpdateBoundaryStyle("system", $bgColor=$SYSTEM_BOUNDARY_BG_COLOR, $fontColor=$SYSTEM_BOUNDARY_COLOR, $borderColor=$SYSTEM_BOUNDARY_COLOR, $type="System")
UpdateBoundaryStyle("system", $bgColor=$BOUNDARY_BG_COLOR, $fontColor=$BOUNDARY_COLOR, $borderColor=$BOUNDARY_COLOR, $type="System") UpdateBoundaryStyle("enterprise", $bgColor=$ENTERPRISE_BOUNDARY_BG_COLOR, $fontColor=$ENTERPRISE_BOUNDARY_COLOR, $borderColor=$ENTERPRISE_BOUNDARY_COLOR, $type="Enterprise")
' shortcuts with default colors ' shortcuts with default colors
!unquoted procedure AddPersonTag($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="", $shape="", $sprite="", $legendText="", $legendSprite="", $type="") !unquoted procedure AddPersonTag($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="", $shape="", $sprite="", $legendText="", $legendSprite="", $type="")
@ -54,10 +62,10 @@ UpdateBoundaryStyle("system", $bgColor=$BOUNDARY_BG_COLOR, $fontColor=$BOUNDARY_
$addElementTagInclReuse("external_system", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape, $sprite, $type, $legendText, $legendSprite) $addElementTagInclReuse("external_system", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape, $sprite, $type, $legendText, $legendSprite)
!endprocedure !endprocedure
!unquoted procedure UpdateEnterpriseBoundaryStyle($bgColor=$BOUNDARY_BG_COLOR, $fontColor=$BOUNDARY_COLOR, $borderColor=$BOUNDARY_COLOR, $shadowing="", $shape="", $type="Enterprise", $legendText="") !unquoted procedure UpdateEnterpriseBoundaryStyle($bgColor=$ENTERPRISE_BOUNDARY_BG_COLOR, $fontColor=$ENTERPRISE_BOUNDARY_COLOR, $borderColor=$ENTERPRISE_BOUNDARY_COLOR, $shadowing="", $shape="", $type="Enterprise", $legendText="")
UpdateBoundaryStyle("enterprise", $bgColor, $fontColor, $borderColor, $shadowing, $shape, $type, $legendText) UpdateBoundaryStyle("enterprise", $bgColor, $fontColor, $borderColor, $shadowing, $shape, $type, $legendText)
!endprocedure !endprocedure
!unquoted procedure UpdateSystemBoundaryStyle($bgColor=$BOUNDARY_BG_COLOR, $fontColor=$BOUNDARY_COLOR, $borderColor=$BOUNDARY_COLOR, $shadowing="", $shape="", $type="System", $legendText="") !unquoted procedure UpdateSystemBoundaryStyle($bgColor=$SYSTEM_BOUNDARY_BG_COLOR, $fontColor=$SYSTEM_BOUNDARY_COLOR, $borderColor=$SYSTEM_BOUNDARY_COLOR, $shadowing="", $shape="", $type="System", $legendText="")
UpdateBoundaryStyle("system", $bgColor, $fontColor, $borderColor, $shadowing, $shape, $type, $legendText) UpdateBoundaryStyle("system", $bgColor, $fontColor, $borderColor, $shadowing, $shape, $type, $legendText)
!endprocedure !endprocedure

90
Themes.md
Unescape Escape View File

@ -1,57 +1,95 @@
# Themes # Themes
WIP: C4-PlantUML offers no finished themes (atm). Similar to PlantUML themes supports C4-PlantUML `C4_...` specific themes (based on existing PlantUML themes).
It is possible to define/use custom themes.
![](//www.plantuml.com/plantuml/png/hLRHRzks4txtNt5r-qCTG8dnGzkN0G7gsDwQmauyosttCC0uYMU9A4Lg91N76FQ_xqXRLknqw83r9J6FlE_x-F5uudldqVgcKhqNlgIAOFnstMZfIS36cWfAxsltqt1eSNjLI5ysMUF8vaPxqlugDzMmLgW3mANpGibiE7vxkGYXJ_FPi4BdoGuZikkza3fNZQ0V0yf2nvo1KfEzgiCEUkc7-o_hnNIPtj-jxp-jPhTtqy55xpMii73WchesreCsu6hCoO7KmCf0OqKmoD2H0BCFDLgGLL9BNK0W8-DtDRa4jgNCIn16l_OjO8k6UbSPInTNm8otcsFO4bZweo764IsbeeAqI0x_mTEZXoqRiK-24Xru0nc1e8tK97eZ8QQAAjAUzpBePvX_vSJZ_li9lDhmO6oKiTUlfhFfV7gtMlzypt_6zxFx9SzdnNws__BDctUJqRkGuqgiwNegYzAdKf18mtXmmJDxPIiMTjsoGTxI_Quff80BEVsBe6v9AYf3jzDvWEOzjN96ooMVIwj3CS8_JgH-f-XwWguaCPEQjPoW1_3XZw4mtdSKFI-z8ZZw2K9YOR62ZR5mgprPJHvkK7yD5P7kdAUgrrkGTKOFyiPvKv5DO7pyrHz16mQpYMUUSNQoF-Kw9gAACS0yDutshiywzj3h6mu8jBj1_d_6EXVGlu0_Um3GwHriALjZNVFYBvJ1gAwLpD5Be_iS-eWFc41Qso1-_daSOXDIye5bH6dEyzeS3XSGK8iOFl9cxSON8nPvokngPBYKfnLTBh2WmDwofhcLjKzWf8j6eGtXXJKFKf03LEhRB9j6vq4wAkbtu0qx6Orqy20nf4WBl5_8hDawiiyKLIQJYWvspEEWrJH-cS1lMA6L-bGBA5d5fkUQp947i_dNsjmpSNi18EX1vdGkRv8D17eCxIOSm-5dK9F-EeEJiJUM78JM29OAwRoDHmfISrbMyNS2PRmhW8ql8RSaI7k9oYMXhCWvKARW0VdywfbHXtlDJibGiOlRRnVEnF0os-MTEFSTXu8f31nlAnRk-bddOb5_7Sj--kW7LA5KQnS3J3IzdFFuSEK2yweaa94K5SnbReqp6m_Jnxn4NH3iCnds2UP1MuVAc7fZiQApEztP7igphOAS0-t-dfeFc9d6ToMG7Azo0jwYTXYTwEplBKazQHVTfVtao0Nk3wlL8kM5f-jSZTzTqnPz1xUdMz-5LfsPhaL4kAu1791YyBGWMiBORnFuo5_LOIJlJZDE7H0w1VyDQ7t3oPtixhASWYu9XOjlbDYljbPwSk1D83hmJ6x637d4VEBMMP6b3Ek0BaCqOdH2JklnJCDfNkEuFZhwTBvQx86wpPoadrLbvrFtbUDkDP-TUzLDC_p-pJER_ZAzc_1RPsEC9ml2ubRllpNjimaUhk1_uS2bqOEBw5buL7MpFFpSJlVUiygcKdy3)
- [📄 C4-PlantUML](README.md#c4-plantuml) - [📄 C4-PlantUML](README.md#c4-plantuml)
- [📄 Layout Options](LayoutOptions.md#layout-options) - [📄 Layout Options](LayoutOptions.md#layout-options)
- [📄 Themes](#themes) - [📄 Themes](#themes)
- [Overall Guidance](#overall-guidance) - [Use theme](#use-theme)
- [List of available C4-themes](#list-of-available-c4-themes) - [List of available C4-themes](#list-of-available-c4-themes)
- [How to write custom theme](#how-to-write-custom-theme) - [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) - [Following variables could be set in theme definitions too](#following-variables-could-be-set-in-theme-definitions-too)
- samples - samples
- [📄 Core Diagrams](samples/C4CoreDiagrams.md#c4-model-diagrams) - [📄 Core Diagrams](samples/C4CoreDiagrams.md#c4-model-diagrams)
## Overall Guidance ## Use theme
WIP ... WIP ...
```plantuml ```plantuml
@startuml @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.") !theme C4_united from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes
Enterprise_Boundary(c0, "Widgets Limited") { !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
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.") Person(admin, "Administrator")
System_Ext(braintree, "Braintree Payments", "Processes credit card payments on behalf of Widgets Limited.") System_Boundary(c1, "Sample System") {
System_Ext(post, "Jersey Post", "Calculates worldwide shipping costs for packages.") Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines")
}
System(twitter, "Twitter")
Rel_R(customer, csa, "Asks questions to", "Telephone") Rel(admin, web_app, "Uses", "HTTPS")
Rel_R(customer, ecommerce, "Places orders for widgets using") Rel(web_app, twitter, "Gets tweets from", "HTTPS")
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() SHOW_FLOATING_LEGEND()
@enduml @enduml
``` ```
![Theme sample](https://www.plantuml.com/plantuml/png/hL9DRnen4BtlhvXm0gc4gigffuIFfAfeY_AX797n3c35Qsyyun1KzRztZ0auDCSY3lPwtdipRzubiGeS6rkTyHeRXD75_De4udiaXcNm3QoPM_ew60IrELyPNiT590pQEqR7vzetWzOgbpZwnBKrYy7eeZzBdnv-J0UD8iOms95JTMQSjh76_qCglOvyqtgNC6qQeffX8E_carVkwaZi6moVe3FQ7pjoleAt1_1BU3Jr2fbWQXh3M9ztUbKrSOoX3OPmFlJHrIfik_gpG4-AEptuNO7yicXNaogqu0x3Yz48Lojqd9J7g2p1HgOzje3kEPfWa99ouhhR4cFJHR50tZKARj9_k-nVTsDOwpTq829W3ukuXOtqo0JUMUCGNem2iHuskVDaB6nmGORnH70PxTBO1XqB-VNXKYZU8edLP1OMOUa3jC5h939k1ShLG6lJjkdYbuN3eSQmc-rFLMMgtMvOlQh62-dzxf3eHyhgQ1KZWVLQMP0Qw2QXoGCClmoFe_PsUaepWP9_IgdZFigtL3qCoZWEY31JspH2aY-r5sy58lflSMfbbYT30XsmDWnQXHhQN96yXGMkbLr-7A1Ig_MK_FoEWN0BCxcTZBhnmTQo7JpwfwMAiiDAFwbLpaPrYtP-MuGwf-sAdWYU8n8Rxr884lyzMcpNtg7WJc5bi6PMQQIyfAoupmd4jDQCph4kOLFlHJIs6GZ62R9HgO4I9we5w5syxj3Lz06Q_HuwVXV7lOato5Iuj5P1h4dBRmweGl2Gi35QN2a-MMOHteFgz13BCY8FXDcRZ-62dQgjQ1yjFg1xalbllnxdqydDvEUuswikPV3OsBy0 "Theme sample") ![Theme sample](https://www.plantuml.com/plantuml/png/hL5Dxz8m6B_lKzHv6ScVBHXEdfWJmOINnGqvBjtsA4twqhHFin3ZT_Sf8FW1tALPV-_foYDt69HCadTu0GMiMdP12uIH_N16iGkYzH-Bml4f_odm4lhWmGr68sZC1wCAAxcE3dEFenHzKItdTRmwxNU5uXx15JTdJn523pACy7zSgMb52YuqkDpUDjJWlD4P7vNGRomjuoayEex6fREakP9GTPzCq2DtrsnO4AdXoafWTooTiLy9e-_fd4tGTznQOfwXPwMrKWmSXT4fNLNltrZPrFbXtPB40VkGBzZ-UnMnKaepUHQNUOQ6qIpBYQA2H14ZsqaWWcCe54ZAybJnzwDaXdUGV1uq0fDl8F-EUzKwUV0nRzksTKEiI7gYBviDeATVY4TysdybIRCzdhilksFPVZrikjrwipvypcR92lGObFm3 "Theme sample")
## List of available C4-themes ## List of available C4-themes
Atm we have no finished 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
```
![](https://www.plantuml.com/plantuml/png/hO-noeD048Hxdq8VGBUn-Yj_99s150afmwaR5VRMutQEaBVFcMT8DSF0zy5q1XUHl1GLLlPSzkrZbCJbC-w-N85WVqJHlPfbmvh6P1odNS6APjez1N5wuBLXbcsalgqlntGx3-ITWIDzlLPKcqwIPlwDD6JYJLSs_8kSX3qhx9vj0o-iSnEEIrrkEJy0)
### C4_brown
It can be activated with
```plantuml
!theme C4_brown from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes
```
![](https://www.plantuml.com/plantuml/png/hOyn2eD044LxJw47q6ciKXaadO4K2Id3gXCLPcUNcLaajy-QCwJwdm_lmU_Kd5ZoL5IseiUoRr-ZX9tBjmHVhcPHJm3YzcRPR4rZKfGfi25RCmKFaHmVVAqsqpP2tzQtOtfS1_1E3GL-OYsgZITAC_v76ZFnWJkgdOakX3wp-ios0HVakOd7fowtd5y0)
### C4_green
It can be activated with
```plantuml
!theme C4_green from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes
```
![](https://www.plantuml.com/plantuml/png/hO-noeD048Hxdq8VGBUn-Yj_99s150afmwaJ5VREOtUFaBVFcMT8DSF0zy5qQauiUIugM-5HzkrZ4I2KJzbzkPf5_ICIzsgMpTOq9eLCUp04QwRTKsGN3hvMctaRgM_hop7TpWDvfmQXhrYBQWiJfnc_aSPClEaAjN_c4yDdLk_PDc11c9juVEfoo_a1)
### C4_united
It can be activated with
```plantuml
!theme C4_united from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes
```
![](https://www.plantuml.com/plantuml/png/hSyngiCm3CRnFQT83f1eoVIcF4At53gqT2nEh2O6sJ7MPqflNwTdw2GX-Fz0Wy8aP2zLWuqzrsF_oC61RVrCkwyt8EeVKJAlRdNOyfoLqx87S42tx9wYc700hSAAcsdisyjnkfqdyaR1YRwoLeqBYsJBlq5ZATvqPSM_o4dObrRlHPjuvM2xU3mrbAtC3m00)
### C4_violet
It can be activated with
```plantuml
!theme C4_violet from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes
```
![](https://www.plantuml.com/plantuml/png/hS_12i8m383X-vvYUu0jbvqyJOQt2HuKZz9jSIiaRMbInRUtzHay9GJ-3pA8cgY9gMfqHyPwx1ylwmcrVaRFzQuQv00GpRlRhEvfJe9nyKxHQRTuXa365Q0LNSdECFRjfPnkvmdOY6A4donLOzr2QSN_e24N7xYYw97eHCYvbNlM9jpGhLqeJmrvo_CB)
## How to write custom theme ## How to write custom theme

4
percy/TestAllElementsWithLegend.puml
Unescape Escape View File

@ -65,7 +65,7 @@ Boundary(b6, "Boundary 6") {
System_Boundary(sb, "System Boundary") { System_Boundary(sb, "System Boundary") {
} }
Container_Boundary(cb, "System Boundary") { Container_Boundary(cb, "Container Boundary") {
} }
Lay_R(eb,sb) Lay_R(eb,sb)
@ -78,5 +78,5 @@ Lay_D(b3,b4)
Lay_D(b4,b5) Lay_D(b4,b5)
Lay_R(b5,b6) Lay_R(b5,b6)
SHOW_FLOATING_LEGEND($hideStereotype = false) SHOW_FLOATING_LEGEND()
@enduml @enduml

49
percy/TestThemeC4_All.puml
Unescape Escape View File

@ -57,3 +57,52 @@
!endif !endif
@enduml @enduml
@startuml
!theme C4_united from https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/themes
' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally
!if %variable_exists("RELATIVE_INCLUDE")
!include ./../C4_Container.puml
!else
!include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/C4_Container.puml
!endif
SHOW_PERSON_OUTLINE()
' Tags support no spaces in the name (based on the underlining stereotypes, which don't support spaces anymore).
' If spaces are requested in the legend, legend text with space has to be defined
AddElementTag("backendContainer", $fontColor=$ELEMENT_FONT_COLOR, $bgColor="#335DA5", $shape=EightSidedShape(), $legendText="backend container\neight sided")
AddRelTag("async", $textColor=$ARROW_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DashedLine())
AddRelTag("sync/async", $textColor=$ARROW_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DottedLine())
title Container diagram for Internet Banking System
Person(customer, Customer, "A customer of the bank, with personal bank accounts")
System_Boundary(c1, "Internet Banking") {
Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to cutomers via their web browser")
Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")
Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API", $tags="backendContainer")
}
System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system")
System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
Rel(customer, web_app, "Uses", "HTTPS")
Rel(customer, spa, "Uses", "HTTPS")
Rel(customer, mobile_app, "Uses")
Rel_Neighbor(web_app, spa, "Delivers")
Rel(spa, backend_api, "Uses", "async, JSON/HTTPS", $tags="async")
Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS", $tags="async")
Rel_Back_Neighbor(database, backend_api, "Reads from and writes to", "sync, JDBC")
Rel_Back(customer, email_system, "Sends e-mails to")
Rel_Back(email_system, backend_api, "Sends e-mails using", "sync, SMTP")
Rel_Neighbor(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS", $tags="sync/async")
SHOW_LEGEND()
footer drawn with PlantUML v. %version() and C4-PlantUML v. C4Version()
@enduml

31
percy/TestThemeC4_united.puml
Unescape Escape View File

@ -0,0 +1,31 @@
@startuml
!$UseTheme = "C4_united"
' 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 $UseTheme from ./../themes
!else
!theme $UseTheme from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes
!endif
!if %variable_exists("RELATIVE_INCLUDE")
!include %get_variable_value("RELATIVE_INCLUDE")/C4_Container.puml
!else
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
!endif
' LAYOUT_LEFT_RIGHT()
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

2
themes/puml-theme-C4_FirstTest.puml
Unescape Escape View File

@ -54,4 +54,4 @@
!$NODE_BG_COLOR ?= $SECONDARY_LIGHT !$NODE_BG_COLOR ?= $SECONDARY_LIGHT
!$NODE_BORDER_COLOR ?= $SECONDARY_DARK !$NODE_BORDER_COLOR ?= $SECONDARY_DARK
!$TECHN_FONT_SIZE = 18 !$TECHN_FONT_SIZE = 18

49
themes/puml-theme-C4_blue.puml
Unescape Escape View File

@ -1,17 +1,7 @@
!$THEME = "C4_Original" !$THEME = "C4_blue"
!$ELEMENT_FONT_COLOR ?= "#FFFFFF" !$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"
!$PERSON_FONT_COLOR ?= $ELEMENT_FONT_COLOR !$PERSON_FONT_COLOR ?= $ELEMENT_FONT_COLOR
!$PERSON_BG_COLOR ?= "#08427B" !$PERSON_BG_COLOR ?= "#08427B"
!$PERSON_BORDER_COLOR ?= "#073B6F" !$PERSON_BORDER_COLOR ?= "#073B6F"
@ -40,40 +30,3 @@
!$EXTERNAL_COMPONENT_BG_COLOR ?= "#CCCCCC" !$EXTERNAL_COMPONENT_BG_COLOR ?= "#CCCCCC"
!$EXTERNAL_COMPONENT_BORDER_COLOR ?= "#BFBFBF" !$EXTERNAL_COMPONENT_BORDER_COLOR ?= "#BFBFBF"
!$NODE_FONT_COLOR ?= "#000000"
!$NODE_BG_COLOR ?= "#FFFFFF"
!$NODE_BORDER_COLOR ?= "#A2A2A2"
!$LEGEND_FONT_COLOR ?= "#FFFFFF"
!$LEGEND_TITLE_COLOR ?= "#000000"
!$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

49
themes/puml-theme-C4_brown.puml
Unescape Escape View File

@ -1,17 +1,7 @@
!$THEME = "C4_Original4" !$THEME = "C4_brown"
!$ELEMENT_FONT_COLOR ?= "#FFFFFF" !$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"
!$PERSON_FONT_COLOR ?= $ELEMENT_FONT_COLOR !$PERSON_FONT_COLOR ?= $ELEMENT_FONT_COLOR
!$PERSON_BG_COLOR ?= "#7B4208" !$PERSON_BG_COLOR ?= "#7B4208"
!$PERSON_BORDER_COLOR ?= "#6F3B07" !$PERSON_BORDER_COLOR ?= "#6F3B07"
@ -40,40 +30,3 @@
!$EXTERNAL_COMPONENT_BG_COLOR ?= "#CCCCCC" !$EXTERNAL_COMPONENT_BG_COLOR ?= "#CCCCCC"
!$EXTERNAL_COMPONENT_BORDER_COLOR ?= "#BFBFBF" !$EXTERNAL_COMPONENT_BORDER_COLOR ?= "#BFBFBF"
!$NODE_FONT_COLOR ?= "#000000"
!$NODE_BG_COLOR ?= "#FFFFFF"
!$NODE_BORDER_COLOR ?= "#A2A2A2"
!$LEGEND_FONT_COLOR ?= "#FFFFFF"
!$LEGEND_TITLE_COLOR ?= "#000000"
!$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

49
themes/puml-theme-C4_green.puml
Unescape Escape View File

@ -1,17 +1,7 @@
!$THEME = "C4_Original" !$THEME = "C4_green"
!$ELEMENT_FONT_COLOR ?= "#FFFFFF" !$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"
!$PERSON_FONT_COLOR ?= $ELEMENT_FONT_COLOR !$PERSON_FONT_COLOR ?= $ELEMENT_FONT_COLOR
!$PERSON_BG_COLOR ?= "#427B08" !$PERSON_BG_COLOR ?= "#427B08"
!$PERSON_BORDER_COLOR ?= "#3B6F07" !$PERSON_BORDER_COLOR ?= "#3B6F07"
@ -40,40 +30,3 @@
!$EXTERNAL_COMPONENT_BG_COLOR ?= "#CCCCCC" !$EXTERNAL_COMPONENT_BG_COLOR ?= "#CCCCCC"
!$EXTERNAL_COMPONENT_BORDER_COLOR ?= "#BFBFBF" !$EXTERNAL_COMPONENT_BORDER_COLOR ?= "#BFBFBF"
!$NODE_FONT_COLOR ?= "#000000"
!$NODE_BG_COLOR ?= "#FFFFFF"
!$NODE_BORDER_COLOR ?= "#A2A2A2"
!$LEGEND_FONT_COLOR ?= "#FFFFFF"
!$LEGEND_TITLE_COLOR ?= "#000000"
!$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

31
themes/puml-theme-C4_united.puml
Unescape Escape View File

@ -1,24 +1,12 @@
!theme united !theme united
!$THEME = "C4_United" !$THEME = "C4_united"
!$ELEMENT_FONT_COLOR = $PRIMARY_TEXT !$ELEMENT_FONT_COLOR = $PRIMARY_TEXT
!$ARROW_COLOR = $PRIMARY_LIGHT !$ARROW_COLOR = $PRIMARY_LIGHT
!$ARROW_FONT_COLOR ?= $ARROW_COLOR !$ARROW_FONT_COLOR ?= $ARROW_COLOR
!$BOUNDARY_COLOR ?= $PRIMARY_DARK
!$BOUNDARY_BG_COLOR ?= "transparent"
!$BOUNDARY_BORDER_STYLE ?= "solid"
!$LEGEND_FONT_COLOR ?= "#FFFFFF"
!$LEGEND_TITLE_COLOR ?= "#000000"
!$LEGEND_BG_COLOR = transparent
!$LEGEND_BORDER_COLOR = transparent
' %darken(darkkhaki,50), #khaki
!$LEGEND_DARK_COLOR ?= "#66622E"
!$LEGEND_LIGHT_COLOR ?= "#khaki"
!$PERSON_FONT_COLOR = $INFO_TEXT !$PERSON_FONT_COLOR = $INFO_TEXT
!$PERSON_BG_COLOR = $INFO !$PERSON_BG_COLOR = $INFO
!$PERSON_BORDER_COLOR = $INFO_DARK !$PERSON_BORDER_COLOR = $INFO_DARK
@ -53,4 +41,19 @@
!$NODE_FONT_COLOR ?= $LIGHT !$NODE_FONT_COLOR ?= $LIGHT
!$NODE_BG_COLOR ?= $SECONDARY !$NODE_BG_COLOR ?= $SECONDARY
!$NODE_BORDER_COLOR ?= $SECONDARY_DARK !$NODE_BORDER_COLOR ?= $SECONDARY_DARK
!$BOUNDARY_COLOR ?= $PRIMARY_DARK
!$BOUNDARY_BG_COLOR ?= "transparent"
!$BOUNDARY_BORDER_STYLE ?= "solid"
' border is not dashed in theme "united", remove dashed from legend text too
!$LEGEND_DASHED_BOUNDARY ?= ""
!$LEGEND_DASHED_TRANSPARENT_BOUNDARY ?= ""
!$ENTERPRISE_BOUNDARY_COLOR ?= $SYSTEM_BORDER_COLOR
!$SYSTEM_BOUNDARY_COLOR ?= $SYSTEM_BORDER_COLOR
!$CONTAINER_BOUNDARY_COLOR ?= $CONTAINER_BORDER_COLOR
!$LEGEND_TITLE_COLOR = $LIGHT
!$LEGEND_FONT_COLOR = $LIGHT
!$LEGEND_BG_COLOR = $SECONDARY
!$LEGEND_BORDER_COLOR = $SECONDARY_DARK

49
themes/puml-theme-C4_violet.puml
Unescape Escape View File

@ -1,17 +1,7 @@
!$THEME = "C4_Original" !$THEME = "C4_violet"
!$ELEMENT_FONT_COLOR ?= "#FFFFFF" !$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"
!$PERSON_FONT_COLOR ?= $ELEMENT_FONT_COLOR !$PERSON_FONT_COLOR ?= $ELEMENT_FONT_COLOR
!$PERSON_BG_COLOR ?= "#42087B" !$PERSON_BG_COLOR ?= "#42087B"
!$PERSON_BORDER_COLOR ?= "#3B076F" !$PERSON_BORDER_COLOR ?= "#3B076F"
@ -40,40 +30,3 @@
!$EXTERNAL_COMPONENT_BG_COLOR ?= "#CCCCCC" !$EXTERNAL_COMPONENT_BG_COLOR ?= "#CCCCCC"
!$EXTERNAL_COMPONENT_BORDER_COLOR ?= "#BFBFBF" !$EXTERNAL_COMPONENT_BORDER_COLOR ?= "#BFBFBF"
!$NODE_FONT_COLOR ?= "#000000"
!$NODE_BG_COLOR ?= "#FFFFFF"
!$NODE_BORDER_COLOR ?= "#A2A2A2"
!$LEGEND_FONT_COLOR ?= "#FFFFFF"
!$LEGEND_TITLE_COLOR ?= "#000000"
!$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

Write Preview
Loading…
Cancel
Save