Merge pull request #2561 from connor4312/patch-1

update jupyter integration tutorial

.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,16 @@
+name: Update Browserslist
+on:
+  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: 'Update Browserslist'

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

Renfay.md

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

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

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

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

@@ -163,15 +163,17 @@ _one --> b
         // 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

@@ -115,15 +115,17 @@ Note over Bob,Alice: Looks back
         // 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

@@ -45,25 +45,26 @@ stateDiagram-v2
         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

@@ -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) => {
+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

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

@@ -4,8 +4,7 @@
   <script>
       mermaid.initialize({
         theme: 'base',
-       themeVariables: {
-      },
+        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

@@ -275,15 +275,17 @@ requirementDiagram
         // 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

@@ -266,11 +266,20 @@ requirementDiagram
       };
       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

@@ -266,15 +266,17 @@ requirementDiagram
         // 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

@@ -261,15 +261,17 @@ requirementDiagram
         // 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

@@ -265,15 +265,17 @@ requirementDiagram
         // 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

@@ -264,15 +264,17 @@ requirementDiagram
         // 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/theme-directives.html

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

@@ -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) => {
+//   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

@@ -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) => {
+//   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

@@ -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) => {
+//   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

@@ -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) => {
+//   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

@@ -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) => {
+//   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/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

@@ -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) => {
+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

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

@@ -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) => {
+      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

@@ -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) => {
+      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

@@ -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) => {
+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

@@ -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) => {
+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,29 @@ 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.
+## 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/development.md

@@ -79,7 +79,7 @@ When running in CI it will take a snapshot of the rendered diagram and compare i
 This is what a rendering test looks like:
 
 ```js
-  it('should render forks and joins', () => {
+it('should render forks and joins', () => {
     imgSnapshotTest(
         `
     stateDiagram
@@ -97,7 +97,7 @@ This is what a rendering test looks like:
         { logLevel: 0 }
     );
     cy.get('svg');
-  });
+});
 
 ```
 

docs/index.html

@@ -1,32 +1,47 @@
 <!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>
+  <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">
+    <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">
+    <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) {
+      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>
+      exports = {};
+    </script>
     <script src="https://unpkg.com/monaco-mermaid/browser.js"></script>
 
     <style>
@@ -34,8 +49,8 @@
         max-width: 1200px;
       }
     </style>
-</head>
-<body>
+  </head>
+  <body>
     <div id="app"></div>
     <script>
       var initEditor = exports.default;
@@ -44,19 +59,30 @@
       var colorize = [];
 
       function colorizeEverything(html) {
-      initEditor(monaco)
+        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)
-        })
-      })
+          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;')
+        return html
+          .replaceAll('&', '&amp;')
+          .replaceAll('<', '&lt;')
+          .replaceAll('>', '&gt;')
+          .replaceAll('"', '&quot;')
+          .replaceAll("'", '&apos;');
       }
 
       window.$docsify = {
@@ -69,22 +95,20 @@
         subMaxLevel: 2,
         markdown: {
           renderer: {
-          code: function(code, lang) {
+            code: function (code, lang) {
               if (lang.startsWith('mermaid') || lang === 'mmd') {
                 var resultingHTML = '';
 
-              if (lang === "mmd" || lang === 'mermaid-example') {
+                if (lang === 'mmd' || lang === 'mermaid-example') {
                   currentCodeExample++;
                   colorize.push(currentCodeExample);
-                resultingHTML += (
-                  '<pre id="code' + currentCodeExample + '">' + escapeHTML(code) + '</pre>'
-                )
+                  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>"
-                );
+                  resultingHTML +=
+                    '<div class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + '</div>';
                 }
 
                 if (resultingHTML !== '') {
@@ -92,50 +116,52 @@
                 }
               }
               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
-          })
+              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)
+              (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 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';
+      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) {
+      window.onhashchange = function (a) {
         //code
-     if(location) {
+        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>
-<!--  -->
-
+  </body>
 </html>

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,14 +20,15 @@
     <!-- 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>
+      // 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)
@@ -34,12 +39,27 @@
     </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">
@@ -49,10 +69,33 @@
                 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>

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.5",
   "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,6 +72,8 @@
     "@babel/eslint-parser": "^7.14.7",
     "@babel/preset-env": "^7.14.7",
     "@babel/register": "^7.14.5",
+    "@commitlint/cli": "^15.0.0",
+    "@commitlint/config-conventional": "^15.0.0",
     "@percy/cli": "^1.0.0-beta.58",
     "@percy/cypress": "^3.1.0",
     "@percy/migrate": "^0.11.0",
@@ -79,13 +82,15 @@
     "concurrently": "^6.2.2",
     "coveralls": "^3.0.2",
     "css-to-string-loader": "^0.1.3",
-    "cypress": "9.0.0",
+    "cypress": "9.1.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/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

@@ -37,6 +37,7 @@ const config = {
   themeCSS: undefined,
   /* **maxTextSize** - The maximum allowed size of the users text diamgram */
   maxTextSize: 50000,
+  darkMode: false,
 
   /**
    * | Parameter  | Description                                            | Type   | Required | Values                      |

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/mermaidAPI.js

@@ -60,7 +60,7 @@ import { attachFunctions } from './interactionDb';
 import { log, setLogLevel } from './logger';
 import getStyles from './styles';
 import theme from './themes';
-import utils, { directiveSanitizer, assignWithDepth } from './utils';
+import utils, { directiveSanitizer, assignWithDepth, sanitizeCss } from './utils';
 
 /**
  * @param text
@@ -223,6 +223,7 @@ const render = function (id, _txt, cb, container) {
   let txt = _txt;
   const graphInit = utils.detectInit(txt);
   if (graphInit) {
+    directiveSanitizer(graphInit);
     configApi.addDirective(graphInit);
   }
   let cnf = configApi.getConfig();
@@ -533,6 +534,9 @@ const handleDirective = function (p, directive, type) {
         p.setWrap(directive.type === 'wrap');
       }
       break;
+    case 'themeCss':
+      log.warn('themeCss encountered');
+      break;
     default:
       log.warn(
         `Unhandled directive: source: '%%{${directive.type}: ${JSON.stringify(

src/utils.js

@@ -974,6 +974,11 @@ export const directiveSanitizer = (args) => {
           log.debug('sanitize deleting constr option', key);
           delete args[key];
         }
+
+        if (key.indexOf('themeCSS') >= 0) {
+          log.debug('sanitizing themeCss option');
+          args[key] = sanitizeCss(args[key]);
+        }
         if (configKeys.indexOf(key) < 0) {
           log.debug('sanitize deleting option', key);
           delete args[key];
@@ -987,6 +992,16 @@ export const directiveSanitizer = (args) => {
     }
   }
 };
+export const sanitizeCss = (str) => {
+  const stringsearch = 'o';
+  const startCnt = (str.match(/\{/g) || []).length;
+  const endCnt = (str.match(/\}/g) || []).length;
+  if (startCnt !== endCnt) {
+    return '{ /* ERROR: Unbalanced CSS */ }';
+  }
+  // Todo add more checks here
+  return str;
+};
 
 export default {
   assignWithDepth,
@@ -1013,4 +1028,5 @@ export default {
   entityDecode,
   initIdGeneratior,
   directiveSanitizer,
+  sanitizeCss,
 };

todo.md

@@ -1,3 +0,0 @@
-- git graph requires a blank line at the end. why?
-- Create a desktop client
-- Do the rendering in an iframe to avoid global CSS to affect rendering.

webpack.config.babel.js

@@ -1,11 +0,0 @@
-import nodeExternals from 'webpack-node-externals';
-
-import { jsConfig } from './webpack.config.base';
-
-const config = jsConfig();
-
-const coreConfig = jsConfig();
-coreConfig.externals = [nodeExternals()];
-coreConfig.output.filename = '[name].core.js';
-
-export default [config, coreConfig];

webpack.config.base.js

@@ -1,60 +0,0 @@
-import path from 'path';
-
-const jisonRule = {
-  test: /\.jison$/,
-  use: {
-    loader: path.resolve(__dirname, './jison/loader'),
-    options: {
-      'token-stack': true,
-    },
-  },
-};
-
-const jsRule = {
-  test: /\.js$/,
-  include: [
-    path.resolve(__dirname, './src'),
-    path.resolve(__dirname, './node_modules/dagre-d3-renderer/lib'),
-  ],
-  use: {
-    loader: 'babel-loader',
-  },
-};
-
-const scssRule = {
-  // load scss to string
-  test: /\.scss$/,
-  use: [{ loader: 'css-to-string-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' }],
-};
-
-export const jsConfig = () => {
-  return {
-    amd: false, // https://github.com/lodash/lodash/issues/3052
-    mode: 'development',
-    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: path.join(__dirname, './dist/'),
-      filename: '[name].js',
-      library: {
-        name: 'mermaid',
-        type: 'umd',
-        export: 'default',
-      },
-      globalObject: 'typeof self !== "undefined" ? self : this',
-    },
-    module: {
-      rules: [jsRule, scssRule, jisonRule],
-    },
-    devtool: 'source-map',
-  };
-};

webpack.config.e2e.js

@@ -1,67 +0,0 @@
-const path = require('path');
-
-const jsRule = {
-  test: /\.js$/,
-  exclude: /node_modules/,
-  use: {
-    loader: 'babel-loader',
-  },
-};
-
-const jisonRule = {
-  test: /\.jison$/,
-  use: {
-    loader: path.resolve(__dirname, './jison/loader'),
-    options: {
-      'token-stack': true,
-    },
-  },
-};
-
-const scssRule = {
-  // load scss to string
-  test: /\.scss$/,
-  use: [{ loader: 'css-to-string-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' }],
-};
-
-module.exports = {
-  amd: false, // https://github.com/lodash/lodash/issues/3052
-  mode: 'development',
-  target: 'web',
-  entry: {
-    mermaid: './src/mermaid.js',
-    e2e: './cypress/platform/viewer.js',
-    'bundle-test': './cypress/platform/bundle-test.js',
-  },
-  resolve: {
-    extensions: ['.wasm', '.mjs', '.js', '.json', '.jison'],
-    fallback: {
-      fs: false, // jison generated code requires 'fs'
-      path: require.resolve('path-browserify'),
-    },
-  },
-  output: {
-    path: path.join(__dirname, './dist/'),
-    filename: '[name].js',
-    library: {
-      name: 'mermaid',
-      type: 'umd',
-      export: 'default',
-    },
-  },
-  devServer: {
-    compress: true,
-    port: 9000,
-    static: [
-      { directory: path.join(__dirname, 'cypress', 'platform') },
-      { directory: path.join(__dirname, 'dist') },
-    ],
-  },
-  module: {
-    rules: [jsRule, scssRule, jisonRule],
-  },
-  externals: {
-    mermaid: 'mermaid',
-  },
-  devtool: 'source-map',
-};

webpack.config.prod.babel.js

@@ -1,17 +0,0 @@
-import { jsConfig } from './webpack.config.base';
-
-const umdConfig = jsConfig();
-umdConfig.mode = 'production';
-umdConfig.output.filename = '[name].min.js';
-
-const esmConfig = jsConfig();
-esmConfig.mode = 'production';
-esmConfig.output.library = {
-  type: 'module',
-};
-esmConfig.experiments = {
-  outputModule: true,
-};
-esmConfig.output.filename = '[name].esm.min.mjs';
-
-export default [umdConfig, esmConfig];