Revert "chore(deps-dev): bump documentation from 13.2.0 to 14.0.0"

chore(deps-dev): bump prettier-plugin-jsdoc from 0.3.38 to 0.4.1

.github/workflows/checks.yml

@@ -12,6 +12,7 @@ jobs:
   test:
     runs-on: ubuntu-latest
     name: check tests
+    if: github.repository_owner == 'mermaid-js'
     steps:
     - uses: actions/checkout@v2
       with:

.github/workflows/dependency-review.yml

@@ -17,4 +17,4 @@ jobs:
       - name: 'Checkout Repository'
         uses: actions/checkout@v3
       - name: 'Dependency Review'
-        uses: actions/dependency-review-action@v1
+        uses: actions/dependency-review-action@v2

CONTRIBUTING.md

@@ -6,6 +6,14 @@ So you want to help? That's great!
 
 Here are a few things to know to get you started on the right path.
 
+## Development Installation
+```bash
+git clone git@github.com:mermaid-js/mermaid.git
+cd mermaid
+yarn
+yarn test
+```
+
 ## Committing code
 
 We make all changes via pull requests. As we have many pull requests from developers new to mermaid, the current approach is to have *knsv, Knut Sveidqvist* as a main reviewer of changes and merging pull requests. More precisely like this:

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2014 - 2021 Knut Sveidqvist
+Copyright (c) 2014 - 2022 Knut Sveidqvist
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -15,7 +15,7 @@ English | [简体中文](./README.zh-CN.md)
 ## About
 
 <!-- <Main description>   -->
-Mermaid is a Javascript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams.  The main purpose of Mermaid is to help documentation catch up with development.
+Mermaid is a JavaScript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams.  The main purpose of Mermaid is to help documentation catch up with development.
 
 > Doc-Rot is a Catch-22 that Mermaid helps to solve.
 
@@ -219,6 +219,77 @@ pie
       Sit down: 3: Me
 ```
 
+### C4 diagram [<a href="https://mermaid-js.github.io/mermaid/#/c4c">docs</a>]
+
+```
+C4Context
+title System Context diagram for Internet Banking System
+
+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")
+System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
+
+Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
+
+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.")
+  }
+
+  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, with personal bank accounts.")
+    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")
+```
+```mermaid
+C4Context
+title System Context diagram for Internet Banking System
+
+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")
+System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
+
+Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
+
+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.")
+  }
+
+  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, with personal bank accounts.")
+    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")
+```
+
 ## Release
 
 For those who have the permission to do so:

README.zh-CN.md

@@ -202,6 +202,77 @@ pie
       Sit down: 3: Me
 ```
 
+### C4 图 [<a href="https://mermaid-js.github.io/mermaid/#/c4c">文档</a>]
+
+```
+C4Context
+title System Context diagram for Internet Banking System
+
+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")
+System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
+
+Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
+
+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.")
+  }
+
+  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, with personal bank accounts.")
+    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")
+```
+```mermaid
+C4Context
+title System Context diagram for Internet Banking System
+
+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")
+System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
+
+Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
+
+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.")
+  }
+
+  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, with personal bank accounts.")
+    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")
+```
+
 ## 发布
 
 对于有权限的同学来说，你可以通过以下步骤来完成发布操作：

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/helpers/util.js

@@ -43,6 +43,7 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) =>
     options.fontSize = '16px';
   }
   const useAppli = Cypress.env('useAppli');
+  //const useAppli = false;
   const branch = Cypress.env('codeBranch');
   cy.log('Hello ' + useAppli ? 'Appli' : 'image-snapshot');
   const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
@@ -70,6 +71,56 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) =>
   }
 };
 
+export const urlSnapshotTest = (url, _options, api = false, validation) => {
+  cy.log(_options);
+  const options = Object.assign(_options);
+  if (!options.fontFamily) {
+    options.fontFamily = 'courier';
+  }
+  if (!options.sequence) {
+    options.sequence = {};
+  }
+  if (!options.sequence || (options.sequence && !options.sequence.actorFontFamily)) {
+    options.sequence.actorFontFamily = 'courier';
+  }
+  if (options.sequence && !options.sequence.noteFontFamily) {
+    options.sequence.noteFontFamily = 'courier';
+  }
+  options.sequence.actorFontFamily = 'courier';
+  options.sequence.noteFontFamily = 'courier';
+  options.sequence.messageFontFamily = 'courier';
+  if (options.sequence && !options.sequence.actorFontFamily) {
+    options.sequence.actorFontFamily = 'courier';
+  }
+  if (!options.fontSize) {
+    options.fontSize = '16px';
+  }
+  const useAppli = Cypress.env('useAppli');
+  const branch = Cypress.env('codeBranch');
+  cy.log('Hello ' + useAppli ? 'Appli' : 'image-snapshot');
+  const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
+
+  if (useAppli) {
+    cy.eyesOpen({
+      appName: 'Mermaid-' + branch,
+      testName: name,
+      batchName: branch,
+    });
+  }
+
+  cy.visit(url);
+  if (validation) cy.get('svg').should(validation);
+  cy.get('body');
+  // Default name to test title
+
+  if (useAppli) {
+    cy.eyesCheckWindow('Click!');
+    cy.eyesClose();
+  } else {
+    cy.matchImageSnapshot(name);
+  }
+};
+
 export const renderGraph = (graphStr, options, api) => {
   const url = mermaidUrl(graphStr, options, api);
 

cypress/integration/other/configuration.spec.js

@@ -41,7 +41,7 @@ describe('Configuration', () => {
         .should('exist')
         .and('include', 'url(#');
     });
-    it('should handle arrowMarkerAbsolute excplicitly set to false', () => {
+    it('should handle arrowMarkerAbsolute explicitly set to false', () => {
       renderGraph(
         `graph TD
         A[Christmas] -->|Get money| B(Go shopping)
@@ -63,7 +63,7 @@ describe('Configuration', () => {
         .should('exist')
         .and('include', 'url(#');
     });
-    it('should handle arrowMarkerAbsolute excplicitly set to "false" as false', () => {
+    it('should handle arrowMarkerAbsolute explicitly set to "false" as false', () => {
       renderGraph(
         `graph TD
         A[Christmas] -->|Get money| B(Go shopping)

cypress/integration/other/ghsa.spec.js

@@ -0,0 +1,10 @@
+import { urlSnapshotTest } from '../../helpers/util';
+
+describe('CSS injections', () => {
+  it('should not allow CSS injections outside of the diagram', () => {
+    urlSnapshotTest('http://localhost:9000/ghsa1.html', {
+      logLevel: 1,
+      flowchart: { htmlLabels: false },
+    });
+  });
+});

cypress/integration/other/interaction.spec.js

@@ -4,7 +4,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body').find('g#flowchart-Function-2').click();
+      cy.get('body').find('g#flowchart-Function-4').click();
 
       cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
     });
@@ -12,7 +12,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body').find('g#flowchart-FunctionArg-18').click();
+      cy.get('body').find('g#flowchart-FunctionArg-28').click();
 
       cy.get('.created-by-click-2').should('have.text', 'Clicked By Flow: ARGUMENT');
     });
@@ -20,7 +20,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body').find('g[id="flowchart-FunctionArg-22"]').click();
+      cy.get('body').find('g[id="flowchart-FunctionArg-34"]').click();
 
       cy.get('.created-by-click-2').should('have.text', 'Clicked By Flow: ARGUMENT');
     });
@@ -28,7 +28,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body').find('#flowchart-URL-3').click();
+      cy.get('body').find('#flowchart-URL-5').click();
 
       cy.location().should((location) => {
         expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
@@ -38,7 +38,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body').find('g[id="flowchart-2URL-7"]').click();
+      cy.get('body').find('g[id="flowchart-2URL-11"]').click();
 
       cy.location().should((location) => {
         expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
@@ -49,7 +49,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body').find('g#flowchart-Function-10').click();
+      cy.get('body').find('g#flowchart-Function-16').click();
 
       cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
     });
@@ -57,7 +57,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body').find('g[id="flowchart-1Function-14"]').click();
+      cy.get('body').find('g[id="flowchart-1Function-22"]').click();
 
       cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
     });
@@ -65,7 +65,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body').find('#flowchart-URL-11').click();
+      cy.get('body').find('#flowchart-URL-17').click();
 
       cy.location().should((location) => {
         expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
@@ -75,7 +75,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body').find('g[id="flowchart-2URL-15"]').click();
+      cy.get('body').find('g[id="flowchart-2URL-23"]').click();
 
       cy.location().should((location) => {
         expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
@@ -142,7 +142,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_strict.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body').find('g#flowchart-Function-2').click();
+      cy.get('body').find('g#flowchart-Function-4').click();
 
       cy.get('.created-by-click').should('not.exist');
       // cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
@@ -151,7 +151,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_strict.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body').find('g[id="flowchart-1Function-6"]').click();
+      cy.get('body').find('g[id="flowchart-1Function-10"]').click();
 
       // cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
       cy.get('.created-by-click').should('not.exist');
@@ -160,7 +160,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_strict.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body').find('g#flowchart-URL-3').click();
+      cy.get('body').find('g#flowchart-URL-5').click();
 
       cy.location().should((location) => {
         expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
@@ -170,7 +170,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_strict.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body').find('g[id="flowchart-2URL-7"]').click();
+      cy.get('body').find('g[id="flowchart-2URL-11"]').click();
 
       cy.location().should((location) => {
         expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
@@ -222,7 +222,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_other.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body').find('g#flowchart-Function-2').click();
+      cy.get('body').find('g#flowchart-Function-4').click();
 
       // cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
       cy.get('.created-by-click').should('not.exist');
@@ -231,7 +231,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_other.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body').find('g[id="flowchart-1Function-6"]').click();
+      cy.get('body').find('g[id="flowchart-1Function-10"]').click();
 
       cy.get('.created-by-click').should('not.exist');
       cy.get('.created-by-click').should('not.exist');
@@ -240,7 +240,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_other.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body').find('g#flowchart-URL-3').click();
+      cy.get('body').find('g#flowchart-URL-5').click();
 
       cy.location().should((location) => {
         expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');

cypress/integration/other/rerender.spec.js

@@ -1,5 +1,5 @@
 describe('Rerendering', () => {
-  it('should be able to render after an error has occured', () => {
+  it('should be able to render after an error has occurred', () => {
     const url = 'http://localhost:9000/render-after-error.html';
     cy.viewport(1440, 1024);
     cy.visit(url);

cypress/integration/other/xss.spec.js

@@ -60,52 +60,52 @@ describe('XSS', () => {
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   });
-  it('should not allow maniplulating htmlLabels into a false positive', () => {
+  it('should not allow manipulating htmlLabels into a false positive', () => {
     cy.visit('http://localhost:9000/xss4.html');
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   });
-  it('should not allow maniplulating antiscript to run javascript', () => {
+  it('should not allow manipulating antiscript to run javascript', () => {
     cy.visit('http://localhost:9000/xss5.html');
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   });
-  it('should not allow maniplulating antiscript to run javascript using onerror', () => {
+  it('should not allow manipulating antiscript to run javascript using onerror', () => {
     cy.visit('http://localhost:9000/xss6.html');
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   });
-  it('should not allow maniplulating antiscript to run javascript using onerror in state diagrams with dagre wrapper', () => {
+  it('should not allow manipulating antiscript to run javascript using onerror in state diagrams with dagre wrapper', () => {
     cy.visit('http://localhost:9000/xss8.html');
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   });
-  it('should not allow maniplulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
+  it('should not allow manipulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
     cy.visit('http://localhost:9000/xss9.html');
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   });
-  it('should not allow maniplulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
+  it('should not allow manipulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
     cy.visit('http://localhost:9000/xss10.html');
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   });
-  it('should not allow maniplulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
+  it('should not allow manipulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
     cy.visit('http://localhost:9000/xss11.html');
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   });
-  it('should not allow maniplulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
+  it('should not allow manipulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
     cy.visit('http://localhost:9000/xss12.html');
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   });
-  it('should not allow maniplulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
+  it('should not allow manipulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
     cy.visit('http://localhost:9000/xss13.html');
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   });
-  it('should not allow maniplulating antiscript to run javascript iframes in class diagrams', () => {
+  it('should not allow manipulating antiscript to run javascript iframes in class diagrams', () => {
     cy.visit('http://localhost:9000/xss14.html');
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');

cypress/integration/rendering/classDiagram-v2.spec.js

@@ -381,7 +381,7 @@ describe('Class diagram V2', () => {
     cy.get('svg');
   });
 
-  it('16b: should handle the direction statemnent with TB', () => {
+  it('16b: should handle the direction statement with TB', () => {
     imgSnapshotTest(
       `
       classDiagram
@@ -406,7 +406,7 @@ describe('Class diagram V2', () => {
     cy.get('svg');
   });
 
-  it('18: should handle the direction statemnent with LR', () => {
+  it('18: should handle the direction statement with LR', () => {
     imgSnapshotTest(
       `
       classDiagram
@@ -430,7 +430,7 @@ describe('Class diagram V2', () => {
     );
     cy.get('svg');
   });
-  it('17a: should handle the direction statemnent with BT', () => {
+  it('17a: should handle the direction statement with BT', () => {
     imgSnapshotTest(
       `
       classDiagram
@@ -454,7 +454,7 @@ describe('Class diagram V2', () => {
     );
     cy.get('svg');
   });
-  it('17b: should handle the direction statemment with RL', () => {
+  it('17b: should handle the direction statement with RL', () => {
     imgSnapshotTest(
       `
       classDiagram

cypress/integration/rendering/conf-and-directives.spec.js

@@ -16,7 +16,7 @@ describe('Configuration and directives - nodes should be light blue', () => {
     );
     cy.get('svg');
   });
-  it('Settigns from intitialize - nodes should be green', () => {
+  it('Settings from initialize - nodes should be green', () => {
     imgSnapshotTest(
       `
 graph TD
@@ -30,7 +30,7 @@ graph TD
     );
     cy.get('svg');
   });
-  it('Settings from initialize overriding themeVariable - nodes shold be red', () => {
+  it('Settings from initialize overriding themeVariable - nodes should be red', () => {
     imgSnapshotTest(
       `
 

cypress/integration/rendering/gitGraph.spec.js

@@ -207,4 +207,50 @@ describe('Git Graph diagram', () => {
       {}
     );
   });
+
+  it('12: should render commits for more than 8 branches', () => {
+    imgSnapshotTest(
+      `
+      gitGraph
+      checkout main
+      commit
+      checkout main
+      branch branch1
+      commit
+      checkout main
+      merge branch1
+      branch branch2
+      commit
+      checkout main
+      merge branch2
+      branch branch3
+      commit
+      checkout main
+      merge branch3
+      branch branch4
+      commit
+      checkout main
+      merge branch4
+      branch branch5
+      commit
+      checkout main
+      merge branch5
+      branch branch6
+      commit
+      checkout main
+      merge branch6
+      branch branch7
+      commit
+      checkout main
+      merge branch7
+      branch branch8
+      commit
+      checkout main
+      merge branch8
+      branch branch9
+      commit
+      `,
+      {}
+    );
+  });
 });

cypress/integration/rendering/sequencediagram.spec.js

@@ -76,11 +76,11 @@ context('Sequence diagram', () => {
     imgSnapshotTest(
       `
         sequenceDiagram
-        Alice->>Bob: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        Alice->>Bob: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
         loop Loopy
             Bob->>Alice: Pasten
         end      `,
-      {}
+      { wrap: true }
     );
   });
   context('font settings', () => {
@@ -126,6 +126,17 @@ context('Sequence diagram', () => {
         { sequence: { noteAlign: 'left' } }
       );
     });
+    it('should render multi-line notes aligned to the left when configured', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        Alice->>Bob: I'm short
+        note left of Alice: I am left aligned<br>but also<br>multiline
+        Bob->>Alice: Short as well
+      `,
+        { sequence: { noteAlign: 'left' } }
+      );
+    });
     it('should render notes aligned to the right when configured', () => {
       imgSnapshotTest(
         `
@@ -137,13 +148,44 @@ context('Sequence diagram', () => {
         { sequence: { noteAlign: 'right' } }
       );
     });
+    it('should render multi-line notes aligned to the right when configured', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        Alice->>Bob: I'm short
+        note left of Alice: I am right aligned<br>but also<br>multiline
+        Bob->>Alice: Short as well
+      `,
+        { sequence: { noteAlign: 'right' } }
+      );
+    });
+    it('should render multi-line messages aligned to the left when configured', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        Alice->>Bob: I'm short<br>but also<br>multiline
+        Bob->>Alice: Short as well<br>and also<br>multiline
+      `,
+        { sequence: { messageAlign: 'left' } }
+      );
+    });
+    it('should render multi-line messages aligned to the right when configured', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        Alice->>Bob: I'm short<br>but also<br>multiline
+        Bob->>Alice: Short as well<br>and also<br>multiline
+      `,
+        { sequence: { messageAlign: 'right' } }
+      );
+    });
   });
   context('auth width scaling', () => {
     it('should render long actor descriptions', () => {
       imgSnapshotTest(
         `
         sequenceDiagram
-        participant A as Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        participant A as Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
         A->>Bob: Hola
         Bob-->A: Pasten !
       `,
@@ -154,7 +196,7 @@ context('Sequence diagram', () => {
       imgSnapshotTest(
         `
         sequenceDiagram
-        participant A as wrap:Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        participant A as wrap:Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
         A->>Bob: Hola
         Bob-->A: Pasten !
       `,
@@ -166,7 +208,7 @@ context('Sequence diagram', () => {
         `
         %%{init: {'config': {'wrap': true }}}%%
         sequenceDiagram
-        participant A as Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        participant A as Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
         A->>Bob: Hola
         Bob-->A: Pasten !
       `,
@@ -190,7 +232,7 @@ context('Sequence diagram', () => {
         `
         sequenceDiagram
         Alice->>Bob: Hola
-        Note left of Alice: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        Note left of Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
         Bob->>Alice: I'm short though
       `,
         {}
@@ -201,7 +243,7 @@ context('Sequence diagram', () => {
         `
         sequenceDiagram
         Alice->>Bob: Hola
-        Note left of Alice:wrap: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        Note left of Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
         Bob->>Alice: I'm short though
       `,
         {}
@@ -212,7 +254,7 @@ context('Sequence diagram', () => {
         `
         sequenceDiagram
         Alice->>Bob: Hola
-        Note right of Alice: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        Note right of Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
         Bob->>Alice: I'm short though
       `,
         {}
@@ -223,7 +265,7 @@ context('Sequence diagram', () => {
         `
         sequenceDiagram
         Alice->>Bob: Hola
-        Note right of Alice:wrap: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        Note right of Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
         Bob->>Alice: I'm short though
       `,
         {}
@@ -234,7 +276,7 @@ context('Sequence diagram', () => {
         `
         sequenceDiagram
         Alice->>Bob: Hola
-        Note over Alice: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        Note over Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
         Bob->>Alice: I'm short though
       `,
         {}
@@ -245,7 +287,7 @@ context('Sequence diagram', () => {
         `
         sequenceDiagram
         Alice->>Bob: Hola
-        Note over Alice:wrap: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        Note over Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
         Bob->>Alice: I'm short though
       `,
         {}
@@ -255,7 +297,7 @@ context('Sequence diagram', () => {
       imgSnapshotTest(
         `
         sequenceDiagram
-        Alice->>Bob: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        Alice->>Bob: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
         Bob->>Alice: I'm short though
       `,
         {}
@@ -265,7 +307,7 @@ context('Sequence diagram', () => {
       imgSnapshotTest(
         `
         sequenceDiagram
-        Alice->>Bob:wrap:Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        Alice->>Bob:wrap:Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
         Bob->>Alice: I'm short though
       `,
         {}
@@ -276,7 +318,7 @@ context('Sequence diagram', () => {
         `
         sequenceDiagram
         Alice->>Bob: I'm short
-        Bob->>Alice: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        Bob->>Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
       `,
         {}
       );
@@ -286,7 +328,7 @@ context('Sequence diagram', () => {
         `
         sequenceDiagram
         Alice->>Bob: I'm short
-        Bob->>Alice:wrap: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        Bob->>Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
       `,
         {}
       );

cypress/integration/rendering/stateDiagram-v2.spec.js

@@ -509,4 +509,16 @@ stateDiagram-v2
       expect(svg).to.not.have.attr('style');
     });
   });
+
+  it('v2 should render a state diagram and set the correct length of the labels', () => {
+    imgSnapshotTest(
+      `
+      stateDiagram-v2
+      [*] --> 1
+      1 --> 2: test({ foo#colon; 'far' })
+      2 --> [*]
+    `,
+      { logLevel: 0, fontFamily: 'courier' }
+    );
+  });
 });

cypress/platform/current2.html

@@ -35,7 +35,7 @@ flowchart BT
       </div>
       <div class="mermaid2" style="width: 50%; height: 200px;">
 sequenceDiagram
-   Alice->>Bob:Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+   Alice->>Bob:Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
    Bob->>Alice: I'm short though
       </div>
       <div class="mermaid2" style="width: 50%; height: 200px;">

cypress/platform/exploit.js

@@ -3,4 +3,4 @@ div.id = 'the-malware';
 div.className = 'malware';
 div.innerHTML = 'XSS Succeeded';
 parent.document.getElementsByTagName('body')[0].appendChild(div);
-throw new Error('XSS Succeded');
+throw new Error('XSS Succeeded');

cypress/platform/ghsa1.html

@@ -0,0 +1,28 @@
+<html>
+<script>
+    //      %%{ init: { "logLevel":0, "themeVariables" : { "primaryColor": "#fff000","textColor": "green","apa":"} #target { background-color: crimson }" } } }%%
+</script>
+<body>
+    <div id="target">
+        <h1>This element does not belong to the SVG but we can style it</h1>
+    </div>
+    <svg id="diagram">
+    </svg>
+
+    <script src="./mermaid.js"></script>
+    <script>
+        mermaid.initialize({ startOnLoad: false, logLevel: 0 });
+
+        const graph = `
+     %%{ init: { "themeVariables" : { "textColor": "green;} #target { background-color: crimson }", "mainBkg": "#fff000" } } }%%
+            graph TD
+                A[Goose]
+            `;
+
+        const diagram = document.getElementById('diagram');
+        const svg = mermaid.render('diagram-svg', graph);
+        diagram.innerHTML = svg;
+    </script>
+</body>
+
+</html>

cypress/platform/ghsa2.html

@@ -0,0 +1,28 @@
+<html>
+<script>
+    //      %%{ init: { "logLevel":0, "themeVariables" : { "primaryColor": "#fff000","textColor": "green","apa":"} #target { background-color: crimson }" } } }%%
+</script>
+<body>
+    <div id="target">
+        <h1>This element does not belong to the SVG but we can style it</h1>
+    </div>
+    <svg id="diagram">
+    </svg>
+
+    <script src="./mermaid.js"></script>
+    <script>
+        mermaid.initialize({ startOnLoad: false, logLevel: 0 });
+
+        const graph = `
+     %%{ init: { "fontFamily" : "&125; * { background: red }" } }%%
+            graph TD
+                A[Goose]
+            `;
+
+        const diagram = document.getElementById('diagram');
+        const svg = mermaid.render('diagram-svg', graph);
+        diagram.innerHTML = svg;
+    </script>
+</body>
+
+</html>

cypress/platform/knsv.html

@@ -15,6 +15,8 @@
         /* font-size: 18px !important; */
         width: 100%;
         display: flex;
+        flex-direction: column;
+        margin-left: 20px;
         }
       h1 { color: grey;}
       .mermaid2,.mermaid3 {
@@ -31,41 +33,42 @@
 
 
 <div class="mermaid2" style="width: 50%;">
-      journey
-      title Adding journey diagram functionality to mermaid
-      accTitle: Adding acc journey diagram functionality to mermaid
-      accDescr {
-        My multi-line description
-        of the diagram
-      }
-      section Order from website
+flowchart LR
+  classDef aPID stroke:#4e4403,fill:#fdde29,color:#4e4403,rx:5px,ry:5px;
+  classDef crm stroke:#333333,fill:#DCDCDC,color:#333333,rx:5px,ry:5px;
+  classDef type stroke:#502604,fill:#FAB565,color:#502604,rx:20px,ry:20px;;
+
+  O0("Joe")
+  class O0 aPID;
+
+  O1("Person")
+  class O1 crm;
+  O0 -- has type -->O1["Person"]
+
+  O2("aat:300411314")
+  class O2 type;
+  click O2 function "Sorry the newline html tags are not being processed correctly<br/> So all of this appears on the <br/> same line."
+  O0 -- has type -->O2["Bug"]
+  click O0 function "Lots of great info about Joe<br>Lots of great info about Joe<br>burt<br>fred";
+</div>
+<div class="mermaid" style="width: 50%;">
+classDiagram-v2
+  class Shape
+  link Shape "https://www.github.com" "This is a<br/>tooltip<br>for a link"
+  class Shape2
+  click Shape2 href "https://www.github.com" "This is a tooltip for a link"
 </div>
 <div class="mermaid2" style="width: 50%;">
-   pie
-      accTitle: My Pie Chart Accessibility Title
-      accDescr: My Pie Chart Accessibility Description
-
-    title Key elements in Product X
-    "Calcium" : 42.96
-    "Potassium" : 50.05
-    "Magnesium" : 10.01
-    "Iron" :  5
-</div>
-<div class="mermaid2" style="width: 50%;">
-  gitGraph
-      accTitle: My Gitgraph Accessibility Title
-      accDescr: My Gitgraph Accessibility Description
-
-     commit
-     commit
-     branch develop
-     checkout develop
-     commit
-     commit
-     checkout main
-     merge develop
-     commit
-     commit
+ gitGraph
+       commit
+       commit
+       branch develop
+       commit
+       commit
+       commit
+       checkout main
+       commit
+       commit
 </div>
 <div class="mermaid2" style="width: 50%;">
    sequenceDiagram
@@ -99,6 +102,9 @@ graph TD
         Sit down: 5: Me
       </div>
       <div class="mermaid2" style="width: 100%;">
+        info
+      </div>
+      <div class="mermaid2" style="width: 100%;">
 requirementDiagram
       accTitle: My req Diagram
       accDescr: My req Diagram Description
@@ -138,8 +144,41 @@ requirementDiagram
     test_req - traces -> test_req2
     test_req - contains -> test_req3
     test_req <- copies - test_entity2
+
       </div>
-      <div class="mermaid" style="width: 100%;">
+      <div class="mermaid2" style="width: 100%;">
+gantt
+    dateFormat  YYYY-MM-DD
+    title       Adding GANTT diagram functionality to mermaid
+    excludes    weekends
+    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
+
+    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
+    Functionality added                 :milestone, 2014-01-25, 0d
+
+    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 Last section
+    Describe gantt syntax               :after doc1, 3d
+    Add gantt diagram to demo page      :20h
+    Add another diagram to demo page    :48h
+      </div>
+      <div class="mermaid2" style="width: 100%;">
 stateDiagram
   state Active {
     Idle
@@ -148,7 +187,7 @@ stateDiagram
   Active --> Active: LOG
       </div>
       <div class="mermaid2" style="width: 100%;">
-      graph TB
+      flowchart TB
         accTitle: My flowchart
         accDescr: My flowchart Description
         subgraph One
@@ -165,8 +204,7 @@ stateDiagram
               end
             end
           end
-          B ->> A: Return
-  </div>
+          B ->> A: Return</div>
       <div class="mermaid2" style="width: 100%;">
 classDiagram
 accTitle: My class diagram
@@ -186,13 +224,41 @@ class Class10 {
 }
       </div>
       <div class="mermaid2" style="width: 100%;">
-        stateDiagram
-        accTitle: Apa
-        accDescr: One that can climb better then any man
-      [*] --> S1
-      state "Some long name" as S1
+%%{init: {'config': {'wrap': true }}}%%
+        sequenceDiagram
+        participant A as Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
+        A->>Bob: Hola
+        Bob-->A: Pasten !
       </div>
       <div class="mermaid2" style="width: 100%;">
+      gitGraph
+       commit id: "ZERO"
+       branch develop
+       commit id:"A"
+       checkout main
+       commit id:"ONE"
+       checkout develop
+       commit id:"B"
+       branch featureA
+       commit id:"FIX"
+       commit id: "FIX-2"
+       checkout main
+       commit id:"TWO"
+       cherry-pick id:"A"
+       commit id:"THREE"
+       cherry-pick id:"FIX"
+       checkout develop
+       commit id:"C"
+       merge featureA
+       </div>
+       <div class="mermaid2" style="width: 100%;">
+flowchart TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      B --> C{Let me think}
+      C -->|One| D[Laptop]
+      C -->|Two| E[iPhone]
+      C -->|Three| F[fa:fa-car Car]
+      </div>     <div class="mermaid2" style="width: 100%;">
         classDiagram
           Animal "1" <|-- Duck
           Animal <|-- Fish
@@ -215,6 +281,21 @@ class Class10 {
             +run()
           }
     </div>
+          <div class="mermaid2" style="width: 100%;">
+        erDiagram
+    CAR ||--o{ NAMED-DRIVER : allows
+    CAR {
+        string registrationNumber
+        string make
+        string model
+    }
+    PERSON ||--o{ NAMED-DRIVER : is
+    PERSON {
+        string firstName
+        string lastName
+        int age
+    }
+        </div>
 
   <script src="./mermaid.js"></script>
     <script>
@@ -222,41 +303,15 @@ class Class10 {
         // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
-        // theme: 'dark',
-        // theme: 'forest',
-        // arrowMarkerAbsolute: true,
-        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
-        flowchart: {
-    nodeSpacing: 10,
-    curve: 'cardinal',
-    htmlLabels: true,
-    useMaxWidth: false,
-    // defaultRenderer: 'dagre-d3',
-  },
-  class: {
-    // defaultRenderer: 'dagre-d3',
-    htmlLabels: true,
-  },
-        // gantt: { axisFormat: '%m/%d/%Y' },
-  //       sequence: {
-  //   actorFontFamily: 'courier',
-  //   actorMargin: 50,
-  //   showSequenceNumbers: false,
-  //   // hideUnusedParticipants: true,
-  //   // forceMenus: true,
-  // },
-  //       // sequenceDiagram: { actorMargin: 300, forceMenus: false }, // deprecated
-        // fontFamily: '"times", sans-serif',
-        // fontFamily: 'courier',
-        state: {
-          nodeSpacing: 50,
-          rankSpacing: 50,
-        },
+        maxTextSize: 900000,
+        startOnLoad: true,
+        securityLevel: 'loose',
         logLevel: 0,
-        fontSize: 18,
-        curve: 'cardinal',
-        // securityLevel: 'sandbox',
-        // themeVariables: {relationLabelColor: 'red'}
+        flowchart: {
+          curve: 'basis',
+          useMaxWidth: false,
+          htmlLabels: true,
+        },
       });
       function callback() {
   alert('It worked');

cypress/platform/knsv2.html

@@ -41,7 +41,10 @@
   <body>
     <div>Security check</div>
     <div class="flex">
-      <div id="diagram" class="mermaid"></div>
+      <div id="diagram" class="mermaid">
+sequenceDiagram
+  Nothing:Valid;
+      </div>
       <div id="res" class=""></div>
   <script src="./mermaid.js"></script>
     <script>
@@ -49,28 +52,6 @@
         // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
-        theme: 'forest',
-        arrowMarkerAbsolute: true,
-        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
-        logLevel: 0,
-        state: {
-          defaultRenderer: 'dagre-wrapper',
-        },
-        flowchart: {
-          // defaultRenderer: 'dagre-wrapper',
-          nodeSpacing: 10,
-    curve: 'cardinal',
-    htmlLabels: true,
-        },
-        htmlLabels: false,
-        // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
-        // sequenceDiagram: { actorMargin: 300 } // deprecated
-        // fontFamily: '"times", sans-serif',
-        // fontFamily: 'courier',
-        fontSize: 18,
-        curve: 'basis',
-        securityLevel: 'strict',
         startOnLoad: false,
         // themeVariables: {relationLabelColor: 'red'}
       });
@@ -78,19 +59,12 @@
   alert('It worked');
 }
 
-      var diagram = '%%{init: {"flowchart": {"htmlLabels": "false"}} }%%\n';
-diagram += 'flowchart\n';
-diagram += 'A["<ifra';
-diagram += "me srcdoc='<scrip";
-diagram += 't src=http://localhost:9000/exploit.js>';
-diagram += '</scr';
-diagram += 'ipt>\'></iframe>"]';
-
-console.log(diagram);
 // document.querySelector('#diagram').innerHTML = diagram;
-mermaid.render('diagram', diagram, (res) => {
-  document.querySelector('#res').innerHTML = res;
-});
+try {
+  mermaid.initThrowsErrors(undefined, '#diagram');
+} catch (err) {
+  console.log('Caught error:', err);
+}
     </script>
   </body>
 </html>

cypress/platform/xss.html

@@ -31,7 +31,7 @@
         document.getElementsByTagName('body')[0].appendChild(div);
         // const el = document.querySelector('.mermaid');
         // el.parentNode.removeChild(el);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
     </script>
   </head>

cypress/platform/xss10.html

@@ -84,7 +84,7 @@
         div.className = 'malware';
         div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
 
       var diagram = 'classDiagram\n';
@@ -105,4 +105,3 @@ mermaid.render('diagram', diagram, (res) => {
     </script>
   </body>
 </html>
-

cypress/platform/xss11.html

@@ -84,7 +84,7 @@
         div.className = 'malware';
         div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
 
 var diagram = 'stateDiagram-v2\n';
@@ -103,4 +103,3 @@ mermaid.render('diagram', diagram, (res) => {
     </script>
   </body>
 </html>
-

cypress/platform/xss12.html

@@ -84,7 +84,7 @@
         div.className = 'malware';
         div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
 
 var diagram = 'stateDiagram-v2\n';
@@ -103,4 +103,3 @@ mermaid.render('diagram', diagram, (res) => {
     </script>
   </body>
 </html>
-

cypress/platform/xss13.html

@@ -84,7 +84,7 @@
         div.className = 'malware';
         div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
 
 var diagram = 'stateDiagram-v2\n';
@@ -103,4 +103,3 @@ mermaid.render('diagram', diagram, (res) => {
     </script>
   </body>
 </html>
-

cypress/platform/xss14.html

@@ -84,7 +84,7 @@
         div.className = 'malware';
         div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
 
       var diagram = 'classDiagram\n';
@@ -105,4 +105,3 @@ mermaid.render('diagram', diagram, (res) => {
     </script>
   </body>
 </html>
-

cypress/platform/xss15.html

@@ -84,7 +84,7 @@
         div.className = 'malware';
         div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
 
       var diagram = `sequenceDiagram
@@ -104,4 +104,3 @@ mermaid.render('diagram', diagram, (res) => {
     </script>
   </body>
 </html>
-

cypress/platform/xss16.html

@@ -84,7 +84,7 @@
         div.className = 'malware';
         div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
 
       var diagram = `sequenceDiagram
@@ -103,4 +103,3 @@ mermaid.render('diagram', diagram, (res) => {
     </script>
   </body>
 </html>
-

cypress/platform/xss17.html

@@ -84,7 +84,7 @@
         div.className = 'malware';
         div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
 
       var diagram = `sequenceDiagram
@@ -103,4 +103,3 @@ mermaid.render('diagram', diagram, (res) => {
     </script>
   </body>
 </html>
-

cypress/platform/xss18.html

@@ -84,7 +84,7 @@
         div.className = 'malware';
         div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
 
       var diagram = `classDiagram
@@ -102,4 +102,3 @@ mermaid.render('diagram', diagram, (res) => {
     </script>
   </body>
 </html>
-

cypress/platform/xss19.html

@@ -84,7 +84,7 @@
         div.className = 'malware';
         div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
 
       var diagram = `classDiagram
@@ -104,4 +104,3 @@ mermaid.render('diagram', diagram, (res) => {
     </script>
   </body>
 </html>
-

cypress/platform/xss2.html

@@ -28,7 +28,7 @@
         div.className = 'malware';
         div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
     </script>
   </head>

cypress/platform/xss20.html

@@ -84,7 +84,7 @@
         div.className = 'malware';
         div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
 
 //       var diagram = `  graph TD
@@ -102,4 +102,3 @@ mermaid.render('diagram', diagram, (res) => {
     </script>
   </body>
 </html>
-

cypress/platform/xss21.html

@@ -84,7 +84,7 @@
         div.className = 'malware';
         div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
 
 //       var diagram = `  graph TD
@@ -102,4 +102,3 @@ mermaid.render('diagram', diagram, (res) => {
     </script>
   </body>
 </html>
-

cypress/platform/xss3.html

@@ -28,7 +28,7 @@
         div.className = 'malware';
         div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
     </script>
   </head>

cypress/platform/xss5.html

@@ -84,7 +84,7 @@
         div.className = 'malware';
         div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
       var diagram = 'graph LR\n';
 diagram += 'B-->D("<img onerror=location=`java';
@@ -100,4 +100,3 @@ mermaid.render('diagram', diagram, (res) => {
     </script>
   </body>
 </html>
-

cypress/platform/xss6.html

@@ -84,7 +84,7 @@
         div.className = 'malware';
         div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
       var diagram = 'graph LR\n';
 diagram += 'A(<img/src/onerror=xssAttack`1`>)';
@@ -98,4 +98,3 @@ mermaid.render('diagram', diagram, (res) => {
     </script>
   </body>
 </html>
-

cypress/platform/xss7.html

@@ -84,7 +84,7 @@
         div.className = 'malware';
         div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
       var diagram = 'graph LR\n';
 diagram += " B(<a href='<";
@@ -100,4 +100,3 @@ mermaid.render('diagram', diagram, (res) => {
     </script>
   </body>
 </html>
-

cypress/platform/xss8.html

@@ -84,7 +84,7 @@
         div.className = 'malware';
         div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
 
 var diagram = 'stateDiagram-v2\n';
@@ -99,4 +99,3 @@ mermaid.render('diagram', diagram, (res) => {
     </script>
   </body>
 </html>
-

cypress/platform/xss9.html

@@ -84,7 +84,7 @@
         div.className = 'malware';
         div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
 
 var diagram = 'stateDiagram-v2\n';
@@ -99,4 +99,3 @@ mermaid.render('diagram', diagram, (res) => {
     </script>
   </body>
 </html>
-

cypress/plugins/index.js

@@ -0,0 +1,32 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+// module.exports = (on, config) => {
+//   // `on` is used to hook into various events Cypress emits
+//   // `config` is the resolved Cypress config
+// }
+
+const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
+require('@applitools/eyes-cypress')(module);
+
+module.exports = (on, config) => {
+  addMatchImageSnapshotPlugin(on, config);
+  // copy any needed variables from process.env to config.env
+  config.env.useAppli = process.env.USE_APPLI ? true : false;
+  config.env.codeBranch = process.env.APPLI_BRANCH;
+
+  // do not forget to return the changed config object!
+  return config;
+};
+
+require('@applitools/eyes-cypress')(module);

demos/index.html

@@ -20,6 +20,7 @@
   </div>
 
   <hr />
+
   <div class="mermaid">
     C4Context
       title System Context diagram for Internet Banking System
@@ -55,17 +56,25 @@ Enterprise_Boundary(b0, "BankBoundary0") {
       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")
   </div>
 
   <div class="mermaid">
     C4Container
     title Container diagram for Internet Banking System
 
-    System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system")
-    Person(customer, Customer, "A customer of the bank, with personal bank accounts")
+    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 cutomers via their web browser")
+        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.")
@@ -76,17 +85,26 @@ Enterprise_Boundary(b0, "BankBoundary0") {
     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") 
+
+
   </div>
 
   <div class="mermaid">
@@ -99,7 +117,7 @@ Enterprise_Boundary(b0, "BankBoundary0") {
     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 Controlle", "Allows users to sign in to the internet banking system")
+        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.")
@@ -115,6 +133,18 @@ Enterprise_Boundary(b0, "BankBoundary0") {
 
     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")
+
   </div>  
 
   <div class="mermaid">
@@ -130,6 +160,10 @@ Enterprise_Boundary(b0, "BankBoundary0") {
     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")
   </div>  
 
    <div class="mermaid">
@@ -175,6 +209,12 @@ Enterprise_Boundary(b0, "BankBoundary0") {
     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")
   </div>  
 
   <hr />

docs/README.md

@@ -27,10 +27,11 @@ But not having diagrams or docs ruins productivity and hurts organizational lear
 Mermaid addresses this problem by enabling users to create easily modifiable diagrams, it can also be made part of production scripts (and other pieces of code).<br/>
  <br/>
 Mermaid allows even non-programmers to easily create detailed and diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
-[Tutorials](./docs/Tutorials.md) has video tutorials.
-Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/integrations.md).
+[Tutorials](./Tutorials.md) has video tutorials.
+Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./integrations.md).
 
-For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/n00b-overview.md) and [Usage](./docs/usage.md).
+
+For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./n00b-overview.md) and [Usage](./usage.md).
 
 🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/docs/development.md) | 📜 [Version Log](./CHANGELOG.md) | 🔌 [Plug-Ins](./integrations.md)
 

docs/Setup.md

@@ -924,12 +924,20 @@ The object containing configurations specific for c4 diagrams
 
 ### c4ShapeMargin
 
-| Parameter   | Description           | Type    | Required | Values             |
-| ----------- | --------------------- | ------- | -------- | ------------------ |
-| shapeMargin | Margin between shapes | Integer | Required | Any Positive Value |
+| Parameter     | Description           | Type    | Required | Values             |
+| ------------- | --------------------- | ------- | -------- | ------------------ |
+| c4ShapeMargin | Margin between shapes | Integer | Required | Any Positive Value |
 
 **Notes:** Default value: 50
 
+### c4ShapePadding
+
+| Parameter      | Description            | Type    | Required | Values             |
+| -------------- | ---------------------- | ------- | -------- | ------------------ |
+| c4ShapePadding | Padding between shapes | Integer | Required | Any Positive Value |
+
+**Notes:** Default value: 20
+
 ### width
 
 | Parameter | Description           | Type    | Required | Values             |
@@ -948,9 +956,9 @@ The object containing configurations specific for c4 diagrams
 
 ### boxMargin
 
-| Parameter | Description              | Type    | Required | Values             |
-| --------- | ------------------------ | ------- | -------- | ------------------ |
-| boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |
+| Parameter | Description         | Type    | Required | Values             |
+| --------- | ------------------- | ------- | -------- | ------------------ |
+| boxMargin | Margin around boxes | Integer | Required | Any Positive Value |
 
 **Notes:** Default value: 10
 
@@ -965,6 +973,422 @@ scaling with the available space. If set to false, the absolute space required i
 
 Default value: true
 
+### c4ShapeInRow
+
+| Parameter    | Description | Type    | Required | Values             |
+| ------------ | ----------- | ------- | -------- | ------------------ |
+| c4ShapeInRow | See Notes   | Integer | Required | Any Positive Value |
+
+**Notes:** How many shapes to place in each row.
+
+Default value: 4
+
+### c4BoundaryInRow
+
+| Parameter       | Description | Type    | Required | Values             |
+| --------------- | ----------- | ------- | -------- | ------------------ |
+| c4BoundaryInRow | See Notes   | Integer | Required | Any Positive Value |
+
+**Notes:** How many boundarys to place in each row.
+
+Default value: 2
+
+### personFontSize
+
+This sets the font size of Person shape for the diagram
+
+**Notes:** Default value: 14.
+
+### personFontFamily
+
+This sets the font family of Person shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### personFontWeight
+
+This sets the font weight of Person shape for the diagram
+
+**Notes:** Default value: normal.
+
+### external_personFontSize
+
+This sets the font size of External Person shape for the diagram
+
+**Notes:** Default value: 14.
+
+### external_personFontFamily
+
+This sets the font family of External Person shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### external_personFontWeight
+
+This sets the font weight of External Person shape for the diagram
+
+**Notes:** Default value: normal.
+
+### systemFontSize
+
+This sets the font size of System shape for the diagram
+
+**Notes:** Default value: 14.
+
+### systemFontFamily
+
+This sets the font family of System shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### systemFontWeight
+
+This sets the font weight of System shape for the diagram
+
+**Notes:** Default value: normal.
+
+### external_systemFontSize
+
+This sets the font size of External System shape for the diagram
+
+**Notes:** Default value: 14.
+
+### external_systemFontFamily
+
+This sets the font family of External System shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### external_systemFontWeight
+
+This sets the font weight of External System shape for the diagram
+
+**Notes:** Default value: normal.
+
+### system_dbFontSize
+
+This sets the font size of System DB shape for the diagram
+
+**Notes:** Default value: 14.
+
+### system_dbFontFamily
+
+This sets the font family of System DB shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### system_dbFontWeight
+
+This sets the font weight of System DB shape for the diagram
+
+**Notes:** Default value: normal.
+
+### external_system_dbFontSize
+
+This sets the font size of External System DB shape for the diagram
+
+**Notes:** Default value: 14.
+
+### external_system_dbFontFamily
+
+This sets the font family of External System DB shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### external_system_dbFontWeight
+
+This sets the font weight of External System DB shape for the diagram
+
+**Notes:** Default value: normal.
+
+### system_queueFontSize
+
+This sets the font size of System Queue shape for the diagram
+
+**Notes:** Default value: 14.
+
+### system_queueFontFamily
+
+This sets the font family of System Queue shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### system_queueFontWeight
+
+This sets the font weight of System Queue shape for the diagram
+
+**Notes:** Default value: normal.
+
+### external_system_queueFontSize
+
+This sets the font size of External System Queue shape for the diagram
+
+**Notes:** Default value: 14.
+
+### external_system_queueFontFamily
+
+This sets the font family of External System Queue shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### external_system_queueFontWeight
+
+This sets the font weight of External System Queue shape for the diagram
+
+**Notes:** Default value: normal.
+
+### boundaryFontSize
+
+This sets the font size of Boundary shape for the diagram
+
+**Notes:** Default value: 14.
+
+### boundaryFontFamily
+
+This sets the font family of Boundary shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### boundaryFontWeight
+
+This sets the font weight of Boundary shape for the diagram
+
+**Notes:** Default value: normal.
+
+### messageFontSize
+
+This sets the font size of Message shape for the diagram
+
+**Notes:** Default value: 12.
+
+### messageFontFamily
+
+This sets the font family of Message shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### messageFontWeight
+
+This sets the font weight of Message shape for the diagram
+
+**Notes:** Default value: normal.
+
+### containerFontSize
+
+This sets the font size of Container shape for the diagram
+
+**Notes:** Default value: 14.
+
+### containerFontFamily
+
+This sets the font family of Container shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### containerFontWeight
+
+This sets the font weight of Container shape for the diagram
+
+**Notes:** Default value: normal.
+
+### external_containerFontSize
+
+This sets the font size of External Container shape for the diagram
+
+**Notes:** Default value: 14.
+
+### external_containerFontFamily
+
+This sets the font family of External Container shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### external_containerFontWeight
+
+This sets the font weight of External Container shape for the diagram
+
+**Notes:** Default value: normal.
+
+### container_dbFontSize
+
+This sets the font size of Container DB shape for the diagram
+
+**Notes:** Default value: 14.
+
+### container_dbFontFamily
+
+This sets the font family of Container DB shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### container_dbFontWeight
+
+This sets the font weight of Container DB shape for the diagram
+
+**Notes:** Default value: normal.
+
+### external_container_dbFontSize
+
+This sets the font size of External Container DB shape for the diagram
+
+**Notes:** Default value: 14.
+
+### external_container_dbFontFamily
+
+This sets the font family of External Container DB shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### external_container_dbFontWeight
+
+This sets the font weight of External Container DB shape for the diagram
+
+**Notes:** Default value: normal.
+
+### container_queueFontSize
+
+This sets the font size of Container Queue shape for the diagram
+
+**Notes:** Default value: 14.
+
+### container_queueFontFamily
+
+This sets the font family of Container Queue shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### container_queueFontWeight
+
+This sets the font weight of Container Queue shape for the diagram
+
+**Notes:** Default value: normal.
+
+### external_container_queueFontSize
+
+This sets the font size of External Container Queue shape for the diagram
+
+**Notes:** Default value: 14.
+
+### external_container_queueFontFamily
+
+This sets the font family of External Container Queue shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### external_container_queueFontWeight
+
+This sets the font weight of External Container Queue shape for the diagram
+
+**Notes:** Default value: normal.
+
+### componentFontSize
+
+This sets the font size of Component shape for the diagram
+
+**Notes:** Default value: 14.
+
+### componentFontFamily
+
+This sets the font family of Component shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### componentFontWeight
+
+This sets the font weight of Component shape for the diagram
+
+**Notes:** Default value: normal.
+
+### external_componentFontSize
+
+This sets the font size of External Component shape for the diagram
+
+**Notes:** Default value: 14.
+
+### external_componentFontFamily
+
+This sets the font family of External Component shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### external_componentFontWeight
+
+This sets the font weight of External Component shape for the diagram
+
+**Notes:** Default value: normal.
+
+### component_dbFontSize
+
+This sets the font size of Component DB shape for the diagram
+
+**Notes:** Default value: 14.
+
+### component_dbFontFamily
+
+This sets the font family of Component DB shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### component_dbFontWeight
+
+This sets the font weight of Component DB shape for the diagram
+
+**Notes:** Default value: normal.
+
+### external_component_dbFontSize
+
+This sets the font size of External Component DB shape for the diagram
+
+**Notes:** Default value: 14.
+
+### external_component_dbFontFamily
+
+This sets the font family of External Component DB shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### external_component_dbFontWeight
+
+This sets the font weight of External Component DB shape for the diagram
+
+**Notes:** Default value: normal.
+
+### component_queueFontSize
+
+This sets the font size of Component Queue shape for the diagram
+
+**Notes:** Default value: 14.
+
+### component_queueFontFamily
+
+This sets the font family of Component Queue shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### component_queueFontWeight
+
+This sets the font weight of Component Queue shape for the diagram
+
+**Notes:** Default value: normal.
+
+### external_component_queueFontSize
+
+This sets the font size of External Component Queue shape for the diagram
+
+**Notes:** Default value: 14.
+
+### external_component_queueFontFamily
+
+This sets the font family of External Component Queue shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### external_component_queueFontWeight
+
+This sets the font weight of External Component Queue shape for the diagram
+
+**Notes:** Default value: normal.
+
 ### wrap
 
 This sets the auto-wrap state for the diagram
@@ -977,6 +1401,15 @@ This sets the auto-wrap padding for the diagram (sides only)
 
 **Notes:** Default value: 0.
 
+## parse
+
+### Parameters
+
+-   `text`  
+-   `dia`  
+
+Returns **any** 
+
 ## setSiteConfig
 
 ## setSiteConfig
@@ -996,14 +1429,6 @@ function _Default value: At default, will mirror Global Config_
 
 Returns **[object][5]** The siteConfig
 
-## parse
-
-### Parameters
-
--   `text`  
-
-Returns **any** 
-
 ## getSiteConfig
 
 ## getSiteConfig
@@ -1061,30 +1486,6 @@ options in-place
 
 -   `options` **any** The potential setConfig parameter
 
-## addDirective
-
-Pushes in a directive to the configuration
-
-### Parameters
-
--   `directive` **[object][5]** The directive to push in
-
-## reset
-
-## reset
-
-| Function | Description                  | Type        | Required | Values |
-| -------- | ---------------------------- | ----------- | -------- | ------ |
-| reset    | Resets currentConfig to conf | Put Request | Required | None   |
-
-## conf
-
-| Parameter | Description                                                    | Type       | Required | Values                                       |
-| --------- | -------------------------------------------------------------- | ---------- | -------- | -------------------------------------------- |
-| conf      | base set of values, which currentConfig could be **reset** to. | Dictionary | Required | Any Values, with respect to the secure Array |
-
-**Notes**: (default: current siteConfig ) (optional, default `getSiteConfig()`)
-
 ## render
 
 Function that renders an svg with a graph from a chart definition. Usage example below.
@@ -1113,16 +1514,36 @@ $(function () {
 
 Returns **any** 
 
+## addDirective
+
+Pushes in a directive to the configuration
+
+### Parameters
+
+-   `directive` **[object][5]** The directive to push in
+
+## reset
+
+## reset
+
+| Function | Description                  | Type        | Required | Values |
+| -------- | ---------------------------- | ----------- | -------- | ------ |
+| reset    | Resets currentConfig to conf | Put Request | Required | None   |
+
+## conf
+
+| Parameter | Description                                                    | Type       | Required | Values                                       |
+| --------- | -------------------------------------------------------------- | ---------- | -------- | -------------------------------------------- |
+| conf      | base set of values, which currentConfig could be **reset** to. | Dictionary | Required | Any Values, with respect to the secure Array |
+
+**Notes**: (default: current siteConfig ) (optional, default `getSiteConfig()`)
+
 ## updateRendererConfigs
 
 ### Parameters
 
 -   `conf` **any** 
 
-## reinitialize
-
-To be removed
-
 ## initialize
 
 ### Parameters

docs/_sidebar.md

@@ -25,6 +25,7 @@
   - [Mermaid API Configuration](Setup.md)
   - [Directives](directives.md)
   - [Theming](theming.md)
+  - [Accessibility](accessibility.md)
   - [Mermaid CLI](mermaidCLI.md)
   - [Advanced usage](n00b-advanced.md)
 

docs/accessibility.md

@@ -0,0 +1,214 @@
+# Accessibility Options
+
+**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/accessibility.md)
+
+## Accessibility
+Now with Mermaid library is in much wider use, we have started to work towwards more accessible features, based on the feedback from the community.
+
+TO begin with, we have added a new feature to Mermaid library, which is to support accessibility options, **Accessibility Title** and **Accessibility Description**.
+
+This support for accessibility options is available for all the diagrams/chart types. Also, we have tired to keep the same format for the accessibility options, so that it is easy to understand and maintain.
+
+
+## Defining Accessibility Options
+
+### Single line accessibility values
+The diagram authors can now add the accessibility options in the diagram definition, using the `accTitle` and `accDescr` keywords, where each keyword is followed by `:` and the string value for title and description like:
+-  `accTitle: "Your Accessibility Title"` or
+-  `accDescr: "Your Accessibility Description"`
+
+**When these two options are defined, they will  add a coressponding  `<title>` and `<desc>` tag in the SVG.**
+
+Let us take a look at the following example with a flowchart diagram:
+
+```mermaid-example
+   graph LR
+      accTitle: Big decisions
+      accDescr: Flow chart of the decision making process
+      A[Hard] -->|Text| B(Round)
+      B --> C{Decision}
+      C -->|One| D[Result 1]
+
+```
+See in the code snippet above, the `accTitle` and `accDescr` are defined in the diagram definition. They result in the following tags in SVG code:
+
+![Accessibility options rendered inside SVG](img/accessibility-div-example.png)
+
+
+### Multi-line Accessibility title/description
+You can also define the accessibility options in a multi-line format, where the keyword is followed by opening curly bracket `{` and then mutltile lines, followed by a closing `}`.
+
+`accTitle: My single line title value` (***single line format***)
+
+vs
+
+`accDescr: {
+  My multi-line description
+  of the diagram
+}` (***multi-line format***)
+
+Let us look at it in the following example, with same flowchart:
+```mermaid-example
+   graph LR
+      accTitle: Big decisions
+
+      accDescr {
+        My multi-line description
+        of the diagram
+      }
+
+      A[Hard] -->|Text| B(Round)
+      B --> C{Decision}
+      C -->|One| D[Result 1]
+
+```
+See in the code snippet above, the `accTitle` and `accDescr` are defined in the diagram definition. They result in the following tags in SVG code:
+
+![Accessibility options rendered inside SVG](img/accessibility-div-example-2.png)
+
+### Sample Code Snippet for other diagram types
+
+#### Sequence Diagram
+
+```mermaid-example
+   sequenceDiagram
+      accTitle: My Sequence Diagram
+      accDescr: My Sequence Diagram Description
+
+      Alice->>John: Hello John, how are you?
+      John-->>Alice: Great!
+      Alice-)John: See you later!
+```
+
+#### Class Diagram
+
+```mermaid-example
+   classDiagram
+      accTitle: My Class Diagram
+      accDescr: My Class Diagram Description
+
+      Vehicle <|-- Car
+```
+
+#### State Diagram
+
+```mermaid-example
+   stateDiagram
+      accTitle: My State Diagram
+      accDescr: My State Diagram Description
+
+       s1 --> s2
+
+```
+
+#### Entity Relationship Diagram
+
+```mermaid-example
+   erDiagram
+      accTitle: My Entity Relationship Diagram
+      accDescr: My Entity Relationship Diagram Description
+
+    CUSTOMER ||--o{ ORDER : places
+    ORDER ||--|{ LINE-ITEM : contains
+    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+
+```
+
+#### User Journey Diagram
+
+  ```mermaid-example
+    journey
+        accTitle: My User Journey Diagram
+        accDescr: My User Journey Diagram Description
+
+        title My working day
+        section Go to work
+          Make tea: 5: Me
+          Go upstairs: 3: Me
+          Do work: 1: Me, Cat
+        section Go home
+          Go downstairs: 5: Me
+          Sit down: 5: Me
+
+  ```
+
+#### Gantt Chart
+
+```mermaid-example
+   gantt
+      accTitle: My Gantt Chart Accessibility Title
+      accDescr: My Gantt Chart Accessibility Description
+
+    title A Gantt Diagram
+    dateFormat  YYYY-MM-DD
+    section Section
+    A task           :a1, 2014-01-01, 30d
+    Another task     :after a1  , 20d
+    section Another
+    Task in sec      :2014-01-12  , 12d
+    another task      : 24d
+
+```
+
+#### Pie Chart
+
+```mermaid-example
+   pie
+      accTitle: My Pie Chart Accessibility Title
+      accDescr: My Pie Chart Accessibility Description
+
+    title Key elements in Product X
+    "Calcium" : 42.96
+    "Potassium" : 50.05
+    "Magnesium" : 10.01
+    "Iron" :  5
+
+```
+#### Requirement Diagram
+
+  ```mermaid-example
+    requirementDiagram
+        accTitle: My Requirement Diagram
+        accDescr: My Requirement Diagram Description
+
+         requirement test_req {
+    id: 1
+    text: the test text.
+    risk: high
+    verifymethod: test
+    }
+
+    element test_entity {
+    type: simulation
+    }
+
+    test_entity - satisfies -> test_req
+
+  ```
+
+#### Gitgraph
+
+  ```mermaid-example
+    gitGraph
+        accTitle: My Gitgraph Accessibility Title
+        accDescr: My Gitgraph Accessibility Description
+
+       commit
+       commit
+       branch develop
+       checkout develop
+       commit
+       commit
+       checkout main
+       merge develop
+       commit
+       commit
+
+  ```
+
+
+
+
+
+
+

docs/c4c.md

@@ -1,46 +1,367 @@
-# C4C Diagrams
+# C4 Diagrams
 
 **Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/gitgraph.md)
 > 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.
 
 
 
-Mermaid's c4 diagram sytax is compatible with plantUML. See example below:
+Mermaid's c4 diagram syntax is compatible with plantUML. See example below:
 
 ```mermaid-example
     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(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
-      Person(customerB, "Banking Customer B")
-      Person_Ext(customerC, "Banking Customer C")
-      System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
+        Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
 
-      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") {
+        Enterprise_Boundary(b1, "BankBoundary") {
+         
+          SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")      
 
-        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_Boundary(b2, "BankBoundary2") {
-          System(SystemA, "Banking System A")
-          System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
-        }
+          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.") 
 
-        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, with personal bank accounts.")
-          SystemQueue_Ext(SystemG, "Banking System G Queue", "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")
+
 
 ```
 
+For an example, see the source code demos/index.html
+
+5 types of C4 charts are supported.
+
+ - System Context (C4Context)
+ - Container diagram (C4Container)
+ - Component diagram (C4Component)
+ - Dynamic diagram (C4Dynamic)
+ - Deployment diagram (C4Deployment)
+
+Please 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.
+
+C4 diagram is fixed style, such as css color, so different css is not provided under different skins.
+updateElementStyle 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.
+
+The 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.
+The number of shapes per row and the number of boundaries can be adjusted using UpdateLayoutConfig.
+
+- Layout
+- - Lay_U, Lay_Up
+- - Lay_D, Lay_Down
+- - Lay_L, Lay_Left
+- - Lay_R, Lay_Right
+
+The following unfinished features are not supported in the short term.
+
+- [ ] sprite
+- [ ] tags
+- [ ] link
+- [ ] Legend
+
+- [X] System Context
+- - [X] Person(alias, label, ?descr, ?sprite, ?tags, $link)
+- - [X] Person_Ext
+- - [X] System(alias, label, ?descr, ?sprite, ?tags, $link)
+- - [X] SystemDb
+- - [X] SystemQueue
+- - [X] System_Ext
+- - [X] SystemDb_Ext
+- - [X] SystemQueue_Ext
+- - [X] Boundary(alias, label, ?type, ?tags, $link)
+- - [X] Enterprise_Boundary(alias, label, ?tags, $link)
+- - [X] System_Boundary
+
+- [X] Container diagram
+- - [X] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
+- - [X] ContainerDb
+- - [X] ContainerQueue
+- - [X] Container_Ext
+- - [X] ContainerDb_Ext
+- - [X] ContainerQueue_Ext
+- - [X] Container_Boundary(alias, label, ?tags, $link)
+
+- [X] Component diagram
+- - [X] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
+- - [X] ComponentDb
+- - [X] ComponentQueue
+- - [X] Component_Ext
+- - [X] ComponentDb_Ext
+- - [X] ComponentQueue_Ext
+
+- [X] Dynamic diagram
+- - [X] RelIndex(index, from, to, label, ?tags, $link)
+
+- [X] Deployment diagram
+- - [X] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
+- - [X] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
+- - [X] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
+- - [X] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
+
+- [X] Relationship Types
+- - [X] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
+- - [X] BiRel (bidirectional relationship)
+- - [X] Rel_U, Rel_Up
+- - [X] Rel_D, Rel_Down
+- - [X] Rel_L, Rel_Left
+- - [X] Rel_R, Rel_Right
+- - [X] Rel_Back
+- - [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.
+
+
+
+- [ ] Custom tags/stereotypes support and skinparam updates
+- - [ ] 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.
+- - [ ] 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.
+- - [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.
+- - [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.
+- - [ ] RoundedBoxShape(): This call returns the name of the rounded box shape and can be used as ?shape argument.
+- - [ ] EightSidedShape(): This call returns the name of the eight sided shape and can be used as ?shape argument.
+- - [ ] DashedLine(): This call returns the name of the dashed line and can be used as ?lineStyle argument.
+- - [ ] DottedLine(): This call returns the name of the dotted line and can be used as ?lineStyle argument.
+- - [ ] BoldLine(): This call returns the name of the bold line and can be used as ?lineStyle argument.
+- - [X] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): New. This call updates the default c4ShapeInRow(4) and c4BoundaryInRow(2). 
+
+
+There 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. 
+
+Example: UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY)
+```
+UpdateRelStyle(customerA, bankA, "red", "blue", "-40", "60")
+UpdateRelStyle(customerA, bankA, $offsetX="-40", $offsetY="60", $lineColor="blue", $textColor="red")
+UpdateRelStyle(customerA, bankA, $offsetY="60")
+
+```
+
+## C4 System Context Diagram (C4Context)
+
+```mermaid-example
+    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, <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")
+
+```
+
+## C4 Container diagram (C4Container)
+
+```mermaid-example
+    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 cutomers 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") 
+
+```
+
+## C4 Component diagram (C4Component)
+```mermaid-example
+    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")
+
+```
+
+## C4 Dynamic diagram (C4Dynamic)
+
+```mermaid-example
+    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")
+
+```
+
+## C4 Deployment diagram (C4Deployment)
+
+```mermaid-example
+    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")
+
+```

docs/classDiagram.md

@@ -48,7 +48,7 @@ classDiagram
     BankAccount : +String owner
     BankAccount : +Bigdecimal balance
     BankAccount : +deposit(amount)
-    BankAccount : +withdrawl(amount)
+    BankAccount : +withdrawal(amount)
 
 ```
 
@@ -94,7 +94,7 @@ class BankAccount{
     +String owner
     +BigDecimal balance
     +deposit(amount)
-    +withdrawl(amount)
+    +withdrawal(amount)
 }
 ```
 
@@ -109,7 +109,7 @@ class BankAccount{
     +String owner
     +BigDecimal balance
     +deposit(amount) bool
-    +withdrawl(amount) int
+    +withdrawal(amount) int
 }
 ```
 

docs/entityRelationshipDiagram.md

@@ -18,7 +18,7 @@ Entity names are often capitalised, although there is no accepted standard on th
 
 Relationships between entities are represented by lines with end markers representing cardinality.  Mermaid uses the most popular crow's foot notation. The crow's foot intuitively conveys the possibility of many instances of the entity that it connects to.
 
-ER diagrams can be used for various purposes, ranging from abstract logical models devoid of any implementation details, through to physical models of relational database tables.  It can be useful to include attribute definitions on ER diagrams to aid comprehension of the purpose and meaning of entities.  These do not necessarily need to be exhaustive; often a small subset of attributes is enough.  Mermaid allows to be defined in terms of their *type* and *name*.
+ER diagrams can be used for various purposes, ranging from abstract logical models devoid of any implementation details, through to physical models of relational database tables.  It can be useful to include attribute definitions on ER diagrams to aid comprehension of the purpose and meaning of entities.  These do not necessarily need to be exhaustive; often a small subset of attributes is enough.  Mermaid allows them to be defined in terms of their *type* and *name*.
 
 ```mermaid-example
 erDiagram

docs/flowchart.md

@@ -612,12 +612,14 @@ The icons are accessed via the syntax fa:#icon class name#.
 
 ```mermaid-example
 flowchart TD
-    B["fa:fa-twitter for peace"]
+    B["fab:fa-twitter for peace"]
     B-->C[fa:fa-ban forbidden]
     B-->D(fa:fa-spinner);
     B-->E(A fa:fa-camera-retro perhaps?)
 ```
 
+?> Mermaid is now only compatible with Font Awesome versions 4 and 5. Check that you are using the correct version of Font Awesome.
+
 
 ## Graph declarations with spaces between vertices and link and without semicolon
 
@@ -640,8 +642,7 @@ flowchart LR
 
 Is it possible to adjust the width of the rendered flowchart.
 
-This is done by defining **mermaid.flowchartConfig** or by the CLI to use a json file with the configuration. How to use
-the CLI is described in the mermaidCLI page.
+This is done by defining **mermaid.flowchartConfig** or by the CLI to use a JSON file with the configuration. How to use the CLI is described in the mermaidCLI page.
 mermaid.flowchartConfig can be set to a JSON string with config parameters or the corresponding object.
 
 ```javascript

docs/gitgraph.md

@@ -32,7 +32,7 @@ Entity names are often capitalized, although there is no accepted standard on th
 
 
 ## Syntax
-Mermaid syntax for Gitgraph is very straight-forward and simple. It follows a declarative-approach, where each commit is drawn on the timeline in the diagram, in order of its occurrences/presence in code. Basically, it follows the insertion order for each command.
+Mermaid syntax for a gitgraph is very straight-forward and simple. It follows a declarative-approach, where each commit is drawn on the timeline in the diagram, in order of its occurrences/presence in code. Basically, it follows the insertion order for each command.
 
 First thing you do is to declare your diagram type using the **gitgraph** keyword. This `gitgraph` keyword, tells Mermaid that you wish to draw a gitgraph, and parse the diagram code accordingly.
 
@@ -48,11 +48,11 @@ A simple gitgraph showing three commits on the default (***main***) branch:
        commit
        commit
 ```
-If you look closely at the previous example, you can see the default branch `main` along with three commits. Also, notice that by default each commit has been given a unique & random Id. What if you would want to give your own custom ID to a commit? Yes, it is possible to do that with Mermaid.
+If you look closely at the previous example, you can see the default branch `main` along with three commits. Also, notice that by default each commit has been given a unique & random ID. What if you wanted to give your own custom ID to a commit? Yes, it is possible to do that with Mermaid.
 
 ### Adding custom commit id
 
-For a given commit you may specify a custom id at the time of declaring it using the `id` attribute, followed by `:` and your custom value within `""` quote. For example: `commit id: "your_custom_id"`
+For a given commit you may specify a custom ID at the time of declaring it using the `id` attribute, followed by `:` and your custom value within a `""` quote. For example: `commit id: "your_custom_id"`
 
 Let us see how this works with the help of the following diagram:
 
@@ -126,13 +126,13 @@ Let see this in an example:
        commit
        commit
 ```
-In this example, see how we started with default `main` branch, and pushed to commits on that.
+In this example, see how we started with default `main` branch, and pushed two commits on that.
 Then we created the `develop` branch, and all commits afterwards are put on the `develop` branch as it became the current branch.
 
 ### Checking out an existing branch
-In Mermaid, in-order to switch to an existing branch, you make use of the `checkout` keyword. You also need to provide a name of an existing branch. If no branch is found with the given name, it will result in console error. Usage example: `checkout develop`
+In Mermaid, in order to switch to an existing branch, you make use of the `checkout` keyword. You also need to provide a name of an existing branch. If no branch is found with the given name, it will result in console error. Usage example: `checkout develop`
 
-When Mermaid, reads the `checkout` keyword, it finds the given branch and sets it as the current branch. Equivalent to  checking out a branch in Git world.
+When Mermaid, reads the `checkout` keyword, it finds the given branch and sets it as the current branch. Equivalent to checking out a branch in the Git world.
 
 Let see modify our previous example:
 
@@ -148,18 +148,18 @@ Let see modify our previous example:
        commit
        commit
 ```
-In this example, see how we started with default `main` branch, and pushed to commits on that.
+In this example, see how we started with default `main` branch, and pushed two commits on that.
 Then we created the `develop` branch, and all three commits afterwards are put on the `develop` branch as it became the current branch.
 After this we made use of the `checkout` keyword to set the current branch as `main`, and all commit that follow are registered against the current branch, i.e. `main`.
 
 ### Merging two branches
-In Mermaid, in-order to merge or join  to an existing branch, you make use of the `merge` keyword. You also need to provide a name of an existing branch to merge from. If no branch is found with the given name, it will result in console error. Also, if you can only merge two separate branches, and cannot merge a branch with itself. In such case an error is throw.
+In Mermaid, in order to merge or join  to an existing branch, you make use of the `merge` keyword. You also need to provide the name of an existing branch to merge from. If no branch is found with the given name, it will result in console error. Also, you can only merge two separate branches, and cannot merge a branch with itself. In such case an error is throw.
 
 Usage example: `merge develop`
 
-When Mermaid, reads the `merge` keyword, it finds the given branch and its head commit (the last commit on that branch), and joins it with the head commit on the **current branch**. Each merge result in a ***merge commit***, represented in the diagram with **filled double circle**.
+When Mermaid, reads the `merge` keyword, it finds the given branch and its head commit (the last commit on that branch), and joins it with the head commit on the **current branch**. Each merge results in a ***merge commit***, represented in the diagram with **filled double circle**.
 
-Let see modify our previous example to merge our two branches:
+Let us modify our previous example to merge our two branches:
 
 ```mermaid-example
     gitGraph
@@ -176,25 +176,25 @@ Let see modify our previous example to merge our two branches:
        commit
        commit
 ```
-In this example, see how we started with default `main` branch, and pushed to commits on that.
+In this example, see how we started with default `main` branch, and pushed two commits on that.
 Then we created the `develop` branch, and all three commits afterwards are put on the `develop` branch as it became the current branch.
 After this we made use of the `checkout` keyword to set the current branch as `main`, and all commits that follow are registered against the current branch, i.e. `main`.
 After this we merge the `develop` branch onto the current branch `main`, resulting in a merge commit.
 Since the current branch at this point is still `main`, the last two commits are registered against that.
 
 ### Cherry Pick commit from another branch
-Similar to how 'git' allows you to cherry pick a commit from **another branch** onto the **current** branch, Mermaid also suports this functionality. You can also cherry pick a commit from another branch using the `cherry-pick` keyword.
+Similar to how 'git' allows you to cherry-pick a commit from **another branch** onto the **current** branch, Mermaid also supports this functionality. You can also cherry-pick a commit from another branch using the `cherry-pick` keyword.
 
-To use the `cherry-pick` keyword, you must specify the id  using the `id` attribute, followed by `:` and your desired commit id within `""` quote. For example:
+To use the `cherry-pick` keyword, you must specify the id  using the `id` attribute, followed by `:` and your desired commit id within a `""` quote. For example:
 
  `cherry-pick id: "your_custom_id"`
 
-Here, a new commt representing the cherry pick is created on the current branch, and is visually highlighted in the diagram with a **cherry** and a tag depicting the commit id from which it is cherry picked from.
+Here, a new commit representing the cherry-pick is created on the current branch, and is visually highlighted in the diagram with a **cherry** and a tag depicting the commit id from which it is cherry-picked from.
 
-Few Important rules to note here are:
-1. You need to provide the `id` for an existing commit to be cherry picked. If given commit id does not exist it will result in an error. For this make use of the `commit id:$value` format of declaring commits. See the examples from above.
-2. The given commit must not exist on the current branch. Cherry picked commit must always be a different branch than the current branch.
-3. Current branch must have atleast one commit, before you can cherry pick a commit, otherwise it will case an error is throw.
+A few important rules to note here are:
+1. You need to provide the `id` for an existing commit to be cherry-picked. If given commit id does not exist it will result in an error. For this, make use of the `commit id:$value` format of declaring commits. See the examples from above.
+2. The given commit must not exist on the current branch. The cherry-picked commit must always be a different branch than the current branch.
+3. Current branch must have at least one commit, before you can cherry-pick, otherwise it will cause an error is throw.
 
 Let see an example:
 ```mermaid-example
@@ -222,7 +222,7 @@ In Mermaid, you have the option to configure the gitgraph diagram. You can confi
 
 Let's look at them one by one.
 ## Hiding Branch names and lines
-Sometimes you may want to hide the branch names and lines from the diagram. You can do this by using the `showBranches` keyword. Bye default its value is `true`. You can set it to false using directives
+Sometimes you may want to hide the branch names and lines from the diagram. You can do this by using the `showBranches` keyword. By default its value is `true`. You can set it to `false` using directives.
 
 Usage example:
 ```mermaid-example
@@ -272,7 +272,7 @@ Usage example:
  ```
 
 ## Commit labels Layout: Rotated or Horizontal
-Mermaid supports two types of commit labels layout. The default layout is **rotated**, which means the labels are placed below the commit circle, rotated at 45 degress for better readability. This is particularly useful for commits with long labels.
+Mermaid supports two types of commit labels layout. The default layout is **rotated**, which means the labels are placed below the commit circle, rotated at 45 degrees for better readability. This is particularly useful for commits with long labels.
 
 The other option is **horizontal**, which means the labels are placed below the commit circle centred horizontally, and are not rotated. This is particularly useful for commits with short labels.
 
@@ -450,7 +450,7 @@ Here, we have changed the default main branch name to `MetroLine1`.
 ## Themes
 Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about theming your diagram [here](./theming.md).
 
-Following are the different pre-defined theme options:
+The following are the different pre-defined theme options:
 - `base`
 - `forest`
 - `dark`
@@ -458,7 +458,7 @@ Following are the different pre-defined theme options:
 - `neutral`
 
 **NOTE**: To change theme you can either use the `initialize` call or *directives*. Learn more about [directives](./directives.md)
-Let's put them to use, add see how our sample diagram looks like in different themes:
+Let's put them to use, and see how our sample diagram looks in different themes:
 
 ### Base Theme
 
@@ -721,7 +721,7 @@ See how the default theme is used to set the colors for the branches:
        commit
 ```
 > #### IMPORTANT:
-> Mermaid supports the theme variables to override the default values for **up to 8 branches**, i.e., you can set the color/styling of up to 8 branches using theme variables. After this threshold of 8 branches,  the theme variables are reused in the cyclic manner, i.e. 9th branch will use the color/styling of 1st  branch, or branch at index position '8' will use the color/styling of branch at index position '0'.
+> Mermaid supports the theme variables to override the default values for **up to 8 branches**, i.e., you can set the color/styling of up to 8 branches using theme variables. After this threshold of 8 branches,  the theme variables are reused in the cyclic manner, i.e. the 9th branch will use the color/styling of the 1st branch, or the branch at index position '8' will use the color/styling of the branch at index position '0'.
  *More on this in the next section. See examples on **Customizing branch label colors** below*
 ### Customizing branch colors
 You can customize the branch colors using the `git0` to `git7` theme variables. Mermaid allows you to set the colors for up-to 8 branches, where `git0` variable will drive the value of the first branch, `git1` will drive the value of the second branch and so on.
@@ -819,6 +819,62 @@ Now let's override the default values for the `commitLabelColor` to `commitLabel
 
 ```
 See how the commit label color and background color are changed to the values specified in the theme variables.
+
+### Customizing Commit Label Font Size
+You can customize commit using the `commitLabelFontSize`  theme variables for changing in the font soze of the commit label .
+
+Example:
+Now let's override the default values for the `commitLabelFontSize` variable:
+
+```mermaid-example
+    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
+              'commitLabelColor': '#ff0000',
+              'commitLabelBackground': '#00ff00',
+              'commitLabelFontSize': '16px'
+       } } }%%
+       gitGraph
+       commit
+       branch develop
+       commit tag:"v1.0.0"
+       commit
+       checkout main
+       commit type: HIGHLIGHT
+       commit
+       merge develop
+       commit
+       branch featureA
+       commit
+
+```
+See how the commit label font size changed.
+
+### Customizing Tag Label Font Size
+You can customize commit using the `tagLabelFontSize`  theme variables for changing in the font soze of the tag label .
+
+Example:
+Now let's override the default values for the `tagLabelFontSize` variable:
+
+```mermaid-example
+    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
+              'commitLabelColor': '#ff0000',
+              'commitLabelBackground': '#00ff00',
+              'tagLabelFontSize': '16px'
+       } } }%%
+       gitGraph
+       commit
+       branch develop
+       commit tag:"v1.0.0"
+       commit
+       checkout main
+       commit type: HIGHLIGHT
+       commit
+       merge develop
+       commit
+       branch featureA
+       commit
+
+```
+See how the tag label font size changed.
 ### Customizing Tag colors
 You can customize tag using the `tagLabelColor`,`tagLabelBackground` and `tagLabelBorder`  theme variables for changes in the tag label color,tag label background color and tag label border respectively.
 Example:
@@ -870,7 +926,7 @@ Now let's override the default values for the `git0` to `git3` variables:
        commit
 
 ```
-See how the highlight commit color on the first branch is changed to the value specified in the theme variable `gitInv0`.
+See how the highlighted commit color on the first branch is changed to the value specified in the theme variable `gitInv0`.
 
 
 

docs/index.html

@@ -17,7 +17,8 @@
     />
     <!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
     <link rel="stylesheet" href="theme.css" />
-    <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.2/dist/mermaid.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
+    <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.5/dist/mermaid.min.js"></script>
     <!-- <script src="http://localhost:9000/mermaid.js"></script> -->
     <script>
       // prettier-ignore

docs/integrations.md

@@ -30,6 +30,7 @@ They also serve as proof of concept, for the variety of things that can be built
   - [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro)
   - [redmine-mermaid](https://github.com/styz/redmine_mermaid)
   - [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
+- [Jetsbrain IDE eg Pycharm](https://www.jetbrains.com/go/guide/tips/mermaid-js-support-in-markdown/)
 
 ## CRM/ERP/Similar
 
@@ -49,7 +50,6 @@ They also serve as proof of concept, for the variety of things that can be built
 
 - [VuePress](https://vuepress.vuejs.org/)
   - [Plugin for Mermaid.js](https://github.com/eFrane/vuepress-plugin-mermaidjs)
-  - [vuepress-plugin-mermaidjs-cli](https://github.com/gwleclerc/vuepress-plugin-mermaidjs-cli)
 - [Grav CMS](https://getgrav.org/)
   - [Mermaid Diagrams](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
   - [Gitlab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
@@ -110,13 +110,13 @@ They also serve as proof of concept, for the variety of things that can be built
   - [Mermaid Plugin](https://github.com/cldwalker/Mermaid)
 - [Draw.io](https://draw.io) - [Plugin](https://github.com/nopeslide/drawio_mermaid_plugin)
 - [Inkdrop](https://www.inkdrop.app) - [Plugin](https://github.com/inkdropapp/inkdrop-mermaid)
-- [Vim](https://vim.org)
+- [Vim](https://www.vim.org)
   - [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram)
 - [GNU Emacs](https://www.gnu.org/software/emacs/)
   - [Major mode for .mmd files](https://github.com/abrochard/mermaid-mode)
   - [Org-Mode integration](https://github.com/arnm/ob-mermaid)
 - [Brackets](https://brackets.io/)
-  - [Mermaid Preview](https://s3.amazonaws.com/extend.brackets/alanhohn.mermaid-preview/alanhohn.mermaid-preview-1.0.2.zip)
+  - [Mermaid Preview](https://github.com/AlanHohn/mermaid-preview)
 - [Iodide](https://github.com/iodide-project/iodide)
   - [iodide-mermaid-plugin](https://github.com/iodide-project/iodide-mermaid-plugin)
 - [Google docs](https://docs.google.com/)
@@ -149,7 +149,7 @@ They also serve as proof of concept, for the variety of things that can be built
 
 | Name | Chrome Web Store | Firefox Add-ons | Opera | Edge | Source/Repository | 
 | -- | -- | -- | -- | -- | -- |
-| GitHub + Mermaid | [🎡🔗](https://chrome.google.com/webstore/detail/github-%20-mermaid/goiiopgdnkogdbjmncgedmgpoajilohe) | [🦊🔗](https://addons.mozilla.org/firefox/addon/github-mermaid/) | - | - |  [🐙🔗](https://github.com/BackMarket/github-mermaid-extension)
+| GitHub + Mermaid | - | [🦊🔗](https://addons.mozilla.org/firefox/addon/github-mermaid/) | - | - |  [🐙🔗](https://github.com/BackMarket/github-mermaid-extension)
 | Asciidoctor Live Preview | [🎡🔗](https://chrome.google.com/webstore/detail/asciidoctorjs-live-previe/iaalpfgpbocpdfblpnhhgllgbdbchmia) | - | - | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/asciidoctorjs-live-previ/pefkelkanablhjdekgdahplkccnbdggd?hl=en-US) | -|
 | Diagram Tab| -| - | - | - | [🐙🔗](https://github.com/khafast/diagramtab)  |
 | Markdown Diagrams| [🎡🔗](https://chrome.google.com/webstore/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel/) | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/) | [🔴🔗](https://addons.opera.com/en/extensions/details/markdown-diagrams/) | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe) | [🐙🔗](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) |

docs/integrations.md~HEAD

@@ -1,169 +0,0 @@
-# Integrations
-
-The following list is a compilation of different integrations and plugins that allow the rendering of mermaid definitions within other applications. 
-
-They also serve as proof of concept, for the variety of things that can be built with mermaid.
-
-
-## Productivity
-
-- [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) (**Native support**)
-- [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) (**Native support**)
-- [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) (**Native support**)
-- [Joplin](https://joplinapp.org) (**Native support**)
-- [Notion](https://notion.so) (**Native support**)
-- [GitHub](https://github.com)
-  - [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
-  - [svg-generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
-- [GitBook](https://gitbook.com)
-  - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
-  - [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)
-  - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
-- [Atlassian Products](https://www.atlassian.com)
-  - [Mermaid Plugin for Confluence](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview)
-  - [CloudScript.io Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview)
-  - [Auto convert diagrams in Jira](https://github.com/coddingtonbear/jirafs-mermaid)
-- [Redmine](https://redmine.org)
-  - [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro)
-  - [redmine-mermaid](https://github.com/styz/redmine_mermaid)
-  - [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
-
-## CRM/ERP/Similar
-
-  - [coreBOS](https://blog.corebos.org/blog/december2019)
-
-## Blogs
-
-- [Wordpress](https://wordpress.org)
-  - [WordPress Markdown Editor](https://wordpress.org/plugins/wp-githuber-md)
-  - [WP-ReliableMD](https://wordpress.org/plugins/wp-reliablemd/)
-- [Hexo](https://hexo.io)
-  - [hexo-filter-mermaid-diagrams](https://github.com/webappdevelp/hexo-filter-mermaid-diagrams)
-  - [hexo-tag-mermaid](https://github.com/JameChou/hexo-tag-mermaid)
-  - [hexo-mermaid-diagrams](https://github.com/mslxl/hexo-mermaid-diagrams)
-
-## CMS
-
-- [VuePress](https://vuepress.vuejs.org/)
-  - [Plugin for Mermaid.js](https://github.com/eFrane/vuepress-plugin-mermaidjs)
-  - [vuepress-plugin-mermaidjs-cli](https://github.com/gwleclerc/vuepress-plugin-mermaidjs-cli)
-- [Grav CMS](https://getgrav.org/)
-  - [Mermaid Diagrams](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
-  - [Gitlab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
-
-## Communication
-
-- [Discourse](https://discourse.org)
-  - [Mermaid Plugin](https://github.com/pnewell/discourse-mermaid), [And](https://github.com/unfoldingWord-dev/discourse-mermaid)
-- [Mattermost](https://mattermost.com/)
-  - [Mermaid Plugin](https://github.com/SpikeTings/Mermaid)
-- [phpBB](https://phpbb.com)
-  - [phpbb-ext-mermaid](https://github.com/AlfredoRamos/phpbb-ext-mermaid)
-- [NodeBB](https://nodebb.org)
-  - [Mermaid Plugin](https://www.npmjs.com/package/nodebb-plugin-mermaid)
-
-## Wikis
-
-- [MediaWiki](https://www.mediawiki.org)
-  - [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid)
-  - [Flex Diagrams Extension](https://www.mediawiki.org/wiki/Extension:Flex_Diagrams)
-- [Semantic Media Wiki](https://semantic-mediawiki.org)
-  - [Mermaid Plugin](https://github.com/SemanticMediaWiki/Mermaid)
-- [FosWiki](https://foswiki.org)
-  - [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin)
-- [DokuWiki](https://dokuwiki.org)
-  - [Flowcharts](https://www.dokuwiki.org/plugin:flowcharts?s[]=mermaid)
-  - [ComboStrap](https://combostrap.com/mermaid)
-- [TiddlyWiki](https://tiddlywiki.com/)
-  - [mermaid-tw5: full js library](https://github.com/efurlanm/mermaid-tw5)
-  - [tw5-mermaid: wrapper for Mermaid Live](https://github.com/jasonmhoule/tw5-mermaid)
-
-## Editor Plugins
-
-- [Vs Code](https://code.visualstudio.com/)
-  - [Markdown Preview Mermaid Support](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid)
-  - [Mermaid Preview](https://marketplace.visualstudio.com/items?itemName=vstirbu.vscode-mermaid-preview)
-  - [Mermaid Markdown Syntax Highlighting](https://marketplace.visualstudio.com/items?itemName=bpruitt-goddard.mermaid-markdown-syntax-highlighting)
-  - [Mermaid Editor](https://marketplace.visualstudio.com/items?itemName=tomoyukim.vscode-mermaid-editor)
-  - [Mermaid Export](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.mermaid-export)
-  - [Markdown PDF](https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf)
-  - [Preview](https://marketplace.visualstudio.com/items?itemName=searKing.preview-vscode)
-  - [Preview Sequence Diagrams](https://marketplace.visualstudio.com/items?itemName=arichika.previewseqdiag-vscode)
-- [Markdown-It](https://github.com/markdown-it/markdown-it)
-  - [Textual UML Parser](https://github.com/manastalukdar/markdown-it-textual-uml)
-  - [Mermaid Plugin](https://github.com/tylingsoft/markdown-it-mermaid)
-  - [md-it-mermaid](https://github.com/iamcco/md-it-mermaid)
-  - [markdown-it-mermaid-fence-new](https://github.com/Revomatico/markdown-it-mermaid-fence-new)
-  - [markdown-it-mermaid-less](https://github.com/searKing/markdown-it-mermaid-less)
-- [Atom](https://atom.io)
-  - [Markdown Preview Enhanced](https://atom.io/packages/markdown-preview-enhanced)
-  - [Atom Mermaid](https://atom.io/packages/atom-mermaid)
-  - [Language Mermaid Syntax Highlighter](https://atom.io/packages/language-mermaid)
-- [Sublime Text 3](https://sublimetext.com)
-  - [Mermaid Package](https://packagecontrol.io/packages/Mermaid)
-- [Astah](https://astah.net)
-  - [Export to Mermaid](https://github.com/Avens666/Astah_Jude_UML_export_to_Markdown-mermaid-Plantuml-)
-- [Light Table](http://lighttable.com/)
-  - [Mermaid Plugin](https://github.com/cldwalker/Mermaid)
-- [Draw.io](https://draw.io) - [Plugin](https://github.com/nopeslide/drawio_mermaid_plugin)
-- [Inkdrop](https://www.inkdrop.app) - [Plugin](https://github.com/inkdropapp/inkdrop-mermaid)
-- [Vim](https://vim.org)
-  - [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram)
-- [GNU Emacs](https://www.gnu.org/software/emacs/)
-  - [Major mode for .mmd files](https://github.com/abrochard/mermaid-mode)
-  - [Org-Mode integration](https://github.com/arnm/ob-mermaid)
-- [Brackets](https://brackets.io/)
-  - [Mermaid Preview](https://s3.amazonaws.com/extend.brackets/alanhohn.mermaid-preview/alanhohn.mermaid-preview-1.0.2.zip)
-- [Iodide](https://github.com/iodide-project/iodide)
-  - [iodide-mermaid-plugin](https://github.com/iodide-project/iodide-mermaid-plugin)
-- [Google docs](https://docs.google.com/)
-  - [Mermaid plugin for google docs](https://workspace.google.com/marketplace/app/mermaid/636321283856)
-- [Podlite](https://github.com/zag/podlite-desktop)
-  - [Named block =Diagram](https://github.com/zag/podlite/tree/main/packages/podlite-diagrams)
-- [GNU Nano](https://www.nano-editor.org/)
-  - [Nano Mermaid](https://github.com/Yash-Singh1/nano-mermaid)
-
-## Document Generation
-
-- [Sphinx](https://www.sphinx-doc.org/en/master/)
-  - [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
-- [remark.js](https://remark.js.org/)
-  - [remark-mermaid](https://github.com/temando/remark-mermaid)
-- [jSDoc](https://jsdoc.app/)
-  - [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid)
-- [MkDocs](https://mkdocs.org)
-  - [mkdocs-mermaid2-plugin](https://github.com/fralau/mkdocs-mermaid2-plugin)
-- [Type Doc](https://typedoc.org/)
-  - [typedoc-plugin-mermaid](https://www.npmjs.com/package/typedoc-plugin-mermaid)
-- [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) (Native support in theme)
-- [Codedoc](https://codedoc.cc/)
-  - [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin)
-
-## Browser Extensions
-
-| Name | Chrome Web Store | Firefox Add-ons | Opera | Edge | Source/Repository | 
-| -- | -- | -- | -- | -- | -- |
-| GitHub + Mermaid | [🎡🔗](https://chrome.google.com/webstore/detail/github-%20-mermaid/goiiopgdnkogdbjmncgedmgpoajilohe) | [🦊🔗](https://addons.mozilla.org/firefox/addon/github-mermaid/) | - | - |  [🐙🔗](https://github.com/BackMarket/github-mermaid-extension)
-| Asciidoctor Live Preview | [🎡🔗](https://chrome.google.com/webstore/detail/asciidoctorjs-live-previe/iaalpfgpbocpdfblpnhhgllgbdbchmia) | - | - | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/asciidoctorjs-live-previ/pefkelkanablhjdekgdahplkccnbdggd?hl=en-US) | -|
-| Diagram Tab| -| - | - | - | [🐙🔗](https://github.com/khafast/diagramtab)  |
-| Markdown Diagrams| [🎡🔗](https://chrome.google.com/webstore/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel/) | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/) | [🔴🔗](https://addons.opera.com/en/extensions/details/markdown-diagrams/) | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe) | [🐙🔗](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) |
-| Markdown Viewer| - | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | - | - | [🐙🔗](https://github.com/simov/markdown-viewer)|
-| Extensions for Mermaid| - | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | [🔴🔗](https://addons.opera.com/en/extensions/details/extensions-for-mermaid/)| - | [🐙🔗](https://github.com/Stefan-S/mermaid-extension) |
-| Chrome Diagrammer| [🎡🔗](https://chrome.google.com/webstore/detail/chrome-diagrammer/bkpbgjmkomfoakfklcjeoegkklgjnnpk) | - |- | - | - |
-| Mermaid Diagrams | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-diagrams/phfcghedmopjadpojhmmaffjmfiakfil) | - | - | - | - |
-|Mermaid Markdown | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-markdown/mboeoikjijmjcjgpccghbcoegikliijg) | - | - | - | - |
-| Monkeys | [🎡🔗](https://chrome.google.com/webstore/detail/monkeys-mermaid-for-githu/cplfdpoajbclbgphaphphcldamfkjlgi) | - | - | - | - |
-| Mermaid Previewer | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-previewer/oidjnlhbegipkcklbdfnbkikplpghfdl) | - | - | - | - |
-
-
-## Other
-- [Jekyll](https://jekyllrb.com/)
-  - [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid)
-  - [jekyll-mermaid-diagrams](https://github.com/fuzhibo/jekyll-mermaid-diagrams)
-- [Reveal.js](https://github.com/hakimel/reveal.js)
-  - [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
-- [Bisheng](https://www.npmjs.com/package/bisheng)
-  - [bisheng-plugin-mermaid](https://github.com/yct21/bisheng-plugin-mermaid)
-- [Reveal CK](https://github.com/jedcn/reveal-ck)
-  - [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
-- [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)

docs/newDiagram.md

@@ -110,7 +110,7 @@ Look at `graphDb.js` for more details on that object.
 
 ## Layout
 
-If you are using a dagre based layout, please use flowchart-v2 as a template and by doing that you will be using dagre-wrapper instead of dagreD3 which we are m igrating away from.
+If you are using a dagre based layout, please use flowchart-v2 as a template and by doing that you will be using dagre-wrapper instead of dagreD3 which we are migrating away from.
 
 ### Common parts of a diagram
 
@@ -129,7 +129,7 @@ Here is example handling from flowcharts:
 Jison:
 ```jison
 
-/* lexial grammar */
+/* lexical grammar */
 %lex
 %x open_directive
 %x type_directive
@@ -175,7 +175,7 @@ It is probably a good idea to keep the handling similar to this in your new diag
 The syntax for adding title and description looks like this:
 ```
 accTitle: The title
-accDescr: The dsscription
+accDescr: The description
 
 accDescr {
 	Syntax for a description text

docs/sequenceDiagram.md~HEAD

@@ -1,504 +0,0 @@
-# Sequence diagrams
-
-**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/sequenceDiagram.md)
-> A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.
-
-Mermaid can render sequence diagrams.
-
-```mermaid-example
-sequenceDiagram
-    Alice->>John: Hello John, how are you?
-    John-->>Alice: Great!
-    Alice-)John: See you later!
-```
-
-```note
-A note on nodes, the word "end" could potentially break the diagram, due to the way that the mermaid language is scripted.
-
-If unavoidable, one must use parentheses(), quotation marks "", or brackets {},[], to enclose the word "end". i.e : (end), [end], {end}.
-```
-
-## Syntax
-
-### Participants
-
-The participants can be defined implicitly as in the first example on this page. The participants or actors are
-rendered in order of appearance in the diagram source text. Sometimes you might want to show the participants in a
-different order than how they appear in the first message. It is possible to specify the actor's order of
-appearance by doing the following:
-
-```mermaid-example
-sequenceDiagram
-    participant Alice
-    participant Bob
-    Alice->>Bob: Hi Bob
-    Bob->>Alice: Hi Alice
-```
-
-### Actors
-
-If you specifically want to use the actor symbol instead of a rectangle with text you can do so by using actor statements as per below.
-```mermaid-example
-sequenceDiagram
-    actor Alice
-    actor Bob
-    Alice->>Bob: Hi Bob
-    Bob->>Alice: Hi Alice
-```
-
-### Aliases
-
-The actor can have a convenient identifier and a descriptive label.
-
-```mermaid-example
-sequenceDiagram
-    participant A as Alice
-    participant J as John
-    A->>J: Hello John, how are you?
-    J->>A: Great!
-```
-
-## Messages
-
-Messages can be of two displayed either solid or with a dotted line.
-
-```
-[Actor][Arrow][Actor]:Message text
-```
-
-There are six types of arrows currently supported:
-
-| Type | Description                                 |
-| ---- | ------------------------------------------- |
-| ->   | Solid line without arrow                    |
-| -->  | Dotted line without arrow                   |
-| ->>  | Solid line with arrowhead                   |
-| -->> | Dotted line with arrowhead                  |
-| -x   | Solid line with a cross at the end          |
-| --x  | Dotted line with a cross at the end.        |
-| -)   | Solid line with an open arrow at the end (async)  |
-| --)  | Dotted line with a open arrow at the end (async) |
-
-## Activations
-
-It is possible to activate and deactivate an actor. (de)activation can be dedicated declarations:
-
-```mermaid-example
-sequenceDiagram
-    Alice->>John: Hello John, how are you?
-    activate John
-    John-->>Alice: Great!
-    deactivate John
-```
-
-There is also a shortcut notation by appending `+`/`-` suffix to the message arrow:
-
-```mermaid-example
-sequenceDiagram
-    Alice->>+John: Hello John, how are you?
-    John-->>-Alice: Great!
-```
-
-Activations can be stacked for same actor:
-
-```mermaid-example
-sequenceDiagram
-    Alice->>+John: Hello John, how are you?
-    Alice->>+John: John, can you hear me?
-    John-->>-Alice: Hi Alice, I can hear you!
-    John-->>-Alice: I feel great!
-```
-
-## Notes
-
-It is possible to add notes to a sequence diagram. This is done by the notation
-Note [ right of | left of | over ] [Actor]: Text in note content
-
-See the example below:
-
-```mermaid-example
-sequenceDiagram
-    participant John
-    Note right of John: Text in note
-```
-
-It is also possible to create notes spanning two participants:
-
-```mermaid-example
-sequenceDiagram
-    Alice->John: Hello John, how are you?
-    Note over Alice,John: A typical interaction
-```
-
-## Loops
-
-It is possible to express loops in a sequence diagram. This is done by the notation
-
-```
-loop Loop text
-... statements ...
-end
-```
-
-See the example below:
-
-```mermaid-example
-sequenceDiagram
-    Alice->John: Hello John, how are you?
-    loop Every minute
-        John-->Alice: Great!
-    end
-```
-
-## Alt
-
-It is possible to express alternative paths in a sequence diagram. This is done by the notation
-
-```
-alt Describing text
-... statements ...
-else
-... statements ...
-end
-```
-
-or if there is sequence that is optional (if without else).
-
-```
-opt Describing text
-... statements ...
-end
-```
-
-See the example below:
-
-```mermaid-example
-sequenceDiagram
-    Alice->>Bob: Hello Bob, how are you?
-    alt is sick
-        Bob->>Alice: Not so good :(
-    else is well
-        Bob->>Alice: Feeling fresh like a daisy
-    end
-    opt Extra response
-        Bob->>Alice: Thanks for asking
-    end
-```
-
-## Parallel
-
-It is possible to show actions that are happening in parallel.
-
-This is done by the notation
-
-```
-par [Action 1]
-... statements ...
-and [Action 2]
-... statements ...
-and [Action N]
-... statements ...
-end
-```
-
-See the example below:
-
-```mermaid-example
-sequenceDiagram
-    par Alice to Bob
-        Alice->>Bob: Hello guys!
-    and Alice to John
-        Alice->>John: Hello guys!
-    end
-    Bob-->>Alice: Hi Alice!
-    John-->>Alice: Hi Alice!
-```
-
-It is also possible to nest parallel blocks.
-
-```mermaid-example
-sequenceDiagram
-    par Alice to Bob
-        Alice->>Bob: Go help John
-    and Alice to John
-        Alice->>John: I want this done today
-        par John to Charlie
-            John->>Charlie: Can we do this today?
-        and John to Diana
-            John->>Diana: Can you help us today?
-        end
-    end
-```
-
-## Background Highlighting
-
-It is possible to highlight flows by providing colored background rects. This is done by the notation
-
-The colors are defined using rgb and rgba syntax.
-
-```
-rect rgb(0, 255, 0)
-... content ...
-end
-```
-
-```
-rect rgba(0, 0, 255, .1)
-... content ...
-end
-```
-
-See the examples below:
-
-```mermaid-example
-sequenceDiagram
-    participant Alice
-    participant John
-
-    rect rgb(191, 223, 255)
-    note right of Alice: Alice calls John.
-    Alice->>+John: Hello John, how are you?
-    rect rgb(200, 150, 255)
-    Alice->>+John: John, can you hear me?
-    John-->>-Alice: Hi Alice, I can hear you!
-    end
-    John-->>-Alice: I feel great!
-    end
-    Alice ->>+ John: Did you want to go to the game tonight?
-    John -->>- Alice: Yeah! See you there.
-
-```
-
-## Comments
-
-Comments can be entered within a sequence diagram, which will be ignored by the parser.  Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
-
-```mmd
-sequenceDiagram
-    Alice->>John: Hello John, how are you?
-    %% this is a comment
-    John-->>Alice: Great!
-```
-
-## Entity codes to escape characters
-
-It is possible to escape characters using the syntax exemplified here.
-
-```mermaid-example
-sequenceDiagram
-    A->>B: I #9829; you!
-    B->>A: I #9829; you #infin; times more!
-```
-
-Numbers given are base 10, so `#` can be encoded as `#35;`. It is also supported to use HTML character names.
-
-Because semicolons can be used instead of line breaks to define the markup, you need to use `#59;` to include a semicolon in message text.
-
-## sequenceNumbers
-
-It is possible to get a sequence number attached to each arrow in a sequence diagram. This can be configured when adding mermaid to the website as shown below:
-
-```html
-    <script>
-      mermaid.initialize({
-        sequence: { showSequenceNumbers: true },
-      });
-    </script>
-```
-
-It can also be be turned on via the diagram code as in the diagram:
-
-```mermaid-example
-sequenceDiagram
-    autonumber
-    Alice->>John: Hello John, how are you?
-    loop Healthcheck
-        John->>John: Fight against hypochondria
-    end
-    Note right of John: Rational thoughts!
-    John-->>Alice: Great!
-    John->>Bob: How about you?
-    Bob-->>John: Jolly good!
-```
-
-## Actor Menus
-
-Actors can have popup-menus containing individualized links to external pages.  For example, if an actor represented a web service, useful links might include a link to the service health dashboard, repo containing the code for the service, or a wiki page describing the service.
-
-This can be configured by adding one or more link lines with the format:
-```
-link <actor>: <link-label> @ <link-url>
-```
-```mmd
-sequenceDiagram
-    participant Alice
-    participant John
-    link Alice: Dashboard @ https://dashboard.contoso.com/alice
-    link Alice: Wiki @ https://wiki.contoso.com/alice
-    link John: Dashboard @ https://dashboard.contoso.com/john
-    link John: Wiki @ https://wiki.contoso.com/john
-    Alice->>John: Hello John, how are you?
-    John-->>Alice: Great!
-    Alice-)John: See you later!
-```
-
-#### Advanced Menu Syntax
-There is an advanced syntax that relies on JSON formatting. If you are comfortable with JSON format, then this exists as well.
-
-This can be configured by adding the links lines with the format:
-
-```
-links <actor>: <json-formatted link-name link-url pairs>
-```
-
-An example is below:
-
-```mmd
-sequenceDiagram
-    participant Alice
-    participant John
-    links Alice: {"Dashboard": "https://dashboard.contoso.com/alice", "Wiki": "https://wiki.contoso.com/alice"}
-    links John: {"Dashboard": "https://dashboard.contoso.com/john", "Wiki": "https://wiki.contoso.com/john"}
-    Alice->>John: Hello John, how are you?
-    John-->>Alice: Great!
-    Alice-)John: See you later!
-```
-
-## Styling
-
-Styling of a sequence diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/sequence.scss
-
-### Classes used
-
-| Class        | Description                                                 |
-| ------------ | ----------------------------------------------------------- |
-| actor        | Style for the actor box at the top of the diagram.          |
-| text.actor   | Styles for text in the actor box at the top of the diagram. |
-| actor-line   | The vertical line for an actor.                             |
-| messageLine0 | Styles for the solid message line.                          |
-| messageLine1 | Styles for the dotted message line.                         |
-| messageText  | Defines styles for the text on the message arrows.          |
-| labelBox     | Defines styles label to left in a loop.                     |
-| labelText    | Styles for the text in label for loops.                     |
-| loopText     | Styles for the text in the loop box.                        |
-| loopLine     | Defines styles for the lines in the loop box.               |
-| note         | Styles for the note box.                                    |
-| noteText     | Styles for the text on in the note boxes.                   |
-
-### Sample stylesheet
-
-```css
-body {
-    background: white;
-}
-
-.actor {
-    stroke: #ccccff;
-    fill: #ececff;
-}
-text.actor {
-    fill: black;
-    stroke: none;
-    font-family: Helvetica;
-}
-
-.actor-line {
-    stroke: grey;
-}
-
-.messageLine0 {
-    stroke-width: 1.5;
-    stroke-dasharray: '2 2';
-    marker-end: 'url(#arrowhead)';
-    stroke: black;
-}
-
-.messageLine1 {
-    stroke-width: 1.5;
-    stroke-dasharray: '2 2';
-    stroke: black;
-}
-
-#arrowhead {
-    fill: black;
-}
-
-.messageText {
-    fill: black;
-    stroke: none;
-    font-family: 'trebuchet ms', verdana, arial;
-    font-size: 14px;
-}
-
-.labelBox {
-    stroke: #ccccff;
-    fill: #ececff;
-}
-
-.labelText {
-    fill: black;
-    stroke: none;
-    font-family: 'trebuchet ms', verdana, arial;
-}
-
-.loopText {
-    fill: black;
-    stroke: none;
-    font-family: 'trebuchet ms', verdana, arial;
-}
-
-.loopLine {
-    stroke-width: 2;
-    stroke-dasharray: '2 2';
-    marker-end: 'url(#arrowhead)';
-    stroke: #ccccff;
-}
-
-.note {
-    stroke: #decc93;
-    fill: #fff5ad;
-}
-
-.noteText {
-    fill: black;
-    stroke: none;
-    font-family: 'trebuchet ms', verdana, arial;
-    font-size: 14px;
-}
-```
-
-## Configuration
-
-Is it possible to adjust the margins for rendering the sequence diagram.
-
-This is done by defining `mermaid.sequenceConfig` or by the CLI to use a json file with the configuration.
-How to use the CLI is described in the [mermaidCLI](mermaidCLI) page.
-`mermaid.sequenceConfig` can be set to a JSON string with config parameters or the corresponding object.
-
-```javascript
-mermaid.sequenceConfig = {
-    diagramMarginX: 50,
-    diagramMarginY: 10,
-    boxTextMargin: 5,
-    noteMargin: 10,
-    messageMargin: 35,
-    mirrorActors: true
-};
-```
-
-### Possible configuration parameters:
-
-| Parameter         | Description                                                                                                                                | Default value                  |
-| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------ |
-| mirrorActors      | Turns on/off the rendering of actors below the diagram as well as above it                                                                 | false                          |
-| bottomMarginAdj   | Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists. | 1                              |
-| actorFontSize     | Sets the font size for the actor's description                                                                                             | 14                             |
-| actorFontFamily   | Sets the font family for the actor's description                                                                                           | "Open-Sans", "sans-serif"      |
-| actorFontWeight   | Sets the font weight for the actor's description                                                                                           | "Open-Sans", "sans-serif"      |
-| noteFontSize      | Sets the font size for actor-attached notes                                                                                                | 14                             |
-| noteFontFamily    | Sets the font family for actor-attached notes                                                                                              | "trebuchet ms", verdana, arial |
-| noteFontWeight    | Sets the font weight for actor-attached notes                                                                                              | "trebuchet ms", verdana, arial |
-| noteAlign         | Sets the text alignment for text in actor-attached notes                                                                                   | center                         |
-| messageFontSize   | Sets the font size for actor<->actor messages                                                                                              | 16                             |
-| messageFontFamily | Sets the font family for actor<->actor messages                                                                                            | "trebuchet ms", verdana, arial |
-| messageFontWeight | Sets the font weight for actor<->actor messages                                                                                            | "trebuchet ms", verdana, arial |

docs/stateDiagram.md

@@ -249,3 +249,13 @@ stateDiagram-v2
 ## Styling
 
 Styling of the a state diagram is done by defining a number of css classes.  During rendering these classes are extracted from the file located at src/themes/state.scss
+
+## Spaces in state names
+
+Spaces can be added to a state by defining it at the top and referencing the acronym later.
+
+```mermaid-example
+stateDiagram-v2
+    Yswsii: Your state with spaces in it
+    [*] --> Yswsii
+```

docs/usage.md

@@ -23,7 +23,7 @@ We have compiled some Video [Tutorials](./Tutorials.md) on how to use the mermai
 **Using the npm package**
 
 ```
-1.You will need to install node v16, which would have npm.
+1. You will need to install node v16, which would have npm.
 
 2. download yarn using npm.
 

package.json

@@ -1,12 +1,12 @@
 {
   "name": "mermaid",
-  "version": "9.1.2",
+  "version": "9.1.5",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
-  "main": "dist/mermaid.core.js",
+  "main": "dist/mermaid.min.js",
   "module": "dist/mermaid.esm.min.mjs",
   "exports": {
     ".": {
-      "require": "./dist/mermaid.core.js",
+      "require": "./dist/mermaid.min.js",
       "import": "./dist/mermaid.esm.min.mjs"
     },
     "./*": "./*"
@@ -27,7 +27,7 @@
     "postbuild": "documentation build src/mermaidAPI.js src/config.js src/defaultConfig.js --shallow -f md --markdown-toc false > docs/Setup.md",
     "build:watch": "yarn build:development --watch",
     "release": "yarn build",
-    "lint": "eslint ./ --ext .js,.json,.html,.md",
+    "lint": "eslint ./ --ext .js,.json,.html",
     "lint:fix": "yarn lint --fix",
     "e2e:depr": "yarn lint && jest e2e --config e2e/jest.config.js",
     "cypress": "cypress run",
@@ -62,10 +62,10 @@
     "d3": "^7.0.0",
     "dagre": "^0.8.5",
     "dagre-d3": "^0.6.4",
-    "dompurify": "2.3.8",
+    "dompurify": "2.3.10",
     "graphlib": "^2.1.8",
     "khroma": "^2.0.0",
-    "moment-mini": "^2.24.0",
+    "moment-mini": "2.24.0",
     "stylis": "^4.0.10"
   },
   "devDependencies": {
@@ -81,17 +81,17 @@
     "concurrently": "^7.0.0",
     "coveralls": "^3.0.2",
     "css-to-string-loader": "^0.1.3",
-    "cypress": "10.1.0",
+    "cypress": "9.7.0",
     "cypress-image-snapshot": "^4.0.1",
     "documentation": "13.2.0",
     "eslint": "^8.4.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-html": "^6.2.0",
+    "eslint-plugin-html": "^7.1.0",
     "eslint-plugin-jest": "^26.0.0",
     "eslint-plugin-jsdoc": "^39.1.0",
     "eslint-plugin-json": "^3.1.0",
-    "eslint-plugin-markdown": "^2.2.1",
+    "eslint-plugin-markdown": "^3.0.0",
     "eslint-plugin-prettier": "^4.0.0",
     "husky": "^8.0.0",
     "identity-obj-proxy": "^3.0.0",
@@ -103,7 +103,7 @@
     "moment": "^2.23.0",
     "path-browserify": "^1.0.1",
     "prettier": "^2.3.2",
-    "prettier-plugin-jsdoc": "^0.3.30",
+    "prettier-plugin-jsdoc": "^0.4.1",
     "start-server-and-test": "^1.12.6",
     "terser-webpack-plugin": "^5.2.4",
     "webpack": "^5.53.0",
@@ -112,6 +112,9 @@
     "webpack-merge": "^5.8.0",
     "webpack-node-externals": "^3.0.0"
   },
+  "resolutions": {
+    "d3": "^7.0.0"
+  },
   "files": [
     "dist"
   ],

src/Diagram.js

@@ -1,166 +1,67 @@
-import c4Db from './diagrams/c4/c4Db';
-import c4Renderer from './diagrams/c4/c4Renderer';
-import c4Parser from './diagrams/c4/parser/c4Diagram';
-import classDb from './diagrams/class/classDb';
-import classRenderer from './diagrams/class/classRenderer';
-import classRendererV2 from './diagrams/class/classRenderer-v2';
-import classParser from './diagrams/class/parser/classDiagram';
-import erDb from './diagrams/er/erDb';
-import erRenderer from './diagrams/er/erRenderer';
-import erParser from './diagrams/er/parser/erDiagram';
-import flowDb from './diagrams/flowchart/flowDb';
-import flowRenderer from './diagrams/flowchart/flowRenderer';
-import flowRendererV2 from './diagrams/flowchart/flowRenderer-v2';
-import flowParser from './diagrams/flowchart/parser/flow';
-import ganttDb from './diagrams/gantt/ganttDb';
-import ganttRenderer from './diagrams/gantt/ganttRenderer';
-import ganttParser from './diagrams/gantt/parser/gantt';
-import gitGraphAst from './diagrams/git/gitGraphAst';
-import gitGraphRenderer from './diagrams/git/gitGraphRenderer';
-import gitGraphParser from './diagrams/git/parser/gitGraph';
-import infoDb from './diagrams/info/infoDb';
-import infoRenderer from './diagrams/info/infoRenderer';
-import infoParser from './diagrams/info/parser/info';
-import pieParser from './diagrams/pie/parser/pie';
-import pieDb from './diagrams/pie/pieDb';
-import pieRenderer from './diagrams/pie/pieRenderer';
-import requirementParser from './diagrams/requirement/parser/requirementDiagram';
-import requirementDb from './diagrams/requirement/requirementDb';
-import requirementRenderer from './diagrams/requirement/requirementRenderer';
-import sequenceParser from './diagrams/sequence/parser/sequenceDiagram';
-import sequenceDb from './diagrams/sequence/sequenceDb';
-import sequenceRenderer from './diagrams/sequence/sequenceRenderer';
-import stateParser from './diagrams/state/parser/stateDiagram';
-import stateDb from './diagrams/state/stateDb';
-import stateRenderer from './diagrams/state/stateRenderer';
-import stateRendererV2 from './diagrams/state/stateRenderer-v2';
-import journeyDb from './diagrams/user-journey/journeyDb';
-import journeyRenderer from './diagrams/user-journey/journeyRenderer';
-import journeyParser from './diagrams/user-journey/parser/journey';
 import utils from './utils';
 import * as configApi from './config';
 import { log } from './logger';
-
+import { getDiagrams } from './diagram-api/diagramAPI';
+import detectType from './diagram-api/detectType';
 class Diagram {
   type = 'graph';
   parser;
   renderer;
   db;
   constructor(txt) {
+    const diagrams = getDiagrams();
     const cnf = configApi.getConfig();
     this.txt = txt;
-    this.type = utils.detectType(txt, cnf);
+    this.type = detectType(txt, cnf);
     log.debug('Type ' + this.type);
-    switch (this.type) {
-      case 'c4':
-        this.parser = c4Parser;
-        this.parser.parser.yy = c4Db;
-        this.db = c4Db;
-        this.renderer = c4Renderer;
-        break;
-      case 'gitGraph':
-        this.parser = gitGraphParser;
-        this.parser.parser.yy = gitGraphAst;
-        this.db = gitGraphAst;
-        this.renderer = gitGraphRenderer;
-        break;
-      case 'flowchart':
-        flowDb.clear();
-        this.parser = flowParser;
-        this.parser.parser.yy = flowDb;
-        this.db = flowDb;
-        this.renderer = flowRenderer;
-        break;
-      case 'flowchart-v2':
-        flowDb.clear();
-        this.parser = flowParser;
-        this.parser.parser.yy = flowDb;
-        this.db = flowDb;
-        this.renderer = flowRendererV2;
-        break;
-      case 'sequenceDiagram':
-      case 'sequence':
-        this.parser = sequenceParser;
-        this.parser.parser.yy = sequenceDb;
-        this.db = sequenceDb;
-        this.renderer = sequenceRenderer;
-        break;
-      case 'gantt':
-        this.parser = ganttParser;
-        this.parser.parser.yy = ganttDb;
-        this.db = ganttDb;
-        this.renderer = ganttRenderer;
-        break;
-      case 'class':
-        this.parser = classParser;
-        this.parser.parser.yy = classDb;
-        this.db = classDb;
-        this.renderer = classRenderer;
-        break;
-      case 'classDiagram':
-        this.parser = classParser;
-        this.parser.parser.yy = classDb;
-        this.db = classDb;
-        this.renderer = classRendererV2;
-        break;
-      case 'state':
-        this.parser = stateParser;
-        this.parser.parser.yy = stateDb;
-        this.db = stateDb;
-        this.renderer = stateRenderer;
-        break;
-      case 'stateDiagram':
-        this.parser = stateParser;
-        this.parser.parser.yy = stateDb;
-        this.db = stateDb;
-        this.renderer = stateRendererV2;
-        break;
-      case 'info':
-        log.debug('info info info');
-        this.parser = infoParser;
-        this.parser.parser.yy = infoDb;
-        this.db = infoDb;
-        this.renderer = infoRenderer;
-        break;
-      case 'pie':
-        log.debug('pie');
-        this.parser = pieParser;
-        this.parser.parser.yy = pieDb;
-        this.db = pieDb;
-        this.renderer = pieRenderer;
-        break;
-      case 'er':
-        log.debug('er');
-        this.parser = erParser;
-        this.parser.parser.yy = erDb;
-        this.db = erDb;
-        this.renderer = erRenderer;
-        break;
-      case 'journey':
-        log.debug('Journey');
-        this.parser = journeyParser;
-        this.parser.parser.yy = journeyDb;
-        this.db = journeyDb;
-        this.renderer = journeyRenderer;
-        break;
-      case 'requirement':
-      case 'requirementDiagram':
-        log.debug('RequirementDiagram');
-        this.parser = requirementParser;
-        this.parser.parser.yy = requirementDb;
-        this.db = requirementDb;
-        this.renderer = requirementRenderer;
-        break;
-      default:
-        log.error('Unkown graphtype');
-        throw new Error('Unkown graphtype');
+
+    // console.log('this.type', this.type, diagrams[this.type]);
+    // Setup diagram
+    this.db = diagrams[this.type].db;
+    this.db.clear?.();
+
+    this.renderer = diagrams[this.type].renderer;
+    this.parser = diagrams[this.type].parser;
+    this.parser.parser.yy = this.db;
+    if (typeof diagrams[this.type].init === 'function') {
+      diagrams[this.type].init(cnf);
+      log.debug('Initialized diagram ' + this.type, cnf);
     }
+    this.txt = this.txt + '\n';
+
     this.parser.parser.yy.graphType = this.type;
     this.parser.parser.yy.parseError = (str, hash) => {
       const error = { str, hash };
       throw error;
     };
-    this.parser.parse(txt);
+    this.parser.parse(this.txt);
+  }
+  parse(text) {
+    var parseEncounteredException = false;
+    try {
+      text = text + '\n';
+      this.db.clear();
+
+      this.parser.parse(text);
+    } catch (error) {
+      parseEncounteredException = true;
+      // Is this the correct way to access mermiad's parseError()
+      // method ? (or global.mermaid.parseError()) ?
+      if (global.mermaid.parseError) {
+        if (error.str != undefined) {
+          // handle case where error string and hash were
+          // wrapped in object like`const error = { str, hash };`
+          global.mermaid.parseError(error.str, error.hash);
+        } else {
+          // assume it is just error string and pass it on
+          global.mermaid.parseError(error);
+        }
+      } else {
+        // No mermaid.parseError() handler defined, so re-throw it
+        throw error;
+      }
+    }
+    return !parseEncounteredException;
   }
   getParser() {
     return this.parser;

src/assignWithDepth.js

@@ -0,0 +1,74 @@
+/**
+ * @function assignWithDepth Extends the functionality of {@link ObjectConstructor.assign} with the
+ *   ability to merge arbitrary-depth objects For each key in src with path `k` (recursively)
+ *   performs an Object.assign(dst[`k`], src[`k`]) with a slight change from the typical handling of
+ *   undefined for dst[`k`]: instead of raising an error, dst[`k`] is auto-initialized to {} and
+ *   effectively merged with src[`k`]<p> Additionally, dissimilar types will not clobber unless the
+ *   config.clobber parameter === true. Example:
+ *
+ *   ```js
+ *   let config_0 = { foo: { bar: 'bar' }, bar: 'foo' };
+ *   let config_1 = { foo: 'foo', bar: 'bar' };
+ *   let result = assignWithDepth(config_0, config_1);
+ *   console.log(result);
+ *   //-> result: { foo: { bar: 'bar' }, bar: 'bar' }
+ *   ```
+ *
+ *   Traditional Object.assign would have clobbered foo in config_0 with foo in config_1. If src is a
+ *   destructured array of objects and dst is not an array, assignWithDepth will apply each element
+ *   of src to dst in order.
+ * @param dst
+ * @param src
+ * @param config
+ * @param dst
+ * @param src
+ * @param config
+ * @param dst
+ * @param src
+ * @param config
+ * @param {any} dst - The destination of the merge
+ * @param {any} src - The source object(s) to merge into destination
+ * @param {{ depth: number; clobber: boolean }} [config={ depth: 2, clobber: false }] - Depth: depth
+ *   to traverse within src and dst for merging - clobber: should dissimilar types clobber (default:
+ *   { depth: 2, clobber: false }). Default is `{ depth: 2, clobber: false }`
+ * @returns {any}
+ */
+const assignWithDepth = function (dst, src, config) {
+  const { depth, clobber } = Object.assign({ depth: 2, clobber: false }, config);
+  if (Array.isArray(src) && !Array.isArray(dst)) {
+    src.forEach((s) => assignWithDepth(dst, s, config));
+    return dst;
+  } else if (Array.isArray(src) && Array.isArray(dst)) {
+    src.forEach((s) => {
+      if (dst.indexOf(s) === -1) {
+        dst.push(s);
+      }
+    });
+    return dst;
+  }
+  if (typeof dst === 'undefined' || depth <= 0) {
+    if (dst !== undefined && dst !== null && typeof dst === 'object' && typeof src === 'object') {
+      return Object.assign(dst, src);
+    } else {
+      return src;
+    }
+  }
+  if (typeof src !== 'undefined' && typeof dst === 'object' && typeof src === 'object') {
+    Object.keys(src).forEach((key) => {
+      if (
+        typeof src[key] === 'object' &&
+        (dst[key] === undefined || typeof dst[key] === 'object')
+      ) {
+        if (dst[key] === undefined) {
+          dst[key] = Array.isArray(src[key]) ? [] : {};
+        }
+        dst[key] = assignWithDepth(dst[key], src[key], { depth: depth - 1, clobber });
+      } else if (clobber || (typeof dst[key] !== 'object' && typeof src[key] !== 'object')) {
+        dst[key] = src[key];
+      }
+    });
+  }
+  return dst;
+};
+
+export default assignWithDepth;

src/config.js

@@ -1,4 +1,4 @@
-import { assignWithDepth } from './utils';
+import assignWithDepth from './assignWithDepth';
 import { log } from './logger';
 import theme from './themes';
 import config from './defaultConfig';
@@ -21,7 +21,7 @@ export const updateCurrentConfig = (siteCfg, _directives) => {
     const d = _directives[i];
     sanitize(d);
 
-    // Apply the data from the directive where the the overrides the themeVaraibles
+    // Apply the data from the directive where the the overrides the themeVariables
     sumOfDirectives = assignWithDepth(sumOfDirectives, d);
   }
 
@@ -67,7 +67,7 @@ export const setSiteConfig = (conf) => {
   return siteConfig;
 };
 
-export const saveConfigFromInitilize = (conf) => {
+export const saveConfigFromInitialize = (conf) => {
   configFromInitialize = assignWithDepth({}, conf);
 };
 

src/dagre-wrapper/GraphObjects.md

@@ -23,7 +23,7 @@ flowchart
 
 The new nodes C1 and C2 are a special type of nodes, clusterNodes. ClusterNodes have have the nodes in the cluster including the cluster attached in a graph object.
 
-When rendering this diagram it it beeing rendered recursivly. The diagram is rendered by the dagre-mermaid:render function which in turn will be used to render the node C1 and the node C2. The result of those renderings will be inserted as nodes in the "root" diagram. With this recursive approach it would be possible to have different layout direction for each cluster.
+When rendering this diagram it it beeing rendered recursively. The diagram is rendered by the dagre-mermaid:render function which in turn will be used to render the node C1 and the node C2. The result of those renderings will be inserted as nodes in the "root" diagram. With this recursive approach it would be possible to have different layout direction for each cluster.
 
 ```
 { clusterNode: true, graph }
@@ -74,7 +74,7 @@ This is set by the renderer of the diagram and insert the data that the wrapper
 
 |  property  |                                                 description                                                 |
 | ---------- | ----------------------------------------------------------------------------------------------------------- |
-| labelStyle | Css styles for the label. User for instance for stylling the labels for clusters                            |
+| labelStyle | Css styles for the label. User for instance for styling the labels for clusters                            |
 | shape      | The shape of the node.                                                                                      |
 | labelText  | The text on the label                                                                                       |
 | rx         | The corner radius - maybe part of the shape instead? Used for rects.                                        |

src/dagre-wrapper/clusters.js

@@ -78,7 +78,7 @@ const rect = (parent, node) => {
 };
 
 /**
- * Non visiable cluster where the note is group with its
+ * Non visible cluster where the note is group with its
  *
  * @param {any} parent
  * @param {any} node

src/dagre-wrapper/createLabel.js

@@ -2,6 +2,7 @@ import { select } from 'd3';
 import { log } from '../logger'; // eslint-disable-line
 import { getConfig } from '../config';
 import { sanitizeText, evaluate } from '../diagrams/common/common';
+import { decodeEntities } from '../mermaidAPI';
 
 const sanitizeTxt = (txt) => sanitizeText(txt, getConfig());
 
@@ -52,7 +53,7 @@ const createLabel = (_vertexText, style, isTitle, isNode) => {
     log.info('vertexText' + vertexText);
     const node = {
       isNode,
-      label: vertexText.replace(
+      label: decodeEntities(vertexText).replace(
         /fa[lrsb]?:fa-[\w-]+/g,
         (s) => `<i class='${s.replace(':', ' ')}'></i>`
       ),

src/dagre-wrapper/edges.js

@@ -313,7 +313,7 @@ const cutPathAtIntersect = (_points, boundryNode) => {
     // check if point is inside the boundry rect
     if (!outsideNode(boundryNode, point) && !isInside) {
       // First point inside the rect found
-      // Calc the intersection coord between the point anf the last opint ouside the rect
+      // Calc the intersection coord between the point anf the last point outside the rect
       const inter = intersection(boundryNode, lastPointOutside, point);
       log.warn('abc88 inside', point, lastPointOutside, inter);
       log.warn('abc88 intersection', inter);
@@ -391,7 +391,7 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph
     //     }
     //     isInside = true;
     // } else {
-    //   // outtside
+    //   // outside
     //   lastPointOutside = point;
     //   if (!isInside) points.push(point);
     // }

src/dagre-wrapper/edges.spec.js

@@ -30,7 +30,7 @@ describe('Graphlib decorations', () => {
       expect(int.x).toBeCloseTo(192.4609375);
       expect(int.y).toBeCloseTo(145.15711441743503);
     });
-    it('case 3 - intersection on otop of box outside point greater then inside point', function () {
+    it('case 3 - intersection on top of box outside point greater then inside point', function () {
       const o = { x: 157, y: 39 };
       const i = { x: 104, y: 105 };
       const node2 = {

src/dagre-wrapper/index.js

@@ -61,7 +61,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
       log.warn('Recursive render complete ', newEl, node);
     } else {
       if (graph.children(v).length > 0) {
-        // This is a cluster but not to be rendered recusively
+        // This is a cluster but not to be rendered recursively
         // Render as before
         log.info('Cluster - the non recursive path XXX', v, node.id, node, graph);
         log.info(findNonClusterChild(node.id, graph));
@@ -117,7 +117,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
     } else {
       // Non cluster node
       if (graph.children(v).length > 0) {
-        // A cluster in the non-recurive way
+        // A cluster in the non-recursive way
         // positionCluster(node);
         insertCluster(clusters, node);
         clusterDb[node.id].node = node;

src/dagre-wrapper/markers.js

@@ -244,7 +244,7 @@ const barb = (elem, type) => {
     .attr('d', 'M 19,7 L9,13 L14,7 L9,1 Z');
 };
 
-// TODO rename the class diagram markers to something shape descriptive and semanitc free
+// TODO rename the class diagram markers to something shape descriptive and semantic free
 const markers = {
   extension,
   composition,

src/dagre-wrapper/mermaid-graphlib.js

@@ -210,7 +210,7 @@ export const adjustClustersAndEdges = (graph, depth) => {
   } else {
     log.debug('Opting in, graph ');
   }
-  // Go through the nodes and for each cluster found, save a replacment node, this can be used when
+  // Go through the nodes and for each cluster found, save a replacement node, this can be used when
   // faking a link to a cluster
   graph.nodes().forEach(function (id) {
     const children = graph.children(id);
@@ -257,7 +257,7 @@ export const adjustClustersAndEdges = (graph, depth) => {
   });
 
   // For clusters with incoming and/or outgoing edges translate those edges to a real node
-  // in the cluster inorder to fake the edge
+  // in the cluster in order to fake the edge
   graph.edges().forEach(function (e) {
     const edge = graph.edge(e);
     log.warn('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));

src/dagre-wrapper/nodes.js

@@ -877,7 +877,7 @@ const class_box = (parent, node) => {
     );
     verticalPos = interfaceBBox.height + rowPadding;
   }
-  // Positin the class title label
+  // Position the class title label
   let diffX = (maxWidth - classTitleBBox.width) / 2;
   select(classTitleLabel).attr(
     'transform',

src/dagre-wrapper/patterns.js

@@ -45,7 +45,7 @@ const dots = (elem, type) => {
     .attr('d', 'M 19,7 L9,13 L14,7 L9,1 Z');
 };
 
-// TODO rename the class diagram markers to something shape descriptive and semanitc free
+// TODO rename the class diagram markers to something shape descriptive and semantic free
 const patterns = {
   dots,
 };

src/defaultConfig.js

@@ -817,6 +817,9 @@ const config = {
   },
   class: {
     arrowMarkerAbsolute: false,
+    dividerMargin: 10,
+    padding: 5,
+    textHeight: 10,
 
     /**
      * | Parameter   | Description | Type    | Required | Values      |
@@ -1084,14 +1087,21 @@ const config = {
     diagramMarginY: 10,
 
     /**
-     * | Parameter   | Description           | Type    | Required | Values             |
-     * | ----------- | --------------------- | ------- | -------- | ------------------ |
-     * | shapeMargin | Margin between shapes | Integer | Required | Any Positive Value |
+     * | Parameter     | Description           | Type    | Required | Values             |
+     * | ------------- | --------------------- | ------- | -------- | ------------------ |
+     * | c4ShapeMargin | Margin between shapes | Integer | Required | Any Positive Value |
      *
      * **Notes:** Default value: 50
      */
     c4ShapeMargin: 50,
 
+    /**
+     * | Parameter      | Description            | Type    | Required | Values             |
+     * | -------------- | ---------------------- | ------- | -------- | ------------------ |
+     * | c4ShapePadding | Padding between shapes | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 20
+     */
     c4ShapePadding: 20,
 
     /**
@@ -1113,9 +1123,9 @@ const config = {
     height: 60,
 
     /**
-     * | Parameter | Description              | Type    | Required | Values             |
-     * | --------- | ------------------------ | ------- | -------- | ------------------ |
-     * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |
+     * | Parameter | Description         | Type    | Required | Values             |
+     * | --------- | ------------------- | ------- | -------- | ------------------ |
+     * | boxMargin | Margin around boxes | Integer | Required | Any Positive Value |
      *
      * **Notes:** Default value: 10
      */
@@ -1133,97 +1143,446 @@ const config = {
      */
     useMaxWidth: true,
 
+    /**
+     * | Parameter    | Description | Type    | Required | Values             |
+     * | ------------ | ----------- | ------- | -------- | ------------------ |
+     * | c4ShapeInRow | See Notes   | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** How many shapes to place in each row.
+     *
+     * Default value: 4
+     */
     c4ShapeInRow: 4,
+
     nextLinePaddingX: 0,
 
+    /**
+     * | Parameter       | Description | Type    | Required | Values             |
+     * | --------------- | ----------- | ------- | -------- | ------------------ |
+     * | c4BoundaryInRow | See Notes   | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** How many boundarys to place in each row.
+     *
+     * Default value: 2
+     */
     c4BoundaryInRow: 2,
 
+    /**
+     * This sets the font size of Person shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
     personFontSize: 14,
+    /**
+     * This sets the font family of Person shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
     personFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of Person shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
     personFontWeight: 'normal',
 
+    /**
+     * This sets the font size of External Person shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
     external_personFontSize: 14,
+    /**
+     * This sets the font family of External Person shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
     external_personFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of External Person shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
     external_personFontWeight: 'normal',
 
+    /**
+     * This sets the font size of System shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
     systemFontSize: 14,
+    /**
+     * This sets the font family of System shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
     systemFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of System shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
     systemFontWeight: 'normal',
 
+    /**
+     * This sets the font size of External System shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
     external_systemFontSize: 14,
+    /**
+     * This sets the font family of External System shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
     external_systemFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of External System shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
     external_systemFontWeight: 'normal',
 
+    /**
+     * This sets the font size of System DB shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
     system_dbFontSize: 14,
+    /**
+     * This sets the font family of System DB shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
     system_dbFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of System DB shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
     system_dbFontWeight: 'normal',
 
+    /**
+     * This sets the font size of External System DB shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
     external_system_dbFontSize: 14,
+    /**
+     * This sets the font family of External System DB shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
     external_system_dbFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of External System DB shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
     external_system_dbFontWeight: 'normal',
 
+    /**
+     * This sets the font size of System Queue shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
     system_queueFontSize: 14,
+    /**
+     * This sets the font family of System Queue shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
     system_queueFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of System Queue shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
     system_queueFontWeight: 'normal',
 
+    /**
+     * This sets the font size of External System Queue shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
     external_system_queueFontSize: 14,
+    /**
+     * This sets the font family of External System Queue shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
     external_system_queueFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of External System Queue shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
     external_system_queueFontWeight: 'normal',
 
+    /**
+     * This sets the font size of Boundary shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
     boundaryFontSize: 14,
+    /**
+     * This sets the font family of Boundary shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
     boundaryFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of Boundary shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
     boundaryFontWeight: 'normal',
 
+    /**
+     * This sets the font size of Message shape for the diagram
+     *
+     * **Notes:** Default value: 12.
+     */
     messageFontSize: 12,
+    /**
+     * This sets the font family of Message shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
     messageFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of Message shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
     messageFontWeight: 'normal',
 
+    /**
+     * This sets the font size of Container shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
     containerFontSize: 14,
+    /**
+     * This sets the font family of Container shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
     containerFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of Container shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
     containerFontWeight: 'normal',
 
+    /**
+     * This sets the font size of External Container shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
     external_containerFontSize: 14,
+    /**
+     * This sets the font family of External Container shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
     external_containerFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of External Container shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
     external_containerFontWeight: 'normal',
 
+    /**
+     * This sets the font size of Container DB shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
     container_dbFontSize: 14,
+    /**
+     * This sets the font family of Container DB shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
     container_dbFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of Container DB shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
     container_dbFontWeight: 'normal',
 
+    /**
+     * This sets the font size of External Container DB shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
     external_container_dbFontSize: 14,
+    /**
+     * This sets the font family of External Container DB shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
     external_container_dbFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of External Container DB shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
     external_container_dbFontWeight: 'normal',
 
+    /**
+     * This sets the font size of Container Queue shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
     container_queueFontSize: 14,
+    /**
+     * This sets the font family of Container Queue shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
     container_queueFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of Container Queue shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
     container_queueFontWeight: 'normal',
 
+    /**
+     * This sets the font size of External Container Queue shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
     external_container_queueFontSize: 14,
+    /**
+     * This sets the font family of External Container Queue shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
     external_container_queueFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of External Container Queue shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
     external_container_queueFontWeight: 'normal',
 
+    /**
+     * This sets the font size of Component shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
     componentFontSize: 14,
+    /**
+     * This sets the font family of Component shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
     componentFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of Component shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
     componentFontWeight: 'normal',
 
+    /**
+     * This sets the font size of External Component shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
     external_componentFontSize: 14,
+    /**
+     * This sets the font family of External Component shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
     external_componentFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of External Component shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
     external_componentFontWeight: 'normal',
 
+    /**
+     * This sets the font size of Component DB shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
     component_dbFontSize: 14,
+    /**
+     * This sets the font family of Component DB shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
     component_dbFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of Component DB shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
     component_dbFontWeight: 'normal',
 
+    /**
+     * This sets the font size of External Component DB shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
     external_component_dbFontSize: 14,
+    /**
+     * This sets the font family of External Component DB shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
     external_component_dbFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of External Component DB shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
     external_component_dbFontWeight: 'normal',
 
+    /**
+     * This sets the font size of Component Queue shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
     component_queueFontSize: 14,
+    /**
+     * This sets the font family of Component Queue shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
     component_queueFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of Component Queue shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
     component_queueFontWeight: 'normal',
 
+    /**
+     * This sets the font size of External Component Queue shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
     external_component_queueFontSize: 14,
+    /**
+     * This sets the font family of External Component Queue shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
     external_component_queueFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of External Component Queue shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
     external_component_queueFontWeight: 'normal',
 
     /**

src/diagram-api/detectType.js

@@ -0,0 +1,100 @@
+const directive =
+  /[%]{2}[{]\s*(?:(?:(\w+)\s*:|(\w+))\s*(?:(?:(\w+))|((?:(?![}][%]{2}).|\r?\n)*))?\s*)(?:[}][%]{2})?/gi;
+const anyComment = /\s*%%.*\n/gm;
+const detectors = {};
+/**
+ * @function detectType Detects the type of the graph text. Takes into consideration the possible
+ *   existence of an %%init directive
+ *
+ *   ```mermaid
+ *   %%{initialize: {"startOnLoad": true, logLevel: "fatal" }}%%
+ *   graph LR
+ *    a-->b
+ *    b-->c
+ *    c-->d
+ *    d-->e
+ *    e-->f
+ *    f-->g
+ *    g-->h
+ * ```
+ * @param {string} text The text defining the graph
+ * @param {{
+ *   class: { defaultRenderer: string } | undefined;
+ *   state: { defaultRenderer: string } | undefined;
+ *   flowchart: { defaultRenderer: string } | undefined;
+ * }} [cnf]
+ * @returns {string} A graph definition key
+ */
+const detectType = function (text, cnf) {
+  text = text.replace(directive, '').replace(anyComment, '\n');
+  if (text.match(/^\s*C4Context|C4Container|C4Component|C4Dynamic|C4Deployment/)) {
+    return 'c4';
+  }
+
+  if (text.match(/^\s*sequenceDiagram/)) {
+    return 'sequence';
+  }
+
+  if (text.match(/^\s*gantt/)) {
+    return 'gantt';
+  }
+  if (text.match(/^\s*classDiagram-v2/)) {
+    return 'classDiagram';
+  }
+  if (text.match(/^\s*classDiagram/)) {
+    if (cnf && cnf.class && cnf.class.defaultRenderer === 'dagre-wrapper') return 'classDiagram';
+    return 'class';
+  }
+
+  if (text.match(/^\s*stateDiagram-v2/)) {
+    return 'stateDiagram';
+  }
+
+  if (text.match(/^\s*stateDiagram/)) {
+    if (cnf && cnf.class && cnf.state.defaultRenderer === 'dagre-wrapper') return 'stateDiagram';
+    return 'state';
+  }
+
+  // if (text.match(/^\s*gitGraph/)) {
+  //   return 'gitGraph';
+  // }
+  if (text.match(/^\s*flowchart/)) {
+    return 'flowchart-v2';
+  }
+
+  if (text.match(/^\s*info/)) {
+    return 'info';
+  }
+  if (text.match(/^\s*pie/)) {
+    return 'pie';
+  }
+
+  if (text.match(/^\s*erDiagram/)) {
+    return 'er';
+  }
+
+  if (text.match(/^\s*journey/)) {
+    return 'journey';
+  }
+
+  if (text.match(/^\s*requirement/) || text.match(/^\s*requirementDiagram/)) {
+    return 'requirement';
+  }
+  if (cnf && cnf.flowchart && cnf.flowchart.defaultRenderer === 'dagre-wrapper')
+    return 'flowchart-v2';
+  const k = Object.keys(detectors);
+  for (let i = 0; i < k.length; i++) {
+    const key = k[i];
+    const dia = detectors[key];
+    if (dia && dia.detector(text)) {
+      return key;
+    }
+  }
+  return 'flowchart';
+};
+export const addDetector = (key, detector) => {
+  detectors[key] = {
+    detector,
+  };
+};
+export default detectType;

src/diagram-api/diagram-orchestration.js

@@ -0,0 +1,32 @@
+import { registerDiagram } from './diagramAPI.js';
+// import mindmapDb from '../diagrams/mindmap/mindmapDb';
+// import mindmapRenderer from '../diagrams/mindmap/mindmapRenderer';
+// import mindmapParser from '../diagrams/mindmap/parser/mindmapDiagram';
+// import mindmapDetector from '../diagrams/mindmap/mindmapDetector';
+
+import gitGraphDb from '../diagrams/git/gitGraphAst';
+import gitGraphRenderer from '../diagrams/git/gitGraphRenderer';
+import gitGraphParser from '../diagrams/git/parser/gitGraph';
+import gitGraphDetector from '../diagrams/git/gitGraphDetector';
+
+// Register mindmap and other built-in diagrams
+// registerDiagram(
+//   'mindmap',
+//   mindmapParser,
+//   mindmapDb,
+//   mindmapRenderer,
+//   undefined,
+//   mindmapRenderer,
+//   mindmapDetector
+// );
+const addDiagrams = () => {
+  registerDiagram(
+    'gitGraph',
+    gitGraphParser,
+    gitGraphDb,
+    gitGraphRenderer,
+    undefined,
+    gitGraphDetector
+  );
+};
+export default addDiagrams;

src/diagram-api/diagramAPI.js

@@ -0,0 +1,175 @@
+import c4Db from '../diagrams/c4/c4Db';
+import c4Renderer from '../diagrams/c4/c4Renderer';
+import c4Parser from '../diagrams/c4/parser/c4Diagram';
+import classDb from '../diagrams/class/classDb';
+import classRenderer from '../diagrams/class/classRenderer';
+import classRendererV2 from '../diagrams/class/classRenderer-v2';
+import classParser from '../diagrams/class/parser/classDiagram';
+import erDb from '../diagrams/er/erDb';
+import erRenderer from '../diagrams/er/erRenderer';
+import erParser from '../diagrams/er/parser/erDiagram';
+import flowDb from '../diagrams/flowchart/flowDb';
+import flowRenderer from '../diagrams/flowchart/flowRenderer';
+import flowRendererV2 from '../diagrams/flowchart/flowRenderer-v2';
+import flowParser from '../diagrams/flowchart/parser/flow';
+import ganttDb from '../diagrams/gantt/ganttDb';
+import ganttRenderer from '../diagrams/gantt/ganttRenderer';
+import ganttParser from '../diagrams/gantt/parser/gantt';
+import infoDb from '../diagrams/info/infoDb';
+import infoRenderer from '../diagrams/info/infoRenderer';
+import infoParser from '../diagrams/info/parser/info';
+import pieParser from '../diagrams/pie/parser/pie';
+import pieDb from '../diagrams/pie/pieDb';
+import pieRenderer from '../diagrams/pie/pieRenderer';
+import requirementParser from '../diagrams/requirement/parser/requirementDiagram';
+import requirementDb from '../diagrams/requirement/requirementDb';
+import requirementRenderer from '../diagrams/requirement/requirementRenderer';
+import sequenceParser from '../diagrams/sequence/parser/sequenceDiagram';
+import sequenceDb from '../diagrams/sequence/sequenceDb';
+import sequenceRenderer from '../diagrams/sequence/sequenceRenderer';
+import stateParser from '../diagrams/state/parser/stateDiagram';
+import stateDb from '../diagrams/state/stateDb';
+import stateRenderer from '../diagrams/state/stateRenderer';
+import stateRendererV2 from '../diagrams/state/stateRenderer-v2';
+import journeyDb from '../diagrams/user-journey/journeyDb';
+import journeyRenderer from '../diagrams/user-journey/journeyRenderer';
+import journeyParser from '../diagrams/user-journey/parser/journey';
+import { addDetector } from './detectType';
+
+const diagrams = {
+  c4: {
+    db: c4Db,
+    renderer: c4Renderer,
+    parser: c4Parser,
+    init: (cnf) => {
+      c4Renderer.setConf(cnf.c4);
+    },
+  },
+  class: {
+    db: classDb,
+    renderer: classRenderer,
+    parser: classParser,
+    init: (cnf) => {
+      cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+      classDb.clear();
+    },
+  },
+  classDiagram: {
+    db: classDb,
+    renderer: classRendererV2,
+    parser: classParser,
+    init: (cnf) => {
+      cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+      classDb.clear();
+    },
+  },
+  er: {
+    db: erDb,
+    renderer: erRenderer,
+    parser: erParser,
+  },
+  flowchart: {
+    db: flowDb,
+    renderer: flowRenderer,
+    parser: flowParser,
+    init: (cnf) => {
+      flowRenderer.setConf(cnf.flowchart);
+      cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+      flowDb.clear();
+      flowDb.setGen('gen-1');
+    },
+  },
+  'flowchart-v2': {
+    db: flowDb,
+    renderer: flowRendererV2,
+    parser: flowParser,
+    init: (cnf) => {
+      flowRendererV2.setConf(cnf.flowchart);
+      cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+      flowDb.clear();
+      flowDb.setGen('gen-2');
+    },
+  },
+  gantt: {
+    db: ganttDb,
+    renderer: ganttRenderer,
+    parser: ganttParser,
+    init: (cnf) => {
+      ganttRenderer.setConf(cnf.gantt);
+    },
+  },
+  // git: {
+  //   db: gitGraphAst,
+  //   renderer: gitGraphRenderer,
+  //   parser: gitGraphParser,
+  // },
+  info: {
+    db: infoDb,
+    renderer: infoRenderer,
+    parser: infoParser,
+  },
+  pie: {
+    db: pieDb,
+    renderer: pieRenderer,
+    parser: pieParser,
+  },
+  requirement: {
+    db: requirementDb,
+    renderer: requirementRenderer,
+    parser: requirementParser,
+  },
+  sequence: {
+    db: sequenceDb,
+    renderer: sequenceRenderer,
+    parser: sequenceParser,
+    init: (cnf) => {
+      cnf.sequence.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+      if (cnf.sequenceDiagram) {
+        // backwards compatibility
+        sequenceRenderer.setConf(Object.assign(cnf.sequence, cnf.sequenceDiagram));
+        console.error(
+          '`mermaid config.sequenceDiagram` has been renamed to `config.sequence`. Please update your mermaid config.'
+        );
+      }
+      sequenceDb.setWrap(cnf.wrap);
+      sequenceRenderer.setConf(cnf.sequence);
+    },
+  },
+  state: {
+    db: stateDb,
+    renderer: stateRenderer,
+    parser: stateParser,
+    init: (cnf) => {
+      cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+      stateDb.clear();
+    },
+  },
+  stateDiagram: {
+    db: stateDb,
+    renderer: stateRendererV2,
+    parser: stateParser,
+    init: (cnf) => {
+      cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+      stateDb.clear();
+    },
+  },
+  journey: {
+    db: journeyDb,
+    renderer: journeyRenderer,
+    parser: journeyParser,
+    init: (cnf) => {
+      journeyRenderer.setConf(cnf.journey);
+      journeyDb.clear();
+    },
+  },
+};
+// console.log(sequenceDb);
+export const registerDiagram = (id, parser, db, renderer, init, detector) => {
+  diagrams[id] = { parser, db, renderer, init };
+  addDetector(id, detector);
+};
+
+export const getDiagrams = () => {
+  // console.log('diagrams', diagrams);
+  return diagrams;
+};

src/diagrams/c4/c4Db.js

@@ -22,6 +22,8 @@ let rels = [];
 let title = '';
 let wrapEnabled = false;
 let description = '';
+let c4ShapeInRow = 4;
+let c4BoundaryInRow = 2;
 var c4Type;
 
 export const getC4Type = function () {
@@ -65,22 +67,46 @@ export const addRel = function (type, from, to, label, techn, descr, sprite, tag
   rel.to = to;
   rel.label = { text: label };
 
-  if (descr === undefined || descr === null) {
-    rel.descr = { text: '' };
-  } else {
-    rel.descr = { text: descr };
-  }
-
   if (techn === undefined || techn === null) {
     rel.techn = { text: '' };
   } else {
-    rel.techn = { text: techn };
+    if (typeof techn === 'object') {
+      let [key, value] = Object.entries(techn)[0];
+      rel[key] = { text: value };
+    } else {
+      rel.techn = { text: techn };
+    }
   }
 
-  // rel.techn = techn;
-  rel.sprite = sprite;
-  rel.tags = tags;
-  rel.link = link;
+  if (descr === undefined || descr === null) {
+    rel.descr = { text: '' };
+  } else {
+    if (typeof descr === 'object') {
+      let [key, value] = Object.entries(descr)[0];
+      rel[key] = { text: value };
+    } else {
+      rel.descr = { text: descr };
+    }
+  }
+
+  if (typeof sprite === 'object') {
+    let [key, value] = Object.entries(sprite)[0];
+    rel[key] = value;
+  } else {
+    rel.sprite = sprite;
+  }
+  if (typeof tags === 'object') {
+    let [key, value] = Object.entries(tags)[0];
+    rel[key] = value;
+  } else {
+    rel.tags = tags;
+  }
+  if (typeof link === 'object') {
+    let [key, value] = Object.entries(link)[0];
+    rel[key] = value;
+  } else {
+    rel.link = link;
+  }
   rel.wrap = autoWrap();
 };
 
@@ -108,15 +134,35 @@ export const addPersonOrSystem = function (typeC4Shape, alias, label, descr, spr
   if (descr === undefined || descr === null) {
     personOrSystem.descr = { text: '' };
   } else {
-    personOrSystem.descr = { text: descr };
+    if (typeof descr === 'object') {
+      let [key, value] = Object.entries(descr)[0];
+      personOrSystem[key] = { text: value };
+    } else {
+      personOrSystem.descr = { text: descr };
+    }
   }
 
-  personOrSystem.wrap = autoWrap();
-  personOrSystem.sprite = sprite;
-  personOrSystem.tags = tags;
-  personOrSystem.link = link;
+  if (typeof sprite === 'object') {
+    let [key, value] = Object.entries(sprite)[0];
+    personOrSystem[key] = value;
+  } else {
+    personOrSystem.sprite = sprite;
+  }
+  if (typeof tags === 'object') {
+    let [key, value] = Object.entries(tags)[0];
+    personOrSystem[key] = value;
+  } else {
+    personOrSystem.tags = tags;
+  }
+  if (typeof link === 'object') {
+    let [key, value] = Object.entries(link)[0];
+    personOrSystem[key] = value;
+  } else {
+    personOrSystem.link = link;
+  }
   personOrSystem.typeC4Shape = { text: typeC4Shape };
   personOrSystem.parentBoundary = currentBoundaryParse;
+  personOrSystem.wrap = autoWrap();
 };
 
 //type, alias, label, ?techn, ?descr ?sprite, ?tags, $link
@@ -143,18 +189,43 @@ export const addContainer = function (typeC4Shape, alias, label, techn, descr, s
   if (techn === undefined || techn === null) {
     container.techn = { text: '' };
   } else {
-    container.techn = { text: techn };
+    if (typeof techn === 'object') {
+      let [key, value] = Object.entries(techn)[0];
+      container[key] = { text: value };
+    } else {
+      container.techn = { text: techn };
+    }
   }
 
   if (descr === undefined || descr === null) {
     container.descr = { text: '' };
   } else {
-    container.descr = { text: descr };
+    if (typeof descr === 'object') {
+      let [key, value] = Object.entries(descr)[0];
+      container[key] = { text: value };
+    } else {
+      container.descr = { text: descr };
+    }
   }
 
-  container.sprite = sprite;
-  container.tags = tags;
-  container.link = link;
+  if (typeof sprite === 'object') {
+    let [key, value] = Object.entries(sprite)[0];
+    container[key] = value;
+  } else {
+    container.sprite = sprite;
+  }
+  if (typeof tags === 'object') {
+    let [key, value] = Object.entries(tags)[0];
+    container[key] = value;
+  } else {
+    container.tags = tags;
+  }
+  if (typeof link === 'object') {
+    let [key, value] = Object.entries(link)[0];
+    container[key] = value;
+  } else {
+    container.link = link;
+  }
   container.wrap = autoWrap();
   container.typeC4Shape = { text: typeC4Shape };
   container.parentBoundary = currentBoundaryParse;
@@ -184,18 +255,43 @@ export const addComponent = function (typeC4Shape, alias, label, techn, descr, s
   if (techn === undefined || techn === null) {
     component.techn = { text: '' };
   } else {
-    component.techn = { text: techn };
+    if (typeof techn === 'object') {
+      let [key, value] = Object.entries(techn)[0];
+      component[key] = { text: value };
+    } else {
+      component.techn = { text: techn };
+    }
   }
 
   if (descr === undefined || descr === null) {
     component.descr = { text: '' };
   } else {
-    component.descr = { text: descr };
+    if (typeof descr === 'object') {
+      let [key, value] = Object.entries(descr)[0];
+      component[key] = { text: value };
+    } else {
+      component.descr = { text: descr };
+    }
   }
 
-  component.sprite = sprite;
-  component.tags = tags;
-  component.link = link;
+  if (typeof sprite === 'object') {
+    let [key, value] = Object.entries(sprite)[0];
+    component[key] = value;
+  } else {
+    component.sprite = sprite;
+  }
+  if (typeof tags === 'object') {
+    let [key, value] = Object.entries(tags)[0];
+    component[key] = value;
+  } else {
+    component.tags = tags;
+  }
+  if (typeof link === 'object') {
+    let [key, value] = Object.entries(link)[0];
+    component[key] = value;
+  } else {
+    component.link = link;
+  }
   component.wrap = autoWrap();
   component.typeC4Shape = { text: typeC4Shape };
   component.parentBoundary = currentBoundaryParse;
@@ -227,11 +323,26 @@ export const addPersonOrSystemBoundary = function (alias, label, type, tags, lin
   if (type === undefined || type === null) {
     boundary.type = { text: 'system' };
   } else {
-    boundary.type = { text: type };
+    if (typeof type === 'object') {
+      let [key, value] = Object.entries(type)[0];
+      boundary[key] = { text: value };
+    } else {
+      boundary.type = { text: type };
+    }
   }
 
-  boundary.tags = tags;
-  boundary.link = link;
+  if (typeof tags === 'object') {
+    let [key, value] = Object.entries(tags)[0];
+    boundary[key] = value;
+  } else {
+    boundary.tags = tags;
+  }
+  if (typeof link === 'object') {
+    let [key, value] = Object.entries(link)[0];
+    boundary[key] = value;
+  } else {
+    boundary.link = link;
+  }
   boundary.parentBoundary = currentBoundaryParse;
   boundary.wrap = autoWrap();
 
@@ -266,11 +377,26 @@ export const addContainerBoundary = function (alias, label, type, tags, link) {
   if (type === undefined || type === null) {
     boundary.type = { text: 'container' };
   } else {
-    boundary.type = { text: type };
+    if (typeof type === 'object') {
+      let [key, value] = Object.entries(type)[0];
+      boundary[key] = { text: value };
+    } else {
+      boundary.type = { text: type };
+    }
   }
 
-  boundary.tags = tags;
-  boundary.link = link;
+  if (typeof tags === 'object') {
+    let [key, value] = Object.entries(tags)[0];
+    boundary[key] = value;
+  } else {
+    boundary.tags = tags;
+  }
+  if (typeof link === 'object') {
+    let [key, value] = Object.entries(link)[0];
+    boundary[key] = value;
+  } else {
+    boundary.link = link;
+  }
   boundary.parentBoundary = currentBoundaryParse;
   boundary.wrap = autoWrap();
 
@@ -314,17 +440,37 @@ export const addDeploymentNode = function (
   if (type === undefined || type === null) {
     boundary.type = { text: 'node' };
   } else {
-    boundary.type = { text: type };
+    if (typeof type === 'object') {
+      let [key, value] = Object.entries(type)[0];
+      boundary[key] = { text: value };
+    } else {
+      boundary.type = { text: type };
+    }
   }
 
   if (descr === undefined || descr === null) {
     boundary.descr = { text: '' };
   } else {
-    boundary.descr = { text: type };
+    if (typeof descr === 'object') {
+      let [key, value] = Object.entries(descr)[0];
+      boundary[key] = { text: value };
+    } else {
+      boundary.descr = { text: descr };
+    }
   }
 
-  boundary.tags = tags;
-  boundary.link = link;
+  if (typeof tags === 'object') {
+    let [key, value] = Object.entries(tags)[0];
+    boundary[key] = value;
+  } else {
+    boundary.tags = tags;
+  }
+  if (typeof link === 'object') {
+    let [key, value] = Object.entries(link)[0];
+    boundary[key] = value;
+  } else {
+    boundary.link = link;
+  }
   boundary.nodeType = nodeType;
   boundary.parentBoundary = currentBoundaryParse;
   boundary.wrap = autoWrap();
@@ -341,6 +487,177 @@ export const popBoundaryParseStack = function () {
   boundaryParseStack.push(parentBoundaryParse);
 };
 
+//elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite
+export const updateElStyle = function (
+  typeC4Shape,
+  elementName,
+  bgColor,
+  fontColor,
+  borderColor,
+  shadowing,
+  shape,
+  sprite,
+  techn,
+  legendText,
+  legendSprite
+) {
+  let old = c4ShapeArray.find((element) => element.alias === elementName);
+  if (old === undefined) {
+    old = boundarys.find((element) => element.alias === elementName);
+    if (old === undefined) {
+      return;
+    }
+  }
+  if (bgColor !== undefined && bgColor !== null) {
+    if (typeof bgColor === 'object') {
+      let [key, value] = Object.entries(bgColor)[0];
+      old[key] = value;
+    } else {
+      old.bgColor = bgColor;
+    }
+  }
+  if (fontColor !== undefined && fontColor !== null) {
+    if (typeof fontColor === 'object') {
+      let [key, value] = Object.entries(fontColor)[0];
+      old[key] = value;
+    } else {
+      old.fontColor = fontColor;
+    }
+  }
+  if (borderColor !== undefined && borderColor !== null) {
+    if (typeof borderColor === 'object') {
+      let [key, value] = Object.entries(borderColor)[0];
+      old[key] = value;
+    } else {
+      old.borderColor = borderColor;
+    }
+  }
+  if (shadowing !== undefined && shadowing !== null) {
+    if (typeof shadowing === 'object') {
+      let [key, value] = Object.entries(shadowing)[0];
+      old[key] = value;
+    } else {
+      old.shadowing = shadowing;
+    }
+  }
+  if (shape !== undefined && shape !== null) {
+    if (typeof shape === 'object') {
+      let [key, value] = Object.entries(shape)[0];
+      old[key] = value;
+    } else {
+      old.shape = shape;
+    }
+  }
+  if (sprite !== undefined && sprite !== null) {
+    if (typeof sprite === 'object') {
+      let [key, value] = Object.entries(sprite)[0];
+      old[key] = value;
+    } else {
+      old.sprite = sprite;
+    }
+  }
+  if (techn !== undefined && techn !== null) {
+    if (typeof techn === 'object') {
+      let [key, value] = Object.entries(techn)[0];
+      old[key] = value;
+    } else {
+      old.techn = techn;
+    }
+  }
+  if (legendText !== undefined && legendText !== null) {
+    if (typeof legendText === 'object') {
+      let [key, value] = Object.entries(legendText)[0];
+      old[key] = value;
+    } else {
+      old.legendText = legendText;
+    }
+  }
+  if (legendSprite !== undefined && legendSprite !== null) {
+    if (typeof legendSprite === 'object') {
+      let [key, value] = Object.entries(legendSprite)[0];
+      old[key] = value;
+    } else {
+      old.legendSprite = legendSprite;
+    }
+  }
+};
+
+//textColor, lineColor, ?offsetX, ?offsetY
+export const updateRelStyle = function (
+  typeC4Shape,
+  from,
+  to,
+  textColor,
+  lineColor,
+  offsetX,
+  offsetY
+) {
+  const old = rels.find((rel) => rel.from === from && rel.to === to);
+  if (old === undefined) {
+    return;
+  }
+  if (textColor !== undefined && textColor !== null) {
+    if (typeof textColor === 'object') {
+      let [key, value] = Object.entries(textColor)[0];
+      old[key] = value;
+    } else {
+      old.textColor = textColor;
+    }
+  }
+  if (lineColor !== undefined && lineColor !== null) {
+    if (typeof lineColor === 'object') {
+      let [key, value] = Object.entries(lineColor)[0];
+      old[key] = value;
+    } else {
+      old.lineColor = lineColor;
+    }
+  }
+  if (offsetX !== undefined && offsetX !== null) {
+    if (typeof offsetX === 'object') {
+      let [key, value] = Object.entries(offsetX)[0];
+      old[key] = parseInt(value);
+    } else {
+      old.offsetX = parseInt(offsetX);
+    }
+  }
+  if (offsetY !== undefined && offsetY !== null) {
+    if (typeof offsetY === 'object') {
+      let [key, value] = Object.entries(offsetY)[0];
+      old[key] = parseInt(value);
+    } else {
+      old.offsetY = parseInt(offsetY);
+    }
+  }
+};
+
+//?c4ShapeInRow, ?c4BoundaryInRow
+export const updateLayoutConfig = function (typeC4Shape, c4ShapeInRowParam, c4BoundaryInRowParam) {
+  let c4ShapeInRowValue = c4ShapeInRow;
+  let c4BoundaryInRowValue = c4BoundaryInRow;
+
+  if (typeof c4ShapeInRowParam === 'object') {
+    let [key, value] = Object.entries(c4ShapeInRowParam)[0];
+    c4ShapeInRowValue = parseInt(value);
+  } else {
+    c4ShapeInRowValue = parseInt(c4ShapeInRowParam);
+  }
+  if (typeof c4BoundaryInRowParam === 'object') {
+    let [key, value] = Object.entries(c4BoundaryInRowParam)[0];
+    c4BoundaryInRowValue = parseInt(value);
+  } else {
+    c4BoundaryInRowValue = parseInt(c4BoundaryInRowParam);
+  }
+
+  if (c4ShapeInRowValue >= 1) c4ShapeInRow = c4ShapeInRowValue;
+  if (c4BoundaryInRowValue >= 1) c4BoundaryInRow = c4BoundaryInRowValue;
+};
+
+export const getC4ShapeInRow = function () {
+  return c4ShapeInRow;
+};
+export const getC4BoundaryInRow = function () {
+  return c4BoundaryInRow;
+};
 export const getCurrentBoundaryParse = function () {
   return currentBoundaryParse;
 };
@@ -400,6 +717,13 @@ export const clear = function () {
   currentBoundaryParse = 'global';
   boundaryParseStack = [''];
   rels = [];
+
+  boundaryParseStack = [''];
+  title = '';
+  wrapEnabled = false;
+  description = '';
+  c4ShapeInRow = 4;
+  c4BoundaryInRow = 2;
 };
 
 export const LINETYPE = {
@@ -453,6 +777,9 @@ export default {
   addDeploymentNode,
   popBoundaryParseStack,
   addRel,
+  updateElStyle,
+  updateRelStyle,
+  updateLayoutConfig,
   autoWrap,
   setWrap,
   getC4ShapeArray,
@@ -464,6 +791,8 @@ export default {
   getRels,
   getTitle,
   getC4Type,
+  getC4ShapeInRow,
+  getC4BoundaryInRow,
   setAccTitle,
   getAccTitle,
   getAccDescription,

src/diagrams/c4/c4Renderer.js

@@ -5,24 +5,22 @@ import { parser } from './parser/c4Diagram';
 import common from '../common/common';
 import c4Db from './c4Db';
 import * as configApi from '../../config';
-import utils, {
-  wrapLabel,
-  calculateTextWidth,
-  calculateTextHeight,
-  assignWithDepth,
-  configureSvgSize,
-} from '../../utils';
+import assignWithDepth from '../../assignWithDepth';
+import { wrapLabel, calculateTextWidth, calculateTextHeight, configureSvgSize } from '../../utils';
 import addSVGAccessibilityFields from '../../accessibility';
 
 let globalBoundaryMaxX = 0,
   globalBoundaryMaxY = 0;
 
+let c4ShapeInRow = 4;
+let c4BoundaryInRow = 2;
+
 parser.yy = c4Db;
 
 let conf = {};
 
 class Bounds {
-  constructor() {
+  constructor(diagObj) {
     this.name = '';
     this.data = {};
     this.data.startx = undefined;
@@ -38,7 +36,7 @@ class Bounds {
     this.nextData.stopy = undefined;
     this.nextData.cnt = 0;
 
-    setConf(parser.yy.getConfig());
+    setConf(diagObj.db.getConfig());
   }
 
   setData(startx, stopx, starty, stopy) {
@@ -68,7 +66,7 @@ class Bounds {
     if (
       _startx >= this.data.widthLimit ||
       _stopx >= this.data.widthLimit ||
-      this.nextData.cnt > conf.c4ShapeInRow
+      this.nextData.cnt > c4ShapeInRow
     ) {
       _startx = this.nextData.startx + c4Shape.margin + conf.nextLinePaddingX;
       _starty = this.nextData.stopy + c4Shape.margin * 2;
@@ -93,7 +91,7 @@ class Bounds {
     this.updateVal(this.nextData, 'stopy', _stopy, Math.max);
   }
 
-  init() {
+  init(diagObj) {
     this.name = '';
     this.data = {
       startx: undefined,
@@ -109,7 +107,7 @@ class Bounds {
       stopy: undefined,
       cnt: 0,
     };
-    setConf(parser.yy.getConfig());
+    setConf(diagObj.db.getConfig());
   }
 
   bumpLastMargin(margin) {
@@ -408,13 +406,13 @@ let getIntersectPoints = function (fromNode, endNode) {
   return { startPoint: startPoint, endPoint: endPoint };
 };
 
-export const drawRels = function (diagram, rels, getC4ShapeObj) {
+export const drawRels = function (diagram, rels, getC4ShapeObj, diagObj) {
   let i = 0;
   for (let rel of rels) {
     i = i + 1;
     let relTextWrap = rel.wrap && conf.wrap;
     let relConf = messageFont(conf);
-    let diagramType = parser.yy.getC4Type();
+    let diagramType = diagObj.db.getC4Type();
     if (diagramType === 'C4Dynamic') rel.label.text = i + ': ' + rel.label.text;
     let textLimitWidth = calculateTextWidth(rel.label.text, relConf);
     calcC4ShapeTextWH('label', rel, relTextWrap, relConf, textLimitWidth);
@@ -443,12 +441,13 @@ export const drawRels = function (diagram, rels, getC4ShapeObj) {
  * @param parentBoundaryAlias
  * @param parentBounds
  * @param currentBoundarys
+ * @param diagObj
  */
-function drawInsideBoundary(diagram, parentBoundaryAlias, parentBounds, currentBoundarys) {
-  let currentBounds = new Bounds();
+function drawInsideBoundary(diagram, parentBoundaryAlias, parentBounds, currentBoundarys, diagObj) {
+  let currentBounds = new Bounds(diagObj);
   // Calculate the width limit of the boundar.  label/type 的长度，
   currentBounds.data.widthLimit =
-    parentBounds.data.widthLimit / Math.min(conf.c4BoundaryInRow, currentBoundarys.length);
+    parentBounds.data.widthLimit / Math.min(c4BoundaryInRow, currentBoundarys.length);
   // Math.min(
   //   conf.width * conf.c4ShapeInRow + conf.c4ShapeMargin * conf.c4ShapeInRow * 2,
   //   parentBounds.data.widthLimit / Math.min(conf.c4BoundaryInRow, currentBoundarys.length)
@@ -507,7 +506,7 @@ function drawInsideBoundary(diagram, parentBoundaryAlias, parentBounds, currentB
       Y = currentBoundary['descr'].Y + currentBoundary['descr'].height;
     }
 
-    if (i == 0 || i % conf.c4BoundaryInRow === 0) {
+    if (i == 0 || i % c4BoundaryInRow === 0) {
       // Calculate the drawing start point of the currentBoundarys.
       let _x = parentBounds.data.startx + conf.diagramMarginX;
       let _y = parentBounds.data.stopy + conf.diagramMarginY + Y;
@@ -524,8 +523,8 @@ function drawInsideBoundary(diagram, parentBoundaryAlias, parentBounds, currentB
       currentBounds.setData(_x, _x, _y, _y);
     }
     currentBounds.name = currentBoundary.alias;
-    let currentPersonOrSystemArray = parser.yy.getC4ShapeArray(currentBoundary.alias);
-    let currentPersonOrSystemKeys = parser.yy.getC4ShapeKeys(currentBoundary.alias);
+    let currentPersonOrSystemArray = diagObj.db.getC4ShapeArray(currentBoundary.alias);
+    let currentPersonOrSystemKeys = diagObj.db.getC4ShapeKeys(currentBoundary.alias);
 
     if (currentPersonOrSystemKeys.length > 0) {
       drawC4ShapeArray(
@@ -536,13 +535,19 @@ function drawInsideBoundary(diagram, parentBoundaryAlias, parentBounds, currentB
       );
     }
     parentBoundaryAlias = currentBoundary.alias;
-    let nextCurrentBoundarys = parser.yy.getBoundarys(parentBoundaryAlias);
+    let nextCurrentBoundarys = diagObj.db.getBoundarys(parentBoundaryAlias);
 
     if (nextCurrentBoundarys.length > 0) {
       // draw boundary inside currentBoundary
       // bounds.init();
       // parentBoundaryWidthLimit = bounds.data.stopx - bounds.startx;
-      drawInsideBoundary(diagram, parentBoundaryAlias, currentBounds, nextCurrentBoundarys);
+      drawInsideBoundary(
+        diagram,
+        parentBoundaryAlias,
+        currentBounds,
+        nextCurrentBoundarys,
+        diagObj
+      );
     }
     // draw boundary
     if (currentBoundary.alias !== 'global') drawBoundary(diagram, currentBoundary, currentBounds);
@@ -563,12 +568,15 @@ function drawInsideBoundary(diagram, parentBoundaryAlias, parentBounds, currentB
  * Draws a sequenceDiagram in the tag with id: id based on the graph definition in text.
  *
  * @param {any} text
+ * @param _text
  * @param {any} id
+ * @param _version
+ * @param diagObj
  */
-export const draw = function (text, id) {
+export const draw = function (_text, id, _version, diagObj) {
   conf = configApi.getConfig().c4;
   const securityLevel = configApi.getConfig().securityLevel;
-  // Handle root and ocument for when rendering in sanbox mode
+  // Handle root and Document for when rendering in sanbox mode
   let sandboxElement;
   if (securityLevel === 'sandbox') {
     sandboxElement = select('#i' + id);
@@ -577,11 +585,13 @@ export const draw = function (text, id) {
     securityLevel === 'sandbox'
       ? select(sandboxElement.nodes()[0].contentDocument.body)
       : select('body');
-  const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
 
-  parser.yy.clear();
-  parser.yy.setWrap(conf.wrap);
-  parser.parse(text + '\n');
+  let db = diagObj.db;
+
+  diagObj.db.setWrap(conf.wrap);
+
+  c4ShapeInRow = db.getC4ShapeInRow();
+  c4BoundaryInRow = db.getC4BoundaryInRow();
 
   log.debug(`C:${JSON.stringify(conf, null, 2)}`);
 
@@ -592,7 +602,8 @@ export const draw = function (text, id) {
   svgDraw.insertDatabaseIcon(diagram);
   svgDraw.insertClockIcon(diagram);
 
-  let screenBounds = new Bounds();
+  let screenBounds = new Bounds(diagObj);
+
   screenBounds.setData(
     conf.diagramMarginX,
     conf.diagramMarginX,
@@ -604,12 +615,12 @@ export const draw = function (text, id) {
   globalBoundaryMaxX = conf.diagramMarginX;
   globalBoundaryMaxY = conf.diagramMarginY;
 
-  const title = parser.yy.getTitle();
-  const c4type = parser.yy.getC4Type();
-  let currentBoundarys = parser.yy.getBoundarys('');
+  const title = diagObj.db.getTitle();
+  const c4type = diagObj.db.getC4Type();
+  let currentBoundarys = diagObj.db.getBoundarys('');
   // switch (c4type) {
   //   case 'C4Context':
-  drawInsideBoundary(diagram, '', screenBounds, currentBoundarys);
+  drawInsideBoundary(diagram, '', screenBounds, currentBoundarys, diagObj);
   //     break;
   // }
 
@@ -619,7 +630,7 @@ export const draw = function (text, id) {
   svgDraw.insertArrowCrossHead(diagram);
   svgDraw.insertArrowFilledHead(diagram);
 
-  drawRels(diagram, parser.yy.getRels(), parser.yy.getC4Shape);
+  drawRels(diagram, diagObj.db.getRels(), diagObj.db.getC4Shape, diagObj);
 
   screenBounds.data.stopx = globalBoundaryMaxX;
   screenBounds.data.stopy = globalBoundaryMaxY;

src/diagrams/c4/parser/c4Diagram.jison

@@ -61,14 +61,27 @@
 %x rel_r
 %x rel_b
 
+/* Custom tags/stereotypes */
+%x update_el_style
+%x update_rel_style
+%x update_layout_config
+
 %x attribute
 %x string
+%x string_kv
+%x string_kv_key
+%x string_kv_value
 
 %x open_directive
 %x type_directive
 %x arg_directive
+%x close_directive
+%x acc_title
+%x acc_descr
+%x acc_descr_multiline
 
 %%
+
 \%\%\{                                    { this.begin('open_directive'); return 'open_directive'; }
 .*direction\s+TB[^\n]*                    return 'direction_tb';
 .*direction\s+BT[^\n]*                    return 'direction_bt';
@@ -78,11 +91,21 @@
 <type_directive>":"                       { this.popState(); this.begin('arg_directive'); return ':'; }
 <type_directive,arg_directive>\}\%\%      { this.popState(); this.popState(); return 'close_directive'; }
 <arg_directive>((?:(?!\}\%\%).|\n)*)      return 'arg_directive';
-\%\%(?!\{)*[^\n]*(\r?\n?)+                /* skip comments */
-\%\%[^\n]*(\r?\n)*            c            /* skip comments */
+
 
 "title"\s[^#\n;]+                         return 'title';
 "accDescription"\s[^#\n;]+                return 'accDescription';
+accTitle\s*":"\s*                         { this.begin("acc_title");return 'acc_title'; }
+<acc_title>(?!\n|;|#)*[^\n]*              { this.popState(); return "acc_title_value"; }
+accDescr\s*":"\s*                         { this.begin("acc_descr");return 'acc_descr'; }
+<acc_descr>(?!\n|;|#)*[^\n]*              { this.popState(); return "acc_descr_value"; }
+accDescr\s*"{"\s*                         { this.begin("acc_descr_multiline");}
+<acc_descr_multiline>[\}]                 { this.popState(); }
+<acc_descr_multiline>[^\}]*               return "acc_descr_multiline_value";
+
+
+\%\%(?!\{)*[^\n]*(\r?\n?)+                /* skip comments */
+\%\%[^\n]*(\r?\n)*            c            /* skip comments */
 
 \s*(\r?\n)+                               return 'NEWLINE';
 \s+                                       /* skip whitespace */
@@ -140,10 +163,14 @@
 "Rel_Back"                                { this.begin("rel_b"); console.log('begin rel_b'); return 'REL_B';}  
 "RelIndex"                                { this.begin("rel_index"); console.log('begin rel_index'); return 'REL_INDEX';} 
 
-<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index><<EOF>>                return "EOF_IN_STRUCT";
-<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index>[(][ ]*[,]             { console.log('begin attribute with ATTRIBUTE_EMPTY'); this.begin("attribute"); return "ATTRIBUTE_EMPTY";}
-<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index>[(]                    { console.log('begin attribute'); this.begin("attribute"); }
-<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,attribute>[)]          { console.log('STOP attribute'); this.popState();console.log('STOP diagram'); this.popState();}
+"UpdateElementStyle"                      { this.begin("update_el_style"); console.log('begin update_el_style'); return 'UPDATE_EL_STYLE';}  
+"UpdateRelStyle"                          { this.begin("update_rel_style"); console.log('begin update_rel_style'); return 'UPDATE_REL_STYLE';} 
+"UpdateLayoutConfig"                      { this.begin("update_layout_config"); console.log('begin update_layout_config'); return 'UPDATE_LAYOUT_CONFIG';} 
+
+<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config><<EOF>>                return "EOF_IN_STRUCT";
+<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config>[(][ ]*[,]             { console.log('begin attribute with ATTRIBUTE_EMPTY'); this.begin("attribute"); return "ATTRIBUTE_EMPTY";}
+<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config>[(]                    { console.log('begin attribute'); this.begin("attribute"); }
+<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config,attribute>[)]          { console.log('STOP attribute'); this.popState();console.log('STOP diagram'); this.popState();}
 
 <attribute>",,"                           { console.log(',,'); return 'ATTRIBUTE_EMPTY';}
 <attribute>","                            { console.log(','); }
@@ -151,6 +178,13 @@
 <attribute>[ ]*["]                        { console.log('begin string'); this.begin("string");}
 <string>["]                               { console.log('STOP string');  this.popState(); }
 <string>[^"]*                             { console.log('STR'); return "STR";}
+
+<attribute>[ ]*[\$]                       { console.log('begin string_kv'); this.begin("string_kv");}
+<string_kv>[^=]*                          { console.log('STR_KEY'); this.begin("string_kv_key"); return "STR_KEY";}
+<string_kv_key>[=][ ]*["]                 { console.log('begin string_kv_value'); this.popState(); this.begin("string_kv_value"); }
+<string_kv_value>[^"]+                    { console.log('STR_VALUE'); return "STR_VALUE";}
+<string_kv_value>["]                      { console.log('STOP string_kv_value'); this.popState(); this.popState(); }
+
 <attribute>[^,]+                          { console.log('not STR'); return "STR";}
 
 '{'                                       { /* this.begin("lbrace"); */ console.log('begin boundary block'); return "LBRACE";}
@@ -235,6 +269,9 @@ otherStatements
 otherStatement
     : title {yy.setTitle($1.substring(6));$$=$1.substring(6);}
     | accDescription {yy.setAccDescription($1.substring(15));$$=$1.substring(15);}   
+    | acc_title acc_title_value  { $$=$2.trim();yy.setTitle($$); }
+    | acc_descr acc_descr_value  { $$=$2.trim();yy.setAccDescription($$); }
+    | acc_descr_multiline_value  { $$=$1.trim();yy.setAccDescription($$); } 
     ;
 
 boundaryStatement
@@ -297,6 +334,9 @@ diagramStatement
     | REL_R attributes {console.log($1,JSON.stringify($2)); yy.addRel('rel_r', ...$2); $$=$2;}
     | REL_B attributes {console.log($1,JSON.stringify($2)); yy.addRel('rel_b', ...$2); $$=$2;}
     | REL_INDEX attributes {console.log($1,JSON.stringify($2)); $2.splice(0, 1); yy.addRel('rel', ...$2); $$=$2;}
+    | UPDATE_EL_STYLE attributes {console.log($1,JSON.stringify($2)); yy.updateElStyle('update_el_style', ...$2); $$=$2;}
+    | UPDATE_REL_STYLE attributes {console.log($1,JSON.stringify($2)); yy.updateRelStyle('update_rel_style', ...$2); $$=$2;}
+    | UPDATE_LAYOUT_CONFIG attributes {console.log($1,JSON.stringify($2)); yy.updateLayoutConfig('update_layout_config', ...$2); $$=$2;}
     ;
 
 attributes
@@ -306,7 +346,7 @@ attributes
 
 attribute
     : STR {  $$ = $1.trim(); }
+    | STR_KEY STR_VALUE { console.log('kv: ', $1, $2); let kv={}; kv[$1.trim()]=$2.trim(); $$=kv; }
     | ATTRIBUTE {  $$ = $1.trim(); }
     | ATTRIBUTE_EMPTY {  $$ = ""; }
     ;
-