├── .gitignore ├── images ├── person_icon.png └── vscode_c4plantuml_snippets.gif ├── samples ├── C4_Context Diagram Sample - bigbankplc.puml ├── C4_Context Diagram Sample - enterprise.puml ├── C4_Context Diagram Sample - bigbankplc-landscape.puml ├── C4_Component Diagram Sample - bigbankplc.puml ├── C4_Container Diagram Sample - bigbankplc.puml ├── C4_Container Diagram Sample - message bus.puml ├── C4_Container Diagram Sample - techtribesjs.puml └── C4CoreDiagrams.md ├── LICENSE ├── C4_Component.puml ├── C4_Container.puml ├── C4_Context.puml ├── C4.puml ├── .vscode └── C4.code-snippets ├── LayoutOptions.md └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | -------------------------------------------------------------------------------- /images/person_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stawirej/C4-PlantUML/HEAD/images/person_icon.png -------------------------------------------------------------------------------- /images/vscode_c4plantuml_snippets.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stawirej/C4-PlantUML/HEAD/images/vscode_c4plantuml_snippets.gif -------------------------------------------------------------------------------- /samples/C4_Context Diagram Sample - bigbankplc.puml: -------------------------------------------------------------------------------- 1 | @startuml 2 | '!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Context.puml 3 | ' uncomment the following line and comment the first to use locally 4 | !include ../C4_Context.puml 5 | 6 | LAYOUT_WITH_LEGEND() 7 | 8 | title System Context diagram for Internet Banking System 9 | 10 | Person(customer, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.") 11 | System(banking_system, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.") 12 | 13 | System_Ext(mail_system, "E-mail system", "The internal Microsoft Exchange e-mail system.") 14 | System_Ext(mainframe, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") 15 | 16 | Rel(customer, banking_system, "Uses") 17 | Rel_Back(customer, mail_system, "Sends e-mails to") 18 | Rel_Neighbor(banking_system, mail_system, "Sends e-mails", "SMTP") 19 | Rel(banking_system, mainframe, "Uses") 20 | @enduml 21 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Ricardo Niepel 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /samples/C4_Context Diagram Sample - enterprise.puml: -------------------------------------------------------------------------------- 1 | @startuml "enterprise" 2 | '!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Context.puml 3 | ' uncomment the following line and comment the first to use locally 4 | !include ../C4_Context.puml 5 | 6 | LAYOUT_TOP_DOWN() 7 | 'LAYOUT_AS_SKETCH() 8 | LAYOUT_WITH_LEGEND() 9 | 10 | Person(customer, "Customer", "A customer of Widgets Limited.") 11 | 12 | Enterprise_Boundary(c0, "Widgets Limited") { 13 | Person(csa, "Customer Service Agent", "Deals with customer enquiries.") 14 | 15 | System(ecommerce, "E-commerce System", "Allows customers to buy widgts online via the widgets.com website.") 16 | 17 | System(fulfilment, "Fulfilment System", "Responsible for processing and shipping of customer orders.") 18 | } 19 | 20 | System(taxamo, "Taxamo", "Calculates local tax (for EU B2B customers) and acts as a front-end for Braintree Payments.") 21 | 22 | System(braintree, "Braintree Payments", "Processes credit card payments on behalf of Widgets Limited.") 23 | 24 | System(post, "Jersey Post", "Calculates worldwide shipping costs for packages.") 25 | 26 | Rel_R(customer, csa, "Asks questions to", "Telephone") 27 | 28 | Rel_R(customer, ecommerce, "Places orders for widgets using") 29 | 30 | Rel(csa, ecommerce, "Looks up order information using") 31 | 32 | Rel_R(ecommerce, fulfilment, "Sends order information to") 33 | 34 | Rel_D(fulfilment, post, "Gets shipping charges from") 35 | 36 | Rel_D(ecommerce, taxamo, "Delegates credit card processing to") 37 | 38 | Rel_L(taxamo, braintree, "Uses for credit card processing") 39 | 40 | Lay_D(customer, braintree) 41 | 42 | @enduml -------------------------------------------------------------------------------- /samples/C4_Context Diagram Sample - bigbankplc-landscape.puml: -------------------------------------------------------------------------------- 1 | @startuml 2 | '!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Context.puml 3 | ' uncomment the following line and comment the first to use locally 4 | !include ../C4_Context.puml 5 | 6 | 'LAYOUT_TOP_DOWN() 7 | 'LAYOUT_AS_SKETCH() 8 | LAYOUT_WITH_LEGEND() 9 | 10 | title System Landscape diagram for Big Bank plc 11 | 12 | Person(customer, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.") 13 | 14 | Enterprise_Boundary(c0, "Big Bank plc") { 15 | System(banking_system, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.") 16 | 17 | System_Ext(atm, "ATM", "Allows customers to withdraw cash.") 18 | System_Ext(mail_system, "E-mail system", "The internal Microsoft Exchange e-mail system.") 19 | 20 | System_Ext(mainframe, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") 21 | 22 | Person_Ext(customer_service, "Customer Service Staff", "Customer service staff within the bank.") 23 | Person_Ext(back_office, "Back Office Staff", "Administration and support staff within the bank.") 24 | } 25 | 26 | Rel_Neighbor(customer, banking_system, "Uses") 27 | Rel_R(customer, atm, "Withdraws cash using") 28 | Rel_Back(customer, mail_system, "Sends e-mails to") 29 | 30 | Rel_R(customer, customer_service, "Asks questions to", "Telephone") 31 | 32 | Rel_D(banking_system, mail_system, "Sends e-mail using") 33 | Rel_R(atm, mainframe, "Uses") 34 | Rel_R(banking_system, mainframe, "Uses") 35 | Rel_D(customer_service, mainframe, "Uses") 36 | Rel_U(back_office, mainframe, "Uses") 37 | 38 | Lay_D(atm, banking_system) 39 | 40 | Lay_D(atm, customer) 41 | Lay_U(mail_system, customer) 42 | @enduml 43 | -------------------------------------------------------------------------------- /samples/C4_Component Diagram Sample - bigbankplc.puml: -------------------------------------------------------------------------------- 1 | @startuml 2 | '!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Component.puml 3 | ' uncomment the following line and comment the first to use locally 4 | !include ../C4_Component.puml 5 | 6 | LAYOUT_WITH_LEGEND() 7 | 8 | title Component diagram for Internet Banking System - API Application 9 | 10 | Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.") 11 | Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.") 12 | ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") 13 | System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") 14 | 15 | Container_Boundary(api, "API Application") { 16 | Component(sign, "Sign In Controller", "MVC Rest Controlle", "Allows users to sign in to the internet banking system") 17 | Component(accounts, "Accounts Summary Controller", "MVC Rest Controlle", "Provides customers with a summory of their bank accounts") 18 | Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.") 19 | Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.") 20 | 21 | Rel(sign, security, "Uses") 22 | Rel(accounts, mbsfacade, "Uses") 23 | Rel(security, db, "Read & write to", "JDBC") 24 | Rel(mbsfacade, mbs, "Uses", "XML/HTTPS") 25 | } 26 | 27 | Rel(spa, sign, "Uses", "JSON/HTTPS") 28 | Rel(spa, accounts, "Uses", "JSON/HTTPS") 29 | 30 | Rel(ma, sign, "Uses", "JSON/HTTPS") 31 | Rel(ma, accounts, "Uses", "JSON/HTTPS") 32 | @enduml 33 | -------------------------------------------------------------------------------- /samples/C4_Container Diagram Sample - bigbankplc.puml: -------------------------------------------------------------------------------- 1 | @startuml 2 | '!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml 3 | ' uncomment the following line and comment the first to use locally 4 | !include ../C4_Container.puml 5 | 6 | LAYOUT_TOP_DOWN() 7 | 'LAYOUT_AS_SKETCH() 8 | LAYOUT_WITH_LEGEND() 9 | 10 | title Container diagram for Internet Banking System 11 | 12 | Person(customer, Customer, "A customer of the bank, with personal bank accounts") 13 | 14 | System_Boundary(c1, "Internet Banking") { 15 | Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA") 16 | Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to cutomers via their web browser") 17 | Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device") 18 | ContainerDb(database, "Database", "SQL Database", "Stores user registraion information, hased auth credentials, access logs, etc.") 19 | Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API") 20 | } 21 | 22 | System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system") 23 | System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") 24 | 25 | Rel(customer, web_app, "Uses", "HTTPS") 26 | Rel(customer, spa, "Uses", "HTTPS") 27 | Rel(customer, mobile_app, "Uses") 28 | 29 | Rel_Neighbor(web_app, spa, "Delivers") 30 | Rel(spa, backend_api, "Uses", "async, JSON/HTTPS") 31 | Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS") 32 | Rel_Back_Neighbor(database, backend_api, "Reads from and writes to", "sync, JDBC") 33 | 34 | Rel_Back(customer, email_system, "Sends e-mails to") 35 | Rel_Back(email_system, backend_api, "Sends e-mails using", "sync, SMTP") 36 | Rel_Neighbor(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS") 37 | @enduml -------------------------------------------------------------------------------- /samples/C4_Container Diagram Sample - message bus.puml: -------------------------------------------------------------------------------- 1 | @startuml "bigbankplc" 2 | '!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml 3 | ' uncomment the following line and comment the first to use locally 4 | !include ../C4_Container.puml 5 | 6 | skinparam wrapWidth 200 7 | skinparam maxMessageSize 200 8 | 9 | LAYOUT_TOP_DOWN() 10 | 'LAYOUT_AS_SKETCH() 11 | LAYOUT_WITH_LEGEND() 12 | 13 | 14 | Person(customer, Customer, "A customer") 15 | 16 | System_Boundary(c1, "Customer Information") { 17 | 18 | Container(app, "Customer Application", "Javascript, Angular", "Allows customers to manage their profile") 19 | 20 | Container(customer_service, "Customer Service", "Java, Spring Boot", "The point of access for customer information") 21 | 22 | Container(message_bus, "Message Bus", "RabbitMQ", "Transport for business events") 23 | 24 | Container(reporting_service, "Reporting Service", "Ruby", "Creates normalised data for reporting purposes") 25 | 26 | Container(audit_service, "Audit Service", "C#/.NET", "Provides organisation-wide auditing facilities") 27 | 28 | ContainerDb(customer_db, "Customer Database", "Oracle 12c", "Stores customer information") 29 | 30 | ContainerDb(reporting_db, "Reporting Database", "MySQL", "Stores a normalized version of all business data for ad hoc reporting purposes") 31 | 32 | Container(audit_store, "Audit Store", "Event Store", "Stores information about events that have happened") 33 | } 34 | 35 | Rel(customer, app, "Uses", "HTTPS") 36 | 37 | Rel_R(app, customer_service, "Updates customer information using", "async, JSON/HTTPS") 38 | 39 | Rel_L(customer_service, app, "Sends events to", "WebSocket") 40 | Rel_R(customer_service, message_bus, "Sends customer update events to") 41 | Rel(customer_service, customer_db, "Stores data in", "JDBC") 42 | 43 | Rel(message_bus, reporting_service, "Sends customer update events to") 44 | Rel(message_bus, audit_service, "Sends customer update events to") 45 | 46 | Rel(reporting_service, reporting_db, "Stores data in") 47 | Rel(audit_service, audit_store, "Stores events in") 48 | 49 | Lay_R(reporting_service, audit_service) 50 | 51 | @enduml -------------------------------------------------------------------------------- /samples/C4_Container Diagram Sample - techtribesjs.puml: -------------------------------------------------------------------------------- 1 | @startuml "techtribesjs" 2 | '!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml 3 | ' uncomment the following line and comment the first to use locally 4 | !include ../C4_Container.puml 5 | 6 | LAYOUT_TOP_DOWN() 7 | 'LAYOUT_AS_SKETCH() 8 | LAYOUT_WITH_LEGEND() 9 | 10 | 11 | Person_Ext(anonymous_user, "Anonymous User") 12 | Person(aggregated_user, "Aggregated User") 13 | Person(administration_user, "Administration User") 14 | 15 | System_Boundary(c1, "techtribes.js"){ 16 | 17 | 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") 18 | 19 | ContainerDb(rel_db, "Relational Database", "MySQL 5.5.x", "Stores people, tribes, tribe membership, talks, events, jobs, badges, GitHub repos, etc.") 20 | 21 | Container(filesystem, "File System", "FAT32", "Stores search indexes") 22 | 23 | ContainerDb(nosql, "NoSQL Data Store", "MongoDB 2.2.x", "Stores from RSS/Atom feeds (blog posts) and tweets") 24 | 25 | Container(updater, "Updater", "Java 7 Console App", "Updates profiles, tweets, GitHub repos and content on a scheduled basis") 26 | } 27 | 28 | System_Ext(twitter, "Twitter") 29 | System_Ext(github, "GitHub") 30 | System_Ext(blogs, "Blogs") 31 | 32 | 33 | Rel(anonymous_user, web_app, "Uses", "HTTPS") 34 | Rel(aggregated_user, web_app, "Uses", "HTTPS") 35 | Rel(administration_user, web_app, "Uses", "HTTPS") 36 | 37 | Rel(web_app, rel_db, "Reads from and writes to", "SQL/JDBC, post 3306") 38 | Rel(web_app, filesystem, "Reads from") 39 | Rel(web_app, nosql, "Reads from", "MongoDB wire protocol, port 27017") 40 | 41 | Rel_U(updater, rel_db, "Reads from and writes data to", "SQL/JDBC, post 3306") 42 | Rel_U(updater, filesystem, "Writes to") 43 | Rel_U(updater, nosql, "Reads from and writes to", "MongoDB wire protocol, port 27017") 44 | 45 | Rel(updater, twitter, "Gets profile information and tweets from", "HTTPS") 46 | Rel(updater, github, "Gets information about public code repositories from", "HTTPS") 47 | Rel(updater, blogs, "Gets content using RSS and Atom feeds from", "HTTP") 48 | 49 | Lay_R(rel_db, filesystem) 50 | 51 | @enduml -------------------------------------------------------------------------------- /C4_Component.puml: -------------------------------------------------------------------------------- 1 | !include https://raw.githubusercontent.com/stawirej/C4-PlantUML/master/C4_Container.puml 2 | ' uncomment the following line and comment the first to use locally 3 | ' !include C4_Container.puml 4 | 5 | ' Scope: A single container. 6 | ' Primary elements: Components within the container in scope. 7 | ' Supporting elements: Containers (within the software system in scope) plus people and software systems directly connected to the components. 8 | ' Intended audience: Software architects and developers. 9 | 10 | ' Colors 11 | ' ################################## 12 | 13 | !procedure COMPONENT_BG_COLOR() 14 | #85BBF0 15 | !endprocedure 16 | 17 | !procedure EXTERNAL_COMPONENT_BG_COLOR() 18 | #BBBBBB 19 | !endprocedure 20 | 21 | ' Styling 22 | ' ################################## 23 | 24 | skinparam rectangle<> { 25 | StereotypeFontColor ELEMENT_FONT_COLOR() 26 | FontColor #000000 27 | BackgroundColor COMPONENT_BG_COLOR() 28 | BorderColor #78A8D8 29 | } 30 | 31 | skinparam database<> { 32 | StereotypeFontColor ELEMENT_FONT_COLOR() 33 | FontColor #000000 34 | BackgroundColor COMPONENT_BG_COLOR() 35 | BorderColor #78A8D8 36 | } 37 | 38 | skinparam rectangle<> { 39 | StereotypeFontColor ELEMENT_FONT_COLOR() 40 | FontColor #000000 41 | BackgroundColor EXTERNAL_COMPONENT_BG_COLOR() 42 | BorderColor #8A8A8A 43 | } 44 | 45 | skinparam database<> { 46 | StereotypeFontColor ELEMENT_FONT_COLOR() 47 | FontColor #000000 48 | BackgroundColor EXTERNAL_COMPONENT_BG_COLOR() 49 | BorderColor #8A8A8A 50 | } 51 | 52 | ' Layout 53 | ' ################################## 54 | 55 | !procedure LAYOUT_WITH_LEGEND() 56 | hide stereotype 57 | legend right 58 | |= |= Type | 59 | | | person | 60 | | | external person | 61 | | | system | 62 | | | external system | 63 | | | container | 64 | | | component | 65 | | | external container | 66 | | | external component | 67 | endlegend 68 | !endprocedure 69 | 70 | ' Elements 71 | ' ################################## 72 | 73 | !unquoted procedure Component(e_alias, e_label, e_techn) 74 | rectangle "==e_label\n//[e_techn]//" <> as e_alias 75 | !endprocedure 76 | 77 | !unquoted procedure Component(e_alias, e_label, e_techn, e_descr) 78 | rectangle "==e_label\n//[e_techn]//\n\n e_descr" <> as e_alias 79 | !endprocedure 80 | 81 | !unquoted procedure ComponentDb(e_alias, e_label, e_techn) 82 | database "==e_label\n//[e_techn]//" <> as e_alias 83 | !endprocedure 84 | 85 | !unquoted procedure ComponentDb(e_alias, e_label, e_techn, e_descr) 86 | database "==e_label\n//[e_techn]//\n\n e_descr" <> as e_alias 87 | !endprocedure 88 | 89 | !unquoted procedure Component_Ext(e_alias, e_label, e_techn) 90 | rectangle "==e_label\n//[e_techn]//" <> as e_alias 91 | !endprocedure 92 | 93 | !unquoted procedure Component_Ext(e_alias, e_label, e_techn, e_descr) 94 | rectangle "==e_label\n//[e_techn]//\n\n e_descr" <> as e_alias 95 | !endprocedure 96 | 97 | !unquoted procedure ComponentDb_Ext(e_alias, e_label, e_techn) 98 | database "==e_label\n//[e_techn]//" <> as e_alias 99 | !endprocedure 100 | 101 | !unquoted procedure ComponentDb_Ext(e_alias, e_label, e_techn, e_descr) 102 | database "==e_label\n//[e_techn]//\n\n e_descr" <> as e_alias 103 | !endprocedure 104 | -------------------------------------------------------------------------------- /C4_Container.puml: -------------------------------------------------------------------------------- 1 | !include https://raw.githubusercontent.com/stawirej/C4-PlantUML/master/C4_Context.puml 2 | ' uncomment the following line and comment the first to use locally 3 | ' !include C4_Context.puml 4 | 5 | ' Scope: A single software system. 6 | ' Primary elements: Containers within the software system in scope. 7 | ' Supporting elements: People and software systems directly connected to the containers. 8 | ' Intended audience: Technical people inside and outside of the software development team; including software architects, developers and operations/support staff. 9 | 10 | ' Colors 11 | ' ################################## 12 | 13 | !procedure CONTAINER_BG_COLOR() 14 | #438DD5 15 | !endprocedure 16 | 17 | !procedure EXTERNAL_CONTAINER_BG_COLOR() 18 | #AAAAAA 19 | !endprocedure 20 | 21 | ' Styling 22 | ' ################################## 23 | 24 | skinparam rectangle<> { 25 | StereotypeFontColor ELEMENT_FONT_COLOR() 26 | FontColor ELEMENT_FONT_COLOR() 27 | BackgroundColor CONTAINER_BG_COLOR() 28 | BorderColor #3C7FC0 29 | } 30 | 31 | skinparam database<> { 32 | StereotypeFontColor ELEMENT_FONT_COLOR() 33 | FontColor ELEMENT_FONT_COLOR() 34 | BackgroundColor CONTAINER_BG_COLOR() 35 | BorderColor #3C7FC0 36 | } 37 | 38 | skinparam rectangle<> { 39 | StereotypeFontColor ELEMENT_FONT_COLOR() 40 | FontColor ELEMENT_FONT_COLOR() 41 | BackgroundColor EXTERNAL_CONTAINER_BG_COLOR() 42 | BorderColor #8A8A8A 43 | } 44 | 45 | skinparam database<> { 46 | StereotypeFontColor ELEMENT_FONT_COLOR() 47 | FontColor ELEMENT_FONT_COLOR() 48 | BackgroundColor EXTERNAL_CONTAINER_BG_COLOR() 49 | BorderColor #8A8A8A 50 | } 51 | 52 | ' Layout 53 | ' ################################## 54 | 55 | !procedure LAYOUT_WITH_LEGEND() 56 | hide stereotype 57 | legend right 58 | |= |= Type | 59 | | | person | 60 | | | external person | 61 | | | system | 62 | | | external system | 63 | | | container | 64 | | | external container | 65 | endlegend 66 | !endprocedure 67 | 68 | ' Elements 69 | ' ################################## 70 | 71 | !unquoted procedure Container(e_alias, e_label, e_techn) 72 | rectangle "==e_label\n//[e_techn]//" <> as e_alias 73 | !endprocedure 74 | 75 | !unquoted procedure Container(e_alias, e_label, e_techn, e_descr) 76 | rectangle "==e_label\n//[e_techn]//\n\n e_descr" <> as e_alias 77 | !endprocedure 78 | 79 | !unquoted procedure ContainerDb(e_alias, e_label, e_techn) 80 | database "==e_label\n//[e_techn]//" <> as e_alias 81 | !endprocedure 82 | 83 | !unquoted procedure ContainerDb(e_alias, e_label, e_techn, e_descr) 84 | database "==e_label\n//[e_techn]//\n\n e_descr" <> as e_alias 85 | !endprocedure 86 | 87 | !unquoted procedure Container_Ext(e_alias, e_label, e_techn) 88 | rectangle "==e_label\n//[e_techn]//" <> as e_alias 89 | !endprocedure 90 | 91 | !unquoted procedure Container_Ext(e_alias, e_label, e_techn, e_descr) 92 | rectangle "==e_label\n//[e_techn]//\n\n e_descr" <> as e_alias 93 | !endprocedure 94 | 95 | !unquoted procedure ContainerDb_Ext(e_alias, e_label, e_techn) 96 | database "==e_label\n//[e_techn]//" <> as e_alias 97 | !endprocedure 98 | 99 | !unquoted procedure ContainerDb_Ext(e_alias, e_label, e_techn, e_descr) 100 | database "==e_label\n//[e_techn]//\n\n e_descr" <> as e_alias 101 | !endprocedure 102 | 103 | 104 | ' Boundaries 105 | ' ################################## 106 | 107 | !unquoted procedure Container_Boundary(e_alias, e_label) 108 | Boundary(e_alias, e_label, "Container") 109 | !endprocedure 110 | 111 | -------------------------------------------------------------------------------- /C4_Context.puml: -------------------------------------------------------------------------------- 1 | !include https://raw.githubusercontent.com/stawirej/C4-PlantUML/master/C4.puml 2 | ' uncomment the following line and comment the first to use locally 3 | ' !include C4.puml 4 | 5 | ' Scope: A single software system. 6 | ' Primary elements: The software system in scope. 7 | ' Supporting elements: People and software systems directly connected to the software system in scope. 8 | ' Intended audience: Everybody, both technical and non-technical people, inside and outside of the software development team. 9 | 10 | ' Colors 11 | ' ################################## 12 | 13 | !procedure PERSON_BG_COLOR() 14 | #08427B 15 | !endprocedure 16 | 17 | !procedure EXTERNAL_PERSON_BG_COLOR() 18 | #686868 19 | !endprocedure 20 | 21 | !procedure SYSTEM_BG_COLOR() 22 | #1168BD 23 | !endprocedure 24 | 25 | !procedure EXTERNAL_SYSTEM_BG_COLOR() 26 | #999999 27 | !endprocedure 28 | 29 | ' Styling 30 | ' ################################## 31 | 32 | skinparam rectangle<> { 33 | StereotypeFontColor ELEMENT_FONT_COLOR() 34 | FontColor ELEMENT_FONT_COLOR() 35 | BackgroundColor PERSON_BG_COLOR() 36 | BorderColor #073B6F 37 | } 38 | 39 | skinparam rectangle<> { 40 | StereotypeFontColor ELEMENT_FONT_COLOR() 41 | FontColor ELEMENT_FONT_COLOR() 42 | BackgroundColor EXTERNAL_PERSON_BG_COLOR() 43 | BorderColor #8A8A8A 44 | } 45 | 46 | skinparam rectangle<> { 47 | StereotypeFontColor ELEMENT_FONT_COLOR() 48 | FontColor ELEMENT_FONT_COLOR() 49 | BackgroundColor SYSTEM_BG_COLOR() 50 | BorderColor #3C7FC0 51 | } 52 | 53 | skinparam rectangle<> { 54 | StereotypeFontColor ELEMENT_FONT_COLOR() 55 | FontColor ELEMENT_FONT_COLOR() 56 | BackgroundColor EXTERNAL_SYSTEM_BG_COLOR() 57 | BorderColor #8A8A8A 58 | } 59 | 60 | skinparam database<> { 61 | StereotypeFontColor ELEMENT_FONT_COLOR() 62 | FontColor ELEMENT_FONT_COLOR() 63 | BackgroundColor SYSTEM_BG_COLOR() 64 | BorderColor #3C7FC0 65 | } 66 | 67 | skinparam database<> { 68 | StereotypeFontColor ELEMENT_FONT_COLOR() 69 | FontColor ELEMENT_FONT_COLOR() 70 | BackgroundColor EXTERNAL_SYSTEM_BG_COLOR() 71 | BorderColor #8A8A8A 72 | } 73 | 74 | !$PERSON_ICON_SCALE=6 75 | 76 | ' Layout 77 | ' ################################## 78 | 79 | !procedure LAYOUT_WITH_LEGEND() 80 | hide stereotype 81 | legend right 82 | |= |= Type | 83 | | | person | 84 | | | external person | 85 | | | system | 86 | | | external system | 87 | endlegend 88 | !endprocedure 89 | 90 | ' Elements 91 | ' ################################## 92 | 93 | !unquoted procedure Person(e_alias, e_label) 94 | rectangle "<&person,scale=$PERSON_ICON_SCALE>\n==e_label" <> as e_alias 95 | !endprocedure 96 | 97 | !unquoted procedure Person(e_alias, e_label, e_descr) 98 | rectangle "<&person,scale=$PERSON_ICON_SCALE>\n==e_label\n\n e_descr" <> as e_alias 99 | !endprocedure 100 | 101 | !unquoted procedure Person_Ext(e_alias, e_label) 102 | rectangle "<&person,scale=$PERSON_ICON_SCALE>\n==e_label" <> as e_alias 103 | !endprocedure 104 | 105 | !unquoted procedure Person_Ext(e_alias, e_label, e_descr) 106 | rectangle "<&person,scale=$PERSON_ICON_SCALE>\n==e_label\n\n e_descr" <> as e_alias 107 | !endprocedure 108 | 109 | !unquoted procedure System(e_alias, e_label) 110 | rectangle "==e_label" <> as e_alias 111 | !endprocedure 112 | 113 | !unquoted procedure System(e_alias, e_label, e_descr) 114 | rectangle "==e_label\n\n e_descr" <> as e_alias 115 | !endprocedure 116 | 117 | !unquoted procedure System_Ext(e_alias, e_label) 118 | rectangle "==e_label" <> as e_alias 119 | !endprocedure 120 | 121 | !unquoted procedure System_Ext(e_alias, e_label, e_descr) 122 | rectangle "==e_label\n\n e_descr" <> as e_alias 123 | !endprocedure 124 | 125 | !unquoted procedure SystemDb(e_alias, e_label) 126 | database "==e_label" <> as e_alias 127 | !endprocedure 128 | 129 | !unquoted procedure SystemDb(e_alias, e_label, e_descr) 130 | database "==e_label\n\n e_descr" <> as e_alias 131 | !endprocedure 132 | 133 | !unquoted procedure SystemDb_Ext(e_alias, e_label) 134 | database "==e_label" <> as e_alias 135 | !endprocedure 136 | 137 | !unquoted procedure SystemDb_Ext(e_alias, e_label, e_descr) 138 | database "==e_label\n\n e_descr" <> as e_alias 139 | !endprocedure 140 | 141 | ' Boundaries 142 | ' ################################## 143 | 144 | !unquoted procedure Enterprise_Boundary(e_alias, e_label) 145 | Boundary(e_alias, e_label, "Enterprise") 146 | !endprocedure 147 | 148 | !unquoted procedure System_Boundary(e_alias, e_label) 149 | Boundary(e_alias, e_label, "System") 150 | !endprocedure -------------------------------------------------------------------------------- /C4.puml: -------------------------------------------------------------------------------- 1 | ' C4-PlantUML, version 1.0.0 2 | ' https://github.com/RicardoNiepel/C4-PlantUML 3 | 4 | ' Colors 5 | ' ################################## 6 | 7 | !procedure ELEMENT_FONT_COLOR() 8 | #FFFFFF 9 | !endprocedure 10 | 11 | ' Styling 12 | ' ################################## 13 | 14 | !$TECHN_FONT_SIZE=12 15 | 16 | skinparam defaultTextAlignment center 17 | 18 | skinparam wrapWidth 200 19 | skinparam maxMessageSize 150 20 | 21 | skinparam rectangle { 22 | StereotypeFontSize 12 23 | shadowing false 24 | } 25 | 26 | skinparam database { 27 | StereotypeFontSize 12 28 | shadowing false 29 | } 30 | 31 | skinparam Arrow { 32 | Color #666666 33 | FontColor #666666 34 | FontSize 12 35 | } 36 | 37 | skinparam rectangle<> { 38 | Shadowing false 39 | StereotypeFontSize 0 40 | FontColor #444444 41 | BorderColor #444444 42 | BorderStyle dashed 43 | } 44 | 45 | ' Layout 46 | ' ################################## 47 | 48 | !procedure LAYOUT_AS_SKETCH() 49 | skinparam backgroundColor #EEEBDC 50 | skinparam handwritten true 51 | skinparam defaultFontName "Comic Sans MS" 52 | center footer Warning: Created for discussion, needs to be validated 53 | !endprocedure 54 | 55 | !procedure LAYOUT_TOP_DOWN() 56 | top to bottom direction 57 | !endprocedure 58 | 59 | !procedure LAYOUT_LEFT_RIGHT() 60 | left to right direction 61 | !endprocedure 62 | 63 | ' Boundaries 64 | ' ################################## 65 | 66 | !unquoted procedure Boundary(e_alias, e_label) 67 | rectangle "==e_label" <> as e_alias 68 | !endprocedure 69 | 70 | !unquoted procedure Boundary(e_alias, e_label, e_type) 71 | rectangle "==e_label\n[e_type]" <> as e_alias 72 | !endprocedure 73 | 74 | ' Relationship 75 | ' ################################## 76 | 77 | !unquoted procedure Rel_(e_alias1, e_alias2, e_label, e_direction="") 78 | e_alias1 e_direction e_alias2 : "===e_label" 79 | !endprocedure 80 | 81 | !unquoted procedure Rel_(e_alias1, e_alias2, e_label, e_techn, e_direction="") 82 | e_alias1 e_direction e_alias2 : "===e_label\n//[e_techn]//" 83 | !endprocedure 84 | 85 | !unquoted procedure Rel(e_from,e_to, e_label) 86 | Rel_(e_from,e_to, e_label, "-->") 87 | !endprocedure 88 | 89 | !unquoted procedure Rel(e_from,e_to, e_label, e_techn) 90 | Rel_(e_from,e_to, e_label, e_techn, "-->") 91 | !endprocedure 92 | 93 | !unquoted procedure Rel_Back(e_to, e_from, e_label) 94 | Rel_(e_to, e_from, e_label, "<--") 95 | !endprocedure 96 | 97 | !unquoted procedure Rel_Back(e_to, e_from, e_label, e_techn) 98 | Rel_(e_to, e_from, e_label, e_techn, "<--") 99 | !endprocedure 100 | 101 | !unquoted procedure Rel_Neighbor(e_from, e_to, e_label) 102 | Rel_(e_from,e_to, e_label, "->") 103 | !endprocedure 104 | 105 | !unquoted procedure Rel_Neighbor(e_from, e_to, e_label, e_techn) 106 | Rel_(e_from,e_to, e_label, e_techn, "->") 107 | !endprocedure 108 | 109 | !unquoted procedure Rel_Back_Neighbor(e_to, e_from, e_label) 110 | Rel_(e_to, e_from, e_label, "<-") 111 | !endprocedure 112 | 113 | !unquoted procedure Rel_Back_Neighbor(e_to, e_from, e_label, e_techn) 114 | Rel_(e_to, e_from, e_label, e_techn, "<-") 115 | !endprocedure 116 | 117 | !unquoted procedure Rel_D(e_from,e_to, e_label) 118 | Rel_(e_from,e_to, e_label, "-DOWN->") 119 | !endprocedure 120 | 121 | !unquoted procedure Rel_D(e_from,e_to, e_label, e_techn) 122 | Rel_(e_from,e_to, e_label, e_techn, "-DOWN->") 123 | !endprocedure 124 | 125 | !unquoted procedure Rel_Down(e_from,e_to, e_label) 126 | Rel_D(e_from,e_to, e_label) 127 | !endprocedure 128 | 129 | !unquoted procedure Rel_Down(e_from,e_to, e_label, e_techn) 130 | Rel_D(e_from,e_to, e_label, e_techn) 131 | !endprocedure 132 | 133 | !unquoted procedure Rel_U(e_from,e_to, e_label) 134 | Rel_(e_from,e_to, e_label, "-UP->") 135 | !endprocedure 136 | 137 | !unquoted procedure Rel_U(e_from,e_to, e_label, e_techn) 138 | Rel_(e_from,e_to, e_label, e_techn, "-UP->") 139 | !endprocedure 140 | 141 | !unquoted procedure Rel_Up(e_from,e_to, e_label) 142 | Rel_U(e_from,e_to, e_label) 143 | !endprocedure 144 | 145 | !unquoted procedure Rel_Up(e_from,e_to, e_label, e_techn) 146 | Rel_U(e_from,e_to, e_label, e_techn) 147 | !endprocedure 148 | 149 | !unquoted procedure Rel_L(e_from,e_to, e_label) 150 | Rel_(e_from,e_to, e_label, "-LEFT->") 151 | !endprocedure 152 | 153 | !unquoted procedure Rel_L(e_from,e_to, e_label, e_techn) 154 | Rel_(e_from,e_to, e_label, e_techn, "-LEFT->") 155 | !endprocedure 156 | 157 | !unquoted procedure Rel_Left(e_from,e_to, e_label) 158 | Rel_L(e_from,e_to, e_label) 159 | !endprocedure 160 | 161 | !unquoted procedure Rel_Left(e_from,e_to, e_label, e_techn) 162 | Rel_L(e_from,e_to, e_label, e_techn) 163 | !endprocedure 164 | 165 | !unquoted procedure Rel_R(e_from,e_to, e_label) 166 | Rel_(e_from,e_to, e_label, "-RIGHT->") 167 | !endprocedure 168 | 169 | !unquoted procedure Rel_R(e_from,e_to, e_label, e_techn) 170 | Rel_(e_from,e_to, e_label, e_techn, "-RIGHT->") 171 | !endprocedure 172 | 173 | !unquoted procedure Rel_Right(e_from,e_to, e_label) 174 | Rel_R(e_from,e_to, e_label) 175 | !endprocedure 176 | 177 | !unquoted procedure Rel_Right(e_from,e_to, e_label, e_techn) 178 | Rel_R(e_from,e_to, e_label, e_techn) 179 | !endprocedure 180 | 181 | ' Layout Helpers 182 | ' ################################## 183 | 184 | !unquoted procedure Lay_D(e_from, e_to) 185 | e_from -[hidden]D- e_to 186 | !endprocedure 187 | 188 | !unquoted procedure Lay_U(e_from, e_to) 189 | e_from -[hidden]U- e_to 190 | !endprocedure 191 | 192 | !unquoted procedure Lay_R(e_from, e_to) 193 | e_from -[hidden]R- e_to 194 | !endprocedure 195 | 196 | !unquoted procedure Lay_L(e_from, e_to) 197 | e_from -[hidden]L- e_to 198 | !endprocedure 199 | -------------------------------------------------------------------------------- /samples/C4CoreDiagrams.md: -------------------------------------------------------------------------------- 1 | # C4 Model Diagrams 2 | 3 | The following samples are reproductions with C4-PlantUML from [C4 model core diagrams](http://c4model.com/#coreDiagrams) created by [Simon Brown](http://simonbrown.je/). 4 | 5 | ## Core Diagrams 6 | 7 | ### System Context Diagram 8 | 9 | Source: [C4_Context Diagram Sample - bigbankplc.puml](C4_Context%20Diagram%20Sample%20-%20bigbankplc.puml) 10 | 11 | ![System Context diagram for Internet Banking System](http://www.plantuml.com/plantuml/png/VLF1Zjem4BqZyGzJBgKI2vUUUjfT6hKh0KKBgEefcZX3i71iP4yA_7t78Q51qDxiyPitxxsHdmEZvweq_Tu7RPMfSggyWHtp8NoPJ3mUnuNcNPLLWRnobidoMBboyguL-jmjD1t8JAQVdvO6BM_ciqc9WSbBAPr6_8d7Xvh_8rHMEajX0DuHR9qnxgXj0KPR0hGvt3nh7-JaG2Q3SGgDEKUILYRS3UZtPY-_VcpMwS-tzVTqbdnB5bzZbJKRWjLPP9NGj42kiV1OYWeFRrBobXXUqUwZe0iszYx91sU7gWhiIl8Z65mgQAxWQVCsaCSNQ97WjhMDJ50ZE4g6S6WxOmrGALTP3kF1ftxlCd2ONIZJK5-5xn_Awb4nlN2T5s9KlpKTGLlnL29hPm4pLzLnQdyxTLJdNUAUu83d6Ff5I2ibJKuyB56RlrgIftY7S5Mm5dkw5YYUvbfv5zoM8Jcf7Tg2WBeD7PijjztA0aY8vktvWSqLEqy1PFjjeaeAq2JrmEmra577B7kq0LM4oOrODMRVoNHsUnV_9b28G86bhwZs7UnjDYkoUMWCnqsqJGlInIvp_cwp_sclNS_NouRZKUirkLRWin387_W3 "System Context diagram for Internet Banking System") 12 | 13 | ### Container Diagram 14 | 15 | Source: [C4_Container Diagram Sample - bigbankplc.puml](C4_Container%20Diagram%20Sample%20-%20bigbankplc.puml) 16 | 17 | ![Container diagram for Internet Banking System](http://www.plantuml.com/plantuml/png/pPLjZzCu4CVVzrECojlssbrWsKFTYZwmEX2zwrrw1n8WD4ccgOLZHxQpfHnyztDSDoJhLjp3eYChhTePpzy__psPFj46bIbptj7lcIXGOGufhR7aPaKVp8IpJEGa32Js7wd6ggt2uYLBpGREXyD6FCSF2z8QCuhOHuApXysaeiIWo3Z1dnsmJsGrIPfTGTTIc7t1kSle3QPooqG6Q-IQEf-RW6WmHltVH2PAoQrNc4ak5ToxS8-BL4fXjAd_-TYnHgDObY95jHkF3tHjXbF4ms23MnWFtEEYKwbIKgVYaTbnWXJrXj9Jb0KfBOLZ37cyyBLxQemmEiNaVQQgy_hSyFB1-QDfY3XyT7zwSNsAnROPAO7ytRU1khYi_aAeoqdrTmfAxxIX_AvPpiukBgVpaEN-xD7rRFXLWxuDr8_kEMrG-E9z3_vubE_4dk3E4YkEJ92wQvm7zo_dyuV_qAB_ZyR80eo4M1eZBH6hB69IT3Oi9T0rH8TJHY85nRADwNowWjPZlw_i8lZK-JJoGsRiCx0V6YxbN_KwTMYCvXhVOcEtODymBkwlEQXjhl6dtTVMbjgK9T_pTmmpd61MvrA6MNKLQwdWcQWaoLWNXRsZ328dtQcx1hfNLxDIMwD8lH5l14mWyLz1hi5i269RseCjCnj_AEGk1fWazbgCxa9ZkAEk1Tgx12Ylzonlkz3y1NC2PxvZMW8lAOP9KN2Me67IiWu68yq-qkEpy_7hvtY3FOWALIal_fYz7Gsgt7WmSAUQ4sSt5j4TI1iha3WtIHX0aRfm3HWVl5fEkj1kP0ktfVWT5aN85x7gKt-96LMS8L-KA5QO7an4Ld9Kjn2NIjwmb3GWvyTvrgLmZOoScHqOQOrsFckuOLYLC5NHGQpaLfCwmguB3BaNCcRy2FBiNWzUOOwAYPEem5dE3AMWorXRLBd-s-WwOC_t82dTi8H2Uf-lpVUZnfrXxZ-tJn3z-W8EcLj7Y8nKfA7Kf41HnhHHQFc0YRLKkMkm7cniNGfOcWqaYb8IXY7NlQhnIMlWChDVo2G_XB0rNUZtPFdiQtqybybxKlKxVQfLlkApizRkTeGkHhk1IAsNp0xC5jxJ_W8PzuF2RRVQ433XPzE29KfgkJRmz4EoiLNanrKNmfz5jnVbo0wHzbPs8x5McDEjyTIy8UJyq5M93TGdRLmKO2nBywMbUlLawe5HA3GwJ_nTdUJqoWVIWnpq--F3Im-FA-ohtpNfzhNzj5ejeo-tr6rNwmB_NMMZvHi2tSu1fwNjPvnDsvYhRjpooVrHxqJIW-VHBpyF0fR6zdUYLx-oe_uHiTy8Kmrh9NCtaxUA6T9WP7i3hp-VpewvPfNxhOxpsX49gqtzAbDfTZlDHROg00gAIir4TembMgoMJPQca7MjtLTDumAjWNVlrU95QDuJgrdc_2y0 "Container diagram for Internet Banking System") 18 | 19 | ### Component Diagram 20 | 21 | Source: [C4_Component Diagram Sample - bigbankplc.puml](C4_Component%20Diagram%20Sample%20-%20bigbankplc.puml) 22 | 23 | 24 | ![Component diagram for Internet Banking System - API Application](http://www.plantuml.com/plantuml/png/nPRhRzis4C2_-wyuPC0-9RFpzeh4g1ymrcBPWZZR2hJ5S1BFCbUA54WghhlaVnybognbMLYRj0ZpeHBlSRzxdEgNngAsUIewvWEN6MfCWT4SSs5lwQCT2fx8bAI5cAGblQ6rr9ZznPbTm56ljt6VuiShCWOJcl5F18Udcq9DiKMP289_E-3EpFaaPLSPJPMqtk2eb9W5ChNaCe4v2aETXqr0j1YXUPgJeTPgMNaOAw4q_71MdlAcyBJpDlX_s9NMnKMaSibGhmQ3DLsTeOsurmYmXN5Idl9sf3GZtNO_ioj1mD0iYBLHPgIDafwnmLCvdfOdO3HlHnX_I7IHRoNhzK-EpaTDnDxvyUXisiRYneoqHF7tzu4wwnT_JQZ-iFXhWp8hOodzrYo7XsVzqQJ9SZm-duvx_rkWxmFrStdQ2zHSlEUlJq1vxlAqzInspf5BqjyQv-IuFvcSVcM9dfccMPmqKvAaVGnEhpoxSVgdez6qryGvTwsQz5kByrmq2yu8J0ZM4PIGPA1vih2T-qke7VT-wvJWldD_KNrf1vK4_9VJY_ptBeZMsr7JyNisA1NyrlXxF-iDsvgERxct3NFbHJvXBmfLTIAIpAVMiTmAWd6GCOv9qOsvql1A5j78mWYbQrC2Cn_r08RNhs2OPOB7QBcIdJ1Ai7TvEUFbqpKcjAdqJdQx5uP_eXU7HuEt_-0TcbZpp09A1iuu5wZVNtGBZK6t-yxfmxLMTvoH0HG2x8A0hucYYcYUoxXmZeBR5LW5SMwiIaaRkEDOs70DIueWqcffIF-q1_NbGmCcmte2LohYecIlCx_153MNhP0WUCejCJ1vPCY2ia-0JZr4zG-ZEnxJBleKEzNcbEoJwhbEVaC2VKHOAy0iNb2AMydChD9a83UaGLF2ZTMb8N3f9Y8jd_TXKVwK0SmTghHLVo7Mn8fN56OVC8x9610gSIzaurteBDggExee6bFQ6hX0Las2cfTrZTr5gEa67s2aSXkAwc5KBgrxiXgbmRBwWQlv7vOlR6JgU5j33s_7wtJUEoVXTwQtnenNtwwjtKYasoieJBKIWdIzKLT_Zk66ZFsiiDMWeH1gwHjaYj4nXKCktUFkMVCPxK7zgugcD6po3QjAmInFKvVCeq73McmCzvBR1I0OvrhfLTL6halMqACcQX3jA2V5kUQsmAmiwfIpJ1T5616sRcrz6NMnACHyPMNY9siVuWNwbmoDMIhDml0qwreXDM7RnXkc62EZBoKVmhpK1oMhfgV1SRth3Jm_rTwyuFFJSt0m2DJmeY2z_CEGsIiqGkrBhM3SK0lsXHgBAlaD8OCVOUaa15RLCtmz6Oq_f-RTX03hS1k1wjPlhdxj_d9xUptRTF7GCHaMfZwnDjlNizz_QnW7qv3nrvcdZmwSFYdkIv8iJyL_ "Component diagram for Internet Banking System - API Application") 25 | 26 | ## Supplementary Diagrams 27 | 28 | ### System Landscape Diagram 29 | 30 | Source: [C4_Context Diagram Sample - bigbankplc-landscape.puml](C4_Context%20Diagram%20Sample%20-%20bigbankplc-landscape.puml) 31 | 32 | ![System Landscape diagram for Internet Banking System](http://www.plantuml.com/plantuml/png/jPPTRzis58Rl_IiEijjuTj8koGh7g9sFhS2o5hE3N2H1S28UIuGbKYFfEkxI_pwIfZGgiZ8KQEahyNoSvxnw8-IzDgZCgiXxUib5YGeBOBJ0LMxcz6GcEKz5GS90GiAGYhBM2iiRpam6XyDXT5_WqnLfZIdD-1U2Wr_YeAB4e4XpWdzwOC_Ca29fDYLTIc6s1OS-eZDaSir52WlCDVM-HbqcIibrw70cSwdWfoD__8thrBwD-t_THJGQFSgLOAWsut55rsJe8Xws1hp0UEkFlvrAnKXrtS_C9YTWg3DY3SeIaoMcRSPEdc-OtoL7IKfBqJ4eTBZqnyTttqujUAeST8WDJzuU7a_RBCFZDzEZoouMQqLI0lE77mDrTE9-RQYJYVjrGUcDDbHyRvQ3WwEJwNcRvStPyUNPy7y5-Z5Gl_hpYa0PPmIw7jRBAIN1GF4qCxtdKsWS-potIV3SUnu5Gun31BOls8V2Qwb3rOvnJf1hx1Esk_lxGDokhNCitXQoPxZ92MRRm1yec4xGqZ6EgLDv8HLCUMf54KieywHNomvxfwUVF0lcFkm-5MShRMH1waxS2PX04Xv1Bi1a18ysRH_Mt6HGXb9_1vWaLd2ZVzw3w6yFTTsXEJScWjiBOKYLYckwtuFuA-4R38CP6Wq-k191fW8F0conyrok_vkimKZup6aDN5Wr2ZHS2a0xnRYTk6fki0ye61Iu92XnKr2rL6rDrBx03WrsRTDDvbTT95uyfd0D2UhCTswx7pMWsT7tebyWhrpW9ymp0Yw2EwvuegIM2mCNJqbcgmWehkYUvf8wjxb2Avp2WdQ9FJDIaGRCyyeZYRse5DeXUIt6VYIvKIWq9YxDFf59NaCDD6tGohmm8_MP9sJXSB7mc7L8Xv1s8VyokAYjtPowoyOFeRuzt7rruEDYqPmxOGKNN1iL910CzAeifJBVIl1e-pz8tzz-iIeUw8zVk17UEPhJQqrwBqhxwyDllyzjCfeguoOOKNidmahR7b75gD-FRH6APYIO3gvoTjunegLLA9tefOQ_LwIT4gxsJWm68ys_qBk3m_7jd78gCodeVZHmb-F1OA_tOhN--SURF-s4rxcgLTogDLHjcqYVTl_NirkB1PwEzEYDGV_wKqTUuBpDE6Caxi_xq8HgXUilQgn2dN0T9RmdmTm_n_y2 "System Landscape diagram for Internet Banking System") 33 | 34 | -------------------------------------------------------------------------------- /.vscode/C4.code-snippets: -------------------------------------------------------------------------------- 1 | { 2 | "C4_Person": { 3 | "scope": "diagram", 4 | "prefix": "Person", 5 | "body": [ 6 | "Person(${1:alias}, \"${2:label}\")", 7 | "$0" 8 | ], 9 | "description": "Add Person to C4 diagram" 10 | }, 11 | "C4_Person_Descr": { 12 | "scope": "diagram", 13 | "prefix": "Person with Description", 14 | "body": [ 15 | "Person(${1:alias}, \"${2:label}\", \"${3:description}\")", 16 | "$0" 17 | ], 18 | "description": "Add Person with Description to C4 diagram" 19 | }, 20 | "C4_Person_Ext": { 21 | "scope": "diagram", 22 | "prefix": [ 23 | "External Person", 24 | "Person (External)" 25 | ], 26 | "body": [ 27 | "Person_Ext(${1:alias}, \"${2:label}\")", 28 | "$0" 29 | ], 30 | "description": "Add External Person to C4 diagram" 31 | }, 32 | "C4_Person_Ext_Descr": { 33 | "scope": "diagram", 34 | "prefix": [ 35 | "External Person with Description", 36 | "Person (External) with Description" 37 | ], 38 | "body": [ 39 | "Person_Ext(${1:alias}, \"${2:label}\", \"${3:description}\")", 40 | "$0" 41 | ], 42 | "description": "Add External Person with Description to C4 diagram" 43 | }, 44 | "C4_Container": { 45 | "scope": "diagram", 46 | "prefix": "Container", 47 | "body": [ 48 | "Container(${1:alias}, \"${2:label}\", \"${3:technology}\")", 49 | "$0" 50 | ], 51 | "description": "Add Container to C4 diagram" 52 | }, 53 | "C4_Container_Descr": { 54 | "scope": "diagram", 55 | "prefix": "Container with Description", 56 | "body": [ 57 | "Container(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")", 58 | "$0" 59 | ], 60 | "description": "Add Container with Description to C4 diagram" 61 | }, 62 | "C4_Container_Ext": { 63 | "scope": "diagram", 64 | "prefix": [ 65 | "External Container", 66 | "Container (External)" 67 | ], 68 | "body": [ 69 | "Container_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\")", 70 | "$0" 71 | ], 72 | "description": "Add External Container to C4 diagram" 73 | }, 74 | "C4_Container_Ext_Descr": { 75 | "scope": "diagram", 76 | "prefix": [ 77 | "External Container with Description", 78 | "Container (External) with Description" 79 | ], 80 | "body": [ 81 | "Container_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")", 82 | "$0" 83 | ], 84 | "description": "Add External Container with Description to C4 diagram" 85 | }, 86 | "C4_Container_Boundary": { 87 | "scope": "diagram", 88 | "prefix": [ 89 | "Container Boundary", 90 | "Boundary for Container" 91 | ], 92 | "body": [ 93 | "Container_Boundary(${1:alias}, \"${2:label}\"){", 94 | "\t$0", 95 | "}" 96 | ], 97 | "description": "Add a Container Boundary to C4 diagram" 98 | }, 99 | "C4_Component": { 100 | "scope": "diagram", 101 | "prefix": "Component", 102 | "body": [ 103 | "Component(${1:alias}, \"${2:label}\", \"${3:technology}\")", 104 | "$0" 105 | ], 106 | "description": "Add Component to C4 diagram" 107 | }, 108 | "C4_Component_Descr": { 109 | "scope": "diagram", 110 | "prefix": "Component with Description", 111 | "body": [ 112 | "Component(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")", 113 | "$0" 114 | ], 115 | "description": "Add Component with Description to C4 diagram" 116 | }, 117 | "C4_Component_Ext": { 118 | "scope": "diagram", 119 | "prefix": [ 120 | "External Component", 121 | "Component (External)" 122 | ], 123 | "body": [ 124 | "Component_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\")", 125 | "$0" 126 | ], 127 | "description": "Add External Component to C4 diagram" 128 | }, 129 | "C4_Component_Ext_Descr": { 130 | "scope": "diagram", 131 | "prefix": [ 132 | "External Component with Description", 133 | "Component (External) with Description" 134 | ], 135 | "body": [ 136 | "Component_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")", 137 | "$0" 138 | ], 139 | "description": "Add External Component with Description to C4 diagram" 140 | }, 141 | "C4_System": { 142 | "scope": "diagram", 143 | "prefix": "System", 144 | "body": [ 145 | "System(${1:alias}, \"${2:label}\")", 146 | "$0" 147 | ], 148 | "description": "Add System to C4 diagram" 149 | }, 150 | "C4_System_Descr": { 151 | "scope": "diagram", 152 | "prefix": "System with Description", 153 | "body": [ 154 | "System(${1:alias}, \"${2:label}\", \"${3:description}\")", 155 | "$0" 156 | ], 157 | "description": "Add System with Description to C4 diagram" 158 | }, 159 | "C4_System_Ext": { 160 | "scope": "diagram", 161 | "prefix": [ 162 | "External System", 163 | "System (External)" 164 | ], 165 | "body": [ 166 | "System_Ext(${1:alias}, \"${2:label}\")", 167 | "$0" 168 | ], 169 | "description": "Add External System to C4 diagram" 170 | }, 171 | "C4_System_Ext_Descr": { 172 | "scope": "diagram", 173 | "prefix": [ 174 | "External System with Description", 175 | "System (External) with Description" 176 | ], 177 | "body": [ 178 | "System_Ext(${1:alias}, \"${2:label}\", \"${3:description}\")", 179 | "$0" 180 | ], 181 | "description": "Add External System with Description to C4 diagram" 182 | }, 183 | "C4_System_Boundary": { 184 | "scope": "diagram", 185 | "prefix": [ 186 | "System Boundary", 187 | "Boundary for System" 188 | ], 189 | "body": [ 190 | "System_Boundary(${1:alias}, \"${2:label}\"){", 191 | "\t$0", 192 | "}" 193 | ], 194 | "description": "Add a System Boundary to C4 diagram" 195 | }, 196 | "C4_Enterprise_Boundary": { 197 | "scope": "diagram", 198 | "prefix": [ 199 | "Enterprise Boundary", 200 | "Boundary for Enterprise" 201 | ], 202 | "body":[ 203 | "Enterprise_Boundary(${1:alias}, \"${2:label}\"){", 204 | "\t$0", 205 | "}" 206 | ], 207 | "description": "Add an Enterprise Boundary to C4 diagram" 208 | }, 209 | "C4_Relationship": { 210 | "scope": "diagram", 211 | "prefix": "Relationship", 212 | "body": [ 213 | "Rel(${1:from_alias}, ${2:to_alias}, \"${3:label}\")", 214 | "$0" 215 | ], 216 | "description": "Add unidirectional Relationship to C4 diagram" 217 | }, 218 | "C4_Relationship_Techn": { 219 | "scope": "diagram", 220 | "prefix": "Relationship with Technology", 221 | "body": [ 222 | "Rel(${1:from_alias}, ${2:to_alias}, \"${3:label}\", \"${4:technology}\")", 223 | "$0" 224 | ], 225 | "description": "Add unidirectional Relationship with Technology to C4 diagram" 226 | }, 227 | "C4_Layout_Right": { 228 | "scope": "diagram", 229 | "prefix": "Layout to Right side", 230 | "body": [ 231 | "Lay_R(${1:from_alias}, ${2:to_alias})", 232 | "$0" 233 | ], 234 | "description": "Add hidden layout line to put {to} to the right of {from}" 235 | }, 236 | "C4_Layout_Left": { 237 | "scope": "diagram", 238 | "prefix": "Layout to Left side", 239 | "body": [ 240 | "Lay_L(${1:from_alias}, ${2:to_alias})", 241 | "$0" 242 | ], 243 | "description": "Add hidden layout line to put {to} to the left of {from}" 244 | }, 245 | "C4_Boundary": { 246 | "scope": "diagram", 247 | "prefix": "Boundary", 248 | "body": [ 249 | "Boundary(${1:alias}, \"${2:label}\"){", 250 | "\t$0", 251 | "}" 252 | ], 253 | "description": "Add a generic boundary to C4 diagram." 254 | }, 255 | "C4_Boundary_Type": { 256 | "scope": "diagram", 257 | "prefix": [ 258 | "Boundary with type" 259 | ], 260 | "body": [ 261 | "Boundary(${1:alias}, \"${2:label}\", \"${3:type}\"){", 262 | "\t$0", 263 | "}" 264 | ], 265 | "description": "Add a generic boundary to C4 diagram." 266 | } 267 | } -------------------------------------------------------------------------------- /LayoutOptions.md: -------------------------------------------------------------------------------- 1 | # Layout Options 2 | 3 | PlantUML uses [Graphviz](https://www.graphviz.org/) for his graph visualization. Thus the rendering itself is done automatically for you - that it one of the biggest advantages of using PlantUML. 4 | 5 | ...and also sometimes one of the biggest disadvantages, if the rendering is not what the user intended. 6 | 7 | For this reason, C4-PlantUML also comes with some layout options. 8 | 9 | ## LAYOUT_TOP_DOWN() or LAYOUT_LEFT_RIGHT() 10 | 11 | With the two procedures `LAYOUT_TOP_DOWN()` and `LAYOUT_LEFT_RIGHT()` it is possible to easily change the flow visualization of the diagram. `LAYOUT_TOP_DOWN()` is the default. 12 | 13 | ```csharp 14 | @startuml LAYOUT_TOP_DOWN Sample 15 | !includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml 16 | 17 | /' Not needed because this is the default '/ 18 | LAYOUT_TOP_DOWN() 19 | 20 | Person(admin, "Administrator") 21 | System_Boundary(c1, 'Sample') { 22 | Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") 23 | } 24 | System(twitter, "Twitter") 25 | 26 | Rel(admin, web_app, "Uses", "HTTPS") 27 | Rel(web_app, twitter, "Gets tweets from", "HTTPS") 28 | @enduml 29 | ``` 30 | 31 | ![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") 32 | 33 | Using `LAYOUT_LEFT_RIGHT()` 34 | 35 | ```csharp 36 | @startuml LAYOUT_LEFT_RIGHT() Sample 37 | !includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml 38 | 39 | LAYOUT_LEFT_RIGHT() 40 | 41 | Person(admin, "Administrator") 42 | System_Boundary(c1, 'Sample') { 43 | Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") 44 | } 45 | System(twitter, "Twitter") 46 | 47 | Rel(admin, web_app, "Uses", "HTTPS") 48 | Rel(web_app, twitter, "Gets tweets from", "HTTPS") 49 | @enduml 50 | ``` 51 | 52 | ![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") 53 | 54 | ## LAYOUT_WITH_LEGEND() 55 | 56 | Colors can help to add additional information or simply to make the diagram more aesthetically pleasing. 57 | It can also help to save some space. 58 | 59 | All of that is the reason, C4-PlantUML uses colors and prefer also to enable a layout without `<>` and with a legend. 60 | This can be enabled with `LAYOUT_WITH_LEGEND()`. 61 | 62 | ```csharp 63 | @startuml LAYOUT_WITH_LEGEND Sample 64 | !includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml 65 | 66 | LAYOUT_WITH_LEGEND() 67 | 68 | Person(admin, "Administrator") 69 | System_Boundary(c1, 'Sample') { 70 | Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") 71 | } 72 | System(twitter, "Twitter") 73 | 74 | Rel(admin, web_app, "Uses", "HTTPS") 75 | Rel(web_app, twitter, "Gets tweets from", "HTTPS") 76 | @enduml 77 | ``` 78 | 79 | ![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") 80 | 81 | ## LAYOUT_AS_SKETCH() 82 | 83 | C4-PlantUML can be especially helpful during up-front design sessions. 84 | One thing which is often ignored is the fact, that these software architecture sketches are just sketches. 85 | 86 | Without any proof 87 | 88 | * if they are technically possible 89 | * if they can fullfil all requirements 90 | * if they keep what they promise 91 | 92 | More often these sketches are used by many people as facts and are manifested into their documentations. 93 | With `LAYOUT_AS_SKETCH()` you can make a difference. 94 | 95 | ```csharp 96 | @startuml LAYOUT_AS_SKETCH Sample 97 | !includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml 98 | 99 | LAYOUT_AS_SKETCH() 100 | 101 | Person(admin, "Administrator") 102 | System_Boundary(c1, 'Sample') { 103 | Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") 104 | } 105 | System(twitter, "Twitter") 106 | 107 | Rel(admin, web_app, "Uses", "HTTPS") 108 | Rel(web_app, twitter, "Gets tweets from", "HTTPS") 109 | @enduml 110 | ``` 111 | 112 | ![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") 113 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Fork changelog 2 | 3 | ## Person icon in personas box 4 | 5 | Renders Person and Person_Ext with portrait icon inside rectangle. This makes human users of 6 | software system more clearer in the diagrams. 7 | 8 | ![](images/person_icon.png) 9 | 10 | ## External container and component 11 | 12 | For well-designed systems current set of C4-PalntUML artifacts are sufficient. 13 | When working with monoliths a.k.a "Big Ball of Mud" we have an issue with correctly distinguish which container and/or component 14 | is under the team responsibility. Some containers/components are relevant from use-case perspective. Therefore, they should be 15 | present on a diagram to give full use-case picture. In the same time they should be marked as "external" 16 | as team is not responsible nor develop them. This can be easily achieved by introducing "external" container/component artifacts in C4-PlantUML. 17 | 18 | * External container 19 | * Import: `!include https://raw.githubusercontent.com/stawirej/C4-PlantUML/master/C4_Container.puml` 20 | * Additional Procedures: `Container_Ext`, `ContainerDb_Ext` 21 | * External component 22 | * Import: `!include https://raw.githubusercontent.com/stawirej/C4-PlantUML/master/C4_Component.puml` 23 | * Additional Procedures: `Component_Ext`, `ComponentDb_Ext` 24 | 25 | 26 | ## Use current plantuml preprocessor 27 | 28 | Upgrades C4-PlantUML to work with current plantuml preprocessor. 29 | 30 | > The actual preprocessor is an update from some legacy preprocessor. 31 | Even if some legacy features are still supported with the actual preprocessor, you should not use them any more (they might be removed in some long term future). 32 | 33 | > You should not use !define and !definelong anymore. Use !function, !procedure or variable definition instead. 34 | !define should be replaced by return !function and !definelong should be replaced by !procedure. 35 | 36 | > !include now allows multiple inclusions : you don't have to use !include_many anymore 37 | !include now accepts a URL, so you don't need !includeurl_ 38 | 39 | * "Migration notes" at https://plantuml.com/preprocessing 40 | 41 | ## Live Templates for IntelliJ 42 | 43 | Download [IntelliJ Live Templates](https://github.com/stawirej/c4-intellij-live-template) for supporting creation of C4 model diagrams with C4-PlantUML with [IntelliJ IDEA](https://www.jetbrains.com/idea/). 44 | 45 | ![](https://github.com/stawirej/c4-intellij-live-template/raw/master/images/c4demo1.gif) 46 | ![](https://github.com/stawirej/c4-intellij-live-template/raw/master/images/c4demoall.gif) 47 | 48 | --- 49 | 50 | # C4-PlantUML 51 | 52 | ![Container diagram for Internet Banking System](http://www.plantuml.com/plantuml/png/pPLjZzCu4CVVzrECojlssbrWsKFTYZwmEX2zwrrw1n8WD4ccgOLZHxQpfHnyztDSDoJhLjp3eYChhTePpzy__psPFj46bIbptj7lcIXGOGufhR7aPaKVp8IpJEGa32Js7wd6ggt2uYLBpGREXyD6FCSF2z8QCuhOHuApXysaeiIWo3Z1dnsmJsGrIPfTGTTIc7t1kSle3QPooqG6Q-IQEf-RW6WmHltVH2PAoQrNc4ak5ToxS8-BL4fXjAd_-TYnHgDObY95jHkF3tHjXbF4ms23MnWFtEEYKwbIKgVYaTbnWXJrXj9Jb0KfBOLZ37cyyBLxQemmEiNaVQQgy_hSyFB1-QDfY3XyT7zwSNsAnROPAO7ytRU1khYi_aAeoqdrTmfAxxIX_AvPpiukBgVpaEN-xD7rRFXLWxuDr8_kEMrG-E9z3_vubE_4dk3E4YkEJ92wQvm7zo_dyuV_qAB_ZyR80eo4M1eZBH6hB69IT3Oi9T0rH8TJHY85nRADwNowWjPZlw_i8lZK-JJoGsRiCx0V6YxbN_KwTMYCvXhVOcEtODymBkwlEQXjhl6dtTVMbjgK9T_pTmmpd61MvrA6MNKLQwdWcQWaoLWNXRsZ328dtQcx1hfNLxDIMwD8lH5l14mWyLz1hi5i269RseCjCnj_AEGk1fWazbgCxa9ZkAEk1Tgx12Ylzonlkz3y1NC2PxvZMW8lAOP9KN2Me67IiWu68yq-qkEpy_7hvtY3FOWALIal_fYz7Gsgt7WmSAUQ4sSt5j4TI1iha3WtIHX0aRfm3HWVl5fEkj1kP0ktfVWT5aN85x7gKt-96LMS8L-KA5QO7an4Ld9Kjn2NIjwmb3GWvyTvrgLmZOoScHqOQOrsFckuOLYLC5NHGQpaLfCwmguB3BaNCcRy2FBiNWzUOOwAYPEem5dE3AMWorXRLBd-s-WwOC_t82dTi8H2Uf-lpVUZnfrXxZ-tJn3z-W8EcLj7Y8nKfA7Kf41HnhHHQFc0YRLKkMkm7cniNGfOcWqaYb8IXY7NlQhnIMlWChDVo2G_XB0rNUZtPFdiQtqybybxKlKxVQfLlkApizRkTeGkHhk1IAsNp0xC5jxJ_W8PzuF2RRVQ433XPzE29KfgkJRmz4EoiLNanrKNmfz5jnVbo0wHzbPs8x5McDEjyTIy8UJyq5M93TGdRLmKO2nBywMbUlLawe5HA3GwJ_nTdUJqoWVIWnpq--F3Im-FA-ohtpNfzhNzj5ejeo-tr6rNwmB_NMMZvHi2tSu1fwNjPvnDsvYhRjpooVrHxqJIW-VHBpyF0fR6zdUYLx-oe_uHiTy8Kmrh9NCtaxUA6T9WP7i3hp-VpewvPfNxhOxpsX49gqtzAbDfTZlDHROg00gAIir4TembMgoMJPQca7MjtLTDumAjWNVlrU95QDuJgrdc_2y0 "Container diagram for Internet Banking System") 53 | 54 | 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. 55 | 56 | C4-PlantUML includes macros, stereotypes, and other goodies (like VSCode Snippets) for creating C4 diagrams with PlantUML. 57 | 58 | * [Getting Started](#getting-started) 59 | * [Supported Diagram Types](#supported-diagram-types) 60 | * [Snippets for Visual Studio Code](#snipptes-for-visual-studio-code) 61 | * [Layout Options](#layout-options) 62 | * [Samples](#advanced-samples) 63 | * [Background](#background) 64 | * [License](#license) 65 | 66 | ## Getting Started 67 | 68 | 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. 69 | 70 | To be independent of any internet connectifity, you can also download the files found in the `root` and reference it locally with 71 | 72 | ```c# 73 | !include path/to/C4_Container.puml 74 | ``` 75 | 76 | Just remember to change the `!include` statements inside the top of the files. 77 | 78 | If you want to use the always up-to-date version in this repo, use the following: 79 | 80 | ```c# 81 | !includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/release/1-0/C4_Container.puml 82 | ``` 83 | 84 | Now let's create a C4 Container diagram: 85 | 86 | After you have included `C4_Container.puml` you can use the defined macro definitions for the C4 elements: `Person`, `Person_Ext`, `System`, `System_Ext`, `Container`, `Relationship`, `Boundary`, and `System_Boundary` 87 | 88 | ```csharp 89 | @startuml C4_Elements 90 | !includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/release/1-0/C4_Container.puml 91 | 92 | Person(personAlias, "Label", "Optional Description") 93 | Container(containerAlias, "Label", "Technology", "Optional Description") 94 | System(systemAlias, "Label", "Optional Description") 95 | 96 | Rel(personAlias, containerAlias, "Label", "Optional Technology") 97 | @enduml 98 | ``` 99 | 100 | ![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") 101 | 102 | In addition to this, it is also possible to define a system or component boundary. 103 | 104 | Take a look a look at the following sample of a C4 Container Diagram: 105 | 106 | ```csharp 107 | @startuml Basic Sample 108 | !includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/release/1-0/C4_Container.puml 109 | 110 | Person(admin, "Administrator") 111 | System_Boundary(c1, "Sample System") { 112 | Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") 113 | } 114 | System(twitter, "Twitter") 115 | 116 | Rel(admin, web_app, "Uses", "HTTPS") 117 | Rel(web_app, twitter, "Gets tweets from", "HTTPS") 118 | @enduml 119 | ``` 120 | 121 | ![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") 122 | 123 | ## Supported Diagram Types 124 | 125 | * System Context & System Landscape diagrams 126 | * Import: `!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/release/1-0/C4_Context.puml` 127 | * Macros: `Person`, `Person_Ext`, `System`, `System_Ext`, `SystemDb`, `SystemDb_Ext`, `Boundary`, `System_Boundary`, `Enterprise_Boundary` 128 | * Container diagram 129 | * Import: `!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/release/1-0/C4_Container.puml` 130 | * Additional Macros: `Container`, `ContainerDb`, `Container_Boundary` 131 | * Component diagram 132 | * Import: `!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/release/1-0/C4_Component.puml` 133 | * Additional Macros: `Component`, `ComponentDb` 134 | 135 | Take a look at each of the [C4 Model Diagram Samples](samples/C4CoreDiagrams.md). 136 | 137 | ## Snippets for Visual Studio Code 138 | 139 | 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). 140 | 141 | Project level snippets are now supported in [VSCode 1.28](https://code.visualstudio.com/updates/v1_28#_project-level-snippets). 142 | Just include the `C4.code-snippets` file in the `.vscode` folder of your project. 143 | 144 | 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). 145 | 146 | ![C4-PlantUML Snippets Video](images/vscode_c4plantuml_snippets.gif) 147 | 148 | ## Layout Options 149 | 150 | C4-PlantUML also comes with some layout options to make it easy and reuseable to create nice and useful diagrams: 151 | 152 | * [LAYOUT_TOP_DOWN or LAYOUT_LEFT_RIGHT](LayoutOptions.md#layout_top_down-or-layout_left_right) 153 | * [LAYOUT_WITH_LEGEND](LayoutOptions.md#layout_with_legend) 154 | * [LAYOUT_AS_SKETCH](LayoutOptions.md#layout_as_sketch) 155 | 156 | ## Advanced Samples 157 | 158 | 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/). 159 | 160 | The core diagram samples from [c4model.com](https://c4model.com/#coreDiagrams) are available [here](samples/C4CoreDiagrams.md). 161 | 162 | ### techtribes.js 163 | 164 | Source: [C4_Container Diagram Sample - techtribesjs.puml](samples/C4_Container%20Diagram%20Sample%20-%20techtribesjs.puml) 165 | 166 | ![techtribesjs](http://www.plantuml.com/plantuml/png/pLLjRzis4FxkNt78lco04x-uYRCYDUeNk5sn3btihX_Q8g34iyIM8ZMIgkEk_U-ZICKJBGjRaHOT3KWGUVVSSm_lpe-r8SeK6U_ezqpaH94CA6v8mSqQRysKiqHaA0p4ze6gPhLL97_5g4bXsE_NzZDo-nor9Wcks4U4mNdzK65iY4WumbyTi6jbCL6QNOvBAOnt6BeJdH8gjqmai25SO-TpdI0n92BwVY1JfUIsGfXBBXNySE6MsocHchjr_C_7qhgwYcGXA56xoUIENSYXZN6_4U20nWEttEvCAeggRNzbTXo14fqYRMEPez9IU8uDFXNmqgs0HhWx8_7xH9NvLcVzomV3yQn9iJyUpIwMRLnicQ4IXDzy6r8Nb-MlIUfoMlxQIEcTDfXzRIw3mSNbRD7aCfgFb_F-lmhqRKZzx5QxGCt6-zxwX5J-9_A4TnPRSC84ggzDvy7eSh4u_nA9lYiR8tCm4Y9fZBICM2aHawAJCegWzoGw71CK51HBKjFvz0Y2PR_NrWW-TJvTLKDcKfs07nh-oBVw_kYkC08RNs8JP-0Bnk_xQsxu1ZO-M--xbzGUMUQUVsTV0N3owD5KIB7BPA7XfKPr0iT67T50xink2cjs094a2XDYaEun0jVzyJ5VcZ71j56aLFouVs1o1CDWd1h58jHdxpIyNZantfv0y3zdWUA1Bolt211UOGJJFESiTZ7UY5xlIhEF-70mdBn-HZwGBgnonKG2p_-OTs4jCsi8uxFRjrUzqcxIwxsnNZ3bN6urb1HrML4V66uXHvbpx8Ads7MNWi9q0J_Obzru9oFxH1EVmKR934oAm6LCE9IPTO6oX1dxHGI5NzQWBNDfLGexXcZOOdH3yjobLxMLo-uQkKlBGYogxJ33vxlLxx_2-Tbv8w6LZOIwaO9xGuPPX4gdBBSxXB_NXob5X2Qb-HDcdXOHACnbbUWHzWhv3OsQTxDazktlD6IzdAv7m-DyDH8Lfy04nLlKHu9jBAXlcePQlqahXXFAenr89KKY5pCOdWrRnF9tUBrQzQRbDDaWKWq_HbmcODCt-YTtZsQBQ8un4rB_oPiglCmjHrJDoeGnpANGacDPmGUCl9U6N4cNSRUA6rw98rHL9KW117IS8YquKh2gi6Cq2y_73i-0vdhBZ3aO8rvdxsRyUUZakRJw9CoaHHIwpAoSkjKZAayxuSY2qzF9NOV0GujXDTMeGq6VhjSlLlzeUDAfpQvxW0G3x1v0bODpzkrI-LuZeRxmt5rk5IjltSWGpzPrxzbYDk-wGeJHg7_HWbxhZqQ4mD2NQyFcUCzicSAo58sC9Iz9A0F3SNymhhEe2WjENxxuJrcwtltIL8CWpMHVtUaNMeRPjcj-_znjgAfJgc1FqEox69ZOI9MvOghD4aUbjO2Q0NnRrV13t4WM1l8YuYo6M5Bqeu8PgHX-QIpVaBLG-sbJQ2QISbYwHFO3ior07RygZTFNAQCKnTlhq_fKVuo25Xd_6m00 "techtribesjs") 167 | 168 | ### Message Bus and Microservices 169 | 170 | Source: [C4_Container Diagram Sample - message bus.puml](samples/C4_Container%20Diagram%20Sample%20-%20message%20bus.puml) 171 | 172 | ![messagebus](http://www.plantuml.com/plantuml/png/pPPjRzis4CVV-rCStBVnx3mqoOh4gEqaQukc3v67laY3W18l4X6P94ZAgRVqku-K55aofMx6MY0qOC2yq_z-l3iVzLeReaosI7lwdd5955a0nJkIfMQEtymaPJ5V83SGsIzKDQy7HUGNHaq2UwDHRNz1lbsYrYJ6WFs5iFkoRbGO6SBZ5E7l7jWLM4qKPYNnGd1JFB2NMtH2g7XWF8OxachiVQy34aD2el-Vo4GfyL0gp4Gg5Bmup5U-uvJytRh-zxPZdPo48kEKgDLu_4JNPEWY7da1DZ0EyfNlJeMYgBhs0xDA4IZH2T8kIebA2rumUZoby4M-AWn_TqgY-rYvyvQsqV71tj7KHnmTxKyFBxfOR9kXuYIz_JLGXyVkuqCTJzod2qgljC75psRPtJqydfxvBFkpeulPw5yJz6kWVizNTuByFzvpo4-9ydpIqwnPPCK9uwX-Dix1_l7PsSjjKlGCQBQuBvpH20b6G2YC4VOOpEML2TvB64NG5NalnHWv1SNYnFGUJw6nxE-vTOB7tkD9EPd6fGMAILEOYlbGcPwwgU5JzEKuToYwhDWlUiDxjk5JfAXujgg3DLdoWh-tlXJxfwUpJDj3e_hAltAOG5J-x4DjQ1DTxRS_36_vdL0Buh86rq5ESzE7nktaH7RBRcWNcKYPiiY9M9RXy4JR-hpQtHjVloDBeYF5fDc12O-pbAYRaw4pZuV30ZnDnSEQKhjoBWWdCO99a2cGIjon5FlGR4uBHQJy0LE0QiaYz7bs893AtR9J8Sm6pJn1a89n0-8EI1IXrc3pK-41MwVB9whSRdKHtCSh6nYccMwINP4mPERoyoQG8bnBeKoE4MQQSSU4I-H6jn0i2lrRw-a7lqAdP8_UdfohB5njX9yf90OrS7Veb6ca-Qp8OLIb9ZCbXSOsdigfEoMJZ3BJJZHxCVpjm_by0-gJ4aj6BPLGCU5CvzKOFDWj84whU8EAMCeCQuCgl1f0vG1iTj1PkTba-gX8bBhNhcW3Ap12eTwwLMZe4LHrwa2uN0MVtxT79sMfh8N24fMsqVDUJjDrzrGb91GI4MrRIHfs5j51D5dFbyXBGpjnBKr0Gf6Pihd19CH0GfPelwH4ZhIxb4xAtY5LxWS3QvKINZcsqpyrwYRLc_dyKx3cwVUSy-3gxHzlveEnzpT-af6Kc8uAWyjjt0n2z8f7E_0k-FXXw0NqOWpUdr_C6zW1SgghR8Yc-1SC0n7Te_cnQ7ca-bneg5TdoVB3hQErYTLJGyDIfoXZqLDiS_oVJMTrlZg5LVEdmtzayuIADjXIn8_UPEeuOh_NY5QFx_oQpvJX66yDTvqmIf7VN0qsPj9hovujqdy0 "messagebus") 173 | 174 | ## Background 175 | 176 | [PlantUML](http://en.plantuml.com/) is an open source project that allows you to create UML diagrams. 177 | Diagrams are defined using a simple and intuitive language. 178 | Images can be generated in PNG, in SVG or in LaTeX format. 179 | 180 | PlantUML was created to allow the drawing of UML diagrams, using a simple and human readable text description. 181 | Because it does not prevent you from drawing inconsistent diagrams, it is a drawing tool and not a modeling tool. 182 | It is the most used text-based diagram drawing tool with [extensive support into wikis and forums, text editors and IDEs, use by different programming languages and documentation generators](http://en.plantuml.com/running). 183 | 184 | The [C4 model](https://c4model.com/) for software architecture is an "abstraction-first" approach to diagramming, based upon abstractions that reflect how software architects and developers think about and build software. 185 | The small set of abstractions and diagram types makes the C4 model easy to learn and use. 186 | C4 stands for context, containers, components, and code — a set of hierarchical diagrams that you can use to describe your software architecture at different zoom levels, each useful for different audiences. 187 | 188 | The C4 model was created as a way to help software development teams describe and communicate software architecture, both during up-front design sessions and when retrospectively documenting an existing codebase. 189 | 190 | More information can be found here: 191 | 192 | * [The C4 model for software architecture](https://c4model.com/) 193 | * [REAL WORLD PlantUML - Sample Gallery](https://real-world-plantuml.com/) 194 | * [Visualising and documenting software architecture cheat sheets](http://www.codingthearchitecture.com/2017/04/27/visualising_and_documenting_software_architecture_cheat_sheets.html) 195 | * [PlantUML and Structurizr - Create models not diagrams](http://www.codingthearchitecture.com/2016/12/08/plantuml_and_structurizr.html) 196 | 197 | ## License 198 | 199 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details --------------------------------------------------------------------------------