-
-
Notifications
You must be signed in to change notification settings - Fork 6.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3523 from weedySeaDragon/chore/2904_fix-demo-char…
…ts-add-accTags chore: fix demo chart pages
- Loading branch information
Showing
13 changed files
with
1,396 additions
and
1,110 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,299 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="utf-8" /> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
<title>C4 Mermaid Quick Test Page</title> | ||
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" /> | ||
<style> | ||
div.mermaid { | ||
/* font-family: 'trebuchet ms', verdana, arial; */ | ||
/*font-family: 'Courier New', Courier, monospace !important;*/ | ||
} | ||
</style> | ||
</head> | ||
|
||
<body> | ||
<pre class="mermaid"> | ||
C4Context | ||
accTitle: C4 context demo | ||
accDescr: Many large C4 diagrams | ||
|
||
title System Context diagram for Internet Banking System | ||
|
||
Enterprise_Boundary(b0, "BankBoundary0") { | ||
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.") | ||
Person(customerB, "Banking Customer B") | ||
Person_Ext(customerC, "Banking Customer C", "desc") | ||
|
||
Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.") | ||
|
||
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.") | ||
|
||
Enterprise_Boundary(b1, "BankBoundary") { | ||
|
||
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") | ||
|
||
System_Boundary(b2, "BankBoundary2") { | ||
System(SystemA, "Banking System A") | ||
System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.") | ||
} | ||
|
||
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.") | ||
SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.") | ||
|
||
Boundary(b3, "BankBoundary3", "boundary") { | ||
SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.") | ||
SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.") | ||
} | ||
} | ||
} | ||
|
||
BiRel(customerA, SystemAA, "Uses") | ||
BiRel(SystemAA, SystemE, "Uses") | ||
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP") | ||
Rel(SystemC, customerA, "Sends e-mails to") | ||
|
||
UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red") | ||
UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5") | ||
UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10") | ||
UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50") | ||
UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20") | ||
|
||
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1") | ||
</pre> | ||
|
||
<pre class="mermaid"> | ||
C4Container | ||
title Container diagram for Internet Banking System | ||
|
||
System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", $tags="v1.0") | ||
Person(customer, Customer, "A customer of the bank, with personal bank accounts", $tags="v1.0") | ||
|
||
Container_Boundary(c1, "Internet Banking") { | ||
Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser") | ||
Container_Ext(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device") | ||
Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA") | ||
ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.") | ||
ContainerDb_Ext(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API") | ||
|
||
} | ||
|
||
System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") | ||
|
||
Rel(customer, web_app, "Uses", "HTTPS") | ||
UpdateRelStyle(customer, web_app, $offsetY="60", $offsetX="90") | ||
Rel(customer, spa, "Uses", "HTTPS") | ||
UpdateRelStyle(customer, spa, $offsetY="-40") | ||
Rel(customer, mobile_app, "Uses") | ||
UpdateRelStyle(customer, mobile_app, $offsetY="-30") | ||
|
||
Rel(web_app, spa, "Delivers") | ||
UpdateRelStyle(web_app, spa, $offsetX="130") | ||
Rel(spa, backend_api, "Uses", "async, JSON/HTTPS") | ||
Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS") | ||
Rel_Back(database, backend_api, "Reads from and writes to", "sync, JDBC") | ||
|
||
Rel(email_system, customer, "Sends e-mails to") | ||
UpdateRelStyle(email_system, customer, $offsetX="-45") | ||
Rel(backend_api, email_system, "Sends e-mails using", "sync, SMTP") | ||
UpdateRelStyle(backend_api, email_system, $offsetY="-60") | ||
Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS") | ||
UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140") | ||
</pre> | ||
|
||
<pre class="mermaid"> | ||
C4Component | ||
title Component diagram for Internet Banking System - API Application | ||
|
||
Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.") | ||
Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.") | ||
ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") | ||
System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") | ||
|
||
Container_Boundary(api, "API Application") { | ||
Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system") | ||
Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary of their bank accounts") | ||
Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.") | ||
Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.") | ||
|
||
Rel(sign, security, "Uses") | ||
Rel(accounts, mbsfacade, "Uses") | ||
Rel(security, db, "Read & write to", "JDBC") | ||
Rel(mbsfacade, mbs, "Uses", "XML/HTTPS") | ||
} | ||
|
||
Rel_Back(spa, sign, "Uses", "JSON/HTTPS") | ||
Rel(spa, accounts, "Uses", "JSON/HTTPS") | ||
|
||
Rel(ma, sign, "Uses", "JSON/HTTPS") | ||
Rel(ma, accounts, "Uses", "JSON/HTTPS") | ||
|
||
UpdateRelStyle(spa, sign, $offsetY="-40") | ||
UpdateRelStyle(spa, accounts, $offsetX="40", $offsetY="40") | ||
|
||
UpdateRelStyle(ma, sign, $offsetX="-90", $offsetY="40") | ||
UpdateRelStyle(ma, accounts, $offsetY="-40") | ||
|
||
UpdateRelStyle(sign, security, $offsetX="-160", $offsetY="10") | ||
UpdateRelStyle(accounts, mbsfacade, $offsetX="140", $offsetY="10") | ||
UpdateRelStyle(security, db, $offsetY="-40") | ||
UpdateRelStyle(mbsfacade, mbs, $offsetY="-40") | ||
</pre> | ||
|
||
<pre class="mermaid"> | ||
C4Dynamic | ||
title Dynamic diagram for Internet Banking System - API Application | ||
|
||
ContainerDb(c4, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") | ||
Container(c1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.") | ||
Container_Boundary(b, "API Application") { | ||
Component(c3, "Security Component", "Spring Bean", "Provides functionality Related to signing in, changing passwords, etc.") | ||
Component(c2, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.") | ||
} | ||
Rel(c1, c2, "Submits credentials to", "JSON/HTTPS") | ||
Rel(c2, c3, "Calls isAuthenticated() on") | ||
Rel(c3, c4, "select * from users where username = ?", "JDBC") | ||
|
||
UpdateRelStyle(c1, c2, $textColor="red", $offsetY="-40") | ||
UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60") | ||
UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10") | ||
</pre> | ||
|
||
<pre class="mermaid"> | ||
C4Deployment | ||
title Deployment Diagram for Internet Banking System - Live | ||
|
||
Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){ | ||
Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.") | ||
} | ||
|
||
Deployment_Node(comp, "Customer's computer", "Mircosoft Windows or Apple macOS"){ | ||
Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,<br/> Apple Safari or Microsoft Edge"){ | ||
Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.") | ||
} | ||
} | ||
|
||
Deployment_Node(plc, "Big Bank plc", "Big Bank plc data center"){ | ||
Deployment_Node(dn, "bigbank-api*** x8", "Ubuntu 16.04 LTS"){ | ||
Deployment_Node(apache, "Apache Tomcat", "Apache Tomcat 8.x"){ | ||
Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.") | ||
} | ||
} | ||
Deployment_Node(bb2, "bigbank-web*** x4", "Ubuntu 16.04 LTS"){ | ||
Deployment_Node(apache2, "Apache Tomcat", "Apache Tomcat 8.x"){ | ||
Container(web, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet Banking single page application.") | ||
} | ||
} | ||
Deployment_Node(bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS"){ | ||
Deployment_Node(oracle, "Oracle - Primary", "Oracle 12c"){ | ||
ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") | ||
} | ||
} | ||
Deployment_Node(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS") { | ||
Deployment_Node(oracle2, "Oracle - Secondary", "Oracle 12c") { | ||
ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") | ||
} | ||
} | ||
} | ||
|
||
Rel(mobile, api, "Makes API calls to", "json/HTTPS") | ||
Rel(spa, api, "Makes API calls to", "json/HTTPS") | ||
Rel_U(web, spa, "Delivers to the customer's web browser") | ||
Rel(api, db, "Reads from and writes to", "JDBC") | ||
Rel(api, db2, "Reads from and writes to", "JDBC") | ||
Rel_R(db, db2, "Replicates data to") | ||
|
||
UpdateRelStyle(spa, api, $offsetY="-40") | ||
UpdateRelStyle(web, spa, $offsetY="-40") | ||
UpdateRelStyle(api, db, $offsetY="-20", $offsetX="5") | ||
UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20") | ||
UpdateRelStyle(db, db2, $offsetY="-10") | ||
</pre> | ||
|
||
<hr /> | ||
|
||
<script src="./mermaid.js"></script> | ||
<script> | ||
const ALLOWED_TAGS = [ | ||
'a', | ||
'b', | ||
'blockquote', | ||
'br', | ||
'dd', | ||
'div', | ||
'dl', | ||
'dt', | ||
'em', | ||
'foreignObject', | ||
'h1', | ||
'h2', | ||
'h3', | ||
'h4', | ||
'h5', | ||
'h6', | ||
'h7', | ||
'h8', | ||
'hr', | ||
'i', | ||
'li', | ||
'ul', | ||
'ol', | ||
'p', | ||
'pre', | ||
'span', | ||
'strike', | ||
'strong', | ||
'table', | ||
'tbody', | ||
'td', | ||
'tfoot', | ||
'th', | ||
'thead', | ||
'tr', | ||
]; | ||
mermaid.initialize({ | ||
theme: 'forest', | ||
// themeCSS: '.node rect { fill: red; }', | ||
logLevel: 3, | ||
securityLevel: 'loose', | ||
flowchart: { curve: 'basis' }, | ||
gantt: { axisFormat: '%m/%d/%Y' }, | ||
sequence: { actorMargin: 50 }, | ||
dompurifyConfig: { | ||
USE_PROFILES: { | ||
svg: true, | ||
}, | ||
ADD_TAGS: ALLOWED_TAGS, | ||
ADD_ATTR: ['transform-origin'], | ||
}, | ||
// sequenceDiagram: { actorMargin: 300 } // deprecated | ||
}); | ||
</script> | ||
<script> | ||
function testClick(nodeId) { | ||
console.log('clicked', nodeId); | ||
var originalBgColor = document.querySelector('body').style.backgroundColor; | ||
document.querySelector('body').style.backgroundColor = 'yellow'; | ||
setTimeout(function () { | ||
document.querySelector('body').style.backgroundColor = originalBgColor; | ||
}, 100); | ||
} | ||
</script> | ||
<script> | ||
const testLineEndings = (test, input) => { | ||
try { | ||
mermaid.render(test, input, () => { | ||
//no-op | ||
}); | ||
} catch (err) { | ||
console.error('Error in %s:\n\n%s', test, err); | ||
} | ||
}; | ||
|
||
testLineEndings('CR', 'graph LR\rsubgraph CR\rA --> B\rend'); | ||
testLineEndings('LF', 'graph LR\nsubgraph LF\nA --> B\nend'); | ||
testLineEndings('CRLF', 'graph LR\r\nsubgraph CRLF\r\nA --> B\r\nend'); | ||
</script> | ||
</body> | ||
</html> |
Oops, something went wrong.