collab/mermaid/demos/c4context.htmlblame
View source
6dd74de1<!doctype html>
6dd74de2<html lang="en">
6dd74de3 <head>
6dd74de4 <meta charset="utf-8" />
6dd74de5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6dd74de6 <title>C4 Mermaid Quick Test Page</title>
6dd74de7 <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
6dd74de8 <style>
6dd74de9 div.mermaid {
6dd74de10 /* font-family: 'trebuchet ms', verdana, arial; */
6dd74de11 /*font-family: 'Courier New', Courier, monospace !important;*/
6dd74de12 }
6dd74de13 </style>
6dd74de14 </head>
6dd74de15
6dd74de16 <body>
6dd74de17 <h1>C4 context diagram demos</h1>
6dd74de18 <pre class="mermaid">
6dd74de19 C4Context
6dd74de20 accTitle: C4 context demo
6dd74de21 accDescr: Many large C4 diagrams
6dd74de22
6dd74de23 title System Context diagram for Internet Banking System
6dd74de24
6dd74de25 Enterprise_Boundary(b0, "BankBoundary0") {
6dd74de26 Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
6dd74de27 Person(customerB, "Banking Customer B")
6dd74de28 Person_Ext(customerC, "Banking Customer C", "desc")
6dd74de29
6dd74de30 Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
6dd74de31
6dd74de32 System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
6dd74de33
6dd74de34 Enterprise_Boundary(b1, "BankBoundary") {
6dd74de35
6dd74de36 SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
6dd74de37
6dd74de38 System_Boundary(b2, "BankBoundary2") {
6dd74de39 System(SystemA, "Banking System A")
6dd74de40 System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
6dd74de41 }
6dd74de42
6dd74de43 System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
6dd74de44 SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
6dd74de45
6dd74de46 Boundary(b3, "BankBoundary3", "boundary") {
6dd74de47 SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
6dd74de48 SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
6dd74de49 }
6dd74de50 }
6dd74de51 }
6dd74de52
6dd74de53 BiRel(customerA, SystemAA, "Uses")
6dd74de54 BiRel(SystemAA, SystemE, "Uses")
6dd74de55 Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
6dd74de56 Rel(SystemC, customerA, "Sends e-mails to")
6dd74de57
6dd74de58 UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
6dd74de59 UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
6dd74de60 UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
6dd74de61 UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
6dd74de62 UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
6dd74de63
6dd74de64 UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
6dd74de65 </pre>
6dd74de66 <hr />
6dd74de67
6dd74de68 <pre class="mermaid">
6dd74de69 C4Container
6dd74de70 title Container diagram for Internet Banking System
6dd74de71
6dd74de72 System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", $tags="v1.0")
6dd74de73 Person(customer, Customer, "A customer of the bank, with personal bank accounts", $tags="v1.0")
6dd74de74
6dd74de75 Container_Boundary(c1, "Internet Banking") {
6dd74de76 Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser")
6dd74de77 Container_Ext(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
6dd74de78 Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
6dd74de79 ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")
6dd74de80 ContainerDb_Ext(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API")
6dd74de81
6dd74de82 }
6dd74de83
6dd74de84 System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
6dd74de85
6dd74de86 Rel(customer, web_app, "Uses", "HTTPS")
6dd74de87 UpdateRelStyle(customer, web_app, $offsetY="60", $offsetX="90")
6dd74de88 Rel(customer, spa, "Uses", "HTTPS")
6dd74de89 UpdateRelStyle(customer, spa, $offsetY="-40")
6dd74de90 Rel(customer, mobile_app, "Uses")
6dd74de91 UpdateRelStyle(customer, mobile_app, $offsetY="-30")
6dd74de92
6dd74de93 Rel(web_app, spa, "Delivers")
6dd74de94 UpdateRelStyle(web_app, spa, $offsetX="130")
6dd74de95 Rel(spa, backend_api, "Uses", "async, JSON/HTTPS")
6dd74de96 Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS")
6dd74de97 Rel_Back(database, backend_api, "Reads from and writes to", "sync, JDBC")
6dd74de98
6dd74de99 Rel(email_system, customer, "Sends e-mails to")
6dd74de100 UpdateRelStyle(email_system, customer, $offsetX="-45")
6dd74de101 Rel(backend_api, email_system, "Sends e-mails using", "sync, SMTP")
6dd74de102 UpdateRelStyle(backend_api, email_system, $offsetY="-60")
6dd74de103 Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
6dd74de104 UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140")
6dd74de105 </pre>
6dd74de106 <hr />
6dd74de107
6dd74de108 <pre class="mermaid">
6dd74de109 C4Component
6dd74de110 title Component diagram for Internet Banking System - API Application
6dd74de111
6dd74de112 Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
6dd74de113 Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile device.")
6dd74de114 ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
6dd74de115 System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
6dd74de116
6dd74de117 Container_Boundary(api, "API Application") {
6dd74de118 Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system")
6dd74de119 Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary of their bank accounts")
6dd74de120 Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.")
6dd74de121 Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.")
6dd74de122
6dd74de123 Rel(sign, security, "Uses")
6dd74de124 Rel(accounts, mbsfacade, "Uses")
6dd74de125 Rel(security, db, "Read & write to", "JDBC")
6dd74de126 Rel(mbsfacade, mbs, "Uses", "XML/HTTPS")
6dd74de127 }
6dd74de128
6dd74de129 Rel_Back(spa, sign, "Uses", "JSON/HTTPS")
6dd74de130 Rel(spa, accounts, "Uses", "JSON/HTTPS")
6dd74de131
6dd74de132 Rel(ma, sign, "Uses", "JSON/HTTPS")
6dd74de133 Rel(ma, accounts, "Uses", "JSON/HTTPS")
6dd74de134
6dd74de135 UpdateRelStyle(spa, sign, $offsetY="-40")
6dd74de136 UpdateRelStyle(spa, accounts, $offsetX="40", $offsetY="40")
6dd74de137
6dd74de138 UpdateRelStyle(ma, sign, $offsetX="-90", $offsetY="40")
6dd74de139 UpdateRelStyle(ma, accounts, $offsetY="-40")
6dd74de140
6dd74de141 UpdateRelStyle(sign, security, $offsetX="-160", $offsetY="10")
6dd74de142 UpdateRelStyle(accounts, mbsfacade, $offsetX="140", $offsetY="10")
6dd74de143 UpdateRelStyle(security, db, $offsetY="-40")
6dd74de144 UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")
6dd74de145 </pre>
6dd74de146 <hr />
6dd74de147
6dd74de148 <pre class="mermaid">
6dd74de149 C4Dynamic
6dd74de150 title Dynamic diagram for Internet Banking System - API Application
6dd74de151
6dd74de152 ContainerDb(c4, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
6dd74de153 Container(c1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
6dd74de154 Container_Boundary(b, "API Application") {
6dd74de155 Component(c3, "Security Component", "Spring Bean", "Provides functionality Related to signing in, changing passwords, etc.")
6dd74de156 Component(c2, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.")
6dd74de157 }
6dd74de158 Rel(c1, c2, "Submits credentials to", "JSON/HTTPS")
6dd74de159 Rel(c2, c3, "Calls isAuthenticated() on")
6dd74de160 Rel(c3, c4, "select * from users where username = ?", "JDBC")
6dd74de161
6dd74de162 UpdateRelStyle(c1, c2, $textColor="red", $offsetY="-40")
6dd74de163 UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60")
6dd74de164 UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10")
6dd74de165 </pre>
6dd74de166 <hr />
6dd74de167
6dd74de168 <pre class="mermaid">
6dd74de169 C4Deployment
6dd74de170 title Deployment Diagram for Internet Banking System - Live
6dd74de171
6dd74de172 Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){
6dd74de173 Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
6dd74de174 }
6dd74de175
6dd74de176 Deployment_Node(comp, "Customer's computer", "Microsoft Windows or Apple macOS"){
6dd74de177 Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,<br/> Apple Safari or Microsoft Edge"){
6dd74de178 Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.")
6dd74de179 }
6dd74de180 }
6dd74de181
6dd74de182 Deployment_Node(plc, "Big Bank plc", "Big Bank plc data center"){
6dd74de183 Deployment_Node(dn, "bigbank-api*** x8", "Ubuntu 16.04 LTS"){
6dd74de184 Deployment_Node(apache, "Apache Tomcat", "Apache Tomcat 8.x"){
6dd74de185 Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.")
6dd74de186 }
6dd74de187 }
6dd74de188 Deployment_Node(bb2, "bigbank-web*** x4", "Ubuntu 16.04 LTS"){
6dd74de189 Deployment_Node(apache2, "Apache Tomcat", "Apache Tomcat 8.x"){
6dd74de190 Container(web, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet Banking single page application.")
6dd74de191 }
6dd74de192 }
6dd74de193 Deployment_Node(bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS"){
6dd74de194 Deployment_Node(oracle, "Oracle - Primary", "Oracle 12c"){
6dd74de195 ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
6dd74de196 }
6dd74de197 }
6dd74de198 Deployment_Node(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS") {
6dd74de199 Deployment_Node(oracle2, "Oracle - Secondary", "Oracle 12c") {
6dd74de200 ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
6dd74de201 }
6dd74de202 }
6dd74de203 }
6dd74de204
6dd74de205 Rel(mobile, api, "Makes API calls to", "json/HTTPS")
6dd74de206 Rel(spa, api, "Makes API calls to", "json/HTTPS")
6dd74de207 Rel_U(web, spa, "Delivers to the customer's web browser")
6dd74de208 Rel(api, db, "Reads from and writes to", "JDBC")
6dd74de209 Rel(api, db2, "Reads from and writes to", "JDBC")
6dd74de210 Rel_R(db, db2, "Replicates data to")
6dd74de211
6dd74de212 UpdateRelStyle(spa, api, $offsetY="-40")
6dd74de213 UpdateRelStyle(web, spa, $offsetY="-40")
6dd74de214 UpdateRelStyle(api, db, $offsetY="-20", $offsetX="5")
6dd74de215 UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20")
6dd74de216 UpdateRelStyle(db, db2, $offsetY="-10")
6dd74de217 </pre>
6dd74de218 <hr />
6dd74de219
6dd74de220 <script type="module">
6dd74de221 import mermaid from './mermaid.esm.mjs';
6dd74de222 const ALLOWED_TAGS = [
6dd74de223 'a',
6dd74de224 'b',
6dd74de225 'blockquote',
6dd74de226 'br',
6dd74de227 'dd',
6dd74de228 'div',
6dd74de229 'dl',
6dd74de230 'dt',
6dd74de231 'em',
6dd74de232 'foreignObject',
6dd74de233 'h1',
6dd74de234 'h2',
6dd74de235 'h3',
6dd74de236 'h4',
6dd74de237 'h5',
6dd74de238 'h6',
6dd74de239 'h7',
6dd74de240 'h8',
6dd74de241 'hr',
6dd74de242 'i',
6dd74de243 'li',
6dd74de244 'ul',
6dd74de245 'ol',
6dd74de246 'p',
6dd74de247 'pre',
6dd74de248 'span',
6dd74de249 'strike',
6dd74de250 'strong',
6dd74de251 'table',
6dd74de252 'tbody',
6dd74de253 'td',
6dd74de254 'tfoot',
6dd74de255 'th',
6dd74de256 'thead',
6dd74de257 'tr',
6dd74de258 ];
6dd74de259 mermaid.initialize({
6dd74de260 theme: 'forest',
6dd74de261 // themeCSS: '.node rect { fill: red; }',
6dd74de262 logLevel: 3,
6dd74de263 securityLevel: 'loose',
6dd74de264 flowchart: { curve: 'basis' },
6dd74de265 gantt: { axisFormat: '%m/%d/%Y' },
6dd74de266 sequence: { actorMargin: 50 },
6dd74de267 dompurifyConfig: {
6dd74de268 USE_PROFILES: {
6dd74de269 svg: true,
6dd74de270 },
6dd74de271 ADD_TAGS: ALLOWED_TAGS,
6dd74de272 ADD_ATTR: ['transform-origin'],
6dd74de273 },
6dd74de274 // sequenceDiagram: { actorMargin: 300 } // deprecated
6dd74de275 });
6dd74de276
6dd74de277 function testClick(nodeId) {
6dd74de278 console.log('clicked', nodeId);
6dd74de279 let originalBgColor = document.querySelector('body').style.backgroundColor;
6dd74de280 document.querySelector('body').style.backgroundColor = 'yellow';
6dd74de281 setTimeout(function () {
6dd74de282 document.querySelector('body').style.backgroundColor = originalBgColor;
6dd74de283 }, 100);
6dd74de284 }
6dd74de285
6dd74de286 const testLineEndings = async (test, input) => {
6dd74de287 try {
6dd74de288 await mermaid.render(test, input);
6dd74de289 } catch (err) {
6dd74de290 console.error('Error in %s:\n\n%s', test, err);
6dd74de291 }
6dd74de292 };
6dd74de293
6dd74de294 await testLineEndings('CR', 'graph LR\rsubgraph CR\rA --> B\rend');
6dd74de295 await testLineEndings('LF', 'graph LR\nsubgraph LF\nA --> B\nend');
6dd74de296 await testLineEndings('CRLF', 'graph LR\r\nsubgraph CRLF\r\nA --> B\r\nend');
6dd74de297 </script>
6dd74de298 </body>
6dd74de299</html>