From 0eccd9686c0b8cadd47f0a5aeadc243942bd1ba1 Mon Sep 17 00:00:00 2001 From: Adrian Lupu Date: Sat, 19 Oct 2019 14:53:03 +0300 Subject: [PATCH] added deployment diagram support --- .vscode/C4.code-snippets | 22 ++++++++ C4_Deployment.puml | 19 +++++++ samples/C4CoreDiagrams.md | 5 ++ ...eployment Diagram Sample - bigbankplc.puml | 51 +++++++++++++++++++ 4 files changed, 97 insertions(+) create mode 100644 C4_Deployment.puml create mode 100644 samples/C4_Deployment Diagram Sample - bigbankplc.puml diff --git a/.vscode/C4.code-snippets b/.vscode/C4.code-snippets index 275dac1..ea01625 100644 --- a/.vscode/C4.code-snippets +++ b/.vscode/C4.code-snippets @@ -215,5 +215,27 @@ "}" ], "description": "Add a generic boundary to C4 diagram." + }, + "C4_Deployment_Node": { + "scope": "diagram", + "prefix": "Deployment Node", + "body": [ + "Deployment_Node(${1:alias}, \"${2:label}\"){", + "\t$0", + "}" + ], + "description": "Add a deployment node to C4 diagram." + }, + "C4_Deployment_Node_Type": { + "scope": "diagram", + "prefix": [ + "Deployment Node with type" + ], + "body": [ + "Deployment_Node(${1:alias}, \"${2:label}\", \"${3:type}\"){", + "\t$0", + "}" + ], + "description": "Add a deployment node to C4 diagram." } } \ No newline at end of file diff --git a/C4_Deployment.puml b/C4_Deployment.puml new file mode 100644 index 0000000..2038bae --- /dev/null +++ b/C4_Deployment.puml @@ -0,0 +1,19 @@ +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml +' uncomment the following line and comment the first to use locally +' !include C4_Container.puml + +' Styling +' ################################## + +skinparam rectangle<> { + Shadowing false + StereotypeFontSize 0 + FontColor #000000 + BorderColor #A2A2A2 + BorderStyle solid +} + +' Elements +' ################################## +!define Deployment_Node(e_alias, e_label) rectangle "==e_label" <> as e_alias +!define Deployment_Node(e_alias, e_label, e_type) rectangle "==e_label\n[e_type]" <> as e_alias \ No newline at end of file diff --git a/samples/C4CoreDiagrams.md b/samples/C4CoreDiagrams.md index 69ac13f..74b084e 100644 --- a/samples/C4CoreDiagrams.md +++ b/samples/C4CoreDiagrams.md @@ -31,3 +31,8 @@ Source: [C4_Context Diagram Sample - bigbankplc-landscape.puml](C4_Context%20Dia ![System Landscape diagram for Internet Banking System](http://www.plantuml.com/plantuml/png/jPPTRzis58Rl_IiEijjuTj8koGh7g9sFhS2o5hE3N2H1S28UIuGbKYFfEkxI_pwIfZGgiZ8KQEahyNoSvxnw8-IzDgZCgiXxUib5YGeBOBJ0LMxcz6GcEKz5GS90GiAGYhBM2iiRpam6XyDXT5_WqnLfZIdD-1U2Wr_YeAB4e4XpWdzwOC_Ca29fDYLTIc6s1OS-eZDaSir52WlCDVM-HbqcIibrw70cSwdWfoD__8thrBwD-t_THJGQFSgLOAWsut55rsJe8Xws1hp0UEkFlvrAnKXrtS_C9YTWg3DY3SeIaoMcRSPEdc-OtoL7IKfBqJ4eTBZqnyTttqujUAeST8WDJzuU7a_RBCFZDzEZoouMQqLI0lE77mDrTE9-RQYJYVjrGUcDDbHyRvQ3WwEJwNcRvStPyUNPy7y5-Z5Gl_hpYa0PPmIw7jRBAIN1GF4qCxtdKsWS-potIV3SUnu5Gun31BOls8V2Qwb3rOvnJf1hx1Esk_lxGDokhNCitXQoPxZ92MRRm1yec4xGqZ6EgLDv8HLCUMf54KieywHNomvxfwUVF0lcFkm-5MShRMH1waxS2PX04Xv1Bi1a18ysRH_Mt6HGXb9_1vWaLd2ZVzw3w6yFTTsXEJScWjiBOKYLYckwtuFuA-4R38CP6Wq-k191fW8F0conyrok_vkimKZup6aDN5Wr2ZHS2a0xnRYTk6fki0ye61Iu92XnKr2rL6rDrBx03WrsRTDDvbTT95uyfd0D2UhCTswx7pMWsT7tebyWhrpW9ymp0Yw2EwvuegIM2mCNJqbcgmWehkYUvf8wjxb2Avp2WdQ9FJDIaGRCyyeZYRse5DeXUIt6VYIvKIWq9YxDFf59NaCDD6tGohmm8_MP9sJXSB7mc7L8Xv1s8VyokAYjtPowoyOFeRuzt7rruEDYqPmxOGKNN1iL910CzAeifJBVIl1e-pz8tzz-iIeUw8zVk17UEPhJQqrwBqhxwyDllyzjCfeguoOOKNidmahR7b75gD-FRH6APYIO3gvoTjunegLLA9tefOQ_LwIT4gxsJWm68ys_qBk3m_7jd78gCodeVZHmb-F1OA_tOhN--SURF-s4rxcgLTogDLHjcqYVTl_NirkB1PwEzEYDGV_wKqTUuBpDE6Caxi_xq8HgXUilQgn2dN0T9RmdmTm_n_y2 "System Landscape diagram for Internet Banking System") +### Deployment Diagram + +Source: [C4_Deployment](C4_Deployment%20Diagram%20Sample%20-%20bigbankplc.puml) + +![Deployment Diagram for Internet Banking System - Live](https://www.plantuml.com/plantuml/svg/0/xLfhRziu5lqU8F-1utveKoJnevasMoJ1-9KcNSSs_DZCx7HWq19jSqk90adbCTlyzxtKmzRJjfoqG85LW5QMxZqyzv2yV8Y_IOM5SYssl_SQ_K9jWxacSGL32wKS-R5S5lZ-U4xLmfswaWY3suhOwjZWLdb03InCtgN48QpSF3dgCsohyKsdR66fY817aoROOseJSUm4PRWs-5g0WTI2e1bdZDzJUuuOM25icoZscWe9Tnn1sOXn0pFs62MAe8WMSHX_r2v16TeWmkOGtH4XARTHzRXoND5lmzZykDO74-1nneNKTwysNjhZ5vFCT43jJlkctHrDBdlmJxFNwGtGgqllyd67wX42dnS77hMRLrqVTdZzxpQgrlHR-PNQ3XROGc26NQP6v47L6PtRdgG6_4D4tF1UOEUMccg1QfLAz8M57sw8b7XEXlHlWgg_LkAEWXWAstD6q7_tzn1SGy0cN3qwv19gtNUg-Q_a0fj-DSymasH_xod15YiynV8beEf2yFiGnwiszEgzT_cFD63EusKvJpcHdfrDkMkRM3nUN2of9ldayA-aYZ_nBlznWmkJYDmNkfaGK4akY1dGUuqw-96xgd3JOHouTkf_zCQZINqu6VwpFMfUHSETOkFhNEX00pxjThlHQaPD5j1HxmLLa0kG4Yx9Q7awq2ws22erkKKDDCIsH3V3qlwUtmgXwtFztzcCwvQfIpeNnBounS86DJ-UbVMB2zGK12jYWhb09fM6AtLVFaGs8QRKgM5Aq1rcrDHM42InpLMSqHuJX3pgzIUjtcqNN1tFdIl5WJNLjGp8AOTE-t8q6Ln_kXeXHcPUDX9qlb1H5rq93RzfKB93cWXy7z-G2OI2vI4Y4uQdX1r4kbdf_3nuMaAnbeWb2losGDGtkc5c8t-npoIqre-9z7Bnf-_qrrbPlxvOGq07Fo0CQs7aWZh5nG3lIKYxUXWYrs8HBBK_BvKEGfDgzCNI3ttKyIsbArQE8iR2VbQ1N-noELzJ3H-AMYwN4Z80kvdWrY4OyaYJ28YdNnsYqj7HHUbWCyWojhLeo_X3sBXu3KWKRq8Npp_5CUCTe9qT7IL8hi5AKrrdj4AFutS9zDaf5xj8cbHqFLXXQNEKZPQoYyHP2c_0t47gDFVMBXBhZ9pMkVKo0kU0ytjx3TMSCBR4I73S54XIm_4k6exxwI37BwDW9hIpXkHu6_Lo41BinWMrw-oYdHxaqo5sNaQz772OJAoXsjb6mLoC1CTEGGq7ksZepP7ISGvUHiGyT3qLMyDsi8sC-I09ceCjT0mdvkYAC8ViicW4_rN6qDZy84Z2wEZF1ONvhVrNwyXx4NSQRt0QPpaDDZWDifmw6vmweTFAhTyU37lTIUDJk0wkd9xKFZGYQ-NVH-r1jzwPf2pVd-g_bUNmZ-6eVHCng5RVdpPQ6L0fotzuruwBxymbeQvZRaSMXB6rdx-4Icy395U3UHQDn68ieKt6wh7ouLtZ_UMwHInv08esPfCVIpslVZDYEAthltKno4UfYFMZg2UQKGRZTyqFbytALgh_MEfvNM5xrSFDcPz6z1NXdqpp5zdJkRqUNKqwxK_jBYH4ICS4oMMm-tkCp8bj-ZiO-tlVpb7iWjyZC4FVuDLPefjU12R8png-JLwVNXg7DH3pIiXouLdwLPI0pR2Cmwwy82m_kAnDeDUepOZU0zrXEEvxp0jipIpJQjR6J0wQjyT0f27ozcM-sA55RX79GYRj1rM0TdfOoEUV2LqmXlNbHKPxhueB1BBix5dySz0ASiyi8bd8hlflmVz5zTygcDOq8vJbldtX2iY0Yz3FmDsf1bhJd3h88Lwa2dAmYqMngGwUjwtSrXljZg2IJDRiCA_PAYwj4A8Bhw0DxeZfUyStZfemejQlk-r1PAf-ykwqrVhr9QVgHlWryaTD1D9XxJAB-Gbe_t_cyeoPoxUpjE0-yhBcl-i4P_cHFljZaR_zaJsY5FYsWU8DEIknRa5aunYtFQDaBivZby4lP_GAfChC-zz9gNLCDWr5tqEgvmrOox1s7LkM0FxmaZaAsDmaB_7zlk9T6PcnNjD_wU_taZEw-dnVjB-66gtEkqow44c12MOGU5PxsWJwOb-DCpY00EdZ2EaXuOrNeueg5gMBMXJFTGNhym7NUhPY4mK3clrLLwa_rK17g4FlY7PFnkam0rfDWyuz5mG_IudVNjS9JiwK3e96auGnzHRrbCwdu7I47VhsxTilwk5KOusdhgrSL7r_N3b1dT5mYP65WnriB0XurRqRDEAMWLKf-G2T7Z_4SFopBc7o10BQet-Dwex3gE5zYzSWd_4TzivO3M5A1_BS_Akf7_S5luFHLgRrcxcszsqRQaezeZiAtkWpZ9Rbgz6eFqHGnB7kQ2659__sALkaG1zpMgb6rD8_2-l41JQOrgddtK05zmMr82UKLi-gDIDV8qYRvXHiMq5Ur7xXgGKOcyF7Q0YYMrY_7IekG29z20xwm9nA9JnhH6reUfPtVuWMtX4TX5sr0BA1zCWGnDG_8S4S8cmOH4h4-5ntBsNif60jhc1jHmLhKGc71DAwMLJ4si-duZIgtZsP-htrPCVUMdjkTmK6u75BfbjsrnPXL1zfz4v8IWNc1WhEPNhM-d6g9qlgvMm7pmd2gs9oP7lAofKMrpoRhbJS8kArHF20wcDfv8uQn8_QWT_NlI62P5otJS6fkGny5R3l1_OtFW2uQU_VCVHWQiSo4aQCMbIV_vBkL48yV9OTNpnJAOwCWAVqqXRuK14dx8MU6QZ1BISUgNxYwW50awR2u9BF5BgbDamTfERaHsvXepVC7IIc0eo92EgwuV_IY9yurtNJN0WexX3TyByfOnXTKa5cFDvoLY9A1-l-v5ThNrThHkiP6e8wVgkestENOH5Nbx7d2GfD5mLXBLjIs7pqqQEmflqHwGP_XKBrkAGFykh3UvhDVs1nvOyd6a5xUQ4LS_7wa2_9gdjmBp9ZLOqHkg6ZLumt50m8DYNoFcDglVJnHX8M-BdLQ2OyQWLSD7xeuTSHc7dp2h3rfZM_mOBEjTZ_0000 "Deployment Diagram for Internet Banking System - Live") diff --git a/samples/C4_Deployment Diagram Sample - bigbankplc.puml b/samples/C4_Deployment Diagram Sample - bigbankplc.puml new file mode 100644 index 0000000..55b2358 --- /dev/null +++ b/samples/C4_Deployment Diagram Sample - bigbankplc.puml @@ -0,0 +1,51 @@ +@startuml +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml +' uncomment the following line and comment the first to use locally +' !include C4_Deployment.puml + +'LAYOUT_AS_SKETCH +LAYOUT_WITH_LEGEND() + +title Deployment Diagram for Internet Banking System - Live + +Deployment_Node(plc, "Big Bank plc", "Big Bank plc data center"){ + Deployment_Node(dn, "bigbank-api***\tx8", "Ubuntu 16.04 LTS"){ + Deployment_Node(apache, "Apache Tomcat", "Apache Tomcat 8.x"){ + Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.") + } + } + Deployment_Node(bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS"){ + Deployment_Node(oracle, "Oracle - Primary", "Oracle 12c"){ + 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(bb2, "bigbank-web***\tx4", "Ubuntu 16.04 LTS"){ + Deployment_Node(apache2, "Apache Tomcat", "Apache Tomcat 8.x"){ + 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"){ + 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(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") + +@enduml \ No newline at end of file