Merge pull request #2702 from jfuentescpp/patch-1

Reference mkdocs-mermaid2-plugin for MkDocs
docs: update for re-ordering (#2704 )
2025-09-26 18:59:42 +02:00 · 2022-02-10 17:10:44 +01:00 · 2022-02-07 11:02:40 -08:00 · 2022-02-07 11:42:31 +02:00 · 2022-02-07 09:10:04 +01:00 · 2022-02-07 09:09:43 +01:00
29 changed files with 2141 additions and 1584 deletions
--- a/.github/workflows/update-browserlist.yml
+++ b/.github/workflows/update-browserlist.yml
@@ -11,8 +11,8 @@ jobs:
      - uses: actions/checkout@v2
      - run: npx browserslist@latest --update-db
      - name: Commit changes
-        uses: EndBug/add-and-commit@v7
+        uses: EndBug/add-and-commit@v8.0.1
        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
@@ -35,32 +35,29 @@ For a more detailed introduction to Mermaid and some of its more basic uses, loo
 ## Examples

 __The following are some examples of the diagrams, charts and graphs that can be made using Mermaid and the Markdown-inspired text specific to it. Click here jump into the [text syntax](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference).__
-<table>
 <!-- <Flowchart> -->
-<tr><td colspan=2 align="center">
-    <b>Flow</b></br>
-    [<a href="http://mermaid-js.github.io/mermaid/#/flowchart">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0hhcmRdIC0tPnxUZXh0fCBCKFJvdW5kKVxuICAgIEIgLS0-IEN7RGVjaXNpb259XG4gICAgQyAtLT58T25lfCBEW1Jlc3VsdCAxXVxuICAgIEMgLS0-fFR3b3wgRVtSZXN1bHQgMl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
-</td></tr>
-<tr>
-    <td><pre>
-graph TD
+
+## Flowchart [<a href="http://mermaid-js.github.io/mermaid/#/flowchart">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0hhcmRdIC0tPnxUZXh0fCBCKFJvdW5kKVxuICAgIEIgLS0-IEN7RGVjaXNpb259XG4gICAgQyAtLT58T25lfCBEW1Jlc3VsdCAxXVxuICAgIEMgLS0-fFR3b3wgRVtSZXN1bHQgMl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
+
+```
+flowchart LR
 A[Hard] -->|Text| B(Round)
 B --> C{Decision}
 C -->|One| D[Result 1]
 C -->|Two| E[Result 2]
-    </pre></td>
-    <td align="center">
-        <img src="https://raw.githubusercontent.com/mermaid-js/mermaid/master/img/gray-flow.png" />
-    </td>
-</tr>
-<!-- </Flowchart> -->
-<!-- <Sequence> -->
-<tr><td colspan=2 align="center">
-    <b>Sequence</b><br />
-    [<a href="http://mermaid-js.github.io/mermaid/#/sequenceDiagram">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic2VxdWVuY2VEaWFncmFtXG5BbGljZS0-PkpvaG46IEhlbGxvIEpvaG4sIGhvdyBhcmUgeW91P1xubG9vcCBIZWFsdGhjaGVja1xuICAgIEpvaG4tPj5Kb2huOiBGaWdodCBhZ2FpbnN0IGh5cG9jaG9uZHJpYVxuZW5kXG5Ob3RlIHJpZ2h0IG9mIEpvaG46IFJhdGlvbmFsIHRob3VnaHRzIVxuSm9obi0tPj5BbGljZTogR3JlYXQhXG5Kb2huLT4-Qm9iOiBIb3cgYWJvdXQgeW91P1xuQm9iLS0-PkpvaG46IEpvbGx5IGdvb2QhIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
-</td></tr>
-<tr>
-    <td><pre>
+```
+```mermaid
+flowchart LR
+A[Hard] -->|Text| B(Round)
+B --> C{Decision}
+C -->|One| D[Result 1]
+C -->|Two| E[Result 2]
+```
+
+
+## Sequence diagram [<a href="http://mermaid-js.github.io/mermaid/#/sequenceDiagram">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic2VxdWVuY2VEaWFncmFtXG5BbGljZS0-PkpvaG46IEhlbGxvIEpvaG4sIGhvdyBhcmUgeW91P1xubG9vcCBIZWFsdGhjaGVja1xuICAgIEpvaG4tPj5Kb2huOiBGaWdodCBhZ2FpbnN0IGh5cG9jaG9uZHJpYVxuZW5kXG5Ob3RlIHJpZ2h0IG9mIEpvaG46IFJhdGlvbmFsIHRob3VnaHRzIVxuSm9obi0tPj5BbGljZTogR3JlYXQhXG5Kb2huLT4-Qm9iOiBIb3cgYWJvdXQgeW91P1xuQm9iLS0-PkpvaG46IEpvbGx5IGdvb2QhIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
+
+```
 sequenceDiagram
 Alice->>John: Hello John, how are you?
 loop Healthcheck
@@ -70,43 +67,48 @@ Note right of John: Rational thoughts!
 John-->>Alice: Great!
 John->>Bob: How about you?
 Bob-->>John: Jolly good!
-    </pre></td>
-    <td align="center">
-        <img src="https://raw.githubusercontent.com/mermaid-js/mermaid/master/img/gray-sequence.png" />
-    </td>
-</tr>
-<!-- </Sequence> -->
-<!-- <Gantt> -->
-<tr><td colspan=2 align="center">
-    <b>Gantt</b><br />
-    [<a href="http://mermaid-js.github.io/mermaid/#/gantt">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ2FudHRcbnNlY3Rpb24gU2VjdGlvblxuQ29tcGxldGVkIDpkb25lLCAgICBkZXMxLCAyMDE0LTAxLTA2LDIwMTQtMDEtMDhcbkFjdGl2ZSAgICAgICAgOmFjdGl2ZSwgIGRlczIsIDIwMTQtMDEtMDcsIDNkXG5QYXJhbGxlbCAxICAgOiAgICAgICAgIGRlczMsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAyICAgOiAgICAgICAgIGRlczQsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAzICAgOiAgICAgICAgIGRlczUsIGFmdGVyIGRlczMsIDFkXG5QYXJhbGxlbCA0ICAgOiAgICAgICAgIGRlczYsIGFmdGVyIGRlczQsIDFkIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
-</td></tr>
-<tr>
-    <td><pre>
+```
+```mermaid
+sequenceDiagram
+Alice->>John: Hello John, how are you?
+loop Healthcheck
+    John->>John: Fight against hypochondria
+end
+Note right of John: Rational thoughts!
+John-->>Alice: Great!
+John->>Bob: How about you?
+Bob-->>John: Jolly good!
+```
+
+## Gantt chart [<a href="http://mermaid-js.github.io/mermaid/#/gantt">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ2FudHRcbnNlY3Rpb24gU2VjdGlvblxuQ29tcGxldGVkIDpkb25lLCAgICBkZXMxLCAyMDE0LTAxLTA2LDIwMTQtMDEtMDhcbkFjdGl2ZSAgICAgICAgOmFjdGl2ZSwgIGRlczIsIDIwMTQtMDEtMDcsIDNkXG5QYXJhbGxlbCAxICAgOiAgICAgICAgIGRlczMsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAyICAgOiAgICAgICAgIGRlczQsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAzICAgOiAgICAgICAgIGRlczUsIGFmdGVyIGRlczMsIDFkXG5QYXJhbGxlbCA0ICAgOiAgICAgICAgIGRlczYsIGFmdGVyIGRlczQsIDFkIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
+
+```
 gantt
-section Section
-Completed :done,    des1, 2014-01-06,2014-01-08
-Active        :active,  des2, 2014-01-07, 3d
-Parallel 1   :         des3, after des1, 1d
-Parallel 2   :         des4, after des1, 1d
-Parallel 3   :         des5, after des3, 1d
-Parallel 4   :         des6, after des4, 1d
-    </pre></td>
-    <td align="center">
-        <img src="https://raw.githubusercontent.com/mermaid-js/mermaid/master/img/gray-gantt.png" />
-    </td>
-</tr>
-<!-- </Gantt> -->
-<!-- <Class> -->
-<tr><td colspan=2 align="center">
-    <b>Class</b><br />
-    [<a href="http://mermaid-js.github.io/mermaid/#/classDiagram">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiY2xhc3NEaWFncmFtXG5DbGFzczAxIDx8LS0gQXZlcnlMb25nQ2xhc3MgOiBDb29sXG48PGludGVyZmFjZT4-IENsYXNzMDFcbkNsYXNzMDkgLS0-IEMyIDogV2hlcmUgYW0gaT9cbkNsYXNzMDkgLS0qIEMzXG5DbGFzczA5IC0tfD4gQ2xhc3MwN1xuQ2xhc3MwNyA6IGVxdWFscygpXG5DbGFzczA3IDogT2JqZWN0W10gZWxlbWVudERhdGFcbkNsYXNzMDEgOiBzaXplKClcbkNsYXNzMDEgOiBpbnQgY2hpbXBcbkNsYXNzMDEgOiBpbnQgZ29yaWxsYVxuY2xhc3MgQ2xhc3MxMCB7XG4gID4-c2VydmljZT4-XG4gIGludCBpZFxuICBzaXplKClcbn0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
-</td></tr>
-<tr>
-    <td><pre>
+    section Section
+    Completed :done,    des1, 2014-01-06,2014-01-08
+    Active        :active,  des2, 2014-01-07, 3d
+    Parallel 1   :         des3, after des1, 1d
+    Parallel 2   :         des4, after des1, 1d
+    Parallel 3   :         des5, after des3, 1d
+    Parallel 4   :         des6, after des4, 1d
+```
+```mermaid
+gantt
+    section Section
+    Completed :done,    des1, 2014-01-06,2014-01-08
+    Active        :active,  des2, 2014-01-07, 3d
+    Parallel 1   :         des3, after des1, 1d
+    Parallel 2   :         des4, after des1, 1d
+    Parallel 3   :         des5, after des3, 1d
+    Parallel 4   :         des6, after des4, 1d
+```
+
+## Class diagram [<a href="http://mermaid-js.github.io/mermaid/#/classDiagram">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiY2xhc3NEaWFncmFtXG5DbGFzczAxIDx8LS0gQXZlcnlMb25nQ2xhc3MgOiBDb29sXG48PGludGVyZmFjZT4-IENsYXNzMDFcbkNsYXNzMDkgLS0-IEMyIDogV2hlcmUgYW0gaT9cbkNsYXNzMDkgLS0qIEMzXG5DbGFzczA5IC0tfD4gQ2xhc3MwN1xuQ2xhc3MwNyA6IGVxdWFscygpXG5DbGFzczA3IDogT2JqZWN0W10gZWxlbWVudERhdGFcbkNsYXNzMDEgOiBzaXplKClcbkNsYXNzMDEgOiBpbnQgY2hpbXBcbkNsYXNzMDEgOiBpbnQgZ29yaWxsYVxuY2xhc3MgQ2xhc3MxMCB7XG4gID4-c2VydmljZT4-XG4gIGludCBpZFxuICBzaXplKClcbn0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
+
+```
 classDiagram
-Class01 &lt;|-- AveryLongClass : Cool
-&lt;&lt;interface>> Class01
+Class01 <|-- AveryLongClass : Cool
+<<Interface>> Class01
 Class09 --> C2 : Where am i?
 Class09 --* C3
 Class09 --|> Class07
@@ -116,23 +118,32 @@ Class01 : size()
 Class01 : int chimp
 Class01 : int gorilla
 class Class10 {
-  &lt;&lt;service>>
+  <<service>>
  int id
  size()
 }
-</pre></td>
-    <td align="center">
-        <img src="https://raw.githubusercontent.com/mermaid-js/mermaid/master/img/gray-class.png" />
-    </td>
-</tr>
-<!-- </Class> -->
-<!-- <State> -->
-<tr><td colspan=2 align="center">
-    <b>State</b><br />
-    [<a href="http://mermaid-js.github.io/mermaid/#/stateDiagram">docs</a> - <a href="https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtLXYyXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQiLCJ0aGVtZVZhcmlhYmxlcyI6eyJiYWNrZ3JvdW5kIjoid2hpdGUiLCJwcmltYXJ5Q29sb3IiOiIjRUNFQ0ZGIiwic2Vjb25kYXJ5Q29sb3IiOiIjZmZmZmRlIiwidGVydGlhcnlDb2xvciI6ImhzbCg4MCwgMTAwJSwgOTYuMjc0NTA5ODAzOSUpIiwicHJpbWFyeUJvcmRlckNvbG9yIjoiaHNsKDI0MCwgNjAlLCA4Ni4yNzQ1MDk4MDM5JSkiLCJzZWNvbmRhcnlCb3JkZXJDb2xvciI6ImhzbCg2MCwgNjAlLCA4My41Mjk0MTE3NjQ3JSkiLCJ0ZXJ0aWFyeUJvcmRlckNvbG9yIjoiaHNsKDgwLCA2MCUsIDg2LjI3NDUwOTgwMzklKSIsInByaW1hcnlUZXh0Q29sb3IiOiIjMTMxMzAwIiwic2Vjb25kYXJ5VGV4dENvbG9yIjoiIzAwMDAyMSIsInRlcnRpYXJ5VGV4dENvbG9yIjoicmdiKDkuNTAwMDAwMDAwMSwgOS41MDAwMDAwMDAxLCA5LjUwMDAwMDAwMDEpIiwibGluZUNvbG9yIjoiIzMzMzMzMyIsInRleHRDb2xvciI6IiMzMzMiLCJtYWluQmtnIjoiI0VDRUNGRiIsInNlY29uZEJrZyI6IiNmZmZmZGUiLCJib3JkZXIxIjoiIzkzNzBEQiIsImJvcmRlcjIiOiIjYWFhYTMzIiwiYXJyb3doZWFkQ29sb3IiOiIjMzMzMzMzIiwiZm9udEZhbWlseSI6IlwidHJlYnVjaGV0IG1zXCIsIHZlcmRhbmEsIGFyaWFsIiwiZm9udFNpemUiOiIxNnB4IiwibGFiZWxCYWNrZ3JvdW5kIjoiI2U4ZThlOCIsIm5vZGVCa2ciOiIjRUNFQ0ZGIiwibm9kZUJvcmRlciI6IiM5MzcwREIiLCJjbHVzdGVyQmtnIjoiI2ZmZmZkZSIsImNsdXN0ZXJCb3JkZXIiOiIjYWFhYTMzIiwiZGVmYXVsdExpbmtDb2xvciI6IiMzMzMzMzMiLCJ0aXRsZUNvbG9yIjoiIzMzMyIsImVkZ2VMYWJlbEJhY2tncm91bmQiOiIjZThlOGU4IiwiYWN0b3JCb3JkZXIiOiJoc2woMjU5LjYyNjE2ODIyNDMsIDU5Ljc3NjUzNjMxMjglLCA4Ny45MDE5NjA3ODQzJSkiLCJhY3RvckJrZyI6IiNFQ0VDRkYiLCJhY3RvclRleHRDb2xvciI6ImJsYWNrIiwiYWN0b3JMaW5lQ29sb3IiOiJncmV5Iiwic2lnbmFsQ29sb3IiOiIjMzMzIiwic2lnbmFsVGV4dENvbG9yIjoiIzMzMyIsImxhYmVsQm94QmtnQ29sb3IiOiIjRUNFQ0ZGIiwibGFiZWxCb3hCb3JkZXJDb2xvciI6ImhzbCgyNTkuNjI2MTY4MjI0MywgNTkuNzc2NTM2MzEyOCUsIDg3LjkwMTk2MDc4NDMlKSIsImxhYmVsVGV4dENvbG9yIjoiYmxhY2siLCJsb29wVGV4dENvbG9yIjoiYmxhY2siLCJub3RlQm9yZGVyQ29sb3IiOiIjYWFhYTMzIiwibm90ZUJrZ0NvbG9yIjoiI2ZmZjVhZCIsIm5vdGVUZXh0Q29sb3IiOiJibGFjayIsImFjdGl2YXRpb25Cb3JkZXJDb2xvciI6IiM2NjYiLCJhY3RpdmF0aW9uQmtnQ29sb3IiOiIjZjRmNGY0Iiwic2VxdWVuY2VOdW1iZXJDb2xvciI6IndoaXRlIiwic2VjdGlvbkJrZ0NvbG9yIjoicmdiYSgxMDIsIDEwMiwgMjU1LCAwLjQ5KSIsImFsdFNlY3Rpb25Ca2dDb2xvciI6IndoaXRlIiwic2VjdGlvbkJrZ0NvbG9yMiI6IiNmZmY0MDAiLCJ0YXNrQm9yZGVyQ29sb3IiOiIjNTM0ZmJjIiwidGFza0JrZ0NvbG9yIjoiIzhhOTBkZCIsInRhc2tUZXh0TGlnaHRDb2xvciI6IndoaXRlIiwidGFza1RleHRDb2xvciI6IndoaXRlIiwidGFza1RleHREYXJrQ29sb3IiOiJibGFjayIsInRhc2tUZXh0T3V0c2lkZUNvbG9yIjoiYmxhY2siLCJ0YXNrVGV4dENsaWNrYWJsZUNvbG9yIjoiIzAwMzE2MyIsImFjdGl2ZVRhc2tCb3JkZXJDb2xvciI6IiM1MzRmYmMiLCJhY3RpdmVUYXNrQmtnQ29sb3IiOiIjYmZjN2ZmIiwiZ3JpZENvbG9yIjoibGlnaHRncmV5IiwiZG9uZVRhc2tCa2dDb2xvciI6ImxpZ2h0Z3JleSIsImRvbmVUYXNrQm9yZGVyQ29sb3IiOiJncmV5IiwiY3JpdEJvcmRlckNvbG9yIjoiI2ZmODg4OCIsImNyaXRCa2dDb2xvciI6InJlZCIsInRvZGF5TGluZUNvbG9yIjoicmVkIiwibGFiZWxDb2xvciI6ImJsYWNrIiwiZXJyb3JCa2dDb2xvciI6IiM1NTIyMjIiLCJlcnJvclRleHRDb2xvciI6IiM1NTIyMjIiLCJjbGFzc1RleHQiOiIjMTMxMzAwIiwiZmlsbFR5cGUwIjoiI0VDRUNGRiIsImZpbGxUeXBlMSI6IiNmZmZmZGUiLCJmaWxsVHlwZTIiOiJoc2woMzA0LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTMiOiJoc2woMTI0LCAxMDAlLCA5My41Mjk0MTE3NjQ3JSkiLCJmaWxsVHlwZTQiOiJoc2woMTc2LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTUiOiJoc2woLTQsIDEwMCUsIDkzLjUyOTQxMTc2NDclKSIsImZpbGxUeXBlNiI6ImhzbCg4LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTciOiJoc2woMTg4LCAxMDAlLCA5My41Mjk0MTE3NjQ3JSkifX0sInVwZGF0ZUVkaXRvciI6ZmFsc2V9">live editor</a>]
-</td></tr>
-<tr>
-    <td><pre>
+```
+```mermaid
+classDiagram
+Class01 <|-- AveryLongClass : Cool
+<<Interface>> Class01
+Class09 --> C2 : Where am i?
+Class09 --* C3
+Class09 --|> Class07
+Class07 : equals()
+Class07 : Object[] elementData
+Class01 : size()
+Class01 : int chimp
+Class01 : int gorilla
+class Class10 {
+  <<service>>
+  int id
+  size()
+}
+```
+
+## State diagram [<a href="http://mermaid-js.github.io/mermaid/#/stateDiagram">docs</a> - <a href="https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtLXYyXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQiLCJ0aGVtZVZhcmlhYmxlcyI6eyJiYWNrZ3JvdW5kIjoid2hpdGUiLCJwcmltYXJ5Q29sb3IiOiIjRUNFQ0ZGIiwic2Vjb25kYXJ5Q29sb3IiOiIjZmZmZmRlIiwidGVydGlhcnlDb2xvciI6ImhzbCg4MCwgMTAwJSwgOTYuMjc0NTA5ODAzOSUpIiwicHJpbWFyeUJvcmRlckNvbG9yIjoiaHNsKDI0MCwgNjAlLCA4Ni4yNzQ1MDk4MDM5JSkiLCJzZWNvbmRhcnlCb3JkZXJDb2xvciI6ImhzbCg2MCwgNjAlLCA4My41Mjk0MTE3NjQ3JSkiLCJ0ZXJ0aWFyeUJvcmRlckNvbG9yIjoiaHNsKDgwLCA2MCUsIDg2LjI3NDUwOTgwMzklKSIsInByaW1hcnlUZXh0Q29sb3IiOiIjMTMxMzAwIiwic2Vjb25kYXJ5VGV4dENvbG9yIjoiIzAwMDAyMSIsInRlcnRpYXJ5VGV4dENvbG9yIjoicmdiKDkuNTAwMDAwMDAwMSwgOS41MDAwMDAwMDAxLCA5LjUwMDAwMDAwMDEpIiwibGluZUNvbG9yIjoiIzMzMzMzMyIsInRleHRDb2xvciI6IiMzMzMiLCJtYWluQmtnIjoiI0VDRUNGRiIsInNlY29uZEJrZyI6IiNmZmZmZGUiLCJib3JkZXIxIjoiIzkzNzBEQiIsImJvcmRlcjIiOiIjYWFhYTMzIiwiYXJyb3doZWFkQ29sb3IiOiIjMzMzMzMzIiwiZm9udEZhbWlseSI6IlwidHJlYnVjaGV0IG1zXCIsIHZlcmRhbmEsIGFyaWFsIiwiZm9udFNpemUiOiIxNnB4IiwibGFiZWxCYWNrZ3JvdW5kIjoiI2U4ZThlOCIsIm5vZGVCa2ciOiIjRUNFQ0ZGIiwibm9kZUJvcmRlciI6IiM5MzcwREIiLCJjbHVzdGVyQmtnIjoiI2ZmZmZkZSIsImNsdXN0ZXJCb3JkZXIiOiIjYWFhYTMzIiwiZGVmYXVsdExpbmtDb2xvciI6IiMzMzMzMzMiLCJ0aXRsZUNvbG9yIjoiIzMzMyIsImVkZ2VMYWJlbEJhY2tncm91bmQiOiIjZThlOGU4IiwiYWN0b3JCb3JkZXIiOiJoc2woMjU5LjYyNjE2ODIyNDMsIDU5Ljc3NjUzNjMxMjglLCA4Ny45MDE5NjA3ODQzJSkiLCJhY3RvckJrZyI6IiNFQ0VDRkYiLCJhY3RvclRleHRDb2xvciI6ImJsYWNrIiwiYWN0b3JMaW5lQ29sb3IiOiJncmV5Iiwic2lnbmFsQ29sb3IiOiIjMzMzIiwic2lnbmFsVGV4dENvbG9yIjoiIzMzMyIsImxhYmVsQm94QmtnQ29sb3IiOiIjRUNFQ0ZGIiwibGFiZWxCb3hCb3JkZXJDb2xvciI6ImhzbCgyNTkuNjI2MTY4MjI0MywgNTkuNzc2NTM2MzEyOCUsIDg3LjkwMTk2MDc4NDMlKSIsImxhYmVsVGV4dENvbG9yIjoiYmxhY2siLCJsb29wVGV4dENvbG9yIjoiYmxhY2siLCJub3RlQm9yZGVyQ29sb3IiOiIjYWFhYTMzIiwibm90ZUJrZ0NvbG9yIjoiI2ZmZjVhZCIsIm5vdGVUZXh0Q29sb3IiOiJibGFjayIsImFjdGl2YXRpb25Cb3JkZXJDb2xvciI6IiM2NjYiLCJhY3RpdmF0aW9uQmtnQ29sb3IiOiIjZjRmNGY0Iiwic2VxdWVuY2VOdW1iZXJDb2xvciI6IndoaXRlIiwic2VjdGlvbkJrZ0NvbG9yIjoicmdiYSgxMDIsIDEwMiwgMjU1LCAwLjQ5KSIsImFsdFNlY3Rpb25Ca2dDb2xvciI6IndoaXRlIiwic2VjdGlvbkJrZ0NvbG9yMiI6IiNmZmY0MDAiLCJ0YXNrQm9yZGVyQ29sb3IiOiIjNTM0ZmJjIiwidGFza0JrZ0NvbG9yIjoiIzhhOTBkZCIsInRhc2tUZXh0TGlnaHRDb2xvciI6IndoaXRlIiwidGFza1RleHRDb2xvciI6IndoaXRlIiwidGFza1RleHREYXJrQ29sb3IiOiJibGFjayIsInRhc2tUZXh0T3V0c2lkZUNvbG9yIjoiYmxhY2siLCJ0YXNrVGV4dENsaWNrYWJsZUNvbG9yIjoiIzAwMzE2MyIsImFjdGl2ZVRhc2tCb3JkZXJDb2xvciI6IiM1MzRmYmMiLCJhY3RpdmVUYXNrQmtnQ29sb3IiOiIjYmZjN2ZmIiwiZ3JpZENvbG9yIjoibGlnaHRncmV5IiwiZG9uZVRhc2tCa2dDb2xvciI6ImxpZ2h0Z3JleSIsImRvbmVUYXNrQm9yZGVyQ29sb3IiOiJncmV5IiwiY3JpdEJvcmRlckNvbG9yIjoiI2ZmODg4OCIsImNyaXRCa2dDb2xvciI6InJlZCIsInRvZGF5TGluZUNvbG9yIjoicmVkIiwibGFiZWxDb2xvciI6ImJsYWNrIiwiZXJyb3JCa2dDb2xvciI6IiM1NTIyMjIiLCJlcnJvclRleHRDb2xvciI6IiM1NTIyMjIiLCJjbGFzc1RleHQiOiIjMTMxMzAwIiwiZmlsbFR5cGUwIjoiI0VDRUNGRiIsImZpbGxUeXBlMSI6IiNmZmZmZGUiLCJmaWxsVHlwZTIiOiJoc2woMzA0LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTMiOiJoc2woMTI0LCAxMDAlLCA5My41Mjk0MTE3NjQ3JSkiLCJmaWxsVHlwZTQiOiJoc2woMTc2LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTUiOiJoc2woLTQsIDEwMCUsIDkzLjUyOTQxMTc2NDclKSIsImZpbGxUeXBlNiI6ImhzbCg4LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTciOiJoc2woMTg4LCAxMDAlLCA5My41Mjk0MTE3NjQ3JSkifX0sInVwZGF0ZUVkaXRvciI6ZmFsc2V9">live editor</a>]
+```
 stateDiagram-v2
 [*] --> Still
 Still --> [*]
@@ -140,46 +151,36 @@ Still --> Moving
 Moving --> Still
 Moving --> Crash
 Crash --> [*]
-</pre></td>
-    <td align="center">
-        <img src="https://raw.githubusercontent.com/mermaid-js/mermaid/master/img/gray-state.png" />
-    </td>
-</tr>
-<!-- </State> -->
-<!-- <Pie> -->
-<tr><td colspan=2 align="center">
-    <b>Pie</b><br />
-    [<a href="http://mermaid-js.github.io/mermaid/#/pie">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoicGllXG5cIkRvZ3NcIiA6IDQyLjk2XG5cIkNhdHNcIiA6IDUwLjA1XG5cIlJhdHNcIiA6IDEwLjAxIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
-</td></tr>
-<tr>
-    <td><pre>
+```
+```mermaid
+stateDiagram-v2
+[*] --> Still
+Still --> [*]
+Still --> Moving
+Moving --> Still
+Moving --> Crash
+Crash --> [*]
+```
+
+### Pie chart [<a href="http://mermaid-js.github.io/mermaid/#/pie">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoicGllXG5cIkRvZ3NcIiA6IDQyLjk2XG5cIkNhdHNcIiA6IDUwLjA1XG5cIlJhdHNcIiA6IDEwLjAxIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
+
+```
 pie
 "Dogs" : 386
 "Cats" : 85
 "Rats" : 15
-</pre></td>
-    <td align="center">
-        <img src="https://raw.githubusercontent.com/mermaid-js/mermaid/master/img/gray-pie.png" />
-    </td>
-</tr>
-<!-- </Pie> -->
-<!-- <Git> -->
-<tr><td colspan=2 align="center">
-    <b>Git</b><br />
-    [experimental - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ2l0R3JhcGg6XG5vcHRpb25zXG57XG4gICAgXCJub2RlU3BhY2luZ1wiOiAxNTAsXG4gICAgXCJub2RlUmFkaXVzXCI6IDEwXG59XG5lbmRcbmNvbW1pdFxuYnJhbmNoIG5ld2JyYW5jaFxuY2hlY2tvdXQgbmV3YnJhbmNoXG5jb21taXRcbmNvbW1pdFxuY2hlY2tvdXQgbWFzdGVyXG5jb21taXRcbmNvbW1pdFxubWVyZ2UgbmV3YnJhbmNoXG4iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
-</td></tr>
-<tr>
-    <td colspan="2" align="center"><i>Coming soon!</i></td>
-</tr>
-<!-- </Git> -->
-<!-- <Journey> -->
-<tr><td colspan=2 align="center">
-    <b>User Journey</b><br />
-    [<a href="http://mermaid-js.github.io/mermaid/#/user-journey">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
-</td></tr>
-<tr>
-  <td>
-  <pre>
+```
+```mermaid
+pie
+"Dogs" : 386
+"Cats" : 85
+"Rats" : 15
+```
+
+## Git graph [experimental - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ2l0R3JhcGg6XG5vcHRpb25zXG57XG4gICAgXCJub2RlU3BhY2luZ1wiOiAxNTAsXG4gICAgXCJub2RlUmFkaXVzXCI6IDEwXG59XG5lbmRcbmNvbW1pdFxuYnJhbmNoIG5ld2JyYW5jaFxuY2hlY2tvdXQgbmV3YnJhbmNoXG5jb21taXRcbmNvbW1pdFxuY2hlY2tvdXQgbWFzdGVyXG5jb21taXRcbmNvbW1pdFxubWVyZ2UgbmV3YnJhbmNoXG4iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
+
+## User Journey diagram [<a href="http://mermaid-js.github.io/mermaid/#/user-journey">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
+```
  journey
    title My working day
    section Go to work
@@ -189,14 +190,18 @@ pie
    section Go home
      Go downstairs: 5: Me
      Sit down: 3: Me
-</pre></td>
-  <td align="center">
-    <img alt="User Journey Diagram" src="img/gray-user-journey.png" />
-  </td>
-</tr>
-<!-- </Journey> -->
-
-</table>
+```
+```mermaid
+  journey
+    title My working day
+    section Go to work
+      Make tea: 5: Me
+      Go upstairs: 3: Me
+      Do work: 1: Me, Cat
+    section Go home
+      Go downstairs: 5: Me
+      Sit down: 3: Me
+```

 ## Related projects

@@ -210,6 +215,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!*
@@ -220,4 +228,4 @@ A quick note from Knut Sveidqvist:

 ---

-*Mermaid was created by Knut Sveidqvist for easier documentation.*
+*Mermaid was created by Knut Sveidqvist for easier documentation.*
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -40,7 +40,7 @@ __下面是一些使用 Mermaid 和类 Markdown 语法创建的图表示例。
 </td></tr>
 <tr>
    <td><pre>
-graph TD
+flowchart TD
 A[Hard] -->|Text| B(Round)
 B --> C{Decision}
 C -->|One| D[Result 1]
@@ -207,6 +207,10 @@ Mermaid 是一个不断发展中的社区，并且还在接收新的贡献者。

 关于如何贡献的详细信息可以在 [贡献指南](CONTRIBUTING.md) 中找到。

+## 报告漏洞
+
+如果想要报告漏洞，请发送邮件到 security@mermaid.live, 并附上问题的描述、复现问题的步骤、受影响的版本，以及解决问题的方案（如果有的话）。
+
 ## 鸣谢
 来自 Knut Sveidqvist:
 >*特别感谢 [d3](http://d3js.org/) 和 [dagre-d3](https://github.com/cpettitt/dagre-d3) 这两个优秀的项目，它们提供了图形布局和绘图工具库! *
--- 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/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/classDiagram.md
+++ b/docs/classDiagram.md
@@ -41,7 +41,7 @@ A single instance of a class in the diagram contains three compartments:

 - The top compartment contains the name of the class. It is printed in bold and centered, and the first letter is capitalized. It may also contain optional annotation text describing the nature of the class.
 - The middle compartment contains the attributes of the class. They are left-aligned and the first letter is lowercase.
-    The bottom compartment contains the operations the class can execute. They are also left-aligned and the first letter is lowercase.
+- The bottom compartment contains the operations the class can execute. They are also left-aligned and the first letter is lowercase.

 ```mermaid-example
 classDiagram
--- 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

@@ -130,7 +132,7 @@ They also serve as proof of concept, for the variety of things that can be built
 - [jSDoc](https://jsdoc.app/)
  - [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid)
 - [MkDocs](https://mkdocs.org)
-  - [MarkdownMermaid](https://github.com/sebastienwarin/mkdocs-mermaid-plugin)
+  - [mkdocs-mermaid2-plugin](https://github.com/fralau/mkdocs-mermaid2-plugin)
 - [Type Doc](https://typedoc.org/)
  - [typedoc-plugin-mermaid](https://www.npmjs.com/package/typedoc-plugin-mermaid)
 - [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) (Native support in theme)
--- 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/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.8",
+  "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",
@@ -61,7 +61,7 @@
    "d3": "^7.0.0",
    "dagre": "^0.8.5",
    "dagre-d3": "^0.6.4",
-    "dompurify": "2.3.4",
+    "dompurify": "2.3.5",
    "graphlib": "^2.1.8",
    "khroma": "^1.4.1",
    "moment-mini": "^2.24.0",
@@ -72,23 +72,23 @@
    "@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.4.1",
    "documentation": "13.2.0",
    "eslint": "^8.2.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-cypress": "^2.12.1",
    "eslint-plugin-html": "^6.2.0",
-    "eslint-plugin-jest": "^25.2.4",
+    "eslint-plugin-jest": "^26.0.0",
    "eslint-plugin-jsdoc": "^37.0.3",
    "eslint-plugin-markdown": "^2.2.1",
    "eslint-plugin-prettier": "^4.0.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
@@ -18,8 +18,6 @@ export const removeEscapes = (text) => {
    return String.fromCharCode(parseInt(match.replace(/\\u/g, ''), 16));
  });

-  console.log(newStr);
-
  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));
--- 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/yarn.lock
+++ b/yarn.lock