From 878b3b96b156101a46669978c6772b7358f46dd8 Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Sun, 7 Mar 2021 18:19:49 +0100 Subject: [PATCH 1/2] #126: C4 relationships support description, sprite/openIconic and tags (4 - rename AddTagSupport() to AddElementTag(), AddRelTagSupport() to AddRelTag(), update img links) --- C4.puml | 20 +++--- C4_Deployment.puml | 2 +- LayoutOptions.md | 14 ++-- README.md | 70 ++++++++++--------- ...t Diagram Sample - bigbankplc-details.puml | 8 ++- ...eployment Diagram Sample - bigbankplc.puml | 7 +- samples/C4CoreDiagrams.md | 6 +- ...t Diagram Sample - bigbankplc-details.puml | 10 +-- ...eployment Diagram Sample - bigbankplc.puml | 9 +-- 9 files changed, 77 insertions(+), 69 deletions(-) diff --git a/C4.puml b/C4.puml index 2d9414b..dc232ce 100644 --- a/C4.puml +++ b/C4.puml @@ -211,12 +211,12 @@ $elementSkin !$bg = "#" + $bg !endif ' !$tagEntry = $tagEntry + "<" + $bg +">" - ' ..white line, not working with png use - + ' ..white line !if ($lineColor!="") - !$tagEntry = $tagEntry + " - " + !$tagEntry = $tagEntry + " " !else -' !$tagEntry = $tagEntry + " - " - !$tagEntry = $tagEntry + " - " +' !$tagEntry = $tagEntry + " " + !$tagEntry = $tagEntry + " " !endif !if ($textColor!="") !$tagEntry = $tagEntry + "" @@ -235,7 +235,7 @@ $elementSkin !return $tagEntry !endfunction -!unquoted procedure $addTagToDynamicLegend($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="") +!unquoted procedure $addTagToLegend($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="") '' ignore workaround tags with & ' !if (%strpos($tagStereo, "&")<0) !$tagEntry = $tagLegendEntry($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) @@ -244,7 +244,7 @@ $elementSkin ' !endif !endprocedure -!unquoted procedure $addRelTagToDynamicLegend($tagStereo, $textColor="", $lineColor="") +!unquoted procedure $addRelTagToLegend($tagStereo, $textColor="", $lineColor="") '' ignore workaround tags with & ' !if (%strpos($tagStereo, "&")<0) !$tagEntry = $tagRelLegendEntry($tagStereo, $textColor, $lineColor) @@ -272,15 +272,15 @@ $elementSkin !endprocedure ' used by new defined tags -!unquoted procedure AddTagSupport($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="") +!unquoted procedure AddElementTag($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="") $defineSkinparams($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) -$addTagToDynamicLegend($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) +$addTagToLegend($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) !endprocedure ' used by new defined rel tags -!unquoted procedure AddRelTagSupport($tagStereo, $textColor="", $lineColor="") +!unquoted procedure AddRelTag($tagStereo, $textColor="", $lineColor="") $defineRelSkinparams($tagStereo, $textColor, $lineColor) -$addRelTagToDynamicLegend($tagStereo, $textColor, $lineColor) +$addRelTagToLegend($tagStereo, $textColor, $lineColor) !endprocedure ' update the style of existing elements like person, ... diff --git a/C4_Deployment.puml b/C4_Deployment.puml index 8c22675..0ced07a 100644 --- a/C4_Deployment.puml +++ b/C4_Deployment.puml @@ -25,7 +25,7 @@ skinparam rectangle<> { ' Layout ' ################################## -' comment if node should not be added to legend. No dynamic legend extension required +' comment if node should not be added to legend. No calculated legend extension required SetDefaultLegendEntries("person\nsystem\ncontainer\nexternal_person\nexternal_system\nexternal_container\nnode") ' Line breaks diff --git a/LayoutOptions.md b/LayoutOptions.md index a983888..71445ef 100644 --- a/LayoutOptions.md +++ b/LayoutOptions.md @@ -80,9 +80,9 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") ![LAYOUT_WITH_LEGEND Sample](https://www.plantuml.com/plantuml/png/PL1DJy905BplhrZnG4cm3SQJ9sebO0BOs2Bnr2pjKpRPh-o-sX3ZV_Sr89YubqdUp7ipizE0mcEh5L-cRy-Rije-bOjgEPlFre-y4DefO5VIrAfjWEyHNRXF4Y-w-4FYljsr0Nnj3OB1kBOw4OsNmdogrhL9TdUJAs5mirecIY04f56LaLf80pvsvChOVzjen5WEFbWJYKPBC-Q3j4SPq0kqVZ1YnI4WwEh1jgOH_X3Lap4V7jCEH_oBSNfdewY3NIMSepjRsF7KEILhWTAQ0Osowp5FYpnUpqfQyS1lumbVlMOzbofbky3xae6ZvTJG2PBeLg4aBrvs4X4yHwb1aLUWRD-dT14UIRfpaX79Na3zjhh4sWJQ95oKPLwGgXUTsSkPEI35wA27Ts_rtvKfc8R-ymS0 "LAYOUT_WITH_LEGEND Sample") -Instead of a static legend (activated with `LAYOUT_WITH_LEGEND()`) a dynamic legend can be activated with `SHOW_LEGEND(?hideStereotype)`. +Instead of a static legend (activated with `LAYOUT_WITH_LEGEND()`) a calculated legend can be activated with `SHOW_LEGEND(?hideStereotype)`. -The dynamic legend has following differences: +The calculated legend has following differences: * only relevant elements are listed * custom tags/styles are supported * stereotypes can remain visible (with `SHOW_LEGEND(false)`) @@ -105,7 +105,7 @@ SHOW_LEGEND() @enduml ``` -![SHOW_LEGEND Sample](http://www.plantuml.com/plantuml/png/JL4z3zem4DtzAwvq84YGYAfJ9z8KmG0qQa8P8oUv5al-iEoB8bJrl_SYAE3bv7iVVa_UH9A11gEXsd-_D8VjRdlw1fKqNgFue6odXnxXIkJZbomBSan_AxeExH0nTCuIMaexPpAlfPriLf5whTgi-BmgfzNvUCYCZ8I1Lqt12gaiXjGpLuWIGtGsaRrHTWcpV9egKf3amcmXgXiBJVFL3RQNuPPqwoNCxzdc2_WZWC_JCXcnRQJtx7F15dBljUeaAMTdl2e-BY6lolIqhLaI43wbQpZ-B2OirzgD4QPA4SW1z_6IAMRGfBn6g4T5X0586TJyLkHiVn_f4hg3xFEWCIX-eFxVwXNh75d9Sr_NPSMiYVH4NpOxfCXNdCQluCoxHBpzKh8G6xJzOFG_ "SHOW_LEGEND Sample") +![SHOW_LEGEND Sample](https://www.plantuml.com/plantuml/png/JL5Dgzf05DtFhxYr2oDeWgMhhfgceWkreObr6IR9RHsOZs7cXY3b_VTtWpurcqlEn-4Svdia6MWm6ghThtEptsmtnvzGIUCrYa_ATdhe4Iv4FdxBiY37z9-Yoz0E4KFdBA6bj7CcyrhQAMOLgTUgpOglgtA2JeTzPcGa30mr1JkaiXXIpreXIWpHsKJsHjabpFBfgaX1aWkpXQYkR3JD3pVONePhqgsNCBzrco_Wlm3-7f79Y6qZlUUSCxQGUwzL9qavEsEe-Bo4l2hJuwPcIq3uagxXyAUOk5nhDqQO9aKW1xp7IvQOGPFo6g4U5H4686LGAukHkxtTsoLq8pddBcDI_4RziUfPwnJPoNTNrsN5gadqO9ynMwJ8lpYTly6PLujuUQLa8Tu1 "SHOW_LEGEND Sample") ## LAYOUT_AS_SKETCH() @@ -185,7 +185,7 @@ Person(userB, "User B", "with predefined sprite person2", "person2") @enduml ``` -![Predefined sprites Sample](http://www.plantuml.com/plantuml/png/XOxDIiKm48NtUOfuLrxmDY2kNFLdgr2GhYLjHXj89c5cGb_VH2m8BbpDOVZupkbPB4c9GMS21nyUmMdEv0LOlzcO0wWxZrie3lGkaldP6B97z-bbBsjXe2sX04gtfMXoiDXiDnON_6gcfzlSNilhYucM1QY-tgU4OciJTRcoIir0dF2-oOO7VLdgrSEbfgEM_1scypVVW9zq_QqOJyNuh-An4MUygXxGrK5V "Predefined sprites Sample") +![Predefined sprites Sample](https://www.plantuml.com/plantuml/png/XOxDIiKm48NtUOfuLrxmDY2kNFLdgr2GhYLjHXj89c5cGb_VH2m8BbpDOVZupkbPB4c9GMS21nyUmMdEv0LOlzcO0wWxZrie3lGkaldP6B97z-bbBsjXe2sX04gtfMXoiDXiDnON_6gcfzlSNilhYucM1QY-tgU4OciJTRcoIir0dF2-oOO7VLdgrSEbfgEM_1scypVVW9zq_QqOJyNuh-An4MUygXxGrK5V "Predefined sprites Sample") **Using HIDE_PERSON_SPRITE()** @@ -207,7 +207,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") @enduml ``` -![HIDE_PERSON_SPRITE Sample](http://www.plantuml.com/plantuml/png/PL1TgzD047tVNp7MXvj2Ry8LdtowCGPRi3KqgJw6JJBQXVrOTYU48lvtPsbj1VCoPCwPyx6laMIWsMZOxZxLVLCVsw-7lcsEkww6LXglKRnHTjJpX70cyl53KGIvv3yLdUTXZXX6PmajvQCpXTVI9hNdI9DMGr6zVsxIwhJ_KXWP2GEl-eelfB8OSizS8VwtpjP2D1YYivcSZB8RM9LfgaX1aWkhjMWlaT3q7zri9naksVYoWQThugSr_1B0tzqeMt3efVUiynq7ABtNQfIad5tngdgxWR9jyaFTyKb0U9U_mFvRbR1IQxT4I4KZa0DkwILJpAn9iHTqYoB20AGCQlQAdEttBLr6Lv1rRZG6nH7rtrQFMAU8CVbjkwvfcPL8T_GXynafyY-cyICuy-_9AzeflUSV "HIDE_PERSON_SPRITE Sample") +![HIDE_PERSON_SPRITE Sample](https://www.plantuml.com/plantuml/png/PL1TgzD047tVNp7MXvj2Ry8LdtowCGPRi3KqgJw6JJBQXVrOTYU48lvtPsbj1VCoPCwPyx6laMIWsMZOxZxLVLCVsw-7lcsEkww6LXglKRnHTjJpX70cyl53KGIvv3yLdUTXZXX6PmajvQCpXTVI9hNdI9DMGr6zVsxIwhJ_KXWP2GEl-eelfB8OSizS8VwtpjP2D1YYivcSZB8RM9LfgaX1aWkhjMWlaT3q7zri9naksVYoWQThugSr_1B0tzqeMt3efVUiynq7ABtNQfIad5tngdgxWR9jyaFTyKb0U9U_mFvRbR1IQxT4I4KZa0DkwILJpAn9iHTqYoB20AGCQlQAdEttBLr6Lv1rRZG6nH7rtrQFMAU8CVbjkwvfcPL8T_GXynafyY-cyICuy-_9AzeflUSV "HIDE_PERSON_SPRITE Sample") **Using SHOW_PERSON_SPRITE()** @@ -229,7 +229,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") @enduml ``` -![SHOW_PERSON_SPRITE Sample](http://www.plantuml.com/plantuml/png/PL5DQzmm4BthLqpTWxsmiKdfgQUuPcaApSQidUPeP6lI5UX3I6DCAFtl7JLfjb1V1i-yz-QzqKqY6Mcr1eRR-yUfFvo6--CqzAUlum46QOD1yKwxnQmAuKmKqgUcYNAhVsWwh_EQC2xU4Jgg5s-ROAJBQbU9bD5pqtsywdFhuUvROsKYZDoQEcP8xJ3MWR52D2KSFO53LAXWnaMoBj1P9z29AuB29xaQWestGWfH4q8HC2Rl2YWRyR_vQYT4_mTGIMMrsqFHvgeJHKa-5ZinFBCXEttsgrCoFbVBzHxAbypb3duAuE_DQhNXFCaGMESHPsX3C7gHfDa0jxhtUsY7lZuUHgP4X0_rDTnzx_AiDSPl2VAf4f07lbEG3B4SIFCk63aLOGJI5WtlIkpjrwkxYbw6hFCAuw4ueVcRwcBh8J6Jw-quzWEZCkXjUf7vWfJu5tDvYjx-Ixb1f_AB_0O0 "SHOW_PERSON_SPRITE Sample") +![SHOW_PERSON_SPRITE Sample](https://www.plantuml.com/plantuml/png/PL5DQzmm4BthLqpTWxsmiKdfgQUuPcaApSQidUPeP6lI5UX3I6DCAFtl7JLfjb1V1i-yz-QzqKqY6Mcr1eRR-yUfFvo6--CqzAUlum46QOD1yKwxnQmAuKmKqgUcYNAhVsWwh_EQC2xU4Jgg5s-ROAJBQbU9bD5pqtsywdFhuUvROsKYZDoQEcP8xJ3MWR52D2KSFO53LAXWnaMoBj1P9z29AuB29xaQWestGWfH4q8HC2Rl2YWRyR_vQYT4_mTGIMMrsqFHvgeJHKa-5ZinFBCXEttsgrCoFbVBzHxAbypb3duAuE_DQhNXFCaGMESHPsX3C7gHfDa0jxhtUsY7lZuUHgP4X0_rDTnzx_AiDSPl2VAf4f07lbEG3B4SIFCk63aLOGJI5WtlIkpjrwkxYbw6hFCAuw4ueVcRwcBh8J6Jw-quzWEZCkXjUf7vWfJu5tDvYjx-Ixb1f_AB_0O0 "SHOW_PERSON_SPRITE Sample") **Using SHOW_PERSON_SPRITE(sprite)** @@ -253,5 +253,5 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") @enduml ``` -![SHOW_PERSON_SPRITE(sprite) Sample](http://www.plantuml.com/plantuml/png/ZL1DQzj04BthLspTGnIm9H9wwYckC4sXIOGbDqUnbYRnmduiCxCOK_hVEzieTkcfkYmpx-EzqHsnHaxE5X-C7ssQG1sO8tskQzJ7wjNm8UqJ0Ox1CtYknk3gQBNFcXNnPCs-RZwjshpQFNoldIO6bDNGY48R3rZ5F_uJlCYa0kbMvl-8QL3J0IPd_5I_-wz214ym9ZHyqZWU3CF82U5sPKHBS_xbcZckRe9pmSzL_WLtabnhQz_Wehj_UXxQpRPxUXowTlkjtvGBeGwvuF2A07uuHo-kYw85fE1BdQikrMATNqECcWCAtfs8mGrVGlAJnbCvtYpLLQTTj71rhNuMIhxppogFi1zqZEBp37krZj6QKRC9VY6hvkDIhRksUjpq8a5GjzMDUlZHP6njRJYIoYL9SL1ZS54BnINBHh9KVpJCW8gD0ojP9Dr-pUrAVWF5PwRbmxPWtw-wrDeHKCwxx_ks4rOcdT6BpLTWaX7oyuB1_Isv0pybPty3 "SHOW_PERSON_SPRITE(sprite)") +![SHOW_PERSON_SPRITE(sprite) Sample](https://www.plantuml.com/plantuml/png/ZL1DQzj04BthLspTGnIm9H9wwYckC4sXIOGbDqUnbYRnmduiCxCOK_hVEzieTkcfkYmpx-EzqHsnHaxE5X-C7ssQG1sO8tskQzJ7wjNm8UqJ0Ox1CtYknk3gQBNFcXNnPCs-RZwjshpQFNoldIO6bDNGY48R3rZ5F_uJlCYa0kbMvl-8QL3J0IPd_5I_-wz214ym9ZHyqZWU3CF82U5sPKHBS_xbcZckRe9pmSzL_WLtabnhQz_Wehj_UXxQpRPxUXowTlkjtvGBeGwvuF2A07uuHo-kYw85fE1BdQikrMATNqECcWCAtfs8mGrVGlAJnbCvtYpLLQTTj71rhNuMIhxppogFi1zqZEBp37krZj6QKRC9VY6hvkDIhRksUjpq8a5GjzMDUlZHP6njRJYIoYL9SL1ZS54BnINBHh9KVpJCW8gD0ojP9Dr-pUrAVWF5PwRbmxPWtw-wrDeHKCwxx_ks4rOcdT6BpLTWaX7oyuB1_Isv0pybPty3 "SHOW_PERSON_SPRITE(sprite)") diff --git a/README.md b/README.md index 2fba513..a4692cd 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ ![Container diagram for Internet Banking System](https://www.plantuml.com/plantuml/png/bLLDZzis4BtxLqoTGnr0kqQ0ddgArpQwcwntrSZRJK_2Y1hRH2XI82axHj7_tg6i3yiEajGdQJJpvl7D6_gzysXzLQZHBr8BLUK4E-zBz_jqQl5mkvL-LsML8okCzgJzhJ3557ChKUzLLLRJ-MytiKBjNrQFKuMUdETGEkTib9hiRHcmVuLASs710E1t11kZb3b8lGN5IO0wXy5dQHq_6U36e8n0fOwCqJ6yRi1V7sT_Fx-iq_Lpd2wUNvycR_lOB4cJZylr_9w3JUZrONsVFYx_M3ujE3ZoqYl6RK4XbxYrM31H2mzySAl9mntgBu5pSdIUYj4e9kkCdeZAULEGZM3UFOrdq8R1REf3PLmTmO45XR8kH5N708KmbVPkp3nEqEaT1tAqnubunrYN1CPluPyHyA_ZEpbGbc9PSl8hPJ0hIoK5Ucdqc4CVS8yH9AKDv5T_pKDiGKhkcKPDZJtWfO1cnFKuGhZhcxK7ZsTCSjZPbOmzJlYpefiOjnIwjrqJOMNf8vZfRQNGXd1ipLxcv827-kqk6_PAe8vA-cDmWQXg8Hti9OOIQO7F2var1pRc5QF2P59H8yUgVcavpTz4y1aBP2M6NDY7XVIKWwionroQcVqCDtT5xaG0SjfBGPVq5jaaHuyPEWfZQ1u3c-JFHnYyUsEPMrW-iBILpblarY0rkxAefnl1ZfDpm8fT9IpbF3w9oaN1LEGSBy-MNyYBsokPCXHVIEUiamn-ZH--RPk5uJJRrmrq-u4-GH86vjR_TjPUVlKJAb2grDK1XblUhFYzMQk0lsRfPGtDExAImXfdDXwMNyKEDJliLCcmPvWDWnwLCVM6TvWkzlPCsc31PjA20zqfpXG6p4pb-p57tRf6mFFG3klpzYAFFf4wknBwnNnnv4Bl-_KwJZXnc7TQe-_d38nTfvxQfKyajxlCd5q39xXsoHkaEZWSUziGtL6B23uapq_Jy-RdBVzNPNh7sJsntl93b4-4kOEDDKLzwnmiBo7VIIOWDy2Bktbxpe1vfiU5ZHA6TK0t8LfZz4Gk73VaCAohNBXXk_R9QXqtGDrX1kLNlck52VNJHftF_EVOYlEUI_alwpy0 "Container diagram for Internet Banking System") -C4-PlantUML combines the benefits of [PlantUML](http://en.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. +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. C4-PlantUML includes macros, stereotypes, and other goodies (like VSCode Snippets) for creating C4 diagrams with PlantUML. @@ -32,6 +32,8 @@ If you want to use the always up-to-date version in this repo, use the following Now let's create a C4 Container diagram: +\(If you don't want run PlantUML locally you can use e.g. the [PlantUML Web Server](http://www.plantuml.com/plantuml/uml/ZOxDIWGn48JlUOeufn5qSjcJfvNHsugBFsV99iqcsEc4T0VTjpSCE2AYUAeAgVwgjYosIakevytBBK824bPdaHms3pg85BuofjgtwHWbj4DZg2wJzDpaSZAliRh04ioykToZ9Nc-snbux_yUlEdGkOTj9AXJwJLAxQ5ofh4iSetHyeKUTlO0E7HpNoHcigXlW5sDosiuLojaT9_kn-aJk40Py_7q1-Znn09fv4N-swuU0ByFNbVyZlYQqmbR8DyIVW00) too.) + After you have included `C4_Container.puml` you can use the defined macro definitions for the C4 elements: `Person`, `Person_Ext`, `System`, `System_Ext`, `Container`, `Relationship`, `Boundary`, and `System_Boundary` ```csharp @@ -97,17 +99,17 @@ Rel_R(api, db, "Reads/Writes") ![test](https://www.plantuml.com/plantuml/png/hL9DZzCm4BtdLtXxeIjjwmDmuRHLMzXA_Q8VL9ogQJnfZHmxUEnM_7l6QRORM90uS8erx-NDl9dtI05yYAN9xhJDJLGeJY5Kz45A3vV-KOTJF4H2dpiRq8P-xae9ockmPnEhA8VlUai3DcndKsaW80KkxOVC1ctHzwka_KP4op-MB2322KNXZ74NRO_2C4c0LU8NM7lYbnFSM1YNWp4_MECsuUi6sPt28acDnbycmyLy_GykGgpOo5jPfV5PfASPxHNCw57bDLkH9L10BnMU4qQtBXyNyyrWDrulPkF_sgYkmGN9bTXx_tAIPrSIx34QQ4o_Xh_16Vw6bVJTx7coC_x-UykDJBDJizFfuEjYkzdl9fkd_NJyQJmVTU-pRCa4Pxk9-20wmqY1X_KTVY_HLGRvWX24HLIYyax5F502Q-7EVNOxN9SguFfwEKXmOomzDvo0aYb2ymfz0NaZcPAHD-sk6B2skF3Esmhj5b1fHWRBIIAavQJl4yVD80bEbU1RCP68KtRK-OtLqXWTkkh0zH44E01XuinqxXsv8eZrvsajwOoYPxiFmdd58wPKQtjscWreMpXVGj3E9dxh5jmhMw5fzddToPQmtbaTBIOal4QkVlu0xrTNh_MeAmH5SbSdY-57j8hl-HC0 "test") -Entities and Relations can be decorated with tags and explained via dynamic calculated legends, for example: +Elements and relations can be decorated with tags and explained via a calculated legend, for example: ```csharp @startuml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml -AddTagSupport("v1.0", $borderColor="#d73027") -AddTagSupport("v1.1", $fontColor="#d73027") -AddTagSupport("backup", $fontColor="orange") +AddElementTag("v1.0", $borderColor="#d73027") +AddElementTag("v1.1", $fontColor="#d73027") +AddElementTag("backup", $fontColor="orange") -AddRelTagSupport("backup", $textColor="orange", $lineColor="orange") +AddRelTag("backup", $textColor="orange", $lineColor="orange") Person(user, "Customer", "People that need products") Person(admin, "Administrator", "People that administrates the products via the new v1.1 components", $tags="v1.1") @@ -128,7 +130,7 @@ SHOW_LEGEND() @enduml ``` -![tags](http://www.plantuml.com/plantuml/png/bLJTJjjC4BtdAVRprmkZGWpz4L8b9AA0IgNGfWJ49Hfx9ywswztLpZYqRzzPnv0GBAfUxMhcp9mviyS-8uR8RMFt_ZEkigr6jMGEzAae8ZoCQiFBjcm9O-KTe-DHvPiYM72fvf1OMrCMam-7inIwlPeM3H1ZbD3zH2h0E8oZaFhlZRM-WNhUXk0ZvzdgU7IK7QWtfOyQuyHR7q-p__N9-wDt9zd-0FeueHVIz6_O4ggVRTX1-mYkHW4dz3NQuGB6Npi54hGYuaMN6KRoBa-hEL3Pf2Ns3KQ1PpFqmQBY9R1oY5g5w7LRCKbPNmMwCKwWutGQuWZiNzJ29eaa8Nngf5O6ke331vKse-HLWdVec3eLKDDfjpAXV7g6d088nNmsJaoYexNGaTv8fqOWoZZ6k82g7o0nLBsmTGuI-ODuefkWVy4DtT4ktNXRfnfcXkqT_EC8JmjuHJK4aoQOVKc4Fs05wRm4fosI0ckLs5k0HChwsbGgJz_1QBDQSGGwCjxH_dEnRtUfpijSbzBy71XA84n4LwQAdlo2rVpxj6FsLjFZInweplnAfX5rAsygb7FXOmCiZCzrn6ffLfYqh6zPkhRQS1gyDgvEWJdxABe-gjy8SSiClSN5kEBzthLhFzmIKghiFdi1f7oNWM26q_VNwwLsOgyHD1LtqJ3swKTtRzv_cADFlqOqNHDjfFSySckG26eSb3Y__7PtFxtuVF7rFD_VEqEdqm_e3m00 "tags") +![tags](https://www.plantuml.com/plantuml/png/bLJTJjjC4BtdAVRprukWGWBz4L8b9AA0IgNGfWJ49Hfx9ywswrrhPnpQj--COs884LMlTZLpPiwSsMEV4KFYfl9x_xbG-CQYMJBNz6aqIl0mB1qlcxmXJ4KCZ867HQn6jOUWDOV4rhjyDFbmEDFGxTLqL04n9WdTJwG2NC0qhBN_tjZQ2uyL1hw1Sf2jZeT7sO5vayTaCKsYZ-aq-z-Ul3zwTvBjxq0VAteXJV-6pQ7usTHRw9WWb2XWHL-Ztq8o_jf2Ij2xW2_APvWeXe7kvC1aauOuLfW4diqmrXuDBu5DGBIcJj4s1PEKTLLWAnS4EjRJ4IVW-A8M-YIIX73JoAmSj8603qPNOkGvwXX4ERKgeAJJTbT2kTd_W6eGYlbih4oYe_7Gajv8fqeWnWN6j82Y6q0PYaxOEWTA_Y1cQ2VedgwdEzgc6p_LQNOpmzCT_EC8cmMyeXfgfnFClYZX3rY1dfSGh4SouBqHNmkGoFXOki8Cz0COzgiLHs0W5mFjFnVxTflgF1_ON9gV0qCEX4fqvOeKAIxOpBzFM-ReBJs-v85fNMyWM56tYgv0EHSnLS32-5n7AfPkXQfbVSlqsbZ7EdZfGgc1ESSakZwQtmYfDqDdSJMkcBvpxTeFjuIabUttBW3DjnbPtExq_VLwgQtOQmHBexla6Blqexlxzz_DqQLV8vgkYNhf7O_SAYI24dTAd5z-kxkVNdo--7e-sDyxms3rp_C7 "tags") ## Supported Diagram Types @@ -172,7 +174,7 @@ Diagram types * (lowercase) `setIndex($new_index)`: set the new index (procedure which has no direct output) * `LastIndex()`: return the last used index (function which can be used as argument) - following 2 macros requires V1.2020.24Beta4 (can be already tested with http://www.plantuml.com/plantuml/) + following 2 macros requires V1.2020.24Beta4 (can be already tested with https://www.plantuml.com/plantuml/) * `Index($offset=1)`: returns current index and calculates next index (function which can be used as argument) * `SetIndex($new_index)`: returns new set index and calculates next index (function which can be used as argument) @@ -198,8 +200,8 @@ You can force the direction of a relationship by using: * `Rel_L`, `Rel_Left` * `Rel_R`, `Rel_Right` -Relation specific sprites are not down scaled, they requires typically smaller icons. -Or alternatively if sprite argument starts with `&` an OpenIconic name can be used (details see https://useiconic.com/open) +Relationship specific sprites are not down scaled, they requires typically smaller icons. +Therefore if sprite argument starts with `&` an OpenIconic name can be used too (details see https://useiconic.com/open) ```csharp @startuml @@ -234,7 +236,7 @@ Rel(user, system, "orders", "http", "only small sprites looks ok, like the small @enduml ``` -![Relation with sprite or OpenIconic](http://www.plantuml.com/plantuml/png/bLJTJjjC4BtdAVRprmkZGWpz4L8b9AA0IgNGfWJ49Hfx9ywswztLpZYqRzzPnv0GBAfUxMhcp9mviyS-8uR8RMFt_ZEkigr6jMGEzAae8ZoCQiFBjcm9O-KTe-DHvPiYM72fvf1OMrCMam-7inIwlPeM3H1ZbD3zH2h0E8oZaFhlZRM-WNhUXk0ZvzdgU7IK7QWtfOyQuyHR7q-p__N9-wDt9zd-0FeueHVIz6_O4ggVRTX1-mYkHW4dz3NQuGB6Npi54hGYuaMN6KRoBa-hEL3Pf2Ns3KQ1PpFqmQBY9R1oY5g5w7LRCKbPNmMwCKwWutGQuWZiNzJ29eaa8Nngf5O6ke331vKse-HLWdVec3eLKDDfjpAXV7g6d088nNmsJaoYexNGaTv8fqOWoZZ6k82g7o0nLBsmTGuI-ODuefkWVy4DtT4ktNXRfnfcXkqT_EC8JmjuHJK4aoQOVKc4Fs05wRm4fosI0ckLs5k0HChwsbGgJz_1QBDQSGGwCjxH_dEnRtUfpijSbzBy71XA84n4LwQAdlo2rVpxj6FsLjFZInweplnAfX5rAsygb7FXOmCiZCzrn6ffLfYqh6zPkhRQS1gyDgvEWJdxABe-gjy8SSiClSN5kEBzthLhFzmIKghiFdi1f7oNWM26q_VNwwLsOgyHD1LtqJ3swKTtRzv_cADFlqOqNHDjfFSySckG26eSb3Y__7PtFxtuVF7rFD_VEqEdqm_e3m00 "Relation with sprite or OpenIconic") +![Relation with sprite or OpenIconic](https://www.plantuml.com/plantuml/png/VL9XYnCn4Fs-ls8inta7RLUh21M4Gu-0e7YStESZpKxReTbapMJlAE9_Tv9DMoskyoLvRp9lNYQvuQX3x5jRlI1dRDyWR6Fi-7rT1_qytr3SzgkUCHZl8heuDxwjEwjTgfbnR2ojwazlPtU9UlZwfMurHmn2FTxkdMx9pBkaNjrXOE-kajGK9W-ol9vS_yak2hqG-ljUHDehpelm0vP4zH9e3Tm5YWZPEiEpU8JBwO5jS4qE6JHywz1z5jzafi96JPQ1yNH1wKevdI_bvNHTtQDzl2qkZ-q3_kYH8qzahtdl3BJ8h3UOY54_5F_f1Ipj42xHFQ6LdZDZFMCZIXT5vWDCphF3pPqFhRQbcuW6XEWzh6W3sVTzyNsO9hcrL6JNnlU1CAJjk4hATlb15aD3xj1GEYi55iEnPgkVf4XgCFLggcBy8WRIRcCHVbOWyUeK9wp-nkgZ-XzMo-LIZMFrBeKQm-hD46eCbn1yxlTNckZvF_2XmP3dcRvGMhsp-poUqq2jzpi6lviE3nstM0uSffFgZllhwWPTqxVsDm00 "Relation with sprite or OpenIconic") In rare cases, you can force the layout of objects which have no relationships by using: @@ -274,7 +276,7 @@ Rel_L(x, s4, "uses") @enduml ``` -![Relation versus Layout](http://www.plantuml.com/plantuml/png/LSt1QeD04CRnkq-HvgJGA55FFQLLeGLBHIEq9rbrQ8HrbTrPshnzPmn5Svl_3_RRaq6XqOxIUHXK9sqFkmlYR9w2G8iV_tl0Yssj0TrD2a6XtqrZC4kX-Ct1O2-7DaZYGy5Kl-V1A0o29ceIUY461TgVUV_rBSsQwfoLsSVvgyXSpt4Aq6PIhdZSxP_ttd-sb2zhTfJ9cZrbkYPGPfHEBgvDpLEjjzmbtztjJldkRtVEDwoV_zB09mrKLuCmkkP8NHqt43A46uWOeWt43361Ku9iQfvSPgm1GyfOBXZUOxfWT8_vWl6A9r2z7UKV "Relation versus Layout") +![Relation versus Layout](https://www.plantuml.com/plantuml/png/LSt1QeD04CRnkq-HvgJGA55FFQLLeGLBHIEq9rbrQ8HrbTrPshnzPmn5Svl_3_RRaq6XqOxIUHXK9sqFkmlYR9w2G8iV_tl0Yssj0TrD2a6XtqrZC4kX-Ct1O2-7DaZYGy5Kl-V1A0o29ceIUY461TgVUV_rBSsQwfoLsSVvgyXSpt4Aq6PIhdZSxP_ttd-sb2zhTfJ9cZrbkYPGPfHEBgvDpLEjjzmbtztjJldkRtVEDwoV_zB09mrKLuCmkkP8NHqt43A46uWOeWt43361Ku9iQfvSPgm1GyfOBXZUOxfWT8_vWl6A9r2z7UKV "Relation versus Layout") ## Layout Options @@ -294,10 +296,10 @@ C4-PlantUML also comes with some default person sprite options: Additional tags/stereotypes can be added to the existing element stereotypes (component, ...) and highlight,... specific aspects: -* `AddTagSupport(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing)`: - Introduces a new element tag. The styles of the tagged elements are updated and the tag is be displayed in the dynamic legend. -* `AddRelTagSupport(tagStereo, ?textColor, ?lineColor)`: - Introduces a new relation tag. The styles of the tagged relations are updated and the tag is be displayed in the dynamic legend. +* `AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing)`: + Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend. +* `AddRelTag(tagStereo, ?textColor, ?lineColor)`: + Introduces a new relation tag. The styles of the tagged relations are updated and the tag is displayed in the calculated legend. * `UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing)` This call updates the default style of the elements (component, ...) and creates no additional legend entry. @@ -322,18 +324,18 @@ Multiple tags can be combined with `+`, like `Container(api, "API", $tags="v1.0+ ```csharp @startuml -!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml UpdateElementStyle(person, $fontColor="green") -AddTagSupport("v1.0", $fontColor="#d73027", $borderColor="#d73027") -AddTagSupport("v1.1", $fontColor="#ffffbf", $borderColor="#ffffbf") -AddTagSupport("v1.0&v1.1", $fontColor="#fdae61", $borderColor="#fdae61") -AddTagSupport("fallback", $bgColor="#444444") +AddElementTag("v1.0", $fontColor="#d73027", $borderColor="#d73027") +AddElementTag("v1.1", $fontColor="#ffffbf", $borderColor="#ffffbf") +AddElementTag("v1.0&v1.1", $fontColor="#fdae61", $borderColor="#fdae61") +AddElementTag("fallback", $bgColor="#444444") UpdateRelStyle(black, black) -AddRelTagSupport("service1", $textColor="red") -AddRelTagSupport("service2", $lineColor="red") -AddRelTagSupport("service1&service2", $textColor="red", $lineColor="red") +AddRelTag("service1", $textColor="red") +AddRelTag("service2", $lineColor="red") +AddRelTag("service1&service2", $textColor="red", $lineColor="red") Container(spa, "SPA", "angular", "The main interface that the customer interacts with via v1.0", $tags="v1.0") Container(spaAdmin, "Admin SPA", "angular", "The administrator interface that the customer interacts with via new v1.1", $tags="v1.1") @@ -358,7 +360,7 @@ SHOW_LEGEND(false) @enduml ``` -![merged tags](http://www.plantuml.com/plantuml/png/jLHHJziy57tFh_2NRqAj2YtDq90c8O4A6fEwhQAWFQARvBRnvjYHxqqP_twsWrcxTcLxe2zsppq-v-haskV4OBcjLVAVr8LgInGLSqFlHoCB3yEbvAhDMq9R6CseULYOUjGeqFxC4N6fP3wQd1pDF7JtQJggWHYjW-udfcwCzcSQhv_SDIKmNYci7JRdHuMz1YqPVIZUB9pwn2XZpzAbHTHfFxaeorjOpjkcCPPxwMeyF4utcV-Nfs-FirEFviQMQ3VndHhZtpKMxfSljZGYlhEFWvr29U2xyPPGnBU45g1K3iNtS68PsIVXb_PZN3UekgXovRY78Yn1orNMvGZjIXOO6c3y4TkoMAPxw9cdAwdnx-ZZWtXkssQdKZ9n2O53ROyQE1JfV7QHkWNqibLW_VQsGb4xYf2QqIwWGC4Li6275osngT5sDIYOn8FaIgmaY3WG34iwwyQZlsbtKTPIEuUmYjtEu6kIs08R-wyjQ7mGSHIUsnXlj06Dz1tCFdh3Rx02lrw3BXMI0AL4tf8Z4Wbbbh8GFNyBXy_AmaMCcgJHr5zpYJCuyBl1bYara7LPPwyMzY3ExyxKi_NOizVFFJOJiqZS_7OJrts0EqBork5jStLVZhtkuTnFEv6dGCELt2RTh4d5tH_eoIoyU3t_elg8XDyuVFv8Z7MFmX8AtTQLWiNbqubdWljB8jxA40fNaaG1IlrA9TQToeiYsGiYsLwHt70LbMY_qjeZCeZ8OCqacSAZSmdVn5kvSAw_VBsVNdsu-dpPMu0Yx2VdgCksLZy1 "merged tags") +![merged tags](https://www.plantuml.com/plantuml/png/jLJVRzCm47xFNs4Acb9rQzSmCGbfqgPjOaW5glqGZzCbkIO6nubybuxzzzXENLeQLl6mlDYv-_nzf-_EFYS6mssbeZTIPwhDKPJC3NsSJ0myZGl9PPksX2QhDQFcSLPNaqQ1TcUEY7CbqydboT7SXHw-p2OL4AEneSTBUmAaHZDk77_qqEJ0UAsmiZnt_AmmRj1GhG_5kuN5NjQgDcU3mY3gmJ2woFCLzXwAUB2SZey7syYt-Udxu-JKHTFQv6YsuxqSqxyv5lPB5piS8TvRnq4lKGxuOTf3vEExH0jGAeNifpzH1FI9_onwPTSjgiwgL5dieV2Bvx8PpqDebZ93hypuAzHZC1_quHA7KrBZ7jpq81pe8UwZYDRzZgc1Gp6ucryCx0AwQ1KOjxqlKLGM8gHcD0l8K709BDZ6ivQuhj1qESYOn9FaKYmbYD1xXeBEkaaORijTv9NKLi6lebyPN4uI6-3Q_6y96fz4wFgwZEbM6T18Ly7yinFy0KjmwmteN249K4gaBLaWaL1r8JCHkmitNZCBQp5gahMcuOPA6BUHsursHAc1fFCwUJMpHs5KUrrFDcrFNj_tK4pm8hA3sqrSru07GdBI_XcpUPSEjRw0UPnr92j3_UtR1TrkK8NTF-3Ht3zkiNiydKN2RMpyxfaOgvZyuXFTrgQynDNgn1fWVqc4M-bDuLAIo42fFww4l6NPIvBi8KbU94bhBWCJxIjd_OYCGcIq8HBDuDcg-9uuAMlEpRVlZxFhJzTVhsBRQC9XT8uwRolr6m00 "merged tags") **Custom schema definition** @@ -403,7 +405,7 @@ SHOW_LEGEND() @enduml ``` -![custom schema](http://www.plantuml.com/plantuml/png/dP9lRvim4CRVyoaegwPKoXz2I8CcHMh9q5Q99bN-Q7k7R7n9K8s9RAEsttu6i-5cT9EYlcb-Ty_Ty_Yu4n9nMURKkifOIai2zb7Aa_Wo6d7qCZnaybZYKW1F2oQ1oM5QvACJHQpI38GaDCEZXJzugj3kCHxbI4ZW2YMBIl4gXwTgkdLrlLZ5gtLodqpjkUryckqds0qSW_irnvDfuDwQV59pS0Dlx9lSg_cUuE1sOlAnvW0kDkOiezrsVH_hsgpwQsjXeo41GO1DhdTW3s7YcLnx2jpP1AKcrncclZSB0fFhp1vnNT-OluxY97vOHXt3T74R_To-Argx4q4I8WevCBcHRnHwpWcuA9ZJjw_nOL7GWi_RjrPmh-xGulOfglw24-1dch4gY2CYnKl63dD7yXAScyx5whh06QB9Xmx22noeQtIl4sz2GjwPqxyWf_UVK1-k2ozO5xRhra3rgckQCMYxZ0-YRt-MoaTRCxw76yjwgf-xbvP25ZdmlkreWgWT8lQipcOlcfgwtAREqSEwqiHIcWTM1GNvHwCRbQAH9D6hxEKeewqc6bI_RT5qdZMoFKSvgBR7t_ztp5Rn3UT_kTe94AfDTIKXIf-DrlTEDi28iA7s8snPD9ebP8SZBlXPt7-gjRHBeKEqhgpDzzMF98w-HSkllHlhJaqfS_eB "custom schema") +![custom schema](https://www.plantuml.com/plantuml/png/dPHVRzem5CNVyodI34qWyIU4KA99I6rOj5LAeUAFjhV8YIyGrN6GxQZqsy-9iyMqwIeXNk1tpxdt7jlYZWl4H94HuoQb2Iamc4SXJlpRQCJGo_2GYcCH5nnOabC1L0oJF1kT2AAbPy059cayMhY3fnBj7iDHXhW09b6qA1rdCJoLtOsRpc8LhjRHVJGrvwRrPRQVnBPdQTojU3oPUlQjpYSL1zjpngxEdOhlSUpTJdG-LXp0ZhK-os2tNT-7gZOhFqtDhptOmmXYdQiPiODYxEXSxUJPimbATAuoJ5rdvdawLvaTRDkkrdyTX57ui0nQcgdYDlYzlIWQknD60W826L2n4Qy4kjO96C-frJSxyM6HavpDcxEMS9zJeV3bKPJwd65WRpnZMU17XFENb1xcbc05MBtMmN0Mm2WYqOSR-5Ti86-ZVHn_vGAorfpk5JcTJq9zECw_OfpVZ5i3KQCw9AMWgPe7qJU_2ZXhxRNtq3ECf-gukqd1HPu1wvkM8eYOFgBFyjhCHLsJDxUfSdHZLQbZISy3BOE2-ETHGkceBL5m5jqCfQJn18FojybhvHiXtJEKWPGz_ltUqbl6rpP_jzME0vSogOfyb3nhqijDDa0nDw7QXviYhprBI0z7UVxlulx7hQnj3XMYsShO_5pzYiBWHx3ytkqPTx9B-UVs1m00 "custom schema") ## Element properties @@ -445,7 +447,7 @@ Rel(personAlias, containerAlias, "Label", "Optional Technology") @enduml ``` -![properties sample](http://www.plantuml.com/plantuml/png/ZP9HRzCm4CVVyobCNaYbhc4L4X9FcpeGI6Mhe834ItLDZiQIuxFiiqP0V7VEqRfiQO0z-NB--P_xnRa839vZQx9dsbOcrgWQPXTUbwM7syL1SnFtCQ2lo39QNbJKbiw0JMVE0jT6xylLoxDDQdt-i2vR28nUMhihT8QwDXrowGNPSrNZTuY6LODGerSRJmuzTtFr1Kp4xBAkZwqYluOMyxdAtne8JJvxl7dZ3s3rJs1DDa7VY9YSXZ6t9J9f_xrbz1PPlVaXGtdqwjNYXS0Rz85iuVhbqcW80gzXZ_sf6vVomQWh39NN_PCgRZKtzoRkxbLtIZF9p3uX7oTurtUB_FYSp_Easeiz21sFdQhpnFImL8bcq2QSJw7BUtJv05qAEjp1xffgtAqBAylVHRUTm_-OLp4mjHFYwbUMAVLL68hZ3p2JdPEnLuEYbDF8e2PbGbPanSvAPdMiJdIsM3MM31swVxjGdBp0ttA5NM1iYz0lu_od9MeC_T_m4StZ_sjgxb7k82095sZhs9e_ "properties sample") +![properties sample](https://www.plantuml.com/plantuml/png/ZP9HRzCm4CVVyobCNaYbhc4L4X9FcpeGI6Mhe834ItLDZiQIuxFiiqP0V7VEqRfiQO0z-NB--P_xnRa839vZQx9dsbOcrgWQPXTUbwM7syL1SnFtCQ2lo39QNbJKbiw0JMVE0jT6xylLoxDDQdt-i2vR28nUMhihT8QwDXrowGNPSrNZTuY6LODGerSRJmuzTtFr1Kp4xBAkZwqYluOMyxdAtne8JJvxl7dZ3s3rJs1DDa7VY9YSXZ6t9J9f_xrbz1PPlVaXGtdqwjNYXS0Rz85iuVhbqcW80gzXZ_sf6vVomQWh39NN_PCgRZKtzoRkxbLtIZF9p3uX7oTurtUB_FYSp_Easeiz21sFdQhpnFImL8bcq2QSJw7BUtJv05qAEjp1xffgtAqBAylVHRUTm_-OLp4mjHFYwbUMAVLL68hZ3p2JdPEnLuEYbDF8e2PbGbPanSvAPdMiJdIsM3MM31swVxjGdBp0ttA5NM1iYz0lu_od9MeC_T_m4StZ_sjgxb7k82095sZhs9e_ "properties sample") ## Snippets for Visual Studio Code @@ -460,7 +462,7 @@ It is possible to save them directly inside VS Code: [Creating your own snippets ## Advanced Samples -The following advanced samples are reproductions with C4-PlantUML from official [C4 model samples](https://c4model.com/#examples) created by [Simon Brown](http://simonbrown.je/). +The following advanced samples are reproductions with C4-PlantUML from official [C4 model samples](https://c4model.com/#examples) created by [Simon Brown](https://simonbrown.je/). The core diagram samples from [c4model.com](https://c4model.com/#coreDiagrams) are available [here](samples/C4CoreDiagrams.md). @@ -468,25 +470,25 @@ The core diagram samples from [c4model.com](https://c4model.com/#coreDiagrams) a Source: [C4_Container Diagram Sample - techtribesjs.puml](samples/C4_Container%20Diagram%20Sample%20-%20techtribesjs.puml) -![techtribesjs](https://www.plantuml.com/plantuml/png/ZLLDSziu3BthLs1zgJAZjTkatSpigKwS9csTZqRoPdhIK19iiwL8BKd5yNJwtmjIiYp5tSdwO54W2Bm7F53lZMNQrgM0aSLyRJNFq7mpe-0FBdDH5mXhQolpzsIYsMQyudPTPxL1dIjfKTfnhie9ApHdyb7KLJqvV_lddM3IBgxd4y4i6akcz9oy6PUennMb2bv1BUbWIG70hX6MIWYruN85Wfo0oG86srmRMYcWn21KpeJOKemEuM62O3xzUhj8qkJsBftTFjo4Hy6hrZIDq_ZpHN9-HRRMzF0nkKhd5vSNDpCo1i4TQgDaUl5aGoQLt9QgDgaZ7S5ekZF0WWoZezOvPAkLnXKHBZhFplBSjIYvvCPgPZcbsRaFhBiZGRmr5ilqJDMoO7eRvc-YVgV6rAgZ7m7Gp_zrTGWtcAMigiZx0JEOLfNWkGyz8jCdziWYY2ljQdxzpta4YIff6qx7Jsv_wlfXNBsrSOL_vBY12bKbC88cSmIj12B0HtgGuPlAw1zjFeQbLgNldMyNEC0H59pqGs-klnyJC9XRvKaEaC-oKAD8YunmtAFmcEdGZ5cMCOCEtlKs_ZA7T-Dt3TgOmg0vmEUVK6AP4Oirfr9Gyk_cETwC5IldVidjLPs1nagrB0wWXKikqFYEKDeFz09DVnoA3zFavBW7no3J-HguBF09pUzeIcN-5NJWHZawZY3uivwYaYirEuFZyV60f2_iVHnFffOMIyJ2G9W9jGA2RSsHBwxT8Dh3b65T5QH7fxP5izff0KwTbr54Y9GowXoeg5fvqb4RT5YdTbIz3e1Koy3aQongGQAdPd67uMSdOZTGTiDj0o5fLkJHssuk6DfjiWmt7Kq2C3fpJySk87qSZEXU-3H3nd6vIfAxcFozz_CvVS7zTxFwtqVycMwx9sDMjArp1TjexafhbU_hb_daq-oCHh1IsiB9oUk_sjnTd87gzh6Uk-tarFFe2Md3DRfkMfKhqIOxFdtzvhI5dIxsydW1UE6K-WBwVhW1_eUE_87V8O73SlrVElkeUyLTadvtWgQvN2fTDfVjVcQwilL5q8NQgzEv3Y9aghPGrHdTiZGGz57oyy5fQ3c-47KdQnzqDqorSLSp3Re7rnlsVYZ7TSwswNrtO-vBJLllKHRqDVm5 "techtribesjs") +![techtribesjs](https://www.plantuml.com/plantuml/png/ZLHDR-Cs4BthLqnzMGVGshj9jm5wMYTEazqw7uta1Zq9b3YMcLAaIb9nZAB_lKDAaQsuWEk39G_V3D-RUUElrZ7Zcah2o66nTaRaQ9_jAFf1g48s767jN6r_dauDsqnAuTPDtbWqXLOEbPiKkfhMaYbVugDrN8fyUldZnmSVMjukfXMp3Ws5ialAO4AXcTI4ZJv0eoYveYBWrWWhBQNU25M2910mnM5mB8obDmrqEKXTC2ctLADdUNX1j9ZzSRzCi_J-8PlVFzsDJw8FNMYMPCclL-db3SMwqDEtz2PRN5rVtSqf64KFQAnMsTMh6pEbrRRIZSsyy1X6ixS0B2amEkd0OrQM1alcaFV8Fl8UoYkXX7M6EQ5L3nz4trAYP6iTLjc5RXHdPZikFiVxqvhGk4x-Ze0-uQllmtY3USRgcj1FcCEihgKeGkaHXRwp5nP3KXlVyzlVBsD8TKN7S3vvzUSpFmyBdfhrZNyHk84QTIqnXlRc63eRn80lzA30iyxf6rqnWPNH5Ssk6nTumZ5mGHvYCiptMmeM2wUzo27pUJusA3EU4uz7b84p9SsPOpcpwEdTRfFV5l1bygLbcr0Pj0VymXCgh79IiHOrHPZyqxxdcpDUUlYrS3TD3WPhtQaue3PU2OasJ8Ik_OL-G3kVaVyvIyzEz-XOPAPOWr0SNz7-bqobxL-I4kuqoGa28UG6YLgLUdu1fvFJWSZGsCSacSuSlQmGkOLnBdK9HDlPaz1Sjq5qzf1-KtFcWjkMxTkR5-3SewoMw9qowW4MQgE3wBWhEknJkAtp0MW536onHjv8v4334fx3Fxs9_KAvZN0jXRHz8yJUSVidGwVjBSD3BzFIsGKzWxg8_76meZlZqmvPh-KcJHyImXDwkAV7uSDTFPeISlhZFHiptetEDsnZX6-jqpwLHZ_zFh-W5QorSN1szkadAZIeitFTeDPxMB3J4B5df8qmwAVfTA5bTzdf-QVFvntjRDdRunXnGh4Zx0Vb1loVUl47k23WIBl-hvnTrPtZhj7rXWQXLjfKOQoxdUdRrazqK6hdJe8EA-IwSL0tkHG559fZkn_2QIFmIDNErg5elqoD5QhqYnx8zSi-BEMrBjWsU-p_CNUjfgElg7XJoNy1 "techtribesjs") ### Message Bus and Microservices Source: [C4_Container Diagram Sample - message bus.puml](samples/C4_Container%20Diagram%20Sample%20-%20message%20bus.puml) -![messagebus](https://www.plantuml.com/plantuml/png/bLN1Sjem4BtxAxRqa6Gc2Msdfvv2W6dQaa0mcKnFdhKiG1DPqaWoAUdqtxkoZR49CqsvOArNxxrzkmjNpgFrHIwXbtFdSCNJmlMYTq8nMMGSrjuRzwNVj_XykH9-NT1hRfbMdYj_oNJUnymAL1jPcA8__7mnawZym-saBz5pvocK32aRXUBsqX1HT0A5eeiv0O1VSrXgAVMpK2kGb0IeCkYy5jRHamOY1gaPIhabZ4RXQuB8FGbbq68EpnRDeyZy6Zvz-D2Av_ZhjYet5Y-yV1bD1Z-d3ujaCPqbe-dZtUbPT5A71d4I_nWlXZSKgqEFtnOtoMJyTNmtec0KpRXrMfsomdcTStiEm-QfDu1Tk4UfyTPvdYVNkb0Pskqf-qWfkspuffRQvkY5Lhqp-1r5G9-clbCqffqzC4OALcLJ_3jkq34hZ3-7WLeL4cq83uA_hX7XWfavAYe-62mi6AkNGlAWhaktkv9GppU2yJPtN8LslESG6nkQUAsr3y45zSveGLtKIq36o6vgjMraW6YNUiXS3sD2uqPOTQ_WccQJZdDCK-5lxqiQYyePRNq9JkbqdPZuXkR7lSQrFEIIpbP9yrsiNTEyIBVXUsXv66HGGQiKZcUGeSUIhG43KrYZ7Jz2Y4KcV8ji4Cvjek7x_kNTU14UPrPlH4PasgvG2LTwS_5C8IXX0jCIcP3qU8HhbEuRbgNjNer8SOgkv9jQP9B3nqyid6AlBNTlQmhXx-qh2VREjHbkj_7zf0MEE_DUoBmD3I21bqCXvRvXZQcOmLgp__4siEoT3QT0FWuJi3_MMbhr0QQwyFMaq2QWXpLkw2UFbemhdX7VdoYQSzdQwch_7e8Q-hvPB6Pna4L9oRnQpYChys2oSeIEcGoX_bK0GxTLx1o-nzExVWTuScGDAnqnLvbh2j01vP6diMPFtDFjIjNhoztTga0QRKKfjWLwrh5WZz8TjThUiekY-Z4QNG_h4hhRV6m5toQY0tEuMF-6A36Ei1yCzK4f5VK1MtVowXirLtadck2Mp3_2ra6Yn2lIJVzQVm40 "messagebus") +![messagebus](https://www.plantuml.com/plantuml/png/bLHVRzis47_NfxXb3qs196wBFUsfZcqixPpOjHm4Un9EqjacIf44IJbpXttt7IMReHSLQFCGYJyTVt-EF7zq7grl6maN3Jc7MofRTv7z8bGbsvfWvxrnluz65fzljiBlMlvCjjBAa_8tbMv6Hg8A1DVErrAKeyblryi0FTxFHmqwJvQXOi8xK2YoDuPhipVGAjxSC0du7S56IwcVXTg2v290LSFPPs4TlsbWSP2wGYaFp15TlXR8t5UX35fiuDcYUHArty67T-yIlC6_x_l8kVX6tSTiFlvhyRWkrejbCLqyFLo-pTuSeN5Uv7_ErfCxnexGqwVrNJ6V_J5xc3AOPKkoJglBgdLUDsIlO1BVBiPmWY-uD3yuJqrngrjLeprSLk-vv5GDdzH6smQzqEhYBVoJPS1_CTyb6fDMZusHekgh6V-CUtIL5SPVmLXjMuasmEFGNnTDkD3C1XM73mqM5epL6o69tPtBnJY58xiN5QNQUG-TTAyWDpOSugtMFe3h7O7HGddG6y2g8kU0iqKR89AehvIF5xBWAyTSnxE2szO5wXMMfV3tNpePYyePRNr7pkL21INQa_BkDQ-bKCi-aqYh4vPcMhNb8Jmdbj2J0nMyIk6eXXezTcgH34nhZNOq88XjBNmYDWxhL6Zow-ZcOROEhqkhzw9cCMstg8JhUdFzp11qD45fWvMG_3gWDIrV3gmkqxEQeiSINQUti5X9WlSVgh3AlRRaVknGc3yc3W9fvrA5-qF-PPwGuwbvtwY6FLd7vDsba38Us4jJiOQThdwcjwoIT3QiWlXiJoekevSa7s2fMt-yAU1tw667U-9_nf2YclN-pR8LoMIg-_bx36xuURTUBtCk2qN5gX_EWP5vD1pkEqs6a7yRoD0TL7K5d_F5m-YCU3umXhsFd5JjOW0TM9wep7NrbJplxbsztfpCLYI9tjhEx0jfppF0aborsDx-54N_OpIzdHmZd4_pm0Z-e8cKff-8dw7ehGoeHsWmIY_zFxNqviKTlLQ_9vlZeLWDgPqnSU57zjqsyZy0 "messagebus") ## Background -[PlantUML](http://en.plantuml.com/) is an open source project that allows you to create UML diagrams. +[PlantUML](https://plantuml.com/) is an open source project that allows you to create UML diagrams. Diagrams are defined using a simple and intuitive language. Images can be generated in PNG, in SVG or in LaTeX format. PlantUML was created to allow the drawing of UML diagrams, using a simple and human readable text description. Because it does not prevent you from drawing inconsistent diagrams, it is a drawing tool and not a modeling tool. -It is the most used text-based diagram drawing tool with [extensive support into wikis and forums, text editors and IDEs, use by different programming languages and documentation generators](http://en.plantuml.com/running). +It is the most used text-based diagram drawing tool with [extensive support into wikis and forums, text editors and IDEs, use by different programming languages and documentation generators](https://en.plantuml.com/running). The [C4 model](https://c4model.com/) for software architecture is an "abstraction-first" approach to diagramming, based upon abstractions that reflect how software architects and developers think about and build software. The small set of abstractions and diagram types makes the C4 model easy to learn and use. @@ -498,8 +500,8 @@ More information can be found here: * [The C4 model for software architecture](https://c4model.com/) * [REAL WORLD PlantUML - Sample Gallery](https://real-world-plantuml.com/) -* [Visualising and documenting software architecture cheat sheets](http://www.codingthearchitecture.com/2017/04/27/visualising_and_documenting_software_architecture_cheat_sheets.html) -* [PlantUML and Structurizr - Create models not diagrams](http://www.codingthearchitecture.com/2016/12/08/plantuml_and_structurizr.html) +* [Visualising and documenting software architecture cheat sheets](https://www.codingthearchitecture.com/2017/04/27/visualising_and_documenting_software_architecture_cheat_sheets.html) +* [PlantUML and Structurizr - Create models not diagrams](https://www.codingthearchitecture.com/2016/12/08/plantuml_and_structurizr.html) ## License diff --git a/percy/C4_Deployment Diagram Sample - bigbankplc-details.puml b/percy/C4_Deployment Diagram Sample - bigbankplc-details.puml index ee61197..76d135b 100644 --- a/percy/C4_Deployment Diagram Sample - bigbankplc-details.puml +++ b/percy/C4_Deployment Diagram Sample - bigbankplc-details.puml @@ -6,10 +6,12 @@ !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml !endif -AddTagSupport("fallback", $bgColor="#c0c0c0") +AddElementTag("fallback", $bgColor="#c0c0c0") +AddRelTag("fallback", $textColor="#c0c0c0", $lineColor="#438DD5") + WithoutPropertyHeader() -' dynamic legend is used (activated in last line) +' calculated legend is used (activated in last line) ' LAYOUT_WITH_LEGEND() title Deployment Diagram for Internet Banking System - Live @@ -61,7 +63,7 @@ Rel(mobile, api, "Makes API calls to", "json/HTTPS") Rel(spa, api, "Makes API calls to", "json/HTTPS") Rel_U(web, spa, "Delivers to the customer's web browser") Rel(api, db, "Reads from and writes to", "JDBC") -Rel(api, db2, "Reads from and writes to", "JDBC") +Rel(api, db2, "Reads from and writes to", "JDBC", $tags="fallback") Rel_R(db, db2, "Replicates data to") SHOW_LEGEND() diff --git a/percy/C4_Deployment Diagram Sample - bigbankplc.puml b/percy/C4_Deployment Diagram Sample - bigbankplc.puml index 45b88c0..cac0187 100644 --- a/percy/C4_Deployment Diagram Sample - bigbankplc.puml +++ b/percy/C4_Deployment Diagram Sample - bigbankplc.puml @@ -6,9 +6,10 @@ !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml !endif -AddTagSupport("fallback", $bgColor="#c0c0c0") +AddElementTag("fallback", $bgColor="#c0c0c0") +AddRelTag("fallback", $textColor="#c0c0c0", $lineColor="#438DD5") -' dynamic legend is used (activated in last line) +' calculated legend is used (activated in last line) ' LAYOUT_WITH_LEGEND() title Deployment Diagram for Internet Banking System - Live @@ -50,7 +51,7 @@ Rel(mobile, api, "Makes API calls to", "json/HTTPS") Rel(spa, api, "Makes API calls to", "json/HTTPS") Rel_U(web, spa, "Delivers to the customer's web browser") Rel(api, db, "Reads from and writes to", "JDBC") -Rel(api, db2, "Reads from and writes to", "JDBC") +Rel(api, db2, "Reads from and writes to", "JDBC", $tags="fallback") Rel_R(db, db2, "Replicates data to") SHOW_LEGEND() diff --git a/samples/C4CoreDiagrams.md b/samples/C4CoreDiagrams.md index e639581..965cc27 100644 --- a/samples/C4CoreDiagrams.md +++ b/samples/C4CoreDiagrams.md @@ -1,6 +1,6 @@ # C4 Model Diagrams -The following samples are reproductions with C4-PlantUML from [C4 model core diagrams](http://c4model.com/#coreDiagrams) created by [Simon Brown](http://simonbrown.je/). +The following samples are reproductions with C4-PlantUML from [C4 model core diagrams](https://c4model.com/#coreDiagrams) created by [Simon Brown](https://simonbrown.je/). ## Core Diagrams @@ -44,13 +44,13 @@ Source: [C4_Dynamic Diagram Sample - bigbankplc.puml](C4_Dynamic%20Diagram%20Sam Source: [C4_Deployment Diagram Sample - bigbankplc.puml](C4_Deployment%20Diagram%20Sample%20-%20bigbankplc.puml) -![Deployment Diagram for Internet Banking System - Live](http://www.plantuml.com/plantuml/png/pLPXJoCt4FsUNp5DAnqW812XwbJff0i9FK24H6meFQbID6jFDYvUUsLx0sbr_xtZtN1X8UYWz-L0Yko9tyoyDpDsFlg0BfIvRlsaZD2b99Y7KFZVEXs7T_kP2lCoBJqvOKqW4_Q5pJk5HXCnUpv8hT9E_sXl74tNmujEZZwGOzDqG8Msopo2YXZW7PI6qT40OKumirhREsKoqCeGe97G-5evpoiB71sq5QZradryJND3X5PFoWbcILaKreMjzemnAOhRzYxyacPzgwtxqFvP7CJ_zdQBlScbmLm9q9GHnrS-HfEmXIAe1GPUAWEQALKvRZFYelTvT3sPtfnDJgSN9vzEBWTRx2cee0dM-S10OUOmPv8EpbWvPoZ0CPhRo3TPiaOvxC65Mb2hjOPDBwsahKABNMWVgwm206_RJ_OWCI08YexRs_-sWF-UUf66GQdAKiRiOQ5sTdR-2lVlewlhjEJwmU6l-mT7S3597bniSeC5YZang5SjO69pWQ7zr03lz-_NRkg_lZK1MJR7JbG4ZC-WLnHQyNbbJVHnZWkiAfyKBYep_ACVpMDd5qgIVoxTZ7ieWb6hi8I5OZIS9wFBpkbaCaw0G-npPHyo-DAgFZVgiv96fWU7ZuIAsxTAP1qA7IKQLGkkwzYf7DsolROTTiMByWpIBPdoqG46JD5JX5sHnfedF9WXORbpZDycmJggUjM1eqpvuAhJe0mtN5wjTs6EVauIi0nppdMbEWX7CcvH-rr08SXxq3RZ3GNnTl6wJV6w6yNZ-GkO-G_hYTo6R-dPVIneGi8Q-LpIpOvVLhdxeyZyBF7N2fy-5loEqdgiZ_xVM7U_SwuvFWDkA7tbN0z8gmKvNrtmFl1n0Qk79PwEvkSZx_b34nIO4U0wpAPM_VByCirjJB5V-c1pSkyyi46nEqaB9QZcMsWEEqh0EkWPwQoIaNAJQWtZuyCQpwW8_XDpP8QDImj1grp5nyENgMScTXQPVUio2nR4AaqVRxQ8KQwPBvFUH5BOl6YoZ9OolWunO-M4zNOMu4OPQUzyJAXcdQCO9I-z8AdZi-HM5JwEkzhX9sjZHVfpPtEMP6Z_KLeZ_AuSpUpzxiftWZEM9eewLCBL2Pp8Z1x2DVNr1SQ9gsizvbflQgb4E5NKhT8pMQdHDONN-lkqvdw65MjMUjrKLwI_Da3zbWtnbWF65qrmLCyEOoP_UslgbuZH38giteQONjT3nS36lDYAbLWN-56ggrXL69bMjnfA3pEkJYNLdLE17WAU3uxxJK3trOZf5L-XQqXT7lBrhv5W-L0hEHtTJ0UVBtl3i_xwzz57ChBCzNy0 "Deployment Diagram for Internet Banking System - Live") +![Deployment Diagram for Internet Banking System - Live](https://www.plantuml.com/plantuml/png/pLP_J-D64Fq_dsAQLkA7W41AArJff0i9FK24H3YKLgg4nhiJPylQQ-sk0sbrtxqpSgW9ILle_LCZHTxnl9atRsTs-HWY-bZbjWNmbIcKhJJ1BCOo_D3fU7myo4oSLMaLo2jNH2hYWN9vfxHO26e_H6rDskaVxu_5T3kywkGO8dastG-ej6wH2wYK55jG5OmM0yGPmTHPwnvDaO4r1G4M6bO-6n_upG5d1-iKMhjeRJKqDsHezRG-ioI62MRRxIbZKbGFxJtu9itwpZh_eVsrEfI_zevutv1Tyupq55TznIeSdwt7tvuC1jzn1ER3l5HbCP86Inbn4IO8PGtRgAAPonSm1LZM1IJ83eEkUh-CRYVtTnUJy_khiqzdruDj3XPDj0HDKJ0mc7dCMIaF5oo_BoZ2AHOF8bgoOA5ps8ShCwTMgu7TNpjDswLLUz0-DHa807ZPVhK6ZH51aGHkx_pH0dvUHz45WrAJfOpPnzBixkx-6fzE9DHjMd4JmD7t1uV7S3L9daDi2eCbgXang2Sl11ENAupjrmOuENXgmjHFtnKHMJRFGOm0nXVGAqjhsD-uGc9SuXn1sYSflIWp_Aalvh5tSwCfh4itvKOKC5eJ5p0tZ8RBP7JTEPzCnWbmYWFUN5W-drlrxwR2bjBezF3eXL2oVAz4pgEo8j58NWZsOUnDZdxHRcn7NVMtyWpIRPsowm0ZfXX8ODpTMDS9psP8MEuSvMiIdIVfLVBWAJCXUXHlC0KtN8xolWSp33FIW5MSCTUbwg0yQLcY3Nk0Ib48O5t62uhg_U9rLyNhRXHFHXEpyA4PrXtuDpsxBmLDIBb2hqlwpu7NLUx-NsHU8_vMuTENWZzIMe_ryNyRw-uNpZNdPy0TfM-Swm5PCoSVWAM24DbTmV9s4cynhuzyu1zBK696W4sQJQtwUVqmpPrGx5SXkfpyLW0s60wdQMuKrVMMbjEE4d0UUeNspcWfURNK6iRkmnhFA07_Z3boXIk75e8rkP7B8rHfe0XkkbxP-c4M7QWbpI0dcs2CN-NBHMygKhcyNArIB9NS3iBOUEM2cqQuCuLsZq48rLNdg4RI9vjxpRCl-UKEdzOh2VZ9ETcH_ioxd2KPkj-DjGW_6azJzxItZ9tWbAKHKOT6-Ph0cSv8qgstKYXH9gxUwp5cjAcb4kLDMRTAhyWgYtvLU6k_J6lkPrXMpKetJNL3zgy6gE-o8JvmGhdH56SD752O_1PSKTz4Z1OGL_K-nFrjFLGCN9aN9mn1DHlyWcgDh2zPBTr-GwW3JBtBHIfuz2RISyBBmMb_5T1z0sBZUILqR_XGROBK6yP8ZH4Ppawjv7nqr_odz94ANUNsJm00 "Deployment Diagram for Internet Banking System - Live") **with details** Source: [C4_Deployment Diagram Sample - bigbankplc-details.puml](C4_Deployment%20Diagram%20Sample%20-%20bigbankplc-details.puml) -![Deployment Diagram for Internet Banking System - Live with details](http://www.plantuml.com/plantuml/png/vLT_Rzj63FtVduBp1ZGfd1ynqg4OKA2EdJKfuiI8dAO51XYdErg-zNGdt9sSUaE_-qX9gUtOQLfi60RC0Ho98ldu-2XAVXsYyB7CJUi7RQKf5S8inYBySd3WnTr-fkEiJCk0NZeRqSPzwVA3mWZBCNiXAgFJW_xnteXDDyEBWro4Y9vCam4MnYro3YeOu1cKbgBP0766C7N6k3jjCp3Q8WYhOEsoze6E710w62U5CGlAyQNCBGYjdb9ZaILbKJWVTzfJYac5_DZkm4zfrdV6-LVj7-KX_xLtMxT4pfLnv5s1FYxEK2ZqExijGb4BAt8jmM26L9SEN8M27I6Zdek8PB9WY6fL-ov5NFG-NDsC9xVduxF9nUcRqyi1Puew6eHbdJ3G8lCY9_8Upcr4Rp72YR0VkG_98aJCOGykz1nRhMNOvD8ft2cCx42RhxNf_udEga0WyyDpK28AaCW0xTq_Mq0VwiqzqvtsXPCYQcSfa8wjShRg_pKAHOLGRpZY0VxaOaTPyazrbXBEdYZqy-VFVukVNdAMcxIacO2Zd_SFZ-5YdB2j1tUOGa0_HmyUW-Rae2thktffAdpU0I4b1kxoN0luzGMSdB_PEnzHhc7OloUnGUIjc0juXpuqP5vIxLiTt-UV-FgBe-xmSPV0BaU7tUEbpxOsY4B86JB1wW36BfSYjXyQuEL-XTcpG10MWYkzHAXAFZrTQS0QFVxqdOr2M_G4fJd3w1nwHM7qKZNEKccM59wxEdpNPpEncMk5ONEufgML72oCZekgnmBU9bUN1sVZyIW1WjXV8VsvrNm_FJcFJaipA2ezF5eP6pvzR636r3kYamk_g4Ou5G4tUhGLotaX3KjoLHt07epgFEsbxQWh7u1qmEWvBg6UacEGxgYKKWoQ04vtZKRKVOLxCoGq1BdWgqbq7dbxL7T0faFqbJTeEtK-huuxC1DXXWf46MV4gL4Pf4V5fyA4-xi3ZCle1AFyRh6-VczVhwZLNLUh-pMr0afdrLQzQEb6aOLNopMy2uzBUDr8s5tLCAcoRrMnjuJkG8Z2gdIZXawzjNdNJeKsZanGbBvm0GCuQnPF5RafVlU_elvcuPlpyC-iVHgDT7KaQ6_LU__u_xNthvkzt_rN5ZyvKOPRJBznyG-GLvaFLOz397S9pJiRUxDvyvaGwCiW529344kORRlby-RxIEwun7uPeilHFmj01atf5CwrnBehXI7OgmISXvvLtcd5bDUfrc7aFgpZAOg3tujS4CErfve0etCTKK4eqq1Ct9IPFVMqYmvaKsRWCUCOxTVh9TBRI4gN5-iisL8IN9ihrbwwuAOHRhLLxYvmGJNhNCYhv9ximwof9r_qZS8dzHadVECSAzAVUKBhmD3zeOsXsq9xdBfFdIPt8gR2QsxgK4jV5t2gCcIupL4AXU1TL6iz8gstZLGYlIxgKUdPh3J2hpVUcB_NQnxwXZLrUZbKj42_343ziZCK7mcGNtaaeGPAo9Ny7fojNrKeceE8rVT5J6xgcue2r-uNLx6IIu5NIcsmAXYLDa_H05DIfshLdTSHxm7V3axwwm7TRuwWxQBIPKWj3uRwHJuwScebPrUtay67ozxmlB_yYV4QhIfpynS0 "Deployment Diagram for Internet Banking System - Live with details") +![Deployment Diagram for Internet Banking System - Live with details](https://www.plantuml.com/plantuml/png/vLT_Rzis4FtVd-AgRQXJE7PYf4Cne40TssjSs8aHEKq7330eafQvKgH0KawyeTzzTv8osx7J7zWm35W2A19rT-_UlUE9UUC3Sw78TECvS6jMqWLG0UvKM08JGWLb3TFuAikO4Q2LaS1SMcJI13WUN0_7lTde_N0-kkoFRmR3rr4xWc2Xy1AqvKphTUEPMi0FA-OKIxISotlbWsz6ZpsZemR0CsMuBeI4TgVTxlJFvWEPQxici7PEIJwJsijjmsK8kV-fqt7ihfrYqaM2q0wP1FB1j3kvPeO87liWj4emwl6Kbcucuqx6V93kC90HQj5ez8IOiJGkyjowq8mMo2XX_6FKWk-Jj6-rTQ-Zx_W9_IA3Myp05c7gR8w5N5z89gHh7ZMmk69jMAOuQ9bYQ52UQYIWoNXGAnOaBXdGc4zPuoFq6FT-kRgPpMz7iulvUFXsU3cWI445BM6JBWmKIntBO64TZ92sCpB0EJCVbKaXNYF138vXh5QoqTYupI-jaCrSynP4z2x2l-SgBHq1bny_Ws210PS441tzWH80O6qUc3QZCQfDpOAEU6-4DK0DSuqbm4HATG4UuS_7JM7GFb5fWZZ7B5SlNhpuDTo_eYWtIO72mUcFxPCp6CzYMkl1dKm05SP61IUzek1KkR2KswyMp6KjO9nBJrLUAGO_luJpqTlZqHHZJNpxWSGUaNTinU2zTBucymfpFsZu8RkdzozFkvEdJJoPd9vqpxPjzil0SiQNaWYMDp2p6POpUhm0hzebPiy0GXZmjd1SGfdoSBXLW1rwzDEt9Z1bf4CeHH6c8-ZbkLORrSeef5cSEwhgv7sVbf7DIWdfzvjhKHXUpGSLrcMD6RoBhoux5xFPD0Q4Q6-H_jGehr_JEKzsIzqe8ZavtMeRUdogOMPOEwIJCRSkMpXXNkxLw22MTOnhakIgl85Zc5PneitQQPS_0cc1njsqWVgI78EaAH8CCQWTADorrAoUkm_B46CJP8pUni4wMKuFsW6fyi6Lrg3Cmhgil6_1alcb5C2Ai4HEjSh0dHJqoBH_s1sWROeFCl1l5klpU_jwIwtkhbhTpwdb9SScEAWN3jt0KlzwCuQFu6a9hsi9kziQncNqWohsDj0jy84PaUpbqAgcDitQ1LFQuXBaXSkjbnwiqUil9RalVlU_elv-ullzyC-CVMoDPBibS6vLS__i_pNth-kvt_rN1ZyQOOHRcNpbu1z86cNEbpNs0Sqvr0ShigRb_M-2nukMaBDK0jl079ejd_RF8vcb5Fk53pQJxha7N50OJiYLukNkeDGHzYe6ww1dXBDA4ELTgfKRcaygV_GYvmyiOyXmvwl6GAjCqVdB5ub79dP1pBxqjGiMU9scfpOZ7-LsyqNIXqXoc-MxB6cbGBY8CbQEMsyN0MuLRgSxJmbLh3F6h-87ie-Z9WvjfQiLFg-UAE1RQqcH_j8XMWiczdUbDMuBvUJ2thVgs373hQEeg1F5NPN0KAIIuFPRoUUCPb6bzHIrFjHICNSghrgbPz92CxTRUAt_NgsfwMlMMEbDK-40_Qi1giFEX7r4G3hoS4Jr690o-SrRKnrLq9kSaDMtUSnlgas5ZZlxnPQi-4RWhLHhh1969FLNrCC2rIbBTUTKa0-0xmRd_Ls7xbTxu7GHoSQbaaVwwY0VB1eruekhsys_5c-a4KMc_mG0 "Deployment Diagram for Internet Banking System - Live with details") ## Icons diff --git a/samples/C4_Deployment Diagram Sample - bigbankplc-details.puml b/samples/C4_Deployment Diagram Sample - bigbankplc-details.puml index 42c9e83..a37508f 100644 --- a/samples/C4_Deployment Diagram Sample - bigbankplc-details.puml +++ b/samples/C4_Deployment Diagram Sample - bigbankplc-details.puml @@ -1,12 +1,14 @@ @startuml -!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml ' uncomment the following line and comment the first to use locally ' !include C4_Deployment.puml -AddTagSupport("fallback", $bgColor="#c0c0c0") +AddElementTag("fallback", $bgColor="#c0c0c0") +AddRelTag("fallback", $textColor="#c0c0c0", $lineColor="#438DD5") + WithoutPropertyHeader() -' dynamic legend is used (activated in last line) +' calculated legend is used (activated in last line) ' LAYOUT_WITH_LEGEND() title Deployment Diagram for Internet Banking System - Live @@ -58,7 +60,7 @@ Rel(mobile, api, "Makes API calls to", "json/HTTPS") Rel(spa, api, "Makes API calls to", "json/HTTPS") Rel_U(web, spa, "Delivers to the customer's web browser") Rel(api, db, "Reads from and writes to", "JDBC") -Rel(api, db2, "Reads from and writes to", "JDBC", $descr="only in case of a problem", $sprite="person", $tags="fallback") +Rel(api, db2, "Reads from and writes to", "JDBC", $tags="fallback") Rel_R(db, db2, "Replicates data to", "message" , $descr="only in case of a problem only in case of a problem", $sprite="&envelope-closed", $tags="fallback") SHOW_LEGEND() diff --git a/samples/C4_Deployment Diagram Sample - bigbankplc.puml b/samples/C4_Deployment Diagram Sample - bigbankplc.puml index 9facb36..6f04971 100644 --- a/samples/C4_Deployment Diagram Sample - bigbankplc.puml +++ b/samples/C4_Deployment Diagram Sample - bigbankplc.puml @@ -1,11 +1,12 @@ @startuml -!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml ' uncomment the following line and comment the first to use locally ' !include C4_Deployment.puml -AddTagSupport("fallback", $bgColor="#c0c0c0") +AddElementTag("fallback", $bgColor="#c0c0c0") +AddRelTag("fallback", $textColor="#c0c0c0", $lineColor="#438DD5") -' dynamic legend is used (activated in last line) +' calculated legend is used (activated in last line) ' LAYOUT_WITH_LEGEND() title Deployment Diagram for Internet Banking System - Live @@ -47,7 +48,7 @@ Rel(mobile, api, "Makes API calls to", "json/HTTPS") Rel(spa, api, "Makes API calls to", "json/HTTPS") Rel_U(web, spa, "Delivers to the customer's web browser") Rel(api, db, "Reads from and writes to", "JDBC") -Rel(api, db2, "Reads from and writes to", "JDBC") +Rel(api, db2, "Reads from and writes to", "JDBC", $tags="fallback") Rel_R(db, db2, "Replicates data to") SHOW_LEGEND() From bd6c20115e5a3483ce5aa13c6e824970b5d11053 Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Sun, 7 Mar 2021 19:43:20 +0100 Subject: [PATCH 2/2] #126: C4 relationships support description, sprite/openIconic and tags (5 - skinparam arrow colors allows no #, resync percy files, fix build) --- C4.puml | 12 ++++- ...Component Diagram Sample - bigbankplc.puml | 2 +- ...ner Diagram Sample - bigbankplc-icons.puml | 51 +++++++++++++++++++ ...Container Diagram Sample - bigbankplc.puml | 6 +-- ...ontainer Diagram Sample - message bus.puml | 3 +- ...ntainer Diagram Sample - techtribesjs.puml | 4 +- ...4_Context Diagram Sample - enterprise.puml | 2 +- percy/TestLegend.puml | 24 ++++----- percy/TestRelations.puml | 2 +- percy/TestRelationsDynamic.puml | 2 +- ...t Diagram Sample - bigbankplc-details.puml | 2 +- 11 files changed, 85 insertions(+), 25 deletions(-) create mode 100644 percy/C4_Container Diagram Sample - bigbankplc-icons.puml diff --git a/C4.puml b/C4.puml index dc232ce..6c55aa5 100644 --- a/C4.puml +++ b/C4.puml @@ -144,14 +144,22 @@ skinparam rectangle<> { $tagSkin !endprocedure +' arrow colors cannot start with # (legend background has to start with #) +!function ColorNoHash($c) + !if (%substr($c, 0, 1) == "#") + !$c = %substr($c,1) + !endif + !return $c +!endfunction + !unquoted procedure $defineRelSkinparams($tagStereo, $textColor, $lineColor) !$elementSkin = "skinparam Arrow<<" + $tagStereo + ">> {" + %newline() !$elementSkin = $elementSkin + " Color " !if ($lineColor!="") - !$elementSkin = $elementSkin + $lineColor + !$elementSkin = $elementSkin + ColorNoHash($lineColor) !endif !if ($textColor!="") - !$elementSkin = $elementSkin + ";text:" + $textColor + !$elementSkin = $elementSkin + ";text:" + ColorNoHash($textColor) !endif !$elementSkin = $elementSkin + %newline() !$elementSkin = $elementSkin + "}" + %newline() diff --git a/percy/C4_Component Diagram Sample - bigbankplc.puml b/percy/C4_Component Diagram Sample - bigbankplc.puml index 93762ff..56b4327 100644 --- a/percy/C4_Component Diagram Sample - bigbankplc.puml +++ b/percy/C4_Component Diagram Sample - bigbankplc.puml @@ -17,7 +17,7 @@ System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking info Container_Boundary(api, "API Application") { Component(sign, "Sign In Controller", "MVC Rest Controlle", "Allows users to sign in to the internet banking system") - Component(accounts, "Accounts Summary Controller", "MVC Rest Controlle", "Provides customers with a summory of their bank accounts") + Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary of their bank accounts") Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.") Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.") diff --git a/percy/C4_Container Diagram Sample - bigbankplc-icons.puml b/percy/C4_Container Diagram Sample - bigbankplc-icons.puml new file mode 100644 index 0000000..3e91f36 --- /dev/null +++ b/percy/C4_Container Diagram Sample - bigbankplc-icons.puml @@ -0,0 +1,51 @@ +@startuml +' 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/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml +!endif + +!define DEVICONS https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons +!define FONTAWESOME https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/font-awesome-5 +' uncomment the following line and comment the first to use locally +' !include C4_Container.puml +!include DEVICONS/angular.puml +!include DEVICONS/dotnet.puml +!include DEVICONS/java.puml +!include DEVICONS/msql_server.puml +!include FONTAWESOME/server.puml +!include FONTAWESOME/envelope.puml + +' LAYOUT_TOP_DOWN() +' LAYOUT_AS_SKETCH() +LAYOUT_WITH_LEGEND() + +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", "java") + Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to cutomers via their web browser", "angular") + Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device", "dotnet") + ContainerDb(database, "Database", "SQL Database", "Stores user registraion information, hased auth credentials, access logs, etc.", "msql_server") + Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API", "server") +} + +System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", "envelope") +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") +@enduml \ No newline at end of file diff --git a/percy/C4_Container Diagram Sample - bigbankplc.puml b/percy/C4_Container Diagram Sample - bigbankplc.puml index 241c3a5..f3cc79a 100644 --- a/percy/C4_Container Diagram Sample - bigbankplc.puml +++ b/percy/C4_Container Diagram Sample - bigbankplc.puml @@ -6,8 +6,8 @@ !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml !endif -LAYOUT_TOP_DOWN() -'LAYOUT_AS_SKETCH() +' LAYOUT_TOP_DOWN() +' LAYOUT_AS_SKETCH() LAYOUT_WITH_LEGEND() title Container diagram for Internet Banking System @@ -18,7 +18,7 @@ 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 registraion information, hased auth credentials, access logs, etc.") + 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") } diff --git a/percy/C4_Container Diagram Sample - message bus.puml b/percy/C4_Container Diagram Sample - message bus.puml index 89824d0..cc49d85 100644 --- a/percy/C4_Container Diagram Sample - message bus.puml +++ b/percy/C4_Container Diagram Sample - message bus.puml @@ -1,4 +1,4 @@ -@startuml +@startuml "messagebus" ' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally !if %variable_exists("RELATIVE_INCLUDE") !include ./../C4_Container.puml @@ -13,6 +13,7 @@ LAYOUT_TOP_DOWN() 'LAYOUT_AS_SKETCH() LAYOUT_WITH_LEGEND() + Person(customer, Customer, "A customer") System_Boundary(c1, "Customer Information") { diff --git a/percy/C4_Container Diagram Sample - techtribesjs.puml b/percy/C4_Container Diagram Sample - techtribesjs.puml index 898844e..6cf8105 100644 --- a/percy/C4_Container Diagram Sample - techtribesjs.puml +++ b/percy/C4_Container Diagram Sample - techtribesjs.puml @@ -36,11 +36,11 @@ Rel(anonymous_user, web_app, "Uses", "HTTPS") Rel(aggregated_user, web_app, "Uses", "HTTPS") Rel(administration_user, web_app, "Uses", "HTTPS") -Rel(web_app, rel_db, "Reads from and writes to", "SQL/JDBC, post 3306") +Rel(web_app, rel_db, "Reads from and writes to", "SQL/JDBC, port 3306") Rel(web_app, filesystem, "Reads from") Rel(web_app, nosql, "Reads from", "MongoDB wire protocol, port 27017") -Rel_U(updater, rel_db, "Reads from and writes data to", "SQL/JDBC, post 3306") +Rel_U(updater, rel_db, "Reads from and writes data to", "SQL/JDBC, port 3306") Rel_U(updater, filesystem, "Writes to") Rel_U(updater, nosql, "Reads from and writes to", "MongoDB wire protocol, port 27017") diff --git a/percy/C4_Context Diagram Sample - enterprise.puml b/percy/C4_Context Diagram Sample - enterprise.puml index b407c2f..034b7ec 100644 --- a/percy/C4_Context Diagram Sample - enterprise.puml +++ b/percy/C4_Context Diagram Sample - enterprise.puml @@ -1,4 +1,4 @@ -@startuml +@startuml "enterprise" ' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally !if %variable_exists("RELATIVE_INCLUDE") !include ./../C4_Context.puml diff --git a/percy/TestLegend.puml b/percy/TestLegend.puml index 5d18af2..5a6a2db 100644 --- a/percy/TestLegend.puml +++ b/percy/TestLegend.puml @@ -3,7 +3,7 @@ !if %variable_exists("RELATIVE_INCLUDE") !include ./../C4_Component.puml !else - !include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/C4_Component.puml + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml !endif SHOW_PERSON_SPRITE(person2) @@ -11,19 +11,19 @@ SHOW_PERSON_SPRITE(person2) UpdateElementStyle("system", $bgColor="chocolate", $fontColor="orange", $borderColor="orange") UpdateRelStyle(black, black) -AddTagSupport("role1", $bgColor="green", $fontColor="white", $borderColor="#d73027", $shadowing="false") -AddTagSupport("role2", $fontColor="#d73027", $shadowing="true") -AddTagSupport("role3", $bgColor="orange") -AddTagSupport("role4", $borderColor="blue") -AddTagSupport("unusedRole") +AddElementTag("role1", $bgColor="green", $fontColor="white", $borderColor="#d73027", $shadowing="false") +AddElementTag("role2", $fontColor="#d73027", $shadowing="true") +AddElementTag("role3", $bgColor="orange") +AddElementTag("role4", $borderColor="blue") +AddElementTag("unusedRole") -AddRelTagSupport("line1", $lineColor="green", $textColor="blue") -AddRelTagSupport("line2", $lineColor="blue", $textColor="green") -AddRelTagSupport("line3", $textColor="orange") -AddRelTagSupport("line4", $lineColor="orange") +AddRelTag("line1", $lineColor="green", $textColor="blue") +AddRelTag("line2", $lineColor="blue", $textColor="green") +AddRelTag("line3", $textColor="orange") +AddRelTag("line4", $lineColor="orange") ' PlantUML cannot combine line styles, a combination has to be added as workaround as first additional tag -AddRelTagSupport("line3&line4", $lineColor="orange", $textColor="orange") -AddRelTagSupport("unusedLine", $lineColor="red", $textColor="red") +AddRelTag("line3&line4", $lineColor="orange", $textColor="orange") +AddRelTag("unusedLine", $lineColor="red", $textColor="red") Person(person, "Person") Person(person1, "Person1", $tags="role1") diff --git a/percy/TestRelations.puml b/percy/TestRelations.puml index eb62632..fc28ea8 100644 --- a/percy/TestRelations.puml +++ b/percy/TestRelations.puml @@ -3,7 +3,7 @@ !if %variable_exists("RELATIVE_INCLUDE") !include ./../C4_Component.puml !else - !include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/C4_Component.puml + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml !endif System(RelFrom, RelFrom) diff --git a/percy/TestRelationsDynamic.puml b/percy/TestRelationsDynamic.puml index c31ed60..45e01d7 100644 --- a/percy/TestRelationsDynamic.puml +++ b/percy/TestRelationsDynamic.puml @@ -3,7 +3,7 @@ !if %variable_exists("RELATIVE_INCLUDE") !include ./../C4_Dynamic.puml !else - !include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/C4_Dynamic.puml + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Dynamic.puml !endif System(RelFrom, RelFrom) diff --git a/samples/C4_Deployment Diagram Sample - bigbankplc-details.puml b/samples/C4_Deployment Diagram Sample - bigbankplc-details.puml index a37508f..5ca247a 100644 --- a/samples/C4_Deployment Diagram Sample - bigbankplc-details.puml +++ b/samples/C4_Deployment Diagram Sample - bigbankplc-details.puml @@ -61,7 +61,7 @@ Rel(spa, api, "Makes API calls to", "json/HTTPS") Rel_U(web, spa, "Delivers to the customer's web browser") Rel(api, db, "Reads from and writes to", "JDBC") Rel(api, db2, "Reads from and writes to", "JDBC", $tags="fallback") -Rel_R(db, db2, "Replicates data to", "message" , $descr="only in case of a problem only in case of a problem", $sprite="&envelope-closed", $tags="fallback") +Rel_R(db, db2, "Replicates data to") SHOW_LEGEND() @enduml \ No newline at end of file