diff --git a/README.md b/README.md index fadfb5e..acb707f 100644 --- a/README.md +++ b/README.md @@ -168,7 +168,7 @@ new PlantumlContext() ``` The result of the previous code is the following diagram: -![img](./docs/images/container-diagram-for-internet-banking-system-c4container.png) +![img](./docs/images/container-diagram-for-internet-banking-system-c4container.svg) #### Using the C4SCLI tool: @@ -189,7 +189,7 @@ new PlantumlContext() ``` The result of the previous code is the following diagram: -![img](./docs/images/container-diagram-for-internet-banking-system-v2-c4container.png) +![img](./docs/images/container-diagram-for-internet-banking-system-v2-c4container.svg) #### Creating a custom theme diff --git a/docs/images/component-diagram-for-internet-banking-system-c4component.svg b/docs/images/component-diagram-for-internet-banking-system-c4component.svg new file mode 100644 index 0000000..5c41bba --- /dev/null +++ b/docs/images/component-diagram-for-internet-banking-system-c4component.svg @@ -0,0 +1 @@ +Component diagram for Internet Banking SystemPersonal BankingCustomer A customer of the bank, withpersonal bank accounts.«external_person»«system»Internet Banking System Allows customers to viewinformation about their bankaccounts, and makepayments.«external_system»Mainframe BankingSystem Stores all of the corebanking information aboutcustomers, accounts,transactions, etc.«external_system»E-mail system The internal MicrosoftExchange e-mail system.usesSends e-mails toSends e-mails[SMTP]uses \ No newline at end of file diff --git a/docs/images/component-diagram-for-internet-banking-system-c4context.png b/docs/images/component-diagram-for-internet-banking-system-c4context.png new file mode 100644 index 0000000..43683b1 Binary files /dev/null and b/docs/images/component-diagram-for-internet-banking-system-c4context.png differ diff --git a/docs/images/component-diagram-for-internet-banking-system-c4context.puml b/docs/images/component-diagram-for-internet-banking-system-c4context.puml new file mode 100644 index 0000000..0d9bc0a --- /dev/null +++ b/docs/images/component-diagram-for-internet-banking-system-c4context.puml @@ -0,0 +1,28 @@ +@startuml component-diagram-for-internet-banking-system-c4context +!include ../.c4s/C4_Context.puml + +UpdateElementStyle("system", $bgColor=#D4E6F1,$fontColor=#1A5276,$borderColor=#1A5276,$shadowing="false",$shape=RoundedBoxShape(),$borderStyle=SolidLine(),$borderThickness=2) +UpdateElementStyle("external_system", $bgColor=#F8F9F9,$fontColor=#797D7F,$borderColor=#797D7F,$shadowing="false",$shape=RoundedBoxShape(),$borderStyle=SolidLine(),$borderThickness=1) +UpdateElementStyle("person", $bgColor=#797D7F,$fontColor=#797D7F,$borderColor=#797D7F,$shadowing="false",$shape=RoundedBoxShape(),$borderStyle=SolidLine(),$borderThickness=2) +UpdateElementStyle("component", $bgColor=#FAE5D3,$fontColor=#CA6F1E,$borderColor=#CA6F1E,$shadowing="false",$shape=RoundedBoxShape(),$borderStyle=SolidLine(),$borderThickness=2) +UpdateElementStyle("external_component", $bgColor=#F8F9F9,$fontColor=#797D7F,$borderColor=#797D7F,$shadowing="false",$shape=RoundedBoxShape(),$borderStyle=SolidLine(),$borderThickness=1) +UpdateElementStyle("container", $bgColor=#EAF2F8,$fontColor=#2E86C1,$borderColor=#2E86C1,$shadowing="false",$shape=RoundedBoxShape(),$borderStyle=SolidLine(),$borderThickness=2) +UpdateElementStyle("external_container", $bgColor=#F8F9F9,$fontColor=#797D7F,$borderColor=#797D7F,$shadowing="false",$shape=RoundedBoxShape(),$borderStyle=SolidLine(),$borderThickness=1) +UpdateBoundaryStyle($elementName=system,$bgColor=#F8F9F9,$fontColor=#797D7F,$borderColor=#797D7F,$shadowing="false",$shape=RoundedBoxShape()) +UpdateBoundaryStyle($elementName=container,$bgColor=#F8F9F9,$fontColor=#797D7F,$borderColor=#797D7F,$shadowing="false",$shape=RoundedBoxShape()) +UpdateBoundaryStyle($elementName=enterprise,$bgColor=#F8F9F9,$fontColor=#797D7F,$borderColor=#797D7F,$shadowing="false",$shape=RoundedBoxShape()) +SHOW_PERSON_PORTRAIT() +LAYOUT_TOP_DOWN() + +title Component diagram for Internet Banking System + +Person_Ext(customer, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.") +System(BankingSystem, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.") +System_Ext(Mainframe, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") +System_Ext(MailSystem, "E-mail system", "The internal Microsoft Exchange e-mail system.") + +Rel(customer, BankingSystem, "uses") +Rel_Back(customer, MailSystem, "Sends e-mails to") +Rel_Neighbor(BankingSystem, MailSystem, "Sends e-mails", "SMTP") +Rel(BankingSystem, Mainframe, "uses") +@enduml diff --git a/docs/images/component-diagram-for-internet-banking-system-c4context.svg b/docs/images/component-diagram-for-internet-banking-system-c4context.svg new file mode 100644 index 0000000..ef10e10 --- /dev/null +++ b/docs/images/component-diagram-for-internet-banking-system-c4context.svg @@ -0,0 +1 @@ +Component diagram for Internet Banking SystemPersonal BankingCustomer A customer of the bank, withpersonal bank accounts.«external_person»«system»Internet Banking System Allows customers to viewinformation about their bankaccounts, and makepayments.«external_system»Mainframe BankingSystem Stores all of the corebanking information aboutcustomers, accounts,transactions, etc.«external_system»E-mail system The internal MicrosoftExchange e-mail system.usesSends e-mails toSends e-mails[SMTP]uses \ No newline at end of file diff --git a/docs/images/container-diagram-for-internet-banking-system-c4container.svg b/docs/images/container-diagram-for-internet-banking-system-c4container.svg new file mode 100644 index 0000000..1fc4e43 --- /dev/null +++ b/docs/images/container-diagram-for-internet-banking-system-c4container.svg @@ -0,0 +1 @@ +Container diagram for Internet Banking System«system_boundary»«boundary»Internet Banking[System]Personal BankingCustomer A customer of the bank, withpersonal bank accounts.«external_person»«system»Internet Banking System Allows customers to viewinformation about their bankaccounts, and makepayments.«external_system»E-mail system The internal MicrosoftExchange e-mail system.«container»WebApp[Web Application:C#, WebApi] Delivers the static contentand the Internet banking SPA«container»Spa[Spa:JavaScript, Angular] Delivers the static contentand the Internet banking SPA«container»Mobile App[Mobile:C#, Xamarin] Provides a mobile bankingexperience«container»SqlDatabase[Database:SQL Database] Stores user registrationinformation, hashed authcredentials, access logs, etc.«container»RabbitMQ[Queue:RabbitMQ] Stores user registrationinformation, hashed authcredentials, access logs, etc.«container»BackendApi[Api:Dotnet, Docker Container] Provides Internet bankingfunctionality via API.Uses[HTTPS]Uses[HTTPS]UsesDeliversUses[async, JSON/HTTPS]Uses[async, JSON/HTTPS]Uses[async, JSON/HTTPS]Uses[async, JSON]Sends e-mails toSends e-mails using[sync, SMTP]Uses[sync/async, XML/HTTPS] \ No newline at end of file diff --git a/docs/images/container-diagram-for-internet-banking-system-v2-c4container.svg b/docs/images/container-diagram-for-internet-banking-system-v2-c4container.svg new file mode 100644 index 0000000..0a13ae6 --- /dev/null +++ b/docs/images/container-diagram-for-internet-banking-system-v2-c4container.svg @@ -0,0 +1 @@ +Container diagram for Internet Banking System v2«system_boundary»«boundary»Internet Banking[System]Personal BankingCustomer A customer of the bank, withpersonal bank accounts.«external_person»«system»Internet Banking System Allows customers to viewinformation about their bankaccounts, and makepayments.«external_system»E-mail system The internal MicrosoftExchange e-mail system.«container»WebApp[Web Application:C#, WebApi] Delivers the static contentand the Internet banking SPA«container»Spa[Spa:JavaScript, Angular] Delivers the static contentand the Internet banking SPA«container»Mobile App[Mobile:C#, Xamarin] Provides a mobile bankingexperience«container»SqlDatabase[Database:SQL Database] Stores user registrationinformation, hashed authcredentials, access logs, etc.«container»RabbitMQ[Queue:RabbitMQ] Stores user registrationinformation, hashed authcredentials, access logs, etc.«container»BackendApi[Api:Dotnet, Docker Container] Provides Internet bankingfunctionality via API.Uses[HTTPS]Uses[HTTPS]UsesDeliversUses[async, JSON/HTTPS]Uses[async, JSON/HTTPS]Uses[async, JSON/HTTPS]Uses[async, JSON]Sends e-mails toSends e-mails using[sync, SMTP]Uses[sync/async, XML/HTTPS] \ No newline at end of file diff --git a/docs/images/internet-banking-system-api-application-c4component.svg b/docs/images/internet-banking-system-api-application-c4component.svg new file mode 100644 index 0000000..83f3a83 --- /dev/null +++ b/docs/images/internet-banking-system-api-application-c4component.svg @@ -0,0 +1 @@ +Internet Banking System API Application«container_boundary»«boundary»API Application[Container]«container»MobileApp[Mobile:C#, Xamarin] Provides a limited subset ofthe Internet bankingfunctionality to customersvia their mobile device«container»SqlDatabase[Database:SQL Database] Stores user registrationinformation, hashed authcredentials, access logs, etc.«external_system»Mainframe BankingSystem Stores all of the corebanking information aboutcustomers, accounts,transactions, etc.Spa«component»Sign In Controller[MVC Controller] Allows users to sign in to theinternet banking system«component»Accounts SummaryController[MVC Controller] Provides customers with asummary of their bankaccounts«component»Security Component[Spring Bean] Provides functionality relatedto singing in, changingpasswords, etc.«component»Mainframe BankingSystem Facade[Spring Bean] A facade onto the mainframebanking system.usesusesRead & write to[JDBC]Uses[XML/HTTPS]Uses[JSON/HTTPS]Uses[JSON/HTTPS]Uses[JSON/HTTPS]Uses[JSON/HTTPS] \ No newline at end of file diff --git a/docs/images/sequence-diagram-for-internet-banking-system-c4sequence.svg b/docs/images/sequence-diagram-for-internet-banking-system-c4sequence.svg new file mode 100644 index 0000000..d6189fa --- /dev/null +++ b/docs/images/sequence-diagram-for-internet-banking-system-c4sequence.svg @@ -0,0 +1 @@ +Api Application[Container]Sequence diagram for Internet Banking System«container»Single-Page Application[None:JavaScript and Angular]«component»Sign In Controller[Spring MVC Rest Controller]«component»Security Component[Spring Bean]«container»Database[Database:Relational Database Schema]Submits credentials to[JSON/HTTPS]Calls isAuthenticated()onselect * from userswhere username = ?o[JDBCS] \ No newline at end of file diff --git a/docs/images/system-context-diagram-for-internet-banking-system-c4deployment.svg b/docs/images/system-context-diagram-for-internet-banking-system-c4deployment.svg new file mode 100644 index 0000000..9ee3cc1 --- /dev/null +++ b/docs/images/system-context-diagram-for-internet-banking-system-c4deployment.svg @@ -0,0 +1 @@ +System Context diagram for Internet Banking System«node»Big Bank plc[Big Bank plc data center]«node»bigbank-api***x8[Ubuntu 16.04 LTS]«node»Apache Tomcat[Apache Tomcat 8.x]PropertyValueJava Version8Xmx512MXms1024M«node»bigbank-db01[Ubuntu 16.04 LTS]«node»Oracle - Primary[Oracle 12c]«node»bigbank-db02[Ubuntu 16.04 LTS]«node»Oracle - Primary[Oracle 12c]«node»bigbank-web***x4[Ubuntu 16.04 LTS]«node»Apache Tomcat[Apache Tomcat 8.x]PropertyValueJava Version8Xmx512MXms1024M«node»Customer's mobile device[Apple IOS]«node»Customer's computer[Mircosoft Windows and Apple macOS]«node»Web Browser[Google Chrome, Mozilla Firefox,Apple Safari or Microsoft Edge]«container»BackendApi[Api:Dotnet, Docker Container] Provides Internet bankingfunctionality via API.«container»OracleDatabase[Database:Oracle Database] Stores user registrationinformation, hashed authcredentials, access logs, etc.«container»OracleDatabase[Database:Oracle Database] Stores user registrationinformation, hashed authcredentials, access logs, etc.«container»WebApp[Web Application:C#, WebApi] Delivers the static contentand the Internet banking SPA«container»MobileApp[Mobile:C#, Xamarin] Provides a limited subset ofthe Internet bankingfunctionality to customersvia their mobile device«container»SPA[Spa:JavaScript, Angular] Provides all the Internetbanking functionality tocustomers via their webbrowserMakes API calls to[json/HTTPS]Makes API calls to[json/HTTPS]Delivers to the customer's web browserWrites to[JDBC]Reads from[JDBC]Replicates data to[JDBC] \ No newline at end of file diff --git a/docs/images/system-enterprise-diagram-for-internet-banking-system-c4component.svg b/docs/images/system-enterprise-diagram-for-internet-banking-system-c4component.svg new file mode 100644 index 0000000..ccbc277 --- /dev/null +++ b/docs/images/system-enterprise-diagram-for-internet-banking-system-c4component.svg @@ -0,0 +1 @@ +System Enterprise diagram for Internet Banking System«enterprise_boundary»«boundary»Domain A[Enterprise]«enterprise_boundary»«boundary»Domain Internal Users[Enterprise]«enterprise_boundary»«boundary»Domain Managers[Enterprise]Personal BankingCustomer A customer of the bank, withpersonal bank accounts.«external_person»«external_system»Mainframe BankingSystem Stores all of the corebanking information aboutcustomers, accounts,transactions, etc.«external_system»E-mail system The internal MicrosoftExchange e-mail system.«system»Internet Banking System Allows customers to viewinformation about their bankaccounts, and makepayments.Personal BankingCustomer An customer of the bank,with personal bank accounts.«person»Manager BankingCustomer A manager of the bank, withpersonal bank accounts.«person»usesusesusesSends e-mails toSends e-mails[SMTP]uses \ No newline at end of file diff --git a/docs/images/system-enterprise-diagram-for-internet-banking-system-c4context.png b/docs/images/system-enterprise-diagram-for-internet-banking-system-c4context.png new file mode 100644 index 0000000..afaa837 Binary files /dev/null and b/docs/images/system-enterprise-diagram-for-internet-banking-system-c4context.png differ diff --git a/docs/images/system-enterprise-diagram-for-internet-banking-system-c4context.puml b/docs/images/system-enterprise-diagram-for-internet-banking-system-c4context.puml new file mode 100644 index 0000000..4e53bed --- /dev/null +++ b/docs/images/system-enterprise-diagram-for-internet-banking-system-c4context.puml @@ -0,0 +1,44 @@ +@startuml system-enterprise-diagram-for-internet-banking-system-c4context +!include ../.c4s/C4_Context.puml + +UpdateElementStyle("system", $bgColor=#D4E6F1,$fontColor=#1A5276,$borderColor=#1A5276,$shadowing="false",$shape=RoundedBoxShape(),$borderStyle=SolidLine(),$borderThickness=2) +UpdateElementStyle("external_system", $bgColor=#F8F9F9,$fontColor=#797D7F,$borderColor=#797D7F,$shadowing="false",$shape=RoundedBoxShape(),$borderStyle=SolidLine(),$borderThickness=1) +UpdateElementStyle("person", $bgColor=#797D7F,$fontColor=#797D7F,$borderColor=#797D7F,$shadowing="false",$shape=RoundedBoxShape(),$borderStyle=SolidLine(),$borderThickness=2) +UpdateElementStyle("component", $bgColor=#FAE5D3,$fontColor=#CA6F1E,$borderColor=#CA6F1E,$shadowing="false",$shape=RoundedBoxShape(),$borderStyle=SolidLine(),$borderThickness=2) +UpdateElementStyle("external_component", $bgColor=#F8F9F9,$fontColor=#797D7F,$borderColor=#797D7F,$shadowing="false",$shape=RoundedBoxShape(),$borderStyle=SolidLine(),$borderThickness=1) +UpdateElementStyle("container", $bgColor=#EAF2F8,$fontColor=#2E86C1,$borderColor=#2E86C1,$shadowing="false",$shape=RoundedBoxShape(),$borderStyle=SolidLine(),$borderThickness=2) +UpdateElementStyle("external_container", $bgColor=#F8F9F9,$fontColor=#797D7F,$borderColor=#797D7F,$shadowing="false",$shape=RoundedBoxShape(),$borderStyle=SolidLine(),$borderThickness=1) +UpdateBoundaryStyle($elementName=system,$bgColor=#F8F9F9,$fontColor=#797D7F,$borderColor=#797D7F,$shadowing="false",$shape=RoundedBoxShape()) +UpdateBoundaryStyle($elementName=container,$bgColor=#F8F9F9,$fontColor=#797D7F,$borderColor=#797D7F,$shadowing="false",$shape=RoundedBoxShape()) +UpdateBoundaryStyle($elementName=enterprise,$bgColor=#F8F9F9,$fontColor=#797D7F,$borderColor=#797D7F,$shadowing="false",$shape=RoundedBoxShape()) +SHOW_PERSON_PORTRAIT() +LAYOUT_TOP_DOWN() + +title System Enterprise diagram for Internet Banking System + +Person_Ext(customer, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.") + +Enterprise_Boundary(enterprise.boundary, "Domain A") { + System(BankingSystem, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.") + +Enterprise_Boundary(enterprise.boundary.1, "Domain Internal Users") { + Person(internalcustomer, "Personal Banking Customer", "An customer of the bank, with personal bank accounts.") +} + + +Enterprise_Boundary(enterprise.boundary.2, "Domain Managers") { + Person(manager, "Manager Banking Customer", "A manager of the bank, with personal bank accounts.") +} + +} + +System_Ext(Mainframe, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") +System_Ext(MailSystem, "E-mail system", "The internal Microsoft Exchange e-mail system.") + +Rel(customer, BankingSystem, "uses") +Rel(internalcustomer, BankingSystem, "uses") +Rel(manager, BankingSystem, "uses") +Rel_Back(customer, MailSystem, "Sends e-mails to") +Rel_Neighbor(BankingSystem, MailSystem, "Sends e-mails", "SMTP") +Rel(BankingSystem, Mainframe, "uses") +@enduml diff --git a/docs/images/system-enterprise-diagram-for-internet-banking-system-c4context.svg b/docs/images/system-enterprise-diagram-for-internet-banking-system-c4context.svg new file mode 100644 index 0000000..0520387 --- /dev/null +++ b/docs/images/system-enterprise-diagram-for-internet-banking-system-c4context.svg @@ -0,0 +1 @@ +System Enterprise diagram for Internet Banking System«enterprise_boundary»«boundary»Domain A[Enterprise]«enterprise_boundary»«boundary»Domain Internal Users[Enterprise]«enterprise_boundary»«boundary»Domain Managers[Enterprise]Personal BankingCustomer A customer of the bank, withpersonal bank accounts.«external_person»«external_system»Mainframe BankingSystem Stores all of the corebanking information aboutcustomers, accounts,transactions, etc.«external_system»E-mail system The internal MicrosoftExchange e-mail system.«system»Internet Banking System Allows customers to viewinformation about their bankaccounts, and makepayments.Personal BankingCustomer An customer of the bank,with personal bank accounts.«person»Manager BankingCustomer A manager of the bank, withpersonal bank accounts.«person»usesusesusesSends e-mails toSends e-mails[SMTP]uses \ No newline at end of file diff --git a/samples/ModelDiagrams/Program.cs b/samples/ModelDiagrams/Program.cs index 4afc87d..f2f7930 100644 --- a/samples/ModelDiagrams/Program.cs +++ b/samples/ModelDiagrams/Program.cs @@ -19,4 +19,5 @@ new PlantumlContext() .UseDiagramImageBuilder() + .UseDiagramSvgImageBuilder() .Export(path, diagrams, new ParadisoTheme()); \ No newline at end of file