diff --git a/README.md b/README.md index e15e02b..f2fbae1 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # C4-PlantUML -![Container diagram for Internet Banking System](https://www.plantuml.com/plantuml/png/bLLDZzis4BtxLqoTGnr0kqQ0ddgArpQwcwntrSZRJK_2Y1hRH2XI82axHj7_tg6i3yiEajGdQJJpvl7D6_gzysXzLQZHBr8BLUK4E-zBz_jqQl5mkvL-LsML8okCzgJzhJ3557ChKUzLLLRJ-MytiKBjNrQFKuMUdETGEkTib9hiRHcmVuLASs710E1t11kZb3b8lGN5IO0wXy5dQHq_6U36e8n0fOwCqJ6yRi1V7sT_Fx-iq_Lpd2wUNvycR_lOB4cJZylr_9w3JUZrONsVFYx_M3ujE3ZoqYl6RK4XbxYrM31H2mzySAl9mntgBu5pSdIUYj4e9kkCdeZAULEGZM3UFOrdq8R1REf3PLmTmO45XR8kH5N708KmbVPkp3nEqEaT1tAqnubunrYN1CPluPyHyA_ZEpbGbc9PSl8hPJ0hIoK5Ucdqc4CVS8yH9AKDv5T_pKDiGKhkcKPDZJtWfO1cnFKuGhZhcxK7ZsTCSjZPbOmzJlYpefiOjnIwjrqJOMNf8vZfRQNGXd1ipLxcv827-kqk6_PAe8vA-cDmWQXg8Hti9OOIQO7F2var1pRc5QF2P59H8yUgVcavpTz4y1aBP2M6NDY7XVIKWwionroQcVqCDtT5xaG0SjfBGPVq5jaaHuyPEWfZQ1u3c-JFHnYyUsEPMrW-iBILpblarY0rkxAefnl1ZfDpm8fT9IpbF3w9oaN1LEGSBy-MNyYBsokPCXHVIEUiamn-ZH--RPk5uJJRrmrq-u4-GH86vjR_TjPUVlKJAb2grDK1XblUhFYzMQk0lsRfPGtDExAImXfdDXwMNyKEDJliLCcmPvWDWnwLCVM6TvWkzlPCsc31PjA20zqfpXG6p4pb-p57tRf6mFFG3klpzYAFFf4wknBwnNnnv4Bl-_KwJZXnc7TQe-_d38nTfvxQfKyajxlCd5q39xXsoHkaEZWSUziGtL6B23uapq_Jy-RdBVzNPNh7sJsntl93b4-4kOEDDKLzwnmiBo7VIIOWDy2Bktbxpe1vfiU5ZHA6TK0t8LfZz4Gk73VaCAohNBXXk_R9QXqtGDrX1kLNlck52VNJHftF_EVOYlEUI_alwpy0 "Container diagram for Internet Banking System") +![Container diagram for Internet Banking System](https://www.plantuml.com/plantuml/png/hLPDZzis4BtxLqoT71n0kqQHvb9WWNXjjTd0NhkMj-dD655ZcGX52YIr7oZwtpkaFsXxKwH0UrcOGyvxJq-Fe_teF5hVDQhtWzH2THN1rllM_JmSMdowhgNVTcNdo0gZFMb_BKmpR1Ngq7FbVALaEHp_TBK8fOVPTDYWysIvj1vp1qfDzheD-BtYq_pBUf4lY_dzUlwmcjxTvuDtlL5LvOeQXbvXFUYNABwIha0ScliPlDtmOcoKiJTlysa-o-zNwr_c_6SydywNl5_Mkzt-c_VlFqn67qAFss9BDxcijxwG5LL5M0_UHS8bgKY6xaMBSDZJyu5Wj5oop0EoOWd_k57u5qKt4tHRggQyla0FuCF_Xy9udoXwNdf5SBGNAecrnGOsniATPlSrURX5_LNg6eeNvwdfzHPadT43qJbl6h8PZ8-_-YCubC5im6y9IkxEu8dVFhIn4LMi0GfXEkrTdtNieDUtNAZGlWp4ZunrAQ3_3lxi0K3IEtYYSerjouU_K0cZjbLIe9T6zxdq6HynWwArGVpizt6eJKZ9HvOHfJdFPmNiymYegrW-yfQ71r-CMEGviskHuGhULdIrm9e2-u6r45QsFeEHhZk5DfGNrZnoU1oWKjzcsNHQ1Ecef7y1RzZ9QAI3HucXHLhWvuNIcYT7zfMYnfHIqTwEMLWSDOtVPF07DiXEd6i19Hl9WG3NbOwrcCs_rkPUYTi9W8eUfQ1BUPDoKA774Xs5rx3_6TGKlqtXREsDPMrXKe2bMZflCN23r1pB9lxEO1ll2c37kHAMAj9Ued9PY1Kv1yhKl20lhbyPjHyCx9GCYLtSVJiu4yF7REexTUvx3WLJ63ZULgpTpUjXnAh-EkO-V_O3Qb2gjOi5PiglPho6tO50lTeIoCYA2cPIMEFCnaF-BBQeQu9T9yEUOEx59TGPieaM6xgurCdtaCz330GN3WzuwZvWQJgVCf0Txt86tg9s6Ar8_lUMf4xcHRgr3uvSuFwqMYqAFdX-phNutJCfzOUZExhrFV70BasQ4H4kJO0zKYoU9Y8Hne6RmMV-oWmZUNgTSMkFa1JyDw3rBJSdsOVRSWcw9AmSRAnfui1wijAJ0sy2qPvdSZjco2FcYLiN8IiOrW5TXMh4I48kydYguRAlSvoFH5_CLeiTK7gOi_QBL2QVqcUEnzLiUkbLscRutVy0q_pN_7x2t_wFZDurwcy0 "Container diagram for Internet Banking System") 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. diff --git a/percy/C4_Container Diagram Sample - bigbankplc-styles.puml b/percy/C4_Container Diagram Sample - bigbankplc-styles.puml new file mode 100644 index 0000000..59014e6 --- /dev/null +++ b/percy/C4_Container Diagram Sample - bigbankplc-styles.puml @@ -0,0 +1,43 @@ +@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 + +SHOW_PERSON_OUTLINE() +AddElementTag("backend container", $fontColor=$ELEMENT_FONT_COLOR, $bgColor="#335DA5", $shape=EightSidedShape()) +AddRelTag("async", $textColor=$ARROW_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DashedLine()) +AddRelTag("sync/async", $textColor=$ARROW_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DottedLine()) + +title Container diagram for Internet Banking System + +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(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="backend container") +} + +System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system") +System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") + +Rel(customer, web_app, "Uses", "HTTPS") +Rel(customer, spa, "Uses", "HTTPS") +Rel(customer, mobile_app, "Uses") + +Rel_Neighbor(web_app, spa, "Delivers") +Rel(spa, backend_api, "Uses", "async, JSON/HTTPS", $tags="async") +Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS", $tags="async") +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", $tags="sync/async") + +SHOW_LEGEND() +@enduml \ No newline at end of file diff --git a/samples/C4CoreDiagrams.md b/samples/C4CoreDiagrams.md index 965cc27..0c38901 100644 --- a/samples/C4CoreDiagrams.md +++ b/samples/C4CoreDiagrams.md @@ -52,6 +52,12 @@ Source: [C4_Deployment Diagram Sample - bigbankplc-details.puml](C4_Deployment%2 ![Deployment Diagram for Internet Banking System - Live with details](https://www.plantuml.com/plantuml/png/vLT_Rzis4FtVd-AgRQXJE7PYf4Cne40TssjSs8aHEKq7330eafQvKgH0KawyeTzzTv8osx7J7zWm35W2A19rT-_UlUE9UUC3Sw78TECvS6jMqWLG0UvKM08JGWLb3TFuAikO4Q2LaS1SMcJI13WUN0_7lTde_N0-kkoFRmR3rr4xWc2Xy1AqvKphTUEPMi0FA-OKIxISotlbWsz6ZpsZemR0CsMuBeI4TgVTxlJFvWEPQxici7PEIJwJsijjmsK8kV-fqt7ihfrYqaM2q0wP1FB1j3kvPeO87liWj4emwl6Kbcucuqx6V93kC90HQj5ez8IOiJGkyjowq8mMo2XX_6FKWk-Jj6-rTQ-Zx_W9_IA3Myp05c7gR8w5N5z89gHh7ZMmk69jMAOuQ9bYQ52UQYIWoNXGAnOaBXdGc4zPuoFq6FT-kRgPpMz7iulvUFXsU3cWI445BM6JBWmKIntBO64TZ92sCpB0EJCVbKaXNYF138vXh5QoqTYupI-jaCrSynP4z2x2l-SgBHq1bny_Ws210PS441tzWH80O6qUc3QZCQfDpOAEU6-4DK0DSuqbm4HATG4UuS_7JM7GFb5fWZZ7B5SlNhpuDTo_eYWtIO72mUcFxPCp6CzYMkl1dKm05SP61IUzek1KkR2KswyMp6KjO9nBJrLUAGO_luJpqTlZqHHZJNpxWSGUaNTinU2zTBucymfpFsZu8RkdzozFkvEdJJoPd9vqpxPjzil0SiQNaWYMDp2p6POpUhm0hzebPiy0GXZmjd1SGfdoSBXLW1rwzDEt9Z1bf4CeHH6c8-ZbkLORrSeef5cSEwhgv7sVbf7DIWdfzvjhKHXUpGSLrcMD6RoBhoux5xFPD0Q4Q6-H_jGehr_JEKzsIzqe8ZavtMeRUdogOMPOEwIJCRSkMpXXNkxLw22MTOnhakIgl85Zc5PneitQQPS_0cc1njsqWVgI78EaAH8CCQWTADorrAoUkm_B46CJP8pUni4wMKuFsW6fyi6Lrg3Cmhgil6_1alcb5C2Ai4HEjSh0dHJqoBH_s1sWROeFCl1l5klpU_jwIwtkhbhTpwdb9SScEAWN3jt0KlzwCuQFu6a9hsi9kziQncNqWohsDj0jy84PaUpbqAgcDitQ1LFQuXBaXSkjbnwiqUil9RalVlU_elv-ullzyC-CVMoDPBibS6vLS__i_pNth-kvt_rN1ZyQOOHRcNpbu1z86cNEbpNs0Sqvr0ShigRb_M-2nukMaBDK0jl079ejd_RF8vcb5Fk53pQJxha7N50OJiYLukNkeDGHzYe6ww1dXBDA4ELTgfKRcaygV_GYvmyiOyXmvwl6GAjCqVdB5ub79dP1pBxqjGiMU9scfpOZ7-LsyqNIXqXoc-MxB6cbGBY8CbQEMsyN0MuLRgSxJmbLh3F6h-87ie-Z9WvjfQiLFg-UAE1RQqcH_j8XMWiczdUbDMuBvUJ2thVgs373hQEeg1F5NPN0KAIIuFPRoUUCPb6bzHIrFjHICNSghrgbPz92CxTRUAt_NgsfwMlMMEbDK-40_Qi1giFEX7r4G3hoS4Jr690o-SrRKnrLq9kSaDMtUSnlgas5ZZlxnPQi-4RWhLHhh1969FLNrCC2rIbBTUTKa0-0xmRd_Ls7xbTxu7GHoSQbaaVwwY0VB1eruekhsys_5c-a4KMc_mG0 "Deployment Diagram for Internet Banking System - Live with details") +## Styles + +Source: [C4_Container Diagram Sample - bigbankplc-icons.puml](C4_Container%20Diagram%20Sample%20-%20bigbankplc-styles.puml) + +![Container diagram for Internet Banking System](https://www.plantuml.com/plantuml/png/hLPDZzis4BtxLqoT71n0kqQHvb9WWNXjjTd0NhkMj-dD655ZcGX52YIr7oZwtpkaFsXxKwH0UrcOGyvxJq-Fe_teF5hVDQhtWzH2THN1rllM_JmSMdowhgNVTcNdo0gZFMb_BKmpR1Ngq7FbVALaEHp_TBK8fOVPTDYWysIvj1vp1qfDzheD-BtYq_pBUf4lY_dzUlwmcjxTvuDtlL5LvOeQXbvXFUYNABwIha0ScliPlDtmOcoKiJTlysa-o-zNwr_c_6SydywNl5_Mkzt-c_VlFqn67qAFss9BDxcijxwG5LL5M0_UHS8bgKY6xaMBSDZJyu5Wj5oop0EoOWd_k57u5qKt4tHRggQyla0FuCF_Xy9udoXwNdf5SBGNAecrnGOsniATPlSrURX5_LNg6eeNvwdfzHPadT43qJbl6h8PZ8-_-YCubC5im6y9IkxEu8dVFhIn4LMi0GfXEkrTdtNieDUtNAZGlWp4ZunrAQ3_3lxi0K3IEtYYSerjouU_K0cZjbLIe9T6zxdq6HynWwArGVpizt6eJKZ9HvOHfJdFPmNiymYegrW-yfQ71r-CMEGviskHuGhULdIrm9e2-u6r45QsFeEHhZk5DfGNrZnoU1oWKjzcsNHQ1Ecef7y1RzZ9QAI3HucXHLhWvuNIcYT7zfMYnfHIqTwEMLWSDOtVPF07DiXEd6i19Hl9WG3NbOwrcCs_rkPUYTi9W8eUfQ1BUPDoKA774Xs5rx3_6TGKlqtXREsDPMrXKe2bMZflCN23r1pB9lxEO1ll2c37kHAMAj9Ued9PY1Kv1yhKl20lhbyPjHyCx9GCYLtSVJiu4yF7REexTUvx3WLJ63ZULgpTpUjXnAh-EkO-V_O3Qb2gjOi5PiglPho6tO50lTeIoCYA2cPIMEFCnaF-BBQeQu9T9yEUOEx59TGPieaM6xgurCdtaCz330GN3WzuwZvWQJgVCf0Txt86tg9s6Ar8_lUMf4xcHRgr3uvSuFwqMYqAFdX-phNutJCfzOUZExhrFV70BasQ4H4kJO0zKYoU9Y8Hne6RmMV-oWmZUNgTSMkFa1JyDw3rBJSdsOVRSWcw9AmSRAnfui1wijAJ0sy2qPvdSZjco2FcYLiN8IiOrW5TXMh4I48kydYguRAlSvoFH5_CLeiTK7gOi_QBL2QVqcUEnzLiUkbLscRutVy0q_pN_7x2t_wFZDurwcy0 "Container diagram for Internet Banking System") + ## Icons Source: [C4_Container Diagram Sample - bigbankplc-icons.puml](C4_Container%20Diagram%20Sample%20-%20bigbankplc-icons.puml) diff --git a/samples/C4_Container Diagram Sample - bigbankplc-styles.puml b/samples/C4_Container Diagram Sample - bigbankplc-styles.puml new file mode 100644 index 0000000..67ca780 --- /dev/null +++ b/samples/C4_Container Diagram Sample - bigbankplc-styles.puml @@ -0,0 +1,38 @@ +@startuml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml + +SHOW_PERSON_OUTLINE() +AddElementTag("backend container", $fontColor=$ELEMENT_FONT_COLOR, $bgColor="#335DA5", $shape=EightSidedShape()) +AddRelTag("async", $textColor=$ARROW_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DashedLine()) +AddRelTag("sync/async", $textColor=$ARROW_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DottedLine()) + +title Container diagram for Internet Banking System + +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(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="backend container") +} + +System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system") +System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") + +Rel(customer, web_app, "Uses", "HTTPS") +Rel(customer, spa, "Uses", "HTTPS") +Rel(customer, mobile_app, "Uses") + +Rel_Neighbor(web_app, spa, "Delivers") +Rel(spa, backend_api, "Uses", "async, JSON/HTTPS", $tags="async") +Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS", $tags="async") +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", $tags="sync/async") + +SHOW_LEGEND() +@enduml \ No newline at end of file