diff --git a/README.md b/README.md
index 5c2eefa8c..cfb7435c9 100644
--- a/README.md
+++ b/README.md
@@ -219,6 +219,77 @@ pie
Sit down: 3: Me
```
+### C4 diagram [docs]
+
+```
+C4Context
+title System Context diagram for Internet Banking System
+
+Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
+Person(customerB, "Banking Customer B")
+Person_Ext(customerC, "Banking Customer C")
+System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
+
+Person(customerD, "Banking Customer D", "A customer of the bank,
with personal bank accounts.")
+
+Enterprise_Boundary(b1, "BankBoundary") {
+
+ SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
+
+ System_Boundary(b2, "BankBoundary2") {
+ System(SystemA, "Banking System A")
+ System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
+ }
+
+ System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
+ SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
+
+ Boundary(b3, "BankBoundary3", "boundary") {
+ SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
+ SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
+ }
+}
+
+BiRel(customerA, SystemAA, "Uses")
+BiRel(SystemAA, SystemE, "Uses")
+Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
+Rel(SystemC, customerA, "Sends e-mails to")
+```
+```mermaid
+C4Context
+title System Context diagram for Internet Banking System
+
+Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
+Person(customerB, "Banking Customer B")
+Person_Ext(customerC, "Banking Customer C")
+System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
+
+Person(customerD, "Banking Customer D", "A customer of the bank,
with personal bank accounts.")
+
+Enterprise_Boundary(b1, "BankBoundary") {
+
+ SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
+
+ System_Boundary(b2, "BankBoundary2") {
+ System(SystemA, "Banking System A")
+ System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
+ }
+
+ System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
+ SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
+
+ Boundary(b3, "BankBoundary3", "boundary") {
+ SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
+ SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
+ }
+}
+
+BiRel(customerA, SystemAA, "Uses")
+BiRel(SystemAA, SystemE, "Uses")
+Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
+Rel(SystemC, customerA, "Sends e-mails to")
+```
+
## Release
For those who have the permission to do so:
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 63a3ee4aa..9516712d7 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -202,6 +202,77 @@ pie
Sit down: 3: Me
```
+### C4 图 [文档]
+
+```
+C4Context
+title System Context diagram for Internet Banking System
+
+Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
+Person(customerB, "Banking Customer B")
+Person_Ext(customerC, "Banking Customer C")
+System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
+
+Person(customerD, "Banking Customer D", "A customer of the bank,
with personal bank accounts.")
+
+Enterprise_Boundary(b1, "BankBoundary") {
+
+ SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
+
+ System_Boundary(b2, "BankBoundary2") {
+ System(SystemA, "Banking System A")
+ System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
+ }
+
+ System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
+ SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
+
+ Boundary(b3, "BankBoundary3", "boundary") {
+ SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
+ SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
+ }
+}
+
+BiRel(customerA, SystemAA, "Uses")
+BiRel(SystemAA, SystemE, "Uses")
+Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
+Rel(SystemC, customerA, "Sends e-mails to")
+```
+```mermaid
+C4Context
+title System Context diagram for Internet Banking System
+
+Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
+Person(customerB, "Banking Customer B")
+Person_Ext(customerC, "Banking Customer C")
+System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
+
+Person(customerD, "Banking Customer D", "A customer of the bank,
with personal bank accounts.")
+
+Enterprise_Boundary(b1, "BankBoundary") {
+
+ SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
+
+ System_Boundary(b2, "BankBoundary2") {
+ System(SystemA, "Banking System A")
+ System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
+ }
+
+ System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
+ SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
+
+ Boundary(b3, "BankBoundary3", "boundary") {
+ SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
+ SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
+ }
+}
+
+BiRel(customerA, SystemAA, "Uses")
+BiRel(SystemAA, SystemE, "Uses")
+Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
+Rel(SystemC, customerA, "Sends e-mails to")
+```
+
## 发布
对于有权限的同学来说，你可以通过以下步骤来完成发布操作：
diff --git a/demos/index.html b/demos/index.html
index ccf9cdf2a..23fe83bd8 100644
--- a/demos/index.html
+++ b/demos/index.html
@@ -133,6 +133,18 @@ Enterprise_Boundary(b0, "BankBoundary0") {
Rel(ma, sign, "Uses", "JSON/HTTPS")
Rel(ma, accounts, "Uses", "JSON/HTTPS")
+
+ UpdateRelStyle(spa, sign, $offsetY="-40")
+ UpdateRelStyle(spa, accounts, $offsetX="40", $offsetY="40")
+
+ UpdateRelStyle(ma, sign, $offsetX="-90", $offsetY="40")
+ UpdateRelStyle(ma, accounts, $offsetY="-40")
+
+ UpdateRelStyle(sign, security, $offsetX="-160", $offsetY="10")
+ UpdateRelStyle(accounts, mbsfacade, $offsetX="140", $offsetY="10")
+ UpdateRelStyle(security, db, $offsetY="-40")
+ UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")
+
@@ -197,6 +209,12 @@ Enterprise_Boundary(b0, "BankBoundary0") {
Rel(api, db, "Reads from and writes to", "JDBC")
Rel(api, db2, "Reads from and writes to", "JDBC")
Rel_R(db, db2, "Replicates data to")
+
+ UpdateRelStyle(spa, api, $offsetY="-40")
+ UpdateRelStyle(web, spa, $offsetY="-40")
+ UpdateRelStyle(api, db, $offsetY="-20", $offsetX="5")
+ UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20")
+ UpdateRelStyle(db, db2, $offsetY="-10")
diff --git a/docs/c4c.md b/docs/c4c.md
index 4facd44ba..5af7193e3 100644
--- a/docs/c4c.md
+++ b/docs/c4c.md
@@ -1,4 +1,4 @@
-# C4C Diagrams
+# C4 Diagrams
**Edit this Page** [](https://github.com/mermaid-js/mermaid/blob/develop/docs/gitgraph.md)
> C4 Diagram: This is an experimental diagram for now. The syntax and properties can change in future releases. Proper documentation will be provided when the syntax is stable.
@@ -157,4 +157,211 @@ UpdateRelStyle(customerA, bankA, "red", "blue", "-40", "60")
UpdateRelStyle(customerA, bankA, $offsetX="-40", $offsetY="60", $lineColor="blue", $textColor="red")
UpdateRelStyle(customerA, bankA, $offsetY="60")
+```
+
+## C4 System Context Diagram (C4Context)
+
+```mermaid-example
+ C4Context
+ title System Context diagram for Internet Banking System
+ Enterprise_Boundary(b0, "BankBoundary0") {
+ Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
+ Person(customerB, "Banking Customer B")
+ Person_Ext(customerC, "Banking Customer C", "desc")
+
+ Person(customerD, "Banking Customer D", "A customer of the bank,
with personal bank accounts.")
+
+ System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
+
+ Enterprise_Boundary(b1, "BankBoundary") {
+
+ SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
+
+ System_Boundary(b2, "BankBoundary2") {
+ System(SystemA, "Banking System A")
+ System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
+ }
+
+ System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
+ SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
+
+ Boundary(b3, "BankBoundary3", "boundary") {
+ SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
+ SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
+ }
+ }
+ }
+
+ BiRel(customerA, SystemAA, "Uses")
+ BiRel(SystemAA, SystemE, "Uses")
+ Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
+ Rel(SystemC, customerA, "Sends e-mails to")
+
+ UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
+ UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
+ UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
+ UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
+ UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
+
+ UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
+
+```
+
+## C4 Container diagram (C4Container)
+
+```mermaid-example
+ C4Container
+ title Container diagram for Internet Banking System
+
+ System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", $tags="v1.0")
+ Person(customer, Customer, "A customer of the bank, with personal bank accounts", $tags="v1.0")
+
+ Container_Boundary(c1, "Internet Banking") {
+ Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to cutomers via their web browser")
+ Container_Ext(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
+ Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
+ ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")
+ ContainerDb_Ext(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API")
+
+ }
+
+ 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")
+ UpdateRelStyle(customer, web_app, $offsetY="60", $offsetX="90")
+ Rel(customer, spa, "Uses", "HTTPS")
+ UpdateRelStyle(customer, spa, $offsetY="-40")
+ Rel(customer, mobile_app, "Uses")
+ UpdateRelStyle(customer, mobile_app, $offsetY="-30")
+
+ Rel(web_app, spa, "Delivers")
+ UpdateRelStyle(web_app, spa, $offsetX="130")
+ Rel(spa, backend_api, "Uses", "async, JSON/HTTPS")
+ Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS")
+ Rel_Back(database, backend_api, "Reads from and writes to", "sync, JDBC")
+
+ Rel(email_system, customer, "Sends e-mails to")
+ UpdateRelStyle(email_system, customer, $offsetX="-45")
+ Rel(backend_api, email_system, "Sends e-mails using", "sync, SMTP")
+ UpdateRelStyle(backend_api, email_system, $offsetY="-60")
+ Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
+ UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140")
+
+```
+
+## C4 Component diagram (C4Component)
+```mermaid-example
+ C4Component
+ 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 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.")
+
+ Rel(sign, security, "Uses")
+ Rel(accounts, mbsfacade, "Uses")
+ Rel(security, db, "Read & write to", "JDBC")
+ Rel(mbsfacade, mbs, "Uses", "XML/HTTPS")
+ }
+
+ Rel_Back(spa, sign, "Uses", "JSON/HTTPS")
+ Rel(spa, accounts, "Uses", "JSON/HTTPS")
+
+ Rel(ma, sign, "Uses", "JSON/HTTPS")
+ Rel(ma, accounts, "Uses", "JSON/HTTPS")
+
+ UpdateRelStyle(spa, sign, $offsetY="-40")
+ UpdateRelStyle(spa, accounts, $offsetX="40", $offsetY="40")
+
+ UpdateRelStyle(ma, sign, $offsetX="-90", $offsetY="40")
+ UpdateRelStyle(ma, accounts, $offsetY="-40")
+
+ UpdateRelStyle(sign, security, $offsetX="-160", $offsetY="10")
+ UpdateRelStyle(accounts, mbsfacade, $offsetX="140", $offsetY="10")
+ UpdateRelStyle(security, db, $offsetY="-40")
+ UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")
+
+```
+
+## C4 Dynamic diagram (C4Dynamic)
+
+```mermaid-example
+ C4Dynamic
+ title Dynamic diagram for Internet Banking System - API Application
+
+ ContainerDb(c4, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
+ Container(c1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
+ Container_Boundary(b, "API Application") {
+ Component(c3, "Security Component", "Spring Bean", "Provides functionality Related to signing in, changing passwords, etc.")
+ Component(c2, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.")
+ }
+ Rel(c1, c2, "Submits credentials to", "JSON/HTTPS")
+ Rel(c2, c3, "Calls isAuthenticated() on")
+ Rel(c3, c4, "select * from users where username = ?", "JDBC")
+
+ UpdateRelStyle(c1, c2, $textColor="red", $offsetY="-40")
+ UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60")
+ UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10")
+
+```
+
+## C4 Deployment diagram (C4Deployment)
+
+```mermaid-example
+ C4Deployment
+ title Deployment Diagram for Internet Banking System - Live
+
+ Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){
+ Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
+ }
+
+ Deployment_Node(comp, "Customer's computer", "Mircosoft Windows or Apple macOS"){
+ Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,
Apple Safari or Microsoft Edge"){
+ Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.")
+ }
+ }
+
+ Deployment_Node(plc, "Big Bank plc", "Big Bank plc data center"){
+ Deployment_Node(dn, "bigbank-api*** x8", "Ubuntu 16.04 LTS"){
+ Deployment_Node(apache, "Apache Tomcat", "Apache Tomcat 8.x"){
+ Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.")
+ }
+ }
+ Deployment_Node(bb2, "bigbank-web*** x4", "Ubuntu 16.04 LTS"){
+ Deployment_Node(apache2, "Apache Tomcat", "Apache Tomcat 8.x"){
+ Container(web, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet Banking single page application.")
+ }
+ }
+ Deployment_Node(bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS"){
+ Deployment_Node(oracle, "Oracle - Primary", "Oracle 12c"){
+ ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
+ }
+ }
+ Deployment_Node(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS") {
+ Deployment_Node(oracle2, "Oracle - Secondary", "Oracle 12c") {
+ ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
+ }
+ }
+ }
+
+ Rel(mobile, api, "Makes API calls to", "json/HTTPS")
+ 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")
+ Rel_R(db, db2, "Replicates data to")
+
+ UpdateRelStyle(spa, api, $offsetY="-40")
+ UpdateRelStyle(web, spa, $offsetY="-40")
+ UpdateRelStyle(api, db, $offsetY="-20", $offsetX="5")
+ UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20")
+ UpdateRelStyle(db, db2, $offsetY="-10")
+
```
\ No newline at end of file