diff --git a/C4.puml b/C4.puml index 154df47..2ec68f0 100644 --- a/C4.puml +++ b/C4.puml @@ -18,56 +18,61 @@ rectangle C4VersionDetailsArea <> [ ' Colors ' ################################## -!global $ELEMENT_FONT_COLOR = "#FFFFFF" +!$ELEMENT_FONT_COLOR ?= "#FFFFFF" -!global $ARROW_COLOR = "#666666" +!$ARROW_COLOR ?= "#666666" -!global $BOUNDARY_COLOR = "#444444" -!global $BOUNDARY_BG_COLOR = "transparent" +!$BOUNDARY_COLOR ?= "#444444" +!$BOUNDARY_BG_COLOR ?= "transparent" -!global $LEGEND_FONT_COLOR = "#FFFFFF" -!global $LEGEND_TITLE_COLOR = "#000000" +!$LEGEND_FONT_COLOR ?= "#FFFFFF" +!$LEGEND_TITLE_COLOR ?= "#000000" ' %darken(darkkhaki,50), #khaki -!global $LEGEND_DARK_COLOR = "#66622E" -!global $LEGEND_LIGHT_COLOR = "#khaki" +!$LEGEND_DARK_COLOR ?= "#66622E" +!$LEGEND_LIGHT_COLOR ?= "#khaki" -!global $SKETCH_BG_COLOR = "#EEEBDC" -!global $SKETCH_FONT_COLOR = "" -!global $SKETCH_WARNING_COLOR = "red" -!global $SKETCH_FONT_NAME = "Comic Sans MS" +!$SKETCH_BG_COLOR ?= "#EEEBDC" +!$SKETCH_FONT_COLOR ?= "" +!$SKETCH_WARNING_COLOR ?= "red" +!$SKETCH_FONT_NAME ?= "Comic Sans MS" ' Labels ' ################################## -!global $LEGEND_SHADOW_TEXT = "shadow" -!global $LEGEND_NO_SHADOW_TEXT = "no shadow" -!global $LEGEND_NO_FONT_BG_TEXT = "last text and back color" -!global $LEGEND_NO_FONT_TEXT = "last text color" -!global $LEGEND_NO_BG_TEXT = "last back color" -!global $LEGEND_NO_LINE_TEXT = "last line color" -!global $LEGEND_ROUNDED_BOX = "rounded box" -!global $LEGEND_EIGHT_SIDED = "eight sided" -!global $LEGEND_DOTTED_LINE = "dotted" -!global $LEGEND_DASHED_LINE = "dashed" -!global $LEGEND_BOLD_LINE = "bold" -!global $LEGEND_BOUNDARY = "boundary" -!global $LEGEND_DASHED_BOUNDARY = "dashed" +!$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" ' ignore transparent atm, that the legend is smaller -'!global $LEGEND_DASHED_TRANSPARENT_BOUNDARY = "dashed, transparent" -!global $LEGEND_DASHED_TRANSPARENT_BOUNDARY = "dashed" +'$LEGEND_DASHED_TRANSPARENT_BOUNDARY ?= "dashed, transparent" +!$LEGEND_DASHED_TRANSPARENT_BOUNDARY ?= "dashed" -!global $SKETCH_FOOTER_WARNING = "Warning:" -!global $SKETCH_FOOTER_TEXT = "Created for discussion, needs to be validated" +!$SKETCH_FOOTER_WARNING ?= "Warning:" +!$SKETCH_FOOTER_TEXT ?= "Created for discussion, needs to be validated" ' Styling ' ################################## -!global $TECHN_FONT_SIZE = 12 -!global $ROUNDED_BOX_SIZE = 25 -!global $EIGHT_SIDED_SIZE = 18 +!$STEREOTYPE_FONT_SIZE ?= 12 +!global $TRANSPARENT_STEREOTYPE_FONT_SIZE = $STEREOTYPE_FONT_SIZE/2 -!global $LEGEND_DETAILS_SMALL_SIZE = 10 -!global $LEGEND_DETAILS_NORMAL_SIZE = 14 +!$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 !global $LEGEND_DETAILS_SIZE = $LEGEND_DETAILS_SMALL_SIZE !global $ROUNDED_BOX = "roundedBox" @@ -91,40 +96,39 @@ skinparam LegendBackgroundColor transparent skinparam LegendFontColor $LEGEND_FONT_COLOR skinparam shadowing<> false -' #00000000 is transparent skinparam rectangle<> { - backgroundcolor #00000000 - bordercolor #00000000 + backgroundcolor transparent + bordercolor transparent } skinparam rectangle { - StereotypeFontSize 12 + StereotypeFontSize $STEREOTYPE_FONT_SIZE shadowing false } skinparam database { - StereotypeFontSize 12 + StereotypeFontSize $STEREOTYPE_FONT_SIZE shadowing false } skinparam queue { - StereotypeFontSize 12 + StereotypeFontSize $STEREOTYPE_FONT_SIZE shadowing false } skinparam arrow { Color $ARROW_COLOR FontColor $ARROW_COLOR - FontSize 12 + FontSize $ARROW_FONT_SIZE } skinparam person { - StereotypeFontSize 12 + StereotypeFontSize $STEREOTYPE_FONT_SIZE shadowing false } skinparam actor { - StereotypeFontSize 12 + StereotypeFontSize $STEREOTYPE_FONT_SIZE shadowing false style awesome } @@ -133,13 +137,13 @@ skinparam actor { ' UpdateBoundaryStyle() called in boundary section below skinparam rectangle<> { Shadowing false - StereotypeFontSize 6 + StereotypeFontSize $TRANSPARENT_STEREOTYPE_FONT_SIZE StereotypeFontColor $BOUNDARY_BG_COLOR BorderStyle dashed } skinparam package { - StereotypeFontSize 6 + StereotypeFontSize $TRANSPARENT_STEREOTYPE_FONT_SIZE StereotypeFontColor $BOUNDARY_BG_COLOR FontStyle plain BackgroundColor $BOUNDARY_BG_COLOR @@ -538,6 +542,7 @@ $elementSkin !endif !if ($legendText == "") !if ($tagStereo == "boundary") + ' #00000000 is transparent !if ($bgColor == "#00000000" || %lower($bgColor) == "transparent") !$tagEntry = $tagEntry + " " + $LEGEND_BOUNDARY + " " !$tagDetails = $tagDetails + $LEGEND_DASHED_TRANSPARENT_BOUNDARY + ", " @@ -1039,6 +1044,7 @@ hide stereotype !procedure $getLegendTable($detailsFormat) !global $LEGEND_DETAILS_SIZE = $getLegendDetailsSize($detailsFormat) +' #00000000 is transparent, but transparent is not working <#00000000,#00000000>|**Legend** | $showActiveLegendEntries($tagDefaultLegend) $showActiveLegendEntries($tagCustomLegend) diff --git a/C4_Component.puml b/C4_Component.puml index ace0e0b..53f852f 100644 --- a/C4_Component.puml +++ b/C4_Component.puml @@ -13,18 +13,19 @@ ' Colors ' ################################## -!global $COMPONENT_FONT_COLOR = "#000000" +!$COMPONENT_FONT_COLOR ?= "#000000" +!$COMPONENT_BG_COLOR ?= "#85BBF0" +!$COMPONENT_BORDER_COLOR ?= "#78A8D8" -!global $COMPONENT_BG_COLOR = "#85BBF0" -!global $COMPONENT_BORDER_COLOR = "#78A8D8" -!global $EXTERNAL_COMPONENT_BG_COLOR = "#CCCCCC" -!global $EXTERNAL_COMPONENT_BORDER_COLOR = "#BFBFBF" +!$EXTERNAL_COMPONENT_FONT_COLOR ?= $COMPONENT_FONT_COLOR +!$EXTERNAL_COMPONENT_BG_COLOR ?= "#CCCCCC" +!$EXTERNAL_COMPONENT_BORDER_COLOR ?= "#BFBFBF" ' Styling ' ################################## UpdateElementStyle("component", $COMPONENT_BG_COLOR, $COMPONENT_FONT_COLOR, $COMPONENT_BORDER_COLOR) -UpdateElementStyle("external_component", $EXTERNAL_COMPONENT_BG_COLOR, $COMPONENT_FONT_COLOR, $EXTERNAL_COMPONENT_BORDER_COLOR) +UpdateElementStyle("external_component", $EXTERNAL_COMPONENT_BG_COLOR, $EXTERNAL_COMPONENT_FONT_COLOR, $EXTERNAL_COMPONENT_BORDER_COLOR) ' shortcuts with default colors !unquoted procedure AddComponentTag($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="", $shape="", $sprite="", $techn="", $legendText="", $legendSprite="") diff --git a/C4_Container.puml b/C4_Container.puml index 2166467..1cc0bc2 100644 --- a/C4_Container.puml +++ b/C4_Container.puml @@ -13,15 +13,18 @@ ' Colors ' ################################## -!global $CONTAINER_BG_COLOR = "#438DD5" -!global $CONTAINER_BORDER_COLOR = "#3C7FC0" -!global $EXTERNAL_CONTAINER_BG_COLOR = "#B3B3B3" -!global $EXTERNAL_CONTAINER_BORDER_COLOR = "#A6A6A6" +!$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" ' Styling ' ################################## -UpdateElementStyle("container", $CONTAINER_BG_COLOR, $ELEMENT_FONT_COLOR, $CONTAINER_BORDER_COLOR) -UpdateElementStyle("external_container", $EXTERNAL_CONTAINER_BG_COLOR, $ELEMENT_FONT_COLOR, $EXTERNAL_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) UpdateBoundaryStyle("container", $bgColor=$BOUNDARY_BG_COLOR, $fontColor=$BOUNDARY_COLOR, $borderColor=$BOUNDARY_COLOR, $type="Container") diff --git a/C4_Context.puml b/C4_Context.puml index 700ae5d..f6b80bb 100644 --- a/C4_Context.puml +++ b/C4_Context.puml @@ -13,22 +13,29 @@ ' Colors ' ################################## -!global $PERSON_BG_COLOR = "#08427B" -!global $PERSON_BORDER_COLOR = "#073B6F" -!global $EXTERNAL_PERSON_BG_COLOR = "#686868" -!global $EXTERNAL_PERSON_BORDER_COLOR = "#8A8A8A" -!global $SYSTEM_BG_COLOR = "#1168BD" -!global $SYSTEM_BORDER_COLOR = "#3C7FC0" -!global $EXTERNAL_SYSTEM_BG_COLOR = "#999999" -!global $EXTERNAL_SYSTEM_BORDER_COLOR = "#8A8A8A" +!$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" ' Styling ' ################################## -UpdateElementStyle("person", $PERSON_BG_COLOR, $ELEMENT_FONT_COLOR, $PERSON_BORDER_COLOR) -UpdateElementStyle("external_person", $EXTERNAL_PERSON_BG_COLOR, $ELEMENT_FONT_COLOR, $EXTERNAL_PERSON_BORDER_COLOR) -UpdateElementStyle("system", $SYSTEM_BG_COLOR, $ELEMENT_FONT_COLOR, $SYSTEM_BORDER_COLOR) -UpdateElementStyle("external_system", $EXTERNAL_SYSTEM_BG_COLOR, $ELEMENT_FONT_COLOR, $EXTERNAL_SYSTEM_BORDER_COLOR) +UpdateElementStyle("person", $PERSON_BG_COLOR, $PERSON_FONT_COLOR, $PERSON_BORDER_COLOR) +UpdateElementStyle("external_person", $EXTERNAL_PERSON_BG_COLOR, $EXTERNAL_PERSON_FONT_COLOR, $EXTERNAL_PERSON_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) UpdateBoundaryStyle("enterprise", $bgColor=$BOUNDARY_BG_COLOR, $fontColor=$BOUNDARY_COLOR, $borderColor=$BOUNDARY_COLOR, $type="Enterprise") UpdateBoundaryStyle("system", $bgColor=$BOUNDARY_BG_COLOR, $fontColor=$BOUNDARY_COLOR, $borderColor=$BOUNDARY_COLOR, $type="System") diff --git a/C4_Deployment.puml b/C4_Deployment.puml index 80f9bf2..4aa7a0f 100644 --- a/C4_Deployment.puml +++ b/C4_Deployment.puml @@ -8,9 +8,9 @@ ' Colors ' ################################## -!global $NODE_FONT_COLOR = "#000000" -!global $NODE_BG_COLOR = "#FFFFFF" -!global $NODE_BORDER_COLOR = "#A2A2A2" +!$NODE_FONT_COLOR ?= "#000000" +!$NODE_BG_COLOR ?= "#FFFFFF" +!$NODE_BORDER_COLOR ?= "#A2A2A2" ' Styling ' ################################## diff --git a/LayoutOptions.md b/LayoutOptions.md index 4297af8..2faf74d 100644 --- a/LayoutOptions.md +++ b/LayoutOptions.md @@ -18,6 +18,7 @@ C4-PlantUML comes with some layout options. - [Using SHOW_PERSON_SPRITE(sprite)](#using-show_person_spritesprite) - [Using SHOW_PERSON_PORTRAIT()](#using-show_person_portrait) - [Using SHOW_PERSON_OUTLINE()](#using-show_person_outline) +- [📄 Themes (WIP), Changeable Styles](#themes-wip-changeable-styles) - samples - [📄 Core Diagrams](samples/C4CoreDiagrams.md#c4-model-diagrams) diff --git a/README.md b/README.md index 12811ff..111d1ad 100644 --- a/README.md +++ b/README.md @@ -41,7 +41,7 @@ C4-PlantUML includes macros, stereotypes, and other goodies (like VSCode Snippet - [Sample with different tag combinations](#sample-with-different-tag-combinations) - [Sample with tag dependent sprites and custom legend text](#sample-with-tag-dependent-sprites-and-custom-legend-text) - [Sample with different boundary tag combinations](#sample-with-different-boundary-tag-combinations) - - [Custom schema definition](#custom-schema-definition) + - [Custom schema definitions (via UpdateElementStyle())](#custom-schema-definitions-via-updateelementstyle) - [Element and Relationship properties](#element-and-relationship-properties) - [Version information](#version-information) - [Snippets for Visual Studio Code](#snippets-for-visual-studio-code) @@ -55,6 +55,7 @@ C4-PlantUML includes macros, stereotypes, and other goodies (like VSCode Snippet - [Background](#background) - [License](#license) - [📄 Layout Options](LayoutOptions.md#layout-options) +- [📄 Themes (WIP), Changeable Styles](Themes.md#themes-wip-changeable-styles) - samples - [📄 Core Diagrams](samples/C4CoreDiagrams.md#c4-model-diagrams) @@ -567,7 +568,7 @@ Multiple tags can be combined with `+`, like `Container(api, "API", $tags="v1.0+ Sometimes an added element tag is element specific and all element specific colors should be used, e.g. a specific user role should be defined as element tag with the specific colors `...PERSON_...` like ```plantuml -AddElementTag("admin", $fontColor=$ELEMENT_FONT_COLOR, $bgColor=$PERSON_BG_COLOR, $borderColor=$PERSON_BORDER_COLOR, $sprite="osa_user_audit", $legendText="administration user") +AddElementTag("admin", $fontColor=$PERSON_FONT_COLOR, $bgColor=$PERSON_BG_COLOR, $borderColor=$PERSON_BORDER_COLOR, $sprite="osa_user_audit", $legendText="administration user") ``` Therefore element Add...Tag() shortcuts are added which use the specific colors as default values and the call can be simplified like @@ -764,14 +765,18 @@ SHOW_LEGEND() ![custom border tags](https://www.plantuml.com/plantuml/png/bLHHRzem47xFhxX5bKYa0ghKfqr8fO3QXm8Lj9hwX9puIAmcTcGxfMZQVvyF4vg6RTgUsllkxlEN--wuCPPfMvT5y4N8jAWvGcvjPRuEXvhj1fcmUPtK1dMgf4Lf1wagXrN19FNqZUM5I8QJw_uZGS_pXs79Z4NjeCr4bPMIr5CHVz23vuepYs1pX0mbQf52ech9cTw3iVi2WKb-I8TcxsZAy192Hu2wqi8WHII32TSRDgq2ZMysO9KA_1ktHzer9QAB99keGkbHcAc2EvgBhQCvGebMEqbOeZH7_GcDdUXeXVtOivg3DY-jezny0urzWnQQnu2zAS4Dz2Af867fAwG4npqG4WhCKFAMuFM1z3zaxt9XiIExGUCWQ9YYn0rj34qOnl0Z-1a4asQCcrDXwYjFcRCUB_6ZmVW63vzLzu3Zrl4OO21n1rxcqMPQjK4RjliAWp7d3SiJow9GOwMCiCgHNa9h61fH_liq23KvusedP3OAhQuRg48OmOfUHFVm-vgGA7OvKZCAxuIzhnDegMZFDRrUeMaoRX1_kOcGA5bcHkqleZ41d6uaqiZu71tHQZQUpcU3aWmFvqo_Sh-9DDEFfIC-O9f6QL5BLXHxm7UBz2sm4pQ7tgOfxe7DcGLXeJO7FxZORb6Zj21PYM0gbc90LS80IfOKQ5erM619VvdatQM7hTB-9eZ7QIB2SoFVhZuPM8WijxzpqMDT5pqQ4-lCI_aZgSRkcH3I9IIiRIMJokQecvYscf3s2PoMudRvl9YELo_mzF8uEnbBOZg6Dgmde4LxmWu4cEPo54wMyyVbOhPuEcEc_pcQr2dtZLqpoDQMNwwlvQlnvYVkPNYxydkJCjdfyNRwBNjW-ysAVZVI93u6gOkCYmxXz91hht_SD7MEeZDOLxQ-NtxVFCpkPejf50StABaxcLy0 "custom border tags") -### Custom schema definition +### Custom schema definitions (via UpdateElementStyle()) -If the custom (color) schema is defined via `UpdateElementStyle()` then the legend of existing elements is updated too. +Via `UpdateElementStyle()` calls is it possible to change the default colors, sprites, legend text, tags,... +It updates automatically the legend too. +If the corresponding section is stored in a separate file then it can be reused as default of all diagrams. ```plantuml @startuml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml +' <<<<< this section could be stored in a separate file and reused in all other diagrams too +' it defines new default colors, different default sprites and legend !$COLOR_A_5 = "#7f3b08" !$COLOR_A_4 = "#b35806" !$COLOR_A_3 = "#e08214" @@ -786,11 +791,12 @@ If the custom (color) schema is defined via `UpdateElementStyle()` then the lege !$COLOR_REL_LINE = "#8073ac" !$COLOR_REL_TEXT = "#8073ac" -UpdateElementStyle("person", $bgColor=$COLOR_A_5, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_A_1, $shadowing="true") -UpdateElementStyle("external_person", $bgColor=$COLOR_B_5, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_B_1) -UpdateElementStyle("system", $bgColor=$COLOR_A_4, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_A_2) -UpdateElementStyle("external_system", $bgColor=$COLOR_B_4, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_B_2) +UpdateElementStyle("person", $bgColor=$COLOR_A_5, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_A_1, $shadowing="true", $legendText="Internal user") +UpdateElementStyle("external_person", $bgColor=$COLOR_B_5, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_B_1, $legendText="External user") +UpdateElementStyle("system", $bgColor=$COLOR_A_4, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_A_2, $sprite="robot", $legendText="Our chatbot based system") +UpdateElementStyle("external_system", $bgColor=$COLOR_B_4, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_B_2, $legendText="External system") UpdateRelStyle($lineColor=$COLOR_REL_LINE, $textColor=$COLOR_REL_TEXT) +' >>>>> end of section Person(customer, "Personal Banking Customer") System(banking_system, "Internet Banking System") @@ -807,7 +813,7 @@ SHOW_LEGEND() @enduml ``` -![custom schema](https://www.plantuml.com/plantuml/png/dL9TRzem57tFhqWp7a0g448eqIIaDYpQAgLGyQ7jBRBZ2qHr76GxQlllvyJPuhRf9Y5UoBddt7lElRuL4d5PvjIwobXAImBsISgp-3eUS_GyEcRoLE9I04yB9e79KLhaupD5hD8CXIGqm-EbFtoieFr3FCwHaC0Lb2mhnOiSdQlkrbLlkOxNc-GkcTaBs_aoFqon6pW6xjSudiu2zyR4fpKERk1DV1FtQln0S70pDV69nW5SRFHPHVlTvYxMjNdrQsjXeo41GO1DNC_07iB4Ct7jAN3dKvIQkCumyxrv49YupkmHr_MD_fieJkBxLTJHJ1TtqQ_TcwArFnCa8QAG0vDR-KgXxvo1Yu8vrtOF7vS5BVYYtRK23-eEBTokek8Nd01_fvceWZWXKZndxBXm92_16NGELjS5pX1DFdKGNk10NQDxd7WL4lBEdFu5ERt_XFfqN7Z1kB0Tjm6gH_Leni1WjGz2zP3AXr5htyF0iXxhTVVJKiWY1tvjEnf1r0uHUr9divTDJLrkM-VeOrrfOYdDFQk2WlohqKIbQ2H9z2BxESfeguc6rRSj6kOx8Zjmb8EYFVpvtz5RnJUSVt2r5o0KJR6I4ALF1lMjaoqm8coe_GXR5erc1TdnfFR_8Uu_r5hQfT0XMbVMziVwPn97twFLj_x0kbLTofp-1W00 "custom schema") +![custom schema](https://www.plantuml.com/plantuml/png/dLJlJ-904FtUlsBicHmcAbXGcijnKRZcpWJ1y2DttvfjTmgDsrsoEututz-MHIs8PsBvGFlUl9StivEzDiGqbONmZdAPYf8ZB8bMvbkpgTdZ-IAdPPcK1dMg9A6ayrGLpPLWijAS6U8YJvg3pjbz1StlXis26K9jeNXGATPqlghSlQ_mlNg0bha1WodbIaAgIi4XGJ2aD7B89J1BhfXcX93b0e593XfBisM504LBrC1pjj2iC41AMVESW6EMIpGWyR5wPwKWI9LGsfpQwYn3RVE_C6QbSqApyHUuGFld7HqFniFn9Bw9Bw47_fTkravQeL_3EniyQL-6hQiwtjxWs0g3YquT3pPunfFmgbt7BnoEs4fgFgDeFflS31tNhNwlN7-huI5dcDJnm6KAMCA3EkuoXQrkcwLrtFLmsGcwOLZ7NSy1RxKwDVz9D8o7jwFeW9aZPz7VsGxfpLUS4KO22vGqfIU13N-5sYZfdy9niXXKXz9xdRK5CoN9mRkZgEgLvgZtD1UMC4l6rMCk5psVT8cLjpl86QwfvzzAGYsPW6fx_PE3gN3jQk9tu_K_4SyUrLwMQFrn5lDa28k34-fyOaA19ToEztoj4aNxyncN6j8b8qj1mWnoS0a-6jMxEVkVo6ctzxrHxQMPe719ZaKkqPdihQXr8klXkBqDFR5tn8_g0PGSLFPy1NdU_URe6sbfI1MeJy5tY8tGP_B1xXSCjfmDCzsaQYIEsGx3Qjos8Rrefi_njvBODjOeM2vUDT6P_QurkbieCyqAj6Ltp-y7lErKQidVf9eRDBRCLiLzbZxKIdUJJ55o0xZ9Ou3KLZF2VB5CbDvhzxzg9tshg3MqJULDVu__nCFeLpJwsJZnhgrBMOX_ "custom schema") ## Element and Relationship properties diff --git a/Themes.md b/Themes.md new file mode 100644 index 0000000..35f831b --- /dev/null +++ b/Themes.md @@ -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 +``` + +![Theme sample](//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") + +## 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" + +``` + diff --git a/percy/TestLegendSprite.puml b/percy/TestLegendSprite.puml index c372fdc..216fa12 100644 --- a/percy/TestLegendSprite.puml +++ b/percy/TestLegendSprite.puml @@ -29,7 +29,7 @@ AddContainerTag("files", $sprite="file_server", $legendText="file server contain AddContainerTag("conApp", $sprite="img:http://plantuml.com/logo3.png{scale=0.3}", $legendSprite="img:http://plantuml.com/logo3.png{scale=0.1}", $legendText="console application") -UpdateElementStyle("external_system", $bgColor=$EXTERNAL_SYSTEM_BG_COLOR, $fontColor=$ELEMENT_FONT_COLOR, $borderColor=$EXTERNAL_SYSTEM_BORDER_COLOR, $sprite = "osa_server", , $legendText="external system") +UpdateElementStyle("external_system", $bgColor=$EXTERNAL_SYSTEM_BG_COLOR, $fontColor=$EXTERNAL_SYSTEM_FONT_COLOR, $borderColor=$EXTERNAL_SYSTEM_BORDER_COLOR, $sprite = "osa_server", , $legendText="external system") AddRelTag("firewall", $textColor="$ARROW_COLOR", $lineColor="$ARROW_COLOR", $sprite="&envelope-closed", $techn="HTTPS", $legendText="firewall") AddRelTag("plantuml", $textColor="$ARROW_COLOR", $lineColor="$ARROW_COLOR", $sprite="img:http://plantuml.com/logo3.png{scale=0.1}", $legendText="console triggered") diff --git a/percy/TestTagSupportsSprite.puml b/percy/TestTagSupportsSprite.puml index fc98a07..b007130 100644 --- a/percy/TestTagSupportsSprite.puml +++ b/percy/TestTagSupportsSprite.puml @@ -33,7 +33,7 @@ AddContainerTag("files", $sprite="file_server", $legendText="file server contain AddContainerTag("conApp", $sprite="img:http://plantuml.com/logo3.png{scale=0.3}", $legendSprite="img:http://plantuml.com/logo3.png{scale=0.1}", $legendText="console application") -UpdateElementStyle("external_system", $bgColor=$EXTERNAL_SYSTEM_BG_COLOR, $fontColor=$ELEMENT_FONT_COLOR, $borderColor=$EXTERNAL_SYSTEM_BORDER_COLOR, $sprite = "osa_server", , $legendText="external system") +UpdateElementStyle("external_system", $bgColor=$EXTERNAL_SYSTEM_BG_COLOR, $fontColor=$EXTERNAL_SYSTEM_FONT_COLOR, $borderColor=$EXTERNAL_SYSTEM_BORDER_COLOR, $sprite = "osa_server", , $legendText="external system") AddRelTag("firewall", $textColor="$ARROW_COLOR", $lineColor="$ARROW_COLOR", $sprite="firewall,scale=0.3,color=red", $legendText="firewall") AddRelTag("plantuml", $textColor="$ARROW_COLOR", $lineColor="$ARROW_COLOR", $sprite="img:http://plantuml.com/logo3.png{scale=0.1}", $legendText="console triggered") diff --git a/percy/TestTagSupportsSpriteTechn.puml b/percy/TestTagSupportsSpriteTechn.puml index 667993d..c5a0b2d 100644 --- a/percy/TestTagSupportsSpriteTechn.puml +++ b/percy/TestTagSupportsSpriteTechn.puml @@ -33,7 +33,7 @@ AddContainerTag("files", $sprite="file_server", $legendText="file server contain AddContainerTag("conApp", $sprite="img:http://plantuml.com/logo3.png{scale=0.3}", $legendSprite="img:http://plantuml.com/logo3.png{scale=0.1}", $legendText="console application") -UpdateElementStyle("external_system", $bgColor=$EXTERNAL_SYSTEM_BG_COLOR, $fontColor=$ELEMENT_FONT_COLOR, $borderColor=$EXTERNAL_SYSTEM_BORDER_COLOR, $sprite = "osa_server", , $legendText="external system") +UpdateElementStyle("external_system", $bgColor=$EXTERNAL_SYSTEM_BG_COLOR, $fontColor=$EXTERNAL_SYSTEM_FONT_COLOR, $borderColor=$EXTERNAL_SYSTEM_BORDER_COLOR, $sprite = "osa_server", , $legendText="external system") AddRelTag("firewall", $textColor="$ARROW_COLOR", $lineColor="$ARROW_COLOR", $techn="HTTPS", $sprite="firewall,scale=0.3,color=red", $legendText="firewall") AddRelTag("plantuml", $textColor="$ARROW_COLOR", $lineColor="$ARROW_COLOR", $techn="HTTPS", $sprite="img:http://plantuml.com/logo3.png{scale=0.1}", $legendText="console triggered") diff --git a/percy/TestThemeSupport.puml b/percy/TestThemeSupport.puml new file mode 100644 index 0000000..22c8cca --- /dev/null +++ b/percy/TestThemeSupport.puml @@ -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 diff --git a/samples/C4CoreDiagrams.md b/samples/C4CoreDiagrams.md index 194b130..d958af2 100644 --- a/samples/C4CoreDiagrams.md +++ b/samples/C4CoreDiagrams.md @@ -4,6 +4,7 @@ The following samples are reproductions with C4-PlantUML from [C4 model core dia - [📄 C4-PlantUML](../README.md#c4-plantuml) - [📄 Layout Options](../LayoutOptions.md#layout-options) +- [📄 Themes (WIP), Changeable Styles](#themes-wip-changeable-styles) - samples - [📄 C4 Model Diagrams](#c4-model-diagrams) - [Core Diagrams](#core-diagrams) diff --git a/themes/puml-theme-C4_FirstTest.puml b/themes/puml-theme-C4_FirstTest.puml new file mode 100644 index 0000000..4cb28e7 --- /dev/null +++ b/themes/puml-theme-C4_FirstTest.puml @@ -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 \ No newline at end of file