From cd4b246e5d3008e1efa2048f5c001d712fbbb75c Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Mon, 14 Oct 2019 17:49:48 +0200 Subject: [PATCH] #27: Add Deployment and dynamic diagram support (2 - add samples, update readme) --- README.md | 8 +++ samples/C4CoreDiagrams.md | 11 ++++ ...eployment Diagram Sample - bigbankplc.puml | 50 +++++++++++++++++++ ...4_Dynamic Diagram Sample - bigbankplc.puml | 20 ++++++++ 4 files changed, 89 insertions(+) create mode 100644 samples/C4_Deployment Diagram Sample - bigbankplc.puml create mode 100644 samples/C4_Dynamic Diagram Sample - bigbankplc.puml diff --git a/README.md b/README.md index 198b334..b62fbea 100644 --- a/README.md +++ b/README.md @@ -82,6 +82,14 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") * Component diagram * Import: `!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/release/1-0/C4_Component.puml` * Additional Macros: `Component`, `ComponentDb` +* Dynamic diagram + * Import: `!includeurl https://raw.githubusercontent.com/kirchsth/C4-PlantUML/master/C4_Dynamic.puml` + **!!! Update path during purge !!!** + * Additional Macros: all component elements are allowed +* Deployment diagram + * Import: `!includeurl https://raw.githubusercontent.com/kirchsth/C4-PlantUML/master/C4_Deployment.puml` + **!!! Update path during purge !!!** + * Additional Macros: `ContainerInstance`, `ContainerInstanceDb`, `Deployment_Node` Take a look at each of the [C4 Model Diagram Samples](samples/C4CoreDiagrams.md). diff --git a/samples/C4CoreDiagrams.md b/samples/C4CoreDiagrams.md index 69ac13f..e82b180 100644 --- a/samples/C4CoreDiagrams.md +++ b/samples/C4CoreDiagrams.md @@ -31,3 +31,14 @@ 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") +### Dynamic Diagram + +Source: [C4_Dynamic Diagram Sample - bigbankplc.puml](C4_Dynamic%20Diagram%20Sample%20-%20bigbankplc.puml) + +![Dynamic diagram for Internet Banking System - API Application](http://www.plantuml.com/plantuml/png/hPHRR_Cs38Rl_IkutgmPscH9khOBTcWEnPgXXw1EE-pAK6JQ5YfB1YKto8Rzzr5EiYG32dnVaJjQbCI7Br_vndb1lYvrz8qoKjSfrgIXyBvoWqw7nBATAr_KYzeXIMiy6j-MjkoyAPA5yqLdV74-qyBubuVxJYcSH-AbPB8oebIoNOMRluNQy9cIpu8l43AhjLqgauDM1a6O50xIYXn75hWcQ2k5rYk-Oyi7Fuqlzahy4d4kzbHBNvFwYzgRzLU5om74AZTJ4tdbDS9mDeLXLMabXLVMm3bizaRH_V3FfvTvyiTqVfVSt_vs-pWvRKNHc1iMZ4YJnUcKUoU3VYJC6wF7AswrJ9A9y68X72P95rFCBkKPd6pNJZX-HjqK4ngson3B0aiHih6tX0w2k42OA-TfZQPCPgbiuZCeX2im1L6pEiPlwILX6Zw5TcSWf4JdMAsSFz3BzabhH_yHUyonnfd8SK-L9EdriylhNf_nrXlEmuvzuGBvx-9Tn99KvPlv3KrUQq4XCoFxhb9qm7C3cpKZtGB0Oaq06JjYBOlogp1hMJjlIoG7xqg4CufWYGjOa5qwf8D-af6jJIfezL5ZFEY3ZlhTh9lrVc0upXnqqeA_8u2nBIjhqFWllJ16MHEJ_tUGn_-z_F7ggiSrjidTjSseAmgDZr2O0vKEbQ1W5qo38ewj6queTe0iXCd3HoMSMrfATrF-37tpA8ASPBL6OlXCN6JTwu39EHuNxB9xy0-lOtX6v_-N7ORdl7Qnsv8pDeU7mzzWmPehmFyJyVj8dbLU-C-Qz0WzTmSGrujIURV_g1Y_CNhyzDYvcyzdCVCoxH54FeR9UWCO2ysKoWrt_mLCJriGRBsdwn6gVSM_hpy0XngbX-yW8rjkNB4iaB29ZIWHVePV6sqdep6ptg19wrB_2m00 "Dynamic diagram for Internet Banking System - API Application") + +### Deployment Diagram + +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/pLTjJniv4FwUNp6NBuKA27aX8LLL5G9jgNX1RBZUdKvQpNfd4mkllRAzfFJK_txZsut2zbvesbGw919xPkndPfwnntdjF5fVvghrazH2bIcLLi7S-yAzw7GiBlPcqi_Bf7HaXT6UjDyJ9k_SIIlcpiyxay7kjKBjRo_EEpawJvP5yGaLoZpamRe8cp-3KlEo800_9yYCKcOXzGoKr0IeKsYefNKyCi2me8n0fHvuZwMBy78oQAAyQh5wwGUaXXneuy6LHM6i1oozoT5BKS4bbl3EWSaWX8GiiZiWCw3OavXha0xkoJumCZieDOVk6miNd19WmFRBZfEVwDNl-cNuVZ4zdRoxZDzSNKxZwEotqrTjjd6O5ueSEEBbn46tMbvwHN2cFLbD7evHtuLCH0_EKmwxi0ghrJe_-lNgTXf_E9k-YyzFtvvUdcnjjrehY_ZIfBJrQ1wVotkAusCv2_iMIiHnFpliPabl1zeiXI06bhU_c4EA7a5GSAkz3N-q0DQ3IUGiuV62akVFdyTnhv_j4mf6gHMxbGQsFWws0_XjKcfVGdUujp-0ysbKWtudx561OavJamjaSnmCHWF6ggHGYTjV2k1mx-CIdVycow8uqywZ5hIrvAgcgc8gZZzGSbGKIl8MqkWUnpmOzzDqpFkp2Xxf0kHxlCTGwH0LDl1zyVCaY4z8SKpMXS87nWjLMf-qO1t4grf9wbfn_A482fmHu0fchxqTOe3FBVx_LWAna1M10n87muD715OQ9l1mumIkO9i4zW_7MNyy_c4K7bsVDIdi9gD-sYFUdrLVIU6rDVSo9VTtdh9IYx0ObVGFS2yH4Dv7LvUTTzFfTGGCiH7AqcI_owuBCSuE7XCMv9jdgaAxiYWKNLkPettWQZdCHkDio62L0dQXrhLNicvF_1T99yc_qNI27XDq50ZAUhrH5WxrKXW0RaXXbMXOYY4ISyenQ2DlB3a8JGmipQJp5eCrI9qPcsCOxy0StPpIq2pcf7rDEmXBQPYYSZk0Gf1peCoC9-J5fjWBTmSX7Go7JVPwFuIztfAzY8JHQSNV8EtsKthCNwNTC8DzFjEzyL3WyF_8uEUlQAsJqdcJattcXCcBqfFbx8d-CA6K7LrfOQaE_bz8OOqpcOSFKgTcuS1O2BSBmHEFY1p5rPBoRtEEUz6nPSWmxXxszqVPgEvGjJWu-DQOq54cSylBT-32V99AuLFElP6MClDnfmubmWoj16EVMhTAnsaweogwTQxjYCUAhd56NpJWdX33NiBnL1QxmUIVRl58M5bK3VP8pqg5jd6Her9Wij1xdxhJlG5Hvzo52pwiaHOMb41IPJTKsFgrbPj4AahfNWeARH3tH_j9ixug4wXiWliL2V8gWb1SEhL6fbLklpwp5s7JaDNGK99at1qBthcI0ei3pY-OCyswcJ5GCfUUKd1buiX_N_eQeN42ENatfDPlukkqanl2r45cJGwXB1PMUdBWpLybSt8yOIysxaFZGbp3XpMuM__XSu5t3Ce6852f9VpgsT9qOksZ-QCSYc-BzH_gtnP4uzbk8DIvM9tBHsU_zkoSCh-9jzLc6lmDLI6HgtxpUSDklYQTbhdw4m00 "Deployment diagram for Internet Banking System - Live") \ No newline at end of file diff --git a/samples/C4_Deployment Diagram Sample - bigbankplc.puml b/samples/C4_Deployment Diagram Sample - bigbankplc.puml new file mode 100644 index 0000000..7e89d34 --- /dev/null +++ b/samples/C4_Deployment Diagram Sample - bigbankplc.puml @@ -0,0 +1,50 @@ +@startuml +!includeurl https://raw.githubusercontent.com/kirchsth/C4-PlantUML/master/C4_Deployment.puml +' uncomment the following line and comment the first to use locally +' !include + +' PlantUML does not support automatic line breaks of container, if e_techn is very long insert line breaks with +' "\n" +' samples see below + +title Internet Banking System - Deployment + +LAYOUT_WITH_LEGEND() + +Deployment_Node(Deployment__Live__BigBankplc__3f81fb2, "Big Bank plc", "Big Bank plc data center") { + Deployment_Node(Deployment__Live__BigBankplc__bigbankweb***__23f0eac, "bigbank-web*** (x4)", "Ubuntu 16.04 LTS") { + Deployment_Node(Deployment__Live__BigBankplc__bigbankweb***__ApacheTomcat__a4474, "Apache Tomcat", "Apache Tomcat 8.x") { + ContainerInstance(InternetBankingSystem__WebApplication2__2493dd9, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet banking single page application.") + } + } + Deployment_Node(Deployment__Live__BigBankplc__bigbankapi***__24ec565, "bigbank-api*** (x8)", "Ubuntu 16.04 LTS") { + Deployment_Node(Deployment__Live__BigBankplc__bigbankapi***__ApacheTomcat__389f399, "Apache Tomcat", "Apache Tomcat 8.x") { + ContainerInstance(InternetBankingSystem__APIApplication2__1b73d2e, "API Application", "Java and Spring MVC", "Provides Internet banking functionality via a JSON/HTTPS API.") + } + } + Deployment_Node(Deployment__Live__BigBankplc__bigbankdb01__1cc9f55, "bigbank-db01", "Ubuntu 16.04 LTS") { + Deployment_Node(Deployment__Live__BigBankplc__bigbankdb01__OraclePrimary__28f79f6, "Oracle - Primary", "Oracle 12c") { + ContainerInstanceDb(InternetBankingSystem__Database2__1f227f4, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") + } + } + Deployment_Node(Deployment__Live__BigBankplc__bigbankdb02__2eae566, "bigbank-db02", "Ubuntu 16.04 LTS") { + Deployment_Node(Deployment__Live__BigBankplc__bigbankdb02__OracleSecondary__24d13de, "Oracle - Secondary", "Oracle 12c") { + ContainerInstanceDb(InternetBankingSystem__Database3__3296ca6, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") + } + } +} +Deployment_Node(Deployment__Live__Customer'scomputer__2c36bed, "Customer's computer", "Microsoft Windows or Apple \nmacOS") { + Deployment_Node(Deployment__Live__Customer'scomputer__WebBrowser__18307f7, "Web Browser", "Google Chrome, Mozilla \nFirefox, Apple Safari or \nMicrosoft Edge") { + ContainerInstance(InternetBankingSystem__SinglePageApplication2__22cc62b, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.") + } +} +Deployment_Node(Deployment__Live__Customer'smobiledevice__38a070b, "Customer's mobile device", "Apple iOS or Android") { + ContainerInstance(InternetBankingSystem__MobileApp1__1bb919c, "Mobile App", "Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device.") +} +Rel(InternetBankingSystem__APIApplication2__1b73d2e, InternetBankingSystem__Database2__1f227f4, "Reads from and writes to", "JDBC") +Rel(InternetBankingSystem__APIApplication2__1b73d2e, InternetBankingSystem__Database3__3296ca6, "Reads from and writes to", "JDBC") +Rel(InternetBankingSystem__MobileApp1__1bb919c, InternetBankingSystem__APIApplication2__1b73d2e, "Makes API calls to", "JSON/HTTPS") +Rel(InternetBankingSystem__SinglePageApplication2__22cc62b, InternetBankingSystem__APIApplication2__1b73d2e, "Makes API calls to", "JSON/HTTPS") +Rel_Up(InternetBankingSystem__WebApplication2__2493dd9, InternetBankingSystem__SinglePageApplication2__22cc62b, "Delivers to the customer's web browser") +Rel_Left(Deployment__Live__BigBankplc__bigbankdb01__OraclePrimary__28f79f6, Deployment__Live__BigBankplc__bigbankdb02__OracleSecondary__24d13de, "Replicates data to") +@enduml \ No newline at end of file diff --git a/samples/C4_Dynamic Diagram Sample - bigbankplc.puml b/samples/C4_Dynamic Diagram Sample - bigbankplc.puml new file mode 100644 index 0000000..f401fbd --- /dev/null +++ b/samples/C4_Dynamic Diagram Sample - bigbankplc.puml @@ -0,0 +1,20 @@ +@startuml +!includeurl https://raw.githubusercontent.com/kirchsth/C4-PlantUML/master/C4_Dynamic.puml +' uncomment the following line and comment the first to use locally +' !include + +' Structurizr.DynamicView: SignIn +title API Application - Dynamic + +LAYOUT_WITH_LEGEND() + +ContainerDb(InternetBankingSystem__Database__1edef6c, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") +Container(InternetBankingSystem__SinglePageApplication__23f6823, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.") +Container_Boundary(InternetBankingSystem__APIApplication__31f1f25, "API Application") { + Component(InternetBankingSystem__APIApplication__SecurityComponent__10c9772, "Security Component", "Spring Bean", "Provides functionality related to signing in, changing passwords, etc.") + Component(InternetBankingSystem__APIApplication__SignInController__1fa4f18, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.") +} +Rel_Right(InternetBankingSystem__SinglePageApplication__23f6823, InternetBankingSystem__APIApplication__SignInController__1fa4f18, "1: Submits credentials to", "JSON/HTTPS") +Rel(InternetBankingSystem__APIApplication__SignInController__1fa4f18, InternetBankingSystem__APIApplication__SecurityComponent__10c9772, "2: Calls isAuthenticated() on") +Rel_Right(InternetBankingSystem__APIApplication__SecurityComponent__10c9772, InternetBankingSystem__Database__1edef6c, "3: select * from users where username = ?", "JDBC") +@enduml \ No newline at end of file