30.8 KB620 lines
Blame
1> **Warning**
2>
3> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
4>
5> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/c4.md](../../packages/mermaid/src/docs/syntax/c4.md).
6
7# C4 Diagrams
8
9> 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.
10
11Mermaid's C4 diagram syntax is compatible with plantUML. See example below:
12
13```mermaid-example
14 C4Context
15 title System Context diagram for Internet Banking System
16 Enterprise_Boundary(b0, "BankBoundary0") {
17 Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
18 Person(customerB, "Banking Customer B")
19 Person_Ext(customerC, "Banking Customer C", "desc")
20
21 Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
22
23 System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
24
25 Enterprise_Boundary(b1, "BankBoundary") {
26
27 SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
28
29 System_Boundary(b2, "BankBoundary2") {
30 System(SystemA, "Banking System A")
31 System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
32 }
33
34 System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
35 SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
36
37 Boundary(b3, "BankBoundary3", "boundary") {
38 SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
39 SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
40 }
41 }
42 }
43
44 BiRel(customerA, SystemAA, "Uses")
45 BiRel(SystemAA, SystemE, "Uses")
46 Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
47 Rel(SystemC, customerA, "Sends e-mails to")
48
49 UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
50 UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
51 UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
52 UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
53 UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
54
55 UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
56
57
58```
59
60```mermaid
61 C4Context
62 title System Context diagram for Internet Banking System
63 Enterprise_Boundary(b0, "BankBoundary0") {
64 Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
65 Person(customerB, "Banking Customer B")
66 Person_Ext(customerC, "Banking Customer C", "desc")
67
68 Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
69
70 System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
71
72 Enterprise_Boundary(b1, "BankBoundary") {
73
74 SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
75
76 System_Boundary(b2, "BankBoundary2") {
77 System(SystemA, "Banking System A")
78 System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
79 }
80
81 System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
82 SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
83
84 Boundary(b3, "BankBoundary3", "boundary") {
85 SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
86 SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
87 }
88 }
89 }
90
91 BiRel(customerA, SystemAA, "Uses")
92 BiRel(SystemAA, SystemE, "Uses")
93 Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
94 Rel(SystemC, customerA, "Sends e-mails to")
95
96 UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
97 UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
98 UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
99 UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
100 UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
101
102 UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
103
104
105```
106
107For an example, see the source code demos/index.html
108
1095 types of C4 charts are supported.
110
111- System Context (C4Context)
112- Container diagram (C4Container)
113- Component diagram (C4Component)
114- Dynamic diagram (C4Dynamic)
115- Deployment diagram (C4Deployment)
116
117Please 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.
118
119C4 diagram is fixed style, such as css color, so different css is not provided under different skins.
120updateElementStyle 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.
121
122The 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.
123The number of shapes per row and the number of boundaries can be adjusted using UpdateLayoutConfig.
124
125- Layout
126 - Lay_U, Lay_Up
127 - Lay_D, Lay_Down
128 - Lay_L, Lay_Left
129 - Lay_R, Lay_Right
130
131The following unfinished features are not supported in the short term.
132
133- [ ] sprite
134
135- [ ] tags
136
137- [ ] link
138
139- [ ] Legend
140
141- [x] System Context
142 - [x] Person(alias, label, ?descr, ?sprite, ?tags, $link)
143 - [x] Person_Ext
144 - [x] System(alias, label, ?descr, ?sprite, ?tags, $link)
145 - [x] SystemDb
146 - [x] SystemQueue
147 - [x] System_Ext
148 - [x] SystemDb_Ext
149 - [x] SystemQueue_Ext
150 - [x] Boundary(alias, label, ?type, ?tags, $link)
151 - [x] Enterprise_Boundary(alias, label, ?tags, $link)
152 - [x] System_Boundary
153
154- [x] Container diagram
155 - [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
156 - [x] ContainerDb
157 - [x] ContainerQueue
158 - [x] Container_Ext
159 - [x] ContainerDb_Ext
160 - [x] ContainerQueue_Ext
161 - [x] Container_Boundary(alias, label, ?tags, $link)
162
163- [x] Component diagram
164 - [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
165 - [x] ComponentDb
166 - [x] ComponentQueue
167 - [x] Component_Ext
168 - [x] ComponentDb_Ext
169 - [x] ComponentQueue_Ext
170
171- [x] Dynamic diagram
172 - [x] RelIndex(index, from, to, label, ?tags, $link)
173
174- [x] Deployment diagram
175 - [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
176 - [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
177 - [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
178 - [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
179
180- [x] Relationship Types
181 - [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
182 - [x] BiRel (bidirectional relationship)
183 - [x] Rel_U, Rel_Up
184 - [x] Rel_D, Rel_Down
185 - [x] Rel_L, Rel_Left
186 - [x] Rel_R, Rel_Right
187 - [x] Rel_Back
188 - [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.
189
190- [ ] Custom tags/stereotypes support and skin param updates
191 - [ ] 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.
192 - [ ] 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.
193 - [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.
194 - [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.
195 - [ ] RoundedBoxShape(): This call returns the name of the rounded box shape and can be used as ?shape argument.
196 - [ ] EightSidedShape(): This call returns the name of the eight sided shape and can be used as ?shape argument.
197 - [ ] DashedLine(): This call returns the name of the dashed line and can be used as ?lineStyle argument.
198 - [ ] DottedLine(): This call returns the name of the dotted line and can be used as ?lineStyle argument.
199 - [ ] BoldLine(): This call returns the name of the bold line and can be used as ?lineStyle argument.
200 - [x] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): New. This call updates the default c4ShapeInRow(4) and c4BoundaryInRow(2).
201
202There 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.
203
204Example: UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY)
205
206```
207UpdateRelStyle(customerA, bankA, "red", "blue", "-40", "60")
208UpdateRelStyle(customerA, bankA, $offsetX="-40", $offsetY="60", $lineColor="blue", $textColor="red")
209UpdateRelStyle(customerA, bankA, $offsetY="60")
210
211```
212
213## C4 System Context Diagram (C4Context)
214
215```mermaid-example
216 C4Context
217 title System Context diagram for Internet Banking System
218 Enterprise_Boundary(b0, "BankBoundary0") {
219 Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
220 Person(customerB, "Banking Customer B")
221 Person_Ext(customerC, "Banking Customer C", "desc")
222
223 Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
224
225 System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
226
227 Enterprise_Boundary(b1, "BankBoundary") {
228
229 SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
230
231 System_Boundary(b2, "BankBoundary2") {
232 System(SystemA, "Banking System A")
233 System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
234 }
235
236 System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
237 SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
238
239 Boundary(b3, "BankBoundary3", "boundary") {
240 SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
241 SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
242 }
243 }
244 }
245
246 BiRel(customerA, SystemAA, "Uses")
247 BiRel(SystemAA, SystemE, "Uses")
248 Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
249 Rel(SystemC, customerA, "Sends e-mails to")
250
251 UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
252 UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
253 UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
254 UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
255 UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
256
257 UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
258
259```
260
261```mermaid
262 C4Context
263 title System Context diagram for Internet Banking System
264 Enterprise_Boundary(b0, "BankBoundary0") {
265 Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
266 Person(customerB, "Banking Customer B")
267 Person_Ext(customerC, "Banking Customer C", "desc")
268
269 Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
270
271 System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
272
273 Enterprise_Boundary(b1, "BankBoundary") {
274
275 SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
276
277 System_Boundary(b2, "BankBoundary2") {
278 System(SystemA, "Banking System A")
279 System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
280 }
281
282 System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
283 SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
284
285 Boundary(b3, "BankBoundary3", "boundary") {
286 SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
287 SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
288 }
289 }
290 }
291
292 BiRel(customerA, SystemAA, "Uses")
293 BiRel(SystemAA, SystemE, "Uses")
294 Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
295 Rel(SystemC, customerA, "Sends e-mails to")
296
297 UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
298 UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
299 UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
300 UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
301 UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
302
303 UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
304
305```
306
307## C4 Container diagram (C4Container)
308
309```mermaid-example
310 C4Container
311 title Container diagram for Internet Banking System
312
313 System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", $tags="v1.0")
314 Person(customer, Customer, "A customer of the bank, with personal bank accounts", $tags="v1.0")
315
316 Container_Boundary(c1, "Internet Banking") {
317 Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser")
318 Container_Ext(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
319 Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
320 ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")
321 ContainerDb_Ext(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API")
322
323 }
324
325 System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
326
327 Rel(customer, web_app, "Uses", "HTTPS")
328 UpdateRelStyle(customer, web_app, $offsetY="60", $offsetX="90")
329 Rel(customer, spa, "Uses", "HTTPS")
330 UpdateRelStyle(customer, spa, $offsetY="-40")
331 Rel(customer, mobile_app, "Uses")
332 UpdateRelStyle(customer, mobile_app, $offsetY="-30")
333
334 Rel(web_app, spa, "Delivers")
335 UpdateRelStyle(web_app, spa, $offsetX="130")
336 Rel(spa, backend_api, "Uses", "async, JSON/HTTPS")
337 Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS")
338 Rel_Back(database, backend_api, "Reads from and writes to", "sync, JDBC")
339
340 Rel(email_system, customer, "Sends e-mails to")
341 UpdateRelStyle(email_system, customer, $offsetX="-45")
342 Rel(backend_api, email_system, "Sends e-mails using", "sync, SMTP")
343 UpdateRelStyle(backend_api, email_system, $offsetY="-60")
344 Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
345 UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140")
346
347```
348
349```mermaid
350 C4Container
351 title Container diagram for Internet Banking System
352
353 System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", $tags="v1.0")
354 Person(customer, Customer, "A customer of the bank, with personal bank accounts", $tags="v1.0")
355
356 Container_Boundary(c1, "Internet Banking") {
357 Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser")
358 Container_Ext(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
359 Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
360 ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")
361 ContainerDb_Ext(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API")
362
363 }
364
365 System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
366
367 Rel(customer, web_app, "Uses", "HTTPS")
368 UpdateRelStyle(customer, web_app, $offsetY="60", $offsetX="90")
369 Rel(customer, spa, "Uses", "HTTPS")
370 UpdateRelStyle(customer, spa, $offsetY="-40")
371 Rel(customer, mobile_app, "Uses")
372 UpdateRelStyle(customer, mobile_app, $offsetY="-30")
373
374 Rel(web_app, spa, "Delivers")
375 UpdateRelStyle(web_app, spa, $offsetX="130")
376 Rel(spa, backend_api, "Uses", "async, JSON/HTTPS")
377 Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS")
378 Rel_Back(database, backend_api, "Reads from and writes to", "sync, JDBC")
379
380 Rel(email_system, customer, "Sends e-mails to")
381 UpdateRelStyle(email_system, customer, $offsetX="-45")
382 Rel(backend_api, email_system, "Sends e-mails using", "sync, SMTP")
383 UpdateRelStyle(backend_api, email_system, $offsetY="-60")
384 Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
385 UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140")
386
387```
388
389## C4 Component diagram (C4Component)
390
391```mermaid-example
392 C4Component
393 title Component diagram for Internet Banking System - API Application
394
395 Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
396 Container(ma, "Mobile App", "Xamarin", "Provides a limited subset to the internet banking functionality to customers via their mobile device.")
397 ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
398 System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
399
400 Container_Boundary(api, "API Application") {
401 Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system")
402 Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary of their bank accounts")
403 Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.")
404 Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.")
405
406 Rel(sign, security, "Uses")
407 Rel(accounts, mbsfacade, "Uses")
408 Rel(security, db, "Read & write to", "JDBC")
409 Rel(mbsfacade, mbs, "Uses", "XML/HTTPS")
410 }
411
412 Rel_Back(spa, sign, "Uses", "JSON/HTTPS")
413 Rel(spa, accounts, "Uses", "JSON/HTTPS")
414
415 Rel(ma, sign, "Uses", "JSON/HTTPS")
416 Rel(ma, accounts, "Uses", "JSON/HTTPS")
417
418 UpdateRelStyle(spa, sign, $offsetY="-40")
419 UpdateRelStyle(spa, accounts, $offsetX="40", $offsetY="40")
420
421 UpdateRelStyle(ma, sign, $offsetX="-90", $offsetY="40")
422 UpdateRelStyle(ma, accounts, $offsetY="-40")
423
424 UpdateRelStyle(sign, security, $offsetX="-160", $offsetY="10")
425 UpdateRelStyle(accounts, mbsfacade, $offsetX="140", $offsetY="10")
426 UpdateRelStyle(security, db, $offsetY="-40")
427 UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")
428
429```
430
431```mermaid
432 C4Component
433 title Component diagram for Internet Banking System - API Application
434
435 Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
436 Container(ma, "Mobile App", "Xamarin", "Provides a limited subset to the internet banking functionality to customers via their mobile device.")
437 ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
438 System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
439
440 Container_Boundary(api, "API Application") {
441 Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system")
442 Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary of their bank accounts")
443 Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.")
444 Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.")
445
446 Rel(sign, security, "Uses")
447 Rel(accounts, mbsfacade, "Uses")
448 Rel(security, db, "Read & write to", "JDBC")
449 Rel(mbsfacade, mbs, "Uses", "XML/HTTPS")
450 }
451
452 Rel_Back(spa, sign, "Uses", "JSON/HTTPS")
453 Rel(spa, accounts, "Uses", "JSON/HTTPS")
454
455 Rel(ma, sign, "Uses", "JSON/HTTPS")
456 Rel(ma, accounts, "Uses", "JSON/HTTPS")
457
458 UpdateRelStyle(spa, sign, $offsetY="-40")
459 UpdateRelStyle(spa, accounts, $offsetX="40", $offsetY="40")
460
461 UpdateRelStyle(ma, sign, $offsetX="-90", $offsetY="40")
462 UpdateRelStyle(ma, accounts, $offsetY="-40")
463
464 UpdateRelStyle(sign, security, $offsetX="-160", $offsetY="10")
465 UpdateRelStyle(accounts, mbsfacade, $offsetX="140", $offsetY="10")
466 UpdateRelStyle(security, db, $offsetY="-40")
467 UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")
468
469```
470
471## C4 Dynamic diagram (C4Dynamic)
472
473```mermaid-example
474 C4Dynamic
475 title Dynamic diagram for Internet Banking System - API Application
476
477 ContainerDb(c4, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
478 Container(c1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
479 Container_Boundary(b, "API Application") {
480 Component(c3, "Security Component", "Spring Bean", "Provides functionality Related to signing in, changing passwords, etc.")
481 Component(c2, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.")
482 }
483 Rel(c1, c2, "Submits credentials to", "JSON/HTTPS")
484 Rel(c2, c3, "Calls isAuthenticated() on")
485 Rel(c3, c4, "select * from users where username = ?", "JDBC")
486
487 UpdateRelStyle(c1, c2, $textColor="red", $offsetY="-40")
488 UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60")
489 UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10")
490
491```
492
493```mermaid
494 C4Dynamic
495 title Dynamic diagram for Internet Banking System - API Application
496
497 ContainerDb(c4, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
498 Container(c1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
499 Container_Boundary(b, "API Application") {
500 Component(c3, "Security Component", "Spring Bean", "Provides functionality Related to signing in, changing passwords, etc.")
501 Component(c2, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.")
502 }
503 Rel(c1, c2, "Submits credentials to", "JSON/HTTPS")
504 Rel(c2, c3, "Calls isAuthenticated() on")
505 Rel(c3, c4, "select * from users where username = ?", "JDBC")
506
507 UpdateRelStyle(c1, c2, $textColor="red", $offsetY="-40")
508 UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60")
509 UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10")
510
511```
512
513## C4 Deployment diagram (C4Deployment)
514
515```mermaid-example
516 C4Deployment
517 title Deployment Diagram for Internet Banking System - Live
518
519 Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){
520 Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
521 }
522
523 Deployment_Node(comp, "Customer's computer", "Microsoft Windows or Apple macOS"){
524 Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,<br/> Apple Safari or Microsoft Edge"){
525 Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.")
526 }
527 }
528
529 Deployment_Node(plc, "Big Bank plc", "Big Bank plc data center"){
530 Deployment_Node(dn, "bigbank-api*** x8", "Ubuntu 16.04 LTS"){
531 Deployment_Node(apache, "Apache Tomcat", "Apache Tomcat 8.x"){
532 Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.")
533 }
534 }
535 Deployment_Node(bb2, "bigbank-web*** x4", "Ubuntu 16.04 LTS"){
536 Deployment_Node(apache2, "Apache Tomcat", "Apache Tomcat 8.x"){
537 Container(web, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet Banking single page application.")
538 }
539 }
540 Deployment_Node(bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS"){
541 Deployment_Node(oracle, "Oracle - Primary", "Oracle 12c"){
542 ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
543 }
544 }
545 Deployment_Node(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS") {
546 Deployment_Node(oracle2, "Oracle - Secondary", "Oracle 12c") {
547 ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
548 }
549 }
550 }
551
552 Rel(mobile, api, "Makes API calls to", "json/HTTPS")
553 Rel(spa, api, "Makes API calls to", "json/HTTPS")
554 Rel_U(web, spa, "Delivers to the customer's web browser")
555 Rel(api, db, "Reads from and writes to", "JDBC")
556 Rel(api, db2, "Reads from and writes to", "JDBC")
557 Rel_R(db, db2, "Replicates data to")
558
559 UpdateRelStyle(spa, api, $offsetY="-40")
560 UpdateRelStyle(web, spa, $offsetY="-40")
561 UpdateRelStyle(api, db, $offsetY="-20", $offsetX="5")
562 UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20")
563 UpdateRelStyle(db, db2, $offsetY="-10")
564
565```
566
567```mermaid
568 C4Deployment
569 title Deployment Diagram for Internet Banking System - Live
570
571 Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){
572 Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
573 }
574
575 Deployment_Node(comp, "Customer's computer", "Microsoft Windows or Apple macOS"){
576 Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,<br/> Apple Safari or Microsoft Edge"){
577 Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.")
578 }
579 }
580
581 Deployment_Node(plc, "Big Bank plc", "Big Bank plc data center"){
582 Deployment_Node(dn, "bigbank-api*** x8", "Ubuntu 16.04 LTS"){
583 Deployment_Node(apache, "Apache Tomcat", "Apache Tomcat 8.x"){
584 Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.")
585 }
586 }
587 Deployment_Node(bb2, "bigbank-web*** x4", "Ubuntu 16.04 LTS"){
588 Deployment_Node(apache2, "Apache Tomcat", "Apache Tomcat 8.x"){
589 Container(web, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet Banking single page application.")
590 }
591 }
592 Deployment_Node(bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS"){
593 Deployment_Node(oracle, "Oracle - Primary", "Oracle 12c"){
594 ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
595 }
596 }
597 Deployment_Node(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS") {
598 Deployment_Node(oracle2, "Oracle - Secondary", "Oracle 12c") {
599 ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
600 }
601 }
602 }
603
604 Rel(mobile, api, "Makes API calls to", "json/HTTPS")
605 Rel(spa, api, "Makes API calls to", "json/HTTPS")
606 Rel_U(web, spa, "Delivers to the customer's web browser")
607 Rel(api, db, "Reads from and writes to", "JDBC")
608 Rel(api, db2, "Reads from and writes to", "JDBC")
609 Rel_R(db, db2, "Replicates data to")
610
611 UpdateRelStyle(spa, api, $offsetY="-40")
612 UpdateRelStyle(web, spa, $offsetY="-40")
613 UpdateRelStyle(api, db, $offsetY="-20", $offsetX="5")
614 UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20")
615 UpdateRelStyle(db, db2, $offsetY="-10")
616
617```
618
619<!--- cspell:ignore bigbank bigbankdb techn mbsfacade --->
620