#376 theme has to be before includes; theme sample is added

Author: kirchsth

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

samples/C4CoreDiagrams.md

@@ -82,3 +82,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