diff --git a/C4.puml b/C4.puml index dc232ce..6c55aa5 100644 --- a/C4.puml +++ b/C4.puml @@ -144,14 +144,22 @@ skinparam rectangle<> { $tagSkin !endprocedure +' arrow colors cannot start with # (legend background has to start with #) +!function ColorNoHash($c) + !if (%substr($c, 0, 1) == "#") + !$c = %substr($c,1) + !endif + !return $c +!endfunction + !unquoted procedure $defineRelSkinparams($tagStereo, $textColor, $lineColor) !$elementSkin = "skinparam Arrow<<" + $tagStereo + ">> {" + %newline() !$elementSkin = $elementSkin + " Color " !if ($lineColor!="") - !$elementSkin = $elementSkin + $lineColor + !$elementSkin = $elementSkin + ColorNoHash($lineColor) !endif !if ($textColor!="") - !$elementSkin = $elementSkin + ";text:" + $textColor + !$elementSkin = $elementSkin + ";text:" + ColorNoHash($textColor) !endif !$elementSkin = $elementSkin + %newline() !$elementSkin = $elementSkin + "}" + %newline() diff --git a/percy/C4_Component Diagram Sample - bigbankplc.puml b/percy/C4_Component Diagram Sample - bigbankplc.puml index 93762ff..56b4327 100644 --- a/percy/C4_Component Diagram Sample - bigbankplc.puml +++ b/percy/C4_Component Diagram Sample - bigbankplc.puml @@ -17,7 +17,7 @@ System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking info 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(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary 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.") diff --git a/percy/C4_Container Diagram Sample - bigbankplc-icons.puml b/percy/C4_Container Diagram Sample - bigbankplc-icons.puml new file mode 100644 index 0000000..3e91f36 --- /dev/null +++ b/percy/C4_Container Diagram Sample - bigbankplc-icons.puml @@ -0,0 +1,51 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include ./../C4_Container.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml +!endif + +!define DEVICONS https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons +!define FONTAWESOME https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/font-awesome-5 +' uncomment the following line and comment the first to use locally +' !include C4_Container.puml +!include DEVICONS/angular.puml +!include DEVICONS/dotnet.puml +!include DEVICONS/java.puml +!include DEVICONS/msql_server.puml +!include FONTAWESOME/server.puml +!include FONTAWESOME/envelope.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", "java") + Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to cutomers via their web browser", "angular") + Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device", "dotnet") + ContainerDb(database, "Database", "SQL Database", "Stores user registraion information, hased auth credentials, access logs, etc.", "msql_server") + Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API", "server") +} + +System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", "envelope") +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 \ No newline at end of file diff --git a/percy/C4_Container Diagram Sample - bigbankplc.puml b/percy/C4_Container Diagram Sample - bigbankplc.puml index 241c3a5..f3cc79a 100644 --- a/percy/C4_Container Diagram Sample - bigbankplc.puml +++ b/percy/C4_Container Diagram Sample - bigbankplc.puml @@ -6,8 +6,8 @@ !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml !endif -LAYOUT_TOP_DOWN() -'LAYOUT_AS_SKETCH() +' LAYOUT_TOP_DOWN() +' LAYOUT_AS_SKETCH() LAYOUT_WITH_LEGEND() title Container diagram for Internet Banking System @@ -18,7 +18,7 @@ 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.") + ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.") Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API") } diff --git a/percy/C4_Container Diagram Sample - message bus.puml b/percy/C4_Container Diagram Sample - message bus.puml index 89824d0..cc49d85 100644 --- a/percy/C4_Container Diagram Sample - message bus.puml +++ b/percy/C4_Container Diagram Sample - message bus.puml @@ -1,4 +1,4 @@ -@startuml +@startuml "messagebus" ' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally !if %variable_exists("RELATIVE_INCLUDE") !include ./../C4_Container.puml @@ -13,6 +13,7 @@ LAYOUT_TOP_DOWN() 'LAYOUT_AS_SKETCH() LAYOUT_WITH_LEGEND() + Person(customer, Customer, "A customer") System_Boundary(c1, "Customer Information") { diff --git a/percy/C4_Container Diagram Sample - techtribesjs.puml b/percy/C4_Container Diagram Sample - techtribesjs.puml index 898844e..6cf8105 100644 --- a/percy/C4_Container Diagram Sample - techtribesjs.puml +++ b/percy/C4_Container Diagram Sample - techtribesjs.puml @@ -36,11 +36,11 @@ 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, rel_db, "Reads from and writes to", "SQL/JDBC, port 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, rel_db, "Reads from and writes data to", "SQL/JDBC, port 3306") Rel_U(updater, filesystem, "Writes to") Rel_U(updater, nosql, "Reads from and writes to", "MongoDB wire protocol, port 27017") diff --git a/percy/C4_Context Diagram Sample - enterprise.puml b/percy/C4_Context Diagram Sample - enterprise.puml index b407c2f..034b7ec 100644 --- a/percy/C4_Context Diagram Sample - enterprise.puml +++ b/percy/C4_Context Diagram Sample - enterprise.puml @@ -1,4 +1,4 @@ -@startuml +@startuml "enterprise" ' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally !if %variable_exists("RELATIVE_INCLUDE") !include ./../C4_Context.puml diff --git a/percy/TestLegend.puml b/percy/TestLegend.puml index 5d18af2..5a6a2db 100644 --- a/percy/TestLegend.puml +++ b/percy/TestLegend.puml @@ -3,7 +3,7 @@ !if %variable_exists("RELATIVE_INCLUDE") !include ./../C4_Component.puml !else - !include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/C4_Component.puml + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml !endif SHOW_PERSON_SPRITE(person2) @@ -11,19 +11,19 @@ SHOW_PERSON_SPRITE(person2) UpdateElementStyle("system", $bgColor="chocolate", $fontColor="orange", $borderColor="orange") UpdateRelStyle(black, black) -AddTagSupport("role1", $bgColor="green", $fontColor="white", $borderColor="#d73027", $shadowing="false") -AddTagSupport("role2", $fontColor="#d73027", $shadowing="true") -AddTagSupport("role3", $bgColor="orange") -AddTagSupport("role4", $borderColor="blue") -AddTagSupport("unusedRole") +AddElementTag("role1", $bgColor="green", $fontColor="white", $borderColor="#d73027", $shadowing="false") +AddElementTag("role2", $fontColor="#d73027", $shadowing="true") +AddElementTag("role3", $bgColor="orange") +AddElementTag("role4", $borderColor="blue") +AddElementTag("unusedRole") -AddRelTagSupport("line1", $lineColor="green", $textColor="blue") -AddRelTagSupport("line2", $lineColor="blue", $textColor="green") -AddRelTagSupport("line3", $textColor="orange") -AddRelTagSupport("line4", $lineColor="orange") +AddRelTag("line1", $lineColor="green", $textColor="blue") +AddRelTag("line2", $lineColor="blue", $textColor="green") +AddRelTag("line3", $textColor="orange") +AddRelTag("line4", $lineColor="orange") ' PlantUML cannot combine line styles, a combination has to be added as workaround as first additional tag -AddRelTagSupport("line3&line4", $lineColor="orange", $textColor="orange") -AddRelTagSupport("unusedLine", $lineColor="red", $textColor="red") +AddRelTag("line3&line4", $lineColor="orange", $textColor="orange") +AddRelTag("unusedLine", $lineColor="red", $textColor="red") Person(person, "Person") Person(person1, "Person1", $tags="role1") diff --git a/percy/TestRelations.puml b/percy/TestRelations.puml index eb62632..fc28ea8 100644 --- a/percy/TestRelations.puml +++ b/percy/TestRelations.puml @@ -3,7 +3,7 @@ !if %variable_exists("RELATIVE_INCLUDE") !include ./../C4_Component.puml !else - !include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/C4_Component.puml + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml !endif System(RelFrom, RelFrom) diff --git a/percy/TestRelationsDynamic.puml b/percy/TestRelationsDynamic.puml index c31ed60..45e01d7 100644 --- a/percy/TestRelationsDynamic.puml +++ b/percy/TestRelationsDynamic.puml @@ -3,7 +3,7 @@ !if %variable_exists("RELATIVE_INCLUDE") !include ./../C4_Dynamic.puml !else - !include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/C4_Dynamic.puml + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Dynamic.puml !endif System(RelFrom, RelFrom) diff --git a/samples/C4_Deployment Diagram Sample - bigbankplc-details.puml b/samples/C4_Deployment Diagram Sample - bigbankplc-details.puml index a37508f..5ca247a 100644 --- a/samples/C4_Deployment Diagram Sample - bigbankplc-details.puml +++ b/samples/C4_Deployment Diagram Sample - bigbankplc-details.puml @@ -61,7 +61,7 @@ Rel(spa, api, "Makes API calls to", "json/HTTPS") Rel_U(web, spa, "Delivers to the customer's web browser") Rel(api, db, "Reads from and writes to", "JDBC") Rel(api, db2, "Reads from and writes to", "JDBC", $tags="fallback") -Rel_R(db, db2, "Replicates data to", "message" , $descr="only in case of a problem only in case of a problem", $sprite="&envelope-closed", $tags="fallback") +Rel_R(db, db2, "Replicates data to") SHOW_LEGEND() @enduml \ No newline at end of file