Merge pull request #390 from kirchsth/feature/376_386_Layout

#376 (and #386):  Lay_...() has correct orientation in combination with LAYOUT_LANDSCAPE() (and theme documentation is updated)

Author: kirchsth

C4.puml

@@ -9,6 +9,16 @@
 '     !ENABLE_ALL_PLANT_ELEMENTS = 1
 '   or with additional command line argument -DENABLE_ALL_PLANT_ELEMENTS=1
 
+' C4-PlantUML v2.12 fixed a missing rotation bug in Lay_* calls in combination with LAYOUT_LANDSCAPE() call
+' (details see https://github.com/plantuml-stdlib/C4-PlantUML/issues/376)
+' If older diagrams should remain unchanged the bugfix can be deactivated with following statement
+'     !NO_LAY_ROTATE = 1
+' or with follwing additional command line argument 
+'     -DNO_LAY_ROTATE=1
+' like
+'    java -jar plantuml.jar -DNO_LAY_ROTATE=1 ...
+!global NO_LAY_ROTATE ?= 0
+
 'Version
 ' ##################################
 !function C4Version()
@@ -1749,32 +1759,64 @@ $getRel($right("<<-","->>"), $from, $to, $label, $techn, $descr, $sprite, $tags,
   !return '-[hidden]' + %substr('------------', 0, %intval($distance) + 1)
 !endfunction
 
+!function $l_down($start,$end)
+  !if (NO_LAY_ROTATE == 0)
+    !return $down($start,$end)
+  !else
+    !return $start+"DOWN"+$end
+  !endif
+!endfunction
+
+!function $l_up($start,$end)
+  !if (NO_LAY_ROTATE == 0)
+    !return $up($start,$end)
+  !else
+    !return $start+"UP"+$end
+  !endif
+!endfunction
+
+!function $l_left($start,$end)
+  !if (NO_LAY_ROTATE == 0)
+    !return $left($start,$end)
+  !else
+    !return $start+"LEFT"+$end
+  !endif
+!endfunction
+
+!function $l_right($start,$end)
+  !if (NO_LAY_ROTATE == 0)
+    !return $right($start,$end)
+  !else
+    !return $start+"RIGHT"+$end
+  !endif
+!endfunction
+
 !unquoted procedure Lay_D($from, $to)
-$from -[hidden]D- $to
+$from $l_down("-[hidden]","-") $to
 !endprocedure
 !unquoted procedure Lay_Down($from, $to)
-$from -[hidden]D- $to
+$from $l_down("-[hidden]","-") $to
 !endprocedure
 
 !unquoted procedure Lay_U($from, $to)
-$from -[hidden]U- $to
+$from $l_up("-[hidden]","-") $to
 !endprocedure
 !unquoted procedure Lay_Up($from, $to)
-$from -[hidden]U- $to
+$from $l_up("-[hidden]","-") $to
 !endprocedure
 
 !unquoted procedure Lay_R($from, $to)
-$from -[hidden]R- $to
+$from $l_right("-[hidden]","-") $to
 !endprocedure
 !unquoted procedure Lay_Right($from, $to)
-$from -[hidden]R- $to
+$from $l_right("-[hidden]","-") $to
 !endprocedure
 
 !unquoted procedure Lay_L($from, $to)
-$from -[hidden]L- $to
+$from $l_left("-[hidden]","-") $to
 !endprocedure
 !unquoted procedure Lay_Left($from, $to)
-$from -[hidden]L- $to
+$from $l_left("-[hidden]","-") $to
 !endprocedure
 
 ' PlantUML bug: lines which does "not match" with the orientation/direction of the diagram

README.md

@@ -30,7 +30,7 @@ C4-PlantUML includes macros, stereotypes, and other goodies (like VSCode Snippet
     - [Including the C4-PlantUML library](#including-the-c4-plantuml-library)
     - [Now let's create a C4 Container diagram](#now-lets-create-a-c4-container-diagram)
   - [Supported Diagram Types](#supported-diagram-types)
-    - [System Context & System Landscape diagrams](#system-context--system-landscape-diagrams)
+    - [System Context \& System Landscape diagrams](#system-context--system-landscape-diagrams)
     - [Container diagram](#container-diagram)
     - [Component diagram](#component-diagram)
     - [Dynamic diagram](#dynamic-diagram)
@@ -39,11 +39,13 @@ C4-PlantUML includes macros, stereotypes, and other goodies (like VSCode Snippet
     - [Samples](#samples)
   - [Relationship Types](#relationship-types)
   - [Layout (arrange) elements (without relationships)](#layout-arrange-elements-without-relationships)
+    - [Compatibility mode `NO_LAY_ROTATE=1`](#compatibility-mode-no_lay_rotate1)
   - [Global Layout Options](#global-layout-options)
   - [Sprites and other images](#sprites-and-other-images)
   - [Custom tags/stereotypes support and skinparam updates](#custom-tagsstereotypes-support-and-skinparam-updates)
     - [Element specific tag definitions](#element-specific-tag-definitions)
     - [Boundary specific tag definitions](#boundary-specific-tag-definitions)
+    - [Define a new legend title](#define-a-new-legend-title)
     - [Comments](#comments)
     - [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)
@@ -59,13 +61,20 @@ C4-PlantUML includes macros, stereotypes, and other goodies (like VSCode Snippet
   - [Advanced Samples](#advanced-samples)
     - [techtribes.js](#techtribesjs)
     - [Message Bus and Microservices](#message-bus-and-microservices)
+    - [(C4 styled) Sequence diagram sample](#c4-styled-sequence-diagram-sample)
   - [Background](#background)
   - [License](#license)
 - [📄 Layout Options](LayoutOptions.md#layout-options)
 - [📄 Themes (different styles and languages)](Themes.md#themes)
 - samples
   - [📄 C4 Model Diagrams](samples/C4CoreDiagrams.md#c4-model-diagrams)
 
+> [!IMPORTANT]
+> **PlantUML v2.12.0:** Layout could be changed based on bugfix.  
+If `LAYOUT_LANDSCAPE()` is combined with `Lay_*()` calls then the elements are correct positioned based on the new implementation.
+The old implementation swapped up<->left and down<->right (details see [issue 376](https://github.com/plantuml-stdlib/C4-PlantUML/issues/376)).
+The old behavior can be re-activated with `!NO_LAY_ROTATE=1`. Details see [Compatibility mode `NO_LAY_ROTATE=1`](#compatibility-mode-no_lay_rotate1).
+
 ## Getting Started
 
 ### Including the C4-PlantUML library
@@ -464,6 +473,66 @@ Lay_Distance(LEGEND(), db, 1)
 
 ![db below legend, 1 unit distance](https://www.plantuml.com/plantuml/png/hL5DZzem4BtdLtXH3o0jH5NRIwLAYu3THUA30bkEqH0FuCgnKyy4r7_VCIIxKQjAFVGKvptFUtvl7eWXS5NOvCwut5OQrOcvfCzf6k0oE1e-LVkACEJUCJeUvBv8ImikplI9jJNxTFInluhGotoM5a2CGQ1i91DW78P16VMJEuq7-LNZoRVfQBdO_8CHLoNeyE7Dq0ZRFyYDFfN1C5BZf_4SENfrULmkjiFTPBESJ_whqHM32v8liF-fQUqjLGhkM5ceG_z9VuSp_8qhw8VD2CCPVnjlfqdZswdkT2L7xxeHkbUTKKNi2mmTEQ_GbnOLdu2LGzIg35vNEPEGxswPldIkKfrUyhggBfKWmvlLC6hKKU9nUq9Lo1Lb76CuG5vBi-1vRNlZG3pKHLfk6pLARIieZGWFLzEe7sk9tsTmsY8fi5R9bkGYaRB-QFAsNBpTrXhlktelqsDWs0DXL9gRF7Zo1rQRhxEhjBUQcXhkbGyQWn8xUVRPcnpbU_2X03RUjSrQMn7FP8ssxllMrGiX2HxXAn1ZjT5iVKjwVU0QGLEwYyAHJZRFortsE5iEjzF5KpQRF4qMusulcS7FR6o8mUNORT2RnFjUye1Eo_P_0G00 "db below legend, 1 unit distance")
 
+### Compatibility mode `NO_LAY_ROTATE=1`
+
+Based on the bugfix of [issue 376](https://github.com/plantuml-stdlib/C4-PlantUML/issues/376)
+the layout of old diagrams could be changed if they contain a combination of
+`LAYOUT_LANDSCAPE()` and `Lay_*()` commands like below.
+
+```plantuml
+@startuml
+!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
+LAYOUT_LANDSCAPE()
+
+Person(a, "A")
+System(sUp, "B up\nbefore bugfix left")
+System(sRight, "C right\nbefore bugfix down")
+System(sDown, "D down\nbefore bugfix right")
+System(sLeft, "E left\nbefore bugfix up")
+
+Lay_U(a, sUp)
+Lay_R(a, sRight)
+Lay_D(a, sDown)
+Lay_L(a, sLeft)
+
+HIDE_STEREOTYPE()
+@enduml
+```
+
+![bugfix changes old layout](https://www.plantuml.com/plantuml/png/NP3FQeGm6CJlFaMw9uMkNdhgQQqABQHTySzXeI1HemPY3CaNjllsJR8NyPOPVZFVa8i6ei2iF7XXOk1cf6W1aFezIHIvnpE3nVH6KpLi0gY0UDZMH78YNEQiOUIiJxAtS-cizXidAz50bRMwp2O84rJ5qlNZz7PjcmwdFtcTfMKHHa5GKgKt4P9NT4fFKL0_R7ODTIkjyO6C_1KzdJP5KM_cYVqXJYVOSHMR5x1eXfHx7UbnkuiTdLjfuTpxHzONx61C9zTS-9D7s4XB1fWykjPjjtiZhogl_AgdaJl37tvgxBJljldFhxpewgQeYcjpy_zneM8qA_y7 "bugfix changes old layout")
+
+The new repositioning of the elements could damage old diagrams.
+Therefore a compatibility mode NO_LAY_ROTATE is introduced.
+This mode can be directly activated in the old diagrams with `!NO_LAY_ROTATE=1`
+or with the additional command line argument `-DNO_LAY_ROTATE=1` (like `java -jar plantuml.jar -DNO_LAY_ROTATE=1 ...`)
+
+If this value is set then non of the Lay_*() calls itself has to be updated like below.
+
+```plantuml
+@startuml
+'  the bugfix is deactivated with following statement
+!NO_LAY_ROTATE = 1
+
+!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
+LAYOUT_LANDSCAPE()
+
+Person(a, "A")
+System(sUp, "B up\nbefore bugfix left")
+System(sRight, "C right\nbefore bugfix down")
+System(sDown, "D down\nbefore bugfix right")
+System(sLeft, "E left\nbefore bugfix up")
+
+Lay_U(a, sUp)
+Lay_R(a, sRight)
+Lay_D(a, sDown)
+Lay_L(a, sLeft)
+
+HIDE_STEREOTYPE()
+@enduml
+```
+
+![deactivated bugfix reproduces old layout](https://www.plantuml.com/plantuml/png/NP1HQxim5CNVyobk-_9luT_AO4-3GPqA6xXQh3uK1X8rQa2Z93Tp_VQxfZ1Att8EltFFpJqOv1hjqBD_0DW9A6tRo1-G1ch1AvJV74KDiyGEch7lnrcg5WoIEmY5R7LCYjY_56cI-La4h_34s4ggghUrW0vnCY-Uf_cyRsc2BQqHkXeLKdHVZOCtzLmjxJk3TIzBBtZUdHOh_uozWHiKcgmYe0INIkZzH2oZlYJFgFOOdWF_56ssZ9s4DgFQyF-mzjTRThvITjYOV2BZ3UpqfKhHZFhlVxrey8vBPTiXeG7evVL8r-EixkYG9C6XynzPD-0EZgc9uCXLFi9s8fB5_5hao-wqxzQfr2ctrSq8dR4KttIyQ3URykyVOLISioYDakpYxd4GggPJ_G80 "deactivated bugfix reproduces old layout")
+
 ## Global Layout Options
 
 C4-PlantUML also comes with some layout options to make it easy and reusable to create nice and useful diagrams:
@@ -1006,7 +1075,7 @@ Source: [C4_Container Diagram Sample - message bus.puml](samples/C4_Container%20
 
 ![messagebus](https://www.plantuml.com/plantuml/png/ZLLDR-Cs4BtxLqpT0dK09yOMFHK8iFumkhjm4gzbOoy5Z94qbeYbI8Aad7MB_lSE9LjX4WLD3Z4vd7dlpGUfZywZzNKb1py9bSaw9oYzD-wFoSJYuqqXV5cdjIERQUL9-PjCLnCZKOMOQ-TpATB9_FVhTJ3jxbQJ2fqdowRzd2DGAB8t9k3_2hNYu8f1m9S41osbVXIg0CbEW2g7PyV2EbvfO7AGEaCfJupHgNnDC9Zc-L9IGDXYCHfM8hCw8NiK6Gt7y8ihqT3jKXIbJqHEUHBseoi-IOkvbjhU3kVQgWEh8ZkJTHDqO8xpuMCfV6EJL93Aj_J3txOau5gMlnG5T701VdZrKf3psc8HQTdeMh7dJF_eqI8ReTzFRobX_47owU7RVhtS90_t-uVTTlNvVZbYyvgiqsgKrSnOaHt3l5iDft0nDm0dxbQrdmKXQ4-Zx0ExNBpXipfeMw4NMWslu9y1y5zNz14Q4pjFZP4YQvtP_WMFw38hZ1_3L1MrH1lCqz1qrsbmeSCLAYmeT5rOC5OVXEJiNh1T8lRdMiVKNPDRsZ4aneR1ccdjWt5R4XWjb0Tz0CmoSWuuiqu5Y2XHBhN7mi4jn1FqMb35A2nxdzQEAUxQ7Sng5nWtcAR2ttrjs2qgPxJr3IUx2nK4q96KTwzWBGLNLXybkhdOuamtTNeAltDBwCc12Xb8uIY773qsPBOBDBKrsf5xTtfOvy976gPX7_FFVvxSt2-tORcs-YXorg1jWKguff3NZso21YO8E60c92_VBs6HFZKzJ-D-Bz1ZYgwHyM0namGVVil2Bl7QallVnhOtiOSnAZzJnfMFEUzEoTTLH8UNulzDEHp9EgPhHatAhjzFJS4SIftrzAPNONzR-3HgIjW5EKiUgMxRgOjg09Zgsfz73to97aey4lypXXJb_Gh-7Gms9FUBw45fx_wk5JtyjDsk4tOykpM7FVTrPxW6RtG7GfcA08RkfB8nVE4tRV8CUDVp1hGw4bAvwxBI0UKRfOdElfFdwBU2enlSWNJQwaPi1DhWzA34CzhLl6csQ1_2nMn-Jk7vcz5tqzyd8ePfRzZx8IvIUjWxKsygBVKBjdWSkuYMguqPhF2qt_ImFTTz-PQjbdykxnVy3Vl8MTIL_0y0 "messagebus")
 
-### (C4 styled) Sequence diagram
+### (C4 styled) Sequence diagram sample
 
 TODO: better sample is missing ...
 

Themes.md

@@ -46,6 +46,9 @@ Therefore we started with the convention that all C4-PlantUML compatible themes
 bases on the [`united`](https://raw.githubusercontent.com/plantuml/plantuml/master/themes/puml-theme-united.puml) theme
 and contains all additional required C4-PlantUML settings that it can be directly used in all C4-PlantUML diagrams).
 
+> [!WARNING]
+> The !theme statement has to be BEFORE the !include statements.
+
 E.g. in order to invoke theme `C4_united` from a remote repository, you have to use the following directive:
 
 ```plantuml

percy/TestLayoutLandscapeWithLay.puml

@@ -0,0 +1,47 @@
+@startuml
+
+' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally
+!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
+  !include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/C4_Container.puml
+!endif
+
+LAYOUT_LANDSCAPE()
+
+' C4-PlantUML v2.12 fixed a missing rotation bug in Lay_* calls in combination with LAYOUT_LANDSCAPE call
+' (details see https://github.com/plantuml-stdlib/C4-PlantUML/issues/376)
+' If older diagrams should remain unchanged the bugfix can be deactivated with following statement
+'     !NO_LAY_ROTATE = 1
+' Or if the conversion is started via command line with following argument
+'     -NO_LAY_ROTATE=1
+' like
+'    java -jar plantuml.jar -NO_LAY_ROTATE=1 ...
+
+'!NO_LAY_ROTATE = 1
+
+Person(x, "X")
+System(sUp, "S up")
+System(sRight, "S right")
+System(sDown, "S down")
+System(sLeft, "S left")
+
+Rel_U(x, sUp, "uses")
+Rel_R(x, sRight, "uses")
+Rel_D(x, sDown, "uses")
+Rel_L(x, sLeft, "uses")
+
+Person(a, "A")
+Person(bUp, "B up")
+Person(cRight, "C right")
+Person(dDown, "D down")
+Person(eLeft, "E left")
+
+Lay_U(a, bUp)
+Lay_R(a, cRight)
+Lay_D(a, dDown)
+Lay_L(a, eLeft)
+
+HIDE_STEREOTYPE()
+@enduml

percy/TestLayoutLandscapeWithLayNoRotate.puml

@@ -0,0 +1,47 @@
+@startuml
+
+' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally
+!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
+  !include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/C4_Container.puml
+!endif
+
+LAYOUT_LANDSCAPE()
+
+' C4-PlantUML v2.12 fixed a missing rotation bug in Lay_* calls in combination with LAYOUT_LANDSCAPE call
+' (details see https://github.com/plantuml-stdlib/C4-PlantUML/issues/376)
+' If older diagrams should remain unchanged the bugfix can be deactivated with following statement
+'     !NO_LAY_ROTATE = 1
+' Or if the conversion is started via command line with following argument
+'     -NO_LAY_ROTATE=1
+' like
+'    java -jar plantuml.jar -NO_LAY_ROTATE=1 ...
+
+!NO_LAY_ROTATE = 1
+
+Person(x, "X")
+System(sUp, "S up")
+System(sRight, "S right")
+System(sDown, "S down")
+System(sLeft, "S left")
+
+Rel_U(x, sUp, "uses")
+Rel_R(x, sRight, "uses")
+Rel_D(x, sDown, "uses")
+Rel_L(x, sLeft, "uses")
+
+Person(a, "A")
+Person(bUp, "B up")
+Person(cRight, "C right")
+Person(dDown, "D down")
+Person(eLeft, "E left")
+
+Lay_U(a, bUp)
+Lay_R(a, cRight)
+Lay_D(a, dDown)
+Lay_L(a, eLeft)
+
+HIDE_STEREOTYPE()
+@enduml

samples/C4CoreDiagrams.md

@@ -18,6 +18,7 @@ The following samples are reproductions with C4-PlantUML from [C4 model core dia
       - [Deployment Diagram](#deployment-diagram)
     - [Styles](#styles)
     - [Icons](#icons)
+    - [Themes](#themes)
 
 ## Core Diagrams
 
@@ -82,3 +83,9 @@ Source: [C4_Container Diagram Sample - bigbankplc-styles.puml](C4_Container%20Di
 Source: [C4_Container Diagram Sample - bigbankplc-icons.puml](C4_Container%20Diagram%20Sample%20-%20bigbankplc-icons.puml)
 
 ![Container diagram for Internet Banking System](https://www.plantuml.com/plantuml/png/hLLDS-D44BtxLpJXWBVAZei2BfpMiGt94d-mSZRBITMIslQmenanFRBNHV7VwL5aoN8s5IYuUNgwNp-zVZr-onwTBtFT-qgPL9SPmSxxWdySZHmUhhVAxygaP7AfDPwClqvjFYeqcb0pP9zfbOmctmzN8VGmln_bo9wSXEA9LA0ovAwB2Z-ZZPnWEljmDraked_GnvS5Pkwxjf-Is-56CePSEEM9J-qoseSxRhhyj5oinu-pQ3cV_Q-DgXWUY6rEmnzwtq1f120N8F0xWetLsXwKsO8EBD1aqBbMZkMN1I40sgQezL4m6kcVgrPVjRADq6nBZIzUPzORyY_T_evxVEakvpzqpEJs5xqxOevUJI2p9sqBUagHhxiV_xPyMCVhvIgUBXyN_JTjR1p5qI-pzUHMWdNeyMvz6z_FVfujfXBiUUKrGICAP0gt3dCHsi6TyUGCURX1yobe7XtPKzxhhSYnDVsqP6zpSWEODB-knd0AWzrKGqcaUW07CGOKLI7gAWQOfhOqdg-4nnDqV2E13DsndtuhM9S4hjx0dpq0QFds3vJ4M1II_4W9Z8j2gnIzikPAGkza6WE82XV8ppzCGcnAMed0N55ZBxafr5ODTgh2JT_azE6hSQWDqnMoNGPSe5n5agPfkC8j1HQdxb7gLE47C7uoLGYldDshZ1XGwoztsuZdlGewANy4Rnj56VOAGuro81yEYRC7fWgrTkqpThbDbAPQedauDFmcNm_W8-OewdHvWLQvyfG1bmcJbpd-1vvF1A1wG2ZqULgWIwBJf9-XnmIPmf3gdo4_-lKUEcTl7N7OS0UEjegzgmOEoeXfy-ht07R8Eye0It5TwYWZunLg7WJJ4JDekvK3-VGwOER7PZUVIvXW-ebC9XgguE_LtPTjDhMIvjgwZgQlQ1Va4k1Gqf3ugrcAsMVVfnoLCAm2aZKRpkLSBsGeMyk0LDK4DSnLwYpRZOVPvtGdrY3W9lFqVaYBC_oQLzj1yCt6OKuNsz-E81Zuv8rK0istdGq2CB6bRuqnQ9P-0DwXOQnKE8r27eBtfCyUbdQz7vWuzBvThrUH97RpkC1NSpgh45BhTl62r7QNsFOngU3Qfw96ge8TCpGDaOyc7S2xQBaOdJTlM_xBolX6ibjYxMfqKTuJPWmRP_FgxJfKVwNWRK2kWQSt4u5iCC_qkB1K9B0CD0pH2gCbqdLVXyDbNSdYWBPzD5-l1AYZSgUywxjMcAf-LAlpSNxVYFDMIijS_mq0 "Container diagram for Internet Banking System")
+
+## Themes
+
+Source: [C4_Container Diagram Sample - bigbankplc-themes.puml](C4_Container%20Diagram%20Sample%20-%20bigbankplc-themes.puml)
+
+![Container diagram for Internet Banking System](https://www.plantuml.com/plantuml/png/fLHDZzis4BthLqotXte1sKQ1d8gYoFgZJO9rrbrjcjoC4JMsYL2aG8xiB8h-zmvfhsGv0OAY9vjFCsyU7n_vEZ1wRckJ_GIyfvfWwrqDyrVZWYkZInWzxGb-E7sIMfPVox370EoW99WjVtzuN0B7AcsLQQkBkZ2vpKwzmhXfhMQgJWD-dR-QfW_Xjoph6lVCJVXbElLudEmqxzko3UILiona4-NgQMFGHhdZaEHDHUWwGXzMzzCQ0vCNQ3EN3jIM_AI9MyjOio7eKAWqxZpMi7KUtWgvjyGmG_jPsnqKpq7KPzcQV71sfDh0hYQVmxpxTtC7Bp2uRTfyATqv74KqDAaHJS80bNAjvN1pcsKdwirCW0hzyqZzB5pN0cvkuUyC07gzeoEL6smQAVv89TmrZT4AMJjx8z0xF60EHUEZ-DLVyuWjoEY3o4ZI0akjWhEDWBPAS3UtVDdu-av43YU71eMkaC-6nclSKPp-ChLGNZUSmvtTjGPzXDVU7NH50T2ORq_PjbP5wMWqFmExpia01usnHtkG3KFftJ6G_qfIxKfjwEp7AYuwKVCVS_Y4DOeLGp5WT9t25zeo4CkX_Gzn9m5GqK4hkfQtA4SLCfOOA9x3-MzKK_nv3uCrEqy1OiB1qqu7zkbCGLl9PPt-v_6cxKKtjhm7vQaYonfDo6EkA0GmRYSBOZNvogWIrMUobJYbOsJNRx-Td8MJCj_t3PpxZaFH526MqVzqwLv-uH7LgCqc943ebkELhE5K4FdZew8JDHfOQULTS5k6vHUrHxiZE7KAxGNdMK7FAfnswx6cgwlRcvjIU3vh9K2tYmkB0KlNSd_GUNTZSs2FDc3QRszozaZcubNex-Q7G27EVlFqj2waS5WN6lnkpI3QiVGyRlEUz6vVklubI7JzFJyp9N1mxDr03CzMvV2kU7W_lHpUZ_oFdPkPLFV2-j0FMHu9gv3U_FJm7Brc2i0kCf-95xEvK7QS5tvSnQWGsW0qZcZYw8KC4dUjOTZN1ab0FxvOFQs5QE3oe7sOkzwOr3yzk_DfTT-PanLl7ZvkxfT_BDylHhVPQs5gQ_Cl "Container diagram for Internet Banking System")

samples/C4_Container Diagram Sample - bigbankplc-themes.puml

@@ -0,0 +1,36 @@
+@startuml
+' theme from C4-Stdlib (The !theme statement has to be BEFORE the !include statements.)
+!theme C4_united from <C4/themes>
+
+!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
+
+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 customers 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")
+}
+
+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")
+Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS")
+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")
+
+SHOW_LEGEND()
+@enduml