#222 PlantUML stereotypes support no spaces anymore (update samples)

README.md

@@ -1,6 +1,6 @@
 # C4-PlantUML
 
-![Container diagram for Internet Banking System](https://www.plantuml.com/plantuml/png/hLPRZ-964ttthwXXT_M1n4MVDliIQQHbmCdEYWl1p6pUKDakJ6lRtLPt6mP5-U-fDXW3Cz56IbuGNPTpZgkholvi7HfNvZBu7oHQxSWu40xsmcq1qrGueHLATkKvgXIaK0HeiZ8dvQ0tNeQJuUhnELm_paQJft5ut-gtm6aeBO7K2Kfv2Ex41Zxiq0YC9QtfHLXdswtRp5Od0BWJAf5bIj0VzFk3qK_haLOEcTFq2w_nZgIboxYjSuNzUJ0mkEzdhBcCcTaadCNw-gnwK4XK_lbwrgLIn0pQMtZJqtGooD4wCc_og5HiWY3wCl-sNeJBQ3vRpvzMayTPsEu4mpGD9VaAh31hjs9CldCy93L6gmllDtmOQQdD_Vjm4ax3sMhzovn_HlF9VCd-E3jwM-y-Vlmq7dxoENQB1Ts78jkwIAIKHlxSxbI4Iv8L6Tg3IdomevUQOBXSiimQsL_HtpeYTv1qFqQxfNGYr2sw1n_yDnJQkOOYSC99WdEL8HMO6SnXemqyAaT6aOC7LD-5oY0wM4Tv42p8MAtQIMcTpibqONJ-rnf2RGQz0RSbY3cxUspSeaf4MTa0aqINojaMwpX2hn_OaA8vj9F_CzQjW5O7_WW0eD7RtbEyngBWu6yKmx0ef4ZGpqQBJLznXrs82kF5Jvz7tZOcANYOR2NDEevDuDIMm8DKcS-ySVtWYo6Bl6Qs1J9Sn6v9lGLcvDbhrYWned1T6Agib6YyUM7qJgHa0QLycsLJgkGuri8T_B0cPLL82pk1FaKOuEU5sEYz9VDAKQvZ8UbKZga_d3MDtdNXTyoHAt6j1QJ8XQCKR1bRSdnd_rYRVINkA01Isec4RkMDutQA3cEqvA_XzDUhYNwRmDNPQSFQ_C80GvcmpbHN2a9nM-RL_ovigra1BBcl4aCfAITGsgvlAx8MfCxuG2xflohKQJ5mfOJlsCNZsuqprXncchpBolseGhue35nDAsRs_lKoObL_dli-V75job78jQqCp1Jsfdm-pPodNl6zY8eL9Kn5OhJL6mVXIx95bH7OOsJd4lCaha5bJBNX0QUReMxgxlkpReE43VK3NbOVCDQbQtgWUvxbBZY3oc9LYgR-mPBanRveflR9alNSNrQhHSI1rt4yOp-CgRk-WJlIhMV42plMpOweu9eDS4AgZ9STqH1M2xSBN_ajCwZ8c-kiN2U4Hi6_0re_S78ZkvcMQz0bOMfXOtHUBQoz4OuiEEs9JZpZXn53dZ4lgdNJP173Mg2UjrOOZP2RVhpMS9rNMkwFXZwQhXOCT7K7L-atNTdKgNdDyRgQJcvhrRWP_lWDC0b_3MTZVlTlj7Pa83MuLyUNJVqr0Ri-VF0NpXtPxbGryzyQZPUFpxKx-Cmgorp-1G00 "Container diagram for Internet Banking System")
+![Container diagram for Internet Banking System](https://www.plantuml.com/plantuml/png/hLPlZzh64txFfvYGH0690_sKNzvKEYaSkCr5S4Snb_GT6di7UvNrhhkxvWvL_UwTDJO-k5IfrBu1x-pEypmxVyR-w3nQNnMgzmvIe_TaFKWFZzBdW498Bur6nLj5WLg0afe0RLOLf3rSpTVHOhgv_H9jR-zcYuTvTDqVzy4Rg1o1CYagTUYzaZjukqShCL6qfIVfl1lqBptxmnx0AwbJLGc2yMGydip-lvqPxP4vxRWC6b-HSlJyNEvzwNwQJ2m-ZZFMN2NCR5FsOdrZLZqf5UfmloldXP89WrwjWkbXkPWKw3pPx_9e8NUzNlpf_kjs5QtZ-xlj_SDcSNiN3OOSgGrc3bnLbiPwq0PSYIava1fyJg2n81Waw4Y0EPegBSXoyAJE872IyOUIt0WUSvdc88n-vrl05WtreJ2MXcDWnjlToMm9BFrU4UE8bb9Hnf97pJzuUcfoM3j1ZYva9I4Gj9EQH6ygHAGeP97lCkWdc7vZnrCO-YDui-F5p2XZhzz4YsWPtMssFz_pp-n-SR_c_IGxxlPVlt__OJxz47nSZYLTHpBBVIm5YJYi1qFUEIhRiB3hbWtIbWu655p01PzXVnZahKdLqj0TT1gm-LAjdkbwpObfXOIY_DkDs1yKNS_HvIGMKhEOC_G0FlblA8pt7KNFIwy8JW458J6pMC3EMBZLdgmc3pUeluMIY0_EKz7hhSWwemTfvRmfo8vWTdhgJw4rWzdLIK_OUtHCSraxegfjW6bgAkrTdtKSeRStR11e3uFqVunrAQ0_X3zw0D3f7JnIiiMovCDVAO5fMIgPOfW6VJPznZsE82vj4B_yCWksEIcvPncrDEVvR0fD8m9gKPjFl4bxyTMKHPupkn8PBkPjHLShp2YmjwnnQcNfHp3LMQNG1lFAchqKeJEK-ZxBhjBfSP19Vm1lE99r81ti9GONQO7l2uarZuxi2qM5IQIY9XpBi3XfchqUmMzO84VYN0ieMSZGeQvA77dEsJ_Mvbw8Eme0GNkPqgMyUJ8Gw37Ccv26vZ6eYNzTmDdQ6qiEmeW4IvbqtjOf1QcvB8lwUGHvtIk0bSyXjIH8UudAZK9PaNEWJCOBykduHQ2QnkP8oL2ngzll5yxSy37R-Pr5xWSH2a5XuBfRCNFNBqONY_hpLFRHanzGWL9jNMrWekXgoUkcvGBp9YUGDIagMChK6cTs7gAdD4UT4Hmz6VOPPgEjGsLClRDOq4LFTs4FvTbMGSg6zdxFWm-OcCft9J0wjV88l4Nji8v45_xUcjIpST4rxOCZ5xW_RJQhc0-UdtCb_l1CK_GTN4EtlGkpEZ7TYAZXkW7G8DN6yu9e2UjvEuBF_5gTrEHTDkkj1g5JyE-0jZVitCdkckKST4qe7EoiAUfvzMYb9mVU1AA6PtupOyWJvhDeNHHPpB0Ew2fOQunEo7azdccuzAiSrqT77oytAmOwoy6P-qLLTd7gtd8yhPQBorXrsmn__EXPHBz4T_F1iBSpnfC5OV5H7zyrxUSJxCVmDYHS6ZqOrZ7hFgx2BY-_jDkzZwooAjHV "Container diagram for Internet Banking System")
 
 C4-PlantUML combines the benefits of [PlantUML](https://plantuml.com/) and the [C4 model](https://c4model.com/) for providing a simple way of describing and communicate software architectures – especially during up-front design sessions – with an intuitive language using open source and platform independent tools.
 
@@ -523,7 +523,9 @@ AddElementTag("v1.1", $fontColor="#ffffbf", $borderColor="#ffffbf")
 AddElementTag("v1.0&v1.1", $fontColor="#fdae61", $borderColor="#fdae61")
 AddElementTag("fallback", $bgColor="#444444")
 
-AddElementTag("micro service", $shape=EightSidedShape())
+' If spaces are requested in the legend, legend text with space has to be defined (incl. all other additional details)
+AddElementTag("microService", $shape=EightSidedShape(), $legendText="micro service (eight sided) (no text, no back color)")
+' If no special tag names should be displayed in legend, no explicit legend text definition is required (all additional details are automatically calculated) 
 AddElementTag("storage", $shape=RoundedBoxShape())
 
 UpdateRelStyle(black, black)
@@ -537,7 +539,7 @@ Container(api, "API", "java", "Handles all business logic (incl. new v1.1 extens
 Container(spa2, "SPA2", "angular", "The main interface that the customer interacts with via v1.0", $tags="v1.0+fallback")
 Container(spaAdmin2, "Admin SPA2", "angular", "The administrator interface that the customer interacts with via new v1.1", $tags="fallback+v1.1")
 
-Container(services, "Services", "techn", $tags="micro service")
+Container(services, "Services", "techn", $tags="microService")
 Container(fileStorage, "File storage", "techn", $tags="storage")
 
 Rel(spa, api, "Uses", "https")
@@ -553,7 +555,7 @@ SHOW_LEGEND(false)
 @enduml
 ```
 
-![merged tags](https://www.plantuml.com/plantuml/png/jLLHRzCm47xlhp01JQswjMkOc8GqQMCh36d0r6xYSRh4byJWs97jTEFVOyTrI9l0nCFwOllkk-_Ed-_ISsr0cRhaerTCfBocI0fZAlr-FbVmECkPAUgargXIAGmACqjbEQyu21Tpf0tbB9bVdXpTEjFzbvjv2TgWigQ7Ini1JA2QLOv_T5zHCBZaM5gUjVd5SLoXqb8SaZUPnLvABjLPb2j44Kr65vHkiNUGZwFDOdOSxI9VqzEtn_6fioPIKLIxza6EnJv7Pdz9rkVmzk4w3WQ9AE2xHP_8s_j46N2UGFgpYSW3-gJvMVG-l6IfaaIZsh0KNOmkeCAp9SiBisOKwTgTnvDU7csaWhmJifAriFWFyYc4XBTP8VVlad1Rs25fbeRGUZoPpzzSq-1JkBn26WtXOeVZJE0pkCL12EWJ3rACskOQwmeEIRI-lOZi0YAlEIYtlIkGb1P2c32eCaYHc08CCTQUrbQL4fNtGMeqUMIc81i693IQWLoV-RQRxAQxe2KJDaEpak7Cu7nC6mLM_lyjGU0Z2ItMbh7OAGCgvYgu_UmI_e0DkFKQ1EMe2N1ExD1QeDQ4ovobPEocUzOo4oin2isaq9DEbj3RKxURkjt-tMElTVnYOa_3N0og7dTbZrzUzr1CqA9RakzOxGJPRbqH1jD2j0HxOzkzKiOuhlrish2FzaJ2gFPfWiTMi4BkUzwtmBtsUPkljlLxjrVh7vY76q-oVL8__ptGgaCLTd-1D_WhtvSTQMgREfmNZSYcO9gam7ddTbk_fNcU9Nw69MvP_X3iQfr8KxJiZUXs6IRjVw2cmJBjv1kjhxzzVxXPVbf-lHfdm3LEHkSegFlV-mq0 "merged tags")
+![merged tags](https://www.plantuml.com/plantuml/png/jLLHRzis47xthxXvGsV1hbrxnGeC2D0ipTO2sHR42VOOdCIpn8qYDVBa9Fz-Hz4AvCfRq8Vw8PJ8xxxxxjCTypumUcvhC_b6syAqYg1YRi9FgvN7XsMfkMhpDf0ld6Mol2nSlMeCsXZpEh0oEbzTl7rz7RVkVhjQrHYOl6pTNqW4Qaj-sKJ-oLsZaEdIK2qyMtuoD6l81sSNyDrEi1VEE7ysBJsHdMQJSwKEs5iiPzFzUlbcUepyLhtxuStcNTpDdLVaZ_TFSgm_vzZ9Bz-DETB-QHslJX8ff1_NOwAqFoRQeJ4v5dzt4MMFVjlz13tv7Zxj83HOK03q19x-QIamAT0Mk28mL99LYyCAJ8yC3vgh50GL1c07EO6YdROIDujVU0cI5vmGU42bD6jdqGY6KPimKbdhmhij-RqkA2eD5JPqTgdBYhTQaTh6zrac9qd6hQWuIr4GKXZCAC8XH7m6C-iwhGkGXsW05B7sR9gbacKtD5HeDC1OWiMQ0eJAjKPrnUZG67nADlGMI0mzDaONceTsfCgx4a67pa7jen5YmRZuP3Esx6faNGZc2UHlqHhaAFnpQm8xZ-N0bHlNMYdnP_TuS2Nhc_w6J6hut4Z12-YMpcivIMJ9gwv_H7hVLQ9sUWgtYJYZBRs0Mx_g0yR49oacprCx2mqkOBgzFf_AWhOK7tnylAq8Qe60jan-5tkDA-Ik9uisY7taqnaM759BxZL2Fy6CPJXByvmTfpjNjRQIeLlXT6QCPpgmHx7_IoLOUe0qkmCPwoCPsEYeuFfJJFWNxZ6k7z4gGw4RdRmD0Wm1Z2jrqGzLpmnYCTcWdGtPKPPqQSpZqtoKL6hV9AytNytiUN_Xd7HzCxHzy_LzxyNqNWmbfOuDqP33OnJ1L5JscU3uOXfMjDE6jcaq9UeNUOD-KiSi_Oa8aCb9BPywu2wajDr_GpbFnyci_y7SNoMImnTDupy2tGoe-gV_W7Vu3waj1ywqahf_NtSUSwK3n5jhK5qwZ_w-pB9vWMNJimm-qB7NkUFgcRqpNPRJfEFxQTxlp0Vv9jkFV_nvVtNvw-Nl7sRICe6ooNkoggtDlm00 "merged tags")
 
 **Sample with tag dependent sprites and custom legend text**
 
@@ -785,7 +787,7 @@ Source: [C4_Container Diagram Sample - techtribesjs.puml](samples/C4_Container%2
 
 Source: [C4_Container Diagram Sample - message bus.puml](samples/C4_Container%20Diagram%20Sample%20-%20message%20bus.puml)
 
-![messagebus](https://www.plantuml.com/plantuml/png/bLLDZzis4BtxLqpL7ho0TuqKFHLO8FumcWJUNSUoaQCmeiOI4OeaICgkM_I_bvHiXN7LJRA7jJYSUU_D38TyQnqQrzG2afginPBonYQZdxXaeYa8AkUq_NqwDNXwABch6hzDXYdfIBe7fkgf5YW3mBrrXU3vTF7R_IQOza_hQOtMaV6cRE4Za4io3zhxZaQpebW9gZt83ijnKdDc57Za8sUKJE0NMw6cnnKlAvVoWeeqhCTtVYSl5qeeyvWib947eKvavg9fWmwUvB9vghYZvEwMnpfbi8mOjggH7dwk_XnW42tzv_Ch-AFqtSkdRBFQfY_FsSj-jtx_l1fxyuQCLNBC6izOavd0elzAPd0rjm1dwwZEva48clEOlV4kLszuBm_ArEYuaiaT_3q2_zVNSenQnyuphGLddREtVy0ZMcQuTXEOoR8HQ89v9dpHRA_1WbDGeyIIm5N43MYZ3bpux6xOhX7PfKynTTgPhhGJIBNXieIvKYuOTnM1LbmwK0T0niXQy9drAe17YVfIEomjFCBDmRXLT3coMTvOp_7KhM3Us42vnJpdxkbZIszGMgsCQqczEvT10Hr9EliVM4F1rSkFCjrURN6gsoO_Xz-58NHaGOOK1BTKG84EMx8U37HZjB9alpy_R0hk8X6pi8u5B7wUFZolTk5pOzIH5sH1cH8bjsqfxq_U12rCK710neN__04Do_nBtuiyRlaI7UPeMnql1faWUFCh2wlKAKFscxtjXd60CMg0funh7tC-dTEFwuWEh-N_Ymeuah6UhZrjGlGT_z8MBA1IxBNkn0g7--9teww4LP2pEfBibxswg0Q0kMhSvV21gz11XKVo_xGcISMmWdz6eos9R1dTATtuxplHoRlTRfDwnywhtHkOsBqkqFrFSo1KgGnOQC-IJU23lzMcCUv-u1BeLAGa2zldf0B89yfJnJwJUoKuck0Uf9VMj5eZq1Pd02KweNt5krRpxYPSpXUNuAy81mRzEpN4CDry_J3407bl6aoa2xiXYuzY7z5HTJ6ZDPwpxH3RLqZNfsoz-cFrlFHFs5kVH7Yg_mK0 "messagebus")
+![messagebus](https://www.plantuml.com/plantuml/png/ZLNVRzis47xtNt7p1am6d1WTzZGWGFt3M5iuYMlPwADn4iyIKOeaICgfD-n_7odPAjqegFEGaCUxx_lkFb9vRnqQLrTYy0kNkQWPGUcSjdzD9WPVxWlkoZghBPbSIKVItUUgccY1CjJSMSS4poRpF-_M8RHxN4qgj8wC3-tdlWAv97El0_xlK4jVN7aGS2N1GGcXNhWiGFWaGCdWwfWRwrSAF3a8bQCG9u_HgNnDC9WojXGK4BPO9CEAvqQbP8uyf-4OVhCbQdfOyg9qAMV4qh1FHluaA-PAAFCmd2iZ3ruLcPcecwA3vpWVlfJSDJ511KcsfM_keIK1sx90GW4TR80V3KS_Ah9E6ImYCHjLIvywKzzwn8X6wTVJMr8y_Y3zyFnblrvkqkUd_VDkk_huj4nyU4t6AfdajMUio8nXtgs6KxY46u2JTLJjPq48cbEIl_CfbspuA0_ALEYuaiCH_3i0_zDDFK6ju-IfreBdRRAFVy8ZsjnmxSOmbKKjq8JmDBXkEmqsM5oXn8A2xTo0Dkh0HUZkckrIiJyFEwRkN6vfnv1g4sxMJ2aNWjkIG2ik7QW3O9wJjU0xwrG0ZnhretPOM7Y0-0gz5bHv52zxdzNMKposEvZLDZ1kCCkuU_pSi1kKLYlZ6awVpcKGG4UIphw2DHHIlVgeqSqb5dUwgRDJ-3itX8uioD21u9OOC7JOa7LWe6kZbILxStjOC-uY3TEmZ_ddlqxkdvRRi5mRTUICB2XJeEIs6UJTYmz10nC4733dmYzlbx38lflEijZl1JhCq3OodWtcWk3T7tdOfKuPiZyrjds9VOpTn09bFFcOy_6KVbv5T7WP_Z_4u4Z6UhhcgWdH-VtT56HGghp7crw5_RRuqyYKi0jobaUItRPJ5yq0C5ErEryzS2KwAF58_fVM98drA_XlCDYGs2-Y3qhxzdUjwE67xNQT-iHpMdFOyrvtcg5xmnq8Ooe26DgJpCVmoN_J9bV0k-GrPgiZ9SbirvKAA5yeIrN-bPolVgiuUi4TIAUjRiH6e0rE3qfqHxkPjsRpzaEucCtFBIHNZ7ql_JOHCKpxmcw7k4ZfOUz2lQsqr3-mnTUngsYvsfh12a_xJH_R5TBbVzbg-VVoQP6C1kzz5tKb_WS0 "messagebus")
 
 ## Background
 

percy/C4_Container Diagram Sample - bigbankplc-styles.puml

@@ -7,7 +7,9 @@
 !endif
 
 SHOW_PERSON_OUTLINE()
-AddElementTag("backend container", $fontColor=$ELEMENT_FONT_COLOR, $bgColor="#335DA5", $shape=EightSidedShape())
+' 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())
 
@@ -20,7 +22,7 @@ System_Boundary(c1, "Internet Banking") {
     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="backend container")
+    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")
@@ -41,4 +43,4 @@ Rel_Neighbor(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS", $tags
 
 SHOW_LEGEND()
 footer drawn with PlantUML v. %version() and C4-PlantUML v. C4Version()
-@enduml
+@enduml

percy/TestLegendHidden.puml

@@ -12,15 +12,15 @@ AddElementTag("shadowed", $shadowing=true)
 AddElementTag("shadowed2", $shadowing=false)
 AddElementTag("yelloTagged", $fontColor=yellow, $borderColor=yellow)
 AddElementTag("greenTagged", $borderColor=green, $bgColor=green)
-AddElementTag("tagged container", $fontColor=white, $bgColor=$CONTAINER_BG_COLOR, $borderColor=$CONTAINER_BORDER_COLOR)
-AddElementTag("tagged person", $fontColor=white, $bgColor=$PERSON_BG_COLOR, $borderColor=$PERSON_BORDER_COLOR)
+AddElementTag("taggedContainer", $fontColor=white, $bgColor=$CONTAINER_BG_COLOR, $borderColor=$CONTAINER_BORDER_COLOR)
+AddElementTag("taggedPerson", $fontColor=white, $bgColor=$PERSON_BG_COLOR, $borderColor=$PERSON_BORDER_COLOR)
 
-Container(c2, Container 2, tech, $tags="tagged container", "'tagged container' stereotype/tag overwrites all styles of container ($fontColor, $bgColor and $borderColor) the container is not important anymore and therefore not displayed in legend")
-Person(p2, p2, $tags="tagged person", "produces no person legend entry too")
+Container(c2, Container 2, tech, $tags="taggedContainer", "'taggedContainer' stereotype/tag overwrites all styles of container ($fontColor, $bgColor and $borderColor) the container is not important anymore and therefore not displayed in legend")
+Person(p2, p2, $tags="taggedPerson", "produces no person legend entry too")
 
 Person(p4, p4, $tags="yelloTagged", "'yelloTagged' stereotype/tag first and defines $fontColor and $borderColor (in legend), 'person' defines additional $bgColor (in legend too)")
 
 Component(comp3, comp3, "techn", $tags="yelloTagged+greenTagged+shapeRound+shapeOct+shadowed+shadowed2", "Complex sample with all styles")
 
 SHOW_LEGEND(false)
-@enduml
+@enduml

samples/C4CoreDiagrams.md

@@ -56,7 +56,7 @@ Source: [C4_Deployment Diagram Sample - bigbankplc-details.puml](C4_Deployment%2
 
 Source: [C4_Container Diagram Sample - bigbankplc-styles.puml](C4_Container%20Diagram%20Sample%20-%20bigbankplc-styles.puml)
 
-![Container diagram for Internet Banking System](https://www.plantuml.com/plantuml/png/hLPDZzis4BtxLqoT71n0kqQHvb9WWNXjjTd0NhkMj-dD655ZcGX52YIr7oZwtpkaFsXxKwH0UrcOGyvxJq-Fe_teF5hVDQhtWzH2THN1rllM_JmSMdowhgNVTcNdo0gZFMb_BKmpR1Ngq7FbVALaEHp_TBK8fOVPTDYWysIvj1vp1qfDzheD-BtYq_pBUf4lY_dzUlwmcjxTvuDtlL5LvOeQXbvXFUYNABwIha0ScliPlDtmOcoKiJTlysa-o-zNwr_c_6SydywNl5_Mkzt-c_VlFqn67qAFss9BDxcijxwG5LL5M0_UHS8bgKY6xaMBSDZJyu5Wj5oop0EoOWd_k57u5qKt4tHRggQyla0FuCF_Xy9udoXwNdf5SBGNAecrnGOsniATPlSrURX5_LNg6eeNvwdfzHPadT43qJbl6h8PZ8-_-YCubC5im6y9IkxEu8dVFhIn4LMi0GfXEkrTdtNieDUtNAZGlWp4ZunrAQ3_3lxi0K3IEtYYSerjouU_K0cZjbLIe9T6zxdq6HynWwArGVpizt6eJKZ9HvOHfJdFPmNiymYegrW-yfQ71r-CMEGviskHuGhULdIrm9e2-u6r45QsFeEHhZk5DfGNrZnoU1oWKjzcsNHQ1Ecef7y1RzZ9QAI3HucXHLhWvuNIcYT7zfMYnfHIqTwEMLWSDOtVPF07DiXEd6i19Hl9WG3NbOwrcCs_rkPUYTi9W8eUfQ1BUPDoKA774Xs5rx3_6TGKlqtXREsDPMrXKe2bMZflCN23r1pB9lxEO1ll2c37kHAMAj9Ued9PY1Kv1yhKl20lhbyPjHyCx9GCYLtSVJiu4yF7REexTUvx3WLJ63ZULgpTpUjXnAh-EkO-V_O3Qb2gjOi5PiglPho6tO50lTeIoCYA2cPIMEFCnaF-BBQeQu9T9yEUOEx59TGPieaM6xgurCdtaCz330GN3WzuwZvWQJgVCf0Txt86tg9s6Ar8_lUMf4xcHRgr3uvSuFwqMYqAFdX-phNutJCfzOUZExhrFV70BasQ4H4kJO0zKYoU9Y8Hne6RmMV-oWmZUNgTSMkFa1JyDw3rBJSdsOVRSWcw9AmSRAnfui1wijAJ0sy2qPvdSZjco2FcYLiN8IiOrW5TXMh4I48kydYguRAlSvoFH5_CLeiTK7gOi_QBL2QVqcUEnzLiUkbLscRutVy0q_pN_7x2t_wFZDurwcy0 "Container diagram for Internet Banking System")
+![Container diagram for Internet Banking System](https://www.plantuml.com/plantuml/png/hLPTRzis57tthxXp--00IeoXwyk007LiRMrXnvxbh7iphgXhcIX52YIL3mpxxxjaP2boEdJ0zXA8bxpd71uUqldWF5hVL6hqWzH2DGN1qVlQ_JoTMdouAgK_DddZo0gZFMb_9KmrhHNgq7FfVA5aFft_TBa9fRlLSbgXysIvj9zp1qfDzgeE-AFiu_hBVfDki_NjVdstMtwwJISNerbHf8egXjvXEHddABwIBhhUSG9l3poO6sNizTjqcQxIszt-bpN_cQ-NwotFv-NpxFZDktVl5xFteSSTiQRhL9P7dyc2YYoC9nSyewXaWXqz-kiJ6uWJ7Kmej80BFHVZA6zBAaf3zwH5mFRSs-gPRRUygPCGnH3_E97v9qNN2tH7AfPIivW1UW2V_ZyKnlkUOkIbLmITeL18B2rMS30MFcbFLfE76zHVfIuXUtAUgj5eGzOPFH6DywOYcy2y-nhFu5G6Sm1_9CYvEu47pWhKiH5Lh04AOHhjtPXrF4FlRxXGe7sQY1yPwrp0-0B-7050htVoGFaUwveNVw4SPdMjf40lZHvpwJFUOm9PROFurU_pK5kGalSi8qfpdjSAQDCBg8jOxdZpqyOtCnOvP7OrCbp6quekDrXIO3-nPiBAsYSmqsMZq8Ronffxpeq3LEhRB8T6Yo0TbVHFu0qx6OrqS2ynj4WBl5_8hNbmP5yfgamk5RLshCAWqpH_ay0VM24xCTG2IbQI0m6koHrvFhD_hSsz4lSi00gwbuBEvItoIO4UStGKZg7z36gotvOm67jZMLjuLy1IAPstyKX1Qevb5RyJECQx0jXmheIbWhINg5mIOaNEWJ8b3yYBgrT6jHURdP8XiPjFtmxEml0os_SDdFkEGy4K1ewt5Kjt_UhfOb5_TR5F7_s4AfHgxsA1YTBB5O_RAnUOTtmiCfAYWfKKrZXpy90-YYFgak2vas5VOBRQUbJ6r0UB5PtTwHUserAd50WkTFjxOJvWRXhVHo3fhd82tg9s69texHzjIRruBlfBU-V81UwFkzqcuuN3TQx6xwvfGz_3jNJxs_1MvwP_8Y9S_m2qIB4u3CI9CBwt2NpcdwHf9EzFCqwr2Bs2_mQql-7cNdP_MOQWMyB2mS6QAhvN3rPwSk1D86fv5ZTpXkmmNxXr5hACOHtGPQX6Z5x888_d6ePzZUDyzFJPQhTXeC4P3DhFKzdvrF_AyMkrMfvxrKyp_FC_3Clqr_HsCRaOVM3qfb9_0m00 "Container diagram for Internet Banking System")
 
 ## Icons
 

samples/C4_Container Diagram Sample - bigbankplc-styles.puml

@@ -2,7 +2,7 @@
 !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
 
 SHOW_PERSON_OUTLINE()
-AddElementTag("backend container", $fontColor=$ELEMENT_FONT_COLOR, $bgColor="#335DA5", $shape=EightSidedShape())
+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())
 
@@ -15,7 +15,7 @@ System_Boundary(c1, "Internet Banking") {
     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="backend container")
+    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")
@@ -35,4 +35,4 @@ 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()
-@enduml
+@enduml

samples/C4_Container Diagram Sample - message bus.puml

@@ -3,7 +3,7 @@
 ' uncomment the following line and comment the first to use locally
 ' !include C4_Container.puml
 
-AddElementTag("micro service", $shape=EightSidedShape(), $bgColor="CornflowerBlue", $fontColor="white")
+AddElementTag("microService", $shape=EightSidedShape(), $bgColor="CornflowerBlue", $fontColor="white", $legendText="micro service (eight sided)")
 AddElementTag("storage", $shape=RoundedBoxShape(), $bgColor="lightSkyBlue", $fontColor="white")
 
 SHOW_PERSON_OUTLINE()
@@ -12,10 +12,10 @@ Person(customer, Customer, "A customer")
 
 System_Boundary(c1, "Customer Information") {
     Container(app, "Customer Application", "Javascript, Angular", "Allows customers to manage their profile")
-    Container(customer_service, "Customer Service", "Java, Spring Boot", "The point of access for customer information", $tags = "micro service")
+    Container(customer_service, "Customer Service", "Java, Spring Boot", "The point of access for customer information", $tags = "microService")
     Container(message_bus, "Message Bus", "RabbitMQ", "Transport for business events")
-    Container(reporting_service, "Reporting Service", "Ruby", "Creates normalised data for reporting purposes", $tags = "micro service")
-    Container(audit_service, "Audit Service", "C#/.NET", "Provides organisation-wide auditing facilities", $tags = "micro service")
+    Container(reporting_service, "Reporting Service", "Ruby", "Creates normalised data for reporting purposes", $tags = "microService")
+    Container(audit_service, "Audit Service", "C#/.NET", "Provides organisation-wide auditing facilities", $tags = "microService")
     ContainerDb(customer_db, "Customer Database", "Oracle 12c", "Stores customer information", $tags = "storage")
     ContainerDb(reporting_db, "Reporting Database", "MySQL", "Stores a normalized version of all business data for ad hoc reporting purposes", $tags = "storage")
     Container(audit_store, "Audit Store", "Event Store", "Stores information about events that have happened", $tags = "storage")