Merge branch 'master' into develop

2646 Removes a possible way for a diagram author to trigger a JavaScript using in diagram code.

.commitlintrc.json

@@ -0,0 +1,5 @@
+{
+    "extends": [
+        "@commitlint/config-conventional"
+    ]
+}

.eslintrc.json

@@ -13,8 +13,8 @@
     },
     "sourceType": "module"
   },
-  "extends": ["eslint:recommended", "plugin:jsdoc/recommended", "plugin:prettier/recommended"],
-  "plugins": ["jest", "jsdoc", "prettier"],
+  "extends": ["eslint:recommended", "plugin:jsdoc/recommended", "plugin:markdown/recommended", "plugin:prettier/recommended"],
+  "plugins": ["html", "jest", "jsdoc", "prettier"],
   "rules": {
     "no-prototype-builtins": 0,
     "no-unused-vars": 0,
@@ -23,6 +23,16 @@
     "jsdoc/check-line-alignment": 0,
     "jsdoc/multiline-blocks": 0,
     "jsdoc/newline-after-description": 0,
-    "jsdoc/tag-lines": 0
-  }
-} 
+    "jsdoc/tag-lines": 0,
+    "no-empty": ["error", { "allowEmptyCatch": true }]
+  },
+  "overrides": [
+    {
+      "files": "./**/*.html",
+      "rules": {
+        "no-undef": "off",
+        "jsdoc/require-jsdoc": "off"
+      }
+    }
+  ]
+}

.github/workflows/update-browserlist.yml

@@ -0,0 +1,18 @@
+name: Update Browserslist
+on:
+  schedule:
+    - cron: '0 7 * * 1'
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - run: npx browserslist@latest --update-db
+      - name: Commit changes
+        uses: EndBug/add-and-commit@v7
+        with:
+          author_name: ${{ github.actor }}
+          author_email: ${{ github.actor }}@users.noreply.github.com
+          message: 'chore: update browsers list'

.gitignore

@@ -4,8 +4,7 @@ node_modules/
 coverage/
 .idea/
 
-dist/*.js
-dist/*.map
+dist
 
 yarn-error.log
 .npmrc
@@ -13,10 +12,6 @@ token
 
 package-lock.json
 
-dist/classTest.html
-
-dist/sequenceTest.html
-
 .vscode/
 cypress/platform/current.html
 cypress/platform/experimental.html

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx --no-install commitlint --edit $1

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn dlx lint-staged
+yarn pre-commit

.lintstagedrc.json

@@ -1,5 +1,5 @@
 {
-  "*": [
+  "*.{js,html,md}": [
       "yarn lint:fix" 
    ]
-}
+}

.webpack/loaders/jison.js

@@ -1,6 +1,19 @@
 const { Generator } = require('jison');
 const validate = require('schema-utils');
-const schema = require('./parser-options-schema.json');
+
+const schema = {
+  title: 'Jison Parser options',
+  type: 'object',
+  properties: {
+    'token-stack': {
+      type: 'boolean',
+    },
+    debug: {
+      type: 'boolean',
+    },
+  },
+  additionalProperties: false,
+};
 
 module.exports = function jisonLoader(source) {
   const options = this.getOptions();

.webpack/webpack.config.babel.js

@@ -0,0 +1,45 @@
+import { merge, mergeWithCustomize, customizeObject } from 'webpack-merge';
+import nodeExternals from 'webpack-node-externals';
+import baseConfig from './webpack.config.base';
+
+export default (_env, args) => {
+  switch (args.mode) {
+    case 'development':
+      return [
+        baseConfig,
+        merge(baseConfig, {
+          externals: [nodeExternals()],
+          output: {
+            filename: '[name].core.js',
+          },
+        }),
+      ];
+    case 'production':
+      return [
+        // umd
+        merge(baseConfig, {
+          output: {
+            filename: '[name].min.js',
+          },
+        }),
+        // esm
+        mergeWithCustomize({
+          customizeObject: customizeObject({
+            'output.library': 'replace',
+          }),
+        })(baseConfig, {
+          experiments: {
+            outputModule: true,
+          },
+          output: {
+            library: {
+              type: 'module',
+            },
+            filename: '[name].esm.min.mjs',
+          },
+        }),
+      ];
+    default:
+      throw new Error('No matching configuration was found!');
+  }
+};

.webpack/webpack.config.base.js

@@ -0,0 +1,54 @@
+import path from 'path';
+
+export const resolveRoot = (...relativePath) => path.resolve(__dirname, '..', ...relativePath);
+
+export default {
+  amd: false, // https://github.com/lodash/lodash/issues/3052
+  target: 'web',
+  entry: {
+    mermaid: './src/mermaid.js',
+  },
+  resolve: {
+    extensions: ['.wasm', '.mjs', '.js', '.json', '.jison'],
+    fallback: {
+      fs: false, // jison generated code requires 'fs'
+      path: require.resolve('path-browserify'),
+    },
+  },
+  output: {
+    path: resolveRoot('./dist'),
+    filename: '[name].js',
+    library: {
+      name: 'mermaid',
+      type: 'umd',
+      export: 'default',
+    },
+    globalObject: 'typeof self !== "undefined" ? self : this',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        include: [resolveRoot('./src'), resolveRoot('./node_modules/dagre-d3-renderer/lib')],
+        use: {
+          loader: 'babel-loader',
+        },
+      },
+      {
+        // load scss to string
+        test: /\.scss$/,
+        use: ['css-to-string-loader', 'css-loader', 'sass-loader'],
+      },
+      {
+        test: /\.jison$/,
+        use: {
+          loader: path.resolve(__dirname, './loaders/jison.js'),
+          options: {
+            'token-stack': true,
+          },
+        },
+      },
+    ],
+  },
+  devtool: 'source-map',
+};

.webpack/webpack.config.e2e.babel.js

@@ -0,0 +1,37 @@
+import baseConfig, { resolveRoot } from './webpack.config.base';
+import { merge } from 'webpack-merge';
+
+export default merge(baseConfig, {
+  mode: 'development',
+  entry: {
+    mermaid: './src/mermaid.js',
+    e2e: './cypress/platform/viewer.js',
+    'bundle-test': './cypress/platform/bundle-test.js',
+  },
+  output: {
+    globalObject: 'window',
+  },
+  devServer: {
+    compress: true,
+    port: 9000,
+    static: [
+      { directory: resolveRoot('cypress', 'platform') },
+      { directory: resolveRoot('dist') },
+      { directory: resolveRoot('demos') },
+    ],
+  },
+  externals: {
+    mermaid: 'mermaid',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+        },
+      },
+    ],
+  },
+});

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!*

Renfay.md

@@ -1,3 +0,0 @@
-# Renfay project
-
-A note system!

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');
+  });
 });

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 }
     );

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

@@ -610,7 +610,7 @@ flowchart RL
     imgSnapshotTest(
       `flowchart TB
       a{{"Lorem 'ipsum' dolor 'sit' amet, 'consectetur' adipiscing 'elit'."}}
-      --> b{{"Lorem #quot;ipsum#quot; dolor #quot;sit#quot; amet,#quot;consectetur#quot; adipiscing #quot;elit#quot;."}}    
+      --> b{{"Lorem #quot;ipsum#quot; dolor #quot;sit#quot; amet,#quot;consectetur#quot; adipiscing #quot;elit#quot;."}}
       `,
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
@@ -638,4 +638,15 @@ flowchart RL
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
+
+  it('2388: handling default in the node name', () => {
+    imgSnapshotTest(
+      `
+      flowchart LR
+      default-index.js --> dot.template.js
+      index.js --> module-utl.js
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
 });

cypress/integration/rendering/theme.spec.js

@@ -1,5 +1,30 @@
 import { imgSnapshotTest } from '../../helpers/util.js';
 
+describe('themeCSS balancing, it', () => {
+  it('should not allow unbalanced CSS definitions', () => {
+    imgSnapshotTest(
+      `
+  %%{init: { 'themeCSS': '} * { background: red }' } }%%
+  flowchart TD
+    a --> b
+          `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('should not allow unbalanced CSS definitions 2', () => {
+    imgSnapshotTest(
+      `
+  %%{init: { 'themeCSS': '\u007D * { background: red }' } }%%
+  flowchart TD
+    a2 --> b2
+          `,
+      {}
+    );
+    cy.get('svg');
+  });
+});
+
 describe('Pie Chart', () => {
   // beforeEach(()=>{
   //   cy.clock((new Date('2014-06-09')).getTime());

cypress/platform/class.html

@@ -115,14 +115,14 @@
       <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         theme: 'default',
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { curve: 'linear', "htmlLabels": true },
+        flowchart: { curve: 'linear', htmlLabels: true },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
@@ -131,9 +131,11 @@
         //   fontFamily: '"arial", sans-serif',
         // },
         curve: 'linear',
-        securityLevel: 'loose'
+        securityLevel: 'loose',
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
     </script>
   </body>
 </html>

cypress/platform/click_security_loose.html

@@ -130,39 +130,39 @@
   <script src="./mermaid.js"></script>
   <script>
   function clickByFlow(elemName) {
-    const div = document.createElement('div')
-    div.className = 'created-by-click'
-    div.style = 'padding: 20px; background: green; color: white;'
-    div.innerText = 'Clicked By Flow'
+    const div = document.createElement('div');
+    div.className = 'created-by-click';
+    div.style = 'padding: 20px; background: green; color: white;';
+    div.innerText = 'Clicked By Flow';
 
-    document.getElementsByTagName('body')[0].appendChild(div)
+    document.getElementsByTagName('body')[0].appendChild(div);
   }
   function clickByFlowArg(argument) {
-    const div = document.createElement('div')
-    div.className = 'created-by-click-2'
-    div.style = 'padding: 20px; background: green; color: white;'
-    div.innerText = 'Clicked By Flow: ' + argument
+    const div = document.createElement('div');
+    div.className = 'created-by-click-2';
+    div.style = 'padding: 20px; background: green; color: white;';
+    div.innerText = 'Clicked By Flow: ' + argument;
 
-    document.getElementsByTagName('body')[0].appendChild(div)
+    document.getElementsByTagName('body')[0].appendChild(div);
   }
   function clickByGantt(arg1, arg2, arg3) {
-    const div = document.createElement('div')
-    div.className = 'created-by-gant-click'
-    div.style = 'padding: 20px; background: green; color: white;'
-    div.innerText = 'Clicked By Gant'
+    const div = document.createElement('div');
+    div.className = 'created-by-gant-click';
+    div.style = 'padding: 20px; background: green; color: white;';
+    div.innerText = 'Clicked By Gant';
     if (arg1) div.innerText += ' ' + arg1;
     if (arg2) div.innerText += ' ' + arg2;
     if (arg3) div.innerText += ' ' + arg3;
 
-    document.getElementsByTagName('body')[0].appendChild(div)
+    document.getElementsByTagName('body')[0].appendChild(div);
   }
   function clickByClass(arg) {
-    const div = document.createElement('div')
-    div.className = 'created-by-class-click'
-    div.style = 'padding: 20px; background: purple; color: white;'
-    div.innerText = 'Clicked By Class' + (arg?arg:'')
+    const div = document.createElement('div');
+    div.className = 'created-by-class-click';
+    div.style = 'padding: 20px; background: purple; color: white;';
+    div.innerText = 'Clicked By Class' + (arg ? arg : '');
 
-    document.getElementsByTagName('body')[0].appendChild(div)
+    document.getElementsByTagName('body')[0].appendChild(div);
   }
   mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
   </script>

cypress/platform/click_security_other.html

@@ -62,20 +62,20 @@
   <script src="./mermaid.js"></script>
   <script>
   function clickByFlow(elemName) {
-    const div = document.createElement('div')
-    div.className = 'created-by-click'
-    div.style = 'padding: 20px; background: green; color: white;'
-    div.innerText = 'Clicked By Flow'
+    const div = document.createElement('div');
+    div.className = 'created-by-click';
+    div.style = 'padding: 20px; background: green; color: white;';
+    div.innerText = 'Clicked By Flow';
 
-    document.getElementsByTagName('body')[0].appendChild(div)
+    document.getElementsByTagName('body')[0].appendChild(div);
   }
   function clickByGantt(elemName) {
-    const div = document.createElement('div')
-    div.className = 'created-by-gant-click'
-    div.style = 'padding: 20px; background: green; color: white;'
-    div.innerText = 'Clicked By Gant'
+    const div = document.createElement('div');
+    div.className = 'created-by-gant-click';
+    div.style = 'padding: 20px; background: green; color: white;';
+    div.innerText = 'Clicked By Gant';
 
-    document.getElementsByTagName('body')[0].appendChild(div)
+    document.getElementsByTagName('body')[0].appendChild(div);
   }
   mermaid.initialize({ startOnLoad: true, securityLevel: 'strct', logLevel: 1 });
   </script>

cypress/platform/click_security_strict.html

@@ -64,23 +64,23 @@
   <script src="./mermaid.js"></script>
   <script>
   function clickByFlow(elemName) {
-    const div = document.createElement('div')
-    div.className = 'created-by-click'
-    div.style = 'padding: 20px; background: green; color: white;'
-    div.innerText = 'Clicked By Flow'
+    const div = document.createElement('div');
+    div.className = 'created-by-click';
+    div.style = 'padding: 20px; background: green; color: white;';
+    div.innerText = 'Clicked By Flow';
 
-    document.getElementsByTagName('body')[0].appendChild(div)
+    document.getElementsByTagName('body')[0].appendChild(div);
   }
   function clickByGantt(arg1, arg2, arg3) {
-    const div = document.createElement('div')
-    div.className = 'created-by-gant-click'
-    div.style = 'padding: 20px; background: green; color: white;'
-    div.innerText = 'Clicked By Gant'
+    const div = document.createElement('div');
+    div.className = 'created-by-gant-click';
+    div.style = 'padding: 20px; background: green; color: white;';
+    div.innerText = 'Clicked By Gant';
     if (arg1) div.innerText += ' ' + arg1;
     if (arg2) div.innerText += ' ' + arg2;
     if (arg3) div.innerText += ' ' + arg3;
 
-    document.getElementsByTagName('body')[0].appendChild(div)
+    document.getElementsByTagName('body')[0].appendChild(div);
   }
   mermaid.initialize({ startOnLoad: true, securityLevel: 'strict', logLevel: 1 });
   </script>

cypress/platform/css1.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Mermaid Quick Test Page</title>
+  <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
+  <style>
+    body {
+      font-family: 'trebuchet ms', verdana, arial;
+    }
+  </style>
+</head>
+<body>
+  <div class="mermaid2">
+  %%{init: { 'themeCSS': '} * { background: lightblue }' } }%%
+  flowchart TD
+    a --> b
+  </div>
+  <div class="mermaid">
+   %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
+    flowchart LR
+    subgraph A
+        a --> b
+    end
+    subgraph B
+        i -->f
+    end
+    A --> B
+  </div>
+  <script src="./mermaid.js"></script>
+  <script>
+     function showFullFirstSquad(elemName) {
+       console.log('show ' + elemName);
+     }
+     mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 0 });
+  </script>
+</body>
+</html>

cypress/platform/current.html

@@ -155,23 +155,25 @@ _one --> b
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         // theme: 'forest',
         // themeVariables:{primaryColor: '#ff0000'},
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { curve: 'cardinal', "htmlLabels": true },
+        flowchart: { curve: 'cardinal', htmlLabels: true },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         fontFamily: '"arial", sans-serif',
         curve: 'cardinal',
-        securityLevel: 'strict'
+        securityLevel: 'strict',
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
     </script>
   </body>
 </html>

cypress/platform/current2.html

@@ -107,23 +107,25 @@ Note over Bob,Alice: Looks back
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         // theme: 'forest',
         // themeVariables:{primaryColor: '#ff0000'},
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { curve: 'cardinal', "htmlLabels": false },
+        flowchart: { curve: 'cardinal', htmlLabels: false },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         fontFamily: '"arial", sans-serif',
         curve: 'cardinal',
-        securityLevel: 'strict'
+        securityLevel: 'strict',
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
     </script>
   </body>
 </html>

cypress/platform/huge.html

@@ -29,7 +29,7 @@
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { curve: 'linear', "htmlLabels": false },
+        flowchart: { curve: 'linear', htmlLabels: false },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50 },
         // sequenceDiagram: { actorMargin: 300 } // deprecated

cypress/platform/interaction.html

@@ -90,31 +90,31 @@
   <script src="./mermaid.js"></script>
   <script>
   function clickByFlow(elemName) {
-    const div = document.createElement('div')
-    div.className = 'created-by-click'
-    div.style = 'padding: 20px; background: green; color: white;'
-    div.innerText = 'Clicked By Flow'
+    const div = document.createElement('div');
+    div.className = 'created-by-click';
+    div.style = 'padding: 20px; background: green; color: white;';
+    div.innerText = 'Clicked By Flow';
 
-    document.getElementsByTagName('body')[0].appendChild(div)
+    document.getElementsByTagName('body')[0].appendChild(div);
   }
   function clickByGantt(arg1, arg2, arg3) {
-    const div = document.createElement('div')
-    div.className = 'created-by-gant-click'
-    div.style = 'padding: 20px; background: green; color: white;'
-    div.innerText = 'Clicked By Gant'
+    const div = document.createElement('div');
+    div.className = 'created-by-gant-click';
+    div.style = 'padding: 20px; background: green; color: white;';
+    div.innerText = 'Clicked By Gant';
     if (arg1) div.innerText += ' ' + arg1;
     if (arg2) div.innerText += ' ' + arg2;
     if (arg3) div.innerText += ' ' + arg3;
 
-    document.getElementsByTagName('body')[0].appendChild(div)
+    document.getElementsByTagName('body')[0].appendChild(div);
   }
   function clickByClass() {
-    const div = document.createElement('div')
-    div.className = 'created-by-class-click'
-    div.style = 'padding: 20px; background: purple; color: white;'
-    div.innerText = 'Clicked By Class'
+    const div = document.createElement('div');
+    div.className = 'created-by-class-click';
+    div.style = 'padding: 20px; background: purple; color: white;';
+    div.innerText = 'Clicked By Class';
 
-    document.getElementsByTagName('body')[0].appendChild(div)
+    document.getElementsByTagName('body')[0].appendChild(div);
   }
   mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
   </script>

cypress/platform/knsv.html

@@ -38,32 +38,33 @@ stateDiagram-v2
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         // theme: 'dark',
         theme: 'forest',
         arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
-        logLevel: 2,
         flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: false },
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         // fontFamily: '"times", sans-serif',
         // fontFamily: 'courier',
-        state:{
+        state: {
           nodeSpacing: 50,
           rankSpacing: 50,
           defaultRenderer: 'dagre-wrapper',
         },
-        logLevel:0,
+        logLevel: 0,
         fontSize: 18,
         curve: 'cardinal',
         securityLevel: 'strict',
         // themeVariables: {relationLabelColor: 'red'}
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
     </script>
   </body>
 </html>

cypress/platform/knsv2.html

@@ -46,8 +46,8 @@
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         theme: 'forest',
         arrowMarkerAbsolute: true,
@@ -58,35 +58,39 @@
         },
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
-          nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
         },
         htmlLabels: false,
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
+        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
+        startOnLoad: false,
         // themeVariables: {relationLabelColor: 'red'}
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
 
-      var diagram = "%%{init: {\"flowchart\": {\"htmlLabels\": \"false\"}} }%%\n";
-  diagram += "flowchart\n";
-  diagram += "A[\"<ifra";
-  diagram += "me srcdoc='<scrip";
-  diagram += "t src=http://localhost:9000/exploit.js>";
-  diagram += "</scr"
-  diagram += "ipt>'></iframe>\"]";
+      var diagram = '%%{init: {"flowchart": {"htmlLabels": "false"}} }%%\n';
+diagram += 'flowchart\n';
+diagram += 'A["<ifra';
+diagram += "me srcdoc='<scrip";
+diagram += 't src=http://localhost:9000/exploit.js>';
+diagram += '</scr';
+diagram += 'ipt>\'></iframe>"]';
 
-  console.log(diagram);
-  // document.querySelector('#diagram').innerHTML = diagram;
-  mermaid.render('diagram', diagram, (res) => {
-    document.querySelector('#res').innerHTML = res;
-  });
+console.log(diagram);
+// document.querySelector('#diagram').innerHTML = diagram;
+mermaid.render('diagram', diagram, (res) => {
+  document.querySelector('#res').innerHTML = res;
+});
     </script>
   </body>
 </html>

cypress/platform/knsv3.html

@@ -185,8 +185,8 @@ style N stroke:#0000ff,fill:#ccccff,color:#0000ff
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         theme: 'neutral',
         arrowMarkerAbsolute: true,
@@ -195,7 +195,7 @@ style N stroke:#0000ff,fill:#ccccff,color:#0000ff
         flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: true },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         // fontFamily: '"times", sans-serif',
         // fontFamily: 'courier',
@@ -204,7 +204,9 @@ style N stroke:#0000ff,fill:#ccccff,color:#0000ff
         securityLevel: 'loose',
         // themeVariables: {relationLabelColor: 'red'}
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
     </script>
   </body>
 </html>

cypress/platform/regression/issue-1874.html

@@ -3,10 +3,9 @@
     <script src="http://localhost:9000/mermaid.js"></script>
   <script>
       mermaid.initialize({
-       theme: 'base',
-       themeVariables: {
-      },
-      startOnLoad: true,
+        theme: 'base',
+        themeVariables: {},
+        startOnLoad: true,
       });
   </script>
 

cypress/platform/render-after-error.html

@@ -11,21 +11,16 @@
         </div>
 
         <script src="./mermaid.js"></script>
-        <script>
-
-         mermaid.init({ startOnLoad: false });
+        <script>mermaid.init({ startOnLoad: false });
          mermaid.mermaidAPI.initialize();
 
-         try{
-             mermaid.mermaidAPI.render("graphDiv",
-                                       `>`);
-         } catch(e){}
+         try {
+           mermaid.mermaidAPI.render('graphDiv', `>`);
+         } catch (e) {}
 
-         mermaid.mermaidAPI.render("graphDiv",
-                                   `graph LR\n a --> b`, html => {
-                                      document.getElementById('graph').innerHTML=html;
+         mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`, (html) => {
+           document.getElementById('graph').innerHTML = html;
          });
-
         </script>
 
     </body>

cypress/platform/rerender.html

@@ -11,21 +11,18 @@
 </div>
 
   <script src="./mermaid.js"></script>
-  <script>
-
-    mermaid.init({ startOnLoad: false });
+  <script>mermaid.init({ startOnLoad: false });
     mermaid.mermaidAPI.initialize();
 
     rerender('XMas');
 
     function rerender(text) {
       var graphText = `graph TD
-        A[${text}] -->|Get money| B(Go shopping)`
+        A[${text}] -->|Get money| B(Go shopping)`;
       var graph = mermaid.mermaidAPI.render('id', graphText);
-      console.log('\x1b[35m%s\x1b[0m', '>> graph', graph)
-      document.getElementById('graph').innerHTML=graph;
+      console.log('\x1b[35m%s\x1b[0m', '>> graph', graph);
+      document.getElementById('graph').innerHTML = graph;
     }
-
   </script>
   <button id="rerender" onclick="rerender('Saturday')">Rerender</button>
 

cypress/platform/showcase_base.html

@@ -267,23 +267,25 @@ requirementDiagram
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         theme: 'base',
         // themeVariables:
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { curve: 'cardinal', "htmlLabels": false },
+        flowchart: { curve: 'cardinal', htmlLabels: false },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         fontFamily: '"arial", sans-serif',
         curve: 'cardinal',
-        securityLevel: 'strict'
+        securityLevel: 'strict',
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
     </script>
   </body>
 </html>

cypress/platform/showcase_base_dark.html

@@ -262,15 +262,24 @@ requirementDiagram
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         theme: 'base',
-        themeVariables: { primaryColor: '#9400D3', darkMode: true, background: '#222', textColor:'white', primaryTextColor: '#f4f4f4', nodeBkg: '#ff0000', mainBkg:'#0000ff', tertiaryColor:'#ffffcc' },
+        themeVariables: {
+    primaryColor: '#9400D3',
+    darkMode: true,
+    background: '#222',
+    textColor: 'white',
+    primaryTextColor: '#f4f4f4',
+    nodeBkg: '#ff0000',
+    mainBkg: '#0000ff',
+    tertiaryColor: '#ffffcc',
+  },
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { curve: 'cardinal', "htmlLabels": false },
+        flowchart: { curve: 'cardinal', htmlLabels: false },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
@@ -278,7 +287,9 @@ requirementDiagram
         curve: 'cardinal',
         // securityLevel: 'strict'
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
     </script>
   </body>
 </html>

cypress/platform/showcase_dark.html

@@ -259,22 +259,24 @@ requirementDiagram
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         theme: 'dark',
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { curve: 'cardinal', "htmlLabels": true },
+        flowchart: { curve: 'cardinal', htmlLabels: true },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         fontFamily: '"arial", sans-serif',
         curve: 'cardinal',
-        securityLevel: 'strict'
+        securityLevel: 'strict',
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
     </script>
   </body>
 </html>

cypress/platform/showcase_default.html

@@ -254,22 +254,24 @@ requirementDiagram
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         // theme: 'dark',
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { curve: 'cardinal', "htmlLabels": false },
+        flowchart: { curve: 'cardinal', htmlLabels: false },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         fontFamily: '"arial", sans-serif',
         curve: 'cardinal',
-        securityLevel: 'strict'
+        securityLevel: 'strict',
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
     </script>
   </body>
 </html>

cypress/platform/showcase_forest.html

@@ -258,22 +258,24 @@ requirementDiagram
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         theme: 'forest',
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { curve: 'cardinal', "htmlLabels": false },
+        flowchart: { curve: 'cardinal', htmlLabels: false },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         fontFamily: '"arial", sans-serif',
         curve: 'cardinal',
-        securityLevel: 'strict'
+        securityLevel: 'strict',
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
     </script>
   </body>
 </html>

cypress/platform/showcase_neutral.html

@@ -257,22 +257,24 @@ requirementDiagram
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         theme: 'neutral',
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { curve: 'cardinal', "htmlLabels": false },
+        flowchart: { curve: 'cardinal', htmlLabels: false },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         fontFamily: '"arial", sans-serif',
         curve: 'cardinal',
-        securityLevel: 'strict'
+        securityLevel: 'strict',
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
     </script>
   </body>
 </html>

cypress/platform/subgraph.html

@@ -37,9 +37,9 @@
   <script src="./mermaid.js"></script>
   <script>
      function showFullFirstSquad(elemName) {
-            console.log('show ' + elemName);
-        }
-        mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
+       console.log('show ' + elemName);
+     }
+     mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
   </script>
 </body>
 </html>

cypress/platform/theme-directives.html

@@ -120,8 +120,8 @@
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         // theme: 'dark',
         // theme: 'dark',
@@ -129,7 +129,7 @@
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
         // flowchart: { useMaxWidth: true },
-        graph: { curve: 'cardinal', "htmlLabels": false },
+        graph: { curve: 'cardinal', htmlLabels: false },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
@@ -137,7 +137,9 @@
         curve: 'cardinal',
         securityLevel: 'strict',
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
     </script>
   </body>
 </html>

cypress/platform/vertices.html

@@ -29,9 +29,9 @@
   <script src="./mermaid.js"></script>
   <script>
      function showFullFirstSquad(elemName) {
-            console.log('show ' + elemName);
-        }
-        mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
+       console.log('show ' + elemName);
+     }
+     mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
   </script>
 </body>
 </html>

cypress/platform/xss.html

@@ -23,11 +23,11 @@
       }
     </style>
     <script>
-      function xssAttack(){
-        const div = document.createElement('div')
-        div.id = 'the-malware'
-        div.className = 'malware'
-        div.innerHTML = 'XSS Succeeded'
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
         // const el = document.querySelector('.mermaid');
         // el.parentNode.removeChild(el);

cypress/platform/xss10.html

@@ -46,8 +46,8 @@
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         theme: 'forest',
         arrowMarkerAbsolute: true,
@@ -58,11 +58,13 @@
         },
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
-          nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         // fontFamily: '"times", sans-serif',
         // fontFamily: 'courier',
@@ -70,35 +72,36 @@
         curve: 'basis',
         securityLevel: 'antiscript',
         startOnLoad: false,
-        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
+        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'
+      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\n"
-diagram += "class Square~<img/src";
+      var diagram = 'classDiagram\n';
+diagram += 'class Square~<img/src';
 diagram += "='1'/onerror=xssAttack()>~{\n";
-diagram += "id A\n";
-diagram += "}";
+diagram += 'id A\n';
+diagram += '}';
 
-    //   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;
-  });
+//   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>

cypress/platform/xss11.html

@@ -46,8 +46,8 @@
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         theme: 'forest',
         arrowMarkerAbsolute: true,
@@ -58,11 +58,13 @@
         },
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
-          nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         // fontFamily: '"times", sans-serif',
         // fontFamily: 'courier',
@@ -70,33 +72,34 @@
         curve: 'basis',
         securityLevel: 'antiscript',
         startOnLoad: false,
-        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
+        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'
+      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 = "stateDiagram-v2\n"
-diagram += "s2 : This is a state description<img/src";
+var diagram = 'stateDiagram-v2\n';
+diagram += 's2 : This is a state description<img/src';
 diagram += "='1'/onerror=xssAttack()>";
 
-    //   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;
-  });
+//   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>

cypress/platform/xss12.html

@@ -46,8 +46,8 @@
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         theme: 'forest',
         arrowMarkerAbsolute: true,
@@ -58,11 +58,13 @@
         },
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
-          nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         // fontFamily: '"times", sans-serif',
         // fontFamily: 'courier',
@@ -70,33 +72,34 @@
         curve: 'basis',
         securityLevel: 'antiscript',
         startOnLoad: false,
-        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
+        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'
+      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 = "stateDiagram-v2\n"
-diagram += "s2 : A<img/src";
+var diagram = 'stateDiagram-v2\n';
+diagram += 's2 : A<img/src';
 diagram += "='1'/onerror=xssAttack()>";
 
-    //   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;
-  });
+//   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>

cypress/platform/xss13.html

@@ -46,8 +46,8 @@
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         theme: 'forest',
         arrowMarkerAbsolute: true,
@@ -58,11 +58,13 @@
         },
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
-          nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         // fontFamily: '"times", sans-serif',
         // fontFamily: 'courier',
@@ -70,33 +72,34 @@
         curve: 'basis',
         securityLevel: 'antiscript',
         startOnLoad: false,
-        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
+        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'
+      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 = "stateDiagram-v2\n"
-diagram += "if_state --> False: if n < 0<img/src";
+var diagram = 'stateDiagram-v2\n';
+diagram += 'if_state --> False: if n < 0<img/src';
 diagram += "='1'/onerror=xssAttack()>";
 
-    //   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;
-  });
+//   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>

cypress/platform/xss14.html

@@ -46,8 +46,8 @@
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         theme: 'forest',
         arrowMarkerAbsolute: true,
@@ -58,11 +58,13 @@
         },
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
-          nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         // fontFamily: '"times", sans-serif',
         // fontFamily: 'courier',
@@ -70,34 +72,36 @@
         curve: 'basis',
         securityLevel: 'antiscript',
         startOnLoad: false,
-        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
+        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'
+      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\n"
-diagram += "classA <-- classB : <ifr";
+      var diagram = 'classDiagram\n';
+diagram += 'classA <-- classB : <ifr';
 diagram += "ame/srcdoc='<scr";
-diagram += "ipt>parent.xssAttack(`XSS`)</";
+diagram += 'ipt>parent.xssAttack(`XSS`)</';
 diagram += "script>'>";
 
-    //   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;
-  });
+//   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>

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

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

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

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

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

cypress/platform/xss2.html

@@ -22,11 +22,11 @@
       }
     </style>
     <script>
-      function xssAttack(){
-        const div = document.createElement('div')
-        div.id = 'the-malware'
-        div.className = 'malware'
-        div.innerHTML = 'XSS Succeeded'
+      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');
       }
@@ -62,11 +62,11 @@
       var handler = setInterval(() => {
         cnt++;
         a = {};
-        if(typeof a.polluted !== 'undefined') {
+        if (typeof a.polluted !== 'undefined') {
           clearInterval(handler);
           xssAttack();
         }
-        if(cnt>20) {
+        if (cnt > 20) {
           clearInterval(handler);
         }
       }, 100);

cypress/platform/xss3.html

@@ -22,11 +22,11 @@
       }
     </style>
     <script>
-      function xssAttack(){
-        const div = document.createElement('div')
-        div.id = 'the-malware'
-        div.className = 'malware'
-        div.innerHTML = 'XSS Succeeded'
+      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');
       }
@@ -49,11 +49,11 @@
       var handler = setInterval(() => {
         cnt++;
         a = {};
-        if(typeof a.polluted !== 'undefined') {
+        if (typeof a.polluted !== 'undefined') {
           clearInterval(handler);
           xssAttack();
         }
-        if(cnt>20) {
+        if (cnt > 20) {
           clearInterval(handler);
         }
       }, 100);

cypress/platform/xss4.html

@@ -46,8 +46,8 @@
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         theme: 'forest',
         arrowMarkerAbsolute: true,
@@ -58,11 +58,13 @@
         },
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
-          nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
         },
         htmlLabels: false,
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         // fontFamily: '"times", sans-serif',
         // fontFamily: 'courier',
@@ -70,24 +72,26 @@
         curve: 'basis',
         securityLevel: 'strict',
         startOnLoad: false,
-        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
+        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
         // themeVariables: {relationLabelColor: 'red'}
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
 
-      var diagram = "%%{init: {\"flowchart\": {\"htmlLabels\": \"true\"}} }%%\n";
-  diagram += "flowchart\n";
-  diagram += "A[\"<ifra";
-  diagram += "me srcdoc='<scrip";
-  diagram += "t src=http://localhost:9000/exploit.js>";
-  diagram += "</scr"
-  diagram += "ipt>'></iframe>\"]";
+      var diagram = '%%{init: {"flowchart": {"htmlLabels": "true"}} }%%\n';
+diagram += 'flowchart\n';
+diagram += 'A["<ifra';
+diagram += "me srcdoc='<scrip";
+diagram += 't src=http://localhost:9000/exploit.js>';
+diagram += '</scr';
+diagram += 'ipt>\'></iframe>"]';
 
-  console.log(diagram);
-  // document.querySelector('#diagram').innerHTML = diagram;
-  mermaid.render('diagram', diagram, (res) => {
-    document.querySelector('#res').innerHTML = res;
-  });
+console.log(diagram);
+// document.querySelector('#diagram').innerHTML = diagram;
+mermaid.render('diagram', diagram, (res) => {
+  document.querySelector('#res').innerHTML = res;
+});
     </script>
   </body>
 </html>

cypress/platform/xss5.html

@@ -46,8 +46,8 @@
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         theme: 'forest',
         arrowMarkerAbsolute: true,
@@ -58,11 +58,13 @@
         },
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
-          nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         // fontFamily: '"times", sans-serif',
         // fontFamily: 'courier',
@@ -70,29 +72,31 @@
         curve: 'basis',
         securityLevel: 'antiscript',
         startOnLoad: false,
-        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
+        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'
+      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 = "graph LR\n";
-  diagram += "B-->D\(\"<img onerror=location=\`java";
-  // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
-  diagram += "script\x3a;xssAttack\u0028\u0029\` src=x>\"\);\n";
+      var diagram = 'graph LR\n';
+diagram += 'B-->D("<img onerror=location=`java';
+// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
+diagram += 'script\x3a;xssAttack\u0028\u0029` src=x>");\n';
 
-  console.log(diagram);
-  // document.querySelector('#diagram').innerHTML = diagram;
-  mermaid.render('diagram', diagram, (res) => {
-    console.log(res);
-    document.querySelector('#res').innerHTML = res;
-  });
+console.log(diagram);
+// document.querySelector('#diagram').innerHTML = diagram;
+mermaid.render('diagram', diagram, (res) => {
+  console.log(res);
+  document.querySelector('#res').innerHTML = res;
+});
     </script>
   </body>
 </html>

cypress/platform/xss6.html

@@ -46,8 +46,8 @@
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         theme: 'forest',
         arrowMarkerAbsolute: true,
@@ -58,11 +58,13 @@
         },
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
-          nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         // fontFamily: '"times", sans-serif',
         // fontFamily: 'courier',
@@ -70,27 +72,29 @@
         curve: 'basis',
         securityLevel: 'antiscript',
         startOnLoad: false,
-        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
+        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'
+      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 = "graph LR\n";
-  diagram += "A(<img/src/onerror=xssAttack`1`>)";
-  // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
-  console.log(diagram);
-  // document.querySelector('#diagram').innerHTML = diagram;
-  mermaid.render('diagram', diagram, (res) => {
-    console.log(res);
-    document.querySelector('#res').innerHTML = res;
-  });
+      var diagram = 'graph LR\n';
+diagram += 'A(<img/src/onerror=xssAttack`1`>)';
+// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
+console.log(diagram);
+// document.querySelector('#diagram').innerHTML = diagram;
+mermaid.render('diagram', diagram, (res) => {
+  console.log(res);
+  document.querySelector('#res').innerHTML = res;
+});
     </script>
   </body>
 </html>

cypress/platform/xss7.html

@@ -46,8 +46,8 @@
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         theme: 'forest',
         arrowMarkerAbsolute: true,
@@ -58,11 +58,13 @@
         },
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
-          nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         // fontFamily: '"times", sans-serif',
         // fontFamily: 'courier',
@@ -70,29 +72,31 @@
         curve: 'basis',
         securityLevel: 'antiscript',
         startOnLoad: false,
-        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
+        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'
+      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 = "graph LR\n";
-  diagram += " B(<a href='<";
-  diagram += "script></";
-  diagram += "script>Javascript:xssAttack`1`'>Click)";
-  // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
-  console.log(diagram);
-  // document.querySelector('#diagram').innerHTML = diagram;
-  mermaid.render('diagram', diagram, (res) => {
-    console.log(res);
-    document.querySelector('#res').innerHTML = res;
-  });
+      var diagram = 'graph LR\n';
+diagram += " B(<a href='<";
+diagram += 'script></';
+diagram += "script>Javascript:xssAttack`1`'>Click)";
+// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
+console.log(diagram);
+// document.querySelector('#diagram').innerHTML = diagram;
+mermaid.render('diagram', diagram, (res) => {
+  console.log(res);
+  document.querySelector('#res').innerHTML = res;
+});
     </script>
   </body>
 </html>

cypress/platform/xss8.html

@@ -46,8 +46,8 @@
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         theme: 'forest',
         arrowMarkerAbsolute: true,
@@ -58,11 +58,13 @@
         },
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
-          nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         // fontFamily: '"times", sans-serif',
         // fontFamily: 'courier',
@@ -70,29 +72,30 @@
         curve: 'basis',
         securityLevel: 'antiscript',
         startOnLoad: false,
-        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
+        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'
+      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 = "stateDiagram-v2\n";
-     diagram += "<img/src='1'/onerror=xssAttack()> --> B";
-  // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
-  console.log(diagram);
-  // document.querySelector('#diagram').innerHTML = diagram;
-  mermaid.render('diagram', diagram, (res) => {
-    console.log(res);
-    document.querySelector('#res').innerHTML = res;
-  });
+var diagram = 'stateDiagram-v2\n';
+diagram += "<img/src='1'/onerror=xssAttack()> --> B";
+// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
+console.log(diagram);
+// document.querySelector('#diagram').innerHTML = diagram;
+mermaid.render('diagram', diagram, (res) => {
+  console.log(res);
+  document.querySelector('#res').innerHTML = res;
+});
     </script>
   </body>
 </html>

cypress/platform/xss9.html

@@ -46,8 +46,8 @@
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
         theme: 'forest',
         arrowMarkerAbsolute: true,
@@ -58,11 +58,13 @@
         },
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
-          nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         // fontFamily: '"times", sans-serif',
         // fontFamily: 'courier',
@@ -70,29 +72,30 @@
         curve: 'basis',
         securityLevel: 'antiscript',
         startOnLoad: false,
-        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
+        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'
+      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 = "stateDiagram-v2\n";
-     diagram += "<img/src='1'/onerror=xssAttack()> --> B";
-  // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
-  console.log(diagram);
-  // document.querySelector('#diagram').innerHTML = diagram;
-  mermaid.render('diagram', diagram, (res) => {
-    console.log(res);
-    document.querySelector('#res').innerHTML = res;
-  });
+var diagram = 'stateDiagram-v2\n';
+diagram += "<img/src='1'/onerror=xssAttack()> --> B";
+// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
+console.log(diagram);
+// document.querySelector('#diagram').innerHTML = diagram;
+mermaid.render('diagram', diagram, (res) => {
+  console.log(res);
+  document.querySelector('#res').innerHTML = res;
+});
     </script>
   </body>
 </html>

demos/dataflowchart.html

@@ -36,17 +36,17 @@
       theme: 'forest',
       logLevel: 3,
       securityLevel: 'loose',
-      flowchart: { curve: 'basis' }
+      flowchart: { curve: 'basis' },
     });
   </script>
   <script>
     function testClick(nodeId) {
-      console.log("clicked", nodeId)
-      var originalBgColor = document.querySelector('body').style.backgroundColor
-      document.querySelector('body').style.backgroundColor = 'yellow'
-      setTimeout(function() {
-        document.querySelector('body').style.backgroundColor = originalBgColor
-      }, 100)
+      console.log('clicked', nodeId);
+      var originalBgColor = document.querySelector('body').style.backgroundColor;
+      document.querySelector('body').style.backgroundColor = 'yellow';
+      setTimeout(function () {
+        document.querySelector('body').style.backgroundColor = originalBgColor;
+      }, 100);
     }
   </script>
 </body>

demos/flowchart.html

@@ -1088,17 +1088,17 @@
       theme: 'forest',
       logLevel: 3,
       securityLevel: 'loose',
-      flowchart: { curve: 'basis' }
+      flowchart: { curve: 'basis' },
     });
   </script>
   <script>
     function testClick(nodeId) {
-      console.log("clicked", nodeId)
-      var originalBgColor = document.querySelector('body').style.backgroundColor
-      document.querySelector('body').style.backgroundColor = 'yellow'
-      setTimeout(function() {
-        document.querySelector('body').style.backgroundColor = originalBgColor
-      }, 100)
+      console.log('clicked', nodeId);
+      var originalBgColor = document.querySelector('body').style.backgroundColor;
+      document.querySelector('body').style.backgroundColor = 'yellow';
+      setTimeout(function () {
+        document.querySelector('body').style.backgroundColor = originalBgColor;
+      }, 100);
     }
   </script>
 </body>

demos/index.html

@@ -790,31 +790,31 @@
   </script>
   <script>
     function ganttTestClick(a, b, c) {
-      console.log("a:", a)
-      console.log("b:", b)
-      console.log("c:", c)
+      console.log('a:', a);
+      console.log('b:', b);
+      console.log('c:', c);
     }
     function testClick(nodeId) {
-      console.log("clicked", nodeId)
-      var originalBgColor = document.querySelector('body').style.backgroundColor
-      document.querySelector('body').style.backgroundColor = 'yellow'
-      setTimeout(function() {
-        document.querySelector('body').style.backgroundColor = originalBgColor
-      }, 100)
+      console.log('clicked', nodeId);
+      var originalBgColor = document.querySelector('body').style.backgroundColor;
+      document.querySelector('body').style.backgroundColor = 'yellow';
+      setTimeout(function () {
+        document.querySelector('body').style.backgroundColor = originalBgColor;
+      }, 100);
     }
   </script>
   <script>
     const testLineEndings = (test, input) => {
       try {
-        mermaid.render(test, input, () => { });
+        mermaid.render(test, input, () => {});
       } catch (err) {
-        console.error("Error in %s:\n\n%s", test, err);
+        console.error('Error in %s:\n\n%s', test, err);
       }
     };
 
-    testLineEndings("CR", "graph LR\rsubgraph CR\rA --> B\rend");
-    testLineEndings("LF", "graph LR\nsubgraph LF\nA --> B\nend");
-    testLineEndings("CRLF", "graph LR\r\nsubgraph CRLF\r\nA --> B\r\nend");
+    testLineEndings('CR', 'graph LR\rsubgraph CR\rA --> B\rend');
+    testLineEndings('LF', 'graph LR\nsubgraph LF\nA --> B\nend');
+    testLineEndings('CRLF', 'graph LR\r\nsubgraph CRLF\r\nA --> B\r\nend');
   </script>
 </body>
 

dist/mermaid.esm.min.mjs.LICENSE.txt

@@ -1,32 +0,0 @@
-/*!
-   * Wait for document loaded before starting the execution
-   */
-
-/*! @license DOMPurify 2.3.3 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/2.3.3/LICENSE */
-
-/*! Check if previously processed */
-
-/*! sequence config was passed as #1 */
-
-/**
- * @license
- * Copyright (c) 2012-2013 Chris Pettitt
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */

dist/mermaid.min.js.LICENSE.txt

@@ -1,32 +0,0 @@
-/*!
-   * Wait for document loaded before starting the execution
-   */
-
-/*! @license DOMPurify 2.3.3 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/2.3.3/LICENSE */
-
-/*! Check if previously processed */
-
-/*! sequence config was passed as #1 */
-
-/**
- * @license
- * Copyright (c) 2012-2013 Chris Pettitt
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */

docs/Tutorials.md

@@ -37,30 +37,36 @@ https://codepen.io/janzeteachesit/pen/OWWZKN
 
 https://codepen.io/Ryuno-Ki/pen/LNxwgR
 
-## Python Integration with mermaid-js
-Here's an example of python integration with mermaid-js which uses the mermaid.ink service. 
-This is also working with colab and jupyter lab notebooks.
+## 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.
 
 ```python
 import base64
-import requests, io
-from PIL import Image
+from IPython.display import Image, display
 import matplotlib.pyplot as plt
 
-graph = """
+def mm(graph):
+  graphbytes = graph.encode("ascii")
+  base64_bytes = base64.b64encode(graphbytes)
+  base64_string = base64_bytes.decode("ascii")
+  display(Image(url="https://mermaid.ink/img/" + base64_string))
+
+mm("""
 graph LR;
     A--> B & C & D;
     B--> A & E;
     C--> A & E;
     D--> A & E;
     E--> B & C & D;
-"""
-
-graphbytes = graph.encode("ascii")
-base64_bytes = base64.b64encode(graphbytes)
-base64_string = base64_bytes.decode("ascii")
-img = Image.open(io.BytesIO(requests.get('https://mermaid.ink/img/' + base64_string).content))
-plt.imshow(img)
+""")
 ```
 
 **Output**

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)

docs/development.md

@@ -1,134 +1,134 @@
-# Development and Contribution 🙌
-
-So you want to help? That's great!
-
-![Image of happy people jumping with excitement](https://media.giphy.com/media/BlVnrxJgTGsUw/giphy.gif)
-
-Here are a few things to know to get you started on the right path.
-
-**The Docs Structure is dictated by [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**
-
-**Note: Commits and Pull Requests should be directed to the develop branch.**
-
-## Branching
-
-Mermaid uses a [Git Flow](https://guides.github.com/introduction/flow/)–inspired approach to branching. So development is done in the `develop` branch.
-
-Once development is done we branch a `release` branch from `develop` for testing.
-
-Once the release happens we merge the `release` branch with `master` and kill the `release` branch.
-
-This means that **you should branch off your pull request from develop** and direct all Pull Requests to it.
-
-## Contributing Code
-
-We make all changes via Pull Requests. As we have many Pull Requests from developers new to mermaid, we have put in place a process, wherein *knsv, Knut Sveidqvist* is the primary reviewer of changes and merging pull requests. The process is as follows:
-
-* Large changes reviewed by knsv or other developer asked to review by knsv
-* Smaller, low-risk changes like dependencies, documentation, etc. can be merged by active collaborators
-* Documentation (we encourage updates to the docs folder; you can submit them via direct commits)
-
-When you commit code, create a branch with the following naming convention:
-
-Start with the type, such as **feature** or **bug**, followed by the issue number for reference, and a text that describes the issue.
-
-**One example:**
-
-`feature/945_state_diagrams`
-
-**Another example:**
-
-`bug/123_nasty_bug_branch`
-
-## Contributing to Documentation
-
-If it is not in the documentation, it's like it never happened. Wouldn't that be sad? With all the effort that was put into the feature?
-
-The docs are located in the `docs` folder and are written in Markdown. Just pick the right section and start typing. If you want to propose changes to the structure of the documentation, such as adding a new section or a new file you do that via the **[sidebar](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**.
-
-> **All the documents displayed in the github.io page are listed in [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**.
-
-The contents of [https://mermaid-js.github.io/mermaid/](https://mermaid-js.github.io/mermaid/) are based on the docs from the `master` branch. Updates commited to the `master` branch are reflected in the [Mermaid Docs](https://mermaid-js.github.io/mermaid/) once released.
-
-## How to Contribute to Documentation
-
-We are a little less strict here, it is OK to commit directly in the `develop` branch if you are a collaborator.
-
-The documentation is located in the `docs` directory and organized according to relevant subfolder.
-
-We encourage contributions to the documentation at [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs). We publish documentation using GitHub Pages with [Docsify](https://www.youtube.com/watch?v=TV88lp7egMw&t=3s)
-
-### Add Unit Tests for Parsing
-
-This is important so that, if someone that does not know about this great feature suggests a change to the grammar, they get notified early on when that change breaks the parser. Another important aspect is that, without proper parsing, tests refactoring is pretty much impossible.
-
-### Add E2E Tests
-
-This tests the rendering and visual apearance of the diagrams. This ensures that the rendering of that feature in the e2e will be reviewed in the release process going forward. Less chance that it breaks!
-
-To start working with the e2e tests:
-
-1. Run `yarn dev` to start the dev server
-2. Start **Cypress** by running `cypress open` in the **mermaid** folder.  
-(Make sure you have path to Cypress in order, the binary is located in `node_modules/.bin`).
-
-The rendering tests are very straightforward to create. There is a function `imgSnapshotTest`, which takes a diagram in text form and the mermaid options, and it renders that diagram in Cypress.
-
-When running in CI it will take a snapshot of the rendered diagram and compare it with the snapshot from last build and flag it for review if it differs.
-
-This is what a rendering test looks like:
-
-```js
-  it('should render forks and joins', () => {
-    imgSnapshotTest(
-      `
-    stateDiagram
-    state fork_state <<fork>>
-      [*] --> fork_state
-      fork_state --> State2
-      fork_state --> State3
-
-      state join_state <<join>>
-      State2 --> join_state
-      State3 --> join_state
-      join_state --> State4
-      State4 --> [*]
-    `,
-      { logLevel: 0 }
-    );
-    cy.get('svg');
-  });
-```
-
-### Any Questions or Suggestions?
-
-After logging in at [GitHub.com](https://www.github.com), open or append to an issue [using the GitHub issue tracker of the mermaid-js repository](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Area%3A+Documentation%22).
-
-### How to Contribute a Suggestion
-
-Markdown is used to format the text, for more information about Markdown [see the GitHub Markdown help page](https://help.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax).
-
-To edit Docs on your computer:
-
-1. Find the Markdown file (.md) to edit in the [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs) directory in the `develop` branch.
-2. Create a fork of the develop branch.
-3. Make changes or add new documentation.
-4. Commit changes to your fork and push it to GitHub.
-5. Create a Pull Request of your fork.
-
-To edit Docs on GitHub:
-
-1. Login to [GitHub.com](https://www.github.com).
-2. Navigate to [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs).
-3. To edit a file, click the pencil icon at the top-right of the file contents panel.
-4. Describe what you changed in the **Propose file change** section, located at the bottom of the page.
-5. Submit your changes by clicking the button **Propose file change** at the bottom (by automatic creation of a fork and a new branch).
-6. Create a Pull Request of your newly forked branch by clicking the green **Create Pull Request** button.
-
-## Last Words
-
-Don't get daunted if it is hard in the beginning. We have a great community with only encouraging words. So, if you get stuck, ask for help and hints in the Slack forum. If you want to show off something good, show it off there.
-
-[Join our Slack community if you want closer contact!](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
-
-![Image of superhero wishing you good luck](https://media.giphy.com/media/l49JHz7kJvl6MCj3G/giphy.gif)
+# Development and Contribution 🙌
+
+So you want to help? That's great!
+
+![Image of happy people jumping with excitement](https://media.giphy.com/media/BlVnrxJgTGsUw/giphy.gif)
+
+Here are a few things to know to get you started on the right path.
+
+**The Docs Structure is dictated by [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**
+
+**Note: Commits and Pull Requests should be directed to the develop branch.**
+
+## Branching
+
+Mermaid uses a [Git Flow](https://guides.github.com/introduction/flow/)–inspired approach to branching. So development is done in the `develop` branch.
+
+Once development is done we branch a `release` branch from `develop` for testing.
+
+Once the release happens we merge the `release` branch with `master` and kill the `release` branch.
+
+This means that **you should branch off your pull request from develop** and direct all Pull Requests to it.
+
+## Contributing Code
+
+We make all changes via Pull Requests. As we have many Pull Requests from developers new to mermaid, we have put in place a process, wherein *knsv, Knut Sveidqvist* is the primary reviewer of changes and merging pull requests. The process is as follows:
+
+* Large changes reviewed by knsv or other developer asked to review by knsv
+* Smaller, low-risk changes like dependencies, documentation, etc. can be merged by active collaborators
+* Documentation (we encourage updates to the docs folder; you can submit them via direct commits)
+
+When you commit code, create a branch with the following naming convention:
+
+Start with the type, such as **feature** or **bug**, followed by the issue number for reference, and a text that describes the issue.
+
+**One example:**
+
+`feature/945_state_diagrams`
+
+**Another example:**
+
+`bug/123_nasty_bug_branch`
+
+## Contributing to Documentation
+
+If it is not in the documentation, it's like it never happened. Wouldn't that be sad? With all the effort that was put into the feature?
+
+The docs are located in the `docs` folder and are written in Markdown. Just pick the right section and start typing. If you want to propose changes to the structure of the documentation, such as adding a new section or a new file you do that via the **[sidebar](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**.
+
+> **All the documents displayed in the github.io page are listed in [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**.
+
+The contents of [https://mermaid-js.github.io/mermaid/](https://mermaid-js.github.io/mermaid/) are based on the docs from the `master` branch. Updates commited to the `master` branch are reflected in the [Mermaid Docs](https://mermaid-js.github.io/mermaid/) once released.
+
+## How to Contribute to Documentation
+
+We are a little less strict here, it is OK to commit directly in the `develop` branch if you are a collaborator.
+
+The documentation is located in the `docs` directory and organized according to relevant subfolder.
+
+We encourage contributions to the documentation at [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs). We publish documentation using GitHub Pages with [Docsify](https://www.youtube.com/watch?v=TV88lp7egMw&t=3s)
+
+### Add Unit Tests for Parsing
+
+This is important so that, if someone that does not know about this great feature suggests a change to the grammar, they get notified early on when that change breaks the parser. Another important aspect is that, without proper parsing, tests refactoring is pretty much impossible.
+
+### Add E2E Tests
+
+This tests the rendering and visual apearance of the diagrams. This ensures that the rendering of that feature in the e2e will be reviewed in the release process going forward. Less chance that it breaks!
+
+To start working with the e2e tests:
+
+1. Run `yarn dev` to start the dev server
+2. Start **Cypress** by running `cypress open` in the **mermaid** folder.  
+(Make sure you have path to Cypress in order, the binary is located in `node_modules/.bin`).
+
+The rendering tests are very straightforward to create. There is a function `imgSnapshotTest`, which takes a diagram in text form and the mermaid options, and it renders that diagram in Cypress.
+
+When running in CI it will take a snapshot of the rendered diagram and compare it with the snapshot from last build and flag it for review if it differs.
+
+This is what a rendering test looks like:
+
+```js
+it('should render forks and joins', () => {
+    imgSnapshotTest(
+        `
+    stateDiagram
+    state fork_state <<fork>>
+      [*] --> fork_state
+      fork_state --> State2
+      fork_state --> State3
+
+      state join_state <<join>>
+      State2 --> join_state
+      State3 --> join_state
+      join_state --> State4
+      State4 --> [*]
+    `,
+        { logLevel: 0 }
+    );
+    cy.get('svg');
+});
+
+```
+
+### Any Questions or Suggestions?
+
+After logging in at [GitHub.com](https://www.github.com), open or append to an issue [using the GitHub issue tracker of the mermaid-js repository](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Area%3A+Documentation%22).
+
+### How to Contribute a Suggestion
+
+Markdown is used to format the text, for more information about Markdown [see the GitHub Markdown help page](https://help.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax).
+
+To edit Docs on your computer:
+
+1. Find the Markdown file (.md) to edit in the [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs) directory in the `develop` branch.
+2. Create a fork of the develop branch.
+3. Make changes or add new documentation.
+4. Commit changes to your fork and push it to GitHub.
+5. Create a Pull Request of your fork.
+
+To edit Docs on GitHub:
+
+1. Login to [GitHub.com](https://www.github.com).
+2. Navigate to [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs).
+3. To edit a file, click the pencil icon at the top-right of the file contents panel.
+4. Describe what you changed in the **Propose file change** section, located at the bottom of the page.
+5. Submit your changes by clicking the button **Propose file change** at the bottom (by automatic creation of a fork and a new branch).
+6. Create a Pull Request of your newly forked branch by clicking the green **Create Pull Request** button.
+
+## Last Words
+
+Don't get daunted if it is hard in the beginning. We have a great community with only encouraging words. So, if you get stuck, ask for help and hints in the Slack forum. If you want to show off something good, show it off there.
+
+[Join our Slack community if you want closer contact!](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
+

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
 
 

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

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.
 

docs/index.html

@@ -1,141 +1,167 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.</title>
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-  <meta name="description" content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.">
-  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-  <!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
-  <link rel="stylesheet" href="theme.css">
-  <script src="//cdn.jsdelivr.net/npm/mermaid@8.13.0/dist/mermaid.min.js"></script>
-  <!-- <script src="http://localhost:9000/mermaid.js"></script> -->
-  <script>
-    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  <head>
+    <meta charset="UTF-8" />
+    <title>
+      mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams,
+      gantt charts and git graphs.
+    </title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta
+      name="description"
+      content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs."
+    />
+    <meta
+      name="viewport"
+      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+    />
+    <!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
+    <link rel="stylesheet" href="theme.css" />
+    <script src="//cdn.jsdelivr.net/npm/mermaid@8.13.0/dist/mermaid.min.js"></script>
+    <!-- <script src="http://localhost:9000/mermaid.js"></script> -->
+    <script>
+      // prettier-ignore
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
     m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
     })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
 
-    ga('create', 'UA-153180559-1', 'auto');
-    if(location) {
-       ga('send', 'pageview', location.hash);
-     }
-
+      ga('create', 'UA-153180559-1', 'auto');
+      if (location) {
+        ga('send', 'pageview', location.hash);
+      }
+    </script>
+    <script>
+      var require = {
+        paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs' },
+      };
     </script>
-    <script>var require = { paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs' } }</script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/loader.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/editor/editor.main.nls.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/editor/editor.main.js"></script>    
-    <script>exports = {};</script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/editor/editor.main.js"></script>
+    <script>
+      exports = {};
+    </script>
     <script src="https://unpkg.com/monaco-mermaid/browser.js"></script>
 
-  <style>
-  .markdown-section {
-    max-width: 1200px;
-  }
-  </style>
-</head>
-<body>
-  <div id="app"></div>
-  <script>
-    var initEditor = exports.default;
-    var parser = new DOMParser();
-    var currentCodeExample = 0;
-    var colorize = [];
+    <style>
+      .markdown-section {
+        max-width: 1200px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script>
+      var initEditor = exports.default;
+      var parser = new DOMParser();
+      var currentCodeExample = 0;
+      var colorize = [];
 
-    function colorizeEverything(html) {
-      initEditor(monaco)
-      return new Promise((resolve, reject) => {
-        monaco.editor.setTheme('mermaid')
-        var parsed = parser.parseFromString(html, 'text/html').body
-        Promise.all([...parsed.querySelectorAll('pre[id*="code"]')].map(codeBlock => monaco.editor.colorize(codeBlock.innerText, 'mermaid'))).then(result => {
-          parsed.querySelectorAll('pre[id*="code"]').forEach((codeBlock, index) => codeBlock.innerHTML = result[index])
-          resolve(parsed.innerHTML)
-        })
-      })
-    }
+      function colorizeEverything(html) {
+        initEditor(monaco);
+        return new Promise((resolve, reject) => {
+          monaco.editor.setTheme('mermaid');
+          var parsed = parser.parseFromString(html, 'text/html').body;
+          Promise.all(
+            [...parsed.querySelectorAll('pre[id*="code"]')].map((codeBlock) =>
+              monaco.editor.colorize(codeBlock.innerText, 'mermaid')
+            )
+          ).then((result) => {
+            parsed
+              .querySelectorAll('pre[id*="code"]')
+              .forEach((codeBlock, index) => (codeBlock.innerHTML = result[index]));
+            resolve(parsed.innerHTML);
+          });
+        });
+      }
 
-    function escapeHTML(html) {
-      return html.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll('\'', '&apos;')
-    }
+      function escapeHTML(html) {
+        return html
+          .replaceAll('&', '&amp;')
+          .replaceAll('<', '&lt;')
+          .replaceAll('>', '&gt;')
+          .replaceAll('"', '&quot;')
+          .replaceAll("'", '&apos;');
+      }
 
-    window.$docsify = {
-      search: 'auto',
-      name: 'mermaid',
-      repo: 'https://github.com/mermaid-js/mermaid',
-      loadSidebar: true,
-      mergeNavbar: true,
-      maxLevel: 4,
-      subMaxLevel: 2,
-      markdown: {
-        renderer: {
-          code: function(code, lang) {
-            if (lang.startsWith('mermaid') || lang === 'mmd') {
-              var resultingHTML = '';
-              
-              if (lang === "mmd" || lang === 'mermaid-example') {
-                currentCodeExample++;
-                colorize.push(currentCodeExample);
-                resultingHTML += (
-                  '<pre id="code' + currentCodeExample + '">' + escapeHTML(code) + '</pre>'
-                )
+      window.$docsify = {
+        search: 'auto',
+        name: 'mermaid',
+        repo: 'https://github.com/mermaid-js/mermaid',
+        loadSidebar: true,
+        mergeNavbar: true,
+        maxLevel: 4,
+        subMaxLevel: 2,
+        markdown: {
+          renderer: {
+            code: function (code, lang) {
+              if (lang.startsWith('mermaid') || lang === 'mmd') {
+                var resultingHTML = '';
+
+                if (lang === 'mmd' || lang === 'mermaid-example') {
+                  currentCodeExample++;
+                  colorize.push(currentCodeExample);
+                  resultingHTML +=
+                    '<pre id="code' + currentCodeExample + '">' + escapeHTML(code) + '</pre>';
+                }
+
+                if (lang === 'mermaid' || lang === 'mermaid-example') {
+                  resultingHTML +=
+                    '<div class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + '</div>';
+                }
+
+                if (resultingHTML !== '') {
+                  return resultingHTML;
+                }
               }
-              
-              if (lang === 'mermaid' || lang === 'mermaid-example') {
-                resultingHTML += (
-                  '<div class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + "</div>"
+              return this.origin.code.apply(this, arguments);
+            },
+          },
+        },
+        plugins: [
+          function (hook, vm) {
+            hook.beforeEach(function (html) {
+              url = 'https://github.com/mermaid-js/mermaid/blob/develop/docs/' + vm.route.file;
+              var editHtml = '[:memo: Edit this Page](' + url + ')\n';
+              return editHtml + html;
+            });
+
+            hook.afterEach(function (html, next) {
+              next(html);
+              (async () => {
+                while (!window.hasOwnProperty('monaco'))
+                  await new Promise((resolve) => setTimeout(resolve, 1000));
+                colorizeEverything(html).then(
+                  (newHTML) => (document.querySelector('article.markdown-section').innerHTML = newHTML)
                 );
-              }
+              })();
+            });
+          },
+        ],
+      };
 
-              if (resultingHTML !== '') {
-                return resultingHTML;
-              }
-            }
-            return this.origin.code.apply(this, arguments);
-          }
+      var num = 0;
+      const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+      const conf = {
+        logLevel: 4,
+        startOnLoad: false,
+        themeCSS: '.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }',
+      };
+      if (isDarkMode) conf.theme = 'dark';
+      mermaid.initialize(conf);
+    </script>
+    <script>
+      window.onhashchange = function (a) {
+        //code
+        if (location) {
+          ga('send', 'pageview', location.hash);
         }
-      },
-      plugins: [
-        function (hook, vm) {
-          hook.beforeEach(function (html) {
-            url = 'https://github.com/mermaid-js/mermaid/blob/develop/docs/' + vm.route.file
-            var editHtml = '[:memo: Edit this Page](' + url + ')\n'
-            return editHtml + html
-          })
-
-          hook.afterEach(function (html, next) {
-            next(html);
-            (async() => {
-                while (!window.hasOwnProperty("monaco"))
-                    await new Promise(resolve => setTimeout(resolve, 1000));
-                colorizeEverything(html).then(newHTML => document.querySelector('article.markdown-section').innerHTML = newHTML)
-            })();
-          })
-        }
-      ]
-    }
-
-    var num = 0;
-    const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches
-
-    const conf = { logLevel:4, startOnLoad: false, themeCSS:'.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }' };
-    if(isDarkMode && false) conf.theme = 'dark';
-    mermaid.initialize(conf);
-
-  </script>
-  <script>
-   window.onhashchange = function(a) {
-     //code
-     if(location) {
-       ga('send', 'pageview', location.hash);
-     }
-  }
-  </script>
-  <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
-  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
-  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/ga.min.js"></script>
-</body>
-</html>
-<!--  -->
-
+      };
+    </script>
+    <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/ga.min.js"></script>
+  </body>
 </html>

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
 

docs/landing/index.html

@@ -4,11 +4,15 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>
-      The Official Guide to Mermaid.js
-    </title>
-    <meta name="description" content="Landing page for the book The Official Guide to Mermaid.js: Create complex diagrams and beautiful flowcharts easily using text and code" />
-    <meta name="keywords" content="book, guide, mermaid, flowcharts, sequence diagrams, class diagrams, state diagrams, pie charts, Entity Relationship Diagrams, User Journey Diagrams, Requirement Diagrams, Gantt Charts" />
+    <title>The Official Guide to Mermaid.js</title>
+    <meta
+      name="description"
+      content="Landing page for the book The Official Guide to Mermaid.js: Create complex diagrams and beautiful flowcharts easily using text and code"
+    />
+    <meta
+      name="keywords"
+      content="book, guide, mermaid, flowcharts, sequence diagrams, class diagrams, state diagrams, pie charts, Entity Relationship Diagrams, User Journey Diagrams, Requirement Diagrams, Gantt Charts"
+    />
     <meta name="author" content="Knut Sveidqvist, Ashish Jain" />
     <link rel="stylesheet" href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" />
     <!--Replace with your tailwind.css once created-->
@@ -16,43 +20,82 @@
     <!-- Define your gradient here - use online tools to find a gradient matching your branding-->
     <style>
       .gradient {
-        background: linear-gradient(90deg, #7557C9 0%, #f4f4f4 100%);
+        background: linear-gradient(90deg, #7557c9 0%, #f4f4f4 100%);
       }
       .p-shadow {
-        text-shadow: #7557c9 0px 0px 5px
+        text-shadow: #7557c9 0px 0px 5px;
       }
     </style>
     <!-- Google Analytics -->
     <script>
-    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+      // prettier-ignore
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
     m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
     })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
 
-    ga('create', 'UA-153180559-1', 'auto');
-    ga('send', 'pageview');
+      ga('create', 'UA-153180559-1', 'auto');
+      ga('send', 'pageview');
     </script>
     <!-- End Google Analytics -->
   </head>
-  <body class="leading-normal tracking-normal text-white gradient" style="font-family: 'Source Sans Pro', sans-serif;">
+  <body
+    class="leading-normal tracking-normal text-white gradient"
+    style="font-family: 'Source Sans Pro', sans-serif"
+  >
     <!--Nav-->
 
     <!--Hero-->
     <div class="pt-24">
-      <div style="" class="container lg:px-24 max-w-5xl px-4 mx-auto flex flex-wrap flex-col md:flex-row items-center">
+      <div
+        style=""
+        class="
+          container
+          lg:px-24
+          max-w-5xl
+          px-4
+          mx-auto
+          flex flex-wrap flex-col
+          md:flex-row
+          items-center
+        "
+      >
         <!--Left Col-->
         <div class="w-full md:w-1/2">
-          <div class="flex flex-col  justify-center items-start text-center md:text-left">
+          <div class="flex flex-col justify-center items-start text-center md:text-left">
             <div class="flex flex-col items-center">
               <p class="uppercase tracking-loose w-full p-shadow">MermaidPress</p>
               <h1 class="my-4 text-5xl font-bold leading-tight p-shadow">
                 The Official Guide to Mermaid.js
               </h1>
               <p class="leading-normal text-2xl mb-8 p-shadow">
-                Learn to create complex diagrams and beautiful flowcharts easily using text and code using Mermaid.js.
+                Learn to create complex diagrams and beautiful flowcharts easily using text and code
+                using Mermaid.js.
               </p>
-              <a href="https://www.amazon.com/Official-Guide-Mermaid-js-beautiful-flowcharts-dp-1801078025/dp/1801078025/ref=mt_other?_encoding=UTF8&me=&qid=1628153965">
-                <button style="background: #FFA41C;border: 1px solid #FF8F00;" class="mx-auto lg:mx-0 hover:underline  text-black font-bold rounded-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out">
+              <a
+                href="https://www.amazon.com/Official-Guide-Mermaid-js-beautiful-flowcharts-dp-1801078025/dp/1801078025/ref=mt_other?_encoding=UTF8&me=&qid=1628153965"
+              >
+                <button
+                  style="background: #ffa41c; border: 1px solid #ff8f00"
+                  class="
+                    mx-auto
+                    lg:mx-0
+                    hover:underline
+                    text-black
+                    font-bold
+                    rounded-full
+                    my-6
+                    py-4
+                    px-8
+                    shadow-lg
+                    focus:outline-none focus:shadow-outline
+                    transform
+                    transition
+                    hover:scale-105
+                    duration-300
+                    ease-in-out
+                  "
+                >
                   Purchase on Amazon
                 </button>
               </a>
@@ -66,15 +109,27 @@
       </div>
     </div>
     <div class="relative -mt-0 lg:-mt-12">
-      <svg viewBox="0 0 1428 174" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <svg
+        viewBox="0 0 1428 174"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+      >
         <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
           <g transform="translate(-2.000000, 44.000000)" fill="#FFFFFF" fill-rule="nonzero">
-            <path d="M0,0 C90.7283404,0.927527913 147.912752,27.187927 291.910178,59.9119003 C387.908462,81.7278826 543.605069,89.334785 759,82.7326078 C469.336065,156.254352 216.336065,153.6679 0,74.9732496" opacity="0.100000001"></path>
+            <path
+              d="M0,0 C90.7283404,0.927527913 147.912752,27.187927 291.910178,59.9119003 C387.908462,81.7278826 543.605069,89.334785 759,82.7326078 C469.336065,156.254352 216.336065,153.6679 0,74.9732496"
+              opacity="0.100000001"
+            ></path>
             <path
               d="M100,104.708498 C277.413333,72.2345949 426.147877,52.5246657 546.203633,45.5787101 C666.259389,38.6327546 810.524845,41.7979068 979,55.0741668 C931.069965,56.122511 810.303266,74.8455141 616.699903,111.243176 C423.096539,147.640838 250.863238,145.462612 100,104.708498 Z"
               opacity="0.100000001"
             ></path>
-            <path d="M1046,51.6521276 C1130.83045,29.328812 1279.08318,17.607883 1439,40.1656806 L1439,120 C1271.17211,77.9435312 1140.17211,55.1609071 1046,51.6521276 Z" id="Path-4" opacity="0.200000003"></path>
+            <path
+              d="M1046,51.6521276 C1130.83045,29.328812 1279.08318,17.607883 1439,40.1656806 L1439,120 C1271.17211,77.9435312 1140.17211,55.1609071 1046,51.6521276 Z"
+              id="Path-4"
+              opacity="0.200000003"
+            ></path>
           </g>
           <g transform="translate(-4.000000, 76.000000)" fill="#FFFFFF" fill-rule="nonzero">
             <path
@@ -87,7 +142,8 @@
     <section class="bg-white border-b py-8">
       <div class="container max-w-5xl mx-auto m-8">
         <h2 class="w-full my-2 text-5xl font-bold leading-tight text-center text-gray-800">
-          Get up to speed with using Mermaid diagrams along with real-world examples and expert tips from the authors to facilitate a seamless development workflow
+          Get up to speed with using Mermaid diagrams along with real-world examples and expert tips
+          from the authors to facilitate a seamless development workflow
         </h2>
         <div class="w-full mb-4">
           <div class="h-1 mx-auto gradient w-64 opacity-25 my-0 py-0 rounded-t"></div>
@@ -95,7 +151,8 @@
         <div class="flex flex-wrap">
           <div class="w-full sm:w-1/2 p-6 flex items-center">
             <p class="text-3xl text-gray-800 font-normal leading-none mb-3">
-              Flowcharts is a diagram type that visualizes a process or an algorithm by showing the steps in order, as well as the different paths the execution can take.
+              Flowcharts is a diagram type that visualizes a process or an algorithm by showing the
+              steps in order, as well as the different paths the execution can take.
             </p>
           </div>
           <div class="w-full sm:w-1/2 p-6 flex justify-center items-center">
@@ -103,13 +160,14 @@
           </div>
         </div>
         <div class="flex flex-wrap flex-col-reverse sm:flex-row flex justify-center items-center">
-          <div class="w-full sm:w-1/2 p-6 mt-6 ">
+          <div class="w-full sm:w-1/2 p-6 mt-6">
             <img class="z-50 w-full" style="" src="sequence-diagram.png" />
           </div>
           <div class="w-full sm:w-1/2 p-6 mt-6">
             <div class="align-middle flex items-center">
               <p class="text-3xl text-gray-800 font-normal leading-none mb-3">
-                Sequence diagrams lets you model and visualize interactions between different actors or objects in a system, as well as the order of those interactions
+                Sequence diagrams lets you model and visualize interactions between different actors
+                or objects in a system, as well as the order of those interactions
               </p>
             </div>
           </div>
@@ -118,7 +176,7 @@
           <div class="w-full sm:w-1/2 p-6 flex items-center">
             <p class="text-3xl text-gray-800 font-normal leading-none mb-3">
               A class diagram is a graphical representation that is used to visualize and describe
-an object-oriented system.
+              an object-oriented system.
             </p>
           </div>
           <div class="w-full sm:w-1/2 p-6 flex justify-center items-center">
@@ -126,13 +184,14 @@ an object-oriented system.
           </div>
         </div>
         <div class="flex flex-wrap flex-col-reverse sm:flex-row flex justify-center items-center">
-          <div class="w-full sm:w-1/2 p-6 mt-6 ">
+          <div class="w-full sm:w-1/2 p-6 mt-6">
             <img class="z-50 w-full" style="" src="er.png" />
           </div>
           <div class="w-full sm:w-1/2 p-6 mt-6">
             <div class="align-middle flex items-center">
               <p class="text-3xl text-gray-800 font-normal leading-none mb-3">
-                An entity-relationship diagram is a graphical representation that is used to visualize the different types of entities that exist within a system.
+                An entity-relationship diagram is a graphical representation that is used to
+                visualize the different types of entities that exist within a system.
               </p>
             </div>
           </div>
@@ -140,7 +199,8 @@ an object-oriented system.
         <div class="flex flex-wrap">
           <div class="w-full sm:w-1/2 p-6 flex items-center">
             <p class="text-3xl text-gray-800 font-normal leading-none mb-3">
-              Use State diagrams to model and document state machines, an abstract way of representing a system or an algorithm.
+              Use State diagrams to model and document state machines, an abstract way of
+              representing a system or an algorithm.
             </p>
           </div>
           <div class="w-full sm:w-1/2 p-6 flex justify-center items-center">
@@ -148,19 +208,22 @@ an object-oriented system.
           </div>
         </div>
         <div class="flex flex-wrap flex-col-reverse sm:flex-row flex justify-center items-center">
-          <div class="w-full sm:w-1/2 p-6 mt-6 ">
+          <div class="w-full sm:w-1/2 p-6 mt-6">
             <img class="z-50 w-full" style="" src="gantt.png" />
           </div>
           <div class="w-full sm:w-1/2 p-6 mt-6">
             <div class="align-middle flex items-center">
               <p class="text-3xl text-gray-800 font-normal leading-none mb-3">
-                A Gantt chart is a graphical representation that is used to visualize and describe tasks (events or activities) over time.
+                A Gantt chart is a graphical representation that is used to visualize and describe
+                tasks (events or activities) over time.
               </p>
             </div>
           </div>
         </div>
       </div>
-      <p class="text-3xl text-gray-800 font-normal leading-none mt-3 text-center">These were a few of the diagrams supported by Mermaid.</p>
+      <p class="text-3xl text-gray-800 font-normal leading-none mt-3 text-center">
+        These were a few of the diagrams supported by Mermaid.
+      </p>
     </section>
 
     <section class="bg-gray-100 border-b py-8">
@@ -169,10 +232,32 @@ an object-oriented system.
           Book description
         </h1>
         <div class="w-full mb-4">
-          <p class="text-black mb-4">Mermaid lets you represent diagrams using text and code which simplifies the maintenance of complex diagrams. This is a great option for developers as they’re more familiar with code, rather than special tools for generating diagrams. Besides, diagrams in code simplify maintenance and ensure that the code is supported by version control systems. In some cases, Mermaid makes refactoring support for name changes possible while also enabling team collaboration for review distribution and updates.</p>
-          <p class="text-black mb-4">Developers working with any system will be able to put their knowledge to work with this practical guide to using Mermaid for documentation. The book is also a great reference for looking up the syntax for specific diagrams when authoring diagrams.</p>
-          <p class="text-black mb-4">You’ll start by getting up to speed with the importance of accurate and visual documentation. Next, the book introduces Mermaid and establishes how to use it to create effective documentation. By using different tools, editors, or a custom documentation platform, you’ll also learn how to use Mermaid syntax for various diagrams. Later chapters cover advanced configuration settings and theme options to manipulate your diagram as per your needs.</p>
-          <p class="text-black mb-4">By the end of this Mermaid book, you’ll have become well-versed with the different types of Mermaid diagrams and how they can be used in your workflows.</p>
+          <p class="text-black mb-4">
+            Mermaid lets you represent diagrams using text and code which simplifies the maintenance
+            of complex diagrams. This is a great option for developers as they’re more familiar with
+            code, rather than special tools for generating diagrams. Besides, diagrams in code
+            simplify maintenance and ensure that the code is supported by version control systems.
+            In some cases, Mermaid makes refactoring support for name changes possible while also
+            enabling team collaboration for review distribution and updates.
+          </p>
+          <p class="text-black mb-4">
+            Developers working with any system will be able to put their knowledge to work with this
+            practical guide to using Mermaid for documentation. The book is also a great reference
+            for looking up the syntax for specific diagrams when authoring diagrams.
+          </p>
+          <p class="text-black mb-4">
+            You’ll start by getting up to speed with the importance of accurate and visual
+            documentation. Next, the book introduces Mermaid and establishes how to use it to create
+            effective documentation. By using different tools, editors, or a custom documentation
+            platform, you’ll also learn how to use Mermaid syntax for various diagrams. Later
+            chapters cover advanced configuration settings and theme options to manipulate your
+            diagram as per your needs.
+          </p>
+          <p class="text-black mb-4">
+            By the end of this Mermaid book, you’ll have become well-versed with the different types
+            of Mermaid diagrams and how they can be used in your workflows.
+          </p>
+        </div>
       </div>
     </section>
     <section class="bg-white py-8">
@@ -187,12 +272,25 @@ an object-oriented system.
           <div class="flex flex-col mx-4 rounded-lg bg-white mt-4 sm:-mt-6 shadow-lg z-10">
             <div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow">
               <ul class="w-full text-base font-bold px-4">
-                <li class="border-b py-4 px-4">Understand good and bad documentation, and the art of effective documentation</li>
-                <li class="border-b py-4 px-4">Become well-versed with maintaining complex diagrams with ease</li>
-                <li class="border-b py-4 px-4">Learn how to set up a custom documentation system</li>
-                <li class="border-b py-4 px-4">Learn how to implement Mermaid diagrams in your workflows</li>
-                <li class="border-b py-4 px-4">Understand how to set up themes for a Mermaid diagram for an entire site</li>
-                <li class="border-b py-4 px-4">Discover how to draw different types of diagrams such as flowcharts, class diagrams, Gantt charts, and more</li>
+                <li class="border-b py-4 px-4">
+                  Understand good and bad documentation, and the art of effective documentation
+                </li>
+                <li class="border-b py-4 px-4">
+                  Become well-versed with maintaining complex diagrams with ease
+                </li>
+                <li class="border-b py-4 px-4">
+                  Learn how to set up a custom documentation system
+                </li>
+                <li class="border-b py-4 px-4">
+                  Learn how to implement Mermaid diagrams in your workflows
+                </li>
+                <li class="border-b py-4 px-4">
+                  Understand how to set up themes for a Mermaid diagram for an entire site
+                </li>
+                <li class="border-b py-4 px-4">
+                  Discover how to draw different types of diagrams such as flowcharts, class
+                  diagrams, Gantt charts, and more
+                </li>
               </ul>
             </div>
           </div>
@@ -200,7 +298,13 @@ an object-oriented system.
       </div>
     </section>
     <!-- Change the colour #f8fafc to match the previous section colour -->
-    <svg class="wave-top" viewBox="0 0 1439 147" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <svg
+      class="wave-top"
+      viewBox="0 0 1439 147"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+    >
       <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g transform="translate(-1.000000, -14.000000)" fill-rule="nonzero">
           <g class="wave" fill="#f8fafc">
@@ -209,13 +313,21 @@ an object-oriented system.
             ></path>
           </g>
           <g transform="translate(1.000000, 15.000000)" fill="#FFFFFF">
-            <g transform="translate(719.500000, 68.500000) rotate(-180.000000) translate(-719.500000, -68.500000) ">
-              <path d="M0,0 C90.7283404,0.927527913 147.912752,27.187927 291.910178,59.9119003 C387.908462,81.7278826 543.605069,89.334785 759,82.7326078 C469.336065,156.254352 216.336065,153.6679 0,74.9732496" opacity="0.100000001"></path>
+            <g
+              transform="translate(719.500000, 68.500000) rotate(-180.000000) translate(-719.500000, -68.500000) "
+            >
+              <path
+                d="M0,0 C90.7283404,0.927527913 147.912752,27.187927 291.910178,59.9119003 C387.908462,81.7278826 543.605069,89.334785 759,82.7326078 C469.336065,156.254352 216.336065,153.6679 0,74.9732496"
+                opacity="0.100000001"
+              ></path>
               <path
                 d="M100,104.708498 C277.413333,72.2345949 426.147877,52.5246657 546.203633,45.5787101 C666.259389,38.6327546 810.524845,41.7979068 979,55.0741668 C931.069965,56.122511 810.303266,74.8455141 616.699903,111.243176 C423.096539,147.640838 250.863238,145.462612 100,104.708498 Z"
                 opacity="0.100000001"
               ></path>
-              <path d="M1046,51.6521276 C1130.83045,29.328812 1279.08318,17.607883 1439,40.1656806 L1439,120 C1271.17211,77.9435312 1140.17211,55.1609071 1046,51.6521276 Z" opacity="0.200000003"></path>
+              <path
+                d="M1046,51.6521276 C1130.83045,29.328812 1279.08318,17.607883 1439,40.1656806 L1439,120 C1271.17211,77.9435312 1140.17211,55.1609071 1046,51.6521276 Z"
+                opacity="0.200000003"
+              ></path>
             </g>
           </g>
         </g>
@@ -230,15 +342,40 @@ an object-oriented system.
       </div>
       <h3 class="my-4 text-3xl leading-tight">
         <p class="mb-4 p-shadow">Written by Knut Sveidqvist and Ashish Jain.</p>
-        <p class="p-shadow">Knut is the creator of Mermaid and both authors are active core team members of the Mermaid open-source project.</p>
+        <p class="p-shadow">
+          Knut is the creator of Mermaid and both authors are active core team members of the
+          Mermaid open-source project.
+        </p>
       </h3>
-      <a href="https://www.amazon.com/Official-Guide-Mermaid-js-beautiful-flowcharts-dp-1801078025/dp/1801078025/ref=mt_other?_encoding=UTF8&me=&qid=1628153965">
-        <button style="background: #FFA41C;border: 1px solid #FF8F00;" class="mx-auto lg:mx-0 hover:underline bg-white text-gray-800 font-bold rounded-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out">
+      <a
+        href="https://www.amazon.com/Official-Guide-Mermaid-js-beautiful-flowcharts-dp-1801078025/dp/1801078025/ref=mt_other?_encoding=UTF8&me=&qid=1628153965"
+      >
+        <button
+          style="background: #ffa41c; border: 1px solid #ff8f00"
+          class="
+            mx-auto
+            lg:mx-0
+            hover:underline
+            bg-white
+            text-gray-800
+            font-bold
+            rounded-full
+            my-6
+            py-4
+            px-8
+            shadow-lg
+            focus:outline-none focus:shadow-outline
+            transform
+            transition
+            hover:scale-105
+            duration-300
+            ease-in-out
+          "
+        >
           Purchase Now on Amazon
         </button>
       </a>
     </section>
     <!--Footer-->
-
   </body>
-</html>
+</html>

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>

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.

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.

jest.config.js

@@ -4,7 +4,10 @@ module.exports = {
   testEnvironment: 'jsdom',
   transform: {
     '^.+\\.jsx?$': ['babel-jest', { rootMode: 'upward' }],
-    '^.+\\.jison$': [path.resolve(__dirname, './jison/transformer.js'), { 'token-stack': true }],
+    '^.+\\.jison$': [
+      path.resolve(__dirname, './src/jison/transformer.js'),
+      { 'token-stack': true },
+    ],
   },
   transformIgnorePatterns: ['/node_modules/(?!dagre-d3-renderer/lib).*\\.js'],
   moduleNameMapper: {

jison/parser-options-schema.json

@@ -1,13 +0,0 @@
-{
-  "title": "Jison Parser options",
-  "type": "object",
-  "properties": {
-      "token-stack": {
-          "type": "boolean"
-      },
-      "debug": {
-          "type": "boolean"
-      }
-  },
-  "additionalProperties": false
-}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "8.13.4",
+  "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",
@@ -21,23 +21,24 @@
     "git graph"
   ],
   "scripts": {
-    "build:development": "webpack --progress --color",
-    "build:production": "yarn build:development --mode production --config webpack.config.prod.babel.js",
+    "build:development": "webpack --mode development --progress --color",
+    "build:production": "webpack --mode production --progress --color",
     "build": "concurrently \"yarn build:development\" \"yarn build:production\"",
     "postbuild": "documentation build src/mermaidAPI.js src/config.js src/defaultConfig.js --shallow -f md --markdown-toc false > docs/Setup.md",
     "build:watch": "yarn build:development --watch",
     "release": "yarn build",
-    "lint": "eslint .",
+    "lint": "eslint ./ --ext js,html",
     "lint:fix": "yarn lint --fix",
     "e2e:depr": "yarn lint && jest e2e --config e2e/jest.config.js",
     "cypress": "percy exec -- cypress run",
     "e2e": "start-server-and-test dev http://localhost:9000/ cypress",
     "e2e-upd": "yarn lint && jest e2e -u --config e2e/jest.config.js",
-    "dev": "webpack serve --config webpack.config.e2e.js",
+    "dev": "webpack serve --config ./.webpack/webpack.config.e2e.babel.js",
     "test": "yarn lint && jest src/.*",
     "test:watch": "jest --watch src",
     "prepublishOnly": "yarn build && yarn test",
-    "prepare": "husky install && yarn build"
+    "prepare": "husky install && yarn build",
+    "pre-commit": "lint-staged"
   },
   "repository": {
     "type": "git",
@@ -60,7 +61,7 @@
     "d3": "^7.0.0",
     "dagre": "^0.8.5",
     "dagre-d3": "^0.6.4",
-    "dompurify": "2.3.3",
+    "dompurify": "2.3.4",
     "graphlib": "^2.1.8",
     "khroma": "^1.4.1",
     "moment-mini": "^2.24.0",
@@ -71,21 +72,25 @@
     "@babel/eslint-parser": "^7.14.7",
     "@babel/preset-env": "^7.14.7",
     "@babel/register": "^7.14.5",
+    "@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.0.0",
+    "cypress": "9.2.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-jsdoc": "^37.0.3",
+    "eslint-plugin-markdown": "^2.2.1",
     "eslint-plugin-prettier": "^4.0.0",
     "husky": "^7.0.1",
     "identity-obj-proxy": "^3.0.0",
@@ -102,6 +107,7 @@
     "webpack": "^5.53.0",
     "webpack-cli": "^4.7.2",
     "webpack-dev-server": "^4.3.0",
+    "webpack-merge": "^5.8.0",
     "webpack-node-externals": "^3.0.0"
   },
   "files": [

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

src/dagre-wrapper/nodes.js

@@ -345,6 +345,12 @@ const rect = (parent, node) => {
   return shapeSvg;
 };
 
+/**
+ * @param rect
+ * @param borders
+ * @param totalWidth
+ * @param totalHeight
+ */
 function applyNodePropertyBorders(rect, borders, totalWidth, totalHeight) {
   const strokeDashArray = [];
   const addBorder = (length) => {

src/defaultConfig.js

@@ -35,8 +35,9 @@ 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,
 
   /**
    * | Parameter  | Description                                            | Type   | Required | Values                      |

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());
   }
 };
 

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,

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,
 };

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)');
+  });
+});

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

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
       {

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 () {

src/diagrams/flowchart/parser/flow.jison

@@ -560,7 +560,7 @@ direction
 
 alphaNumToken  : PUNCTUATION | AMP | UNICODE_TEXT | NUM| ALPHA | COLON | COMMA | PLUS | EQUALS | MULT | DOT | BRKT| UNDERSCORE ;
 
-idStringToken  : ALPHA|UNDERSCORE |UNICODE_TEXT | NUM|  COLON | COMMA | PLUS | MINUS | DOWN |EQUALS | MULT | BRKT | DOT | PUNCTUATION | AMP;
+idStringToken  : ALPHA|UNDERSCORE |UNICODE_TEXT | NUM|  COLON | COMMA | PLUS | MINUS | DOWN |EQUALS | MULT | BRKT | DOT | PUNCTUATION | AMP | DEFAULT;
 
 graphCodeTokens: STADIUMSTART | STADIUMEND | SUBROUTINESTART | SUBROUTINEEND | VERTEX_WITH_PROPS_START | CYLINDERSTART | CYLINDEREND | TRAPSTART | TRAPEND | INVTRAPSTART | INVTRAPEND | PIPE | PS | PE | SQS | SQE | DIAMOND_START | DIAMOND_STOP | TAGSTART | TAGEND | ARROW_CROSS | ARROW_POINT | ARROW_CIRCLE | ARROW_OPEN | QUOTE | SEMI;
 %%

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

@@ -51,6 +51,18 @@ describe('when parsing ', function () {
     expect(edges[0].end).toBe('monograph');
   });
 
+  it('should allow default in the node name/id', function () {
+    const res = flow.parser.parse('graph TD\ndefault --> monograph');
+
+    const vert = flow.parser.yy.getVertices();
+    const edges = flow.parser.yy.getEdges();
+
+    expect(vert['default'].id).toBe('default');
+    expect(vert['monograph'].id).toBe('monograph');
+    expect(edges[0].start).toBe('default');
+    expect(edges[0].end).toBe('monograph');
+  });
+
   describe('special characters should be be handled.', function () {
     const charTest = function (char, result) {
       const res = flow.parser.parse('graph TD;A(' + char + ')-->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)) {