From a495c6a60d88ed0670ab21304208c5877e2ee7f5 Mon Sep 17 00:00:00 2001 From: Victor Lupu Date: Tue, 18 Sep 2018 17:58:09 +0300 Subject: [PATCH 01/10] added ExtSystem and Component type new samples using the new types --- C4_Container.puml => C4.puml | 49 ++++++++++++++++++------ samples/C4_Component Diagram Sample.puml | 24 ++++++++++++ samples/C4_Container Diagram Sample.puml | 19 +++++++++ samples/C4_Context Diagram Sample.puml | 15 ++++++++ 4 files changed, 95 insertions(+), 12 deletions(-) rename C4_Container.puml => C4.puml (75%) create mode 100644 samples/C4_Component Diagram Sample.puml create mode 100644 samples/C4_Container Diagram Sample.puml create mode 100644 samples/C4_Context Diagram Sample.puml diff --git a/C4_Container.puml b/C4.puml similarity index 75% rename from C4_Container.puml rename to C4.puml index e8e8fe1..dd3ad4a 100644 --- a/C4_Container.puml +++ b/C4.puml @@ -3,7 +3,9 @@ !define PERSON_BG_COLOR #08427B !define CONTAINER_BG_COLOR #438DD5 -!define SYSTEM_BG_COLOR #999999 +!define EXTERNAL_SYSTEM_BG_COLOR #999999 +!define SYSTEM_BG_COLOR #1168BD +!define COMPONENT_BG_COLOR #85BBF0 !define ELEMENT_FONT_COLOR #FFFFFF ' Styling @@ -40,10 +42,24 @@ skinparam rectangle<> { BorderColor #3C7FC0 } +skinparam rectangle<> { + StereotypeFontColor ELEMENT_FONT_COLOR + FontColor ELEMENT_FONT_COLOR + BackgroundColor COMPONENT_BG_COLOR + BorderColor #3C7FC0 +} + skinparam rectangle<> { StereotypeFontColor ELEMENT_FONT_COLOR FontColor ELEMENT_FONT_COLOR BackgroundColor SYSTEM_BG_COLOR + BorderColor #3C7FC0 +} + +skinparam rectangle<> { + StereotypeFontColor ELEMENT_FONT_COLOR + FontColor ELEMENT_FONT_COLOR + BackgroundColor EXTERNAL_SYSTEM_BG_COLOR BorderColor #8A8A8A } @@ -57,20 +73,23 @@ skinparam package<> { ' ################################## !definelong LAYOUT_AS_SKETCH -skinparam backgroundColor #EEEBDC -skinparam handwritten true -skinparam defaultFontName "Comic Sans MS" -center footer Warning: Created for discussion, needs to be validated + skinparam backgroundColor #EEEBDC + skinparam handwritten true + skinparam defaultFontName "Comic Sans MS" + center footer + Warning: Created for discussion, needs to be validated !enddefinelong !definelong LAYOUT_WITH_LEGEND -hide stereotype -legend right -|= |= Type | -| | person | -| | container | -| | external system | -endlegend + hide stereotype + legend right + |= |= Type | + | | person | + | | system | + | | external system | + | | container | + | | component | + endlegend !enddefinelong !define LAYOUT_TOP_DOWN top to bottom direction @@ -85,9 +104,15 @@ endlegend !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 +!define Component(e_alias, e_label, e_techn) rectangle "==e_label\n//[e_techn]//" <> as e_alias +!define Component(e_alias, e_label, e_techn, e_descr) rectangle "==e_label\n//[e_techn]//\n\n e_descr" <> as e_alias + !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 + ' Relationship ' ################################## diff --git a/samples/C4_Component Diagram Sample.puml b/samples/C4_Component Diagram Sample.puml new file mode 100644 index 0000000..b5e28c3 --- /dev/null +++ b/samples/C4_Component Diagram Sample.puml @@ -0,0 +1,24 @@ +@startuml +!include ../C4.puml + +LAYOUT_WITH_LEGEND + +title Container Diagram + +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") + } +} +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") +@enduml diff --git a/samples/C4_Container Diagram Sample.puml b/samples/C4_Container Diagram Sample.puml new file mode 100644 index 0000000..a2903db --- /dev/null +++ b/samples/C4_Container Diagram Sample.puml @@ -0,0 +1,19 @@ +@startuml +!include ../C4.puml + +LAYOUT_WITH_LEGEND + +title Container Diagram + +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") +} +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") +@enduml diff --git a/samples/C4_Context Diagram Sample.puml b/samples/C4_Context Diagram Sample.puml new file mode 100644 index 0000000..3b43b44 --- /dev/null +++ b/samples/C4_Context Diagram Sample.puml @@ -0,0 +1,15 @@ +@startuml +!include ../C4.puml + +LAYOUT_WITH_LEGEND + +title System Context Diagram + +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") + +Rel(client, platform, "Uses") +Rel(client, 3rdparty, "Uses") +Rel(3rdparty, platform, "Depends on", "SDK, REST API") +@enduml From 61ed9d0c1dbcee73ac9e9cc28b18a3ab3c0d293b Mon Sep 17 00:00:00 2001 From: Victor Lupu Date: Tue, 18 Sep 2018 21:10:14 +0300 Subject: [PATCH 02/10] wrong title --- samples/C4_Component Diagram Sample.puml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/samples/C4_Component Diagram Sample.puml b/samples/C4_Component Diagram Sample.puml index b5e28c3..2de0fc6 100644 --- a/samples/C4_Component Diagram Sample.puml +++ b/samples/C4_Component Diagram Sample.puml @@ -3,7 +3,7 @@ LAYOUT_WITH_LEGEND -title Container Diagram +title Component Diagram Person(client, "Client", "A user of a system") package "Platform:system" <> as platform { From ce478229f982b1879e4c38df082f52acdeba2aa2 Mon Sep 17 00:00:00 2001 From: Victor Lupu Date: Wed, 26 Sep 2018 00:12:41 +0300 Subject: [PATCH 03/10] 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 From 65195223f52bde95b78446ef422f960b33b1c790 Mon Sep 17 00:00:00 2001 From: Victor Lupu Date: Wed, 26 Sep 2018 00:38:21 +0300 Subject: [PATCH 04/10] updated readme and snippets --- .vscode/snippets/diagram.json | 70 +++++++++++++++++++++++++++++++++-- README.md | 46 ++++++++++++++++------- 2 files changed, 99 insertions(+), 17 deletions(-) diff --git a/.vscode/snippets/diagram.json b/.vscode/snippets/diagram.json index 1cbf8d7..f71395c 100644 --- a/.vscode/snippets/diagram.json +++ b/.vscode/snippets/diagram.json @@ -15,7 +15,22 @@ ], "description": "Add Person with Description to C4 diagram" }, - + "C4_Person_Ext": { + "prefix": "External Person", + "body": [ + "Person_Ext(${1:alias}, \"${2:label}\")", + "$0" + ], + "description": "Add External Person to C4 diagram" + }, + "C4_Person_Ext_Descr": { + "prefix": "External Person with Description", + "body": [ + "Person_Ext(${1:alias}, \"${2:label}\", \"${3:description}\")", + "$0" + ], + "description": "Add External Person with Description to C4 diagram" + }, "C4_Container": { "prefix": "Container", "body": [ @@ -32,7 +47,31 @@ ], "description": "Add Container with Description to C4 diagram" }, - + "C4_Container_Boundary": { + "prefix": "Container Boundary", + "body": [ + "Container_Boundary(${1:alias}, \"${2:label}\"){", + "\t$0", + "}" + ], + "description": "Add a Container Boundary to C4 diagram" + }, + "C4_Component": { + "prefix": "Component", + "body": [ + "Component(${1:alias}, \"${2:label}\", \"${3:technology}\")", + "$0" + ], + "description": "Add Component to C4 diagram" + }, + "C4_Component_Descr": { + "prefix": "Component with Description", + "body": [ + "Component(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")", + "$0" + ], + "description": "Add Component with Description to C4 diagram" + }, "C4_System": { "prefix": "System", "body": [ @@ -49,7 +88,31 @@ ], "description": "Add System with Description to C4 diagram" }, - + "C4_System_Ext": { + "prefix": "External System", + "body": [ + "System_Ext(${1:alias}, \"${2:label}\")", + "$0" + ], + "description": "Add External System to C4 diagram" + }, + "C4_System_Ext_Descr": { + "prefix": "External System with Description", + "body": [ + "System_Ext(${1:alias}, \"${2:label}\", \"${3:description}\")", + "$0" + ], + "description": "Add External System with Description to C4 diagram" + }, + "C4_System_Boundary": { + "prefix": "System Boundary", + "body": [ + "System_Boundary(${1:alias}, \"${2:label}\"){", + "\t$0", + "}" + ], + "description": "Add a System Boundary to C4 diagram" + }, "C4_Relationship": { "prefix": "Relationship", "body": [ @@ -66,7 +129,6 @@ ], "description": "Add unidirectional Relationship with Technology to C4 diagram" }, - "C4_Layout_Right": { "prefix": "Layout to Right side", "body": [ diff --git a/README.md b/README.md index 37b7958..6a812a2 100644 --- a/README.md +++ b/README.md @@ -17,29 +17,32 @@ C4-PlantUML includes macros, stereotypes, and other goodies (like VSCode Snippet ## Getting Started -At the top of your C4 PlantUML `.puml` file, you need to include the `C4_Container.puml` file found in the `root` of this repo. +At the top of your C4 PlantUML `.puml` file, you need to include the `C4.puml` file found in the `root` of this repo. -To be independent of any internet connectifity, you can also download `C4_Container.puml` and reference it locally with +To be independent of any internet connectifity, you can also download `C4.puml` and reference it locally with ```c# -!include path/to/C4_Container.puml +!include path/to/C4.puml ``` If you want to use the always up-to-date version in this repo, use the following: ```c# -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml ``` -After you have inlcluded `C4_Container.puml` you can use the defined macro definitions for the C4 elements: `Person`, `System`, `Container`, `Relationship`. +After you have inlcluded `C4.puml` you can use the defined macro definitions for the C4 elements: `Person`, `Person_Ext`, `System`, `System_Ext`, `Container`, `Component`, `Relationship`. ```csharp @startuml C4_Elements -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml Person(personAlias, "Label", "Optional Description") -Container(containerAlias, "Label", "Technology", "Optional Description") +Person_Ext(personAlias, "Label", "Optional Description") System(systemAlias, "Label", "Optional Description") +System_Ext(systemAlias, "Label", "Optional Description") +Container(containerAlias, "Label", "Technology", "Optional Description") +Component(containerAlias, "Label", "Technology", "Optional Description") Rel(personAlias, containerAlias, "Label", "Optional Technology") @enduml @@ -47,13 +50,13 @@ Rel(personAlias, containerAlias, "Label", "Optional Technology") ![C4_Elements](http://www.plantuml.com/plantuml/png/ZL31IWCn4Bq7yW_hdbQecqjFdYhRtgejLSybpGxTm6GICXDA_zwmO554yVJU36_UUyoAnMOf0PjXUTmW121XhUuyEImZb8pD99BuqPXiB_tPorHEXI6xI5ArlOl17BopUOml7XAW6POFUxGaxyzR4omBvBew3bLlFK7kKqtJIgizP8xKfHcUq5jUDEtMdW3RIdP9V2IBpHhOPJzFxRrMDv_EVR8Vjs_W9eeOpzU_d5wljLleU8P_vsjr0FnU-lSYDvClZQh72cYiJ_W0 "C4_Elements") -In addition to this, it is also possible to define a system boundary. +In addition to this, it is also possible to define a system or component boundary. Take a look a look at the following sample of a C4 Container Diagram: ```csharp @startuml Basic Sample -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml Person(admin, "Administrator") package "Sample System" <> as c1 { @@ -66,6 +69,23 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") @enduml ``` +or + +```csharp +@startuml Basic Sample +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml + +Person(admin, "Administrator") +System_Boundary(c1, "Sample System") { + Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") +} +System(twitter, "Twitter") + +Rel(admin, web_app, "Uses", "HTTPS") +Rel(web_app, twitter, "Gets tweets from", "HTTPS") +@enduml +``` + ![Basic Sample](http://www.plantuml.com/plantuml/png/LL1DIyD04Bq7yX_6UAbG4ogUf9J687gmfJIf7iis6Tl5_M9tGYZYVtUMQejx6PZtvdtiF93mr6i5ZoB85cgXdS8qkPAcLNs7lLTm87BXeIYy6FAzf4E_wmFwrXf2GtbhTR6MhV2TNKfqg8hg_dQbXA7DuhNG8X1wNcqhvWjfqEUExT8aJLReWpKZqMbfnf2LSSf0Nf3rsKsQED5-YZr2TWe5zP6rT0RJwSxsfXF-E9k12D1Eu2jDWD_POpJWRYkSOzbtt47fdEA89At9U5LTZw6iL_dogU4JZt2NJs3nLaMiLCeE0MB306I1wpd15DqhaZ55CqZYIa1IesAl4AD-fyaftOXEC2lz4YES9cjKVqKlqJQ1htc-DCsgZhp8EiCNfMSapZ9W71_UwdytSpGTV-WF "Basic Sample") ## Snippets for Visual Studio Code @@ -93,7 +113,7 @@ With the two macros `LAYOUT_TOP_DOWN` and `LAYOUT_LEFT_RIGHT` it is possible to ```csharp @startuml LAYOUT_TOP_DOWN Sample -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml /' Not needed because this is the default '/ LAYOUT_TOP_DOWN @@ -115,7 +135,7 @@ Using `LAYOUT_LEFT_RIGHT` ```csharp @startuml LAYOUT_LEFT_RIGHT Sample -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml LAYOUT_LEFT_RIGHT @@ -142,7 +162,7 @@ This can be enabled with `LAYOUT_WITH_LEGEND`. ```csharp @startuml LAYOUT_WITH_LEGEND Sample -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml LAYOUT_WITH_LEGEND @@ -175,7 +195,7 @@ With `LAYOUT_AS_SKETCH` you can make a difference. ```csharp @startuml LAYOUT_AS_SKETCH Sample -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml LAYOUT_AS_SKETCH From bdc03b9a6f6a64cf453a26e1c36c85fd83b48edb Mon Sep 17 00:00:00 2001 From: Victor Lupu Date: Sat, 13 Oct 2018 16:11:54 +0300 Subject: [PATCH 05/10] vscode project snippets without the need for an extension --- .vscode/{snippets/diagram.json => C4.code-snippets} | 0 README.md | 8 ++++---- 2 files changed, 4 insertions(+), 4 deletions(-) rename .vscode/{snippets/diagram.json => C4.code-snippets} (100%) diff --git a/.vscode/snippets/diagram.json b/.vscode/C4.code-snippets similarity index 100% rename from .vscode/snippets/diagram.json rename to .vscode/C4.code-snippets diff --git a/README.md b/README.md index 6a812a2..a8b819c 100644 --- a/README.md +++ b/README.md @@ -90,13 +90,13 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") ## Snippets for Visual Studio Code -Because the PlantUML support inside of Visual Studio Code is excellend with the [PlantUML extension](https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml), you can also find VS Code snippets for C4-PlantUML at [.vscode/snippets/diagram.json](.vscode/snippets/diagram.json). +Because the PlantUML support inside of Visual Studio Code is excellent with the [PlantUML extension](https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml), you can also find VS Code snippets for C4-PlantUML at [.vscode/C4.code-snippets](.vscode/C4.code-snippets). + +Project level snippets are now supported in [VSCode 1.28](https://code.visualstudio.com/updates/v1_28#_project-level-snippets). +Just include the `C4.code-snippets` file in the `.vscode` folder of your project. It is possible to save them directly inside VS Code: [Creating your own snippets](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_creating-your-own-snippets). -Or you can use the [Project Snippets extension](https://marketplace.visualstudio.com/items?itemName=rebornix.project-snippets). -Now it is possible to have workspace/project level code snippets. - ![C4-PlantUML Snippets Video](images/vscode_c4plantuml_snippets.gif) ## Layout Options From bcb0c7a06b661b776c3230b14070fdefd25686e1 Mon Sep 17 00:00:00 2001 From: Victor Lupu Date: Sat, 13 Oct 2018 19:15:56 +0300 Subject: [PATCH 06/10] Revert "vscode project snippets without the need for an extension" This reverts commit bdc03b9a6f6a64cf453a26e1c36c85fd83b48edb. --- .vscode/{C4.code-snippets => snippets/diagram.json} | 0 README.md | 8 ++++---- 2 files changed, 4 insertions(+), 4 deletions(-) rename .vscode/{C4.code-snippets => snippets/diagram.json} (100%) diff --git a/.vscode/C4.code-snippets b/.vscode/snippets/diagram.json similarity index 100% rename from .vscode/C4.code-snippets rename to .vscode/snippets/diagram.json diff --git a/README.md b/README.md index a8b819c..6a812a2 100644 --- a/README.md +++ b/README.md @@ -90,13 +90,13 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") ## Snippets for Visual Studio Code -Because the PlantUML support inside of Visual Studio Code is excellent with the [PlantUML extension](https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml), you can also find VS Code snippets for C4-PlantUML at [.vscode/C4.code-snippets](.vscode/C4.code-snippets). - -Project level snippets are now supported in [VSCode 1.28](https://code.visualstudio.com/updates/v1_28#_project-level-snippets). -Just include the `C4.code-snippets` file in the `.vscode` folder of your project. +Because the PlantUML support inside of Visual Studio Code is excellend with the [PlantUML extension](https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml), you can also find VS Code snippets for C4-PlantUML at [.vscode/snippets/diagram.json](.vscode/snippets/diagram.json). It is possible to save them directly inside VS Code: [Creating your own snippets](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_creating-your-own-snippets). +Or you can use the [Project Snippets extension](https://marketplace.visualstudio.com/items?itemName=rebornix.project-snippets). +Now it is possible to have workspace/project level code snippets. + ![C4-PlantUML Snippets Video](images/vscode_c4plantuml_snippets.gif) ## Layout Options From 32a458082cad6cccf60e52088a941a1c8f205c79 Mon Sep 17 00:00:00 2001 From: Victor Lupu Date: Sat, 13 Oct 2018 19:21:09 +0300 Subject: [PATCH 07/10] maintain absolute url --- C4.puml => C4_Container.puml | 0 samples/C4_Component Diagram Sample.puml | 3 +-- samples/C4_Container Diagram Sample - bigbankplc.puml | 3 +-- samples/C4_Container Diagram Sample - message bus.puml | 3 +-- samples/C4_Container Diagram Sample - techtribesjs.puml | 3 +-- samples/C4_Container Diagram Sample.puml | 3 +-- samples/C4_Context Diagram Sample.puml | 3 +-- 7 files changed, 6 insertions(+), 12 deletions(-) rename C4.puml => C4_Container.puml (100%) diff --git a/C4.puml b/C4_Container.puml similarity index 100% rename from C4.puml rename to C4_Container.puml diff --git a/samples/C4_Component Diagram Sample.puml b/samples/C4_Component Diagram Sample.puml index 8b9c96d..115c3a7 100644 --- a/samples/C4_Component Diagram Sample.puml +++ b/samples/C4_Component Diagram Sample.puml @@ -1,6 +1,5 @@ @startuml -!include ../C4.puml -' !includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml LAYOUT_WITH_LEGEND diff --git a/samples/C4_Container Diagram Sample - bigbankplc.puml b/samples/C4_Container Diagram Sample - bigbankplc.puml index 9db3a66..af50a03 100644 --- a/samples/C4_Container Diagram Sample - bigbankplc.puml +++ b/samples/C4_Container Diagram Sample - bigbankplc.puml @@ -1,6 +1,5 @@ @startuml "bigbankplc" -!include ../C4.puml -' !includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml LAYOUT_TOP_DOWN 'LAYOUT_AS_SKETCH diff --git a/samples/C4_Container Diagram Sample - message bus.puml b/samples/C4_Container Diagram Sample - message bus.puml index 48167d6..4194e78 100644 --- a/samples/C4_Container Diagram Sample - message bus.puml +++ b/samples/C4_Container Diagram Sample - message bus.puml @@ -1,6 +1,5 @@ @startuml "bigbankplc" -!include ../C4.puml -' !includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml skinparam wrapWidth 200 skinparam maxMessageSize 200 diff --git a/samples/C4_Container Diagram Sample - techtribesjs.puml b/samples/C4_Container Diagram Sample - techtribesjs.puml index c814360..7c815c3 100644 --- a/samples/C4_Container Diagram Sample - techtribesjs.puml +++ b/samples/C4_Container Diagram Sample - techtribesjs.puml @@ -1,6 +1,5 @@ @startuml "techtribesjs" -!include ../C4.puml -' !includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml LAYOUT_TOP_DOWN 'LAYOUT_AS_SKETCH diff --git a/samples/C4_Container Diagram Sample.puml b/samples/C4_Container Diagram Sample.puml index 41787b5..6342c11 100644 --- a/samples/C4_Container Diagram Sample.puml +++ b/samples/C4_Container Diagram Sample.puml @@ -1,6 +1,5 @@ @startuml -!include ../C4.puml -' !includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml LAYOUT_WITH_LEGEND diff --git a/samples/C4_Context Diagram Sample.puml b/samples/C4_Context Diagram Sample.puml index 12d641d..03f2f35 100644 --- a/samples/C4_Context Diagram Sample.puml +++ b/samples/C4_Context Diagram Sample.puml @@ -1,6 +1,5 @@ @startuml -!include ../C4.puml -' !includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml LAYOUT_WITH_LEGEND From cdb341b0ea477e79905795be6ea631c48eb08381 Mon Sep 17 00:00:00 2001 From: Victor Lupu Date: Sat, 13 Oct 2018 19:24:06 +0300 Subject: [PATCH 08/10] updated readme with C4_Container.puml --- README.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 6a812a2..1360646 100644 --- a/README.md +++ b/README.md @@ -17,25 +17,25 @@ C4-PlantUML includes macros, stereotypes, and other goodies (like VSCode Snippet ## Getting Started -At the top of your C4 PlantUML `.puml` file, you need to include the `C4.puml` file found in the `root` of this repo. +At the top of your C4 PlantUML `.puml` file, you need to include the `C4_Container.puml` file found in the `root` of this repo. -To be independent of any internet connectifity, you can also download `C4.puml` and reference it locally with +To be independent of any internet connectifity, you can also download `C4_Container.puml` and reference it locally with ```c# -!include path/to/C4.puml +!include path/to/C4_Container.puml ``` If you want to use the always up-to-date version in this repo, use the following: ```c# -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml ``` -After you have inlcluded `C4.puml` you can use the defined macro definitions for the C4 elements: `Person`, `Person_Ext`, `System`, `System_Ext`, `Container`, `Component`, `Relationship`. +After you have inlcluded `C4_Container.puml` you can use the defined macro definitions for the C4 elements: `Person`, `Person_Ext`, `System`, `System_Ext`, `Container`, `Component`, `Relationship`. ```csharp @startuml C4_Elements -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml Person(personAlias, "Label", "Optional Description") Person_Ext(personAlias, "Label", "Optional Description") @@ -56,7 +56,7 @@ Take a look a look at the following sample of a C4 Container Diagram: ```csharp @startuml Basic Sample -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml Person(admin, "Administrator") package "Sample System" <> as c1 { @@ -73,7 +73,7 @@ or ```csharp @startuml Basic Sample -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml Person(admin, "Administrator") System_Boundary(c1, "Sample System") { @@ -113,7 +113,7 @@ With the two macros `LAYOUT_TOP_DOWN` and `LAYOUT_LEFT_RIGHT` it is possible to ```csharp @startuml LAYOUT_TOP_DOWN Sample -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml /' Not needed because this is the default '/ LAYOUT_TOP_DOWN @@ -135,7 +135,7 @@ Using `LAYOUT_LEFT_RIGHT` ```csharp @startuml LAYOUT_LEFT_RIGHT Sample -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml LAYOUT_LEFT_RIGHT @@ -162,7 +162,7 @@ This can be enabled with `LAYOUT_WITH_LEGEND`. ```csharp @startuml LAYOUT_WITH_LEGEND Sample -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml LAYOUT_WITH_LEGEND @@ -195,7 +195,7 @@ With `LAYOUT_AS_SKETCH` you can make a difference. ```csharp @startuml LAYOUT_AS_SKETCH Sample -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml LAYOUT_AS_SKETCH From 79fe8601af7352e10e499328de21f73d63a20d48 Mon Sep 17 00:00:00 2001 From: Victor Lupu Date: Sat, 13 Oct 2018 20:04:18 +0300 Subject: [PATCH 09/10] project level snippets --- .../diagram.json => C4.code-snippets} | 58 +++++++++++++++++-- README.md | 8 +-- 2 files changed, 56 insertions(+), 10 deletions(-) rename .vscode/{snippets/diagram.json => C4.code-snippets} (76%) diff --git a/.vscode/snippets/diagram.json b/.vscode/C4.code-snippets similarity index 76% rename from .vscode/snippets/diagram.json rename to .vscode/C4.code-snippets index f71395c..b9f2910 100644 --- a/.vscode/snippets/diagram.json +++ b/.vscode/C4.code-snippets @@ -1,5 +1,6 @@ { "C4_Person": { + "scope": "diagram", "prefix": "Person", "body": [ "Person(${1:alias}, \"${2:label}\")", @@ -8,6 +9,7 @@ "description": "Add Person to C4 diagram" }, "C4_Person_Descr": { + "scope": "diagram", "prefix": "Person with Description", "body": [ "Person(${1:alias}, \"${2:label}\", \"${3:description}\")", @@ -16,7 +18,11 @@ "description": "Add Person with Description to C4 diagram" }, "C4_Person_Ext": { - "prefix": "External Person", + "scope": "diagram", + "prefix": [ + "External Person", + "Person (External)" + ], "body": [ "Person_Ext(${1:alias}, \"${2:label}\")", "$0" @@ -24,7 +30,11 @@ "description": "Add External Person to C4 diagram" }, "C4_Person_Ext_Descr": { - "prefix": "External Person with Description", + "scope": "diagram", + "prefix": [ + "External Person with Description", + "Person (External) with Description" + ], "body": [ "Person_Ext(${1:alias}, \"${2:label}\", \"${3:description}\")", "$0" @@ -32,6 +42,7 @@ "description": "Add External Person with Description to C4 diagram" }, "C4_Container": { + "scope": "diagram", "prefix": "Container", "body": [ "Container(${1:alias}, \"${2:label}\", \"${3:technology}\")", @@ -40,6 +51,7 @@ "description": "Add Container to C4 diagram" }, "C4_Container_Descr": { + "scope": "diagram", "prefix": "Container with Description", "body": [ "Container(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")", @@ -48,7 +60,11 @@ "description": "Add Container with Description to C4 diagram" }, "C4_Container_Boundary": { - "prefix": "Container Boundary", + "scope": "diagram", + "prefix": [ + "Container Boundary", + "Boundary for Container" + ], "body": [ "Container_Boundary(${1:alias}, \"${2:label}\"){", "\t$0", @@ -57,6 +73,7 @@ "description": "Add a Container Boundary to C4 diagram" }, "C4_Component": { + "scope": "diagram", "prefix": "Component", "body": [ "Component(${1:alias}, \"${2:label}\", \"${3:technology}\")", @@ -65,6 +82,7 @@ "description": "Add Component to C4 diagram" }, "C4_Component_Descr": { + "scope": "diagram", "prefix": "Component with Description", "body": [ "Component(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")", @@ -73,6 +91,7 @@ "description": "Add Component with Description to C4 diagram" }, "C4_System": { + "scope": "diagram", "prefix": "System", "body": [ "System(${1:alias}, \"${2:label}\")", @@ -81,6 +100,7 @@ "description": "Add System to C4 diagram" }, "C4_System_Descr": { + "scope": "diagram", "prefix": "System with Description", "body": [ "System(${1:alias}, \"${2:label}\", \"${3:description}\")", @@ -89,7 +109,11 @@ "description": "Add System with Description to C4 diagram" }, "C4_System_Ext": { - "prefix": "External System", + "scope": "diagram", + "prefix": [ + "External System", + "System (External)" + ], "body": [ "System_Ext(${1:alias}, \"${2:label}\")", "$0" @@ -97,7 +121,11 @@ "description": "Add External System to C4 diagram" }, "C4_System_Ext_Descr": { - "prefix": "External System with Description", + "scope": "diagram", + "prefix": [ + "External System with Description", + "System (External) with Description" + ], "body": [ "System_Ext(${1:alias}, \"${2:label}\", \"${3:description}\")", "$0" @@ -105,7 +133,11 @@ "description": "Add External System with Description to C4 diagram" }, "C4_System_Boundary": { - "prefix": "System Boundary", + "scope": "diagram", + "prefix": [ + "System Boundary", + "Boundary for System" + ], "body": [ "System_Boundary(${1:alias}, \"${2:label}\"){", "\t$0", @@ -114,6 +146,7 @@ "description": "Add a System Boundary to C4 diagram" }, "C4_Relationship": { + "scope": "diagram", "prefix": "Relationship", "body": [ "Rel(${1:from_alias}, ${2:to_alias}, \"${3:label}\")", @@ -122,6 +155,7 @@ "description": "Add unidirectional Relationship to C4 diagram" }, "C4_Relationship_Techn": { + "scope": "diagram", "prefix": "Relationship with Technology", "body": [ "Rel(${1:from_alias}, ${2:to_alias}, \"${3:label}\", \"${4:technology}\")", @@ -130,6 +164,7 @@ "description": "Add unidirectional Relationship with Technology to C4 diagram" }, "C4_Layout_Right": { + "scope": "diagram", "prefix": "Layout to Right side", "body": [ "Lay_R(${1:from_alias}, ${2:to_alias})", @@ -138,11 +173,22 @@ "description": "Add hidden layout line to put {to} to the right of {from}" }, "C4_Layout_Left": { + "scope": "diagram", "prefix": "Layout to Left side", "body": [ "Lay_L(${1:from_alias}, ${2:to_alias})", "$0" ], "description": "Add hidden layout line to put {to} to the left of {from}" + }, + "C4_Boundary": { + "scope": "diagram", + "prefix": "Boundary", + "body": [ + "package \"${1:alias}\" <> as ${2:alias} {", + "\t$0", + "}" + ], + "description": "Add a generic boundary to C4 diagram." } } \ No newline at end of file diff --git a/README.md b/README.md index 1360646..882653f 100644 --- a/README.md +++ b/README.md @@ -90,13 +90,13 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") ## Snippets for Visual Studio Code -Because the PlantUML support inside of Visual Studio Code is excellend with the [PlantUML extension](https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml), you can also find VS Code snippets for C4-PlantUML at [.vscode/snippets/diagram.json](.vscode/snippets/diagram.json). +Because the PlantUML support inside of Visual Studio Code is excellent with the [PlantUML extension](https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml), you can also find VS Code snippets for C4-PlantUML at [.vscode/C4.code-snippets](.vscode/C4.code-snippets). + +Project level snippets are now supported in [VSCode 1.28](https://code.visualstudio.com/updates/v1_28#_project-level-snippets). +Just include the `C4.code-snippets` file in the `.vscode` folder of your project. It is possible to save them directly inside VS Code: [Creating your own snippets](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_creating-your-own-snippets). -Or you can use the [Project Snippets extension](https://marketplace.visualstudio.com/items?itemName=rebornix.project-snippets). -Now it is possible to have workspace/project level code snippets. - ![C4-PlantUML Snippets Video](images/vscode_c4plantuml_snippets.gif) ## Layout Options From 732db12aa0b1041df2be1d07033019b632ad5e36 Mon Sep 17 00:00:00 2001 From: Victor Lupu Date: Sun, 4 Nov 2018 15:31:24 +0200 Subject: [PATCH 10/10] C4_Container.puml split across multiple files updated styles to be flat boundary is now a dashed rectangle updated README with new image urls --- .vscode/C4.code-snippets | 14 +- C4.puml | 99 +++++++++++ C4_Component.puml | 45 +++++ C4_Container.puml | 165 ++---------------- C4_Context.puml | 81 +++++++++ README.md | 60 +++---- ...Container Diagram Sample - bigbankplc.puml | 2 + ...ontainer Diagram Sample - message bus.puml | 2 + ...ntainer Diagram Sample - techtribesjs.puml | 6 +- .../C4_Component Diagram Sample.puml | 4 +- .../C4_Container Diagram Sample.puml | 2 + .../C4_Context Diagram Sample.puml | 5 +- samples/C4model.com/README.md | 21 +++ 13 files changed, 317 insertions(+), 189 deletions(-) create mode 100644 C4.puml create mode 100644 C4_Component.puml create mode 100644 C4_Context.puml rename samples/{ => C4model.com}/C4_Component Diagram Sample.puml (92%) rename samples/{ => C4model.com}/C4_Container Diagram Sample.puml (94%) rename samples/{ => C4model.com}/C4_Context Diagram Sample.puml (84%) create mode 100644 samples/C4model.com/README.md diff --git a/.vscode/C4.code-snippets b/.vscode/C4.code-snippets index b9f2910..9488065 100644 --- a/.vscode/C4.code-snippets +++ b/.vscode/C4.code-snippets @@ -185,7 +185,19 @@ "scope": "diagram", "prefix": "Boundary", "body": [ - "package \"${1:alias}\" <> as ${2:alias} {", + "Boundary(${1:alias}, \"${2:label}\"){", + "\t$0", + "}" + ], + "description": "Add a generic boundary to C4 diagram." + }, + "C4_Boundary_Type": { + "scope": "diagram", + "prefix": [ + "Boundary with type" + ] + "body": [ + "Boundary(${1:alias}, \"${2:label}\", \"${3:type}\"){", "\t$0", "}" ], diff --git a/C4.puml b/C4.puml new file mode 100644 index 0000000..461ba03 --- /dev/null +++ b/C4.puml @@ -0,0 +1,99 @@ +' Colors +' ################################## + +!define ELEMENT_FONT_COLOR #FFFFFF + +' Styling +' ################################## + +!define TECHN_FONT_SIZE 12 + +skinparam defaultTextAlignment center + +skinparam wrapWidth 200 +skinparam maxMessageSize 150 + +skinparam rectangle { + StereotypeFontSize 12 + shadowing false +} + +skinparam Arrow { + Color #666666 + FontColor #666666 + FontSize 12 +} + +skinparam rectangle<> { + Shadowing false + StereotypeFontSize 0 + FontSize 12 + FontColor #444444 + BorderColor #444444 + BorderStyle dashed +} + +' Layout +' ################################## + +!definelong LAYOUT_AS_SKETCH +skinparam backgroundColor #EEEBDC +skinparam handwritten true +skinparam defaultFontName "Comic Sans MS" +center footer Warning: Created for discussion, needs to be validated +!enddefinelong + +!define LAYOUT_TOP_DOWN top to bottom direction +!define LAYOUT_LEFT_RIGHT left to right direction + +' Boundaries +' ################################## + +!define Boundary(e_alias, e_label) rectangle "==e_label" <> as e_alias +!define Boundary(e_alias, e_label, e_type) rectangle "==e_label [e_type]" <> as e_alias + +' Relationship +' ################################## + +!define Rel_(e_alias1, e_alias2, e_label, e_direction="") e_alias1 e_direction e_alias2 : "===e_label" +!define Rel_(e_alias1, e_alias2, e_label, e_techn, e_direction="") e_alias1 e_direction e_alias2 : "===e_label\n//[e_techn]//" + +!define Rel(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "-->") +!define Rel(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "-->") + +!define Rel_Back(e_to, e_from, e_label) Rel_(e_to, e_from, e_label, "<--") +!define Rel_Back(e_to, e_from, e_label, e_techn) Rel_(e_to, e_from, e_label, e_techn, "<--") + +!define Rel_Neighbor(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "->") +!define Rel_Neighbor(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "->") + +!define Rel_Back_Neighbor(e_to, e_from, e_label) Rel_(e_to, e_from, e_label, "<-") +!define Rel_Back_Neighbor(e_to, e_from, e_label, e_techn) Rel_(e_to, e_from, e_label, e_techn, "<-") + +!define Rel_D(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "-DOWN->") +!define Rel_D(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "-DOWN->") +!define Rel_Down(e_from,e_to, e_label) Rel_D(e_from,e_to, e_label) +!define Rel_Down(e_from,e_to, e_label, e_techn) Rel_D(e_from,e_to, e_label, e_techn) + +!define Rel_U(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "-UP->") +!define Rel_U(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "-UP->") +!define Rel_Up(e_from,e_to, e_label) Rel_U(e_from,e_to, e_label) +!define Rel_Up(e_from,e_to, e_label, e_techn) Rel_U(e_from,e_to, e_label, e_techn) + +!define Rel_L(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "-LEFT->") +!define Rel_L(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "-LEFT->") +!define Rel_Left(e_from,e_to, e_label) Rel_L(e_from,e_to, e_label) +!define Rel_Left(e_from,e_to, e_label, e_techn) Rel_L(e_from,e_to, e_label, e_techn) + +!define Rel_R(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "-RIGHT->") +!define Rel_R(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "-RIGHT->") +!define Rel_Right(e_from,e_to, e_label) Rel_R(e_from,e_to, e_label) +!define Rel_Right(e_from,e_to, e_label, e_techn) Rel_R(e_from,e_to, e_label, e_techn) + +' Layout Helpers +' ################################## + +!define Lay_D(e_from, e_to) e_from -[hidden]D- e_to +!define Lay_U(e_from, e_to) e_from -[hidden]U- e_to +!define Lay_R(e_from, e_to) e_from -[hidden]R- e_to +!define Lay_L(e_from, e_to) e_from -[hidden]L- e_to \ No newline at end of file diff --git a/C4_Component.puml b/C4_Component.puml new file mode 100644 index 0000000..a85761f --- /dev/null +++ b/C4_Component.puml @@ -0,0 +1,45 @@ +!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 + +' Scope: A single container. +' Primary elements: Components within the container in scope. +' Supporting elements: Containers (within the software system in scope) plus people and software systems directly connected to the components. +' Intended audience: Software architects and developers. + +' Colors +' ################################## + +!define COMPONENT_BG_COLOR #85BBF0 + +' Styling +' ################################## + +skinparam rectangle<> { + StereotypeFontColor ELEMENT_FONT_COLOR + FontColor #000000 + BackgroundColor COMPONENT_BG_COLOR + BorderColor #78A8D8 +} + +' Layout +' ################################## + +!definelong LAYOUT_WITH_LEGEND +hide stereotype +legend right +|= |= Type | +| | person | +| | external person | +| | system | +| | external system | +| | container | +| | component | +endlegend +!enddefinelong + +' Elements +' ################################## + +!define Component(e_alias, e_label, e_techn) rectangle "==e_label\n//[e_techn]//" <> as e_alias +!define Component(e_alias, e_label, e_techn, e_descr) rectangle "==e_label\n//[e_techn]//\n\n e_descr" <> as e_alias diff --git a/C4_Container.puml b/C4_Container.puml index 5f080a3..fce6508 100644 --- a/C4_Container.puml +++ b/C4_Container.puml @@ -1,48 +1,20 @@ +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Context.puml +' uncomment the following line and comment the first to use locally +' !include C4_Context.puml + +' Scope: A single software system. +' Primary elements: Containers within the software system in scope. +' Supporting elements: People and software systems directly connected to the containers. +' Intended audience: Technical people inside and outside of the software development team; including software architects, developers and operations/support staff. + ' Colors ' ################################## -!define PERSON_BG_COLOR #08427B -!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 ' Styling ' ################################## -!define TECHN_FONT_SIZE 12 - -skinparam defaultTextAlignment center - -skinparam wrapWidth 200 -skinparam maxMessageSize 150 - -skinparam rectangle { - StereotypeFontSize 12 -} - -skinparam Arrow { - Color #666666 - FontColor #666666 - FontSize 12 -} - -skinparam rectangle<> { - StereotypeFontColor ELEMENT_FONT_COLOR - FontColor ELEMENT_FONT_COLOR - BackgroundColor PERSON_BG_COLOR - 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 @@ -50,127 +22,28 @@ skinparam rectangle<> { BorderColor #3C7FC0 } -skinparam rectangle<> { - StereotypeFontColor ELEMENT_FONT_COLOR - FontColor ELEMENT_FONT_COLOR - BackgroundColor COMPONENT_BG_COLOR - BorderColor #3C7FC0 -} - -skinparam rectangle<> { - StereotypeFontColor ELEMENT_FONT_COLOR - FontColor ELEMENT_FONT_COLOR - BackgroundColor SYSTEM_BG_COLOR - BorderColor #3C7FC0 -} - -skinparam rectangle<> { - StereotypeFontColor ELEMENT_FONT_COLOR - FontColor ELEMENT_FONT_COLOR - BackgroundColor EXTERNAL_SYSTEM_BG_COLOR - BorderColor #8A8A8A -} - -skinparam package<> { - StereotypeFontSize 0 - FontColor #999999 - BorderColor #cccccc -} - ' Layout ' ################################## -!definelong LAYOUT_AS_SKETCH - skinparam backgroundColor #EEEBDC - skinparam handwritten true - skinparam defaultFontName "Comic Sans MS" - center footer - Warning: Created for discussion, needs to be validated -!enddefinelong - !definelong LAYOUT_WITH_LEGEND - hide stereotype - legend right - |= |= Type | - | | person | - | | external person | - | | system | - | | external system | - | | container | - | | component | - endlegend +hide stereotype +legend right +|= |= Type | +| | person | +| | external person | +| | system | +| | external system | +| | container | +endlegend !enddefinelong -!define LAYOUT_TOP_DOWN top to bottom direction -!define LAYOUT_LEFT_RIGHT left to right direction - ' Elements ' ################################## -!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 -!define Component(e_alias, e_label, e_techn) rectangle "==e_label\n//[e_techn]//" <> as e_alias -!define Component(e_alias, e_label, e_techn, e_descr) rectangle "==e_label\n//[e_techn]//\n\n e_descr" <> as e_alias - -!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 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 -' ################################## - -!define Rel_(e_alias1, e_alias2, e_label, e_direction="") e_alias1 e_direction e_alias2 : "===e_label" -!define Rel_(e_alias1, e_alias2, e_label, e_techn, e_direction="") e_alias1 e_direction e_alias2 : "===e_label\n//[e_techn]//" - -!define Rel(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "-->") -!define Rel(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "-->") - -!define Rel_Back(e_to, e_from, e_label) Rel_(e_to, e_from, e_label, "<--") -!define Rel_Back(e_to, e_from, e_label, e_techn) Rel_(e_to, e_from, e_label, e_techn, "<--") - -!define Rel_Neighbor(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "->") -!define Rel_Neighbor(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "->") - -!define Rel_Back_Neighbor(e_to, e_from, e_label) Rel_(e_to, e_from, e_label, "<-") -!define Rel_Back_Neighbor(e_to, e_from, e_label, e_techn) Rel_(e_to, e_from, e_label, e_techn, "<-") - -!define Rel_D(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "-DOWN->") -!define Rel_D(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "-DOWN->") -!define Rel_Down(e_from,e_to, e_label) Rel_D(e_from,e_to, e_label) -!define Rel_Down(e_from,e_to, e_label, e_techn) Rel_D(e_from,e_to, e_label, e_techn) - -!define Rel_U(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "-UP->") -!define Rel_U(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "-UP->") -!define Rel_Up(e_from,e_to, e_label) Rel_U(e_from,e_to, e_label) -!define Rel_Up(e_from,e_to, e_label, e_techn) Rel_U(e_from,e_to, e_label, e_techn) - -!define Rel_L(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "-LEFT->") -!define Rel_L(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "-LEFT->") -!define Rel_Left(e_from,e_to, e_label) Rel_L(e_from,e_to, e_label) -!define Rel_Left(e_from,e_to, e_label, e_techn) Rel_L(e_from,e_to, e_label, e_techn) - -!define Rel_R(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "-RIGHT->") -!define Rel_R(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "-RIGHT->") -!define Rel_Right(e_from,e_to, e_label) Rel_R(e_from,e_to, e_label) -!define Rel_Right(e_from,e_to, e_label, e_techn) Rel_R(e_from,e_to, e_label, e_techn) - -' Layout Helpers -' ################################## - -!define Lay_D(e_from, e_to) e_from -[hidden]D- e_to -!define Lay_U(e_from, e_to) e_from -[hidden]U- e_to -!define Lay_R(e_from, e_to) e_from -[hidden]R- e_to -!define Lay_L(e_from, e_to) e_from -[hidden]L- e_to \ No newline at end of file +!define Container_Boundary(e_alias, e_label) rectangle "==e_label [Container]" <> as e_alias \ No newline at end of file diff --git a/C4_Context.puml b/C4_Context.puml new file mode 100644 index 0000000..0552d8f --- /dev/null +++ b/C4_Context.puml @@ -0,0 +1,81 @@ +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml +' uncomment the following line and comment the first to use locally +' !include C4.puml + +' Scope: A single software system. +' Primary elements: The software system in scope. +' Supporting elements: People and software systems directly connected to the software system in scope. +' Intended audience: Everybody, both technical and non-technical people, inside and outside of the software development team. + +' Colors +' ################################## + +!define PERSON_BG_COLOR #08427B +!define EXTERNAL_PERSON_BG_COLOR #686868 +!define SYSTEM_BG_COLOR #1168BD +!define EXTERNAL_SYSTEM_BG_COLOR #999999 + +' Styling +' ################################## + +skinparam rectangle<> { + StereotypeFontColor ELEMENT_FONT_COLOR + FontColor ELEMENT_FONT_COLOR + BackgroundColor PERSON_BG_COLOR + 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 + BackgroundColor SYSTEM_BG_COLOR + BorderColor #3C7FC0 +} + +skinparam rectangle<> { + StereotypeFontColor ELEMENT_FONT_COLOR + FontColor ELEMENT_FONT_COLOR + BackgroundColor EXTERNAL_SYSTEM_BG_COLOR + BorderColor #8A8A8A +} + +' Layout +' ################################## + +!definelong LAYOUT_WITH_LEGEND +hide stereotype +legend right +|= |= Type | +| | person | +| | external person | +| | system | +| | external system | +endlegend +!enddefinelong + +' Elements +' ################################## + +!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 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 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) rectangle "==e_label [System]" <> as e_alias \ No newline at end of file diff --git a/README.md b/README.md index 882653f..9655c2a 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # C4-PlantUML -![bigbankplc](http://www.plantuml.com/plantuml/png/bLLHRzis47uNeFzmSn-Q0NAC0dqQWg2kxJLfxKIBvALx4auKRHEbI86ax0R3_lkEicHPgO5kVZ34qzrttzrzHtsm3eshImcZN6npLDygoKPXy8jGJDO5hus4dNEL_MqoCNYutWgtg_FQSiEqSbovQwRBoPDWQ0hz87Z5vMJsVXnBL6wzMavAj8uRCcKpyaUXkBckA5qOXC5o-jVZEitInpYRFpu_XC7RrZ9DikJB8ftTdNoUxzExRBduj7YO-yWmYBcnMbsnsZfTSXF1xFGqca9d1hq1j-FWwuhWGDoXQW9HDZP0ndIjd1tzwa4hPDzmos5qJwKPnHry92UXjf2yK1db26vkSl8lqBpStW9QOE_WRny9z3iLU7NWUOPLHLIUUGxJgfBK7oUq6f7fC-unWgGo7dVrvypRvboAFH5hoD94d63GzXTG5Otvn2dlECNJ8-rXSbiH_2WX3yd7iI-727I94sP4vIAOgcqjqNXpRFHU5Dm2IdavqQPMpBD7ATmBE4tjRRfhOI_GXmW3L3BaHXz869T8bJeNahTDMJM7ZjRiJGHViKJgnv0EI54AnmkmTMw9JZlB_qBF_i3lI00AlXUCNsAOq-ovAeYYy1AAxo_FRQx9pVHn0ye_eURP4F2bx0KwpD5ohuNsqICdVonXS7RQK1w_Vc3uLbXdaE11g8qsPKCrWXqv5u0rYPqPNf2614eRUQrpQq7gBHsuOzUUo3-Uor7TLxn48JFR72ZPOhoYSoTzCgJKVT6KIEkp4inegpSE5j_P3XNfx1ZfKLl0jWqz906gZS6IlrwilZQlmdRIZ0odLfwL24XBwFenHwSrZe0QeYmsJJ-hCWoUk3oxBFe5NLjkVVQxD8qJxpfqF2xJJvm6ucvykvJPKtyN7A6wJUzPDVQX-hfyQ5yKY-1pylWmEUK-Hftd_B_1sNAezZFnFN4iB6oCBfjxvs1e0UbMqXwmnPj_dBKjeEe6E3-CkwFY8oSjdw_qKJZlOxOUWhmIOK8lBF2njthX4txF9LcbST-IOMG_dbSOL4mJOZXpw2z9e19T69o7mtWTZs_R5_uVnil5xocPEjWmsD7AjnvXy85Iq5VjNm00 "bigbankplc") +![bigbankplc](http://www.plantuml.com/plantuml/png/xLfjSnev4lxEh-Wb7n9NuRMTbyINSwZbPHnx5smEy2LxIOeICm9K6QGfITZXBllVhoLc18CyDGVEkkggTbn51gdxwQTRhTOB-KLf8lLY7bUUGal4GYfyULBwL2e_HNJ2E8MW4tI3g-7e_1e_MjUTwpuyERTF1P46UXapFjqHSnYqBgvMY8FBVmLmyhnIKLyPJuWaSq0XieZra7xJZPXD-Pno3I5-KBafTYT9ye55UWRFZuytskVaMvSgHQPqmFvDuUJLyQQMfA4cV1fJ-4y5y1aWAXLwcT1pmVLAuxdjKJCIYJjq3YOaLhJonoPCGqfnbqBOiCAJr_QnBGRARzqqyCUzdCxEncB18oANzNh6By-YYFEnPs6BnqlxsDQca16LHUrcH2b4HCreP6W-XGvPYeNUROXZWOmxZT-lRuQZnc0q-2qOjYusN1wJyEjK6cTJ7a4GDDkj3OaPuT6TP5fJ3bekg9yWnhihCgTGROav2s50k8Bke5fPvGfCX33_d4s4oHzZvfsaKVq3aHpZ-VRio7JKeIKfqJH2SGaHK-52AIPu3JYbaG8jO4pXbiGiCbALdoYFrYuwVpDVXzUzKVlwmnNg9LPNQ2sGCJDZZB3RyftWV3ZgNxw_649C9zgeI3QTwGqD37npbHMCxZfvKyNbCpf23uYg0Ht5P4pZWus9K7ttBcsjGYu3YO9KhnpGl9YCl1yOFgrwlnHRGC_wD2R6PJLZoOwEekeeutHIoq2Vv-YvaBwhLWyW4zxiS7hmrf1tOTd9ZARXZ3_8tcT-T7IcS1w_tIgKzKyf_9Up8zDVFpggvcA0t2PIp6ie9jPZdT7sksfGFJoiLmzACPnZFfWlur1pSMlYb7-MAHXjdw3VPnYU7HuQXkLGFiyI8GUUGx-YE0F7GkuJJFIw36l_eDuVKsTZp-0YPXdamuEyJRozJt1DOVKYt7vuQ8knnHql85fikXp2PrZkHZvyD_k4xwRdENZpyE0L8IV558lebmDut6vs2bjddx2P9Tfph_Fmm1LZquak85fikWIYW65df_3rzmcVsTpuFlP_GFoAmR5u5KUmq8zo39zakIVh7JHSq3YXEn_0KDbL1mih3j9Q2uUVPYoAAF_IFhGTEPsR4fsRUtJw9JhzUtGw9JgTLCSU5qEHqBVG0CNi3b69YRuZ4b-MIjFvpoZIasnEv19eJCt1Jxs5uSmJ1CP16IoZCLWaYP0Q4JUKUbGaQ83mQ5jNfNlhU0cXu1pVQ0HQW2unSyarvH7AaaN4A0_HZ-2MokLOHCkQsUZFm8uu2qbixNB13zSjYILKGqZ5eXKnp0dxBYPvun6zfR58Z2S8IJ0i-nxUUq5_S7qrQhxFJkx7fo-Vlscw_k3ZCEXVDJeZJ_3rgVbpWeFV1yEWkz5_SlBwjDdsWJp1lzbdrxk2WkEncJw2r-l-uTsTTFtx2YjQAj3CdqYtG-UVd8_Vl6Y-FYyyoTDlI8wJUFI8dDqeb98_RPY_GlAhz7yKpYvXYgY-QBqvRnsNn_aHEVlPNXxdXz-ZVBWSNemwmVlWgbsPcRgXd8kLc4ufZrPt1vNlxo3tuFSX2i7tolUphSoefnAmob8huhmhair2lgcq5Ocw4KohQ1xK2HQ1EYLqoBhbNxeyXI0jzBlMGqjuXzkGbOVvcueICFCIKHNA-r4_yyyyaoYmiCrt57pJEt3sAuzFtaVUou5IS-i5n8xg3bueg-2Jzy7s9UvRyFZk6_boyW-DVAcv_QyD7SKTRm_Xqqgl-99l_prWIt1Da9fKSCVqZ77GZxSh39tnWdtWS6kNjyycx--e5CO8YOIT497XZ6aaesgP0hAmkEPjTLjwf5QkWj9aCjb_izZ2HQznUHNqDtPlBr-SjjklVj3kpSNnKHPfvqxvtkAlvNdtvHcLl0Ydk6wS_vn5tDK2LvVyKxTVe7QzLuTylgwBs2uy_8A-Dw5yyVV9xL_sVOTsh_nETSVYxxmeAllpH71ypvLzfrHIyFFhnhFoXOCUG18l52JxBHEERC4oCV3BkhMnhkmFATxTtlMLAOlhudtwgjayF_v1nTjvzx3Y_UJOFWKLs_bGMB7Vu7cgVVfNnVu_gzXfxlpv5Jirv5TidyTZL-m2SfMj_pfGUUhzlubxyhLIIO-VuK9fCQUo1YttLcr0rfpjEyU4VwtP8fec6Obj6v0m50kkbVc5RdlV7vuWbYbaabCDJHJ78b8zmFbl9-Pw0RoZun594fJ-GCVGI9AOXNPpMiMcNyajgS4WaQWCtN-sJ5kRnkmMULXkIgDiQ9EGScrAecrsXWrFepleDGpBl6cL4CGRsENai4Ucr9ZFp0v2oH9TWmQVBc8YJNDFYbiMKGKaZkytCrdmq70dCTDBq09ZQKEfu9OHey8aeCCmbk9EKUbJceinYsaQaAxvuaYrdjJW8vaJZ4MU3CHipinYeXPZXMJ4v7ycfpnsAm9cNM4XzVcDiUvI7Y51PdAbTtd_YBK5YicrNevm2J731O5zsn7HP4mKDJcGlXhSmJywaFkkXKGh2uK499qofIL1S61y8kJS4gt1Z2YxlkePX996b6j6ObKpAKsLWbXCyGlLuSz80nUCpOFtdB3is8pMWiCkVeULW34_d54qbTRFBWkbCFi02Bw5Cwm8sMO0OJSmqq2iKH6JJoIPqspcE0FEFnB7sKY7sE22kU4c4DnDwVKmrzoChG46XIjYmxxsjDAdyKPLM4_D6qMLiNqn7FO6A9YNKmafbN69xU1MvaPzLm4ipdf-PtniQoxld2cYbZoimQ-uCXvPivdEsjgkggDEFiStagvFIQJ0_49bwyoTP9egqCB0fMZjPWjnh5jv66-43OzCyIWbyx7RSLmCnaqUOolp1jYXW1wQLfFk2BzcCkWEUramSdek6pm4BOp2UkL2vtHbKnViZ_MhTlC1wM_G3jBiX5AzoY-8lPZ7_mK0 "bigbankplc") C4-PlantUML combines the benefits of [PlantUML](http://en.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. @@ -17,38 +17,37 @@ C4-PlantUML includes macros, stereotypes, and other goodies (like VSCode Snippet ## Getting Started -At the top of your C4 PlantUML `.puml` file, you need to include the `C4_Container.puml` file found in the `root` of this repo. +At the top of your C4 PlantUML `.puml` file, you need to include the `C4_Context.puml`, `C4_Container.puml` or `C4_Component.puml` file found in the `root` of this repo. -To be independent of any internet connectifity, you can also download `C4_Container.puml` and reference it locally with +To be independent of any internet connectifity, you can also download the files found in the `root` and reference it locally with ```c# !include path/to/C4_Container.puml ``` +Just remember to change the `!include` statements inside the top of the files. + If you want to use the always up-to-date version in this repo, use the following: ```c# !includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml ``` -After you have inlcluded `C4_Container.puml` you can use the defined macro definitions for the C4 elements: `Person`, `Person_Ext`, `System`, `System_Ext`, `Container`, `Component`, `Relationship`. +After you have inlcluded `C4_Container.puml` you can use the defined macro definitions for the C4 elements: `Person`, `Person_Ext`, `System`, `System_Ext`, `Container`, `Component`, `Relationship`, `Boundary`, `System_Boundary`, `Container_Boundary`. ```csharp @startuml C4_Elements !includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml Person(personAlias, "Label", "Optional Description") -Person_Ext(personAlias, "Label", "Optional Description") -System(systemAlias, "Label", "Optional Description") -System_Ext(systemAlias, "Label", "Optional Description") Container(containerAlias, "Label", "Technology", "Optional Description") -Component(containerAlias, "Label", "Technology", "Optional Description") +System(systemAlias, "Label", "Optional Description") Rel(personAlias, containerAlias, "Label", "Optional Technology") @enduml ``` -![C4_Elements](http://www.plantuml.com/plantuml/png/ZL31IWCn4Bq7yW_hdbQecqjFdYhRtgejLSybpGxTm6GICXDA_zwmO554yVJU36_UUyoAnMOf0PjXUTmW121XhUuyEImZb8pD99BuqPXiB_tPorHEXI6xI5ArlOl17BopUOml7XAW6POFUxGaxyzR4omBvBew3bLlFK7kKqtJIgizP8xKfHcUq5jUDEtMdW3RIdP9V2IBpHhOPJzFxRrMDv_EVR8Vjs_W9eeOpzU_d5wljLleU8P_vsjr0FnU-lSYDvClZQh72cYiJ_W0 "C4_Elements") +![C4_Elements](http://www.plantuml.com/plantuml/png/xLXhKziu5FtkNw663oqpOGcq1PODcUPX2hCXOV8Ojaix6H4hYQUEv96KGdQx_tqbsH5EX5Phf_2fOWQCTU-vvrx9HuyFZ4FA5_F8UmsQ92AKYOSTP_EyLm6QX1W1l-rV-Pt1wBmhVZMxxMuFx9ohvWcaFbz68Pxcn1pupOjEWjY__DC71uUUnxw6E8OKpe4mWek83z03hqVX5CyHvc0iVY6QDRkdCBu90pu3XvLAvlqSFbmXnk0KzSE_43XuNybwKJJc44yZ1FxsW6XzWOe8NyRed62UU1og7ZQ30RaNoO49Z1Zo_id2r2abzoc4AYlOEL9DlP5Gvjji00bcSgfMxyW21v0kQxKLlmqM5iuL8y86ZtUggRSDGWD4RU_bY28GG3P3WQJv6hJXaYnulY6EY63Shd_g3WUZUd_K_zqVD2yoAT_1yTSfbSccF7pVRxIQ6OiPnC4z3Jb7672wGEO4aTbru1o1KfFCmp7eGyp0LR_a9NC5J0YHVweJ8kUF37D6KL2xWHIBUfvMzsL73JGfWXm5mfo286JZ1MCXmMM04GeOu0JS8V0DHc4WhRnN20UFAUfyLxaEkjUZLlUc8_nYvKiu9u9nACTOm6xQj_tpmQXt-V5Y028quTA5XjCPptY8mZUIMH6Yl1zlwhXyWqOY0yZA08qYU8UYtSo7K3exIz-MmDeCX0oaVcv0-I1dvDF0u3Rf_MAF83BheGZAbDaiZ7CcAbn7Aqu7vHNeuHezNTApKcaNh8op7TeFd4hokYovmd0qdk6judt6-_jL9hxZqmsXhDscy5-g-xA_jhzVMgk1u3QXP5uMPYGprYbjiwiCIdjxjTAk4qCdPeAPDXfrhMuDySc_IHsKjqdGx9CCgtjxag4RokJfCDBWQ-WT9Bx0EqAB55DaxSOgMjIdQwfZ52okm7H3RblaJUAj8iMLmcfKkBLzQUtOv1xRYLf2Eo5CXkuqDietB5A-uRMHu73xujcGOnj5EtqdWCbjcAjixI9baqkqaLvx-yBPiT64subQGbiW70pRkShNAr8-kRanS-pzWFhPmOLuMIjepyEDOP9qP_AuWmONA8fHxWEOSDRge639RggrOEzs5WO1mbzQUwfZpMVey1a-uTDp-FIUy6axVDgfZpekZacCJa4Ti53j41cPy7j8nSEISJJ_HPXSqt0EwHAW2Cc37pi5WvbX248CcCII7lr571FA1MB6wHgHM0I0EDZqPUdUEbg2CS5OFA40S0Au8ymbvWW7mXOkWX3XiSZ3_uReyeu4oxBSwC-06l5m32CL5nEyz_WcLeJA0fA5GK9Cp0drJ2RhmGFq3KKabfa8I2ZAKlJmVktt-jtEgF5nTNAldBmxF6xeVl-FWT_hrDiZm_3eHFvem_wd_i2_olGV71oTD5eca67ugsfvxmeinsFv-H1Sgvc7TttIDUyhbAdJeB5n8jseY7bohXo_RHoTMq_ow46Gmp0QlI1dFGfEyYTr-MCbdqp_b-2iPvQLwjlcyNcpugxp2t8sPxkxpjlVeznS3Yv6RV-ZtsbvCwaRJAVeHMYAS93S7NZVpy1Q4_yFX17uxdslRioCMce1abcgJ7HsDjjLoRDE6vMeISDKHTT1jQ4DL3k9X5HQvgNBQ-2dGfzN3nNX7BSXIORhDnKECFaG83QcJwD-nf_noi8IOPFlo7_WEJWRocEGDv2B9k0Cf-FrrQZco88f1vEy2LQKk1d1u5kqycxosrRU6QxujQ6ccFFs4DmcVlPBlk9xm2R170fgb87xaCz23FZBxGh7EhXb7pZOsEKLsUJz9fp6aO0KXBKHfEDPo0KPLbuv21OALpubjwNxB4aLC0uda-ARnQPOzEgN7R-NsRszUtlIQht_GRitNSSNMQHrEkwzHVxb-UVoB9oC2gUuUfoVPn7NMc3gfpvrcmALzruTPEThLiJoy305lJ2X3V4to1MNVJEX_CglNNEAlyx29llpc63vd9LzxUGM_CowySQzSA1T44SB1k9YouGcQrac-gQionWPPTz6lA-kknqXYndnFddVQ9nNVf1uw-os4--TYceMnTOvM1NxM9odMYVFfjW_5LjO6UEWhT8fy5owdi8_jwxhF0nTDtYyiAxRoScM7ZYJIL9Fc9NQwl0X7hen3uaSxvQ42jL_ucBySPNIWsouglqhYSXq-Hz0wQ4hcKt_DxhNGz4wOOE52V58Ho1yG3XOpAD_0G00 "C4_Elements") In addition to this, it is also possible to define a system or component boundary. @@ -58,23 +57,6 @@ Take a look a look at the following sample of a C4 Container Diagram: @startuml Basic Sample !includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml -Person(admin, "Administrator") -package "Sample System" <> as c1 { - Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") -} -System(twitter, "Twitter") - -Rel(admin, web_app, "Uses", "HTTPS") -Rel(web_app, twitter, "Gets tweets from", "HTTPS") -@enduml -``` - -or - -```csharp -@startuml Basic Sample -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml - Person(admin, "Administrator") System_Boundary(c1, "Sample System") { Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") @@ -86,7 +68,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") @enduml ``` -![Basic Sample](http://www.plantuml.com/plantuml/png/LL1DIyD04Bq7yX_6UAbG4ogUf9J687gmfJIf7iis6Tl5_M9tGYZYVtUMQejx6PZtvdtiF93mr6i5ZoB85cgXdS8qkPAcLNs7lLTm87BXeIYy6FAzf4E_wmFwrXf2GtbhTR6MhV2TNKfqg8hg_dQbXA7DuhNG8X1wNcqhvWjfqEUExT8aJLReWpKZqMbfnf2LSSf0Nf3rsKsQED5-YZr2TWe5zP6rT0RJwSxsfXF-E9k12D1Eu2jDWD_POpJWRYkSOzbtt47fdEA89At9U5LTZw6iL_dogU4JZt2NJs3nLaMiLCeE0MB306I1wpd15DqhaZ55CqZYIa1IesAl4AD-fyaftOXEC2lz4YES9cjKVqKlqJQ1htc-DCsgZhp8EiCNfMSapZ9W71_UwdytSpGTV-WF "Basic Sample") +![Basic Sample](http://www.plantuml.com/plantuml/png/xLXhRziw4ltkNy7hV6W3E8sJFfhDEaRzK1vOnmaiPRDtsy9Wf74iN9aKIBgkTzl_laD9PcGpMa7sRJvT1aWKSURCcI5r-FWa5HLgFejghqYFHrn8VDWhRRNQRm5CGWR46JZNpj0Rdz_WhzxDu6P4ziwJLaCaLosZa3rMnFIStkKmHNIl_ksGe-DQJVuHifWAEYDeHEUHyk2xwaJX8vi1KyJ7No3oPWj1u_imK5Dot6pcti_ezskGaZw26_u7oD7xPjvBWAyeUuo0_BT6iBc82bmjOpZdJAKUnqcFdDA0Bp0vCg6HXDhFF4n72Bx889AoahqFIKlUQ2ZxRJx0psSvjLeFVCu2AfRjzehV1ei2paqhmWQFTqbBtdQv240KlTSZ2YIWSWg1flcA3EYIprMr8OuuCXvqVh-vyyOTT-p-m_5wbxcK7wZ_nwFGoMOy7CVfzdivYobbmKA4IW4ZIip1dY0wko6T0Qdt-2pqYKkP9DTklPRE5JBXNFzfJT2E-3hCcO2WVKy5mtgUjWvrHvlq15050PeB4eJIdqiPSjOW322GH77o0EGRZS90MzL-0nOyfMZoNUNgtToE-pVtG_IB4r-k59yXhXvZXDsq7pZdtdXqTN7faGWcIhk8y76gSXvO-6uwAqAe-l5cZilNCCOCg6mG64Vq0QBzt8TGFplBtjR9sWoaacH-vO3wGS_8vu79vxJtQt44p6m44TKfosaOLqmKNSShJaUD5UZn6ZrJqhDwVP-iZFCTne-SQlAcB9N2AF2dRATuNzZXOKlYTtow8PJjpndyrzQXxcyV7jRNQe3S9eBF6cZ6SsETqRQx6gH-SD2kxvTYcCHiCDl6eAxLhOkV_EkLW_Qs2Tfzcc7hu40pB8UoUPOO6V0rz27W5_Z0nJR5nAoBi7OlwlCrDJ6sB2vYba7kNkHDulrjYgk5rQfmV_VI5cFp1IiWMXow7C9cM9h6HldkjYdVtQsLuDtknIj2Zeie5jCl1R2vtLKgss2Rikabsafli7lXYh5XeWg85eSkW2XXEAXKlj4svTER6pl7qUxr-p_WA5w55IpEenp39bcUoTCEcbn254Fb0nWw6tL8OFb-fhNauFCq309WN_i7ISUQprs9pzqpFgCIdz4pFeCIdq7canmNVHx3AUaG6IOxHCadQa45FYobWjaRDBaLuOoA9O48zC5FdX9lQXcIa16fiRI7EuzZBXGYvfnkWSSOWB9WqrTcU-jeINpE63v1G1GdgYJC5LF00hIbyo04vcCUpZSGomSUB1jwepyboOY7FesIk8opWwStSKAeWP0o359YVAwIPpvP3nx0DuXuh3D1I8fbsVRmVkkCt9lXk7knEhatJzuTV-oQVkTVdZCQTWPZo_33YVunXkxlhkTSv_gFZZwSTFisa6NujwHLlIieE1xhpuUpTji-l9kJhdrVaPYM6dGtJgGR5R5FpisFRxiVpWjFyl0ToJ4QZL-Ginc5Kl8d7VrJI3wT_Y_2sKoO8gflUn_FUytoEhyWPtksbzTvztkK-ollSZnmBfnXlpRLkY5DYhK87e45wTr1xSSPMMluluT6v4VjHsjZPhGp2vBEqiJ4P5TakofvtccZ4crjcAdeEgWnB08rJfXGafPzwVAAE9dGLzN3X725sv0qmxMRYZ8m_H20zCNpg5_O5xQoA8YmoNViV5SLEEUKnuQsaNTBe2ISYUScereX2_Cvs-GDs6x4hGWstsqhNqv-vygNXDlXsj1Gh7XxI3wdViMNVDll0NkSAOhKX2IBK4r3HjJBxGfz4xnW7-XjxFAssUJz7Pty226Hi36Ymf-62id8nie1MQIu-9JUbXxAD5KY5PrCjjyizd3HwrmDdL5kz_RkxKc___vFshsPEhx88ctIATzR_BKyLr-UqScgS8PhnldNBE962spzDATkMw2gtgkJ_7pDYrWL7aRGToUq8VuskTrbtoHKNVcDQqNnDraKoVuivam_vsNVE9KBVcxTU5s-SC0-YQEv9F5souGXMx1CkBQiwnWvPTz5lAzlRuOeYpdnFddVxPut_oJnDjdj9jvxpQGLABR9eL2nF-9vgd_oonJxByL6ApCEbbKs1NwLhcVmlrhNJHv5kfvrlxok5vF3bfqtQJ0BaK2ze_-6KWcgkC0RyCrDkt-4HYwTQILB--hxwPURMxaMy32cSOoMz_10Ed4SXNwogwpZgzvUWtJSspT3nqCN0UJupH6v_cTFztMYY2yacKiafGLGqwPeCfj7AjGXFPHR1OAeS0OHnf98yMT6yhLAEn4dCyFEsWYYLN9FjEuaI1tlqlDkNRJIHgRt2UO2bCH_GV_Hryzvbq_0Wlai-Xy0 "Basic Sample") ## Snippets for Visual Studio Code @@ -119,7 +101,7 @@ With the two macros `LAYOUT_TOP_DOWN` and `LAYOUT_LEFT_RIGHT` it is possible to LAYOUT_TOP_DOWN Person(admin, "Administrator") -package "Sample System" <> as c1 { +System_Boundary(c1, 'Sample') { Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") } System(twitter, "Twitter") @@ -129,7 +111,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") @enduml ``` -![LAYOUT_TOP_DOWN Sample](http://www.plantuml.com/plantuml/png/NL5TQzj047mNw3zib8Swa4gaz2cO4E66zY6nHImtzCcifBLzvBwuMo5Cw7_l7cuIakDWuMPsTcRlDZ867es6-_hFQjDksrMp_R5wMi8QZTUKPsVAzdeSQ0mQ3im-NbTLmAdSApwCtHWfzCuoMIvxPwf7rMCOt5AH9rqjldzjD5hUFDnN1YDJaAVjGlYeB8NIo-0yoxCli7GCbcYW0JhgKMI13og2N3uG3BJ3KNEUVNAPcXiAqTaP3aRPIoZgL5NaWEn2SP5d7ljdt1CKfqImFeeHKy1ythdH3XYEDpU04VehUCapaFDcS3PHjqNlHVQ9EgYzrvAFbRE5F2tEBw5UD-NohfMMGF2jl8A7tuk4rLgxAK9QZoHm8BlnA1GZALHoqKwAPH_0of2MMJ5P_Pjd9tSpFi6Yz9-Ou3nx9FqQzDtQ9agtr5zjswmJBx7Uu7UbdyJYPQ9KTi6P3pstP0VvZNy0 "LAYOUT_TOP_DOWN Sample") +![LAYOUT_TOP_DOWN Sample](http://www.plantuml.com/plantuml/png/xLXhRziw4ltkNy7hV6W3E8sJFfhDEaRzK1vOnmaiPRDtsy9Wf74iN9aKIBgkTzl_laD9PcGpMa7sRJvT1aWKSURCcI5r-FWa5HLgFejghqYFHrn8VDWhRRNQRm5CGWR46JZNpj0Rdz_WhzxDu6P4ziwJLaCaLosZa3rMnFIStkKmHNIl_ksGe-DQJVuHifWAEYDeHEUHyk2xwaJX8vi1KyJ7No3oPWj1u_imK5Dot6pcti_ezskGaZw26_u7oD7xPjvBWAyeUuo0_BT6iBc82bmjOpZdJAKUnqcFdDA0Bp0vCg6HXDhFF4n72Bx889AoahqFIKlUQ2ZxRJx0psSvjLeFVCu2AfRjzehV1ei2paqhmWQFTqbBtdQv240KlTSZ2YIWSWg1flcA3EYIprMr8OuuCXvqVh-vyyOTT-p-m_5wbxcK7wZ_nwFGoMOy7CVfzdivYobbmKA4IW4ZIip1dY0wko6T0Qdt-2pqYKkP9DTklPRE5JBXNFzfJT2E-3hCcO2WVKy5mtgUjWvrHvlq15050PeB4eJIdqiPSjOW322GH77o0EGRZS90MzL-0nOyfMZoNUNgtToE-pVtG_IB4r-k59yXhXvZXDsq7pZdtdXqTN7faGWcIhk8y76gSXvO-6uwAqAe-l5cZilNCCOCg6mG64Vq0QBzt8TGFplBtjR9sWoaacH-vO3wGS_8vu79vxJtQt44p6m44TKfosaOLqmKNSShJaUD5UZn6ZrJqhDwVP-iZFCTne-SQlAcB9N2AF2dRATuNzZXOKlYTtow8PJjpndyrzQXxcyV7jRNQe3S9eBF6cZ6SsETqRQx6gH-SD2kxvTYcCHiCDl6eAxLhOkV_EkLW_Qs2Tfzcc7hu40pB8UoUPOO6V0rz27W5_Z0nJR5nAoBi7OlwlCrDJ6sB2vYba7kNkHDulrjYgk5rQfmV_VI5cFp1IiWMXow7C9cM9h6HldkjYdVtQsLuDtknIj2Zeie5jCl1R2vtLKgss2Rikabsafli7lXYh5XeWg85eSkW2XXEAXKlj4svTER6pl7qUxr-p_WA5w55IpEenp39bcUoTCEcbn254Fb0nWw6tL8OFb-fhNauFCq309WN_i7ISUQprs9pzqpFgCIdz4pFeCIdq7canmNVHx3AUaG6IOxHCadQa45FYobWjaRDBaLuOoA9O48zC5FdX9lQXcIa16fiRI7EuzZBXGYvfnkWSSOWB9WqrTcU-jeINpE63v1G1GdgYJC5LF00hIbyo04vcCUpZSGomSUB1jwepyboOY7FesIk8opWwStSKAeWP0o359YVAwIPpvP3nx0DuXuh3D1I8fbsVRmVkkCt9lXk7knEhatJzuTV-oQVkTVdZCQTWPZo_33YVunXkxlhkTSv_gFZZwSTFisa6NujwHLlIieE1xhpuUpTji-l9kJhdrVaPYM6dGtJgGR5R5FpisFRxiVpWjFyl0ToJ4QZL-Ginc5Kl8d7VrJI3wT_Y_2sKoO8gflUn_FUytoEhyWPtksbzTvztkK-ollSZnmBfnXlpRLkY5DYhK87e45wTr1xSSPMMluluT6v4VjHsjZPhGp2vBEqiJ4P5TakofvtccZ4crjcAdeEgWnB08rJfXGafPzwVAAE9dGLzN3X725sv0qmxMRYZ8m_H20zCNpg5_O5xQoA8YmoNViV5SLEEUKnuQsaNTBe2ISYUScereX2_Cvs-GDs6x4hGWstsqhNqv-vygNXDlXsj1Gh7XxI3wdViMNVDll0NkSAOhKX2IBK4r3HjJBxGfz4xnW7-XjxFAssUJz7Pty226Hi36Ymf-62id8nie1MQIu-9JUbXxAD5KY5PrCjjyizd3HwrmDdL5kz_RkxKc___vFshsPEhx88ctIATzR_BKyLr-UqScgS8PhnldNBE962spzDATkMw2gtgkJ_7pDYrWL7aRGToUq8VuskTrbtoHKNVcDQqNnDraKoVuivam_vsNVE9KBVcxTU5s-SC0-YQEv9F5souGXMx1CkBQiwnWvPTz5lAzlRuOeYpdnFddVxPut_oJnDjdj9jvxpQGLABR9eL2nF-9vgd_oonJxByL6ApCEbbKs1NwLhcVmlrhNJHv5kfvrlxok5vF3bfqtQJ0BaK2ze_-6KWcgkC0RyCrDkt-4HYwTQILB--hxwPURMxaMy32cSOoMz_10Ed4SXNwogwpZgzvUWtJSspT3nqCN0UJupH6v_cTFztMYY2yacKiafGLGqwPeCfj7AjGXFPHR1OAeS0OHnf98yMT6yhLAEn4dCyFEsWYYLN9FjEuaI1tlqlDkNRJIHgRt2UO2bCH_GV_Hryzvbq_0Wlai-Xy0 "LAYOUT_TOP_DOWN Sample") Using `LAYOUT_LEFT_RIGHT` @@ -140,7 +122,7 @@ Using `LAYOUT_LEFT_RIGHT` LAYOUT_LEFT_RIGHT Person(admin, "Administrator") -package "Sample System" <> as c1 { +System_Boundary(c1, 'Sample') { Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") } System(twitter, "Twitter") @@ -150,7 +132,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") @enduml ``` -![LAYOUT_LEFT_RIGHT Sample](http://www.plantuml.com/plantuml/png/PL1TIyD047mFv3-iyQL2JQZu94KCeNv0rTAcYa_bagnwU5_SRGX5_E_kKMqHxsLWPtPdvgu22K-zLZ0lNnxNzMO-kwutoxkRsnfMGZk5QN8aJQlw3dklu9t8XOkYy6B8toIzzqqVqBVM41hAMwkBfMo5x-o3H8UggCvF5qeOMj_F2oq2eUVHfcAza0PzxjWwJTBadtiSBj07QqQYqzAC8IiZoa1UaFNPIPeuqNw8DuHibnHMMpRG6KodZUrD9_psyX94W7O2dsa2_FR6em6RZN2EppvZ0wLpYdEJj2RZKNKyXdAro1zcDQzuXBDy0lTFLUHAfUmG8DOEG1QuinCiqRqY6LFKWoJk2IGrAlOACUfNckpIZMX7ywKVOQJJP8dgj-WXsZhmDkDjNIzMKHTLU_fmwGQ9immOuTLR_MVd2at7l_mD "LAYOUT_LEFT_RIGHT Sample") +![LAYOUT_LEFT_RIGHT Sample](http://www.plantuml.com/plantuml/png/xLfjRziu4lwkNy5rFgG1dCP9NvhD9SRwHMc2Svp0KYwtrnO6ROrZOMLI8Ecwlcl_-mrbcP7D28BaDfzM1c9Pd7dccI7ry0NvGoegr7mMEVkamoCk9Dxi5LwEyri0av01SNlkZTltXvUt-ATpsxiTaBtBv78GoLFBA6IF9J5zjtFLNo5wr_znoV69uyY_GXPJGMS4ZUWyKZvyKwqeV6GpO8gCyG-8hDb2qFWX3DIKd3GQcUSp-kq6fAIFu8N_1NByhf7r4Z1Mb3r6GFxd4BmyH0MkbZ5SSgPM7YT9YvpIW2ymEJAXaGJdHnQc9GHVf119MSdU--HAdcWe-sasm8zdEPsVZ_YS1LGicyqrloqMEPmRLeGj7c-JAtdQvY80aVTSzoYGWCef19hcFkdH9P-hSbqSSMJSQ_rvU-yFMzxG-wVhTwuoAO_e-Az7ePDDURYks-vsCXPJoeA529K2HfIOWpr0T7PzEWDIw_1PE2OUPPBSU3LdDLR8X7FzTJxXUlpeC1S2WkO35GphUNP-f1kQf2E0AWZGN90WbEEvb25dTS800aaK9oCWNsaK1jhA-GrOy9IYoNUTgtzxD-pUFlJHBqvykL8S6OUwZn5ssxxdNlh3mVN7Avz4C57QHOIFKvNnmCAtLwCYXB8lR-guV0L3p83AEe5XH4SG7MHUXDh5HVgqHZP689KazIi6r3TwH3uFJ3wjMh_aHy3C1X1HdRASXd79HD5rkEPqN5-3dcpGCoMzgDKEoDeuss3yo9acRyfIAeo2yPJj5EypEpewb_WUdsq9PVDJ2l_b_4YtDu-EQXirG6uJmMTrDEEPlavfsqrrKZiyRDOE2Z5COZQORMDGD-hMnbV-LUgGUDi4xJRDyFpmK3CiXh9v5XWPy0tqFk0REEAYIZ4nwsAioaLzjgOcHiNY8cOnvAv5tYRUhL9SBQnMXRkxbpOVcozOFj6Sq3P48SFYDBRATr-bVFTtLeBtknSl3pdEevXFtmOev7PVgcozAcNJKxILNc_tmkLZmqJb4yq9NG2Hmx1Ngdo3AkNJYnixny7FgLyEE8fNVWLpyx0nYaaMP_AqWYPN4CLGUWE6paOT4bX-a6ejEVmq3OC0s9VkOTAmuNDVu7F_ZC-Wm6VmZ4-lmAUN-YJRnJ6FuOoqY0oJ5QBa4xMW0c-MKi7iDPhSYN16nP9017hZ9y-8FxKCISY8r5ZQmvl7CHSA4JDETy1Z341PiEqhqxLrj2HZpXZUGK0K9weWp3LJm0AqfVCW13R6FDol89OZ7YphUg4_9KcFXsCQ9N4PPuTFJ-A4K1qXPHYiYF6vIkxvP3Du05yXuh7E124fbgNgvltE7NYt_M7xuthdtZXzU_AXRThTV_lkeD_g3It3zwVwOmozFptVlScq7n-_FsrtRI3ByFVaAdjMaBCzrgyFPysclNatErtxl28nBJHeR-r8jofYxvmR7zwqtr_cxkJX6v9ZD1g-86VJ2uNaJrlwaqj-DVnVXBCPC7bKttG-N7OQnNL-GSxsQ2-ky-xdA0_N_jMmvtvq-rrdgdL3cXIT21w11Qkp0-Vx1TcuyBUFHkIxy_ryQsGqKmko6gM9YSakptPTygpJLYMQsZ1LqKrGOvW7QfmmeIGj-z1bdxYfq9VLmuHmYTEGLOQR9nK5OFec03aMpwD-Pf_PsY8dmZRVeVjDbU1iAuzDtaQkb41XE1FFItgrH1OoSR39ss1LYTiHBBvLArzCVjVA5uQhVcneA9OyFIIVLdxvXtpLru0TpXH5QaAIHQYc8IFgvLQ5OnCyPnteRwtogYpo_e5EumWXaR0nec8y3HMIaVMr0x98SFNTwhJqIAvI9LBHoQJwOh63arxhkkyECgktjszEkzrtFsdrPkhu8fEqIQTuRL5-UlvxUaOdgy8fhkddNpE96osmzTFikcs1AdkkJhBZDIjYPNZOWbwPqBRuM-IgoxwLK7dbDwubnTzaaIVxivWpVP-LVUDKAFZPUUDLySG11oIEvfB4rQO9GpPdcl1iMTSnCig-YtZVtDtsKHOpudtwhjs-RFmayJRPxIRUUutaob5iaqEkOd_0_LJtz9Sfzj-AZLPMFnYhT0ZyAbrFuN-rhfiyB5stUBoyhkUGSwn_672ST0DAWrc8Z6ej_HrA9QZY0e_4jrVnu-CwsVVeB8vW_s3r3cVci0MCXZIE4US1HgGLnr4uJjQNDNpKsQkJbdVtkk_ww2A0dBm-9ZV_wkYsLXJnXIHpYMoq5Ee4jCZDvf4AjOpwABmA157X32AC9P7RZvJTAxLgH9pK31kT0KJhh9vetKkGEjwLxzzvQAMDJEiJp4TG4d-2_j87qLcNFu05yrdqVm00 "LAYOUT_LEFT_RIGHT Sample") ### LAYOUT_WITH_LEGEND @@ -167,7 +149,7 @@ This can be enabled with `LAYOUT_WITH_LEGEND`. LAYOUT_WITH_LEGEND Person(admin, "Administrator") -package "Sample System" <> as c1 { +System_Boundary(c1, 'Sample') { Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") } System(twitter, "Twitter") @@ -177,7 +159,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") @enduml ``` -![LAYOUT_WITH_LEGEND Sample](http://www.plantuml.com/plantuml/png/PL1TIyD047mFv3-iyQL2JQZu94KCjLYXrj2aYa_bcgpryBwusn14_E_kKJyGxsLWPtPdvgu22K-zLh0id-utpVRnjbbib_ER-UeQQg6TmZGvagPLVOUzL_12vC95KNWnv7j9B_sk3-XRQmWDvQtLnLgsmdTs9T6XAcRdfvKIXZPtoqABGEXvj9snNaY3FdVidIPfyjy-JYlqmPgHwBGqOyZAY3AG5sHzTf8cJhIlOe-G7Q92_SOEEeFfT6Txqmd_Tda98a0xWVSq0Nu_pgC1TrlX79zzn1sKpYaEJjAQZ4Upup6KTPMlvWslU8IpV09t3xF8bKhP8K3i7O0iS6adMA9xHJAcQ0P9N1H8QbJi5MBKZpGvf1lHWUPBNy98fyaQrNVHtsYRmDkCYwQfwgYBgX_wzz8D4cSPCCApj_hFpXMQZh_v4m00 "LAYOUT_WITH_LEGEND Sample") +![LAYOUT_WITH_LEGEND Sample](http://www.plantuml.com/plantuml/png/xLXhRziw4lskNy7hV4W3E8sJFfhD9aRzK9fW7IUmbCtURGk3jiQnS2LI8Ecwtct_-mvbcP7D28BitW0BN1cmPN7cp9aHUVZuA1KLQXP7pZxfy8WBYJTxfPVZ_1R096H0t9vxu_RzuUKjVdLkUxS3idUPNWuYUMeHXUon8gRlTgxwIqJl-jykEJvn7Fb7o18gQ4pGYCuYvSDtrOh2HnO3KsICNo3oPdD1auSmK5DoqcZadiVq-mr8IH_12_y3vFXT8-ybOAmeUuo0_DSXU7c82bmj4hZaJ2qzJj8MEQK1dsDoP48Z2SxFF4nB23xF8DAoahttwPK-qL3sqto0dyzoEZyVyHaBg5Wqcoj-6omAE3Ui21iytgPN-hJDHG2YwBb-eq02AgSGQ9hxf4SNVAQglUA88-DUw_VRUt_OyeRUFro_SvLBUKJ7VpmAdMp6mtNTThUJivXI5in5g1GmeiGCx0wYi-lJ64Yjm-DmJ3pA9BdnQiwohv09v_hdVC9r_z5XBWG4pGSg6DRpxFn8DpH9Hm1L4A2v844enpCfGyxgX044aYXEHa2-qIWCj9Np6x3WAKMJxofN__PksBrzwADValfofNYCkFeT8-ocVS-zz8U3wqzNFebWehIB21-dAkU1XMylUqK8LGTlvhXu1KFCWCewWM54Hn0Tv0P2xU8YUreZQpsGIfBvbGFg6zqZdmScdvUjNuiZO6O3YAXEMKx3f6AYw3fSSJgkhq1FrkYPabxKQWTaPPnlC7xaJ9CtPQaKHi5uodQAzuKT7PrB7CTd6qBP_9p1Vpq_qktDewFQMWsGsqJmk8vcFFUkCzfsKvtK3W-RjODI39EO3MRR6DIrkhLnoBzQEMXlcw3TfXcU7nvgXkLGDiyI8mE-Xju7784ZBhOf9cPTZBLhKP-lgOcnPN4Hinnono9RDUvkKrmjh5Q5kxkNjXYRpranqOBGvH0smz8qDiftlqtvxk-i1EztBruHSb94iPX-EO35xRvIsNhRb4rFqLPwlTqBLumD4rLCj21q2KG1mrwbyWssAPzUtDWv3dv1_Oh1KRoAArYOHpc6JR8yawSLDBc2A87A6p1qDkgGmlA3J6l9uUTf60J0ldOFquOrd_iId_jdV0ObFeDdV7ebFhtC9zqkZda2PwH5P9Yk42MVg3aLUBEG2kBNQ78dmfYA1O48zCPFdX5_QXcIa16fiRI7DqiIBXGYvfpkW2SOWB9WqrTcQ-jeGSQSCRo3W2XEL4cOQwQ01MXBPq48R8nvkDz0B4OyMDJrGdzAqZSUZccKncMS7JuzIL92TOIKOR0ancSglUUJzU01V8E89peJXAHObcqtxtVkmBlj3zkVLZltnkdRamzjq-x-otS7_LPlQ1c-FzKVO-ZzxldkJQxz-FZzQRjh0rc6VqklgcS51TjZFNmuQpRjpRlPwThd5QbfgK5xOqUwKH5xvzpuyARz_h9m9m_VaHoZqV05EPktK4h-jAK_XUINtVybE9kULKZrJUV3PQTHNkSNv6ptzl8wxtwEyd3jNmrxxYUtttMcMZUaIT69u15Oi3mxS7vSaBKB__jeH7uuFyutUaOpio3BNfgQcEoAR5SbppjjLAAf3JCLNGSrXaMWnWaJIjEo3rtsYPi9VLKzJ0bNE0rPPhXsKb46fcy2a6FnFEeNzeMjB0eYRF8TkjzL1SuvvR6XRUJT4YW9P-9vwLkja8KPpXPv0xORSJk2pNVRofUJtxdo9U5sE3Oq52kU7fBFIx_YGxxjru0TpXH5QaAIUQYc8IFgvLQ5OnEyO1teRwpojbda_HsTnX528c5ZHCLu6Yea8-ih1sIHukgxvMdfaLocIgIYaydsYyKEJdgjwxuxoAtUthuvxNRV_QBLcwdZYqpI9ftojKNrwVclwHcTh0fdkEOz_pcJkD42eqlMhjiIgEhdwYJVN_CYLeM74VJT2UN5toAtc-nR2LLNVkDQKVnD5aMo7oUSwVkyx1kdSi7FpHkloYSEE219D9CasMwQC6GBfWdFbdKT8wVikuZtpTrj7sKn9zwdxzhjoyOl4c-JtMxYlTT8hmB5DZaKAlO7t4zrJ_-l5FilnJR3-CzNx2nGaM9dpI-lsCNad6TwevFjBMaGXqYfrjA_eLI2AYxmj7jpWJu-hfDzZyP91Fi7o-6PcvxcC1hI946S1nYHLf94uJXTEjRmKMUlJbhUtUk-wwEB07Bo-fZS_BEZsrfHnEUIp2IoqIgdCz3w5SyY5Mg5z55J5GYYmXWYZ2MHsy-CtIkrR4ISp0mRdG54gwoUQDrBa3hUbU_VUMYbZKph4ymdK1B_WlxHPynvbu_0WbaS_Gy0 "LAYOUT_WITH_LEGEND Sample") ### LAYOUT_AS_SKETCH @@ -200,7 +182,7 @@ With `LAYOUT_AS_SKETCH` you can make a difference. LAYOUT_AS_SKETCH Person(admin, "Administrator") -package "Sample System" <> as c1 { +System_Boundary(c1, 'Sample') { Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") } System(twitter, "Twitter") @@ -210,29 +192,31 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") @enduml ``` -![LAYOUT_AS_SKETCH Sample](http://www.plantuml.com/plantuml/png/NL1DIyD04Bq7yX_6UAbG4nHFKaf340MhbYPLF8LjCkhYVh4x8OZutvsbsg9x6PZtvdti8f3mD6W5o_BvOTEqPTtMjrTDTGErq4vXcXn9qwcXny4hU2DouR8el1ZpLqblmtO8w3jh20tbdTN5MdR2z_PUeaDLL1UdAoKCRUwMXHQ1qFEghPWlf46VEtPEapJvRnvtA_J1cedejJHJoCeuPI0loFhi94sSwDx5AqAs2mhr1-lh36QphHrCB_p7V0uYG7S6dsa2_FQ-an6thN2EPPzm2wLpYcEJj2RZLNKyXR9UvVTN3PzuXFFy3EuUguYLIjanG6mTW2nmPIUOeWT5CgPeHabS4qXgLEmLOjIlDDcbcz0EPgKVOeJJP8tgj-WXsYRmDS-RfbdLaHTPU_YWT8t4MKQCuyLR_UTcWQRdJ_u6 "LAYOUT_AS_SKETCH Sample") +![LAYOUT_AS_SKETCH Sample](http://www.plantuml.com/plantuml/png/xLfhRziw4lskNy7hV4W3E8sJFfhDEaRzK9fW7IUmbCtURGk3iSQnS6LI8Ecwtct_-mvbcP7D28BatW0BN1g8PN7cp9aHTVX0Faf5XPhF8cUVT7d4XSIBlSBcEBy5C0aP4BVlNhi3VtHnWt-wD_sR8TcxI9g3I9vQHY5xB8dfkztBmGhHk_gtIuvF74V-4RAO2ZeZQ4JdaVBXksf7uIER0LDaZ7z0PCqMWiRtOQ2cvAJHoDoVqU_N82Lz12_y3v3ZTusibu2nekmn0l9VXs3p41MuMiPmmPbQUPmaFN9A0xx0vCY4HXASdrcOjX1yaK8aPILxxvEMtD5GzjriW9_FSces7_YS1LGiMwqrloqMEPmRLeGj7c-JbjpjS160oBkldoYGWCef19hcFkdJ9P-hSeyuuiYut_xzviuVjRsHzm_NxrvcKdwWupyUXKusvU6wRgVNpLXCAGiM8bGA655Y3lO0qTaDw0n8hSjduPXub4boxTMSrLWX4yxrLtF2zVZHOSu51ArxAXZMywnvf3jQf2k0AWZGN90WbEEvb25dTS800aaK9mz0lj4e3BILynkmu2b5a-ywL__cTjIxkH-WNvpuSgKuCWxrCqRORVk-U-6FXbUVBdqImKHf5n4-JbN60mlVMOsA4Cg-lAdZyXMCC0CgwmH64Ns0w23p8jJEpzExDR8n0gaagLyneBxG8_9vOF9vrVirFm9cDeI8wfJbD8nB9egkepMdu_eQz6I3dYdfUQrsGDR6sGxZHyuqULEMKc4KZATiftXVsD5HK-9xVBObbAtFAVpNvf7kRnqTrJPgWDmcWi_gQCOpppgbRNVLIUtmi5KxACGmYTbWjer1tQXR1r_vLwb3ucqJjFiqm-RXeMPO36NpB30ou1le0y0ty86BAiN4h8kmgXVr-PgQ61MBYvX5aBiNUPjuhqfnjR1Q5UxjNjfyRBvW-KHpGXT3M0oBqzWgtrsLyjtTMWdUxLwyFEGuds8U_M80YzjTgRBrgvHDJz5MUltT2vUF3HELJpGdT0543iD-gV8DgvHFBsxi78U_fduvu2XU-HNCpQCOmoPPdCdJ2ffSGXH3wGqOEXjrI63vGQgrvF3pD0m2O5zxXqd7XizTWS_TCpx30f_XCpxz0fz-wfDi5ySyXZFI9Z9CLeYIJzI22hnOIWMprsXoAy8P5Ki24UYDdpmZ_jGo924ZKcDf3syUnrmeHCmutGAFCG1bmRQlJDVMqPACEMDu1G5HdAY2C5TC0GlGbiw34DWOyt2_WLW-y61PrmlzAKcUU3YcKHANSNRuT2TE2DKHKeR1YXYVg-IQJpQ31_0D8XxhJ12IObcgRjvltQ5tCnXrFgrtxetJjoSVEgRV_PVl3WVj_iWoV7-gFyRG-ztptUjC__7n-zDEpmQo3F-MjB9d1JdRO_twSDPgsPjtizErpoiIqqA3pjQETAiYziwvyU5Dv_r5xauUlYCvHgFH2t8sJw6G_6bRVtB9huR_It0s8okNwflkXujkexZEByZP7kt5TTxz7EN-ohySzTrFxg3dJBLkI9EY4y4Zi61rTk3yE2SR3N_xQ4H-E3-QMoEZbLgGrIXDJ4nsURRhacUTjYhHqeQfYcw26iCyKEE42ILfsOSk-yHDXRwi7YQ4Ivo6h3BSEAae0jCN0SYnU1xr2_l2rXOv4RRvZjplgWHdMtbiyZPonGGAmfbuNl9KIsGX4mUBl0LMdRWLmUPRjVB5v7UlV46uwiU6XcB9qqFoUUMNVyXNVGtOvKnHf2OaMOHg6ZAYNcvLE3R1SzQ1_jOghyeYx-_eD8uG4WaR8oh6qr0X6LbVEo2B15TVhKvBZ-GgLI8LdKogBnQxEEcrhmRkCBDwU_lcjDTxzujMRwQEBp99ctIArnRbf-U_fcTqiYgSufhd_ETCuaOBZ2xPksvReCgUgvFiUCsAM1aUbg1N9xGj_ZQvoh9l9LHU-OrhIV4tMUJ9_Ypc3AytPDyu5Gj-PjvuLJnnm069exaaSRLfmf3DcIOyMzPrZ8ooxoBUrxSt0vJ5Z7YVlkjqBXg_IBnDThk9zruZQJcARNB8LUmFk9_gdVwVAVPVYfsEdJzViTD0bc9RF5vOiVF9ETQ_IJZfpf86in09rThwEvHAKCK5ddLlBy_7ntMoxz5P7C7-GVfoFarE2tWOqJX6d7ju8EquZi9nid2iuQtkNfsqlTlN0zT75m7avFKnkVvdL_UreuWl99bBPACrJlFNwZMRHohK-kYZeYeGH8KpY32MH6u_KtQlrAeJSL8px7I64AspUg9r9q7gU9U-V-kXbJOolKymdq19_0dwIvymPrq-0Wlci-X_ "LAYOUT_AS_SKETCH Sample") ## Advanced Samples The following advanced samples are reproductions with C4-PlantUML from official [C4 model samples](https://c4model.com/#examples) created by [Simon Brown](http://simonbrown.je/). +The core diagram samples from [c4model.com](https://c4model.com/#coreDiagrams) are available [here](samples/C4model.com/README.md). + ### techtribes.js Source: [C4_Container Diagram Sample - techtribesjs.puml](samples/C4_Container%20Diagram%20Sample%20-%20techtribesjs.puml) -![techtribesjs](http://www.plantuml.com/plantuml/png/ZLLTJzim57slrFzmbvU1rBKCnf2cQQ9GniVAnqWwjAV8YI-fXsDdjaEfflttNITjqgveZ0UIsEVUUyxrkUwXTSouCfSG929Bc7eeP1fqEw-4IcN9iJGIfiuLziDWODYidmatBPFIeacrSgXSFzNvu5Qap71z9R10EJX-z-P6CkKcb-D1pgn3GqlnCU6PK6Zw1PNhThgTyV3xzIIAe-kRU7HzTzNjl5wi3CCu_78I7PyrcBlpw2mUdvoUN8ryPBTpWyPgjSMKLlDSbpRsb7eG39SBCA65OBj5Pfd1Z3da3RHPsS3oN2XXdM5EQDNWrrQRc6wdOEa3on02X-dK6P6WxV-m0NpycEXISMRcdpu1iv2-XLyU3_JNT6DhXadCYe8At642mwAGr4nV8Q2b2_R8UX0MHgWCBhyTzo3IEMt3GV_9xm-br3CBdg45f-5Hu0mAr8N47jHKUh0ugHxW8preuOTEw3-wj0_tHkVWfWXIfqo2Lz03BkYOwOif3kSHM4oTNcXTvsvGnZmX7hSeAyuKD6AE9SoYftSv3x-EOR-_NxCDAGtQ3NxL4tBC4r8n5TGAAlvW_-QRC9vv-AbmPsK21WkzKF4SjNiXqSx9V3aL_amV45PVdiVdORItkqB88ZFf58JY-8JskMnAsv-I0gwq5-GbGXLRYTGgqwCZsEtlhiciMdiRXeEXevTxH6vXAv4w0oBkx7RLNZT3TC-MB0jEtlJ6czHlIp_0WKTPJPB8BK43eCOQNSdkBTAkzwggj_02a84Ps7IAl9Gq07HWecBnsnEfExNbPiBL3ABwpGCMU_KzG5jrXPKThv0g1qV-MGlhTiWV6xFQ6fz6oNeTPr5q4_gG2lxtmBw4Vsve_n5JHpM05IiplZWytx2P4RwrJbSd-tKyk1WTqHZw8uIzlPtto_9DeZNZjSasS4jBhK1Mp3GJ1lrvEfrgwSiP1xi7EsyF6khnfBN82-Ivz-jB2bRphMcuQpgm2TmKiTcq_vVKvcsjTqe-NXgR9lHUcxo-VzlfQPgtveScLsjLZrrBGVUpWw9CwCgboU1O3ugW-HNuKjgbpwkiox4ghR-eQUWhUYk3lvghrZjcy_YskK7RZbURXwWu_Kh-0G00 "techtribesjs") +![techtribesjs](http://www.plantuml.com/plantuml/png/xLhxSnev4lwTlwAN_92u2h-Js9TrgEM1O-zXxEDnlhqaHOcP1hGPfBcHnfYxtFz-qWZaOUIfAI3hgglQSHLCfEwllswrMe_mYv0aal4iABs61Wzu9DJBgyAdLFh9np5b2ArswwRLwGylRzL7uxPzsuLNbybJKaWzkGWecso8sMyrhZe6iNVzpnOSdvHAuXjb8Od839GGYGFPnqTP2-Y4pP19yDG7HccnUKJ2U-hBAPmS7QNQP-Jn1eKW4-pHVoCSlpjAQqNeIS8c0S9_Ig2Uda95BXSXNd8cZSP9qYEcnETpvHoCII2mzDyqJ2sA-Dn0cB32g_V9axHeABSrRK23kPmkBaOyPZw95jNgYb-6HGxd8yT2XiVRv4bQwppoCSfhroEAu1CnHL_JV0rjik2nt6o80wuOjsk_tGxwmrflsFjhgz-uIhay8jwtIQITNV9ejLhrPYCbCINCdqTKIcGWenZT1D7UTSWCeTpWC-f1Zp01DxrooUGAZ3dNNnTZhlD7c_aOeL-z9n5JyVnmSQWxgj28a4ZqbNW4FXLUB0Jbh08CqHSWEOmG7aX0VIrL-WcP_-IYzNVbQ__sRjYylUyelJ3HvL9onPZgCLQmMVbswx8_x5v_kkf3W6EfLI8wcSgKXWfytMG5nGqdxqfnyGQ7oWCYAe33W8mms4jDXFB7ZylMCgnb816mr2i6r2yw8vy7Xi-czsk-1ULP5mEYNHPJ6cxeg58ThZWTLrQW9slqR4W_bijxi19ETrWz-A39sx1iP4QYDsKxsVl23WylX9h77pA5ilfv2V_rub3tLmyFosinKDp64PzLb1XFZVMIjjjLWVB-VhMyLuXX7NF1N1cBkXQtkfhoRuo2qNO9kdsQuSN-lcPO3ENoB12ou6le7LGpSCIZROAfl2x2sZwepyVKsjWok0gp27Bt86U9DxS9hYwiJeIRkuSs7vlFMJxH7DF542x3GZSouHji4xx1dUFWOFVWvI67-HJpw1S3EDm66uMjlKtOz1BjkDVUFN3vs3YM-KHpJ1T0v31iRnI-xZRXqviRryVkZubV3hWgNlaHpFMZ6CCbMUp9qmuQhZ08SUC3c5AsrI61vNlBMWlxdwVKzv5zRUud7MiwWmATmJCwtGATxZCwxGATzb8dEIvwFCGFK0D1ansYu6Cv9v5wMGY9imCbSXVH6OaMW07gWv_u0Fsf8mYKWT1OMgCNXo6Ff49CATqX3vK1mloihbZkhOC5U9mnzOO-I0womCmrayXy9KjYdoBpb1-j1umM8-ulAdgZFuLanAb7WiGkusp_gILC25KKfA2-8SPZcRppyRfn7nymuA7sH44I5PPj3-zthMxljZEiVrgTt8_EtvwSrMr_wn_zLhTJQmyTmVVd-iyAzdxhzLitgVxZu_VdzQOBv0Z-9NaslIl8EHxhwSDPjUeUtkr9rxslI4GB1UgP4sac8kx9-UZijFx-ClSaZu-A72F1y0Kvsr4e97zUqt-vv4twlmXdcp1vL4yRPvUDe-8ulo1dDzkBuxpxFShzTVzgs6vzQdMQfQck6yAwM0fmWimtTmUbxnzXxL7_xYiX-5xwVf79ZEfI0aoM9YBMkppPLSZJIfb8L1D1CoJhe5Om3zGgAOUCMywbosjecKA_SJrC26zm6s8yNBkfA0BJBpuABteUzGlxmbOIEHQoV8UjHxa1PpiZYibhv5qSA3HdxVMIKTt02pkTNV8MR2VYhWMNxxQHBoQ_Q-GBpMr_RMWfRdXx29-DNlubt_Pxm0PdaYXgaO0vbLFAGBxShj2pndFsWVtCBc-RJTxFIiaBObyJja8aygPKAZAYib9GB0okUZEtfOV2k0f2al5u-yrYGorwjUjEgvlQlRqzFMyst_sWtPkDuuiiqjQTuht5dylpvikpKd8ZR73jEFynYxYj1ROkEQTkfq1jVgyEwNnD5x5DUDY2lZkXJF5toUrUzgr3crT-gxfXyRTUv9NzMSYPVa-NVQjKMF3JwyQRueK3zo0COW7XTik49PkpJFJSigvjf2hxBiNxvkwseyfYgdYVlwlNBuz-KF6stkrMl5yT9KzEnRO-v5RiCtMUQfx_NrNiFoksdSP_UCLU6N8gjiFZvIjs3hbIvgS3fTVExoQUoTTIANM28uopnOp7OXWBZ2fGhgqQOA0QodjBuJTaCebmGYJwLjAsP4Nz6MLKIBF9jE9hhIkLKlR0u1qhMHqE6T4HYeFVHNdF50tzaLevvpWQaZ1KqlSuWbeO1jHBeCkgwLVoG2hG2oDTqs_-tgX0dyzKDvmTFEh-MX3mkG1DJUWY_41nRkzPZULAajh8P0NmGNsfXj_vI8-xz0uWkQZMfJlWUlEk2LV0fnCgbrUurtqGw4ckdSmmZp0O-YF5OlMh1QNI99ACY41DxcRH-riRtXsyCrnx2WI5moxvXXdEHig7ALM1KAQ_YIpR4V4dMlmJbLVn228C-T87bzYO1cYcl39xIOFLSKwpkAprJqzIT0JgfGWey_4HXOl5kFXNeCGxN3kZtGEjQHnKDO4twt1oS99sqGIrs-iTrgHw6IFw0jwC0Zu1HLgAlIImSeuedp4OXpwHIQODpDig3-1CImaUeCwIiXLG8OruudB5W6QYfAsjSW0u0mB2cw8V1-Yhg0ggEEZ597KebtCg3OM-ULCIgMwL7DDOZxknijwftHIghww_jNSbbHtEz7nA-e50eNsvwlVlUafUIwVdQB6uCqyBL18TsvrAOkAReKi2De-e3gtaMbKD_U6lpNgZaWmWd9uUlTUsqpZfd4jXPSLCEgKbqeaqfn7gqPJSuqegETAUd1qTdorf3mSsFOg8AobIm3u5b-5_RvrtvAm3UU7Qm9qdrAUC-uJI9ZHGDkRHp1HQEsUCrMmIM2YRdHff7M74OmbXF58L5ZpkevaVLFA8OW6gIMi3QYTJhBVmUg8dvEnaNuVIlfh_M3GZbWwrwle5cH_FWly1 "techtribesjs") ### Message Bus and Microservices Source: [C4_Container Diagram Sample - message bus.puml](samples/C4_Container%20Diagram%20Sample%20-%20message%20bus.puml) -![bigbankplc](http://www.plantuml.com/plantuml/png/bLN1Rjf04BqZyGzJUcWhqT14FLLHL0AeQKg0OgAe9pHUBx3AUdUrkuRIgl_UMTiOGtr8EM1xFFlUcpSpyDbvj3vB9NHYiOvHFHl9EktMAw6Op1AUMGaRxutxrEjPt5siXTzaSUQuPLfvhlm5qsblBXZQH4y4Drps1X_VpoGg__WmxgNeFBSKMWue7uNYzi8GNRlLRhbdeGnQJ65dqJo9n6_WwiE7-eiKVpvmvt3D8_6B5s_RhN7_n_HniLnCPylXz6dIRhqf8_re6NqRBGPtLSxJryNTSZpwCfeCmybsQyQjq-ejovpNARTT65HtdJuSmfrt8TSWUoPgw1nouAjQQPkY5rf1jAVIqWvSNySwKmdQ_SqDe0Ds2R_3QQ1FLVHRDAPR0-eR8ycq0DIX-3rkqJ4hZEz2NwqpYJQ4-rBgdQjKEV2QB551azzmOS5OlHAI5t9F2G-7bjIhhM2ypXuLeGDp5o9ZXLh3hTO-11SR3aOBvK6l01cZ5W0LNWa1SVIXYJijUhQaGI6qieDmcxa0FiSu5lxXUqvaKJcZhS_XAPsE4nVVqcIv9cJBGpPfhPKrFyJgTSspU1-k0ylHSmSgw9N2yGGIz9ZpLM1WCckquusKc2N2r-ZwuRbEDNZTkvYC5k5sPlLM94IdxHgLSBb3xtSKWXmcSAsG2KctpMnLsvAuth4XQOxHvNnJYqnokBnYuIdosdBtujOS3Sm9ZjxL6HxsqVTn3HmFzlqY-xOqY67-msX8UMnQPIiciD7i_zmDF4TlmrEW7uKvE3wMQceL0jBk-N9UQ2VGmmQtdBwCuOedWV5F89rpMTlvOXaVWoIwtYqMiwZGHcdBUR6h3VlpQ99ybfgyXc33Ei2XsolMXVjeEkcTGOyRjhBG4d6LkAeE7N2UU1nfzinzE5y8-_VqwQOLA9MyBDTRGtrtQiGHvdJgIf_pXehYzsbuEwZAE5tlferyeOuJdFCrUm56WT8Wu6p8p-efsSy8JmUnF5BIYNALnhYdBZGGdc3bgPz9FltF_GK0 "bigbankplc") +![messagebus](http://www.plantuml.com/plantuml/png/xLfjRziu4lwkNy5rFhG1d4tIbpRNIuprYz9art6obeFUNbiOj4JRH6LI8EcatklzznkADakR5WJPtG07h08a53dpp3D3SlWI_I8L5ce-IuDdgCrJBYGK3agV8FWf8MFA20gxuKtO6mmlR-5N-xPxsqS7b_aJ05Aa5YbbaugOWx1zrJE8qVM_GtJw8WZa5yeoBF0CWH2Ufsf0lgfcIYTiHfX2CVmYmXLx53ZxG1CrHIzEJfpw6VvwGwJ44nBHFmawVNtYQWaIAymcAK7_2H0y4Q0IhXOPkUHC6OqNUOkSueG_WdDeZ5D9Wl-wC4qX-AE1C6551s_o9w_HK7wjQq23-PpEpqTypX8i5et6Yjy6YmBE9vw53HwlyYUlRN6H455KhtkKe0JBAKaqpMUeYnTyhgfrSSg1SRVvn-tzODYCXj5luQ1zvRWyml6NYT3EBdc4OTZgj1s9AMR9ew1A4OQKc1D_W6ZlUdX6KAtDPpH64MOItKIrm8mLDEPS_paVSpr-j9aBGPB61omOnFFT-R5kQA2s85YH1CG5IgYCvr9Ipkg84P98f3WQ4VI0KvfegU0dmfBlBbf_LxuERk-6dTiFFT3BSbsk50V6LFSnm6xATyFBmR1__VvgW58oLbf5qCbKEHeG-9OP5PHKdBmhnSLpCWGFiAmZCapnYAI7paIeNLmiQsjeRGHYYPPwvO2we4VaTc3qqRH-BhO0dlL9YhNBSagpYew2wd35wRI-0dsnHi-6zA9MEqGhORV1wg5tchmDIoKpYiHJjfUzJ-pu-5p2F7wtaIWR7vVmdy-FTNlZ-BYs5WFWDXPyLWSnxlJrahRVL4UrewD6xR0KmphcW_ao5dKjRYsOyi-DWj7s2Vfjck7vqP5cM0xbyomHik1hw3q2Ct34nIx11AyBiVOFwjQOMXix1XSmIo3t3x8NuyukmTM9rOjmP__G5cFpHrP0jDYq3r7EiDIDZV3TxnA--plFmVlzWrU4d1LGB3Rh0vHpkwyKjkukOTDBjETUT__05MEJiIeWMcow0AA4ORTI-FgxX4zlRdmV-pyWViNWaBmA8rZiXuzHJhBSa-yxQ7H5qenKFe21iiqEEIm_HEOD7NsSqYGXx7FdA6zOqxalqRdVejClqUblqUcMw7INElbnCUOPUOUQID9yXoZvM3rY0OM5L6JsCuZS2Jh3Oe58IlJ1Jxv3WwadY2X3KcDfZMYUPLmeG7IKxWZFm01coQQkNEwjqmMAEMDG8WbI7AaICzTC4PQ0B9udbB0O_0WVY5YCUBAewut-5EKzJcESvdOPPqVVQxASK1qW9KqCCJvNUPcFruqdv86aFDEU02I6iEnwUByB-z5jRzXwlpgvdvozUl6sPTl3Vmt2Vg_P7Ng2RyxqZnMC_eW6uOtJVdhwvgpLyO4ymN_aJzMxWeBZiPu-d3KQ_k7TddJz-ufSj5IWjN4YtOY8Vt8-UVkozUQoy2HFlW8vXjFX4tAslL1A_gofVmh9c-7_59pjo2ga-hBzzh9zKXxd9-JiZ_RoEEz_Z_BXUd0rx8RlmrudcEgy8QsBGKecX2NcxY3uTe7M7dWVW13w5dmxtnWPZQK4CgCq5x7U5SckGkugRKIYaGkQBba7jO95e5O9739kUPSkpr1e4dtbV9WJhd0ROZnSkwae0zE5XCXOR4Vzn3wnbKIHXGqJm_2hgi3Popmkj8-yZmEbvgozAE_L2bxOwUoJjs1x4VSj-7ntZNmv-NqZNsPkZsj3Ix7YxI7wQFIAB_bstmEsELCOg0c97gcQKeRKq-qAOskyO1yusDZbxRB9-oSenIb00c4hX4KyfGh8oFfA0LWON2YPsz9ZQLn5Kk7nUFVDOXiMlUPrB-mxkxTNByywdTS_QFTcu_WaYxHrftnlyVVoN7rv1YK_mWRNzlDViuZRN63padVgzX9KzNjrv8vNDubLuM4J-lw4tEJlazihxNiELS_yLhLYyhTU5ANzMSQPBhjftogL9dnttNXUld2GGvIbSucotPO9IxPWcOZyjAvjE9bzd-HzStVRWxJe9E-prwtMvSaFIjxMk_sIzy59_XHaREj3OSP-2-Ufpjd_LSR-EsFRQVoNP-oL8JzZ-poUD6CNamisFXq8dddVJMmPhq6mF7x6SwduZ8WwQjjIhObMrVeVRvlR-VWKH5RIaAZ6NCpohMJj4AQsddFEseQpp9LkPbbAOoCDzR_Y1mpkqKpLKPDDvYaMkhgPflnHMX9IfyWPPdX2TAQa0cM2ZsbAWDs6kPNAK1BnG6FYsevCrSfk7KMPqEc-nRdIbVgYEEEKARtPnd5Cf4JWcwM1gEEgPtbcFXeQZkOIi6xC6shDfORkuz68gflVSpC2CwcNcXmSn2dJbiY3dXa-hY3BPSbngR-gSttgpqSB_TTya28HqrnJAac24gnmRis2eMmkCYx95eDwmL6EiQP-Tmsr3uv_xeK3NRmJ_84cO8oB2MPKvh4vUeGgbCEO3uzYca8HR1LtLp9oUwe3V4TOvjPk1OvJ_KbIhDyYnGMHPLtYXGxWtQYv-3UBwFUk0urNWVkJ9EY120dG-O18KzjPtmEA4pJbSPMuWXKdglfD6m-Xz-shvU9uX_28pzLob20rnGfDyGE1Nrb664d07YngVP8wCzhClNjWep6l1eExIDCo_tRA6xTCb_iCd2i8CTB-JpGObWiMrz6li1uThm5tlIcuuX4HbaZh0DSe7yWeul4Nea3RiFALdNbbGIotUKxM0Srnjg0u0ys6r_GYDOceqselNLYVoTkcNoa97yPqVXM87CEpxX3QweenlM7D7NbMmzWoEe7vvvrdROCt2Fu2lEUpz7y0 "messagebus") ### Big Bank plc Source: [C4_Container Diagram Sample - bigbankplc.puml](samples/C4_Container%20Diagram%20Sample%20-%20bigbankplc.puml) -![bigbankplc](http://www.plantuml.com/plantuml/png/bLLHRzis47uNeFzmSn-Q0NAC0dqQWg2kxJLfxKIBvALx4auKRHEbI86ax0R3_lkEicHPgO5kVZ34qzrttzrzHtsm3eshImcZN6npLDygoKPXy8jGJDO5hus4dNEL_MqoCNYutWgtg_FQSiEqSbovQwRBoPDWQ0hz87Z5vMJsVXnBL6wzMavAj8uRCcKpyaUXkBckA5qOXC5o-jVZEitInpYRFpu_XC7RrZ9DikJB8ftTdNoUxzExRBduj7YO-yWmYBcnMbsnsZfTSXF1xFGqca9d1hq1j-FWwuhWGDoXQW9HDZP0ndIjd1tzwa4hPDzmos5qJwKPnHry92UXjf2yK1db26vkSl8lqBpStW9QOE_WRny9z3iLU7NWUOPLHLIUUGxJgfBK7oUq6f7fC-unWgGo7dVrvypRvboAFH5hoD94d63GzXTG5Otvn2dlECNJ8-rXSbiH_2WX3yd7iI-727I94sP4vIAOgcqjqNXpRFHU5Dm2IdavqQPMpBD7ATmBE4tjRRfhOI_GXmW3L3BaHXz869T8bJeNahTDMJM7ZjRiJGHViKJgnv0EI54AnmkmTMw9JZlB_qBF_i3lI00AlXUCNsAOq-ovAeYYy1AAxo_FRQx9pVHn0ye_eURP4F2bx0KwpD5ohuNsqICdVonXS7RQK1w_Vc3uLbXdaE11g8qsPKCrWXqv5u0rYPqPNf2614eRUQrpQq7gBHsuOzUUo3-Uor7TLxn48JFR72ZPOhoYSoTzCgJKVT6KIEkp4inegpSE5j_P3XNfx1ZfKLl0jWqz906gZS6IlrwilZQlmdRIZ0odLfwL24XBwFenHwSrZe0QeYmsJJ-hCWoUk3oxBFe5NLjkVVQxD8qJxpfqF2xJJvm6ucvykvJPKtyN7A6wJUzPDVQX-hfyQ5yKY-1pylWmEUK-Hftd_B_1sNAezZFnFN4iB6oCBfjxvs1e0UbMqXwmnPj_dBKjeEe6E3-CkwFY8oSjdw_qKJZlOxOUWhmIOK8lBF2njthX4txF9LcbST-IOMG_dbSOL4mJOZXpw2z9e19T69o7mtWTZs_R5_uVnil5xocPEjWmsD7AjnvXy85Iq5VjNm00 "bigbankplc") +![bigbankplc](http://www.plantuml.com/plantuml/png/xLfjSnev4lxEh-Wb7n9NuRMTbyINSwZbPHnx5smEy2LxIOeICm9K6QGfITZXBllVhoLc18CyDGVEkkggTbn51gdxwQTRhTOB-KLf8lLY7bUUGal4GYfyULBwL2e_HNJ2E8MW4tI3g-7e_1e_MjUTwpuyERTF1P46UXapFjqHSnYqBgvMY8FBVmLmyhnIKLyPJuWaSq0XieZra7xJZPXD-Pno3I5-KBafTYT9ye55UWRFZuytskVaMvSgHQPqmFvDuUJLyQQMfA4cV1fJ-4y5y1aWAXLwcT1pmVLAuxdjKJCIYJjq3YOaLhJonoPCGqfnbqBOiCAJr_QnBGRARzqqyCUzdCxEncB18oANzNh6By-YYFEnPs6BnqlxsDQca16LHUrcH2b4HCreP6W-XGvPYeNUROXZWOmxZT-lRuQZnc0q-2qOjYusN1wJyEjK6cTJ7a4GDDkj3OaPuT6TP5fJ3bekg9yWnhihCgTGROav2s50k8Bke5fPvGfCX33_d4s4oHzZvfsaKVq3aHpZ-VRio7JKeIKfqJH2SGaHK-52AIPu3JYbaG8jO4pXbiGiCbALdoYFrYuwVpDVXzUzKVlwmnNg9LPNQ2sGCJDZZB3RyftWV3ZgNxw_649C9zgeI3QTwGqD37npbHMCxZfvKyNbCpf23uYg0Ht5P4pZWus9K7ttBcsjGYu3YO9KhnpGl9YCl1yOFgrwlnHRGC_wD2R6PJLZoOwEekeeutHIoq2Vv-YvaBwhLWyW4zxiS7hmrf1tOTd9ZARXZ3_8tcT-T7IcS1w_tIgKzKyf_9Up8zDVFpggvcA0t2PIp6ie9jPZdT7sksfGFJoiLmzACPnZFfWlur1pSMlYb7-MAHXjdw3VPnYU7HuQXkLGFiyI8GUUGx-YE0F7GkuJJFIw36l_eDuVKsTZp-0YPXdamuEyJRozJt1DOVKYt7vuQ8knnHql85fikXp2PrZkHZvyD_k4xwRdENZpyE0L8IV558lebmDut6vs2bjddx2P9Tfph_Fmm1LZquak85fikWIYW65df_3rzmcVsTpuFlP_GFoAmR5u5KUmq8zo39zakIVh7JHSq3YXEn_0KDbL1mih3j9Q2uUVPYoAAF_IFhGTEPsR4fsRUtJw9JhzUtGw9JgTLCSU5qEHqBVG0CNi3b69YRuZ4b-MIjFvpoZIasnEv19eJCt1Jxs5uSmJ1CP16IoZCLWaYP0Q4JUKUbGaQ83mQ5jNfNlhU0cXu1pVQ0HQW2unSyarvH7AaaN4A0_HZ-2MokLOHCkQsUZFm8uu2qbixNB13zSjYILKGqZ5eXKnp0dxBYPvun6zfR58Z2S8IJ0i-nxUUq5_S7qrQhxFJkx7fo-Vlscw_k3ZCEXVDJeZJ_3rgVbpWeFV1yEWkz5_SlBwjDdsWJp1lzbdrxk2WkEncJw2r-l-uTsTTFtx2YjQAj3CdqYtG-UVd8_Vl6Y-FYyyoTDlI8wJUFI8dDqeb98_RPY_GlAhz7yKpYvXYgY-QBqvRnsNn_aHEVlPNXxdXz-ZVBWSNemwmVlWgbsPcRgXd8kLc4ufZrPt1vNlxo3tuFSX2i7tolUphSoefnAmob8huhmhair2lgcq5Ocw4KohQ1xK2HQ1EYLqoBhbNxeyXI0jzBlMGqjuXzkGbOVvcueICFCIKHNA-r4_yyyyaoYmiCrt57pJEt3sAuzFtaVUou5IS-i5n8xg3bueg-2Jzy7s9UvRyFZk6_boyW-DVAcv_QyD7SKTRm_Xqqgl-99l_prWIt1Da9fKSCVqZ77GZxSh39tnWdtWS6kNjyycx--e5CO8YOIT497XZ6aaesgP0hAmkEPjTLjwf5QkWj9aCjb_izZ2HQznUHNqDtPlBr-SjjklVj3kpSNnKHPfvqxvtkAlvNdtvHcLl0Ydk6wS_vn5tDK2LvVyKxTVe7QzLuTylgwBs2uy_8A-Dw5yyVV9xL_sVOTsh_nETSVYxxmeAllpH71ypvLzfrHIyFFhnhFoXOCUG18l52JxBHEERC4oCV3BkhMnhkmFATxTtlMLAOlhudtwgjayF_v1nTjvzx3Y_UJOFWKLs_bGMB7Vu7cgVVfNnVu_gzXfxlpv5Jirv5TidyTZL-m2SfMj_pfGUUhzlubxyhLIIO-VuK9fCQUo1YttLcr0rfpjEyU4VwtP8fec6Obj6v0m50kkbVc5RdlV7vuWbYbaabCDJHJ78b8zmFbl9-Pw0RoZun594fJ-GCVGI9AOXNPpMiMcNyajgS4WaQWCtN-sJ5kRnkmMULXkIgDiQ9EGScrAecrsXWrFepleDGpBl6cL4CGRsENai4Ucr9ZFp0v2oH9TWmQVBc8YJNDFYbiMKGKaZkytCrdmq70dCTDBq09ZQKEfu9OHey8aeCCmbk9EKUbJceinYsaQaAxvuaYrdjJW8vaJZ4MU3CHipinYeXPZXMJ4v7ycfpnsAm9cNM4XzVcDiUvI7Y51PdAbTtd_YBK5YicrNevm2J731O5zsn7HP4mKDJcGlXhSmJywaFkkXKGh2uK499qofIL1S61y8kJS4gt1Z2YxlkePX996b6j6ObKpAKsLWbXCyGlLuSz80nUCpOFtdB3is8pMWiCkVeULW34_d54qbTRFBWkbCFi02Bw5Cwm8sMO0OJSmqq2iKH6JJoIPqspcE0FEFnB7sKY7sE22kU4c4DnDwVKmrzoChG46XIjYmxxsjDAdyKPLM4_D6qMLiNqn7FO6A9YNKmafbN69xU1MvaPzLm4ipdf-PtniQoxld2cYbZoimQ-uCXvPivdEsjgkggDEFiStagvFIQJ0_49bwyoTP9egqCB0fMZjPWjnh5jv66-43OzCyIWbyx7RSLmCnaqUOolp1jYXW1wQLfFk2BzcCkWEUramSdek6pm4BOp2UkL2vtHbKnViZ_MhTlC1wM_G3jBiX5AzoY-8lPZ7_mK0 "bigbankplc") ## Background diff --git a/samples/C4_Container Diagram Sample - bigbankplc.puml b/samples/C4_Container Diagram Sample - bigbankplc.puml index af50a03..39f6d0c 100644 --- a/samples/C4_Container Diagram Sample - bigbankplc.puml +++ b/samples/C4_Container Diagram Sample - bigbankplc.puml @@ -1,5 +1,7 @@ @startuml "bigbankplc" !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 LAYOUT_TOP_DOWN 'LAYOUT_AS_SKETCH diff --git a/samples/C4_Container Diagram Sample - message bus.puml b/samples/C4_Container Diagram Sample - message bus.puml index 4194e78..198054d 100644 --- a/samples/C4_Container Diagram Sample - message bus.puml +++ b/samples/C4_Container Diagram Sample - message bus.puml @@ -1,5 +1,7 @@ @startuml "bigbankplc" !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 skinparam wrapWidth 200 skinparam maxMessageSize 200 diff --git a/samples/C4_Container Diagram Sample - techtribesjs.puml b/samples/C4_Container Diagram Sample - techtribesjs.puml index 7c815c3..466b873 100644 --- a/samples/C4_Container Diagram Sample - techtribesjs.puml +++ b/samples/C4_Container Diagram Sample - techtribesjs.puml @@ -1,5 +1,7 @@ @startuml "techtribesjs" !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 LAYOUT_TOP_DOWN 'LAYOUT_AS_SKETCH @@ -10,8 +12,8 @@ Person_Ext(anonymous_user, "Anonymous User") Person(aggregated_user, "Aggregated User") Person(administration_user, "Administration User") -package "techtribes.js" <> as c1 { - +System_Boundary(c1, "techtribes.js"){ + Container(web_app, "Web Application", "Java, Spring MVC, Tomcat 7.x", "Allows users to view people, tribes, content, events, jobs, etc. from the local tech, digital and IT sector") Container(rel_db, "Relational Database", "MySQL 5.5.x", "Stores people, tribes, tribe membership, talks, events, jobs, badges, GitHub repos, etc.") diff --git a/samples/C4_Component Diagram Sample.puml b/samples/C4model.com/C4_Component Diagram Sample.puml similarity index 92% rename from samples/C4_Component Diagram Sample.puml rename to samples/C4model.com/C4_Component Diagram Sample.puml index 115c3a7..942bbb3 100644 --- a/samples/C4_Component Diagram Sample.puml +++ b/samples/C4model.com/C4_Component Diagram Sample.puml @@ -1,5 +1,7 @@ @startuml -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Component.puml +' uncomment the following line and comment the first to use locally +' !include C4_Component.puml LAYOUT_WITH_LEGEND diff --git a/samples/C4_Container Diagram Sample.puml b/samples/C4model.com/C4_Container Diagram Sample.puml similarity index 94% rename from samples/C4_Container Diagram Sample.puml rename to samples/C4model.com/C4_Container Diagram Sample.puml index 6342c11..775b4e3 100644 --- a/samples/C4_Container Diagram Sample.puml +++ b/samples/C4model.com/C4_Container Diagram Sample.puml @@ -1,5 +1,7 @@ @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_Container.puml LAYOUT_WITH_LEGEND diff --git a/samples/C4_Context Diagram Sample.puml b/samples/C4model.com/C4_Context Diagram Sample.puml similarity index 84% rename from samples/C4_Context Diagram Sample.puml rename to samples/C4model.com/C4_Context Diagram Sample.puml index 03f2f35..9f01afd 100644 --- a/samples/C4_Context Diagram Sample.puml +++ b/samples/C4model.com/C4_Context Diagram Sample.puml @@ -1,5 +1,7 @@ @startuml -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Context.puml +' uncomment the following line and comment the first to use locally +' !include C4_Context.puml LAYOUT_WITH_LEGEND @@ -7,6 +9,7 @@ title System Context diagram for Internet Banking System 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.") diff --git a/samples/C4model.com/README.md b/samples/C4model.com/README.md new file mode 100644 index 0000000..5ad498a --- /dev/null +++ b/samples/C4model.com/README.md @@ -0,0 +1,21 @@ +# C4Model Core Diagrams + +The following samples are reproductions with C4-PlantUML from [C4 model core diagrams](http://c4model.com/#coreDiagrams) created by [Simon Brown](http://simonbrown.je/). + +## System Context Diagram + +Source: [C4_Context Diagram Sample.puml](samples/C4model.com/C4_Context%20Diagram%20Sample.puml) + +![systemcontext](http://www.plantuml.com/plantuml/png/xLXhRziw4lskNp7N_T06S3QFFfhDJOp6jj84wpY1xQ1xjoqCMg9ZeH8fa7GTxtR_-mufcPND28Bitc0_N0LePN7cp3b3SlZu81KHQfx4taley9WBYIylAX_F-osaquXHy7l-ZTyVZIzlyP_ERUzs02ykpUCXqb0juuWzrCGS-PshVeOulFwN3qV7dYU_HImbWYI0HcGUgn5zL1TnzC0IoXG4-0yLHRE58EcdA5GpE3uyB7nFoECDbP8yq67qRmf7Rm-BNe86Yh27cC9_FC1dYAYKgsLABpbJcSUnQP4p4l85YeCfYINr_bk4kH22Bt88arPuySuyvek6ShyM0sWmbzFPsOJFMKZ4ijLQyTjWKSBvq8cmmUEDUSpNDXSX5MNVTOzI28cSqL3JV0azikHpLQ-BOuwCUnT_tDwFnXV3yV0V_gXpLP0y8S6t1w75vZnytsztEmMB6M7XGaHAKGPApAaxGBIwFaaeD3eyYG8O4YRXPjZmih42KyxrVsTJj8D0XpaND6nz8e9XFa_F3dH32pg24aL3D1SGHZAOInbnrWH6QIX1SPXG-4xYADHMtc-KXJybMhqhhQFRkt7tzbCV_LBZovNY2UBgFaROJVkUVpaQ3wu_NeqWfbEbNKJqC5C53qnyEniL4QqxUNF7vIiwHWL4De6EOpAXyLvX8ZJEp_El3LWRWKH2xbSDg5_qY7mQ63vdhL_B8w2o0Os9bYndKLfJABgELvoEcYlGupLwDgNdZSOUh8oB3TOFJZLvcvPQOHGDPcodU5_OmS6Pn7bykb4eMvzp-Azd1xgzTN3GMCi1SfiAdZJHZ1VwEgVjDZMXiR_VQknLObXXBfXhOr7NyjR6AVygTp3UBa6tJJCysz_N3AkXN9uLHXPy3RrFSGPEkDWccQYw36ltf3wTKnjZo-GYPWNaxabsSjpT9hcwi3ePxkwUsd9ilc0bHCj3kn2L3AjbRAJlVflqtTyv0kztJruPSbf2iJoi2r3DxRvMsdhRf4qlqOwytkw9AyUcKrL2j3nq1KG9mrwjz0ssIP_UtBWQ1xycVoNWMBpACrYgmyMe9bcjvESE6gvedDBQ1p1qjjN1mFAzlDR2_kTP58QKVUtkcuOrd_iAd_idV0OLFeCdV7eLFhtSnnmN0vxIKxW06PaTekHJjI02NvPIqUHlQ78deeI89T2OweEVF8NHp364Y87KMDfZE4zJBXGY5fpkA4yn067Xfg_CzzRn4WBE6BxH41G7LH7ccYdAGhGbyp2YB40T_dSgbXCUBfjwepy3q-DHG68Jbt6s__DBQWWr4L96OKQCpvLvvzFru27zJcEUQYK8IJ0jsnxUx_p1yBO_RdzSdTmFJzuSls_RTl-V8t_Gl-YD7SDt9_hF6Wx_68xycqBxqT6xatRN1N8C_swUkdS59STZFNquQxNSmxizwRht5SQqqg2zSIBTo8XxSZvy_xhzxhBq94yVaHmZyVWPETjUg2H_Sg7_Iibdm_yvEDkHLKhrTUVzPUUmEi_FoDaTxTLvtlqUvTFrw6hSyp_w_QutqtL3MebUJ1ye2xEx0-_7EQmz-7k4Hl33-t6sCJ9QkGLaezIOM7LbjgkK5vqsCj7IXdaLNGUrXcMWrWa56LdkfSjByFD2NxSU6i8rRaCoXMit5LLW-YMaCX1FetvXNzZAeYp2HeYn_wXgS7OhJm7QHTv5G6Ku6szeUhM62ZkTNV8MR2VYRWINxxQPhoQ_Q-QhmkrmRMWfrhmzXC-PN_abt_Pxm0vdYY0r8M4HgLd4G3tVhZ2mmKlsWQEDNTuscxpVqIc84H89MoCYWbcaa8nihXoGXS7LRzbjwO7Cf89KP3hTVhFOmKNluhhl3mgxjpUlJxhTjxzezsRp-2oBj9LJlRVuQtd-_rYUxIot5SSzJxkbf-wDEHH7Oh4yrU5XI_NkX8fbtIMtKq5t1DMlwTQrPbctAieAUf9ofj-B1TqwLPRouehmgdf9e7kGndC9wNOBW2LRiW0CtOAjOnHgzYvb-URkjey5hr2MJzwssvU7lwWiMtMxbUKNX-OfgSLMGsajVeydfUx9NxLucrhyyiUPizpbm7PAPMPEJ-HcTX3yMPKzX_-pAxlLKLRPy-Rdh-pbvBmdHgsd8XMlTkAcs66lGnYH1prxfroOCYGOLT0c3AVrGsxhUVcvD9q4JMXaFqXihJfpgNX2HGCRBo38VwssfnEqQfgA36dkQRu12G8-rmKGxzhpurSqaOXHGiF0np5VI1j3wdBwFQ8BY1WAICpk5GWkAKh7ZiHwfAQfe0dvHY4bouJcmRtY-KaJyFSJ4iKWRTZHZ6A4V8hSH87WkjI3_nZCi3CfqA83GXOH4wFfXY13p3DzGjHGSK4ba3XUvIp03p393LrfLdwp84q9mYG9j1d-eYemqWOqphejI-szf18_urUZDElG8MMXp3NeZEO6neFAJGF3-6PqLxHAYk0Vq7gUnFy3) + +## Container Diagram + +Source: [C4_Container Diagram Sample.puml](samples/C4model.com/C4_Container%20Diagram%20Sample.puml) + +![container](http://www.plantuml.com/plantuml/png/xLXjRziu4lxkNp7h0jS6S2xfUowN6XlRIfCzsp5ivzgzjZ1eYRPvAv42ISVrNVU_tv2IMLcALh2z6zo7LO1M9fzvvfaHENpvKMaYzJ8AQq-XBK8X5RuygNngjHy2EcESWjVrUbv_FBcwnN_QjztR8JoviayDcKPw7J8-tv5pxBMl-mdZwEPV7Zn_KQkfNnYFYIGH88WiGpscN_LboEOyebo3Z_zGcOMj98a_i40luCNfQQOz8bzxL2aofoFs7mhFNvzchIJrDU7paC9_Qu3F25cfqEkONWck4uiNjaSjI21M61pCIAXexTSipQMKOfLIsBJ2apVsiIs6gjYQTV3hWvekBgPYoGCYrytcHbzEHOdcquA7d8vNzh6jBI43AilQpHUb412re86H-HIwP2sMUhTF70fKtBty-VPkFBaSJKR_yCRjwqp8K-B_CfScs5I7vtcjJZk3M10Uh2JJcdBGSacB0yH4roSHXNfRHCo74U4AUgDwBHahC1F2_7SnGnpuniqxIOFc1o8vvlFyuiHqDA4jAT4qGBY4W2b_gHGJl06Sqa215Z2bS4z25XXKxGVAW-yXkdWtiOvl1vFExOS-siNMLcWjK34ptnXfy_YkTpMU36_UNuyXf3DjJ2IRBtJ60XFVIaO5exjEtjHm_OnEC0AY6a0d8PdIy2Wp4UhltgMjTTWQWKH1QbTDQ5xCY7oO63ublL_AFM1aGneI4x9Qi7Z7GD5qij7qlB4XVR4bpwNqNRr-11jmjiFPmRaHxzAoanjD_GK_oDzdVd9oeN0Ud-SAPVDJIl_buiJqDqzEwbivG6qpAQ86maJcMwUoYrqDg1yVD-j7bHmki29P4UDOj_BMmYd_R6DWh8i2Ytr6uSNniL5OJLNKMG5ov5liVOepS2haFid4gCkv3axgWpbrFlPCBd9MKnwQvBpmpZx9DOMraE7EuQajvnOhNYAqt7MHeb9XTHYvzDtjaxwxGI70kyEJLyOSbqiiaryWgDPsjrFQklkapIpHXV2wXoUkd9lET8dGSjSb51KAkpkbRxXF-ipcfXZZyF3y_GOv5g_o39R6KUIe5baToVSTD5pJCAOx7y3Gs5K7IokEqbeBnvyMB0We_z8vjXrRDdSLDdSFs0mhR8OFs7GhRBgfZJqk-YAcvt09YjaTeX8plI8INzPAq-Yl21b85X6v1XfIS_1Jvp1U5830E2Z3PIn6opWMKYDZncX0HOmE20_ojYhTMuThy0Nd-4O3q09qXPiRhYaF44kM0QFSnpYyUohNKn6i6sQZlm3xnPbFGkkN2txylIMsWXf8gLYG2CCnOT_5RDjvGEzfA68J2L8IJCk-X_U1DnpTzYUjzvkJ--dPgnTlMwxV-pZsXltBxgG0V7Dc_XnmzFDexFKo_S-VlpbhTOf41U3VxBFhNK79yTXC7y6RpUBXtPrqY_SL5be9QELEfBcC54_EfszVjjvSbPxawLSKnqauUKJDxYjKYZ-xD7-bufFX_oYQtO0fa_go_VQgVLgTvqVKN1pjrNa-_1xbmytu6YyCtdlzJcrXwePo8TP2EgSyIEuEQj_UmTQ3lyS8Wc-rRnUvaT5C4P2CKWjnqPLXDodF6kKoqJJ0j8fkapfW6Qapme1iMCLBbwVW9OL-vtfe1Uzm6v94k7rJKK5cNWAgVFamwsV-cMyG9HxoUYVULxs3PZSZgiKRviC2g73d_8tiLzqX2ZUTY-8TsM72dOTolVjclbhymPclS7V0jQ6JkEFj8NnAxCel-VRV0xO5rmIbIGKhfXUCWtwyNQ7ld9Vi0yUvNTu-cxo_ev4V8YKATY0Y_GNJA4OrDWQe8k75j-Isz4GbeOBIP3RRVxFOnaNlygRl3JExjrSlppgTrx_JxitbyL4MQHTEzTxYp-Nv_sDvThEyK77SURfGUdQ_COViICoMfrrqk59zkA1SMI-AExoWku1sh-dETCUoxg8eA-XHBBXvpnPqPrHPohChmhFg9O4UGHmk5SJxBG1ERCa2C2eMRECZKxCFASkzmMqV2rwcB9-zRhMkJd-dikoYEwmiFpcrJqajTZ6KrkAtU5BgdErUY_-inSOejzevNZUZ4FKKOOKFaS3S6FYZ2djA_qSNTXT7MM5Fkn-_i9UBgpqmQ6kQwJ1Jjo5WP6xcxKn8Mu0afnfQXEE4dgVxzLejFP76Kxy1zUG72HsglLHQH5JMiVCI_FJNPcCwHLJ3rcA8DvQc3OZlYwKfVNZBdZsxAAJnZYF2DkFGy8wHYV5qUFQOBuKfi-1zzHUOIGeqQv1ZZAQ6ieVnpZ1IcelEi8-qa5G12SEDQbz8b9u2qL38o6wAWU1AfLsGgk72Q82MX2lY6nZ-ejhFw73B8xDYyfck7oKLChD3M174VQ1Jk8pZaFdMkz7wRt9Fx1emYgKHr_jdspHtQCZkKP1LhpJ2VJj7ATSMhLq2gNQ1fKjgJ323vBiRr9qJes9YqfJ01mX_I9No9OiJR_XDbY6HfcSWnJqBakm-h6Asv3Pf96Hw3LfypoxSCs9ic8GLPc8gnKfHMPGN6NKzCMMX5MRSVYGHmVniAu2GHSoilsevLQX0w0CKHOc_z3zSaPbFYzA2gVauH9CfKTIe6TAG9DomQOQHlw0HoOp49OO9aiwPqjAYisEm0GkY5dQVW4guJZy3-986vYS9as59bO9GpDrOp2aZCJCJTd1JFi9qPeIvD5QbosI8m4-uR9rSZyS3G0_6kVMEmIT-gJB1KXweTEeg6trlF43e5ZAPlNUAMiJ7NjUoZl8mc-SX9KZu5rX9fb6e5iRafqwhdK6RUQLYafaocKxROVcSHnD8mMNqsp3SQo0ggPShaa5j0AvNnQuxqnhb6assi2EVCWmG0JzYqp8AQ_y3) + +## Component Diagram + +Source: [C4_Component Diagram Sample.puml](samples/C4model.com/C4_Component%20Diagram%20Sample.puml) + +![component](http://www.plantuml.com/plantuml/png/xLfjRziu4lxkNp7h0jS6S2xfUwwN6kiNfScUanYsizszjZ1eYRPvAv42ISVrNVU_tv2I6LcoJh3T3Ux3Aa33a3FFF3CS3b_G7vKcKY-YiFOKEY8KKc7ZIULNg_qGq2dZ5BoUT-tTZCONj_XFvxPtEu0d5_Qh8T9GhqB6PpjYZhpEvKs2EBpwfmVFNzHgwZV6Oo9912X45g4UqQ-w5R8PZoZNuEC_L6R5bfB47rcWv_3Yz3JJ7v6lrrGfCgD3zcyApr-VPhKazJNXiv32Vsg0tn1HgT2hc5u8hXED5tP4pKaWbkWSJ4ceQEttB4nBIh5C8MnOuSaR-zaU0rNipHhuVIkdy_E9MF20o5MpkUQNOr72-RHW8SVZbVriRrl8WCgoVZEZ50AYvZGmD9z2Zwp4GkysnQ50nhtMhxTtet5hE1x-mnjrBZCkJuZ_sqmQPrCUdkUrkvsCn9pmO2cPrfI3bWjQJ13ZtGs9ADGx8c8-30bNS3sirv9SWQaGvjVvL9ZyCMRUIneqFnB9CPxlpa_CG1CwaX9D0nIN433bBvHYWZU0Kneeq08c5Ev9o08ZLVk1yk31HUVlsjVHRN_SlVruWtgnrHLQ2sJCp1mZR5w-vrsCneEh3vSZ2EbK6nN9PdETqS30jvEiO7JNnPighfxHCNf0L0FeE2GJ6Xvb5aBz_VkqjmuR6KWKf7hLWAPXCd8xC7nAHh-KMq3F1ZGancKrP_6EZgBgUCtfUMCD-cA3dWlf-thz2DR2sG6d1-yCUHUMdSnewi_vGVO-yvEJSuNh-5skK3O_fV1Vpa_CUFFafBuH0-GsbI9ge9Z8p7LAkpZKWFhnSRD-L8dX72k25MKSwaRSshZadwKALhj8i3Xc69uV7nk6rL15dXL23dm3_ORY2fm8kKymqUjgh7s3kZscpiQUmKNCAiZ3WvmdtjqdkAQm5YBSFJoqvTXYoKk8bfikGbGoh7OZ5xwxVS9troyuU7TuyCgGupAAvVGB0DNSxdOAMs-Vi9ajkk1Ux_30bMFJgIuXMcww1AA2OM-dy0ts2Pyvt1Hz77o7-9M3O_4gZM2v7qMCQfBLdZoSeE6IXZ7T-GA6oguwM5XnbDPQEFuqPq50-PVkiHtOqBchqBdReZEeq1biqUbLwFHI7NjTz4LCtq4B5BCdH2McUaaaDbPAq-YlADANB29o1JIavkAdti5eNX04na4PBACnNCIna1eHCqfzAc8qG7YGrrNfsJfSWIyunnODG0lG5MQkkAOyG5co21ZbFlhXtLEvceXWrJ07_JdO6MS-2QrTBlZnGqzi2JKGKh4W8OOvOTjYkcayeFSq5B7n1249XcNVotlV6mnlRyRj3-kR--dPgnTlssxS-sNa3MvQlN51yCsP-N62mr-78-ywC_xy-PkpThS8L13yc_rsVIiekHwRvIDuixdrycuZjEMzmefM2hHpDz9SH8etvzEtBzjlBaflylGhakCa73yYPpSBbUJFMkQdb7oI_e_1sMLMATMNdRSNdTFgE3yYvsAsLyVvy7UKZrUZot7F--3TT6jpKpUKSx4MqXdbGV9sKFls7ZO-_7k4Gl2jzkqybndDL0AIBBKYphiosNN8iqgvI3IjO38bcw1Ei0pKAQ53rgtYeyjJyD92lsizj8HtU0r9FDnygQW0Cus0AbzkH_tCF_ErH8c5FD-nzrNlmDcjY6ho3dbF1ohDENj3EwixUE6MSu6y0pkGkBDGpdVVo5UJFpJobURsVpPq57TyFOHFYLxv8z_-Py2Eu9eWDQbWoVISST2FTohqdV6IS-0eTyhRvv3tTrJoGuH4maw8I7_ED99HZRK2ih2uffMybfwen5LGcaod-nyMExZfjQvkl47czFRgvLct-_exdTvS71zbatRkL9yj_joU_p-sPxVAYvNHtQUBfMVN5tF8PcAsFEt2mvNgmmdboxeZTt11BpgqUqrtgZkMTUT5MK6FOi5DErlGdL9bAS_k2C-gjmHw176uK13ljm4uiYKRmB1Oi8sDJCq-f2nVzszliE1bolBPwtRxulGxbMNdtM5b-Scf_KfgiVEXj1Q_nPjIzsoFMlndBKObjzlbSDsAib9k7d9IBWN-gBgUml_HTTtvKLBN7Oz7h-lbv6fRShQccGupV25WP6QMxLH8MtyafnhQXEDwdgN7TJY6LlyAMd4SCfya_tNWOIDJCMb0VPZKvZwPqQnW7OV-HUu94cMnjfKB7L-4H9gHlXJt3Bq04eQs7B8rWKbAOBhWli51X_JA54r_eRI8J6s-PyJeC0bBEe6954k5MqBzA4CjCioknOI5bfGn-Gk9Y6Hyqpg4B6AcAgl5HA5reGzW4rbxwIzJfvbFDsa54xJU9PfCYAA6oO269C65TJSC_JcDY1aTQY6HvGBT0qbdJ6bffP4VJbfasmsO4pMtEmUou3eDF_YI1kPF4c964j-dIa4ePYOzjMzOPUwCqKIPS164bIIYkIHmJ9BPIYyTFdQuy6Ju0C7zNBlu9CR5Wcji8NskY0ta0u_QbeC4YHaQpQLU_IZPIZ9BJh4PD-pm5wOm62Gfmf3Q7Bl-kGC3glH3Tzs0Xg5O9Z5LPY8D1FB7vlQPLqaCZdAMdLE8c3PXk8WYP5zD8vk2Bb3sp0845A88kKhZpAHbue9O8AAelv2Ob2OCQVDXr4vTB8qVRKesSZ-NqfA693sTA1HF9hK1_fmaVyH4gQMGWPkt70rCeIdnIK3_HoB1XPNOGge5YJ88div3v30s9y9OjgO7D4odFnE1EqKnGcxyOP8SlQBGWxfTdGDA0lWBBB6BWXQ6tK_TTYUZuB0iR0feAynrx-HoDEeFKHYF74RMbiY4fXFx2NTr9-U47DSIGIiPLQEXJ3NOZvG7YoZyBm00) \ No newline at end of file