From 26f790a8e748e66a4b73333ee6930cfecbfd28a9 Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Sat, 12 Dec 2020 17:31:45 +0100 Subject: [PATCH 01/16] Improve "C4_Deployment Diagram Sample - bigbankplc.puml" with direction forced relations --- samples/C4_Deployment Diagram Sample - bigbankplc.puml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/samples/C4_Deployment Diagram Sample - bigbankplc.puml b/samples/C4_Deployment Diagram Sample - bigbankplc.puml index 087200b..fa8a740 100644 --- a/samples/C4_Deployment Diagram Sample - bigbankplc.puml +++ b/samples/C4_Deployment Diagram Sample - bigbankplc.puml @@ -3,7 +3,7 @@ ' uncomment the following line and comment the first to use locally ' !include C4_Deployment.puml -'LAYOUT_AS_SKETCH +'LAYOUT_AS_SKETCH() LAYOUT_WITH_LEGEND() title Deployment Diagram for Internet Banking System - Live @@ -43,9 +43,9 @@ Deployment_Node(comp, "Customer's computer", "Mircosoft Windows of Apple macOS") Rel(mobile, api, "Makes API calls to", "json/HTTPS") Rel(spa, api, "Makes API calls to", "json/HTTPS") -Rel(web, spa, "Delivers to the customer's web browser") +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(db, db2, "Replicates data to") +Rel_R(db, db2, "Replicates data to") @enduml \ No newline at end of file From 1b5e399a9a35dbae39943304ffa12ec57a45befd Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Sat, 12 Dec 2020 17:59:36 +0100 Subject: [PATCH 02/16] #92-Deployment-Diagram-supports-(automatic-calculated)-line-breaks-of-type-labels --- C4_Deployment.puml | 55 ++++++++++++++++++- ...eployment Diagram Sample - bigbankplc.puml | 2 +- 2 files changed, 53 insertions(+), 4 deletions(-) diff --git a/C4_Deployment.puml b/C4_Deployment.puml index 7d65d84..4c8cf94 100644 --- a/C4_Deployment.puml +++ b/C4_Deployment.puml @@ -2,22 +2,71 @@ ' uncomment the following line and comment the first to use locally ' !include C4_Container.puml +' Colors +' ################################## + +!global $NODE_FONT_COLOR = "#000000" +!global $NODE_BORDER_COLOR = "#A2A2A2" + ' Styling ' ################################## skinparam rectangle<> { Shadowing false StereotypeFontSize 0 - FontColor #000000 - BorderColor #A2A2A2 + FontColor $NODE_FONT_COLOR + BorderColor $NODE_BORDER_COLOR BorderStyle solid } +' Special +' ################################## + +' PlantUML supports no automatic line breaks of "PlantUML containers" (C4 Deployment_Node is a "PlantUML container") +' therefore Deployment_Node() implements an automatic line break based on spaces (like in all other objects). +' If a $type contains \n then the these are used (and no automatic space based line breaks are done) +' $NODE_TYPE_MAX_CHAR_WIDTH defines the automatic line break position +!global $NODE_TYPE_MAX_CHAR_WIDTH = 35 + ' Elements ' ################################## !unquoted function Deployment_Node($alias, $label) !return 'rectangle "=='+$label+'" <> as '+$alias !endfunction + !unquoted function Deployment_Node($alias, $label, $type) -!return 'rectangle "=='+$label+'\n['+$type+']" <> as '+$alias +!$multiLine = "" +!if (%strpos($type, "\n") >= 0) + !while (%strpos($type, "\n") >= 0) + !$brPos = %strpos($type, "\n") + !$multiLine = $multiLine + %substr($type, 0, $brPos) + '\n' + !$type = %substr($type, $brPos+2) + !endwhile +!else + !while (%strlen($type)>$NODE_TYPE_MAX_CHAR_WIDTH) + !$brPos = $NODE_TYPE_MAX_CHAR_WIDTH + !while ($brPos>0 && %substr($type, $brPos, 1)!= ' ') + !$brPos = $brPos - 1 + !endwhile + + !if ($brPos < 1) + !$brPos = %strpos($type, " ") + !else + !endif + + !if ($brPos > 0) + !$multiLine = $multiLine + %substr($type, 0, $brPos) + '\n' + !$type = %substr($type, $brPos) + !else + !$multiLine = $multiLine+ $type + !$type = "" + !endif + !endwhile +!endif +!if (%strlen($type)>0) + !$multiLine = $multiLine + $type +!else +!endif +!return 'rectangle "=='+$label+'\n['+$multiLine+']" <> as '+$alias !endfunction + diff --git a/samples/C4_Deployment Diagram Sample - bigbankplc.puml b/samples/C4_Deployment Diagram Sample - bigbankplc.puml index fa8a740..7ca981f 100644 --- a/samples/C4_Deployment Diagram Sample - bigbankplc.puml +++ b/samples/C4_Deployment Diagram Sample - bigbankplc.puml @@ -36,7 +36,7 @@ Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){ } Deployment_Node(comp, "Customer's computer", "Mircosoft Windows of Apple macOS"){ - Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox"){ + Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox, Apple Safari or Microsoft Edge"){ Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.") } } From 00e25d6a1e6efff856a3d08b17833a8ddcff282b Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Sun, 20 Dec 2020 16:24:36 +0100 Subject: [PATCH 03/16] #92-Deployment-Diagram-supports-(automatic-calculated)-line-breaks-of-type-labels (2 - update link with updated C4_Deployment Diagram Sample) --- samples/C4CoreDiagrams.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/samples/C4CoreDiagrams.md b/samples/C4CoreDiagrams.md index 832b442..b1fa96e 100644 --- a/samples/C4CoreDiagrams.md +++ b/samples/C4CoreDiagrams.md @@ -44,7 +44,7 @@ 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](https://www.plantuml.com/plantuml/png/rLPBRziu4BxhLypwaWSIkp62HT5J73lR96l7HkKqBR20CI9fcLkA54ZAhhVeV-zGiYChSO2cFQqFWZZcDuzlNhfm7gqlCXNz8JLJ1HUmy3vtxpeTYwjsAlsYI0edB3FQ2-tRp6GTv5QYNgeYBphzyzE9GktlHyEEGY-S9z5i879brba0v47v0HIQa440VY5WRfGoAwbJK58BGCsXyRUqZjuCa6LGXg5IQzBnwE8U2z71iFTvV3-TzU9P_FVLj7yTRGGFDzFhsV3g_TNTuF0eYhpqIa0DXu74r696FbcueI2j5XukKNy9xiLhvqK6fp2KIn55DMnsPxWup1KxWTQbJ4i0qB7rv0mSFG8JGN7hw5i4z7kgXMi29J9D27EAkJm-Flx7VtqRLDqdXVO5dFtPVdCEmscyLR5F3UR85e90lV85fYPZw5jF1V2s_NLNJVZrARj8cR2aH0R0v0PwUQuatPT61nstkCGoKN5k0pEZZ_qWdbYpb5ouvzJDAUK1Z4hwDImbeU4s7jzrhgVJIGnaejqwUlJYUrG_dmQseOOdRyvsY0h7rr9aB38LA1gNBvJNYPKPsdMhbfrrsOlq3993dj3L0IKrGIS2x8DGMCK9Mp74H7U6uT_O6qliX1O2ArBfl2rlWzHKS5dvVW8BT0l10GkgVkqth0EpWeSZAdS2o9XmZheXfOFmxFNaTPlaTN-DlEukUx6WkS1VoL_tVqPWialSIYHLUvx_MdjsVxC_oJu17aJoa_qv48ecbtNbNALXJzp0PfQNjuFuMUiwUb0cSqnfDjTczZ7s_VbGp4nmiLyuRp9X3noGG98wBfQIYIhUdCutunXevlOqjqRoRSXrg1MCheygFA42-1DImqhT63v8UoIJdYh05OcZICnyVsJDeKGRXctSTEM48eoqJNz3q7k2f7MLDwCCaY9C-U2nf8NfpDp3WzJSh5nmg8ewGpQENze4YQMxmcuoV5cTWiBtneICz1UMh9t0oFmdbKBuIrenDurogVbpEOR-gN8v2RdSKp8nipAlIg6dqqAXRHAhrEznIVKAcwYsvLCM3JNzOuAhdJF2BsGmR9wmxwbWJV3aNsTqjJ487K1bLAz2b2rJaL5tWobZOdNwTXpTu4eZvRZ_890xc1Ft9L4hIwMsDNSxkEmt0TsVHmJjMq2L6hfLVZ7GLVfOkH2QqzVD3m00 "Deployment Diagram for Internet Banking System - Live") +![Deployment Diagram for Internet Banking System - Live](http://www.plantuml.com/plantuml/png/rLNVJoD737xFN-7cXHy2SaIeElNfGa8FA87eDfHMgXHvPvpDz6PdLZEpWRIw_xssDX0MKkcuUxeyH3jUVxQ_psFlXvWmfBgqdP-CKxRM18kKglXBhnVm_gWmQL7dTQIWl4laqf7oPQ-ow0Hp69Es9kyDJmudOheTN_LAZ8a2csOZggnVbGAg9C4Er8xHOe2q89XxQ_szSGLOumZGQMYzDY7oamVE3jOhj7R5CPxAt9AXitCr-FFcTZeRPBFijxFfy7nthxCstLrCpsTNPn_FhaTix2IJBC4c08mC5W5BhYh01LCDZXASelii1MOh9bN28LoP9NKw6zZisclQhQmwWEwfAK00mCVkYpDeJ0YA971txzyEyEzb5EqOb9iYPymXLcP_V_-lzF1UGjtcDGiEnpyVlJk1gsds669R6AnGBOX10taWcFfIOUg-DC3xeuTDcEOtz2wXSHGuY170v086LMKD-nll9CObBX6aLLaLH9dnxqCnJu9V6atnjNHpRhg0qPgqWgLXD5ncDzUzy-bqaW6dEEhkFLNnfTFyRoEsbaRdxuwV2IN7jqha0oeh4jt80y4XJ88fCQow6zjnN_slFADyL-ViEiA4EKOIs2UosF24HpDaB7U9yZPBFb046IG8L9YO0eet63VtePHdxlu2uu8qO9qMNEjQTL21j1pHnWD0fIX6iBxW0oNrTl7wRV7wtoPU_xbw6Idlz1lrw_zW0kRFXRkdl1dFasyRp_vtpYVdPy0TvLyvdoEoPaaXWcpMcDXTmNgZYxUONuzkv3zBK651W9iqsnJxydefbbvA7DOn-PB2JWGs60wdQMaKDNmhosblCl011au7RxHGRbDjOEm-Rl2C4l0VM28pR2qV16jAaqX3hFD82VnyExFsKaeUrBhCA1jAC2QqwsNIsqWgNrPjbcAfPSjBnIOe7_qymPrnsjz7AQXXNQAwaNko_Qu5zgMmxl2fd9g07xsNZWmNmPSioTZ_Own5-DK4clk7WtNi3ESOZ8WwDYeq1PpfWXxJjVMD5SfyDRsUO47RhbIcWgcQgp9mHMqnj8MtzlkqvliCQzQizEPIyL9ukW3DDscCdpcXV9aKPuqSK2hvEthNV54OBI1czJR4xBOPAWQsviM3i5AR1ZyhTPrBqe3EPOSHwWZpu4kH2kw3IVIOy79qEcm3-b-Dc7tYXRc1DErXFuq9sPcTEX_8wRgq_m40 "Deployment Diagram for Internet Banking System - Live") ## Icons From 4e54ac91fa983f7778291a5892289c2e4d7c9af8 Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Tue, 22 Dec 2020 15:42:16 +0100 Subject: [PATCH 04/16] Add sample rel_* versus lay_* --- README.md | 40 +++++++++++++++++++++++++++++++++++++++- 1 file changed, 39 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 8cddaa4..4fdac00 100644 --- a/README.md +++ b/README.md @@ -161,7 +161,45 @@ You can force the direction of a relationship by using: * `Rel_L`, `Rel_Left` * `Rel_R`, `Rel_Right` -In rare cases, you can force the layout using hidden relationships, `Lay_U`, `Lay_D`, `Lay_L`, `Lay_R`. +In rare cases, you can force a layout of objects which has no relationship by using: + +* `Lay_U` +* `Lay_D` +* `Lay_L` +* `Lay_R` + +In following sample a person uses different systems, and group of persons which have no relations + +```csharp +@startuml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml +HIDE_STEREOTYPE() + +Person(a, "A") +Person(b, "B") +Person(c, "C") +Person(d, "D") +Person(e, "E") + +Lay_U(a, b) +Lay_R(a, c) +Lay_D(a, d) +Lay_L(a, e) + +Person(x, "X") +System(s1, "S1") +System(s2, "S2") +System(s3, "S3") +System(s4, "S4") + +Rel_U(x, s1, "uses") +Rel_R(x, s2, "uses") +Rel_D(x, s3, "uses") +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") ## Layout Options From 5cd42c2ccbcc0399720cdc4b34eb050dbfdbdbf6 Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Sat, 26 Dec 2020 20:59:46 +0100 Subject: [PATCH 05/16] Add sample rel_* versus lay_* (2 - fix finding) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 4fdac00..0936fca 100644 --- a/README.md +++ b/README.md @@ -161,7 +161,7 @@ You can force the direction of a relationship by using: * `Rel_L`, `Rel_Left` * `Rel_R`, `Rel_Right` -In rare cases, you can force a layout of objects which has no relationship by using: +In rare cases, you can force the layout of objects which have no relationships by using: * `Lay_U` * `Lay_D` From 14def429445c17d61cf4adf9a4d35e7f371d4261 Mon Sep 17 00:00:00 2001 From: Marco Gario Date: Mon, 28 Dec 2020 11:51:30 +0100 Subject: [PATCH 06/16] Fix typos in samples --- samples/C4_Container Diagram Sample - bigbankplc.puml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/samples/C4_Container Diagram Sample - bigbankplc.puml b/samples/C4_Container Diagram Sample - bigbankplc.puml index 5affd26..5d83a61 100644 --- a/samples/C4_Container Diagram Sample - bigbankplc.puml +++ b/samples/C4_Container Diagram Sample - bigbankplc.puml @@ -15,7 +15,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") } @@ -34,4 +34,4 @@ 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 +@enduml From bb6589e506bed59c13a0ae5cd490a6927bc57221 Mon Sep 17 00:00:00 2001 From: Marco Gario Date: Mon, 28 Dec 2020 11:52:40 +0100 Subject: [PATCH 07/16] Update C4_Component Diagram Sample - bigbankplc.puml --- samples/C4_Component Diagram Sample - bigbankplc.puml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/samples/C4_Component Diagram Sample - bigbankplc.puml b/samples/C4_Component Diagram Sample - bigbankplc.puml index 8eea756..4f125ec 100644 --- a/samples/C4_Component Diagram Sample - bigbankplc.puml +++ b/samples/C4_Component Diagram Sample - bigbankplc.puml @@ -14,7 +14,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.") From b63db7ee9b7096c35154d081cda4ff43a07177d9 Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Sat, 2 Jan 2021 17:33:50 +0100 Subject: [PATCH 08/16] #102, #94, #51: Add custom tags/stereotypes support; dynamic legend supports custom colors, border and shadow; dynamic legend displays (only) used elements, tags/stereotypes. New added macros: SHOW_DYNAMIC_LEGEND(), AddTagSupport(), UpdateSkinparamsAndLegendEntry(), elements macros are extended with $tags="..." --- C4.puml | 189 +++++++++++++++++- C4_Component.puml | 70 ++----- C4_Container.puml | 76 ++----- C4_Context.puml | 66 +++--- C4_Deployment.puml | 34 +++- LayoutOptions.md | 28 ++- README.md | 120 ++++++++++- samples/C4CoreDiagrams.md | 2 +- ...eployment Diagram Sample - bigbankplc.puml | 13 +- 9 files changed, 420 insertions(+), 178 deletions(-) diff --git a/C4.puml b/C4.puml index 2c8d396..2031dfe 100644 --- a/C4.puml +++ b/C4.puml @@ -4,8 +4,15 @@ ' ################################## !global $ELEMENT_FONT_COLOR = "#FFFFFF" + +!global $ARROW_COLOR = "#666666" + +!global $BOUNDARY_COLOR = "#444444" + !global $LEGEND_FONT_COLOR = "#FFFFFF" !global $LEGEND_TITLE_COLOR = "#000000" +!global $LEGEND_UNDEFINED_BK_COLOR = "#87AECA" +!global $LEGEND_UNDEFINED_FONT_COLOR = "#B7DEFA" ' Styling ' ################################## @@ -37,19 +44,165 @@ skinparam queue { } skinparam Arrow { - Color #666666 - FontColor #666666 + Color $ARROW_COLOR + FontColor $ARROW_COLOR FontSize 12 } skinparam rectangle<> { Shadowing false StereotypeFontSize 0 - FontColor #444444 - BorderColor #444444 + FontColor $BOUNDARY_COLOR + BorderColor $BOUNDARY_COLOR BorderStyle dashed } +' Legend and Tags +' ################################## +!global $tagDefaultLegend = "" +!global $tagCustomLegend = "" + +!unquoted function $toStereos($elementType, $tags) + !if (%strlen($tags) == 0) + !$stereos = '<<' + $elementType + '>>' +%set_variable_value("$" + $elementType + "Legend", %true()) + !return $stereos + !endif + !$stereos = '' + !$brPos = %strpos($tags, "+") + !while ($brPos >= 0) + !$tag = %substr($tags, 0, $brPos) + !$stereos = $stereos + '<<' + $tag + '>>' +%set_variable_value("$" + $tag + "Legend", %true()) + !$tags = %substr($tags, $brPos+1) + !$brPos = %strpos($tags, "+") + !endwhile + !if (%strlen($tags)>0) + !$stereos = $stereos + '<<' + $tags + '>>' +%set_variable_value("$" + $tags + "Legend", %true()) + !endif + ' has to be last, otherwise PlantUML overwrites all tag specific skinparams + !$stereos = $stereos + '<<' + $elementType + '>>' +%set_variable_value("$" + $elementType + "Legend", %true()) + !return $stereos +!endfunction + +!function $elementTagSkinparams($element, $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) + !$elementSkin = "skinparam " + $element +"<<" + $tagStereo + ">> {" + %newline() + !if ($fontColor!="") + !$elementSkin = $elementSkin + " StereotypeFontColor " + $fontColor + %newline() + !$elementSkin = $elementSkin + " FontColor " + $fontColor + %newline() + !endif + !if ($bgColor!="") + !$elementSkin = $elementSkin + " BackgroundColor " + $bgColor + %newline() + !endif + !if ($borderColor!="") + !$elementSkin = $elementSkin + " BorderColor " + $borderColor+ %newline() + !endif + !if ($shadowing == "true") + !$elementSkin = $elementSkin + " Shadowing<<" + $tagStereo + ">> " + "true" + %newline() + !endif + !if ($shadowing == "false") + !$elementSkin = $elementSkin + " Shadowing<<" + $tagStereo + ">> " + "false" + %newline() + !endif + !$elementSkin = $elementSkin + "}" + %newline() + !return $elementSkin +!endfunction + +!unquoted procedure $defineSkinparams($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) + !$tagSkin = $elementTagSkinparams("rectangle", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) + !$tagSkin = $tagSkin + $elementTagSkinparams("database", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) + !$tagSkin = $tagSkin + $elementTagSkinparams("queue", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) +$tagSkin +!endprocedure + +!function $tagLegendEntry($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) + !$tagEntry = "|" + !if ($bgColor!="") + !$bg = $bgColor + !else + !$bg = $LEGEND_UNDEFINED_BK_COLOR + !endif + ' named colors have to start with # too + !if (%substr($bg, 0, 1) != "#") + !$bg = "#" + $bg + !endif + !$tagEntry = $tagEntry + "<" + $bg +">" + ' ..white rectangle + !if ($borderColor!="") + !$tagEntry = $tagEntry + " " + !else + !$tagEntry = $tagEntry + " " + !endif + !if ($fontColor!="") + !$tagEntry = $tagEntry + "" + !else + !$tagEntry = $tagEntry + "" + !endif + !$tagEntry = $tagEntry + " " + $tagStereo + " " + !if ($shadowing == "true") + !$tagEntry = $tagEntry + "(shadow) " + !endif + !if ($shadowing == "false") + !$tagEntry = $tagEntry + "(no shadow) " + !endif + !if ($fontColor == "" && $bgColor == "") + !$tagEntry = $tagEntry + "(no font, no back color) " + !else + !if ($fontColor == "") + !$tagEntry = $tagEntry + "(no font color) " + !endif + !if ($bgColor == "") + !$tagEntry = $tagEntry + "(no back color) " + !endif + !endif + !$tagEntry = $tagEntry + " " + !$tagEntry = $tagEntry + "|" + !return $tagEntry +!endfunction + +!unquoted procedure $addTagToDynamicLegend($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="") + !$tagEntry = $tagLegendEntry($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) +%set_variable_value("$" + $tagStereo + "LegendEntry", $tagEntry) + !$tagCustomLegend = $tagCustomLegend + $tagStereo + "\n" +!endprocedure + +!procedure $showActiveLegendEntries($allDefined) + !$brPos = %strpos($allDefined, "\n") + !while ($brPos >= 0) + !$tagStereo = %substr($allDefined, 0, $brPos) + !$allDefined = %substr($allDefined, $brPos+2) + !$brPos = %strpos($allDefined, "\n") + !if (%variable_exists("$" + $tagStereo + "Legend")) +%get_variable_value("$" + $tagStereo + "LegendEntry") + !endif + !endwhile + !if (%strlen($allDefined)>0) + !$tagStereo = $allDefined + !if (%variable_exists("$" + $tagStereo + "Legend")) +%get_variable_value("$" + $tagStereo + "LegendEntry") + !endif + !endif +!endprocedure + +' used by new defined tags +!unquoted procedure AddTagSupport($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="") +$defineSkinparams($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) +$addTagToDynamicLegend($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) +!endprocedure + +' used by existing elements like person, ... +!unquoted procedure UpdateSkinparamsAndLegendEntry($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="") +$defineSkinparams($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) + !$tagEntry = $tagLegendEntry($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) +%set_variable_value("$" + $tagStereo + "LegendEntry", $tagEntry) +!endprocedure + +' tags/stereotypes have to be delimited with \n +!unquoted procedure SetDefaultLegendEntries($tagStereoEntries) + !$tagDefaultLegend = $tagStereoEntries +!endprocedure + ' Layout ' ################################## @@ -72,16 +225,34 @@ top to bottom direction left to right direction !endprocedure +' has to be last call in diagram +!unquoted procedure SHOW_DYNAMIC_LEGEND($hideStereotype="true") +!if ($hideStereotype=="true") +hide stereotype +!endif +legend right +|**Legend** | +$showActiveLegendEntries($tagDefaultLegend) +$showActiveLegendEntries($tagCustomLegend) +endlegend +!endprocedure + ' Boundaries ' ################################## -!unquoted function Boundary($alias, $label) -!return 'rectangle "=='+$label+'" <> as '+$alias -!endfunction -!unquoted function Boundary($alias, $label, $type) -!return 'rectangle "=='+$label+'\n['+$type+']" <> as '+$alias +!function $getBoundary($label, $type) + !if ($type == "") + !return '==' + $label + !endif + !if (type != "") + !return '==' + $label + '\n[' + $type + ']' + !endif !endfunction +!unquoted procedure Boundary($alias, $label, $type="", $tags="") +rectangle "$getBoundary($label, $type)" $toStereos("boundary", $tags) as $alias +!endprocedure + ' Relationship ' ################################## diff --git a/C4_Component.puml b/C4_Component.puml index ef92391..3ed4560 100644 --- a/C4_Component.puml +++ b/C4_Component.puml @@ -11,6 +11,7 @@ ' ################################## !global $COMPONENT_FONT_COLOR = "#000000" + !global $COMPONENT_BG_COLOR = "#85BBF0" !global $COMPONENT_BORDER_COLOR = "#78A8D8" !global $EXTERNAL_COMPONENT_BG_COLOR = "#CCCCCC" @@ -19,51 +20,14 @@ ' Styling ' ################################## -skinparam rectangle<> { - StereotypeFontColor $COMPONENT_FONT_COLOR - FontColor $COMPONENT_FONT_COLOR - BackgroundColor $COMPONENT_BG_COLOR - BorderColor $COMPONENT_BORDER_COLOR -} - -skinparam database<> { - StereotypeFontColor $COMPONENT_FONT_COLOR - FontColor $COMPONENT_FONT_COLOR - BackgroundColor $COMPONENT_BG_COLOR - BorderColor $COMPONENT_BORDER_COLOR -} - -skinparam queue<> { - StereotypeFontColor $COMPONENT_FONT_COLOR - FontColor $COMPONENT_FONT_COLOR - BackgroundColor $COMPONENT_BG_COLOR - BorderColor $COMPONENT_BORDER_COLOR -} - -skinparam rectangle<> { - StereotypeFontColor $COMPONENT_FONT_COLOR - FontColor $COMPONENT_FONT_COLOR - BackgroundColor $EXTERNAL_COMPONENT_BG_COLOR - BorderColor $EXTERNAL_COMPONENT_BORDER_COLOR -} - -skinparam database<> { - StereotypeFontColor $COMPONENT_FONT_COLOR - FontColor $COMPONENT_FONT_COLOR - BackgroundColor $EXTERNAL_COMPONENT_BG_COLOR - BorderColor $EXTERNAL_COMPONENT_BORDER_COLOR -} - -skinparam queue<> { - StereotypeFontColor $COMPONENT_FONT_COLOR - FontColor $COMPONENT_FONT_COLOR - BackgroundColor $EXTERNAL_COMPONENT_BG_COLOR - BorderColor $EXTERNAL_COMPONENT_BORDER_COLOR -} +UpdateSkinparamsAndLegendEntry("component", $COMPONENT_BG_COLOR, $COMPONENT_FONT_COLOR, $COMPONENT_BORDER_COLOR) +UpdateSkinparamsAndLegendEntry("external_component", $EXTERNAL_COMPONENT_BG_COLOR, $COMPONENT_FONT_COLOR, $EXTERNAL_COMPONENT_BORDER_COLOR) ' Layout ' ################################## +SetDefaultLegendEntries("person\nsystem\ncontainer\ncomponent\nexternal_person\nexternal_system\nexternal_container\nexternal_component") + !procedure LAYOUT_WITH_LEGEND() hide stereotype legend right @@ -97,26 +61,26 @@ endlegend !endif !endfunction -!unquoted procedure Component($alias, $label, $techn, $descr="", $sprite="") -rectangle "$getComponent($label, $techn, $descr, $sprite)" <> as $alias +!unquoted procedure Component($alias, $label, $techn, $descr="", $sprite="", $tags="") +rectangle "$getComponent($label, $techn, $descr, $sprite)" $toStereos("component",$tags) as $alias !endprocedure -!unquoted procedure ComponentDb($alias, $label, $techn, $descr="", $sprite="") -database "$getComponent($label, $techn, $descr, $sprite)" <> as $alias +!unquoted procedure ComponentDb($alias, $label, $techn, $descr="", $sprite="", $tags="") +database "$getComponent($label, $techn, $descr, $sprite)" $toStereos("component",$tags) as $alias !endprocedure -!unquoted procedure ComponentQueue($alias, $label, $techn, $descr="", $sprite="") -queue "$getComponent($label, $techn, $descr, $sprite)" <> as $alias +!unquoted procedure ComponentQueue($alias, $label, $techn, $descr="", $sprite="", $tags="") +queue "$getComponent($label, $techn, $descr, $sprite)" $toStereos("component",$tags) as $alias !endprocedure -!unquoted procedure Component_Ext($alias, $label, $techn, $descr="", $sprite="") -rectangle "$getComponent($label, $techn, $descr, $sprite)" <> as $alias +!unquoted procedure Component_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="") +rectangle "$getComponent($label, $techn, $descr, $sprite)" $toStereos("external_component",$tags) as $alias !endprocedure -!unquoted procedure ComponentDb_Ext($alias, $label, $techn, $descr="", $sprite="") -database "$getComponent($label, $techn, $descr, $sprite)" <> as $alias +!unquoted procedure ComponentDb_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="") +database "$getComponent($label, $techn, $descr, $sprite)" $toStereos("external_component",$tags) as $alias !endprocedure -!unquoted procedure ComponentQueue_Ext($alias, $label, $techn, $descr="", $sprite="") -queue "$getComponent($label, $techn, $descr, $sprite)" <> as $alias +!unquoted procedure ComponentQueue_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="") +queue "$getComponent($label, $techn, $descr, $sprite)" $toStereos("external_component",$tags) as $alias !endprocedure \ No newline at end of file diff --git a/C4_Container.puml b/C4_Container.puml index 996304f..ca4ed4f 100644 --- a/C4_Container.puml +++ b/C4_Container.puml @@ -17,52 +17,14 @@ ' Styling ' ################################## - -skinparam rectangle<> { - StereotypeFontColor $ELEMENT_FONT_COLOR - FontColor $ELEMENT_FONT_COLOR - BackgroundColor $CONTAINER_BG_COLOR - BorderColor $CONTAINER_BORDER_COLOR -} - -skinparam database<> { - StereotypeFontColor $ELEMENT_FONT_COLOR - FontColor $ELEMENT_FONT_COLOR - BackgroundColor $CONTAINER_BG_COLOR - BorderColor $CONTAINER_BORDER_COLOR -} - -skinparam queue<> { - StereotypeFontColor $ELEMENT_FONT_COLOR - FontColor $ELEMENT_FONT_COLOR - BackgroundColor $CONTAINER_BG_COLOR - BorderColor $CONTAINER_BORDER_COLOR -} - -skinparam rectangle<> { - StereotypeFontColor $ELEMENT_FONT_COLOR - FontColor $ELEMENT_FONT_COLOR - BackgroundColor $EXTERNAL_CONTAINER_BG_COLOR - BorderColor $EXTERNAL_CONTAINER_BORDER_COLOR -} - -skinparam database<> { - StereotypeFontColor $ELEMENT_FONT_COLOR - FontColor $ELEMENT_FONT_COLOR - BackgroundColor $EXTERNAL_CONTAINER_BG_COLOR - BorderColor $EXTERNAL_CONTAINER_BORDER_COLOR -} - -skinparam queue<> { - StereotypeFontColor $ELEMENT_FONT_COLOR - FontColor $ELEMENT_FONT_COLOR - BackgroundColor $EXTERNAL_CONTAINER_BG_COLOR - BorderColor $EXTERNAL_CONTAINER_BORDER_COLOR -} +UpdateSkinparamsAndLegendEntry("container", $CONTAINER_BG_COLOR, $ELEMENT_FONT_COLOR, $CONTAINER_BORDER_COLOR) +UpdateSkinparamsAndLegendEntry("external_container", $EXTERNAL_CONTAINER_BG_COLOR, $ELEMENT_FONT_COLOR, $EXTERNAL_CONTAINER_BORDER_COLOR) ' Layout ' ################################## +SetDefaultLegendEntries("person\nsystem\ncontainer\nexternal_person\nexternal_system\nexternal_container") + !procedure LAYOUT_WITH_LEGEND() hide stereotype legend right @@ -94,33 +56,33 @@ endlegend !endif !endfunction -!unquoted procedure Container($alias, $label, $techn, $descr="", $sprite="") -rectangle "$getContainer($label, $techn, $descr, $sprite)" <> as $alias +!unquoted procedure Container($alias, $label, $techn, $descr="", $sprite="", $tags="") +rectangle "$getContainer($label, $techn, $descr, $sprite)" $toStereos("container", $tags) as $alias !endprocedure -!unquoted procedure ContainerDb($alias, $label, $techn, $descr="", $sprite="") -database "$getContainer($label, $techn, $descr, $sprite)" <> as $alias +!unquoted procedure ContainerDb($alias, $label, $techn, $descr="", $sprite="", $tags="") +database "$getContainer($label, $techn, $descr, $sprite)" $toStereos("container", $tags) as $alias !endprocedure -!unquoted procedure ContainerQueue($alias, $label, $techn, $descr="", $sprite="") -queue "$getContainer($label, $techn, $descr, $sprite)" <> as $alias +!unquoted procedure ContainerQueue($alias, $label, $techn, $descr="", $sprite="", $tags="") +queue "$getContainer($label, $techn, $descr, $sprite)" $toStereos("container", $tags) as $alias !endprocedure -!unquoted procedure Container_Ext($alias, $label, $techn, $descr="", $sprite="") -rectangle "$getContainer($label, $techn, $descr, $sprite)" <> as $alias +!unquoted procedure Container_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="") +rectangle "$getContainer($label, $techn, $descr, $sprite)" $toStereos("external_container", $tags) as $alias !endprocedure -!unquoted procedure ContainerDb_Ext($alias, $label, $techn, $descr="", $sprite="") -database "$getContainer($label, $techn, $descr, $sprite)" <> as $alias +!unquoted procedure ContainerDb_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="") +database "$getContainer($label, $techn, $descr, $sprite)" $toStereos("external_container", $tags) as $alias !endprocedure -!unquoted procedure ContainerQueue_Ext($alias, $label, $techn, $descr="", $sprite="") -queue "$getContainer($label, $techn, $descr, $sprite)" <> as $alias +!unquoted procedure ContainerQueue_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="") +queue "$getContainer($label, $techn, $descr, $sprite)" $toStereos("external_container", $tags) as $alias !endprocedure ' Boundaries ' ################################## -!unquoted function Container_Boundary($alias, $label) -!return Boundary($alias, $label, "Container") -!endfunction +!unquoted procedure Container_Boundary($alias, $label, $tags="") +Boundary($alias, $label, "Container", $tags) +!endprocedure diff --git a/C4_Context.puml b/C4_Context.puml index d15e73a..9e315ec 100644 --- a/C4_Context.puml +++ b/C4_Context.puml @@ -1,6 +1,6 @@ !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml ' uncomment the following line and comment the first to use locally -' !include C4.puml +' !include C4.puml ' Scope: A single software system. ' Primary elements: The software system in scope. @@ -11,40 +11,22 @@ ' ################################## !global $PERSON_BG_COLOR = "#08427B" +!global $PERSON_BORDER_COLOR = "#073B6F" !global $EXTERNAL_PERSON_BG_COLOR = "#686868" +!global $EXTERNAL_PERSON_BORDER_COLOR = "#8A8A8A" !global $SYSTEM_BG_COLOR = "#1168BD" +!global $SYSTEM_BORDER_COLOR = "#3C7FC0" !global $EXTERNAL_SYSTEM_BG_COLOR = "#999999" +!global $EXTERNAL_SYSTEM_BORDER_COLOR = "#8A8A8A" ' Styling ' ################################## -skinparam rectangle<> { - StereotypeFontColor $ELEMENT_FONT_COLOR - FontColor $ELEMENT_FONT_COLOR - BackgroundColor $PERSON_BG_COLOR - BorderColor #073B6F -} - -skinparam rectangle<> { - StereotypeFontColor $ELEMENT_FONT_COLOR - FontColor $ELEMENT_FONT_COLOR - BackgroundColor $EXTERNAL_PERSON_BG_COLOR - BorderColor #8A8A8A -} +UpdateSkinparamsAndLegendEntry("person", $PERSON_BG_COLOR, $ELEMENT_FONT_COLOR, $PERSON_BORDER_COLOR) +UpdateSkinparamsAndLegendEntry("external_person", $EXTERNAL_PERSON_BG_COLOR, $ELEMENT_FONT_COLOR, $EXTERNAL_PERSON_BORDER_COLOR) +UpdateSkinparamsAndLegendEntry("system", $SYSTEM_BG_COLOR, $ELEMENT_FONT_COLOR, $SYSTEM_BORDER_COLOR) +UpdateSkinparamsAndLegendEntry("external_system", $EXTERNAL_SYSTEM_BG_COLOR, $ELEMENT_FONT_COLOR, $EXTERNAL_SYSTEM_BORDER_COLOR) -skinparam rectangle<> { - StereotypeFontColor $ELEMENT_FONT_COLOR - FontColor $ELEMENT_FONT_COLOR - BackgroundColor $SYSTEM_BG_COLOR - BorderColor #3C7FC0 -} - -skinparam rectangle<> { - StereotypeFontColor $ELEMENT_FONT_COLOR - FontColor $ELEMENT_FONT_COLOR - BackgroundColor $EXTERNAL_SYSTEM_BG_COLOR - BorderColor #8A8A8A -} sprite $person [48x48/16] { 000000000000000000000000000000000000000000000000 @@ -100,6 +82,8 @@ sprite $person [48x48/16] { ' Layout ' ################################## +SetDefaultLegendEntries("person\nsystem\nexternal_person\nexternal_system") + !procedure LAYOUT_WITH_LEGEND() hide stereotype legend right @@ -144,28 +128,28 @@ endlegend !endif !endfunction -!unquoted procedure Person($alias, $label, $descr="", $sprite="") -rectangle "$getPerson($label, $descr, $sprite)" <> as $alias +!unquoted procedure Person($alias, $label, $descr="", $sprite="", $tags="") +rectangle "$getPerson($label, $descr, $sprite)" $toStereos("person", $tags) as $alias !endprocedure -!unquoted procedure Person_Ext($alias, $label, $descr="", $sprite="") -rectangle "$getPerson($label, $descr, $sprite)" <> as $alias +!unquoted procedure Person_Ext($alias, $label, $descr="", $sprite="", $tags="") +rectangle "$getPerson($label, $descr, $sprite)" $toStereos("external_person", $tags) as $alias !endprocedure -!unquoted procedure System($alias, $label, $descr="", $sprite="") -rectangle "$getSystem($label, $descr, $sprite)" <> as $alias +!unquoted procedure System($alias, $label, $descr="", $sprite="", $tags="") +rectangle "$getSystem($label, $descr, $sprite)" $toStereos("system", $tags) as $alias !endprocedure -!unquoted procedure System_Ext($alias, $label, $descr="", $sprite="") -rectangle "$getSystem($label, $descr, $sprite)" <> as $alias +!unquoted procedure System_Ext($alias, $label, $descr="", $sprite="", $tags="") +rectangle "$getSystem($label, $descr, $sprite)" $toStereos("external_system", $tags) as $alias !endprocedure ' Boundaries ' ################################## -!unquoted function Enterprise_Boundary($alias, $label) -!return Boundary($alias, $label, "Enterprise") -!endfunction -!unquoted function System_Boundary($alias, $label) -!return Boundary($alias, $label, "System") -!endfunction +!unquoted procedure Enterprise_Boundary($alias, $label, $tags="") +Boundary($alias, $label, "Enterprise", $tags) +!endprocedure +!unquoted procedure System_Boundary($alias, $label, $tags="") +Boundary($alias, $label, "System", $tags) +!endprocedure diff --git a/C4_Deployment.puml b/C4_Deployment.puml index 4c8cf94..6c1cb82 100644 --- a/C4_Deployment.puml +++ b/C4_Deployment.puml @@ -6,19 +6,25 @@ ' ################################## !global $NODE_FONT_COLOR = "#000000" +!global $NODE_BG_COLOR = "#FFFFFF" !global $NODE_BORDER_COLOR = "#A2A2A2" ' Styling ' ################################## +' orig was without background +'UpdateSkinparamsAndLegendEntry("node", $fontColor=$NODE_FONT_COLOR, $borderColor=$NODE_BORDER_COLOR) +UpdateSkinparamsAndLegendEntry("node", $bgColor=$NODE_BG_COLOR, $fontColor=$NODE_FONT_COLOR, $borderColor=$NODE_BORDER_COLOR) skinparam rectangle<> { - Shadowing false StereotypeFontSize 0 - FontColor $NODE_FONT_COLOR - BorderColor $NODE_BORDER_COLOR - BorderStyle solid } +' Layout +' ################################## + +' comment if node should not be added to legend. No dynamic legend extension required +SetDefaultLegendEntries("person\nsystem\ncontainer\nexternal_person\nexternal_system\nexternal_container\nnode") + ' Special ' ################################## @@ -30,11 +36,8 @@ skinparam rectangle<> { ' Elements ' ################################## -!unquoted function Deployment_Node($alias, $label) -!return 'rectangle "=='+$label+'" <> as '+$alias -!endfunction -!unquoted function Deployment_Node($alias, $label, $type) +!unquoted function $breakLine($type) !$multiLine = "" !if (%strpos($type, "\n") >= 0) !while (%strpos($type, "\n") >= 0) @@ -65,8 +68,19 @@ skinparam rectangle<> { !endif !if (%strlen($type)>0) !$multiLine = $multiLine + $type -!else !endif -!return 'rectangle "=='+$label+'\n['+$multiLine+']" <> as '+$alias +!return $multiLine +!endfunction + +!function $getNode($label, $type) + !if ($type == "") + !return '==' + $label + !endif + !if (type != "") + !return '==' + $label + '\n[' + $breakLine($type) + ']' + !endif !endfunction +!unquoted procedure Deployment_Node($alias, $label, $type="", $tags="") +rectangle "$getNode($label, $type)" $toStereos("node",$tags) as $alias +!endprocedure diff --git a/LayoutOptions.md b/LayoutOptions.md index ec984e4..c6c5c0a 100644 --- a/LayoutOptions.md +++ b/LayoutOptions.md @@ -53,7 +53,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") ![LAYOUT_LEFT_RIGHT Sample](https://www.plantuml.com/plantuml/png/PL1DIyD05BplhrZheIdKX8edJusXjaAhfKaLJs6RFEt2Vh7xrb34_-uBhLPmBmDlvhsPsMb0uJ5gnPVvwzEsgfUp-whUFCmN5I-5TWhOXJIDYYtmFQ8BjrdcHPU-Izp7NGpW6siG3AQDrPbelHJcGqKNi-BcQgs4mUrgcIc14916TK5g8Gtur94fO_zSan5ZQ_31caIqMfen7-Gzoe1UeFM34IiF0K7NTpQQLlX3qap6V7WCEnpnJyRf_Vea7UnguHpTUO4TpvrJiX4ehHdGgBWSyxnSfu-pYbOyyEjqmbVFHS_bIjakyBvZu6Wv5NI293egbEJ5gquYWkSeDIZo2fJjwvGkmID9Tquo8ja6r4-hSwnje4t2HLMjIrBreb_sV6OEI34wwE7DM_rtPGgcfU_y1W00 "LAYOUT_LEFT_RIGHT Sample") -## LAYOUT_WITH_LEGEND() +## LAYOUT_WITH_LEGEND() or SHOW_DYNAMIC_LEGEND(?hideStereotype) Colors can help to add additional information or simply to make the diagram more aesthetically pleasing. It can also help to save some space. @@ -80,6 +80,32 @@ 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_DYNAMIC_LEGEND(?hideStereotype)`. + +The dynamic legend has following differences: +* only relevant elements are listed +* custom tags/stereotypes are supported +* stereotypes can remain visible (with `SHOW_DYNAMIC_LEGEND(false)`) +* **`SHOW_DYNAMIC_LEGEND()` has to be last call in the diagram** + +```csharp +@startuml SHOW_DYNAMIC_LEGEND Sample +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml + +Person(admin, "Administrator") +System_Boundary(c1, 'Sample') { + Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") +} +System(twitter, "Twitter") + +Rel(admin, web_app, "Uses", "HTTPS") +Rel(web_app, twitter, "Gets tweets from", "HTTPS") + +SHOW_DYNAMIC_LEGEND() +@enduml +``` + +![SHOW_DYNAMIC_LEGEND Sample](http://www.plantuml.com/plantuml/png/RL5Dgzf05DtFhxYrYnV1bs3fgYlJA5fG6vfOwIfCajiwC1_3p0r1IlzxRz1g5o-RIyx7uHnc5Ka66eo6QlVrtAn_7FF3bwBPRxQRunegQRn6yKxPJWyzmeN8nqzP5kIO_b9q6TeXOkYS9RIKTivaNaixnRr6whLgi-BZQpb1fyC-Cp8I1eQQWXrIMGofPwqG9OReR29xe-m2PlbqLQGWoONPN5HNDfhcinjiByCrwPOBUBbrUvd3Rm7yFIAJ4Tj6UiyvPsmXzrwhJf9oTiPGyNu1ULMcnqtDbe3m8Lt2uNinSRdMRemmJOf03dYFbomnWoRbDK8zAY8CGCgWLXOZT_jpRvVGZUISkun9yGtrlrNFMgV8JhwxkYuhLasY1_kCsI95_iNf_0pE_6yHRxnMCXShjFrWz5y0 "LAYOUT_WITH_LEGEND Sample") ## LAYOUT_AS_SKETCH() diff --git a/README.md b/README.md index 8cddaa4..55416f2 100644 --- a/README.md +++ b/README.md @@ -102,6 +102,34 @@ 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 can be decorated with tags and explained via dynamic calculated legends, for example: + +```cs +@startuml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml + +AddTagSupport("v1.0", $borderColor="#d73027") +AddTagSupport("v1.1", $fontColor="#d73027") + +Person(user, "Customer", "People that need products") +Person(admin, "Administrator", "People that administrates the products via the new v1.1 components", $tags="v1.1") +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") +Container(api, "API", "java", "Handles all business logic (incl. new v1.1 extensions)", $tags="v1.0+v1.1") +ContainerDb(db, "Database", "Microsoft SQL", "Holds product, order and invoice information") + +Rel(user, spa, "Uses", "https") +Rel(spa, api, "Uses", "https") +Rel_R(api, db, "Reads/Writes") +Rel(admin, spaAdmin, "Uses", "https") +Rel(spaAdmin, api, "Uses", "https") + +SHOW_DYNAMIC_LEGEND() +@enduml +``` + +![tags](http://www.plantuml.com/plantuml/png/bLDHQnf147xtLsolVJYfyKnR21G25GrDG5Eh2Q5FCdSxwfQztMDdJllpEtiQjSbHoDF2p3VpVVFDx3lZ2bjhL1lcYhvcMO1TVsruK-SrOIYyOtJSBtoPLHOSrwMz8DRMvDdeoyKiXXwdawm4OWmIMewa0ep3qAy4s-aCjNw0zQAkAXyuJRQN_K7IKnzo7pI6aRS-N2VlzTNdmQUhfDk2lepebJHzXUtCC91tQTJPKyce9lOb1i4dC_ILHSKROEKGjQg2rtN196M7Aj2bSG8TnjSG1s3_gXPEIIG9uR6HsXfe0WvtAifKOb7bdPX5KJ73cguR_K9vz2Ib2eHYCHj69d3hsa93-Y2TIe4e8tw75HG70P6XE0ospq4atyc26WMDdUTqWvTqm_CvLJipd7lmHWb70_upDLGcAfZTHSBVi8NuteBJ5ac1jKfkJO14olgrALGQZx9_iXR_C3eotb7tts4_lgGQvwdEfVaO678WZ4HJKmHFViLgyNFIC7khwNcJFTLSeX8rCjtMcmBbNVbG0WjZlBCvsiEHxTVtI4YnJ_Db113pJKRcR4ylvtiF6crp14tPKp2CX_JpCHxNrSvnIhSJTHQtFvwMur_tm-dTQ3cv-NvpFqwxdM_eTFoAVm40 "tags") + ## Supported Diagram Types @@ -168,10 +196,100 @@ In rare cases, you can force the layout using hidden relationships, `Lay_U`, `La C4-PlantUML also comes with some layout options to make it easy and reuseable to create nice and useful diagrams: * [LAYOUT_TOP_DOWN() or LAYOUT_LEFT_RIGHT()](LayoutOptions.md#layout_top_down-or-layout_left_right) -* [LAYOUT_WITH_LEGEND()](LayoutOptions.md#layout_with_legend) +* [LAYOUT_WITH_LEGEND() or SHOW_DYNAMIC_LEGEND(?hideStereotype)](LayoutOptions.md#layout_with_legend-or-show_dynamic_legend) * [LAYOUT_AS_SKETCH()](LayoutOptions.md#layout_as_sketch) * [HIDE_STEREOTYPE()](LayoutOptions.md#hide_stereotype) +## Custom tags/stereotypes support and skinparam updates + +Additional tags/stereotypes can be added to the existing element stereotypes (component, ...) and highlight,... specific aspects: + +* `AddTagSupport(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing)`: + After this call the given tag can be used in the diagram, the styles of the tagged elements are updated and the tag is be displayed in the dynamic legend. +* `UpdateSkinparamsAndLegendEntry(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing)` + This call updates the style of the default element stereotypes (component, ...) and creates no additional legend entry. + +Each element can be extended with one or multiple custom tags/stereotypes via the keyword argument `$tags="..."`, like `Container(spaAdmin, "Admin SPA", $tags="v1.1")`. +Multiple tags can be combined with `+`, like `Container(api, "API", $tags="v1.0+v1.1")`. + +**Comments** + +* `SHOW_DYNAMIC_LEGEND()` supports the customized stereotypes + (`LAYOUT_WITH_LEGEND()` cannot be used, if the custom tags/stereotypes should be displayed in the legend). +* `SHOW_DYNAMIC_LEGEND()` has to be last line in diagram. +* Don't use space between `$tags` and `=` (PlantUML does not support it). +* Don't use `,` as part of the tag names (PlantUML does not support it in combination with keyword arguments). +* If 2 tags defines the same skinparameter, the first definition is used. +* If specific skinparameters have to be merged (e.g. 2 tags change the font color) an additional combined tag has to be defined. Use `&` as part of combined tag names. This convention can be used in other tools. + +```cs +@startuml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml + +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="#888888") + +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") +Container(api, "API", "java", "Handles all business logic (incl. new v1.1 extensions)", $tags="v1.0&v1.1+v1.0+v1.1") +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") + +Rel(spa, api, "Uses", "https") +Rel(spaAdmin, api, "Uses", "https") +Rel_L(spa, spa2, "Updates", "https") +Rel_R(spaAdmin, spaAdmin2, "Updates", "https") + +SHOW_DYNAMIC_LEGEND(false) +@enduml +``` + +![merged tags](http://www.plantuml.com/plantuml/png/jLDXQzim5FpkNw5bOoIajHDlh6DGQ4ZBMaYxq3ICVGhFbkneaoMZzvpivq-Avj3KPh0FzHUPUwUxuvvzXGIMcaf5RwJELSC5snBL-2L9BEpZKjAsoHeKDZUQXAOuDrLIAz3-pZaILp9BvX_FbnvQto-I2f24TT1cxcw0rCB6jTUFPfm_GRbgwjfO6WvsqtWoE6Fl2aUR6sNivU0jl_WmIIyycXdBXNs1ZteqfYyr2lTaHLSZuBqQa_UzGXp4fsbNAE1TeGAKoY3_TRXHjkpFXyUnesCVGwpXZ0rMozd07Q3BHe7rhqzRmIf7OLAJi0NaWj4MY973ymR9LCA66UI4RE-MmtOIM5ibGOcNeTZHgTsCLr8xXyF9-ft1poII1JBsVoDeiMTjYSSOqvCOK4kVO7dd3N_23lnv2vehWGoKObc3ZeZ8b2bbpeR-WuoFoapy9g5H6esZ4vUmlR5_6tTCiOOqT9s-MjdZTlEzhQVFQqzVl_SsJDj5z2XK-EB20jOeq5iVVdCt3-EGzH-SpIA8_2rqNNEWBkdncTInW7vwjBhzzdrp_UDXTdyttonkljuyN0zTU1IZw4fetbJg3m00 "merged tags") + +**Custom schema definition** + +If the custom (color) schema is defined via `UpdateSkinparamsAndLegendEntry()` then the legend of existing elements is updated too. + +```cs +@startuml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml + +!$COLOR_A_5 = "#7f3b08" +!$COLOR_A_4 = "#b35806" +!$COLOR_A_3 = "#e08214" +!$COLOR_A_2 = "#fdb863" +!$COLOR_A_1 = "#fee0b6b" +!$COLOR_NEUTRAL = "#f7f7f7" +!$COLOR_B_1 = "#d8daeb" +!$COLOR_B_2 = "#b2abd2" +!$COLOR_B_3 = "#8073ac" +!$COLOR_B_4 = "#542788" +!$COLOR_B_5 = "#2d004b" + +UpdateSkinparamsAndLegendEntry("person", $bgColor=$COLOR_A_5, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_A_1, $shadowing="true") +UpdateSkinparamsAndLegendEntry("external_person", $bgColor=$COLOR_B_5, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_B_1) +UpdateSkinparamsAndLegendEntry("system", $bgColor=$COLOR_A_4, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_A_2) +UpdateSkinparamsAndLegendEntry("external_system", $bgColor=$COLOR_B_4, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_B_2) + +Person(customer, "Personal Banking Customer") +System(banking_system, "Internet Banking System") + +System_Ext(mail_system, "E-mail system") +System_Ext(mainframe, "Mainframe Banking System") + +Rel(customer, banking_system, "Uses") +Rel_Back(customer, mail_system, "Sends e-mails to") +Rel_Neighbor(banking_system, mail_system, "Sends e-mails") +Rel(banking_system, mainframe, "Uses") + +SHOW_DYNAMIC_LEGEND() +@enduml +``` + +![custom schema](http://www.plantuml.com/plantuml/png/dPHVRvim5CNV-HIKzI6LceGGag19aHeesYhbJvKiclQ4R7n3KC4WswZfjvy1RtXfkwfHNiBldkDxZf6uum8nKUMPSPNIEAi8c4SXIlvrE6JeUP2aubZXYWEB2og0Ya5SvCCoGxJszBaWMOg7WTj_hD5-jHpcY0jW4aL1xJY9GLcVRbnT1vlbPXijeeavDwqliyCOsvwbSRVXU3pnxAdEnmq7stD6hiwTXXy8zgPZdOzQ3c3ZAUu6wt3_OxjOjiDP_UjclZ8HZo306bTBi8CmSJIkGddsR8nYZQiI4zUPUPx6LMc7sBOhppVs9K42TayfBH53ELzGieG4A0cfO2yzgmJ62shTcjSu2OgiOFFk-YGy55Hqk2jNwmj6W9rvHdB0ZuWKpobDvfPW5LWt7uQ0am16KHQzcyQ_88sywuzNynSk87-pltj1V-SJPTzTxL-msgzN6u_D_VNYYeiY1tPhMYr1cUaZAYCbPg1cyhNicW0zt4vK7kbve7L247yzhL0wb2KAJwANepJhF66_VZQvKfu9wO6X7AHizUV_6sTl8TEIlqgrvy2bJAeY7yLFclJV93kWX9lGvE6cA9Hd3Mbon0Kxg_jVTsjzxT0AgLJ6xllcPtJ_QxrOFGJHClmMhkzxDyOTK59_b7u3 "custom schema") + ## Snippets for Visual Studio Code Because the PlantUML support inside of Visual Studio Code is excellent with the [PlantUML extension](https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml), you can also find VS Code snippets for C4-PlantUML at [.vscode/C4.code-snippets](.vscode/C4.code-snippets). diff --git a/samples/C4CoreDiagrams.md b/samples/C4CoreDiagrams.md index b1fa96e..73aa6b7 100644 --- a/samples/C4CoreDiagrams.md +++ b/samples/C4CoreDiagrams.md @@ -44,7 +44,7 @@ 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/rLNVJoD737xFN-7cXHy2SaIeElNfGa8FA87eDfHMgXHvPvpDz6PdLZEpWRIw_xssDX0MKkcuUxeyH3jUVxQ_psFlXvWmfBgqdP-CKxRM18kKglXBhnVm_gWmQL7dTQIWl4laqf7oPQ-ow0Hp69Es9kyDJmudOheTN_LAZ8a2csOZggnVbGAg9C4Er8xHOe2q89XxQ_szSGLOumZGQMYzDY7oamVE3jOhj7R5CPxAt9AXitCr-FFcTZeRPBFijxFfy7nthxCstLrCpsTNPn_FhaTix2IJBC4c08mC5W5BhYh01LCDZXASelii1MOh9bN28LoP9NKw6zZisclQhQmwWEwfAK00mCVkYpDeJ0YA971txzyEyEzb5EqOb9iYPymXLcP_V_-lzF1UGjtcDGiEnpyVlJk1gsds669R6AnGBOX10taWcFfIOUg-DC3xeuTDcEOtz2wXSHGuY170v086LMKD-nll9CObBX6aLLaLH9dnxqCnJu9V6atnjNHpRhg0qPgqWgLXD5ncDzUzy-bqaW6dEEhkFLNnfTFyRoEsbaRdxuwV2IN7jqha0oeh4jt80y4XJ88fCQow6zjnN_slFADyL-ViEiA4EKOIs2UosF24HpDaB7U9yZPBFb046IG8L9YO0eet63VtePHdxlu2uu8qO9qMNEjQTL21j1pHnWD0fIX6iBxW0oNrTl7wRV7wtoPU_xbw6Idlz1lrw_zW0kRFXRkdl1dFasyRp_vtpYVdPy0TvLyvdoEoPaaXWcpMcDXTmNgZYxUONuzkv3zBK651W9iqsnJxydefbbvA7DOn-PB2JWGs60wdQMaKDNmhosblCl011au7RxHGRbDjOEm-Rl2C4l0VM28pR2qV16jAaqX3hFD82VnyExFsKaeUrBhCA1jAC2QqwsNIsqWgNrPjbcAfPSjBnIOe7_qymPrnsjz7AQXXNQAwaNko_Qu5zgMmxl2fd9g07xsNZWmNmPSioTZ_Own5-DK4clk7WtNi3ESOZ8WwDYeq1PpfWXxJjVMD5SfyDRsUO47RhbIcWgcQgp9mHMqnj8MtzlkqvliCQzQizEPIyL9ukW3DDscCdpcXV9aKPuqSK2hvEthNV54OBI1czJR4xBOPAWQsviM3i5AR1ZyhTPrBqe3EPOSHwWZpu4kH2kw3IVIOy79qEcm3-b-Dc7tYXRc1DErXFuq9sPcTEX_8wRgq_m40 "Deployment Diagram for Internet Banking System - Live") +![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") ## Icons diff --git a/samples/C4_Deployment Diagram Sample - bigbankplc.puml b/samples/C4_Deployment Diagram Sample - bigbankplc.puml index 7ca981f..d050be6 100644 --- a/samples/C4_Deployment Diagram Sample - bigbankplc.puml +++ b/samples/C4_Deployment Diagram Sample - bigbankplc.puml @@ -3,8 +3,10 @@ ' uncomment the following line and comment the first to use locally ' !include C4_Deployment.puml -'LAYOUT_AS_SKETCH() -LAYOUT_WITH_LEGEND() +AddTagSupport("fallback", $bgColor="#c0c0c0") + +' dynamic legend is used (activated in last line) +' LAYOUT_WITH_LEGEND() title Deployment Diagram for Internet Banking System - Live @@ -19,9 +21,9 @@ Deployment_Node(plc, "Big Bank plc", "Big Bank plc data center"){ ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") } } - Deployment_Node(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS"){ - Deployment_Node(oracle2, "Oracle - Secondary", "Oracle 12c"){ - ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") + Deployment_Node(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS", $tags="fallback") { + Deployment_Node(oracle2, "Oracle - Secondary", "Oracle 12c", $tags="fallback") { + ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="fallback") } } Deployment_Node(bb2, "bigbank-web***\tx4", "Ubuntu 16.04 LTS"){ @@ -48,4 +50,5 @@ Rel(api, db, "Reads from and writes to", "JDBC") Rel(api, db2, "Reads from and writes to", "JDBC") Rel_R(db, db2, "Replicates data to") +SHOW_DYNAMIC_LEGEND() @enduml \ No newline at end of file From ddf98cfbe81f58312c6b93e144af104a85efcf43 Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Sat, 2 Jan 2021 18:40:05 +0100 Subject: [PATCH 09/16] #102, #94, #51: Add custom tags/stereotypes support; ... (2 - update macros docu with added $tags="...") --- README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 55416f2..fb8b3ae 100644 --- a/README.md +++ b/README.md @@ -138,17 +138,17 @@ Diagram types * System Context & System Landscape diagrams * Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml` * Macros: - * `Person(alias, label, ?description, ?sprite)` + * `Person(alias, label, ?description, ?sprite, ?tags)` * `Person_Ext` - * `System(alias, label, ?description, ?sprite)` + * `System(alias, label, ?description, ?sprite, ?tags)` * `System_Ext` - * `Boundary(alias, label, ?type)` - * `Enterprise_Boundary(alias, label)` + * `Boundary(alias, label, ?type, ?tags)` + * `Enterprise_Boundary(alias, label, ?tags)` * `System_Boundary` * Container diagram * Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml` * Additional Macros: - * `Container(alias, label, technology, ?description, ?sprite)` + * `Container(alias, label, technology, ?description, ?sprite, ?tags)` * `ContainerDb` * `ContainerQueue` * `Container_Ext` @@ -158,7 +158,7 @@ Diagram types * Component diagram * Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml` * Additional Macros: - * `Component(alias, label, technology, ?description, ?sprite)` + * `Component(alias, label, technology, ?description, ?sprite, ?tags)` * `ComponentDb` * `ComponentQueue` * `Component_Ext` @@ -173,7 +173,7 @@ Diagram types * Deployment diagram * Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml` * Additional Macros: - * `Deployment_Node(alias, label, ?type)` + * `Deployment_Node(alias, label, ?type, ?tags)` Take a look at each of the [C4 Model Diagram Samples](samples/C4CoreDiagrams.md). From d799a4c5d55d07037e8c2c8203fbc0b7627d30a8 Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Sat, 9 Jan 2021 13:06:08 +0100 Subject: [PATCH 10/16] #93: local file includes can be activated via command line argument -DRELATIVE_INCLUDE="." Update github workflow that local files are used --- .github/workflows/run-percy-tests.yml | 2 +- C4_Component.puml | 9 +- C4_Component_LocalSupport.puml | 88 +++++++++++++++++++ C4_Container.puml | 9 +- C4_Context.puml | 9 +- C4_Deployment.puml | 9 +- C4_Dynamic.puml | 9 +- README.md | 9 +- ...Component Diagram Sample - bigbankplc.puml | 10 ++- ...Container Diagram Sample - bigbankplc.puml | 9 +- ...ontainer Diagram Sample - message bus.puml | 12 +-- ...ntainer Diagram Sample - techtribesjs.puml | 12 +-- ...Diagram Sample - bigbankplc-landscape.puml | 8 +- ...4_Context Diagram Sample - bigbankplc.puml | 8 +- ...4_Context Diagram Sample - enterprise.puml | 10 ++- 15 files changed, 166 insertions(+), 47 deletions(-) create mode 100644 C4_Component_LocalSupport.puml diff --git a/.github/workflows/run-percy-tests.yml b/.github/workflows/run-percy-tests.yml index 8433ed4..7aed58d 100644 --- a/.github/workflows/run-percy-tests.yml +++ b/.github/workflows/run-percy-tests.yml @@ -19,7 +19,7 @@ jobs: - name: Process diagrams uses: Timmy/plantuml-action@v1 with: - args: '-v percy -o _parsed' + args: '-v percy -o _parsed -DRELATIVE_INCLUDE="."' - name: Upload run: npx percy upload percy/_parsed env: diff --git a/C4_Component.puml b/C4_Component.puml index ef92391..942410d 100644 --- a/C4_Component.puml +++ b/C4_Component.puml @@ -1,6 +1,9 @@ -!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml -' uncomment the following line and comment the first to use locally -' !include C4_Container.puml +' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally +!include https://raw.githubu!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Container.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml +!endif ' Scope: A single container. ' Primary elements: Components within the container in scope. diff --git a/C4_Component_LocalSupport.puml b/C4_Component_LocalSupport.puml new file mode 100644 index 0000000..741dfd7 --- /dev/null +++ b/C4_Component_LocalSupport.puml @@ -0,0 +1,88 @@ +!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Container.puml +!else + !include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/C4_Container.puml +!endif + +' Scope: A single container. +' Primary elements: Components within the container in scope. +' Supporting elements: Containers (within the software system in scope) plus people and software systems directly connected to the components. +' Intended audience: Software architects and developers. + +' Colors +' ################################## + +!global $COMPONENT_FONT_COLOR = "#000000" + +!global $COMPONENT_BG_COLOR = "#85BBF0" +!global $COMPONENT_BORDER_COLOR = "#78A8D8" +!global $EXTERNAL_COMPONENT_BG_COLOR = "#CCCCCC" +!global $EXTERNAL_COMPONENT_BORDER_COLOR = "#BFBFBF" + +' Styling +' ################################## + +UpdateSkinparamsAndLegendEntry("component", $COMPONENT_BG_COLOR, $COMPONENT_FONT_COLOR, $COMPONENT_BORDER_COLOR) +UpdateSkinparamsAndLegendEntry("external_component", $EXTERNAL_COMPONENT_BG_COLOR, $COMPONENT_FONT_COLOR, $EXTERNAL_COMPONENT_BORDER_COLOR) + +' Layout +' ################################## + +SetDefaultLegendEntries("person\nsystem\ncontainer\ncomponent\nexternal_person\nexternal_system\nexternal_container\nexternal_component") + +!procedure LAYOUT_WITH_LEGEND() +hide stereotype +legend right +|**Legend** | +|<$PERSON_BG_COLOR> person | +|<$SYSTEM_BG_COLOR> system | +|<$CONTAINER_BG_COLOR> container | +|<$COMPONENT_BG_COLOR> component | +|<$EXTERNAL_PERSON_BG_COLOR> external person | +|<$EXTERNAL_SYSTEM_BG_COLOR> external system | +|<$EXTERNAL_CONTAINER_BG_COLOR> external container | +|<$EXTERNAL_COMPONENT_BG_COLOR> external component | +endlegend +!endprocedure + +' Elements +' ################################## + +!function $getComponent($label, $techn, $descr, $sprite) +!if ($descr == "") && ($sprite == "") +!return '=='+$label+'\n//['+$techn+']//' +!endif +!if ($descr == "") && ($sprite != "") +!return '<$'+$sprite+'>\n=='+$label+'\n//['+$techn+']//' +!endif +!if ($descr != "") && ($sprite == "") +!return '=='+$label+'\n//['+$techn+']//\n\n '+$descr +!endif +!if ($descr != "") && ($sprite != "") +!return '<$'+$sprite+'>\n=='+$label+'\n//['+$techn+']//\n\n '+$descr +!endif +!endfunction + +!unquoted procedure Component($alias, $label, $techn, $descr="", $sprite="", $tags="") +rectangle "$getComponent($label, $techn, $descr, $sprite)" $toStereos("component",$tags) as $alias +!endprocedure + +!unquoted procedure ComponentDb($alias, $label, $techn, $descr="", $sprite="", $tags="") +database "$getComponent($label, $techn, $descr, $sprite)" $toStereos("component",$tags) as $alias +!endprocedure + +!unquoted procedure ComponentQueue($alias, $label, $techn, $descr="", $sprite="", $tags="") +queue "$getComponent($label, $techn, $descr, $sprite)" $toStereos("component",$tags) as $alias +!endprocedure + +!unquoted procedure Component_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="") +rectangle "$getComponent($label, $techn, $descr, $sprite)" $toStereos("external_component",$tags) as $alias +!endprocedure + +!unquoted procedure ComponentDb_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="") +database "$getComponent($label, $techn, $descr, $sprite)" $toStereos("external_component",$tags) as $alias +!endprocedure + +!unquoted procedure ComponentQueue_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="") +queue "$getComponent($label, $techn, $descr, $sprite)" $toStereos("external_component",$tags) as $alias +!endprocedure \ No newline at end of file diff --git a/C4_Container.puml b/C4_Container.puml index 996304f..ad7d31f 100644 --- a/C4_Container.puml +++ b/C4_Container.puml @@ -1,6 +1,9 @@ -!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml -' uncomment the following line and comment the first to use locally -' !include C4_Context.puml +' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally +!include https://raw.githubu!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Context.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml +!endif ' Scope: A single software system. ' Primary elements: Containers within the software system in scope. diff --git a/C4_Context.puml b/C4_Context.puml index d15e73a..8844ef4 100644 --- a/C4_Context.puml +++ b/C4_Context.puml @@ -1,6 +1,9 @@ -!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml -' uncomment the following line and comment the first to use locally -' !include C4.puml +' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally +!include https://raw.githubu!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml +!endif ' Scope: A single software system. ' Primary elements: The software system in scope. diff --git a/C4_Deployment.puml b/C4_Deployment.puml index 7d65d84..a9c7412 100644 --- a/C4_Deployment.puml +++ b/C4_Deployment.puml @@ -1,6 +1,9 @@ -!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml -' uncomment the following line and comment the first to use locally -' !include C4_Container.puml +' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally +!include https://raw.githubu!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Container.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml +!endif ' Styling ' ################################## diff --git a/C4_Dynamic.puml b/C4_Dynamic.puml index b41eb63..ee0e827 100644 --- a/C4_Dynamic.puml +++ b/C4_Dynamic.puml @@ -1,6 +1,9 @@ -!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml -' uncomment the following line and comment the first to use locally -' !include C4_Component.puml +' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally +!include https://raw.githubu!if %variable_exists("RELATIVE_INCLUDE") + !include %get_variable_value("RELATIVE_INCLUDE")/C4_Component.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml +!endif ' Scope: Interactions in an enterprise, software system or container. ' Primary and supporting elements: Depends on the diagram scope - diff --git a/README.md b/README.md index 8cddaa4..1301e0d 100644 --- a/README.md +++ b/README.md @@ -18,17 +18,12 @@ C4-PlantUML includes macros, stereotypes, and other goodies (like VSCode Snippet At the top of your C4 PlantUML `.puml` file, you need to include the `C4_Context.puml`, `C4_Container.puml` or `C4_Component.puml` file found in the `root` of this repo. -To be independent of any internet connectivity, you can also download the files found in the `root` and reference it locally with +To be independent of any internet connectivity, you can also download the files found in the `root` and activate the relative include with additional command line argument `-DRELATIVE_INCLUDE="."` ```c# -!include path/to/C4.puml -!include path/to/C4_Context.puml -!include path/to/C4_Container.puml -!include path/to/C4_Component.puml +java -jar plantuml.jar -DRELATIVE_INCLUDE="." ... ``` -Just remember to change the `!include` statements at the top of the files. - If you want to use the always up-to-date version in this repo, use the following: ```c# diff --git a/percy/C4_Component Diagram Sample - bigbankplc.puml b/percy/C4_Component Diagram Sample - bigbankplc.puml index bf74c32..93762ff 100644 --- a/percy/C4_Component Diagram Sample - bigbankplc.puml +++ b/percy/C4_Component Diagram Sample - bigbankplc.puml @@ -1,8 +1,10 @@ @startuml -!include ./../C4_Component.puml -!include ./../C4_Container.puml -!include ./../C4_Context.puml -!include ./../C4.puml +' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include ./../C4_Component.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml +!endif LAYOUT_WITH_LEGEND() diff --git a/percy/C4_Container Diagram Sample - bigbankplc.puml b/percy/C4_Container Diagram Sample - bigbankplc.puml index 799f99f..241c3a5 100644 --- a/percy/C4_Container Diagram Sample - bigbankplc.puml +++ b/percy/C4_Container Diagram Sample - bigbankplc.puml @@ -1,7 +1,10 @@ @startuml -!include ./../C4_Container.puml -!include ./../C4_Context.puml -!include ./../C4.puml +' 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 LAYOUT_TOP_DOWN() 'LAYOUT_AS_SKETCH() diff --git a/percy/C4_Container Diagram Sample - message bus.puml b/percy/C4_Container Diagram Sample - message bus.puml index d57d3d6..89824d0 100644 --- a/percy/C4_Container Diagram Sample - message bus.puml +++ b/percy/C4_Container Diagram Sample - message bus.puml @@ -1,7 +1,10 @@ -@startuml "bigbankplc" -!include ./../C4_Container.puml -!include ./../C4_Context.puml -!include ./../C4.puml +@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 skinparam wrapWidth 200 skinparam maxMessageSize 200 @@ -10,7 +13,6 @@ 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 d78a459..898844e 100644 --- a/percy/C4_Container Diagram Sample - techtribesjs.puml +++ b/percy/C4_Container Diagram Sample - techtribesjs.puml @@ -1,13 +1,15 @@ -@startuml "techtribesjs" -!include ./../C4_Container.puml -!include ./../C4_Context.puml -!include ./../C4.puml +@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 LAYOUT_TOP_DOWN() 'LAYOUT_AS_SKETCH() LAYOUT_WITH_LEGEND() - Person_Ext(anonymous_user, "Anonymous User") Person(aggregated_user, "Aggregated User") Person(administration_user, "Administration User") diff --git a/percy/C4_Context Diagram Sample - bigbankplc-landscape.puml b/percy/C4_Context Diagram Sample - bigbankplc-landscape.puml index 73915dc..b7ca084 100644 --- a/percy/C4_Context Diagram Sample - bigbankplc-landscape.puml +++ b/percy/C4_Context Diagram Sample - bigbankplc-landscape.puml @@ -1,6 +1,10 @@ @startuml -!include ./../C4_Context.puml -!include ./../C4.puml +' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include ./../C4_Context.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml +!endif 'LAYOUT_TOP_DOWN() 'LAYOUT_AS_SKETCH() diff --git a/percy/C4_Context Diagram Sample - bigbankplc.puml b/percy/C4_Context Diagram Sample - bigbankplc.puml index 98f35cd..a540da0 100644 --- a/percy/C4_Context Diagram Sample - bigbankplc.puml +++ b/percy/C4_Context Diagram Sample - bigbankplc.puml @@ -1,6 +1,10 @@ @startuml -!include ./../C4_Context.puml -!include ./../C4.puml +' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include ./../C4_Context.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml +!endif LAYOUT_WITH_LEGEND() diff --git a/percy/C4_Context Diagram Sample - enterprise.puml b/percy/C4_Context Diagram Sample - enterprise.puml index dc8d084..b407c2f 100644 --- a/percy/C4_Context Diagram Sample - enterprise.puml +++ b/percy/C4_Context Diagram Sample - enterprise.puml @@ -1,6 +1,10 @@ -@startuml "enterprise" -!include ./../C4_Context.puml -!include ./../C4.puml +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include ./../C4_Context.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml +!endif LAYOUT_TOP_DOWN() 'LAYOUT_AS_SKETCH() From b0d1692be214fca237ed25f37954702b4fc2757a Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Sat, 9 Jan 2021 16:11:57 +0100 Subject: [PATCH 11/16] #93: local file includes can be activated via command line argument -DRELATIVE_INCLUDE="." (2 - fix !if) --- C4_Component.puml | 2 +- C4_Container.puml | 2 +- C4_Context.puml | 2 +- C4_Deployment.puml | 2 +- C4_Dynamic.puml | 2 +- README.md | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/C4_Component.puml b/C4_Component.puml index 942410d..cc76765 100644 --- a/C4_Component.puml +++ b/C4_Component.puml @@ -1,5 +1,5 @@ ' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally -!include https://raw.githubu!if %variable_exists("RELATIVE_INCLUDE") +!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 diff --git a/C4_Container.puml b/C4_Container.puml index ad7d31f..6a1622d 100644 --- a/C4_Container.puml +++ b/C4_Container.puml @@ -1,5 +1,5 @@ ' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally -!include https://raw.githubu!if %variable_exists("RELATIVE_INCLUDE") +!if %variable_exists("RELATIVE_INCLUDE") !include %get_variable_value("RELATIVE_INCLUDE")/C4_Context.puml !else !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml diff --git a/C4_Context.puml b/C4_Context.puml index 8844ef4..1178fd6 100644 --- a/C4_Context.puml +++ b/C4_Context.puml @@ -1,5 +1,5 @@ ' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally -!include https://raw.githubu!if %variable_exists("RELATIVE_INCLUDE") +!if %variable_exists("RELATIVE_INCLUDE") !include %get_variable_value("RELATIVE_INCLUDE")/C4.puml !else !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml diff --git a/C4_Deployment.puml b/C4_Deployment.puml index a9c7412..3e49ee1 100644 --- a/C4_Deployment.puml +++ b/C4_Deployment.puml @@ -1,5 +1,5 @@ ' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally -!include https://raw.githubu!if %variable_exists("RELATIVE_INCLUDE") +!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 diff --git a/C4_Dynamic.puml b/C4_Dynamic.puml index ee0e827..ff4d007 100644 --- a/C4_Dynamic.puml +++ b/C4_Dynamic.puml @@ -1,5 +1,5 @@ ' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally -!include https://raw.githubu!if %variable_exists("RELATIVE_INCLUDE") +!if %variable_exists("RELATIVE_INCLUDE") !include %get_variable_value("RELATIVE_INCLUDE")/C4_Component.puml !else !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml diff --git a/README.md b/README.md index 1301e0d..73db967 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ C4-PlantUML includes macros, stereotypes, and other goodies (like VSCode Snippet At the top of your C4 PlantUML `.puml` file, you need to include the `C4_Context.puml`, `C4_Container.puml` or `C4_Component.puml` file found in the `root` of this repo. -To be independent of any internet connectivity, you can also download the files found in the `root` and activate the relative include with additional command line argument `-DRELATIVE_INCLUDE="."` +To be independent of any internet connectivity, you can also download the files found in the `root` and activate the local conversion with additional command line argument `-DRELATIVE_INCLUDE="."` (that the local files are included) ```c# java -jar plantuml.jar -DRELATIVE_INCLUDE="." ... From d09bdaea392f53de85d6b35f99512cea26de0dda Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Fri, 15 Jan 2021 19:30:27 +0100 Subject: [PATCH 12/16] #102: improve dynamic legend layout (space in front of border symbol) --- C4.puml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/C4.puml b/C4.puml index 2031dfe..d0aa5e4 100644 --- a/C4.puml +++ b/C4.puml @@ -130,9 +130,9 @@ $tagSkin !$tagEntry = $tagEntry + "<" + $bg +">" ' ..white rectangle !if ($borderColor!="") - !$tagEntry = $tagEntry + " " + !$tagEntry = $tagEntry + " " !else - !$tagEntry = $tagEntry + " " + !$tagEntry = $tagEntry + " " !endif !if ($fontColor!="") !$tagEntry = $tagEntry + "" From 8c4c1ecc5be2e38bc11730c1c52da621536ebcc9 Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Sun, 17 Jan 2021 18:34:28 +0100 Subject: [PATCH 13/16] * Node is added as short version of Deployment_Node, (Deployment_)Node() supports description, sprite and left/right alignment via Node_L()/Node_R() * Element properties can be defined via SetPropertyHeader(), WithoutPropertyHeader() and AddProperty() --- C4.puml | 63 ++++++++++ C4_Component.puml | 12 +- C4_Container.puml | 12 +- C4_Context.puml | 8 +- C4_Deployment.puml | 113 ++++++++++++++++-- README.md | 47 +++++++- ...t Diagram Sample - bigbankplc-details.puml | 68 +++++++++++ samples/C4CoreDiagrams.md | 6 +- ...t Diagram Sample - bigbankplc-details.puml | 65 ++++++++++ 9 files changed, 364 insertions(+), 30 deletions(-) create mode 100644 percy/C4_Deployment Diagram Sample - bigbankplc-details.puml create mode 100644 samples/C4_Deployment Diagram Sample - bigbankplc-details.puml diff --git a/C4.puml b/C4.puml index d0aa5e4..49c6b17 100644 --- a/C4.puml +++ b/C4.puml @@ -203,6 +203,69 @@ $defineSkinparams($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) !$tagDefaultLegend = $tagStereoEntries !endprocedure +' Element properties +' ################################## + +' collect all defined properties as table rows +!global $propTable = "" +!global $propTableCaption = "" +!global $propColCaption = "=" + +!unquoted function SetPropertyHeader($col1Name, $col2Name, $col3Name = "", $col4Name = "") + !$propColCaption = "" + !$propTableCaption = "|= " + $col1Name + " |= " + $col2Name + " |" + !if ($col3Name != "") + !$propTableCaption = $propTableCaption + "= " + $col3Name + " |" + !endif + !if ($col4Name != "") + !$propTableCaption = $propTableCaption + "= " + $col4Name + " |" + !endif + !return "" +!endfunction + +!unquoted function WithoutPropertyHeader() + !$propTableCaption = "" + !$propColCaption = "=" + !return "" +!endfunction + +!unquoted function AddProperty($col1, $col2, $col3 = "", $col4 = "") + !if ($propTable == "") + !if ($propTableCaption != "") + !$propTable = $propTableCaption + "\n" + !endif + !else + !$propTable = $propTable + "\n" + !endif + !$propTable = $propTable + "| " + $col1 + " |" + $propColCaption + " " + $col2 + " |" + !if ($col3 != "") + !$propTable = $propTable + " " + $col3 + " |" + !endif + !if ($col4 != "") + !$propTable = $propTable + " " + $col4 + " |" + !endif + !return "" +!endfunction + +!unquoted function $getProps($alignedNL = "\n") + !if ($propTable != "") + !$retTable = $alignedNL + $propTable + !$propTable = "" + !return $retTable + !endif + !return "" +!endfunction + +!unquoted function $getProps_L() + !return $getProps("\l") +!endfunction + +!unquoted function $getProps_R() + !return $getProps("\r") +!endfunction + +SetPropertyHeader("Property","Value") + ' Layout ' ################################## diff --git a/C4_Component.puml b/C4_Component.puml index 3a681cd..24d8166 100644 --- a/C4_Component.puml +++ b/C4_Component.puml @@ -65,25 +65,25 @@ endlegend !endfunction !unquoted procedure Component($alias, $label, $techn, $descr="", $sprite="", $tags="") -rectangle "$getComponent($label, $techn, $descr, $sprite)" $toStereos("component",$tags) as $alias +rectangle "$getComponent($label, $techn, $descr, $sprite)$getProps()" $toStereos("component",$tags) as $alias !endprocedure !unquoted procedure ComponentDb($alias, $label, $techn, $descr="", $sprite="", $tags="") -database "$getComponent($label, $techn, $descr, $sprite)" $toStereos("component",$tags) as $alias +database "$getComponent($label, $techn, $descr, $sprite)$getProps()" $toStereos("component",$tags) as $alias !endprocedure !unquoted procedure ComponentQueue($alias, $label, $techn, $descr="", $sprite="", $tags="") -queue "$getComponent($label, $techn, $descr, $sprite)" $toStereos("component",$tags) as $alias +queue "$getComponent($label, $techn, $descr, $sprite)$getProps()" $toStereos("component",$tags) as $alias !endprocedure !unquoted procedure Component_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="") -rectangle "$getComponent($label, $techn, $descr, $sprite)" $toStereos("external_component",$tags) as $alias +rectangle "$getComponent($label, $techn, $descr, $sprite)$getProps()" $toStereos("external_component",$tags) as $alias !endprocedure !unquoted procedure ComponentDb_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="") -database "$getComponent($label, $techn, $descr, $sprite)" $toStereos("external_component",$tags) as $alias +database "$getComponent($label, $techn, $descr, $sprite)$getProps()" $toStereos("external_component",$tags) as $alias !endprocedure !unquoted procedure ComponentQueue_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="") -queue "$getComponent($label, $techn, $descr, $sprite)" $toStereos("external_component",$tags) as $alias +queue "$getComponent($label, $techn, $descr, $sprite)$getProps()" $toStereos("external_component",$tags) as $alias !endprocedure \ No newline at end of file diff --git a/C4_Container.puml b/C4_Container.puml index cfddef9..87e60f7 100644 --- a/C4_Container.puml +++ b/C4_Container.puml @@ -60,27 +60,27 @@ endlegend !endfunction !unquoted procedure Container($alias, $label, $techn, $descr="", $sprite="", $tags="") -rectangle "$getContainer($label, $techn, $descr, $sprite)" $toStereos("container", $tags) as $alias +rectangle "$getContainer($label, $techn, $descr, $sprite)$getProps()" $toStereos("container", $tags) as $alias !endprocedure !unquoted procedure ContainerDb($alias, $label, $techn, $descr="", $sprite="", $tags="") -database "$getContainer($label, $techn, $descr, $sprite)" $toStereos("container", $tags) as $alias +database "$getContainer($label, $techn, $descr, $sprite)$getProps()" $toStereos("container", $tags) as $alias !endprocedure !unquoted procedure ContainerQueue($alias, $label, $techn, $descr="", $sprite="", $tags="") -queue "$getContainer($label, $techn, $descr, $sprite)" $toStereos("container", $tags) as $alias +queue "$getContainer($label, $techn, $descr, $sprite)$getProps()" $toStereos("container", $tags) as $alias !endprocedure !unquoted procedure Container_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="") -rectangle "$getContainer($label, $techn, $descr, $sprite)" $toStereos("external_container", $tags) as $alias +rectangle "$getContainer($label, $techn, $descr, $sprite)$getProps()" $toStereos("external_container", $tags) as $alias !endprocedure !unquoted procedure ContainerDb_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="") -database "$getContainer($label, $techn, $descr, $sprite)" $toStereos("external_container", $tags) as $alias +database "$getContainer($label, $techn, $descr, $sprite)$getProps()" $toStereos("external_container", $tags) as $alias !endprocedure !unquoted procedure ContainerQueue_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="") -queue "$getContainer($label, $techn, $descr, $sprite)" $toStereos("external_container", $tags) as $alias +queue "$getContainer($label, $techn, $descr, $sprite)$getProps()" $toStereos("external_container", $tags) as $alias !endprocedure ' Boundaries diff --git a/C4_Context.puml b/C4_Context.puml index 853a5d6..3cb23d6 100644 --- a/C4_Context.puml +++ b/C4_Context.puml @@ -132,19 +132,19 @@ endlegend !endfunction !unquoted procedure Person($alias, $label, $descr="", $sprite="", $tags="") -rectangle "$getPerson($label, $descr, $sprite)" $toStereos("person", $tags) as $alias +rectangle "$getPerson($label, $descr, $sprite)$getProps()" $toStereos("person", $tags) as $alias !endprocedure !unquoted procedure Person_Ext($alias, $label, $descr="", $sprite="", $tags="") -rectangle "$getPerson($label, $descr, $sprite)" $toStereos("external_person", $tags) as $alias +rectangle "$getPerson($label, $descr, $sprite)$getProps()" $toStereos("external_person", $tags) as $alias !endprocedure !unquoted procedure System($alias, $label, $descr="", $sprite="", $tags="") -rectangle "$getSystem($label, $descr, $sprite)" $toStereos("system", $tags) as $alias +rectangle "$getSystem($label, $descr, $sprite)$getProps()" $toStereos("system", $tags) as $alias !endprocedure !unquoted procedure System_Ext($alias, $label, $descr="", $sprite="", $tags="") -rectangle "$getSystem($label, $descr, $sprite)" $toStereos("external_system", $tags) as $alias +rectangle "$getSystem($label, $descr, $sprite)$getProps()" $toStereos("external_system", $tags) as $alias !endprocedure ' Boundaries diff --git a/C4_Deployment.puml b/C4_Deployment.puml index ed1638c..e3dd8b6 100644 --- a/C4_Deployment.puml +++ b/C4_Deployment.puml @@ -19,7 +19,7 @@ 'UpdateSkinparamsAndLegendEntry("node", $fontColor=$NODE_FONT_COLOR, $borderColor=$NODE_BORDER_COLOR) UpdateSkinparamsAndLegendEntry("node", $bgColor=$NODE_BG_COLOR, $fontColor=$NODE_FONT_COLOR, $borderColor=$NODE_BORDER_COLOR) skinparam rectangle<> { - StereotypeFontSize 0 + FontStyle normal } ' Layout @@ -36,11 +36,13 @@ SetDefaultLegendEntries("person\nsystem\ncontainer\nexternal_person\nexternal_sy ' If a $type contains \n then the these are used (and no automatic space based line breaks are done) ' $NODE_TYPE_MAX_CHAR_WIDTH defines the automatic line break position !global $NODE_TYPE_MAX_CHAR_WIDTH = 35 +!global $NODE_DESCR_MAX_CHAR_WIDTH=32 ' Elements ' ################################## -!unquoted function $breakLine($type) +!unquoted function $breakType($type, $widthStr) +!$width = %intval($widthStr) !$multiLine = "" !if (%strpos($type, "\n") >= 0) !while (%strpos($type, "\n") >= 0) @@ -49,8 +51,8 @@ SetDefaultLegendEntries("person\nsystem\ncontainer\nexternal_person\nexternal_sy !$type = %substr($type, $brPos+2) !endwhile !else - !while (%strlen($type)>$NODE_TYPE_MAX_CHAR_WIDTH) - !$brPos = $NODE_TYPE_MAX_CHAR_WIDTH + !while (%strlen($type)>$width) + !$brPos = $width !while ($brPos>0 && %substr($type, $brPos, 1)!= ' ') !$brPos = $brPos - 1 !endwhile @@ -62,7 +64,7 @@ SetDefaultLegendEntries("person\nsystem\ncontainer\nexternal_person\nexternal_sy !if ($brPos > 0) !$multiLine = $multiLine + %substr($type, 0, $brPos) + '\n' - !$type = %substr($type, $brPos) + !$type = %substr($type, $brPos + 1) !else !$multiLine = $multiLine+ $type !$type = "" @@ -75,15 +77,102 @@ SetDefaultLegendEntries("person\nsystem\ncontainer\nexternal_person\nexternal_sy !return $multiLine !endfunction -!function $getNode($label, $type) - !if ($type == "") - !return '==' + $label +!unquoted function $breakDescr($descr, $widthStr) +!$width = %intval($widthStr) +!$multiLine = "" +!if (%strpos($descr, "\n") >= 0) +!else + !while (%strlen($descr)>$width) + !$brPos = $width + !while ($brPos>0 && %substr($descr, $brPos, 1)!= ' ') + !$brPos = $brPos - 1 + !endwhile + + !if ($brPos < 1) + !$brPos = %strpos($descr, " ") + !else + !endif + + !if ($brPos > 0) + !$multiLine = $multiLine + %substr($descr, 0, $brPos) + "\n" + !$descr = %substr($descr, $brPos + 1) + !else + !$multiLine = $multiLine+ $descr + !$descr = "" + !endif + !endwhile +!endif +!if (%strlen($descr)>0) + !$multiLine = $multiLine + $descr +!endif +!return $multiLine +!endfunction + +!function $getNode($label, $type, $descr, $sprite) + !$nodeText = "" + !if ($sprite != "") + !$nodeText = $nodeText + '<$'+$sprite+'>\n' !endif - !if (type != "") - !return '==' + $label + '\n[' + $breakLine($type) + ']' + !$nodeText = $nodeText + '==' + $label + !if ($type != "") + !$nodeText = $nodeText + '\n[' + $breakType($type, $NODE_TYPE_MAX_CHAR_WIDTH) + ']' !endif + !if ($descr != "") + !$nodeText = $nodeText + '\n\n' + $breakDescr($descr, $NODE_DESCR_MAX_CHAR_WIDTH) + !endif + !return $nodeText !endfunction -!unquoted procedure Deployment_Node($alias, $label, $type="", $tags="") -rectangle "$getNode($label, $type)" $toStereos("node",$tags) as $alias +!function $getNode_L($label, $type, $descr, $sprite) + !$nodeText = "" + !if ($sprite != "") + !$nodeText = $nodeText + '<$'+$sprite+'>\l' + !endif + !$nodeText = $nodeText + '==' + $label + !if ($type != "") + !$nodeText = $nodeText + '\l[' + $breakType($type, $NODE_TYPE_MAX_CHAR_WIDTH) + ']' + !endif + !if ($descr != "") + !$nodeText = $nodeText + '\l\l' + $breakDescr($descr, $NODE_DESCR_MAX_CHAR_WIDTH) + !endif + !return $nodeText +!endfunction + +!function $getNode_R($label, $type, $descr, $sprite) + !$nodeText = "" + !if ($sprite != "") + !$nodeText = $nodeText + '<$'+$sprite+'>\r' + !endif + !$nodeText = $nodeText + '==' + $label + !if ($type != "") + !$nodeText = $nodeText + '\r[' + $breakType($type, $NODE_TYPE_MAX_CHAR_WIDTH) + ']' + !endif + !if ($descr != "") + !$nodeText = $nodeText + '\r\r' + $breakDescr($descr, $NODE_DESCR_MAX_CHAR_WIDTH) + !endif + !return $nodeText +!endfunction + +!unquoted procedure Deployment_Node($alias, $label, $type="", $descr="", $sprite="", $tags="") +rectangle "$getNode($label, $type, $descr, $sprite)$getProps()" $toStereos("node",$tags) as $alias +!endprocedure + +!unquoted procedure Deployment_Node_L($alias, $label, $type="", $descr="", $sprite="", $tags="") +rectangle "$getNode_L($label, $type, $descr, $sprite)$getProps_L()" $toStereos("node",$tags) as $alias +!endprocedure + +!unquoted procedure Deployment_Node_R($alias, $label, $type="", $descr="", $sprite="", $tags="") +rectangle "$getNode_R($label, $type, $descr, $sprite)$getProps_R()" $toStereos("node",$tags) as $alias +!endprocedure + +!unquoted procedure Node($alias, $label, $type="", $descr="", $sprite="", $tags="") +rectangle "$getNode($label, $type, $descr, $sprite)$getProps()" $toStereos("node",$tags) as $alias +!endprocedure + +!unquoted procedure Node_L($alias, $label, $type="", $descr="", $sprite="", $tags="") +rectangle "$getNode_L($label, $type, $descr, $sprite)$getProps_L()" $toStereos("node",$tags) as $alias +!endprocedure + +!unquoted procedure Node_R($alias, $label, $type="", $descr="", $sprite="", $tags="") +rectangle "$getNode_R($label, $type, $descr, $sprite)$getProps_R()" $toStereos("node",$tags) as $alias !endprocedure diff --git a/README.md b/README.md index 12950b0..7d1462a 100644 --- a/README.md +++ b/README.md @@ -168,7 +168,10 @@ Diagram types * Deployment diagram * Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml` * Additional Macros: - * `Deployment_Node(alias, label, ?type, ?tags)` + * `Deployment_Node(alias, label, ?type, ?description, ?sprite, ?tags)` + * `Node(alias, label, ?type, ?description, ?sprite, ?tags)`: short name of Deployment_Node() + * `Node_L(alias, label, ?type, ?description, ?sprite, ?tags)`: left aligned Node() + * `Node_R(alias, label, ?type, ?description, ?sprite, ?tags)`: right aligned Node() Take a look at each of the [C4 Model Diagram Samples](samples/C4CoreDiagrams.md). @@ -285,6 +288,48 @@ SHOW_DYNAMIC_LEGEND() ![custom schema](http://www.plantuml.com/plantuml/png/dPHVRvim5CNV-HIKzI6LceGGag19aHeesYhbJvKiclQ4R7n3KC4WswZfjvy1RtXfkwfHNiBldkDxZf6uum8nKUMPSPNIEAi8c4SXIlvrE6JeUP2aubZXYWEB2og0Ya5SvCCoGxJszBaWMOg7WTj_hD5-jHpcY0jW4aL1xJY9GLcVRbnT1vlbPXijeeavDwqliyCOsvwbSRVXU3pnxAdEnmq7stD6hiwTXXy8zgPZdOzQ3c3ZAUu6wt3_OxjOjiDP_UjclZ8HZo306bTBi8CmSJIkGddsR8nYZQiI4zUPUPx6LMc7sBOhppVs9K42TayfBH53ELzGieG4A0cfO2yzgmJ62shTcjSu2OgiOFFk-YGy55Hqk2jNwmj6W9rvHdB0ZuWKpobDvfPW5LWt7uQ0am16KHQzcyQ_88sywuzNynSk87-pltj1V-SJPTzTxL-msgzN6u_D_VNYYeiY1tPhMYr1cUaZAYCbPg1cyhNicW0zt4vK7kbve7L247yzhL0wb2KAJwANepJhF66_VZQvKfu9wO6X7AHizUV_6sTl8TEIlqgrvy2bJAeY7yLFclJV93kWX9lGvE6cA9Hd3Mbon0Kxg_jVTsjzxT0AgLJ6xllcPtJ_QxrOFGJHClmMhkzxDyOTK59_b7u3 "custom schema") +## Element properties + +A model can be extended with (a table of) properties that concrete deployments or more detailed concepts can be documented: + +* `SetPropertyHeader(col1Name, col2Name, ?col3Name, ?col4Name)`: + The properties table can have up to 4 columns. The default header uses the column names "Name", "Description". +* `WithoutPropertyHeader()` + If no header is used, then the second column is bold. +* `AddProperty(col1, col2, ?col3, `?col4)` + (All columns of) a property which will be added to the next element. + +Following sample uses all 3 different property definitions (and the aligned deployment node). + +```cs +@startuml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml + +' default header Property, Value +AddProperty("Name", "Flash") +AddProperty("Organization", "Zootopia") +AddProperty("Tool", "Internet Explorer 7.0") +Person(personAlias, "Label", "Optional Description (with default property header)") + +SetPropertyHeader("Property","Value", "Description") +AddProperty("Prop1", "Value1", "Details1") +AddProperty("Prop2", "Value2", "Details2") +Deployment_Node_L(nodeAlias, "Label", "Optional Type", "Optional Description (with custom property header)") { + + WithoutPropertyHeader() + AddProperty("PropC1", "ValueC1") + AddProperty("PropC2", "ValueC2") + Container(containerAlias, "Label", "Technology", "Optional Description (without property header)") +} + +System(systemAlias, "Label", "Optional Description (without properties)") + +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") + ## Snippets for Visual Studio Code Because the PlantUML support inside of Visual Studio Code is excellent with the [PlantUML extension](https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml), you can also find VS Code snippets for C4-PlantUML at [.vscode/C4.code-snippets](.vscode/C4.code-snippets). diff --git a/percy/C4_Deployment Diagram Sample - bigbankplc-details.puml b/percy/C4_Deployment Diagram Sample - bigbankplc-details.puml new file mode 100644 index 0000000..0baf7db --- /dev/null +++ b/percy/C4_Deployment Diagram Sample - bigbankplc-details.puml @@ -0,0 +1,68 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include ./../C4_Deployment.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml +!endif + +AddTagSupport("fallback", $bgColor="#c0c0c0") +WithoutPropertyHeader() + +' dynamic legend is used (activated in last line) +' LAYOUT_WITH_LEGEND() + +title Deployment Diagram for Internet Banking System - Live + +Deployment_Node(plc, "Live", "Big Bank plc", "Big Bank plc data center"){ + AddProperty("Location", "London and Reading") + Deployment_Node_L(dn, "bigbank-api***\tx8", "Ubuntu 16.04 LTS", "A web server residing in the web server farm, accessed via F5 BIG-IP LTMs."){ + AddProperty("Java Version", "8") + AddProperty("Xmx", "512M") + AddProperty("Xms", "1024M") + Deployment_Node_L(apache, "Apache Tomcat", "Apache Tomcat 8.x", "An open source Java EE web server."){ + Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.") + } + } + AddProperty("Location", "London") + Deployment_Node_L(bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS", "The primary database server."){ + Deployment_Node_L(oracle, "Oracle - Primary", "Oracle 12c", "The primary, live database server."){ + ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") + } + } + AddProperty("Location", "Reading") + Deployment_Node_R(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS", "The secondary database server.", $tags="fallback") { + Deployment_Node_R(oracle2, "Oracle - Secondary", "Oracle 12c", "A secondary, standby database server, used for failover purposes only.", $tags="fallback") { + ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="fallback") + } + } + AddProperty("Location", "London and Reading") + Deployment_Node_R(bb2, "bigbank-web***\tx4", "Ubuntu 16.04 LTS", "A web server residing in the web server farm, accessed via F5 BIG-IP LTMs."){ + AddProperty("Java Version", "8") + AddProperty("Xmx", "512M") + AddProperty("Xms", "1024M") + Deployment_Node_R(apache2, "Apache Tomcat", "Apache Tomcat 8.x", "An open source Java EE web server."){ + Container(web, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet Banking single page application.") + } + } +} + +Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){ + Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.") +} + +Deployment_Node(comp, "Customer's computer", "Mircosoft Windows of Apple macOS"){ + Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox, Apple Safari or Microsoft Edge"){ + Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.") + } +} + +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_R(db, db2, "Replicates data to") + +SHOW_DYNAMIC_LEGEND() +@enduml \ No newline at end of file diff --git a/samples/C4CoreDiagrams.md b/samples/C4CoreDiagrams.md index 73aa6b7..e639581 100644 --- a/samples/C4CoreDiagrams.md +++ b/samples/C4CoreDiagrams.md @@ -46,10 +46,14 @@ Source: [C4_Deployment Diagram Sample - bigbankplc.puml](C4_Deployment%20Diagram ![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") +**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") ## Icons 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/hLPDSzis4BthLspLGvKPofnEcqjEaIMrTcfz9AJZzCHPaf241WHO09IYwVI_Tm6H52dPJJfJduZ5VZoyVRloMsDHsweGW--up4ILCzXPMvetOQZnSBFbTbUbbM4wKz8oQMyoLOIOQuvoBwgo2gS_ZzS2fNrSF8G2BJEMJCcKl95BfczAdpjd6ph1RFxnVhfQHjzGmrObbVafB5rooZ7cT3lUaCVOb9fJeR10OvaESxPtTwQjyijg6K-Uvj5gCVzV2taR7fXH1Hk_7lm0bQG41IK2ksEmKKAe0vTR40u5oXnwrrmR-b90042e38KuKewMzcTOQwuQsaAKsqhWYzUvifBPbsx_m3s-T5UOFqL2nEolQdV83B_gmEIU2LMoamkzxc7o--enJkBLEfcjdfQZLsVR94gYt-Rnz8wCjUdfFhvB7kQ_pfSpCWuiju9uQKY1dEDMOq54QxYd1cfwBDoY_EmuZuxKes8mM3Djb1nbbR7K9Xt0jFqQJg0nWzhufgGK7S21X06b3qJXRO1PfYffpP1md58djsJ8KHz7sO-KwnB0y1NyDG3wQ_6E3YnDi2p9-OcbC2bBmJEqNCaXcTvHDmA8I644Vl5nwcmp9ZWHR3mq6apBCwYbwkNap6tTj7duUk9YNNS9R1-1AQd6C28tmSPht3A7egaUPPgNDe39ILJElDPgptDcWCJvVBKDQTuz0GMtHwVchFA46jXpT25S0xqRKgqE91UNj1Rj5RX2fLomcg65FpJmfjy7y0aB97Bwi6Yq2Xh974oL6e9Lj_5RO9ehd2S0uFS7StLEytC9T9QEShIOec6kH_Mdyu_UFq3lR9Kcb6x3W6PRRgn60W5SacGBt_e0TkIS0rOakKopd7hBKPZ0AOuPGvjXImTcinkNiJENL_obc7rcCYS2kTFs-lvvYSqKkUbpN8_Ghn3dkAB4BgG5yNSx4FClTiGAv8JG6yXhFbxGkHv65nPJTxWlGfEru9bMHcqipBzaEz85gRprR7O7bUZaht6TAr1-kQ4jm2uclyE_4syjZ8mCxTiwRG1CLMNFgWZQWG-0cYODUXQQJj0I-C14PwcSH_lHCEDgtyNnEYB7ljzf0F_TfpS7tlLKBbaoljsbghD8JkcQDL5dyiQ-69g2Q8uo2-1Tj5g6tUBTalyfChabxpEmyrpqitnWc1lOQ5NulNNmFwCqXbv8fyIpssdpJfUpmyU5f29AQu2DdTNdE0EvK5yVGp-kCcv7j-MZHRok4xMFwOLVwQuXniM7DJkVw7-UXfot54e_Uly0 "Container diagram for Internet Banking System") diff --git a/samples/C4_Deployment Diagram Sample - bigbankplc-details.puml b/samples/C4_Deployment Diagram Sample - bigbankplc-details.puml new file mode 100644 index 0000000..bcf430a --- /dev/null +++ b/samples/C4_Deployment Diagram Sample - bigbankplc-details.puml @@ -0,0 +1,65 @@ +@startuml +!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") +WithoutPropertyHeader() + +' dynamic legend is used (activated in last line) +' LAYOUT_WITH_LEGEND() + +title Deployment Diagram for Internet Banking System - Live + +Deployment_Node(plc, "Live", "Big Bank plc", "Big Bank plc data center"){ + AddProperty("Location", "London and Reading") + Deployment_Node_L(dn, "bigbank-api***\tx8", "Ubuntu 16.04 LTS", "A web server residing in the web server farm, accessed via F5 BIG-IP LTMs."){ + AddProperty("Java Version", "8") + AddProperty("Xmx", "512M") + AddProperty("Xms", "1024M") + Deployment_Node_L(apache, "Apache Tomcat", "Apache Tomcat 8.x", "An open source Java EE web server."){ + Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.") + } + } + AddProperty("Location", "London") + Deployment_Node_L(bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS", "The primary database server."){ + Deployment_Node_L(oracle, "Oracle - Primary", "Oracle 12c", "The primary, live database server."){ + ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") + } + } + AddProperty("Location", "Reading") + Deployment_Node_R(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS", "The secondary database server.", $tags="fallback") { + Deployment_Node_R(oracle2, "Oracle - Secondary", "Oracle 12c", "A secondary, standby database server, used for failover purposes only.", $tags="fallback") { + ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="fallback") + } + } + AddProperty("Location", "London and Reading") + Deployment_Node_R(bb2, "bigbank-web***\tx4", "Ubuntu 16.04 LTS", "A web server residing in the web server farm, accessed via F5 BIG-IP LTMs."){ + AddProperty("Java Version", "8") + AddProperty("Xmx", "512M") + AddProperty("Xms", "1024M") + Deployment_Node_R(apache2, "Apache Tomcat", "Apache Tomcat 8.x", "An open source Java EE web server."){ + Container(web, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet Banking single page application.") + } + } +} + +Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){ + Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.") +} + +Deployment_Node(comp, "Customer's computer", "Mircosoft Windows of Apple macOS"){ + Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox, Apple Safari or Microsoft Edge"){ + Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.") + } +} + +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_R(db, db2, "Replicates data to") + +SHOW_DYNAMIC_LEGEND() +@enduml \ No newline at end of file From b0d520607d68a8e262715d8a7a1017c953ed79b2 Mon Sep 17 00:00:00 2001 From: Naveen Raju Mudhunuri Date: Fri, 22 Jan 2021 13:20:29 +0530 Subject: [PATCH 14/16] Update README.md Corrected a mistake --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 8cddaa4..f810e07 100644 --- a/README.md +++ b/README.md @@ -55,7 +55,7 @@ Rel(personAlias, containerAlias, "Label", "Optional Technology") In addition to this, it is also possible to define a system or component boundary. -Take a look a look at the following sample of a C4 Container Diagram: +Take a look at the following sample of a C4 Container Diagram: ```csharp @startuml Basic Sample From e1ed5478f7f89d1ba5265f8191ef79fe17c299fb Mon Sep 17 00:00:00 2001 From: Ben Peachey Date: Mon, 1 Feb 2021 16:46:58 +0100 Subject: [PATCH 15/16] Change stale-bot's label from "wont fix" to the more user friendly "stale". --- .github/stale.yml | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/.github/stale.yml b/.github/stale.yml index dc90e5a..1bb37ed 100644 --- a/.github/stale.yml +++ b/.github/stale.yml @@ -4,14 +4,15 @@ daysUntilStale: 60 daysUntilClose: 7 # Issues with these labels will never be considered stale exemptLabels: + - not-stale - pinned - security # Label to use when marking an issue as stale -staleLabel: wontfix +staleLabel: stale # Comment to post when marking an issue as stale. Set to `false` to disable markComment: > This issue has been automatically marked as stale because it has not had - recent activity. It will be closed if no further activity occurs. Thank you - for your contributions. + activity in the past 60 days. It will be closed in seven days if no + further activity occurs. Thank you for your contributions. # Comment to post when closing a stale issue. Set to `false` to disable closeComment: false From eaaf13383c61e314267cafe418d755ec606952a6 Mon Sep 17 00:00:00 2001 From: Adrian Lupu Date: Sun, 7 Feb 2021 16:58:10 +0200 Subject: [PATCH 16/16] readme: typo in color causes custom schema diagram to fail --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 164900f..7aad13c 100644 --- a/README.md +++ b/README.md @@ -296,7 +296,7 @@ If the custom (color) schema is defined via `UpdateSkinparamsAndLegendEntry()` t !$COLOR_A_4 = "#b35806" !$COLOR_A_3 = "#e08214" !$COLOR_A_2 = "#fdb863" -!$COLOR_A_1 = "#fee0b6b" +!$COLOR_A_1 = "#fee0b6" !$COLOR_NEUTRAL = "#f7f7f7" !$COLOR_B_1 = "#d8daeb" !$COLOR_B_2 = "#b2abd2" @@ -324,7 +324,7 @@ SHOW_DYNAMIC_LEGEND() @enduml ``` -![custom schema](http://www.plantuml.com/plantuml/png/dPHVRvim5CNV-HIKzI6LceGGag19aHeesYhbJvKiclQ4R7n3KC4WswZfjvy1RtXfkwfHNiBldkDxZf6uum8nKUMPSPNIEAi8c4SXIlvrE6JeUP2aubZXYWEB2og0Ya5SvCCoGxJszBaWMOg7WTj_hD5-jHpcY0jW4aL1xJY9GLcVRbnT1vlbPXijeeavDwqliyCOsvwbSRVXU3pnxAdEnmq7stD6hiwTXXy8zgPZdOzQ3c3ZAUu6wt3_OxjOjiDP_UjclZ8HZo306bTBi8CmSJIkGddsR8nYZQiI4zUPUPx6LMc7sBOhppVs9K42TayfBH53ELzGieG4A0cfO2yzgmJ62shTcjSu2OgiOFFk-YGy55Hqk2jNwmj6W9rvHdB0ZuWKpobDvfPW5LWt7uQ0am16KHQzcyQ_88sywuzNynSk87-pltj1V-SJPTzTxL-msgzN6u_D_VNYYeiY1tPhMYr1cUaZAYCbPg1cyhNicW0zt4vK7kbve7L247yzhL0wb2KAJwANepJhF66_VZQvKfu9wO6X7AHizUV_6sTl8TEIlqgrvy2bJAeY7yLFclJV93kWX9lGvE6cA9Hd3Mbon0Kxg_jVTsjzxT0AgLJ6xllcPtJ_QxrOFGJHClmMhkzxDyOTK59_b7u3 "custom schema") +![custom schema](https://www.plantuml.com/plantuml/png/dPHVRw905CNV-HIKxODDgY1W9PkOL2ZPROBQw9hDFf4PvegaC92P8Ms_VOS_hUFMRhF65_pTU-uzvsAyvG8nKHUvTf7H9Ay9w7iXAlxTD1bw6gMPsDUuvi2IaWgWOfIKXLdbY3QQ8HSapx0PkCE71cqNaLaWBe1950UDubcCgcQwTd4PhABLEfx74tsc6z-cEmTRdg5mj-NOcNZMZSgTbeFbsMDNvNRBTmHxDuxAnnq7iB0oPnbkVwtdKLURDfz3pUyrn2C8iCgx7TX6cDWgxpnvrjH1YSgx31FNddgUohlCDh4iLyxNjXL10ZQF6QqGGmMVKn912fI4LB2NWL41uoKrhlLBd0PbNhBPuNeIxkHbZt0Vhkal6G7sbsOi2toFIFcKqNHc25Q3SVMb2VdkW56Knv-wySzm8s_zzMh-8dz4nSdyxXdvxVy8--bg_upLVhDQUsZlDqXgBie2sBLkT0Jbke-ej9JgGL-JhsNJ6XZWhjBxaPfxsZW4yQxf6gMYbyJXinWKACiFcd3OVDVvM-Tn8zt9Iu1iMxmzdvYzXbnn_i7LbWENRR8hzb7ogBGUEzd8KtCTMZzS5sMlMKAMxkNXFiJzXxgJdbAy1-fTQPkVgz_ntP_bV74Vn57u8rpU3QwqMpbD_YUz0W00 "custom schema") ## Element properties