Merged from plantuml-stdlib/C4-PlantUML/master

.github/stale.yml

@@ -0,0 +1,17 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 60
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 7
+# Issues with these labels will never be considered stale
+exemptLabels:
+  - pinned
+  - security
+# Label to use when marking an issue as stale
+staleLabel: wontfix
+# Comment to post when marking an issue as stale. Set to `false` to disable
+markComment: >
+  This issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed if no further activity occurs. Thank you
+  for your contributions.
+# Comment to post when closing a stale issue. Set to `false` to disable
+closeComment: false

.github/workflows/run-percy-tests.yml

@@ -0,0 +1,26 @@
+name: Percy Tests
+on:
+  push:
+    paths:
+    - '*.puml'
+    - 'percy/**'
+    - '.github/workflows/run-percy-tests.yml'
+  pull_request:
+    branches:
+    - '**'
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@master
+      - name: Setup Graphviz
+        uses: ts-graphviz/setup-graphviz@v1
+      - name: Process diagrams
+        uses: Timmy/plantuml-action@v1
+        with:
+          args: '-v percy -o _parsed'
+      - name: Upload
+        run: npx percy upload percy/_parsed
+        env:
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}

LayoutOptions.md

@@ -63,7 +63,7 @@ This can be enabled with `LAYOUT_WITH_LEGEND`.
 @startuml LAYOUT_WITH_LEGEND Sample
 !includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml
 
-LAYOUT_WITH_LEGEND
+LAYOUT_WITH_LEGEND()
 
 Person(admin, "Administrator")
 System_Boundary(c1, 'Sample') {
@@ -96,7 +96,7 @@ With `LAYOUT_AS_SKETCH` you can make a difference.
 @startuml LAYOUT_AS_SKETCH Sample
 !includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml
 
-LAYOUT_AS_SKETCH
+LAYOUT_AS_SKETCH()
 
 Person(admin, "Administrator")
 System_Boundary(c1, 'Sample') {

percy/C4_Component Diagram Sample - bigbankplc.puml

@@ -0,0 +1,33 @@
+@startuml
+!include ./../C4_Component.puml
+!include ./../C4_Container.puml
+!include ./../C4_Context.puml
+!include ./../C4.puml
+
+LAYOUT_WITH_LEGEND()
+
+title Component diagram for Internet Banking System - API 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.")
+ContainerDb(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")
+}
+
+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

percy/C4_Container Diagram Sample - bigbankplc.puml

@@ -0,0 +1,37 @@
+@startuml
+!include ./../C4_Container.puml
+!include ./../C4_Context.puml
+!include ./../C4.puml
+
+LAYOUT_TOP_DOWN
+'LAYOUT_AS_SKETCH()
+LAYOUT_WITH_LEGEND()
+
+title Container diagram for Internet Banking System
+
+Person(customer, Customer, "A customer of the bank, with personal bank accounts")
+
+System_Boundary(c1, "Internet Banking") {
+    Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
+    Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to cutomers via their web browser")
+    Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
+    ContainerDb(database, "Database", "SQL Database", "Stores user registraion information, hased auth credentials, access logs, etc.")
+    Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API")
+}
+
+System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system")
+System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
+
+Rel(customer, web_app, "Uses", "HTTPS")
+Rel(customer, spa, "Uses", "HTTPS")
+Rel(customer, mobile_app, "Uses")
+
+Rel_Neighbor(web_app, spa, "Delivers")
+Rel(spa, backend_api, "Uses", "async, JSON/HTTPS")
+Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS")
+Rel_Back_Neighbor(database, backend_api, "Reads from and writes to", "sync, JDBC")
+
+Rel_Back(customer, email_system, "Sends e-mails to")
+Rel_Back(email_system, backend_api, "Sends e-mails using", "sync, SMTP")
+Rel_Neighbor(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
+@enduml

percy/C4_Container Diagram Sample - message bus.puml

@@ -0,0 +1,51 @@
+@startuml "bigbankplc"
+!include ./../C4_Container.puml
+!include ./../C4_Context.puml
+!include ./../C4.puml
+
+skinparam wrapWidth 200
+skinparam maxMessageSize 200
+
+LAYOUT_TOP_DOWN
+'LAYOUT_AS_SKETCH()
+LAYOUT_WITH_LEGEND()
+
+
+Person(customer, Customer, "A customer")
+
+System_Boundary(c1, "Customer Information") {
+
+    Container(app, "Customer Application", "Javascript, Angular", "Allows customers to manage their profile")
+
+    Container(customer_service, "Customer Service", "Java, Spring Boot", "The point of access for customer information")
+
+    Container(message_bus, "Message Bus", "RabbitMQ", "Transport for business events")
+
+    Container(reporting_service, "Reporting Service", "Ruby", "Creates normalised data for reporting purposes")
+
+    Container(audit_service, "Audit Service", "C#/.NET", "Provides organisation-wide auditing facilities")
+
+    ContainerDb(customer_db, "Customer Database", "Oracle 12c", "Stores customer information")
+
+    ContainerDb(reporting_db, "Reporting Database", "MySQL", "Stores a normalized version of all business data for ad hoc reporting purposes")
+
+    Container(audit_store, "Audit Store", "Event Store", "Stores information about events that have happened")
+}
+
+Rel(customer, app, "Uses", "HTTPS")
+
+Rel_R(app, customer_service, "Updates customer information using", "async, JSON/HTTPS")
+
+Rel_L(customer_service, app, "Sends events to", "WebSocket")
+Rel_R(customer_service, message_bus, "Sends customer update events to")
+Rel(customer_service, customer_db, "Stores data in", "JDBC")
+
+Rel(message_bus, reporting_service, "Sends customer update events to")
+Rel(message_bus, audit_service, "Sends customer update events to")
+
+Rel(reporting_service, reporting_db, "Stores data in")
+Rel(audit_service, audit_store, "Stores events in")
+
+Lay_R(reporting_service, audit_service)
+
+@enduml

percy/C4_Container Diagram Sample - techtribesjs.puml

@@ -0,0 +1,51 @@
+@startuml "techtribesjs"
+!include ./../C4_Container.puml
+!include ./../C4_Context.puml
+!include ./../C4.puml
+
+LAYOUT_TOP_DOWN
+'LAYOUT_AS_SKETCH()
+LAYOUT_WITH_LEGEND()
+
+
+Person_Ext(anonymous_user, "Anonymous User")
+Person(aggregated_user, "Aggregated User")
+Person(administration_user, "Administration User")
+
+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")
+
+    ContainerDb(rel_db, "Relational Database", "MySQL 5.5.x", "Stores people, tribes, tribe membership, talks, events, jobs, badges, GitHub repos, etc.")
+
+    Container(filesystem, "File System", "FAT32", "Stores search indexes")
+
+    ContainerDb(nosql, "NoSQL Data Store", "MongoDB 2.2.x", "Stores from RSS/Atom feeds (blog posts) and tweets")
+
+    Container(updater, "Updater", "Java 7 Console App", "Updates profiles, tweets, GitHub repos and content on a scheduled basis")
+}
+
+System_Ext(twitter, "Twitter")
+System_Ext(github, "GitHub")
+System_Ext(blogs, "Blogs")
+
+
+Rel(anonymous_user, web_app, "Uses", "HTTPS")
+Rel(aggregated_user, web_app, "Uses", "HTTPS")
+Rel(administration_user, web_app, "Uses", "HTTPS")
+
+Rel(web_app, rel_db, "Reads from and writes to", "SQL/JDBC, post 3306")
+Rel(web_app, filesystem, "Reads from")
+Rel(web_app, nosql, "Reads from", "MongoDB wire protocol, port 27017")
+
+Rel_U(updater, rel_db, "Reads from and writes data to", "SQL/JDBC, post 3306")
+Rel_U(updater, filesystem, "Writes to")
+Rel_U(updater, nosql, "Reads from and writes to", "MongoDB wire protocol, port 27017")
+
+Rel(updater, twitter, "Gets profile information and tweets from", "HTTPS")
+Rel(updater, github, "Gets information about public code repositories from", "HTTPS")
+Rel(updater, blogs, "Gets content using RSS and Atom feeds from", "HTTP")
+
+Lay_R(rel_db, filesystem)
+
+@enduml

percy/C4_Context Diagram Sample - bigbankplc-landscape.puml

@@ -0,0 +1,41 @@
+@startuml
+!include ./../C4_Context.puml
+!include ./../C4.puml
+
+'LAYOUT_TOP_DOWN
+'LAYOUT_AS_SKETCH
+LAYOUT_WITH_LEGEND()
+
+title System Landscape diagram for Big Bank plc
+
+Person(customer, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.")
+
+Enterprise_Boundary(c0, "Big Bank plc") {
+    System(banking_system, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
+
+    System_Ext(atm, "ATM", "Allows customers to withdraw cash.")
+    System_Ext(mail_system, "E-mail system", "The internal Microsoft Exchange e-mail system.")
+
+    System_Ext(mainframe, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
+
+    Person_Ext(customer_service, "Customer Service Staff", "Customer service staff within the bank.")
+    Person_Ext(back_office, "Back Office Staff", "Administration and support staff within the bank.")
+}
+
+Rel_Neighbor(customer, banking_system, "Uses")
+Rel_R(customer, atm, "Withdraws cash using")
+Rel_Back(customer, mail_system, "Sends e-mails to")
+
+Rel_R(customer, customer_service, "Asks questions to", "Telephone")
+
+Rel_D(banking_system, mail_system, "Sends e-mail using")
+Rel_R(atm, mainframe, "Uses")
+Rel_R(banking_system, mainframe, "Uses")
+Rel_D(customer_service, mainframe, "Uses")
+Rel_U(back_office, mainframe, "Uses")
+
+Lay_D(atm, banking_system)
+
+Lay_D(atm, customer)
+Lay_U(mail_system, customer)
+@enduml

percy/C4_Context Diagram Sample - bigbankplc.puml

@@ -0,0 +1,19 @@
+@startuml
+!include ./../C4_Context.puml
+!include ./../C4.puml
+
+LAYOUT_WITH_LEGEND()
+
+title System Context diagram for Internet Banking System
+
+Person(customer, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.")
+System(banking_system, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
+
+System_Ext(mail_system, "E-mail system", "The internal Microsoft Exchange e-mail system.")
+System_Ext(mainframe, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
+
+Rel(customer, banking_system, "Uses")
+Rel_Back(customer, mail_system, "Sends e-mails to")
+Rel_Neighbor(banking_system, mail_system, "Sends e-mails", "SMTP")
+Rel(banking_system, mainframe, "Uses")
+@enduml

percy/C4_Context Diagram Sample - enterprise.puml

@@ -0,0 +1,41 @@
+@startuml "enterprise"
+!include ./../C4_Context.puml
+!include ./../C4.puml
+
+LAYOUT_TOP_DOWN
+'LAYOUT_AS_SKETCH()
+LAYOUT_WITH_LEGEND()
+
+Person(customer, "Customer", "A customer of Widgets Limited.")
+
+Enterprise_Boundary(c0, "Widgets Limited") {
+    Person(csa, "Customer Service Agent", "Deals with customer enquiries.")
+
+    System(ecommerce, "E-commerce System", "Allows customers to buy widgts online via the widgets.com website.")
+
+    System(fulfilment, "Fulfilment System", "Responsible for processing and shipping of customer orders.")
+}
+
+System(taxamo, "Taxamo", "Calculates local tax (for EU B2B customers) and acts as a front-end for Braintree Payments.")
+
+System(braintree, "Braintree Payments", "Processes credit card payments on behalf of Widgets Limited.")
+
+System(post, "Jersey Post", "Calculates worldwide shipping costs for packages.")
+
+Rel_R(customer, csa, "Asks questions to", "Telephone")
+
+Rel_R(customer, ecommerce, "Places orders for widgets using")
+
+Rel(csa, ecommerce, "Looks up order information using")
+
+Rel_R(ecommerce, fulfilment, "Sends order information to")
+
+Rel_D(fulfilment, post, "Gets shipping charges from")
+
+Rel_D(ecommerce, taxamo, "Delegates credit card processing to")
+
+Rel_L(taxamo, braintree, "Uses for credit card processing")
+
+Lay_D(customer, braintree)
+
+@enduml