svg component

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
 

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

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

samples/ModelDiagrams/Program.cs

@@ -19,4 +19,5 @@
 
 new PlantumlContext()
     .UseDiagramImageBuilder()
+    .UseDiagramSvgImageBuilder()
     .Export(path, diagrams, new ParadisoTheme());