Merge branch 'master' into develop

Merge branch 'release/8.13.10'
chore: release 8.13.10
2025-09-29 12:19:41 +02:00 · 2022-01-22 10:11:06 +01:00 · 2022-01-22 10:10:43 +01:00 · 2022-01-22 10:10:11 +01:00 · 2022-01-22 08:06:17 +01:00 · 2022-01-18 23:26:43 +01:00
35 changed files with 2234 additions and 1226 deletions
--- a/.github/workflows/update-browserlist.yml
+++ b/.github/workflows/update-browserlist.yml
@@ -1,5 +1,7 @@
 name: Update Browserslist
 on:
+  schedule:
+    - cron: '0 7 * * 1'
  workflow_dispatch:

 jobs:
@@ -13,4 +15,4 @@ jobs:
        with:
          author_name: ${{ github.actor }}
          author_email: ${{ github.actor }}@users.noreply.github.com
-          message: 'Update Browserslist'
+          message: 'chore: update browsers list'
--- a/.husky/commit-msg
+++ b/.husky/commit-msg
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
--- a/README.md
+++ b/README.md
@@ -43,7 +43,7 @@ __The following are some examples of the diagrams, charts and graphs that can be
 </td></tr>
 <tr>
    <td><pre>
-graph TD
+flowchart TD
 A[Hard] -->|Text| B(Round)
 B --> C{Decision}
 C -->|One| D[Result 1]
@@ -210,6 +210,9 @@ Mermaid is a growing community and is always accepting new contributors. There's

 Detailed information about how to contribute can be found in the [contribution guide](CONTRIBUTING.md)

+## Reporting vulnerabilities
+To report a vulnerability, please e-mail security@mermaid.live with a description of the issue, the steps you took to create the issue, affected versions, and if known, mitigations for the issue.
+
 ## Appreciation
 A quick note from Knut Sveidqvist:
 >*Many thanks to the [d3](http://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!*
--- a/cypress/integration/other/xss.spec.js
+++ b/cypress/integration/other/xss.spec.js
@@ -110,4 +110,9 @@ describe('XSS', () => {
    cy.wait(1000);
    cy.get('#the-malware').should('not.exist');
  });
+  it('should sanitize cardinalities properly in class diagrams', () => {
+    cy.visit('http://localhost:9000/xss18.html');
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  });
 });
--- a/cypress/integration/rendering/erDiagram.spec.js
+++ b/cypress/integration/rendering/erDiagram.spec.js
@@ -183,11 +183,58 @@ describe('Entity Relationship Diagram', () => {
    cy.get('svg');
  });

+  it('should render entities with keys', () => {
+    renderGraph(
+      `
+    erDiagram
+      AUTHOR_WITH_LONG_ENTITY_NAME {
+        string name PK
+      }
+      AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
+      BOOK { 
+          float price
+          string author FK 
+          string title PK
+        }
+      `,
+      { logLevel: 1 }
+    );
+    cy.get('svg');
+  });
+
+  it('should render entities with comments', () => {
+    renderGraph(
+      `
+    erDiagram
+      AUTHOR_WITH_LONG_ENTITY_NAME {
+        string name "comment"
+      }
+      AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
+      BOOK { 
+          string author 
+          string title "author comment"
+          float price "price comment"
+        }
+      `,
+      { logLevel: 1 }
+    );
+    cy.get('svg');
+  });
+
  it('should render entities with keys and comments', () => {
    renderGraph(
      `
    erDiagram
-        BOOK { string title PK "comment"}
+      AUTHOR_WITH_LONG_ENTITY_NAME {
+        string name PK "comment"
+      }
+      AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
+      BOOK { 
+          string description
+          float price "price comment"
+          string title PK "title comment"
+          string author FK 
+        }
      `,
      { logLevel: 1 }
    );
--- a/cypress/platform/xss15.html
+++ b/cypress/platform/xss15.html
@@ -0,0 +1,107 @@
+<html>
+  <head>
+    <link
+      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+    />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
+    <style>
+      body {
+        /* background: rgb(221, 208, 208); */
+        /* background:#333; */
+        font-family: 'Arial';
+        /* font-size: 18px !important; */
+        }
+      h1 { color: grey;}
+      .mermaid2 {
+        display: none;
+      }
+      .mermaid svg {
+        /* font-size: 18px !important; */
+      }
+      .malware {
+        position: fixed;
+        bottom:0;
+        left:0;
+        right:0;
+        height: 150px;
+        background: red;
+        color: black;
+        display: flex;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-family: monospace;
+        font-size: 72px;
+      }
+    </style>
+  </head>
+  <body>
+    <div>Security check</div>
+    <div class="flex">
+      <div id="diagram" class="mermaid"></div>
+      <div id="res" class=""></div>
+  <script src="./mermaid.js"></script>
+    <script>
+      mermaid.parseError = function (err, hash) {
+        // console.error('Mermaid error: ', err);
+      };
+      mermaid.initialize({
+        theme: 'forest',
+        arrowMarkerAbsolute: true,
+        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
+        logLevel: 0,
+        state: {
+          defaultRenderer: 'dagre-d3',
+        },
+        flowchart: {
+          // defaultRenderer: 'dagre-wrapper',
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
+        },
+        htmlLabels: true,
+        // gantt: { axisFormat: '%m/%d/%Y' },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
+        // sequenceDiagram: { actorMargin: 300 } // deprecated
+        // fontFamily: '"times", sans-serif',
+        // fontFamily: 'courier',
+        fontSize: 18,
+        curve: 'basis',
+        securityLevel: 'strict',
+        startOnLoad: false,
+        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
+        // themeVariables: {relationLabelColor: 'red'}
+      });
+      function callback() {
+  alert('It worked');
+}
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeded');
+      }
+
+      var diagram = `sequenceDiagram
+    participant John
+    links John: {"XSS": "javas`;
+diagram += `cript:alert('AudioParam')"}`;
+
+//   var diagram = "stateDiagram-v2\n";
+//  diagram += "<img/src='1'/onerror"
+//  diagram += "=xssAttack()> --> B";
+console.log(diagram);
+// document.querySelector('#diagram').innerHTML = diagram;
+mermaid.render('diagram', diagram, (res) => {
+  console.log(res);
+  document.querySelector('#res').innerHTML = res;
+});
+    </script>
+  </body>
+</html>
+
--- a/cypress/platform/xss16.html
+++ b/cypress/platform/xss16.html
@@ -0,0 +1,106 @@
+<html>
+  <head>
+    <link
+      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+    />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
+    <style>
+      body {
+        /* background: rgb(221, 208, 208); */
+        /* background:#333; */
+        font-family: 'Arial';
+        /* font-size: 18px !important; */
+        }
+      h1 { color: grey;}
+      .mermaid2 {
+        display: none;
+      }
+      .mermaid svg {
+        /* font-size: 18px !important; */
+      }
+      .malware {
+        position: fixed;
+        bottom:0;
+        left:0;
+        right:0;
+        height: 150px;
+        background: red;
+        color: black;
+        display: flex;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-family: monospace;
+        font-size: 72px;
+      }
+    </style>
+  </head>
+  <body>
+    <div>Security check</div>
+    <div class="flex">
+      <div id="diagram" class="mermaid"></div>
+      <div id="res" class=""></div>
+  <script src="./mermaid.js"></script>
+    <script>
+      mermaid.parseError = function (err, hash) {
+        // console.error('Mermaid error: ', err);
+      };
+      mermaid.initialize({
+        theme: 'forest',
+        arrowMarkerAbsolute: true,
+        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
+        logLevel: 0,
+        state: {
+          defaultRenderer: 'dagre-d3',
+        },
+        flowchart: {
+          // defaultRenderer: 'dagre-wrapper',
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
+        },
+        htmlLabels: true,
+        // gantt: { axisFormat: '%m/%d/%Y' },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
+        // sequenceDiagram: { actorMargin: 300 } // deprecated
+        // fontFamily: '"times", sans-serif',
+        // fontFamily: 'courier',
+        fontSize: 18,
+        curve: 'basis',
+        securityLevel: 'loose',
+        startOnLoad: false,
+        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
+        // themeVariables: {relationLabelColor: 'red'}
+      });
+      function callback() {
+  alert('It worked');
+}
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeded');
+      }
+
+      var diagram = `sequenceDiagram
+    participant Alice
+    links Alice: { "Click me!" : "javasjavascript:cript:alert('goose')" }`;
+
+// //   var diagram = "stateDiagram-v2\n";
+// //  diagram += "<img/src='1'/onerror"
+// diagram += '//via.placeholder.com/64\' width=64 />"]';
+// console.log(diagram);
+// document.querySelector('#diagram').innerHTML = diagram;
+mermaid.render('diagram', diagram, (res) => {
+  console.log(res);
+  document.querySelector('#res').innerHTML = res;
+});
+    </script>
+  </body>
+</html>
+
--- a/cypress/platform/xss17.html
+++ b/cypress/platform/xss17.html
@@ -0,0 +1,106 @@
+<html>
+  <head>
+    <link
+      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+    />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
+    <style>
+      body {
+        /* background: rgb(221, 208, 208); */
+        /* background:#333; */
+        font-family: 'Arial';
+        /* font-size: 18px !important; */
+        }
+      h1 { color: grey;}
+      .mermaid2 {
+        display: none;
+      }
+      .mermaid svg {
+        /* font-size: 18px !important; */
+      }
+      .malware {
+        position: fixed;
+        bottom:0;
+        left:0;
+        right:0;
+        height: 150px;
+        background: red;
+        color: black;
+        display: flex;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-family: monospace;
+        font-size: 72px;
+      }
+    </style>
+  </head>
+  <body>
+    <div>Security check</div>
+    <div class="flex">
+      <div id="diagram" class="mermaid"></div>
+      <div id="res" class=""></div>
+  <script src="./mermaid.js"></script>
+    <script>
+      mermaid.parseError = function (err, hash) {
+        // console.error('Mermaid error: ', err);
+      };
+      mermaid.initialize({
+        theme: 'forest',
+        arrowMarkerAbsolute: true,
+        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
+        logLevel: 0,
+        state: {
+          defaultRenderer: 'dagre-d3',
+        },
+        flowchart: {
+          // defaultRenderer: 'dagre-wrapper',
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
+        },
+        htmlLabels: true,
+        // gantt: { axisFormat: '%m/%d/%Y' },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
+        // sequenceDiagram: { actorMargin: 300 } // deprecated
+        // fontFamily: '"times", sans-serif',
+        // fontFamily: 'courier',
+        fontSize: 18,
+        curve: 'basis',
+        securityLevel: 'loose',
+        startOnLoad: false,
+        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
+        // themeVariables: {relationLabelColor: 'red'}
+      });
+      function callback() {
+  alert('It worked');
+}
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeded');
+      }
+
+      var diagram = `sequenceDiagram
+    participant Alice
+    link Alice: Click Me!@javasjavascript:cript:alert("goose")`;
+
+// //   var diagram = "stateDiagram-v2\n";
+// //  diagram += "<img/src='1'/onerror"
+// diagram += '//via.placeholder.com/64\' width=64 />"]';
+// console.log(diagram);
+// document.querySelector('#diagram').innerHTML = diagram;
+mermaid.render('diagram', diagram, (res) => {
+  console.log(res);
+  document.querySelector('#res').innerHTML = res;
+});
+    </script>
+  </body>
+</html>
+
--- a/cypress/platform/xss18.html
+++ b/cypress/platform/xss18.html
@@ -0,0 +1,105 @@
+<html>
+  <head>
+    <link
+      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+    />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
+    <style>
+      body {
+        /* background: rgb(221, 208, 208); */
+        /* background:#333; */
+        font-family: 'Arial';
+        /* font-size: 18px !important; */
+        }
+      h1 { color: grey;}
+      .mermaid2 {
+        display: none;
+      }
+      .mermaid svg {
+        /* font-size: 18px !important; */
+      }
+      .malware {
+        position: fixed;
+        bottom:0;
+        left:0;
+        right:0;
+        height: 150px;
+        background: red;
+        color: black;
+        display: flex;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-family: monospace;
+        font-size: 72px;
+      }
+    </style>
+  </head>
+  <body>
+    <div>Security check</div>
+    <div class="flex">
+      <div id="diagram" class="mermaid"></div>
+      <div id="res" class=""></div>
+  <script src="./mermaid.js"></script>
+    <script>
+      mermaid.parseError = function (err, hash) {
+        // console.error('Mermaid error: ', err);
+      };
+      mermaid.initialize({
+        theme: 'forest',
+        arrowMarkerAbsolute: true,
+        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
+        logLevel: 0,
+        state: {
+          defaultRenderer: 'dagre-d3',
+        },
+        flowchart: {
+          // defaultRenderer: 'dagre-wrapper',
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
+        },
+        htmlLabels: true,
+        // gantt: { axisFormat: '%m/%d/%Y' },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
+        // sequenceDiagram: { actorMargin: 300 } // deprecated
+        // fontFamily: '"times", sans-serif',
+        // fontFamily: 'courier',
+        fontSize: 18,
+        curve: 'basis',
+        // securityLevel: 'loose',
+        startOnLoad: false,
+        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
+        // themeVariables: {relationLabelColor: 'red'}
+      });
+      function callback() {
+  alert('It worked');
+}
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeded');
+      }
+
+      var diagram = `classDiagram
+      Class "<img/src='x'/onerror=xssAttack(1)>" <--> "<img/src='x'/onerror=xssAttack(2)>" C2: Cool label`;
+
+// //   var diagram = "stateDiagram-v2\n";
+// //  diagram += "<img/src='1'/onerror"
+// diagram += '//via.placeholder.com/64\' width=64 />"]';
+// console.log(diagram);
+// document.querySelector('#diagram').innerHTML = diagram;
+mermaid.render('diagram', diagram, (res) => {
+  console.log(res);
+  document.querySelector('#res').innerHTML = res;
+});
+    </script>
+  </body>
+</html>
+
--- a/cypress/platform/xss19.html
+++ b/cypress/platform/xss19.html
@@ -0,0 +1,107 @@
+<html>
+  <head>
+    <link
+      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+    />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
+    <style>
+      body {
+        /* background: rgb(221, 208, 208); */
+        /* background:#333; */
+        font-family: 'Arial';
+        /* font-size: 18px !important; */
+        }
+      h1 { color: grey;}
+      .mermaid2 {
+        display: none;
+      }
+      .mermaid svg {
+        /* font-size: 18px !important; */
+      }
+      .malware {
+        position: fixed;
+        bottom:0;
+        left:0;
+        right:0;
+        height: 150px;
+        background: red;
+        color: black;
+        display: flex;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-family: monospace;
+        font-size: 72px;
+      }
+    </style>
+  </head>
+  <body>
+    <div>Security check</div>
+    <div class="flex">
+      <div id="diagram" class="mermaid"></div>
+      <div id="res" class=""></div>
+  <script src="./mermaid.js"></script>
+    <script>
+      mermaid.parseError = function (err, hash) {
+        // console.error('Mermaid error: ', err);
+      };
+      mermaid.initialize({
+        theme: 'forest',
+        arrowMarkerAbsolute: true,
+        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
+        logLevel: 0,
+        state: {
+          defaultRenderer: 'dagre-d3',
+        },
+        flowchart: {
+          // defaultRenderer: 'dagre-wrapper',
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
+        },
+        htmlLabels: true,
+        // gantt: { axisFormat: '%m/%d/%Y' },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
+        // sequenceDiagram: { actorMargin: 300 } // deprecated
+        // fontFamily: '"times", sans-serif',
+        // fontFamily: 'courier',
+        fontSize: 18,
+        curve: 'basis',
+        // securityLevel: 'loose',
+        startOnLoad: false,
+        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
+        // themeVariables: {relationLabelColor: 'red'}
+      });
+      function callback() {
+  alert('It worked');
+}
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeded');
+      }
+
+      var diagram = `classDiagram
+class Shape{
+    <<<img/src='1'/`;
+
+// //   var diagram = "stateDiagram-v2\n";
+diagram += `onerror=xssAttack()>>>
+}`;
+// diagram += '//via.placeholder.com/64\' width=64 />"]';
+// console.log(diagram);
+// document.querySelector('#diagram').innerHTML = diagram;
+mermaid.render('diagram', diagram, (res) => {
+  console.log(res);
+  document.querySelector('#res').innerHTML = res;
+});
+    </script>
+  </body>
+</html>
+
--- a/docs/Tutorials.md
+++ b/docs/Tutorials.md
@@ -37,6 +37,13 @@ https://codepen.io/janzeteachesit/pen/OWWZKN

 https://codepen.io/Ryuno-Ki/pen/LNxwgR

+## Mermaid in open source docs
+
+[K8s.io Diagram Guide](https://kubernetes.io/docs/contribute/style/diagram-guide/)
+
+[K8s.dev blog: Improve your documentation with Mermaid.js diagrams](https://www.kubernetes.dev/blog/2021/12/01/improve-your-documentation-with-mermaid.js-diagrams/)
+
+
 ## Jupyter Integration with mermaid-js

 Here's an example of Python integration with mermaid-js which uses the mermaid.ink service, that displays the graph in a Jupyter notebook.
--- a/docs/_sidebar.md
+++ b/docs/_sidebar.md
@@ -1,10 +1,10 @@
- 📔 Introduction  
+- 📔 Introduction

  - [About Mermaid](README.md)
  - [Deployment](n00b-gettingStarted.md)
  - [Syntax and Configuration](n00b-syntaxReference.md)

- 📊 Diagram Syntax 
+- 📊 Diagram Syntax
  - [Flowchart](flowchart.md)
  - [Sequence diagram](sequenceDiagram.md)
  - [Class Diagram](classDiagram.md)
@@ -16,7 +16,7 @@
  - [Requirement Diagram](requirementDiagram.md)
  - [Other Examples](examples.md)

- ⚙️ Deployment and Configuration 
+- ⚙️ Deployment and Configuration

  - [Tutorials](Tutorials.md)
  - [API-Usage](usage.md)
@@ -26,12 +26,13 @@
  - [Mermaid CLI](mermaidCLI.md)
  - [Advanced usage](n00b-advanced.md)

- 📚 Misc 
+- 📚 Misc
  - [Use-Cases and Integrations](integrations.md)
  - [FAQ](faq.md)

- 🙌 Contributions and Community 
+- 🙌 Contributions and Community
  - [Overview for Beginners](n00b-overview.md)
  - [Development and Contribution ](development.md)
  - [Changelog](CHANGELOG.md)
  - [Adding Diagrams ](newDiagram.md)
+  - [Security ](security.md)
--- a/docs/directives.md
+++ b/docs/directives.md
@@ -3,7 +3,7 @@
 **Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/directives.md)

 ## Directives
-Directives gives a diagram author the capability to alter the appearance of a diagram before rendering by changing the applied configuration. 
+Directives gives a diagram author the capability to alter the appearance of a diagram before rendering by changing the applied configuration.

 Directives are divided into two sets or orders, by priority in parsing. The first set, containing 'init' or 'initialize' directives are loaded ahead of any other directive. While the other set, containing all other kinds of directives are parsed and factored into the rendering, only after 'init' and the desired graph-type are declared.

@@ -18,7 +18,7 @@ Directives are divided into two sets or orders, by priority in parsing. The firs
 init would be an argument-directive: %%{init: { **insert argument here**}}%%

 The json object that is passed as {**argument** } must be valid key value pairs and encased in quotation marks or it will be ignored.
-Valid Key Value pairs can be found in config. 
+Valid Key Value pairs can be found in config.

 The init/initialize directive is parsed earlier in the flow, this allows the incorporation of `%%init%%` directives into the mermaid diagram that is being rendered. Example:
 ```mmd
@@ -27,11 +27,11 @@ graph >
 A-->B
 ```

-will set the `logLevel` to `debug` and the `theme` to `dark` for a flowchart diagram, changing the appearance of the diagram itself. 
+will set the `logLevel` to `debug` and the `theme` to `dark` for a flowchart diagram, changing the appearance of the diagram itself.

 Note: 'init' or 'initialize' are both acceptable as init directives. Also note that `%%init%%` and `%%initialize%%` directives will be grouped together after they are parsed. This means:

-```mmd
+```mmd2
 %%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
 %%{initialize: { 'logLevel': 'fatal', "theme":'dark', 'startOnLoad': true } }%%
 ...
@@ -54,7 +54,7 @@ This will then be sent to `mermaid.initialize(...)` for rendering.

 In this category are any directives that come after the graph type declaration. Essentially, these directives will only be processed after the init directive. Each individual graph type will handle these directives. As an example:

-```mmd
+```
 %%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
 sequenceDiagram
 %%{config: { 'fontFamily': 'Menlo', 'fontSize': 18, 'fontWeight': 400} }%%
@@ -79,6 +79,6 @@ Init directives and any other non-multiline directives should be backwards compa

 Multiline directives, however, will pose an issue and will render an error. This is unavoidable.

-# example 
+# example


--- a/docs/entityRelationshipDiagram.md
+++ b/docs/entityRelationshipDiagram.md
@@ -137,20 +137,20 @@ The `type` and `name` values must begin with an alphabetic character and may con

 #### Attribute Keys and Comments

-Attributes may also have a `key` or comment defined. Keys can be "PK" or "FK", for Primary Key or Foreign Key. And a `comment` is defined by quotes at the end of an attribute. Comments themselves cannot have quote characters in them.
+Attributes may also have a `key` or comment defined. Keys can be "PK" or "FK", for Primary Key or Foreign Key. And a `comment` is defined by double quotes at the end of an attribute. Comments themselves cannot have double-quote characters in them.

 ```mermaid-example
 erDiagram
    CAR ||--o{ NAMED-DRIVER : allows
    CAR {
-        string allowedDriver FK 'The license of the allowed driver'
+        string allowedDriver FK "The license of the allowed driver"
        string registrationNumber
        string make
        string model
    }
    PERSON ||--o{ NAMED-DRIVER : is
    PERSON {
-        string driversLicense PK 'The license #'
+        string driversLicense PK "The license #"
        string firstName
        string lastName
        int age
--- a/docs/gantt.md
+++ b/docs/gantt.md
@@ -7,11 +7,11 @@


 It is important to remember that when a date, day, or collection of dates specific to a task are "excluded", the Gantt Chart will accomodate those changes by extending an equal number of days, towards the right, not by creating a gap inside the task.
- As shown here ![](.img/Gantt-excluded-days-within.png)
+ As shown here ![](./img/Gantt-excluded-days-within.png)


 However, if the excluded dates are between two tasks that are set to start consecutively, the excluded dates will be skipped graphically and left blank, and the following task will begin after the end of the excluded dates.
- As shown here ![](.img/Gantt-long-weekend-look.png)
+ As shown here ![](./img/Gantt-long-weekend-look.png)

 A Gantt chart is useful for tracking the amount of time it would take before a project is finished, but it can also be used to graphically represent "non-working days", with a few tweaks.

--- a/docs/integrations.md
+++ b/docs/integrations.md
@@ -11,6 +11,7 @@ They also serve as proof of concept, for the variety of things that can be built
 - [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) (**Native support**)
 - [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) (**Native support**)
 - [Joplin](https://joplinapp.org) (**Native support**)
+- [Notion](https://notion.so) (**Native support**)
 - [GitHub](https://github.com)
  - [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
  - [svg-generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
@@ -74,7 +75,8 @@ They also serve as proof of concept, for the variety of things that can be built
  - [Flowcharts](https://www.dokuwiki.org/plugin:flowcharts?s[]=mermaid)
  - [ComboStrap](https://combostrap.com/mermaid)
 - [TiddlyWiki](https://tiddlywiki.com/)
-  - [mermaid-tw5-plugin](https://github.com/michaeljmcd/mermaid-tw5-plugin)
+  - [mermaid-tw5: full js library](https://github.com/efurlanm/mermaid-tw5)
+  - [tw5-mermaid: wrapper for Mermaid Live](https://github.com/jasonmhoule/tw5-mermaid)

 ## Editor Plugins

--- a/docs/n00b-gettingStarted.md
+++ b/docs/n00b-gettingStarted.md
@@ -95,7 +95,10 @@ c. The `mermaid.initialize()` call, which dictates the appearance of diagrams an
 <body>
    Here is a mermaid diagram:
    <div class="mermaid">
-        graph TD A[Client] --> B[Load Balancer] B --> C[Server01] B --> D[Server02]
+        graph TD 
+        A[Client] --> B[Load Balancer] 
+        B --> C[Server01] 
+        B --> D[Server02]
    </div>
 </body>
 ```
@@ -137,13 +140,19 @@ Rendering in Mermaid is initalized by `mermaid.initialize()` call. You can place

        Here is one mermaid diagram:
        <div class="mermaid">
-            graph TD A[Client] --> B[Load Balancer] B --> C[Server1] B --> D[Server2]
+            graph TD 
+            A[Client] --> B[Load Balancer] 
+            B --> C[Server1] 
+            B --> D[Server2]
        </div>

        And here is another:
        <div class="mermaid">
-            graph TD A[Client] -->|tcp_123| B(Load Balancer) B -->|tcp_456| C[Server1] B
-            -->|tcp_456| D[Server2]
+            graph TD 
+            A[Client] -->|tcp_123| 
+            B(Load Balancer) 
+            B -->|tcp_456| C[Server1] 
+            B -->|tcp_456| D[Server2]
        </div>
    </body>
 </html>
@@ -159,10 +168,16 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
    </head>
    <body>
        <div class="mermaid">
-            graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);
+            graph LR 
+            A --- B 
+            B-->C[fa:fa-ban forbidden] 
+            B-->D(fa:fa-spinner);
        </div>
        <div class="mermaid">
-            graph TD A[Client] --> B[Load Balancer] B --> C[Server1] B --> D[Server2]
+            graph TD 
+            A[Client] --> B[Load Balancer] 
+            B --> C[Server1] 
+            B --> D[Server2]
        </div>
        <script src="The\Path\In\Your\Package\mermaid.js"></script>
        <script>
--- a/docs/security.md
+++ b/docs/security.md
@@ -0,0 +1,17 @@
+# Security
+The Mermaid team takes the security of Mermaid and the applications that use Mermaid seriously. This page describes how to report any vulnerabilities you may find, and lists best practices to minimize the risk of introducing a vulnerability.
+
+## Reporting vulnerabilities
+To report a vulnerability, please e-mail security@mermaid.live with a description of the issue, the steps you took to create the issue, affected versions, and if known, mitigations for the issue.
+
+We aim to reply within three working days, probably much sooner.
+
+You should expect a close collaboration as we work to resolve the issue you have reported. Please reach out to security@mermaid.live again if you do not receive prompt attention and regular updates.
+
+You may also reach out to the team via our public Slack chat channels; however, please make sure to e-mail security@mernaid.live when reporting an issue, and avoid revealing information about vulnerabilities in public as that could that could put users at risk.
+
+## Best practices
+
+Keep current with the latest Mermaid releases. We regularly update Mermaid, and these updates may fix security defects discovered in previous versions. Check the Mermaid release notes for security-related updates.
+
+Keep your application’s dependencies up to date. Make sure you upgrade your package dependencies to keep the dependencies up to date. Avoid pinning to specific versions for your dependencies and, if you do, make sure you check periodically to see if your dependencies have had security updates, and update the pin accordingly.
--- a/docs/sequenceDiagram.md
+++ b/docs/sequenceDiagram.md
@@ -46,14 +46,6 @@ sequenceDiagram
    Bob->>Alice: Hi Alice
 ```

-```mermaid-example
-sequenceDiagram
-    actor Alice
-    actor Bob
-    Alice->>Bob: Hi Bob
-    Bob->>Alice: Hi Alice
-```
-
 ### Aliases

 The actor can have a convenient identifier and a descriptive label.
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "mermaid",
-  "version": "8.13.5",
+  "version": "8.13.10",
  "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",
@@ -72,17 +72,17 @@
    "@babel/eslint-parser": "^7.14.7",
    "@babel/preset-env": "^7.14.7",
    "@babel/register": "^7.14.5",
-    "@commitlint/cli": "^15.0.0",
-    "@commitlint/config-conventional": "^15.0.0",
+    "@commitlint/cli": "^16.0.0",
+    "@commitlint/config-conventional": "^16.0.0",
    "@percy/cli": "^1.0.0-beta.58",
    "@percy/cypress": "^3.1.0",
    "@percy/migrate": "^0.11.0",
    "babel-jest": "^27.0.6",
    "babel-loader": "^8.2.2",
-    "concurrently": "^6.2.2",
+    "concurrently": "^7.0.0",
    "coveralls": "^3.0.2",
    "css-to-string-loader": "^0.1.3",
-    "cypress": "9.1.1",
+    "cypress": "9.2.1",
    "documentation": "13.2.0",
    "eslint": "^8.2.0",
    "eslint-config-prettier": "^8.3.0",
--- a/src/dagre-wrapper/createLabel.js
+++ b/src/dagre-wrapper/createLabel.js
@@ -1,7 +1,9 @@
 import { select } from 'd3';
 import { log } from '../logger'; // eslint-disable-line
 import { getConfig } from '../config';
-import { evaluate } from '../diagrams/common/common';
+import { sanitizeText, evaluate } from '../diagrams/common/common';
+
+const sanitizeTxt = (txt) => sanitizeText(txt, getConfig());

 /**
 * @param dom
--- a/src/defaultConfig.js
+++ b/src/defaultConfig.js
@@ -35,7 +35,7 @@ const config = {
  theme: 'default',
  themeVariables: theme['default'].getThemeVariables(),
  themeCSS: undefined,
-  /* **maxTextSize** - The maximum allowed size of the users text diamgram */
+  /* **maxTextSize** - The maximum allowed size of the users text diagram */
  maxTextSize: 50000,
  darkMode: false,

--- a/src/diagrams/class/classDb.js
+++ b/src/diagrams/class/classDb.js
@@ -13,6 +13,8 @@ let classCounter = 0;

 let funs = [];

+const sanitizeText = (txt) => common.sanitizeText(txt, configApi.getConfig());
+
 export const parseDirective = function (statement, context, type) {
  mermaidAPI.parseDirective(this, statement, context, type);
 };
@@ -96,6 +98,16 @@ export const addRelation = function (relation) {
  relation.id1 = splitClassNameAndType(relation.id1).className;
  relation.id2 = splitClassNameAndType(relation.id2).className;

+  relation.relationTitle1 = common.sanitizeText(
+    relation.relationTitle1.trim(),
+    configApi.getConfig()
+  );
+
+  relation.relationTitle2 = common.sanitizeText(
+    relation.relationTitle2.trim(),
+    configApi.getConfig()
+  );
+
  relations.push(relation);
 };

@@ -131,11 +143,11 @@ export const addMember = function (className, member) {

    if (memberString.startsWith('<<') && memberString.endsWith('>>')) {
      // Remove leading and trailing brackets
-      theClass.annotations.push(memberString.substring(2, memberString.length - 2));
+      theClass.annotations.push(sanitizeText(memberString.substring(2, memberString.length - 2)));
    } else if (memberString.indexOf(')') > 0) {
-      theClass.methods.push(memberString);
+      theClass.methods.push(sanitizeText(memberString));
    } else if (memberString) {
-      theClass.members.push(memberString);
+      theClass.members.push(sanitizeText(memberString));
    }
  }
 };
@@ -151,7 +163,7 @@ export const cleanupLabel = function (label) {
  if (label.substring(0, 1) === ':') {
    return common.sanitizeText(label.substr(1).trim(), configApi.getConfig());
  } else {
-    return label.trim();
+    return sanitizeText(label.trim());
  }
 };

--- a/src/diagrams/class/classRenderer-v2.js
+++ b/src/diagrams/class/classRenderer-v2.js
@@ -17,6 +17,8 @@ parser.yy = classDb;
 let idCache = {};
 const padding = 20;

+const sanitizeText = (txt) => common.sanitizeText(txt, getConfig());
+
 const conf = {
  dividerMargin: 10,
  padding: 5,
@@ -103,7 +105,7 @@ export const addClasses = function (classes, g) {
    g.setNode(vertex.id, {
      labelStyle: styles.labelStyle,
      shape: _shape,
-      labelText: vertexText,
+      labelText: sanitizeText(vertexText),
      classData: vertex,
      rx: radious,
      ry: radious,
--- a/src/diagrams/common/common.js
+++ b/src/diagrams/common/common.js
@@ -13,6 +13,22 @@ export const getRows = (s) => {
  return str.split('#br#');
 };

+export const removeEscapes = (text) => {
+  let newStr = text.replace(/\\u[\dA-F]{4}/gi, function (match) {
+    return String.fromCharCode(parseInt(match.replace(/\\u/g, ''), 16));
+  });
+
+  newStr = newStr.replace(/\\x([0-9a-f]{2})/gi, (_, c) => String.fromCharCode(parseInt(c, 16)));
+  newStr = newStr.replace(/\\[\d\d\d]{3}/gi, function (match) {
+    return String.fromCharCode(parseInt(match.replace(/\\/g, ''), 8));
+  });
+  newStr = newStr.replace(/\\[\d\d\d]{2}/gi, function (match) {
+    return String.fromCharCode(parseInt(match.replace(/\\/g, ''), 8));
+  });
+
+  return newStr;
+};
+
 /**
 * Removes script tags from a text
 *
@@ -40,13 +56,12 @@ export const removeScript = (txt) => {
      break;
    }
  }
-
-  rs = rs.replace(/script>/gi, '#');
-  rs = rs.replace(/script>/gi, '#');
-  rs = rs.replace(/javascript:/gi, '#');
-  rs = rs.replace(/onerror=/gi, 'onerror:');
-  rs = rs.replace(/<iframe/gi, '');
-  return rs;
+  let decodedText = removeEscapes(rs);
+  decodedText = decodedText.replace(/script>/gi, '#');
+  decodedText = decodedText.replace(/javascript:/gi, '#');
+  decodedText = decodedText.replace(/onerror=/gi, 'onerror:');
+  decodedText = decodedText.replace(/<iframe/gi, '');
+  return decodedText;
 };

 const sanitizeMore = (text, config) => {
@@ -62,7 +77,7 @@ const sanitizeMore = (text, config) => {
  if (htmlLabels) {
    const level = config.securityLevel;

-    if (level === 'antiscript') {
+    if (level === 'antiscript' || level === 'strict') {
      txt = removeScript(txt);
    } else if (level !== 'loose') {
      // eslint-disable-line
@@ -171,4 +186,5 @@ export default {
  removeScript,
  getUrl,
  evaluate,
+  removeEscapes,
 };
--- a/src/diagrams/common/common.spec.js
+++ b/src/diagrams/common/common.spec.js
@@ -1,4 +1,4 @@
-import { removeScript } from './common';
+import { sanitizeText, removeScript, removeEscapes } from './common';

 describe('when securityLevel is antiscript, all script must be removed', function () {
  it('should remove all script block, script inline.', function () {
@@ -24,3 +24,60 @@ describe('when securityLevel is antiscript, all script must be removed', functio
    expect(isEqual).toEqual(true);
  });
 });
+
+describe('remove escape code in text', function () {
+  it('should remove a unicode colon', function () {
+    const labelString = '\\u003A';
+
+    const result = removeEscapes(labelString);
+    expect(result).toEqual(':');
+  });
+  it('should remove a hex colon', function () {
+    const labelString = '\\x3A';
+
+    const result = removeEscapes(labelString);
+    expect(result).toEqual(':');
+  });
+  it('should remove a oct colon', function () {
+    const labelString = '\\72';
+
+    const result = removeEscapes(labelString);
+    expect(result).toEqual(':');
+  });
+  it('should remove a oct colon 3 numbers', function () {
+    const labelString = '\\072';
+
+    const result = removeEscapes(labelString);
+    expect(result).toEqual(':');
+  });
+  it('should remove multiple colons 3 numbers', function () {
+    const labelString = '\\072\\072\\72';
+
+    const result = removeEscapes(labelString);
+    expect(result).toEqual(':::');
+  });
+  it('should handle greater and smaller then', function () {
+    const labelString = '\\74\\076';
+
+    const result = removeEscapes(labelString);
+    expect(result).toEqual('<>');
+  });
+  it('should handle letters', function () {
+    const labelString = '\\u0073\\143ri\\x70\\u0074\\x3A';
+
+    const result = removeEscapes(labelString);
+    expect(result).toEqual('script:');
+  });
+});
+
+describe('Sanitize text', function () {
+  it('should remove script tag', function () {
+    const maliciousStr = 'javajavascript:script:alert(1)';
+    const result = sanitizeText(maliciousStr, {
+      securityLevel: 'strict',
+      flowchart: { htmlLabels: true },
+    });
+    console.log('result', result);
+    expect(result).not.toContain('javascript:alert(1)');
+  });
+});
--- a/src/diagrams/er/erRenderer.js
+++ b/src/diagrams/er/erRenderer.js
@@ -40,7 +40,6 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => {
  const attributeNodes = []; // Intermediate storage for attribute nodes created so that we can do a second pass
  let hasKeyType = false;
  let hasComment = false;
-  let maxWidth = 0;
  let maxTypeWidth = 0;
  let maxNameWidth = 0;
  let maxKeyWidth = 0;
@@ -48,9 +47,19 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => {
  let cumulativeHeight = labelBBox.height + heightPadding * 2;
  let attrNum = 1;

+  // Check to see if any of the attributes has a key or a comment
+  attributes.forEach((item) => {
+    if (item.attributeKeyType !== undefined) {
+      hasKeyType = true;
+    }
+
+    if (item.attributeComment !== undefined) {
+      hasComment = true;
+    }
+  });
+
  attributes.forEach((item) => {
    const attrPrefix = `${entityTextNode.node().id}-attr-${attrNum}`;
-    let nodeWidth = 0;
    let nodeHeight = 0;

    // Add a text node for the attribute type
@@ -91,16 +100,14 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => {
    const nameBBox = nameNode.node().getBBox();
    maxTypeWidth = Math.max(maxTypeWidth, typeBBox.width);
    maxNameWidth = Math.max(maxNameWidth, nameBBox.width);
-    nodeWidth += typeBBox.width;
-    nodeWidth += nameBBox.width;

    nodeHeight = Math.max(typeBBox.height, nameBBox.height);

-    if (hasKeyType || item.attributeKeyType !== undefined) {
+    if (hasKeyType) {
      const keyTypeNode = groupNode
        .append('text')
        .attr('class', 'er entityLabel')
-        .attr('id', `${attrPrefix}-name`)
+        .attr('id', `${attrPrefix}-key`)
        .attr('x', 0)
        .attr('y', 0)
        .attr('dominant-baseline', 'middle')
@@ -113,17 +120,15 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => {

      attributeNode.kn = keyTypeNode;
      const keyTypeBBox = keyTypeNode.node().getBBox();
-      nodeWidth += keyTypeBBox.width;
-      maxKeyWidth = Math.max(maxKeyWidth, nodeWidth);
+      maxKeyWidth = Math.max(maxKeyWidth, keyTypeBBox.width);
      nodeHeight = Math.max(nodeHeight, keyTypeBBox.height);
-      hasKeyType = true;
    }

-    if (hasComment || item.attributeComment !== undefined) {
+    if (hasComment) {
      const commentNode = groupNode
        .append('text')
        .attr('class', 'er entityLabel')
-        .attr('id', `${attrPrefix}-name`)
+        .attr('id', `${attrPrefix}-comment`)
        .attr('x', 0)
        .attr('y', 0)
        .attr('dominant-baseline', 'middle')
@@ -136,25 +141,35 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => {

      attributeNode.cn = commentNode;
      const commentNodeBBox = commentNode.node().getBBox();
-      nodeWidth += commentNodeBBox.width;
-      maxCommentWidth = Math.max(nodeWidth, nameBBox.width);
+      maxCommentWidth = Math.max(maxCommentWidth, commentNodeBBox.width);
      nodeHeight = Math.max(nodeHeight, commentNodeBBox.height);
-      hasComment = true;
    }

    attributeNode.height = nodeHeight;
    // Keep a reference to the nodes so that we can iterate through them later
    attributeNodes.push(attributeNode);
-    maxWidth = Math.max(maxWidth, nodeWidth);
    cumulativeHeight += nodeHeight + heightPadding * 2;
    attrNum += 1;
  });

+  let widthPaddingFactor = 4;
+  if (hasKeyType) {
+    widthPaddingFactor += 2;
+  }
+  if (hasComment) {
+    widthPaddingFactor += 2;
+  }
+
+  const maxWidth = maxTypeWidth + maxNameWidth + maxKeyWidth + maxCommentWidth;
+
  // Calculate the new bounding box of the overall entity, now that attributes have been added
  const bBox = {
    width: Math.max(
      conf.minEntityWidth,
-      Math.max(labelBBox.width + conf.entityPadding * 2, maxWidth + widthPadding * 4)
+      Math.max(
+        labelBBox.width + conf.entityPadding * 2,
+        maxWidth + widthPadding * widthPaddingFactor
+      )
    ),
    height:
      attributes.length > 0
@@ -162,10 +177,13 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => {
        : Math.max(conf.minEntityHeight, labelBBox.height + conf.entityPadding * 2),
  };

-  // There might be some spare width for padding out attributes if the entity name is very long
-  const spareWidth = Math.max(0, bBox.width - maxWidth - widthPadding * 4);
-
  if (attributes.length > 0) {
+    // There might be some spare width for padding out attributes if the entity name is very long
+    const spareColumnWidth = Math.max(
+      0,
+      (bBox.width - maxWidth - widthPadding * widthPaddingFactor) / (widthPaddingFactor / 2)
+    );
+
    // Position the entity label near the top of the entity bounding box
    entityTextNode.attr(
      'transform',
@@ -180,9 +198,10 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => {
      // Calculate the alignment y co-ordinate for the type/name of the attribute
      const alignY = heightOffset + heightPadding + attributeNode.height / 2;

-      // Position the type of the attribute
+      // Position the type attribute
      attributeNode.tn.attr('transform', 'translate(' + widthPadding + ',' + alignY + ')');

+      // TODO Handle spareWidth in attr('width')
      // Insert a rectangle for the type
      const typeRect = groupNode
        .insert('rect', '#' + attributeNode.tn.node().id)
@@ -192,65 +211,73 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => {
        .attr('stroke', conf.stroke)
        .attr('x', 0)
        .attr('y', heightOffset)
-        .attr('width', maxTypeWidth * 2 + spareWidth / 2)
-        .attr('height', attributeNode.tn.node().getBBox().height + heightPadding * 2);
+        .attr('width', maxTypeWidth + widthPadding * 2 + spareColumnWidth)
+        .attr('height', attributeNode.height + heightPadding * 2);

-      // Position the name of the attribute
+      const nameXOffset = parseFloat(typeRect.attr('x')) + parseFloat(typeRect.attr('width'));
+
+      // Position the name attribute
      attributeNode.nn.attr(
        'transform',
-        'translate(' + (parseFloat(typeRect.attr('width')) + widthPadding) + ',' + alignY + ')'
+        'translate(' + (nameXOffset + widthPadding) + ',' + alignY + ')'
      );

      // Insert a rectangle for the name
-      groupNode
+      const nameRect = groupNode
        .insert('rect', '#' + attributeNode.nn.node().id)
        .attr('class', `er ${attribStyle}`)
        .attr('fill', conf.fill)
        .attr('fill-opacity', '100%')
        .attr('stroke', conf.stroke)
-        .attr('x', `${typeRect.attr('x') + typeRect.attr('width')}`)
+        .attr('x', nameXOffset)
        .attr('y', heightOffset)
-        .attr('width', maxNameWidth + widthPadding * 2 + spareWidth / 2)
-        .attr('height', attributeNode.nn.node().getBBox().height + heightPadding * 2);
+        .attr('width', maxNameWidth + widthPadding * 2 + spareColumnWidth)
+        .attr('height', attributeNode.height + heightPadding * 2);
+
+      let keyTypeAndCommentXOffset =
+        parseFloat(nameRect.attr('x')) + parseFloat(nameRect.attr('width'));

      if (hasKeyType) {
-        // Position the name of the attribute
+        // Position the key type attribute
        attributeNode.kn.attr(
          'transform',
-          'translate(' + (parseFloat(typeRect.attr('width')) + widthPadding) + ',' + alignY + ')'
+          'translate(' + (keyTypeAndCommentXOffset + widthPadding) + ',' + alignY + ')'
        );

-        // Insert a rectangle for the name
-        groupNode
+        // Insert a rectangle for the key type
+        const keyTypeRect = groupNode
          .insert('rect', '#' + attributeNode.kn.node().id)
          .attr('class', `er ${attribStyle}`)
          .attr('fill', conf.fill)
          .attr('fill-opacity', '100%')
          .attr('stroke', conf.stroke)
-          .attr('x', `${typeRect.attr('x') + typeRect.attr('width')}`)
+          .attr('x', keyTypeAndCommentXOffset)
          .attr('y', heightOffset)
-          .attr('width', maxKeyWidth + widthPadding * 2 + spareWidth / 2)
-          .attr('height', attributeNode.kn.node().getBBox().height + heightPadding * 2);
+          .attr('width', maxKeyWidth + widthPadding * 2 + spareColumnWidth)
+          .attr('height', attributeNode.height + heightPadding * 2);
+
+        keyTypeAndCommentXOffset =
+          parseFloat(keyTypeRect.attr('x')) + parseFloat(keyTypeRect.attr('width'));
      }

      if (hasComment) {
-        // Position the name of the attribute
+        // Position the comment attribute
        attributeNode.cn.attr(
          'transform',
-          'translate(' + (parseFloat(typeRect.attr('width')) + widthPadding) + ',' + alignY + ')'
+          'translate(' + (keyTypeAndCommentXOffset + widthPadding) + ',' + alignY + ')'
        );

-        // Insert a rectangle for the name
+        // Insert a rectangle for the comment
        groupNode
          .insert('rect', '#' + attributeNode.cn.node().id)
          .attr('class', `er ${attribStyle}`)
          .attr('fill', conf.fill)
          .attr('fill-opacity', '100%')
          .attr('stroke', conf.stroke)
-          .attr('x', `${typeRect.attr('x') + typeRect.attr('width')}`)
+          .attr('x', keyTypeAndCommentXOffset)
          .attr('y', heightOffset)
-          .attr('width', maxCommentWidth + widthPadding * 2 + spareWidth / 2)
-          .attr('height', attributeNode.cn.node().getBBox().height + heightPadding * 2);
+          .attr('width', maxCommentWidth + widthPadding * 2 + spareColumnWidth)
+          .attr('height', attributeNode.height + heightPadding * 2);
      }

      // Increment the height offset to move to the next row
--- a/src/diagrams/er/parser/erDiagram.jison
+++ b/src/diagrams/er/parser/erDiagram.jison
@@ -98,8 +98,8 @@ attributes
 attribute
    : attributeType attributeName { $$ = { attributeType: $1, attributeName: $2 }; }
    | attributeType attributeName attributeKeyType { $$ = { attributeType: $1, attributeName: $2, attributeKeyType: $3 }; }
-    | attributeType attributeName COMMENT { $$ = { attributeType: $1, attributeName: $2, attributeComment: $3 }; }
-    | attributeType attributeName attributeKeyType COMMENT { $$ = { attributeType: $1, attributeName: $2, attributeKeyType: $3, attributeComment: $4 }; }
+    | attributeType attributeName attributeComment { $$ = { attributeType: $1, attributeName: $2, attributeComment: $3 }; }
+    | attributeType attributeName attributeKeyType attributeComment { $$ = { attributeType: $1, attributeName: $2, attributeKeyType: $3, attributeComment: $4 }; }
    ;

 attributeType
@@ -114,6 +114,10 @@ attributeKeyType
    : ATTRIBUTE_KEY { $$=$1; }
    ;

+attributeComment
+    : COMMENT { $$=$1.replace(/"/g, ''); }
+    ;
+
 relSpec
    : cardinality relType cardinality
      {
--- a/src/diagrams/er/parser/erDiagram.spec.js
+++ b/src/diagrams/er/parser/erDiagram.spec.js
@@ -59,6 +59,7 @@ describe('when parsing ER diagram it...', function () {
    const entities = erDb.getEntities();
    expect(Object.keys(entities).length).toBe(1);
    expect(entities[entity].attributes.length).toBe(1);
+    expect(entities[entity].attributes[0].attributeComment).toBe('comment');
  });

  it('should allow an entity with a single attribute to be defined with a key and a comment', function () {
--- a/src/diagrams/git/gitGraphAst.js
+++ b/src/diagrams/git/gitGraphAst.js
@@ -17,7 +17,9 @@ function getId() {
 */
 function isfastforwardable(currentCommit, otherCommit) {
  log.debug('Entering isfastforwardable:', currentCommit.id, otherCommit.id);
-  while (currentCommit.seq <= otherCommit.seq && currentCommit !== otherCommit) {
+  let cnt = 0;
+  while (currentCommit.seq <= otherCommit.seq && currentCommit !== otherCommit && cnt < 1000) {
+    cnt++;
    // only if other branch has more commits
    if (otherCommit.parent == null) break;
    if (Array.isArray(otherCommit.parent)) {
--- a/src/diagrams/git/gitGraphRenderer.js
+++ b/src/diagrams/git/gitGraphRenderer.js
@@ -227,7 +227,9 @@ function renderCommitHistory(svg, commitid, branches, direction) {
  let commit;
  const numCommits = Object.keys(allCommitsDict).length;
  if (typeof commitid === 'string') {
+    let cnt = 0;
    do {
+      cnt++;
      commit = allCommitsDict[commitid];
      log.debug('in renderCommitHistory', commit.id, commit.seq);
      if (svg.select('#node-' + commitid).size() > 0) {
@@ -293,7 +295,7 @@ function renderCommitHistory(svg, commitid, branches, direction) {
          .text(', ' + commit.message);
      }
      commitid = commit.parent;
-    } while (commitid && allCommitsDict[commitid]);
+    } while (commitid && allCommitsDict[commitid] && cnt < 1000);
  }

  if (Array.isArray(commitid)) {
@@ -313,7 +315,9 @@ function renderCommitHistory(svg, commitid, branches, direction) {
 */
 function renderLines(svg, commit, direction, branchColor) {
  branchColor = branchColor || 0;
-  while (commit.seq > 0 && !commit.lineDrawn) {
+  let cnt = 0;
+  while (commit.seq > 0 && !commit.lineDrawn && cnt < 1000) {
+    cnt++;
    if (typeof commit.parent === 'string') {
      svgDrawLineForCommits(svg, commit.id, commit.parent, direction, branchColor);
      commit.lineDrawn = true;
--- a/src/diagrams/sequence/svgDraw.js
+++ b/src/diagrams/sequence/svgDraw.js
@@ -1,5 +1,6 @@
 import common from '../common/common';
 import { addFunction } from '../../interactionDb';
+import { sanitizeUrl } from '@braintree/sanitize-url';

 export const drawRect = function (elem, rectData) {
  const rectElem = elem.append('rect');
@@ -19,12 +20,12 @@ export const drawRect = function (elem, rectData) {
  return rectElem;
 };

-const sanitizeUrl = function (s) {
-  return s
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/javascript:/g, '');
-};
+// const sanitizeUrl = function (s) {
+//   return s
+//     .replace(/&/g, '&amp;')
+//     .replace(/</g, '&lt;')
+//     .replace(/javascript:/g, '');
+// };

 const addPopupInteraction = (id, actorCnt) => {
  addFunction(() => {
@@ -1055,4 +1056,5 @@ export default {
  popupMenu,
  popdownMenu,
  fixLifeLineHeights,
+  sanitizeUrl,
 };
--- a/src/diagrams/sequence/svgDraw.spec.js
+++ b/src/diagrams/sequence/svgDraw.spec.js
@@ -1,4 +1,4 @@
-const svgDraw = require('./svgDraw');
+const svgDraw = require('./svgDraw').default;
 const { MockD3 } = require('d3');

 describe('svgDraw', function () {
@@ -124,4 +124,18 @@ describe('svgDraw', function () {
      expect(rect.lower).toHaveBeenCalled();
    });
  });
+  describe('sanitizeUrl', function () {
+    it('it should sanitize malicious urls', function () {
+      const maliciousStr = 'javascript:script:alert(1)';
+      const result = svgDraw.sanitizeUrl(maliciousStr);
+      console.log('result', result);
+      expect(result).not.toContain('javascript:alert(1)');
+    });
+    it('it should not sanitize non dangerous urls', function () {
+      const maliciousStr = 'javajavascript:script:alert(1)';
+      const result = svgDraw.sanitizeUrl(maliciousStr);
+      console.log('result', result);
+      expect(result).not.toContain('javascript:alert(1)');
+    });
+  });
 });
--- a/yarn.lock
+++ b/yarn.lock