Merge branch 'release/9.1.3' into 3061_refactoring_and_modularisation

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:

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/e2e/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/e2e/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/e2e/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/e2e/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/e2e/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/e2e/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/e2e/rendering/sequencediagram.spec.js

@@ -76,7 +76,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
         loop Loopy
             Bob->>Alice: Pasten
         end      `,
@@ -143,7 +143,7 @@ context('Sequence diagram', () => {
       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 +154,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 +166,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 +190,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 +201,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 +212,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 +223,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 +234,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 +245,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 +255,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 +265,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 +276,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 +286,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/helpers/util.js

@@ -70,6 +70,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/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/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>
-

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/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

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 Controlle", "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/gitgraph.md

@@ -194,7 +194,7 @@ Here, a new commit representing the cherry-pick is created on the current branch
 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 case an error is throw.
+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
@@ -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:

docs/index.html

@@ -17,7 +17,7 @@
     />
     <!-- <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>
+    <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.3/dist/mermaid.min.js"></script>
     <!-- <script src="http://localhost:9000/mermaid.js"></script> -->
     <script>
       // prettier-ignore

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "9.1.2",
+  "version": "9.1.3",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "main": "dist/mermaid.core.js",
   "module": "dist/mermaid.esm.min.mjs",
@@ -81,7 +81,7 @@
     "concurrently": "^7.0.0",
     "coveralls": "^3.0.2",
     "css-to-string-loader": "^0.1.3",
-    "cypress": "10.1.0",
+    "cypress": "10.2.0",
     "cypress-image-snapshot": "^4.0.1",
     "documentation": "13.2.0",
     "eslint": "^8.4.1",

src/config.js

@@ -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/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

@@ -1084,14 +1084,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 +1120,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 +1140,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/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

@@ -17,6 +17,9 @@ import addSVGAccessibilityFields from '../../accessibility';
 let globalBoundaryMaxX = 0,
   globalBoundaryMaxY = 0;
 
+let c4ShapeInRow = 4;
+let c4BoundaryInRow = 2;
+
 parser.yy = c4Db;
 
 let conf = {};
@@ -68,7 +71,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;
@@ -448,7 +451,7 @@ function drawInsideBoundary(diagram, parentBoundaryAlias, parentBounds, currentB
   let currentBounds = new Bounds();
   // 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 +510,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;
@@ -568,7 +571,7 @@ function drawInsideBoundary(diagram, parentBoundaryAlias, parentBounds, currentB
 export const draw = function (text, id) {
   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);
@@ -579,10 +582,15 @@ export const draw = function (text, id) {
       : select('body');
   const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
 
+  let db = parser.yy;
+
   parser.yy.clear();
   parser.yy.setWrap(conf.wrap);
   parser.parse(text + '\n');
 
+  c4ShapeInRow = db.getC4ShapeInRow();
+  c4BoundaryInRow = db.getC4BoundaryInRow();
+
   log.debug(`C:${JSON.stringify(conf, null, 2)}`);
 
   const diagram =
@@ -593,6 +601,7 @@ export const draw = function (text, id) {
   svgDraw.insertClockIcon(diagram);
 
   let screenBounds = new Bounds();
+
   screenBounds.setData(
     conf.diagramMarginX,
     conf.diagramMarginX,

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 {  $$ = ""; }
     ;
-

src/diagrams/c4/svgDraw.js

@@ -216,6 +216,11 @@ export const drawRels = (elem, rels, conf) => {
   const relsElem = elem.append('g');
   let i = 0;
   for (let rel of rels) {
+    let textColor = rel.textColor ? rel.textColor : '#444444';
+    let strokeColor = rel.lineColor ? rel.lineColor : '#444444';
+    let offsetX = rel.offsetX ? parseInt(rel.offsetX) : 0;
+    let offsetY = rel.offsetY ? parseInt(rel.offsetY) : 0;
+
     let url = '';
     if (i === 0) {
       let line = relsElem.append('line');
@@ -225,7 +230,7 @@ export const drawRels = (elem, rels, conf) => {
       line.attr('y2', rel.endPoint.y);
 
       line.attr('stroke-width', '1');
-      line.attr('stroke', '#444444');
+      line.attr('stroke', strokeColor);
       line.style('fill', 'none');
       if (rel.type !== 'rel_b') line.attr('marker-end', 'url(' + url + '#arrowhead)');
       if (rel.type === 'birel' || rel.type === 'rel_b')
@@ -236,7 +241,7 @@ export const drawRels = (elem, rels, conf) => {
       line
         .attr('fill', 'none')
         .attr('stroke-width', '1')
-        .attr('stroke', '#444444')
+        .attr('stroke', strokeColor)
         .attr(
           'd',
           'Mstartx,starty Qcontrolx,controly stopx,stopy '
@@ -261,11 +266,15 @@ export const drawRels = (elem, rels, conf) => {
     _drawTextCandidateFunc(conf)(
       rel.label.text,
       relsElem,
-      Math.min(rel.startPoint.x, rel.endPoint.x) + Math.abs(rel.endPoint.x - rel.startPoint.x) / 2,
-      Math.min(rel.startPoint.y, rel.endPoint.y) + Math.abs(rel.endPoint.y - rel.startPoint.y) / 2,
+      Math.min(rel.startPoint.x, rel.endPoint.x) +
+        Math.abs(rel.endPoint.x - rel.startPoint.x) / 2 +
+        offsetX,
+      Math.min(rel.startPoint.y, rel.endPoint.y) +
+        Math.abs(rel.endPoint.y - rel.startPoint.y) / 2 +
+        offsetY,
       rel.label.width,
       rel.label.height,
-      { fill: '#444444' },
+      { fill: textColor },
       messageConf
     );
 
@@ -275,14 +284,16 @@ export const drawRels = (elem, rels, conf) => {
         '[' + rel.techn.text + ']',
         relsElem,
         Math.min(rel.startPoint.x, rel.endPoint.x) +
-          Math.abs(rel.endPoint.x - rel.startPoint.x) / 2,
+          Math.abs(rel.endPoint.x - rel.startPoint.x) / 2 +
+          offsetX,
         Math.min(rel.startPoint.y, rel.endPoint.y) +
           Math.abs(rel.endPoint.y - rel.startPoint.y) / 2 +
           conf.messageFontSize +
-          5,
+          5 +
+          offsetY,
         Math.max(rel.label.width, rel.techn.width),
         rel.techn.height,
-        { fill: '#444444', 'font-style': 'italic' },
+        { fill: textColor, 'font-style': 'italic' },
         messageConf
       );
     }
@@ -299,13 +310,17 @@ export const drawRels = (elem, rels, conf) => {
 const drawBoundary = function (elem, boundary, conf) {
   const boundaryElem = elem.append('g');
 
+  let fillColor = boundary.bgColor ? boundary.bgColor : 'none';
+  let strokeColor = boundary.borderColor ? boundary.borderColor : '#444444';
+  let fontColor = boundary.fontColor ? boundary.fontColor : 'black';
+
   let attrsValue = { 'stroke-width': 1.0, 'stroke-dasharray': '7.0,7.0' };
   if (boundary.nodeType) attrsValue = { 'stroke-width': 1.0 };
   let rectData = {
     x: boundary.x,
     y: boundary.y,
-    fill: 'none',
-    stroke: '#444444',
+    fill: fillColor,
+    stroke: strokeColor,
     width: boundary.width,
     height: boundary.height,
     rx: 2.5,
@@ -315,10 +330,11 @@ const drawBoundary = function (elem, boundary, conf) {
 
   drawRect(boundaryElem, rectData);
 
-  // draw lable
+  // draw label
   let boundaryConf = conf.boundaryFont();
   boundaryConf.fontWeight = 'bold';
   boundaryConf.fontSize = boundaryConf.fontSize + 2;
+  boundaryConf.fontColor = fontColor;
   _drawTextCandidateFunc(conf)(
     boundary.label.text,
     boundaryElem,
@@ -333,6 +349,7 @@ const drawBoundary = function (elem, boundary, conf) {
   // draw type
   if (boundary.type && boundary.type.text !== '') {
     boundaryConf = conf.boundaryFont();
+    boundaryConf.fontColor = fontColor;
     _drawTextCandidateFunc(conf)(
       boundary.type.text,
       boundaryElem,
@@ -349,6 +366,7 @@ const drawBoundary = function (elem, boundary, conf) {
   if (boundary.descr && boundary.descr.text !== '') {
     boundaryConf = conf.boundaryFont();
     boundaryConf.fontSize = boundaryConf.fontSize - 2;
+    boundaryConf.fontColor = fontColor;
     _drawTextCandidateFunc(conf)(
       boundary.descr.text,
       boundaryElem,
@@ -363,8 +381,12 @@ const drawBoundary = function (elem, boundary, conf) {
 };
 
 export const drawC4Shape = function (elem, c4Shape, conf) {
-  let fillColor = conf[c4Shape.typeC4Shape.text + '_bg_color'];
-  let strokeColor = conf[c4Shape.typeC4Shape.text + '_border_color'];
+  let fillColor = c4Shape.bgColor ? c4Shape.bgColor : conf[c4Shape.typeC4Shape.text + '_bg_color'];
+  let strokeColor = c4Shape.borderColor
+    ? c4Shape.borderColor
+    : conf[c4Shape.typeC4Shape.text + '_border_color'];
+  let fontColor = c4Shape.fontColor ? c4Shape.fontColor : '#FFFFFF';
+
   let personImg =
     'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAIAAADYYG7QAAACD0lEQVR4Xu2YoU4EMRCGT+4j8Ai8AhaH4QHgAUjQuFMECUgMIUgwJAgMhgQsAYUiJCiQIBBY+EITsjfTdme6V24v4c8vyGbb+ZjOtN0bNcvjQXmkH83WvYBWto6PLm6v7p7uH1/w2fXD+PBycX1Pv2l3IdDm/vn7x+dXQiAubRzoURa7gRZWd0iGRIiJbOnhnfYBQZNJjNbuyY2eJG8fkDE3bbG4ep6MHUAsgYxmE3nVs6VsBWJSGccsOlFPmLIViMzLOB7pCVO2AtHJMohH7Fh6zqitQK7m0rJvAVYgGcEpe//PLdDz65sM4pF9N7ICcXDKIB5Nv6j7tD0NoSdM2QrU9Gg0ewE1LqBhHR3BBdvj2vapnidjHxD/q6vd7Pvhr31AwcY8eXMTXAKECZZJFXuEq27aLgQK5uLMohCenGGuGewOxSjBvYBqeG6B+Nqiblggdjnc+ZXDy+FNFpFzw76O3UBAROuXh6FoiAcf5g9eTvUgzy0nWg6I8cXHRUpg5bOVBCo+KDpFajOf23GgPme7RSQ+lacIENUgJ6gg1k6HjgOlqnLqip4tEuhv0hNEMXUD0clyXE3p6pZA0S2nnvTlXwLJEZWlb7cTQH1+USgTN4VhAenm/wea1OCAOmqo6fE1WCb9WSKBah+rbUWPWAmE2Rvk0ApiB45eOyNAzU8xcTvj8KvkKEoOaIYeHNA3ZuygAvFMUO0AAAAASUVORK5CYII=';
   switch (c4Shape.typeC4Shape.text) {
@@ -473,7 +495,7 @@ export const drawC4Shape = function (elem, c4Shape, conf) {
   let c4ShapeFontConf = getC4ShapeFont(conf, c4Shape.typeC4Shape.text);
   c4ShapeElem
     .append('text')
-    .attr('fill', '#FFFFFF')
+    .attr('fill', fontColor)
     .attr('font-family', c4ShapeFontConf.fontFamily)
     .attr('font-size', c4ShapeFontConf.fontSize - 2)
     .attr('font-style', 'italic')
@@ -502,6 +524,7 @@ export const drawC4Shape = function (elem, c4Shape, conf) {
   let textFontConf = conf[c4Shape.typeC4Shape.text + 'Font']();
   textFontConf.fontWeight = 'bold';
   textFontConf.fontSize = textFontConf.fontSize + 2;
+  textFontConf.fontColor = fontColor;
   _drawTextCandidateFunc(conf)(
     c4Shape.label.text,
     c4ShapeElem,
@@ -509,12 +532,13 @@ export const drawC4Shape = function (elem, c4Shape, conf) {
     c4Shape.y + c4Shape.label.Y,
     c4Shape.width,
     c4Shape.height,
-    { fill: '#FFFFFF' },
+    { fill: fontColor },
     textFontConf
   );
 
   // draw techn/type
   textFontConf = conf[c4Shape.typeC4Shape.text + 'Font']();
+  textFontConf.fontColor = fontColor;
 
   if (c4Shape.thchn && c4Shape.thchn.text !== '') {
     _drawTextCandidateFunc(conf)(
@@ -524,7 +548,7 @@ export const drawC4Shape = function (elem, c4Shape, conf) {
       c4Shape.y + c4Shape.thchn.Y,
       c4Shape.width,
       c4Shape.height,
-      { fill: '#FFFFFF', 'font-style': 'italic' },
+      { fill: fontColor, 'font-style': 'italic' },
       textFontConf
     );
   } else if (c4Shape.type && c4Shape.type.text !== '') {
@@ -535,7 +559,7 @@ export const drawC4Shape = function (elem, c4Shape, conf) {
       c4Shape.y + c4Shape.type.Y,
       c4Shape.width,
       c4Shape.height,
-      { fill: '#FFFFFF', 'font-style': 'italic' },
+      { fill: fontColor, 'font-style': 'italic' },
       textFontConf
     );
   }
@@ -543,6 +567,7 @@ export const drawC4Shape = function (elem, c4Shape, conf) {
   // draw descr
   if (c4Shape.descr && c4Shape.descr.text !== '') {
     textFontConf = conf.personFont();
+    textFontConf.fontColor = fontColor;
     _drawTextCandidateFunc(conf)(
       c4Shape.descr.text,
       c4ShapeElem,
@@ -550,7 +575,7 @@ export const drawC4Shape = function (elem, c4Shape, conf) {
       c4Shape.y + c4Shape.descr.Y,
       c4Shape.width,
       c4Shape.height,
-      { fill: '#FFFFFF' },
+      { fill: fontColor },
       textFontConf
     );
   }

src/diagrams/class/classRenderer-v2.js

@@ -138,7 +138,7 @@ export const addClasses = function (classes, g) {
 };
 
 /**
- * Add edges to graph based on parsed graph defninition
+ * Add edges to graph based on parsed graph definition
  *
  * @param relations
  * @param {object} g The graph object
@@ -317,7 +317,7 @@ export const draw = function (text, id) {
   //   flowDb.addVertex(subG.id, subG.title, 'group', undefined, subG.classes);
   // }
 
-  // Fetch the verices/nodes and edges/links from the parsed graph definition
+  // Fetch the vertices/nodes and edges/links from the parsed graph definition
   const classes = classDb.getClasses();
   const relations = classDb.getRelations();
 

src/diagrams/class/classRenderer.js

@@ -168,7 +168,7 @@ export const draw = function (text, id) {
   log.info('Rendering diagram ' + text);
 
   const securityLevel = 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);

src/diagrams/er/erRenderer.js

@@ -547,7 +547,7 @@ export const draw = function (text, id) {
   const parser = erParser.parser;
   parser.yy = erDb;
   const securityLevel = 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);
@@ -575,7 +575,7 @@ export const draw = function (text, id) {
   // ---
   // 1. Create all the entities in the svg node at 0,0, but with the correct dimensions (allowing for text content)
   // 2. Make sure they are all added to the graph
-  // 3. Add all the edges (relationships) to the graph aswell
+  // 3. Add all the edges (relationships) to the graph as well
   // 4. Let dagre do its magic to layout the graph.  This assigns:
   //    - the centre co-ordinates for each node, bearing in mind the dimensions and edge relationships
   //    - the path co-ordinates for each edge

src/diagrams/flowchart/flowDb.js

@@ -465,7 +465,7 @@ export const addSubGraph = function (_id, list, _title) {
     const prims = { boolean: {}, number: {}, string: {} };
     const objs = [];
 
-    let dir; //  = unbdefined; direction.trim();
+    let dir; //  = undefined; direction.trim();
     const nodeList = a.filter(function (item) {
       const type = typeof item;
       if (item.stmt && item.stmt === 'dir') {

src/diagrams/flowchart/parser/flow-comments.spec.js

@@ -58,7 +58,7 @@ describe('[Comments] when parsing', () => {
   });
 
   it('should handle comments at the end no trailing newline', function () {
-    const res = flow.parser.parse('graph TD;\n A-->B\n%% Commento');
+    const res = flow.parser.parse('graph TD;\n A-->B\n%% Comment');
 
     const vert = flow.parser.yy.getVertices();
     const edges = flow.parser.yy.getEdges();
@@ -73,7 +73,7 @@ describe('[Comments] when parsing', () => {
   });
 
   it('should handle comments at the end many trailing newlines', function () {
-    const res = flow.parser.parse('graph TD;\n A-->B\n%% Commento\n\n\n');
+    const res = flow.parser.parse('graph TD;\n A-->B\n%% Comment\n\n\n');
 
     const vert = flow.parser.yy.getVertices();
     const edges = flow.parser.yy.getEdges();

src/diagrams/flowchart/parser/flow.spec.js

@@ -12,7 +12,7 @@ describe('parsing a flow chart', function () {
     flow.parser.yy.clear();
   });
 
-  it('should handle a trailing whitespaces after statememnts', function () {
+  it('should handle a trailing whitespaces after statements', function () {
     const res = flow.parser.parse('graph TD;\n\n\n %% Comment\n A-->B; \n B-->C;');
 
     const vert = flow.parser.yy.getVertices();

src/diagrams/gantt/ganttRenderer.js

@@ -30,7 +30,7 @@ export const draw = function (text, id) {
   parser.parse(text);
 
   const securityLevel = 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);

src/diagrams/git/gitGraphRenderer.js

@@ -65,9 +65,9 @@ const drawText = (txt) => {
 };
 
 /**
- * Draws the commits with its symbol and labels. The function has tywo modes, one which only
+ * Draws the commits with its symbol and labels. The function has two modes, one which only
  * calculates the positions and one that does the actual drawing. This for a simple way getting the
- * vertical leyering rcorrect in the graph.
+ * vertical layering correct in the graph.
  *
  * @param {any} svg
  * @param {any} commits
@@ -345,7 +345,7 @@ const findLane = (y1, y2, _depth) => {
 };
 
 /**
- * This function draw trhe lines between the commits. They were arrows initially.
+ * This function draw the lines between the commits. They were arrows initially.
  *
  * @param {any} svg
  * @param {any} commit1

src/diagrams/git/styles.js

@@ -26,9 +26,11 @@ const getStyles = (options) =>
     stroke: ${options.lineColor};
     stroke-dasharray: 2;
   }
-  .commit-label { font-size: 10px; fill: ${options.commitLabelColor};}
-  .commit-label-bkg { font-size: 10px; fill: ${options.commitLabelBackground}; opacity: 0.5; }
-  .tag-label { font-size: 10px; fill: ${options.tagLabelColor};}
+  .commit-label { font-size: ${options.commitLabelFontSize}; fill: ${options.commitLabelColor};}
+  .commit-label-bkg { font-size: ${options.commitLabelFontSize}; fill: ${
+    options.commitLabelBackground
+  }; opacity: 0.5; }
+  .tag-label { font-size: ${options.tagLabelFontSize}; fill: ${options.tagLabelColor};}
   .tag-label-bkg { fill: ${options.tagLabelBackground}; stroke: ${options.tagLabelBorder}; }
   .tag-hole { fill: ${options.textColor}; }
 

src/diagrams/info/infoRenderer.js

@@ -28,7 +28,7 @@ export const draw = (text, id, version) => {
     log.debug('Renering info diagram\n' + text);
 
     const securityLevel = 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);

src/diagrams/pie/pieRenderer.js

@@ -25,7 +25,7 @@ export const draw = (txt, id) => {
     log.debug('Rendering info diagram\n' + txt);
 
     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);

src/diagrams/requirement/requirementRenderer.js

@@ -324,7 +324,7 @@ export const draw = (text, id) => {
   parser.parse(text);
 
   const securityLevel = 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);

src/diagrams/sequence/sequenceRenderer.js

@@ -587,7 +587,7 @@ function adjustLoopHeightForWrap(loopWidths, msg, preMargin, postMargin, addLoop
 export const draw = function (text, id) {
   conf = configApi.getConfig().sequence;
   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);

src/diagrams/state/shapes.js

@@ -362,7 +362,7 @@ export const drawNote = (text, g) => {
 
 /**
  * Starting point for drawing a state. The function finds out the specifics about the state and
- * renders with approprtiate function.
+ * renders with appropriate function.
  *
  * @param {any} elem
  * @param {any} stateDef

src/diagrams/state/stateDiagram-v2.spec.js

@@ -107,8 +107,8 @@ describe('state diagram, ', function () {
     });
     it('handle "as" in state names 2', function () {
       const str = `stateDiagram-v2
-      assembleas
-      state assembleas
+      assemblies
+      state assemblies
       `;
 
       parser.parse(str);
@@ -207,14 +207,14 @@ describe('state diagram, ', function () {
 
       parser.parse(str);
     });
-    it('should handle state deifintions with separation of id', function () {
+    it('should handle state definitions with separation of id', function () {
       const str = `stateDiagram-v2\n
       state "Long state description" as state1
       `;
 
       parser.parse(str);
     });
-    it('should handle state deifintions with separation of id', function () {
+    it('should handle state definitions with separation of id', function () {
       const str = `stateDiagram-v2
       state "Not Shooting State" as NotShooting {
         state "Idle mode" as Idle

src/diagrams/state/stateDiagram.spec.js

@@ -122,8 +122,8 @@ describe('state diagram, ', function () {
     });
     it('handle "as" in state names 2', function () {
       const str = `stateDiagram
-      assembleas
-      state assembleas
+      assemblies
+      state assemblies
       `;
 
       parser.parse(str);
@@ -222,14 +222,14 @@ describe('state diagram, ', function () {
 
       parser.parse(str);
     });
-    it('should handle state deifintions with separation of id', function () {
+    it('should handle state defintions with separation of id', function () {
       const str = `stateDiagram\n
         state "Long state description" as state1
         `;
 
       parser.parse(str);
     });
-    it('should handle state deifintions with separation of id', function () {
+    it('should handle state defintions with separation of id', function () {
       const str = `stateDiagram
       state "Not Shooting State" as NotShooting {
         state "Idle mode" as Idle

src/diagrams/state/stateRenderer.js

@@ -48,7 +48,7 @@ const insertMarkers = function (elem) {
 export const draw = function (text, id) {
   conf = getConfig().state;
   const securityLevel = 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);

src/diagrams/user-journey/journeyRenderer.js

@@ -56,7 +56,7 @@ export const draw = function (text, id) {
   parser.parse(text + '\n');
 
   const securityLevel = 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);

src/mermaid.js

@@ -90,7 +90,7 @@ const initThrowsErrors = function () {
     mermaidAPI.updateSiteConfig({ gantt: mermaid.ganttConfig });
   }
 
-  const idGeneratior = new utils.initIdGeneratior(conf.deterministicIds, conf.deterministicIDSeed);
+  const idGenerator = new utils.initIdGenerator(conf.deterministicIds, conf.deterministicIDSeed);
 
   let txt;
 
@@ -105,7 +105,7 @@ const initThrowsErrors = function () {
       continue;
     }
 
-    const id = `mermaid-${idGeneratior.next()}`;
+    const id = `mermaid-${idGenerator.next()}`;
 
     // Fetch the graph definition including tags
     txt = element.innerHTML;
@@ -189,7 +189,7 @@ if (typeof document !== 'undefined') {
 }
 
 /**
- * ## setParseErrorHandler  Alternativet to directly setting parseError using:
+ * ## setParseErrorHandler  Alternative to directly setting parseError using:
  *
  * ```js
  * mermaid.parseError = function(err,hash){=

src/mermaidAPI.js

@@ -196,7 +196,7 @@ const render = function (id, _txt, cb, container) {
 
   let root = select('body');
 
-  // In regular execurtion the container will be the div with a mermaid class
+  // In regular execution the container will be the div with a mermaid class
   if (typeof container !== 'undefined') {
     if (cnf.securityLevel === 'sandbox') {
       // IF we are in sandboxed mode, we do everyting mermaid related
@@ -240,7 +240,7 @@ const render = function (id, _txt, cb, container) {
   } else {
     // No container was provided
     // If there is an existsing element with the id, we remove it
-    // this likley a previously rendered diagram
+    // this likely a previously rendered diagram
     const existingSvg = document.getElementById(id);
     if (existingSvg) {
       existingSvg.remove();
@@ -300,6 +300,8 @@ const render = function (id, _txt, cb, container) {
 
   let userStyles = '';
   // user provided theme CSS
+  // If you add more configuration driven data into the user styles make sure that the value is
+  // sanitized bye the santiizeCSS function
   if (cnf.themeCSS !== undefined) {
     userStyles += `\n${cnf.themeCSS}`;
   }
@@ -615,7 +617,7 @@ function initialize(options) {
     }
   }
   // Set default options
-  configApi.saveConfigFromInitilize(options);
+  configApi.saveConfigFromInitialize(options);
 
   if (options && options.theme && theme[options.theme]) {
     // Todo merge with user options

src/styles.js

@@ -10,6 +10,7 @@ import sequence from './diagrams/sequence/styles';
 import stateDiagram from './diagrams/state/styles';
 import journey from './diagrams/user-journey/styles';
 import c4 from './diagrams/c4/styles';
+import { log } from './logger';
 
 const themes = {
   flowchart,
@@ -30,7 +31,10 @@ const themes = {
   c4,
 };
 
-export const calcThemeVariables = (theme, userOverRides) => theme.calcColors(userOverRides);
+export const calcThemeVariables = (theme, userOverRides) => {
+  log.info('userOverides', userOverRides);
+  return theme.calcColors(userOverRides);
+};
 
 const getStyles = (type, userStyles, options) => {
   return ` {

src/themes/theme-base.js

@@ -5,7 +5,7 @@ class Theme {
     /** # Base variables */
     /**
      * - Background - used to know what the background color is of the diagram. This is used for
-     *   deducing colors for istance line color. Defaulr value is #f4f4f4.
+     *   deducing colors for instance line color. Default value is #f4f4f4.
      */
     this.background = '#f4f4f4';
     this.darkMode = false;
@@ -21,7 +21,7 @@ class Theme {
     this.fontSize = '16px';
   }
   updateColors() {
-    // The || is to make sure that if the variable has been defiend by a user override that value is to be used
+    // The || is to make sure that if the variable has been defined by a user override that value is to be used
 
     /* Main */
     this.primaryTextColor = this.primaryTextColor || (this.darkMode ? '#eee' : '#333'); // invert(this.primaryColor);
@@ -103,7 +103,7 @@ class Theme {
     /* state colors */
     this.transitionColor = this.transitionColor || this.lineColor;
     this.transitionLabelColor = this.transitionLabelColor || this.textColor;
-    /* The color of the text tables of the tstates*/
+    /* The color of the text tables of the states*/
     this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;
 
     this.stateBkg = this.stateBkg || this.mainBkg;
@@ -215,8 +215,10 @@ class Theme {
     this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;
     this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;
     this.tagLabelBorder = this.tagBorder || this.primaryBorderColor;
+    this.tagLabelFontSize = this.tagLabelFontSize || '10px';
     this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
     this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
+    this.commitLabelFontSize = this.commitLabelFontSize || '10px';
   }
   calculate(overrides) {
     if (typeof overrides !== 'object') {

src/themes/theme-dark.js

@@ -214,8 +214,10 @@ class Theme {
     this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;
     this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;
     this.tagLabelBorder = this.tagBorder || this.primaryBorderColor;
+    this.tagLabelFontSize = this.tagLabelFontSize || '10px';
     this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
     this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
+    this.commitLabelFontSize = this.commitLabelFontSize || '10px';
   }
   calculate(overrides) {
     if (typeof overrides !== 'object') {

src/themes/theme-default.js

@@ -253,8 +253,10 @@ class Theme {
     this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;
     this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;
     this.tagLabelBorder = this.tagBorder || this.primaryBorderColor;
+    this.tagLabelFontSize = this.tagLabelFontSize || '10px';
     this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
     this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
+    this.commitLabelFontSize = this.commitLabelFontSize || '10px';
   }
   calculate(overrides) {
     if (typeof overrides !== 'object') {

src/themes/theme-forest.js

@@ -215,8 +215,10 @@ class Theme {
     this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;
     this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;
     this.tagLabelBorder = this.tagBorder || this.primaryBorderColor;
+    this.tagLabelFontSize = this.tagLabelFontSize || '10px';
     this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
     this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
+    this.commitLabelFontSize = this.commitLabelFontSize || '10px';
   }
   calculate(overrides) {
     if (typeof overrides !== 'object') {

src/themes/theme-neutral.js

@@ -257,8 +257,10 @@ class Theme {
     this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;
     this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;
     this.tagLabelBorder = this.tagBorder || this.primaryBorderColor;
+    this.tagLabelFontSize = this.tagLabelFontSize || '10px';
     this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
     this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
+    this.commitLabelFontSize = this.commitLabelFontSize || '10px';
   }
   calculate(overrides) {
     if (typeof overrides !== 'object') {

src/utils.js

@@ -945,7 +945,7 @@ export const setupGraphViewbox = function (graph, svgElem, padding, useMaxWidth)
   // Ensure the viewBox includes the whole svgBounds area with extra space for padding
   const vBox = `0 0 ${width} ${height}`;
   log.debug(
-    'Grpah.label',
+    'Graph.label',
     graph._label,
     'swidth',
     sWidth,
@@ -966,7 +966,7 @@ export const setupGraphViewbox = function (graph, svgElem, padding, useMaxWidth)
   svgElem.select('g').attr('transform', `translate(${tx}, ${ty})`);
 };
 
-export const initIdGeneratior = class iterator {
+export const initIdGenerator = class iterator {
   constructor(deterministic, seed) {
     this.deterministic = deterministic;
     this.seed = seed;
@@ -1032,6 +1032,14 @@ export const directiveSanitizer = (args) => {
           log.debug('sanitizing themeCss option');
           args[key] = sanitizeCss(args[key]);
         }
+        if (key.indexOf('fontFamily') >= 0) {
+          log.debug('sanitizing fontFamily option');
+          args[key] = sanitizeCss(args[key]);
+        }
+        if (key.indexOf('altFontFamily') >= 0) {
+          log.debug('sanitizing altFontFamily option');
+          args[key] = sanitizeCss(args[key]);
+        }
         if (configKeys.indexOf(key) < 0) {
           log.debug('sanitize deleting option', key);
           delete args[key];
@@ -1044,11 +1052,32 @@ export const directiveSanitizer = (args) => {
       });
     }
   }
+  if (args.themeVariables) {
+    const kArr = Object.keys(args.themeVariables);
+    for (let i = 0; i < kArr.length; i++) {
+      const k = kArr[i];
+      const val = args.themeVariables[k];
+      if (val && val.match && !val.match(/^[a-zA-Z0-9#,";()%. ]+$/)) {
+        args.themeVariables[k] = '';
+      }
+    }
+  }
+  log.debug('After sanitization', args);
 };
 export const sanitizeCss = (str) => {
-  const stringsearch = 'o';
-  const startCnt = (str.match(/\{/g) || []).length;
-  const endCnt = (str.match(/\}/g) || []).length;
+  let startCnt = 0;
+  let endCnt = 0;
+
+  for (let i = 0; i < str.length; i++) {
+    if (startCnt < endCnt) {
+      return '{ /* ERROR: Unbalanced CSS */ }';
+    }
+    if (str[i] === '{') {
+      startCnt++;
+    } else if (str[i] === '}') {
+      endCnt++;
+    }
+  }
   if (startCnt !== endCnt) {
     return '{ /* ERROR: Unbalanced CSS */ }';
   }
@@ -1080,7 +1109,7 @@ export default {
   memoize,
   runFunc,
   entityDecode,
-  initIdGeneratior,
+  initIdGenerator: initIdGenerator,
   directiveSanitizer,
   sanitizeCss,
 };

src/utils.spec.js

@@ -302,7 +302,7 @@ describe('when calculating SVG size', function () {
 
 describe('when initializing the id generator', function () {
   it('should return a random number generator based on Date', function (done) {
-    const idGenerator = new utils.initIdGeneratior(false);
+    const idGenerator = new utils.initIdGenerator(false);
     expect(typeof idGenerator.next).toEqual('function');
     const lastId = idGenerator.next();
     setTimeout(() => {
@@ -312,7 +312,7 @@ describe('when initializing the id generator', function () {
   });
 
   it('should return a non random number generator', function () {
-    const idGenerator = new utils.initIdGeneratior(true);
+    const idGenerator = new utils.initIdGenerator(true);
     expect(typeof idGenerator.next).toEqual('function');
     const start = 0;
     const lastId = idGenerator.next();
@@ -321,7 +321,7 @@ describe('when initializing the id generator', function () {
   });
 
   it('should return a non random number generator based on seed', function () {
-    const idGenerator = new utils.initIdGeneratior(true, 'thisIsASeed');
+    const idGenerator = new utils.initIdGenerator(true, 'thisIsASeed');
     expect(typeof idGenerator.next).toEqual('function');
     const start = 11;
     const lastId = idGenerator.next();

yarn.lock

@@ -1394,13 +1394,13 @@
   integrity sha512-mgmE7XBYY/21erpzhexk4Cj1cyTQ9LzvnTxtzM17BJ7ERMNE6W72mQRo0I1Ud8eFJ+RVVIcBNhLFZ3GX4XFz5w==
 
 "@commitlint/cli@^17.0.0":
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/@commitlint/cli/-/cli-17.0.2.tgz#57c925fb5f09b8e4a83448d94db291ddf7aa58ee"
-  integrity sha512-Axe89Js0YzGGd4gxo3JLlF7yIdjOVpG1LbOorGc6PfYF+drBh14PvarSDLzyd2TNqdylUCq9wb9/A88ZjIdyhA==
+  version "17.0.3"
+  resolved "https://registry.yarnpkg.com/@commitlint/cli/-/cli-17.0.3.tgz#50be9d9a8d79f6c47bfd2703638fe65215eb2526"
+  integrity sha512-oAo2vi5d8QZnAbtU5+0cR2j+A7PO8zuccux65R/EycwvsZrDVyW518FFrnJK2UQxbRtHFFIG+NjQ6vOiJV0Q8A==
   dependencies:
     "@commitlint/format" "^17.0.0"
-    "@commitlint/lint" "^17.0.0"
-    "@commitlint/load" "^17.0.0"
+    "@commitlint/lint" "^17.0.3"
+    "@commitlint/load" "^17.0.3"
     "@commitlint/read" "^17.0.0"
     "@commitlint/types" "^17.0.0"
     execa "^5.0.0"
@@ -1410,19 +1410,19 @@
     yargs "^17.0.0"
 
 "@commitlint/config-conventional@^17.0.0":
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/@commitlint/config-conventional/-/config-conventional-17.0.2.tgz#298c9076e25c1e8760f04ee1be8ce43c856a4b72"
-  integrity sha512-MfP0I/JbxKkzo+HXWB7B3WstGS4BiniotU3d3xQ9gK8cR0DbeZ4MuyGCWF65YDyrcDTS3WlrJ3ndSPA1pqhoPw==
+  version "17.0.3"
+  resolved "https://registry.yarnpkg.com/@commitlint/config-conventional/-/config-conventional-17.0.3.tgz#61e937357ce63ea08a2017e58b918748fcf3abc5"
+  integrity sha512-HCnzTm5ATwwwzNVq5Y57poS0a1oOOcd5pc1MmBpLbGmSysc4i7F/++JuwtdFPu16sgM3H9J/j2zznRLOSGVO2A==
   dependencies:
     conventional-changelog-conventionalcommits "^5.0.0"
 
-"@commitlint/config-validator@^17.0.0":
-  version "17.0.0"
-  resolved "https://registry.yarnpkg.com/@commitlint/config-validator/-/config-validator-17.0.0.tgz#49ab09f3ca0ac3449e79ea389cb4942423162ac0"
-  integrity sha512-78IQjoZWR4kDHp/U5y17euEWzswJpPkA9TDL5F6oZZZaLIEreWzrDZD5PWtM8MsSRl/K2LDU/UrzYju2bKLMpA==
+"@commitlint/config-validator@^17.0.3":
+  version "17.0.3"
+  resolved "https://registry.yarnpkg.com/@commitlint/config-validator/-/config-validator-17.0.3.tgz#5d1ec17eece1f85a0d06c05d168a039b313eb5d7"
+  integrity sha512-3tLRPQJKapksGE7Kee9axv+9z5I2GDHitDH4q63q7NmNA0wkB+DAorJ0RHz2/K00Zb1/MVdHzhCga34FJvDihQ==
   dependencies:
     "@commitlint/types" "^17.0.0"
-    ajv "^6.12.6"
+    ajv "^8.11.0"
 
 "@commitlint/ensure@^17.0.0":
   version "17.0.0"
@@ -1445,32 +1445,32 @@
     "@commitlint/types" "^17.0.0"
     chalk "^4.1.0"
 
-"@commitlint/is-ignored@^17.0.0":
-  version "17.0.0"
-  resolved "https://registry.yarnpkg.com/@commitlint/is-ignored/-/is-ignored-17.0.0.tgz#64f53517b390689e58aa3c29fbf1e05b7d4fbd65"
-  integrity sha512-UmacD0XM/wWykgdXn5CEWVS4XGuqzU+ZGvM2hwv85+SXGnIOaG88XHrt81u37ZeVt1riWW+YdOxcJW6+nd5v5w==
+"@commitlint/is-ignored@^17.0.3":
+  version "17.0.3"
+  resolved "https://registry.yarnpkg.com/@commitlint/is-ignored/-/is-ignored-17.0.3.tgz#0e1c725c1e50aea5852fb1260bc92b2ee1856425"
+  integrity sha512-/wgCXAvPtFTQZxsVxj7owLeRf5wwzcXLaYmrZPR4a87iD4sCvUIRl1/ogYrtOyUmHwWfQsvjqIB4mWE/SqWSnA==
   dependencies:
     "@commitlint/types" "^17.0.0"
     semver "7.3.7"
 
-"@commitlint/lint@^17.0.0":
-  version "17.0.0"
-  resolved "https://registry.yarnpkg.com/@commitlint/lint/-/lint-17.0.0.tgz#38ef61e0e977d738f738233fbcdf33a5fc04cf96"
-  integrity sha512-5FL7VLvGJQby24q0pd4UdM8FNFcL+ER1T/UBf8A9KRL5+QXV1Rkl6Zhcl7+SGpGlVo6Yo0pm6aLW716LVKWLGg==
+"@commitlint/lint@^17.0.3":
+  version "17.0.3"
+  resolved "https://registry.yarnpkg.com/@commitlint/lint/-/lint-17.0.3.tgz#98542a48f03b5c144309e24cbe1c032366ea75e2"
+  integrity sha512-2o1fk7JUdxBUgszyt41sHC/8Nd5PXNpkmuOo9jvGIjDHzOwXyV0PSdbEVTH3xGz9NEmjohFHr5l+N+T9fcxong==
   dependencies:
-    "@commitlint/is-ignored" "^17.0.0"
+    "@commitlint/is-ignored" "^17.0.3"
     "@commitlint/parse" "^17.0.0"
     "@commitlint/rules" "^17.0.0"
     "@commitlint/types" "^17.0.0"
 
-"@commitlint/load@^17.0.0":
-  version "17.0.0"
-  resolved "https://registry.yarnpkg.com/@commitlint/load/-/load-17.0.0.tgz#0bbefe6d8b99276714c5ea8ef32de2bd2f082698"
-  integrity sha512-XaiHF4yWQOPAI0O6wXvk+NYLtJn/Xb7jgZEeKd4C1ZWd7vR7u8z5h0PkWxSr0uLZGQsElGxv3fiZ32C5+q6M8w==
+"@commitlint/load@^17.0.3":
+  version "17.0.3"
+  resolved "https://registry.yarnpkg.com/@commitlint/load/-/load-17.0.3.tgz#683aa484a5515714512e442f2f4b11f75e66097a"
+  integrity sha512-3Dhvr7GcKbKa/ey4QJ5MZH3+J7QFlARohUow6hftQyNjzoXXROm+RwpBes4dDFrXG1xDw9QPXA7uzrOShCd4bw==
   dependencies:
-    "@commitlint/config-validator" "^17.0.0"
+    "@commitlint/config-validator" "^17.0.3"
     "@commitlint/execute-rule" "^17.0.0"
-    "@commitlint/resolve-extends" "^17.0.0"
+    "@commitlint/resolve-extends" "^17.0.3"
     "@commitlint/types" "^17.0.0"
     "@types/node" ">=12"
     chalk "^4.1.0"
@@ -1504,12 +1504,12 @@
     fs-extra "^10.0.0"
     git-raw-commits "^2.0.0"
 
-"@commitlint/resolve-extends@^17.0.0":
-  version "17.0.0"
-  resolved "https://registry.yarnpkg.com/@commitlint/resolve-extends/-/resolve-extends-17.0.0.tgz#3a40ee08184b984acf475ebc962641f435e3a639"
-  integrity sha512-wi60WiJmwaQ7lzMXK8Vbc18Hq9tE2j/6iv2AFfPUGV7fvfY6Sf1iNKuUHirSqR0fquUyufIXe4y/K9A6LVIIvw==
+"@commitlint/resolve-extends@^17.0.3":
+  version "17.0.3"
+  resolved "https://registry.yarnpkg.com/@commitlint/resolve-extends/-/resolve-extends-17.0.3.tgz#43b237899e2abd59d16af091521b888c8a071412"
+  integrity sha512-H/RFMvrcBeJCMdnVC4i8I94108UDccIHrTke2tyQEg9nXQnR5/Hd6MhyNWkREvcrxh9Y+33JLb+PiPiaBxCtBA==
   dependencies:
-    "@commitlint/config-validator" "^17.0.0"
+    "@commitlint/config-validator" "^17.0.3"
     "@commitlint/types" "^17.0.0"
     import-fresh "^3.0.0"
     lodash "^4.17.19"
@@ -2201,16 +2201,11 @@
   resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.31.tgz#31b7ca6407128a3d2bbc27fe2d21b345397f6197"
   integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==
 
-"@types/node@*":
+"@types/node@*", "@types/node@>=12":
   version "18.0.0"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.0.0.tgz#67c7b724e1bcdd7a8821ce0d5ee184d3b4dd525a"
   integrity sha512-cHlGmko4gWLVI27cGJntjs/Sj8th9aYwplmZFwmmgYQQvL5NUsgVJG7OddLvNfLqYS31KFN0s3qlaD9qCaxACA==
 
-"@types/node@>=12":
-  version "17.0.17"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.17.tgz#a8ddf6e0c2341718d74ee3dc413a13a042c45a0c"
-  integrity sha512-e8PUNQy1HgJGV3iU/Bp2+D/DXh3PYeyli8LgIwsQcs1Ar1LoaWHSIT6Rw+H2rNJmiq6SNWiDytfx8+gYj7wDHw==
-
 "@types/node@^14.14.31":
   version "14.18.0"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.0.tgz#98df2397f6936bfbff4f089e40e06fa5dd88d32a"
@@ -2705,7 +2700,7 @@ ajv-keywords@^5.0.0:
   dependencies:
     fast-deep-equal "^3.1.3"
 
-ajv@^6.10.0, ajv@^6.12.3, ajv@^6.12.4, ajv@^6.12.5, ajv@^6.12.6:
+ajv@^6.10.0, ajv@^6.12.3, ajv@^6.12.4, ajv@^6.12.5:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -2725,6 +2720,16 @@ ajv@^8.0.0, ajv@^8.8.0:
     require-from-string "^2.0.2"
     uri-js "^4.2.2"
 
+ajv@^8.11.0:
+  version "8.11.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.11.0.tgz#977e91dd96ca669f54a11e23e378e33b884a565f"
+  integrity sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    json-schema-traverse "^1.0.0"
+    require-from-string "^2.0.2"
+    uri-js "^4.2.2"
+
 amdefine@>=0.0.4:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
@@ -3355,9 +3360,9 @@ camelcase@^6.2.0:
   integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
 
 caniuse-lite@^1.0.30001332:
-  version "1.0.30001357"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001357.tgz"
-  integrity sha512-b+KbWHdHePp+ZpNj+RDHFChZmuN+J5EvuQUlee9jOQIUAdhv9uvAZeEtUeLAknXbkiu1uxjQ9NLp1ie894CuWg==
+  version "1.0.30001359"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001359.tgz"
+  integrity sha512-Xln/BAsPzEuiVLgJ2/45IaqD9jShtk3Y33anKb4+yLwQzws3+v6odKfpgES/cDEaZMLzSChpIGdbOYtH9MyuHw==
 
 caseless@~0.12.0:
   version "0.12.0"
@@ -4123,10 +4128,10 @@ cypress-image-snapshot@^4.0.1:
     pkg-dir "^3.0.0"
     term-img "^4.0.0"
 
-cypress@10.1.0:
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-10.1.0.tgz#6514a26c721822a02bc194e9a7f72c3142aea174"
-  integrity sha512-aQ4JVZVib4Xd9FZW8IRZfKelUvqF4y5A+oUbNvn8TlsBmEfIg3m5Xd6Mt6PVU/jHiVJ9Psl905B3ZPnrDcmyuQ==
+cypress@10.2.0:
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-10.2.0.tgz#ca078abfceb13be2a33cbba6e0e80ded770f542a"
+  integrity sha512-+i9lY5ENlfi2mJwsggzR+XASOIgMd7S/Gd3/13NCpv596n3YSplMAueBTIxNLcxDpTcIksp+9pM3UaDrJDpFqA==
   dependencies:
     "@cypress/request" "^2.88.10"
     "@cypress/xvfb" "^1.2.4"
@@ -7681,9 +7686,9 @@ lines-and-columns@^1.1.6:
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
 lint-staged@^13.0.0:
-  version "13.0.2"
-  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-13.0.2.tgz#35a1c57130e9ad5b1dea784972a40777ba433dd5"
-  integrity sha512-qQLfLTh9z34eMzfEHENC+QBskZfxjomrf+snF3xJ4BzilORbD989NLqQ00ughsF/A+PT41e87+WsMFabf9++pQ==
+  version "13.0.3"
+  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-13.0.3.tgz#d7cdf03a3830b327a2b63c6aec953d71d9dc48c6"
+  integrity sha512-9hmrwSCFroTSYLjflGI8Uk+GWAwMB4OlpU4bMJEAT5d/llQwtYKoim4bLOyLCuWFAhWEupE0vkIFqtw/WIsPug==
   dependencies:
     cli-truncate "^3.1.0"
     colorette "^2.0.17"