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 d7cc862..ad2771f 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 8502c7d..fd2e40a 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 5467a07..56fd624 100644 --- a/C4_Context.puml +++ b/C4_Context.puml @@ -203,19 +203,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 c03f9a7..a149161 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 ee2b197..4a13fec 100644 --- a/README.md +++ b/README.md @@ -183,7 +183,10 @@ Diagram types * Deployment diagram * Import: `!include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/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). @@ -343,6 +346,48 @@ SHOW_DYNAMIC_LEGEND() ![custom schema](http://www.plantuml.com/plantuml/png/dPHVRvim5CNV-HIKzI6HseOGag19aHeesYhbJvKiclQ4R7m3A617jb7JRp_0R7XPkcfHNiBldkDxZf5u519nMHQvSPFHE2y9cAcKH_5vCE3ezI79P5hYKW2F6PL0vKFCYi4Xut4gP3e8tFkN756vMou6S9902P0AHa4jFic7OtsmSNCRh1VhJJIFnkRCj3vDzoDiUvR6tORZqTYp9peVDHnipncwEdSQlYVOcunqFbGSmCOJt0rMuUxRPhvGmsdzwsP-Qo8UGO1rxgXG3iB4qRaAvTdJ4OfrhagCNMVgUJfNfHrYsows36Dt94Z2zf3H8-Ae47DA5f009I6L_Ard7O4BHgqxynOd0SiPdtNNLy4zexB3NRbQppW1VkOPLWEH8i9UCvhCBCbBiFeVXgXV9gSeZzvDur-Hne-67wyMRq92SR6_UqL_vp_AlhlQlsArNwysNfhxwyMbaAm0VcTQYg3Sz16j8YLcqCwilh5j0lImchHvAiyphHE2_ErHmihHMgBm97i5olBE4zxNpwPebMT2kkUeW4gs_FN_mjaRoBNaVwNQ2H1MlrP5FeeFclJF95kWH9ZGv16cPArd1LcIOiRFwlxJhQoN7Af4byhOVbr_Zvv-hERBvo1QX5_2rLElRpm29VL7wIS0 "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/kirchsth/C4-PlantUML/extended/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/ZPB1RXCn48Rl-nHcBsoaaAKH4XAdLYa8fD16443Y4hdh8RRmUYnxh7P1l3jZg-csQG8zUUpvycU-jKyZoK2fjzKpupgR50XDvEERjWtoUhOrfDDLYX0wT0IEPXtsxKyJEXr9jujNBrPMElhoSTd23VSLA3xSd8EtEFIPzpcxUYuK_939aj0W5GIn2kWXq30LNwLDK9qfjJjgwWlPGpqLzJihewud3vkNOIkT-IN9eClGTqH2R-G-jqQqkV_14GG79DxUy501WdWzUydm2a94r_Yod5aZ8yDBUGNbLvS-vqihpY5smPITQAuDwJiJV_jNjqeJpgm-0-qcU5zEctgthwTrKStfzqBtnyxLIMOAd2kcIHeRJmwXypjqVW-TCphUmUO25MoMZUFbkEXwyF0Vyov5mlw0kFXTLK9yOmRJ_WUOSEVHs8jHaSl3oAZ6PKOMwDZESMQtgnxfhA7J3YrkXt-xO3fuWN_u2eT8q3UnBFlvJqiq4Cjh-0JsuViQvpwQEmfmmYaubNhx5m00 "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..1e4b79b --- /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/kirchsth/C4-PlantUML/extended/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 f7411a8..5c28b7d 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-KIALhFpdipyyPZvwCFw4APwzPFoWXTIe9v28N_hTDnUBUVgJ0lqzAJ4zO4Cc5VsBnpgvoO-p3lz8_snXfDk1vUTEYUtqkIR9mEgD1scKV_8dA_Wz8mC1eWp0bcLcjxfqm6MXa2D18QhvNp_6I10uEs0hLUCiVN33T4QFMad62Mb4LXNTXgpnYJehXjxy8lQTQtsheFxP_5GVosjrlC9fS6SoL0KqOSN_aOJS8MYg0M68XD1ZJwKEMupOYBtkVHzMHwSpOvdLwSV3gv76mnKr114wppWO72p67EHJeuOz6SeG37Q6vZlSdI1yfX3oxKWbgjDMnwQILj5LhiGljOPHK0UDb-iWQ90K5G96vl_zi2_ZnbaOP1gSfInknXeNPsTluAz-yZrNLQcb32uQ_x1qTmCKaUA3RHO85YJWpgLGymiRd0q7vgWFVxzpND-jEt9Y3BvfX4HS3u37f5eHNxAsiYnpakiEfyKhYepF2FVZIFdLqeIVwvTBFIY0X6hS8I5ehHS9wCBZkdayau0GwnpvrzoE1Bg_xTLDXA6faU73uIAYxVAf5rA7IKQ5GzS5_7JkNebksrxR0hNfHda6x9b5q76315Jn5sHHhhEk7130dBdMDycmJhgDgh3XnboWTNUOCoC-lowdaNvkZd907BCETSLwg3S2JZ4hNV1HI2l0TjCrvG46yNhziKhxjHF9w_W9d_i9x8RVYMdjt7WYOah97F9NsPUBFAtHz5vkU9lrBuzB7WTvJMOttq_yQw-vrppV4PS4FfA-TwG5ejoFdgWFU1tGMixfJe7StFHzxpZoOeC2F0TPXDM_NByyCqjp75Vkc3pSczyy06nNII5afGNM-XEUme0UkWPwIpIiQIcwNMC7OVrdX6HV2Vc2DNs3Yq4BJALRmyV9bw2c1diR9l7MR1WbYbwUF95Z7ADVFbeZSLAMnUDAkCbZBU3Z5ZvOJrTXRWHXbfxtnCgAuwHp5ANhf1KiU-v5OTFgvNaV2JjR4Z_RcpEKiojFyehH5-LuvczdvtnPtW39sAeWwLS7K29pAZXt1DVNs1SUBgNeyneqrRAX5E5VLMwPcirEYQmclzVLhpVePLrQpqUbDTaVww0UgxR8Yt733UQ8AZUYQCcVpjhQbl8aP745VrDiJqkXug1ZRcnLPLYNM37wMwYbM5aMbrgg7qC7CshwIwSohGGy3pmN6_2UY-6Z6zuYDq3QdRGxx-Dn8iExMIqz7DTF3viZSyww__7tqa8yjS_mS0 "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_Rzj63FtVduBp1ZGfd1ynqg4OKA2EdJKfuYI8dAO51WJK7ItVSheJxavElA7VVJn9hktOQLfi60RC0Ho98ldu-2XAVki3kb3cklM3CaANac0IGk5_sTjpUB-RgJ0fqzAJ4zO4Cc5Ns7plJZanyM6orp_SkTHemlNmR8yU-BeaoSRR0HNQplBeNyJSBw0q71WD42O4OwkrlLSc0wqC0He9AvULytnaWO51Mu5QppZ7bmet8BHwKeumIygYi2vijSSSawAuQtVWfpJhMstTc_QFOZ_-jRTRDypBbk7IsO9Sc9qGId9Rsor6aJE3kHAWAMC-e7oiGi8MYg2c68XD1ZJwKDM-pH5dlKyNrwFRczFHoUtPyRlZyq7C55JG18iwOQ0mSvWpUGUd9f0p5E08pLtiGpBpWNBOWJCrfLPh4NPxRYLj5Lfqe1sljVd_aSggG63putEG6104HO3szfyju0_tPivqgtrc1GPb3GVoiP7MLFs_8fHS2FScHZp2lptRaeRzKvMbZBE3XNhvykLluU5rp7ATbYQKSF3pxluXd8sIQEl1FQNWoKt9WIElOd9G9kgxV6cCBky02a4-Tdcg47vz1KUdxtPEBpdNqE_EIQmHUOzJX0_aV4FcDTU-qV5Z_X2llphe3fzsyT7bOBzxkF3Pr0OiK4me4gmEO6HpWQ7zs02lTnygem66CE1jwGH1LVBnyL83LkZ5Jz-QWCgGOoWLCroUGgyej5geLcM9cYM5YrqTVkX7CxEPAab-VRZ6fH4n6BKAiwh72E-JY_Ezaz7eCW66s5qY_RdLV3y_EKzEIpCeCjq_M1gRUFhKm8ouTqmdHpUhHZX5JsizseXb7GeT9Rce3c07BkiyxONje2iUWNH0goaje9wJOv1koPHJ39g0cEwADDPzXRaP4Xw27EFL95X7rVQ8Tq2cV72LDoWpjYwlZZimGJyX2LY62NDgL0RXICPJr7v-Tu2s6PzG4DyjrjVlxQibjRghQdM_ffOdOOtSg1SltO2PVxDOmzlmj8HNZOJTPGsJUVPr5NiBw0xuW4QcQpLqwgqTT-qObRPiWg9qXVNamHezUwx8TV6x_nNrrmjVcuT_QEtpQAJB8y5xgzxxX_-llN_LxFtklxBusOapt53wZOj_G76LEL_rs0Ts5z2yhaNlQ5v_9dZ-qWG5PWIuWDcqMpwllu_aDfROBtsmERaN7jYWE9sagH9KTwNG37kHW7NGCz9P9IFbLQfr6BiFwtYEYi4VCKTckF9KGz0gLu4a-3BrpCIE8xFdddR1WcZAz77COenog_KowKqaXSsBLPRHKZ9SErQidB3UZWFSA2FjlOy5rQnp51V9dEpZhAbZNtADmaVrMKpupjgeI7_Y6Aq3G_k7qffl2-LeR1ywJUu4n-XKREfG2LSNS2mpYd3he-GBZBkerlgIjTuqKebmggX7fMUoKgDRRRpMVw_NSUWRrjpfnL3n0lqo0FNBpX3l632-yWX6zPmmLlAxjwP-LU7e6CIilY_Yzhg-gJXmvNwn5Ikn47Yfr0QhWf5fynJrC6PrgbRTEnLe3lX-SDHV3UX-SmHl5vakGcfvoDSlyi6oKoivkRYv7NmwxmrF-ukV66_9o3BNVm40 "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](http://www.plantuml.com/plantuml/png/hLHDS-D44BtxLpJXWBVAZee2BfpMiGt94d-mSZRBITMIslQGqOoO7jb9KVntUXH5YfnDPQdYfkcFrqzlNizxzkXyLUZ1Dyfakie9zjwN_7CKEJoUxvJVLsd5v39hF1b_djaYkbCksxFVHzCVnskDnjyihYEwbtnEkGIJgHIZCkJEonewfwsSO3R_T3LTBUEl6E6h4dFtGrG6UC4OAycEjr8nvj8fJnmLo9vSbDCXvBYTyijgkPdSpkFLOlw_3gfZU2Is1Or_6dm7bH60Ge30xmcsLcjxL6O7Eh10aqClhHpBbmKX0DfcgFM3OBIglrIjINMoHMXsbSPNqxdrXlnhsJ_nWA_b2lvB9qpkS3Ax9sRqPW6P0sbRqcE9_Dtrv8_LpIRPhDR9R7Mx7BxhOfCuYN-RRwQN4cn2jrURo-Hw_kjyEPFWm2kl2LfH85UuSrY8q0wkZ2TdoCC5chkWUVp0deh1O4sEhHbc5NjRa1l1jFqwcy1J6EoslfHKkaTm56D0MJUYhcE0MMOhu_bCU3n29nSIoD4z3BFl1UkKmDax-7i001tVuP7I1CjIYcyfXKbPQfMXLzQSIUW37d04SUa2-SMdQOZDI2iHc6jgxAKsWyQgjPr2k9sRFltuUX9wm-qAsJu3Bb5IiPHf6gznHu75q_GuSwhq8vWycYg4ryuUL4uCgFMNfst5yru5dPH_26xEgbfGXeF2qA8So7z3wkoHgGPjJFk2N65JfQbHQ14EBRtfjoFuZ0MAE7rQe5MXFEN0LShamMw_cYQ_uFb80EhtWyASn_qv9JfBXpbwJ94ft57p6UhZtw-XT_RM4OS5T-1efzWx51AWZ5Ysm41e17ifpW4hiLpcA2VZ5MeU1SSHCsYxamFvx3mWTdlvKhyKipiokGYeWhVNLr-ssCnAcUlwUeA-8LpGIe13IqlYdtOXvlT-I0KgOLW7f6e-NiYvMSRGjjaJg7e8QbYep5csMm_p-smllY3WjlBfxP0Hp_0RNjq4mJTRXmMTR7wdVp3lap4o2RJ_zkmQ05DR-SuLetRXH-0T6iPQXUOcmYFmaVIpHwLRxHic3hClDvjrB8NzEYxnpPhU7eJIPboo9BNRfxPzI1guzfbeaEfWpmpjGEG7autWGxnQHi-7ToF_OsTo8TKjiNOlJb4-4kOCMsUB-jqwEkM9mTk0t03FBgO2sM8-q-F4Kh70Cj0uH6kCZiY9-_eS-dqLYmEwyV5YinQWdigzzbFVjSA4_gXHv_FYkXNdlRHMXVuN "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..e2d2233 --- /dev/null +++ b/samples/C4_Deployment Diagram Sample - bigbankplc-details.puml @@ -0,0 +1,65 @@ +@startuml +!include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/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