github-mirrors
/
C4-PlantUML
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'plantuml-stdlib:master' into remote

Browse Source
pull/295/head
KIRCHSTH 3 years ago
parent ce8217d3f3 859853bfef
commit 5b0d601c70
16 changed files with 30 additions and 30 deletions
Show Stats Download Patch File Download Diff File

2
C4.puml
Unescape Escape View File

@ -870,7 +870,7 @@ $elementSkin
' Line breaks
' ##################################
' PlantUML supports no DETERMINISTIC/automatic line breaks of "PlantUML line" (C4 Relashionships)
' PlantUML supports no DETERMINISTIC/automatic line breaks of "PlantUML line" (C4 Relationships)
' therefore Rel...() implements an automatic line break based on spaces (like in all other objects).
' If a $type contains \n then these are used (and no automatic space based line breaks are done)
' $REL_TECHN_MAX_CHAR_WIDTH defines the automatic line break position

4
README.md
Unescape Escape View File

@ -19,7 +19,7 @@
# C4-PlantUML
[comment]: # ("image is based on percy/C4_Container Diagram Sample - bigbankplc-styles.puml")
[![Container diagram for Internet Banking System](https://www.plantuml.com/plantuml/png/hLPDRzj64BthLqoL76I0jb2akHGm45bY6mUIfOfoqqC1OKYEg4MMkyJkq1ye-jyxIr6YAQT8WUOYS6TttdlxE3FK1y_ek2xru0TbCbtd17lcolyy7Zjyl2eKx-kqzkGoQvWCNsMs75SQJSYvz9nhbOwdFrskGkX-CH-Nw9cSXBPJoK1bo5rL0N-GV5n-tgxYTRAysoxlD_FRktXqCPZaUQof5EWD5gDXYjaNClafTnZ1svqifbPRT_qsdiUB-6wp_MKfFzFbVBcM_RGux0xVl7ltVZPv7tBy7YkwZbMnvqJbb2TXFRgG7Ks546peYQ-FR90TwVuq55B0XvnXesvDkb66_jba0PebjPKpMQ_bJaSTMX3-TIFXPqtNC_HxokVAY9OUUW0VVnyAoznH35Yn9ZZv2Rd2mc49E-lWrZ0vGmmtQBueKq3ox9dAmM15pbipochFjYGNmVJqD9p0CGns1xmdI2KxWaSf5QYQHDHD333BR6tO3qN70Nfx8u4StVCe-r6mpWKCB-2l0G1qUaUFb6wngkJmPqfXKbLQPSZAcg64Fk43Hf1KBeXV_3uDiHbfzI0o6ccUvMm6RV42chm9dtZJuyLN4n7PP_OL2bmYsvekLrXGO3-o9fbJ5KSmCKMjqONmoja7bPC7rFhhBBlQP44wQiNFm5QSR8pqyA0mf2W7Sbz8dNtqv5ufAcsgDBLsBCBYf6dw9e8_i4Hnegy5j2eLKmw-JZqnsDr_rkPVYJi8W9mUL4RdycRfA4V653s5rz0-1ZN9RtFehTawyX362ZWgb6U7WHkKaR8ic-S8zasl0DQyXynHJeOLQX-5iYBlGTj25iJPrIkZshuMfrIesDNjrmjdPkMOw_9wpdt3eM2A03VTYeM_VZMvHDJVfxAFdtX49IgzzKr0YEBBXQpRbWlCcps1QaXHmq9bpdgxOuYViZsQWk2GAR0lC5jj7QfWcft3aivwkhCzbEUn2Z89dExtmdp0rDRSbK1qQkK8sA7ns3ZHsJzOatunBhgclVVa0_V7pMQLoC7-EL_XDy-qHT_1jNJRkp2gKzkDY0Qk6m0jKXFi5qHBU1Zf4NoIBzAu8U_UPhFL8dGA_X_GzaQIEzbTi_H1ruIvXvspPJEl7frYyi0s4BKyivkfG9umNxXrLcI9m7gWon1jC3eXP_NOrz3FgxtKHqUVB3Qh5kXqcLxwMLLsFdLVEPbMY_cvLzssm1_-BypZN-ExsUXYy47GwrB_0m00 "Container diagram for Internet Banking System")](https://www.plantuml.com/plantuml/uml/hLPDRzj64BthLqoL76I0jb2akHGm45bY6mUIfOfoqqC1OKYEg4MMkyJkq1ye-jyxIr6YAQT8WUOYS6TttdlxE3FK1y_ek2xru0TbCbtd17lcolyy7Zjyl2eKx-kqzkGoQvWCNsMs75SQJSYvz9nhbOwdFrskGkX-CH-Nw9cSXBPJoK1bo5rL0N-GV5n-tgxYTRAysoxlD_FRktXqCPZaUQof5EWD5gDXYjaNClafTnZ1svqifbPRT_qsdiUB-6wp_MKfFzFbVBcM_RGux0xVl7ltVZPv7tBy7YkwZbMnvqJbb2TXFRgG7Ks546peYQ-FR90TwVuq55B0XvnXesvDkb66_jba0PebjPKpMQ_bJaSTMX3-TIFXPqtNC_HxokVAY9OUUW0VVnyAoznH35Yn9ZZv2Rd2mc49E-lWrZ0vGmmtQBueKq3ox9dAmM15pbipochFjYGNmVJqD9p0CGns1xmdI2KxWaSf5QYQHDHD333BR6tO3qN70Nfx8u4StVCe-r6mpWKCB-2l0G1qUaUFb6wngkJmPqfXKbLQPSZAcg64Fk43Hf1KBeXV_3uDiHbfzI0o6ccUvMm6RV42chm9dtZJuyLN4n7PP_OL2bmYsvekLrXGO3-o9fbJ5KSmCKMjqONmoja7bPC7rFhhBBlQP44wQiNFm5QSR8pqyA0mf2W7Sbz8dNtqv5ufAcsgDBLsBCBYf6dw9e8_i4Hnegy5j2eLKmw-JZqnsDr_rkPVYJi8W9mUL4RdycRfA4V653s5rz0-1ZN9RtFehTawyX362ZWgb6U7WHkKaR8ic-S8zasl0DQyXynHJeOLQX-5iYBlGTj25iJPrIkZshuMfrIesDNjrmjdPkMOw_9wpdt3eM2A03VTYeM_VZMvHDJVfxAFdtX49IgzzKr0YEBBXQpRbWlCcps1QaXHmq9bpdgxOuYViZsQWk2GAR0lC5jj7QfWcft3aivwkhCzbEUn2Z89dExtmdp0rDRSbK1qQkK8sA7ns3ZHsJzOatunBhgclVVa0_V7pMQLoC7-EL_XDy-qHT_1jNJRkp2gKzkDY0Qk6m0jKXFi5qHBU1Zf4NoIBzAu8U_UPhFL8dGA_X_GzaQIEzbTi_H1ruIvXvspPJEl7frYyi0s4BKyivkfG9umNxXrLcI9m7gWon1jC3eXP_NOrz3FgxtKHqUVB3Qh5kXqcLxwMLLsFdLVEPbMY_cvLzssm1_-BypZN-ExsUXYy47GwrB_0m00)
[![Container diagram for Internet Banking System](//www.plantuml.com/plantuml/png/hLP1Zzis4xthLypdv0DiGBj6aUPIO85uRRNPm5wxbZVfeO0naiOo4OeKICfUe-X_xr2Mh9KtHGxfnJ1dEEyzFWr7-c0T6bSLClYVKAciCeAzSwNzPJmsUBpDXTjNIMN9f5evKkusrSMubAXypOrrcHJ9UFhppSg7dXRpSO7MaU7GTieLA1IPszBZ1_77vPVjAbh7oyVjycapVtYCXgDWacMHf8AXDvWF1mccNqbbbzf126ztl9XggStTssWUBQB7pVRN9VzCb_FbclD9ViuEthnxztusUUzhx1vBkej4ldUno2YB_Neuueoad0aszEpkMZP8Mxe_5VaIiBvcKAjRawoLeJsfr4CxBctaJDPhFbEhGpB2loPYTv9qDqExfsmk56lfeNlmyNz3ePthA08dd2Iu-0cPmDnW0Jjju44vCeeStAFwAbGEySawAe9WHSPgDKmhwtH19eJfvTzW0cqOz0xSdY3XwX2Et2fGreKewnXWckfAESj61cVexJq7CZIdOVeJOrqB68pWhm00Eht38oLRB4lU_8KIc9Ib52aweTM0Gv_mW274fV7Y5v-dFZOZAGuievPc7UzDeMbUG9NvS7Vmf3tuQi8Y-yosH8QBEItfPeKvUVQMDKwDA5q84vLN4eqFhum-Y8mie9JVPjbLAlNIKGft0gSlJbeu2FGrmW0V61AZZvRCAqc5JeIane-5Nrn4JT-4y0SMo5RqnO0KXN2KWQqIImxqxWV4dGL0HWUHqhMyMJBCq662blnpQFvwDV7lS-YjdJPamSyLC9GBwmnwRX2A-xAe_uUmhoyBOENsa1hAI3c1qeQ-hyXQa3hd1RdqzfLHpSLcfuHlsTN3jpjdfdcRwUfwpdt78MyA0zVN5NDxztfqZOA_BtqVFRiX5IZarjO19efk5hnkxfndtkm9X2Tb1bY8r6YhTmwYvtIFAYSuLpBi2yn6MuVAc6fdiA2hIztPxlkpxOAK0-tvNfeFcEZATIqGNkvo2CwWibWxqTaVh4c-c1VThNsoP3ttnyrc5VF6_ZvRudVtD4tVmJLqsqS_gnFTpOW6hfq03L8Tx3T4GtYUwI5yubVI-4pUFirpga7e5FmOqFQUYplPtMNfWwu9CmixeujwO1sDS6J1QK_KyCpkfmnvmNpXrbMJnGnhWMvyjCReXFJwyLf3lwwot1yTVRpOhCv0tM5wvLTTsVdKlUPuMYtcrrvrQOO_Vp3Cez-Ynzbm5EoqTcGWCtXKvvTD-yq1Xrlult_WGglXgFRCVv5qMLv-RjF11rPP5V8V)
C4-PlantUML combines the benefits of [PlantUML](https://plantuml.com/) and the [C4 model](https://c4model.com/) for providing a simple way of describing and communicate software architectures – especially during up-front design sessions – with an intuitive language using open source and platform independent tools.
@ -935,7 +935,7 @@ The core diagram samples from [c4model.com](https://c4model.com/#coreDiagrams) a
Source: [C4_Container Diagram Sample - techtribesjs.puml](samples/C4_Container%20Diagram%20Sample%20-%20techtribesjs.puml)
![techtribesjs](https://www.plantuml.com/plantuml/png/ZLHDR-Cs4BthLqnzMGVGshj9jm5wMYTEazqw7uta1Zq9b3YMcLAaIb9nZAB_lKDAaQsuWEk39G_V3D-RUUElrZ7Zcah2o66nTaRaQ9_jAFf1g48s767jN6r_dauDsqnAuTPDtbWqXLOEbPiKkfhMaYbVugDrN8fyUldZnmSVMjukfXMp3Ws5ialAO4AXcTI4ZJv0eoYveYBWrWWhBQNU25M2910mnM5mB8obDmrqEKXTC2ctLADdUNX1j9ZzSRzCi_J-8PlVFzsDJw8FNMYMPCclL-db3SMwqDEtz2PRN5rVtSqf64KFQAnMsTMh6pEbrRRIZSsyy1X6ixS0B2amEkd0OrQM1alcaFV8Fl8UoYkXX7M6EQ5L3nz4trAYP6iTLjc5RXHdPZikFiVxqvhGk4x-Ze0-uQllmtY3USRgcj1FcCEihgKeGkaHXRwp5nP3KXlVyzlVBsD8TKN7S3vvzUSpFmyBdfhrZNyHk84QTIqnXlRc63eRn80lzA30iyxf6rqnWPNH5Ssk6nTumZ5mGHvYCiptMmeM2wUzo27pUJusA3EU4uz7b84p9SsPOpcpwEdTRfFV5l1bygLbcr0Pj0VymXCgh79IiHOrHPZyqxxdcpDUUlYrS3TD3WPhtQaue3PU2OasJ8Ik_OL-G3kVaVyvIyzEz-XOPAPOWr0SNz7-bqobxL-I4kuqoGa28UG6YLgLUdu1fvFJWSZGsCSacSuSlQmGkOLnBdK9HDlPaz1Sjq5qzf1-KtFcWjkMxTkR5-3SewoMw9qowW4MQgE3wBWhEknJkAtp0MW536onHjv8v4334fx3Fxs9_KAvZN0jXRHz8yJUSVidGwVjBSD3BzFIsGKzWxg8_76meZlZqmvPh-KcJHyImXDwkAV7uSDTFPeISlhZFHiptetEDsnZX6-jqpwLHZ_zFh-W5QorSN1szkadAZIeitFTeDPxMB3J4B5df8qmwAVfTA5bTzdf-QVFvntjRDdRunXnGh4Zx0Vb1loVUl47k23WIBl-hvnTrPtZhj7rXWQXLjfKOQoxdUdRrazqK6hdJe8EA-IwSL0tkHG559fZkn_2QIFmIDNErg5elqoD5QhqYnx8zSi-BEMrBjWsU-p_CNUjfgElg7XJoNy1 "techtribesjs")
![techtribesjs](https://www.plantuml.com/plantuml/png/ZLHDR-Cs4BthLqnzMGVGshj9jm5wMYTEazqw7uta1Zq9b3YMcLAaIb9nZAB_lKDAaQsuWEk39G_V3D-RUUElrZ7Zcah2o66nTaRaQ9_jAFf1g48s767jN6r_dauDsqnAuTPDtbWqXLOEbPiKkfhMaYbVugDrN8fyUldZnmSVMjukfXMp3Ws5ialAO4AXcTI4ZJv0eoYveYBWrWWhBQNU25M2910mnM5mB8obDmrqEKXTC2ctLADdUNX1j9ZzSRzCi_J-8PlVFzsDJw8FNMYMPCclL-db3SMwqDEtz2PRN5rVtSqf64KFQAnMsTMh6pEbrRRIZSsyy1X6ixS0B2amEkd0OrQM1alcaFV8Fl8UoYkXX7M6EQ5L3nz4trAYP6iTLjc5RXHdPZikFiVxqvhGk4x-Ze0-uQllmtY3USRgcj1FcCEihgKeGkaHXRwp5nP3KXlVyzlVBsD8TKN7S3vvzUSpFmyBdfhrZNyHk84QTIqnXlRc63eRn80lzA30iyxf6rqnWPNH5Ssk6nTumZ5mGHvYCiptMmeM2wUzo27pUJusA3EU4uz7b84p9SsPOpcpwEdTRfFV5l1bygLbcr0Pj0VymXCgh79IiHOrHPZyqxxdcpDUUlYrS3TD3WPhtQaue3PU2OasJ8Ik_OL-G3kVaVyvIyzEz-XOPAPOWr0SNz7-bqobxL-I4kuqoGa28UG6YLgLUdu1fvFJWSZGsCSacSuSlQmGkOLnBdK9HDlPaz1Sjq5qzf1-KtFcWjkMxTkR5-3SewoMw9qowW4MQgE3wBWhEknJkAtp0MW536onHjv8v4334fx3Fxs9_KAvZN0jXRHz8yJUSVidGwVjBSD3BzFIsGKzWxg8_76meZlZqmvPh-KcJHyImXDwkAV7uSDTFPeISlhZFHiptetEDsnZX6-jqpwLHZ_zFh-W5QorSN1szkadAZIeitFTeDPxMB3J4B5df8qmwAVfTA5bTzdf-QVFvntjRDdRunXnGh4Zx0Vb1loVUl47k23WIBl-hvnTrPtZhj7rXWQXLjfKOQoxdUdRrazqK6hdJe8EA-IwSL0tkHG559fZkn_2QIFmIDNErg5elqoD5QhqYnx8zSi-BEMrBjWsU-p_CNUjfgElg7XJoNy1 "techtribesjs")WWWW
### Message Bus and Microservices

4
percy/C4_Container Diagram Sample - bigbankplc-icons.puml
Unescape Escape View File

@ -27,9 +27,9 @@ Person(customer, Customer, "A customer of the bank, with personal bank accounts"
System_Boundary(c1, "Internet Banking") {
Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA", "java")
Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to cutomers via their web browser", "angular")
Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser", "angular")
Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device", "dotnet")
ContainerDb(database, "Database", "SQL Database", "Stores user registraion information, hased auth credentials, access logs, etc.", "msql_server")
ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.", "mysql_server")
Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API", "server")
}

2
percy/C4_Container Diagram Sample - bigbankplc.puml
Unescape Escape View File

@ -16,7 +16,7 @@ Person(customer, Customer, "A customer of the bank, with personal bank accounts"
System_Boundary(c1, "Internet Banking") {
Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to cutomers via their web browser")
Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers 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 registration information, hashed auth credentials, access logs, etc.")
Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API")

8
percy/C4_Context Diagram Sample - enterprise.puml
Unescape Escape View File

@ -15,9 +15,9 @@ Person(customer, "Customer", "A customer of Widgets Limited.")
Enterprise_Boundary(c0, "Widgets Limited") {
Person(csa, "Customer Service Agent", "Deals with customer enquiries.")
System(ecommerce, "E-commerce System", "Allows customers to buy widgts online via the widgets.com website.")
System(ecommerce, "E-commerce System", "Allows customers to buy widgets online via the widgets.com website.")
System(fulfilment, "Fulfilment System", "Responsible for processing and shipping of customer orders.")
System(fulfillment, "Fulfillment System", "Responsible for processing and shipping of customer orders.")
}
System(taxamo, "Taxamo", "Calculates local tax (for EU B2B customers) and acts as a front-end for Braintree Payments.")
@ -32,9 +32,9 @@ Rel_R(customer, ecommerce, "Places orders for widgets using")
Rel(csa, ecommerce, "Looks up order information using")
Rel_R(ecommerce, fulfilment, "Sends order information to")
Rel_R(ecommerce, fulfillment, "Sends order information to")
Rel_D(fulfilment, post, "Gets shipping charges from")
Rel_D(fulfillment, post, "Gets shipping charges from")
Rel_D(ecommerce, taxamo, "Delegates credit card processing to")

2
percy/C4_Deployment Diagram Sample - bigbankplc-details.puml
Unescape Escape View File

@ -53,7 +53,7 @@ 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(comp, "Customer's computer", "Microsoft 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.")
}

2
percy/C4_Deployment Diagram Sample - bigbankplc.puml
Unescape Escape View File

@ -41,7 +41,7 @@ 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(comp, "Customer's computer", "Microsoft 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.")
}

6
percy/TestLegendHidden.puml
Unescape Escape View File

@ -10,7 +10,7 @@ AddElementTag("shapeRound", $shape=$ROUNDED_BOX)
AddElementTag("shapeOct", $shape=$EIGHT_SIDED)
AddElementTag("shadowed", $shadowing=true)
AddElementTag("shadowed2", $shadowing=false)
AddElementTag("yelloTagged", $fontColor=yellow, $borderColor=yellow)
AddElementTag("yellowTagged", $fontColor=yellow, $borderColor=yellow)
AddElementTag("greenTagged", $borderColor=green, $bgColor=green)
AddElementTag("taggedContainer", $fontColor=white, $bgColor=$CONTAINER_BG_COLOR, $borderColor=$CONTAINER_BORDER_COLOR)
AddElementTag("taggedPerson", $fontColor=white, $bgColor=$PERSON_BG_COLOR, $borderColor=$PERSON_BORDER_COLOR)
@ -18,9 +18,9 @@ AddElementTag("taggedPerson", $fontColor=white, $bgColor=$PERSON_BG_COLOR, $bord
Container(c2, Container 2, tech, $tags="taggedContainer", "'taggedContainer' stereotype/tag overwrites all styles of container ($fontColor, $bgColor and $borderColor) the container is not important anymore and therefore not displayed in legend")
Person(p2, p2, $tags="taggedPerson", "produces no person legend entry too")
Person(p4, p4, $tags="yelloTagged", "'yelloTagged' stereotype/tag first and defines $fontColor and $borderColor (in legend), 'person' defines additional $bgColor (in legend too)")
Person(p4, p4, $tags="yellowTagged", "'yellowTagged' stereotype/tag first and defines $fontColor and $borderColor (in legend), 'person' defines additional $bgColor (in legend too)")
Component(comp3, comp3, "techn", $tags="yelloTagged+greenTagged+shapeRound+shapeOct+shadowed+shadowed2", "Complex sample with all styles")
Component(comp3, comp3, "techn", $tags="yellowTagged+greenTagged+shapeRound+shapeOct+shadowed+shadowed2", "Complex sample with all styles")
SHOW_LEGEND(false)
@enduml

8
samples/C4CoreDiagrams.md
Unescape Escape View File

@ -30,13 +30,13 @@ Source: [C4_Context Diagram Sample - bigbankplc.puml](C4_Context%20Diagram%20Sam
Source: [C4_Container Diagram Sample - bigbankplc.puml](C4_Container%20Diagram%20Sample%20-%20bigbankplc.puml)
![Container diagram for Internet Banking System](https://www.plantuml.com/plantuml/png/bLJ1Rjj64BthAwRkeGf0MIZGKq-H9Q5nAjbgADVfYHWkHz8YorrYPob5AFhldQLfKhG2fBsHZpDlthvvo_SSq8UwDACVj5McBWWE8LJywtJgyNIxr-5GvpMJLyu6ik5MkN9Q6RInPyAXC3gVpd-PR2Bqj5vDI-H0Ng1iBXseBVdRAlB_1BMLvb9881m8TiuOTz9s3qQA06q1Wy_QipmvaE5Wd49ZpiBHgRmU85zNixyUdxRPzd6JBHwV7yRlUcoMPkdlo-tyWu0jz7o__P2jbhyj7nO2Ze8EXg0ZXKBZtcCfGZtSsq3UKe0xj5-YvlJCWShHQ4EUdHshceChoISmxvvkPl0AWzirXygbEu6Jc0fLquYcmG2LShKDV2CwNgYpEm4AzEUn-bcutWguUGT_Zm2Wrpi-KPvXLKdnC-KmgogZ5GRjx8r07_682QILZ-BNVyuZjY2ZZoAZaSP1QXMqQsxM4U5kRlvwyCrCH0udSuL2byfdGvCDxYbEVvsQAg-haC3Cxck3Fi8Rxuww80OqvjjJTfALA1sD3kUO0bKtHZ8SDSOMxK7E2xbt9oP_fQXqkJRKsh6EBvsc-Oy9VCOInOcX5Z2wr84Au3fd2hAp_woDhyIz2822ZbhHMtcBV5nWm1oPuXhQnwWc_MC5W_VWl6YB5n0yxJK7Zp8Qj9LKbirs4pWWYsgi9LNAKq4sQ3ISn50HCnYtbnSAwlRAfXpL5xA5-AHZNZVttuxDmacPx_i6ldt7dsY94CleVxfeBx-6CPMeJSOD87JBoLhUssiL-RTYlMweqS1QA-_OxG8ilwe3sZt1IwVGNd2s2dfMuRGxZoMzkRUzjKq4sqqh0RfJN3WCcBiwz6jEkkkQGF1e6PlpzYQFFf6v-2Nq5_E9YUFi3zlj9fN2OHrN-DsQDjWzNJikUo2zF-Ik_mqqTFqbRvaQSB3sRY3osQe4FgQF3zFBuVt8_zcPtKbrBwoF_93b4s71iFEkRFuw9wy3CGGNcLlYnTrSA3lE2p_Un2WLMWQQHBJXw8KC4ZVGSDLNioIW7v-kjniX6hWyQ1_chZUcwP-sxdnUhpfptajhNPf_0G00 "Container diagram for Internet Banking System")
![Container diagram for Internet Banking System](https://www.plantuml.com/plantuml/png/fLN1RkCs4BtxAwRfeLv0Zb6WfvxMiOrkjdRYhfncUn96rDWcbY85ScIlKVJVErGKoN8MM1IzaKypRnxV3AdtWT5pNPhH3zegKnS41-Og_3gTUZpTxZKVwhmEv9MpJ9PlbIkdbK4RSoQ12wFpwVoNoIP2J-lLjCJ0v0NAvfA1sfA_hIB_Jr1RIIw51FX0i7F6k9EsUp0I16WB67pMFiZAWHG7unGQSnQEJkNR0l9rDVlhyMcRRHytsUBn-M7yhiTcQPR-ljpEFmZOGi_tsm_PQldRyc4Xu8Wr6uAE50gDUu-b2FLmRvcy9OOxj5-YvlGScChHQ4C-E3jMTM1NaazWtgrkPl0AWzirXyebEu6Jc0fLauYcmG2LShNbS2CwNgYpEm4AzEUn-bcuhWNSl8E_Hm3GwnsVAC-mgYJucNAOLPNH2baxUoFGHpnY0cdbe_Zrd_E8BSZeeyXef0MMM0LjcsCx6hYhcxyUV3CJaSFAeKAXI-MpeSa6znIhlrPDbTSL9p2p-zgWZ_36kwCkA00Qy-qgEvcLA1sDvZEmwvmCSDGOSxG7EJ3atfq2-JUIIfThGwqVwxZfHCr_JE0pbYXM3CM0qQLcAY3KUI2MflqFSIy2eA2ZLdGjRv6F2sJCCL3iGxkCQj8_LZ3Oi_EYBTv0yBJNWNtJKz1Mvh9irWaSC1n4DzPy0EMf8CiQJKZYN548ODnUDiJgzerHEQelP0jnIiUHtTn_Ut8MJi9ydpTmxZiEHLE4M4h_qqttyYkFgKHjij00GhUSh6NVtgp8lnNpTKED1jPQUHVSZc7vLHtGxWbUCeNsWhDLqBCAfzrvBEdgwlRcDbFOzbe9q9tYmcB0tDNSDphfRcm2xD46RCxRcppwHERYLUZlvbEW46j_s6utgGGEuqA5turfHxkdQyjb3wJtXzprBq53rz_pbga11stl2c8uMvN0n_JnONfPl2_v7pEpEudkXVL3FsJvH5W4s7bNDW_FoMkc0EmYSqkyk9iBPSTvuSVL6AL26u0c4MquUY5N4pVKCCohWqn0NpvTRpT2D71va3wSkzwO9d_QklDvlUhCUI-fyQ_rBm00 "Container diagram for Internet Banking System")
### Component Diagram
Source: [C4_Component Diagram Sample - bigbankplc.puml](C4_Component%20Diagram%20Sample%20-%20bigbankplc.puml)
![Component diagram for Internet Banking System - API Application](https://www.plantuml.com/plantuml/png/fPHDR-Cs48Rl-XNJ75e7IE9BJpsjuwJTB9AD4JlzE1aZSYonvOT0KdQDel-zGreHxIGe0kn9rF3bpCDtHleK8lhO6rrzfwpGlIHeO-p2JzEfnzrLesBRrtqWBvoDPEELS6RQQRJfp6M8KgjwEl_nSf52pm_tKuCXakVGUkvCvsmwqwNyFq1l-R3X0CIMOEEqTZjb6z3A4g2LSBAjVE2L0ouEsWdKUiyvHigt1QhxsH-FpwlrRtUhp-lxsrzklzvCpgigggW9HYr8XOr7m_Kzt5bcjHJX6krV2MMvPte3bp1RtC6iwxGI69MpLJNd-oE3-adey0BEbYpN10jiw5Xunbj_uXQ3yAgB-LPecrwZJpiBxxPAKW3KEjzIlG3K0y26JKfvKAkuJzSNVOZEa0-mLPZEA0yxgg7sRXV8NvsT7w6PHFRWQgKpL2hvEnhqofvM1wsCYYGXz7NWwYv-0ut9zLuUahPAq0dMJJsHDTU_mOWr1aeiJwJna1bUmh0KBHbCkyleF7EckGDFZGhHPpKJSjjCNbz0Yw4b2TWpXur30q1uakaLTRW058920EqQVg4e4jUXn-lRl-F4r24PXfpMew5NOr18Sh_S9fiaE30QTCG3MBi-5eToSTVRo2l6jm6pbOMZ6BI-Pfr4lvzWfxZeg-4xEuT_AW0eGpm9gh69ZXyyn90oUQSrvIbx-7KEJnHY2QVeB7rk1qz3QcLAmVoyVB_tuU31-QlAuwKuux24PMyCqty4emnX6QMTYYqW1CxY_7xmMVbCCfhu1YIGw3sFPR9XM9RTtBhEftjS4vvE_-bG-pI89BCZB3yqzG94YuUN3aFOEIzBtqunU8GsA53I_mmI_9mLxq3Du70Od1twOCOSfur8bNFf9z93-uySU0x43etxfKa5xuse79Tr_Y9HmlUmun11T8dkoytrl1mulYelXuJv7yF__S-hrMB9ud-hAcdpJp9Z5jcNvUFNKJUA2klxmgmq7yXcFf3i4rdP6_qV "Component diagram for Internet Banking System - API Application")
![Component diagram for Internet Banking System - API Application](https://www.plantuml.com/plantuml/png/fPHDR-Cs48Rl-XNJ75e7IE9BJpsjuwJTB9AD4JlzE1aZSYonvOT0KdQDel-zGyesRISe0kn953cSUUQTL_eK8lhO6rrzfwpGlIHeO-p2J-EnnyrDesBRrtqWBvoDPEEDS6RSQRJfpdM8KgjwFFtnUfQsNfyUnmP39CzRowapdRFfJfVo_m2zvSk6Do2s12kdjTiesu1MbW2jX9DZvGEl771nq4wWrblESQ1yMw1wdFpn_BfO_lQm-BnylF_b_klTwBAgeegQu10BKc7ZqN1z3m-MMIr5k4NxLqAPRvdUm3LCPWymwJgj14RbR5LDkNzaK3yA7Lx1nPp3EUyC6peElE2ZFt6DGNZLnTmLsgRNwDF9pBkraXG0jSvTgZr0lGDOiKWf3seLjwbzqOVe3Fa0QuNfZlAmeHfgxpQ1_Ct5vH6QIMHFhbOwGwMIlwD1h-nfTT3Ag4WIGby7hkxYDz2ON6__aBHMWawmxkgHhBd-7KQiCL1YUI6DGsRORyDSj6GmdSwZyyoPV0UU6XMYpz5Co6CpUNq5BOQM963F73Rk1W32aqolgCCLe10K0cZNy0j5aRY66I_l_uuZKuSa679QZuRER518yhpSAeiaUECWq14FOEtwM1JAnLrl8wyOtmRCKXQE8j3obkCa-kq8EyL5pyntSGd_L01GJ3mAgh69ZXziOaYPlDEQiikUVft22uLujZr9tziWQaYpJ3b0MLw-F_mmY71vLlhG5MVSBM7U6yFu7-8eDYncsgZO0aBOfHcKLZwZ76HyGn98z9wDcOJOBSjf7bxdKoEtX2V-FxErJrOacINXy66iLo1Q75uw367Zl2oJEyLW4wrGeAJ_iHByd2FUWPh0S1cStGt2x7ESJI9LpgLVIEyCSAJ0Qo1Mw71UfbJmtWILwxBEtoHA-1usl4KGNQBxSdSxBHUEM-NbFc7wo_2V__DYCPjpyBzLbMBpRp9Zbh0ly-Ul-xWIL5ZV3yoHvWFPp0UIVI8hUwF_0m00 "Component diagram for Internet Banking System - API Application")
## Supplementary Diagrams
@ -68,10 +68,10 @@ Source: [C4_Deployment Diagram Sample - bigbankplc-details.puml](C4_Deployment%2
Source: [C4_Container Diagram Sample - bigbankplc-styles.puml](C4_Container%20Diagram%20Sample%20-%20bigbankplc-styles.puml)
![Container diagram for Internet Banking System](https://www.plantuml.com/plantuml/png/hLPDRzj64BthLqoL76I0jb2akHGm45bY6mUIfOfoqqC1OKYEg4MMkyJkq1ye-jyxIr6YAQT8WUOYS6TttdlxE3FK1y_ek2xru0TbCbtd17lcolyy7Zjyl2eKx-kqzkGoQvWCNsMs75SQJSYvz9nhbOwdFrskGkX-CH-Nw9cSXBPJoK1bo5rL0N-GV5n-tgxYTRAysoxlD_FRktXqCPZaUQof5EWD5gDXYjaNClafTnZ1svqifbPRT_qsdiUB-6wp_MKfFzFbVBcM_RGux0xVl7ltVZPv7tBy7YkwZbMnvqJbb2TXFRgG7Ks546peYQ-FR90TwVuq55B0XvnXesvDkb66_jba0PebjPKpMQ_bJaSTMX3-TIFXPqtNC_HxokVAY9OUUW0VVnyAoznH35Yn9ZZv2Rd2mc49E-lWrZ0vGmmtQBueKq3ox9dAmM15pbipochFjYGNmVJqD9p0CGns1xmdI2KxWaSf5QYQHDHD333BR6tO3qN70Nfx8u4StVCe-r6mpWKCB-2l0G1qUaUFb6wngkJmPqfXKbLQPSZAcg64Fk43Hf1KBeXV_3uDiHbfzI0o6ccUvMm6RV42chm9dtZJuyLN4n7PP_OL2bmYsvekLrXGO3-o9fbJ5KSmCKMjqONmoja7bPC7rFhhBBlQP44wQiNFm5QSR8pqyA0mf2W7Sbz8dNtqv5ufAcsgDBLsBCBYf6dw9e8_i4Hnegy5j2eLKmw-JZqnsDr_rkPVYJi8W9mUL4RdycRfA4V653s5rz0-1ZN9RtFehTawyX362ZWgb6U7WHkKaR8ic-S8zasl0DQyXynHJeOLQX-5iYBlGTj25iJPrIkZshuMfrIesDNjrmjdPkMOw_9wpdt3eM2A03VTYeM_VZMvHDJVfxAFdtX49IgzzKr0YEBBXQpRbWlCcps1QaXHmq9bpdgxOuYViZsQWk2GAR0lC5jj7QfWcft3aivwkhCzbEUn2Z89dExtmdp0rDRSbK1qQkK8sA7ns3ZHsJzOatunBhgclVVa0_V7pMQLoC7-EL_XDy-qHT_1jNJRkp2gKzkDY0Qk6m0jKXFi5qHBU1Zf4NoIBzAu8U_UPhFL8dGA_X_GzaQIEzbTi_H1ruIvXvspPJEl7frYyi0s4BKyivkfG9umNxXrLcI9m7gWon1jC3eXP_NOrz3FgxtKHqUVB3Qh5kXqcLxwMLLsFdLVEPbMY_cvLzssm1_-BypZN-ExsUXYy47GwrB_0m00 "Container diagram for Internet Banking System")
![Container diagram for Internet Banking System](https://www.plantuml.com/plantuml/png/hLPFRzl64xthKynFoK46Q0i_fBaKC11POXi7agMASjr30M58ZgX5bhl4xj1_KFIxTvQcILDEaKDwCRYpE-yzFxuTyPDdT5oNUlG_PJ9TvmH7vih_F9qwVBWe51_hjFRaCckO35zajfnM6ateEVUSQvLEvp-TRqBfThMSbkYPd9JsS-b0PSXTL05_b7nUt-qtyJPPt-pNjxlbzKqyEHlDyZpML0hq3el9ECNiAvcywnr7yFuWYxdLrbs-ZvVnAhxPxNzPov_vUhdUodvQFE-Etttuy74n-nXw_14hkenLSUH4vPGdOJqvanrDXH3iw94lNzWWUw7xqr1e0HzwneswBUb66VedamLebjPMpcoxNTzrEhGW_Ej6ma-QBXVeZvGlbH4j0_G0FlrlA2npJp5YnPgWynDoXON34WxMmRLXSeOOhj1yLQQ0vCapbQFHXfotPfBLdcr9Be9vzpIUmKiPx07uI91ATmGF4XMecaRKJGqmosnjs8z5npFq_aeAERgdIVP_mJeLC3w3lqO0qEkTF52wnwgImtUKmgogjCgGbJLZANt1UumWgLmGl_fz7ceBqkfUP3JIFClP3Dhm0fgyANUywSi_lfc9o26phr3W4jdMTBx1WWBx2skIELLn13DJr1fTA6-SlLSvUK2jlyrog4qMfADM_0HiEoSzt2iCFSg1_CEGEllWoRsHLDfKQMhzM8L59sh-Be8_i4InOYW6j2eLKmw-JZqnsCCFY7iM03dTgunEvItIIOwCANeAxw5z36gItvOmMBDrv27C5N1KACyE0pSe8xaic-S8Zirb0Qpv29cZd0mhr3uAkIBlGTj25iJPnHkZseijJgaGsStrjvEpi7BCzNq3vxxZK315W9lhYeM_V3EwHDJVNUxZHvvGYKhlVLCGelXy9UlspWNctP50DQIeOQKoPxqzCCIFsH5DGV3SAR2lC5jjFQfWceF3aaukTMzxayys1PaKeCLuRJvWQclk8n1rTpa2TcWyDaxqze-sf5_DY_xMtdhoWVlpRhT9vE3mdA_mksVQqFTmBTt-9ipgrFOpee7h9q2Br1G7WUW8cu4RmHVvIPesvFtRRBPQX5x1Zm7jhwIvbzrVbY7ebZ3tS72sR0RMWrDC7jW6efPdSJKNo0xpbLid8Ki4rWETXsg3qGiPvl54mx2lzfAFdZvPxJO2D7W7W_QJLFO-zJzpCgrMorEl-cs1V_vWMCQ_nZSB-L3u9EZXE-8V "Container diagram for Internet Banking System")
## 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/hLHDS-D44BtxLpJXWBTAZei2BfpMiGt94d-mSZRBITMIslQmenanFR8tHV7VwL5aAN8sbQMAczJJ_TxJq-jvonwThmez-4QPJ5SvmTxxadyUZnqUBtVAxwkqOdAPDPwClyniCIurcZ0pOfzhbOwdFuxMeNItk1qNo9wSb9AfJA0ov2xB6Z-dhRp1RFxXPhfQnb_1uwiIS_T3nwVaTBILZX6NJddY4rrEXt36BSilg-LcSZ-FLulv_qfKr_18R0iQ_JJu3YeZ08K0WTyJRAtMzgZC3dHGWIQ7th5oB4yMH01ecw7M3uBHMl_SjUQeissCPbTfVF4ujzwGV-dqJppWIsS5_wKJ9dSuu-wPENwrWSo1j2tfiKM-xdRon-fkasnMwsIskbyEttIrIPp4lyqtqsifDgNxcyrrSZl_TRwSIN7WbTS4hIcGAzmvBCHe1pV6apFauGhDf-1v_C2UYi5WJOwj6MOLUrkGYs3QFbrCu5G6kwr_IYhJ4Hmb653MWwZh6c2MsSfulX0TZz39bHHoT0_3x7l1EXTmyGR-7W10ftTuf3J1ifJcUqfXKfPQPUYLDHTIUeS7Z20kNH2_-30DjHbf9GPpBOszz6RGHBMEKoYtlEdfmzUJC1l-heZjA-0IvIYMDasZDUueg3YnnvbJfOzWyXYgK5uxUr0vCQ3MNsRRIkQz2Zuf_n3Id5MreGm7XM54EP3lXjJP8rCDseJscRZ2fafJuz0YlBJofjz6y14B57Fwia2hGddAWQkKoOFTVhLCVgRpKG3KzmS5diVzEHSwIuSvUaoHAVoZvZ7qnx_VGk_TMqSS5jo1evrYxr14W38IsGA3e0Zsqfm3LXAvp55EnYlK78N44JDekvCNyjbbGEpsyhb_AMQVoEHYe0hPNjzyEM8pAsskc-iP-efnmIi13YEjY7_QXPX_zaCgK8d2kY1Tyz52tfjb36ERFO6gIL33GcNEijrwc7_Ezf8B0cuxJtU7K3p1RtHr389ljWuBEjlyplyGtbCmCYcqt_RaDm2cjl9TAg9suIFm3WrZxKBp9y8by9xqaqkbM-qx9WxSrvlDEfR6VX-N-6fFRmz2QqENB4djzgbjBv86hhqc6gIws0j3IuZyOB88tiMhvVWfUKVv7oUJA-dkX7LxqKTvJvWpR9qjwdlhw9Gd1cy3SWCykveAP8lvn8-pICK2oq2ZKAqnEY6zz9rhwCzLB0dewEF5PYr0FPTxu-UvQuq9y-F6dO-BszQSjp9Q5VfV "Container diagram for Internet Banking System")
![Container diagram for Internet Banking System](https://www.plantuml.com/plantuml/png/hLLDS-D44BtxLpJXWBVAZei2BfpMiGt94d-mSZRBITMIslQmenanFRBNHV7VwL5aoN8s5IYuUNgwNp-zVZr-onwTBtFT-qgPL9SPmSxxWdySZHmUhhVAxygaP7AfDPwClqvjFYeqcb0pP9zfbOmctmzN8VGmln_bo9wSXEA9LA0ovAwB2Z-ZZPnWEljmDraked_GnvS5Pkwxjf-Is-56CePSEEM9J-qoseSxRhhyj5oinu-pQ3cV_Q-DgXWUY6rEmnzwtq1f120N8F0xWetLsXwKsO8EBD1aqBbMZkMN1I40sgQezL4m6kcVgrPVjRADq6nBZIzUPzORyY_T_evxVEakvpzqpEJs5xqxOevUJI2p9sqBUagHhxiV_xPyMCVhvIgUBXyN_JTjR1p5qI-pzUHMWdNeyMvz6z_FVfujfXBiUUKrGICAP0gt3dCHsi6TyUGCURX1yobe7XtPKzxhhSYnDVsqP6zpSWEODB-knd0AWzrKGqcaUW07CGOKLI7gAWQOfhOqdg-4nnDqV2E13DsndtuhM9S4hjx0dpq0QFds3vJ4M1II_4W9Z8j2gnIzikPAGkza6WE82XV8ppzCGcnAMed0N55ZBxafr5ODTgh2JT_azE6hSQWDqnMoNGPSe5n5agPfkC8j1HQdxb7gLE47C7uoLGYldDshZ1XGwoztsuZdlGewANy4Rnj56VOAGuro81yEYRC7fWgrTkqpThbDbAPQedauDFmcNm_W8-OewdHvWLQvyfG1bmcJbpd-1vvF1A1wG2ZqULgWIwBJf9-XnmIPmf3gdo4_-lKUEcTl7N7OS0UEjegzgmOEoeXfy-ht07R8Eye0It5TwYWZunLg7WJJ4JDekvK3-VGwOER7PZUVIvXW-ebC9XgguE_LtPTjDhMIvjgwZgQlQ1Va4k1Gqf3ugrcAsMVVfnoLCAm2aZKRpkLSBsGeMyk0LDK4DSnLwYpRZOVPvtGdrY3W9lFqVaYBC_oQLzj1yCt6OKuNsz-E81Zuv8rK0istdGq2CB6bRuqnQ9P-0DwXOQnKE8r27eBtfCyUbdQz7vWuzBvThrUH97RpkC1NSpgh45BhTl62r7QNsFOngU3Qfw96ge8TCpGDaOyc7S2xQBaOdJTlM_xBolX6ibjYxMfqKTuJPWmRP_FgxJfKVwNWRK2kWQSt4u5iCC_qkB1K9B0CD0pH2gCbqdLVXyDbNSdYWBPzD5-l1AYZSgUywxjMcAf-LAlpSNxVYFDMIijS_mq0 "Container diagram for Internet Banking System")

2
samples/C4_Component Diagram Sample - bigbankplc.puml
Unescape Escape View File

@ -13,7 +13,7 @@ ContainerDb(db, "Database", "Relational Database Schema", "Stores user registrat
System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
Container_Boundary(api, "API Application") {
Component(sign, "Sign In Controller", "MVC Rest Controlle", "Allows users to sign in to the internet banking system")
Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system")
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.")

4
samples/C4_Container Diagram Sample - bigbankplc-icons.puml
Unescape Escape View File

@ -21,9 +21,9 @@ Person(customer, Customer, "A customer of the bank, with personal bank accounts"
System_Boundary(c1, "Internet Banking") {
Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA", "java")
Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to cutomers via their web browser", "angular")
Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser", "angular")
Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device", "dotnet")
ContainerDb(database, "Database", "SQL Database", "Stores user registraion information, hased auth credentials, access logs, etc.", "msql_server")
ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.", "mysql_server")
Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API", "server")
}

2
samples/C4_Container Diagram Sample - bigbankplc-styles.puml
Unescape Escape View File

@ -12,7 +12,7 @@ Person(customer, Customer, "A customer of the bank, with personal bank accounts"
System_Boundary(c1, "Internet Banking") {
Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to cutomers via their web browser")
Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers 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 registration information, hashed auth credentials, access logs, etc.")
Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API", $tags="backendContainer")

2
samples/C4_Container Diagram Sample - bigbankplc.puml
Unescape Escape View File

@ -13,7 +13,7 @@ Person(customer, Customer, "A customer of the bank, with personal bank accounts"
System_Boundary(c1, "Internet Banking") {
Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to cutomers via their web browser")
Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers 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 registration information, hashed auth credentials, access logs, etc.")
Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API")

8
samples/C4_Context Diagram Sample - enterprise.puml
Unescape Escape View File

@ -12,9 +12,9 @@ Person(customer, "Customer", "A customer of Widgets Limited.")
Enterprise_Boundary(c0, "Widgets Limited") {
Person(csa, "Customer Service Agent", "Deals with customer enquiries.")
System(ecommerce, "E-commerce System", "Allows customers to buy widgts online via the widgets.com website.")
System(ecommerce, "E-commerce System", "Allows customers to buy widgets online via the widgets.com website.")
System(fulfilment, "Fulfilment System", "Responsible for processing and shipping of customer orders.")
System(fulfillment, "Fulfillment System", "Responsible for processing and shipping of customer orders.")
}
System(taxamo, "Taxamo", "Calculates local tax (for EU B2B customers) and acts as a front-end for Braintree Payments.")
@ -29,9 +29,9 @@ Rel_R(customer, ecommerce, "Places orders for widgets using")
Rel(csa, ecommerce, "Looks up order information using")
Rel_R(ecommerce, fulfilment, "Sends order information to")
Rel_R(ecommerce, fulfillment, "Sends order information to")
Rel_D(fulfilment, post, "Gets shipping charges from")
Rel_D(fulfillment, post, "Gets shipping charges from")
Rel_D(ecommerce, taxamo, "Delegates credit card processing to")

2
samples/C4_Deployment Diagram Sample - bigbankplc-details.puml
Unescape Escape View File

@ -50,7 +50,7 @@ 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(comp, "Customer's computer", "Microsoft 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.")
}

2
samples/C4_Deployment Diagram Sample - bigbankplc.puml
Unescape Escape View File

@ -38,7 +38,7 @@ 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 or Apple macOS"){
Deployment_Node(comp, "Customer's computer", "Microsoft Windows or 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.")
}

Write Preview
Loading…
Cancel
Save