collab/mermaid/docs/syntax/c4.mdblame
View source
6dd74de1> **Warning**
6dd74de2>
6dd74de3> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
6dd74de4>
6dd74de5> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/c4.md](../../packages/mermaid/src/docs/syntax/c4.md).
6dd74de6
6dd74de7# C4 Diagrams
6dd74de8
6dd74de9> 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.
6dd74de10
6dd74de11Mermaid's C4 diagram syntax is compatible with plantUML. See example below:
6dd74de12
6dd74de13```mermaid-example
6dd74de14 C4Context
6dd74de15 title System Context diagram for Internet Banking System
6dd74de16 Enterprise_Boundary(b0, "BankBoundary0") {
6dd74de17 Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
6dd74de18 Person(customerB, "Banking Customer B")
6dd74de19 Person_Ext(customerC, "Banking Customer C", "desc")
6dd74de20
6dd74de21 Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
6dd74de22
6dd74de23 System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
6dd74de24
6dd74de25 Enterprise_Boundary(b1, "BankBoundary") {
6dd74de26
6dd74de27 SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
6dd74de28
6dd74de29 System_Boundary(b2, "BankBoundary2") {
6dd74de30 System(SystemA, "Banking System A")
6dd74de31 System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
6dd74de32 }
6dd74de33
6dd74de34 System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
6dd74de35 SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
6dd74de36
6dd74de37 Boundary(b3, "BankBoundary3", "boundary") {
6dd74de38 SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
6dd74de39 SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
6dd74de40 }
6dd74de41 }
6dd74de42 }
6dd74de43
6dd74de44 BiRel(customerA, SystemAA, "Uses")
6dd74de45 BiRel(SystemAA, SystemE, "Uses")
6dd74de46 Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
6dd74de47 Rel(SystemC, customerA, "Sends e-mails to")
6dd74de48
6dd74de49 UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
6dd74de50 UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
6dd74de51 UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
6dd74de52 UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
6dd74de53 UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
6dd74de54
6dd74de55 UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
6dd74de56
6dd74de57
6dd74de58```
6dd74de59
6dd74de60```mermaid
6dd74de61 C4Context
6dd74de62 title System Context diagram for Internet Banking System
6dd74de63 Enterprise_Boundary(b0, "BankBoundary0") {
6dd74de64 Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
6dd74de65 Person(customerB, "Banking Customer B")
6dd74de66 Person_Ext(customerC, "Banking Customer C", "desc")
6dd74de67
6dd74de68 Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
6dd74de69
6dd74de70 System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
6dd74de71
6dd74de72 Enterprise_Boundary(b1, "BankBoundary") {
6dd74de73
6dd74de74 SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
6dd74de75
6dd74de76 System_Boundary(b2, "BankBoundary2") {
6dd74de77 System(SystemA, "Banking System A")
6dd74de78 System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
6dd74de79 }
6dd74de80
6dd74de81 System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
6dd74de82 SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
6dd74de83
6dd74de84 Boundary(b3, "BankBoundary3", "boundary") {
6dd74de85 SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
6dd74de86 SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
6dd74de87 }
6dd74de88 }
6dd74de89 }
6dd74de90
6dd74de91 BiRel(customerA, SystemAA, "Uses")
6dd74de92 BiRel(SystemAA, SystemE, "Uses")
6dd74de93 Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
6dd74de94 Rel(SystemC, customerA, "Sends e-mails to")
6dd74de95
6dd74de96 UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
6dd74de97 UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
6dd74de98 UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
6dd74de99 UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
6dd74de100 UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
6dd74de101
6dd74de102 UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
6dd74de103
6dd74de104
6dd74de105```
6dd74de106
6dd74de107For an example, see the source code demos/index.html
6dd74de108
6dd74de1095 types of C4 charts are supported.
6dd74de110
6dd74de111- System Context (C4Context)
6dd74de112- Container diagram (C4Container)
6dd74de113- Component diagram (C4Component)
6dd74de114- Dynamic diagram (C4Dynamic)
6dd74de115- Deployment diagram (C4Deployment)
6dd74de116
6dd74de117Please refer to the linked document [C4-PlantUML syntax](https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/README.md) for how to write the C4 diagram.
6dd74de118
6dd74de119C4 diagram is fixed style, such as css color, so different css is not provided under different skins.
6dd74de120updateElementStyle and UpdateElementStyle are written in the diagram last part. updateElementStyle is inconsistent with the original definition and updates the style of the relationship, including the offset of the text label relative to the original position.
6dd74de121
6dd74de122The layout does not use a fully automated layout algorithm. The position of shapes is adjusted by changing the order in which statements are written. So there is no plan to support the following Layout statements.
6dd74de123The number of shapes per row and the number of boundaries can be adjusted using UpdateLayoutConfig.
6dd74de124
6dd74de125- Layout
6dd74de126 - Lay_U, Lay_Up
6dd74de127 - Lay_D, Lay_Down
6dd74de128 - Lay_L, Lay_Left
6dd74de129 - Lay_R, Lay_Right
6dd74de130
6dd74de131The following unfinished features are not supported in the short term.
6dd74de132
6dd74de133- [ ] sprite
6dd74de134
6dd74de135- [ ] tags
6dd74de136
6dd74de137- [ ] link
6dd74de138
6dd74de139- [ ] Legend
6dd74de140
6dd74de141- [x] System Context
6dd74de142 - [x] Person(alias, label, ?descr, ?sprite, ?tags, $link)
6dd74de143 - [x] Person_Ext
6dd74de144 - [x] System(alias, label, ?descr, ?sprite, ?tags, $link)
6dd74de145 - [x] SystemDb
6dd74de146 - [x] SystemQueue
6dd74de147 - [x] System_Ext
6dd74de148 - [x] SystemDb_Ext
6dd74de149 - [x] SystemQueue_Ext
6dd74de150 - [x] Boundary(alias, label, ?type, ?tags, $link)
6dd74de151 - [x] Enterprise_Boundary(alias, label, ?tags, $link)
6dd74de152 - [x] System_Boundary
6dd74de153
6dd74de154- [x] Container diagram
6dd74de155 - [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
6dd74de156 - [x] ContainerDb
6dd74de157 - [x] ContainerQueue
6dd74de158 - [x] Container_Ext
6dd74de159 - [x] ContainerDb_Ext
6dd74de160 - [x] ContainerQueue_Ext
6dd74de161 - [x] Container_Boundary(alias, label, ?tags, $link)
6dd74de162
6dd74de163- [x] Component diagram
6dd74de164 - [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
6dd74de165 - [x] ComponentDb
6dd74de166 - [x] ComponentQueue
6dd74de167 - [x] Component_Ext
6dd74de168 - [x] ComponentDb_Ext
6dd74de169 - [x] ComponentQueue_Ext
6dd74de170
6dd74de171- [x] Dynamic diagram
6dd74de172 - [x] RelIndex(index, from, to, label, ?tags, $link)
6dd74de173
6dd74de174- [x] Deployment diagram
6dd74de175 - [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
6dd74de176 - [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
6dd74de177 - [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
6dd74de178 - [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
6dd74de179
6dd74de180- [x] Relationship Types
6dd74de181 - [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
6dd74de182 - [x] BiRel (bidirectional relationship)
6dd74de183 - [x] Rel_U, Rel_Up
6dd74de184 - [x] Rel_D, Rel_Down
6dd74de185 - [x] Rel_L, Rel_Left
6dd74de186 - [x] Rel_R, Rel_Right
6dd74de187 - [x] Rel_Back
6dd74de188 - [x] RelIndex \* Compatible with C4-PlantUML syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written.
6dd74de189
6dd74de190- [ ] Custom tags/stereotypes support and skin param updates
6dd74de191 - [ ] AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend.
6dd74de192 - [ ] AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new Relationship tag. The styles of the tagged relationships are updated and the tag is displayed in the calculated legend.
6dd74de193 - [x] UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): This call updates the default style of the elements (component, ...) and creates no additional legend entry.
6dd74de194 - [x] UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY): This call updates the default relationship colors and creates no additional legend entry. Two new parameters, offsetX and offsetY, are added to set the offset of the original position of the text.
6dd74de195 - [ ] RoundedBoxShape(): This call returns the name of the rounded box shape and can be used as ?shape argument.
6dd74de196 - [ ] EightSidedShape(): This call returns the name of the eight sided shape and can be used as ?shape argument.
6dd74de197 - [ ] DashedLine(): This call returns the name of the dashed line and can be used as ?lineStyle argument.
6dd74de198 - [ ] DottedLine(): This call returns the name of the dotted line and can be used as ?lineStyle argument.
6dd74de199 - [ ] BoldLine(): This call returns the name of the bold line and can be used as ?lineStyle argument.
6dd74de200 - [x] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): New. This call updates the default c4ShapeInRow(4) and c4BoundaryInRow(2).
6dd74de201
6dd74de202There are two ways to assign parameters with question marks. One uses the non-named parameter assignment method in the order of the parameters, and the other uses the named parameter assignment method, where the name must start with a $ symbol.
6dd74de203
6dd74de204Example: UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY)
6dd74de205
6dd74de206```
6dd74de207UpdateRelStyle(customerA, bankA, "red", "blue", "-40", "60")
6dd74de208UpdateRelStyle(customerA, bankA, $offsetX="-40", $offsetY="60", $lineColor="blue", $textColor="red")
6dd74de209UpdateRelStyle(customerA, bankA, $offsetY="60")
6dd74de210
6dd74de211```
6dd74de212
6dd74de213## C4 System Context Diagram (C4Context)
6dd74de214
6dd74de215```mermaid-example
6dd74de216 C4Context
6dd74de217 title System Context diagram for Internet Banking System
6dd74de218 Enterprise_Boundary(b0, "BankBoundary0") {
6dd74de219 Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
6dd74de220 Person(customerB, "Banking Customer B")
6dd74de221 Person_Ext(customerC, "Banking Customer C", "desc")
6dd74de222
6dd74de223 Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
6dd74de224
6dd74de225 System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
6dd74de226
6dd74de227 Enterprise_Boundary(b1, "BankBoundary") {
6dd74de228
6dd74de229 SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
6dd74de230
6dd74de231 System_Boundary(b2, "BankBoundary2") {
6dd74de232 System(SystemA, "Banking System A")
6dd74de233 System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
6dd74de234 }
6dd74de235
6dd74de236 System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
6dd74de237 SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
6dd74de238
6dd74de239 Boundary(b3, "BankBoundary3", "boundary") {
6dd74de240 SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
6dd74de241 SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
6dd74de242 }
6dd74de243 }
6dd74de244 }
6dd74de245
6dd74de246 BiRel(customerA, SystemAA, "Uses")
6dd74de247 BiRel(SystemAA, SystemE, "Uses")
6dd74de248 Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
6dd74de249 Rel(SystemC, customerA, "Sends e-mails to")
6dd74de250
6dd74de251 UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
6dd74de252 UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
6dd74de253 UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
6dd74de254 UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
6dd74de255 UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
6dd74de256
6dd74de257 UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
6dd74de258
6dd74de259```
6dd74de260
6dd74de261```mermaid
6dd74de262 C4Context
6dd74de263 title System Context diagram for Internet Banking System
6dd74de264 Enterprise_Boundary(b0, "BankBoundary0") {
6dd74de265 Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
6dd74de266 Person(customerB, "Banking Customer B")
6dd74de267 Person_Ext(customerC, "Banking Customer C", "desc")
6dd74de268
6dd74de269 Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
6dd74de270
6dd74de271 System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
6dd74de272
6dd74de273 Enterprise_Boundary(b1, "BankBoundary") {
6dd74de274
6dd74de275 SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
6dd74de276
6dd74de277 System_Boundary(b2, "BankBoundary2") {
6dd74de278 System(SystemA, "Banking System A")
6dd74de279 System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
6dd74de280 }
6dd74de281
6dd74de282 System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
6dd74de283 SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
6dd74de284
6dd74de285 Boundary(b3, "BankBoundary3", "boundary") {
6dd74de286 SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
6dd74de287 SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
6dd74de288 }
6dd74de289 }
6dd74de290 }
6dd74de291
6dd74de292 BiRel(customerA, SystemAA, "Uses")
6dd74de293 BiRel(SystemAA, SystemE, "Uses")
6dd74de294 Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
6dd74de295 Rel(SystemC, customerA, "Sends e-mails to")
6dd74de296
6dd74de297 UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
6dd74de298 UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
6dd74de299 UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
6dd74de300 UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
6dd74de301 UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
6dd74de302
6dd74de303 UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
6dd74de304
6dd74de305```
6dd74de306
6dd74de307## C4 Container diagram (C4Container)
6dd74de308
6dd74de309```mermaid-example
6dd74de310 C4Container
6dd74de311 title Container diagram for Internet Banking System
6dd74de312
6dd74de313 System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", $tags="v1.0")
6dd74de314 Person(customer, Customer, "A customer of the bank, with personal bank accounts", $tags="v1.0")
6dd74de315
6dd74de316 Container_Boundary(c1, "Internet Banking") {
6dd74de317 Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser")
6dd74de318 Container_Ext(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
6dd74de319 Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
6dd74de320 ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")
6dd74de321 ContainerDb_Ext(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API")
6dd74de322
6dd74de323 }
6dd74de324
6dd74de325 System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
6dd74de326
6dd74de327 Rel(customer, web_app, "Uses", "HTTPS")
6dd74de328 UpdateRelStyle(customer, web_app, $offsetY="60", $offsetX="90")
6dd74de329 Rel(customer, spa, "Uses", "HTTPS")
6dd74de330 UpdateRelStyle(customer, spa, $offsetY="-40")
6dd74de331 Rel(customer, mobile_app, "Uses")
6dd74de332 UpdateRelStyle(customer, mobile_app, $offsetY="-30")
6dd74de333
6dd74de334 Rel(web_app, spa, "Delivers")
6dd74de335 UpdateRelStyle(web_app, spa, $offsetX="130")
6dd74de336 Rel(spa, backend_api, "Uses", "async, JSON/HTTPS")
6dd74de337 Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS")
6dd74de338 Rel_Back(database, backend_api, "Reads from and writes to", "sync, JDBC")
6dd74de339
6dd74de340 Rel(email_system, customer, "Sends e-mails to")
6dd74de341 UpdateRelStyle(email_system, customer, $offsetX="-45")
6dd74de342 Rel(backend_api, email_system, "Sends e-mails using", "sync, SMTP")
6dd74de343 UpdateRelStyle(backend_api, email_system, $offsetY="-60")
6dd74de344 Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
6dd74de345 UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140")
6dd74de346
6dd74de347```
6dd74de348
6dd74de349```mermaid
6dd74de350 C4Container
6dd74de351 title Container diagram for Internet Banking System
6dd74de352
6dd74de353 System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", $tags="v1.0")
6dd74de354 Person(customer, Customer, "A customer of the bank, with personal bank accounts", $tags="v1.0")
6dd74de355
6dd74de356 Container_Boundary(c1, "Internet Banking") {
6dd74de357 Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser")
6dd74de358 Container_Ext(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
6dd74de359 Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
6dd74de360 ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")
6dd74de361 ContainerDb_Ext(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API")
6dd74de362
6dd74de363 }
6dd74de364
6dd74de365 System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
6dd74de366
6dd74de367 Rel(customer, web_app, "Uses", "HTTPS")
6dd74de368 UpdateRelStyle(customer, web_app, $offsetY="60", $offsetX="90")
6dd74de369 Rel(customer, spa, "Uses", "HTTPS")
6dd74de370 UpdateRelStyle(customer, spa, $offsetY="-40")
6dd74de371 Rel(customer, mobile_app, "Uses")
6dd74de372 UpdateRelStyle(customer, mobile_app, $offsetY="-30")
6dd74de373
6dd74de374 Rel(web_app, spa, "Delivers")
6dd74de375 UpdateRelStyle(web_app, spa, $offsetX="130")
6dd74de376 Rel(spa, backend_api, "Uses", "async, JSON/HTTPS")
6dd74de377 Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS")
6dd74de378 Rel_Back(database, backend_api, "Reads from and writes to", "sync, JDBC")
6dd74de379
6dd74de380 Rel(email_system, customer, "Sends e-mails to")
6dd74de381 UpdateRelStyle(email_system, customer, $offsetX="-45")
6dd74de382 Rel(backend_api, email_system, "Sends e-mails using", "sync, SMTP")
6dd74de383 UpdateRelStyle(backend_api, email_system, $offsetY="-60")
6dd74de384 Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
6dd74de385 UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140")
6dd74de386
6dd74de387```
6dd74de388
6dd74de389## C4 Component diagram (C4Component)
6dd74de390
6dd74de391```mermaid-example
6dd74de392 C4Component
6dd74de393 title Component diagram for Internet Banking System - API Application
6dd74de394
6dd74de395 Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
6dd74de396 Container(ma, "Mobile App", "Xamarin", "Provides a limited subset to the internet banking functionality to customers via their mobile device.")
6dd74de397 ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
6dd74de398 System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
6dd74de399
6dd74de400 Container_Boundary(api, "API Application") {
6dd74de401 Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system")
6dd74de402 Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary of their bank accounts")
6dd74de403 Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.")
6dd74de404 Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.")
6dd74de405
6dd74de406 Rel(sign, security, "Uses")
6dd74de407 Rel(accounts, mbsfacade, "Uses")
6dd74de408 Rel(security, db, "Read & write to", "JDBC")
6dd74de409 Rel(mbsfacade, mbs, "Uses", "XML/HTTPS")
6dd74de410 }
6dd74de411
6dd74de412 Rel_Back(spa, sign, "Uses", "JSON/HTTPS")
6dd74de413 Rel(spa, accounts, "Uses", "JSON/HTTPS")
6dd74de414
6dd74de415 Rel(ma, sign, "Uses", "JSON/HTTPS")
6dd74de416 Rel(ma, accounts, "Uses", "JSON/HTTPS")
6dd74de417
6dd74de418 UpdateRelStyle(spa, sign, $offsetY="-40")
6dd74de419 UpdateRelStyle(spa, accounts, $offsetX="40", $offsetY="40")
6dd74de420
6dd74de421 UpdateRelStyle(ma, sign, $offsetX="-90", $offsetY="40")
6dd74de422 UpdateRelStyle(ma, accounts, $offsetY="-40")
6dd74de423
6dd74de424 UpdateRelStyle(sign, security, $offsetX="-160", $offsetY="10")
6dd74de425 UpdateRelStyle(accounts, mbsfacade, $offsetX="140", $offsetY="10")
6dd74de426 UpdateRelStyle(security, db, $offsetY="-40")
6dd74de427 UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")
6dd74de428
6dd74de429```
6dd74de430
6dd74de431```mermaid
6dd74de432 C4Component
6dd74de433 title Component diagram for Internet Banking System - API Application
6dd74de434
6dd74de435 Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
6dd74de436 Container(ma, "Mobile App", "Xamarin", "Provides a limited subset to the internet banking functionality to customers via their mobile device.")
6dd74de437 ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
6dd74de438 System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
6dd74de439
6dd74de440 Container_Boundary(api, "API Application") {
6dd74de441 Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system")
6dd74de442 Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary of their bank accounts")
6dd74de443 Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.")
6dd74de444 Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.")
6dd74de445
6dd74de446 Rel(sign, security, "Uses")
6dd74de447 Rel(accounts, mbsfacade, "Uses")
6dd74de448 Rel(security, db, "Read & write to", "JDBC")
6dd74de449 Rel(mbsfacade, mbs, "Uses", "XML/HTTPS")
6dd74de450 }
6dd74de451
6dd74de452 Rel_Back(spa, sign, "Uses", "JSON/HTTPS")
6dd74de453 Rel(spa, accounts, "Uses", "JSON/HTTPS")
6dd74de454
6dd74de455 Rel(ma, sign, "Uses", "JSON/HTTPS")
6dd74de456 Rel(ma, accounts, "Uses", "JSON/HTTPS")
6dd74de457
6dd74de458 UpdateRelStyle(spa, sign, $offsetY="-40")
6dd74de459 UpdateRelStyle(spa, accounts, $offsetX="40", $offsetY="40")
6dd74de460
6dd74de461 UpdateRelStyle(ma, sign, $offsetX="-90", $offsetY="40")
6dd74de462 UpdateRelStyle(ma, accounts, $offsetY="-40")
6dd74de463
6dd74de464 UpdateRelStyle(sign, security, $offsetX="-160", $offsetY="10")
6dd74de465 UpdateRelStyle(accounts, mbsfacade, $offsetX="140", $offsetY="10")
6dd74de466 UpdateRelStyle(security, db, $offsetY="-40")
6dd74de467 UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")
6dd74de468
6dd74de469```
6dd74de470
6dd74de471## C4 Dynamic diagram (C4Dynamic)
6dd74de472
6dd74de473```mermaid-example
6dd74de474 C4Dynamic
6dd74de475 title Dynamic diagram for Internet Banking System - API Application
6dd74de476
6dd74de477 ContainerDb(c4, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
6dd74de478 Container(c1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
6dd74de479 Container_Boundary(b, "API Application") {
6dd74de480 Component(c3, "Security Component", "Spring Bean", "Provides functionality Related to signing in, changing passwords, etc.")
6dd74de481 Component(c2, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.")
6dd74de482 }
6dd74de483 Rel(c1, c2, "Submits credentials to", "JSON/HTTPS")
6dd74de484 Rel(c2, c3, "Calls isAuthenticated() on")
6dd74de485 Rel(c3, c4, "select * from users where username = ?", "JDBC")
6dd74de486
6dd74de487 UpdateRelStyle(c1, c2, $textColor="red", $offsetY="-40")
6dd74de488 UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60")
6dd74de489 UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10")
6dd74de490
6dd74de491```
6dd74de492
6dd74de493```mermaid
6dd74de494 C4Dynamic
6dd74de495 title Dynamic diagram for Internet Banking System - API Application
6dd74de496
6dd74de497 ContainerDb(c4, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
6dd74de498 Container(c1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
6dd74de499 Container_Boundary(b, "API Application") {
6dd74de500 Component(c3, "Security Component", "Spring Bean", "Provides functionality Related to signing in, changing passwords, etc.")
6dd74de501 Component(c2, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.")
6dd74de502 }
6dd74de503 Rel(c1, c2, "Submits credentials to", "JSON/HTTPS")
6dd74de504 Rel(c2, c3, "Calls isAuthenticated() on")
6dd74de505 Rel(c3, c4, "select * from users where username = ?", "JDBC")
6dd74de506
6dd74de507 UpdateRelStyle(c1, c2, $textColor="red", $offsetY="-40")
6dd74de508 UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60")
6dd74de509 UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10")
6dd74de510
6dd74de511```
6dd74de512
6dd74de513## C4 Deployment diagram (C4Deployment)
6dd74de514
6dd74de515```mermaid-example
6dd74de516 C4Deployment
6dd74de517 title Deployment Diagram for Internet Banking System - Live
6dd74de518
6dd74de519 Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){
6dd74de520 Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
6dd74de521 }
6dd74de522
6dd74de523 Deployment_Node(comp, "Customer's computer", "Microsoft Windows or Apple macOS"){
6dd74de524 Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,<br/> Apple Safari or Microsoft Edge"){
6dd74de525 Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.")
6dd74de526 }
6dd74de527 }
6dd74de528
6dd74de529 Deployment_Node(plc, "Big Bank plc", "Big Bank plc data center"){
6dd74de530 Deployment_Node(dn, "bigbank-api*** x8", "Ubuntu 16.04 LTS"){
6dd74de531 Deployment_Node(apache, "Apache Tomcat", "Apache Tomcat 8.x"){
6dd74de532 Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.")
6dd74de533 }
6dd74de534 }
6dd74de535 Deployment_Node(bb2, "bigbank-web*** x4", "Ubuntu 16.04 LTS"){
6dd74de536 Deployment_Node(apache2, "Apache Tomcat", "Apache Tomcat 8.x"){
6dd74de537 Container(web, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet Banking single page application.")
6dd74de538 }
6dd74de539 }
6dd74de540 Deployment_Node(bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS"){
6dd74de541 Deployment_Node(oracle, "Oracle - Primary", "Oracle 12c"){
6dd74de542 ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
6dd74de543 }
6dd74de544 }
6dd74de545 Deployment_Node(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS") {
6dd74de546 Deployment_Node(oracle2, "Oracle - Secondary", "Oracle 12c") {
6dd74de547 ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
6dd74de548 }
6dd74de549 }
6dd74de550 }
6dd74de551
6dd74de552 Rel(mobile, api, "Makes API calls to", "json/HTTPS")
6dd74de553 Rel(spa, api, "Makes API calls to", "json/HTTPS")
6dd74de554 Rel_U(web, spa, "Delivers to the customer's web browser")
6dd74de555 Rel(api, db, "Reads from and writes to", "JDBC")
6dd74de556 Rel(api, db2, "Reads from and writes to", "JDBC")
6dd74de557 Rel_R(db, db2, "Replicates data to")
6dd74de558
6dd74de559 UpdateRelStyle(spa, api, $offsetY="-40")
6dd74de560 UpdateRelStyle(web, spa, $offsetY="-40")
6dd74de561 UpdateRelStyle(api, db, $offsetY="-20", $offsetX="5")
6dd74de562 UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20")
6dd74de563 UpdateRelStyle(db, db2, $offsetY="-10")
6dd74de564
6dd74de565```
6dd74de566
6dd74de567```mermaid
6dd74de568 C4Deployment
6dd74de569 title Deployment Diagram for Internet Banking System - Live
6dd74de570
6dd74de571 Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){
6dd74de572 Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
6dd74de573 }
6dd74de574
6dd74de575 Deployment_Node(comp, "Customer's computer", "Microsoft Windows or Apple macOS"){
6dd74de576 Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,<br/> Apple Safari or Microsoft Edge"){
6dd74de577 Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.")
6dd74de578 }
6dd74de579 }
6dd74de580
6dd74de581 Deployment_Node(plc, "Big Bank plc", "Big Bank plc data center"){
6dd74de582 Deployment_Node(dn, "bigbank-api*** x8", "Ubuntu 16.04 LTS"){
6dd74de583 Deployment_Node(apache, "Apache Tomcat", "Apache Tomcat 8.x"){
6dd74de584 Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.")
6dd74de585 }
6dd74de586 }
6dd74de587 Deployment_Node(bb2, "bigbank-web*** x4", "Ubuntu 16.04 LTS"){
6dd74de588 Deployment_Node(apache2, "Apache Tomcat", "Apache Tomcat 8.x"){
6dd74de589 Container(web, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet Banking single page application.")
6dd74de590 }
6dd74de591 }
6dd74de592 Deployment_Node(bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS"){
6dd74de593 Deployment_Node(oracle, "Oracle - Primary", "Oracle 12c"){
6dd74de594 ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
6dd74de595 }
6dd74de596 }
6dd74de597 Deployment_Node(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS") {
6dd74de598 Deployment_Node(oracle2, "Oracle - Secondary", "Oracle 12c") {
6dd74de599 ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
6dd74de600 }
6dd74de601 }
6dd74de602 }
6dd74de603
6dd74de604 Rel(mobile, api, "Makes API calls to", "json/HTTPS")
6dd74de605 Rel(spa, api, "Makes API calls to", "json/HTTPS")
6dd74de606 Rel_U(web, spa, "Delivers to the customer's web browser")
6dd74de607 Rel(api, db, "Reads from and writes to", "JDBC")
6dd74de608 Rel(api, db2, "Reads from and writes to", "JDBC")
6dd74de609 Rel_R(db, db2, "Replicates data to")
6dd74de610
6dd74de611 UpdateRelStyle(spa, api, $offsetY="-40")
6dd74de612 UpdateRelStyle(web, spa, $offsetY="-40")
6dd74de613 UpdateRelStyle(api, db, $offsetY="-20", $offsetX="5")
6dd74de614 UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20")
6dd74de615 UpdateRelStyle(db, db2, $offsetY="-10")
6dd74de616
6dd74de617```
6dd74de618
6dd74de619<!--- cspell:ignore bigbank bigbankdb techn mbsfacade --->