diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 93c751dce..e5cd608ad 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -29,11 +29,16 @@ jobs:
# and run all Cypress tests
- name: Cypress run
uses: cypress-io/github-action@v4
+ # If CYPRESS_RECORD_KEY is set, run in parallel on all containers
+ # Otherwise (e.g. if running from fork), we run on a single container only
+ if: ${{ ( env.CYPRESS_RECORD_KEY != '' ) || ( matrix.containers == 1 ) }}
with:
start: pnpm run dev
wait-on: 'http://localhost:9000'
- record: true
+ # Disable recording if we don't have an API key
+ # e.g. if this action was run from a fork
+ record: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
+ parallel: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
headless: true
- parallel: true
env:
CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html
index a74dec22b..1a58420ef 100644
--- a/cypress/platform/knsv.html
+++ b/cypress/platform/knsv.html
@@ -38,13 +38,17 @@
-
-flowchart LR
- a ---
-
flowchart LR
- a2 ---
+ subgraph one
+ direction LR
+ A[myClass1] --> B[default]
+ subgraph two
+ direction BT
+ C[myClass2] --> D[default]
+ end
+ end
+
flowchart LR
@@ -79,7 +83,7 @@ flowchart TD
end
end
-
+
flowchart TD
release-branch[Create Release Branch]:::relClass
@@ -131,7 +135,7 @@ flowchart TD
class A someclass;
class C someclass;
-
+
sequenceDiagram
title: My Sequence Diagram Title
accTitle: My Acc Sequence Diagram
@@ -141,14 +145,14 @@ flowchart TD
John-->>Alice: Great!
Alice-)John: See you later!
-
+
graph TD
A -->|000| B
B -->|111| C
linkStyle 1 stroke:#ff3,stroke-width:4px,color:red;
-
+
journey
accTitle: My User Journey Diagram
accDescr: My User Journey Diagram Description
@@ -162,11 +166,51 @@ graph TD
Go downstairs: 5: Me
Sit down: 5: Me
-
+
info
+
+requirementDiagram
+ accTitle: My req Diagram
+ accDescr: My req Diagram Description
-
+ requirement test_req {
+ id: 1
+ text: the test text.
+ risk: high
+ verifymethod: test
+ }
+
+ functionalRequirement test_req2 {
+ id: 1.1
+ text: the second test text.
+ risk: low
+ verifymethod: inspection
+ }
+
+ performanceRequirement test_req3 {
+ id: 1.2
+ text: the third test text.
+ risk: medium
+ verifymethod: demonstration
+ }
+
+ element test_entity {
+ type: simulation
+ }
+
+ element test_entity2 {
+ type: word doc
+ docRef: reqs/test_entity
+ }
+
+
+ test_entity - satisfies -> test_req2
+ test_req - traces -> test_req2
+ test_req - contains -> test_req3
+ test_req <- copies - test_entity2
+
+
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
@@ -198,7 +242,7 @@ gantt
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
-
+
stateDiagram
state Active {
Idle
@@ -226,7 +270,7 @@ stateDiagram
end
B ->> A: Return
-
+
classDiagram
accTitle: My class diagram
accDescr: My class diagram Description
@@ -251,7 +295,7 @@ class Class10 {
A->>Bob: Hola
Bob-->A: Pasten !
-
+
gitGraph
commit id: "ZERO"
branch develop
@@ -280,8 +324,30 @@ flowchart TD
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
erDiagram
CAR ||--o{ NAMED-DRIVER : allows
CAR {
diff --git a/demos/c4context.html b/demos/c4context.html
new file mode 100644
index 000000000..1485d42d8
--- /dev/null
+++ b/demos/c4context.html
@@ -0,0 +1,299 @@
+
+
+
+
+
+ C4 Mermaid Quick Test Page
+
+
+
+
+
+
+ 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, 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")
+
+
+
+ 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")
+
+
+
+ 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")
+
+
+
+ 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")
+
+
+
+ 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, 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")
+
+
+
+
+
+
+
+
+
+
diff --git a/demos/classchart.html b/demos/classchart.html
index ebc3fe0a5..e15495b95 100644
--- a/demos/classchart.html
+++ b/demos/classchart.html
@@ -3,7 +3,7 @@
- Mermaid Quick Test Page
+ Class diagrams Mermaid Quick Test Page
+
+
+
+
- C4Context
- 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, 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")
-
-
-
- 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")
-
-
-
- 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")
-
-
-
- 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")
-
-
-
- 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, 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")
-
-
-
-
-
- pie
- title Key elements in Product X
- accDescription This is a pie chart showing the key elements in Product X.
- "Calcium" : 42.96
- "Potassium" : 50.05
- "Magnesium" : 10.01
- "Iron" : 5
-
- gantt
- title Exclusive end dates (Manual date should end on 3d)
- dateFormat YYYY-MM-DD
- axisFormat %d
- section Section1
- 2 Days: 1, 2019-01-01,2d
- Manual Date: 2, 2019-01-01,2019-01-03
-
-
- gantt
- title Inclusive end dates (Manual date should end on 4th)
- dateFormat YYYY-MM-DD
- axisFormat %d
- inclusiveEndDates
- section Section1
- 2 Days: 1, 2019-01-01,2d
- Manual Date: 2, 2019-01-01,2019-01-03
-
-
- gantt
- title Hide today marker (vertical line should not be visible)
- dateFormat YYYY-MM-DD
- axisFormat %d
- todayMarker off
- section Section1
- Today: 1, -1h
-
-
- gantt
- title Style today marker (vertical line should be 5px wide and half-transparent blue)
- dateFormat YYYY-MM-DD
- axisFormat %d
- todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
- section Section1
- Today: 1, -1h
-
- graph TD
- A[Christmas] -->|Get money| B(Go shopping)
- B --> C{{Let me think... Do I want something for work, something to spend every free second with, or something to get around?}}
- C -->|One| D[Laptop]
- C -->|Two| E[iPhone]
- C -->|Three| F[Car]
- click A "index.html#link-clicked" "link test"
- click B testClick "click test"
- classDef someclass fill:#f96;
- class A someclass;
- class C someclass;
-
-
- graph TD
- A([stadium shape test])
- A -->|Get money| B([Go shopping])
- B --> C([Let me think... Do I want something for work, something to spend every free second with, or something to get around?])
- C -->|One| D([Laptop])
- C -->|Two| E([iPhone])
- C -->|Three| F([Car wroom wroom])
- click A "index.html#link-clicked" "link test"
- click B testClick "click test"
- classDef someclass fill:#f96;
- class A someclass;
- class C someclass;
-
-
- graph LR
- A[[subroutine shape test]]
- A -->|Get money| B[[Go shopping]]
- B --> C[[Let me think... Do I want something for work, something to spend every free second with, or something to get around?]]
- C -->|One| D[[Laptop]]
- C -->|Two| E[[iPhone]]
- C -->|Three| F[[Car wroom wroom]]
- click A "index.html#link-clicked" "link test"
- click B testClick "click test"
- classDef someclass fill:#f96;
- class A someclass;
- class C someclass;
-
-
- graph LR
- A[(cylindrical shape test)]
- A -->|Get money| B1[(Go shopping 1)]
- A -->|Get money| B2[(Go shopping 2)]
- A -->|Get money| B3[(Go shopping 3)]
- C[(Let me think... Do I want something for work, something to spend every free second with, or something to get around?)]
- B1 --> C
- B2 --> C
- B3 --> C
- C -->|One| D[(Laptop)]
- C -->|Two| E[(iPhone)]
- C -->|Three| F[(Car)]
- click A "index.html#link-clicked" "link test"
- click B testClick "click test"
- classDef someclass fill:#f96;
- class A someclass;
-
- graph TB
- TITLE["Link Click Events (click the nodes below)"]
- A["link test (open in same tab)"]
- B["link test (open in new tab)"]
- C[anchor test]
- D[mailto test]
- E[other protocol test]
- F[script test]
- TITLE --> A & B & C & D & E & F
- click A "https://mermaid-js.github.io/mermaid/#/" "link test (open in same tab)"
- click B "https://mermaid-js.github.io/mermaid/#/" "link test (open in new tab)" _blank
- click C "#link-clicked"
- click D "mailto:user@user.user" "mailto test"
- click E "notes://do-your-thing/id" "other protocol test"
- click F "javascript:alert('test')" "script test"
-
-
-
- graph LR
- A[red text] -->|red text| B(blue text)
- C[/red text/] -->|blue text| D{blue text}
- E{{default style}} -->|default style| F([default style])
- linkStyle default color:Sienna;
- linkStyle 0 color:red;
- linkStyle 1 stroke:DarkGray,stroke-width:2px,color:#0000ff
- style A color:red;
- style B color:blue;
- style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
- style D stroke:#0000ff,fill:#ccccff,color:#0000ff
- click B "index.html#link-clicked" "link test"
- click D testClick "click test"
-
-
- graph TD
- A[myClass1] --> B[default] & C[default]
- B[default] & C[default] --> D[myClass2]
- classDef default stroke-width:2px,fill:none,stroke:silver
- classDef node color:red
- classDef myClass1 color:#0000ff
- classDef myClass2 stroke:#0000ff,fill:#ccccff
- class A myClass1
- class D myClass2
-
-
-
-
-
- sequenceDiagram
- accDescription Hello friends
- participant Alice
- participant Bob
- participant John as John Second Line
- rect rgb(200, 220, 100)
- rect rgb(200, 255, 200)
- Alice ->> Bob: Hello Bob, how are you?
- Bob-->>John: How about you John?
- end
- Bob--x Alice: I am good thanks!
- Bob-x John: I am good thanks!
- Note right of John: John thinks a long long time, so long that the text does not fit on a row.
- Bob-->Alice: Checking with John...
- Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
- Bob-x John: Hey John - we're still waiting to know how you're doing
- Note over John:nowrap: John's trying hard not to break his train of thought.
- Bob-x John:wrap: John! Are you still debating about how you're doing? How long does it take??
- Note over John: After a few more moments, John finally snaps out of it.
- end
- alt either this
- Alice->>John: Yes
- else or this
- Alice->>John: No
- else or this will happen
- Alice->John: Maybe
- end
- par this happens in parallel
- Alice -->> Bob: Parallel message 1
- and
- Alice -->> John: Parallel message 2
- end
-
-
- sequenceDiagram
- participant 1 as multiline using #lt;br#gt;
- participant 2 as multiline using #lt;br/#gt;
- participant 3 as multiline using #lt;br /#gt;
- participant 4 as multiline using #lt;br /#gt;
- 1->>2: multiline using #lt;br#gt;
- note right of 2: multiline using #lt;br#gt;
- 2->>3: multiline using #lt;br/#gt;
- note right of 3: multiline using #lt;br/#gt;
- 3->>4: multiline using #lt;br /#gt;
- note right of 4: multiline using #lt;br /#gt;
- 4->>1: multiline using #lt;br /#gt;
- note right of 1: multiline using #lt;br /#gt;
-
-
- sequenceDiagram
- autonumber
- Alice->>John: Hello John, how are you?
- autonumber 50 10
- Alice->>John: John, can you hear me?
- John-->>Alice: Hi Alice, I can hear you!
- autonumber off
- John-->>Alice: I feel great!
-
-
-
-
-
- gantt
- dateFormat YYYY-MM-DD
- axisFormat %d/%m
- title Adding GANTT diagram to mermaid
- excludes weekdays 2014-01-10
-
- section A section
- Completed task :done, des1, 2014-01-06,2014-01-08
- Active task :active, des2, 2014-01-09, 3d
- Future task : des3, after des2, 5d
- Future task2 : des4, after des3, 5d
-
- section Critical tasks
- Completed task in the critical line :crit, done, 2014-01-06,24h
- Implement parser and jison :crit, done, after des1, 2d
- Create tests for parser :crit, active, 3d
- Future task in critical line :crit, 5d
- Create tests for renderer :2d
- Add to mermaid :1d
-
- section Documentation
- Describe gantt syntax :active, a1, after des1, 3d
- Add gantt diagram to demo page :after a1 , 20h
- Add another diagram to demo page :doc1, after a1 , 48h
-
- section Clickable
- Visit mermaidjs :active, cl1, 2014-01-07,2014-01-10
- Calling a Callback (look at the console log) :cl2, after cl1, 3d
-
- click cl1 href "https://mermaidjs.github.io/"
- click cl2 call ganttTestClick("test", test, test)
-
- section Last section
- Describe gantt syntax :after doc1, 3d
- Add gantt diagram to demo page : 20h
- Add another diagram to demo page : 48h
-
-
- gantt
- dateFormat YYYY-MM-DD
- axisFormat %d/%m
- title GANTT diagram with multiline section titles
- excludes weekdays 2014-01-10
-
- section A section multiline
- Completed task : done, des1, 2014-01-06,2014-01-08
- Active task : active, des2, 2014-01-09, 3d
- Future task : des3, after des2, 5d
- Future task2 : des4, after des3, 5d
-
- section Critical tasks multiline
- Completed task in the critical line : crit, done, 2014-01-06, 24h
- Implement parser and jison : crit, done, after des1, 2d
- Create tests for parser : crit, active, 3d
- Future task in critical line : crit, 5d
- Create tests for renderer : 2d
- Add to mermaid : 1d
-
- section Documentation multiline
- Describe gantt syntax : active, a1, after des1, 3d
- Add gantt diagram to demo page : after a1, 20h
- Add another diagram to demo page : doc1, after a1, 48h
-
- section Last section multiline
- Describe gantt syntax : after doc1, 3d
- Add gantt diagram to demo page : 20h
- Add another diagram to demo page : 48h
-
- classDiagram
- direction LR
- Animal ()-- Dog
- Dog : bark()
- Dog : species()
-
-
-
- classDiagram
- direction RL
- Fruit ()-- Apple
- Apple : color()
- Apple : -int leafCount()
- Fruit ()-- Pineapple
- Pineapple : color()
- Pineapple : -int leafCount()
- Pineapple : -int spikeCount()
-
-
-
- stateDiagram
- accDescription This is a state diagram showing one state
- State1
-
-
-
-
-
- stateDiagram
- [*] --> First
- state First {
- [*] --> second
- second --> [*]
- }
-
-
- stateDiagram
- State1: The state with a note
- note right of State1
- Important information! You can write
- notes.
- end note
- State1 --> State2
- note left of State2 : This is the note to the left.
-
-
- stateDiagram
- State1
- note right of State1
- Line1 Line2 Line3 Line4 Line5
- end note
-
-
-
-
-
- requirementDiagram
-
- requirement An Example {
- id: 1
- text: the test text.
- risk: high
- verifymethod: test
- }
-
- functionalRequirement Random Name {
- id: 1.1
- text: the second test text.
- risk: low
- verifymethod: inspection
- }
-
- performanceRequirement Something Else {
- id: 1.2
- text: the third test text.
- risk: medium
- verifymethod: demonstration
- }
-
- interfaceRequirement test_req4 {
- id: 1.2.1
- text: the fourth test text.
- risk: medium
- verifymethod: analysis
- }
-
- physicalRequirement test_req5 {
- id: 1.2.2
- text: the fifth test text.
- risk: medium
- verifymethod: analysis
- }
-
- designConstraint test_req6 {
- id: 1.2.3
- text: really long text to test overflow. really long text to test overflow. really long text to test overflow.
- risk: medium
- verifymethod: analysis
- }
-
- element test_entity {
- type: simulation
- }
-
- element test_entity2 {
- type: word doc
- docRef: reqs/test_entity
- }
-
- element test_entity3 {
- type: "test suite"
- docRef: github.com/all_the_tests
- }
-
-
- test_entity - satisfies -> Random Name
- An Example - traces -> Random Name
- An Example - contains -> Something Else
- Something Else - contains -> test_req4
- test_req4 - derives -> test_req5
- test_req5 - refines -> test_req6
- test_entity3 - verifies -> test_req5
- An Example <- copies - test_entity2
-
+ pie title Pets adopted by volunteers
+ accTitle: simple pie char demo
+ accDescr: pie chart with 3 sections: dogs, cats, rats. Most are dogs.
+ "Dogs" : 386
+ "Cats" : 85
+ "Rats" : 15
+
+
+
+ pie
+ title Key elements in Product X
+ accTitle: Key elements in Product X
+ accDescr: This is a pie chart showing the key elements in Product X.
+ "Calcium" : 42.96
+ "Potassium" : 50.05
+ "Magnesium" : 10.01
+ "Iron" : 5
+
+
+
+
+
diff --git a/demos/requirements.html b/demos/requirements.html
index 6bbd684a8..cebaf7e02 100644
--- a/demos/requirements.html
+++ b/demos/requirements.html
@@ -3,7 +3,7 @@
- Mermaid Quick Test Page
+ Requirements Mermaid Quick Test Page