From 933c6799e46f69039e78dfeda0d4ee516161b229 Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Sun, 26 Mar 2023 01:01:48 +0100 Subject: [PATCH] #245,#291 Themes can be defined/used (3a - update themes, fix PR findings) --- C4.puml | 2 +- C4_Container.puml | 8 ++- C4_Context.puml | 16 +++-- Themes.md | 90 ++++++++++++++++++++-------- percy/TestAllElementsWithLegend.puml | 4 +- percy/TestThemeC4_All.puml | 49 +++++++++++++++ percy/TestThemeC4_united.puml | 31 ++++++++++ themes/puml-theme-C4_FirstTest.puml | 2 +- themes/puml-theme-C4_blue.puml | 49 +-------------- themes/puml-theme-C4_brown.puml | 49 +-------------- themes/puml-theme-C4_green.puml | 49 +-------------- themes/puml-theme-C4_united.puml | 31 +++++----- themes/puml-theme-C4_violet.puml | 49 +-------------- 13 files changed, 187 insertions(+), 242 deletions(-) create mode 100644 percy/TestThemeC4_united.puml diff --git a/C4.puml b/C4.puml index f1303c3..86390d0 100644 --- a/C4.puml +++ b/C4.puml @@ -584,7 +584,7 @@ $elementSkin !$tagDetails = $tagDetails + $LEGEND_NO_BG_TEXT + ", " !endif !endif - !if ($tagDetails=="(") + !if ($tagDetails=="(" || $tagDetails=="(, ") !$tagDetails = "" !else !$tagDetails = %substr($tagDetails, 0, %strlen($tagDetails)-2) diff --git a/C4_Container.puml b/C4_Container.puml index 1cc0bc2..ebfebe1 100644 --- a/C4_Container.puml +++ b/C4_Container.puml @@ -17,6 +17,10 @@ !$CONTAINER_BG_COLOR ?= "#438DD5" !$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_BG_COLOR ?= "#B3B3B3" !$EXTERNAL_CONTAINER_BORDER_COLOR ?= "#A6A6A6" @@ -26,7 +30,7 @@ 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") +UpdateBoundaryStyle("container", $bgColor=$CONTAINER_BOUNDARY_BG_COLOR, $fontColor=$CONTAINER_BOUNDARY_COLOR, $borderColor=$CONTAINER_BOUNDARY_COLOR, $type="Container") ' shortcuts with default colors !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) !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) !endprocedure diff --git a/C4_Context.puml b/C4_Context.puml index f6b80bb..cfc8213 100644 --- a/C4_Context.puml +++ b/C4_Context.puml @@ -25,10 +25,18 @@ !$SYSTEM_BG_COLOR ?= "#1168BD" !$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_BG_COLOR ?= "#999999" !$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 ' ################################## @@ -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("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") +UpdateBoundaryStyle("system", $bgColor=$SYSTEM_BOUNDARY_BG_COLOR, $fontColor=$SYSTEM_BOUNDARY_COLOR, $borderColor=$SYSTEM_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 !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) !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) !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) !endprocedure diff --git a/Themes.md b/Themes.md index 3e7d2b9..fe84502 100644 --- a/Themes.md +++ b/Themes.md @@ -1,57 +1,95 @@ # Themes -WIP: C4-PlantUML offers no finished themes (atm). -It is possible to define/use custom themes. +Similar to PlantUML themes supports C4-PlantUML `C4_...` specific themes (based on existing PlantUML 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) - [📄 Layout Options](LayoutOptions.md#layout-options) - [📄 Themes](#themes) - - [Overall Guidance](#overall-guidance) + - [Use theme](#use-theme) - [List of available C4-themes](#list-of-available-c4-themes) - [How to write custom theme](#how-to-write-custom-theme) - [Following variables could be set in theme definitions too](#following-variables-could-be-set-in-theme-definitions-too) - samples - [📄 Core Diagrams](samples/C4CoreDiagrams.md#c4-model-diagrams) -## Overall Guidance +## Use theme 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.") +!theme C4_united from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes -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.") -} +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml -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.") +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_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) +Rel(admin, web_app, "Uses", "HTTPS") +Rel(web_app, twitter, "Gets tweets from", "HTTPS") -SHOW_LEGEND() +SHOW_FLOATING_LEGEND() @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 -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 diff --git a/percy/TestAllElementsWithLegend.puml b/percy/TestAllElementsWithLegend.puml index 3cc045d..9809e88 100644 --- a/percy/TestAllElementsWithLegend.puml +++ b/percy/TestAllElementsWithLegend.puml @@ -65,7 +65,7 @@ Boundary(b6, "Boundary 6") { System_Boundary(sb, "System Boundary") { } - Container_Boundary(cb, "System Boundary") { + Container_Boundary(cb, "Container Boundary") { } Lay_R(eb,sb) @@ -78,5 +78,5 @@ Lay_D(b3,b4) Lay_D(b4,b5) Lay_R(b5,b6) -SHOW_FLOATING_LEGEND($hideStereotype = false) +SHOW_FLOATING_LEGEND() @enduml diff --git a/percy/TestThemeC4_All.puml b/percy/TestThemeC4_All.puml index f39268e..78321b4 100644 --- a/percy/TestThemeC4_All.puml +++ b/percy/TestThemeC4_All.puml @@ -57,3 +57,52 @@ !endif @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 diff --git a/percy/TestThemeC4_united.puml b/percy/TestThemeC4_united.puml new file mode 100644 index 0000000..57b6c7e --- /dev/null +++ b/percy/TestThemeC4_united.puml @@ -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 diff --git a/themes/puml-theme-C4_FirstTest.puml b/themes/puml-theme-C4_FirstTest.puml index 710dddd..07a4c09 100644 --- a/themes/puml-theme-C4_FirstTest.puml +++ b/themes/puml-theme-C4_FirstTest.puml @@ -54,4 +54,4 @@ !$NODE_BG_COLOR ?= $SECONDARY_LIGHT !$NODE_BORDER_COLOR ?= $SECONDARY_DARK -!$TECHN_FONT_SIZE = 18 \ No newline at end of file +!$TECHN_FONT_SIZE = 18 diff --git a/themes/puml-theme-C4_blue.puml b/themes/puml-theme-C4_blue.puml index 9d9c0c1..504be3f 100644 --- a/themes/puml-theme-C4_blue.puml +++ b/themes/puml-theme-C4_blue.puml @@ -1,17 +1,7 @@ -!$THEME = "C4_Original" +!$THEME = "C4_blue" !$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" @@ -40,40 +30,3 @@ !$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 index f94d288..28d0dfd 100644 --- a/themes/puml-theme-C4_brown.puml +++ b/themes/puml-theme-C4_brown.puml @@ -1,17 +1,7 @@ -!$THEME = "C4_Original4" +!$THEME = "C4_brown" !$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" @@ -40,40 +30,3 @@ !$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 index 568c0ac..ef95b97 100644 --- a/themes/puml-theme-C4_green.puml +++ b/themes/puml-theme-C4_green.puml @@ -1,17 +1,7 @@ -!$THEME = "C4_Original" +!$THEME = "C4_green" !$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" @@ -40,40 +30,3 @@ !$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 index 9cd50d8..820e5a6 100644 --- a/themes/puml-theme-C4_united.puml +++ b/themes/puml-theme-C4_united.puml @@ -1,24 +1,12 @@ !theme united -!$THEME = "C4_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 @@ -53,4 +41,19 @@ !$NODE_FONT_COLOR ?= $LIGHT !$NODE_BG_COLOR ?= $SECONDARY -!$NODE_BORDER_COLOR ?= $SECONDARY_DARK \ No newline at end of file +!$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 diff --git a/themes/puml-theme-C4_violet.puml b/themes/puml-theme-C4_violet.puml index a563179..ae6b493 100644 --- a/themes/puml-theme-C4_violet.puml +++ b/themes/puml-theme-C4_violet.puml @@ -1,17 +1,7 @@ -!$THEME = "C4_Original" +!$THEME = "C4_violet" !$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" @@ -40,40 +30,3 @@ !$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