12.9 KB300 lines
Blame
1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 <title>C4 Mermaid Quick Test Page</title>
7 <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
8 <style>
9 div.mermaid {
10 /* font-family: 'trebuchet ms', verdana, arial; */
11 /*font-family: 'Courier New', Courier, monospace !important;*/
12 }
13 </style>
14 </head>
15
16 <body>
17 <h1>C4 context diagram demos</h1>
18 <pre class="mermaid">
19 C4Context
20 accTitle: C4 context demo
21 accDescr: Many large C4 diagrams
22
23 title System Context diagram for Internet Banking System
24
25 Enterprise_Boundary(b0, "BankBoundary0") {
26 Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
27 Person(customerB, "Banking Customer B")
28 Person_Ext(customerC, "Banking Customer C", "desc")
29
30 Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
31
32 System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
33
34 Enterprise_Boundary(b1, "BankBoundary") {
35
36 SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
37
38 System_Boundary(b2, "BankBoundary2") {
39 System(SystemA, "Banking System A")
40 System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
41 }
42
43 System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
44 SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
45
46 Boundary(b3, "BankBoundary3", "boundary") {
47 SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
48 SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
49 }
50 }
51 }
52
53 BiRel(customerA, SystemAA, "Uses")
54 BiRel(SystemAA, SystemE, "Uses")
55 Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
56 Rel(SystemC, customerA, "Sends e-mails to")
57
58 UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
59 UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
60 UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
61 UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
62 UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
63
64 UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
65 </pre>
66 <hr />
67
68 <pre class="mermaid">
69 C4Container
70 title Container diagram for Internet Banking System
71
72 System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", $tags="v1.0")
73 Person(customer, Customer, "A customer of the bank, with personal bank accounts", $tags="v1.0")
74
75 Container_Boundary(c1, "Internet Banking") {
76 Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser")
77 Container_Ext(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
78 Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
79 ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")
80 ContainerDb_Ext(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API")
81
82 }
83
84 System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
85
86 Rel(customer, web_app, "Uses", "HTTPS")
87 UpdateRelStyle(customer, web_app, $offsetY="60", $offsetX="90")
88 Rel(customer, spa, "Uses", "HTTPS")
89 UpdateRelStyle(customer, spa, $offsetY="-40")
90 Rel(customer, mobile_app, "Uses")
91 UpdateRelStyle(customer, mobile_app, $offsetY="-30")
92
93 Rel(web_app, spa, "Delivers")
94 UpdateRelStyle(web_app, spa, $offsetX="130")
95 Rel(spa, backend_api, "Uses", "async, JSON/HTTPS")
96 Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS")
97 Rel_Back(database, backend_api, "Reads from and writes to", "sync, JDBC")
98
99 Rel(email_system, customer, "Sends e-mails to")
100 UpdateRelStyle(email_system, customer, $offsetX="-45")
101 Rel(backend_api, email_system, "Sends e-mails using", "sync, SMTP")
102 UpdateRelStyle(backend_api, email_system, $offsetY="-60")
103 Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
104 UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140")
105 </pre>
106 <hr />
107
108 <pre class="mermaid">
109 C4Component
110 title Component diagram for Internet Banking System - API Application
111
112 Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
113 Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile device.")
114 ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
115 System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
116
117 Container_Boundary(api, "API Application") {
118 Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system")
119 Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary of their bank accounts")
120 Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.")
121 Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.")
122
123 Rel(sign, security, "Uses")
124 Rel(accounts, mbsfacade, "Uses")
125 Rel(security, db, "Read & write to", "JDBC")
126 Rel(mbsfacade, mbs, "Uses", "XML/HTTPS")
127 }
128
129 Rel_Back(spa, sign, "Uses", "JSON/HTTPS")
130 Rel(spa, accounts, "Uses", "JSON/HTTPS")
131
132 Rel(ma, sign, "Uses", "JSON/HTTPS")
133 Rel(ma, accounts, "Uses", "JSON/HTTPS")
134
135 UpdateRelStyle(spa, sign, $offsetY="-40")
136 UpdateRelStyle(spa, accounts, $offsetX="40", $offsetY="40")
137
138 UpdateRelStyle(ma, sign, $offsetX="-90", $offsetY="40")
139 UpdateRelStyle(ma, accounts, $offsetY="-40")
140
141 UpdateRelStyle(sign, security, $offsetX="-160", $offsetY="10")
142 UpdateRelStyle(accounts, mbsfacade, $offsetX="140", $offsetY="10")
143 UpdateRelStyle(security, db, $offsetY="-40")
144 UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")
145 </pre>
146 <hr />
147
148 <pre class="mermaid">
149 C4Dynamic
150 title Dynamic diagram for Internet Banking System - API Application
151
152 ContainerDb(c4, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
153 Container(c1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
154 Container_Boundary(b, "API Application") {
155 Component(c3, "Security Component", "Spring Bean", "Provides functionality Related to signing in, changing passwords, etc.")
156 Component(c2, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.")
157 }
158 Rel(c1, c2, "Submits credentials to", "JSON/HTTPS")
159 Rel(c2, c3, "Calls isAuthenticated() on")
160 Rel(c3, c4, "select * from users where username = ?", "JDBC")
161
162 UpdateRelStyle(c1, c2, $textColor="red", $offsetY="-40")
163 UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60")
164 UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10")
165 </pre>
166 <hr />
167
168 <pre class="mermaid">
169 C4Deployment
170 title Deployment Diagram for Internet Banking System - Live
171
172 Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){
173 Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
174 }
175
176 Deployment_Node(comp, "Customer's computer", "Microsoft Windows or Apple macOS"){
177 Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,<br/> Apple Safari or Microsoft Edge"){
178 Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.")
179 }
180 }
181
182 Deployment_Node(plc, "Big Bank plc", "Big Bank plc data center"){
183 Deployment_Node(dn, "bigbank-api*** x8", "Ubuntu 16.04 LTS"){
184 Deployment_Node(apache, "Apache Tomcat", "Apache Tomcat 8.x"){
185 Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.")
186 }
187 }
188 Deployment_Node(bb2, "bigbank-web*** x4", "Ubuntu 16.04 LTS"){
189 Deployment_Node(apache2, "Apache Tomcat", "Apache Tomcat 8.x"){
190 Container(web, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet Banking single page application.")
191 }
192 }
193 Deployment_Node(bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS"){
194 Deployment_Node(oracle, "Oracle - Primary", "Oracle 12c"){
195 ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
196 }
197 }
198 Deployment_Node(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS") {
199 Deployment_Node(oracle2, "Oracle - Secondary", "Oracle 12c") {
200 ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
201 }
202 }
203 }
204
205 Rel(mobile, api, "Makes API calls to", "json/HTTPS")
206 Rel(spa, api, "Makes API calls to", "json/HTTPS")
207 Rel_U(web, spa, "Delivers to the customer's web browser")
208 Rel(api, db, "Reads from and writes to", "JDBC")
209 Rel(api, db2, "Reads from and writes to", "JDBC")
210 Rel_R(db, db2, "Replicates data to")
211
212 UpdateRelStyle(spa, api, $offsetY="-40")
213 UpdateRelStyle(web, spa, $offsetY="-40")
214 UpdateRelStyle(api, db, $offsetY="-20", $offsetX="5")
215 UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20")
216 UpdateRelStyle(db, db2, $offsetY="-10")
217 </pre>
218 <hr />
219
220 <script type="module">
221 import mermaid from './mermaid.esm.mjs';
222 const ALLOWED_TAGS = [
223 'a',
224 'b',
225 'blockquote',
226 'br',
227 'dd',
228 'div',
229 'dl',
230 'dt',
231 'em',
232 'foreignObject',
233 'h1',
234 'h2',
235 'h3',
236 'h4',
237 'h5',
238 'h6',
239 'h7',
240 'h8',
241 'hr',
242 'i',
243 'li',
244 'ul',
245 'ol',
246 'p',
247 'pre',
248 'span',
249 'strike',
250 'strong',
251 'table',
252 'tbody',
253 'td',
254 'tfoot',
255 'th',
256 'thead',
257 'tr',
258 ];
259 mermaid.initialize({
260 theme: 'forest',
261 // themeCSS: '.node rect { fill: red; }',
262 logLevel: 3,
263 securityLevel: 'loose',
264 flowchart: { curve: 'basis' },
265 gantt: { axisFormat: '%m/%d/%Y' },
266 sequence: { actorMargin: 50 },
267 dompurifyConfig: {
268 USE_PROFILES: {
269 svg: true,
270 },
271 ADD_TAGS: ALLOWED_TAGS,
272 ADD_ATTR: ['transform-origin'],
273 },
274 // sequenceDiagram: { actorMargin: 300 } // deprecated
275 });
276
277 function testClick(nodeId) {
278 console.log('clicked', nodeId);
279 let originalBgColor = document.querySelector('body').style.backgroundColor;
280 document.querySelector('body').style.backgroundColor = 'yellow';
281 setTimeout(function () {
282 document.querySelector('body').style.backgroundColor = originalBgColor;
283 }, 100);
284 }
285
286 const testLineEndings = async (test, input) => {
287 try {
288 await mermaid.render(test, input);
289 } catch (err) {
290 console.error('Error in %s:\n\n%s', test, err);
291 }
292 };
293
294 await testLineEndings('CR', 'graph LR\rsubgraph CR\rA --> B\rend');
295 await testLineEndings('LF', 'graph LR\nsubgraph LF\nA --> B\nend');
296 await testLineEndings('CRLF', 'graph LR\r\nsubgraph CRLF\r\nA --> B\r\nend');
297 </script>
298 </body>
299</html>
300