From ce478229f982b1879e4c38df082f52acdeba2aa2 Mon Sep 17 00:00:00 2001 From: Victor Lupu Date: Wed, 26 Sep 2018 00:12:41 +0300 Subject: [PATCH] external person, system boundary, container boundary, updated samples from c4model.com --- C4.puml | 24 ++++++++++-- samples/C4_Component Diagram Sample.puml | 37 +++++++++++-------- ...Container Diagram Sample - bigbankplc.puml | 9 +++-- ...ontainer Diagram Sample - message bus.puml | 5 ++- ...ntainer Diagram Sample - techtribesjs.puml | 11 +++--- samples/C4_Container Diagram Sample.puml | 32 +++++++++++----- samples/C4_Context Diagram Sample.puml | 17 +++++---- 7 files changed, 88 insertions(+), 47 deletions(-) diff --git a/C4.puml b/C4.puml index dd3ad4a..5f080a3 100644 --- a/C4.puml +++ b/C4.puml @@ -2,9 +2,10 @@ ' ################################## !define PERSON_BG_COLOR #08427B -!define CONTAINER_BG_COLOR #438DD5 -!define EXTERNAL_SYSTEM_BG_COLOR #999999 +!define EXTERNAL_PERSON_BG_COLOR #686868 !define SYSTEM_BG_COLOR #1168BD +!define EXTERNAL_SYSTEM_BG_COLOR #999999 +!define CONTAINER_BG_COLOR #438DD5 !define COMPONENT_BG_COLOR #85BBF0 !define ELEMENT_FONT_COLOR #FFFFFF @@ -35,6 +36,13 @@ skinparam rectangle<> { BorderColor #073B6F } +skinparam rectangle<> { + StereotypeFontColor ELEMENT_FONT_COLOR + FontColor ELEMENT_FONT_COLOR + BackgroundColor EXTERNAL_PERSON_BG_COLOR + BorderColor #8A8A8A +} + skinparam rectangle<> { StereotypeFontColor ELEMENT_FONT_COLOR FontColor ELEMENT_FONT_COLOR @@ -85,6 +93,7 @@ skinparam package<> { legend right |= |= Type | | | person | + | | external person | | | system | | | external system | | | container | @@ -100,6 +109,8 @@ skinparam package<> { !define Person(e_alias, e_label) rectangle "==e_label" <> as e_alias !define Person(e_alias, e_label, e_descr) rectangle "==e_label\n\n e_descr" <> as e_alias +!define Person_Ext(e_alias, e_label) rectangle "==e_label" <> as e_alias +!define Person_Ext(e_alias, e_label, e_descr) rectangle "==e_label\n\n e_descr" <> as e_alias !define Container(e_alias, e_label, e_techn) rectangle "==e_label\n//[e_techn]//" <> as e_alias !define Container(e_alias, e_label, e_techn, e_descr) rectangle "==e_label\n//[e_techn]//\n\n e_descr" <> as e_alias @@ -110,8 +121,13 @@ skinparam package<> { !define System(e_alias, e_label) rectangle "==e_label" <> as e_alias !define System(e_alias, e_label, e_descr) rectangle "==e_label\n\n e_descr" <> as e_alias -!define ExtSystem(e_alias, e_label) rectangle "==e_label" <> as e_alias -!define ExtSystem(e_alias, e_label, e_descr) rectangle "==e_label\n\n e_descr" <> as e_alias +!define System_Ext(e_alias, e_label) rectangle "==e_label" <> as e_alias +!define System_Ext(e_alias, e_label, e_descr) rectangle "==e_label\n\n e_descr" <> as e_alias + +' Boundaries +' ################################## +!define System_Boundary(e_alias, e_label) package "==e_label [System]" <> as e_alias +!define Container_Boundary(e_alias, e_label) package "==e_label [Container]" <> as e_alias ' Relationship ' ################################## diff --git a/samples/C4_Component Diagram Sample.puml b/samples/C4_Component Diagram Sample.puml index 2de0fc6..8b9c96d 100644 --- a/samples/C4_Component Diagram Sample.puml +++ b/samples/C4_Component Diagram Sample.puml @@ -1,24 +1,31 @@ @startuml !include ../C4.puml +' !includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml LAYOUT_WITH_LEGEND -title Component Diagram +title Component diagram for Internet Banking System - API Application -Person(client, "Client", "A user of a system") -package "Platform:system" <> as platform { - Container(api_app, "Mobile App", "Android / IOS", "Uses SDK for direct calls") - package "Web App:container" <> as api_dash { - Component(c1, "User Controller", "MVC REST Controller", "Lorem ipsum") - Component(c2, "Product Controller", "MVC REST Controller", "Lorem ipsum") - } +Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.") +Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.") +Container(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") +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(accounts, "Accounts Summary Controller", "MVC Rest Controlle", "Provides customers with a summory 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.") + + Rel(sign, security, "Uses") + Rel(accounts, mbsfacade, "Uses") + Rel(security, db, "Read & write to", "JDBC") + Rel(mbsfacade, mbs, "Uses", "XML/HTTPS") } -ExtSystem(3rdparty, "3rd Party Platform", "Implements actual business logic") -Rel(client, platform, "Uses") -Rel(client, 3rdparty, "Uses") -Rel(api_dash, 3rdparty, "Uses", "REST API") -Rel(api_app, 3rdparty, "Uses", "SDK") -Rel(api_app, c2, "Query", "SDK") -Rel(api_app, c1, "Query", "SDK") +Rel(spa, sign, "Uses", "JSON/HTTPS") +Rel(spa, accounts, "Uses", "JSON/HTTPS") + +Rel(ma, sign, "Uses", "JSON/HTTPS") +Rel(ma, accounts, "Uses", "JSON/HTTPS") @enduml diff --git a/samples/C4_Container Diagram Sample - bigbankplc.puml b/samples/C4_Container Diagram Sample - bigbankplc.puml index 33cff1a..9db3a66 100644 --- a/samples/C4_Container Diagram Sample - bigbankplc.puml +++ b/samples/C4_Container Diagram Sample - bigbankplc.puml @@ -1,5 +1,6 @@ @startuml "bigbankplc" -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml +!include ../C4.puml +' !includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml LAYOUT_TOP_DOWN 'LAYOUT_AS_SKETCH @@ -8,7 +9,7 @@ LAYOUT_WITH_LEGEND Person(customer, Customer, "A customer of the bank, with personal bank accounts") -package "Internet Banking System" <> as c1 { +System_Boundary(c1, "Internet Banking") { Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA") @@ -21,8 +22,8 @@ package "Internet Banking System" <> as c1 { Container(database, "Database", "SQL Database", "Stores user registraion information, hased auth credentials, access logs, etc.") } -System(email_system, "E-Mail System", "The internal Microsoft Exchange system") -System(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") +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") diff --git a/samples/C4_Container Diagram Sample - message bus.puml b/samples/C4_Container Diagram Sample - message bus.puml index 4167e62..48167d6 100644 --- a/samples/C4_Container Diagram Sample - message bus.puml +++ b/samples/C4_Container Diagram Sample - message bus.puml @@ -1,5 +1,6 @@ @startuml "bigbankplc" -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml +!include ../C4.puml +' !includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml skinparam wrapWidth 200 skinparam maxMessageSize 200 @@ -11,7 +12,7 @@ LAYOUT_WITH_LEGEND Person(customer, Customer, "A customer") -package "Customer Information System" <> as c1 { +System_Boundary(c1, "Customer Information") { Container(app, "Customer Application", "Javascript, Angular", "Allows customers to manage their profile") diff --git a/samples/C4_Container Diagram Sample - techtribesjs.puml b/samples/C4_Container Diagram Sample - techtribesjs.puml index 9a65efc..c814360 100644 --- a/samples/C4_Container Diagram Sample - techtribesjs.puml +++ b/samples/C4_Container Diagram Sample - techtribesjs.puml @@ -1,12 +1,13 @@ @startuml "techtribesjs" -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml +!include ../C4.puml +' !includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml LAYOUT_TOP_DOWN 'LAYOUT_AS_SKETCH LAYOUT_WITH_LEGEND -Person(anonymous_user, "Anonymous User") +Person_Ext(anonymous_user, "Anonymous User") Person(aggregated_user, "Aggregated User") Person(administration_user, "Administration User") @@ -23,9 +24,9 @@ package "techtribes.js" <> as c1 { Container(updater, "Updater", "Java 7 Console App", "Updates profiles, tweets, GitHub repos and content on a scheduled basis") } -System(twitter, "Twitter") -System(github, "GitHub") -System(blogs, "Blogs") +System_Ext(twitter, "Twitter") +System_Ext(github, "GitHub") +System_Ext(blogs, "Blogs") Rel(anonymous_user, web_app, "Uses", "HTTPS") diff --git a/samples/C4_Container Diagram Sample.puml b/samples/C4_Container Diagram Sample.puml index a2903db..41787b5 100644 --- a/samples/C4_Container Diagram Sample.puml +++ b/samples/C4_Container Diagram Sample.puml @@ -1,19 +1,31 @@ @startuml !include ../C4.puml +' !includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml LAYOUT_WITH_LEGEND -title Container Diagram +title Container diagram for Internet Banking System -Person(client, "Client", "A user of a system") -package "Platform" <> as platform { - Container(api_app, "Mobile App", "Android / IOS", "Uses SDK for direct calls") - Container(api_dash, "Web App", "asp.net", "Covers one or more business needs") +Person(pbc, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.") +System_Ext(es, "E-mail system", "The internal Microsoft Exchange e-mail system.") +System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") +System_Boundary(ibs, "Internet Banking") { + Container(wa, "Web Application", "java and Spring MVC", "Delivers the static content and the internet banking single page application.") + Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.") + Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.") + Container(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") + Container(api, "API Application", "java and String MVC", "Provides internet banking functionality via a JSON/HTTP API.") + + Rel(api, es, "Sends e-mails", "SMTP") + Rel(api, mbs, "Uses", "XML/HTTPS") + Rel(api, db, "Reads & writes to", "JDBC") + Rel(wa, spa, "Delivers") + Rel(spa, api, "Uses", "JSON/HTTPS") + Rel(ma, api, "Uses", "JSON/HTTPS") } -ExtSystem(3rdparty, "3rd Party Platform", "Implements actual business logic") -Rel(client, platform, "Uses") -Rel(client, 3rdparty, "Uses") -Rel(api_dash, 3rdparty, "Uses", "REST API") -Rel(api_app, 3rdparty, "Uses", "SDK") +Rel(pbc, wa, "Uses", "HTTPS") +Rel(pbc, spa, "Uses") +Rel(pbc, ma, "Uses") +Rel(es, pbc, "Sends e-mails to") @enduml diff --git a/samples/C4_Context Diagram Sample.puml b/samples/C4_Context Diagram Sample.puml index 3b43b44..12d641d 100644 --- a/samples/C4_Context Diagram Sample.puml +++ b/samples/C4_Context Diagram Sample.puml @@ -1,15 +1,18 @@ @startuml !include ../C4.puml +' !includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml LAYOUT_WITH_LEGEND -title System Context Diagram +title System Context diagram for Internet Banking System -Person(client, "Client", "A user of a system") -System(platform, "Platform", "Distributed system of independent Machines") -ExtSystem(3rdparty, "3rd Party Platform", "Implements actual business logic") +Person(pbc, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.") +System(ibs, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.") +System_Ext(es, "E-mail system", "The internal Microsoft Exchange e-mail system.") +System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") -Rel(client, platform, "Uses") -Rel(client, 3rdparty, "Uses") -Rel(3rdparty, platform, "Depends on", "SDK, REST API") +Rel(pbc, ibs, "Uses") +Rel(es, pbc, "Sends e-mails to") +Rel(ibs, es, "Sends e-mails", "SMTP") +Rel(ibs, mbs, "Uses") @enduml