diff --git a/C4.puml b/C4.puml index 2ec68f0..f1303c3 100644 --- a/C4.puml +++ b/C4.puml @@ -4,7 +4,7 @@ ' ################################## !function C4Version() ' 2 spaces and ' are used as unique marker, that the release scripts makes the correct version update - !$c4Version = "2.6.0beta1" + !$c4Version = "2.6.0beta2" !return $c4Version !end function @@ -17,16 +17,19 @@ rectangle C4VersionDetailsArea <> [ ' Colors ' ################################## - !$ELEMENT_FONT_COLOR ?= "#FFFFFF" !$ARROW_COLOR ?= "#666666" +!$ARROW_FONT_COLOR ?= $ARROW_COLOR !$BOUNDARY_COLOR ?= "#444444" !$BOUNDARY_BG_COLOR ?= "transparent" +!$BOUNDARY_BORDER_STYLE ?= "dashed" -!$LEGEND_FONT_COLOR ?= "#FFFFFF" !$LEGEND_TITLE_COLOR ?= "#000000" +!$LEGEND_FONT_COLOR ?= "#FFFFFF" +!$LEGEND_BG_COLOR ?= "transparent" +!$LEGEND_BORDER_COLOR ?= "transparent" ' %darken(darkkhaki,50), #khaki !$LEGEND_DARK_COLOR ?= "#66622E" !$LEGEND_LIGHT_COLOR ?= "#khaki" @@ -91,55 +94,48 @@ skinparam defaultTextAlignment center skinparam wrapWidth 200 skinparam maxMessageSize 150 -skinparam LegendBorderColor transparent -skinparam LegendBackgroundColor transparent skinparam LegendFontColor $LEGEND_FONT_COLOR +skinparam LegendBackgroundColor $LEGEND_BG_COLOR +skinparam LegendBorderColor $LEGEND_BORDER_COLOR -skinparam shadowing<> false skinparam rectangle<> { - backgroundcolor transparent - bordercolor transparent + backgroundcolor $LEGEND_BG_COLOR + bordercolor $LEGEND_BORDER_COLOR } skinparam rectangle { StereotypeFontSize $STEREOTYPE_FONT_SIZE - shadowing false } skinparam database { StereotypeFontSize $STEREOTYPE_FONT_SIZE - shadowing false } skinparam queue { StereotypeFontSize $STEREOTYPE_FONT_SIZE - shadowing false } skinparam arrow { Color $ARROW_COLOR - FontColor $ARROW_COLOR + FontColor $ARROW_FONT_COLOR FontSize $ARROW_FONT_SIZE } skinparam person { StereotypeFontSize $STEREOTYPE_FONT_SIZE - shadowing false } skinparam actor { StereotypeFontSize $STEREOTYPE_FONT_SIZE - shadowing false style awesome } ' Some boundary skinparams have to be set as package skinparams too (PlantUML uses internal packages) ' UpdateBoundaryStyle() called in boundary section below skinparam rectangle<> { - Shadowing false StereotypeFontSize $TRANSPARENT_STEREOTYPE_FONT_SIZE StereotypeFontColor $BOUNDARY_BG_COLOR - BorderStyle dashed + BorderStyle $BOUNDARY_BORDER_STYLE } skinparam package { @@ -623,7 +619,7 @@ $elementSkin !if ($tc == "") !if ($PlantUMLSupportsDynamicLegendColor) - !$tc = $flatLegend($ARROW_COLOR) + !$tc = $flatLegend($ARROW_FONT_COLOR) !else !$tc = $LEGEND_DARK_COLOR !endif @@ -1044,8 +1040,7 @@ hide stereotype !procedure $getLegendTable($detailsFormat) !global $LEGEND_DETAILS_SIZE = $getLegendDetailsSize($detailsFormat) -' #00000000 is transparent, but transparent is not working -<#00000000,#00000000>|**Legend** | +<$colorWithHash(transparent),$colorWithHash(transparent)>|**Legend** | $showActiveLegendEntries($tagDefaultLegend) $showActiveLegendEntries($tagCustomLegend) !endprocedure @@ -1093,9 +1088,10 @@ hide stereotype } !if $ARROW_COLOR == "#666666" !global $ARROW_COLOR = $SKETCH_FONT_COLOR + !global $ARROW_FONT_COLOR = $SKETCH_FONT_COLOR skinparam arrow { Color $ARROW_COLOR - FontColor $ARROW_COLOR + FontColor $ARROW_FONT_COLOR } !endif !if $BOUNDARY_COLOR == "#444444" diff --git a/LayoutOptions.md b/LayoutOptions.md index 2faf74d..3b657e3 100644 --- a/LayoutOptions.md +++ b/LayoutOptions.md @@ -18,7 +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) +- [📄 Themes](Themes.md#themes) - samples - [📄 Core Diagrams](samples/C4CoreDiagrams.md#c4-model-diagrams) @@ -208,9 +208,9 @@ Legend labels and details can be defined via `\n` in `$legendTest` arguments too ' $legendText with \n defines the label and details of the legend entry ("backend container" is label, "eight sided shape" is details) AddElementTag("backendContainer", $fontColor=$ELEMENT_FONT_COLOR, $bgColor="#335DA5", $shape=EightSidedShape(), $legendText="backend container\neight sided shape") ' $legendText without \n defines only a label -AddRelTag("async", $textColor=$ARROW_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DashedLine(), $legendText="async call") +AddRelTag("async", $textColor=$ARROW_FONT_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DashedLine(), $legendText="async call") ' if no $legendText defined, $tag is automatically the label and all additional displayed properties are the details -AddRelTag("sync/async", $textColor=$ARROW_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DottedLine()) +AddRelTag("sync/async", $textColor=$ARROW_FONT_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DottedLine()) System_Boundary(c1, "Internet Banking") { Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device") @@ -240,9 +240,9 @@ Legend details can be deactivated via `SHOW_LEGEND($details=None())` ' $legendText with \n defines the label and details of the legend entry ("backend container" is label, "eight sided shape" is details) AddElementTag("backendContainer", $fontColor=$ELEMENT_FONT_COLOR, $bgColor="#335DA5", $shape=EightSidedShape(), $legendText="backend container\neight sided shape") ' $legendText without \n defines only a label -AddRelTag("async", $textColor=$ARROW_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DashedLine(), $legendText="async call") +AddRelTag("async", $textColor=$ARROW_FONT_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DashedLine(), $legendText="async call") ' if no $legendText defined, $tag is automatically the label and all additional displayed properties are the details -AddRelTag("sync/async", $textColor=$ARROW_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DottedLine()) +AddRelTag("sync/async", $textColor=$ARROW_FONT_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DottedLine()) System_Boundary(c1, "Internet Banking") { Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device") @@ -347,7 +347,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") Additional styles and the footer text can be changed with SET_SKETCH_STYLE(): - `SET_SKETCH_STYLE(?bgColor, ?fontColor, ?warningColor, ?fontName, ?footerWarning, ?footerText)`: - Enables the modification of differnt sketch styles and footer. + Enables the modification of different sketch styles and footer. The possible font name(s) depend on the output format (e.g. PNG uses fonts which are installed on the server and SVG fonts have to be installed on the client). Additional is it possible to define comma separated fall back fonts (if the diagrams are exported as SVG. Atm diff --git a/README.md b/README.md index 111d1ad..d23eb55 100644 --- a/README.md +++ b/README.md @@ -55,7 +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) +- [📄 Themes](Themes.md#themes) - samples - [📄 Core Diagrams](samples/C4CoreDiagrams.md#c4-model-diagrams) @@ -374,7 +374,7 @@ Rel_L(x, s4, "uses") ![Relationship versus Layout](https://www.plantuml.com/plantuml/png/LSt1QeD04CRnkq-HvgJGA55FFQLLeGLBHIEq9rbrQ8HrbTrPshnzPmn5Svl_3_RRaq6XqOxIUHXK9sqFkmlYR9w2G8iV_tl0Yssj0TrD2a6XtqrZC4kX-Ct1O2-7DaZYGy5Kl-V1A0o29ceIUY461TgVUV_rBSsQwfoLsSVvgyXSpt4Aq6PIhdZSxP_ttd-sb2zhTfJ9cZrbkYPGPfHEBgvDpLEjjzmbtztjJldkRtVEDwoV_zB09mrKLuCmkkP8NHqt43A46uWOeWt43361Ku9iQfvSPgm1GyfOBXZUOxfWT8_vWl6A9r2z7UKV "Relationship versus Layout") -(In combination with [SHOW_FLOATING_LEGEND()](LayoutOptions.md#show_floating_legend)) a greater distance between an element and the +(In combination with [SHOW_FLOATING_LEGEND()](LayoutOptions.md#show_floating_legendalias-hidestereotype-details-and-legend)) a greater distance between an element and the e.g. floating legend could be required that all e.g. corners of the drawing area can be reached. - `Lay_Distance(from, to, ?distance)`: Sets the distance between `from` and `to` with down alignment (Lay_Distance(from,to,0) equals Lay_D(from, to)). The default alias of the floating legend is LEGEND(). @@ -468,7 +468,7 @@ Color of the displayed images can be changed with `,color={color}`. !include -AddRelTag("plantuml", $textColor="$ARROW_COLOR", $lineColor="$ARROW_COLOR", $sprite="img:http://plantuml.com/logo3.png{scale=0.3}", $legendSprite="img:http://plantuml.com/logo3.png{scale=0.1}", $legendText="console triggered") +AddRelTag("plantuml", $textColor="$ARROW_FONT_COLOR", $lineColor="$ARROW_COLOR", $sprite="img:http://plantuml.com/logo3.png{scale=0.3}", $legendSprite="img:http://plantuml.com/logo3.png{scale=0.1}", $legendText="console triggered") Person(user, "user group displayed with a sprite", $sprite="users") @@ -682,7 +682,7 @@ AddContainerTag("db", $sprite="database_server", $legendText="database container AddContainerTag("files", $sprite="file_server", $legendText="file server container") AddContainerTag("conApp", $sprite="service_application", $legendText="console app container") -AddRelTag("firewall", $textColor="$ARROW_COLOR", $lineColor="$ARROW_COLOR", $sprite="firewall,scale=0.3,color=red", $legendText="firewall") +AddRelTag("firewall", $textColor="$ARROW_FONT_COLOR", $lineColor="$ARROW_COLOR", $sprite="firewall,scale=0.3,color=red", $legendText="firewall") Person_Ext(anonymous_user, "Bob", $tags="anonymous_ext") Person(aggregated_user, "Sam, Ivone", $tags="customer") @@ -767,8 +767,8 @@ SHOW_LEGEND() ### Custom schema definitions (via UpdateElementStyle()) -Via `UpdateElementStyle()` calls is it possible to change the default colors, sprites, legend text, tags,... -It updates automatically the legend too. +Via `UpdateElementStyle()` calls, it is possible to change the default colors, sprites, legend text, tags, ... +It automatically updates the legend too. If the corresponding section is stored in a separate file then it can be reused as default of all diagrams. ```plantuml diff --git a/Themes.md b/Themes.md index 74c1c32..3e7d2b9 100644 --- a/Themes.md +++ b/Themes.md @@ -1,11 +1,11 @@ -# Themes (WIP), Changeable Styles +# Themes 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) +- [📄 Layout Options](LayoutOptions.md#layout-options) +- [📄 Themes](#themes) - [Overall Guidance](#overall-guidance) - [List of available C4-themes](#list-of-available-c4-themes) - [How to write custom theme](#how-to-write-custom-theme) @@ -63,68 +63,84 @@ The sample theme C4_FirstTest [puml-theme-C4_FirstTest.puml](themes/puml-theme-C ``` 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" +!$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 ``` diff --git a/percy/C4_Container Diagram Sample - bigbankplc-styles.puml b/percy/C4_Container Diagram Sample - bigbankplc-styles.puml index 59eb03c..f439fa7 100644 --- a/percy/C4_Container Diagram Sample - bigbankplc-styles.puml +++ b/percy/C4_Container Diagram Sample - bigbankplc-styles.puml @@ -10,8 +10,8 @@ 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 (eight sided)") -AddRelTag("async", $textColor=$ARROW_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DashedLine()) -AddRelTag("sync/async", $textColor=$ARROW_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DottedLine()) +AddRelTag("async", $textColor=$ARROW_FONT_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DashedLine()) +AddRelTag("sync/async", $textColor=$ARROW_FONT_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DottedLine()) title Container diagram for Internet Banking System diff --git a/percy/TestAllElementsWithLegend.puml b/percy/TestAllElementsWithLegend.puml new file mode 100644 index 0000000..3cc045d --- /dev/null +++ b/percy/TestAllElementsWithLegend.puml @@ -0,0 +1,82 @@ +@startuml + +' displays all elements, relationship and legend (can be included in the theme test) +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Component.puml + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Deployment.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml +!endif + +SetDefaultLegendEntries("person\nsystem\ncontainer\ncomponent\nexternal_person\nexternal_system\nexternal_container\nexternal_component\nnode\nenterprise_boundary\nsystem_boundary\ncontainer_boundary\nboundary") + +title Overview of all elements, relationship and legend + +footer theme $THEME drawn with PlantUML v. %version() and C4-PlantUML v. C4Version() + +Boundary(b2, "Boundary 2") { + System(system, "System", "Optional Description") + System_Ext(externalSystem, "External System", "Optional Description") + Rel_R(system, externalSystem, "uses") + + SystemDb(systemDb, "SystemDb", "Optional Description") + SystemDb_Ext(externalSystemDb, "External SystemDb", "Optional Description") + SystemQueue(systemQueue, "SystemQueue", "Optional Description") + SystemQueue_Ext(externalSystemQueue, "External SystemQueue", "Optional Description") +} + +Boundary(b1, "Boundary 1") { + Person(person, "Person", "Optional Description") + Person_Ext(externalPerson, "External Person", "Optional Description") + Rel_R(person, externalPerson, "uses") +} + +Boundary(b3, "Boundary 3") { + Container(container, "Container", "Technology", "Optional Description") + Container_Ext(externalContainer, "External Container", "Technology", "Optional Description") + Rel_R(container, externalContainer, "uses") + + ContainerDb(containerDb, "ContainerDb", "Technology", "Optional Description") + ContainerDb_Ext(externalContainerDb, "External ContainerDb", "Technology", "Optional Description") + ContainerQueue(containerQueue, "ContainerQueue", "Technology", "Optional Description") + ContainerQueue_Ext(externalContainerQueue, "External ContainerQueue", "Technology", "Optional Description") +} + +Boundary(b4, "Boundary 4") { + Component(component, "Component", "Technology", "Optional Description") + Component_Ext(externalComponent, "External Component", "Technology", "Optional Description") + Rel_R(component, externalComponent, "uses") + + ComponentDb(componentDb, "ComponentDb", "Technology", "Optional Description") + ComponentDb_Ext(externalComponentDb, "External ComponentDb", "Technology", "Optional Description") + ComponentQueue(componentQueue, "ComponentQueue", "Technology", "Optional Description") + ComponentQueue_Ext(externalComponentQueue, "External ComponentQueue", "Technology", "Optional Description") +} + +Boundary(b5, "Boundary 5") { + Node(node, "Node", "Type", "Optional Description") +} + +Boundary(b6, "Boundary 6") { + Enterprise_Boundary(eb, "Enterprise Boundary") { + } + + System_Boundary(sb, "System Boundary") { + } + + Container_Boundary(cb, "System Boundary") { + } + + Lay_R(eb,sb) + Lay_R(sb,cb) +} + +Lay_D(b2,b3) +Lay_R(b2,b1) +Lay_D(b3,b4) +Lay_D(b4,b5) +Lay_R(b5,b6) + +SHOW_FLOATING_LEGEND($hideStereotype = false) +@enduml diff --git a/percy/TestLegendDetailsNone.puml b/percy/TestLegendDetailsNone.puml index f59d0d6..cc0cf7f 100644 --- a/percy/TestLegendDetailsNone.puml +++ b/percy/TestLegendDetailsNone.puml @@ -8,9 +8,9 @@ ' $legendText with \n defines the label and details of the legend entry ("backend container" is label, "eight sided shape" is details) AddElementTag("backendContainer", $fontColor=$ELEMENT_FONT_COLOR, $bgColor="#335DA5", $shape=EightSidedShape(), $legendText="backend container\neight sided shape") ' $legendText without \n defines only a label -AddRelTag("async", $textColor=$ARROW_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DashedLine(), $legendText="async call") +AddRelTag("async", $textColor=$ARROW_FONT_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DashedLine(), $legendText="async call") ' if no $legendText defined, $tag is automatically the label and all additional displayed properties are the details -AddRelTag("sync/async", $textColor=$ARROW_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DottedLine()) +AddRelTag("sync/async", $textColor=$ARROW_FONT_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DottedLine()) System_Boundary(c1, "Internet Banking") { Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device") diff --git a/percy/TestLegendDetailsNormal.puml b/percy/TestLegendDetailsNormal.puml index 48f479f..59f399c 100644 --- a/percy/TestLegendDetailsNormal.puml +++ b/percy/TestLegendDetailsNormal.puml @@ -8,9 +8,9 @@ ' $legendText with \n defines the label and details of the legend entry ("backend container" is label, "eight sided shape" is details) AddElementTag("backendContainer", $fontColor=$ELEMENT_FONT_COLOR, $bgColor="#335DA5", $shape=EightSidedShape(), $legendText="backend container\neight sided shape") ' $legendText without \n defines only a label -AddRelTag("async", $textColor=$ARROW_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DashedLine(), $legendText="async call") +AddRelTag("async", $textColor=$ARROW_FONT_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DashedLine(), $legendText="async call") ' if no $legendText defined, $tag is automatically the label and all additional displayed properties are the details -AddRelTag("sync/async", $textColor=$ARROW_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DottedLine()) +AddRelTag("sync/async", $textColor=$ARROW_FONT_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DottedLine()) System_Boundary(c1, "Internet Banking") { Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device") diff --git a/percy/TestLegendDetailsSmall.puml b/percy/TestLegendDetailsSmall.puml index e034874..d4f8e95 100644 --- a/percy/TestLegendDetailsSmall.puml +++ b/percy/TestLegendDetailsSmall.puml @@ -8,9 +8,9 @@ ' $legendText with \n defines the label and details of the legend entry ("backend container" is label, "eight sided shape" is details) AddElementTag("backendContainer", $fontColor=$ELEMENT_FONT_COLOR, $bgColor="#335DA5", $shape=EightSidedShape(), $legendText="backend container\neight sided shape") ' $legendText without \n defines only a label -AddRelTag("async", $textColor=$ARROW_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DashedLine(), $legendText="async call") +AddRelTag("async", $textColor=$ARROW_FONT_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DashedLine(), $legendText="async call") ' if no $legendText defined, $tag is automatically the label and all additional displayed properties are the details -AddRelTag("sync/async", $textColor=$ARROW_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DottedLine()) +AddRelTag("sync/async", $textColor=$ARROW_FONT_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DottedLine()) System_Boundary(c1, "Internet Banking") { Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device") diff --git a/percy/TestLegendSprite.puml b/percy/TestLegendSprite.puml index 216fa12..1917d27 100644 --- a/percy/TestLegendSprite.puml +++ b/percy/TestLegendSprite.puml @@ -31,8 +31,8 @@ AddContainerTag("conApp", $sprite="img:http://plantuml.com/logo3.png{scale=0.3}" 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") +AddRelTag("firewall", $textColor="$ARROW_FONT_COLOR", $lineColor="$ARROW_COLOR", $sprite="&envelope-closed", $techn="HTTPS", $legendText="firewall") +AddRelTag("plantuml", $textColor="$ARROW_FONT_COLOR", $lineColor="$ARROW_COLOR", $sprite="img:http://plantuml.com/logo3.png{scale=0.1}", $legendText="console triggered") Person_Ext(anonymous_user, "Bob", $tags="anonymous_ext") Person(aggregated_user, "Sam, Ivone", $tags="customer") diff --git a/percy/TestTagSupportsSprite.puml b/percy/TestTagSupportsSprite.puml index b007130..867654b 100644 --- a/percy/TestTagSupportsSprite.puml +++ b/percy/TestTagSupportsSprite.puml @@ -35,8 +35,8 @@ AddContainerTag("conApp", $sprite="img:http://plantuml.com/logo3.png{scale=0.3}" 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") +AddRelTag("firewall", $textColor="$ARROW_FONT_COLOR", $lineColor="$ARROW_COLOR", $sprite="firewall,scale=0.3,color=red", $legendText="firewall") +AddRelTag("plantuml", $textColor="$ARROW_FONT_COLOR", $lineColor="$ARROW_COLOR", $sprite="img:http://plantuml.com/logo3.png{scale=0.1}", $legendText="console triggered") LAYOUT_LEFT_RIGHT() ' LAYOUT_LANDSCAPE() diff --git a/percy/TestTagSupportsSpriteTechn.puml b/percy/TestTagSupportsSpriteTechn.puml index c5a0b2d..8bc2ff1 100644 --- a/percy/TestTagSupportsSpriteTechn.puml +++ b/percy/TestTagSupportsSpriteTechn.puml @@ -35,8 +35,8 @@ AddContainerTag("conApp", $sprite="img:http://plantuml.com/logo3.png{scale=0.3}" 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") +AddRelTag("firewall", $textColor="$ARROW_FONT_COLOR", $lineColor="$ARROW_COLOR", $techn="HTTPS", $sprite="firewall,scale=0.3,color=red", $legendText="firewall") +AddRelTag("plantuml", $textColor="$ARROW_FONT_COLOR", $lineColor="$ARROW_COLOR", $techn="HTTPS", $sprite="img:http://plantuml.com/logo3.png{scale=0.1}", $legendText="console triggered") LAYOUT_LEFT_RIGHT() ' LAYOUT_LANDSCAPE() diff --git a/percy/TestThemeC4_All.puml b/percy/TestThemeC4_All.puml new file mode 100644 index 0000000..f39268e --- /dev/null +++ b/percy/TestThemeC4_All.puml @@ -0,0 +1,59 @@ +@startuml + +!$UseTheme=C4_blue + +!if %variable_exists("RELATIVE_INCLUDE") + !include ./TestThemeTemplate.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/percy/TestThemeTemplate.puml +!endif + +@enduml + +@startuml + +!$UseTheme=C4_violet + +!if %variable_exists("RELATIVE_INCLUDE") + !include ./TestThemeTemplate.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/percy/TestThemeTemplate.puml +!endif + +@enduml + +@startuml + +!$UseTheme=C4_green + +!if %variable_exists("RELATIVE_INCLUDE") + !include ./TestThemeTemplate.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/percy/TestThemeTemplate.puml +!endif + +@enduml + +@startuml + +!$UseTheme=C4_brown + +!if %variable_exists("RELATIVE_INCLUDE") + !include ./TestThemeTemplate.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/percy/TestThemeTemplate.puml +!endif + +@enduml + +@startuml + +!$UseTheme=C4_united + +!if %variable_exists("RELATIVE_INCLUDE") + !include ./TestThemeTemplate.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/percy/TestThemeTemplate.puml +!endif + +@enduml diff --git a/percy/TestThemeC4_FirstTest.puml b/percy/TestThemeC4_FirstTest.puml new file mode 100644 index 0000000..5ad4e34 --- /dev/null +++ b/percy/TestThemeC4_FirstTest.puml @@ -0,0 +1,11 @@ +@startuml + +!$UseTheme=C4_FirstTest + +!if %variable_exists("RELATIVE_INCLUDE") + !include ./TestThemeTemplate.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/percy/TestThemeTemplate.puml +!endif + +@enduml diff --git a/percy/TestThemeSupport.puml b/percy/TestThemeSupport.puml index 22c8cca..0ec8f50 100644 --- a/percy/TestThemeSupport.puml +++ b/percy/TestThemeSupport.puml @@ -1,48 +1,19 @@ @startuml +!$ThemeToBeCHecked=C4_FirstTest + ' 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 + !theme $ThemeToBeCHecked from ./../themes !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 + !theme $ThemeToBeCHecked from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes !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) +!if %variable_exists("RELATIVE_INCLUDE") + !include ./TestAllElementsWithLegend.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/percy/TestAllElementsWithLegend.puml +!endif -SHOW_LEGEND() @enduml diff --git a/percy/TestThemeTemplate.puml b/percy/TestThemeTemplate.puml new file mode 100644 index 0000000..70a6905 --- /dev/null +++ b/percy/TestThemeTemplate.puml @@ -0,0 +1,29 @@ +@startuml + +' please defined $ThemeToBeChecked before the file is included (sample see TestThemeC4_FirstTest.puml) +' [At]startuml +' !$UseTheme=C4_FirstTest +' !if %variable_exists("RELATIVE_INCLUDE") +' !include ./TestThemeTemplate.puml +' !else +' !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/percy/TestThemeTemplate.puml +' !endif +' [At]enduml + +!$UseTheme?="C4_FirstTest" + +' 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 ./TestAllElementsWithLegend.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/percy/TestAllElementsWithLegend.puml +!endif + +@enduml diff --git a/samples/C4CoreDiagrams.md b/samples/C4CoreDiagrams.md index d958af2..a675aa8 100644 --- a/samples/C4CoreDiagrams.md +++ b/samples/C4CoreDiagrams.md @@ -4,7 +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) +- [📄 Themes](../Themes.md#themes) - samples - [📄 C4 Model Diagrams](#c4-model-diagrams) - [Core Diagrams](#core-diagrams) diff --git a/samples/C4_Container Diagram Sample - bigbankplc-styles.puml b/samples/C4_Container Diagram Sample - bigbankplc-styles.puml index 2b1d523..e9960d6 100644 --- a/samples/C4_Container Diagram Sample - bigbankplc-styles.puml +++ b/samples/C4_Container Diagram Sample - bigbankplc-styles.puml @@ -3,8 +3,8 @@ SHOW_PERSON_OUTLINE() 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()) +AddRelTag("async", $textColor=$ARROW_FONT_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DashedLine()) +AddRelTag("sync/async", $textColor=$ARROW_FONT_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DottedLine()) title Container diagram for Internet Banking System diff --git a/themes/puml-theme-C4_FirstTest.puml b/themes/puml-theme-C4_FirstTest.puml index 4cb28e7..710dddd 100644 --- a/themes/puml-theme-C4_FirstTest.puml +++ b/themes/puml-theme-C4_FirstTest.puml @@ -2,9 +2,12 @@ !theme cyborg +!$THEME = "C4_FirstTest" + !$ELEMENT_FONT_COLOR = $PRIMARY_TEXT !$ARROW_COLOR = $PRIMARY_LIGHT +!$ARROW_FONT_COLOR ?= $ARROW_COLOR !$BOUNDARY_COLOR ?= $PRIMARY_DARK !$BOUNDARY_BG_COLOR ?= "transparent" diff --git a/themes/puml-theme-C4_blue.puml b/themes/puml-theme-C4_blue.puml new file mode 100644 index 0000000..9d9c0c1 --- /dev/null +++ b/themes/puml-theme-C4_blue.puml @@ -0,0 +1,79 @@ +!$THEME = "C4_Original" + +!$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_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_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 diff --git a/themes/puml-theme-C4_brown.puml b/themes/puml-theme-C4_brown.puml new file mode 100644 index 0000000..f94d288 --- /dev/null +++ b/themes/puml-theme-C4_brown.puml @@ -0,0 +1,79 @@ +!$THEME = "C4_Original4" + +!$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_BG_COLOR ?= "#7B4208" +!$PERSON_BORDER_COLOR ?= "#6F3B07" +!$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 ?= "#BD6811" +!$SYSTEM_BORDER_COLOR ?= "#C07F3C" +!$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 ?= "#D58D43" +!$CONTAINER_BORDER_COLOR ?= "#C07F3C" +!$EXTERNAL_CONTAINER_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$EXTERNAL_CONTAINER_BG_COLOR ?= "#B3B3B3" +!$EXTERNAL_CONTAINER_BORDER_COLOR ?= "#A6A6A6" + +!$COMPONENT_FONT_COLOR ?= "#000000" +!$COMPONENT_BG_COLOR ?= "#F0BB85" +!$COMPONENT_BORDER_COLOR ?= "#D8A878" +!$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_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 diff --git a/themes/puml-theme-C4_green.puml b/themes/puml-theme-C4_green.puml new file mode 100644 index 0000000..568c0ac --- /dev/null +++ b/themes/puml-theme-C4_green.puml @@ -0,0 +1,79 @@ +!$THEME = "C4_Original" + +!$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_BG_COLOR ?= "#427B08" +!$PERSON_BORDER_COLOR ?= "#3B6F07" +!$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 ?= "#68BD11" +!$SYSTEM_BORDER_COLOR ?= "#7FC03C" +!$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 ?= "#8DD543" +!$CONTAINER_BORDER_COLOR ?= "#7FC03C" +!$EXTERNAL_CONTAINER_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$EXTERNAL_CONTAINER_BG_COLOR ?= "#B3B3B3" +!$EXTERNAL_CONTAINER_BORDER_COLOR ?= "#A6A6A6" + +!$COMPONENT_FONT_COLOR ?= "#000000" +!$COMPONENT_BG_COLOR ?= "#BBF085" +!$COMPONENT_BORDER_COLOR ?= "#A8D878" +!$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_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 diff --git a/themes/puml-theme-C4_united.puml b/themes/puml-theme-C4_united.puml new file mode 100644 index 0000000..9cd50d8 --- /dev/null +++ b/themes/puml-theme-C4_united.puml @@ -0,0 +1,56 @@ +!theme united + +!$THEME = "C4_United" + +!$ELEMENT_FONT_COLOR = $PRIMARY_TEXT + +!$ARROW_COLOR = $PRIMARY_LIGHT +!$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_BG_COLOR = $INFO +!$PERSON_BORDER_COLOR = $INFO_DARK + +!$EXTERNAL_PERSON_FONT_COLOR ?= $INFO_DARK +!$EXTERNAL_PERSON_BG_COLOR ?= $LIGHT +!$EXTERNAL_PERSON_BORDER_COLOR ?= $INFO_DARK + +!$SYSTEM_FONT_COLOR ?= $WHITE +!$SYSTEM_BG_COLOR ?= $DARK +!$SYSTEM_BORDER_COLOR ?= $DARK_DARK + +!$EXTERNAL_SYSTEM_FONT_COLOR ?= $DARK_DARK +!$EXTERNAL_SYSTEM_BG_COLOR ?= $LIGHT +!$EXTERNAL_SYSTEM_BORDER_COLOR ?= $DARK_DARK + +!$CONTAINER_FONT_COLOR ?= $WARNING_TEXT +!$CONTAINER_BG_COLOR ?= $WARNING +!$CONTAINER_BORDER_COLOR ?= $WARNING_DARK + +!$EXTERNAL_CONTAINER_FONT_COLOR ?= $WARNING_DARK +!$EXTERNAL_CONTAINER_BG_COLOR ?= $LIGHT +!$EXTERNAL_CONTAINER_BORDER_COLOR ?= $WARNING_DARK + +!$COMPONENT_FONT_COLOR ?= $PRIMARY_TEXT +!$COMPONENT_BG_COLOR ?= $PRIMARY +!$COMPONENT_BORDER_COLOR ?= $PRIMARY_DARK + +!$EXTERNAL_COMPONENT_FONT_COLOR ?= $PRIMARY_DARK +!$EXTERNAL_COMPONENT_BG_COLOR ?= $LIGHT +!$EXTERNAL_COMPONENT_BORDER_COLOR ?= $PRIMARY_DARK + +!$NODE_FONT_COLOR ?= $LIGHT +!$NODE_BG_COLOR ?= $SECONDARY +!$NODE_BORDER_COLOR ?= $SECONDARY_DARK \ No newline at end of file diff --git a/themes/puml-theme-C4_violet.puml b/themes/puml-theme-C4_violet.puml new file mode 100644 index 0000000..a563179 --- /dev/null +++ b/themes/puml-theme-C4_violet.puml @@ -0,0 +1,79 @@ +!$THEME = "C4_Original" + +!$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_BG_COLOR ?= "#42087B" +!$PERSON_BORDER_COLOR ?= "#3B076F" +!$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 ?= "#6811BD" +!$SYSTEM_BORDER_COLOR ?= "#7F3CC0" +!$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 ?= "#8D43D5" +!$CONTAINER_BORDER_COLOR ?= "#7F3CC0" +!$EXTERNAL_CONTAINER_FONT_COLOR ?= $ELEMENT_FONT_COLOR +!$EXTERNAL_CONTAINER_BG_COLOR ?= "#B3B3B3" +!$EXTERNAL_CONTAINER_BORDER_COLOR ?= "#A6A6A6" + +!$COMPONENT_FONT_COLOR ?= "#000000" +!$COMPONENT_BG_COLOR ?= "#BB85F0" +!$COMPONENT_BORDER_COLOR ?= "#A878D8" +!$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_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