From 619136d38941322fe8d0aaec91cc553740baddbc Mon Sep 17 00:00:00 2001
From: ashishj <ashishjain0512@gmail.com>
Date: Thu, 18 Aug 2022 20:07:15 +0200
Subject: [PATCH 01/60] Updating to version to 9.1.6

---
 docs/index.html | 2 +-
 package.json    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 64cc726bc..02c01d954 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -18,7 +18,7 @@
     <!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
     <link rel="stylesheet" href="theme.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
-    <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.5/dist/mermaid.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.6/dist/mermaid.min.js"></script>
     <!-- <script src="http://localhost:9000/mermaid.js"></script> -->
     <script>
       // prettier-ignore
diff --git a/package.json b/package.json
index e71afdc89..137c07d15 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "9.1.5",
+  "version": "9.1.6",
   "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",

From 88e17bf1b4ab791ba16b3ad012501ac3726e021c Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sat, 20 Aug 2022 23:40:52 +0530
Subject: [PATCH 02/60] Typescript init

---
 .prettierrc.json                |   3 -
 .webpack/webpack.config.base.js |   7 ++-
 package.json                    |   2 +
 src/{Diagram.js => Diagram.ts}  |  23 ++++++--
 src/logger.js                   |  10 ++--
 tsconfig.json                   | 101 ++++++++++++++++++++++++++++++++
 yarn.lock                       |  19 +++++-
 7 files changed, 148 insertions(+), 17 deletions(-)
 rename src/{Diagram.js => Diagram.ts} (84%)
 create mode 100644 tsconfig.json

diff --git a/.prettierrc.json b/.prettierrc.json
index 8cadfefaf..0835748d6 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -1,8 +1,5 @@
 {
   "endOfLine": "auto",
-  "plugins": [
-    "prettier-plugin-jsdoc"
-  ],
   "printWidth": 100,
   "singleQuote": true
 }
\ No newline at end of file
diff --git a/.webpack/webpack.config.base.js b/.webpack/webpack.config.base.js
index 055f59dfc..25dfbffcc 100644
--- a/.webpack/webpack.config.base.js
+++ b/.webpack/webpack.config.base.js
@@ -9,7 +9,7 @@ export default {
     mermaid: './src/mermaid.js',
   },
   resolve: {
-    extensions: ['.wasm', '.mjs', '.js', '.json', '.jison'],
+    extensions: ['.wasm', '.mjs', '.js', '.ts', '.json', '.jison'],
     fallback: {
       fs: false, // jison generated code requires 'fs'
       path: require.resolve('path-browserify'),
@@ -27,6 +27,11 @@ export default {
   },
   module: {
     rules: [
+      {
+        test: /\.ts$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
       {
         test: /\.js$/,
         include: [resolveRoot('./src'), resolveRoot('./node_modules/dagre-d3-renderer/lib')],
diff --git a/package.json b/package.json
index e71afdc89..4b6e676a5 100644
--- a/package.json
+++ b/package.json
@@ -106,6 +106,8 @@
     "prettier-plugin-jsdoc": "^0.3.30",
     "start-server-and-test": "^1.12.6",
     "terser-webpack-plugin": "^5.2.4",
+    "ts-loader": "^9.3.1",
+    "typescript": "^4.7.4",
     "webpack": "^5.53.0",
     "webpack-cli": "^4.7.2",
     "webpack-dev-server": "^4.3.0",
diff --git a/src/Diagram.js b/src/Diagram.ts
similarity index 84%
rename from src/Diagram.js
rename to src/Diagram.ts
index 16dfb89d3..c4e265b04 100644
--- a/src/Diagram.js
+++ b/src/Diagram.ts
@@ -1,4 +1,3 @@
-import utils from './utils';
 import * as configApi from './config';
 import { log } from './logger';
 import { getDiagrams } from './diagram-api/diagramAPI';
@@ -8,7 +7,7 @@ class Diagram {
   parser;
   renderer;
   db;
-  constructor(txt) {
+  constructor(public txt: string) {
     const diagrams = getDiagrams();
     const cnf = configApi.getConfig();
     this.txt = txt;
@@ -17,26 +16,32 @@ class Diagram {
 
     // console.log('this.type', this.type, diagrams[this.type]);
     // Setup diagram
+    // @ts-ignore
     this.db = diagrams[this.type].db;
     this.db.clear?.();
 
+    // @ts-ignore
     this.renderer = diagrams[this.type].renderer;
+    // @ts-ignore
     this.parser = diagrams[this.type].parser;
+    // @ts-ignore
     this.parser.parser.yy = this.db;
+    // @ts-ignore
     if (typeof diagrams[this.type].init === 'function') {
+      // @ts-ignore
       diagrams[this.type].init(cnf);
       log.debug('Initialized diagram ' + this.type, cnf);
     }
-    this.txt = this.txt + '\n';
-
+    this.txt += '\n';
     this.parser.parser.yy.graphType = this.type;
-    this.parser.parser.yy.parseError = (str, hash) => {
+    this.parser.parser.yy.parseError = (str: string, hash: string) => {
       const error = { str, hash };
       throw error;
     };
     this.parser.parse(this.txt);
   }
-  parse(text) {
+
+  parse(text: string) {
     var parseEncounteredException = false;
     try {
       text = text + '\n';
@@ -47,13 +52,17 @@ class Diagram {
       parseEncounteredException = true;
       // Is this the correct way to access mermiad's parseError()
       // method ? (or global.mermaid.parseError()) ?
+      // @ts-ignore
       if (global.mermaid.parseError) {
+        // @ts-ignore
         if (error.str != undefined) {
           // handle case where error string and hash were
           // wrapped in object like`const error = { str, hash };`
+          // @ts-ignore
           global.mermaid.parseError(error.str, error.hash);
         } else {
           // assume it is just error string and pass it on
+          // @ts-ignore
           global.mermaid.parseError(error);
         }
       } else {
@@ -63,9 +72,11 @@ class Diagram {
     }
     return !parseEncounteredException;
   }
+
   getParser() {
     return this.parser;
   }
+
   getType() {
     return this.type;
   }
diff --git a/src/logger.js b/src/logger.js
index ac4fc8f05..557bb15ce 100644
--- a/src/logger.js
+++ b/src/logger.js
@@ -12,11 +12,11 @@ export const LEVELS = {
 };
 
 export const log = {
-  debug: () => {},
-  info: () => {},
-  warn: () => {},
-  error: () => {},
-  fatal: () => {},
+  debug: (...args) => {},
+  info: (...args) => {},
+  warn: (...args) => {},
+  error: (...args) => {},
+  fatal: (...args) => {},
 };
 
 /**
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 000000000..7fdd4d736
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,101 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig.json to read more about this file */
+
+    /* Projects */
+    // "incremental": true,                              /* Enable incremental compilation */
+    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
+    // "tsBuildInfoFile": "./",                          /* Specify the folder for .tsbuildinfo incremental compilation files. */
+    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects */
+    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
+    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
+
+    /* Language and Environment */
+    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+    // "jsx": "preserve",                                /* Specify what JSX code is generated. */
+    // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
+    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
+    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */
+    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */
+    // "reactNamespace": "",                             /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */
+    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
+    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
+
+    /* Modules */
+    "module": "ES6",                                /* Specify what module code is generated. */
+    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
+    "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
+    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
+    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
+    // "typeRoots": [],                                  /* Specify multiple folders that act like `./node_modules/@types`. */
+    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
+    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
+    // "resolveJsonModule": true,                        /* Enable importing .json files */
+    // "noResolve": true,                                /* Disallow `import`s, `require`s or `<reference>`s from expanding the number of files TypeScript should add to a project. */
+
+    /* JavaScript Support */
+    "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */
+    // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
+    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */
+
+    /* Emit */
+    // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
+    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
+    // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
+    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
+    "outDir": "./dist",                                   /* Specify an output folder for all emitted files. */
+    // "removeComments": true,                           /* Disable emitting comments. */
+    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
+    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
+    // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types */
+    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
+    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
+    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
+    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
+    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
+    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
+    // "stripInternal": true,                            /* Disable emitting declarations that have `@internal` in their JSDoc comments. */
+    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like `__extends` in compiled output. */
+    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
+    // "preserveConstEnums": true,                       /* Disable erasing `const enum` declarations in generated code. */
+    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
+    // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
+
+    /* Interop Constraints */
+    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
+    // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
+    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */
+    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
+
+    /* Type Checking */
+    "strict": true,                                      /* Enable all strict type-checking options. */
+    // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied `any` type.. */
+    // "strictNullChecks": true,                         /* When type checking, take into account `null` and `undefined`. */
+    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+    // "strictBindCallApply": true,                      /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */
+    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
+    // "noImplicitThis": true,                           /* Enable error reporting when `this` is given the type `any`. */
+    // "useUnknownInCatchVariables": true,               /* Type catch clause variables as 'unknown' instead of 'any'. */
+    // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
+    // "noUnusedLocals": true,                           /* Enable error reporting when a local variables aren't read. */
+    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read */
+    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
+    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
+    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
+    // "noUncheckedIndexedAccess": true,                 /* Include 'undefined' in index signature results */
+    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
+    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type */
+    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
+    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
+
+    /* Completeness */
+    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
+    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index b44324a2e..815afd3dd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5098,7 +5098,7 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0:
   dependencies:
     once "^1.4.0"
 
-enhanced-resolve@^5.10.0:
+enhanced-resolve@^5.0.0, enhanced-resolve@^5.10.0:
   version "5.10.0"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz#0dc579c3bb2a1032e357ac45b8f3a6f3ad4fb1e6"
   integrity sha512-T0yTFjdpldGY8PmuXXR0PyQ1ufZpEGiHVrp7zHKB7jdR4qlmZHhONVM5AQOAWXuF/w3dnHbEQVrNptJgt7F+cQ==
@@ -8475,7 +8475,7 @@ micromatch@^3.1.5:
     snapdragon "^0.8.1"
     to-regex "^3.0.2"
 
-micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5:
+micromatch@^4.0.0, micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
   integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
@@ -11098,6 +11098,16 @@ trough@^1.0.0:
   resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.5.tgz#b8b639cefad7d0bb2abd37d433ff8293efa5f406"
   integrity sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==
 
+ts-loader@^9.3.1:
+  version "9.3.1"
+  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-9.3.1.tgz#fe25cca56e3e71c1087fe48dc67f4df8c59b22d4"
+  integrity sha512-OkyShkcZTsTwyS3Kt7a4rsT/t2qvEVQuKCTg4LJmpj9fhFR7ukGdZwV6Qq3tRUkqcXtfGpPR7+hFKHCG/0d3Lw==
+  dependencies:
+    chalk "^4.1.0"
+    enhanced-resolve "^5.0.0"
+    micromatch "^4.0.0"
+    semver "^7.3.4"
+
 ts-node@^10.7.0:
   version "10.7.0"
   resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-10.7.0.tgz#35d503d0fab3e2baa672a0e94f4b40653c2463f5"
@@ -11213,6 +11223,11 @@ typescript@^4.6.4:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.4.tgz#caa78bbc3a59e6a5c510d35703f6a09877ce45e9"
   integrity sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg==
 
+typescript@^4.7.4:
+  version "4.7.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.4.tgz#1a88596d1cf47d59507a1bcdfb5b9dfe4d488235"
+  integrity sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==
+
 uglify-js@^3.1.4:
   version "3.14.4"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.14.4.tgz#68756f17d1b90b9d289341736cb9a567d6882f90"

From 95dbbb350b018ab9a639c8ef77c7d787340c0cb6 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sun, 21 Aug 2022 00:38:26 +0530
Subject: [PATCH 03/60] tsConversion: DetectType

---
 jest.config.js                                |   1 +
 package.json                                  |   2 +
 src/Diagram.ts                                |   2 +-
 src/diagram-api/detectType.js                 | 100 ------------------
 src/diagram-api/detectType.ts                 |  77 ++++++++++++++
 ...hestration.js => diagram-orchestration.ts} |  10 +-
 src/diagram-api/diagramAPI.js                 |   4 +
 src/diagrams/git/gitGraphDetector.js          |   8 --
 src/diagrams/git/gitGraphDetector.ts          |   3 +
 src/diagrams/git/gitGraphParserV2.spec.js     |   1 -
 src/diagrams/mindmap/mindamapDetector.js      |   8 --
 src/diagrams/mindmap/mindamapDetector.ts      |   3 +
 src/mermaidAPI.js                             |   2 +-
 src/types.d.ts                                |   7 ++
 src/utils.js                                  |   2 +-
 src/utils.spec.js                             |   4 +-
 yarn.lock                                     |  51 +++++++--
 17 files changed, 152 insertions(+), 133 deletions(-)
 delete mode 100644 src/diagram-api/detectType.js
 create mode 100644 src/diagram-api/detectType.ts
 rename src/diagram-api/{diagram-orchestration.js => diagram-orchestration.ts} (75%)
 delete mode 100644 src/diagrams/git/gitGraphDetector.js
 create mode 100644 src/diagrams/git/gitGraphDetector.ts
 delete mode 100644 src/diagrams/mindmap/mindamapDetector.js
 create mode 100644 src/diagrams/mindmap/mindamapDetector.ts
 create mode 100644 src/types.d.ts

diff --git a/jest.config.js b/jest.config.js
index 9930a513e..ebc6b9fb0 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -2,6 +2,7 @@ const path = require('path');
 
 module.exports = {
   testEnvironment: 'jsdom',
+  preset: 'ts-jest',
   transform: {
     '^.+\\.jsx?$': ['babel-jest', { rootMode: 'upward' }],
     '^.+\\.jison$': [
diff --git a/package.json b/package.json
index 4b6e676a5..926d56f34 100644
--- a/package.json
+++ b/package.json
@@ -76,6 +76,7 @@
     "@babel/register": "^7.14.5",
     "@commitlint/cli": "^17.0.0",
     "@commitlint/config-conventional": "^17.0.0",
+    "@types/jest": "^28.1.7",
     "babel-jest": "^28.0.3",
     "babel-loader": "^8.2.2",
     "concurrently": "^7.0.0",
@@ -106,6 +107,7 @@
     "prettier-plugin-jsdoc": "^0.3.30",
     "start-server-and-test": "^1.12.6",
     "terser-webpack-plugin": "^5.2.4",
+    "ts-jest": "^28.0.8",
     "ts-loader": "^9.3.1",
     "typescript": "^4.7.4",
     "webpack": "^5.53.0",
diff --git a/src/Diagram.ts b/src/Diagram.ts
index c4e265b04..e822d0195 100644
--- a/src/Diagram.ts
+++ b/src/Diagram.ts
@@ -1,7 +1,7 @@
 import * as configApi from './config';
 import { log } from './logger';
 import { getDiagrams } from './diagram-api/diagramAPI';
-import detectType from './diagram-api/detectType';
+import { detectType } from './diagram-api/detectType';
 class Diagram {
   type = 'graph';
   parser;
diff --git a/src/diagram-api/detectType.js b/src/diagram-api/detectType.js
deleted file mode 100644
index a5f074e3e..000000000
--- a/src/diagram-api/detectType.js
+++ /dev/null
@@ -1,100 +0,0 @@
-const directive =
-  /[%]{2}[{]\s*(?:(?:(\w+)\s*:|(\w+))\s*(?:(?:(\w+))|((?:(?![}][%]{2}).|\r?\n)*))?\s*)(?:[}][%]{2})?/gi;
-const anyComment = /\s*%%.*\n/gm;
-const detectors = {};
-/**
- * @function detectType Detects the type of the graph text. Takes into consideration the possible
- *   existence of an %%init directive
- *
- *   ```mermaid
- *   %%{initialize: {"startOnLoad": true, logLevel: "fatal" }}%%
- *   graph LR
- *    a-->b
- *    b-->c
- *    c-->d
- *    d-->e
- *    e-->f
- *    f-->g
- *    g-->h
- * ```
- * @param {string} text The text defining the graph
- * @param {{
- *   class: { defaultRenderer: string } | undefined;
- *   state: { defaultRenderer: string } | undefined;
- *   flowchart: { defaultRenderer: string } | undefined;
- * }} [cnf]
- * @returns {string} A graph definition key
- */
-const detectType = function (text, cnf) {
-  text = text.replace(directive, '').replace(anyComment, '\n');
-  if (text.match(/^\s*C4Context|C4Container|C4Component|C4Dynamic|C4Deployment/)) {
-    return 'c4';
-  }
-
-  if (text.match(/^\s*sequenceDiagram/)) {
-    return 'sequence';
-  }
-
-  if (text.match(/^\s*gantt/)) {
-    return 'gantt';
-  }
-  if (text.match(/^\s*classDiagram-v2/)) {
-    return 'classDiagram';
-  }
-  if (text.match(/^\s*classDiagram/)) {
-    if (cnf && cnf.class && cnf.class.defaultRenderer === 'dagre-wrapper') return 'classDiagram';
-    return 'class';
-  }
-
-  if (text.match(/^\s*stateDiagram-v2/)) {
-    return 'stateDiagram';
-  }
-
-  if (text.match(/^\s*stateDiagram/)) {
-    if (cnf && cnf.class && cnf.state.defaultRenderer === 'dagre-wrapper') return 'stateDiagram';
-    return 'state';
-  }
-
-  // if (text.match(/^\s*gitGraph/)) {
-  //   return 'gitGraph';
-  // }
-  if (text.match(/^\s*flowchart/)) {
-    return 'flowchart-v2';
-  }
-
-  if (text.match(/^\s*info/)) {
-    return 'info';
-  }
-  if (text.match(/^\s*pie/)) {
-    return 'pie';
-  }
-
-  if (text.match(/^\s*erDiagram/)) {
-    return 'er';
-  }
-
-  if (text.match(/^\s*journey/)) {
-    return 'journey';
-  }
-
-  if (text.match(/^\s*requirement/) || text.match(/^\s*requirementDiagram/)) {
-    return 'requirement';
-  }
-  if (cnf && cnf.flowchart && cnf.flowchart.defaultRenderer === 'dagre-wrapper')
-    return 'flowchart-v2';
-  const k = Object.keys(detectors);
-  for (let i = 0; i < k.length; i++) {
-    const key = k[i];
-    const dia = detectors[key];
-    if (dia && dia.detector(text)) {
-      return key;
-    }
-  }
-  return 'flowchart';
-};
-export const addDetector = (key, detector) => {
-  detectors[key] = {
-    detector,
-  };
-};
-export default detectType;
diff --git a/src/diagram-api/detectType.ts b/src/diagram-api/detectType.ts
new file mode 100644
index 000000000..417d3ace4
--- /dev/null
+++ b/src/diagram-api/detectType.ts
@@ -0,0 +1,77 @@
+const directive =
+  /[%]{2}[{]\s*(?:(?:(\w+)\s*:|(\w+))\s*(?:(?:(\w+))|((?:(?![}][%]{2}).|\r?\n)*))?\s*)(?:[}][%]{2})?/gi;
+const anyComment = /\s*%%.*\n/gm;
+
+const detectors: Record<string, DiagramDetector> = {};
+const diagramMatchers: Record<string, RegExp> = {
+  c4: /^\s*C4Context|C4Container|C4Component|C4Dynamic|C4Deployment/,
+  sequence: /^\s*sequenceDiagram/,
+  gantt: /^\s*gantt/,
+  classDiagram: /^\s*classDiagram-v2/,
+  stateDiagram: /^\s*stateDiagram-v2/,
+  'flowchart-v2': /^\s*flowchart/,
+  info: /^\s*info/,
+  pie: /^\s*pie/,
+  er: /^\s*erDiagram/,
+  journey: /^\s*journey/,
+  // gitGraph: /^\s*gitGraph/,
+  requirement: /^\s*requirement(Diagram)?/,
+};
+
+/**
+ * @function detectType Detects the type of the graph text. Takes into consideration the possible
+ *   existence of an %%init directive
+ *
+ *   ```mermaid
+ *   %%{initialize: {"startOnLoad": true, logLevel: "fatal" }}%%
+ *   graph LR
+ *    a-->b
+ *    b-->c
+ *    c-->d
+ *    d-->e
+ *    e-->f
+ *    f-->g
+ *    g-->h
+ * ```
+ * @param {string} text The text defining the graph
+ * @param {{
+ *   class: { defaultRenderer: string } | undefined;
+ *   state: { defaultRenderer: string } | undefined;
+ *   flowchart: { defaultRenderer: string } | undefined;
+ * }} [cnf]
+ * @returns {string} A graph definition key
+ */
+export const detectType = function (text: string, cnf: ConfigType): string {
+  text = text.replace(directive, '').replace(anyComment, '\n');
+  for (const [diagram, matcher] of Object.entries(diagramMatchers)) {
+    if (text.match(matcher)) {
+      return diagram;
+    }
+  }
+
+  if (text.match(/^\s*classDiagram/)) {
+    if (cnf?.class?.defaultRenderer === 'dagre-wrapper') return 'classDiagram';
+    return 'class';
+  }
+
+  if (text.match(/^\s*stateDiagram/)) {
+    if (cnf?.state?.defaultRenderer === 'dagre-wrapper') return 'stateDiagram';
+    return 'state';
+  }
+
+  if (cnf?.flowchart?.defaultRenderer === 'dagre-wrapper') {
+    return 'flowchart-v2';
+  }
+
+  for (const [key, detector] of Object.entries(detectors)) {
+    if (detector(text)) {
+      return key;
+    }
+  }
+
+  return 'flowchart';
+};
+
+export const addDetector = (key: string, detector: DiagramDetector) => {
+  detectors[key] = detector;
+};
diff --git a/src/diagram-api/diagram-orchestration.js b/src/diagram-api/diagram-orchestration.ts
similarity index 75%
rename from src/diagram-api/diagram-orchestration.js
rename to src/diagram-api/diagram-orchestration.ts
index d73bc1bbb..ecdb7e467 100644
--- a/src/diagram-api/diagram-orchestration.js
+++ b/src/diagram-api/diagram-orchestration.ts
@@ -1,13 +1,14 @@
-import { registerDiagram } from './diagramAPI.js';
+import { registerDiagram } from './diagramAPI';
 // import mindmapDb from '../diagrams/mindmap/mindmapDb';
 // import mindmapRenderer from '../diagrams/mindmap/mindmapRenderer';
 // import mindmapParser from '../diagrams/mindmap/parser/mindmapDiagram';
-// import mindmapDetector from '../diagrams/mindmap/mindmapDetector';
+// import { mindmapDetector } from '../diagrams/mindmap/mindmapDetector';
 
 import gitGraphDb from '../diagrams/git/gitGraphAst';
 import gitGraphRenderer from '../diagrams/git/gitGraphRenderer';
+// @ts-ignore
 import gitGraphParser from '../diagrams/git/parser/gitGraph';
-import gitGraphDetector from '../diagrams/git/gitGraphDetector';
+import { gitGraphDetector } from '../diagrams/git/gitGraphDetector';
 
 // Register mindmap and other built-in diagrams
 // registerDiagram(
@@ -19,7 +20,7 @@ import gitGraphDetector from '../diagrams/git/gitGraphDetector';
 //   mindmapRenderer,
 //   mindmapDetector
 // );
-const addDiagrams = () => {
+export const addDiagrams = () => {
   registerDiagram(
     'gitGraph',
     gitGraphParser,
@@ -29,4 +30,3 @@ const addDiagrams = () => {
     gitGraphDetector
   );
 };
-export default addDiagrams;
diff --git a/src/diagram-api/diagramAPI.js b/src/diagram-api/diagramAPI.js
index 62c884368..13ebe8ab8 100644
--- a/src/diagram-api/diagramAPI.js
+++ b/src/diagram-api/diagramAPI.js
@@ -35,6 +35,7 @@ import journeyDb from '../diagrams/user-journey/journeyDb';
 import journeyRenderer from '../diagrams/user-journey/journeyRenderer';
 import journeyParser from '../diagrams/user-journey/parser/journey';
 import { addDetector } from './detectType';
+import { log } from '../logger';
 
 const diagrams = {
   c4: {
@@ -165,6 +166,9 @@ const diagrams = {
 };
 // console.log(sequenceDb);
 export const registerDiagram = (id, parser, db, renderer, init, detector) => {
+  if (diagrams[id]) {
+    log.warn(`Diagram ${id} already registered.`);
+  }
   diagrams[id] = { parser, db, renderer, init };
   addDetector(id, detector);
 };
diff --git a/src/diagrams/git/gitGraphDetector.js b/src/diagrams/git/gitGraphDetector.js
deleted file mode 100644
index 3707a3304..000000000
--- a/src/diagrams/git/gitGraphDetector.js
+++ /dev/null
@@ -1,8 +0,0 @@
-const detector = (txt) => {
-  if (txt.match(/^\s*gitGraph/)) {
-    return 'gitGraph';
-  }
-  return null;
-};
-
-export default detector;
diff --git a/src/diagrams/git/gitGraphDetector.ts b/src/diagrams/git/gitGraphDetector.ts
new file mode 100644
index 000000000..08e4d8a6f
--- /dev/null
+++ b/src/diagrams/git/gitGraphDetector.ts
@@ -0,0 +1,3 @@
+export const gitGraphDetector: DiagramDetector = (txt) => {
+  return txt.match(/^\s*gitGraph/) != null;
+};
diff --git a/src/diagrams/git/gitGraphParserV2.spec.js b/src/diagrams/git/gitGraphParserV2.spec.js
index b57ce1af0..fa8015fd9 100644
--- a/src/diagrams/git/gitGraphParserV2.spec.js
+++ b/src/diagrams/git/gitGraphParserV2.spec.js
@@ -4,7 +4,6 @@ import gitGraphAst from './gitGraphAst';
 import { parser } from './parser/gitGraph';
 //import randomString from 'crypto-random-string';
 //import cryptoRandomString from 'crypto-random-string';
-import { logger } from '../../logger';
 
 //jest.mock('crypto-random-string');
 
diff --git a/src/diagrams/mindmap/mindamapDetector.js b/src/diagrams/mindmap/mindamapDetector.js
deleted file mode 100644
index 341e3968c..000000000
--- a/src/diagrams/mindmap/mindamapDetector.js
+++ /dev/null
@@ -1,8 +0,0 @@
-const detector = (txt) => {
-  if (txt.match(/^\s*mindmap/)) {
-    return 'mindmap';
-  }
-  return null;
-};
-
-export default detector;
diff --git a/src/diagrams/mindmap/mindamapDetector.ts b/src/diagrams/mindmap/mindamapDetector.ts
new file mode 100644
index 000000000..b6e5d3cde
--- /dev/null
+++ b/src/diagrams/mindmap/mindamapDetector.ts
@@ -0,0 +1,3 @@
+export const mindmapDetector: DiagramDetector = (txt) => {
+  return txt.match(/^\s*mindmap/) != null;
+};
diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js
index 6a00e80ca..b393dd94e 100644
--- a/src/mermaidAPI.js
+++ b/src/mermaidAPI.js
@@ -19,7 +19,7 @@ import { select } from 'd3';
 import { compile, serialize, stringify } from 'stylis';
 import pkg from '../package.json';
 import * as configApi from './config';
-import addDiagrams from './diagram-api/diagram-orchestration';
+import { addDiagrams } from './diagram-api/diagram-orchestration';
 import classDb from './diagrams/class/classDb';
 import flowDb from './diagrams/flowchart/flowDb';
 import flowRenderer from './diagrams/flowchart/flowRenderer';
diff --git a/src/types.d.ts b/src/types.d.ts
new file mode 100644
index 000000000..9570962c9
--- /dev/null
+++ b/src/types.d.ts
@@ -0,0 +1,7 @@
+interface ConfigType {
+  class?: { defaultRenderer: string };
+  state?: { defaultRenderer: string };
+  flowchart?: { defaultRenderer: string };
+}
+
+type DiagramDetector = (text: string) => boolean;
diff --git a/src/utils.js b/src/utils.js
index db45ab9f6..e7fc5dcb0 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -16,7 +16,7 @@ import {
 import common from './diagrams/common/common';
 import { configKeys } from './defaultConfig';
 import { log } from './logger';
-import detectType from './diagram-api/detectType';
+import { detectType } from './diagram-api/detectType';
 import assignWithDepth from './assignWithDepth';
 
 // Effectively an enum of the supported curve types, accessible by name
diff --git a/src/utils.spec.js b/src/utils.spec.js
index 7eb3af9ff..6db395797 100644
--- a/src/utils.spec.js
+++ b/src/utils.spec.js
@@ -1,7 +1,7 @@
 import utils from './utils';
 import assignWithDepth from './assignWithDepth';
-import detectType from './diagram-api/detectType';
-import addDiagrams from './diagram-api/diagram-orchestration';
+import { detectType } from './diagram-api/detectType';
+import { addDiagrams } from './diagram-api/diagram-orchestration';
 
 addDiagrams();
 
diff --git a/yarn.lock b/yarn.lock
index 815afd3dd..ac77dcf9d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2305,6 +2305,14 @@
   dependencies:
     "@types/istanbul-lib-report" "*"
 
+"@types/jest@^28.1.7":
+  version "28.1.7"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-28.1.7.tgz#a680c5d05b69634c2d54a63cb106d7fb1adaba16"
+  integrity sha512-acDN4VHD40V24tgu0iC44jchXavRNVFXQ/E6Z5XNsswgoSO/4NgsXoEYmPUGookKldlZQyIpmrEXsHI9cA3ZTA==
+  dependencies:
+    expect "^28.0.0"
+    pretty-format "^28.0.0"
+
 "@types/jsdom@^16.2.4":
   version "16.2.14"
   resolved "https://registry.yarnpkg.com/@types/jsdom/-/jsdom-16.2.14.tgz#26fe9da6a8870715b154bb84cd3b2e53433d8720"
@@ -3380,6 +3388,13 @@ browserslist@^4.14.5, browserslist@^4.20.2, browserslist@^4.21.0:
     node-releases "^2.0.5"
     update-browserslist-db "^1.0.4"
 
+bs-logger@0.x:
+  version "0.2.6"
+  resolved "https://registry.yarnpkg.com/bs-logger/-/bs-logger-0.2.6.tgz#eb7d365307a72cf974cc6cda76b68354ad336bd8"
+  integrity sha512-pd8DCoxmbgc7hyPKOvxtqNcjYoOsABPQdcCUjGp3d42VR2CX1ORhk2A87oqqu5R1kk+76nsxZupkmyd+MVtCog==
+  dependencies:
+    fast-json-stable-stringify "2.x"
+
 bser@2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.1.tgz#e6787da20ece9d07998533cfd9de6f5c38f4bc05"
@@ -5520,7 +5535,7 @@ expand-brackets@^2.1.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
-expect@^28.1.3:
+expect@^28.0.0, expect@^28.1.3:
   version "28.1.3"
   resolved "https://registry.yarnpkg.com/expect/-/expect-28.1.3.tgz#90a7c1a124f1824133dd4533cce2d2bdcb6603ec"
   integrity sha512-eEh0xn8HlsuOBxFgIss+2mX85VAS4Qy3OSkjV7rlBWljtA4oWH37glVGyOZSZvErDT/yBywZdPGwCXuTvSG85g==
@@ -5643,7 +5658,7 @@ fast-glob@^3.2.9:
     merge2 "^1.3.0"
     micromatch "^4.0.4"
 
-fast-json-stable-stringify@^2.0.0:
+fast-json-stable-stringify@2.x, fast-json-stable-stringify@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
   integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
@@ -7434,7 +7449,7 @@ jest-snapshot@^28.1.3:
     pretty-format "^28.1.3"
     semver "^7.3.5"
 
-jest-util@^28.1.3:
+jest-util@^28.0.0, jest-util@^28.1.3:
   version "28.1.3"
   resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-28.1.3.tgz#f4f932aa0074f0679943220ff9cbba7e497028b0"
   integrity sha512-XdqfpHwpcSRko/C35uLYFM2emRAltIIKZiJ9eAmhjsj0CqZMa0p1ib0R5fWIqGhn1a103DebTbpqIaP1qCQ6tQ==
@@ -7966,6 +7981,11 @@ lodash.ismatch@^4.4.0:
   resolved "https://registry.yarnpkg.com/lodash.ismatch/-/lodash.ismatch-4.4.0.tgz#756cb5150ca3ba6f11085a78849645f188f85f37"
   integrity sha1-dWy1FQyjum8RCFp4hJZF8Yj4Xzc=
 
+lodash.memoize@4.x:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
+  integrity sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==
+
 lodash.merge@^4.6.1, lodash.merge@^4.6.2:
   version "4.6.2"
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
@@ -8053,7 +8073,7 @@ make-dir@^3.0.0, make-dir@^3.0.2, make-dir@^3.1.0:
   dependencies:
     semver "^6.0.0"
 
-make-error@^1.1.1:
+make-error@1.x, make-error@^1.1.1:
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2"
   integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==
@@ -9359,7 +9379,7 @@ pretty-bytes@^5.6.0:
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
   integrity sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==
 
-pretty-format@^28.1.3:
+pretty-format@^28.0.0, pretty-format@^28.1.3:
   version "28.1.3"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-28.1.3.tgz#c9fba8cedf99ce50963a11b27d982a9ae90970d5"
   integrity sha512-8gFb/To0OmxHR9+ZTb14Df2vNxdGCX8g1xWGUTqUw5TiZvcQf5sHKObd5UcPyLLyowNwDAMTF3XWOG1B6mxl1Q==
@@ -10163,7 +10183,7 @@ semver@7.0.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
   integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
 
-semver@7.3.7, semver@^7.1.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7:
+semver@7.3.7, semver@7.x, semver@^7.1.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7:
   version "7.3.7"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f"
   integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==
@@ -11098,6 +11118,20 @@ trough@^1.0.0:
   resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.5.tgz#b8b639cefad7d0bb2abd37d433ff8293efa5f406"
   integrity sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==
 
+ts-jest@^28.0.8:
+  version "28.0.8"
+  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-28.0.8.tgz#cd204b8e7a2f78da32cf6c95c9a6165c5b99cc73"
+  integrity sha512-5FaG0lXmRPzApix8oFG8RKjAz4ehtm8yMKOTy5HX3fY6W8kmvOrmcY0hKDElW52FJov+clhUbrKAqofnj4mXTg==
+  dependencies:
+    bs-logger "0.x"
+    fast-json-stable-stringify "2.x"
+    jest-util "^28.0.0"
+    json5 "^2.2.1"
+    lodash.memoize "4.x"
+    make-error "1.x"
+    semver "7.x"
+    yargs-parser "^21.0.1"
+
 ts-loader@^9.3.1:
   version "9.3.1"
   resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-9.3.1.tgz#fe25cca56e3e71c1087fe48dc67f4df8c59b22d4"
@@ -12059,6 +12093,11 @@ yargs-parser@^21.0.0:
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.0.0.tgz#a485d3966be4317426dd56bdb6a30131b281dc55"
   integrity sha512-z9kApYUOCwoeZ78rfRYYWdiU/iNL6mwwYlkkZfJoyMR1xps+NEBX5X7XmRpxkZHhXJ6+Ey00IwKxBBSW9FIjyA==
 
+yargs-parser@^21.0.1:
+  version "21.1.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"
+  integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==
+
 yargs@17.4.1, yargs@^17.0.0, yargs@^17.3.1:
   version "17.4.1"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.4.1.tgz#ebe23284207bb75cee7c408c33e722bfb27b5284"

From c9cd56914f029cce36f0c8b86dbe93371a3c5d23 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sun, 21 Aug 2022 00:58:52 +0530
Subject: [PATCH 04/60] tsConversion: errorRenderer

---
 package.json                               |   1 +
 src/{errorRenderer.js => errorRenderer.ts} |  17 +-
 yarn.lock                                  | 215 +++++++++++++++++++++
 3 files changed, 223 insertions(+), 10 deletions(-)
 rename src/{errorRenderer.js => errorRenderer.ts} (92%)

diff --git a/package.json b/package.json
index 926d56f34..94fa72e01 100644
--- a/package.json
+++ b/package.json
@@ -76,6 +76,7 @@
     "@babel/register": "^7.14.5",
     "@commitlint/cli": "^17.0.0",
     "@commitlint/config-conventional": "^17.0.0",
+    "@types/d3": "^7.4.0",
     "@types/jest": "^28.1.7",
     "babel-jest": "^28.0.3",
     "babel-loader": "^8.2.2",
diff --git a/src/errorRenderer.js b/src/errorRenderer.ts
similarity index 92%
rename from src/errorRenderer.js
rename to src/errorRenderer.ts
index 28a9579ad..1f2b61e2e 100644
--- a/src/errorRenderer.js
+++ b/src/errorRenderer.ts
@@ -2,28 +2,24 @@
 import { select } from 'd3';
 import { log } from './logger';
 
-const conf = {};
+let conf = {};
 
 /**
  * Merges the value of `conf` with the passed `cnf`
  *
  * @param {object} cnf Config to merge
  */
-export const setConf = function (cnf) {
-  const keys = Object.keys(cnf);
-
-  keys.forEach(function (key) {
-    conf[key] = cnf[key];
-  });
+export const setConf = function (cnf: any) {
+  conf = { ...conf, ...cnf };
 };
 
 /**
  * Draws a an info picture in the tag with id: id based on the graph definition in text.
  *
  * @param {string} id The text for the error
- * @param {string} ver The version
+ * @param {string} mermaidVersion The version
  */
-export const draw = (id, ver) => {
+export const draw = (id: string, mermaidVersion: string) => {
   try {
     log.debug('Renering svg for syntax error\n');
 
@@ -86,13 +82,14 @@ export const draw = (id, ver) => {
       .attr('y', 400)
       .attr('font-size', '100px')
       .style('text-anchor', 'middle')
-      .text('mermaid version ' + ver);
+      .text('mermaid version ' + mermaidVersion);
 
     svg.attr('height', 100);
     svg.attr('width', 400);
     svg.attr('viewBox', '768 0 512 512');
   } catch (e) {
     log.error('Error while rendering info diagram');
+    // @ts-ignore
     log.error(e.message);
   }
 };
diff --git a/yarn.lock b/yarn.lock
index ac77dcf9d..9848cc6bb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2220,6 +2220,216 @@
   dependencies:
     "@types/node" "*"
 
+"@types/d3-array@*":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-3.0.3.tgz#87d990bf504d14ad6b16766979d04e943c046dac"
+  integrity sha512-Reoy+pKnvsksN0lQUlcH6dOGjRZ/3WRwXR//m+/8lt1BXeI4xyaUZoqULNjyXXRuh0Mj4LNpkCvhUpQlY3X5xQ==
+
+"@types/d3-axis@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-axis/-/d3-axis-3.0.1.tgz#6afc20744fa5cc0cbc3e2bd367b140a79ed3e7a8"
+  integrity sha512-zji/iIbdd49g9WN0aIsGcwcTBUkgLsCSwB+uH+LPVDAiKWENMtI3cJEWt+7/YYwelMoZmbBfzA3qCdrZ2XFNnw==
+  dependencies:
+    "@types/d3-selection" "*"
+
+"@types/d3-brush@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-brush/-/d3-brush-3.0.1.tgz#ae5f17ce391935ca88b29000e60ee20452c6357c"
+  integrity sha512-B532DozsiTuQMHu2YChdZU0qsFJSio3Q6jmBYGYNp3gMDzBmuFFgPt9qKA4VYuLZMp4qc6eX7IUFUEsvHiXZAw==
+  dependencies:
+    "@types/d3-selection" "*"
+
+"@types/d3-chord@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-chord/-/d3-chord-3.0.1.tgz#54c8856c19c8e4ab36a53f73ba737de4768ad248"
+  integrity sha512-eQfcxIHrg7V++W8Qxn6QkqBNBokyhdWSAS73AbkbMzvLQmVVBviknoz2SRS/ZJdIOmhcmmdCRE/NFOm28Z1AMw==
+
+"@types/d3-color@*":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-3.1.0.tgz#6594da178ded6c7c3842f3cc0ac84b156f12f2d4"
+  integrity sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA==
+
+"@types/d3-contour@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-contour/-/d3-contour-3.0.1.tgz#9ff4e2fd2a3910de9c5097270a7da8a6ef240017"
+  integrity sha512-C3zfBrhHZvrpAAK3YXqLWVAGo87A4SvJ83Q/zVJ8rFWJdKejUnDYaWZPkA8K84kb2vDA/g90LTQAz7etXcgoQQ==
+  dependencies:
+    "@types/d3-array" "*"
+    "@types/geojson" "*"
+
+"@types/d3-delaunay@*":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-delaunay/-/d3-delaunay-6.0.1.tgz#006b7bd838baec1511270cb900bf4fc377bbbf41"
+  integrity sha512-tLxQ2sfT0p6sxdG75c6f/ekqxjyYR0+LwPrsO1mbC9YDBzPJhs2HbJJRrn8Ez1DBoHRo2yx7YEATI+8V1nGMnQ==
+
+"@types/d3-dispatch@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-dispatch/-/d3-dispatch-3.0.1.tgz#a1b18ae5fa055a6734cb3bd3cbc6260ef19676e3"
+  integrity sha512-NhxMn3bAkqhjoxabVJWKryhnZXXYYVQxaBnbANu0O94+O/nX9qSjrA1P1jbAQJxJf+VC72TxDX/YJcKue5bRqw==
+
+"@types/d3-drag@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-drag/-/d3-drag-3.0.1.tgz#fb1e3d5cceeee4d913caa59dedf55c94cb66e80f"
+  integrity sha512-o1Va7bLwwk6h03+nSM8dpaGEYnoIG19P0lKqlic8Un36ymh9NSkNFX1yiXMKNMx8rJ0Kfnn2eovuFaL6Jvj0zA==
+  dependencies:
+    "@types/d3-selection" "*"
+
+"@types/d3-dsv@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-dsv/-/d3-dsv-3.0.0.tgz#f3c61fb117bd493ec0e814856feb804a14cfc311"
+  integrity sha512-o0/7RlMl9p5n6FQDptuJVMxDf/7EDEv2SYEO/CwdG2tr1hTfUVi0Iavkk2ax+VpaQ/1jVhpnj5rq1nj8vwhn2A==
+
+"@types/d3-ease@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-ease/-/d3-ease-3.0.0.tgz#c29926f8b596f9dadaeca062a32a45365681eae0"
+  integrity sha512-aMo4eaAOijJjA6uU+GIeW018dvy9+oH5Y2VPPzjjfxevvGQ/oRDs+tfYC9b50Q4BygRR8yE2QCLsrT0WtAVseA==
+
+"@types/d3-fetch@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-fetch/-/d3-fetch-3.0.1.tgz#f9fa88b81aa2eea5814f11aec82ecfddbd0b8fe0"
+  integrity sha512-toZJNOwrOIqz7Oh6Q7l2zkaNfXkfR7mFSJvGvlD/Ciq/+SQ39d5gynHJZ/0fjt83ec3WL7+u3ssqIijQtBISsw==
+  dependencies:
+    "@types/d3-dsv" "*"
+
+"@types/d3-force@*":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-force/-/d3-force-3.0.3.tgz#76cb20d04ae798afede1ea6e41750763ff5a9c82"
+  integrity sha512-z8GteGVfkWJMKsx6hwC3SiTSLspL98VNpmvLpEFJQpZPq6xpA1I8HNBDNSpukfK0Vb0l64zGFhzunLgEAcBWSA==
+
+"@types/d3-format@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-format/-/d3-format-3.0.1.tgz#194f1317a499edd7e58766f96735bdc0216bb89d"
+  integrity sha512-5KY70ifCCzorkLuIkDe0Z9YTf9RR2CjBX1iaJG+rgM/cPP+sO+q9YdQ9WdhQcgPj1EQiJ2/0+yUkkziTG6Lubg==
+
+"@types/d3-geo@*":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-geo/-/d3-geo-3.0.2.tgz#e7ec5f484c159b2c404c42d260e6d99d99f45d9a"
+  integrity sha512-DbqK7MLYA8LpyHQfv6Klz0426bQEf7bRTvhMy44sNGVyZoWn//B0c+Qbeg8Osi2Obdc9BLLXYAKpyWege2/7LQ==
+  dependencies:
+    "@types/geojson" "*"
+
+"@types/d3-hierarchy@*":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-hierarchy/-/d3-hierarchy-3.1.0.tgz#4561bb7ace038f247e108295ef77b6a82193ac25"
+  integrity sha512-g+sey7qrCa3UbsQlMZZBOHROkFqx7KZKvUpRzI/tAp/8erZWpYq7FgNKvYwebi2LaEiVs1klhUfd3WCThxmmWQ==
+
+"@types/d3-interpolate@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-interpolate/-/d3-interpolate-3.0.1.tgz#e7d17fa4a5830ad56fe22ce3b4fac8541a9572dc"
+  integrity sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw==
+  dependencies:
+    "@types/d3-color" "*"
+
+"@types/d3-path@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-3.0.0.tgz#939e3a784ae4f80b1fde8098b91af1776ff1312b"
+  integrity sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg==
+
+"@types/d3-polygon@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-polygon/-/d3-polygon-3.0.0.tgz#5200a3fa793d7736fa104285fa19b0dbc2424b93"
+  integrity sha512-D49z4DyzTKXM0sGKVqiTDTYr+DHg/uxsiWDAkNrwXYuiZVd9o9wXZIo+YsHkifOiyBkmSWlEngHCQme54/hnHw==
+
+"@types/d3-quadtree@*":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-quadtree/-/d3-quadtree-3.0.2.tgz#433112a178eb7df123aab2ce11c67f51cafe8ff5"
+  integrity sha512-QNcK8Jguvc8lU+4OfeNx+qnVy7c0VrDJ+CCVFS9srBo2GL9Y18CnIxBdTF3v38flrGy5s1YggcoAiu6s4fLQIw==
+
+"@types/d3-random@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-random/-/d3-random-3.0.1.tgz#5c8d42b36cd4c80b92e5626a252f994ca6bfc953"
+  integrity sha512-IIE6YTekGczpLYo/HehAy3JGF1ty7+usI97LqraNa8IiDur+L44d0VOjAvFQWJVdZOJHukUJw+ZdZBlgeUsHOQ==
+
+"@types/d3-scale-chromatic@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz#103124777e8cdec85b20b51fd3397c682ee1e954"
+  integrity sha512-dsoJGEIShosKVRBZB0Vo3C8nqSDqVGujJU6tPznsBJxNJNwMF8utmS83nvCBKQYPpjCzaaHcrf66iTRpZosLPw==
+
+"@types/d3-scale@*":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-4.0.2.tgz#41be241126af4630524ead9cb1008ab2f0f26e69"
+  integrity sha512-Yk4htunhPAwN0XGlIwArRomOjdoBFXC3+kCxK2Ubg7I9shQlVSJy/pG/Ht5ASN+gdMIalpk8TJ5xV74jFsetLA==
+  dependencies:
+    "@types/d3-time" "*"
+
+"@types/d3-selection@*":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-selection/-/d3-selection-3.0.3.tgz#57be7da68e7d9c9b29efefd8ea5a9ef1171e42ba"
+  integrity sha512-Mw5cf6nlW1MlefpD9zrshZ+DAWL4IQ5LnWfRheW6xwsdaWOb6IRRu2H7XPAQcyXEx1D7XQWgdoKR83ui1/HlEA==
+
+"@types/d3-shape@*":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-3.1.0.tgz#1d87a6ddcf28285ef1e5c278ca4bdbc0658f3505"
+  integrity sha512-jYIYxFFA9vrJ8Hd4Se83YI6XF+gzDL1aC5DCsldai4XYYiVNdhtpGbA/GM6iyQ8ayhSp3a148LY34hy7A4TxZA==
+  dependencies:
+    "@types/d3-path" "*"
+
+"@types/d3-time-format@*":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-time-format/-/d3-time-format-4.0.0.tgz#ee7b6e798f8deb2d9640675f8811d0253aaa1946"
+  integrity sha512-yjfBUe6DJBsDin2BMIulhSHmr5qNR5Pxs17+oW4DoVPyVIXZ+m6bs7j1UVKP08Emv6jRmYrYqxYzO63mQxy1rw==
+
+"@types/d3-time@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-3.0.0.tgz#e1ac0f3e9e195135361fa1a1d62f795d87e6e819"
+  integrity sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==
+
+"@types/d3-timer@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-timer/-/d3-timer-3.0.0.tgz#e2505f1c21ec08bda8915238e397fb71d2fc54ce"
+  integrity sha512-HNB/9GHqu7Fo8AQiugyJbv6ZxYz58wef0esl4Mv828w1ZKpAshw/uFWVDUcIB9KKFeFKoxS3cHY07FFgtTRZ1g==
+
+"@types/d3-transition@*":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-transition/-/d3-transition-3.0.2.tgz#393dc3e3d55009a43cc6f252e73fccab6d78a8a4"
+  integrity sha512-jo5o/Rf+/u6uerJ/963Dc39NI16FQzqwOc54bwvksGAdVfvDrqDpVeq95bEvPtBwLCVZutAEyAtmSyEMxN7vxQ==
+  dependencies:
+    "@types/d3-selection" "*"
+
+"@types/d3-zoom@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-zoom/-/d3-zoom-3.0.1.tgz#4bfc7e29625c4f79df38e2c36de52ec3e9faf826"
+  integrity sha512-7s5L9TjfqIYQmQQEUcpMAcBOahem7TRoSO/+Gkz02GbMVuULiZzjF2BOdw291dbO2aNon4m2OdFsRGaCq2caLQ==
+  dependencies:
+    "@types/d3-interpolate" "*"
+    "@types/d3-selection" "*"
+
+"@types/d3@^7.4.0":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@types/d3/-/d3-7.4.0.tgz#fc5cac5b1756fc592a3cf1f3dc881bf08225f515"
+  integrity sha512-jIfNVK0ZlxcuRDKtRS/SypEyOQ6UHaFQBKv032X45VvxSJ6Yi5G9behy9h6tNTHTDGh5Vq+KbmBjUWLgY4meCA==
+  dependencies:
+    "@types/d3-array" "*"
+    "@types/d3-axis" "*"
+    "@types/d3-brush" "*"
+    "@types/d3-chord" "*"
+    "@types/d3-color" "*"
+    "@types/d3-contour" "*"
+    "@types/d3-delaunay" "*"
+    "@types/d3-dispatch" "*"
+    "@types/d3-drag" "*"
+    "@types/d3-dsv" "*"
+    "@types/d3-ease" "*"
+    "@types/d3-fetch" "*"
+    "@types/d3-force" "*"
+    "@types/d3-format" "*"
+    "@types/d3-geo" "*"
+    "@types/d3-hierarchy" "*"
+    "@types/d3-interpolate" "*"
+    "@types/d3-path" "*"
+    "@types/d3-polygon" "*"
+    "@types/d3-quadtree" "*"
+    "@types/d3-random" "*"
+    "@types/d3-scale" "*"
+    "@types/d3-scale-chromatic" "*"
+    "@types/d3-selection" "*"
+    "@types/d3-shape" "*"
+    "@types/d3-time" "*"
+    "@types/d3-time-format" "*"
+    "@types/d3-timer" "*"
+    "@types/d3-transition" "*"
+    "@types/d3-zoom" "*"
+
 "@types/debug@^4.0.0":
   version "4.1.7"
   resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.7.tgz#7cc0ea761509124709b8b2d1090d8f6c17aadb82"
@@ -2267,6 +2477,11 @@
     "@types/qs" "*"
     "@types/serve-static" "*"
 
+"@types/geojson@*":
+  version "7946.0.10"
+  resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.10.tgz#6dfbf5ea17142f7f9a043809f1cd4c448cb68249"
+  integrity sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==
+
 "@types/graceful-fs@^4.1.3":
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.5.tgz#21ffba0d98da4350db64891f92a9e5db3cdb4e15"

From 896154d89f4ea87f7887f723c462554246642df2 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sun, 21 Aug 2022 00:59:54 +0530
Subject: [PATCH 05/60] tsConversion: logger

---
 src/{interactionDb.js => interactionDb.ts} |  4 +--
 src/{logger.js => logger.ts}               | 41 +++++++++++-----------
 2 files changed, 22 insertions(+), 23 deletions(-)
 rename src/{interactionDb.js => interactionDb.ts} (63%)
 rename src/{logger.js => logger.ts} (62%)

diff --git a/src/interactionDb.js b/src/interactionDb.ts
similarity index 63%
rename from src/interactionDb.js
rename to src/interactionDb.ts
index 147837232..379685c83 100644
--- a/src/interactionDb.js
+++ b/src/interactionDb.ts
@@ -1,5 +1,5 @@
-let interactionFunctions = [];
-export const addFunction = (func) => {
+let interactionFunctions: (() => {})[] = [];
+export const addFunction = (func: () => {}) => {
   interactionFunctions.push(func);
 };
 export const attachFunctions = () => {
diff --git a/src/logger.js b/src/logger.ts
similarity index 62%
rename from src/logger.js
rename to src/logger.ts
index 557bb15ce..a57285c7b 100644
--- a/src/logger.js
+++ b/src/logger.ts
@@ -1,9 +1,8 @@
 import moment from 'moment-mini';
 
-/** @typedef {'debug' | 'info' | 'warn' | 'error' | 'fatal'} LogLevel A log level */
+export type LogLevel = 'debug' | 'info' | 'warn' | 'error' | 'fatal';
 
-/** @type {Object<LogLevel, number>} */
-export const LEVELS = {
+export const LEVELS: Record<LogLevel, number> = {
   debug: 1,
   info: 2,
   warn: 3,
@@ -11,12 +10,12 @@ export const LEVELS = {
   fatal: 5,
 };
 
-export const log = {
-  debug: (...args) => {},
-  info: (...args) => {},
-  warn: (...args) => {},
-  error: (...args) => {},
-  fatal: (...args) => {},
+export const log: Record<keyof typeof LEVELS, typeof console.log> = {
+  debug: (..._args: any[]) => {},
+  info: (..._args: any[]) => {},
+  warn: (..._args: any[]) => {},
+  error: (..._args: any[]) => {},
+  fatal: (..._args: any[]) => {},
 };
 
 /**
@@ -24,40 +23,40 @@ export const log = {
  *
  * @param {LogLevel} [level="fatal"] The level to set the logging to. Default is `"fatal"`
  */
-export const setLogLevel = function (level = 'fatal') {
-  if (isNaN(level)) {
+export const setLogLevel = function (level: keyof typeof LEVELS | number | string = 'fatal') {
+  let numericLevel: number = LEVELS.fatal;
+  if (typeof level === 'string') {
     level = level.toLowerCase();
-    if (LEVELS[level] !== undefined) {
-      level = LEVELS[level];
+    if (level in LEVELS) {
+      numericLevel = LEVELS[level as keyof typeof LEVELS];
     }
   }
-  log.trace = () => {};
   log.debug = () => {};
   log.info = () => {};
   log.warn = () => {};
   log.error = () => {};
   log.fatal = () => {};
-  if (level <= LEVELS.fatal) {
+  if (numericLevel <= LEVELS.fatal) {
     log.fatal = console.error
       ? console.error.bind(console, format('FATAL'), 'color: orange')
       : console.log.bind(console, '\x1b[35m', format('FATAL'));
   }
-  if (level <= LEVELS.error) {
+  if (numericLevel <= LEVELS.error) {
     log.error = console.error
       ? console.error.bind(console, format('ERROR'), 'color: orange')
       : console.log.bind(console, '\x1b[31m', format('ERROR'));
   }
-  if (level <= LEVELS.warn) {
+  if (numericLevel <= LEVELS.warn) {
     log.warn = console.warn
       ? console.warn.bind(console, format('WARN'), 'color: orange')
       : console.log.bind(console, `\x1b[33m`, format('WARN'));
   }
-  if (level <= LEVELS.info) {
-    log.info = console.info // ? console.info.bind(console, '\x1b[34m', format('INFO'), 'color: blue')
+  if (numericLevel <= LEVELS.info) {
+    log.info = console.info
       ? console.info.bind(console, format('INFO'), 'color: lightblue')
       : console.log.bind(console, '\x1b[34m', format('INFO'));
   }
-  if (level <= LEVELS.debug) {
+  if (numericLevel <= LEVELS.debug) {
     log.debug = console.debug
       ? console.debug.bind(console, format('DEBUG'), 'color: lightgreen')
       : console.log.bind(console, '\x1b[32m', format('DEBUG'));
@@ -70,7 +69,7 @@ export const setLogLevel = function (level = 'fatal') {
  * @param {LogLevel} level The level for the log format
  * @returns {string} The format with the timestamp and log level
  */
-const format = (level) => {
+const format = (level: string): string => {
   const time = moment().format('ss.SSS');
   return `%c${time} : ${level} : `;
 };

From fab96881353ff22062aa8000d351759a1a2d50a5 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sun, 21 Aug 2022 01:21:47 +0530
Subject: [PATCH 06/60] tsConversion: flowchartStyles

---
 .../flowchart/{styles.js => styles.ts}        | 40 +++++++++----------
 1 file changed, 18 insertions(+), 22 deletions(-)
 rename src/diagrams/flowchart/{styles.js => styles.ts} (77%)

diff --git a/src/diagrams/flowchart/styles.js b/src/diagrams/flowchart/styles.ts
similarity index 77%
rename from src/diagrams/flowchart/styles.js
rename to src/diagrams/flowchart/styles.ts
index abaecb0b4..82fb1f875 100644
--- a/src/diagrams/flowchart/styles.js
+++ b/src/diagrams/flowchart/styles.ts
@@ -1,25 +1,21 @@
-/**
- * Returns the styles given options
- *
- * @param {{
- *   fontFamily: string;
- *   nodeTextColor: string;
- *   textColor: string;
- *   titleColor: string;
- *   mainBkg: string;
- *   nodeBorder: string;
- *   arrowheadColor: string;
- *   lineColor: string;
- *   edgeLabelBackground: string;
- *   clusterBkg: string;
- *   clusterBorder: string;
- *   tertiaryColor: string;
- *   border2: string;
- * }} options
- *   The options for the styles
- * @returns {string} The resulting styles
- */
-const getStyles = (options) =>
+/** Returns the styles given options */
+export interface FlowChartStyleOptions {
+  arrowheadColor: string;
+  border2: string;
+  clusterBkg: string;
+  clusterBorder: string;
+  edgeLabelBackground: string;
+  fontFamily: string;
+  lineColor: string;
+  mainBkg: string;
+  nodeBorder: string;
+  nodeTextColor: string;
+  tertiaryColor: string;
+  textColor: string;
+  titleColor: string;
+}
+
+const getStyles = (options: FlowChartStyleOptions) =>
   `.label {
     font-family: ${options.fontFamily};
     color: ${options.nodeTextColor || options.textColor};

From d9bace053b9105bfed99b00a244d20273601927b Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sun, 21 Aug 2022 08:45:17 +0530
Subject: [PATCH 07/60] Add `trace` logLevel

---
 src/logger.ts | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/logger.ts b/src/logger.ts
index a57285c7b..195cde7f3 100644
--- a/src/logger.ts
+++ b/src/logger.ts
@@ -1,8 +1,9 @@
 import moment from 'moment-mini';
 
-export type LogLevel = 'debug' | 'info' | 'warn' | 'error' | 'fatal';
+export type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal';
 
 export const LEVELS: Record<LogLevel, number> = {
+  trace: 0,
   debug: 1,
   info: 2,
   warn: 3,
@@ -11,6 +12,7 @@ export const LEVELS: Record<LogLevel, number> = {
 };
 
 export const log: Record<keyof typeof LEVELS, typeof console.log> = {
+  trace: (..._args: any[]) => {},
   debug: (..._args: any[]) => {},
   info: (..._args: any[]) => {},
   warn: (..._args: any[]) => {},
@@ -31,6 +33,7 @@ export const setLogLevel = function (level: keyof typeof LEVELS | number | strin
       numericLevel = LEVELS[level as keyof typeof LEVELS];
     }
   }
+  log.trace = () => {};
   log.debug = () => {};
   log.info = () => {};
   log.warn = () => {};
@@ -61,6 +64,11 @@ export const setLogLevel = function (level: keyof typeof LEVELS | number | strin
       ? console.debug.bind(console, format('DEBUG'), 'color: lightgreen')
       : console.log.bind(console, '\x1b[32m', format('DEBUG'));
   }
+  if (numericLevel <= LEVELS.trace) {
+    log.trace = console.debug
+      ? console.debug.bind(console, format('TRACE'), 'color: lightgreen')
+      : console.log.bind(console, '\x1b[32m', format('TRACE'));
+  }
 };
 
 /**

From 238cbd14ca98d7218b9c9ca95147a0b6e1477833 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sun, 21 Aug 2022 08:54:27 +0530
Subject: [PATCH 08/60] tsConversion: styles

---
 src/{styles.js => styles.ts} | 32 ++++++++++++++++++++++++++------
 1 file changed, 26 insertions(+), 6 deletions(-)
 rename src/{styles.js => styles.ts} (67%)

diff --git a/src/styles.js b/src/styles.ts
similarity index 67%
rename from src/styles.js
rename to src/styles.ts
index 15e804ef9..54266ff9a 100644
--- a/src/styles.js
+++ b/src/styles.ts
@@ -10,8 +10,10 @@ import sequence from './diagrams/sequence/styles';
 import stateDiagram from './diagrams/state/styles';
 import journey from './diagrams/user-journey/styles';
 import c4 from './diagrams/c4/styles';
+import { FlowChartStyleOptions } from './diagrams/flowchart/styles';
 import { log } from './logger';
 
+// TODO Q: Shouldn't registerDiagram be injecting data here?
 const themes = {
   flowchart,
   'flowchart-v2': flowchart,
@@ -31,12 +33,30 @@ const themes = {
   c4,
 };
 
-export const calcThemeVariables = (theme, userOverRides) => {
-  log.info('userOverides', userOverRides);
-  return theme.calcColors(userOverRides);
-};
+// TODO: Delete as it's not used
+// export const calcThemeVariables = (theme: string, userOverRides) => {
+//   log.info('userOverides', userOverRides);
+//   return theme.calcColors(userOverRides);
+// };
 
-const getStyles = (type, userStyles, options) => {
+const getStyles = (
+  type: string,
+  userStyles: string,
+  options: {
+    fontFamily: string;
+    fontSize: string;
+    textColor: string;
+    errorBkgColor: string;
+    errorTextColor: string;
+    lineColor: string;
+  } & FlowChartStyleOptions
+) => {
+  let diagramStyles: string = '';
+  if (type in themes && themes[type as keyof typeof themes]) {
+    diagramStyles = themes[type as keyof typeof themes](options);
+  } else {
+    log.warn(`No theme found for ${type}`);
+  }
   return ` {
     font-family: ${options.fontFamily};
     font-size: ${options.fontSize};
@@ -83,7 +103,7 @@ const getStyles = (type, userStyles, options) => {
     font-size: ${options.fontSize};
   }
 
-  ${themes[type](options)}
+  ${diagramStyles}
 
   ${userStyles}
 `;

From 6de66eaba38607d92793b5833606297760b54da6 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sun, 21 Aug 2022 09:42:30 +0530
Subject: [PATCH 09/60] Add `trace` logLevel

---
 docs/Setup.md | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/docs/Setup.md b/docs/Setup.md
index 85070a1e7..1092520fa 100644
--- a/docs/Setup.md
+++ b/docs/Setup.md
@@ -58,17 +58,10 @@ Theme , the CSS style sheet
 
 ## logLevel
 
-| Parameter | Description                                           | Type             | Required | Values        |
-| --------- | ----------------------------------------------------- | ---------------- | -------- | ------------- |
-| logLevel  | This option decides the amount of logging to be used. | string \| number | Required | 1, 2, 3, 4, 5 |
+| Parameter | Description                                           | Type             | Required | Values                                             |
+| --------- | ----------------------------------------------------- | ---------------- | -------- | -------------------------------------------------- |
+| logLevel  | This option decides the amount of logging to be used. | string \| number | Required | 'trace', 'debug', 'info', 'warn', 'error', 'fatal' |
 
-**Notes:**
-
--   Debug: 1
--   Info: 2
--   Warn: 3
--   Error: 4
--   Fatal: 5 (default)
 
 ## securityLevel
 

From f14f0d9857c60131f79e2c2ca35d99f4a2bb2bb8 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sun, 21 Aug 2022 11:00:22 +0530
Subject: [PATCH 10/60] tsConversion: config & common

---
 .webpack/webpack.config.base.js              |   5 +-
 .webpack/webpack.config.e2e.babel.js         |   2 +-
 package.json                                 |   2 +
 src/@types/config.d.ts                       | 342 +++++++++++++++++++
 src/@types/types.d.ts                        |   1 +
 src/{commonDb.js => commonDb.ts}             |  16 +-
 src/{defaultConfig.js => defaultConfig.ts}   |  21 +-
 src/diagram-api/detectType.ts                |   4 +-
 src/diagrams/common/{common.js => common.ts} |  81 ++---
 src/{mermaid.js => mermaid.ts}               |  28 +-
 src/types.d.ts                               |   7 -
 src/utils.js                                 |   1 +
 tsconfig.json                                |  35 +-
 yarn.lock                                    | 169 ++++++++-
 14 files changed, 605 insertions(+), 109 deletions(-)
 create mode 100644 src/@types/config.d.ts
 create mode 100644 src/@types/types.d.ts
 rename src/{commonDb.js => commonDb.ts} (57%)
 rename src/{defaultConfig.js => defaultConfig.ts} (98%)
 rename src/diagrams/common/{common.js => common.ts} (64%)
 rename src/{mermaid.js => mermaid.ts} (91%)
 delete mode 100644 src/types.d.ts

diff --git a/.webpack/webpack.config.base.js b/.webpack/webpack.config.base.js
index 25dfbffcc..24db2a4f3 100644
--- a/.webpack/webpack.config.base.js
+++ b/.webpack/webpack.config.base.js
@@ -1,12 +1,12 @@
 import path from 'path';
-
+const { TsConfigPathsPlugin } = require('awesome-typescript-loader');
 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',
+    mermaid: './src/mermaid.ts',
   },
   resolve: {
     extensions: ['.wasm', '.mjs', '.js', '.ts', '.json', '.jison'],
@@ -14,6 +14,7 @@ export default {
       fs: false, // jison generated code requires 'fs'
       path: require.resolve('path-browserify'),
     },
+    plugins: [new TsConfigPathsPlugin()],
   },
   output: {
     path: resolveRoot('./dist'),
diff --git a/.webpack/webpack.config.e2e.babel.js b/.webpack/webpack.config.e2e.babel.js
index 3ec2bdcd7..b9c5b7733 100644
--- a/.webpack/webpack.config.e2e.babel.js
+++ b/.webpack/webpack.config.e2e.babel.js
@@ -4,7 +4,7 @@ import { merge } from 'webpack-merge';
 export default merge(baseConfig, {
   mode: 'development',
   entry: {
-    mermaid: './src/mermaid.js',
+    mermaid: './src/mermaid.ts',
     e2e: './cypress/platform/viewer.js',
     'bundle-test': './cypress/platform/bundle-test.js',
   },
diff --git a/package.json b/package.json
index 94fa72e01..9aceb6568 100644
--- a/package.json
+++ b/package.json
@@ -77,7 +77,9 @@
     "@commitlint/cli": "^17.0.0",
     "@commitlint/config-conventional": "^17.0.0",
     "@types/d3": "^7.4.0",
+    "@types/dompurify": "^2.3.3",
     "@types/jest": "^28.1.7",
+    "awesome-typescript-loader": "^5.2.1",
     "babel-jest": "^28.0.3",
     "babel-loader": "^8.2.2",
     "concurrently": "^7.0.0",
diff --git a/src/@types/config.d.ts b/src/@types/config.d.ts
new file mode 100644
index 000000000..2e947273d
--- /dev/null
+++ b/src/@types/config.d.ts
@@ -0,0 +1,342 @@
+// TODO: This was auto generated from defaultConfig. Needs to be verified.
+
+import DOMPurify from 'dompurify';
+
+export interface MermaidConfig {
+  theme?: string;
+  themeVariables?: any;
+  themeCSS?: string;
+  maxTextSize?: number;
+  darkMode?: boolean;
+  fontFamily?: string;
+  logLevel?: number;
+  securityLevel?: string;
+  startOnLoad?: boolean;
+  arrowMarkerAbsolute?: boolean;
+  secure?: string[];
+  deterministicIds?: boolean;
+  deterministicIDSeed?: string;
+  flowchart?: FlowchartDiagramConfig;
+  sequence?: SequenceDiagramConfig;
+  gantt?: GanttDiagramConfig;
+  journey?: JourneyDiagramConfig;
+  class?: ClassDiagramConfig;
+  state?: StateDiagramConfig;
+  er?: ErDiagramConfig;
+  pie?: PieDiagramConfig;
+  requirement?: RequirementDiagramConfig;
+  gitGraph?: GitGraphDiagramConfig;
+  c4?: C4DiagramConfig;
+  dompurifyConfig?: DOMPurify.Config;
+}
+
+// TODO: More configs needs to be moved in here
+export interface BaseDiagramConfig extends BaseDiagramConfig {
+  useWidth?: number;
+  useMaxWidth?: boolean;
+}
+
+export interface C4DiagramConfig extends BaseDiagramConfig {
+  diagramMarginX?: number;
+  diagramMarginY?: number;
+  c4ShapeMargin?: number;
+  c4ShapePadding?: number;
+  width?: number;
+  height?: number;
+  boxMargin?: number;
+  c4ShapeInRow?: number;
+  nextLinePaddingX?: number;
+  c4BoundaryInRow?: number;
+  personFontSize?: string | number;
+  personFontFamily?: string;
+  personFontWeight?: string | number;
+  external_personFontSize?: string | number;
+  external_personFontFamily?: string;
+  external_personFontWeight?: string | number;
+  systemFontSize?: string | number;
+  systemFontFamily?: string;
+  systemFontWeight?: string | number;
+  external_systemFontSize?: string | number;
+  external_systemFontFamily?: string;
+  external_systemFontWeight?: string | number;
+  system_dbFontSize?: string | number;
+  system_dbFontFamily?: string;
+  system_dbFontWeight?: string | number;
+  external_system_dbFontSize?: string | number;
+  external_system_dbFontFamily?: string;
+  external_system_dbFontWeight?: string | number;
+  system_queueFontSize?: string | number;
+  system_queueFontFamily?: string;
+  system_queueFontWeight?: string | number;
+  external_system_queueFontSize?: string | number;
+  external_system_queueFontFamily?: string;
+  external_system_queueFontWeight?: string | number;
+  boundaryFontSize?: string | number;
+  boundaryFontFamily?: string;
+  boundaryFontWeight?: string | number;
+  messageFontSize?: string | number;
+  messageFontFamily?: string;
+  messageFontWeight?: string | number;
+  containerFontSize?: string | number;
+  containerFontFamily?: string;
+  containerFontWeight?: string | number;
+  external_containerFontSize?: string | number;
+  external_containerFontFamily?: string;
+  external_containerFontWeight?: string | number;
+  container_dbFontSize?: string | number;
+  container_dbFontFamily?: string;
+  container_dbFontWeight?: string | number;
+  external_container_dbFontSize?: string | number;
+  external_container_dbFontFamily?: string;
+  external_container_dbFontWeight?: string | number;
+  container_queueFontSize?: string | number;
+  container_queueFontFamily?: string;
+  container_queueFontWeight?: string | number;
+  external_container_queueFontSize?: string | number;
+  external_container_queueFontFamily?: string;
+  external_container_queueFontWeight?: string | number;
+  componentFontSize?: string | number;
+  componentFontFamily?: string;
+  componentFontWeight?: string | number;
+  external_componentFontSize?: string | number;
+  external_componentFontFamily?: string;
+  external_componentFontWeight?: string | number;
+  component_dbFontSize?: string | number;
+  component_dbFontFamily?: string;
+  component_dbFontWeight?: string | number;
+  external_component_dbFontSize?: string | number;
+  external_component_dbFontFamily?: string;
+  external_component_dbFontWeight?: string | number;
+  component_queueFontSize?: string | number;
+  component_queueFontFamily?: string;
+  component_queueFontWeight?: string | number;
+  external_component_queueFontSize?: string | number;
+  external_component_queueFontFamily?: string;
+  external_component_queueFontWeight?: string | number;
+  wrap?: boolean;
+  wrapPadding?: number;
+  person_bg_color?: string;
+  person_border_color?: string;
+  external_person_bg_color?: string;
+  external_person_border_color?: string;
+  system_bg_color?: string;
+  system_border_color?: string;
+  system_db_bg_color?: string;
+  system_db_border_color?: string;
+  system_queue_bg_color?: string;
+  system_queue_border_color?: string;
+  external_system_bg_color?: string;
+  external_system_border_color?: string;
+  external_system_db_bg_color?: string;
+  external_system_db_border_color?: string;
+  external_system_queue_bg_color?: string;
+  external_system_queue_border_color?: string;
+  container_bg_color?: string;
+  container_border_color?: string;
+  container_db_bg_color?: string;
+  container_db_border_color?: string;
+  container_queue_bg_color?: string;
+  container_queue_border_color?: string;
+  external_container_bg_color?: string;
+  external_container_border_color?: string;
+  external_container_db_bg_color?: string;
+  external_container_db_border_color?: string;
+  external_container_queue_bg_color?: string;
+  external_container_queue_border_color?: string;
+  component_bg_color?: string;
+  component_border_color?: string;
+  component_db_bg_color?: string;
+  component_db_border_color?: string;
+  component_queue_bg_color?: string;
+  component_queue_border_color?: string;
+  external_component_bg_color?: string;
+  external_component_border_color?: string;
+  external_component_db_bg_color?: string;
+  external_component_db_border_color?: string;
+  external_component_queue_bg_color?: string;
+  external_component_queue_border_color?: string;
+  personFont?: FontCalculator;
+  external_personFont?: FontCalculator;
+  systemFont?: FontCalculator;
+  external_systemFont?: FontCalculator;
+  system_dbFont?: FontCalculator;
+  external_system_dbFont?: FontCalculator;
+  system_queueFont?: FontCalculator;
+  external_system_queueFont?: FontCalculator;
+  containerFont?: FontCalculator;
+  external_containerFont?: FontCalculator;
+  container_dbFont?: FontCalculator;
+  external_container_dbFont?: FontCalculator;
+  container_queueFont?: FontCalculator;
+  external_container_queueFont?: FontCalculator;
+  componentFont?: FontCalculator;
+  external_componentFont?: FontCalculator;
+  component_dbFont?: FontCalculator;
+  external_component_dbFont?: FontCalculator;
+  component_queueFont?: FontCalculator;
+  external_component_queueFont?: FontCalculator;
+  boundaryFont?: FontCalculator;
+  messageFont?: FontCalculator;
+}
+
+export interface GitGraphDiagramConfig extends BaseDiagramConfig {
+  diagramPadding?: number;
+  nodeLabel?: NodeLabel;
+  mainBranchName?: string;
+  mainBranchOrder?: number;
+  showCommitLabel?: boolean;
+  showBranches?: boolean;
+  rotateCommitLabel?: boolean;
+  arrowMarkerAbsolute?: boolean;
+}
+
+export interface NodeLabel {
+  width?: number;
+  height?: number;
+  x?: number;
+  y?: number;
+}
+
+export interface RequirementDiagramConfig extends BaseDiagramConfig {
+  rect_fill?: string;
+  text_color?: string;
+  rect_border_size?: string;
+  rect_border_color?: string;
+  rect_min_width?: number;
+  rect_min_height?: number;
+  fontSize?: number;
+  rect_padding?: number;
+  line_height?: number;
+}
+
+export interface PieDiagramConfig extends BaseDiagramConfig {}
+
+export interface ErDiagramConfig extends BaseDiagramConfig {
+  diagramPadding?: number;
+  layoutDirection?: string;
+  minEntityWidth?: number;
+  minEntityHeight?: number;
+  entityPadding?: number;
+  stroke?: string;
+  fill?: string;
+  fontSize?: number;
+}
+
+export interface StateDiagramConfig extends BaseDiagramConfig {
+  dividerMargin?: number;
+  sizeUnit?: number;
+  padding?: number;
+  textHeight?: number;
+  titleShift?: number;
+  noteMargin?: number;
+  forkWidth?: number;
+  forkHeight?: number;
+  miniPadding?: number;
+  fontSizeFactor?: number;
+  fontSize?: number;
+  labelHeight?: number;
+  edgeLengthFactor?: string;
+  compositTitleSize?: number;
+  radius?: number;
+  defaultRenderer?: string;
+}
+
+export interface ClassDiagramConfig extends BaseDiagramConfig {
+  arrowMarkerAbsolute?: boolean;
+  dividerMargin?: number;
+  padding?: number;
+  textHeight?: number;
+  defaultRenderer?: string;
+}
+
+export interface JourneyDiagramConfig extends BaseDiagramConfig {
+  diagramMarginX?: number;
+  diagramMarginY?: number;
+  leftMargin?: number;
+  width?: number;
+  height?: number;
+  boxMargin?: number;
+  boxTextMargin?: number;
+  noteMargin?: number;
+  messageMargin?: number;
+  messageAlign?: string;
+  bottomMarginAdj?: number;
+  rightAngles?: boolean;
+  taskFontSize?: string | number;
+  taskFontFamily?: string;
+  taskMargin?: number;
+  activationWidth?: number;
+  textPlacement?: string;
+  actorColours?: string[];
+  sectionFills?: string[];
+  sectionColours?: string[];
+}
+
+export interface GanttDiagramConfig extends BaseDiagramConfig {
+  titleTopMargin?: number;
+  barHeight?: number;
+  barGap?: number;
+  topPadding?: number;
+  rightPadding?: number;
+  leftPadding?: number;
+  gridLineStartPadding?: number;
+  fontSize?: number;
+  sectionFontSize?: string | number;
+  numberSectionStyles?: number;
+  axisFormat?: string;
+  topAxis?: boolean;
+}
+
+export interface SequenceDiagramConfig extends BaseDiagramConfig {
+  hideUnusedParticipants?: boolean;
+  activationWidth?: number;
+  diagramMarginX?: number;
+  diagramMarginY?: number;
+  actorMargin?: number;
+  width?: number;
+  height?: number;
+  boxMargin?: number;
+  boxTextMargin?: number;
+  noteMargin?: number;
+  messageMargin?: number;
+  messageAlign?: string;
+  mirrorActors?: boolean;
+  forceMenus?: boolean;
+  bottomMarginAdj?: number;
+  rightAngles?: boolean;
+  showSequenceNumbers?: boolean;
+  actorFontSize?: string | number;
+  actorFontFamily?: string;
+  actorFontWeight?: string | number;
+  noteFontSize?: string | number;
+  noteFontFamily?: string;
+  noteFontWeight?: string | number;
+  noteAlign?: string;
+  messageFontSize?: string | number;
+  messageFontFamily?: string;
+  messageFontWeight?: string | number;
+  wrap?: boolean;
+  wrapPadding?: number;
+  labelBoxWidth?: number;
+  labelBoxHeight?: number;
+  messageFont?: FontCalculator;
+  noteFont?: FontCalculator;
+  actorFont?: FontCalculator;
+}
+
+export interface FlowchartDiagramConfig extends BaseDiagramConfig {
+  diagramPadding?: number;
+  htmlLabels?: boolean;
+  nodeSpacing?: number;
+  rankSpacing?: number;
+  curve?: string;
+  padding?: number;
+  defaultRenderer?: string;
+}
+
+export interface FontConfig {
+  fontSize?: string | number;
+  fontFamily?: string;
+  fontWeight?: string | number;
+}
+export type FontCalculator = () => Partial<FontConfig>;
diff --git a/src/@types/types.d.ts b/src/@types/types.d.ts
new file mode 100644
index 000000000..24318d1d3
--- /dev/null
+++ b/src/@types/types.d.ts
@@ -0,0 +1 @@
+type DiagramDetector = (text: string) => boolean;
diff --git a/src/commonDb.js b/src/commonDb.ts
similarity index 57%
rename from src/commonDb.js
rename to src/commonDb.ts
index 90e99faca..42ffde004 100644
--- a/src/commonDb.js
+++ b/src/commonDb.ts
@@ -3,35 +3,35 @@ import { getConfig } from './config';
 let title = '';
 let diagramTitle = '';
 let description = '';
-const sanitizeText = (txt) => _sanitizeText(txt, getConfig());
+const sanitizeText = (txt: string): string => _sanitizeText(txt, getConfig());
 
-export const clear = function () {
+export const clear = function (): void {
   title = '';
   description = '';
   diagramTitle = '';
 };
 
-export const setAccTitle = function (txt) {
+export const setAccTitle = function (txt: string): void {
   title = sanitizeText(txt).replace(/^\s+/g, '');
 };
 
-export const getAccTitle = function () {
+export const getAccTitle = function (): string {
   return title || diagramTitle;
 };
 
-export const setAccDescription = function (txt) {
+export const setAccDescription = function (txt: string): void {
   description = sanitizeText(txt).replace(/\n\s+/g, '\n');
 };
 
-export const getAccDescription = function () {
+export const getAccDescription = function (): string {
   return description;
 };
 
-export const setDiagramTitle = function (txt) {
+export const setDiagramTitle = function (txt: string): void {
   diagramTitle = sanitizeText(txt);
 };
 
-export const getDiagramTitle = function () {
+export const getDiagramTitle = function (): string {
   return diagramTitle;
 };
 
diff --git a/src/defaultConfig.js b/src/defaultConfig.ts
similarity index 98%
rename from src/defaultConfig.js
rename to src/defaultConfig.ts
index acf85055f..8328510b7 100644
--- a/src/defaultConfig.js
+++ b/src/defaultConfig.ts
@@ -1,4 +1,5 @@
 import theme from './themes';
+import { MermaidConfig } from 'types/config';
 /**
  * **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click
  * here](8.6.0_docs.md)].**
@@ -21,7 +22,7 @@ import theme from './themes';
  *
  * @name Configuration
  */
-const config = {
+const config: Partial<MermaidConfig> = {
   /**
    * Theme , the CSS style sheet
    *
@@ -49,12 +50,13 @@ const config = {
   fontFamily: '"trebuchet ms", verdana, arial, sans-serif;',
 
   /**
-   * | Parameter | Description                                           | Type             | Required | Values        |
-   * | --------- | ----------------------------------------------------- | ---------------- | -------- | ------------- |
-   * | logLevel  | This option decides the amount of logging to be used. | string \| number | Required | 1, 2, 3, 4, 5 |
+   * | Parameter | Description                                           | Type             | Required | Values                                        |
+   * | --------- | ----------------------------------------------------- | ---------------- | -------- | --------------------------------------------- |
+   * | logLevel  | This option decides the amount of logging to be used. | string \| number | Required | 'trace','debug','info','warn','error','fatal' |
    *
    * **Notes:**
    *
+   * - Trace: 0
    * - Debug: 1
    * - Info: 2
    * - Warn: 3
@@ -1820,11 +1822,12 @@ const config = {
   },
 };
 
-config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-config.gitGraph.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
+console.log(JSON.stringify(config));
+if (config.class) config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
+if (config.gitGraph) config.gitGraph.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
 
-const keyify = (obj, prefix = '') =>
-  Object.keys(obj).reduce((res, el) => {
+const keyify = (obj: any, prefix = ''): string[] =>
+  Object.keys(obj).reduce((res: string[], el): string[] => {
     if (Array.isArray(obj[el])) {
       return res;
     } else if (typeof obj[el] === 'object' && obj[el] !== null) {
@@ -1833,5 +1836,5 @@ const keyify = (obj, prefix = '') =>
     return [...res, prefix + el];
   }, []);
 
-export const configKeys = keyify(config, '');
+export const configKeys: string[] = keyify(config, '');
 export default config;
diff --git a/src/diagram-api/detectType.ts b/src/diagram-api/detectType.ts
index 417d3ace4..3a3250aa0 100644
--- a/src/diagram-api/detectType.ts
+++ b/src/diagram-api/detectType.ts
@@ -1,3 +1,5 @@
+import type { MermaidConfig } from 'types/config';
+
 const directive =
   /[%]{2}[{]\s*(?:(?:(\w+)\s*:|(\w+))\s*(?:(?:(\w+))|((?:(?![}][%]{2}).|\r?\n)*))?\s*)(?:[}][%]{2})?/gi;
 const anyComment = /\s*%%.*\n/gm;
@@ -41,7 +43,7 @@ const diagramMatchers: Record<string, RegExp> = {
  * }} [cnf]
  * @returns {string} A graph definition key
  */
-export const detectType = function (text: string, cnf: ConfigType): string {
+export const detectType = function (text: string, cnf: MermaidConfig): string {
   text = text.replace(directive, '').replace(anyComment, '\n');
   for (const [diagram, matcher] of Object.entries(diagramMatchers)) {
     if (text.match(matcher)) {
diff --git a/src/diagrams/common/common.js b/src/diagrams/common/common.ts
similarity index 64%
rename from src/diagrams/common/common.js
rename to src/diagrams/common/common.ts
index b4a341169..2d1d06bbc 100644
--- a/src/diagrams/common/common.js
+++ b/src/diagrams/common/common.ts
@@ -1,19 +1,19 @@
 import DOMPurify from 'dompurify';
+import { MermaidConfig } from 'types/config';
 
 /**
- * Gets the number of lines in a string
+ * Gets the rows of lines in a string
  *
  * @param {string | undefined} s The string to check the lines for
- * @returns {number} The number of lines in that string
+ * @returns {string[]} The rows in that string
  */
-export const getRows = (s) => {
-  if (!s) return 1;
-  let str = breakToPlaceholder(s);
-  str = str.replace(/\\n/g, '#br#');
+export const getRows = (s?: string): string[] => {
+  if (!s) return [''];
+  const str = breakToPlaceholder(s).replace(/\\n/g, '#br#');
   return str.split('#br#');
 };
 
-export const removeEscapes = (text) => {
+export const removeEscapes = (text: string): string => {
   let newStr = text.replace(/\\u[\dA-F]{4}/gi, function (match) {
     return String.fromCharCode(parseInt(match.replace(/\\u/g, ''), 16));
   });
@@ -35,7 +35,7 @@ export const removeEscapes = (text) => {
  * @param {string} txt The text to sanitize
  * @returns {string} The safer text
  */
-export const removeScript = (txt) => {
+export const removeScript = (txt: string): string => {
   var rs = '';
   var idx = 0;
 
@@ -65,49 +65,39 @@ export const removeScript = (txt) => {
   return decodedText;
 };
 
-const sanitizeMore = (text, config) => {
-  let txt = text;
-  let htmlLabels = true;
-  if (
-    config.flowchart &&
-    (config.flowchart.htmlLabels === false || config.flowchart.htmlLabels === 'false')
-  ) {
-    htmlLabels = false;
-  }
-
-  if (htmlLabels) {
+const sanitizeMore = (text: string, config: MermaidConfig) => {
+  // TODO Q: Should this check really be here? Feels like we should be sanitizing it regardless.
+  if (config.flowchart?.htmlLabels !== false) {
     const level = config.securityLevel;
-
     if (level === 'antiscript' || level === 'strict') {
-      txt = removeScript(txt);
+      text = removeScript(text);
     } else if (level !== 'loose') {
-      // eslint-disable-line
-      txt = breakToPlaceholder(txt);
-      txt = txt.replace(/</g, '&lt;').replace(/>/g, '&gt;');
-      txt = txt.replace(/=/g, '&equals;');
-      txt = placeholderToBreak(txt);
+      text = breakToPlaceholder(text);
+      text = text.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+      text = text.replace(/=/g, '&equals;');
+      text = placeholderToBreak(text);
     }
   }
-
-  return txt;
+  return text;
 };
 
-export const sanitizeText = (text, config) => {
+export const sanitizeText = (text: string, config: MermaidConfig): string => {
   if (!text) return text;
-  let txt = '';
-  if (config['dompurifyConfig']) {
-    txt = DOMPurify.sanitize(sanitizeMore(text, config), config['dompurifyConfig']);
+  if (config.dompurifyConfig) {
+    text = DOMPurify.sanitize(sanitizeMore(text, config), config.dompurifyConfig).toString();
   } else {
-    txt = DOMPurify.sanitize(sanitizeMore(text, config));
+    text = DOMPurify.sanitize(sanitizeMore(text, config));
   }
-  return txt;
+  return text;
 };
 
-export const sanitizeTextOrArray = (a, config) => {
+export const sanitizeTextOrArray = (
+  a: string | string[] | string[][],
+  config: MermaidConfig
+): string | string[] => {
   if (typeof a === 'string') return sanitizeText(a, config);
-
-  const f = (x) => sanitizeText(x, config);
-  return a.flat().map(f);
+  // TODO Q: Do we need flat?
+  return a.flat().map((x: string) => sanitizeText(x, config));
 };
 
 export const lineBreakRegex = /<br\s*\/?>/gi;
@@ -118,7 +108,7 @@ export const lineBreakRegex = /<br\s*\/?>/gi;
  * @param {string} text The text to test
  * @returns {boolean} Whether or not the text has breaks
  */
-export const hasBreaks = (text) => {
+export const hasBreaks = (text: string): boolean => {
   return lineBreakRegex.test(text);
 };
 
@@ -128,7 +118,7 @@ export const hasBreaks = (text) => {
  * @param {string} text Text to split
  * @returns {string[]} List of lines as strings
  */
-export const splitBreaks = (text) => {
+export const splitBreaks = (text: string): string[] => {
   return text.split(lineBreakRegex);
 };
 
@@ -138,7 +128,7 @@ export const splitBreaks = (text) => {
  * @param {string} s HTML with placeholders
  * @returns {string} HTML with breaks instead of placeholders
  */
-const placeholderToBreak = (s) => {
+const placeholderToBreak = (s: string): string => {
   return s.replace(/#br#/g, '<br/>');
 };
 
@@ -148,7 +138,7 @@ const placeholderToBreak = (s) => {
  * @param {string} s HTML string
  * @returns {string} String with placeholders
  */
-const breakToPlaceholder = (s) => {
+const breakToPlaceholder = (s: string): string => {
   return s.replace(lineBreakRegex, '#br#');
 };
 
@@ -158,8 +148,9 @@ const breakToPlaceholder = (s) => {
  * @param {boolean} useAbsolute Whether to return the absolute URL or not
  * @returns {string} The current URL
  */
-const getUrl = (useAbsolute) => {
+const getUrl = (useAbsolute: boolean): string => {
   let url = '';
+  // TODO Q: If useAbsolute if false, empty string is returned. Bug?
   if (useAbsolute) {
     url =
       window.location.protocol +
@@ -180,7 +171,9 @@ const getUrl = (useAbsolute) => {
  * @param {string | boolean} val String or boolean to convert
  * @returns {boolean} The result from the input
  */
-export const evaluate = (val) => (val === 'false' || val === false ? false : true);
+// TODO Q: Should we make this check more specific? 'False', '0', 'null' all will evaluate to true.
+export const evaluate = (val: string | boolean): boolean =>
+  val === 'false' || val === false ? false : true;
 
 export default {
   getRows,
diff --git a/src/mermaid.js b/src/mermaid.ts
similarity index 91%
rename from src/mermaid.js
rename to src/mermaid.ts
index 3d2092253..13b693b8c 100644
--- a/src/mermaid.js
+++ b/src/mermaid.ts
@@ -1,3 +1,5 @@
+// TODO: Remove
+// @ts-nocheck
 /**
  * Web page integration module for the mermaid framework. It uses the mermaidAPI for mermaid
  * functionality and to render the diagrams to svg code.
@@ -29,9 +31,9 @@ import utils from './utils';
  *
  * Renders the mermaid diagrams
  */
-const init = function () {
+const init = function (config: any, ...nodes: any[]) {
   try {
-    initThrowsErrors(...arguments);
+    initThrowsErrors(config, nodes);
   } catch (e) {
     log.warn('Syntax Error rendering');
     log.warn(e.str);
@@ -41,25 +43,17 @@ const init = function () {
   }
 };
 
-const initThrowsErrors = function () {
+const initThrowsErrors = function (config: any, nodes: any[]) {
   const conf = mermaidAPI.getConfig();
   // console.log('Starting rendering diagrams (init) - mermaid.init', conf);
-  let nodes;
-  if (arguments.length >= 2) {
-    /*! sequence config was passed as #1 */
-    if (typeof arguments[0] !== 'undefined') {
-      mermaid.sequenceConfig = arguments[0];
-    }
-
-    nodes = arguments[1];
-  } else {
-    nodes = arguments[0];
+  if (config) {
+    mermaid.sequenceConfig = config;
   }
 
   // if last argument is a function this is the callback function
-  let callback;
-  if (typeof arguments[arguments.length - 1] === 'function') {
-    callback = arguments[arguments.length - 1];
+  let callback: (id: string) => void;
+  if (typeof nodes[nodes.length - 1] === 'function') {
+    callback = nodes[nodes.length - 1];
     log.debug('Callback function found');
   } else {
     if (typeof conf.mermaid !== 'undefined') {
@@ -140,7 +134,7 @@ const initThrowsErrors = function () {
   }
 };
 
-const initialize = function (config) {
+const initialize = function (config: any) {
   // mermaidAPI.reset();
   if (typeof config.mermaid !== 'undefined') {
     if (typeof config.mermaid.startOnLoad !== 'undefined') {
diff --git a/src/types.d.ts b/src/types.d.ts
deleted file mode 100644
index 9570962c9..000000000
--- a/src/types.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-interface ConfigType {
-  class?: { defaultRenderer: string };
-  state?: { defaultRenderer: string };
-  flowchart?: { defaultRenderer: string };
-}
-
-type DiagramDetector = (text: string) => boolean;
diff --git a/src/utils.js b/src/utils.js
index e7fc5dcb0..24fb965b5 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -814,6 +814,7 @@ export const setupGraphViewbox = function (graph, svgElem, padding, useMaxWidth)
 export const initIdGenerator = class iterator {
   constructor(deterministic, seed) {
     this.deterministic = deterministic;
+    // TODO: Seed is only used for length?
     this.seed = seed;
 
     this.count = seed ? seed.length : 0;
diff --git a/tsconfig.json b/tsconfig.json
index 7fdd4d736..9db9a8874 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,7 +3,7 @@
     /* Visit https://aka.ms/tsconfig.json to read more about this file */
 
     /* Projects */
-    // "incremental": true,                              /* Enable incremental compilation */
+    "incremental": true /* Enable incremental compilation */,
     // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
     // "tsBuildInfoFile": "./",                          /* Specify the folder for .tsbuildinfo incremental compilation files. */
     // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects */
@@ -11,8 +11,10 @@
     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
 
     /* Language and Environment */
-    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
-    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+    "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+    "lib": [
+      "ES2021"
+    ] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
     // "jsx": "preserve",                                /* Specify what JSX code is generated. */
     // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
     // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
@@ -24,20 +26,25 @@
     // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
 
     /* Modules */
-    "module": "ES6",                                /* Specify what module code is generated. */
+    "module": "ES6" /* Specify what module code is generated. */,
     // "rootDir": "./",                                  /* Specify the root folder within your source files. */
-    "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
-    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
-    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+    "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
+    "baseUrl": "./src" /* Specify the base directory to resolve non-relative module names. */,
+    "paths": {
+      "types/*": ["@types/*"]
+    } /* Specify a set of entries that re-map imports to additional lookup locations. */,
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
-    // "typeRoots": [],                                  /* Specify multiple folders that act like `./node_modules/@types`. */
+    "typeRoots": [
+      "./node_modules/@types",
+      "./src/@types"
+    ] /* Specify multiple folders that act like `./node_modules/@types`. */,
     // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
     // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
     // "resolveJsonModule": true,                        /* Enable importing .json files */
     // "noResolve": true,                                /* Disallow `import`s, `require`s or `<reference>`s from expanding the number of files TypeScript should add to a project. */
 
     /* JavaScript Support */
-    "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */
+    "allowJs": true /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */,
     // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
     // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */
 
@@ -47,7 +54,7 @@
     // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
     // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
     // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
-    "outDir": "./dist",                                   /* Specify an output folder for all emitted files. */
+    "outDir": "./dist" /* Specify an output folder for all emitted files. */,
     // "removeComments": true,                           /* Disable emitting comments. */
     // "noEmit": true,                                   /* Disable emitting files from a compilation. */
     // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
@@ -69,12 +76,12 @@
     /* Interop Constraints */
     // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
     // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
-    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */
+    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */,
     // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
-    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
+    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
 
     /* Type Checking */
-    "strict": true,                                      /* Enable all strict type-checking options. */
+    "strict": true /* Enable all strict type-checking options. */,
     // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied `any` type.. */
     // "strictNullChecks": true,                         /* When type checking, take into account `null` and `undefined`. */
     // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
@@ -96,6 +103,6 @@
 
     /* Completeness */
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
-    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 9848cc6bb..7e72ef394 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2437,6 +2437,13 @@
   dependencies:
     "@types/ms" "*"
 
+"@types/dompurify@^2.3.3":
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/@types/dompurify/-/dompurify-2.3.3.tgz#c24c92f698f77ed9cc9d9fa7888f90cf2bfaa23f"
+  integrity sha512-nnVQSgRVuZ/843oAfhA25eRSNzUFcBPk/LOiw5gm8mD9/X7CNcbRkQu/OsjCewO8+VIYfPxUnXvPEVGenw14+w==
+  dependencies:
+    "@types/trusted-types" "*"
+
 "@types/eslint-scope@^3.7.3":
   version "3.7.3"
   resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.3.tgz#125b88504b61e3c8bc6f870882003253005c3224"
@@ -2675,6 +2682,11 @@
   resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.2.tgz#6286b4c7228d58ab7866d19716f3696e03a09397"
   integrity sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw==
 
+"@types/trusted-types@*":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.2.tgz#fc25ad9943bcac11cceb8168db4f275e0e72e756"
+  integrity sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==
+
 "@types/unist@*", "@types/unist@^2.0.0", "@types/unist@^2.0.2":
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d"
@@ -3314,6 +3326,20 @@ atob@^2.1.2:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
+awesome-typescript-loader@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/awesome-typescript-loader/-/awesome-typescript-loader-5.2.1.tgz#a41daf7847515f4925cdbaa3075d61f289e913fc"
+  integrity sha512-slv66OAJB8orL+UUaTI3pKlLorwIvS4ARZzYR9iJJyGsEgOqueMfOMdKySWzZ73vIkEe3fcwFgsKMg4d8zyb1g==
+  dependencies:
+    chalk "^2.4.1"
+    enhanced-resolve "^4.0.0"
+    loader-utils "^1.1.0"
+    lodash "^4.17.5"
+    micromatch "^3.1.9"
+    mkdirp "^0.5.1"
+    source-map-support "^0.5.3"
+    webpack-log "^1.2.0"
+
 aws-sign2@~0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@@ -3777,7 +3803,7 @@ chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@^2.0.0, chalk@^2.3.0, chalk@^2.4.1, chalk@^2.4.2:
+chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -4796,6 +4822,14 @@ d3@^5.14, d3@^7.0.0:
     d3-transition "3"
     d3-zoom "3"
 
+d@1, d@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/d/-/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a"
+  integrity sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==
+  dependencies:
+    es5-ext "^0.10.50"
+    type "^1.0.1"
+
 dagre-d3@^0.6.4:
   version "0.6.4"
   resolved "https://registry.yarnpkg.com/dagre-d3/-/dagre-d3-0.6.4.tgz#0728d5ce7f177ca2337df141ceb60fbe6eeb7b29"
@@ -5328,6 +5362,15 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0:
   dependencies:
     once "^1.4.0"
 
+enhanced-resolve@^4.0.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz#2f3cfd84dbe3b487f18f2db2ef1e064a571ca5ec"
+  integrity sha512-Nv9m36S/vxpsI+Hc4/ZGRs0n9mXqSWGGq49zxb/cJfPAQMbUtttJAlNPS4AQzaBdw/pKskw5bMbekT/Y7W/Wlg==
+  dependencies:
+    graceful-fs "^4.1.2"
+    memory-fs "^0.5.0"
+    tapable "^1.0.0"
+
 enhanced-resolve@^5.0.0, enhanced-resolve@^5.10.0:
   version "5.10.0"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz#0dc579c3bb2a1032e357ac45b8f3a6f3ad4fb1e6"
@@ -5353,6 +5396,13 @@ envinfo@^7.7.3:
   resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.8.1.tgz#06377e3e5f4d379fea7ac592d5ad8927e0c4d475"
   integrity sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==
 
+errno@^0.1.3:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
+  integrity sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==
+  dependencies:
+    prr "~1.0.1"
+
 error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
@@ -5372,6 +5422,32 @@ es-module-lexer@^0.9.0:
   resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-0.9.3.tgz#6f13db00cc38417137daf74366f535c8eb438f19"
   integrity sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==
 
+es5-ext@^0.10.35, es5-ext@^0.10.50:
+  version "0.10.62"
+  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.62.tgz#5e6adc19a6da524bf3d1e02bbc8960e5eb49a9a5"
+  integrity sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==
+  dependencies:
+    es6-iterator "^2.0.3"
+    es6-symbol "^3.1.3"
+    next-tick "^1.1.0"
+
+es6-iterator@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7"
+  integrity sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==
+  dependencies:
+    d "1"
+    es5-ext "^0.10.35"
+    es6-symbol "^3.1.1"
+
+es6-symbol@^3.1.1, es6-symbol@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.3.tgz#bad5d3c1bcdac28269f4cb331e431c78ac705d18"
+  integrity sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==
+  dependencies:
+    d "^1.0.1"
+    ext "^1.1.2"
+
 escalade@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
@@ -5797,6 +5873,13 @@ express@^4.17.3:
     utils-merge "1.0.1"
     vary "~1.1.2"
 
+ext@^1.1.2:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/ext/-/ext-1.6.0.tgz#3871d50641e874cc172e2b53f919842d19db4c52"
+  integrity sha512-sdBImtzkq2HpkdRLtlLWDa6w4DX22ijZLKx8BMPUuKe1c5lbN6xwQDQCxSfxBQnHZ13ls/FH0MQZx/q/gr6FQg==
+  dependencies:
+    type "^2.5.0"
+
 extend-shallow@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
@@ -7891,6 +7974,13 @@ json5@^0.5.0:
   resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
   integrity sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=
 
+json5@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
+  integrity sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==
+  dependencies:
+    minimist "^1.2.0"
+
 json5@^2.1.2, json5@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
@@ -8147,6 +8237,15 @@ loader-utils@^0.2.15:
     json5 "^0.5.0"
     object-assign "^4.0.1"
 
+loader-utils@^1.1.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
+  integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^1.0.1"
+
 loader-utils@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.2.tgz#d6e3b4fb81870721ae4e0868ab11dd638368c129"
@@ -8211,7 +8310,7 @@ lodash.once@^4.1.1:
   resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
   integrity sha1-DdOXEhPHxW34gJd9UEyI+0cal6w=
 
-lodash@^4.17.10, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21, lodash@^4.17.4:
+lodash@^4.17.10, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.17.5:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -8221,6 +8320,13 @@ log-driver@^1.2.7:
   resolved "https://registry.yarnpkg.com/log-driver/-/log-driver-1.2.7.tgz#63b95021f0702fedfa2c9bb0a24e7797d71871d8"
   integrity sha512-U7KCmLdqsGHBLeWqYlFA0V0Sl6P08EE1ZrmA9cxjUE0WVqT9qnyVDPz1kzpFEP0jdJuFnasWIfSd7fsaNXkpbg==
 
+log-symbols@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
+  integrity sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==
+  dependencies:
+    chalk "^2.0.1"
+
 log-symbols@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-4.1.0.tgz#3fbdbb95b4683ac9fc785111e792e558d4abd503"
@@ -8249,6 +8355,14 @@ loglevel@^1.6.0:
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.8.0.tgz#e7ec73a57e1e7b419cb6c6ac06bf050b67356114"
   integrity sha512-G6A/nJLRgWOuuwdNuA6koovfEV1YpqqAG4pRUlFaz3jj2QNZ8M4vBqnVA+HBTmU/AMNUtlOsMmSpF6NyOjztbA==
 
+loglevelnext@^1.0.1:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/loglevelnext/-/loglevelnext-1.0.5.tgz#36fc4f5996d6640f539ff203ba819641680d75a2"
+  integrity sha512-V/73qkPuJmx4BcBF19xPBr+0ZRVBhc4POxvZTZdMeXpJ4NItXSJ/MSwuFT0kQJlCbXvdlZoQQ/418bS1y9Jh6A==
+  dependencies:
+    es6-symbol "^3.1.1"
+    object.assign "^4.1.0"
+
 longest-streak@^2.0.1:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-2.0.4.tgz#b8599957da5b5dab64dee3fe316fa774597d90e4"
@@ -8451,6 +8565,14 @@ memfs@^3.4.1:
   dependencies:
     fs-monkey "1.0.3"
 
+memory-fs@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.5.0.tgz#324c01288b88652966d161db77838720845a8e3c"
+  integrity sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==
+  dependencies:
+    errno "^0.1.3"
+    readable-stream "^2.0.1"
+
 meow@^8.0.0:
   version "8.1.2"
   resolved "https://registry.yarnpkg.com/meow/-/meow-8.1.2.tgz#bcbe45bda0ee1729d350c03cffc8395a36c4e897"
@@ -8691,7 +8813,7 @@ micromark@~2.11.0:
     debug "^4.0.0"
     parse-entities "^2.0.0"
 
-micromatch@^3.1.5:
+micromatch@^3.1.5, micromatch@^3.1.9:
   version "3.1.10"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
   integrity sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==
@@ -8786,7 +8908,7 @@ minimist-options@4.1.0:
     is-plain-obj "^1.1.0"
     kind-of "^6.0.3"
 
-minimist@^1.1.0, minimist@^1.1.1, minimist@^1.2.5, minimist@^1.2.6:
+minimist@^1.1.0, minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5, minimist@^1.2.6:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
   integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
@@ -8908,6 +9030,11 @@ netmask@^2.0.1:
   resolved "https://registry.yarnpkg.com/netmask/-/netmask-2.0.2.tgz#8b01a07644065d536383835823bc52004ebac5e7"
   integrity sha512-dBpDMdxv9Irdq66304OLfEmQ9tbNRFnFTuZiLo+bD+r332bBmMJ8GBLXklIXXgxd3+v9+KUnZaUR5PJMa75Gsg==
 
+next-tick@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.1.0.tgz#1836ee30ad56d67ef281b22bd199f709449b35eb"
+  integrity sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==
+
 nice-try@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
@@ -9671,6 +9798,11 @@ proxy-from-env@^1.0.0:
   resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
   integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
 
+prr@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
+  integrity sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==
+
 ps-tree@1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/ps-tree/-/ps-tree-1.2.0.tgz#5e7425b89508736cdd4f2224d028f7bb3f722ebd"
@@ -10650,7 +10782,7 @@ source-map-support@0.5.13:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
-source-map-support@^0.5.16, source-map-support@~0.5.20:
+source-map-support@^0.5.16, source-map-support@^0.5.3, source-map-support@~0.5.20:
   version "0.5.21"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
   integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
@@ -11089,6 +11221,11 @@ symbol-tree@^3.2.4:
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
+tapable@^1.0.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
+  integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
+
 tapable@^2.1.1, tapable@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
@@ -11462,6 +11599,16 @@ type-is@~1.6.18:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
+type@^1.0.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/type/-/type-1.2.0.tgz#848dd7698dafa3e54a6c479e759c4bc3f18847a0"
+  integrity sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==
+
+type@^2.5.0:
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/type/-/type-2.7.2.tgz#2376a15a3a28b1efa0f5350dcf72d24df6ef98d0"
+  integrity sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw==
+
 typedarray@^0.0.6, typedarray@~0.0.5:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
@@ -11693,7 +11840,7 @@ uuid@8.3.2, uuid@^8.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
-uuid@^3.3.2:
+uuid@^3.1.0, uuid@^3.3.2:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
@@ -12047,6 +12194,16 @@ webpack-dev-server@^4.3.0:
     webpack-dev-middleware "^5.3.1"
     ws "^8.4.2"
 
+webpack-log@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/webpack-log/-/webpack-log-1.2.0.tgz#a4b34cda6b22b518dbb0ab32e567962d5c72a43d"
+  integrity sha512-U9AnICnu50HXtiqiDxuli5gLB5PGBo7VvcHx36jRZHwK4vzOYLbImqT4lwWwoMHdQWwEKw736fCHEekokTEKHA==
+  dependencies:
+    chalk "^2.1.0"
+    log-symbols "^2.1.0"
+    loglevelnext "^1.0.1"
+    uuid "^3.1.0"
+
 webpack-merge@^5.7.3, webpack-merge@^5.8.0:
   version "5.8.0"
   resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-5.8.0.tgz#2b39dbf22af87776ad744c390223731d30a68f61"

From 4710f67bafb362ddd3896a90fd1812bdcf2c0e63 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sun, 21 Aug 2022 11:26:45 +0530
Subject: [PATCH 11/60] fix: sanitization bug

---
 src/diagrams/common/common.spec.js | 58 ++++--------------------------
 src/diagrams/common/common.ts      | 45 +----------------------
 2 files changed, 7 insertions(+), 96 deletions(-)

diff --git a/src/diagrams/common/common.spec.js b/src/diagrams/common/common.spec.js
index ac7309829..66ac7b2ea 100644
--- a/src/diagrams/common/common.spec.js
+++ b/src/diagrams/common/common.spec.js
@@ -1,4 +1,4 @@
-import { sanitizeText, removeScript, removeEscapes } from './common';
+import { sanitizeText, removeScript } from './common';
 
 describe('when securityLevel is antiscript, all script must be removed', function () {
   /**
@@ -6,7 +6,7 @@ describe('when securityLevel is antiscript, all script must be removed', functio
    * @param {string} result The expected sanitized text
    */
   function compareRemoveScript(original, result) {
-    expect(removeScript(original)).toEqual(result);
+    expect(removeScript(original).trim()).toEqual(result);
   }
 
   it('should remove all script block, script inline.', function () {
@@ -29,70 +29,24 @@ describe('when securityLevel is antiscript, all script must be removed', functio
     compareRemoveScript(
       `This is a <a href="javascript:runHijackingScript();">clean link</a> + <a href="javascript:runHijackingScript();">clean link</a>
   and <a href="javascript&colon;bipassedMining();">me too</a>`,
-      `This is a <a href="#runHijackingScript();">clean link</a> + <a href="#runHijackingScript();">clean link</a>
-  and <a href="#;bipassedMining();">me too</a>`
+      `This is a <a>clean link</a> + <a>clean link</a>
+  and <a>me too</a>`
     );
   });
 
   it('should detect malicious images', function () {
-    compareRemoveScript(`<img onerror="alert('hello');">`, `<img onerror:"alert('hello');">`);
+    compareRemoveScript(`<img onerror="alert('hello');">`, `<img>`);
   });
 
   it('should detect iframes', function () {
     compareRemoveScript(
       `<iframe src="http://abc.com/script1.js"></iframe>
     <iframe src="http://example.com/iframeexample"></iframe>`,
-      ` src="http://abc.com/script1.js"></iframe>
-     src="http://example.com/iframeexample"></iframe>`
+      ''
     );
   });
 });
 
-describe('remove escape code in text', function () {
-  it('should remove a unicode colon', function () {
-    const labelString = '\\u003A';
-
-    const result = removeEscapes(labelString);
-    expect(result).toEqual(':');
-  });
-  it('should remove a hex colon', function () {
-    const labelString = '\\x3A';
-
-    const result = removeEscapes(labelString);
-    expect(result).toEqual(':');
-  });
-  it('should remove a oct colon', function () {
-    const labelString = '\\72';
-
-    const result = removeEscapes(labelString);
-    expect(result).toEqual(':');
-  });
-  it('should remove a oct colon 3 numbers', function () {
-    const labelString = '\\072';
-
-    const result = removeEscapes(labelString);
-    expect(result).toEqual(':');
-  });
-  it('should remove multiple colons 3 numbers', function () {
-    const labelString = '\\072\\072\\72';
-
-    const result = removeEscapes(labelString);
-    expect(result).toEqual(':::');
-  });
-  it('should handle greater and smaller then', function () {
-    const labelString = '\\74\\076';
-
-    const result = removeEscapes(labelString);
-    expect(result).toEqual('<>');
-  });
-  it('should handle letters', function () {
-    const labelString = '\\u0073\\143ri\\x70\\u0074\\x3A';
-
-    const result = removeEscapes(labelString);
-    expect(result).toEqual('script:');
-  });
-});
-
 describe('Sanitize text', function () {
   it('should remove script tag', function () {
     const maliciousStr = 'javajavascript:script:alert(1)';
diff --git a/src/diagrams/common/common.ts b/src/diagrams/common/common.ts
index 2d1d06bbc..a1b5f027f 100644
--- a/src/diagrams/common/common.ts
+++ b/src/diagrams/common/common.ts
@@ -13,22 +13,6 @@ export const getRows = (s?: string): string[] => {
   return str.split('#br#');
 };
 
-export const removeEscapes = (text: string): string => {
-  let newStr = text.replace(/\\u[\dA-F]{4}/gi, function (match) {
-    return String.fromCharCode(parseInt(match.replace(/\\u/g, ''), 16));
-  });
-
-  newStr = newStr.replace(/\\x([0-9a-f]{2})/gi, (_, c) => String.fromCharCode(parseInt(c, 16)));
-  newStr = newStr.replace(/\\[\d\d\d]{3}/gi, function (match) {
-    return String.fromCharCode(parseInt(match.replace(/\\/g, ''), 8));
-  });
-  newStr = newStr.replace(/\\[\d\d\d]{2}/gi, function (match) {
-    return String.fromCharCode(parseInt(match.replace(/\\/g, ''), 8));
-  });
-
-  return newStr;
-};
-
 /**
  * Removes script tags from a text
  *
@@ -36,33 +20,7 @@ export const removeEscapes = (text: string): string => {
  * @returns {string} The safer text
  */
 export const removeScript = (txt: string): string => {
-  var rs = '';
-  var idx = 0;
-
-  while (idx >= 0) {
-    idx = txt.indexOf('<script');
-    if (idx >= 0) {
-      rs += txt.substr(0, idx);
-      txt = txt.substr(idx + 1);
-
-      idx = txt.indexOf('</script>');
-      if (idx >= 0) {
-        idx += 9;
-        txt = txt.substr(idx);
-      }
-    } else {
-      rs += txt;
-      idx = -1;
-      break;
-    }
-  }
-  let decodedText = removeEscapes(rs);
-  decodedText = decodedText.replaceAll(/script>/gi, '#');
-  decodedText = decodedText.replaceAll(/javascript:/gi, '#');
-  decodedText = decodedText.replaceAll(/javascript&colon/gi, '#');
-  decodedText = decodedText.replaceAll(/onerror=/gi, 'onerror:');
-  decodedText = decodedText.replaceAll(/<iframe/gi, '');
-  return decodedText;
+  return DOMPurify.sanitize(txt);
 };
 
 const sanitizeMore = (text: string, config: MermaidConfig) => {
@@ -185,5 +143,4 @@ export default {
   removeScript,
   getUrl,
   evaluate,
-  removeEscapes,
 };

From cd4b1ea245cbc83d68b21856cdee24368351b487 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sun, 21 Aug 2022 11:45:20 +0530
Subject: [PATCH 12/60] fix: codeScanning vuln

---
 src/diagrams/common/common.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/diagrams/common/common.ts b/src/diagrams/common/common.ts
index a1b5f027f..be8bf0d61 100644
--- a/src/diagrams/common/common.ts
+++ b/src/diagrams/common/common.ts
@@ -116,8 +116,9 @@ const getUrl = (useAbsolute: boolean): string => {
       window.location.host +
       window.location.pathname +
       window.location.search;
-    url = url.replace(/\(/g, '\\(');
-    url = url.replace(/\)/g, '\\)');
+    // TODO Q: Why is this necessary?
+    url = url.replaceAll(/\(/g, '\\(');
+    url = url.replaceAll(/\)/g, '\\)');
   }
 
   return url;

From c68ec54fdd980a6b4d1c1b58aec991badba16676 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sun, 21 Aug 2022 18:37:27 +0530
Subject: [PATCH 13/60] tsConversion: mermaid main

---
 .prettierignore                      |   1 +
 .webpack/webpack.config.base.js      |   2 +-
 .webpack/webpack.config.e2e.babel.js |   2 +-
 package.json                         |   3 +-
 src/@types/config.d.ts               |   1 +
 src/{config.js => config.ts}         |  49 ++++++-----
 src/diagram-api/detectType.ts        |  10 +--
 src/mermaid.ts                       | 126 +++++++++++----------------
 src/{utils.js => utils.ts}           |   6 +-
 9 files changed, 92 insertions(+), 108 deletions(-)
 create mode 100644 .prettierignore
 rename src/{config.js => config.ts} (84%)
 rename src/{utils.js => utils.ts} (99%)

diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 000000000..71d07c514
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1 @@
+demos/*.html
\ No newline at end of file
diff --git a/.webpack/webpack.config.base.js b/.webpack/webpack.config.base.js
index 24db2a4f3..be56ce0ba 100644
--- a/.webpack/webpack.config.base.js
+++ b/.webpack/webpack.config.base.js
@@ -6,7 +6,7 @@ export default {
   amd: false, // https://github.com/lodash/lodash/issues/3052
   target: 'web',
   entry: {
-    mermaid: './src/mermaid.ts',
+    mermaid: './src/mermaid',
   },
   resolve: {
     extensions: ['.wasm', '.mjs', '.js', '.ts', '.json', '.jison'],
diff --git a/.webpack/webpack.config.e2e.babel.js b/.webpack/webpack.config.e2e.babel.js
index b9c5b7733..801460a71 100644
--- a/.webpack/webpack.config.e2e.babel.js
+++ b/.webpack/webpack.config.e2e.babel.js
@@ -4,7 +4,7 @@ import { merge } from 'webpack-merge';
 export default merge(baseConfig, {
   mode: 'development',
   entry: {
-    mermaid: './src/mermaid.ts',
+    mermaid: './src/mermaid',
     e2e: './cypress/platform/viewer.js',
     'bundle-test': './cypress/platform/bundle-test.js',
   },
diff --git a/package.json b/package.json
index 9aceb6568..899a07bcc 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "lint:fix": "yarn lint --fix",
     "e2e:depr": "yarn lint && jest e2e --config e2e/jest.config.js",
     "cypress": "cypress run",
+    "cypress:open": "cypress open",
     "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/webpack.config.e2e.babel.js",
@@ -129,4 +130,4 @@
     "**/*.css",
     "**/*.scss"
   ]
-}
+}
\ No newline at end of file
diff --git a/src/@types/config.d.ts b/src/@types/config.d.ts
index 2e947273d..9c63be1ac 100644
--- a/src/@types/config.d.ts
+++ b/src/@types/config.d.ts
@@ -8,6 +8,7 @@ export interface MermaidConfig {
   themeCSS?: string;
   maxTextSize?: number;
   darkMode?: boolean;
+  htmlLabels?: boolean;
   fontFamily?: string;
   logLevel?: number;
   securityLevel?: string;
diff --git a/src/config.js b/src/config.ts
similarity index 84%
rename from src/config.js
rename to src/config.ts
index 59c6c18cb..22804f988 100644
--- a/src/config.js
+++ b/src/config.ts
@@ -2,16 +2,17 @@ import assignWithDepth from './assignWithDepth';
 import { log } from './logger';
 import theme from './themes';
 import config from './defaultConfig';
+import { MermaidConfig } from 'types/config';
 
-export const defaultConfig = Object.freeze(config);
+export const defaultConfig: MermaidConfig = Object.freeze(config);
 
-let siteConfig = assignWithDepth({}, defaultConfig);
-let configFromInitialize;
-let directives = [];
-let currentConfig = assignWithDepth({}, defaultConfig);
+let siteConfig: MermaidConfig = assignWithDepth({}, defaultConfig);
+let configFromInitialize: MermaidConfig;
+let directives: any[] = [];
+let currentConfig: MermaidConfig = assignWithDepth({}, defaultConfig);
 
-export const updateCurrentConfig = (siteCfg, _directives) => {
-  // start with config beeing the siteConfig
+export const updateCurrentConfig = (siteCfg: MermaidConfig, _directives: any[]) => {
+  // start with config being the siteConfig
   let cfg = assignWithDepth({}, siteCfg);
   // let sCfg = assignWithDepth(defaultConfig, siteConfigDelta);
 
@@ -27,12 +28,15 @@ export const updateCurrentConfig = (siteCfg, _directives) => {
 
   cfg = assignWithDepth(cfg, sumOfDirectives);
 
+  // @ts-ignore
   if (sumOfDirectives.theme && theme[sumOfDirectives.theme]) {
     const tmpConfigFromInitialize = assignWithDepth({}, configFromInitialize);
     const themeVariables = assignWithDepth(
       tmpConfigFromInitialize.themeVariables || {},
+      // @ts-ignore
       sumOfDirectives.themeVariables
     );
+    // @ts-ignore
     cfg.themeVariables = theme[cfg.theme].getThemeVariables(themeVariables);
   }
 
@@ -55,11 +59,13 @@ export const updateCurrentConfig = (siteCfg, _directives) => {
  * @param conf - The base currentConfig to use as siteConfig
  * @returns {object} - The siteConfig
  */
-export const setSiteConfig = (conf) => {
+export const setSiteConfig = (conf: MermaidConfig): MermaidConfig => {
   siteConfig = assignWithDepth({}, defaultConfig);
   siteConfig = assignWithDepth(siteConfig, conf);
 
+  // @ts-ignore
   if (conf.theme && theme[conf.theme]) {
+    // @ts-ignore
     siteConfig.themeVariables = theme[conf.theme].getThemeVariables(conf.themeVariables);
   }
 
@@ -67,11 +73,11 @@ export const setSiteConfig = (conf) => {
   return siteConfig;
 };
 
-export const saveConfigFromInitialize = (conf) => {
+export const saveConfigFromInitialize = (conf: MermaidConfig): void => {
   configFromInitialize = assignWithDepth({}, conf);
 };
 
-export const updateSiteConfig = (conf) => {
+export const updateSiteConfig = (conf: MermaidConfig): MermaidConfig => {
   siteConfig = assignWithDepth(siteConfig, conf);
   updateCurrentConfig(siteConfig, directives);
 
@@ -88,7 +94,7 @@ export const updateSiteConfig = (conf) => {
  *
  * @returns {object} - The siteConfig
  */
-export const getSiteConfig = () => {
+export const getSiteConfig = (): MermaidConfig => {
   return assignWithDepth({}, siteConfig);
 };
 /**
@@ -105,7 +111,7 @@ export const getSiteConfig = () => {
  * @param {any} conf - The potential currentConfig
  * @returns {any} - The currentConfig merged with the sanitized conf
  */
-export const setConfig = (conf) => {
+export const setConfig = (conf: MermaidConfig): MermaidConfig => {
   // sanitize(conf);
   // Object.keys(conf).forEach(key => {
   //   const manipulator = manipulators[key];
@@ -143,17 +149,14 @@ export const getConfig = () => {
  *
  * @param {any} options - The potential setConfig parameter
  */
-export const sanitize = (options) => {
+export const sanitize = (options: any) => {
   // Checking that options are not in the list of excluded options
-  Object.keys(siteConfig.secure).forEach((key) => {
-    if (typeof options[siteConfig.secure[key]] !== 'undefined') {
-      // DO NOT attempt to print options[siteConfig.secure[key]] within `${}` as a malicious script
+  siteConfig.secure?.forEach((key) => {
+    if (typeof options[key] !== 'undefined') {
+      // DO NOT attempt to print options[key] within `${}` as a malicious script
       // can exploit the logger's attempt to stringify the value and execute arbitrary code
-      log.debug(
-        `Denied attempt to modify a secure key ${siteConfig.secure[key]}`,
-        options[siteConfig.secure[key]]
-      );
-      delete options[siteConfig.secure[key]];
+      log.debug(`Denied attempt to modify a secure key ${key}`, options[key]);
+      delete options[key];
     }
   });
 
@@ -186,7 +189,7 @@ export const sanitize = (options) => {
  *
  * @param {object} directive The directive to push in
  */
-export const addDirective = (directive) => {
+export const addDirective = (directive: any) => {
   if (directive.fontFamily) {
     if (!directive.themeVariables) {
       directive.themeVariables = { fontFamily: directive.fontFamily };
@@ -215,7 +218,7 @@ export const addDirective = (directive) => {
  *
  * **Notes**: (default: current siteConfig ) (optional, default `getSiteConfig()`)
  */
-export const reset = () => {
+export const reset = (): void => {
   // Replace current config with siteConfig
   directives = [];
   updateCurrentConfig(siteConfig, directives);
diff --git a/src/diagram-api/detectType.ts b/src/diagram-api/detectType.ts
index 3a3250aa0..3066c55c1 100644
--- a/src/diagram-api/detectType.ts
+++ b/src/diagram-api/detectType.ts
@@ -40,10 +40,10 @@ const diagramMatchers: Record<string, RegExp> = {
  *   class: { defaultRenderer: string } | undefined;
  *   state: { defaultRenderer: string } | undefined;
  *   flowchart: { defaultRenderer: string } | undefined;
- * }} [cnf]
+ * }} [config]
  * @returns {string} A graph definition key
  */
-export const detectType = function (text: string, cnf: MermaidConfig): string {
+export const detectType = function (text: string, config?: MermaidConfig): string {
   text = text.replace(directive, '').replace(anyComment, '\n');
   for (const [diagram, matcher] of Object.entries(diagramMatchers)) {
     if (text.match(matcher)) {
@@ -52,16 +52,16 @@ export const detectType = function (text: string, cnf: MermaidConfig): string {
   }
 
   if (text.match(/^\s*classDiagram/)) {
-    if (cnf?.class?.defaultRenderer === 'dagre-wrapper') return 'classDiagram';
+    if (config?.class?.defaultRenderer === 'dagre-wrapper') return 'classDiagram';
     return 'class';
   }
 
   if (text.match(/^\s*stateDiagram/)) {
-    if (cnf?.state?.defaultRenderer === 'dagre-wrapper') return 'stateDiagram';
+    if (config?.state?.defaultRenderer === 'dagre-wrapper') return 'stateDiagram';
     return 'state';
   }
 
-  if (cnf?.flowchart?.defaultRenderer === 'dagre-wrapper') {
+  if (config?.flowchart?.defaultRenderer === 'dagre-wrapper') {
     return 'flowchart-v2';
   }
 
diff --git a/src/mermaid.ts b/src/mermaid.ts
index 13b693b8c..8272a037a 100644
--- a/src/mermaid.ts
+++ b/src/mermaid.ts
@@ -1,9 +1,8 @@
-// TODO: Remove
-// @ts-nocheck
 /**
  * Web page integration module for the mermaid framework. It uses the mermaidAPI for mermaid
  * functionality and to render the diagrams to svg code.
  */
+import { MermaidConfig } from 'types/config';
 import { log } from './logger';
 import mermaidAPI from './mermaidAPI';
 import utils from './utils';
@@ -31,73 +30,73 @@ import utils from './utils';
  *
  * Renders the mermaid diagrams
  */
-const init = function (config: any, ...nodes: any[]) {
+const init = function (
+  config?: MermaidConfig,
+  nodes?: string | HTMLElement | NodeListOf<HTMLElement>,
+  callback?: Function
+) {
   try {
-    initThrowsErrors(config, nodes);
+    initThrowsErrors(config, nodes, callback);
   } catch (e) {
     log.warn('Syntax Error rendering');
+    // @ts-ignore
     log.warn(e.str);
-    if (this.parseError) {
-      this.parseError(e);
+    if (mermaid.parseError) {
+      // @ts-ignore
+      mermaid.parseError(e);
     }
   }
 };
 
-const initThrowsErrors = function (config: any, nodes: any[]) {
+const initThrowsErrors = function (
+  config?: MermaidConfig,
+  nodes?: string | HTMLElement | NodeListOf<HTMLElement>,
+  callback?: Function
+) {
   const conf = mermaidAPI.getConfig();
   // console.log('Starting rendering diagrams (init) - mermaid.init', conf);
   if (config) {
+    // @ts-ignore
     mermaid.sequenceConfig = config;
   }
 
   // if last argument is a function this is the callback function
-  let callback: (id: string) => void;
-  if (typeof nodes[nodes.length - 1] === 'function') {
-    callback = nodes[nodes.length - 1];
-    log.debug('Callback function found');
+
+  if (!callback && typeof conf?.mermaid?.callback === 'function') {
+    callback = conf.mermaid.callback;
+  }
+  log.debug(`${!callback ? 'No ' : ''}Callback function found`);
+  let nodesToProcess: NodeListOf<HTMLElement>;
+  if (typeof nodes === 'undefined') {
+    nodesToProcess = document.querySelectorAll('.mermaid');
+  } else if (typeof nodes === 'string') {
+    nodesToProcess = document.querySelectorAll(nodes);
+  } else if (nodes instanceof HTMLElement) {
+    nodesToProcess = new NodeList() as NodeListOf<HTMLElement>;
+    nodesToProcess[0] = nodes;
+  } else if (nodes instanceof NodeList) {
+    nodesToProcess = nodes;
   } else {
-    if (typeof conf.mermaid !== 'undefined') {
-      if (typeof conf.mermaid.callback === 'function') {
-        callback = conf.mermaid.callback;
-        log.debug('Callback function found');
-      } else {
-        log.debug('No Callback function found');
-      }
-    }
-  }
-  nodes =
-    nodes === undefined
-      ? document.querySelectorAll('.mermaid')
-      : typeof nodes === 'string'
-      ? document.querySelectorAll(nodes)
-      : nodes instanceof window.Node
-      ? [nodes]
-      : nodes; // Last case  - sequence config was passed pick next
-
-  log.debug('Start On Load before: ' + mermaid.startOnLoad);
-  if (typeof mermaid.startOnLoad !== 'undefined') {
-    log.debug('Start On Load inner: ' + mermaid.startOnLoad);
-    mermaidAPI.updateSiteConfig({ startOnLoad: mermaid.startOnLoad });
+    throw new Error('Invalid argument nodes for mermaid.init');
   }
 
-  if (typeof mermaid.ganttConfig !== 'undefined') {
-    mermaidAPI.updateSiteConfig({ gantt: mermaid.ganttConfig });
+  log.debug(`Found ${nodesToProcess.length} diagrams`);
+  if (typeof config?.startOnLoad !== 'undefined') {
+    log.debug('Start On Load: ' + config?.startOnLoad);
+    mermaidAPI.updateSiteConfig({ startOnLoad: config?.startOnLoad });
   }
 
   const idGenerator = new utils.initIdGenerator(conf.deterministicIds, conf.deterministicIDSeed);
 
   let txt;
 
-  for (let i = 0; i < nodes.length; i++) {
-    // element is the current div with mermaid class
-    const element = nodes[i];
-
+  // element is the current div with mermaid class
+  for (const element of Array.from(nodesToProcess)) {
     /*! Check if previously processed */
-    if (!element.getAttribute('data-processed')) {
-      element.setAttribute('data-processed', true);
-    } else {
+    if (element.getAttribute('data-processed')) {
       continue;
     }
+    element.setAttribute('data-processed', 'true');
 
     const id = `mermaid-${idGenerator.next()}`;
 
@@ -118,7 +117,7 @@ const initThrowsErrors = function (config: any, nodes: any[]) {
       mermaidAPI.render(
         id,
         txt,
-        (svgCode, bindFunctions) => {
+        (svgCode: string, bindFunctions: (el: HTMLElement) => void) => {
           element.innerHTML = svgCode;
           if (typeof callback !== 'undefined') {
             callback(id);
@@ -129,24 +128,15 @@ const initThrowsErrors = function (config: any, nodes: any[]) {
       );
     } catch (error) {
       log.warn('Catching Error (bootstrap)');
+      // @ts-ignore
+      // TODO: We should be throwing an error object.
       throw { error, message: error.str };
     }
   }
 };
 
-const initialize = function (config: any) {
-  // mermaidAPI.reset();
-  if (typeof config.mermaid !== 'undefined') {
-    if (typeof config.mermaid.startOnLoad !== 'undefined') {
-      mermaid.startOnLoad = config.mermaid.startOnLoad;
-    }
-    if (typeof config.mermaid.htmlLabels !== 'undefined') {
-      mermaid.htmlLabels =
-        config.mermaid.htmlLabels === 'false' || config.mermaid.htmlLabels === false ? false : true;
-    }
-  }
+const initialize = function (config: MermaidConfig) {
   mermaidAPI.initialize(config);
-  // mermaidAPI.reset();
 };
 
 /**
@@ -154,22 +144,9 @@ const initialize = function (config: any) {
  * configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the page.
  */
 const contentLoaded = function () {
-  let config;
-
-  if (mermaid.startOnLoad) {
-    // No config found, do check API config
-    config = mermaidAPI.getConfig();
-    if (config.startOnLoad) {
-      mermaid.init();
-    }
-  } else {
-    if (typeof mermaid.startOnLoad === 'undefined') {
-      log.debug('In start, no config');
-      config = mermaidAPI.getConfig();
-      if (config.startOnLoad) {
-        mermaid.init();
-      }
-    }
+  const { startOnLoad } = mermaidAPI.getConfig();
+  if (startOnLoad) {
+    mermaid.init();
   }
 };
 
@@ -200,13 +177,12 @@ if (typeof document !== 'undefined') {
  *
  * @param {function (err, hash)} newParseErrorHandler New parseError() callback.
  */
-const setParseErrorHandler = function (newParseErrorHandler) {
+const setParseErrorHandler = function (newParseErrorHandler: (err: any, hash: any) => void) {
+  // @ts-ignore
   mermaid.parseError = newParseErrorHandler;
 };
 
 const mermaid = {
-  startOnLoad: true,
-  htmlLabels: true,
   diagrams: {},
   mermaidAPI,
   parse: mermaidAPI != undefined ? mermaidAPI.parse : null,
@@ -215,7 +191,7 @@ const mermaid = {
   init,
   initThrowsErrors,
   initialize,
-
+  parseError: undefined,
   contentLoaded,
 
   setParseErrorHandler,
diff --git a/src/utils.js b/src/utils.ts
similarity index 99%
rename from src/utils.js
rename to src/utils.ts
index 24fb965b5..d5f3b31a9 100644
--- a/src/utils.js
+++ b/src/utils.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { sanitizeUrl } from '@braintree/sanitize-url';
 import {
   curveBasis,
@@ -18,6 +19,7 @@ import { configKeys } from './defaultConfig';
 import { log } from './logger';
 import { detectType } from './diagram-api/detectType';
 import assignWithDepth from './assignWithDepth';
+import { MermaidConfig } from 'types/config';
 
 // Effectively an enum of the supported curve types, accessible by name
 const d3CurveTypes = {
@@ -71,7 +73,7 @@ const anyComment = /\s*%%.*\n/gm;
  * @param {any} cnf
  * @returns {object} The json object representing the init passed to mermaid.initialize()
  */
-export const detectInit = function (text, cnf) {
+export const detectInit = function (text: string, config?: MermaidConfig): MermaidConfig {
   let inits = detectDirective(text, /(?:init\b)|(?:initialize\b)/);
   let results = {};
 
@@ -84,7 +86,7 @@ export const detectInit = function (text, cnf) {
     results = inits.args;
   }
   if (results) {
-    let type = detectType(text, cnf);
+    let type = detectType(text, config);
     ['config'].forEach((prop) => {
       if (typeof results[prop] !== 'undefined') {
         if (type === 'flowchart-v2') {

From d97b3807b98731c69f8b741d68e58d7b27966367 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sun, 21 Aug 2022 19:32:21 +0530
Subject: [PATCH 14/60] fix: startOnLoad

---
 src/mermaid.ts | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/mermaid.ts b/src/mermaid.ts
index 8272a037a..5b9a04283 100644
--- a/src/mermaid.ts
+++ b/src/mermaid.ts
@@ -144,9 +144,11 @@ const initialize = function (config: MermaidConfig) {
  * configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the page.
  */
 const contentLoaded = function () {
-  const { startOnLoad } = mermaidAPI.getConfig();
-  if (startOnLoad) {
-    mermaid.init();
+  if (mermaid.startOnLoad) {
+    const { startOnLoad } = mermaidAPI.getConfig();
+    if (startOnLoad) {
+      mermaid.init();
+    }
   }
 };
 
@@ -183,6 +185,7 @@ const setParseErrorHandler = function (newParseErrorHandler: (err: any, hash: an
 };
 
 const mermaid = {
+  startOnLoad: true,
   diagrams: {},
   mermaidAPI,
   parse: mermaidAPI != undefined ? mermaidAPI.parse : null,

From 39aaf2f81308b0b0ab29b73c724f2d43f54f7569 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sun, 21 Aug 2022 22:27:13 +0530
Subject: [PATCH 15/60] tsConversion: fix paths, add d.ts to output

---
 .webpack/webpack.config.base.js            |   2 -
 docs/Setup.md                              |  18 ++-
 package.json                               |  15 +-
 src/@types/types.d.ts                      |   1 -
 src/config.ts                              |   2 +-
 src/{@types/config.d.ts => config.type.ts} |   5 +-
 src/defaultConfig.ts                       |   2 +-
 src/diagram-api/detectType.ts              |   4 +-
 src/diagrams/common/common.ts              |   2 +-
 src/diagrams/git/gitGraphDetector.ts       |   2 +
 src/diagrams/mindmap/mindamapDetector.ts   |   2 +
 src/mermaid.ts                             |   2 +-
 src/utils.ts                               |   2 +-
 tsconfig.json                              |  18 +--
 yarn.lock                                  | 157 +--------------------
 15 files changed, 51 insertions(+), 183 deletions(-)
 delete mode 100644 src/@types/types.d.ts
 rename src/{@types/config.d.ts => config.type.ts} (99%)

diff --git a/.webpack/webpack.config.base.js b/.webpack/webpack.config.base.js
index be56ce0ba..f90bc506e 100644
--- a/.webpack/webpack.config.base.js
+++ b/.webpack/webpack.config.base.js
@@ -1,5 +1,4 @@
 import path from 'path';
-const { TsConfigPathsPlugin } = require('awesome-typescript-loader');
 export const resolveRoot = (...relativePath) => path.resolve(__dirname, '..', ...relativePath);
 
 export default {
@@ -14,7 +13,6 @@ export default {
       fs: false, // jison generated code requires 'fs'
       path: require.resolve('path-browserify'),
     },
-    plugins: [new TsConfigPathsPlugin()],
   },
   output: {
     path: resolveRoot('./dist'),
diff --git a/docs/Setup.md b/docs/Setup.md
index 1092520fa..37c07f76e 100644
--- a/docs/Setup.md
+++ b/docs/Setup.md
@@ -58,10 +58,18 @@ Theme , the CSS style sheet
 
 ## logLevel
 
-| Parameter | Description                                           | Type             | Required | Values                                             |
-| --------- | ----------------------------------------------------- | ---------------- | -------- | -------------------------------------------------- |
-| logLevel  | This option decides the amount of logging to be used. | string \| number | Required | 'trace', 'debug', 'info', 'warn', 'error', 'fatal' |
+| Parameter | Description                                           | Type             | Required | Values                                        |
+| --------- | ----------------------------------------------------- | ---------------- | -------- | --------------------------------------------- |
+| logLevel  | This option decides the amount of logging to be used. | string \| number | Required | 'trace','debug','info','warn','error','fatal' |
 
+**Notes:**
+
+-   Trace: 0
+-   Debug: 1
+-   Info: 2
+-   Warn: 3
+-   Error: 4
+-   Fatal: 5 (default)
 
 ## securityLevel
 
@@ -1418,7 +1426,7 @@ function _Default value: At default, will mirror Global Config_
 
 ### Parameters
 
--   `conf`  The base currentConfig to use as siteConfig
+-   `conf` **MermaidConfig** The base currentConfig to use as siteConfig
 
 Returns **[object][5]** The siteConfig
 
@@ -1531,6 +1539,8 @@ Pushes in a directive to the configuration
 
 **Notes**: (default: current siteConfig ) (optional, default `getSiteConfig()`)
 
+Returns **void** 
+
 ## updateRendererConfigs
 
 ### Parameters
diff --git a/package.json b/package.json
index 37ce4fac9..e45354dde 100644
--- a/package.json
+++ b/package.json
@@ -4,10 +4,12 @@
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "main": "dist/mermaid.min.js",
   "module": "dist/mermaid.esm.min.mjs",
+  "types": "dist/mermaid.d.ts",
   "exports": {
     ".": {
       "require": "./dist/mermaid.min.js",
-      "import": "./dist/mermaid.esm.min.mjs"
+      "import": "./dist/mermaid.esm.min.mjs",
+      "types": "./dist/mermaid.d.ts"
     },
     "./*": "./*"
   },
@@ -21,11 +23,11 @@
     "git graph"
   ],
   "scripts": {
-    "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",
+    "build:dev": "webpack --mode development --progress --color",
+    "build:prod": "webpack --mode production --progress --color",
+    "build": "concurrently \"yarn build:dev\" \"yarn build:prod\"",
+    "postbuild": "documentation build src/mermaidAPI.js src/config.ts src/defaultConfig.ts --shallow -f md --markdown-toc false > docs/Setup.md",
+    "build:watch": "yarn build:dev --watch",
     "release": "yarn build",
     "lint": "eslint ./ --ext .js,.json,.html",
     "lint:fix": "yarn lint --fix",
@@ -80,7 +82,6 @@
     "@types/d3": "^7.4.0",
     "@types/dompurify": "^2.3.3",
     "@types/jest": "^28.1.7",
-    "awesome-typescript-loader": "^5.2.1",
     "babel-jest": "^28.0.3",
     "babel-loader": "^8.2.2",
     "concurrently": "^7.0.0",
diff --git a/src/@types/types.d.ts b/src/@types/types.d.ts
deleted file mode 100644
index 24318d1d3..000000000
--- a/src/@types/types.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-type DiagramDetector = (text: string) => boolean;
diff --git a/src/config.ts b/src/config.ts
index 22804f988..dfad7fad1 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -2,7 +2,7 @@ import assignWithDepth from './assignWithDepth';
 import { log } from './logger';
 import theme from './themes';
 import config from './defaultConfig';
-import { MermaidConfig } from 'types/config';
+import type { MermaidConfig } from './config.type';
 
 export const defaultConfig: MermaidConfig = Object.freeze(config);
 
diff --git a/src/@types/config.d.ts b/src/config.type.ts
similarity index 99%
rename from src/@types/config.d.ts
rename to src/config.type.ts
index 9c63be1ac..632eac73a 100644
--- a/src/@types/config.d.ts
+++ b/src/config.type.ts
@@ -32,7 +32,7 @@ export interface MermaidConfig {
 }
 
 // TODO: More configs needs to be moved in here
-export interface BaseDiagramConfig extends BaseDiagramConfig {
+export interface BaseDiagramConfig {
   useWidth?: number;
   useMaxWidth?: boolean;
 }
@@ -340,4 +340,7 @@ export interface FontConfig {
   fontFamily?: string;
   fontWeight?: string | number;
 }
+
 export type FontCalculator = () => Partial<FontConfig>;
+
+export {};
diff --git a/src/defaultConfig.ts b/src/defaultConfig.ts
index 8328510b7..dad4f0ef0 100644
--- a/src/defaultConfig.ts
+++ b/src/defaultConfig.ts
@@ -1,5 +1,5 @@
 import theme from './themes';
-import { MermaidConfig } from 'types/config';
+import { MermaidConfig } from './config.type';
 /**
  * **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click
  * here](8.6.0_docs.md)].**
diff --git a/src/diagram-api/detectType.ts b/src/diagram-api/detectType.ts
index 3066c55c1..62a37616b 100644
--- a/src/diagram-api/detectType.ts
+++ b/src/diagram-api/detectType.ts
@@ -1,4 +1,6 @@
-import type { MermaidConfig } from 'types/config';
+import { MermaidConfig } from '../config.type';
+
+export type DiagramDetector = (text: string) => boolean;
 
 const directive =
   /[%]{2}[{]\s*(?:(?:(\w+)\s*:|(\w+))\s*(?:(?:(\w+))|((?:(?![}][%]{2}).|\r?\n)*))?\s*)(?:[}][%]{2})?/gi;
diff --git a/src/diagrams/common/common.ts b/src/diagrams/common/common.ts
index be8bf0d61..f88de5d57 100644
--- a/src/diagrams/common/common.ts
+++ b/src/diagrams/common/common.ts
@@ -1,5 +1,5 @@
 import DOMPurify from 'dompurify';
-import { MermaidConfig } from 'types/config';
+import { MermaidConfig } from '../../config.type';
 
 /**
  * Gets the rows of lines in a string
diff --git a/src/diagrams/git/gitGraphDetector.ts b/src/diagrams/git/gitGraphDetector.ts
index 08e4d8a6f..f5a660fc1 100644
--- a/src/diagrams/git/gitGraphDetector.ts
+++ b/src/diagrams/git/gitGraphDetector.ts
@@ -1,3 +1,5 @@
+import type { DiagramDetector } from '../../diagram-api/detectType';
+
 export const gitGraphDetector: DiagramDetector = (txt) => {
   return txt.match(/^\s*gitGraph/) != null;
 };
diff --git a/src/diagrams/mindmap/mindamapDetector.ts b/src/diagrams/mindmap/mindamapDetector.ts
index b6e5d3cde..18cf67312 100644
--- a/src/diagrams/mindmap/mindamapDetector.ts
+++ b/src/diagrams/mindmap/mindamapDetector.ts
@@ -1,3 +1,5 @@
+import { DiagramDetector } from '../../diagram-api/detectType';
+
 export const mindmapDetector: DiagramDetector = (txt) => {
   return txt.match(/^\s*mindmap/) != null;
 };
diff --git a/src/mermaid.ts b/src/mermaid.ts
index 5b9a04283..45007fb3c 100644
--- a/src/mermaid.ts
+++ b/src/mermaid.ts
@@ -2,7 +2,7 @@
  * Web page integration module for the mermaid framework. It uses the mermaidAPI for mermaid
  * functionality and to render the diagrams to svg code.
  */
-import { MermaidConfig } from 'types/config';
+import { MermaidConfig } from './config.type';
 import { log } from './logger';
 import mermaidAPI from './mermaidAPI';
 import utils from './utils';
diff --git a/src/utils.ts b/src/utils.ts
index d5f3b31a9..30ab57ad8 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -19,7 +19,7 @@ import { configKeys } from './defaultConfig';
 import { log } from './logger';
 import { detectType } from './diagram-api/detectType';
 import assignWithDepth from './assignWithDepth';
-import { MermaidConfig } from 'types/config';
+import { MermaidConfig } from './config.type';
 
 // Effectively an enum of the supported curve types, accessible by name
 const d3CurveTypes = {
diff --git a/tsconfig.json b/tsconfig.json
index 9db9a8874..c95cdcec0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -27,17 +27,12 @@
 
     /* Modules */
     "module": "ES6" /* Specify what module code is generated. */,
-    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
+    "rootDir": "./src" /* Specify the root folder within your source files. */,
     "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
-    "baseUrl": "./src" /* Specify the base directory to resolve non-relative module names. */,
-    "paths": {
-      "types/*": ["@types/*"]
-    } /* Specify a set of entries that re-map imports to additional lookup locations. */,
+    // "baseUrl": "./src" /* Specify the base directory to resolve non-relative module names. */,
+    // "paths": {} /* Specify a set of entries that re-map imports to additional lookup locations. */,
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
-    "typeRoots": [
-      "./node_modules/@types",
-      "./src/@types"
-    ] /* Specify multiple folders that act like `./node_modules/@types`. */,
+    // "typeRoots": [] /* Specify multiple folders that act like `./node_modules/@types`. */,
     // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
     // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
     // "resolveJsonModule": true,                        /* Enable importing .json files */
@@ -49,7 +44,7 @@
     // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */
 
     /* Emit */
-    // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+    "declaration": true /* Generate .d.ts files from TypeScript and JavaScript files in your project. */,
     // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
     // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
     // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
@@ -104,5 +99,6 @@
     /* Completeness */
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
     "skipLibCheck": true /* Skip type checking all .d.ts files. */
-  }
+  },
+  "include": ["./src/**/*.ts"]
 }
diff --git a/yarn.lock b/yarn.lock
index 7e72ef394..e61e04ecd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3326,20 +3326,6 @@ atob@^2.1.2:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
-awesome-typescript-loader@^5.2.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/awesome-typescript-loader/-/awesome-typescript-loader-5.2.1.tgz#a41daf7847515f4925cdbaa3075d61f289e913fc"
-  integrity sha512-slv66OAJB8orL+UUaTI3pKlLorwIvS4ARZzYR9iJJyGsEgOqueMfOMdKySWzZ73vIkEe3fcwFgsKMg4d8zyb1g==
-  dependencies:
-    chalk "^2.4.1"
-    enhanced-resolve "^4.0.0"
-    loader-utils "^1.1.0"
-    lodash "^4.17.5"
-    micromatch "^3.1.9"
-    mkdirp "^0.5.1"
-    source-map-support "^0.5.3"
-    webpack-log "^1.2.0"
-
 aws-sign2@~0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@@ -3803,7 +3789,7 @@ chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.4.1, chalk@^2.4.2:
+chalk@^2.0.0, chalk@^2.3.0, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -4822,14 +4808,6 @@ d3@^5.14, d3@^7.0.0:
     d3-transition "3"
     d3-zoom "3"
 
-d@1, d@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/d/-/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a"
-  integrity sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==
-  dependencies:
-    es5-ext "^0.10.50"
-    type "^1.0.1"
-
 dagre-d3@^0.6.4:
   version "0.6.4"
   resolved "https://registry.yarnpkg.com/dagre-d3/-/dagre-d3-0.6.4.tgz#0728d5ce7f177ca2337df141ceb60fbe6eeb7b29"
@@ -5362,15 +5340,6 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0:
   dependencies:
     once "^1.4.0"
 
-enhanced-resolve@^4.0.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz#2f3cfd84dbe3b487f18f2db2ef1e064a571ca5ec"
-  integrity sha512-Nv9m36S/vxpsI+Hc4/ZGRs0n9mXqSWGGq49zxb/cJfPAQMbUtttJAlNPS4AQzaBdw/pKskw5bMbekT/Y7W/Wlg==
-  dependencies:
-    graceful-fs "^4.1.2"
-    memory-fs "^0.5.0"
-    tapable "^1.0.0"
-
 enhanced-resolve@^5.0.0, enhanced-resolve@^5.10.0:
   version "5.10.0"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz#0dc579c3bb2a1032e357ac45b8f3a6f3ad4fb1e6"
@@ -5396,13 +5365,6 @@ envinfo@^7.7.3:
   resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.8.1.tgz#06377e3e5f4d379fea7ac592d5ad8927e0c4d475"
   integrity sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==
 
-errno@^0.1.3:
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
-  integrity sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==
-  dependencies:
-    prr "~1.0.1"
-
 error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
@@ -5422,32 +5384,6 @@ es-module-lexer@^0.9.0:
   resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-0.9.3.tgz#6f13db00cc38417137daf74366f535c8eb438f19"
   integrity sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==
 
-es5-ext@^0.10.35, es5-ext@^0.10.50:
-  version "0.10.62"
-  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.62.tgz#5e6adc19a6da524bf3d1e02bbc8960e5eb49a9a5"
-  integrity sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==
-  dependencies:
-    es6-iterator "^2.0.3"
-    es6-symbol "^3.1.3"
-    next-tick "^1.1.0"
-
-es6-iterator@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7"
-  integrity sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==
-  dependencies:
-    d "1"
-    es5-ext "^0.10.35"
-    es6-symbol "^3.1.1"
-
-es6-symbol@^3.1.1, es6-symbol@^3.1.3:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.3.tgz#bad5d3c1bcdac28269f4cb331e431c78ac705d18"
-  integrity sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==
-  dependencies:
-    d "^1.0.1"
-    ext "^1.1.2"
-
 escalade@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
@@ -5873,13 +5809,6 @@ express@^4.17.3:
     utils-merge "1.0.1"
     vary "~1.1.2"
 
-ext@^1.1.2:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/ext/-/ext-1.6.0.tgz#3871d50641e874cc172e2b53f919842d19db4c52"
-  integrity sha512-sdBImtzkq2HpkdRLtlLWDa6w4DX22ijZLKx8BMPUuKe1c5lbN6xwQDQCxSfxBQnHZ13ls/FH0MQZx/q/gr6FQg==
-  dependencies:
-    type "^2.5.0"
-
 extend-shallow@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
@@ -7974,13 +7903,6 @@ json5@^0.5.0:
   resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
   integrity sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=
 
-json5@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
-  integrity sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==
-  dependencies:
-    minimist "^1.2.0"
-
 json5@^2.1.2, json5@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
@@ -8237,15 +8159,6 @@ loader-utils@^0.2.15:
     json5 "^0.5.0"
     object-assign "^4.0.1"
 
-loader-utils@^1.1.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
-  integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
-  dependencies:
-    big.js "^5.2.2"
-    emojis-list "^3.0.0"
-    json5 "^1.0.1"
-
 loader-utils@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.2.tgz#d6e3b4fb81870721ae4e0868ab11dd638368c129"
@@ -8310,7 +8223,7 @@ lodash.once@^4.1.1:
   resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
   integrity sha1-DdOXEhPHxW34gJd9UEyI+0cal6w=
 
-lodash@^4.17.10, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.17.5:
+lodash@^4.17.10, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21, lodash@^4.17.4:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -8320,13 +8233,6 @@ log-driver@^1.2.7:
   resolved "https://registry.yarnpkg.com/log-driver/-/log-driver-1.2.7.tgz#63b95021f0702fedfa2c9bb0a24e7797d71871d8"
   integrity sha512-U7KCmLdqsGHBLeWqYlFA0V0Sl6P08EE1ZrmA9cxjUE0WVqT9qnyVDPz1kzpFEP0jdJuFnasWIfSd7fsaNXkpbg==
 
-log-symbols@^2.1.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
-  integrity sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==
-  dependencies:
-    chalk "^2.0.1"
-
 log-symbols@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-4.1.0.tgz#3fbdbb95b4683ac9fc785111e792e558d4abd503"
@@ -8355,14 +8261,6 @@ loglevel@^1.6.0:
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.8.0.tgz#e7ec73a57e1e7b419cb6c6ac06bf050b67356114"
   integrity sha512-G6A/nJLRgWOuuwdNuA6koovfEV1YpqqAG4pRUlFaz3jj2QNZ8M4vBqnVA+HBTmU/AMNUtlOsMmSpF6NyOjztbA==
 
-loglevelnext@^1.0.1:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/loglevelnext/-/loglevelnext-1.0.5.tgz#36fc4f5996d6640f539ff203ba819641680d75a2"
-  integrity sha512-V/73qkPuJmx4BcBF19xPBr+0ZRVBhc4POxvZTZdMeXpJ4NItXSJ/MSwuFT0kQJlCbXvdlZoQQ/418bS1y9Jh6A==
-  dependencies:
-    es6-symbol "^3.1.1"
-    object.assign "^4.1.0"
-
 longest-streak@^2.0.1:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-2.0.4.tgz#b8599957da5b5dab64dee3fe316fa774597d90e4"
@@ -8565,14 +8463,6 @@ memfs@^3.4.1:
   dependencies:
     fs-monkey "1.0.3"
 
-memory-fs@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.5.0.tgz#324c01288b88652966d161db77838720845a8e3c"
-  integrity sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==
-  dependencies:
-    errno "^0.1.3"
-    readable-stream "^2.0.1"
-
 meow@^8.0.0:
   version "8.1.2"
   resolved "https://registry.yarnpkg.com/meow/-/meow-8.1.2.tgz#bcbe45bda0ee1729d350c03cffc8395a36c4e897"
@@ -8813,7 +8703,7 @@ micromark@~2.11.0:
     debug "^4.0.0"
     parse-entities "^2.0.0"
 
-micromatch@^3.1.5, micromatch@^3.1.9:
+micromatch@^3.1.5:
   version "3.1.10"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
   integrity sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==
@@ -8908,7 +8798,7 @@ minimist-options@4.1.0:
     is-plain-obj "^1.1.0"
     kind-of "^6.0.3"
 
-minimist@^1.1.0, minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5, minimist@^1.2.6:
+minimist@^1.1.0, minimist@^1.1.1, minimist@^1.2.5, minimist@^1.2.6:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
   integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
@@ -9030,11 +8920,6 @@ netmask@^2.0.1:
   resolved "https://registry.yarnpkg.com/netmask/-/netmask-2.0.2.tgz#8b01a07644065d536383835823bc52004ebac5e7"
   integrity sha512-dBpDMdxv9Irdq66304OLfEmQ9tbNRFnFTuZiLo+bD+r332bBmMJ8GBLXklIXXgxd3+v9+KUnZaUR5PJMa75Gsg==
 
-next-tick@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.1.0.tgz#1836ee30ad56d67ef281b22bd199f709449b35eb"
-  integrity sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==
-
 nice-try@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
@@ -9798,11 +9683,6 @@ proxy-from-env@^1.0.0:
   resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
   integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
 
-prr@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
-  integrity sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==
-
 ps-tree@1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/ps-tree/-/ps-tree-1.2.0.tgz#5e7425b89508736cdd4f2224d028f7bb3f722ebd"
@@ -10782,7 +10662,7 @@ source-map-support@0.5.13:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
-source-map-support@^0.5.16, source-map-support@^0.5.3, source-map-support@~0.5.20:
+source-map-support@^0.5.16, source-map-support@~0.5.20:
   version "0.5.21"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
   integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
@@ -11221,11 +11101,6 @@ symbol-tree@^3.2.4:
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
-tapable@^1.0.0:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
-  integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
-
 tapable@^2.1.1, tapable@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
@@ -11599,16 +11474,6 @@ type-is@~1.6.18:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
-type@^1.0.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/type/-/type-1.2.0.tgz#848dd7698dafa3e54a6c479e759c4bc3f18847a0"
-  integrity sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==
-
-type@^2.5.0:
-  version "2.7.2"
-  resolved "https://registry.yarnpkg.com/type/-/type-2.7.2.tgz#2376a15a3a28b1efa0f5350dcf72d24df6ef98d0"
-  integrity sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw==
-
 typedarray@^0.0.6, typedarray@~0.0.5:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
@@ -11840,7 +11705,7 @@ uuid@8.3.2, uuid@^8.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
-uuid@^3.1.0, uuid@^3.3.2:
+uuid@^3.3.2:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
@@ -12194,16 +12059,6 @@ webpack-dev-server@^4.3.0:
     webpack-dev-middleware "^5.3.1"
     ws "^8.4.2"
 
-webpack-log@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/webpack-log/-/webpack-log-1.2.0.tgz#a4b34cda6b22b518dbb0ab32e567962d5c72a43d"
-  integrity sha512-U9AnICnu50HXtiqiDxuli5gLB5PGBo7VvcHx36jRZHwK4vzOYLbImqT4lwWwoMHdQWwEKw736fCHEekokTEKHA==
-  dependencies:
-    chalk "^2.1.0"
-    log-symbols "^2.1.0"
-    loglevelnext "^1.0.1"
-    uuid "^3.1.0"
-
 webpack-merge@^5.7.3, webpack-merge@^5.8.0:
   version "5.8.0"
   resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-5.8.0.tgz#2b39dbf22af87776ad744c390223731d30a68f61"

From d365dacbf741ea00789bb42aef6ec7d689ba3860 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 22 Aug 2022 11:10:30 +0530
Subject: [PATCH 16/60] tsConversion: mermaidAPI

---
 CHANGELOG.md                                 | 1237 +++++++++---------
 docs/Setup.md                                |   45 +-
 package.json                                 |    3 +-
 src/Diagram.ts                               |   21 +-
 src/config.ts                                |    4 +-
 src/diagrams/flowchart/flowRenderer-v2.js    |    4 +-
 src/diagrams/flowchart/flowRenderer.js       |    8 +-
 src/diagrams/sequence/sequenceRenderer.js    |    4 +-
 src/diagrams/state/stateRenderer-v2.js       |    4 +-
 src/diagrams/user-journey/journeyRenderer.js |    3 +-
 src/mermaid.spec.js                          |    9 +
 src/mermaid.ts                               |   29 +-
 src/mermaidAPI.spec.js                       |   18 +-
 src/{mermaidAPI.js => mermaidAPI.ts}         |  138 +-
 tsconfig.json                                |    4 +-
 yarn.lock                                    |    5 +
 16 files changed, 776 insertions(+), 760 deletions(-)
 rename src/{mermaidAPI.js => mermaidAPI.ts} (80%)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index db6be9064..582fa0e2e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,863 +1,906 @@
 # Change Log
 
+// TODO: Populate changelog
+
+-   Config has a lot of changes
+-   globalReset resets to `defaultConfig` instead of current config. Use `reset` instead.
+
 ## [Unreleased](https://github.com/knsv/mermaid/tree/HEAD)
 
 [Full Changelog](https://github.com/knsv/mermaid/compare/8.2.0...HEAD)
 
 **Closed issues:**
 
-- Cross-Site Scripting:DOM - Issue [\#847](https://github.com/knsv/mermaid/issues/847)
+-   Cross-Site Scripting:DOM - Issue [\#847](https://github.com/knsv/mermaid/issues/847)
 
 ## [8.2.0](https://github.com/knsv/mermaid/tree/8.2.0) (2019-07-17)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/8.1.0...8.2.0)
 
 **Closed issues:**
 
-- Create issue templates [\#871](https://github.com/knsv/mermaid/issues/871)
-- cross site scripting in mermaid [\#869](https://github.com/knsv/mermaid/issues/869)
-- Make Gantt chart date inclusive [\#868](https://github.com/knsv/mermaid/issues/868)
-- CHANGELOG missing updates for all versions since 0.4.0 [\#865](https://github.com/knsv/mermaid/issues/865)
-- please add tag for 8.0.0 release [\#863](https://github.com/knsv/mermaid/issues/863)
-- classDiagram breaks on any edit [\#858](https://github.com/knsv/mermaid/issues/858)
-- found 1 high severity vulnerability [\#839](https://github.com/knsv/mermaid/issues/839)
-- Missing fontawesome icon support [\#830](https://github.com/knsv/mermaid/issues/830)
-- Docs for integration with wiki.js? [\#829](https://github.com/knsv/mermaid/issues/829)
-- Is this project still maintained? [\#826](https://github.com/knsv/mermaid/issues/826)
-- typora [\#823](https://github.com/knsv/mermaid/issues/823)
-- Maintain the order of the nodes in Flowchart [\#815](https://github.com/knsv/mermaid/issues/815)
-- Overlap, Overflow and cut titles in flowchart [\#814](https://github.com/knsv/mermaid/issues/814)
-- How load mermaidApi notejs electron  [\#813](https://github.com/knsv/mermaid/issues/813)
-- How to set the spacing between the text of the flowchart node and the border? [\#812](https://github.com/knsv/mermaid/issues/812)
-- no triming  participant name and the name following spaces is as another actor in sequence [\#809](https://github.com/knsv/mermaid/issues/809)
-- uml Class as shape type [\#807](https://github.com/knsv/mermaid/issues/807)
-- Force-directed graph Layout Style [\#806](https://github.com/knsv/mermaid/issues/806)
-- how can I start a newLine in FlowChart [\#805](https://github.com/knsv/mermaid/issues/805)
-- UOEProcessShow [\#801](https://github.com/knsv/mermaid/issues/801)
-- Why the use of code blocks? [\#799](https://github.com/knsv/mermaid/issues/799)
-- fixing class diagram  [\#794](https://github.com/knsv/mermaid/issues/794)
-- Autonumber support in sequence diagrams [\#782](https://github.com/knsv/mermaid/issues/782)
-- MomentJS dependency [\#781](https://github.com/knsv/mermaid/issues/781)
-- Feature : Can we color code the flow/arrows [\#766](https://github.com/knsv/mermaid/issues/766)
-- Is there any way to convert flowchart.js code to mermaid code [\#726](https://github.com/knsv/mermaid/issues/726)
-- Fixed width of nodes [\#653](https://github.com/knsv/mermaid/issues/653)
-- Inline comment [\#650](https://github.com/knsv/mermaid/issues/650)
-- alt attribute of img tag in HTML [\#619](https://github.com/knsv/mermaid/issues/619)
-- Just wanted to say : THANKS ! [\#618](https://github.com/knsv/mermaid/issues/618)
-- "animation" [\#446](https://github.com/knsv/mermaid/issues/446)
+-   Create issue templates [\#871](https://github.com/knsv/mermaid/issues/871)
+-   cross site scripting in mermaid [\#869](https://github.com/knsv/mermaid/issues/869)
+-   Make Gantt chart date inclusive [\#868](https://github.com/knsv/mermaid/issues/868)
+-   CHANGELOG missing updates for all versions since 0.4.0 [\#865](https://github.com/knsv/mermaid/issues/865)
+-   please add tag for 8.0.0 release [\#863](https://github.com/knsv/mermaid/issues/863)
+-   classDiagram breaks on any edit [\#858](https://github.com/knsv/mermaid/issues/858)
+-   found 1 high severity vulnerability [\#839](https://github.com/knsv/mermaid/issues/839)
+-   Missing fontawesome icon support [\#830](https://github.com/knsv/mermaid/issues/830)
+-   Docs for integration with wiki.js? [\#829](https://github.com/knsv/mermaid/issues/829)
+-   Is this project still maintained? [\#826](https://github.com/knsv/mermaid/issues/826)
+-   typora [\#823](https://github.com/knsv/mermaid/issues/823)
+-   Maintain the order of the nodes in Flowchart [\#815](https://github.com/knsv/mermaid/issues/815)
+-   Overlap, Overflow and cut titles in flowchart [\#814](https://github.com/knsv/mermaid/issues/814)
+-   How load mermaidApi notejs electron [\#813](https://github.com/knsv/mermaid/issues/813)
+-   How to set the spacing between the text of the flowchart node and the border? [\#812](https://github.com/knsv/mermaid/issues/812)
+-   no triming participant name and the name following spaces is as another actor in sequence [\#809](https://github.com/knsv/mermaid/issues/809)
+-   uml Class as shape type [\#807](https://github.com/knsv/mermaid/issues/807)
+-   Force-directed graph Layout Style [\#806](https://github.com/knsv/mermaid/issues/806)
+-   how can I start a newLine in FlowChart [\#805](https://github.com/knsv/mermaid/issues/805)
+-   UOEProcessShow [\#801](https://github.com/knsv/mermaid/issues/801)
+-   Why the use of code blocks? [\#799](https://github.com/knsv/mermaid/issues/799)
+-   fixing class diagram [\#794](https://github.com/knsv/mermaid/issues/794)
+-   Autonumber support in sequence diagrams [\#782](https://github.com/knsv/mermaid/issues/782)
+-   MomentJS dependency [\#781](https://github.com/knsv/mermaid/issues/781)
+-   Feature : Can we color code the flow/arrows [\#766](https://github.com/knsv/mermaid/issues/766)
+-   Is there any way to convert flowchart.js code to mermaid code [\#726](https://github.com/knsv/mermaid/issues/726)
+-   Fixed width of nodes [\#653](https://github.com/knsv/mermaid/issues/653)
+-   Inline comment [\#650](https://github.com/knsv/mermaid/issues/650)
+-   alt attribute of img tag in HTML [\#619](https://github.com/knsv/mermaid/issues/619)
+-   Just wanted to say : THANKS ! [\#618](https://github.com/knsv/mermaid/issues/618)
+-   "animation" [\#446](https://github.com/knsv/mermaid/issues/446)
 
 **Merged pull requests:**
 
-- Trimming whitespace after participant id [\#882](https://github.com/knsv/mermaid/pull/882) ([IOrlandoni](https://github.com/IOrlandoni))
-- chore\(deps\): bump atob from 2.0.3 to 2.1.2 [\#881](https://github.com/knsv/mermaid/pull/881) ([dependabot[bot]](https://github.com/apps/dependabot))
-- chore\(deps\): bump fstream from 1.0.11 to 1.0.12 [\#880](https://github.com/knsv/mermaid/pull/880) ([dependabot[bot]](https://github.com/apps/dependabot))
-- chore\(deps\): bump js-yaml from 3.12.0 to 3.13.1 [\#879](https://github.com/knsv/mermaid/pull/879) ([dependabot[bot]](https://github.com/apps/dependabot))
-- I847 cross site scripting [\#878](https://github.com/knsv/mermaid/pull/878) ([knsv](https://github.com/knsv))
-- Bump lodash.mergewith from 4.6.1 to 4.6.2 [\#877](https://github.com/knsv/mermaid/pull/877) ([dependabot[bot]](https://github.com/apps/dependabot))
-- Adding docs into core repo again [\#876](https://github.com/knsv/mermaid/pull/876) ([knsv](https://github.com/knsv))
-- Bump lodash from 4.17.11 to 4.17.13 [\#875](https://github.com/knsv/mermaid/pull/875) ([dependabot[bot]](https://github.com/apps/dependabot))
-- feat\(stale.yml\): update issue label and bot comment [\#874](https://github.com/knsv/mermaid/pull/874) ([ThePenguin1140](https://github.com/ThePenguin1140))
-- Feature/allow inclusive enddates [\#872](https://github.com/knsv/mermaid/pull/872) ([ThePenguin1140](https://github.com/ThePenguin1140))
-- Adding trapezoid and inverse trapezoid vertex options. [\#741](https://github.com/knsv/mermaid/pull/741) ([adamwulf](https://github.com/adamwulf))
+-   Trimming whitespace after participant id [\#882](https://github.com/knsv/mermaid/pull/882) ([IOrlandoni](https://github.com/IOrlandoni))
+-   chore\(deps\): bump atob from 2.0.3 to 2.1.2 [\#881](https://github.com/knsv/mermaid/pull/881) ([dependabot[bot]](https://github.com/apps/dependabot))
+-   chore\(deps\): bump fstream from 1.0.11 to 1.0.12 [\#880](https://github.com/knsv/mermaid/pull/880) ([dependabot[bot]](https://github.com/apps/dependabot))
+-   chore\(deps\): bump js-yaml from 3.12.0 to 3.13.1 [\#879](https://github.com/knsv/mermaid/pull/879) ([dependabot[bot]](https://github.com/apps/dependabot))
+-   I847 cross site scripting [\#878](https://github.com/knsv/mermaid/pull/878) ([knsv](https://github.com/knsv))
+-   Bump lodash.mergewith from 4.6.1 to 4.6.2 [\#877](https://github.com/knsv/mermaid/pull/877) ([dependabot[bot]](https://github.com/apps/dependabot))
+-   Adding docs into core repo again [\#876](https://github.com/knsv/mermaid/pull/876) ([knsv](https://github.com/knsv))
+-   Bump lodash from 4.17.11 to 4.17.13 [\#875](https://github.com/knsv/mermaid/pull/875) ([dependabot[bot]](https://github.com/apps/dependabot))
+-   feat\(stale.yml\): update issue label and bot comment [\#874](https://github.com/knsv/mermaid/pull/874) ([ThePenguin1140](https://github.com/ThePenguin1140))
+-   Feature/allow inclusive enddates [\#872](https://github.com/knsv/mermaid/pull/872) ([ThePenguin1140](https://github.com/ThePenguin1140))
+-   Adding trapezoid and inverse trapezoid vertex options. [\#741](https://github.com/knsv/mermaid/pull/741) ([adamwulf](https://github.com/adamwulf))
 
 ## [8.1.0](https://github.com/knsv/mermaid/tree/8.1.0) (2019-06-25)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/7.0.5...8.1.0)
 
 **Closed issues:**
 
-- Gantt and sequence diagram do not render [\#853](https://github.com/knsv/mermaid/issues/853)
-- margins around flowchart are not balanced [\#852](https://github.com/knsv/mermaid/issues/852)
-- Smaller bundles [\#843](https://github.com/knsv/mermaid/issues/843)
-- unicode in labels [\#776](https://github.com/knsv/mermaid/issues/776)
-- Hard-changing drawing  of arrows per edge type [\#775](https://github.com/knsv/mermaid/issues/775)
-- SequenceDiagram wrong [\#773](https://github.com/knsv/mermaid/issues/773)
-- Render mermaid on github pages with simple code  [\#772](https://github.com/knsv/mermaid/issues/772)
-- FlowChart - large space between text and the image [\#754](https://github.com/knsv/mermaid/issues/754)
-- Class Diagram Issues when using Mermaid in Stackedit [\#748](https://github.com/knsv/mermaid/issues/748)
-- Multi-platform CI [\#744](https://github.com/knsv/mermaid/issues/744)
-- gantt: sections can't have a colon [\#742](https://github.com/knsv/mermaid/issues/742)
-- Yarn build does not add mermaid.min.css to dist [\#732](https://github.com/knsv/mermaid/issues/732)
-- Is there a grammar / keyword / more than just the basic examples? [\#718](https://github.com/knsv/mermaid/issues/718)
-- Click event and react component [\#717](https://github.com/knsv/mermaid/issues/717)
-- Long text going outside the box [\#706](https://github.com/knsv/mermaid/issues/706)
-- How to migrate from yUML to mermaid? [\#704](https://github.com/knsv/mermaid/issues/704)
-- Issue on Dynamic Creation in PHP [\#690](https://github.com/knsv/mermaid/issues/690)
-- `click "\#target"` and `click "http://url"` should create regular links [\#689](https://github.com/knsv/mermaid/issues/689)
-- Support Chinese punctuation [\#687](https://github.com/knsv/mermaid/issues/687)
-- \[Question\] Proper way to install on Mac?  [\#681](https://github.com/knsv/mermaid/issues/681)
-- Has Mermaid a graphical interface to make diagrams?  [\#668](https://github.com/knsv/mermaid/issues/668)
-- mermaid installation on debian  [\#649](https://github.com/knsv/mermaid/issues/649)
-- "Cannot activate" in sequenceDiagram [\#647](https://github.com/knsv/mermaid/issues/647)
-- Link \("click" statement\) in flowchart does not work in exported SVG [\#646](https://github.com/knsv/mermaid/issues/646)
-- How to pass styling  [\#639](https://github.com/knsv/mermaid/issues/639)
-- The live editor cant show seq diagram with notes for 8.0.0-alpha.3 [\#638](https://github.com/knsv/mermaid/issues/638)
-- import mermaid.css with ES6 + NPM [\#634](https://github.com/knsv/mermaid/issues/634)
-- Actor line cuts through other elements [\#633](https://github.com/knsv/mermaid/issues/633)
-- Graph TD line out of the picture \(left side\) [\#630](https://github.com/knsv/mermaid/issues/630)
-- Flowchart labels appear "cutoff"  [\#628](https://github.com/knsv/mermaid/issues/628)
-- Uncaught TypeError: \_.constant is not a function \(mermaid.js\)  [\#626](https://github.com/knsv/mermaid/issues/626)
-- Missing tags and releases for newer versions [\#623](https://github.com/knsv/mermaid/issues/623)
-- Mermaid and Leo / Leo Vue [\#622](https://github.com/knsv/mermaid/issues/622)
-- mermaidAPI gantt Vue.js [\#621](https://github.com/knsv/mermaid/issues/621)
-- Gantt sections are not separated by colors - Fix: set numberSectionStyles to 4 instead of 3 [\#620](https://github.com/knsv/mermaid/issues/620)
-- how to get mermaidAPI? [\#617](https://github.com/knsv/mermaid/issues/617)
-- Error in startOnLoad documentation? [\#616](https://github.com/knsv/mermaid/issues/616)
-- Example export to SVG generates error [\#614](https://github.com/knsv/mermaid/issues/614)
-- The new online editor does not support previously generated links [\#613](https://github.com/knsv/mermaid/issues/613)
-- Grammar / Syntax documentation for flowcharts [\#607](https://github.com/knsv/mermaid/issues/607)
-- Mermaid does not work with d3.js [\#606](https://github.com/knsv/mermaid/issues/606)
-- Why does this code's flowchart lines get cut-off on screen? [\#604](https://github.com/knsv/mermaid/issues/604)
-- click keyword does not fire my callback \(on the demo Website too\) [\#603](https://github.com/knsv/mermaid/issues/603)
-- Online Editor fails to show exported SVG [\#601](https://github.com/knsv/mermaid/issues/601)
-- Just saying thanks! [\#597](https://github.com/knsv/mermaid/issues/597)
-- stylesheet crashed with other library like abcjs [\#596](https://github.com/knsv/mermaid/issues/596)
-- Missing connection [\#594](https://github.com/knsv/mermaid/issues/594)
-- How to use mermaid on node.js restful api? [\#593](https://github.com/knsv/mermaid/issues/593)
-- Remove status code [\#589](https://github.com/knsv/mermaid/issues/589)
-- Golang based editor [\#588](https://github.com/knsv/mermaid/issues/588)
-- sequenceDiagram -\> notetext css font is hardcoded [\#587](https://github.com/knsv/mermaid/issues/587)
-- Multiple graph in the live editor [\#586](https://github.com/knsv/mermaid/issues/586)
-- All \<svg\> elements in page are colored black [\#584](https://github.com/knsv/mermaid/issues/584)
-- Styling: classes aren't applied to elements. [\#582](https://github.com/knsv/mermaid/issues/582)
-- Rounded connections [\#580](https://github.com/knsv/mermaid/issues/580)
-- Arrows are not being shown correctly in the dark theme [\#578](https://github.com/knsv/mermaid/issues/578)
-- The documentation for CLI seems outdated. [\#572](https://github.com/knsv/mermaid/issues/572)
-- No effect of click event:can not open link [\#571](https://github.com/knsv/mermaid/issues/571)
-- Text colors are not correct in VSCODE [\#570](https://github.com/knsv/mermaid/issues/570)
-- Nodes aren't aligned properly \(just need an explanation\) [\#568](https://github.com/knsv/mermaid/issues/568)
-- setting margin around figure in R [\#567](https://github.com/knsv/mermaid/issues/567)
-- Arrows should Come out in upward and Downward direction from decision Node [\#566](https://github.com/knsv/mermaid/issues/566)
-- TypeError: Cannot read property 'select' of undefined [\#563](https://github.com/knsv/mermaid/issues/563)
-- A little bug [\#557](https://github.com/knsv/mermaid/issues/557)
-- Japanese text appears garbled [\#554](https://github.com/knsv/mermaid/issues/554)
-- classdiagram not works in mermaid live\_editor  [\#553](https://github.com/knsv/mermaid/issues/553)
-- font awesome in link text? [\#546](https://github.com/knsv/mermaid/issues/546)
-- q: heard of the cosmogol standard? [\#545](https://github.com/knsv/mermaid/issues/545)
-- Arrow heads missing \(cli, 7.0.3\) [\#544](https://github.com/knsv/mermaid/issues/544)
-- No Edge Boxes if useHtmlLabels=false [\#541](https://github.com/knsv/mermaid/issues/541)
-- how to change mermaid text color or line text block color？ [\#534](https://github.com/knsv/mermaid/issues/534)
-- FlowChart visualization broken when downloading from live editor [\#533](https://github.com/knsv/mermaid/issues/533)
-- Can't get flowchart to render paths at the top of the diagram; I even tried the online editor and that shows the same issue. Thoughts? [\#532](https://github.com/knsv/mermaid/issues/532)
-- live editor make browser\(safari on macOS&iOS\) not longer respond [\#531](https://github.com/knsv/mermaid/issues/531)
-- css classes need a prefix/namespace [\#527](https://github.com/knsv/mermaid/issues/527)
-- input activate/deactivate cause safari unresponding [\#521](https://github.com/knsv/mermaid/issues/521)
-- Cannot Render the Mermaid Graph to PDF ? [\#520](https://github.com/knsv/mermaid/issues/520)
-- clicking links works from inset in subgraph but not from nodes [\#516](https://github.com/knsv/mermaid/issues/516)
-- Strange syntax error - when importing mermaid.js [\#515](https://github.com/knsv/mermaid/issues/515)
-- gantt x-axis display [\#510](https://github.com/knsv/mermaid/issues/510)
-- phantomjs renamed to phantomjs-prebuilt [\#508](https://github.com/knsv/mermaid/issues/508)
-- issue when using sphinxcontrib-mermaid extension for sphinx [\#507](https://github.com/knsv/mermaid/issues/507)
-- layout of docs page looks broken [\#504](https://github.com/knsv/mermaid/issues/504)
-- Problem showing graph with php on localhost [\#502](https://github.com/knsv/mermaid/issues/502)
-- logLevel's option doesnt work at 7.0.0 [\#501](https://github.com/knsv/mermaid/issues/501)
-- How do I get the log for a render or parse attempt? [\#500](https://github.com/knsv/mermaid/issues/500)
-- Mermaid neutral style style to built in latest release [\#499](https://github.com/knsv/mermaid/issues/499)
-- Any plans for adding a typescript definition file? [\#495](https://github.com/knsv/mermaid/issues/495)
-- Gantt diagrams too narrow [\#493](https://github.com/knsv/mermaid/issues/493)
-- Flowchart edge labels placement [\#490](https://github.com/knsv/mermaid/issues/490)
-- Very different styles when rendering as png vs. svg [\#489](https://github.com/knsv/mermaid/issues/489)
-- New editor that supports mermaid: Caret [\#488](https://github.com/knsv/mermaid/issues/488)
-- Gant PNG margin  [\#486](https://github.com/knsv/mermaid/issues/486)
-- ReferenceError: window is not defined [\#485](https://github.com/knsv/mermaid/issues/485)
-- Menu and layout bugs in docs [\#484](https://github.com/knsv/mermaid/issues/484)
-- Mermaid resets some of the page CSS styles [\#482](https://github.com/knsv/mermaid/issues/482)
-- Arrows rendering incorrectly in online editor [\#480](https://github.com/knsv/mermaid/issues/480)
-- CSS stroke-dasharray ignored by browsers but not other viewers [\#474](https://github.com/knsv/mermaid/issues/474)
-- mermaid - Browser Support issue [\#472](https://github.com/knsv/mermaid/issues/472)
-- Totally love mermaid I might pop! [\#471](https://github.com/knsv/mermaid/issues/471)
-- Sequence Diagram: Missing x on async arrows \(png\) [\#469](https://github.com/knsv/mermaid/issues/469)
-- live editor: the svg file rendered from graph is not supported by browsers [\#468](https://github.com/knsv/mermaid/issues/468)
-- Not found css [\#462](https://github.com/knsv/mermaid/issues/462)
-- Phantomjs Dependency [\#461](https://github.com/knsv/mermaid/issues/461)
-- Mermaid cli not working for subgraphs [\#459](https://github.com/knsv/mermaid/issues/459)
-- Support for notes across multiple participants? [\#458](https://github.com/knsv/mermaid/issues/458)
-- Related to Issue \#329: Phantomjs issues. [\#455](https://github.com/knsv/mermaid/issues/455)
-- Add a click style [\#426](https://github.com/knsv/mermaid/issues/426)
-- Add Parallel block \(par\) to sequence diagrams [\#425](https://github.com/knsv/mermaid/issues/425)
-- updating shapes after the flow chart rendering complete [\#424](https://github.com/knsv/mermaid/issues/424)
-- can't catch parse error Maximum call stack size exceeded on safari [\#421](https://github.com/knsv/mermaid/issues/421)
-- Arrows endings are missing [\#419](https://github.com/knsv/mermaid/issues/419)
-- shouldn't mermaid become more like Markdown ? [\#417](https://github.com/knsv/mermaid/issues/417)
-- Live editor show rendered diagram if syntax invalid [\#415](https://github.com/knsv/mermaid/issues/415)
-- Live editor sticky sidebar [\#414](https://github.com/knsv/mermaid/issues/414)
-- Linkstyle stroke does not work [\#410](https://github.com/knsv/mermaid/issues/410)
-- flowchart id's with dots in them .. break links  [\#408](https://github.com/knsv/mermaid/issues/408)
-- Flowchart: Link text beginning with lowercase 'o' causes flowchart to break [\#407](https://github.com/knsv/mermaid/issues/407)
-- Some chinese character will case Safari no responding. [\#405](https://github.com/knsv/mermaid/issues/405)
-- Cannot center-justify text in nodes? [\#397](https://github.com/knsv/mermaid/issues/397)
-- Edge labels should have white background in live editor [\#396](https://github.com/knsv/mermaid/issues/396)
-- Live editor does not support activate/deactivate [\#394](https://github.com/knsv/mermaid/issues/394)
-- Styling subgraph? [\#391](https://github.com/knsv/mermaid/issues/391)
-- Update live editor to version 6.0.0 [\#387](https://github.com/knsv/mermaid/issues/387)
-- sequence diagram config issue [\#385](https://github.com/knsv/mermaid/issues/385)
-- How to add newline in the text [\#384](https://github.com/knsv/mermaid/issues/384)
-- PhantomJS crashes on a large graph [\#380](https://github.com/knsv/mermaid/issues/380)
-- Finnish support for class diagrams using plantuml syntax  [\#377](https://github.com/knsv/mermaid/issues/377)
-- mermaidAPI.render generated different svg code from mermaid.int\(\) [\#374](https://github.com/knsv/mermaid/issues/374)
-- Put your own action on the chart [\#372](https://github.com/knsv/mermaid/issues/372)
-- when declaring participants the elements are generated twice [\#370](https://github.com/knsv/mermaid/issues/370)
-- Example Flowchart is cut in display \(Chrome\). [\#368](https://github.com/knsv/mermaid/issues/368)
-- Add shebang support to diagrams [\#365](https://github.com/knsv/mermaid/issues/365)
-- Silencing CLI output [\#352](https://github.com/knsv/mermaid/issues/352)
-- SequenceDiagram: 3+ Alternative Paths [\#348](https://github.com/knsv/mermaid/issues/348)
-- Smaller height of actor boxes [\#342](https://github.com/knsv/mermaid/issues/342)
-- Question: lib/phantomscript.js - foreignObjects in SVG - related to \#58 [\#340](https://github.com/knsv/mermaid/issues/340)
-- npm test fails on osx being blocked at Can not load "PhantomJS", it is not registered! [\#337](https://github.com/knsv/mermaid/issues/337)
-- Tabs & subgraphs cause rendering error [\#336](https://github.com/knsv/mermaid/issues/336)
-- Display question: right angles [\#335](https://github.com/knsv/mermaid/issues/335)
-- No Arrows rendered v0.5.8 [\#330](https://github.com/knsv/mermaid/issues/330)
-- mermaid -v filename.mmd gives You must specify at least one source file. [\#328](https://github.com/knsv/mermaid/issues/328)
-- You had errors in your syntax. Use --help for further information. [\#327](https://github.com/knsv/mermaid/issues/327)
-- Allow alternate arrow syntax that doesn't close html comments [\#322](https://github.com/knsv/mermaid/issues/322)
-- Comment in subgraph [\#319](https://github.com/knsv/mermaid/issues/319)
-- Update graph [\#311](https://github.com/knsv/mermaid/issues/311)
-- css conflicts with boostrap's css [\#308](https://github.com/knsv/mermaid/issues/308)
-- Can not get click event to fire. [\#306](https://github.com/knsv/mermaid/issues/306)
-- Fix phantomjs2 compatibility [\#304](https://github.com/knsv/mermaid/issues/304)
-- Flowcharts do not work in native IE11 [\#303](https://github.com/knsv/mermaid/issues/303)
-- Integration with remark.js - tutorial added [\#302](https://github.com/knsv/mermaid/issues/302)
-- Theme for dark background [\#301](https://github.com/knsv/mermaid/issues/301)
-- Sequence diagram Loops: changing boxMargin spoils the "loop" notation [\#299](https://github.com/knsv/mermaid/issues/299)
-- src/mermaid.js generates bad code [\#297](https://github.com/knsv/mermaid/issues/297)
-- Fresh fork: jasmine tests fail [\#294](https://github.com/knsv/mermaid/issues/294)
-- CSS clash [\#292](https://github.com/knsv/mermaid/issues/292)
-- Mermaid does not work in Chrome 48 [\#281](https://github.com/knsv/mermaid/issues/281)
-- node click is not effective [\#272](https://github.com/knsv/mermaid/issues/272)
-- circle and ellipse cannot change color by classDef [\#271](https://github.com/knsv/mermaid/issues/271)
-- \[Feature request\] gantt diagram axis format [\#269](https://github.com/knsv/mermaid/issues/269)
-- Not Able to See Labels even htmlLabels:false added [\#268](https://github.com/knsv/mermaid/issues/268)
-- npm run watch doesn’t work due missing dependencies [\#266](https://github.com/knsv/mermaid/issues/266)
-- label out of node  [\#262](https://github.com/knsv/mermaid/issues/262)
-- IE11 Support issue [\#261](https://github.com/knsv/mermaid/issues/261)
-- mermaid without browser [\#260](https://github.com/knsv/mermaid/issues/260)
-- Insufficient capacity of gantt diagrams [\#226](https://github.com/knsv/mermaid/issues/226)
-- some WARN about installion [\#222](https://github.com/knsv/mermaid/issues/222)
-- Live editor offline access [\#217](https://github.com/knsv/mermaid/issues/217)
-- suggest: code highlight mode config for editors [\#212](https://github.com/knsv/mermaid/issues/212)
-- Uncaught RangeError: Maximum call stack size exceeded [\#189](https://github.com/knsv/mermaid/issues/189)
-- Implement render function for server side rendering using phantomjs [\#169](https://github.com/knsv/mermaid/issues/169)
-- Styling label texts [\#50](https://github.com/knsv/mermaid/issues/50)
-- Graphviz DOT syntax [\#5](https://github.com/knsv/mermaid/issues/5)
+-   Gantt and sequence diagram do not render [\#853](https://github.com/knsv/mermaid/issues/853)
+-   margins around flowchart are not balanced [\#852](https://github.com/knsv/mermaid/issues/852)
+-   Smaller bundles [\#843](https://github.com/knsv/mermaid/issues/843)
+-   unicode in labels [\#776](https://github.com/knsv/mermaid/issues/776)
+-   Hard-changing drawing of arrows per edge type [\#775](https://github.com/knsv/mermaid/issues/775)
+-   SequenceDiagram wrong [\#773](https://github.com/knsv/mermaid/issues/773)
+-   Render mermaid on github pages with simple code [\#772](https://github.com/knsv/mermaid/issues/772)
+-   FlowChart - large space between text and the image [\#754](https://github.com/knsv/mermaid/issues/754)
+-   Class Diagram Issues when using Mermaid in Stackedit [\#748](https://github.com/knsv/mermaid/issues/748)
+-   Multi-platform CI [\#744](https://github.com/knsv/mermaid/issues/744)
+-   gantt: sections can't have a colon [\#742](https://github.com/knsv/mermaid/issues/742)
+-   Yarn build does not add mermaid.min.css to dist [\#732](https://github.com/knsv/mermaid/issues/732)
+-   Is there a grammar / keyword / more than just the basic examples? [\#718](https://github.com/knsv/mermaid/issues/718)
+-   Click event and react component [\#717](https://github.com/knsv/mermaid/issues/717)
+-   Long text going outside the box [\#706](https://github.com/knsv/mermaid/issues/706)
+-   How to migrate from yUML to mermaid? [\#704](https://github.com/knsv/mermaid/issues/704)
+-   Issue on Dynamic Creation in PHP [\#690](https://github.com/knsv/mermaid/issues/690)
+-   `click "\#target"` and `click "http://url"` should create regular links [\#689](https://github.com/knsv/mermaid/issues/689)
+-   Support Chinese punctuation [\#687](https://github.com/knsv/mermaid/issues/687)
+-   \[Question\] Proper way to install on Mac? [\#681](https://github.com/knsv/mermaid/issues/681)
+-   Has Mermaid a graphical interface to make diagrams? [\#668](https://github.com/knsv/mermaid/issues/668)
+-   mermaid installation on debian [\#649](https://github.com/knsv/mermaid/issues/649)
+-   "Cannot activate" in sequenceDiagram [\#647](https://github.com/knsv/mermaid/issues/647)
+-   Link \("click" statement\) in flowchart does not work in exported SVG [\#646](https://github.com/knsv/mermaid/issues/646)
+-   How to pass styling [\#639](https://github.com/knsv/mermaid/issues/639)
+-   The live editor cant show seq diagram with notes for 8.0.0-alpha.3 [\#638](https://github.com/knsv/mermaid/issues/638)
+-   import mermaid.css with ES6 + NPM [\#634](https://github.com/knsv/mermaid/issues/634)
+-   Actor line cuts through other elements [\#633](https://github.com/knsv/mermaid/issues/633)
+-   Graph TD line out of the picture \(left side\) [\#630](https://github.com/knsv/mermaid/issues/630)
+-   Flowchart labels appear "cutoff" [\#628](https://github.com/knsv/mermaid/issues/628)
+-   Uncaught TypeError: \_.constant is not a function \(mermaid.js\) [\#626](https://github.com/knsv/mermaid/issues/626)
+-   Missing tags and releases for newer versions [\#623](https://github.com/knsv/mermaid/issues/623)
+-   Mermaid and Leo / Leo Vue [\#622](https://github.com/knsv/mermaid/issues/622)
+-   mermaidAPI gantt Vue.js [\#621](https://github.com/knsv/mermaid/issues/621)
+-   Gantt sections are not separated by colors - Fix: set numberSectionStyles to 4 instead of 3 [\#620](https://github.com/knsv/mermaid/issues/620)
+-   how to get mermaidAPI? [\#617](https://github.com/knsv/mermaid/issues/617)
+-   Error in startOnLoad documentation? [\#616](https://github.com/knsv/mermaid/issues/616)
+-   Example export to SVG generates error [\#614](https://github.com/knsv/mermaid/issues/614)
+-   The new online editor does not support previously generated links [\#613](https://github.com/knsv/mermaid/issues/613)
+-   Grammar / Syntax documentation for flowcharts [\#607](https://github.com/knsv/mermaid/issues/607)
+-   Mermaid does not work with d3.js [\#606](https://github.com/knsv/mermaid/issues/606)
+-   Why does this code's flowchart lines get cut-off on screen? [\#604](https://github.com/knsv/mermaid/issues/604)
+-   click keyword does not fire my callback \(on the demo Website too\) [\#603](https://github.com/knsv/mermaid/issues/603)
+-   Online Editor fails to show exported SVG [\#601](https://github.com/knsv/mermaid/issues/601)
+-   Just saying thanks! [\#597](https://github.com/knsv/mermaid/issues/597)
+-   stylesheet crashed with other library like abcjs [\#596](https://github.com/knsv/mermaid/issues/596)
+-   Missing connection [\#594](https://github.com/knsv/mermaid/issues/594)
+-   How to use mermaid on node.js restful api? [\#593](https://github.com/knsv/mermaid/issues/593)
+-   Remove status code [\#589](https://github.com/knsv/mermaid/issues/589)
+-   Golang based editor [\#588](https://github.com/knsv/mermaid/issues/588)
+-   sequenceDiagram -\> notetext css font is hardcoded [\#587](https://github.com/knsv/mermaid/issues/587)
+-   Multiple graph in the live editor [\#586](https://github.com/knsv/mermaid/issues/586)
+-   All \<svg\> elements in page are colored black [\#584](https://github.com/knsv/mermaid/issues/584)
+-   Styling: classes aren't applied to elements. [\#582](https://github.com/knsv/mermaid/issues/582)
+-   Rounded connections [\#580](https://github.com/knsv/mermaid/issues/580)
+-   Arrows are not being shown correctly in the dark theme [\#578](https://github.com/knsv/mermaid/issues/578)
+-   The documentation for CLI seems outdated. [\#572](https://github.com/knsv/mermaid/issues/572)
+-   No effect of click event:can not open link [\#571](https://github.com/knsv/mermaid/issues/571)
+-   Text colors are not correct in VSCODE [\#570](https://github.com/knsv/mermaid/issues/570)
+-   Nodes aren't aligned properly \(just need an explanation\) [\#568](https://github.com/knsv/mermaid/issues/568)
+-   setting margin around figure in R [\#567](https://github.com/knsv/mermaid/issues/567)
+-   Arrows should Come out in upward and Downward direction from decision Node [\#566](https://github.com/knsv/mermaid/issues/566)
+-   TypeError: Cannot read property 'select' of undefined [\#563](https://github.com/knsv/mermaid/issues/563)
+-   A little bug [\#557](https://github.com/knsv/mermaid/issues/557)
+-   Japanese text appears garbled [\#554](https://github.com/knsv/mermaid/issues/554)
+-   classdiagram not works in mermaid live_editor [\#553](https://github.com/knsv/mermaid/issues/553)
+-   font awesome in link text? [\#546](https://github.com/knsv/mermaid/issues/546)
+-   q: heard of the cosmogol standard? [\#545](https://github.com/knsv/mermaid/issues/545)
+-   Arrow heads missing \(cli, 7.0.3\) [\#544](https://github.com/knsv/mermaid/issues/544)
+-   No Edge Boxes if useHtmlLabels=false [\#541](https://github.com/knsv/mermaid/issues/541)
+-   how to change mermaid text color or line text block color？ [\#534](https://github.com/knsv/mermaid/issues/534)
+-   FlowChart visualization broken when downloading from live editor [\#533](https://github.com/knsv/mermaid/issues/533)
+-   Can't get flowchart to render paths at the top of the diagram; I even tried the online editor and that shows the same issue. Thoughts? [\#532](https://github.com/knsv/mermaid/issues/532)
+-   live editor make browser\(safari on macOS&iOS\) not longer respond [\#531](https://github.com/knsv/mermaid/issues/531)
+-   css classes need a prefix/namespace [\#527](https://github.com/knsv/mermaid/issues/527)
+-   input activate/deactivate cause safari unresponding [\#521](https://github.com/knsv/mermaid/issues/521)
+-   Cannot Render the Mermaid Graph to PDF ? [\#520](https://github.com/knsv/mermaid/issues/520)
+-   clicking links works from inset in subgraph but not from nodes [\#516](https://github.com/knsv/mermaid/issues/516)
+-   Strange syntax error - when importing mermaid.js [\#515](https://github.com/knsv/mermaid/issues/515)
+-   gantt x-axis display [\#510](https://github.com/knsv/mermaid/issues/510)
+-   phantomjs renamed to phantomjs-prebuilt [\#508](https://github.com/knsv/mermaid/issues/508)
+-   issue when using sphinxcontrib-mermaid extension for sphinx [\#507](https://github.com/knsv/mermaid/issues/507)
+-   layout of docs page looks broken [\#504](https://github.com/knsv/mermaid/issues/504)
+-   Problem showing graph with php on localhost [\#502](https://github.com/knsv/mermaid/issues/502)
+-   logLevel's option doesnt work at 7.0.0 [\#501](https://github.com/knsv/mermaid/issues/501)
+-   How do I get the log for a render or parse attempt? [\#500](https://github.com/knsv/mermaid/issues/500)
+-   Mermaid neutral style style to built in latest release [\#499](https://github.com/knsv/mermaid/issues/499)
+-   Any plans for adding a typescript definition file? [\#495](https://github.com/knsv/mermaid/issues/495)
+-   Gantt diagrams too narrow [\#493](https://github.com/knsv/mermaid/issues/493)
+-   Flowchart edge labels placement [\#490](https://github.com/knsv/mermaid/issues/490)
+-   Very different styles when rendering as png vs. svg [\#489](https://github.com/knsv/mermaid/issues/489)
+-   New editor that supports mermaid: Caret [\#488](https://github.com/knsv/mermaid/issues/488)
+-   Gant PNG margin [\#486](https://github.com/knsv/mermaid/issues/486)
+-   ReferenceError: window is not defined [\#485](https://github.com/knsv/mermaid/issues/485)
+-   Menu and layout bugs in docs [\#484](https://github.com/knsv/mermaid/issues/484)
+-   Mermaid resets some of the page CSS styles [\#482](https://github.com/knsv/mermaid/issues/482)
+-   Arrows rendering incorrectly in online editor [\#480](https://github.com/knsv/mermaid/issues/480)
+-   CSS stroke-dasharray ignored by browsers but not other viewers [\#474](https://github.com/knsv/mermaid/issues/474)
+-   mermaid - Browser Support issue [\#472](https://github.com/knsv/mermaid/issues/472)
+-   Totally love mermaid I might pop! [\#471](https://github.com/knsv/mermaid/issues/471)
+-   Sequence Diagram: Missing x on async arrows \(png\) [\#469](https://github.com/knsv/mermaid/issues/469)
+-   live editor: the svg file rendered from graph is not supported by browsers [\#468](https://github.com/knsv/mermaid/issues/468)
+-   Not found css [\#462](https://github.com/knsv/mermaid/issues/462)
+-   Phantomjs Dependency [\#461](https://github.com/knsv/mermaid/issues/461)
+-   Mermaid cli not working for subgraphs [\#459](https://github.com/knsv/mermaid/issues/459)
+-   Support for notes across multiple participants? [\#458](https://github.com/knsv/mermaid/issues/458)
+-   Related to Issue \#329: Phantomjs issues. [\#455](https://github.com/knsv/mermaid/issues/455)
+-   Add a click style [\#426](https://github.com/knsv/mermaid/issues/426)
+-   Add Parallel block \(par\) to sequence diagrams [\#425](https://github.com/knsv/mermaid/issues/425)
+-   updating shapes after the flow chart rendering complete [\#424](https://github.com/knsv/mermaid/issues/424)
+-   can't catch parse error Maximum call stack size exceeded on safari [\#421](https://github.com/knsv/mermaid/issues/421)
+-   Arrows endings are missing [\#419](https://github.com/knsv/mermaid/issues/419)
+-   shouldn't mermaid become more like Markdown ? [\#417](https://github.com/knsv/mermaid/issues/417)
+-   Live editor show rendered diagram if syntax invalid [\#415](https://github.com/knsv/mermaid/issues/415)
+-   Live editor sticky sidebar [\#414](https://github.com/knsv/mermaid/issues/414)
+-   Linkstyle stroke does not work [\#410](https://github.com/knsv/mermaid/issues/410)
+-   flowchart id's with dots in them .. break links [\#408](https://github.com/knsv/mermaid/issues/408)
+-   Flowchart: Link text beginning with lowercase 'o' causes flowchart to break [\#407](https://github.com/knsv/mermaid/issues/407)
+-   Some chinese character will case Safari no responding. [\#405](https://github.com/knsv/mermaid/issues/405)
+-   Cannot center-justify text in nodes? [\#397](https://github.com/knsv/mermaid/issues/397)
+-   Edge labels should have white background in live editor [\#396](https://github.com/knsv/mermaid/issues/396)
+-   Live editor does not support activate/deactivate [\#394](https://github.com/knsv/mermaid/issues/394)
+-   Styling subgraph? [\#391](https://github.com/knsv/mermaid/issues/391)
+-   Update live editor to version 6.0.0 [\#387](https://github.com/knsv/mermaid/issues/387)
+-   sequence diagram config issue [\#385](https://github.com/knsv/mermaid/issues/385)
+-   How to add newline in the text [\#384](https://github.com/knsv/mermaid/issues/384)
+-   PhantomJS crashes on a large graph [\#380](https://github.com/knsv/mermaid/issues/380)
+-   Finnish support for class diagrams using plantuml syntax [\#377](https://github.com/knsv/mermaid/issues/377)
+-   mermaidAPI.render generated different svg code from mermaid.int\(\) [\#374](https://github.com/knsv/mermaid/issues/374)
+-   Put your own action on the chart [\#372](https://github.com/knsv/mermaid/issues/372)
+-   when declaring participants the elements are generated twice [\#370](https://github.com/knsv/mermaid/issues/370)
+-   Example Flowchart is cut in display \(Chrome\). [\#368](https://github.com/knsv/mermaid/issues/368)
+-   Add shebang support to diagrams [\#365](https://github.com/knsv/mermaid/issues/365)
+-   Silencing CLI output [\#352](https://github.com/knsv/mermaid/issues/352)
+-   SequenceDiagram: 3+ Alternative Paths [\#348](https://github.com/knsv/mermaid/issues/348)
+-   Smaller height of actor boxes [\#342](https://github.com/knsv/mermaid/issues/342)
+-   Question: lib/phantomscript.js - foreignObjects in SVG - related to \#58 [\#340](https://github.com/knsv/mermaid/issues/340)
+-   npm test fails on osx being blocked at Can not load "PhantomJS", it is not registered! [\#337](https://github.com/knsv/mermaid/issues/337)
+-   Tabs & subgraphs cause rendering error [\#336](https://github.com/knsv/mermaid/issues/336)
+-   Display question: right angles [\#335](https://github.com/knsv/mermaid/issues/335)
+-   No Arrows rendered v0.5.8 [\#330](https://github.com/knsv/mermaid/issues/330)
+-   mermaid -v filename.mmd gives You must specify at least one source file. [\#328](https://github.com/knsv/mermaid/issues/328)
+-   You had errors in your syntax. Use --help for further information. [\#327](https://github.com/knsv/mermaid/issues/327)
+-   Allow alternate arrow syntax that doesn't close html comments [\#322](https://github.com/knsv/mermaid/issues/322)
+-   Comment in subgraph [\#319](https://github.com/knsv/mermaid/issues/319)
+-   Update graph [\#311](https://github.com/knsv/mermaid/issues/311)
+-   css conflicts with boostrap's css [\#308](https://github.com/knsv/mermaid/issues/308)
+-   Can not get click event to fire. [\#306](https://github.com/knsv/mermaid/issues/306)
+-   Fix phantomjs2 compatibility [\#304](https://github.com/knsv/mermaid/issues/304)
+-   Flowcharts do not work in native IE11 [\#303](https://github.com/knsv/mermaid/issues/303)
+-   Integration with remark.js - tutorial added [\#302](https://github.com/knsv/mermaid/issues/302)
+-   Theme for dark background [\#301](https://github.com/knsv/mermaid/issues/301)
+-   Sequence diagram Loops: changing boxMargin spoils the "loop" notation [\#299](https://github.com/knsv/mermaid/issues/299)
+-   src/mermaid.js generates bad code [\#297](https://github.com/knsv/mermaid/issues/297)
+-   Fresh fork: jasmine tests fail [\#294](https://github.com/knsv/mermaid/issues/294)
+-   CSS clash [\#292](https://github.com/knsv/mermaid/issues/292)
+-   Mermaid does not work in Chrome 48 [\#281](https://github.com/knsv/mermaid/issues/281)
+-   node click is not effective [\#272](https://github.com/knsv/mermaid/issues/272)
+-   circle and ellipse cannot change color by classDef [\#271](https://github.com/knsv/mermaid/issues/271)
+-   \[Feature request\] gantt diagram axis format [\#269](https://github.com/knsv/mermaid/issues/269)
+-   Not Able to See Labels even htmlLabels:false added [\#268](https://github.com/knsv/mermaid/issues/268)
+-   npm run watch doesn’t work due missing dependencies [\#266](https://github.com/knsv/mermaid/issues/266)
+-   label out of node [\#262](https://github.com/knsv/mermaid/issues/262)
+-   IE11 Support issue [\#261](https://github.com/knsv/mermaid/issues/261)
+-   mermaid without browser [\#260](https://github.com/knsv/mermaid/issues/260)
+-   Insufficient capacity of gantt diagrams [\#226](https://github.com/knsv/mermaid/issues/226)
+-   some WARN about installion [\#222](https://github.com/knsv/mermaid/issues/222)
+-   Live editor offline access [\#217](https://github.com/knsv/mermaid/issues/217)
+-   suggest: code highlight mode config for editors [\#212](https://github.com/knsv/mermaid/issues/212)
+-   Uncaught RangeError: Maximum call stack size exceeded [\#189](https://github.com/knsv/mermaid/issues/189)
+-   Implement render function for server side rendering using phantomjs [\#169](https://github.com/knsv/mermaid/issues/169)
+-   Styling label texts [\#50](https://github.com/knsv/mermaid/issues/50)
+-   Graphviz DOT syntax [\#5](https://github.com/knsv/mermaid/issues/5)
 
 **Merged pull requests:**
 
-- Remove console.log in classDB. [\#861](https://github.com/knsv/mermaid/pull/861) ([Arthaey](https://github.com/Arthaey))
-- Bump sshpk from 1.13.1 to 1.16.1 [\#851](https://github.com/knsv/mermaid/pull/851) ([dependabot[bot]](https://github.com/apps/dependabot))
-- Significantly smaller bundles [\#850](https://github.com/knsv/mermaid/pull/850) ([fabiospampinato](https://github.com/fabiospampinato))
-- Support styling of subgraphs [\#845](https://github.com/knsv/mermaid/pull/845) ([Qix-](https://github.com/Qix-))
-- fix dark theme loop labels not visible [\#837](https://github.com/knsv/mermaid/pull/837) ([jnnnnn](https://github.com/jnnnnn))
-- fix draw function can only call once [\#832](https://github.com/knsv/mermaid/pull/832) ([vaniship](https://github.com/vaniship))
-- Fix dotted lines not appearing in flowcharts when HTML labels disabled [\#828](https://github.com/knsv/mermaid/pull/828) ([stanhu](https://github.com/stanhu))
-- Fix issue with XML line breaks inside vertex labels [\#824](https://github.com/knsv/mermaid/pull/824) ([jsyang](https://github.com/jsyang))
-- fixed diagrams [\#810](https://github.com/knsv/mermaid/pull/810) ([0xflotus](https://github.com/0xflotus))
-- Clickable gantt tasks [\#804](https://github.com/knsv/mermaid/pull/804) ([abzicht](https://github.com/abzicht))
-- linkStyle now supports list of indexes with a few tests [\#798](https://github.com/knsv/mermaid/pull/798) ([ivan-danilov](https://github.com/ivan-danilov))
-- fix class diagram mermaid [\#795](https://github.com/knsv/mermaid/pull/795) ([DanShai](https://github.com/DanShai))
-- Added exclude weekdays to definition [\#792](https://github.com/knsv/mermaid/pull/792) ([jopapo](https://github.com/jopapo))
-- SVG link rendering [\#791](https://github.com/knsv/mermaid/pull/791) ([flying-sheep](https://github.com/flying-sheep))
-- Gantt milestones [\#788](https://github.com/knsv/mermaid/pull/788) ([gijswijs](https://github.com/gijswijs))
-- Remove duplicate code [\#768](https://github.com/knsv/mermaid/pull/768) ([znxkznxk1030](https://github.com/znxkznxk1030))
-- Render nodes as real links [\#765](https://github.com/knsv/mermaid/pull/765) ([flying-sheep](https://github.com/flying-sheep))
-- Support Multi-line Actor Descriptions [\#764](https://github.com/knsv/mermaid/pull/764) ([watsoncj](https://github.com/watsoncj))
-- Fix issue with marker-end. [\#757](https://github.com/knsv/mermaid/pull/757) ([gjlubbertsen](https://github.com/gjlubbertsen))
-- Make Class Diagrams usable in Stackedit and Live Editor [\#749](https://github.com/knsv/mermaid/pull/749) ([monsterkrampe](https://github.com/monsterkrampe))
-- Sequence numbers [\#722](https://github.com/knsv/mermaid/pull/722) ([paulbland](https://github.com/paulbland))
-- Add option for right angles [\#721](https://github.com/knsv/mermaid/pull/721) ([paulbland](https://github.com/paulbland))
-- Add nested activation classes [\#720](https://github.com/knsv/mermaid/pull/720) ([paulbland](https://github.com/paulbland))
-- wip: class diagram  cardinality display [\#705](https://github.com/knsv/mermaid/pull/705) ([Vrixyz](https://github.com/Vrixyz))
-- add comments about CSS in config [\#688](https://github.com/knsv/mermaid/pull/688) ([imma90](https://github.com/imma90))
-- SequenceDiagram: Add support for multiple alt else statements [\#641](https://github.com/knsv/mermaid/pull/641) ([sechel](https://github.com/sechel))
-- fix \#426 - add class .clickable on nodes with click function or link [\#598](https://github.com/knsv/mermaid/pull/598) ([thomasleveil](https://github.com/thomasleveil))
-- Spec fix 1 [\#595](https://github.com/knsv/mermaid/pull/595) ([frankschmitt](https://github.com/frankschmitt))
+-   Remove console.log in classDB. [\#861](https://github.com/knsv/mermaid/pull/861) ([Arthaey](https://github.com/Arthaey))
+-   Bump sshpk from 1.13.1 to 1.16.1 [\#851](https://github.com/knsv/mermaid/pull/851) ([dependabot[bot]](https://github.com/apps/dependabot))
+-   Significantly smaller bundles [\#850](https://github.com/knsv/mermaid/pull/850) ([fabiospampinato](https://github.com/fabiospampinato))
+-   Support styling of subgraphs [\#845](https://github.com/knsv/mermaid/pull/845) ([Qix-](https://github.com/Qix-))
+-   fix dark theme loop labels not visible [\#837](https://github.com/knsv/mermaid/pull/837) ([jnnnnn](https://github.com/jnnnnn))
+-   fix draw function can only call once [\#832](https://github.com/knsv/mermaid/pull/832) ([vaniship](https://github.com/vaniship))
+-   Fix dotted lines not appearing in flowcharts when HTML labels disabled [\#828](https://github.com/knsv/mermaid/pull/828) ([stanhu](https://github.com/stanhu))
+-   Fix issue with XML line breaks inside vertex labels [\#824](https://github.com/knsv/mermaid/pull/824) ([jsyang](https://github.com/jsyang))
+-   fixed diagrams [\#810](https://github.com/knsv/mermaid/pull/810) ([0xflotus](https://github.com/0xflotus))
+-   Clickable gantt tasks [\#804](https://github.com/knsv/mermaid/pull/804) ([abzicht](https://github.com/abzicht))
+-   linkStyle now supports list of indexes with a few tests [\#798](https://github.com/knsv/mermaid/pull/798) ([ivan-danilov](https://github.com/ivan-danilov))
+-   fix class diagram mermaid [\#795](https://github.com/knsv/mermaid/pull/795) ([DanShai](https://github.com/DanShai))
+-   Added exclude weekdays to definition [\#792](https://github.com/knsv/mermaid/pull/792) ([jopapo](https://github.com/jopapo))
+-   SVG link rendering [\#791](https://github.com/knsv/mermaid/pull/791) ([flying-sheep](https://github.com/flying-sheep))
+-   Gantt milestones [\#788](https://github.com/knsv/mermaid/pull/788) ([gijswijs](https://github.com/gijswijs))
+-   Remove duplicate code [\#768](https://github.com/knsv/mermaid/pull/768) ([znxkznxk1030](https://github.com/znxkznxk1030))
+-   Render nodes as real links [\#765](https://github.com/knsv/mermaid/pull/765) ([flying-sheep](https://github.com/flying-sheep))
+-   Support Multi-line Actor Descriptions [\#764](https://github.com/knsv/mermaid/pull/764) ([watsoncj](https://github.com/watsoncj))
+-   Fix issue with marker-end. [\#757](https://github.com/knsv/mermaid/pull/757) ([gjlubbertsen](https://github.com/gjlubbertsen))
+-   Make Class Diagrams usable in Stackedit and Live Editor [\#749](https://github.com/knsv/mermaid/pull/749) ([monsterkrampe](https://github.com/monsterkrampe))
+-   Sequence numbers [\#722](https://github.com/knsv/mermaid/pull/722) ([paulbland](https://github.com/paulbland))
+-   Add option for right angles [\#721](https://github.com/knsv/mermaid/pull/721) ([paulbland](https://github.com/paulbland))
+-   Add nested activation classes [\#720](https://github.com/knsv/mermaid/pull/720) ([paulbland](https://github.com/paulbland))
+-   wip: class diagram cardinality display [\#705](https://github.com/knsv/mermaid/pull/705) ([Vrixyz](https://github.com/Vrixyz))
+-   add comments about CSS in config [\#688](https://github.com/knsv/mermaid/pull/688) ([imma90](https://github.com/imma90))
+-   SequenceDiagram: Add support for multiple alt else statements [\#641](https://github.com/knsv/mermaid/pull/641) ([sechel](https://github.com/sechel))
+-   fix \#426 - add class .clickable on nodes with click function or link [\#598](https://github.com/knsv/mermaid/pull/598) ([thomasleveil](https://github.com/thomasleveil))
+-   Spec fix 1 [\#595](https://github.com/knsv/mermaid/pull/595) ([frankschmitt](https://github.com/frankschmitt))
 
 ## [7.0.5](https://github.com/knsv/mermaid/tree/7.0.5) (2017-09-01)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/7.0.3...7.0.5)
 
 **Closed issues:**
 
-- live editor latin error after update [\#560](https://github.com/knsv/mermaid/issues/560)
-- Simple full example in online documentation is broken [\#558](https://github.com/knsv/mermaid/issues/558)
-- Graph No Arrow Head v7.0.3 [\#543](https://github.com/knsv/mermaid/issues/543)
-- Conflict while using mermaid along with core-js [\#512](https://github.com/knsv/mermaid/issues/512)
-- Export to pdf on website [\#496](https://github.com/knsv/mermaid/issues/496)
-- New downstream project: Mermaid Preview for VSCode [\#442](https://github.com/knsv/mermaid/issues/442)
-- Can't Zoom the flowchart ? [\#399](https://github.com/knsv/mermaid/issues/399)
-- line labels are not rendered correctly in live editor [\#366](https://github.com/knsv/mermaid/issues/366)
-- mermaid-loader [\#361](https://github.com/knsv/mermaid/issues/361)
-- Are there any documentation or examples for classDiagram and gitGraph? [\#359](https://github.com/knsv/mermaid/issues/359)
-- \# character broken in 0.5.8 [\#347](https://github.com/knsv/mermaid/issues/347)
-- Documentation issue: CSS example is not visible [\#345](https://github.com/knsv/mermaid/issues/345)
-- Include documentation for command line usage [\#326](https://github.com/knsv/mermaid/issues/326)
-- Fresh fork: can't build dist [\#296](https://github.com/knsv/mermaid/issues/296)
-- Invalid value for \<svg\> attribute viewBox="0 0 -Infinity -Infinity" [\#291](https://github.com/knsv/mermaid/issues/291)
-- Webpack require fails [\#277](https://github.com/knsv/mermaid/issues/277)
-- New documentation - need improved logo [\#216](https://github.com/knsv/mermaid/issues/216)
+-   live editor latin error after update [\#560](https://github.com/knsv/mermaid/issues/560)
+-   Simple full example in online documentation is broken [\#558](https://github.com/knsv/mermaid/issues/558)
+-   Graph No Arrow Head v7.0.3 [\#543](https://github.com/knsv/mermaid/issues/543)
+-   Conflict while using mermaid along with core-js [\#512](https://github.com/knsv/mermaid/issues/512)
+-   Export to pdf on website [\#496](https://github.com/knsv/mermaid/issues/496)
+-   New downstream project: Mermaid Preview for VSCode [\#442](https://github.com/knsv/mermaid/issues/442)
+-   Can't Zoom the flowchart ? [\#399](https://github.com/knsv/mermaid/issues/399)
+-   line labels are not rendered correctly in live editor [\#366](https://github.com/knsv/mermaid/issues/366)
+-   mermaid-loader [\#361](https://github.com/knsv/mermaid/issues/361)
+-   Are there any documentation or examples for classDiagram and gitGraph? [\#359](https://github.com/knsv/mermaid/issues/359)
+-   \# character broken in 0.5.8 [\#347](https://github.com/knsv/mermaid/issues/347)
+-   Documentation issue: CSS example is not visible [\#345](https://github.com/knsv/mermaid/issues/345)
+-   Include documentation for command line usage [\#326](https://github.com/knsv/mermaid/issues/326)
+-   Fresh fork: can't build dist [\#296](https://github.com/knsv/mermaid/issues/296)
+-   Invalid value for \<svg\> attribute viewBox="0 0 -Infinity -Infinity" [\#291](https://github.com/knsv/mermaid/issues/291)
+-   Webpack require fails [\#277](https://github.com/knsv/mermaid/issues/277)
+-   New documentation - need improved logo [\#216](https://github.com/knsv/mermaid/issues/216)
 
 ## [7.0.3](https://github.com/knsv/mermaid/tree/7.0.3) (2017-06-04)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/7.0.2...7.0.3)
 
 **Closed issues:**
 
-- the documentation website is down [\#539](https://github.com/knsv/mermaid/issues/539)
-- Good example of interactivity with mermaidAPI [\#514](https://github.com/knsv/mermaid/issues/514)
+-   the documentation website is down [\#539](https://github.com/knsv/mermaid/issues/539)
+-   Good example of interactivity with mermaidAPI [\#514](https://github.com/knsv/mermaid/issues/514)
 
 ## [7.0.2](https://github.com/knsv/mermaid/tree/7.0.2) (2017-06-01)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/7.0.0...7.0.2)
 
 **Closed issues:**
 
-- CDN is not working [\#511](https://github.com/knsv/mermaid/issues/511)
-- A sampe sequenceDiagram crashes mermaid-cli [\#492](https://github.com/knsv/mermaid/issues/492)
-- Mermaid doesn't delete nodes when called multiple times [\#491](https://github.com/knsv/mermaid/issues/491)
-- API crashes on 2nd render\(\) call [\#478](https://github.com/knsv/mermaid/issues/478)
-- sequenceDiagram: dotted line for alt and empty bracket should be hidden [\#456](https://github.com/knsv/mermaid/issues/456)
-- SVG output \(almost\) not correct [\#434](https://github.com/knsv/mermaid/issues/434)
-- How to set axisFormatter of gantt in mermaid CLI? [\#428](https://github.com/knsv/mermaid/issues/428)
-- customizing link style with any color sets `fill` property to `black` instead of `none` [\#416](https://github.com/knsv/mermaid/issues/416)
-- New line at the end of SVG file [\#400](https://github.com/knsv/mermaid/issues/400)
-- CLI doesn't work [\#389](https://github.com/knsv/mermaid/issues/389)
-- Can't render subgraphs with htmlLabels: false [\#367](https://github.com/knsv/mermaid/issues/367)
-- Color arrowhead [\#362](https://github.com/knsv/mermaid/issues/362)
-- CLI: Invisible text, lines in SVG output [\#341](https://github.com/knsv/mermaid/issues/341)
+-   CDN is not working [\#511](https://github.com/knsv/mermaid/issues/511)
+-   A sampe sequenceDiagram crashes mermaid-cli [\#492](https://github.com/knsv/mermaid/issues/492)
+-   Mermaid doesn't delete nodes when called multiple times [\#491](https://github.com/knsv/mermaid/issues/491)
+-   API crashes on 2nd render\(\) call [\#478](https://github.com/knsv/mermaid/issues/478)
+-   sequenceDiagram: dotted line for alt and empty bracket should be hidden [\#456](https://github.com/knsv/mermaid/issues/456)
+-   SVG output \(almost\) not correct [\#434](https://github.com/knsv/mermaid/issues/434)
+-   How to set axisFormatter of gantt in mermaid CLI? [\#428](https://github.com/knsv/mermaid/issues/428)
+-   customizing link style with any color sets `fill` property to `black` instead of `none` [\#416](https://github.com/knsv/mermaid/issues/416)
+-   New line at the end of SVG file [\#400](https://github.com/knsv/mermaid/issues/400)
+-   CLI doesn't work [\#389](https://github.com/knsv/mermaid/issues/389)
+-   Can't render subgraphs with htmlLabels: false [\#367](https://github.com/knsv/mermaid/issues/367)
+-   Color arrowhead [\#362](https://github.com/knsv/mermaid/issues/362)
+-   CLI: Invisible text, lines in SVG output [\#341](https://github.com/knsv/mermaid/issues/341)
 
 **Merged pull requests:**
 
-- Update Travis config [\#538](https://github.com/knsv/mermaid/pull/538) ([tylerlong](https://github.com/tylerlong))
-- Fix spelling of 'you' in sequenceDiagram docs [\#537](https://github.com/knsv/mermaid/pull/537) ([ctruelson](https://github.com/ctruelson))
-- Improve CLI output [\#536](https://github.com/knsv/mermaid/pull/536) ([gibson042](https://github.com/gibson042))
-- Modernize mermaid [\#524](https://github.com/knsv/mermaid/pull/524) ([tylerlong](https://github.com/tylerlong))
-- Modernize mermaid [\#519](https://github.com/knsv/mermaid/pull/519) ([tylerlong](https://github.com/tylerlong))
-- Update CLI instructions [\#509](https://github.com/knsv/mermaid/pull/509) ([filipedeschamps](https://github.com/filipedeschamps))
-- Add style for classDiagram to dark/default theme [\#503](https://github.com/knsv/mermaid/pull/503) ([yudenzel](https://github.com/yudenzel))
-- Fix documentation for git graph. [\#498](https://github.com/knsv/mermaid/pull/498) ([gomlgs](https://github.com/gomlgs))
-- Fix links in documentations [\#497](https://github.com/knsv/mermaid/pull/497) ([saveman71](https://github.com/saveman71))
-- Update README.md with git graph sample [\#481](https://github.com/knsv/mermaid/pull/481) ([raghur](https://github.com/raghur))
-- Fix misspelling of “another” [\#479](https://github.com/knsv/mermaid/pull/479) ([stevenschobert](https://github.com/stevenschobert))
-- Fixed \#456 sequenceDiagram: dotted line for alt and empty bracket sho… [\#477](https://github.com/knsv/mermaid/pull/477) ([brookhong](https://github.com/brookhong))
-- Add viewbox attr to class diagram [\#473](https://github.com/knsv/mermaid/pull/473) ([gnkm](https://github.com/gnkm))
-- add par statement to sequenceDiagram [\#470](https://github.com/knsv/mermaid/pull/470) ([u-minor](https://github.com/u-minor))
+-   Update Travis config [\#538](https://github.com/knsv/mermaid/pull/538) ([tylerlong](https://github.com/tylerlong))
+-   Fix spelling of 'you' in sequenceDiagram docs [\#537](https://github.com/knsv/mermaid/pull/537) ([ctruelson](https://github.com/ctruelson))
+-   Improve CLI output [\#536](https://github.com/knsv/mermaid/pull/536) ([gibson042](https://github.com/gibson042))
+-   Modernize mermaid [\#524](https://github.com/knsv/mermaid/pull/524) ([tylerlong](https://github.com/tylerlong))
+-   Modernize mermaid [\#519](https://github.com/knsv/mermaid/pull/519) ([tylerlong](https://github.com/tylerlong))
+-   Update CLI instructions [\#509](https://github.com/knsv/mermaid/pull/509) ([filipedeschamps](https://github.com/filipedeschamps))
+-   Add style for classDiagram to dark/default theme [\#503](https://github.com/knsv/mermaid/pull/503) ([yudenzel](https://github.com/yudenzel))
+-   Fix documentation for git graph. [\#498](https://github.com/knsv/mermaid/pull/498) ([gomlgs](https://github.com/gomlgs))
+-   Fix links in documentations [\#497](https://github.com/knsv/mermaid/pull/497) ([saveman71](https://github.com/saveman71))
+-   Update README.md with git graph sample [\#481](https://github.com/knsv/mermaid/pull/481) ([raghur](https://github.com/raghur))
+-   Fix misspelling of “another” [\#479](https://github.com/knsv/mermaid/pull/479) ([stevenschobert](https://github.com/stevenschobert))
+-   Fixed \#456 sequenceDiagram: dotted line for alt and empty bracket sho… [\#477](https://github.com/knsv/mermaid/pull/477) ([brookhong](https://github.com/brookhong))
+-   Add viewbox attr to class diagram [\#473](https://github.com/knsv/mermaid/pull/473) ([gnkm](https://github.com/gnkm))
+-   add par statement to sequenceDiagram [\#470](https://github.com/knsv/mermaid/pull/470) ([u-minor](https://github.com/u-minor))
 
 ## [7.0.0](https://github.com/knsv/mermaid/tree/7.0.0) (2017-01-29)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/6.0.0...7.0.0)
 
 **Closed issues:**
 
-- demos on io site not working [\#466](https://github.com/knsv/mermaid/issues/466)
-- Can not be generated PNG pictures through CLI with Chinese [\#451](https://github.com/knsv/mermaid/issues/451)
-- Round nodes cannot be styled with CSS classes [\#443](https://github.com/knsv/mermaid/issues/443)
-- webpack gulp UglifyJsPlugin error. [\#440](https://github.com/knsv/mermaid/issues/440)
-- String concatenation isn't working  [\#432](https://github.com/knsv/mermaid/issues/432)
-- text flow/wrap in actor box of sequence diagram [\#422](https://github.com/knsv/mermaid/issues/422)
-- Online live editor still use old version [\#402](https://github.com/knsv/mermaid/issues/402)
-- uncaught TypeError: t.getTransformToElement is not a function [\#401](https://github.com/knsv/mermaid/issues/401)
-- Only works when using browserify'd code [\#373](https://github.com/knsv/mermaid/issues/373)
-- document the use of shebang line in mmd files [\#364](https://github.com/knsv/mermaid/issues/364)
-- Diagrams are small and unreadable in IE 11 - since 0.5.1 [\#356](https://github.com/knsv/mermaid/issues/356)
-- \[Feature Request\] ER-Diagram Support [\#354](https://github.com/knsv/mermaid/issues/354)
-- npm install -g mermaid does not install phantomjs [\#329](https://github.com/knsv/mermaid/issues/329)
-- activation boxes [\#313](https://github.com/knsv/mermaid/issues/313)
-- The need for mermaid.css should be mentioned explicitly in the intro docs... [\#273](https://github.com/knsv/mermaid/issues/273)
+-   demos on io site not working [\#466](https://github.com/knsv/mermaid/issues/466)
+-   Can not be generated PNG pictures through CLI with Chinese [\#451](https://github.com/knsv/mermaid/issues/451)
+-   Round nodes cannot be styled with CSS classes [\#443](https://github.com/knsv/mermaid/issues/443)
+-   webpack gulp UglifyJsPlugin error. [\#440](https://github.com/knsv/mermaid/issues/440)
+-   String concatenation isn't working [\#432](https://github.com/knsv/mermaid/issues/432)
+-   text flow/wrap in actor box of sequence diagram [\#422](https://github.com/knsv/mermaid/issues/422)
+-   Online live editor still use old version [\#402](https://github.com/knsv/mermaid/issues/402)
+-   uncaught TypeError: t.getTransformToElement is not a function [\#401](https://github.com/knsv/mermaid/issues/401)
+-   Only works when using browserify'd code [\#373](https://github.com/knsv/mermaid/issues/373)
+-   document the use of shebang line in mmd files [\#364](https://github.com/knsv/mermaid/issues/364)
+-   Diagrams are small and unreadable in IE 11 - since 0.5.1 [\#356](https://github.com/knsv/mermaid/issues/356)
+-   \[Feature Request\] ER-Diagram Support [\#354](https://github.com/knsv/mermaid/issues/354)
+-   npm install -g mermaid does not install phantomjs [\#329](https://github.com/knsv/mermaid/issues/329)
+-   activation boxes [\#313](https://github.com/knsv/mermaid/issues/313)
+-   The need for mermaid.css should be mentioned explicitly in the intro docs... [\#273](https://github.com/knsv/mermaid/issues/273)
 
 **Merged pull requests:**
 
-- Update index.html [\#465](https://github.com/knsv/mermaid/pull/465) ([bmsleight](https://github.com/bmsleight))
-- Fix for \#416, customizing link style with any color sets `fill` property to `black` instead of `none` [\#452](https://github.com/knsv/mermaid/pull/452) ([joshuacolvin](https://github.com/joshuacolvin))
-- Allow .node\>circle to receive css styles [\#449](https://github.com/knsv/mermaid/pull/449) ([bfriedz](https://github.com/bfriedz))
-- Fix spelling [\#447](https://github.com/knsv/mermaid/pull/447) ([jawn](https://github.com/jawn))
-- added tests and fix cli css style selector lowercase problem [\#445](https://github.com/knsv/mermaid/pull/445) ([whyzdev](https://github.com/whyzdev))
-- Update d3.js [\#441](https://github.com/knsv/mermaid/pull/441) ([hetz](https://github.com/hetz))
-- adde tests to reproduce \#434 in flowchart [\#439](https://github.com/knsv/mermaid/pull/439) ([whyzdev](https://github.com/whyzdev))
-- Code Climate config [\#437](https://github.com/knsv/mermaid/pull/437) ([larkinscott](https://github.com/larkinscott))
-- fix gantt and sequence digram cli cfg [\#435](https://github.com/knsv/mermaid/pull/435) ([whyzdev](https://github.com/whyzdev))
-- fix gantt chart cli configuration broken [\#433](https://github.com/knsv/mermaid/pull/433) ([whyzdev](https://github.com/whyzdev))
-- fix gantt chart cli configuration parsing including functions [\#430](https://github.com/knsv/mermaid/pull/430) ([whyzdev](https://github.com/whyzdev))
-- Uses an empty text node instead of a string for svg group labels [\#429](https://github.com/knsv/mermaid/pull/429) ([daveaglick](https://github.com/daveaglick))
-- use tspan via d3.textwrap to place actor text in sequence diagram [\#427](https://github.com/knsv/mermaid/pull/427) ([whyzdev](https://github.com/whyzdev))
-- \#422 use foreignObject/div to place actor label in sequence diagram  [\#423](https://github.com/knsv/mermaid/pull/423) ([whyzdev](https://github.com/whyzdev))
-- Clarify the need for a CSS stylesheet [\#413](https://github.com/knsv/mermaid/pull/413) ([sifb](https://github.com/sifb))
-- Added hads downstream project [\#412](https://github.com/knsv/mermaid/pull/412) ([sinedied](https://github.com/sinedied))
-- update usage and fix \#273 [\#406](https://github.com/knsv/mermaid/pull/406) ([jinntrance](https://github.com/jinntrance))
-- Add https://github.com/raghur/mermaid-filter to downstream projects docs page [\#404](https://github.com/knsv/mermaid/pull/404) ([raghur](https://github.com/raghur))
-- New neutral theme [\#395](https://github.com/knsv/mermaid/pull/395) ([sinedied](https://github.com/sinedied))
-- fix cli issues [\#390](https://github.com/knsv/mermaid/pull/390) ([ben-page](https://github.com/ben-page))
-- Add missing space for 'Labels out of bounds' section [\#386](https://github.com/knsv/mermaid/pull/386) ([The-Alchemist](https://github.com/The-Alchemist))
-- Fix typo: `pats` -\> `paths` [\#382](https://github.com/knsv/mermaid/pull/382) ([swhgoon](https://github.com/swhgoon))
-- Added class diagram example to README.md [\#379](https://github.com/knsv/mermaid/pull/379) ([HustLion](https://github.com/HustLion))
-- override normal flowchart arrowhead to allow css styling [\#376](https://github.com/knsv/mermaid/pull/376) ([dodoinblue](https://github.com/dodoinblue))
-- added sphinx extension [\#371](https://github.com/knsv/mermaid/pull/371) ([mgaitan](https://github.com/mgaitan))
-- Fix typo in the sequence diagram documentation [\#369](https://github.com/knsv/mermaid/pull/369) ([ggpasqualino](https://github.com/ggpasqualino))
+-   Update index.html [\#465](https://github.com/knsv/mermaid/pull/465) ([bmsleight](https://github.com/bmsleight))
+-   Fix for \#416, customizing link style with any color sets `fill` property to `black` instead of `none` [\#452](https://github.com/knsv/mermaid/pull/452) ([joshuacolvin](https://github.com/joshuacolvin))
+-   Allow .node\>circle to receive css styles [\#449](https://github.com/knsv/mermaid/pull/449) ([bfriedz](https://github.com/bfriedz))
+-   Fix spelling [\#447](https://github.com/knsv/mermaid/pull/447) ([jawn](https://github.com/jawn))
+-   added tests and fix cli css style selector lowercase problem [\#445](https://github.com/knsv/mermaid/pull/445) ([whyzdev](https://github.com/whyzdev))
+-   Update d3.js [\#441](https://github.com/knsv/mermaid/pull/441) ([hetz](https://github.com/hetz))
+-   adde tests to reproduce \#434 in flowchart [\#439](https://github.com/knsv/mermaid/pull/439) ([whyzdev](https://github.com/whyzdev))
+-   Code Climate config [\#437](https://github.com/knsv/mermaid/pull/437) ([larkinscott](https://github.com/larkinscott))
+-   fix gantt and sequence digram cli cfg [\#435](https://github.com/knsv/mermaid/pull/435) ([whyzdev](https://github.com/whyzdev))
+-   fix gantt chart cli configuration broken [\#433](https://github.com/knsv/mermaid/pull/433) ([whyzdev](https://github.com/whyzdev))
+-   fix gantt chart cli configuration parsing including functions [\#430](https://github.com/knsv/mermaid/pull/430) ([whyzdev](https://github.com/whyzdev))
+-   Uses an empty text node instead of a string for svg group labels [\#429](https://github.com/knsv/mermaid/pull/429) ([daveaglick](https://github.com/daveaglick))
+-   use tspan via d3.textwrap to place actor text in sequence diagram [\#427](https://github.com/knsv/mermaid/pull/427) ([whyzdev](https://github.com/whyzdev))
+-   \#422 use foreignObject/div to place actor label in sequence diagram [\#423](https://github.com/knsv/mermaid/pull/423) ([whyzdev](https://github.com/whyzdev))
+-   Clarify the need for a CSS stylesheet [\#413](https://github.com/knsv/mermaid/pull/413) ([sifb](https://github.com/sifb))
+-   Added hads downstream project [\#412](https://github.com/knsv/mermaid/pull/412) ([sinedied](https://github.com/sinedied))
+-   update usage and fix \#273 [\#406](https://github.com/knsv/mermaid/pull/406) ([jinntrance](https://github.com/jinntrance))
+-   Add https://github.com/raghur/mermaid-filter to downstream projects docs page [\#404](https://github.com/knsv/mermaid/pull/404) ([raghur](https://github.com/raghur))
+-   New neutral theme [\#395](https://github.com/knsv/mermaid/pull/395) ([sinedied](https://github.com/sinedied))
+-   fix cli issues [\#390](https://github.com/knsv/mermaid/pull/390) ([ben-page](https://github.com/ben-page))
+-   Add missing space for 'Labels out of bounds' section [\#386](https://github.com/knsv/mermaid/pull/386) ([The-Alchemist](https://github.com/The-Alchemist))
+-   Fix typo: `pats` -\> `paths` [\#382](https://github.com/knsv/mermaid/pull/382) ([swhgoon](https://github.com/swhgoon))
+-   Added class diagram example to README.md [\#379](https://github.com/knsv/mermaid/pull/379) ([HustLion](https://github.com/HustLion))
+-   override normal flowchart arrowhead to allow css styling [\#376](https://github.com/knsv/mermaid/pull/376) ([dodoinblue](https://github.com/dodoinblue))
+-   added sphinx extension [\#371](https://github.com/knsv/mermaid/pull/371) ([mgaitan](https://github.com/mgaitan))
+-   Fix typo in the sequence diagram documentation [\#369](https://github.com/knsv/mermaid/pull/369) ([ggpasqualino](https://github.com/ggpasqualino))
 
 ## [6.0.0](https://github.com/knsv/mermaid/tree/6.0.0) (2016-05-29)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.8...6.0.0)
 
 **Closed issues:**
 
-- Docs css: code hard to read [\#324](https://github.com/knsv/mermaid/issues/324)
-- About Markpad integration [\#323](https://github.com/knsv/mermaid/issues/323)
-- How to link backwords in flowchat? [\#321](https://github.com/knsv/mermaid/issues/321)
-- Help with editor [\#310](https://github.com/knsv/mermaid/issues/310)
-- +1 [\#293](https://github.com/knsv/mermaid/issues/293)
-- Basic chart does not render on Chome, but does in Firefox [\#290](https://github.com/knsv/mermaid/issues/290)
-- Live editor is broken [\#285](https://github.com/knsv/mermaid/issues/285)
-- "No such file or directory" trying to run mermaid 0.5.7 on OS X [\#284](https://github.com/knsv/mermaid/issues/284)
-- participant name as "Long Long Name" [\#283](https://github.com/knsv/mermaid/issues/283)
-- Windows - cli - could not find phantomjs at the specified path [\#236](https://github.com/knsv/mermaid/issues/236)
+-   Docs css: code hard to read [\#324](https://github.com/knsv/mermaid/issues/324)
+-   About Markpad integration [\#323](https://github.com/knsv/mermaid/issues/323)
+-   How to link backwords in flowchat? [\#321](https://github.com/knsv/mermaid/issues/321)
+-   Help with editor [\#310](https://github.com/knsv/mermaid/issues/310)
+-   +1 [\#293](https://github.com/knsv/mermaid/issues/293)
+-   Basic chart does not render on Chome, but does in Firefox [\#290](https://github.com/knsv/mermaid/issues/290)
+-   Live editor is broken [\#285](https://github.com/knsv/mermaid/issues/285)
+-   "No such file or directory" trying to run mermaid 0.5.7 on OS X [\#284](https://github.com/knsv/mermaid/issues/284)
+-   participant name as "Long Long Name" [\#283](https://github.com/knsv/mermaid/issues/283)
+-   Windows - cli - could not find phantomjs at the specified path [\#236](https://github.com/knsv/mermaid/issues/236)
 
 **Merged pull requests:**
 
-- The option of gantt for the spaces for the section names. [\#353](https://github.com/knsv/mermaid/pull/353) ([zeroyonichihachi](https://github.com/zeroyonichihachi))
-- Gitgraph: Make reset work with parent ref carets [\#350](https://github.com/knsv/mermaid/pull/350) ([raghur](https://github.com/raghur))
-- Remove the text-shadows that make the text look blurry [\#349](https://github.com/knsv/mermaid/pull/349) ([AsaAyers](https://github.com/AsaAyers))
-- add line interpolation to linkStyle in flowchart [\#346](https://github.com/knsv/mermaid/pull/346) ([AlanHohn](https://github.com/AlanHohn))
-- Support git graph diagrams in mermaid [\#344](https://github.com/knsv/mermaid/pull/344) ([raghur](https://github.com/raghur))
-- Build and test execution changes [\#338](https://github.com/knsv/mermaid/pull/338) ([ssbarnea](https://github.com/ssbarnea))
-- Reformatting of css files [\#331](https://github.com/knsv/mermaid/pull/331) ([Jmuccigr](https://github.com/Jmuccigr))
-- \(WIP\) Sequence Diagram Title Support [\#320](https://github.com/knsv/mermaid/pull/320) ([bronsoja](https://github.com/bronsoja))
-- activations doc + few fixes [\#318](https://github.com/knsv/mermaid/pull/318) ([ciekawy](https://github.com/ciekawy))
-- Dark theme for better contrast on darker backgrounds [\#317](https://github.com/knsv/mermaid/pull/317) ([crodriguez1a](https://github.com/crodriguez1a))
-- Activations [\#316](https://github.com/knsv/mermaid/pull/316) ([ciekawy](https://github.com/ciekawy))
-- Support leading comments for sequenceDiagrams [\#312](https://github.com/knsv/mermaid/pull/312) ([ashsearle](https://github.com/ashsearle))
-- Show a little lenience for white-space around names [\#309](https://github.com/knsv/mermaid/pull/309) ([ashsearle](https://github.com/ashsearle))
-- Update list of downstream projects [\#307](https://github.com/knsv/mermaid/pull/307) ([maxArturo](https://github.com/maxArturo))
-- Issue 299: Sequence diagram Loops: changing boxMargin spoils the "loop" notation [\#300](https://github.com/knsv/mermaid/pull/300) ([LarryKlugerDS](https://github.com/LarryKlugerDS))
-- Issue 297 - src/mermaid.js generates bad code [\#298](https://github.com/knsv/mermaid/pull/298) ([LarryKlugerDS](https://github.com/LarryKlugerDS))
-- Updated instructions for running tests [\#295](https://github.com/knsv/mermaid/pull/295) ([LarryKlugerDS](https://github.com/LarryKlugerDS))
-- Add Markdown Plus to Downstream projects [\#288](https://github.com/knsv/mermaid/pull/288) ([tylerlong](https://github.com/tylerlong))
-- Quote phantomPath so that it doesn't fail on window [\#286](https://github.com/knsv/mermaid/pull/286) ([raghur](https://github.com/raghur))
+-   The option of gantt for the spaces for the section names. [\#353](https://github.com/knsv/mermaid/pull/353) ([zeroyonichihachi](https://github.com/zeroyonichihachi))
+-   Gitgraph: Make reset work with parent ref carets [\#350](https://github.com/knsv/mermaid/pull/350) ([raghur](https://github.com/raghur))
+-   Remove the text-shadows that make the text look blurry [\#349](https://github.com/knsv/mermaid/pull/349) ([AsaAyers](https://github.com/AsaAyers))
+-   add line interpolation to linkStyle in flowchart [\#346](https://github.com/knsv/mermaid/pull/346) ([AlanHohn](https://github.com/AlanHohn))
+-   Support git graph diagrams in mermaid [\#344](https://github.com/knsv/mermaid/pull/344) ([raghur](https://github.com/raghur))
+-   Build and test execution changes [\#338](https://github.com/knsv/mermaid/pull/338) ([ssbarnea](https://github.com/ssbarnea))
+-   Reformatting of css files [\#331](https://github.com/knsv/mermaid/pull/331) ([Jmuccigr](https://github.com/Jmuccigr))
+-   \(WIP\) Sequence Diagram Title Support [\#320](https://github.com/knsv/mermaid/pull/320) ([bronsoja](https://github.com/bronsoja))
+-   activations doc + few fixes [\#318](https://github.com/knsv/mermaid/pull/318) ([ciekawy](https://github.com/ciekawy))
+-   Dark theme for better contrast on darker backgrounds [\#317](https://github.com/knsv/mermaid/pull/317) ([crodriguez1a](https://github.com/crodriguez1a))
+-   Activations [\#316](https://github.com/knsv/mermaid/pull/316) ([ciekawy](https://github.com/ciekawy))
+-   Support leading comments for sequenceDiagrams [\#312](https://github.com/knsv/mermaid/pull/312) ([ashsearle](https://github.com/ashsearle))
+-   Show a little lenience for white-space around names [\#309](https://github.com/knsv/mermaid/pull/309) ([ashsearle](https://github.com/ashsearle))
+-   Update list of downstream projects [\#307](https://github.com/knsv/mermaid/pull/307) ([maxArturo](https://github.com/maxArturo))
+-   Issue 299: Sequence diagram Loops: changing boxMargin spoils the "loop" notation [\#300](https://github.com/knsv/mermaid/pull/300) ([LarryKlugerDS](https://github.com/LarryKlugerDS))
+-   Issue 297 - src/mermaid.js generates bad code [\#298](https://github.com/knsv/mermaid/pull/298) ([LarryKlugerDS](https://github.com/LarryKlugerDS))
+-   Updated instructions for running tests [\#295](https://github.com/knsv/mermaid/pull/295) ([LarryKlugerDS](https://github.com/LarryKlugerDS))
+-   Add Markdown Plus to Downstream projects [\#288](https://github.com/knsv/mermaid/pull/288) ([tylerlong](https://github.com/tylerlong))
+-   Quote phantomPath so that it doesn't fail on window [\#286](https://github.com/knsv/mermaid/pull/286) ([raghur](https://github.com/raghur))
 
 ## [0.5.8](https://github.com/knsv/mermaid/tree/0.5.8) (2016-01-27)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.7...0.5.8)
 
 ## [0.5.7](https://github.com/knsv/mermaid/tree/0.5.7) (2016-01-25)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.6...0.5.7)
 
 **Closed issues:**
 
-- Mermaid + LightPaper = ❤️ [\#280](https://github.com/knsv/mermaid/issues/280)
-- Bower Integration [\#278](https://github.com/knsv/mermaid/issues/278)
-- Mermaid breaks when variables end in 'v' [\#276](https://github.com/knsv/mermaid/issues/276)
-- sequence diagrams don't support participant aliasing [\#263](https://github.com/knsv/mermaid/issues/263)
-- One diagram that fails to render stops further execution on the page [\#259](https://github.com/knsv/mermaid/issues/259)
-- Where to find line layout algorithm? [\#258](https://github.com/knsv/mermaid/issues/258)
-- Compatibility with node.js [\#257](https://github.com/knsv/mermaid/issues/257)
-- Label resizing with dynamically loaded fonts [\#255](https://github.com/knsv/mermaid/issues/255)
-- SVG arrowheads are broken in the CLI [\#249](https://github.com/knsv/mermaid/issues/249)
-- Cannot read property 'replace' of undefined [\#239](https://github.com/knsv/mermaid/issues/239)
+-   Mermaid + LightPaper = ❤️ [\#280](https://github.com/knsv/mermaid/issues/280)
+-   Bower Integration [\#278](https://github.com/knsv/mermaid/issues/278)
+-   Mermaid breaks when variables end in 'v' [\#276](https://github.com/knsv/mermaid/issues/276)
+-   sequence diagrams don't support participant aliasing [\#263](https://github.com/knsv/mermaid/issues/263)
+-   One diagram that fails to render stops further execution on the page [\#259](https://github.com/knsv/mermaid/issues/259)
+-   Where to find line layout algorithm? [\#258](https://github.com/knsv/mermaid/issues/258)
+-   Compatibility with node.js [\#257](https://github.com/knsv/mermaid/issues/257)
+-   Label resizing with dynamically loaded fonts [\#255](https://github.com/knsv/mermaid/issues/255)
+-   SVG arrowheads are broken in the CLI [\#249](https://github.com/knsv/mermaid/issues/249)
+-   Cannot read property 'replace' of undefined [\#239](https://github.com/knsv/mermaid/issues/239)
 
 **Merged pull requests:**
 
-- gh-50 Allow styling of edge labels in css [\#267](https://github.com/knsv/mermaid/pull/267) ([Anoia](https://github.com/Anoia))
-- Allow sequenceDiagram participant aliasing [\#265](https://github.com/knsv/mermaid/pull/265) ([gibson042](https://github.com/gibson042))
+-   gh-50 Allow styling of edge labels in css [\#267](https://github.com/knsv/mermaid/pull/267) ([Anoia](https://github.com/Anoia))
+-   Allow sequenceDiagram participant aliasing [\#265](https://github.com/knsv/mermaid/pull/265) ([gibson042](https://github.com/gibson042))
 
 ## [0.5.6](https://github.com/knsv/mermaid/tree/0.5.6) (2015-11-22)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.5...0.5.6)
 
 **Closed issues:**
 
-- title doesn't work in sequenceDiagram [\#248](https://github.com/knsv/mermaid/issues/248)
-- hypen-minus should be valid in sequence diagram alt/else/etc. descriptions [\#247](https://github.com/knsv/mermaid/issues/247)
-- Broken in firefox? [\#245](https://github.com/knsv/mermaid/issues/245)
-- When there is a Chinese symbol in the flowchart, it will crash。 [\#238](https://github.com/knsv/mermaid/issues/238)
-- Non-alpha characters included in ALPHA token \(flow graph jison\) [\#232](https://github.com/knsv/mermaid/issues/232)
-- subgraph not rendering with change to sample [\#231](https://github.com/knsv/mermaid/issues/231)
-- sequence diagram requires a new line at the end? [\#229](https://github.com/knsv/mermaid/issues/229)
-- Live Editor: Permalink address not being parsed [\#202](https://github.com/knsv/mermaid/issues/202)
-- Add download SVG link to the live editor [\#144](https://github.com/knsv/mermaid/issues/144)
+-   title doesn't work in sequenceDiagram [\#248](https://github.com/knsv/mermaid/issues/248)
+-   hypen-minus should be valid in sequence diagram alt/else/etc. descriptions [\#247](https://github.com/knsv/mermaid/issues/247)
+-   Broken in firefox? [\#245](https://github.com/knsv/mermaid/issues/245)
+-   When there is a Chinese symbol in the flowchart, it will crash。 [\#238](https://github.com/knsv/mermaid/issues/238)
+-   Non-alpha characters included in ALPHA token \(flow graph jison\) [\#232](https://github.com/knsv/mermaid/issues/232)
+-   subgraph not rendering with change to sample [\#231](https://github.com/knsv/mermaid/issues/231)
+-   sequence diagram requires a new line at the end? [\#229](https://github.com/knsv/mermaid/issues/229)
+-   Live Editor: Permalink address not being parsed [\#202](https://github.com/knsv/mermaid/issues/202)
+-   Add download SVG link to the live editor [\#144](https://github.com/knsv/mermaid/issues/144)
 
 **Merged pull requests:**
 
-- Make sequenceDiagram terminal newline optional [\#253](https://github.com/knsv/mermaid/pull/253) ([gibson042](https://github.com/gibson042))
-- Support sequenceDiagram "over" notes [\#252](https://github.com/knsv/mermaid/pull/252) ([gibson042](https://github.com/gibson042))
-- Properly handle "rest of line" statements [\#251](https://github.com/knsv/mermaid/pull/251) ([gibson042](https://github.com/gibson042))
-- CLI: Propagate exit code from lib \(i.e., phantomjs\) [\#250](https://github.com/knsv/mermaid/pull/250) ([gibson042](https://github.com/gibson042))
-- flowRender.js - Fix FontAwesome icon insert [\#244](https://github.com/knsv/mermaid/pull/244) ([ma-zal](https://github.com/ma-zal))
-- updated sequence diagram link in live editor [\#242](https://github.com/knsv/mermaid/pull/242) ([r-a-v-a-s](https://github.com/r-a-v-a-s))
-- updated links in README.md [\#240](https://github.com/knsv/mermaid/pull/240) ([r-a-v-a-s](https://github.com/r-a-v-a-s))
-- Ellipse syntax [\#237](https://github.com/knsv/mermaid/pull/237) ([spect88](https://github.com/spect88))
-- Allow keywords as suffixes of node ids [\#235](https://github.com/knsv/mermaid/pull/235) ([spect88](https://github.com/spect88))
-- Highlighted the editor in the nav [\#234](https://github.com/knsv/mermaid/pull/234) ([knsv](https://github.com/knsv))
-- Live editor tweaks [\#233](https://github.com/knsv/mermaid/pull/233) ([spect88](https://github.com/spect88))
-- Add a Gitter chat badge to README.md [\#230](https://github.com/knsv/mermaid/pull/230) ([gitter-badger](https://github.com/gitter-badger))
+-   Make sequenceDiagram terminal newline optional [\#253](https://github.com/knsv/mermaid/pull/253) ([gibson042](https://github.com/gibson042))
+-   Support sequenceDiagram "over" notes [\#252](https://github.com/knsv/mermaid/pull/252) ([gibson042](https://github.com/gibson042))
+-   Properly handle "rest of line" statements [\#251](https://github.com/knsv/mermaid/pull/251) ([gibson042](https://github.com/gibson042))
+-   CLI: Propagate exit code from lib \(i.e., phantomjs\) [\#250](https://github.com/knsv/mermaid/pull/250) ([gibson042](https://github.com/gibson042))
+-   flowRender.js - Fix FontAwesome icon insert [\#244](https://github.com/knsv/mermaid/pull/244) ([ma-zal](https://github.com/ma-zal))
+-   updated sequence diagram link in live editor [\#242](https://github.com/knsv/mermaid/pull/242) ([r-a-v-a-s](https://github.com/r-a-v-a-s))
+-   updated links in README.md [\#240](https://github.com/knsv/mermaid/pull/240) ([r-a-v-a-s](https://github.com/r-a-v-a-s))
+-   Ellipse syntax [\#237](https://github.com/knsv/mermaid/pull/237) ([spect88](https://github.com/spect88))
+-   Allow keywords as suffixes of node ids [\#235](https://github.com/knsv/mermaid/pull/235) ([spect88](https://github.com/spect88))
+-   Highlighted the editor in the nav [\#234](https://github.com/knsv/mermaid/pull/234) ([knsv](https://github.com/knsv))
+-   Live editor tweaks [\#233](https://github.com/knsv/mermaid/pull/233) ([spect88](https://github.com/spect88))
+-   Add a Gitter chat badge to README.md [\#230](https://github.com/knsv/mermaid/pull/230) ([gitter-badger](https://github.com/gitter-badger))
 
 ## [0.5.5](https://github.com/knsv/mermaid/tree/0.5.5) (2015-10-21)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.4...0.5.5)
 
 **Closed issues:**
 
-- sequence diagram, arrowhead instead of crosshead [\#227](https://github.com/knsv/mermaid/issues/227)
+-   sequence diagram, arrowhead instead of crosshead [\#227](https://github.com/knsv/mermaid/issues/227)
 
 **Merged pull requests:**
 
-- Fix a typo: crosshead --\> arrowhead [\#228](https://github.com/knsv/mermaid/pull/228) ([tylerlong](https://github.com/tylerlong))
+-   Fix a typo: crosshead --\> arrowhead [\#228](https://github.com/knsv/mermaid/pull/228) ([tylerlong](https://github.com/tylerlong))
 
 ## [0.5.4](https://github.com/knsv/mermaid/tree/0.5.4) (2015-10-19)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.3...0.5.4)
 
 **Closed issues:**
 
-- Weird bug in live editor when using words with substring `end` [\#184](https://github.com/knsv/mermaid/issues/184)
-- Custom icons [\#15](https://github.com/knsv/mermaid/issues/15)
-- Marker-end arrow cannot be shown for URL with query parameter [\#225](https://github.com/knsv/mermaid/issues/225)
-- Please update bower's D3 version [\#221](https://github.com/knsv/mermaid/issues/221)
-- Set log level from mermaid configuration [\#220](https://github.com/knsv/mermaid/issues/220)
-- Width fixed to 400px [\#204](https://github.com/knsv/mermaid/issues/204)
-- render to png from the cli does not display the marker-end arrow heads [\#181](https://github.com/knsv/mermaid/issues/181)
-- Links in sequence diagrams [\#159](https://github.com/knsv/mermaid/issues/159)
-- comment characters `%%` cause parse error [\#141](https://github.com/knsv/mermaid/issues/141)
-- Add a reversed assymetric shape [\#124](https://github.com/knsv/mermaid/issues/124)
-- Add syntax for double headed arrows [\#123](https://github.com/knsv/mermaid/issues/123)
-- Support for font-awesome [\#49](https://github.com/knsv/mermaid/issues/49)
+-   Weird bug in live editor when using words with substring `end` [\#184](https://github.com/knsv/mermaid/issues/184)
+-   Custom icons [\#15](https://github.com/knsv/mermaid/issues/15)
+-   Marker-end arrow cannot be shown for URL with query parameter [\#225](https://github.com/knsv/mermaid/issues/225)
+-   Please update bower's D3 version [\#221](https://github.com/knsv/mermaid/issues/221)
+-   Set log level from mermaid configuration [\#220](https://github.com/knsv/mermaid/issues/220)
+-   Width fixed to 400px [\#204](https://github.com/knsv/mermaid/issues/204)
+-   render to png from the cli does not display the marker-end arrow heads [\#181](https://github.com/knsv/mermaid/issues/181)
+-   Links in sequence diagrams [\#159](https://github.com/knsv/mermaid/issues/159)
+-   comment characters `%%` cause parse error [\#141](https://github.com/knsv/mermaid/issues/141)
+-   Add a reversed assymetric shape [\#124](https://github.com/knsv/mermaid/issues/124)
+-   Add syntax for double headed arrows [\#123](https://github.com/knsv/mermaid/issues/123)
+-   Support for font-awesome [\#49](https://github.com/knsv/mermaid/issues/49)
 
 **Merged pull requests:**
 
-- Allow `end` as a substring of vertex id [\#224](https://github.com/knsv/mermaid/pull/224) ([spect88](https://github.com/spect88))
-- Remove duplicate npm dependencies: d3 and he [\#223](https://github.com/knsv/mermaid/pull/223) ([spect88](https://github.com/spect88))
+-   Allow `end` as a substring of vertex id [\#224](https://github.com/knsv/mermaid/pull/224) ([spect88](https://github.com/spect88))
+-   Remove duplicate npm dependencies: d3 and he [\#223](https://github.com/knsv/mermaid/pull/223) ([spect88](https://github.com/spect88))
 
 ## [0.5.3](https://github.com/knsv/mermaid/tree/0.5.3) (2015-10-04)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.2...0.5.3)
 
 ## [0.5.2](https://github.com/knsv/mermaid/tree/0.5.2) (2015-10-04)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.1...0.5.2)
 
 **Closed issues:**
 
-- Installing “atom-mermaid@0.1.3” failed [\#218](https://github.com/knsv/mermaid/issues/218)
-- Render mermaid code on websites? [\#215](https://github.com/knsv/mermaid/issues/215)
-- Brackets in a node with text? [\#213](https://github.com/knsv/mermaid/issues/213)
-- node feature request [\#211](https://github.com/knsv/mermaid/issues/211)
-- Please add prefix for styles [\#208](https://github.com/knsv/mermaid/issues/208)
-- Bad handling of block arguments [\#207](https://github.com/knsv/mermaid/issues/207)
-- please consider port to mac osx  [\#203](https://github.com/knsv/mermaid/issues/203)
-- allow phantomjs \>=1.9.x [\#201](https://github.com/knsv/mermaid/issues/201)
-- syntax for venn diagrams? [\#200](https://github.com/knsv/mermaid/issues/200)
-- Broken CLI Graphs? \(v0.5.1\) [\#196](https://github.com/knsv/mermaid/issues/196)
-- Static site does not render under HTTPS [\#194](https://github.com/knsv/mermaid/issues/194)
-- Error on simple graph [\#192](https://github.com/knsv/mermaid/issues/192)
-- Escape "~" [\#191](https://github.com/knsv/mermaid/issues/191)
-- Trying to add link using 'click' to flowchart [\#188](https://github.com/knsv/mermaid/issues/188)
-- cli: no lines and arrowheads rendered / only dotted lines [\#187](https://github.com/knsv/mermaid/issues/187)
-- text of mermaid div displayed on page [\#186](https://github.com/knsv/mermaid/issues/186)
-- using mermaid with laravel [\#185](https://github.com/knsv/mermaid/issues/185)
-- Atom editor package [\#183](https://github.com/knsv/mermaid/issues/183)
-- Auto linewrap for notes in sequence diagrams [\#178](https://github.com/knsv/mermaid/issues/178)
-- Execute code after initialize [\#176](https://github.com/knsv/mermaid/issues/176)
-- Autoscaling for all diagram types [\#175](https://github.com/knsv/mermaid/issues/175)
-- Problem wit click event callback [\#174](https://github.com/knsv/mermaid/issues/174)
-- How to escape characters? [\#170](https://github.com/knsv/mermaid/issues/170)
-- it can not work [\#167](https://github.com/knsv/mermaid/issues/167)
-- UML Class diagram [\#154](https://github.com/knsv/mermaid/issues/154)
-- Broken subgraph using the CLI [\#153](https://github.com/knsv/mermaid/issues/153)
-- Support PlantUML syntax [\#149](https://github.com/knsv/mermaid/issues/149)
-- IE Support issue [\#142](https://github.com/knsv/mermaid/issues/142)
-- Flowchart truncated [\#140](https://github.com/knsv/mermaid/issues/140)
-- Double Quote as text is not working [\#219](https://github.com/knsv/mermaid/issues/219)
-- classDef / class not working with htmlLabels? [\#210](https://github.com/knsv/mermaid/issues/210)
-- Links in graph missing [\#209](https://github.com/knsv/mermaid/issues/209)
-- Last word in comment boxes getting cut off by word wrap library : \( [\#195](https://github.com/knsv/mermaid/issues/195)
-- Escaping characters in sequence diagram [\#193](https://github.com/knsv/mermaid/issues/193)
-- SVG foreignObject rendering [\#180](https://github.com/knsv/mermaid/issues/180)
-- IE9 issue  [\#179](https://github.com/knsv/mermaid/issues/179)
-- inoperable in an AMD/requirejs environment: IPython Notebook [\#127](https://github.com/knsv/mermaid/issues/127)
-- \[Parser\] Hyphen in participant name bring TypeError [\#74](https://github.com/knsv/mermaid/issues/74)
-- Support for hyperlink and tooltip [\#34](https://github.com/knsv/mermaid/issues/34)
+-   Installing “atom-mermaid@0.1.3” failed [\#218](https://github.com/knsv/mermaid/issues/218)
+-   Render mermaid code on websites? [\#215](https://github.com/knsv/mermaid/issues/215)
+-   Brackets in a node with text? [\#213](https://github.com/knsv/mermaid/issues/213)
+-   node feature request [\#211](https://github.com/knsv/mermaid/issues/211)
+-   Please add prefix for styles [\#208](https://github.com/knsv/mermaid/issues/208)
+-   Bad handling of block arguments [\#207](https://github.com/knsv/mermaid/issues/207)
+-   please consider port to mac osx [\#203](https://github.com/knsv/mermaid/issues/203)
+-   allow phantomjs \>=1.9.x [\#201](https://github.com/knsv/mermaid/issues/201)
+-   syntax for venn diagrams? [\#200](https://github.com/knsv/mermaid/issues/200)
+-   Broken CLI Graphs? \(v0.5.1\) [\#196](https://github.com/knsv/mermaid/issues/196)
+-   Static site does not render under HTTPS [\#194](https://github.com/knsv/mermaid/issues/194)
+-   Error on simple graph [\#192](https://github.com/knsv/mermaid/issues/192)
+-   Escape "~" [\#191](https://github.com/knsv/mermaid/issues/191)
+-   Trying to add link using 'click' to flowchart [\#188](https://github.com/knsv/mermaid/issues/188)
+-   cli: no lines and arrowheads rendered / only dotted lines [\#187](https://github.com/knsv/mermaid/issues/187)
+-   text of mermaid div displayed on page [\#186](https://github.com/knsv/mermaid/issues/186)
+-   using mermaid with laravel [\#185](https://github.com/knsv/mermaid/issues/185)
+-   Atom editor package [\#183](https://github.com/knsv/mermaid/issues/183)
+-   Auto linewrap for notes in sequence diagrams [\#178](https://github.com/knsv/mermaid/issues/178)
+-   Execute code after initialize [\#176](https://github.com/knsv/mermaid/issues/176)
+-   Autoscaling for all diagram types [\#175](https://github.com/knsv/mermaid/issues/175)
+-   Problem wit click event callback [\#174](https://github.com/knsv/mermaid/issues/174)
+-   How to escape characters? [\#170](https://github.com/knsv/mermaid/issues/170)
+-   it can not work [\#167](https://github.com/knsv/mermaid/issues/167)
+-   UML Class diagram [\#154](https://github.com/knsv/mermaid/issues/154)
+-   Broken subgraph using the CLI [\#153](https://github.com/knsv/mermaid/issues/153)
+-   Support PlantUML syntax [\#149](https://github.com/knsv/mermaid/issues/149)
+-   IE Support issue [\#142](https://github.com/knsv/mermaid/issues/142)
+-   Flowchart truncated [\#140](https://github.com/knsv/mermaid/issues/140)
+-   Double Quote as text is not working [\#219](https://github.com/knsv/mermaid/issues/219)
+-   classDef / class not working with htmlLabels? [\#210](https://github.com/knsv/mermaid/issues/210)
+-   Links in graph missing [\#209](https://github.com/knsv/mermaid/issues/209)
+-   Last word in comment boxes getting cut off by word wrap library : \( [\#195](https://github.com/knsv/mermaid/issues/195)
+-   Escaping characters in sequence diagram [\#193](https://github.com/knsv/mermaid/issues/193)
+-   SVG foreignObject rendering [\#180](https://github.com/knsv/mermaid/issues/180)
+-   IE9 issue [\#179](https://github.com/knsv/mermaid/issues/179)
+-   inoperable in an AMD/requirejs environment: IPython Notebook [\#127](https://github.com/knsv/mermaid/issues/127)
+-   \[Parser\] Hyphen in participant name bring TypeError [\#74](https://github.com/knsv/mermaid/issues/74)
+-   Support for hyperlink and tooltip [\#34](https://github.com/knsv/mermaid/issues/34)
 
 **Merged pull requests:**
 
-- Update flowchart.md [\#214](https://github.com/knsv/mermaid/pull/214) ([orschiro](https://github.com/orschiro))
-- Default style when using the CLI [\#205](https://github.com/knsv/mermaid/pull/205) ([gillesdemey](https://github.com/gillesdemey))
-- Gantt chart - add minutes and seconds durations [\#198](https://github.com/knsv/mermaid/pull/198) ([dbrans](https://github.com/dbrans))
-- Using QUnit for AMD testing [\#190](https://github.com/knsv/mermaid/pull/190) ([bollwyvl](https://github.com/bollwyvl))
-- Update phantomscript.js [\#182](https://github.com/knsv/mermaid/pull/182) ([phairow](https://github.com/phairow))
+-   Update flowchart.md [\#214](https://github.com/knsv/mermaid/pull/214) ([orschiro](https://github.com/orschiro))
+-   Default style when using the CLI [\#205](https://github.com/knsv/mermaid/pull/205) ([gillesdemey](https://github.com/gillesdemey))
+-   Gantt chart - add minutes and seconds durations [\#198](https://github.com/knsv/mermaid/pull/198) ([dbrans](https://github.com/dbrans))
+-   Using QUnit for AMD testing [\#190](https://github.com/knsv/mermaid/pull/190) ([bollwyvl](https://github.com/bollwyvl))
+-   Update phantomscript.js [\#182](https://github.com/knsv/mermaid/pull/182) ([phairow](https://github.com/phairow))
 
 ## [0.5.1](https://github.com/knsv/mermaid/tree/0.5.1) (2015-06-21)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.0...0.5.1)
 
 **Closed issues:**
 
-- Live editor is broken [\#173](https://github.com/knsv/mermaid/issues/173)
-- 0.5.0 no longer respects custom date definitions in Gantt diagrams [\#171](https://github.com/knsv/mermaid/issues/171)
-- Drop label character restrictions [\#162](https://github.com/knsv/mermaid/issues/162)
-- can't nest subgraphs in flowchart [\#161](https://github.com/knsv/mermaid/issues/161)
-- Unable to generate gantt diagram with mermaid CLI [\#158](https://github.com/knsv/mermaid/issues/158)
-- Inline css by "mermaid" [\#157](https://github.com/knsv/mermaid/issues/157)
-- Finite State Machine Diagram [\#152](https://github.com/knsv/mermaid/issues/152)
-- How to center align gantt diagram [\#150](https://github.com/knsv/mermaid/issues/150)
-- Security concern regarding class definition [\#148](https://github.com/knsv/mermaid/issues/148)
-- File Extension [\#147](https://github.com/knsv/mermaid/issues/147)
-- To SVG Export [\#146](https://github.com/knsv/mermaid/issues/146)
-- `setTimeout` with clusters problematic with programmatic edits and no callback [\#133](https://github.com/knsv/mermaid/issues/133)
-- Possibility to set the width of the generated flowchart [\#129](https://github.com/knsv/mermaid/issues/129)
-- flowchart - styling of edges via css overrides specific styles set in the graph definition [\#128](https://github.com/knsv/mermaid/issues/128)
-- module.exports.cloneCssStyles\(\) in combination with Angularjs breaks display in Chrome and IE [\#126](https://github.com/knsv/mermaid/issues/126)
-- Gantt - suitable xAxis for longer project [\#125](https://github.com/knsv/mermaid/issues/125)
-- Mix horizontal and vertical graph [\#68](https://github.com/knsv/mermaid/issues/68)
-- How to get started with this project ? [\#64](https://github.com/knsv/mermaid/issues/64)
-- Special characters break parsing [\#54](https://github.com/knsv/mermaid/issues/54)
-- Responsive graph layout for mobile viewers [\#51](https://github.com/knsv/mermaid/issues/51)
-- Styling connector lines [\#31](https://github.com/knsv/mermaid/issues/31)
+-   Live editor is broken [\#173](https://github.com/knsv/mermaid/issues/173)
+-   0.5.0 no longer respects custom date definitions in Gantt diagrams [\#171](https://github.com/knsv/mermaid/issues/171)
+-   Drop label character restrictions [\#162](https://github.com/knsv/mermaid/issues/162)
+-   can't nest subgraphs in flowchart [\#161](https://github.com/knsv/mermaid/issues/161)
+-   Unable to generate gantt diagram with mermaid CLI [\#158](https://github.com/knsv/mermaid/issues/158)
+-   Inline css by "mermaid" [\#157](https://github.com/knsv/mermaid/issues/157)
+-   Finite State Machine Diagram [\#152](https://github.com/knsv/mermaid/issues/152)
+-   How to center align gantt diagram [\#150](https://github.com/knsv/mermaid/issues/150)
+-   Security concern regarding class definition [\#148](https://github.com/knsv/mermaid/issues/148)
+-   File Extension [\#147](https://github.com/knsv/mermaid/issues/147)
+-   To SVG Export [\#146](https://github.com/knsv/mermaid/issues/146)
+-   `setTimeout` with clusters problematic with programmatic edits and no callback [\#133](https://github.com/knsv/mermaid/issues/133)
+-   Possibility to set the width of the generated flowchart [\#129](https://github.com/knsv/mermaid/issues/129)
+-   flowchart - styling of edges via css overrides specific styles set in the graph definition [\#128](https://github.com/knsv/mermaid/issues/128)
+-   module.exports.cloneCssStyles\(\) in combination with Angularjs breaks display in Chrome and IE [\#126](https://github.com/knsv/mermaid/issues/126)
+-   Gantt - suitable xAxis for longer project [\#125](https://github.com/knsv/mermaid/issues/125)
+-   Mix horizontal and vertical graph [\#68](https://github.com/knsv/mermaid/issues/68)
+-   How to get started with this project ? [\#64](https://github.com/knsv/mermaid/issues/64)
+-   Special characters break parsing [\#54](https://github.com/knsv/mermaid/issues/54)
+-   Responsive graph layout for mobile viewers [\#51](https://github.com/knsv/mermaid/issues/51)
+-   Styling connector lines [\#31](https://github.com/knsv/mermaid/issues/31)
 
 **Merged pull requests:**
 
-- Remove moot `version` property from bower.json [\#172](https://github.com/knsv/mermaid/pull/172) ([kkirsche](https://github.com/kkirsche))
+-   Remove moot `version` property from bower.json [\#172](https://github.com/knsv/mermaid/pull/172) ([kkirsche](https://github.com/kkirsche))
 
 ## [0.5.0](https://github.com/knsv/mermaid/tree/0.5.0) (2015-06-07)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.4.0...0.5.0)
 
 **Closed issues:**
 
-- it can not work where graph TD contains chinese character [\#166](https://github.com/knsv/mermaid/issues/166)
-- Broken Examples [\#163](https://github.com/knsv/mermaid/issues/163)
-- uglifyjs wanrings which means we can improve the code [\#156](https://github.com/knsv/mermaid/issues/156)
-- New\(er\) features unavailable in downloadable js files? [\#151](https://github.com/knsv/mermaid/issues/151)
-- Add gh-gapes link to description [\#143](https://github.com/knsv/mermaid/issues/143)
-- Some examples not displayed on Firefox 36.0.1 [\#138](https://github.com/knsv/mermaid/issues/138)
-- tags ending in a "v" don't render [\#132](https://github.com/knsv/mermaid/issues/132)
-- Links in flowchart [\#131](https://github.com/knsv/mermaid/issues/131)
-- Using the library for iOS development [\#130](https://github.com/knsv/mermaid/issues/130)
-- Add a css file, mermaid.css, with default styling [\#122](https://github.com/knsv/mermaid/issues/122)
-- Add capability for gantt diagrams [\#118](https://github.com/knsv/mermaid/issues/118)
-- lower case v causes error in the parser [\#108](https://github.com/knsv/mermaid/issues/108)
-- Label's css conflict with boostrap's .label [\#67](https://github.com/knsv/mermaid/issues/67)
-- TypeError: Cannot read property 'layout' of undefined [\#37](https://github.com/knsv/mermaid/issues/37)
-- software architecture diagram [\#36](https://github.com/knsv/mermaid/issues/36)
-- Support for bar charts and pie diagrams [\#22](https://github.com/knsv/mermaid/issues/22)
+-   it can not work where graph TD contains chinese character [\#166](https://github.com/knsv/mermaid/issues/166)
+-   Broken Examples [\#163](https://github.com/knsv/mermaid/issues/163)
+-   uglifyjs wanrings which means we can improve the code [\#156](https://github.com/knsv/mermaid/issues/156)
+-   New\(er\) features unavailable in downloadable js files? [\#151](https://github.com/knsv/mermaid/issues/151)
+-   Add gh-gapes link to description [\#143](https://github.com/knsv/mermaid/issues/143)
+-   Some examples not displayed on Firefox 36.0.1 [\#138](https://github.com/knsv/mermaid/issues/138)
+-   tags ending in a "v" don't render [\#132](https://github.com/knsv/mermaid/issues/132)
+-   Links in flowchart [\#131](https://github.com/knsv/mermaid/issues/131)
+-   Using the library for iOS development [\#130](https://github.com/knsv/mermaid/issues/130)
+-   Add a css file, mermaid.css, with default styling [\#122](https://github.com/knsv/mermaid/issues/122)
+-   Add capability for gantt diagrams [\#118](https://github.com/knsv/mermaid/issues/118)
+-   lower case v causes error in the parser [\#108](https://github.com/knsv/mermaid/issues/108)
+-   Label's css conflict with boostrap's .label [\#67](https://github.com/knsv/mermaid/issues/67)
+-   TypeError: Cannot read property 'layout' of undefined [\#37](https://github.com/knsv/mermaid/issues/37)
+-   software architecture diagram [\#36](https://github.com/knsv/mermaid/issues/36)
+-   Support for bar charts and pie diagrams [\#22](https://github.com/knsv/mermaid/issues/22)
 
 **Merged pull requests:**
 
-- Dev 0.5.0 [\#168](https://github.com/knsv/mermaid/pull/168) ([knsv](https://github.com/knsv))
-- Fix spacing [\#164](https://github.com/knsv/mermaid/pull/164) ([rhcarvalho](https://github.com/rhcarvalho))
-- Fixing typo: "Think" -\> "Thick" [\#160](https://github.com/knsv/mermaid/pull/160) ([it0a](https://github.com/it0a))
-- IE, local html, cssRules access is denied [\#155](https://github.com/knsv/mermaid/pull/155) ([tylerlong](https://github.com/tylerlong))
-- Add automatically generated change log file. [\#139](https://github.com/knsv/mermaid/pull/139) ([skywinder](https://github.com/skywinder))
-- Adding init argument to the global API [\#137](https://github.com/knsv/mermaid/pull/137) ([bollwyvl](https://github.com/bollwyvl))
-- Add description of manual calling of init [\#136](https://github.com/knsv/mermaid/pull/136) ([bollwyvl](https://github.com/bollwyvl))
-- Allow other forms of node selection for init\(\) [\#135](https://github.com/knsv/mermaid/pull/135) ([bollwyvl](https://github.com/bollwyvl))
-- Use a library-level variable for assigning ids [\#134](https://github.com/knsv/mermaid/pull/134) ([bollwyvl](https://github.com/bollwyvl))
+-   Dev 0.5.0 [\#168](https://github.com/knsv/mermaid/pull/168) ([knsv](https://github.com/knsv))
+-   Fix spacing [\#164](https://github.com/knsv/mermaid/pull/164) ([rhcarvalho](https://github.com/rhcarvalho))
+-   Fixing typo: "Think" -\> "Thick" [\#160](https://github.com/knsv/mermaid/pull/160) ([it0a](https://github.com/it0a))
+-   IE, local html, cssRules access is denied [\#155](https://github.com/knsv/mermaid/pull/155) ([tylerlong](https://github.com/tylerlong))
+-   Add automatically generated change log file. [\#139](https://github.com/knsv/mermaid/pull/139) ([skywinder](https://github.com/skywinder))
+-   Adding init argument to the global API [\#137](https://github.com/knsv/mermaid/pull/137) ([bollwyvl](https://github.com/bollwyvl))
+-   Add description of manual calling of init [\#136](https://github.com/knsv/mermaid/pull/136) ([bollwyvl](https://github.com/bollwyvl))
+-   Allow other forms of node selection for init\(\) [\#135](https://github.com/knsv/mermaid/pull/135) ([bollwyvl](https://github.com/bollwyvl))
+-   Use a library-level variable for assigning ids [\#134](https://github.com/knsv/mermaid/pull/134) ([bollwyvl](https://github.com/bollwyvl))
 
 ## [0.4.0](https://github.com/knsv/mermaid/tree/0.4.0) (2015-03-01)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.3.5...0.4.0)
 
 **Closed issues:**
 
-- subgraph background is black in rendered flowchart PNG via CLI [\#121](https://github.com/knsv/mermaid/issues/121)
-- Integrate editor at https://github.com/naseer/mermaid-webapp [\#110](https://github.com/knsv/mermaid/issues/110)
-- Internet Explorer Support [\#99](https://github.com/knsv/mermaid/issues/99)
-- Assymetric shapes not documented [\#82](https://github.com/knsv/mermaid/issues/82)
-- NoModificationAllowedError [\#23](https://github.com/knsv/mermaid/issues/23)
-- Improve arrows [\#3](https://github.com/knsv/mermaid/issues/3)
+-   subgraph background is black in rendered flowchart PNG via CLI [\#121](https://github.com/knsv/mermaid/issues/121)
+-   Integrate editor at https://github.com/naseer/mermaid-webapp [\#110](https://github.com/knsv/mermaid/issues/110)
+-   Internet Explorer Support [\#99](https://github.com/knsv/mermaid/issues/99)
+-   Assymetric shapes not documented [\#82](https://github.com/knsv/mermaid/issues/82)
+-   NoModificationAllowedError [\#23](https://github.com/knsv/mermaid/issues/23)
+-   Improve arrows [\#3](https://github.com/knsv/mermaid/issues/3)
 
 ## [0.3.5](https://github.com/knsv/mermaid/tree/0.3.5) (2015-02-15)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.3.4...0.3.5)
 
 ## [0.3.4](https://github.com/knsv/mermaid/tree/0.3.4) (2015-02-15)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.3.3...0.3.4)
 
 **Closed issues:**
 
-- Subgraph syntax bug? [\#120](https://github.com/knsv/mermaid/issues/120)
-- Live editor [\#115](https://github.com/knsv/mermaid/issues/115)
-- Error in "Basic Syntax" wiki page [\#113](https://github.com/knsv/mermaid/issues/113)
-- semicolons, anyone? [\#111](https://github.com/knsv/mermaid/issues/111)
-- undefined `sequenceConfig` fails [\#109](https://github.com/knsv/mermaid/issues/109)
-- Sequence Diagrams: Show Actors below as well [\#106](https://github.com/knsv/mermaid/issues/106)
-- Allow overriding sequence diagram configuration \(SVG properties\) [\#103](https://github.com/knsv/mermaid/issues/103)
-- Error when rendering A-- This is the text -- B [\#102](https://github.com/knsv/mermaid/issues/102)
-- Clipping in documentation [\#97](https://github.com/knsv/mermaid/issues/97)
-- isolate class styling to the svg container [\#92](https://github.com/knsv/mermaid/issues/92)
-- Apply styling from css when using the CLI utility [\#85](https://github.com/knsv/mermaid/issues/85)
-- Generated SVG works poorly outside web browsers [\#58](https://github.com/knsv/mermaid/issues/58)
-- Make the new graph declaration more visual [\#40](https://github.com/knsv/mermaid/issues/40)
-- Generating SVG text blob for use in Node [\#2](https://github.com/knsv/mermaid/issues/2)
+-   Subgraph syntax bug? [\#120](https://github.com/knsv/mermaid/issues/120)
+-   Live editor [\#115](https://github.com/knsv/mermaid/issues/115)
+-   Error in "Basic Syntax" wiki page [\#113](https://github.com/knsv/mermaid/issues/113)
+-   semicolons, anyone? [\#111](https://github.com/knsv/mermaid/issues/111)
+-   undefined `sequenceConfig` fails [\#109](https://github.com/knsv/mermaid/issues/109)
+-   Sequence Diagrams: Show Actors below as well [\#106](https://github.com/knsv/mermaid/issues/106)
+-   Allow overriding sequence diagram configuration \(SVG properties\) [\#103](https://github.com/knsv/mermaid/issues/103)
+-   Error when rendering A-- This is the text -- B [\#102](https://github.com/knsv/mermaid/issues/102)
+-   Clipping in documentation [\#97](https://github.com/knsv/mermaid/issues/97)
+-   isolate class styling to the svg container [\#92](https://github.com/knsv/mermaid/issues/92)
+-   Apply styling from css when using the CLI utility [\#85](https://github.com/knsv/mermaid/issues/85)
+-   Generated SVG works poorly outside web browsers [\#58](https://github.com/knsv/mermaid/issues/58)
+-   Make the new graph declaration more visual [\#40](https://github.com/knsv/mermaid/issues/40)
+-   Generating SVG text blob for use in Node [\#2](https://github.com/knsv/mermaid/issues/2)
 
 **Merged pull requests:**
 
-- Add live editor [\#119](https://github.com/knsv/mermaid/pull/119) ([naseer](https://github.com/naseer))
-- Adds CSS option to the CLI [\#116](https://github.com/knsv/mermaid/pull/116) ([fardog](https://github.com/fardog))
-- Update flowchart.md in response Issue \#113 [\#114](https://github.com/knsv/mermaid/pull/114) ([vijay40](https://github.com/vijay40))
-- Ignore all files except the license and dist/ folder when installing with Bower. [\#112](https://github.com/knsv/mermaid/pull/112) ([jasonbellamy](https://github.com/jasonbellamy))
+-   Add live editor [\#119](https://github.com/knsv/mermaid/pull/119) ([naseer](https://github.com/naseer))
+-   Adds CSS option to the CLI [\#116](https://github.com/knsv/mermaid/pull/116) ([fardog](https://github.com/fardog))
+-   Update flowchart.md in response Issue \#113 [\#114](https://github.com/knsv/mermaid/pull/114) ([vijay40](https://github.com/vijay40))
+-   Ignore all files except the license and dist/ folder when installing with Bower. [\#112](https://github.com/knsv/mermaid/pull/112) ([jasonbellamy](https://github.com/jasonbellamy))
 
 ## [0.3.3](https://github.com/knsv/mermaid/tree/0.3.3) (2015-01-25)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.3.2...0.3.3)
 
 **Closed issues:**
 
-- Missing arrows in sequence diagram [\#98](https://github.com/knsv/mermaid/issues/98)
-- Error with \>9 linkStyles [\#95](https://github.com/knsv/mermaid/issues/95)
-- Support for dotted links [\#26](https://github.com/knsv/mermaid/issues/26)
+-   Missing arrows in sequence diagram [\#98](https://github.com/knsv/mermaid/issues/98)
+-   Error with \>9 linkStyles [\#95](https://github.com/knsv/mermaid/issues/95)
+-   Support for dotted links [\#26](https://github.com/knsv/mermaid/issues/26)
 
 **Merged pull requests:**
 
-- Require d3 directly to better support Node usage [\#107](https://github.com/knsv/mermaid/pull/107) ([markdalgleish](https://github.com/markdalgleish))
-- update doc with -c option [\#105](https://github.com/knsv/mermaid/pull/105) ([jjmr](https://github.com/jjmr))
-- Add new parameter to the console client to override the svg configuration in sequence diagrams [\#104](https://github.com/knsv/mermaid/pull/104) ([jjmr](https://github.com/jjmr))
-- Text based labels, new shape [\#101](https://github.com/knsv/mermaid/pull/101) ([bjowes](https://github.com/bjowes))
-- fix html tags in example usage [\#100](https://github.com/knsv/mermaid/pull/100) ([deiwin](https://github.com/deiwin))
+-   Require d3 directly to better support Node usage [\#107](https://github.com/knsv/mermaid/pull/107) ([markdalgleish](https://github.com/markdalgleish))
+-   update doc with -c option [\#105](https://github.com/knsv/mermaid/pull/105) ([jjmr](https://github.com/jjmr))
+-   Add new parameter to the console client to override the svg configuration in sequence diagrams [\#104](https://github.com/knsv/mermaid/pull/104) ([jjmr](https://github.com/jjmr))
+-   Text based labels, new shape [\#101](https://github.com/knsv/mermaid/pull/101) ([bjowes](https://github.com/bjowes))
+-   fix html tags in example usage [\#100](https://github.com/knsv/mermaid/pull/100) ([deiwin](https://github.com/deiwin))
 
 ## [0.3.2](https://github.com/knsv/mermaid/tree/0.3.2) (2015-01-11)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.3.1...0.3.2)
 
 **Closed issues:**
 
-- disable auto render [\#91](https://github.com/knsv/mermaid/issues/91)
-- Tidy breaks mermaid \(linebreaks in \<div\>\) [\#87](https://github.com/knsv/mermaid/issues/87)
-- Bug: \<br\> being rendered as text in node [\#73](https://github.com/knsv/mermaid/issues/73)
-- Graph edges appear to render outside of the canvas [\#70](https://github.com/knsv/mermaid/issues/70)
-- Make link text look like it is on the line [\#53](https://github.com/knsv/mermaid/issues/53)
+-   disable auto render [\#91](https://github.com/knsv/mermaid/issues/91)
+-   Tidy breaks mermaid \(linebreaks in \<div\>\) [\#87](https://github.com/knsv/mermaid/issues/87)
+-   Bug: \<br\> being rendered as text in node [\#73](https://github.com/knsv/mermaid/issues/73)
+-   Graph edges appear to render outside of the canvas [\#70](https://github.com/knsv/mermaid/issues/70)
+-   Make link text look like it is on the line [\#53](https://github.com/knsv/mermaid/issues/53)
 
 **Merged pull requests:**
 
-- Merge pull request \#1 from knsv/master [\#96](https://github.com/knsv/mermaid/pull/96) ([gkchic](https://github.com/gkchic))
-- Removed duplicated section in flowchart docs [\#94](https://github.com/knsv/mermaid/pull/94) ([kaime](https://github.com/kaime))
-- Grammar changes to sequence page [\#93](https://github.com/knsv/mermaid/pull/93) ([gkchic](https://github.com/gkchic))
-- Github buttons [\#89](https://github.com/knsv/mermaid/pull/89) ([gkchic](https://github.com/gkchic))
-- Template change [\#88](https://github.com/knsv/mermaid/pull/88) ([gkchic](https://github.com/gkchic))
+-   Merge pull request \#1 from knsv/master [\#96](https://github.com/knsv/mermaid/pull/96) ([gkchic](https://github.com/gkchic))
+-   Removed duplicated section in flowchart docs [\#94](https://github.com/knsv/mermaid/pull/94) ([kaime](https://github.com/kaime))
+-   Grammar changes to sequence page [\#93](https://github.com/knsv/mermaid/pull/93) ([gkchic](https://github.com/gkchic))
+-   Github buttons [\#89](https://github.com/knsv/mermaid/pull/89) ([gkchic](https://github.com/gkchic))
+-   Template change [\#88](https://github.com/knsv/mermaid/pull/88) ([gkchic](https://github.com/gkchic))
 
 ## [0.3.1](https://github.com/knsv/mermaid/tree/0.3.1) (2015-01-05)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.3.0...0.3.1)
 
 **Closed issues:**
 
-- Non ASCII chars in labels [\#84](https://github.com/knsv/mermaid/issues/84)
-- 'undefined' titles of Quicklinks on the usage page [\#80](https://github.com/knsv/mermaid/issues/80)
-- \[cli\] Enhancement proposal: not fail --version / --help if phantomjs isn't installed [\#71](https://github.com/knsv/mermaid/issues/71)
-- Neural Networks [\#39](https://github.com/knsv/mermaid/issues/39)
-- Support for sequence diagrams [\#16](https://github.com/knsv/mermaid/issues/16)
-- Client utility for mermaid [\#6](https://github.com/knsv/mermaid/issues/6)
+-   Non ASCII chars in labels [\#84](https://github.com/knsv/mermaid/issues/84)
+-   'undefined' titles of Quicklinks on the usage page [\#80](https://github.com/knsv/mermaid/issues/80)
+-   \[cli\] Enhancement proposal: not fail --version / --help if phantomjs isn't installed [\#71](https://github.com/knsv/mermaid/issues/71)
+-   Neural Networks [\#39](https://github.com/knsv/mermaid/issues/39)
+-   Support for sequence diagrams [\#16](https://github.com/knsv/mermaid/issues/16)
+-   Client utility for mermaid [\#6](https://github.com/knsv/mermaid/issues/6)
 
 **Merged pull requests:**
 
-- Flowchart doc: Text in the circle now in a circle [\#81](https://github.com/knsv/mermaid/pull/81) ([Grahack](https://github.com/Grahack))
-- Fix for issue \#73 [\#79](https://github.com/knsv/mermaid/pull/79) ([it0a](https://github.com/it0a))
-- Ink template [\#78](https://github.com/knsv/mermaid/pull/78) ([gkchic](https://github.com/gkchic))
-- Show help and version even if phantom isn't present. Fixes \#71 [\#75](https://github.com/knsv/mermaid/pull/75) ([fardog](https://github.com/fardog))
-- Add apostrophe & 'and' [\#72](https://github.com/knsv/mermaid/pull/72) ([sudodoki](https://github.com/sudodoki))
+-   Flowchart doc: Text in the circle now in a circle [\#81](https://github.com/knsv/mermaid/pull/81) ([Grahack](https://github.com/Grahack))
+-   Fix for issue \#73 [\#79](https://github.com/knsv/mermaid/pull/79) ([it0a](https://github.com/it0a))
+-   Ink template [\#78](https://github.com/knsv/mermaid/pull/78) ([gkchic](https://github.com/gkchic))
+-   Show help and version even if phantom isn't present. Fixes \#71 [\#75](https://github.com/knsv/mermaid/pull/75) ([fardog](https://github.com/fardog))
+-   Add apostrophe & 'and' [\#72](https://github.com/knsv/mermaid/pull/72) ([sudodoki](https://github.com/sudodoki))
 
 ## [0.3.0](https://github.com/knsv/mermaid/tree/0.3.0) (2014-12-22)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.16...0.3.0)
 
 **Closed issues:**
 
-- Consider shipping a standalone executable [\#65](https://github.com/knsv/mermaid/issues/65)
-- Trailing whitespace at the end of lines is not ignored [\#55](https://github.com/knsv/mermaid/issues/55)
-- How do I do comments? [\#47](https://github.com/knsv/mermaid/issues/47)
-- This characters failed the lexical parsing [\#46](https://github.com/knsv/mermaid/issues/46)
-- tutorial for creating new type of graph/layout [\#44](https://github.com/knsv/mermaid/issues/44)
-- Improve readability with new line as terminator and whitespace [\#38](https://github.com/knsv/mermaid/issues/38)
-- Use classes instead of inline style for easy styling [\#24](https://github.com/knsv/mermaid/issues/24)
+-   Consider shipping a standalone executable [\#65](https://github.com/knsv/mermaid/issues/65)
+-   Trailing whitespace at the end of lines is not ignored [\#55](https://github.com/knsv/mermaid/issues/55)
+-   How do I do comments? [\#47](https://github.com/knsv/mermaid/issues/47)
+-   This characters failed the lexical parsing [\#46](https://github.com/knsv/mermaid/issues/46)
+-   tutorial for creating new type of graph/layout [\#44](https://github.com/knsv/mermaid/issues/44)
+-   Improve readability with new line as terminator and whitespace [\#38](https://github.com/knsv/mermaid/issues/38)
+-   Use classes instead of inline style for easy styling [\#24](https://github.com/knsv/mermaid/issues/24)
 
 **Merged pull requests:**
 
-- Adds Command Line Interface for generating PNGs from mermaid description files [\#69](https://github.com/knsv/mermaid/pull/69) ([fardog](https://github.com/fardog))
-- Allow special symbols for direction along with acronyms [\#66](https://github.com/knsv/mermaid/pull/66) ([vijay40](https://github.com/vijay40))
+-   Adds Command Line Interface for generating PNGs from mermaid description files [\#69](https://github.com/knsv/mermaid/pull/69) ([fardog](https://github.com/fardog))
+-   Allow special symbols for direction along with acronyms [\#66](https://github.com/knsv/mermaid/pull/66) ([vijay40](https://github.com/vijay40))
 
 ## [0.2.16](https://github.com/knsv/mermaid/tree/0.2.16) (2014-12-15)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.15...0.2.16)
 
 **Closed issues:**
 
-- Mermaid not rendering properly on Wordpress pages [\#59](https://github.com/knsv/mermaid/issues/59)
-- Improve example page with live demo [\#52](https://github.com/knsv/mermaid/issues/52)
-- Create image file via CLI? [\#48](https://github.com/knsv/mermaid/issues/48)
-- Does not render upon AngularJS Updates [\#45](https://github.com/knsv/mermaid/issues/45)
-- Download link in README.MD doesn't work. [\#42](https://github.com/knsv/mermaid/issues/42)
-- linkStyle usage is not obvious [\#41](https://github.com/knsv/mermaid/issues/41)
-- Move \*.spec.js in src/ to test/ [\#35](https://github.com/knsv/mermaid/issues/35)
-- Lines routed outside visible area [\#19](https://github.com/knsv/mermaid/issues/19)
+-   Mermaid not rendering properly on Wordpress pages [\#59](https://github.com/knsv/mermaid/issues/59)
+-   Improve example page with live demo [\#52](https://github.com/knsv/mermaid/issues/52)
+-   Create image file via CLI? [\#48](https://github.com/knsv/mermaid/issues/48)
+-   Does not render upon AngularJS Updates [\#45](https://github.com/knsv/mermaid/issues/45)
+-   Download link in README.MD doesn't work. [\#42](https://github.com/knsv/mermaid/issues/42)
+-   linkStyle usage is not obvious [\#41](https://github.com/knsv/mermaid/issues/41)
+-   Move \*.spec.js in src/ to test/ [\#35](https://github.com/knsv/mermaid/issues/35)
+-   Lines routed outside visible area [\#19](https://github.com/knsv/mermaid/issues/19)
 
 **Merged pull requests:**
 
-- New grammar will allow statements ending without semicolon as disccused in Issue \#38 [\#63](https://github.com/knsv/mermaid/pull/63) ([vijay40](https://github.com/vijay40))
-- Class based styling [\#62](https://github.com/knsv/mermaid/pull/62) ([bjowes](https://github.com/bjowes))
-- Fix typos [\#60](https://github.com/knsv/mermaid/pull/60) ([sublimino](https://github.com/sublimino))
-- Included .DS\_Store in gitignore [\#57](https://github.com/knsv/mermaid/pull/57) ([alvynmcq](https://github.com/alvynmcq))
-- Improves readablity discussed in issue \#38 [\#56](https://github.com/knsv/mermaid/pull/56) ([vijay40](https://github.com/vijay40))
-- Added a linting task for gulp [\#43](https://github.com/knsv/mermaid/pull/43) ([serv](https://github.com/serv))
+-   New grammar will allow statements ending without semicolon as disccused in Issue \#38 [\#63](https://github.com/knsv/mermaid/pull/63) ([vijay40](https://github.com/vijay40))
+-   Class based styling [\#62](https://github.com/knsv/mermaid/pull/62) ([bjowes](https://github.com/bjowes))
+-   Fix typos [\#60](https://github.com/knsv/mermaid/pull/60) ([sublimino](https://github.com/sublimino))
+-   Included .DS_Store in gitignore [\#57](https://github.com/knsv/mermaid/pull/57) ([alvynmcq](https://github.com/alvynmcq))
+-   Improves readablity discussed in issue \#38 [\#56](https://github.com/knsv/mermaid/pull/56) ([vijay40](https://github.com/vijay40))
+-   Added a linting task for gulp [\#43](https://github.com/knsv/mermaid/pull/43) ([serv](https://github.com/serv))
 
 ## [0.2.15](https://github.com/knsv/mermaid/tree/0.2.15) (2014-12-05)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.14...0.2.15)
 
 **Closed issues:**
 
-- Question marks don't render properly with /dist/mermaid.full.min.js [\#30](https://github.com/knsv/mermaid/issues/30)
-- Error with some characters [\#25](https://github.com/knsv/mermaid/issues/25)
-- Provide parse function in browser widthout `require`? [\#21](https://github.com/knsv/mermaid/issues/21)
-- Better label text support [\#18](https://github.com/knsv/mermaid/issues/18)
-- Cap-cased words break parser [\#8](https://github.com/knsv/mermaid/issues/8)
+-   Question marks don't render properly with /dist/mermaid.full.min.js [\#30](https://github.com/knsv/mermaid/issues/30)
+-   Error with some characters [\#25](https://github.com/knsv/mermaid/issues/25)
+-   Provide parse function in browser widthout `require`? [\#21](https://github.com/knsv/mermaid/issues/21)
+-   Better label text support [\#18](https://github.com/knsv/mermaid/issues/18)
+-   Cap-cased words break parser [\#8](https://github.com/knsv/mermaid/issues/8)
 
 **Merged pull requests:**
 
-- Include bower\_components/ to .gitignore [\#33](https://github.com/knsv/mermaid/pull/33) ([serv](https://github.com/serv))
-- Fixed reference to Git repo. [\#32](https://github.com/knsv/mermaid/pull/32) ([guyellis](https://github.com/guyellis))
+-   Include bower_components/ to .gitignore [\#33](https://github.com/knsv/mermaid/pull/33) ([serv](https://github.com/serv))
+-   Fixed reference to Git repo. [\#32](https://github.com/knsv/mermaid/pull/32) ([guyellis](https://github.com/guyellis))
 
 ## [0.2.14](https://github.com/knsv/mermaid/tree/0.2.14) (2014-12-03)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.13...0.2.14)
 
 ## [0.2.13](https://github.com/knsv/mermaid/tree/0.2.13) (2014-12-03)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.10...0.2.13)
 
 **Closed issues:**
 
-- modified init to be applied more than once [\#29](https://github.com/knsv/mermaid/issues/29)
-- Wanted to know build process for the project. [\#28](https://github.com/knsv/mermaid/issues/28)
-- Container support [\#27](https://github.com/knsv/mermaid/issues/27)
-- can not support Chinese description [\#20](https://github.com/knsv/mermaid/issues/20)
-- Node Label text mistaken for Direction [\#17](https://github.com/knsv/mermaid/issues/17)
-- Support unicode chars in labels [\#9](https://github.com/knsv/mermaid/issues/9)
-- Publish to NPM [\#7](https://github.com/knsv/mermaid/issues/7)
+-   modified init to be applied more than once [\#29](https://github.com/knsv/mermaid/issues/29)
+-   Wanted to know build process for the project. [\#28](https://github.com/knsv/mermaid/issues/28)
+-   Container support [\#27](https://github.com/knsv/mermaid/issues/27)
+-   can not support Chinese description [\#20](https://github.com/knsv/mermaid/issues/20)
+-   Node Label text mistaken for Direction [\#17](https://github.com/knsv/mermaid/issues/17)
+-   Support unicode chars in labels [\#9](https://github.com/knsv/mermaid/issues/9)
+-   Publish to NPM [\#7](https://github.com/knsv/mermaid/issues/7)
 
 ## [0.2.10](https://github.com/knsv/mermaid/tree/0.2.10) (2014-12-01)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.9...0.2.10)
 
 ## [0.2.9](https://github.com/knsv/mermaid/tree/0.2.9) (2014-12-01)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.8...0.2.9)
 
 **Closed issues:**
 
-- Add link to jsbin playground to README [\#11](https://github.com/knsv/mermaid/issues/11)
-- What are the requirements ? [\#10](https://github.com/knsv/mermaid/issues/10)
+-   Add link to jsbin playground to README [\#11](https://github.com/knsv/mermaid/issues/11)
+-   What are the requirements ? [\#10](https://github.com/knsv/mermaid/issues/10)
 
 **Merged pull requests:**
 
-- Allow unicode chars in labels [\#13](https://github.com/knsv/mermaid/pull/13) ([codebeige](https://github.com/codebeige))
+-   Allow unicode chars in labels [\#13](https://github.com/knsv/mermaid/pull/13) ([codebeige](https://github.com/codebeige))
 
 ## [0.2.8](https://github.com/knsv/mermaid/tree/0.2.8) (2014-12-01)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.7...0.2.8)
 
 ## [0.2.7](https://github.com/knsv/mermaid/tree/0.2.7) (2014-12-01)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.6...0.2.7)
 
 **Closed issues:**
 
-- Provide parser as separate module [\#4](https://github.com/knsv/mermaid/issues/4)
+-   Provide parser as separate module [\#4](https://github.com/knsv/mermaid/issues/4)
 
 ## [0.2.6](https://github.com/knsv/mermaid/tree/0.2.6) (2014-11-27)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.5...0.2.6)
 
 ## [0.2.5](https://github.com/knsv/mermaid/tree/0.2.5) (2014-11-27)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.4...0.2.5)
 
 **Merged pull requests:**
 
-- Added new shapes! [\#1](https://github.com/knsv/mermaid/pull/1) ([bjowes](https://github.com/bjowes))
+-   Added new shapes! [\#1](https://github.com/knsv/mermaid/pull/1) ([bjowes](https://github.com/bjowes))
 
 ## [0.2.4](https://github.com/knsv/mermaid/tree/0.2.4) (2014-11-25)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.3...0.2.4)
 
 ## [0.2.3](https://github.com/knsv/mermaid/tree/0.2.3) (2014-11-24)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.2...0.2.3)
 
 ## [0.2.2](https://github.com/knsv/mermaid/tree/0.2.2) (2014-11-22)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.1...0.2.2)
 
 ## [0.2.1](https://github.com/knsv/mermaid/tree/0.2.1) (2014-11-22)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.0...0.2.1)
 
 ## [0.2.0](https://github.com/knsv/mermaid/tree/0.2.0) (2014-11-22)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.1.1...0.2.0)
 
 ## [0.1.1](https://github.com/knsv/mermaid/tree/0.1.1) (2014-11-17)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.1.0...0.1.1)
 
 ## [0.1.0](https://github.com/knsv/mermaid/tree/0.1.0) (2014-11-16)
 
-
-\* *This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/Github-Changelog-Generator)*
\ No newline at end of file
+\* _This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/Github-Changelog-Generator)_
diff --git a/docs/Setup.md b/docs/Setup.md
index 37c07f76e..e1c8879cd 100644
--- a/docs/Setup.md
+++ b/docs/Setup.md
@@ -1402,15 +1402,6 @@ This sets the auto-wrap padding for the diagram (sides only)
 
 **Notes:** Default value: 0.
 
-## parse
-
-### Parameters
-
--   `text`  
--   `dia`  
-
-Returns **any** 
-
 ## setSiteConfig
 
 ## setSiteConfig
@@ -1460,18 +1451,6 @@ corresponding siteConfig value.
 
 Returns **any** The currentConfig merged with the sanitized conf
 
-## getConfig
-
-## getConfig
-
-| Function  | Description               | Type        | Return Values                  |
-| --------- | ------------------------- | ----------- | ------------------------------ |
-| getConfig | Obtains the currentConfig | Get Request | Any Values from current Config |
-
-**Notes**: Returns **any** the currentConfig
-
-Returns **any** The currentConfig
-
 ## render
 
 Function that renders an svg with a graph from a chart definition. Usage example below.
@@ -1492,7 +1471,7 @@ $(function () {
 ### Parameters
 
 -   `id` **any** The id of the element to be rendered
--   `_txt` **any** The graph definition
+-   `text` **any** The graph definition
 -   `cb` **any** Callback which is called after rendering is finished with the svg code as inparam.
 -   `container` **any** Selector to element in which a div with the graph temporarily will be
       inserted. In one is provided a hidden div will be inserted in the body of the page instead. The
@@ -1500,6 +1479,18 @@ $(function () {
 
 Returns **any** 
 
+## getConfig
+
+## getConfig
+
+| Function  | Description               | Type        | Return Values                  |
+| --------- | ------------------------- | ----------- | ------------------------------ |
+| getConfig | Obtains the currentConfig | Get Request | Any Values from current Config |
+
+**Notes**: Returns **any** the currentConfig
+
+Returns **any** The currentConfig
+
 ## sanitize
 
 ## sanitize
@@ -1539,19 +1530,17 @@ Pushes in a directive to the configuration
 
 **Notes**: (default: current siteConfig ) (optional, default `getSiteConfig()`)
 
-Returns **void** 
-
-## updateRendererConfigs
-
 ### Parameters
 
--   `conf` **any** 
+-   `config`   (optional, default `siteConfig`)
+
+Returns **void** 
 
 ## initialize
 
 ### Parameters
 
--   `options` **any** 
+-   `options` **MermaidConfig** 
 
 ## 
 
diff --git a/package.json b/package.json
index e45354dde..abb1c29a5 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "build:dev": "webpack --mode development --progress --color",
     "build:prod": "webpack --mode production --progress --color",
     "build": "concurrently \"yarn build:dev\" \"yarn build:prod\"",
-    "postbuild": "documentation build src/mermaidAPI.js src/config.ts src/defaultConfig.ts --shallow -f md --markdown-toc false > docs/Setup.md",
+    "postbuild": "documentation build src/mermaidAPI.ts src/config.ts src/defaultConfig.ts --shallow -f md --markdown-toc false > docs/Setup.md",
     "build:watch": "yarn build:dev --watch",
     "release": "yarn build",
     "lint": "eslint ./ --ext .js,.json,.html",
@@ -82,6 +82,7 @@
     "@types/d3": "^7.4.0",
     "@types/dompurify": "^2.3.3",
     "@types/jest": "^28.1.7",
+    "@types/stylis": "^4.0.2",
     "babel-jest": "^28.0.3",
     "babel-loader": "^8.2.2",
     "concurrently": "^7.0.0",
diff --git a/src/Diagram.ts b/src/Diagram.ts
index e822d0195..0a558f0d7 100644
--- a/src/Diagram.ts
+++ b/src/Diagram.ts
@@ -2,12 +2,12 @@ import * as configApi from './config';
 import { log } from './logger';
 import { getDiagrams } from './diagram-api/diagramAPI';
 import { detectType } from './diagram-api/detectType';
-class Diagram {
+export class Diagram {
   type = 'graph';
   parser;
   renderer;
   db;
-  constructor(public txt: string) {
+  constructor(public txt: string, parseError?: Function) {
     const diagrams = getDiagrams();
     const cnf = configApi.getConfig();
     this.txt = txt;
@@ -38,39 +38,38 @@ class Diagram {
       const error = { str, hash };
       throw error;
     };
-    this.parser.parse(this.txt);
+    // TODO Q: Should diagrams be parsed inside constructor?
+    this.parse(this.txt, parseError);
   }
 
-  parse(text: string) {
-    var parseEncounteredException = false;
+  parse(text: string, parseError?: Function): boolean {
     try {
       text = text + '\n';
       this.db.clear();
-
       this.parser.parse(text);
+      return true;
     } catch (error) {
-      parseEncounteredException = true;
       // Is this the correct way to access mermiad's parseError()
       // method ? (or global.mermaid.parseError()) ?
       // @ts-ignore
-      if (global.mermaid.parseError) {
+      if (parseError) {
         // @ts-ignore
         if (error.str != undefined) {
           // handle case where error string and hash were
           // wrapped in object like`const error = { str, hash };`
           // @ts-ignore
-          global.mermaid.parseError(error.str, error.hash);
+          parseError(error.str, error.hash);
         } else {
           // assume it is just error string and pass it on
           // @ts-ignore
-          global.mermaid.parseError(error);
+          parseError(error);
         }
       } else {
         // No mermaid.parseError() handler defined, so re-throw it
         throw error;
       }
     }
-    return !parseEncounteredException;
+    return false;
   }
 
   getParser() {
diff --git a/src/config.ts b/src/config.ts
index dfad7fad1..579831703 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -218,8 +218,8 @@ export const addDirective = (directive: any) => {
  *
  * **Notes**: (default: current siteConfig ) (optional, default `getSiteConfig()`)
  */
-export const reset = (): void => {
+export const reset = (config = siteConfig): void => {
   // Replace current config with siteConfig
   directives = [];
-  updateCurrentConfig(siteConfig, directives);
+  updateCurrentConfig(config, directives);
 };
diff --git a/src/diagrams/flowchart/flowRenderer-v2.js b/src/diagrams/flowchart/flowRenderer-v2.js
index 9fc28f266..09c3089c2 100644
--- a/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/src/diagrams/flowchart/flowRenderer-v2.js
@@ -2,7 +2,6 @@ import graphlib from 'graphlib';
 import { select, curveLinear, selectAll } from 'd3';
 
 import flowDb from './flowDb';
-import flow from './parser/flow';
 import { getConfig } from '../../config';
 
 import { render } from '../../dagre-wrapper/index.js';
@@ -363,11 +362,10 @@ export const draw = function (text, id, _version, diagObj) {
     dir = 'TD';
   }
 
-  const conf = getConfig().flowchart;
+  const { securityLevel, flowchart: conf } = getConfig();
   const nodeSpacing = conf.nodeSpacing || 50;
   const rankSpacing = conf.rankSpacing || 50;
 
-  const securityLevel = getConfig().securityLevel;
   // Handle root and document for when rendering in sandbox mode
   let sandboxElement;
   if (securityLevel === 'sandbox') {
diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js
index 3e2219650..668779c28 100644
--- a/src/diagrams/flowchart/flowRenderer.js
+++ b/src/diagrams/flowchart/flowRenderer.js
@@ -296,7 +296,7 @@ export const getClasses = function (text, diagObj) {
 export const draw = function (text, id, _version, diagObj) {
   log.info('Drawing flowchart');
   diagObj.db.clear();
-  const securityLevel = getConfig().securityLevel;
+  const { securityLevel, flowchart: conf } = getConfig();
   let sandboxElement;
   if (securityLevel === 'sandbox') {
     sandboxElement = select('#i' + id);
@@ -319,8 +319,6 @@ export const draw = function (text, id, _version, diagObj) {
   if (typeof dir === 'undefined') {
     dir = 'TD';
   }
-
-  const conf = getConfig().flowchart;
   const nodeSpacing = conf.nodeSpacing || 50;
   const rankSpacing = conf.rankSpacing || 50;
 
@@ -460,7 +458,9 @@ export const draw = function (text, id, _version, diagObj) {
   }
 
   // Add label rects for non html labels
-  if (!evaluate(conf.htmlLabels) || true) { // eslint-disable-line
+  // TODO: This always evaluates to true. Bug?
+  // eslint-disable-next-line no-constant-condition
+  if (!evaluate(conf.htmlLabels) || true) {
     const labels = doc.querySelectorAll('[id="' + id + '"] .edgeLabel .label');
     for (let k = 0; k < labels.length; k++) {
       const label = labels[k];
diff --git a/src/diagrams/sequence/sequenceRenderer.js b/src/diagrams/sequence/sequenceRenderer.js
index ee9c5c87e..c3ea1bcfd 100644
--- a/src/diagrams/sequence/sequenceRenderer.js
+++ b/src/diagrams/sequence/sequenceRenderer.js
@@ -588,8 +588,8 @@ function adjustLoopHeightForWrap(loopWidths, msg, preMargin, postMargin, addLoop
  * @param {any} diagObj A stanard diagram containing the db and the text and type etc of the diagram
  */
 export const draw = function (_text, id, _version, diagObj) {
-  conf = configApi.getConfig().sequence;
-  const securityLevel = configApi.getConfig().securityLevel;
+  const { securityLevel, sequence } = configApi.getConfig();
+  conf = sequence;
   // Handle root and Document for when rendering in sanbox mode
   let sandboxElement;
   if (securityLevel === 'sandbox') {
diff --git a/src/diagrams/state/stateRenderer-v2.js b/src/diagrams/state/stateRenderer-v2.js
index f8bec4cff..73d7d6993 100644
--- a/src/diagrams/state/stateRenderer-v2.js
+++ b/src/diagrams/state/stateRenderer-v2.js
@@ -248,12 +248,10 @@ export const draw = function (text, id, _version, diag) {
     dir = 'LR';
   }
 
-  const conf = getConfig().state;
+  const { securityLevel, state: conf } = getConfig().state;
   const nodeSpacing = conf.nodeSpacing || 50;
   const rankSpacing = conf.rankSpacing || 50;
 
-  const securityLevel = getConfig().securityLevel;
-
   log.info(diag.db.getRootDocV2());
   diag.db.extract(diag.db.getRootDocV2());
   log.info(diag.db.getRootDocV2());
diff --git a/src/diagrams/user-journey/journeyRenderer.js b/src/diagrams/user-journey/journeyRenderer.js
index 79424cfef..0e3f94f34 100644
--- a/src/diagrams/user-journey/journeyRenderer.js
+++ b/src/diagrams/user-journey/journeyRenderer.js
@@ -44,8 +44,9 @@ function drawActorLegend(diagram) {
     yPos += 20;
   });
 }
+// TODO: Cleanup?
 const conf = getConfig().journey;
-const LEFT_MARGIN = getConfig().journey.leftMargin;
+const LEFT_MARGIN = conf.leftMargin;
 export const draw = function (text, id, version, diagObj) {
   const conf = getConfig().journey;
   diagObj.db.clear();
diff --git a/src/mermaid.spec.js b/src/mermaid.spec.js
index 3ca5c77fd..1c5850511 100644
--- a/src/mermaid.spec.js
+++ b/src/mermaid.spec.js
@@ -227,5 +227,14 @@ describe('when using mermaid and ', function () {
         'end';
       expect(() => mermaid.parse(text)).toThrow();
     });
+
+    it('should return false for invalid definition WITH a parseError() callback defined', function () {
+      let parseErrorWasCalled = false;
+      mermaid.setParseErrorHandler(() => {
+        parseErrorWasCalled = true;
+      });
+      expect(mermaid.parse('this is not a mermaid diagram definition')).toEqual(false);
+      expect(parseErrorWasCalled).toEqual(true);
+    });
   });
 });
diff --git a/src/mermaid.ts b/src/mermaid.ts
index 45007fb3c..e9b5b7716 100644
--- a/src/mermaid.ts
+++ b/src/mermaid.ts
@@ -4,8 +4,8 @@
  */
 import { MermaidConfig } from './config.type';
 import { log } from './logger';
-import mermaidAPI from './mermaidAPI';
 import utils from './utils';
+import { mermaidAPI } from './mermaidAPI';
 
 /**
  * ## init
@@ -117,7 +117,7 @@ const initThrowsErrors = function (
       mermaidAPI.render(
         id,
         txt,
-        (svgCode: string, bindFunctions: (el: HTMLElement) => void) => {
+        (svgCode: string, bindFunctions?: (el: Element) => void) => {
           element.innerHTML = svgCode;
           if (typeof callback !== 'undefined') {
             callback(id);
@@ -180,23 +180,36 @@ if (typeof document !== 'undefined') {
  * @param {function (err, hash)} newParseErrorHandler New parseError() callback.
  */
 const setParseErrorHandler = function (newParseErrorHandler: (err: any, hash: any) => void) {
-  // @ts-ignore
   mermaid.parseError = newParseErrorHandler;
 };
 
-const mermaid = {
+const parse = (txt: string) => {
+  return mermaidAPI.parse(txt, mermaid.parseError);
+};
+
+const mermaid: {
+  startOnLoad: boolean;
+  diagrams: any;
+  parseError?: Function;
+  mermaidAPI: typeof mermaidAPI;
+  parse: typeof parse;
+  render: typeof mermaidAPI.render;
+  init: typeof init;
+  initThrowsErrors: typeof initThrowsErrors;
+  initialize: typeof initialize;
+  contentLoaded: typeof contentLoaded;
+  setParseErrorHandler: typeof setParseErrorHandler;
+} = {
   startOnLoad: true,
   diagrams: {},
   mermaidAPI,
-  parse: mermaidAPI != undefined ? mermaidAPI.parse : null,
-  render: mermaidAPI != undefined ? mermaidAPI.render : null,
-
+  parse,
+  render: mermaidAPI.render,
   init,
   initThrowsErrors,
   initialize,
   parseError: undefined,
   contentLoaded,
-
   setParseErrorHandler,
 };
 
diff --git a/src/mermaidAPI.spec.js b/src/mermaidAPI.spec.js
index e4c2d168d..17e139412 100644
--- a/src/mermaidAPI.spec.js
+++ b/src/mermaidAPI.spec.js
@@ -47,9 +47,12 @@ describe('when using mermaidAPI and ', function () {
       mermaidAPI.setConfig({ securityLevel: 'strict', logLevel: 1 });
       expect(mermaidAPI.getConfig().logLevel).toBe(1);
       expect(mermaidAPI.getConfig().securityLevel).toBe('strict');
-      mermaidAPI.globalReset();
+      mermaidAPI.reset();
       expect(mermaidAPI.getConfig().logLevel).toBe(0);
       expect(mermaidAPI.getConfig().securityLevel).toBe('loose');
+      mermaidAPI.globalReset();
+      expect(mermaidAPI.getConfig().logLevel).toBe(5);
+      expect(mermaidAPI.getConfig().securityLevel).toBe('strict');
     });
 
     it('should prevent changes to site defaults (sneaky)', function () {
@@ -130,14 +133,13 @@ describe('when using mermaidAPI and ', function () {
       expect(() => mermaidAPI.parse('graph TD;A--x|text including URL space|B;')).not.toThrow();
     });
     it('it should return false for invalid definition WITH a parseError() callback defined', function () {
-      var parseErrorWasCalled = false;
+      let parseErrorWasCalled = false;
       // also test setParseErrorHandler() call working to set mermaid.parseError
-      mermaid.setParseErrorHandler(function (error, hash) {
-        // got here.
-        parseErrorWasCalled = true;
-      });
-      expect(mermaid.parseError).not.toEqual(undefined);
-      expect(mermaidAPI.parse('this is not a mermaid diagram definition')).toEqual(false);
+      expect(
+        mermaidAPI.parse('this is not a mermaid diagram definition', () => {
+          parseErrorWasCalled = true;
+        })
+      ).toEqual(false);
       expect(parseErrorWasCalled).toEqual(true);
     });
     it('it should return true for valid definition', function () {
diff --git a/src/mermaidAPI.js b/src/mermaidAPI.ts
similarity index 80%
rename from src/mermaidAPI.js
rename to src/mermaidAPI.ts
index b393dd94e..6436e54db 100644
--- a/src/mermaidAPI.js
+++ b/src/mermaidAPI.ts
@@ -17,19 +17,14 @@
  */
 import { select } from 'd3';
 import { compile, serialize, stringify } from 'stylis';
+// @ts-ignore
 import pkg from '../package.json';
 import * as configApi from './config';
 import { addDiagrams } from './diagram-api/diagram-orchestration';
 import classDb from './diagrams/class/classDb';
 import flowDb from './diagrams/flowchart/flowDb';
 import flowRenderer from './diagrams/flowchart/flowRenderer';
-import flowRendererV2 from './diagrams/flowchart/flowRenderer-v2';
 import ganttDb from './diagrams/gantt/ganttDb';
-import ganttRenderer from './diagrams/gantt/ganttRenderer';
-import sequenceRenderer from './diagrams/sequence/sequenceRenderer';
-import stateRenderer from './diagrams/state/stateRenderer';
-import stateRendererV2 from './diagrams/state/stateRenderer-v2';
-import journeyRenderer from './diagrams/user-journey/journeyRenderer';
 import Diagram from './Diagram';
 import errorRenderer from './errorRenderer';
 import { attachFunctions } from './interactionDb';
@@ -37,50 +32,21 @@ import { log, setLogLevel } from './logger';
 import getStyles from './styles';
 import theme from './themes';
 import utils, { directiveSanitizer } from './utils';
-import assignWithDepth from './assignWithDepth';
 import DOMPurify from 'dompurify';
-import mermaid from './mermaid';
+import { MermaidConfig } from './config.type';
 
 let hasLoadedDiagrams = false;
 
-/**
- * @param text
- * @param dia
- * @returns {any}
- */
-function parse(text, dia) {
+function parse(text: string, parseError?: Function): boolean {
   if (!hasLoadedDiagrams) {
     addDiagrams();
     hasLoadedDiagrams = true;
   }
-  var parseEncounteredException = false;
-
-  try {
-    const diag = dia ? dia : new Diagram(text);
-    diag.db.clear();
-    return diag.parse(text);
-  } catch (error) {
-    parseEncounteredException = true;
-    // Is this the correct way to access mermiad's parseError()
-    // method ? (or global.mermaid.parseError()) ?
-    if (mermaid.parseError) {
-      if (error.str != undefined) {
-        // handle case where error string and hash were
-        // wrapped in object like`const error = { str, hash };`
-        mermaid.parseError(error.str, error.hash);
-      } else {
-        // assume it is just error string and pass it on
-        mermaid.parseError(error);
-      }
-    } else {
-      // No mermaid.parseError() handler defined, so re-throw it
-      throw error;
-    }
-  }
-  return !parseEncounteredException;
+  const diagram = new Diagram(text, parseError);
+  return diagram.parse(text, parseError);
 }
 
-export const encodeEntities = function (text) {
+export const encodeEntities = function (text: string): string {
   let txt = text;
 
   txt = txt.replace(/style.*:\S*#.*;/g, function (s) {
@@ -106,7 +72,7 @@ export const encodeEntities = function (text) {
   return txt;
 };
 
-export const decodeEntities = function (text) {
+export const decodeEntities = function (text: string): string {
   let txt = text;
 
   txt = txt.replace(/fl°°/g, function () {
@@ -138,17 +104,22 @@ export const decodeEntities = function (text) {
  * ```
  *
  * @param {any} id The id of the element to be rendered
- * @param {any} _txt The graph definition
+ * @param {any} text The graph definition
  * @param {any} cb Callback which is called after rendering is finished with the svg code as inparam.
  * @param {any} container Selector to element in which a div with the graph temporarily will be
  *   inserted. In one is provided a hidden div will be inserted in the body of the page instead. The
  *   element will be removed when rendering is completed.
  * @returns {any}
  */
-const render = function (id, _txt, cb, container) {
+const render = function (
+  id: string,
+  text: string,
+  cb: (svgCode: string, bindFunctions?: (element: Element) => void) => void,
+  container: Element
+) {
   configApi.reset();
-  let txt = _txt.replace(/\r\n?/g, '\n'); // parser problems on CRLF ignore all CR and leave LF;;
-  const graphInit = utils.detectInit(txt);
+  text = text.replace(/\r\n?/g, '\n'); // parser problems on CRLF ignore all CR and leave LF;;
+  const graphInit = utils.detectInit(text);
   if (graphInit) {
     directiveSanitizer(graphInit);
     configApi.addDirective(graphInit);
@@ -158,11 +129,11 @@ const render = function (id, _txt, cb, container) {
   log.debug(cnf);
 
   // Check the maximum allowed text size
-  if (_txt.length > cnf.maxTextSize) {
-    txt = 'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa';
+  if (text.length > cnf.maxTextSize) {
+    text = 'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa';
   }
 
-  let root = select('body');
+  let root: any = select('body');
 
   // In regular execution the container will be the div with a mermaid class
   if (typeof container !== 'undefined') {
@@ -174,12 +145,14 @@ const render = function (id, _txt, cb, container) {
         .attr('id', 'i' + id)
         .attr('style', 'width: 100%; height: 100%;')
         .attr('sandbox', '');
-      root = select(iframe.nodes()[0].contentDocument.body);
+      root = select(iframe.nodes()[0]!.contentDocument!.body);
       root.node().style.margin = 0;
     }
 
     // A container was provided by the caller
-    container.innerHTML = '';
+    if (container) {
+      container.innerHTML = '';
+    }
 
     if (cnf.securityLevel === 'sandbox') {
       // IF we are in sandboxed mode, we do everyting mermaid related
@@ -190,7 +163,7 @@ const render = function (id, _txt, cb, container) {
         .attr('style', 'width: 100%; height: 100%;')
         .attr('sandbox', '');
       // const iframeBody = ;
-      root = select(iframe.nodes()[0].contentDocument.body);
+      root = select(iframe.nodes()[0]!.contentDocument!.body);
       root.node().style.margin = 0;
     } else {
       root = select(container);
@@ -238,7 +211,7 @@ const render = function (id, _txt, cb, container) {
         .attr('style', 'width: 100%; height: 100%;')
         .attr('sandbox', '');
 
-      root = select(iframe.nodes()[0].contentDocument.body);
+      root = select(iframe.nodes()[0]!.contentDocument!.body);
       root.node().style.margin = 0;
     } else {
       root = select('body');
@@ -256,10 +229,10 @@ const render = function (id, _txt, cb, container) {
       .append('g');
   }
 
-  txt = encodeEntities(txt);
+  text = encodeEntities(text);
 
   // Important that we do not create the diagram until after the directives have been included
-  const diag = new Diagram(txt);
+  const diag = new Diagram(text);
   // Get the tmp element containing the the svg
   const element = root.select('#d' + id).node();
   const graphType = diag.type;
@@ -286,7 +259,7 @@ const render = function (id, _txt, cb, container) {
 
   // classDef
   if (graphType === 'flowchart' || graphType === 'flowchart-v2' || graphType === 'graph') {
-    const classes = flowRenderer.getClasses(txt, diag);
+    const classes: any = flowRenderer.getClasses(text, diag);
     const htmlLabels = cnf.htmlLabels || cnf.flowchart.htmlLabels;
     for (const className in classes) {
       if (htmlLabels) {
@@ -321,7 +294,8 @@ const render = function (id, _txt, cb, container) {
     }
   }
 
-  const stylis = (selector, styles) => serialize(compile(`${selector}{${styles}}`), stringify);
+  const stylis = (selector: string, styles: string) =>
+    serialize(compile(`${selector}{${styles}}`), stringify);
   const rules = stylis(`#${id}`, getStyles(graphType, userStyles, cnf.themeVariables));
 
   const style1 = document.createElement('style');
@@ -329,7 +303,7 @@ const render = function (id, _txt, cb, container) {
   svg.insertBefore(style1, firstChild);
 
   try {
-    diag.renderer.draw(txt, id, pkg.version, diag);
+    diag.renderer.draw(text, id, pkg.version, diag);
   } catch (e) {
     errorRenderer.draw(id, pkg.version);
     throw e;
@@ -400,16 +374,16 @@ const render = function (id, _txt, cb, container) {
 
   const tmpElementSelector = cnf.securityLevel === 'sandbox' ? '#i' + id : '#d' + id;
   const node = select(tmpElementSelector).node();
-  if (node !== null && typeof node.remove === 'function') {
-    select(tmpElementSelector).node().remove();
+  if (node && 'remove' in node) {
+    node.remove();
   }
 
   return svgCode;
 };
 
-let currentDirective = {};
+let currentDirective: { type?: string; args?: any } | undefined = {};
 
-const parseDirective = function (p, statement, context, type) {
+const parseDirective = function (p: any, statement: string, context: string, type: string): void {
   try {
     if (statement !== undefined) {
       statement = statement.trim();
@@ -418,14 +392,16 @@ const parseDirective = function (p, statement, context, type) {
           currentDirective = {};
           break;
         case 'type_directive':
+          if (!currentDirective) throw new Error('currentDirective is undefined');
           currentDirective.type = statement.toLowerCase();
           break;
         case 'arg_directive':
+          if (!currentDirective) throw new Error('currentDirective is undefined');
           currentDirective.args = JSON.parse(statement);
           break;
         case 'close_directive':
           handleDirective(p, currentDirective, type);
-          currentDirective = null;
+          currentDirective = undefined;
           break;
       }
     }
@@ -433,11 +409,12 @@ const parseDirective = function (p, statement, context, type) {
     log.error(
       `Error while rendering sequenceDiagram directive: ${statement} jison context: ${context}`
     );
+    // @ts-ignore
     log.error(error.message);
   }
 };
 
-const handleDirective = function (p, directive, type) {
+const handleDirective = function (p: any, directive: any, type: string): void {
   log.debug(`Directive type=${directive.type} with args:`, directive.args);
   switch (directive.type) {
     case 'init':
@@ -477,27 +454,8 @@ const handleDirective = function (p, directive, type) {
   }
 };
 
-/** @param {any} conf */
-function updateRendererConfigs(conf) {
-  // Todo remove, all diagrams should get config on demand from the config object, no need for this
-
-  flowRenderer.setConf(conf.flowchart);
-  flowRendererV2.setConf(conf.flowchart);
-  if (typeof conf['sequenceDiagram'] !== 'undefined') {
-    sequenceRenderer.setConf(assignWithDepth(conf.sequence, conf['sequenceDiagram']));
-  }
-  sequenceRenderer.setConf(conf.sequence);
-  ganttRenderer.setConf(conf.gantt);
-  // classRenderer.setConf(conf.class);
-  stateRenderer.setConf(conf.state);
-  stateRendererV2.setConf(conf.state);
-  // infoRenderer.setConf(conf.class);
-  journeyRenderer.setConf(conf.journey);
-  errorRenderer.setConf(conf.class);
-}
-
-/** @param {any} options */
-function initialize(options) {
+/** @param {MermaidConfig} options */
+function initialize(options: MermaidConfig) {
   // Handle legacy location of font-family configuration
   if (options?.fontFamily) {
     if (!options.themeVariables?.fontFamily) {
@@ -508,9 +466,11 @@ function initialize(options) {
   // Set default options
   configApi.saveConfigFromInitialize(options);
 
-  if (options?.theme && theme[options.theme]) {
+  if (options?.theme && options.theme in theme) {
     // Todo merge with user options
-    options.themeVariables = theme[options.theme].getThemeVariables(options.themeVariables);
+    options.themeVariables = theme[options.theme as keyof typeof theme].getThemeVariables(
+      options.themeVariables
+    );
   } else if (options) {
     options.themeVariables = theme.default.getThemeVariables(options.themeVariables);
   }
@@ -518,7 +478,6 @@ function initialize(options) {
   const config =
     typeof options === 'object' ? configApi.setSiteConfig(options) : configApi.getSiteConfig();
 
-  updateRendererConfigs(config);
   setLogLevel(config.logLevel);
   if (!hasLoadedDiagrams) {
     addDiagrams();
@@ -526,7 +485,7 @@ function initialize(options) {
   }
 }
 
-const mermaidAPI = Object.freeze({
+export const mermaidAPI = Object.freeze({
   render,
   parse,
   parseDirective,
@@ -540,14 +499,13 @@ const mermaidAPI = Object.freeze({
   },
   globalReset: () => {
     configApi.reset(configApi.defaultConfig);
-    updateRendererConfigs(configApi.getConfig());
   },
   defaultConfig: configApi.defaultConfig,
 });
 
 setLogLevel(configApi.getConfig().logLevel);
 configApi.reset(configApi.getConfig());
-
+console.log(mermaidAPI);
 export default mermaidAPI;
 /**
  * ## mermaidAPI configuration defaults
diff --git a/tsconfig.json b/tsconfig.json
index c95cdcec0..f3a860e32 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -35,7 +35,7 @@
     // "typeRoots": [] /* Specify multiple folders that act like `./node_modules/@types`. */,
     // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
     // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
-    // "resolveJsonModule": true,                        /* Enable importing .json files */
+    "resolveJsonModule": true /* Enable importing .json files */,
     // "noResolve": true,                                /* Disallow `import`s, `require`s or `<reference>`s from expanding the number of files TypeScript should add to a project. */
 
     /* JavaScript Support */
@@ -100,5 +100,5 @@
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
     "skipLibCheck": true /* Skip type checking all .d.ts files. */
   },
-  "include": ["./src/**/*.ts"]
+  "include": ["./src/**/*.ts", "./package.json"]
 }
diff --git a/yarn.lock b/yarn.lock
index e61e04ecd..850f3572d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2677,6 +2677,11 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
   integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
 
+"@types/stylis@^4.0.2":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.0.2.tgz#311c62d68a23dfb01462d54b04549484a4c5cb2a"
+  integrity sha512-wtckGuk1eXUlUz0Qb1eXHG37Z7HWT2GfMdqRf8F/ifddTwadSS9Jwsqi4qtXk7cP7MtoyGVIHPElFCLc6HItbg==
+
 "@types/tough-cookie@*":
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.2.tgz#6286b4c7228d58ab7866d19716f3696e03a09397"

From c245a2da07ce61e1a92553d30909f822849bbdd3 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 22 Aug 2022 12:59:23 +0530
Subject: [PATCH 17/60] tsConversion: rename DiagramAPI

---
 src/diagram-api/{diagramAPI.js => diagramAPI.ts} | 1 +
 1 file changed, 1 insertion(+)
 rename src/diagram-api/{diagramAPI.js => diagramAPI.ts} (99%)

diff --git a/src/diagram-api/diagramAPI.js b/src/diagram-api/diagramAPI.ts
similarity index 99%
rename from src/diagram-api/diagramAPI.js
rename to src/diagram-api/diagramAPI.ts
index 13ebe8ab8..7589ff47d 100644
--- a/src/diagram-api/diagramAPI.js
+++ b/src/diagram-api/diagramAPI.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import c4Db from '../diagrams/c4/c4Db';
 import c4Renderer from '../diagrams/c4/c4Renderer';
 import c4Parser from '../diagrams/c4/parser/c4Diagram';

From 1549eb20dfbf0698749ab50b2cb264e63d2015b5 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 22 Aug 2022 13:18:50 +0530
Subject: [PATCH 18/60] tsConversion: fix DiagramAPI

---
 docs/Setup.md                            | 36 +++++------
 jest.config.js                           |  3 +-
 package.json                             |  2 +-
 src/Diagram.ts                           | 25 +++-----
 src/config.type.ts                       |  3 +
 src/diagram-api/diagram-orchestration.ts |  5 +-
 src/diagram-api/diagramAPI.spec.ts       | 29 +++++++++
 src/diagram-api/diagramAPI.ts            | 79 +++++++++++++++++-------
 src/diagrams/flowchart/flowDb.js         |  4 +-
 9 files changed, 121 insertions(+), 65 deletions(-)
 create mode 100644 src/diagram-api/diagramAPI.spec.ts

diff --git a/docs/Setup.md b/docs/Setup.md
index e1c8879cd..432002d3a 100644
--- a/docs/Setup.md
+++ b/docs/Setup.md
@@ -1433,24 +1433,6 @@ Returns **[object][5]** The siteConfig
 
 Returns **[object][5]** The siteConfig
 
-## setConfig
-
-## setConfig
-
-| Function      | Description                           | Type        | Values                                  |
-| ------------- | ------------------------------------- | ----------- | --------------------------------------- |
-| setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array |
-
-**Notes**: Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure
-keys. Any values found in conf with key found in siteConfig.secure will be replaced with the
-corresponding siteConfig value.
-
-### Parameters
-
--   `conf` **any** The potential currentConfig
-
-Returns **any** The currentConfig merged with the sanitized conf
-
 ## render
 
 Function that renders an svg with a graph from a chart definition. Usage example below.
@@ -1479,6 +1461,24 @@ $(function () {
 
 Returns **any** 
 
+## setConfig
+
+## setConfig
+
+| Function      | Description                           | Type        | Values                                  |
+| ------------- | ------------------------------------- | ----------- | --------------------------------------- |
+| setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array |
+
+**Notes**: Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure
+keys. Any values found in conf with key found in siteConfig.secure will be replaced with the
+corresponding siteConfig value.
+
+### Parameters
+
+-   `conf` **any** The potential currentConfig
+
+Returns **any** The currentConfig merged with the sanitized conf
+
 ## getConfig
 
 ## getConfig
diff --git a/jest.config.js b/jest.config.js
index ebc6b9fb0..65ea3ef58 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,5 +1,6 @@
 const path = require('path');
 
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
 module.exports = {
   testEnvironment: 'jsdom',
   preset: 'ts-jest',
@@ -11,7 +12,7 @@ module.exports = {
     ],
   },
   transformIgnorePatterns: ['/node_modules/(?!dagre-d3-renderer/lib|khroma).*\\.js'],
-  testPathIgnorePatterns: ['/node_modules/', '.cache'],
+  testPathIgnorePatterns: ['/node_modules/', '.cache', './cypress'],
   moduleNameMapper: {
     '\\.(css|scss)$': 'identity-obj-proxy',
   },
diff --git a/package.json b/package.json
index abb1c29a5..7185e73f5 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
     "test": "yarn lint && jest src/.*",
     "test:watch": "jest --watch src",
     "prepublishOnly": "yarn build && yarn test",
-    "prepare": "husky install && yarn build",
+    "prepare": "husky install",
     "pre-commit": "lint-staged"
   },
   "repository": {
diff --git a/src/Diagram.ts b/src/Diagram.ts
index 0a558f0d7..df6633cda 100644
--- a/src/Diagram.ts
+++ b/src/Diagram.ts
@@ -1,6 +1,6 @@
 import * as configApi from './config';
 import { log } from './logger';
-import { getDiagrams } from './diagram-api/diagramAPI';
+import { getDiagram } from './diagram-api/diagramAPI';
 import { detectType } from './diagram-api/detectType';
 export class Diagram {
   type = 'graph';
@@ -8,28 +8,19 @@ export class Diagram {
   renderer;
   db;
   constructor(public txt: string, parseError?: Function) {
-    const diagrams = getDiagrams();
     const cnf = configApi.getConfig();
     this.txt = txt;
     this.type = detectType(txt, cnf);
+    const diagram = getDiagram(this.type);
     log.debug('Type ' + this.type);
-
-    // console.log('this.type', this.type, diagrams[this.type]);
     // Setup diagram
-    // @ts-ignore
-    this.db = diagrams[this.type].db;
+    this.db = diagram.db;
     this.db.clear?.();
-
-    // @ts-ignore
-    this.renderer = diagrams[this.type].renderer;
-    // @ts-ignore
-    this.parser = diagrams[this.type].parser;
-    // @ts-ignore
+    this.renderer = diagram.renderer;
+    this.parser = diagram.parser;
     this.parser.parser.yy = this.db;
-    // @ts-ignore
-    if (typeof diagrams[this.type].init === 'function') {
-      // @ts-ignore
-      diagrams[this.type].init(cnf);
+    if (diagram.init) {
+      diagram.init(cnf);
       log.debug('Initialized diagram ' + this.type, cnf);
     }
     this.txt += '\n';
@@ -51,7 +42,6 @@ export class Diagram {
     } catch (error) {
       // Is this the correct way to access mermiad's parseError()
       // method ? (or global.mermaid.parseError()) ?
-      // @ts-ignore
       if (parseError) {
         // @ts-ignore
         if (error.str != undefined) {
@@ -61,7 +51,6 @@ export class Diagram {
           parseError(error.str, error.hash);
         } else {
           // assume it is just error string and pass it on
-          // @ts-ignore
           parseError(error);
         }
       } else {
diff --git a/src/config.type.ts b/src/config.type.ts
index 632eac73a..a59d39547 100644
--- a/src/config.type.ts
+++ b/src/config.type.ts
@@ -29,6 +29,7 @@ export interface MermaidConfig {
   gitGraph?: GitGraphDiagramConfig;
   c4?: C4DiagramConfig;
   dompurifyConfig?: DOMPurify.Config;
+  wrap?: boolean;
 }
 
 // TODO: More configs needs to be moved in here
@@ -289,6 +290,7 @@ export interface GanttDiagramConfig extends BaseDiagramConfig {
 }
 
 export interface SequenceDiagramConfig extends BaseDiagramConfig {
+  arrowMarkerAbsolute?: boolean;
   hideUnusedParticipants?: boolean;
   activationWidth?: number;
   diagramMarginX?: number;
@@ -326,6 +328,7 @@ export interface SequenceDiagramConfig extends BaseDiagramConfig {
 }
 
 export interface FlowchartDiagramConfig extends BaseDiagramConfig {
+  arrowMarkerAbsolute?: boolean;
   diagramPadding?: number;
   htmlLabels?: boolean;
   nodeSpacing?: number;
diff --git a/src/diagram-api/diagram-orchestration.ts b/src/diagram-api/diagram-orchestration.ts
index ecdb7e467..f8b793ac4 100644
--- a/src/diagram-api/diagram-orchestration.ts
+++ b/src/diagram-api/diagram-orchestration.ts
@@ -23,10 +23,7 @@ import { gitGraphDetector } from '../diagrams/git/gitGraphDetector';
 export const addDiagrams = () => {
   registerDiagram(
     'gitGraph',
-    gitGraphParser,
-    gitGraphDb,
-    gitGraphRenderer,
-    undefined,
+    { parser: gitGraphParser, db: gitGraphDb, renderer: gitGraphRenderer },
     gitGraphDetector
   );
 };
diff --git a/src/diagram-api/diagramAPI.spec.ts b/src/diagram-api/diagramAPI.spec.ts
new file mode 100644
index 000000000..ce12a6433
--- /dev/null
+++ b/src/diagram-api/diagramAPI.spec.ts
@@ -0,0 +1,29 @@
+import { detectType } from './detectType';
+import { getDiagram, registerDiagram } from './diagramAPI';
+
+describe('DiagramAPI', () => {
+  it('should return default diagrams', () => {
+    expect(getDiagram('sequence')).not.toBeNull();
+  });
+
+  it('should throw error if diagram is not defined', () => {
+    expect(() => getDiagram('loki')).toThrow();
+  });
+
+  it('should handle diagram registrations', () => {
+    expect(() => getDiagram('loki')).toThrow();
+    // TODO Q: Shouldn't this be throwing an error?
+    expect(detectType('loki diagram')).toBe('flowchart');
+    registerDiagram(
+      'loki',
+      {
+        db: {},
+        parser: {},
+        renderer: {},
+      },
+      (text: string) => text.includes('loki')
+    );
+    expect(getDiagram('loki')).not.toBeNull();
+    expect(detectType('loki diagram')).toBe('loki');
+  });
+});
diff --git a/src/diagram-api/diagramAPI.ts b/src/diagram-api/diagramAPI.ts
index 7589ff47d..870940d8d 100644
--- a/src/diagram-api/diagramAPI.ts
+++ b/src/diagram-api/diagramAPI.ts
@@ -1,44 +1,62 @@
-// @ts-nocheck
 import c4Db from '../diagrams/c4/c4Db';
 import c4Renderer from '../diagrams/c4/c4Renderer';
+// @ts-ignore
 import c4Parser from '../diagrams/c4/parser/c4Diagram';
 import classDb from '../diagrams/class/classDb';
 import classRenderer from '../diagrams/class/classRenderer';
 import classRendererV2 from '../diagrams/class/classRenderer-v2';
+// @ts-ignore
 import classParser from '../diagrams/class/parser/classDiagram';
 import erDb from '../diagrams/er/erDb';
 import erRenderer from '../diagrams/er/erRenderer';
+// @ts-ignore
 import erParser from '../diagrams/er/parser/erDiagram';
 import flowDb from '../diagrams/flowchart/flowDb';
 import flowRenderer from '../diagrams/flowchart/flowRenderer';
 import flowRendererV2 from '../diagrams/flowchart/flowRenderer-v2';
+// @ts-ignore
 import flowParser from '../diagrams/flowchart/parser/flow';
 import ganttDb from '../diagrams/gantt/ganttDb';
 import ganttRenderer from '../diagrams/gantt/ganttRenderer';
+// @ts-ignore
 import ganttParser from '../diagrams/gantt/parser/gantt';
 import infoDb from '../diagrams/info/infoDb';
 import infoRenderer from '../diagrams/info/infoRenderer';
+// @ts-ignore
 import infoParser from '../diagrams/info/parser/info';
+// @ts-ignore
 import pieParser from '../diagrams/pie/parser/pie';
 import pieDb from '../diagrams/pie/pieDb';
 import pieRenderer from '../diagrams/pie/pieRenderer';
+// @ts-ignore
 import requirementParser from '../diagrams/requirement/parser/requirementDiagram';
 import requirementDb from '../diagrams/requirement/requirementDb';
 import requirementRenderer from '../diagrams/requirement/requirementRenderer';
+// @ts-ignore
 import sequenceParser from '../diagrams/sequence/parser/sequenceDiagram';
 import sequenceDb from '../diagrams/sequence/sequenceDb';
 import sequenceRenderer from '../diagrams/sequence/sequenceRenderer';
+// @ts-ignore
 import stateParser from '../diagrams/state/parser/stateDiagram';
 import stateDb from '../diagrams/state/stateDb';
 import stateRenderer from '../diagrams/state/stateRenderer';
 import stateRendererV2 from '../diagrams/state/stateRenderer-v2';
 import journeyDb from '../diagrams/user-journey/journeyDb';
 import journeyRenderer from '../diagrams/user-journey/journeyRenderer';
+// @ts-ignore
 import journeyParser from '../diagrams/user-journey/parser/journey';
-import { addDetector } from './detectType';
+import { addDetector, DiagramDetector } from './detectType';
 import { log } from '../logger';
+import { MermaidConfig } from '../config.type';
 
-const diagrams = {
+export interface DiagramDefinition {
+  db: any;
+  renderer: any;
+  parser: any;
+  init?: (config: MermaidConfig) => void;
+}
+
+const diagrams: Record<string, DiagramDefinition> = {
   c4: {
     db: c4Db,
     renderer: c4Renderer,
@@ -52,6 +70,9 @@ const diagrams = {
     renderer: classRenderer,
     parser: classParser,
     init: (cnf) => {
+      if (!cnf.class) {
+        cnf.class = {};
+      }
       cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
       classDb.clear();
     },
@@ -61,6 +82,9 @@ const diagrams = {
     renderer: classRendererV2,
     parser: classParser,
     init: (cnf) => {
+      if (!cnf.class) {
+        cnf.class = {};
+      }
       cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
       classDb.clear();
     },
@@ -76,6 +100,9 @@ const diagrams = {
     parser: flowParser,
     init: (cnf) => {
       flowRenderer.setConf(cnf.flowchart);
+      if (!cnf.flowchart) {
+        cnf.flowchart = {};
+      }
       cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
       flowDb.clear();
       flowDb.setGen('gen-1');
@@ -87,6 +114,9 @@ const diagrams = {
     parser: flowParser,
     init: (cnf) => {
       flowRendererV2.setConf(cnf.flowchart);
+      if (!cnf.flowchart) {
+        cnf.flowchart = {};
+      }
       cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
       flowDb.clear();
       flowDb.setGen('gen-2');
@@ -96,15 +126,7 @@ const diagrams = {
     db: ganttDb,
     renderer: ganttRenderer,
     parser: ganttParser,
-    init: (cnf) => {
-      ganttRenderer.setConf(cnf.gantt);
-    },
   },
-  // git: {
-  //   db: gitGraphAst,
-  //   renderer: gitGraphRenderer,
-  //   parser: gitGraphParser,
-  // },
   info: {
     db: infoDb,
     renderer: infoRenderer,
@@ -125,11 +147,12 @@ const diagrams = {
     renderer: sequenceRenderer,
     parser: sequenceParser,
     init: (cnf) => {
+      if (!cnf.sequence) {
+        cnf.sequence = {};
+      }
       cnf.sequence.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
-      if (cnf.sequenceDiagram) {
-        // backwards compatibility
-        sequenceRenderer.setConf(Object.assign(cnf.sequence, cnf.sequenceDiagram));
-        console.error(
+      if ('sequenceDiagram' in cnf) {
+        throw new Error(
           '`mermaid config.sequenceDiagram` has been renamed to `config.sequence`. Please update your mermaid config.'
         );
       }
@@ -142,6 +165,10 @@ const diagrams = {
     renderer: stateRenderer,
     parser: stateParser,
     init: (cnf) => {
+      // TODO Q: Why is state diagram init setting cnf.class.arrowMarkerAbsolute ?
+      if (!cnf.class) {
+        cnf.class = {};
+      }
       cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
       stateDb.clear();
     },
@@ -151,6 +178,10 @@ const diagrams = {
     renderer: stateRendererV2,
     parser: stateParser,
     init: (cnf) => {
+      // TODO Q: Why is state diagram init setting cnf.class.arrowMarkerAbsolute ?
+      if (!cnf.class) {
+        cnf.class = {};
+      }
       cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
       stateDb.clear();
     },
@@ -165,16 +196,22 @@ const diagrams = {
     },
   },
 };
-// console.log(sequenceDb);
-export const registerDiagram = (id, parser, db, renderer, init, detector) => {
+
+export const registerDiagram = (
+  id: string,
+  diagram: DiagramDefinition,
+  detector: DiagramDetector
+) => {
   if (diagrams[id]) {
     log.warn(`Diagram ${id} already registered.`);
   }
-  diagrams[id] = { parser, db, renderer, init };
+  diagrams[id] = diagram;
   addDetector(id, detector);
 };
 
-export const getDiagrams = () => {
-  // console.log('diagrams', diagrams);
-  return diagrams;
+export const getDiagram = (name: string): DiagramDefinition => {
+  if (name in diagrams) {
+    return diagrams[name];
+  }
+  throw new Error(`Diagram ${name} not found.`);
 };
diff --git a/src/diagrams/flowchart/flowDb.js b/src/diagrams/flowchart/flowDb.js
index 0fe14a541..e3921ecb6 100644
--- a/src/diagrams/flowchart/flowDb.js
+++ b/src/diagrams/flowchart/flowDb.js
@@ -425,7 +425,7 @@ funs.push(setupToolTips);
  *
  * @param ver
  */
-export const clear = function (ver) {
+export const clear = function (ver = 'gen-1') {
   vertices = {};
   classes = {};
   edges = [];
@@ -436,7 +436,7 @@ export const clear = function (ver) {
   subCount = 0;
   tooltips = [];
   firstGraphFlag = true;
-  version = ver || 'gen-1';
+  version = ver;
   commonClear();
 };
 export const setGen = (ver) => {

From 4885e7b7f10d2f18fb0abaed0d7c3d61a328c20e Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 22 Aug 2022 13:29:25 +0530
Subject: [PATCH 19/60] fix detectType

---
 src/diagram-api/detectType.js | 100 ++++++++++++++++++++++++++++++++++
 src/diagram-api/detectType.ts |  81 ---------------------------
 2 files changed, 100 insertions(+), 81 deletions(-)
 create mode 100644 src/diagram-api/detectType.js
 delete mode 100644 src/diagram-api/detectType.ts

diff --git a/src/diagram-api/detectType.js b/src/diagram-api/detectType.js
new file mode 100644
index 000000000..a5f074e3e
--- /dev/null
+++ b/src/diagram-api/detectType.js
@@ -0,0 +1,100 @@
+const directive =
+  /[%]{2}[{]\s*(?:(?:(\w+)\s*:|(\w+))\s*(?:(?:(\w+))|((?:(?![}][%]{2}).|\r?\n)*))?\s*)(?:[}][%]{2})?/gi;
+const anyComment = /\s*%%.*\n/gm;
+const detectors = {};
+/**
+ * @function detectType Detects the type of the graph text. Takes into consideration the possible
+ *   existence of an %%init directive
+ *
+ *   ```mermaid
+ *   %%{initialize: {"startOnLoad": true, logLevel: "fatal" }}%%
+ *   graph LR
+ *    a-->b
+ *    b-->c
+ *    c-->d
+ *    d-->e
+ *    e-->f
+ *    f-->g
+ *    g-->h
+ * ```
+ * @param {string} text The text defining the graph
+ * @param {{
+ *   class: { defaultRenderer: string } | undefined;
+ *   state: { defaultRenderer: string } | undefined;
+ *   flowchart: { defaultRenderer: string } | undefined;
+ * }} [cnf]
+ * @returns {string} A graph definition key
+ */
+const detectType = function (text, cnf) {
+  text = text.replace(directive, '').replace(anyComment, '\n');
+  if (text.match(/^\s*C4Context|C4Container|C4Component|C4Dynamic|C4Deployment/)) {
+    return 'c4';
+  }
+
+  if (text.match(/^\s*sequenceDiagram/)) {
+    return 'sequence';
+  }
+
+  if (text.match(/^\s*gantt/)) {
+    return 'gantt';
+  }
+  if (text.match(/^\s*classDiagram-v2/)) {
+    return 'classDiagram';
+  }
+  if (text.match(/^\s*classDiagram/)) {
+    if (cnf && cnf.class && cnf.class.defaultRenderer === 'dagre-wrapper') return 'classDiagram';
+    return 'class';
+  }
+
+  if (text.match(/^\s*stateDiagram-v2/)) {
+    return 'stateDiagram';
+  }
+
+  if (text.match(/^\s*stateDiagram/)) {
+    if (cnf && cnf.class && cnf.state.defaultRenderer === 'dagre-wrapper') return 'stateDiagram';
+    return 'state';
+  }
+
+  // if (text.match(/^\s*gitGraph/)) {
+  //   return 'gitGraph';
+  // }
+  if (text.match(/^\s*flowchart/)) {
+    return 'flowchart-v2';
+  }
+
+  if (text.match(/^\s*info/)) {
+    return 'info';
+  }
+  if (text.match(/^\s*pie/)) {
+    return 'pie';
+  }
+
+  if (text.match(/^\s*erDiagram/)) {
+    return 'er';
+  }
+
+  if (text.match(/^\s*journey/)) {
+    return 'journey';
+  }
+
+  if (text.match(/^\s*requirement/) || text.match(/^\s*requirementDiagram/)) {
+    return 'requirement';
+  }
+  if (cnf && cnf.flowchart && cnf.flowchart.defaultRenderer === 'dagre-wrapper')
+    return 'flowchart-v2';
+  const k = Object.keys(detectors);
+  for (let i = 0; i < k.length; i++) {
+    const key = k[i];
+    const dia = detectors[key];
+    if (dia && dia.detector(text)) {
+      return key;
+    }
+  }
+  return 'flowchart';
+};
+export const addDetector = (key, detector) => {
+  detectors[key] = {
+    detector,
+  };
+};
+export default detectType;
diff --git a/src/diagram-api/detectType.ts b/src/diagram-api/detectType.ts
deleted file mode 100644
index 62a37616b..000000000
--- a/src/diagram-api/detectType.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import { MermaidConfig } from '../config.type';
-
-export type DiagramDetector = (text: string) => boolean;
-
-const directive =
-  /[%]{2}[{]\s*(?:(?:(\w+)\s*:|(\w+))\s*(?:(?:(\w+))|((?:(?![}][%]{2}).|\r?\n)*))?\s*)(?:[}][%]{2})?/gi;
-const anyComment = /\s*%%.*\n/gm;
-
-const detectors: Record<string, DiagramDetector> = {};
-const diagramMatchers: Record<string, RegExp> = {
-  c4: /^\s*C4Context|C4Container|C4Component|C4Dynamic|C4Deployment/,
-  sequence: /^\s*sequenceDiagram/,
-  gantt: /^\s*gantt/,
-  classDiagram: /^\s*classDiagram-v2/,
-  stateDiagram: /^\s*stateDiagram-v2/,
-  'flowchart-v2': /^\s*flowchart/,
-  info: /^\s*info/,
-  pie: /^\s*pie/,
-  er: /^\s*erDiagram/,
-  journey: /^\s*journey/,
-  // gitGraph: /^\s*gitGraph/,
-  requirement: /^\s*requirement(Diagram)?/,
-};
-
-/**
- * @function detectType Detects the type of the graph text. Takes into consideration the possible
- *   existence of an %%init directive
- *
- *   ```mermaid
- *   %%{initialize: {"startOnLoad": true, logLevel: "fatal" }}%%
- *   graph LR
- *    a-->b
- *    b-->c
- *    c-->d
- *    d-->e
- *    e-->f
- *    f-->g
- *    g-->h
- * ```
- * @param {string} text The text defining the graph
- * @param {{
- *   class: { defaultRenderer: string } | undefined;
- *   state: { defaultRenderer: string } | undefined;
- *   flowchart: { defaultRenderer: string } | undefined;
- * }} [config]
- * @returns {string} A graph definition key
- */
-export const detectType = function (text: string, config?: MermaidConfig): string {
-  text = text.replace(directive, '').replace(anyComment, '\n');
-  for (const [diagram, matcher] of Object.entries(diagramMatchers)) {
-    if (text.match(matcher)) {
-      return diagram;
-    }
-  }
-
-  if (text.match(/^\s*classDiagram/)) {
-    if (config?.class?.defaultRenderer === 'dagre-wrapper') return 'classDiagram';
-    return 'class';
-  }
-
-  if (text.match(/^\s*stateDiagram/)) {
-    if (config?.state?.defaultRenderer === 'dagre-wrapper') return 'stateDiagram';
-    return 'state';
-  }
-
-  if (config?.flowchart?.defaultRenderer === 'dagre-wrapper') {
-    return 'flowchart-v2';
-  }
-
-  for (const [key, detector] of Object.entries(detectors)) {
-    if (detector(text)) {
-      return key;
-    }
-  }
-
-  return 'flowchart';
-};
-
-export const addDetector = (key: string, detector: DiagramDetector) => {
-  detectors[key] = detector;
-};

From 9f49259bca9ba1c36aafaa476e2451e65b9cfe60 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 22 Aug 2022 13:29:55 +0530
Subject: [PATCH 20/60] fix detectType

---
 src/diagram-api/{detectType.js => detectType.ts} | 1 +
 1 file changed, 1 insertion(+)
 rename src/diagram-api/{detectType.js => detectType.ts} (99%)

diff --git a/src/diagram-api/detectType.js b/src/diagram-api/detectType.ts
similarity index 99%
rename from src/diagram-api/detectType.js
rename to src/diagram-api/detectType.ts
index a5f074e3e..c60673539 100644
--- a/src/diagram-api/detectType.js
+++ b/src/diagram-api/detectType.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 const directive =
   /[%]{2}[{]\s*(?:(?:(\w+)\s*:|(\w+))\s*(?:(?:(\w+))|((?:(?![}][%]{2}).|\r?\n)*))?\s*)(?:[}][%]{2})?/gi;
 const anyComment = /\s*%%.*\n/gm;

From 6291e4dcddeb00858f80c485c61f40ee3e79171e Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 22 Aug 2022 13:30:10 +0530
Subject: [PATCH 21/60] fix detectType

---
 src/diagram-api/detectType.ts | 92 ++++++++++++++---------------------
 1 file changed, 36 insertions(+), 56 deletions(-)

diff --git a/src/diagram-api/detectType.ts b/src/diagram-api/detectType.ts
index c60673539..62a37616b 100644
--- a/src/diagram-api/detectType.ts
+++ b/src/diagram-api/detectType.ts
@@ -1,8 +1,27 @@
-// @ts-nocheck
+import { MermaidConfig } from '../config.type';
+
+export type DiagramDetector = (text: string) => boolean;
+
 const directive =
   /[%]{2}[{]\s*(?:(?:(\w+)\s*:|(\w+))\s*(?:(?:(\w+))|((?:(?![}][%]{2}).|\r?\n)*))?\s*)(?:[}][%]{2})?/gi;
 const anyComment = /\s*%%.*\n/gm;
-const detectors = {};
+
+const detectors: Record<string, DiagramDetector> = {};
+const diagramMatchers: Record<string, RegExp> = {
+  c4: /^\s*C4Context|C4Container|C4Component|C4Dynamic|C4Deployment/,
+  sequence: /^\s*sequenceDiagram/,
+  gantt: /^\s*gantt/,
+  classDiagram: /^\s*classDiagram-v2/,
+  stateDiagram: /^\s*stateDiagram-v2/,
+  'flowchart-v2': /^\s*flowchart/,
+  info: /^\s*info/,
+  pie: /^\s*pie/,
+  er: /^\s*erDiagram/,
+  journey: /^\s*journey/,
+  // gitGraph: /^\s*gitGraph/,
+  requirement: /^\s*requirement(Diagram)?/,
+};
+
 /**
  * @function detectType Detects the type of the graph text. Takes into consideration the possible
  *   existence of an %%init directive
@@ -23,79 +42,40 @@ const detectors = {};
  *   class: { defaultRenderer: string } | undefined;
  *   state: { defaultRenderer: string } | undefined;
  *   flowchart: { defaultRenderer: string } | undefined;
- * }} [cnf]
+ * }} [config]
  * @returns {string} A graph definition key
  */
-const detectType = function (text, cnf) {
+export const detectType = function (text: string, config?: MermaidConfig): string {
   text = text.replace(directive, '').replace(anyComment, '\n');
-  if (text.match(/^\s*C4Context|C4Container|C4Component|C4Dynamic|C4Deployment/)) {
-    return 'c4';
+  for (const [diagram, matcher] of Object.entries(diagramMatchers)) {
+    if (text.match(matcher)) {
+      return diagram;
+    }
   }
 
-  if (text.match(/^\s*sequenceDiagram/)) {
-    return 'sequence';
-  }
-
-  if (text.match(/^\s*gantt/)) {
-    return 'gantt';
-  }
-  if (text.match(/^\s*classDiagram-v2/)) {
-    return 'classDiagram';
-  }
   if (text.match(/^\s*classDiagram/)) {
-    if (cnf && cnf.class && cnf.class.defaultRenderer === 'dagre-wrapper') return 'classDiagram';
+    if (config?.class?.defaultRenderer === 'dagre-wrapper') return 'classDiagram';
     return 'class';
   }
 
-  if (text.match(/^\s*stateDiagram-v2/)) {
-    return 'stateDiagram';
-  }
-
   if (text.match(/^\s*stateDiagram/)) {
-    if (cnf && cnf.class && cnf.state.defaultRenderer === 'dagre-wrapper') return 'stateDiagram';
+    if (config?.state?.defaultRenderer === 'dagre-wrapper') return 'stateDiagram';
     return 'state';
   }
 
-  // if (text.match(/^\s*gitGraph/)) {
-  //   return 'gitGraph';
-  // }
-  if (text.match(/^\s*flowchart/)) {
+  if (config?.flowchart?.defaultRenderer === 'dagre-wrapper') {
     return 'flowchart-v2';
   }
 
-  if (text.match(/^\s*info/)) {
-    return 'info';
-  }
-  if (text.match(/^\s*pie/)) {
-    return 'pie';
-  }
-
-  if (text.match(/^\s*erDiagram/)) {
-    return 'er';
-  }
-
-  if (text.match(/^\s*journey/)) {
-    return 'journey';
-  }
-
-  if (text.match(/^\s*requirement/) || text.match(/^\s*requirementDiagram/)) {
-    return 'requirement';
-  }
-  if (cnf && cnf.flowchart && cnf.flowchart.defaultRenderer === 'dagre-wrapper')
-    return 'flowchart-v2';
-  const k = Object.keys(detectors);
-  for (let i = 0; i < k.length; i++) {
-    const key = k[i];
-    const dia = detectors[key];
-    if (dia && dia.detector(text)) {
+  for (const [key, detector] of Object.entries(detectors)) {
+    if (detector(text)) {
       return key;
     }
   }
+
   return 'flowchart';
 };
-export const addDetector = (key, detector) => {
-  detectors[key] = {
-    detector,
-  };
+
+export const addDetector = (key: string, detector: DiagramDetector) => {
+  detectors[key] = detector;
 };
-export default detectType;

From 9a0d5e31b77fcea6b20338078e46c78d5a8a7c3c Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 22 Aug 2022 17:12:05 +0530
Subject: [PATCH 22/60] fix: review comments

---
 src/config.ts                          |  2 +-
 src/config.type.ts                     |  2 ++
 src/diagram-api/diagramAPI.ts          | 14 ++++-----
 src/diagrams/flowchart/flowRenderer.js |  4 +--
 src/diagrams/state/stateRenderer-v2.js |  2 +-
 src/mermaid.ts                         |  4 ---
 src/mermaidAPI.ts                      | 42 +++++++++-----------------
 7 files changed, 26 insertions(+), 44 deletions(-)

diff --git a/src/config.ts b/src/config.ts
index 579831703..6df5fa249 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -134,7 +134,7 @@ export const setConfig = (conf: MermaidConfig): MermaidConfig => {
  *
  * @returns {any} - The currentConfig
  */
-export const getConfig = () => {
+export const getConfig = (): MermaidConfig => {
   return assignWithDepth({}, currentConfig);
 };
 /**
diff --git a/src/config.type.ts b/src/config.type.ts
index a59d39547..40b2b0b5a 100644
--- a/src/config.type.ts
+++ b/src/config.type.ts
@@ -10,6 +10,7 @@ export interface MermaidConfig {
   darkMode?: boolean;
   htmlLabels?: boolean;
   fontFamily?: string;
+  altFontFamily?: string;
   logLevel?: number;
   securityLevel?: string;
   startOnLoad?: boolean;
@@ -225,6 +226,7 @@ export interface ErDiagramConfig extends BaseDiagramConfig {
 }
 
 export interface StateDiagramConfig extends BaseDiagramConfig {
+  arrowMarkerAbsolute?: boolean;
   dividerMargin?: number;
   sizeUnit?: number;
   padding?: number;
diff --git a/src/diagram-api/diagramAPI.ts b/src/diagram-api/diagramAPI.ts
index 870940d8d..47f484070 100644
--- a/src/diagram-api/diagramAPI.ts
+++ b/src/diagram-api/diagramAPI.ts
@@ -165,11 +165,10 @@ const diagrams: Record<string, DiagramDefinition> = {
     renderer: stateRenderer,
     parser: stateParser,
     init: (cnf) => {
-      // TODO Q: Why is state diagram init setting cnf.class.arrowMarkerAbsolute ?
-      if (!cnf.class) {
-        cnf.class = {};
+      if (!cnf.state) {
+        cnf.state = {};
       }
-      cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+      cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
       stateDb.clear();
     },
   },
@@ -178,11 +177,10 @@ const diagrams: Record<string, DiagramDefinition> = {
     renderer: stateRendererV2,
     parser: stateParser,
     init: (cnf) => {
-      // TODO Q: Why is state diagram init setting cnf.class.arrowMarkerAbsolute ?
-      if (!cnf.class) {
-        cnf.class = {};
+      if (!cnf.state) {
+        cnf.state = {};
       }
-      cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+      cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
       stateDb.clear();
     },
   },
diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js
index 668779c28..c6e6ebdd6 100644
--- a/src/diagrams/flowchart/flowRenderer.js
+++ b/src/diagrams/flowchart/flowRenderer.js
@@ -458,9 +458,7 @@ export const draw = function (text, id, _version, diagObj) {
   }
 
   // Add label rects for non html labels
-  // TODO: This always evaluates to true. Bug?
-  // eslint-disable-next-line no-constant-condition
-  if (!evaluate(conf.htmlLabels) || true) {
+  if (!conf.htmlLabels) {
     const labels = doc.querySelectorAll('[id="' + id + '"] .edgeLabel .label');
     for (let k = 0; k < labels.length; k++) {
       const label = labels[k];
diff --git a/src/diagrams/state/stateRenderer-v2.js b/src/diagrams/state/stateRenderer-v2.js
index 73d7d6993..3f21d798a 100644
--- a/src/diagrams/state/stateRenderer-v2.js
+++ b/src/diagrams/state/stateRenderer-v2.js
@@ -248,7 +248,7 @@ export const draw = function (text, id, _version, diag) {
     dir = 'LR';
   }
 
-  const { securityLevel, state: conf } = getConfig().state;
+  const { securityLevel, state: conf } = getConfig();
   const nodeSpacing = conf.nodeSpacing || 50;
   const rankSpacing = conf.rankSpacing || 50;
 
diff --git a/src/mermaid.ts b/src/mermaid.ts
index e9b5b7716..95cf68c27 100644
--- a/src/mermaid.ts
+++ b/src/mermaid.ts
@@ -61,10 +61,6 @@ const initThrowsErrors = function (
   }
 
   // if last argument is a function this is the callback function
-
-  if (!callback && typeof conf?.mermaid?.callback === 'function') {
-    callback = conf.mermaid.callback;
-  }
   log.debug(`${!callback ? 'No ' : ''}Callback function found`);
   let nodesToProcess: NodeListOf<HTMLElement>;
   if (typeof nodes === 'undefined') {
diff --git a/src/mermaidAPI.ts b/src/mermaidAPI.ts
index 6436e54db..7e6c92fa6 100644
--- a/src/mermaidAPI.ts
+++ b/src/mermaidAPI.ts
@@ -103,20 +103,21 @@ export const decodeEntities = function (text: string): string {
  * });
  * ```
  *
- * @param {any} id The id of the element to be rendered
- * @param {any} text The graph definition
- * @param {any} cb Callback which is called after rendering is finished with the svg code as inparam.
- * @param {any} container Selector to element in which a div with the graph temporarily will be
+ * @param {string} id The id of the element to be rendered
+ * @param {string} text The graph definition
+ * @param {(svgCode: string, bindFunctions?: (element: Element) => void) => void} cb Callback which
+ *   is called after rendering is finished with the svg code as inparam.
+ * @param {Element} container Selector to element in which a div with the graph temporarily will be
  *   inserted. In one is provided a hidden div will be inserted in the body of the page instead. The
  *   element will be removed when rendering is completed.
- * @returns {any}
+ * @returns {void}
  */
 const render = function (
   id: string,
   text: string,
   cb: (svgCode: string, bindFunctions?: (element: Element) => void) => void,
   container: Element
-) {
+): void {
   configApi.reset();
   text = text.replace(/\r\n?/g, '\n'); // parser problems on CRLF ignore all CR and leave LF;;
   const graphInit = utils.detectInit(text);
@@ -129,7 +130,7 @@ const render = function (
   log.debug(cnf);
 
   // Check the maximum allowed text size
-  if (text.length > cnf.maxTextSize) {
+  if (text.length > cnf.maxTextSize!) {
     text = 'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa';
   }
 
@@ -137,18 +138,6 @@ const render = function (
 
   // In regular execution the container will be the div with a mermaid class
   if (typeof container !== 'undefined') {
-    if (cnf.securityLevel === 'sandbox') {
-      // IF we are in sandboxed mode, we do everyting mermaid related
-      // in a sandboxed div
-      const iframe = select('body')
-        .append('iframe')
-        .attr('id', 'i' + id)
-        .attr('style', 'width: 100%; height: 100%;')
-        .attr('sandbox', '');
-      root = select(iframe.nodes()[0]!.contentDocument!.body);
-      root.node().style.margin = 0;
-    }
-
     // A container was provided by the caller
     if (container) {
       container.innerHTML = '';
@@ -190,11 +179,12 @@ const render = function (
 
     // Remove previous tpm element if it exists
     let element;
-    if (cnf.securityLevel !== 'sandbox') {
-      element = document.querySelector('#' + 'd' + id);
+    if (cnf.securityLevel === 'sandbox') {
+      element = document.querySelector('#i' + id);
     } else {
-      element = document.querySelector('#' + 'i' + id);
+      element = document.querySelector('#d' + id);
     }
+
     if (element) {
       element.remove();
     }
@@ -260,7 +250,7 @@ const render = function (
   // classDef
   if (graphType === 'flowchart' || graphType === 'flowchart-v2' || graphType === 'graph') {
     const classes: any = flowRenderer.getClasses(text, diag);
-    const htmlLabels = cnf.htmlLabels || cnf.flowchart.htmlLabels;
+    const htmlLabels = cnf.htmlLabels || cnf.flowchart?.htmlLabels;
     for (const className in classes) {
       if (htmlLabels) {
         userStyles += `\n.${className} > * { ${classes[className].styles.join(
@@ -318,10 +308,8 @@ const render = function (
   let svgCode = root.select('#d' + id).node().innerHTML;
 
   log.debug('cnf.arrowMarkerAbsolute', cnf.arrowMarkerAbsolute);
-  if (
-    (!cnf.arrowMarkerAbsolute || cnf.arrowMarkerAbsolute === 'false') &&
-    cnf.arrowMarkerAbsolute !== 'sandbox'
-  ) {
+  // TODO Q: Needs verification.
+  if (!cnf.arrowMarkerAbsolute && cnf.securityLevel !== 'sandbox') {
     svgCode = svgCode.replace(/marker-end="url\(.*?#/g, 'marker-end="url(#', 'g');
   }
 

From 0e0802a5889f58e89cb1b5bd1cf465980029e8da Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@users.noreply.github.com>
Date: Mon, 22 Aug 2022 17:48:09 +0200
Subject: [PATCH 23/60] Update src/config.ts

Agree!

Co-authored-by: Sidharth Vinod <sidharthv96@gmail.com>
---
 src/config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/config.ts b/src/config.ts
index 6df5fa249..20843ccbc 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -151,7 +151,7 @@ export const getConfig = (): MermaidConfig => {
  */
 export const sanitize = (options: any) => {
   // Checking that options are not in the list of excluded options
-  siteConfig.secure?.forEach((key) => {
+  ['secure', ...(siteConfig.secure ?? [])].forEach((key) => {
     if (typeof options[key] !== 'undefined') {
       // DO NOT attempt to print options[key] within `${}` as a malicious script
       // can exploit the logger's attempt to stringify the value and execute arbitrary code

From 32ba2d5ffe574228ad5ef2e60f7e4467f056b8e0 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 23 Aug 2022 21:35:33 +0530
Subject: [PATCH 24/60] Remove console.logs

---
 docs/Setup.md        | 50 ++++++++++++++++++++++++--------------------
 src/defaultConfig.ts |  1 -
 src/mermaidAPI.ts    |  3 +--
 3 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/docs/Setup.md b/docs/Setup.md
index 432002d3a..c4024459c 100644
--- a/docs/Setup.md
+++ b/docs/Setup.md
@@ -1433,6 +1433,24 @@ Returns **[object][5]** The siteConfig
 
 Returns **[object][5]** The siteConfig
 
+## setConfig
+
+## setConfig
+
+| Function      | Description                           | Type        | Values                                  |
+| ------------- | ------------------------------------- | ----------- | --------------------------------------- |
+| setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array |
+
+**Notes**: Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure
+keys. Any values found in conf with key found in siteConfig.secure will be replaced with the
+corresponding siteConfig value.
+
+### Parameters
+
+-   `conf` **any** The potential currentConfig
+
+Returns **any** The currentConfig merged with the sanitized conf
+
 ## render
 
 Function that renders an svg with a graph from a chart definition. Usage example below.
@@ -1452,32 +1470,14 @@ $(function () {
 
 ### Parameters
 
--   `id` **any** The id of the element to be rendered
--   `text` **any** The graph definition
--   `cb` **any** Callback which is called after rendering is finished with the svg code as inparam.
--   `container` **any** Selector to element in which a div with the graph temporarily will be
+-   `id` **[string][6]** The id of the element to be rendered
+-   `text` **[string][6]** The graph definition
+-   `cb` **function (svgCode: [string][6], bindFunctions: function (element: [Element][7]): void): void** 
+-   `container` **[Element][7]** Selector to element in which a div with the graph temporarily will be
       inserted. In one is provided a hidden div will be inserted in the body of the page instead. The
       element will be removed when rendering is completed.
 
-Returns **any** 
-
-## setConfig
-
-## setConfig
-
-| Function      | Description                           | Type        | Values                                  |
-| ------------- | ------------------------------------- | ----------- | --------------------------------------- |
-| setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array |
-
-**Notes**: Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure
-keys. Any values found in conf with key found in siteConfig.secure will be replaced with the
-corresponding siteConfig value.
-
-### Parameters
-
--   `conf` **any** The potential currentConfig
-
-Returns **any** The currentConfig merged with the sanitized conf
+Returns **void** 
 
 ## getConfig
 
@@ -1615,3 +1615,7 @@ Returns **void**
 [4]: #mermaidapi-configuration-defaults
 
 [5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
+
+[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+
+[7]: https://developer.mozilla.org/docs/Web/API/Element
diff --git a/src/defaultConfig.ts b/src/defaultConfig.ts
index dad4f0ef0..c6b2cad9e 100644
--- a/src/defaultConfig.ts
+++ b/src/defaultConfig.ts
@@ -1822,7 +1822,6 @@ const config: Partial<MermaidConfig> = {
   },
 };
 
-console.log(JSON.stringify(config));
 if (config.class) config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
 if (config.gitGraph) config.gitGraph.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
 
diff --git a/src/mermaidAPI.ts b/src/mermaidAPI.ts
index 7e6c92fa6..040b861dc 100644
--- a/src/mermaidAPI.ts
+++ b/src/mermaidAPI.ts
@@ -116,7 +116,7 @@ const render = function (
   id: string,
   text: string,
   cb: (svgCode: string, bindFunctions?: (element: Element) => void) => void,
-  container: Element
+  container?: Element
 ): void {
   configApi.reset();
   text = text.replace(/\r\n?/g, '\n'); // parser problems on CRLF ignore all CR and leave LF;;
@@ -493,7 +493,6 @@ export const mermaidAPI = Object.freeze({
 
 setLogLevel(configApi.getConfig().logLevel);
 configApi.reset(configApi.getConfig());
-console.log(mermaidAPI);
 export default mermaidAPI;
 /**
  * ## mermaidAPI configuration defaults

From 1efd5c7d58853cd6d88bd16adbc4592e9a09aa00 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 24 Aug 2022 11:32:27 +0530
Subject: [PATCH 25/60] Cleanup

---
 src/Diagram.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Diagram.ts b/src/Diagram.ts
index df6633cda..7e6d24db6 100644
--- a/src/Diagram.ts
+++ b/src/Diagram.ts
@@ -29,7 +29,6 @@ export class Diagram {
       const error = { str, hash };
       throw error;
     };
-    // TODO Q: Should diagrams be parsed inside constructor?
     this.parse(this.txt, parseError);
   }
 

From 84148d4891dc240671542163697becdccd326ce0 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 24 Aug 2022 12:32:15 +0530
Subject: [PATCH 26/60] Remove failing test

---
 src/diagrams/common/common.spec.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/diagrams/common/common.spec.js b/src/diagrams/common/common.spec.js
index 275e5e753..662f3ce65 100644
--- a/src/diagrams/common/common.spec.js
+++ b/src/diagrams/common/common.spec.js
@@ -61,6 +61,5 @@ describe('Sanitize text', function () {
 describe('generic parser', function () {
   it('should parse generic types', function () {
     expect(parseGenericTypes('test~T~')).toEqual('test<T>');
-    expect(parseGenericTypes('test~Array~Array~string~~~')).toEqual('test<Array<Array<string>>>');
   });
 });

From c37ff47ee39cb48c1d43abc7a6ca697a6bdf5409 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 24 Aug 2022 12:33:32 +0530
Subject: [PATCH 27/60] Add nested test

---
 src/diagrams/common/common.spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/diagrams/common/common.spec.js b/src/diagrams/common/common.spec.js
index 01033d3ce..b9fac5fba 100644
--- a/src/diagrams/common/common.spec.js
+++ b/src/diagrams/common/common.spec.js
@@ -106,7 +106,7 @@ describe('Sanitize text', function () {
 
 describe('generic parser', function () {
   it('should parse generic types', function () {
-    const result = parseGenericTypes('test~T~');
-    expect(result).toEqual('test<T>');
+    expect(parseGenericTypes('test~T~')).toEqual('test<T>');
+    expect(parseGenericTypes('test~Array~Array~string~~~')).toEqual('test<Array<Array<string>>>');
   });
 });

From 5996e1e69d8c0e303414feeb5e846ee785891b50 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 25 Aug 2022 08:49:20 +0530
Subject: [PATCH 28/60] Fix nested types

Co-authored-by: FlorianWoelki <FlorianWoelki@gmx.de>
---
 src/diagrams/common/common.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/diagrams/common/common.js b/src/diagrams/common/common.js
index 73ccf1cce..39c4c77ca 100644
--- a/src/diagrams/common/common.js
+++ b/src/diagrams/common/common.js
@@ -196,8 +196,8 @@ export const parseGenericTypes = function (text) {
   let cleanedText = text;
 
   if (text.indexOf('~') != -1) {
-    cleanedText = cleanedText.replace('~', '<');
-    cleanedText = cleanedText.replace('~', '>');
+    cleanedText = cleanedText.replace(/~([^~].*)/, '<$1');
+    cleanedText = cleanedText.replace(/~([^~]*)$/, '$1>');
 
     return parseGenericTypes(cleanedText);
   } else {

From 2f7930efb7b151ac076ef5a2c94afea38e93b8bd Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 25 Aug 2022 11:58:43 +0530
Subject: [PATCH 29/60] Fix nested types

Co-authored-by: FlorianWoelki <FlorianWoelki@gmx.de>
---
 src/diagrams/common/common.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/diagrams/common/common.js b/src/diagrams/common/common.js
index 39c4c77ca..6803ce4b9 100644
--- a/src/diagrams/common/common.js
+++ b/src/diagrams/common/common.js
@@ -197,7 +197,7 @@ export const parseGenericTypes = function (text) {
 
   if (text.indexOf('~') != -1) {
     cleanedText = cleanedText.replace(/~([^~].*)/, '<$1');
-    cleanedText = cleanedText.replace(/~([^~]*)$/, '$1>');
+    cleanedText = cleanedText.replace(/~([^~]*)$/, '>$1');
 
     return parseGenericTypes(cleanedText);
   } else {

From 39980322bd917e7d8e0a57f74629e751a41f168f Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 25 Aug 2022 11:59:01 +0530
Subject: [PATCH 30/60] Add more tests

---
 src/diagrams/class/svgDraw.spec.js | 8 ++++++++
 src/diagrams/common/common.spec.js | 6 ++++++
 2 files changed, 14 insertions(+)

diff --git a/src/diagrams/class/svgDraw.spec.js b/src/diagrams/class/svgDraw.spec.js
index d4fd0cb6b..ec8785559 100644
--- a/src/diagrams/class/svgDraw.spec.js
+++ b/src/diagrams/class/svgDraw.spec.js
@@ -137,6 +137,14 @@ describe('class member Renderer, ', function () {
       expect(actual.displayText).toBe('+foo(List<int> ids) : List<Item>');
       expect(actual.cssStyle).toBe('font-style:italic;');
     });
+
+    it('should handle method declaration with nested markup', function () {
+      const str = '+foo (  List~List~int~~ ids  )* List~List~Item~~';
+      let actual = svgDraw.parseMember(str);
+
+      expect(actual.displayText).toBe('+foo(List<List<int>> ids) : List<List<Item>>');
+      expect(actual.cssStyle).toBe('font-style:italic;');
+    });
   });
 
   describe('when parsing text to build field display string', function () {
diff --git a/src/diagrams/common/common.spec.js b/src/diagrams/common/common.spec.js
index b9fac5fba..19931141d 100644
--- a/src/diagrams/common/common.spec.js
+++ b/src/diagrams/common/common.spec.js
@@ -108,5 +108,11 @@ describe('generic parser', function () {
   it('should parse generic types', function () {
     expect(parseGenericTypes('test~T~')).toEqual('test<T>');
     expect(parseGenericTypes('test~Array~Array~string~~~')).toEqual('test<Array<Array<string>>>');
+    expect(parseGenericTypes('test~Array~Array~string[]~~~')).toEqual(
+      'test<Array<Array<string[]>>>'
+    );
+    expect(parseGenericTypes('test ~Array~Array~string[]~~~')).toEqual(
+      'test <Array<Array<string[]>>>'
+    );
   });
 });

From 15b160c55351e4abfd0af39d68155cea21915bcb Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 25 Aug 2022 12:41:32 +0530
Subject: [PATCH 31/60] Fix svgDraw return types

Co-authored-by: FlorianWoelki <FlorianWoelki@gmx.de>
---
 src/diagrams/class/svgDraw.js | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/diagrams/class/svgDraw.js b/src/diagrams/class/svgDraw.js
index b9d31772a..84649e46e 100644
--- a/src/diagrams/class/svgDraw.js
+++ b/src/diagrams/class/svgDraw.js
@@ -345,10 +345,9 @@ const buildMethodDisplay = function (parsedText) {
 };
 
 const buildLegacyDisplay = function (text) {
-  // if for some reason we dont have any match, use old format to parse text
+  // if for some reason we don't have any match, use old format to parse text
   let displayText = '';
   let cssStyle = '';
-  let memberText = '';
   let returnType = '';
   let methodStart = text.indexOf('(');
   let methodEnd = text.indexOf(')');
@@ -368,26 +367,27 @@ const buildLegacyDisplay = function (text) {
       methodName = text.substring(1, methodStart).trim();
     }
 
-    let parameters = text.substring(methodStart + 1, methodEnd);
-    let classifier = text.substring(methodEnd + 1, 1);
+    const parameters = text.substring(methodStart + 1, methodEnd);
+    const classifier = text.substring(methodEnd + 1, methodEnd + 2);
     cssStyle = parseClassifier(classifier);
 
     displayText = visibility + methodName + '(' + parseGenericTypes(parameters.trim()) + ')';
 
-    if (methodEnd < memberText.length) {
+    if (methodEnd <= text.length) {
       returnType = text.substring(methodEnd + 2).trim();
       if (returnType !== '') {
         returnType = ' : ' + parseGenericTypes(returnType);
+        displayText += returnType;
       }
+    } else {
+      // finally - if all else fails, just send the text back as written (other than parsing for generic types)
+      displayText = parseGenericTypes(text);
     }
-  } else {
-    // finally - if all else fails, just send the text back as written (other than parsing for generic types)
-    displayText = parseGenericTypes(text);
   }
 
   return {
-    displayText: displayText,
-    cssStyle: cssStyle,
+    displayText,
+    cssStyle,
   };
 };
 

From a3dfc4c0e849b20eee4ddb271e9f27a0e95295e5 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 25 Aug 2022 21:53:36 +0530
Subject: [PATCH 32/60] Remove `@ts-ignore`s.

Co-authored-by: Yash Singh <saiansh2525@gmail.com>
---
 src/Diagram.ts                           |  5 ++---
 src/config.ts                            | 13 ++++++-------
 src/diagrams/common/common.ts            |  2 +-
 src/diagrams/git/gitGraphDetector.ts     |  2 +-
 src/diagrams/mindmap/mindamapDetector.ts |  2 +-
 src/errorRenderer.ts                     |  4 ++--
 src/mermaid.ts                           |  8 +++++---
 src/utils.ts                             | 14 ++++++++++++++
 8 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/src/Diagram.ts b/src/Diagram.ts
index 7e6d24db6..4f1765899 100644
--- a/src/Diagram.ts
+++ b/src/Diagram.ts
@@ -2,6 +2,7 @@ import * as configApi from './config';
 import { log } from './logger';
 import { getDiagram } from './diagram-api/diagramAPI';
 import { detectType } from './diagram-api/detectType';
+import { isDetailedError } from './utils';
 export class Diagram {
   type = 'graph';
   parser;
@@ -42,11 +43,9 @@ export class Diagram {
       // Is this the correct way to access mermiad's parseError()
       // method ? (or global.mermaid.parseError()) ?
       if (parseError) {
-        // @ts-ignore
-        if (error.str != undefined) {
+        if (isDetailedError(error)) {
           // handle case where error string and hash were
           // wrapped in object like`const error = { str, hash };`
-          // @ts-ignore
           parseError(error.str, error.hash);
         } else {
           // assume it is just error string and pass it on
diff --git a/src/config.ts b/src/config.ts
index 20843ccbc..9eb688bb4 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -13,11 +13,11 @@ let currentConfig: MermaidConfig = assignWithDepth({}, defaultConfig);
 
 export const updateCurrentConfig = (siteCfg: MermaidConfig, _directives: any[]) => {
   // start with config being the siteConfig
-  let cfg = assignWithDepth({}, siteCfg);
+  let cfg: MermaidConfig = assignWithDepth({}, siteCfg);
   // let sCfg = assignWithDepth(defaultConfig, siteConfigDelta);
 
   // Join directives
-  let sumOfDirectives = {};
+  let sumOfDirectives: MermaidConfig = {};
   for (let i = 0; i < _directives.length; i++) {
     const d = _directives[i];
     sanitize(d);
@@ -28,16 +28,15 @@ export const updateCurrentConfig = (siteCfg: MermaidConfig, _directives: any[])
 
   cfg = assignWithDepth(cfg, sumOfDirectives);
 
-  // @ts-ignore
-  if (sumOfDirectives.theme && theme[sumOfDirectives.theme]) {
+  if (sumOfDirectives.theme && sumOfDirectives.theme in theme) {
     const tmpConfigFromInitialize = assignWithDepth({}, configFromInitialize);
     const themeVariables = assignWithDepth(
       tmpConfigFromInitialize.themeVariables || {},
-      // @ts-ignore
       sumOfDirectives.themeVariables
     );
-    // @ts-ignore
-    cfg.themeVariables = theme[cfg.theme].getThemeVariables(themeVariables);
+    if (cfg.theme && cfg.theme in theme) {
+      cfg.themeVariables = theme[cfg.theme as keyof typeof theme].getThemeVariables(themeVariables);
+    }
   }
 
   currentConfig = cfg;
diff --git a/src/diagrams/common/common.ts b/src/diagrams/common/common.ts
index 7421f48a2..057481768 100644
--- a/src/diagrams/common/common.ts
+++ b/src/diagrams/common/common.ts
@@ -147,7 +147,7 @@ export const evaluate = (val: string | boolean): boolean =>
 export const parseGenericTypes = function (text: string): string {
   let cleanedText = text;
 
-  if (text.indexOf('~') != -1) {
+  if (text.indexOf('~') !== -1) {
     cleanedText = cleanedText.replace('~', '<');
     cleanedText = cleanedText.replace('~', '>');
 
diff --git a/src/diagrams/git/gitGraphDetector.ts b/src/diagrams/git/gitGraphDetector.ts
index f5a660fc1..1c0a015e7 100644
--- a/src/diagrams/git/gitGraphDetector.ts
+++ b/src/diagrams/git/gitGraphDetector.ts
@@ -1,5 +1,5 @@
 import type { DiagramDetector } from '../../diagram-api/detectType';
 
 export const gitGraphDetector: DiagramDetector = (txt) => {
-  return txt.match(/^\s*gitGraph/) != null;
+  return txt.match(/^\s*gitGraph/) !== null;
 };
diff --git a/src/diagrams/mindmap/mindamapDetector.ts b/src/diagrams/mindmap/mindamapDetector.ts
index 18cf67312..42d6309ee 100644
--- a/src/diagrams/mindmap/mindamapDetector.ts
+++ b/src/diagrams/mindmap/mindamapDetector.ts
@@ -1,5 +1,5 @@
 import { DiagramDetector } from '../../diagram-api/detectType';
 
 export const mindmapDetector: DiagramDetector = (txt) => {
-  return txt.match(/^\s*mindmap/) != null;
+  return txt.match(/^\s*mindmap/) !== null;
 };
diff --git a/src/errorRenderer.ts b/src/errorRenderer.ts
index 1f2b61e2e..de0b31886 100644
--- a/src/errorRenderer.ts
+++ b/src/errorRenderer.ts
@@ -1,6 +1,7 @@
 /** Created by knut on 14-12-11. */
 import { select } from 'd3';
 import { log } from './logger';
+import { getErrorMessage } from './utils';
 
 let conf = {};
 
@@ -89,8 +90,7 @@ export const draw = (id: string, mermaidVersion: string) => {
     svg.attr('viewBox', '768 0 512 512');
   } catch (e) {
     log.error('Error while rendering info diagram');
-    // @ts-ignore
-    log.error(e.message);
+    log.error(getErrorMessage(e));
   }
 };
 
diff --git a/src/mermaid.ts b/src/mermaid.ts
index 95cf68c27..a46103f11 100644
--- a/src/mermaid.ts
+++ b/src/mermaid.ts
@@ -6,6 +6,7 @@ import { MermaidConfig } from './config.type';
 import { log } from './logger';
 import utils from './utils';
 import { mermaidAPI } from './mermaidAPI';
+import { isDetailedError } from './utils';
 
 /**
  * ## init
@@ -39,10 +40,10 @@ const init = function (
     initThrowsErrors(config, nodes, callback);
   } catch (e) {
     log.warn('Syntax Error rendering');
-    // @ts-ignore
-    log.warn(e.str);
+    if (isDetailedError(e)) {
+      log.warn(e.str);
+    }
     if (mermaid.parseError) {
-      // @ts-ignore
       mermaid.parseError(e);
     }
   }
@@ -56,6 +57,7 @@ const initThrowsErrors = function (
   const conf = mermaidAPI.getConfig();
   // console.log('Starting rendering diagrams (init) - mermaid.init', conf);
   if (config) {
+    // This is a legacy way of setting config. It is not documented and should be removed in the future.
     // @ts-ignore
     mermaid.sequenceConfig = config;
   }
diff --git a/src/utils.ts b/src/utils.ts
index 30ab57ad8..27c644ff0 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -933,6 +933,20 @@ export const sanitizeCss = (str) => {
   return str;
 };
 
+export interface DetailedError {
+  str: string;
+  hash: any;
+}
+
+export function isDetailedError(error: unknown): error is DetailedError {
+  return 'str' in error;
+}
+
+export function getErrorMessage(error: unknown): string {
+  if (error instanceof Error) return error.message;
+  return String(error);
+}
+
 export default {
   assignWithDepth,
   wrapLabel,

From f7b8d1ac072c7dd6682656c5235cf967f16003bb Mon Sep 17 00:00:00 2001
From: Valentin Valls <valentin.valls@esrf.fr>
Date: Wed, 24 Aug 2022 23:13:35 +0200
Subject: [PATCH 33/60] Create a more consistent 'parseDuration'

- Remove 'durationToDate' which was not a usable function
---
 src/diagrams/gantt/ganttDb.js      | 15 +++++++++++----
 src/diagrams/gantt/ganttDb.spec.js | 10 +++++-----
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/diagrams/gantt/ganttDb.js b/src/diagrams/gantt/ganttDb.js
index b69d46518..e8c75a982 100644
--- a/src/diagrams/gantt/ganttDb.js
+++ b/src/diagrams/gantt/ganttDb.js
@@ -230,7 +230,15 @@ const getStartDate = function (prevTime, dateFormat, str) {
   return new Date();
 };
 
-const durationToDate = function (durationStatement, relativeTime) {
+/**
+ * Parse a duration as an absolute date.
+ *
+ * @param durationStr A string representing a duration
+ * @param relativeTime The moment when this duration starts
+ * @returns The date of the end of the duration.
+ */
+const parseDuration = function (durationStr, relativeTime) {
+  const durationStatement = /^([\d]+)([wdhms]|ms)$/.exec(durationStr.trim());
   if (durationStatement !== null) {
     switch (durationStatement[2]) {
       case 'ms':
@@ -253,7 +261,6 @@ const durationToDate = function (durationStatement, relativeTime) {
         break;
     }
   }
-  // Default date - now
   return relativeTime.toDate();
 };
 
@@ -270,7 +277,7 @@ const getEndDate = function (prevTime, dateFormat, str, inclusive) {
     return mDate.toDate();
   }
 
-  return durationToDate(/^([\d]+)([wdhms]|ms)$/.exec(str.trim()), moment(prevTime));
+  return parseDuration(str, moment(prevTime));
 };
 
 let taskCnt = 0;
@@ -666,7 +673,7 @@ export default {
   setLink,
   getLinks,
   bindFunctions,
-  durationToDate,
+  parseDuration,
   isInvalidDate,
 };
 
diff --git a/src/diagrams/gantt/ganttDb.spec.js b/src/diagrams/gantt/ganttDb.spec.js
index d07aee4bf..1d2b3724f 100644
--- a/src/diagrams/gantt/ganttDb.spec.js
+++ b/src/diagrams/gantt/ganttDb.spec.js
@@ -8,11 +8,11 @@ describe('when using the ganttDb', function () {
 
   describe('when using relative times', function () {
     it.each`
-      diff     | date                    | expected
-      ${' 1d'} | ${moment('2019-01-01')} | ${moment('2019-01-02').toDate()}
-      ${' 1w'} | ${moment('2019-01-01')} | ${moment('2019-01-08').toDate()}
+      diff    | date                    | expected
+      ${'1d'} | ${moment('2019-01-01')} | ${moment('2019-01-02').toDate()}
+      ${'1w'} | ${moment('2019-01-01')} | ${moment('2019-01-08').toDate()}
     `('should add $diff to $date resulting in $expected', ({ diff, date, expected }) => {
-      expect(ganttDb.durationToDate(diff, date)).toEqual(expected);
+      expect(ganttDb.parseDuration(diff, date)).toEqual(expected);
     });
   });
 
@@ -106,7 +106,7 @@ describe('when using the ganttDb', function () {
     ganttDb.addTask('test2', 'id2,after id1,5ms');
     ganttDb.addSection('testa2');
     ganttDb.addTask('test3', 'id3,20,10ms');
-    ganttDb.addTask('test4', 'id4,after id3,5ms');
+    ganttDb.addTask('test4', 'id4,after id3,0.005s');
 
     const tasks = ganttDb.getTasks();
 

From 3315ae838263ff767fd731cede947bfaca536d2d Mon Sep 17 00:00:00 2001
From: Valentin Valls <valentin.valls@esrf.fr>
Date: Wed, 24 Aug 2022 23:50:42 +0200
Subject: [PATCH 34/60] Supports duration in decimal

---
 cypress/integration/rendering/gantt.spec.js |  2 +-
 src/diagrams/gantt/ganttDb.js               |  2 +-
 src/diagrams/gantt/ganttDb.spec.js          | 10 ++++++----
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js
index 7dc7c6cf5..e6c79a717 100644
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/cypress/integration/rendering/gantt.spec.js
@@ -175,7 +175,7 @@ describe('Gantt diagram', () => {
       Another task     :after a1, 20ms
       section Another
       Another another task      :b1, 20, 12ms
-      Another another another task     :after b1, 24ms
+      Another another another task     :after b1, 0.024s
         `,
       {}
     );
diff --git a/src/diagrams/gantt/ganttDb.js b/src/diagrams/gantt/ganttDb.js
index e8c75a982..996f22e79 100644
--- a/src/diagrams/gantt/ganttDb.js
+++ b/src/diagrams/gantt/ganttDb.js
@@ -238,7 +238,7 @@ const getStartDate = function (prevTime, dateFormat, str) {
  * @returns The date of the end of the duration.
  */
 const parseDuration = function (durationStr, relativeTime) {
-  const durationStatement = /^([\d]+)([wdhms]|ms)$/.exec(durationStr.trim());
+  const durationStatement = /^(\d+(?:\.\d+)?)([wdhms]|ms)$/.exec(durationStr.trim());
   if (durationStatement !== null) {
     switch (durationStatement[2]) {
       case 'ms':
diff --git a/src/diagrams/gantt/ganttDb.spec.js b/src/diagrams/gantt/ganttDb.spec.js
index 1d2b3724f..e3622a5fb 100644
--- a/src/diagrams/gantt/ganttDb.spec.js
+++ b/src/diagrams/gantt/ganttDb.spec.js
@@ -8,11 +8,13 @@ describe('when using the ganttDb', function () {
 
   describe('when using relative times', function () {
     it.each`
-      diff    | date                    | expected
-      ${'1d'} | ${moment('2019-01-01')} | ${moment('2019-01-02').toDate()}
-      ${'1w'} | ${moment('2019-01-01')} | ${moment('2019-01-08').toDate()}
+      diff      | date                        | expected
+      ${'1d'}   | ${moment.utc('2019-01-01')} | ${'2019-01-02T00:00:00.000Z'}
+      ${'1w'}   | ${moment.utc('2019-01-01')} | ${'2019-01-08T00:00:00.000Z'}
+      ${'1ms'}  | ${moment.utc('2019-01-01')} | ${'2019-01-01T00:00:00.001Z'}
+      ${'0.1s'} | ${moment.utc('2019-01-01')} | ${'2019-01-01T00:00:00.100Z'}
     `('should add $diff to $date resulting in $expected', ({ diff, date, expected }) => {
-      expect(ganttDb.parseDuration(diff, date)).toEqual(expected);
+      expect(ganttDb.parseDuration(diff, date).toISOString()).toEqual(expected);
     });
   });
 

From ba4f7d2ceba80f386e39d8da2fb9871d4a749ea4 Mon Sep 17 00:00:00 2001
From: Valentin Valls <valentin.valls@esrf.fr>
Date: Thu, 25 Aug 2022 23:15:16 +0200
Subject: [PATCH 35/60] Rework 'parseDuration' as a pure duration parsing

---
 src/diagrams/gantt/ganttDb.js      | 56 ++++++++++++++----------------
 src/diagrams/gantt/ganttDb.spec.js | 17 ++++-----
 2 files changed, 36 insertions(+), 37 deletions(-)

diff --git a/src/diagrams/gantt/ganttDb.js b/src/diagrams/gantt/ganttDb.js
index 996f22e79..f6a526759 100644
--- a/src/diagrams/gantt/ganttDb.js
+++ b/src/diagrams/gantt/ganttDb.js
@@ -231,37 +231,30 @@ const getStartDate = function (prevTime, dateFormat, str) {
 };
 
 /**
- * Parse a duration as an absolute date.
+ * Parse a string as a moment duration.
  *
- * @param durationStr A string representing a duration
- * @param relativeTime The moment when this duration starts
- * @returns The date of the end of the duration.
+ * The string have to be compound by a value and a shorthand duration unit. For example `5d`
+ * representes 5 days.
+ *
+ * Shorthand unit supported are:
+ *
+ * - `y` for years
+ * - `M` for months
+ * - `w` for weeks
+ * - `d` for days
+ * - `h` for hours
+ * - `s` for seconds
+ * - `ms` for milliseconds
+ *
+ * @param {string} str - A string representing the duration.
+ * @returns {moment.Duration} A moment duration, including an invalid moment for invalid input string.
  */
-const parseDuration = function (durationStr, relativeTime) {
-  const durationStatement = /^(\d+(?:\.\d+)?)([wdhms]|ms)$/.exec(durationStr.trim());
-  if (durationStatement !== null) {
-    switch (durationStatement[2]) {
-      case 'ms':
-        relativeTime.add(durationStatement[1], 'milliseconds');
-        break;
-      case 's':
-        relativeTime.add(durationStatement[1], 'seconds');
-        break;
-      case 'm':
-        relativeTime.add(durationStatement[1], 'minutes');
-        break;
-      case 'h':
-        relativeTime.add(durationStatement[1], 'hours');
-        break;
-      case 'd':
-        relativeTime.add(durationStatement[1], 'days');
-        break;
-      case 'w':
-        relativeTime.add(durationStatement[1], 'weeks');
-        break;
-    }
+const parseDuration = function (str) {
+  const statement = /^(\d+(?:\.\d+)?)([yMwdhms]|ms)$/.exec(str.trim());
+  if (statement !== null) {
+    return moment.duration(Number.parseFloat(statement[1]), statement[2]);
   }
-  return relativeTime.toDate();
+  return moment.duration.invalid();
 };
 
 const getEndDate = function (prevTime, dateFormat, str, inclusive) {
@@ -277,7 +270,12 @@ const getEndDate = function (prevTime, dateFormat, str, inclusive) {
     return mDate.toDate();
   }
 
-  return parseDuration(str, moment(prevTime));
+  const endTime = moment(prevTime);
+  const duration = parseDuration(str);
+  if (duration.isValid()) {
+    endTime.add(duration);
+  }
+  return endTime.toDate();
 };
 
 let taskCnt = 0;
diff --git a/src/diagrams/gantt/ganttDb.spec.js b/src/diagrams/gantt/ganttDb.spec.js
index e3622a5fb..4d1c3860b 100644
--- a/src/diagrams/gantt/ganttDb.spec.js
+++ b/src/diagrams/gantt/ganttDb.spec.js
@@ -6,15 +6,16 @@ describe('when using the ganttDb', function () {
     ganttDb.clear();
   });
 
-  describe('when using relative times', function () {
+  describe('when using duration', function () {
     it.each`
-      diff      | date                        | expected
-      ${'1d'}   | ${moment.utc('2019-01-01')} | ${'2019-01-02T00:00:00.000Z'}
-      ${'1w'}   | ${moment.utc('2019-01-01')} | ${'2019-01-08T00:00:00.000Z'}
-      ${'1ms'}  | ${moment.utc('2019-01-01')} | ${'2019-01-01T00:00:00.001Z'}
-      ${'0.1s'} | ${moment.utc('2019-01-01')} | ${'2019-01-01T00:00:00.100Z'}
-    `('should add $diff to $date resulting in $expected', ({ diff, date, expected }) => {
-      expect(ganttDb.parseDuration(diff, date).toISOString()).toEqual(expected);
+      str       | expected
+      ${'1d'}   | ${moment.duration(1, 'd')}
+      ${'2w'}   | ${moment.duration(2, 'w')}
+      ${'1ms'}  | ${moment.duration(1, 'ms')}
+      ${'0.1s'} | ${moment.duration(100, 'ms')}
+      ${'1f'}   | ${moment.duration.invalid()}
+    `('should $str resulting in $expected duration', ({ str, expected }) => {
+      expect(ganttDb.parseDuration(str)).toEqual(expected);
     });
   });
 

From 2229a307a19c7bb4dee40469e793cf02e21a6d16 Mon Sep 17 00:00:00 2001
From: ashishj <ashishjain0512@gmail.com>
Date: Tue, 30 Aug 2022 17:42:42 +0200
Subject: [PATCH 36/60] #3238 Enhancing the merge commit functionality

---
 src/diagrams/git/gitGraphAst.js        | 25 ++++++++++++++++++++++---
 src/diagrams/git/gitGraphRenderer.js   | 15 +++++++++------
 src/diagrams/git/parser/gitGraph.jison | 18 ++++++++++++++++--
 3 files changed, 47 insertions(+), 11 deletions(-)

diff --git a/src/diagrams/git/gitGraphAst.js b/src/diagrams/git/gitGraphAst.js
index 2e7dc601a..eefb84ad5 100644
--- a/src/diagrams/git/gitGraphAst.js
+++ b/src/diagrams/git/gitGraphAst.js
@@ -148,7 +148,7 @@ export const branch = function (name, order) {
   }
 };
 
-export const merge = function (otherBranch, tag) {
+export const merge = function (otherBranch, custom_id, override_type, custom_tag) {
   otherBranch = common.sanitizeText(otherBranch, configApi.getConfig());
   const currentCommit = commits[branches[curBranch]];
   const otherCommit = commits[branches[otherBranch]];
@@ -207,6 +207,23 @@ export const merge = function (otherBranch, tag) {
       loc: { first_line: 1, last_line: 1, first_column: 1, last_column: 1 },
       expected: ['branch abc'],
     };
+    throw error;
+  } else if (custom_id && typeof commits[custom_id] !== 'undefined') {
+    let error = new Error(
+      'Incorrect usage of "merge". Commit with id:' +
+        custom_id +
+        ' already exists, use different custom Id'
+    );
+    error.hash = {
+      text: 'merge ' + otherBranch + custom_id + override_type + custom_tag,
+      token: 'merge ' + otherBranch + custom_id + override_type + custom_tag,
+      line: '1',
+      loc: { first_line: 1, last_line: 1, first_column: 1, last_column: 1 },
+      expected: [
+        'merge ' + otherBranch + ' ' + custom_id + '_UNIQUE ' + override_type + ' ' + custom_tag,
+      ],
+    };
+
     throw error;
   }
   // if (isReachableFrom(currentCommit, otherCommit)) {
@@ -219,13 +236,15 @@ export const merge = function (otherBranch, tag) {
   // } else {
   // create merge commit
   const commit = {
-    id: seq + '-' + getId(),
+    id: custom_id ? custom_id : seq + '-' + getId(),
     message: 'merged branch ' + otherBranch + ' into ' + curBranch,
     seq: seq++,
     parents: [head == null ? null : head.id, branches[otherBranch]],
     branch: curBranch,
     type: commitType.MERGE,
-    tag: tag ? tag : '',
+    customType: override_type,
+    customId: custom_id ? true : false,
+    tag: custom_tag ? custom_tag : '',
   };
   head = commit;
   commits[commit.id] = commit;
diff --git a/src/diagrams/git/gitGraphRenderer.js b/src/diagrams/git/gitGraphRenderer.js
index 0a7c457cf..73588fa2d 100644
--- a/src/diagrams/git/gitGraphRenderer.js
+++ b/src/diagrams/git/gitGraphRenderer.js
@@ -91,7 +91,9 @@ const drawCommits = (svg, commits, modifyGraph) => {
     // Don't draw the commits now but calculate the positioning which is used by the branch lines etc.
     if (modifyGraph) {
       let typeClass;
-      switch (commit.type) {
+      let commitSymbolType =
+        typeof commit.customType !== 'undefined' ? commit.customType : commit.type;
+      switch (commitSymbolType) {
         case commitType.NORMAL:
           typeClass = 'commit-normal';
           break;
@@ -111,7 +113,7 @@ const drawCommits = (svg, commits, modifyGraph) => {
           typeClass = 'commit-normal';
       }
 
-      if (commit.type === commitType.HIGHLIGHT) {
+      if (commitSymbolType === commitType.HIGHLIGHT) {
         const circle = gBullets.append('rect');
         circle.attr('x', x - 10);
         circle.attr('y', y - 10);
@@ -135,7 +137,7 @@ const drawCommits = (svg, commits, modifyGraph) => {
               branchPos[commit.branch].index % THEME_COLOR_LIMIT
             } ${typeClass}-inner`
           );
-      } else if (commit.type === commitType.CHERRY_PICK) {
+      } else if (commitSymbolType === commitType.CHERRY_PICK) {
         gBullets
           .append('circle')
           .attr('cx', x)
@@ -181,7 +183,7 @@ const drawCommits = (svg, commits, modifyGraph) => {
           'class',
           `commit ${commit.id} commit${branchPos[commit.branch].index % THEME_COLOR_LIMIT}`
         );
-        if (commit.type === commitType.MERGE) {
+        if (commitSymbolType === commitType.MERGE) {
           const circle2 = gBullets.append('circle');
           circle2.attr('cx', x);
           circle2.attr('cy', y);
@@ -193,7 +195,7 @@ const drawCommits = (svg, commits, modifyGraph) => {
             }`
           );
         }
-        if (commit.type === commitType.REVERSE) {
+        if (commitSymbolType === commitType.REVERSE) {
           const cross = gBullets.append('path');
           cross
             .attr('d', `M ${x - 5},${y - 5}L${x + 5},${y + 5}M${x - 5},${y + 5}L${x + 5},${y - 5}`)
@@ -217,7 +219,8 @@ const drawCommits = (svg, commits, modifyGraph) => {
       // Draw the commit label
       if (
         commit.type !== commitType.CHERRY_PICK &&
-        commit.type !== commitType.MERGE &&
+        ((commit.customId && commit.type === commitType.MERGE) ||
+          commit.type !== commitType.MERGE) &&
         gitGraphConfig.showCommitLabel
       ) {
         const wrapper = gLabels.append('g');
diff --git a/src/diagrams/git/parser/gitGraph.jison b/src/diagrams/git/parser/gitGraph.jison
index 04b208249..937a7192a 100644
--- a/src/diagrams/git/parser/gitGraph.jison
+++ b/src/diagrams/git/parser/gitGraph.jison
@@ -121,8 +121,22 @@ cherryPickStatement
     ;
 
 mergeStatement
-    : MERGE ID {yy.merge($2)}
-    | MERGE ID COMMIT_TAG STR {yy.merge($2, $4)}
+    : MERGE ID {yy.merge($2,'','','')}
+    | MERGE ID COMMIT_ID STR {yy.merge($2, $4,'','')}
+    | MERGE ID COMMIT_TYPE commitType  {yy.merge($2,'', $4,'')}
+    | MERGE ID COMMIT_TAG STR {yy.merge($2, '','',$4)}
+    | MERGE ID COMMIT_TAG STR COMMIT_ID STR {yy.merge($2, $6,'', $4)}
+    | MERGE ID COMMIT_TAG STR COMMIT_TYPE commitType {yy.merge($2, '',$6, $4)}
+    | MERGE ID COMMIT_TYPE commitType COMMIT_TAG STR {yy.merge($2, '',$4, $6)}
+    | MERGE ID COMMIT_ID STR COMMIT_TYPE commitType {yy.merge($2, $4, $6, '')}
+    | MERGE ID COMMIT_ID STR COMMIT_TAG STR {yy.merge($2, $4, '', $6)}
+    | MERGE ID COMMIT_TYPE commitType COMMIT_ID STR {yy.merge($2, $6,$4, '')}
+    | MERGE ID COMMIT_ID STR COMMIT_TYPE commitType COMMIT_TAG STR {yy.merge($2, $4, $6, $8)}
+    | MERGE ID COMMIT_TYPE commitType COMMIT_TAG STR COMMIT_ID STR {yy.merge($2, $8, $4, $6)}
+    | MERGE ID COMMIT_ID STR COMMIT_TAG STR COMMIT_TYPE commitType {yy.merge($2, $4, $8, $6)}
+    | MERGE ID COMMIT_TYPE commitType COMMIT_ID STR COMMIT_TAG STR {yy.merge($2, $6, $4, $8)}
+    | MERGE ID COMMIT_TAG STR COMMIT_TYPE commitType COMMIT_ID STR {yy.merge($2, $8, $6, $4)}
+    | MERGE ID COMMIT_TAG STR COMMIT_ID STR COMMIT_TYPE commitType {yy.merge($2, $6, $8, $4)}
     ;
 
 commitStatement

From 7068f6c08ac2e819e5b6ed5a5bf65b81b10a6ee3 Mon Sep 17 00:00:00 2001
From: ashishj <ashishjain0512@gmail.com>
Date: Tue, 30 Aug 2022 18:32:06 +0200
Subject: [PATCH 37/60] #3238 Added test cases

---
 src/diagrams/git/gitGraphParserV2.spec.js | 27 +++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/diagrams/git/gitGraphParserV2.spec.js b/src/diagrams/git/gitGraphParserV2.spec.js
index 9c8e47443..9ddc981af 100644
--- a/src/diagrams/git/gitGraphParserV2.spec.js
+++ b/src/diagrams/git/gitGraphParserV2.spec.js
@@ -496,7 +496,7 @@ describe('when parsing a gitGraph', function () {
     ]);
   });
 
-  it('should handle merge ids', function () {
+  it('should handle merge with custom ids, tags and typr', function () {
     const str = `gitGraph:
       commit
       branch testBranch
@@ -510,7 +510,7 @@ describe('when parsing a gitGraph', function () {
       commit
       checkout main
       %% Merge ID and Tag (reverse order)
-      merge testBranch2 id: "4-444" tag: "merge-tag2"
+      merge testBranch2 id: "4-444" tag: "merge-tag2" type:HIGHLIGHT
       branch testBranch3
       checkout testBranch3
       commit
@@ -553,6 +553,8 @@ describe('when parsing a gitGraph', function () {
     expect(testBranch2Merge.parents).toStrictEqual([testBranchMerge.id, testBranch2Commit.id]);
     expect(testBranch2Merge.tag).toBe('merge-tag2');
     expect(testBranch2Merge.id).toBe('4-444');
+    expect(testBranch2Merge.customType).toBe(2);
+    expect(testBranch2Merge.customId).toBe(true);
 
     expect(testBranch3Merge.branch).toBe('main');
     expect(testBranch3Merge.parents).toStrictEqual([testBranch2Merge.id, testBranch3Commit.id]);
@@ -687,6 +689,27 @@ describe('when parsing a gitGraph', function () {
       expect(e.message).toBe('Incorrect usage of "merge". Cannot merge a branch to itself');
     }
   });
+
+  it('should throw error when using existing id as merge ID', function () {
+    const str = `gitGraph
+    commit id: "1-111"
+    branch testBranch
+    commit id: "2-222"
+    commit id: "3-333"
+    checkout main
+    merge testBranch id: "1-111"
+    `;
+
+    try {
+      parser.parse(str);
+      // Fail test if above expression doesn't throw anything.
+      expect(true).toBe(false);
+    } catch (e) {
+      expect(e.message).toBe(
+        'Incorrect usage of "merge". Commit with id:1-111 already exists, use different custom Id'
+      );
+    }
+  });
   it('should throw error when trying to merge branches having same heads', function () {
     const str = `gitGraph
     commit

From dd40b19c8973cd466cdd3f271d258c819083efca Mon Sep 17 00:00:00 2001
From: ashishj <ashishjain0512@gmail.com>
Date: Tue, 30 Aug 2022 18:37:13 +0200
Subject: [PATCH 38/60] #3238 Added more rendering test cases

---
 .../integration/rendering/gitGraph.spec.js    | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js
index 52019c430..44035c9c2 100644
--- a/cypress/integration/rendering/gitGraph.spec.js
+++ b/cypress/integration/rendering/gitGraph.spec.js
@@ -253,4 +253,32 @@ describe('Git Graph diagram', () => {
       {}
     );
   });
+  it('12: should render a simple gitgraph with three branches,custom merge commit id,tag,type', () => {
+    imgSnapshotTest(
+      `gitGraph
+       commit id: "1"
+       commit id: "2"
+       branch nice_feature
+       checkout nice_feature
+       commit id: "3"
+       checkout main
+       commit id: "4"
+       checkout nice_feature
+       branch very_nice_feature
+       checkout very_nice_feature
+       commit id: "5"
+       checkout main
+       commit id: "6"
+       checkout nice_feature
+       commit id: "7"
+       checkout main
+       merge nice_feature id: "customID" tag: "customTag" type: "REVERSE"
+       checkout very_nice_feature
+       commit id: "8"
+       checkout main
+       commit id: "9"
+      `,
+      {}
+    );
+  });
 });

From a93f37a3fc0c515ac25661f0554e513d5081aa24 Mon Sep 17 00:00:00 2001
From: ashishj <ashishjain0512@gmail.com>
Date: Tue, 30 Aug 2022 19:25:22 +0200
Subject: [PATCH 39/60] #3238 Updated documentation

---
 .../integration/rendering/gitGraph.spec.js    |  4 +--
 docs/gitgraph.md                              | 35 ++++++++++++++++++-
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js
index 44035c9c2..80981c31c 100644
--- a/cypress/integration/rendering/gitGraph.spec.js
+++ b/cypress/integration/rendering/gitGraph.spec.js
@@ -253,7 +253,7 @@ describe('Git Graph diagram', () => {
       {}
     );
   });
-  it('12: should render a simple gitgraph with three branches,custom merge commit id,tag,type', () => {
+  it('13: should render a simple gitgraph with three branches,custom merge commit id,tag,type', () => {
     imgSnapshotTest(
       `gitGraph
        commit id: "1"
@@ -272,7 +272,7 @@ describe('Git Graph diagram', () => {
        checkout nice_feature
        commit id: "7"
        checkout main
-       merge nice_feature id: "customID" tag: "customTag" type: "REVERSE"
+       merge nice_feature id: "customID" tag: "customTag" type: REVERSE
        checkout very_nice_feature
        commit id: "8"
        checkout main
diff --git a/docs/gitgraph.md b/docs/gitgraph.md
index 53e802101..191bc513b 100644
--- a/docs/gitgraph.md
+++ b/docs/gitgraph.md
@@ -182,7 +182,40 @@ After this we made use of the `checkout` keyword to set the current branch as `m
 After this we merge the `develop` branch onto the current branch `main`, resulting in a merge commit.
 Since the current branch at this point is still `main`, the last two commits are registered against that.
 
-Additionally, you may add a tag to the merge commit, or override the default id: `merge branch id:"1234" tag:"v1.0.0"`
+You can also decorate your merge with similar attributes as you did for the commit using:
+- `id`--> To override the default ID with custom ID
+- `tag`--> To add a custom tag to your merge commit
+- `type`--> To override the default shape of merge commit. Here you can use other commit type mentioned earlier.
+
+And you can choose to use none, some or all of these attributes together.
+For example: `merge develop id: "my_custom_id" tag: "my_custom_tag" type: REVERSE`
+
+Let us see how this works with the help of the following diagram:
+
+```mermaid-example
+    gitGraph
+       commit id: "1"
+       commit id: "2"
+       branch nice_feature
+       checkout nice_feature
+       commit id: "3"
+       checkout main
+       commit id: "4"
+       checkout nice_feature
+       branch very_nice_feature
+       checkout very_nice_feature
+       commit id: "5"
+       checkout main
+       commit id: "6"
+       checkout nice_feature
+       commit id: "7"
+       checkout main
+       merge nice_feature id: "customID" tag: "customTag" type: REVERSE
+       checkout very_nice_feature
+       commit id: "8"
+       checkout main
+       commit id: "9"
+```
 
 ### Cherry Pick commit from another branch
 Similar to how 'git' allows you to cherry-pick a commit from **another branch** onto the **current** branch, Mermaid also supports this functionality. You can also cherry-pick a commit from another branch using the `cherry-pick` keyword.

From c846b4888224c53055d2906ca71df9b10ad2bbc7 Mon Sep 17 00:00:00 2001
From: ashishj <ashishjain0512@gmail.com>
Date: Tue, 30 Aug 2022 19:55:01 +0200
Subject: [PATCH 40/60] Replacing replaceAll with replace

---
 src/diagrams/common/common.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/diagrams/common/common.js b/src/diagrams/common/common.js
index 73ccf1cce..f001727fb 100644
--- a/src/diagrams/common/common.js
+++ b/src/diagrams/common/common.js
@@ -57,11 +57,11 @@ export const removeScript = (txt) => {
     }
   }
   let decodedText = removeEscapes(rs);
-  decodedText = decodedText.replaceAll(/script>/gi, '#');
-  decodedText = decodedText.replaceAll(/javascript:/gi, '#');
-  decodedText = decodedText.replaceAll(/javascript&colon/gi, '#');
-  decodedText = decodedText.replaceAll(/onerror=/gi, 'onerror:');
-  decodedText = decodedText.replaceAll(/<iframe/gi, '');
+  decodedText = decodedText.replace(/script>/gi, '#');
+  decodedText = decodedText.replace(/javascript:/gi, '#');
+  decodedText = decodedText.replace(/javascript&colon/gi, '#');
+  decodedText = decodedText.replace(/onerror=/gi, 'onerror:');
+  decodedText = decodedText.replace(/<iframe/gi, '');
   return decodedText;
 };
 

From 9d5e855e8eb491da7be1d5c3bdbe5436dada85ce Mon Sep 17 00:00:00 2001
From: hughligit <49313419+hughligit@users.noreply.github.com>
Date: Wed, 31 Aug 2022 16:51:36 +0800
Subject: [PATCH 41/60] Fix gitGraph findLane function error

findLane may infinite loop after recursive call, then cause RangeError: Maximum call stack size exceeded.
---
 src/diagrams/git/gitGraphRenderer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/diagrams/git/gitGraphRenderer.js b/src/diagrams/git/gitGraphRenderer.js
index 7dce4d748..6b602f23c 100644
--- a/src/diagrams/git/gitGraphRenderer.js
+++ b/src/diagrams/git/gitGraphRenderer.js
@@ -336,7 +336,7 @@ const findLane = (y1, y2, _depth) => {
     return candidate;
   }
   const diff = Math.abs(y1 - y2);
-  return findLane(y1, y2 - diff / 5, depth);
+  return findLane(y1, y2 - diff / 5, depth + 1);
 };
 
 /**

From 3dc7e0e6949abdf984296ffb9e33d209c46aae1e Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 1 Sep 2022 08:21:49 +0000
Subject: [PATCH 42/60] chore(deps-dev): bump webpack-dev-server from 4.10.0 to
 4.10.1

Bumps [webpack-dev-server](https://github.com/webpack/webpack-dev-server) from 4.10.0 to 4.10.1.
- [Release notes](https://github.com/webpack/webpack-dev-server/releases)
- [Changelog](https://github.com/webpack/webpack-dev-server/blob/master/CHANGELOG.md)
- [Commits](https://github.com/webpack/webpack-dev-server/compare/v4.10.0...v4.10.1)

---
updated-dependencies:
- dependency-name: webpack-dev-server
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package.json |  2 +-
 yarn.lock    | 15 +++++----------
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index a8e6221dc..ddea9ed30 100644
--- a/package.json
+++ b/package.json
@@ -108,7 +108,7 @@
     "terser-webpack-plugin": "^5.2.4",
     "webpack": "^5.53.0",
     "webpack-cli": "^4.7.2",
-    "webpack-dev-server": "^4.3.0",
+    "webpack-dev-server": "^4.10.1",
     "webpack-merge": "^5.8.0",
     "webpack-node-externals": "^3.0.0"
   },
diff --git a/yarn.lock b/yarn.lock
index 69868563f..ca9e26eeb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11859,10 +11859,10 @@ webpack-dev-middleware@^5.3.1:
     range-parser "^1.2.1"
     schema-utils "^4.0.0"
 
-webpack-dev-server@^4.3.0:
-  version "4.10.0"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-4.10.0.tgz#de270d0009eba050546912be90116e7fd740a9ca"
-  integrity sha512-7dezwAs+k6yXVFZ+MaL8VnE+APobiO3zvpp3rBHe/HmWQ+avwh0Q3d0xxacOiBybZZ3syTZw9HXzpa3YNbAZDQ==
+webpack-dev-server@^4.10.1:
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-4.10.1.tgz#124ac9ac261e75303d74d95ab6712b4aec3e12ed"
+  integrity sha512-FIzMq3jbBarz3ld9l7rbM7m6Rj1lOsgq/DyLGMX/fPEB1UBUPtf5iL/4eNfhx8YYJTRlzfv107UfWSWcBK5Odw==
   dependencies:
     "@types/bonjour" "^3.5.9"
     "@types/connect-history-api-fallback" "^1.3.5"
@@ -12072,12 +12072,7 @@ ws@8.5.0:
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.5.0.tgz#bfb4be96600757fe5382de12c670dab984a1ed4f"
   integrity sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==
 
-ws@^8.2.3, ws@^8.4.2:
-  version "8.6.0"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-8.6.0.tgz#e5e9f1d9e7ff88083d0c0dd8281ea662a42c9c23"
-  integrity sha512-AzmM3aH3gk0aX7/rZLYvjdvZooofDu3fFOzGqcSnQ1tOcTWwhM/o+q++E8mAyVVIyUdajrkzWUGftaVSDLn1bw==
-
-ws@^8.8.0:
+ws@^8.2.3, ws@^8.4.2, ws@^8.8.0:
   version "8.8.1"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.8.1.tgz#5dbad0feb7ade8ecc99b830c1d77c913d4955ff0"
   integrity sha512-bGy2JzvzkPowEJV++hF07hAD6niYSr0JzBNo/J29WsB57A2r7Wlc1UFcTR9IzrPvuNVO4B8LGqF8qcpsVOhJCA==

From fa85e2a650805e66597a54f3e252b48e6ef0535f Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 1 Sep 2022 08:22:31 +0000
Subject: [PATCH 43/60] chore(deps-dev): bump terser-webpack-plugin from 5.3.5
 to 5.3.6

Bumps [terser-webpack-plugin](https://github.com/webpack-contrib/terser-webpack-plugin) from 5.3.5 to 5.3.6.
- [Release notes](https://github.com/webpack-contrib/terser-webpack-plugin/releases)
- [Changelog](https://github.com/webpack-contrib/terser-webpack-plugin/blob/master/CHANGELOG.md)
- [Commits](https://github.com/webpack-contrib/terser-webpack-plugin/compare/v5.3.5...v5.3.6)

---
updated-dependencies:
- dependency-name: terser-webpack-plugin
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index a8e6221dc..7e343e09b 100644
--- a/package.json
+++ b/package.json
@@ -105,7 +105,7 @@
     "prettier": "^2.3.2",
     "prettier-plugin-jsdoc": "^0.3.30",
     "start-server-and-test": "^1.12.6",
-    "terser-webpack-plugin": "^5.2.4",
+    "terser-webpack-plugin": "^5.3.6",
     "webpack": "^5.53.0",
     "webpack-cli": "^4.7.2",
     "webpack-dev-server": "^4.3.0",
diff --git a/yarn.lock b/yarn.lock
index 69868563f..db0afc1a6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11015,10 +11015,10 @@ terminal-link@^2.0.0:
     ansi-escapes "^4.2.1"
     supports-hyperlinks "^2.0.0"
 
-terser-webpack-plugin@^5.1.3, terser-webpack-plugin@^5.2.4:
-  version "5.3.5"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.5.tgz#f7d82286031f915a4f8fb81af4bd35d2e3c011bc"
-  integrity sha512-AOEDLDxD2zylUGf/wxHxklEkOe2/r+seuyOWujejFrIxHf11brA1/dWQNIgXa1c6/Wkxgu7zvv0JhOWfc2ELEA==
+terser-webpack-plugin@^5.1.3, terser-webpack-plugin@^5.3.6:
+  version "5.3.6"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.6.tgz#5590aec31aa3c6f771ce1b1acca60639eab3195c"
+  integrity sha512-kfLFk+PoLUQIbLmB1+PZDMRSZS99Mp+/MHqDNmMA6tOItzRt+Npe3E+fsMs5mfcM0wCtrrdU387UnV+vnSffXQ==
   dependencies:
     "@jridgewell/trace-mapping" "^0.3.14"
     jest-worker "^27.4.5"

From 0092ca1da0d71a695af5a3e1f37919cf2cf27583 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 1 Sep 2022 08:22:51 +0000
Subject: [PATCH 44/60] chore(deps-dev): bump @commitlint/cli from 17.1.1 to
 17.1.2

Bumps [@commitlint/cli](https://github.com/conventional-changelog/commitlint/tree/HEAD/@commitlint/cli) from 17.1.1 to 17.1.2.
- [Release notes](https://github.com/conventional-changelog/commitlint/releases)
- [Changelog](https://github.com/conventional-changelog/commitlint/blob/master/@commitlint/cli/CHANGELOG.md)
- [Commits](https://github.com/conventional-changelog/commitlint/commits/v17.1.2/@commitlint/cli)

---
updated-dependencies:
- dependency-name: "@commitlint/cli"
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package.json |   2 +-
 yarn.lock    | 120 ++++++++++++++++++++++++++++++++++++++++++---------
 2 files changed, 101 insertions(+), 21 deletions(-)

diff --git a/package.json b/package.json
index a8e6221dc..718c4a6d3 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,7 @@
     "@babel/eslint-parser": "^7.14.7",
     "@babel/preset-env": "^7.14.7",
     "@babel/register": "^7.14.5",
-    "@commitlint/cli": "^17.0.0",
+    "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.0.0",
     "babel-jest": "^29.0.1",
     "babel-loader": "^8.2.2",
diff --git a/yarn.lock b/yarn.lock
index 69868563f..f6d844c68 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1532,14 +1532,14 @@
   resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-6.0.0.tgz#fe364f025ba74f6de6c837a84ef44bdb1d61e68f"
   integrity sha512-mgmE7XBYY/21erpzhexk4Cj1cyTQ9LzvnTxtzM17BJ7ERMNE6W72mQRo0I1Ud8eFJ+RVVIcBNhLFZ3GX4XFz5w==
 
-"@commitlint/cli@^17.0.0":
-  version "17.1.1"
-  resolved "https://registry.yarnpkg.com/@commitlint/cli/-/cli-17.1.1.tgz#994e91a873aea2bcb53dfa3225ffce2c9022fd3e"
-  integrity sha512-xyQJNJs1j18At5wSBF6bMo1on6ZrpcHUr4duacznPU0RnywCAABDBP1s63BmhkTMdNXLVgVM4J1H2sG0HSS3IA==
+"@commitlint/cli@^17.1.2":
+  version "17.1.2"
+  resolved "https://registry.yarnpkg.com/@commitlint/cli/-/cli-17.1.2.tgz#38240f84936df5216f749f06f838dc50cc85a43d"
+  integrity sha512-h/4Hlka3bvCLbnxf0Er2ri5A44VMlbMSkdTRp8Adv2tRiklSTRIoPGs7OEXDv3EoDs2AAzILiPookgM4Gi7LOw==
   dependencies:
     "@commitlint/format" "^17.0.0"
     "@commitlint/lint" "^17.1.0"
-    "@commitlint/load" "^17.1.1"
+    "@commitlint/load" "^17.1.2"
     "@commitlint/read" "^17.1.0"
     "@commitlint/types" "^17.0.0"
     execa "^5.0.0"
@@ -1602,10 +1602,10 @@
     "@commitlint/rules" "^17.0.0"
     "@commitlint/types" "^17.0.0"
 
-"@commitlint/load@^17.1.1":
-  version "17.1.1"
-  resolved "https://registry.yarnpkg.com/@commitlint/load/-/load-17.1.1.tgz#16f945d2cc4a5d4d75cccc3d7df8066ff152024b"
-  integrity sha512-jEgdDabfj58kFKZmB7rMtmQa7Feo7Ozh3KmvIlXWqrJmal5auO1RC0Iczfl52DlPn26Uo0goUDHrhoAFs2ze0Q==
+"@commitlint/load@^17.1.2":
+  version "17.1.2"
+  resolved "https://registry.yarnpkg.com/@commitlint/load/-/load-17.1.2.tgz#19c88be570d8666bbd32f9b3d81925a08328bc13"
+  integrity sha512-sk2p/jFYAWLChIfOIp/MGSIn/WzZ0vkc3afw+l4X8hGEYkvDe4gQUUAVxjl/6xMRn0HgnSLMZ04xXh5pkTsmgg==
   dependencies:
     "@commitlint/config-validator" "^17.1.0"
     "@commitlint/execute-rule" "^17.0.0"
@@ -1614,9 +1614,10 @@
     "@types/node" "^14.0.0"
     chalk "^4.1.0"
     cosmiconfig "^7.0.0"
-    cosmiconfig-typescript-loader "^3.0.0"
+    cosmiconfig-typescript-loader "^4.0.0"
     lodash "^4.17.19"
     resolve-from "^5.0.0"
+    ts-node "^10.8.1"
     typescript "^4.6.4"
 
 "@commitlint/message@^17.0.0":
@@ -1686,6 +1687,13 @@
   dependencies:
     chalk "^4.1.0"
 
+"@cspotcode/source-map-support@^0.8.0":
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz#00629c35a688e05a88b1cda684fb9d5e73f000a1"
+  integrity sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==
+  dependencies:
+    "@jridgewell/trace-mapping" "0.3.9"
+
 "@cypress/request@^2.88.10":
   version "2.88.10"
   resolved "https://registry.yarnpkg.com/@cypress/request/-/request-2.88.10.tgz#b66d76b07f860d3a4b8d7a0604d020c662752cce"
@@ -2091,6 +2099,14 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
   integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
 
+"@jridgewell/trace-mapping@0.3.9":
+  version "0.3.9"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz#6534fd5933a53ba7cbf3a17615e273a0d1273ff9"
+  integrity sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.0.3"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+
 "@jridgewell/trace-mapping@^0.3.0", "@jridgewell/trace-mapping@^0.3.12", "@jridgewell/trace-mapping@^0.3.13", "@jridgewell/trace-mapping@^0.3.14", "@jridgewell/trace-mapping@^0.3.15", "@jridgewell/trace-mapping@^0.3.9":
   version "0.3.15"
   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.15.tgz#aba35c48a38d3fd84b37e66c9c0423f9744f9774"
@@ -2183,6 +2199,26 @@
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
   integrity sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==
 
+"@tsconfig/node10@^1.0.7":
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/@tsconfig/node10/-/node10-1.0.9.tgz#df4907fc07a886922637b15e02d4cebc4c0021b2"
+  integrity sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==
+
+"@tsconfig/node12@^1.0.7":
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/@tsconfig/node12/-/node12-1.0.11.tgz#ee3def1f27d9ed66dac6e46a295cffb0152e058d"
+  integrity sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==
+
+"@tsconfig/node14@^1.0.0":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@tsconfig/node14/-/node14-1.0.3.tgz#e4386316284f00b98435bf40f72f75a09dabf6c1"
+  integrity sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==
+
+"@tsconfig/node16@^1.0.2":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@tsconfig/node16/-/node16-1.0.3.tgz#472eaab5f15c1ffdd7f8628bd4c4f753995ec79e"
+  integrity sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==
+
 "@types/babel__core@^7.1.14":
   version "7.1.17"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.17.tgz#f50ac9d20d64153b510578d84f9643f9a3afbe64"
@@ -2825,7 +2861,7 @@ acorn-walk@^7.0.0, acorn-walk@^7.1.1:
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
   integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
 
-acorn-walk@^8.2.0:
+acorn-walk@^8.1.1, acorn-walk@^8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.2.0.tgz#741210f2e2426454508853a2f44d0ab83b7f69c1"
   integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
@@ -2835,16 +2871,16 @@ acorn@^7.0.0, acorn@^7.1.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
+acorn@^8.4.1, acorn@^8.8.0:
+  version "8.8.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.0.tgz#88c0187620435c7f6015803f5539dae05a9dbea8"
+  integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==
+
 acorn@^8.5.0, acorn@^8.7.0, acorn@^8.7.1:
   version "8.7.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.7.1.tgz#0197122c843d1bf6d0a5e83220a788f278f63c30"
   integrity sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==
 
-acorn@^8.8.0:
-  version "8.8.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.0.tgz#88c0187620435c7f6015803f5539dae05a9dbea8"
-  integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==
-
 add-stream@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/add-stream/-/add-stream-1.0.0.tgz#6a7990437ca736d5e1288db92bd3266d5f5cb2aa"
@@ -3016,6 +3052,11 @@ arch@^2.2.0:
   resolved "https://registry.yarnpkg.com/arch/-/arch-2.2.0.tgz#1bc47818f305764f23ab3306b0bfc086c5a29d11"
   integrity sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==
 
+arg@^4.1.0:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.3.tgz#269fc7ad5b8e42cb63c896d5666017261c144089"
+  integrity sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==
+
 argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@@ -4237,10 +4278,10 @@ core-util-is@~1.0.0:
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
   integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
 
-cosmiconfig-typescript-loader@^3.0.0:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-3.1.2.tgz#e147457854cabe1416152bdca55f53449b1f865d"
-  integrity sha512-rIwakk27LtK7vjSjGgs3FDbKkq41Byw3VHRGRuAkRQLfGla+O7s+cy1FXRkjLSZ2G9z1og1bcOIsELo1w4G0Kg==
+cosmiconfig-typescript-loader@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-4.0.0.tgz#4a6d856c1281135197346a6f64dfa73a9cd9fefa"
+  integrity sha512-cVpucSc2Tf+VPwCCR7SZzmQTQkPbkk4O01yXsYqXBIbjE1bhwqSyAgYQkRK1un4i0OPziTleqFhdkmOc4RQ/9g==
 
 cosmiconfig@^7.0.0:
   version "7.0.1"
@@ -4264,6 +4305,11 @@ coveralls@^3.0.2:
     minimist "^1.2.5"
     request "^2.88.2"
 
+create-require@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/create-require/-/create-require-1.1.1.tgz#c1d7e8f1e5f6cfc9ff65f9cd352d37348756c333"
+  integrity sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==
+
 cross-spawn@^6.0.0:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
@@ -8175,6 +8221,11 @@ make-dir@^3.0.0, make-dir@^3.0.2, make-dir@^3.1.0:
   dependencies:
     semver "^6.0.0"
 
+make-error@^1.1.1:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2"
+  integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==
+
 makeerror@1.0.12:
   version "1.0.12"
   resolved "https://registry.yarnpkg.com/makeerror/-/makeerror-1.0.12.tgz#3e5dd2079a82e812e983cc6610c4a2cb0eaa801a"
@@ -11238,6 +11289,25 @@ trough@^1.0.0:
   resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.5.tgz#b8b639cefad7d0bb2abd37d433ff8293efa5f406"
   integrity sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==
 
+ts-node@^10.8.1:
+  version "10.9.1"
+  resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-10.9.1.tgz#e73de9102958af9e1f0b168a6ff320e25adcff4b"
+  integrity sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==
+  dependencies:
+    "@cspotcode/source-map-support" "^0.8.0"
+    "@tsconfig/node10" "^1.0.7"
+    "@tsconfig/node12" "^1.0.7"
+    "@tsconfig/node14" "^1.0.0"
+    "@tsconfig/node16" "^1.0.2"
+    acorn "^8.4.1"
+    acorn-walk "^8.1.1"
+    arg "^4.1.0"
+    create-require "^1.1.0"
+    diff "^4.0.1"
+    make-error "^1.1.1"
+    v8-compile-cache-lib "^3.0.1"
+    yn "3.1.1"
+
 tslib@^1.8.1:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
@@ -11565,6 +11635,11 @@ uvu@^0.5.0:
     kleur "^4.0.3"
     sade "^1.7.3"
 
+v8-compile-cache-lib@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz#6336e8d71965cb3d35a1bbb7868445a7c05264bf"
+  integrity sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==
+
 v8-to-istanbul@^9.0.1:
   version "9.0.1"
   resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-9.0.1.tgz#b6f994b0b5d4ef255e17a0d17dc444a9f5132fa4"
@@ -12211,6 +12286,11 @@ yauzl@^2.10.0:
     buffer-crc32 "~0.2.3"
     fd-slicer "~1.1.0"
 
+yn@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/yn/-/yn-3.1.1.tgz#1e87401a09d767c1d5eab26a6e4c185182d2eb50"
+  integrity sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==
+
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"

From 8c85c10212ce744164c8d778b6c708be1b321cdc Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 1 Sep 2022 18:40:28 +0530
Subject: [PATCH 45/60] Fix TODO Qs

---
 src/diagram-api/detectType.ts      |  2 +-
 src/diagram-api/diagramAPI.spec.ts |  3 +--
 src/diagrams/common/common.ts      | 10 +++-------
 src/mermaidAPI.ts                  |  4 ++--
 src/styles.ts                      |  2 +-
 5 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/diagram-api/detectType.ts b/src/diagram-api/detectType.ts
index 62a37616b..34c78404a 100644
--- a/src/diagram-api/detectType.ts
+++ b/src/diagram-api/detectType.ts
@@ -73,7 +73,7 @@ export const detectType = function (text: string, config?: MermaidConfig): strin
     }
   }
 
-  return 'flowchart';
+  throw new Error(`No diagram type detected for text: ${text}`);
 };
 
 export const addDetector = (key: string, detector: DiagramDetector) => {
diff --git a/src/diagram-api/diagramAPI.spec.ts b/src/diagram-api/diagramAPI.spec.ts
index ce12a6433..9216552e2 100644
--- a/src/diagram-api/diagramAPI.spec.ts
+++ b/src/diagram-api/diagramAPI.spec.ts
@@ -12,8 +12,7 @@ describe('DiagramAPI', () => {
 
   it('should handle diagram registrations', () => {
     expect(() => getDiagram('loki')).toThrow();
-    // TODO Q: Shouldn't this be throwing an error?
-    expect(detectType('loki diagram')).toBe('flowchart');
+    expect(() => detectType('loki diagram')).toThrow();
     registerDiagram(
       'loki',
       {
diff --git a/src/diagrams/common/common.ts b/src/diagrams/common/common.ts
index 057481768..10edf9856 100644
--- a/src/diagrams/common/common.ts
+++ b/src/diagrams/common/common.ts
@@ -24,7 +24,6 @@ export const removeScript = (txt: string): string => {
 };
 
 const sanitizeMore = (text: string, config: MermaidConfig) => {
-  // TODO Q: Should this check really be here? Feels like we should be sanitizing it regardless.
   if (config.flowchart?.htmlLabels !== false) {
     const level = config.securityLevel;
     if (level === 'antiscript' || level === 'strict') {
@@ -54,7 +53,7 @@ export const sanitizeTextOrArray = (
   config: MermaidConfig
 ): string | string[] => {
   if (typeof a === 'string') return sanitizeText(a, config);
-  // TODO Q: Do we need flat?
+  // TODO: Refactor to avoid flat.
   return a.flat().map((x: string) => sanitizeText(x, config));
 };
 
@@ -108,7 +107,6 @@ const breakToPlaceholder = (s: string): string => {
  */
 const getUrl = (useAbsolute: boolean): string => {
   let url = '';
-  // TODO Q: If useAbsolute if false, empty string is returned. Bug?
   if (useAbsolute) {
     url =
       window.location.protocol +
@@ -116,7 +114,6 @@ const getUrl = (useAbsolute: boolean): string => {
       window.location.host +
       window.location.pathname +
       window.location.search;
-    // TODO Q: Why is this necessary?
     url = url.replaceAll(/\(/g, '\\(');
     url = url.replaceAll(/\)/g, '\\)');
   }
@@ -130,9 +127,8 @@ const getUrl = (useAbsolute: boolean): string => {
  * @param {string | boolean} val String or boolean to convert
  * @returns {boolean} The result from the input
  */
-// TODO Q: Should we make this check more specific? 'False', '0', 'null' all will evaluate to true.
-export const evaluate = (val: string | boolean): boolean =>
-  val === 'false' || val === false ? false : true;
+export const evaluate = (val?: string | boolean): boolean =>
+  val === false || ['false', 'null', '0'].includes(String(val).trim().toLowerCase()) ? false : true;
 
 /**
  * Makes generics in typescript syntax
diff --git a/src/mermaidAPI.ts b/src/mermaidAPI.ts
index 8ca4a9bab..303a78680 100644
--- a/src/mermaidAPI.ts
+++ b/src/mermaidAPI.ts
@@ -34,6 +34,7 @@ import theme from './themes';
 import utils, { directiveSanitizer } from './utils';
 import DOMPurify from 'dompurify';
 import { MermaidConfig } from './config.type';
+import { evaluate } from './diagrams/common/common';
 
 let hasLoadedDiagrams = false;
 
@@ -308,8 +309,7 @@ const render = function (
   let svgCode = root.select('#d' + id).node().innerHTML;
 
   log.debug('cnf.arrowMarkerAbsolute', cnf.arrowMarkerAbsolute);
-  // TODO Q: Needs verification.
-  if (!cnf.arrowMarkerAbsolute && cnf.securityLevel !== 'sandbox') {
+  if (!evaluate(cnf.arrowMarkerAbsolute) && cnf.securityLevel !== 'sandbox') {
     svgCode = svgCode.replace(/marker-end="url\(.*?#/g, 'marker-end="url(#', 'g');
   }
 
diff --git a/src/styles.ts b/src/styles.ts
index 54266ff9a..1b4105b99 100644
--- a/src/styles.ts
+++ b/src/styles.ts
@@ -13,7 +13,7 @@ import c4 from './diagrams/c4/styles';
 import { FlowChartStyleOptions } from './diagrams/flowchart/styles';
 import { log } from './logger';
 
-// TODO Q: Shouldn't registerDiagram be injecting data here?
+// TODO @knut: Inject from registerDiagram.
 const themes = {
   flowchart,
   'flowchart-v2': flowchart,

From 36be8114d08d4c7a58785424d6e1970854c1cd59 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 1 Sep 2022 19:16:15 +0530
Subject: [PATCH 46/60] Revert flowchart change

---
 src/diagram-api/detectType.ts | 7 ++++---
 src/styles.ts                 | 6 ------
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/diagram-api/detectType.ts b/src/diagram-api/detectType.ts
index 34c78404a..87b681767 100644
--- a/src/diagram-api/detectType.ts
+++ b/src/diagram-api/detectType.ts
@@ -13,7 +13,7 @@ const diagramMatchers: Record<string, RegExp> = {
   gantt: /^\s*gantt/,
   classDiagram: /^\s*classDiagram-v2/,
   stateDiagram: /^\s*stateDiagram-v2/,
-  'flowchart-v2': /^\s*flowchart/,
+  'flowchart-v2': /^\s*flowchart/, // Might need to add |graph to fix #3391
   info: /^\s*info/,
   pie: /^\s*pie/,
   er: /^\s*erDiagram/,
@@ -72,8 +72,9 @@ export const detectType = function (text: string, config?: MermaidConfig): strin
       return key;
     }
   }
-
-  throw new Error(`No diagram type detected for text: ${text}`);
+  // TODO: #3391
+  // throw new Error(`No diagram type detected for text: ${text}`);
+  return 'flowchart';
 };
 
 export const addDetector = (key: string, detector: DiagramDetector) => {
diff --git a/src/styles.ts b/src/styles.ts
index 1b4105b99..29ebb4fe4 100644
--- a/src/styles.ts
+++ b/src/styles.ts
@@ -33,12 +33,6 @@ const themes = {
   c4,
 };
 
-// TODO: Delete as it's not used
-// export const calcThemeVariables = (theme: string, userOverRides) => {
-//   log.info('userOverides', userOverRides);
-//   return theme.calcColors(userOverRides);
-// };
-
 const getStyles = (
   type: string,
   userStyles: string,

From 4fa0d366dbdad886e3f6c28abbdb30efc90db56e Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 1 Sep 2022 19:17:31 +0530
Subject: [PATCH 47/60] Revert flowchart change

---
 src/diagram-api/diagramAPI.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/diagram-api/diagramAPI.spec.ts b/src/diagram-api/diagramAPI.spec.ts
index 9216552e2..42c09099a 100644
--- a/src/diagram-api/diagramAPI.spec.ts
+++ b/src/diagram-api/diagramAPI.spec.ts
@@ -12,7 +12,7 @@ describe('DiagramAPI', () => {
 
   it('should handle diagram registrations', () => {
     expect(() => getDiagram('loki')).toThrow();
-    expect(() => detectType('loki diagram')).toThrow();
+    expect(() => detectType('loki diagram')).not.toThrow(); // TODO: #3391
     registerDiagram(
       'loki',
       {

From 2272eb66445da5e1740df11b409789b675366a33 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 1 Sep 2022 20:04:06 +0530
Subject: [PATCH 48/60] Fix repo URL

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index aeaa214fc..81018e4da 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/knsv/mermaid"
+    "url": "https://github.com/mermaid-js/mermaid"
   },
   "author": "Knut Sveidqvist",
   "license": "MIT",

From 1ced01c7f620f2cadeeae4196643cdb68106eafb Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 1 Sep 2022 20:21:13 +0530
Subject: [PATCH 49/60] Typo fix

---
 src/diagrams/info/infoRenderer.js |  3 ++-
 yarn.lock                         | 26 +++++++++++++++++++++++++-
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/diagrams/info/infoRenderer.js b/src/diagrams/info/infoRenderer.js
index cbe3c52f8..8976abb75 100644
--- a/src/diagrams/info/infoRenderer.js
+++ b/src/diagrams/info/infoRenderer.js
@@ -15,7 +15,7 @@ export const draw = (text, id, version, diagObj) => {
   try {
     // const parser = infoParser.parser;
     // parser.yy = db;
-    log.debug('Renering info diagram\n' + text);
+    log.debug('Rendering info diagram\n' + text);
 
     const securityLevel = getConfig().securityLevel;
     // Handle root and Document for when rendering in sanbox mode
@@ -49,6 +49,7 @@ export const draw = (text, id, version, diagObj) => {
     svg.attr('width', 400);
     // svg.attr('viewBox', '0 0 300 150');
   } catch (e) {
+    console.error(e);
     log.error('Error while rendering info diagram');
     log.error(e.message);
   }
diff --git a/yarn.lock b/yarn.lock
index 848049f5c..656032594 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8473,7 +8473,7 @@ make-dir@^3.0.0, make-dir@^3.0.2, make-dir@^3.1.0:
   dependencies:
     semver "^6.0.0"
 
-make-error@^1.1.1:
+make-error@1.x, make-error@^1.1.1:
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2"
   integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==
@@ -11541,6 +11541,30 @@ trough@^1.0.0:
   resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.5.tgz#b8b639cefad7d0bb2abd37d433ff8293efa5f406"
   integrity sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==
 
+ts-jest@^28.0.8:
+  version "28.0.8"
+  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-28.0.8.tgz#cd204b8e7a2f78da32cf6c95c9a6165c5b99cc73"
+  integrity sha512-5FaG0lXmRPzApix8oFG8RKjAz4ehtm8yMKOTy5HX3fY6W8kmvOrmcY0hKDElW52FJov+clhUbrKAqofnj4mXTg==
+  dependencies:
+    bs-logger "0.x"
+    fast-json-stable-stringify "2.x"
+    jest-util "^28.0.0"
+    json5 "^2.2.1"
+    lodash.memoize "4.x"
+    make-error "1.x"
+    semver "7.x"
+    yargs-parser "^21.0.1"
+
+ts-loader@^9.3.1:
+  version "9.3.1"
+  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-9.3.1.tgz#fe25cca56e3e71c1087fe48dc67f4df8c59b22d4"
+  integrity sha512-OkyShkcZTsTwyS3Kt7a4rsT/t2qvEVQuKCTg4LJmpj9fhFR7ukGdZwV6Qq3tRUkqcXtfGpPR7+hFKHCG/0d3Lw==
+  dependencies:
+    chalk "^4.1.0"
+    enhanced-resolve "^5.0.0"
+    micromatch "^4.0.0"
+    semver "^7.3.4"
+
 ts-node@^10.8.1:
   version "10.9.1"
   resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-10.9.1.tgz#e73de9102958af9e1f0b168a6ff320e25adcff4b"

From b3c0c57c6d4bb4f6700344bccdf771f593cd1559 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Fri, 2 Sep 2022 04:28:22 +0100
Subject: [PATCH 50/60] fix: fix passing a single Node to mermaid.init()

Passing a single Node to mermaid.init() results in an error, as it
calls `new NodeList()`, which causes `TypeError: Illegal constructor`.

See https://github.com/mermaid-js/mermaid/blob/5597cf45bf3c971fcd1fd35e303e418fe421c5c2/src/mermaid.ts#L73

If we instead use the `ArrayLike` interface, we can just use a simple
array, instead of a NodeList.

I've also added a basic test case, by mocking the `mermaidAPI.render()`
function so it isn't called, as the d3 functions don't work in Node.JS.
The mocks are a bit messy, since
 a) Jest doesn't fully support ESM yet, and
 b) mermaidAPI is frozen with `Object.freeze()`,
but the mermaidAPI mocks work as long as we keep them simple.

Fixes: c68ec54fdd980a6b4d1c1b58aec991badba16676
---
 src/__mocks__/mermaidAPI.ts | 47 +++++++++++++++++++++++++++++++++++++
 src/mermaid.spec.js         | 18 ++++++++++++++
 src/mermaid.ts              |  5 ++--
 3 files changed, 67 insertions(+), 3 deletions(-)
 create mode 100644 src/__mocks__/mermaidAPI.ts

diff --git a/src/__mocks__/mermaidAPI.ts b/src/__mocks__/mermaidAPI.ts
new file mode 100644
index 000000000..9531fdc07
--- /dev/null
+++ b/src/__mocks__/mermaidAPI.ts
@@ -0,0 +1,47 @@
+/**
+ * Mocks for `./mermaidAPI`.
+ * 
+ * We can't easily use `jest.spyOn(mermaidAPI, "function")` since the object
+ * is frozen with `Object.freeze()`.
+ */
+import * as configApi from '../config';
+
+import { addDiagrams } from '../diagram-api/diagram-orchestration';
+import Diagram from '../Diagram';
+
+// Normally, we could just do the following to get the original `parse()`
+// implementation, however, requireActual isn't currently supported in Jest
+// for ESM, see https://github.com/facebook/jest/issues/9430
+// and https://github.com/facebook/jest/pull/10976
+// const {parse} = jest.requireActual("./mermaidAPI");
+
+let hasLoadedDiagrams = false;
+function parse(text: string, parseError?: Function): boolean {
+  if (!hasLoadedDiagrams) {
+    addDiagrams();
+    hasLoadedDiagrams = true;
+  }
+  const diagram = new Diagram(text, parseError);
+  return diagram.parse(text, parseError);
+}
+
+// original version cannot be modified since it was frozen with `Object.freeze()`
+export const mermaidAPI = {
+  render: jest.fn(),
+  parse,
+  parseDirective: jest.fn(),
+  initialize: jest.fn(),
+  getConfig: configApi.getConfig,
+  setConfig: configApi.setConfig,
+  getSiteConfig: configApi.getSiteConfig,
+  updateSiteConfig: configApi.updateSiteConfig,
+  reset: () => {
+    configApi.reset();
+  },
+  globalReset: () => {
+    configApi.reset(configApi.defaultConfig);
+  },
+  defaultConfig: configApi.defaultConfig,
+}
+
+export default mermaidAPI;
diff --git a/src/mermaid.spec.js b/src/mermaid.spec.js
index 60b67ad23..c6014dfff 100644
--- a/src/mermaid.spec.js
+++ b/src/mermaid.spec.js
@@ -1,4 +1,5 @@
 import mermaid from './mermaid';
+import { mermaidAPI } from './mermaidAPI';
 import flowDb from './diagrams/flowchart/flowDb';
 import flowParser from './diagrams/flowchart/parser/flow';
 import flowRenderer from './diagrams/flowchart/flowRenderer';
@@ -6,6 +7,13 @@ import Diagram from './Diagram';
 
 const spyOn = jest.spyOn;
 
+// mocks the mermaidAPI.render function (see `./__mocks__/mermaidAPI`)
+jest.mock('./mermaidAPI');
+
+afterEach(() => {
+  jest.restoreAllMocks();
+});
+
 describe('when using mermaid and ', function () {
   describe('when detecting chart type ', function () {
     it('should not start rendering with mermaid.startOnLoad set to false', function () {
@@ -40,6 +48,16 @@ describe('when using mermaid and ', function () {
     });
   });
 
+  describe('when using #initThrowsErrors', function () {
+    it('should accept single node', async () => {
+      const node = document.createElement('div');
+      node.appendChild(document.createTextNode('graph TD;\na;'));
+
+      mermaid.initThrowsErrors(undefined, node);
+      expect(mermaidAPI.render).toHaveBeenCalled();
+    });
+  });
+
   describe('when calling addEdges ', function () {
     beforeEach(function () {
       flowParser.parser.yy = flowDb;
diff --git a/src/mermaid.ts b/src/mermaid.ts
index a46103f11..e82597152 100644
--- a/src/mermaid.ts
+++ b/src/mermaid.ts
@@ -64,14 +64,13 @@ const initThrowsErrors = function (
 
   // if last argument is a function this is the callback function
   log.debug(`${!callback ? 'No ' : ''}Callback function found`);
-  let nodesToProcess: NodeListOf<HTMLElement>;
+  let nodesToProcess: ArrayLike<HTMLElement>;
   if (typeof nodes === 'undefined') {
     nodesToProcess = document.querySelectorAll('.mermaid');
   } else if (typeof nodes === 'string') {
     nodesToProcess = document.querySelectorAll(nodes);
   } else if (nodes instanceof HTMLElement) {
-    nodesToProcess = new NodeList() as NodeListOf<HTMLElement>;
-    nodesToProcess[0] = nodes;
+    nodesToProcess = [nodes];
   } else if (nodes instanceof NodeList) {
     nodesToProcess = nodes;
   } else {

From 87f6d34b4f361c90f99160f436b13c06174c9165 Mon Sep 17 00:00:00 2001
From: Thomas Karner <thomas.7.karner@gmail.com>
Date: Fri, 2 Sep 2022 23:09:19 +0200
Subject: [PATCH 51/60] added mermerd to integrations documentation

---
 docs/integrations.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/integrations.md b/docs/integrations.md
index ff7c9b30a..0adef0bf3 100644
--- a/docs/integrations.md
+++ b/docs/integrations.md
@@ -31,6 +31,7 @@ They also serve as proof of concept, for the variety of things that can be built
   - [redmine-mermaid](https://github.com/styz/redmine_mermaid)
   - [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
 - [Jetsbrain IDE eg Pycharm](https://www.jetbrains.com/go/guide/tips/mermaid-js-support-in-markdown/)
+- [mermerd](https://github.com/KarnerTh/mermerd) 
 
 ## CRM/ERP/Similar
 

From 3b571fc9b32ea4057a5d8c780f53d12f1ae51ff8 Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Sat, 3 Sep 2022 20:33:50 +0200
Subject: [PATCH 52/60] Fix typo in documentation

---
 src/mermaidAPI.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/mermaidAPI.ts b/src/mermaidAPI.ts
index 303a78680..70e3b679b 100644
--- a/src/mermaidAPI.ts
+++ b/src/mermaidAPI.ts
@@ -8,7 +8,7 @@
  * The core of this api is the [**render**](Setup.md?id=render) function which, given a graph
  * definition as text, renders the graph/diagram and returns an svg element for the graph.
  *
- * It is is then up to the user of the API to make use of the svg, either insert it somewhere in the
+ * It is then up to the user of the API to make use of the svg, either insert it somewhere in the
  * page or do something completely different.
  *
  * In addition to the render function, a number of behavioral configuration options are available.

From b79eaae0020e15336edbac22d9006321e07d088d Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Sat, 3 Sep 2022 20:36:14 +0200
Subject: [PATCH 53/60] Fix typo

---
 src/mermaidAPI.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/mermaidAPI.ts b/src/mermaidAPI.ts
index 70e3b679b..f44f6743c 100644
--- a/src/mermaidAPI.ts
+++ b/src/mermaidAPI.ts
@@ -171,7 +171,7 @@ const render = function (
       .append('g');
   } else {
     // No container was provided
-    // If there is an existsing element with the id, we remove it
+    // If there is an existing element with the id, we remove it
     // this likely a previously rendered diagram
     const existingSvg = document.getElementById(id);
     if (existingSvg) {

From 27baa24c827448b08d1da96cd6ddb8a4f022c4f2 Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Sat, 3 Sep 2022 22:54:43 +0200
Subject: [PATCH 54/60] Build documentation

---
 docs/Setup.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/Setup.md b/docs/Setup.md
index b7ee5e833..bc02f194e 100644
--- a/docs/Setup.md
+++ b/docs/Setup.md
@@ -11,7 +11,7 @@ using the default integration provided by mermaid.js.
 The core of this api is the [**render**][2] function which, given a graph
 definition as text, renders the graph/diagram and returns an svg element for the graph.
 
-It is is then up to the user of the API to make use of the svg, either insert it somewhere in the
+It is then up to the user of the API to make use of the svg, either insert it somewhere in the
 page or do something completely different.
 
 In addition to the render function, a number of behavioral configuration options are available.

From 1d84cfe2e2abd15ac373855c2808e4cb466315de Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Sat, 3 Sep 2022 23:01:53 +0100
Subject: [PATCH 55/60] build: run `build:prod` on `yarn prepare`

Adds `yarn build:prod` to the `yarn prepare` script.

For most package managers (e.g. yarn v1 and NPM),
the `prepare` script is called automatically when installing
from a local location/git url. It's not called when installing
from NPM.

This is required because the source code doesn't contain
the `dist/mermaid.min.js` file, it has to be built first.

Fixes installing mermaid via `git`, e.g.:
`yarn add git+https://github.com/mermaid-js/mermaid.git`

Fixes: 1549eb20dfbf0698749ab50b2cb264e63d2015b5
---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 1bf1be7ab..431b5785a 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
     "test": "yarn lint && jest src/.*",
     "test:watch": "jest --watch src",
     "prepublishOnly": "yarn build && yarn test",
-    "prepare": "husky install",
+    "prepare": "concurrently \"husky install\" \"yarn build:prod\"",
     "pre-commit": "lint-staged"
   },
   "repository": {
@@ -132,4 +132,4 @@
     "**/*.css",
     "**/*.scss"
   ]
-}
\ No newline at end of file
+}

From 91478caf5b71241986ceff78fdc2edbf8df5b0d5 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 5 Sep 2022 00:48:36 +0530
Subject: [PATCH 56/60] fix #3407 Replace `div` with `pre` and format

---
 .eslintrc.json                                |  12 +-
 .lintstagedrc.json                            |   6 +-
 .prettierignore                               |   3 +-
 .prettierrc.json                              |   6 +-
 cypress/platform/class.html                   |  55 +--
 cypress/platform/click_security_loose.html    | 152 ++++---
 cypress/platform/click_security_other.html    |  64 +--
 cypress/platform/click_security_sandbox.html  | 148 ++++---
 cypress/platform/click_security_strict.html   |  70 +--
 cypress/platform/css1.html                    |  48 +--
 cypress/platform/current2.html                |  59 +--
 cypress/platform/flow.html                    |  27 +-
 cypress/platform/git-graph.html               |  37 +-
 cypress/platform/gitgraph.html                |  62 +--
 cypress/platform/gitgraph2.html               |  42 +-
 cypress/platform/huge.html                    |  33 +-
 cypress/platform/info.html                    |  11 +-
 cypress/platform/interaction.html             | 110 ++---
 cypress/platform/knsv.html                    | 133 +++---
 cypress/platform/knsv2.html                   |  47 +-
 cypress/platform/knsv3.html                   |  92 ++--
 cypress/platform/regression/issue-1874.html   |  19 +-
 cypress/platform/showcase_base.html           |  69 +--
 cypress/platform/showcase_base_dark.html      |  68 +--
 cypress/platform/showcase_dark.html           |  72 ++--
 cypress/platform/showcase_default.html        |  68 +--
 cypress/platform/showcase_forest.html         |  68 +--
 cypress/platform/showcase_neutral.html        |  69 +--
 cypress/platform/subgraph.html                |  52 +--
 cypress/platform/theme-directives.html        |  43 +-
 cypress/platform/user-journey.html            |  10 +-
 cypress/platform/vertices.html                |  52 +--
 cypress/platform/xss2.html                    |  23 +-
 cypress/platform/xss22.html                   |  24 +-
 cypress/platform/xss3.html                    |  16 +-
 demos/classchart.html                         |  65 ++-
 demos/dataflowchart.html                      |  70 +--
 demos/er.html                                 |  65 ++-
 demos/flowchart.html                          | 366 ++++++++--------
 demos/gantt.html                              |  51 ++-
 demos/index.html                              | 407 +++++++++---------
 demos/journey.html                            |  59 ++-
 demos/requirements.html                       |  66 ++-
 demos/sequence.html                           |  63 ++-
 demos/state.html                              |  67 ++-
 docs/classDiagram.md                          | 111 ++---
 .../flowchart.md                              |  94 ++--
 docs/flowchart.md                             |  90 ++--
 docs/gantt.md                                 | 146 +++----
 docs/index.html                               |  11 +-
 docs/n00b-gettingStarted.md                   |  77 ++--
 docs/n00b-overview.md                         |  17 +-
 docs/usage.md                                 | 176 ++++----
 package.json                                  |  11 +-
 yarn.lock                                     | 104 ++++-
 55 files changed, 2039 insertions(+), 1947 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 9c755a0e2..1b8869abb 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -5,7 +5,7 @@
     "jest/globals": true,
     "node": true
   },
-  "parser": "@babel/eslint-parser",
+  "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaFeatures": {
       "experimentalObjectRestSpread": true,
@@ -18,9 +18,9 @@
     "plugin:jsdoc/recommended",
     "plugin:json/recommended",
     "plugin:markdown/recommended",
-    "plugin:prettier/recommended"
+    "prettier"
   ],
-  "plugins": ["html", "jest", "jsdoc", "json", "prettier"],
+  "plugins": ["@typescript-eslint", "html", "jest", "jsdoc", "json"],
   "rules": {
     "no-prototype-builtins": "off",
     "no-unused-vars": "off",
@@ -41,12 +41,6 @@
         "no-undef": "off",
         "jsdoc/require-jsdoc": "off"
       }
-    },
-    {
-      "files": "./**/*.md/*.html",
-      "rules": {
-        "prettier/prettier": "off"
-      }
     }
   ]
 }
diff --git a/.lintstagedrc.json b/.lintstagedrc.json
index 555f78ddb..acba5c33e 100644
--- a/.lintstagedrc.json
+++ b/.lintstagedrc.json
@@ -1,5 +1,3 @@
 {
-  "*.{js,json,html,md}": [
-      "yarn lint:fix" 
-   ]
-}
\ No newline at end of file
+  "*.{ts,js,json,html,md}": ["eslint --fix", "prettier --write"]
+}
diff --git a/.prettierignore b/.prettierignore
index 71d07c514..cdc9d3f01 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1 +1,2 @@
-demos/*.html
\ No newline at end of file
+dist
+cypress/platform/xss3.html
\ No newline at end of file
diff --git a/.prettierrc.json b/.prettierrc.json
index 0835748d6..4f0588f9c 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -1,5 +1,7 @@
 {
   "endOfLine": "auto",
   "printWidth": 100,
-  "singleQuote": true
-}
\ No newline at end of file
+  "singleQuote": true,
+  "useTabs": false,
+  "tabWidth": 2
+}
diff --git a/cypress/platform/class.html b/cypress/platform/class.html
index 0c1fcebb3..85fae2a77 100644
--- a/cypress/platform/class.html
+++ b/cypress/platform/class.html
@@ -1,31 +1,37 @@
 <html>
   <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
     <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
         background: rgb(221, 208, 208);
         /*background:#333;*/
         font-family: 'Arial';
-        }
-      h1 { color: white;}
+      }
+      h1 {
+        color: white;
+      }
       .mermaid2 {
         display: none;
       }
-      .customCss > rect, .customCss{
-        fill:#FF0000 !important;
-        stroke:#FFFF00 !important;
-        stroke-width:4px !important;
-    }
+      .customCss > rect,
+      .customCss {
+        fill: #ff0000 !important;
+        stroke: #ffff00 !important;
+        stroke-width: 4px !important;
+      }
     </style>
   </head>
   <body>
     <h1>info below</h1>
-    <div class="mermaid" style="width: 100%; height: 20%;">
+    <pre class="mermaid" style="width: 100%; height: 20%">
       %%{init: {'theme': 'base',  'fontFamily': 'courier', 'themeVariables': {  'primaryColor': '#fff000'}}}%%
       classDiagram
        class BankAccount{
@@ -36,8 +42,8 @@
        }
        cssClass "BankAccount" customCss
 
-    </div>
-    <div class="mermaid" style="width: 100%; height: 20%;">
+    </pre>
+    <pre class="mermaid" style="width: 100%; height: 20%">
       %%{init: {'theme': 'base',  'fontFamily': 'courier', 'themeVariables': {  'primaryColor': '#fff000'}}}%%
       classDiagram-v2
        class BankAccount{
@@ -47,9 +53,8 @@
         +withdrawl(amount) int
        }
        cssClass "BankAccount" customCss
-
-    </div>
-      <div class="mermaid2" style="width: 100%; height: 20%;">
+    </pre>
+    <pre class="mermaid2" style="width: 100%; height: 20%">
         %%{init: {'theme': 'base',  'fontFamily': 'courier', 'themeVariables': {  'primaryColor': '#fff000'}}}%%
         classDiagram
          class BankAccount{
@@ -71,8 +76,8 @@
             }
             callback Class01 "callback" "A Tooltip"
 
-      </div>
-      <div class="mermaid2" style="width: 100%; height: 20%;">
+    </pre>
+    <pre class="mermaid2" style="width: 100%; height: 20%">
       flowchart TB
       a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
       a_a --> c --> d_d --> c_c
@@ -80,9 +85,9 @@
       class a_a apa;
       click a_a "https://www.aftonbladet.se" "apa"
 
-      </div>
+    </pre>
 
-      <div class="mermaid2" style="width: 100%; height: 20%;">
+    <pre class="mermaid2" style="width: 100%; height: 20%">
         classDiagram-v2
 
         classA -- classB : Inheritance
@@ -97,7 +102,7 @@
         classK ..> classL : Dependency
         classM ..|> classN : Realization
         classO .. classP : Link(Dashed)
-       classA : +attr1
+        classA : +attr1
         classA : attr2
         classA : method1()
         &lt;&lt;interface&gt;&gt; classB
@@ -111,8 +116,8 @@
         class Shape
         callback Shape "callbackFunction" "This is a tooltip for a callback"
 
-      </div>
-      <script src="./mermaid.js"></script>
+    </pre>
+    <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
@@ -134,8 +139,8 @@
         securityLevel: 'loose',
       });
       function callback() {
-  alert('It worked');
-}
+        alert('It worked');
+      }
     </script>
   </body>
 </html>
diff --git a/cypress/platform/click_security_loose.html b/cypress/platform/click_security_loose.html
index 83a6b12c8..6c77e90af 100644
--- a/cypress/platform/click_security_loose.html
+++ b/cypress/platform/click_security_loose.html
@@ -1,61 +1,60 @@
 <!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>
-    .mermaid2 {
-      display: none;
-    }
-  </style>
-</head>
-<body>
-  <div style="display: flex">
-  <div id="FirstLine" class="mermaid">
+  <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>
+      .mermaid2 {
+        display: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div style="display: flex">
+      <pre id="FirstLine" class="mermaid">
     graph TB
       Function-->URL
       click Function clickByFlow "Add a div"
       click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
-</div>
-<div id="FirstLine" class="mermaid">
+      </pre>
+      <pre id="FirstLine" class="mermaid">
   graph TB
     1Function--->2URL
     click 1Function clickByFlow "Add a div"
     click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
-</div>
-  <div id="FirstLine" class="mermaid">
+      </pre>
+      <pre id="FirstLine" class="mermaid">
     flowchart TB
       Function-->URL
       click Function clickByFlow "Add a div"
       click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
-</div>
-<div id="FirstLine" class="mermaid">
+      </pre>
+      <pre id="FirstLine" class="mermaid">
   flowchart TB
     1Function--->2URL
     click 1Function clickByFlow "Add a div"
     click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
-</div>
+      </pre>
 
-<div id="FirstLine" class="mermaid">
+      <pre id="FirstLine" class="mermaid">
   classDiagram
     class ShapeLink
     link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
     class ShapeCallback
     callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
-</div>
-<div id="FirstLine" class="mermaid">
+      </pre>
+      <pre id="FirstLine" class="mermaid">
   classDiagram-v2
     class ShapeLink2
     link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
     class ShapeCallback2
     callback ShapeCallback2 "clickByClass" "This is a tooltip for a callback"
-</div>
+      </pre>
+    </div>
 
-</div>
-
-<div class="mermaid">
+    <pre class="mermaid">
     gantt
     dateFormat  YYYY-MM-DD
     axisFormat  %d/%m
@@ -94,77 +93,76 @@
     Describe gantt syntax               :after doc1, 3d
     Add gantt diagram to demo page      : 20h
     Add another diagram to demo page    : 48h
-      </div>
-  <div style="display: flex">
-    <div id="FirstLine" class="mermaid">
+    </pre>
+    <div style="display: flex">
+      <pre id="FirstLine" class="mermaid">
       graph TB
         FunctionArg-->URL
         click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
         click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
-    </div>
-    <div id="FirstLine" class="mermaid">
+      </pre>
+      <pre id="FirstLine" class="mermaid">
       flowchart TB
         FunctionArg-->URL
         click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
         click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
-    </div>
-    
-    <div id="FirstLine" class="mermaid">
+      </pre>
+
+      <pre id="FirstLine" class="mermaid">
       classDiagram
       class ShapeLink
       link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
       class ShapeCallback
       click ShapeCallback call clickByClass(123) "This is a tooltip for a callback"
-    </div>
+      </pre>
 
-    <div id="FirstLine" class="mermaid">
+      <pre id="FirstLine" class="mermaid">
       classDiagram-v2
         class ShapeLink2
         link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
         class ShapeCallback2
         click ShapeCallback2 call clickByClass(123) "This is a tooltip for a callback"
+      </pre>
     </div>
-    
-  </div>
-    
-  <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';
 
-    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;
+    <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';
 
-    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';
-    if (arg1) div.innerText += ' ' + arg1;
-    if (arg2) div.innerText += ' ' + arg2;
-    if (arg3) div.innerText += ' ' + arg3;
+        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;
 
-    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 : '');
+        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';
+        if (arg1) div.innerText += ' ' + arg1;
+        if (arg2) div.innerText += ' ' + arg2;
+        if (arg3) div.innerText += ' ' + arg3;
 
-    document.getElementsByTagName('body')[0].appendChild(div);
-  }
-  mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
-  </script>
-</body>
+        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 : '');
+
+        document.getElementsByTagName('body')[0].appendChild(div);
+      }
+      mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
+    </script>
+  </body>
 </html>
diff --git a/cypress/platform/click_security_other.html b/cypress/platform/click_security_other.html
index b5b674510..20bfd5293 100644
--- a/cypress/platform/click_security_other.html
+++ b/cypress/platform/click_security_other.html
@@ -1,26 +1,26 @@
 <!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=">
-</head>
-<body>
-  <div id="FirstLine" class="mermaid">
+  <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=" />
+  </head>
+  <body>
+    <pre id="FirstLine" class="mermaid">
     graph TB
       Function-->URL
       click Function clickByFlow "Add a div"
       click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
-</div>
-<div id="FirstLine" class="mermaid">
+    </pre>
+    <pre id="FirstLine" class="mermaid">
   graph TB
     1Function-->2URL
     click 1Function clickByFlow "Add a div"
     click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
-</div>
+    </pre>
 
-<div class="mermaid">
+    <pre class="mermaid">
     gantt
     dateFormat  YYYY-MM-DD
     axisFormat  %d/%m
@@ -57,27 +57,27 @@
     Describe gantt syntax               :after doc1, 3d
     Add gantt diagram to demo page      : 20h
     Add another diagram to demo page    : 48h
-      </div>
+    </pre>
 
-  <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';
+    <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';
 
-    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';
+        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';
 
-    document.getElementsByTagName('body')[0].appendChild(div);
-  }
-  mermaid.initialize({ startOnLoad: true, securityLevel: 'strct', logLevel: 1 });
-  </script>
-</body>
+        document.getElementsByTagName('body')[0].appendChild(div);
+      }
+      mermaid.initialize({ startOnLoad: true, securityLevel: 'strct', logLevel: 1 });
+    </script>
+  </body>
 </html>
diff --git a/cypress/platform/click_security_sandbox.html b/cypress/platform/click_security_sandbox.html
index 275fea640..94229500c 100644
--- a/cypress/platform/click_security_sandbox.html
+++ b/cypress/platform/click_security_sandbox.html
@@ -1,61 +1,60 @@
 <!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>
-    .mermaid2 {
-      display: none;
-    }
-  </style>
-</head>
-<body>
-  <div style="display: flex">
-  <div id="FirstLine" class="mermaid">
+  <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>
+      .mermaid2 {
+        display: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div style="display: flex">
+      <pre id="FirstLine" class="mermaid">
     graph TB
       Function-->URL
       click Function clickByFlow "Add a div"
       click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
-</div>
-<div id="FirstLine" class="mermaid">
+      </pre>
+      <pre id="FirstLine" class="mermaid">
   graph TB
     1Function--->2URL
     click 1Function clickByFlow "Add a div"
     click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
-</div>
-  <div id="FirstLine" class="mermaid">
+      </pre>
+      <pre id="FirstLine" class="mermaid">
     flowchart TB
       Function-->URL
       click Function clickByFlow "Add a div"
       click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
-</div>
-<div id="FirstLine" class="mermaid">
+      </pre>
+      <pre id="FirstLine" class="mermaid">
   flowchart TB
     1Function--->2URL
     click 1Function clickByFlow "Add a div"
     click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
-</div>
+      </pre>
 
-<div id="FirstLine" class="mermaid">
+      <pre id="FirstLine" class="mermaid">
   classDiagram
     class ShapeLink
     link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
     class ShapeCallback
     callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
-</div>
-<div id="FirstLine" class="mermaid">
+      </pre>
+      <pre id="FirstLine" class="mermaid">
   classDiagram-v2
     class ShapeLink2
     link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
     class ShapeCallback2
     callback ShapeCallback2 "clickByClass" "This is a tooltip for a callback"
-</div>
+      </pre>
+    </div>
 
-</div>
-
-<div class="mermaid">
+    <pre class="mermaid">
     gantt
     dateFormat  YYYY-MM-DD
     axisFormat  %d/%m
@@ -94,77 +93,76 @@
     Describe gantt syntax               :after doc1, 3d
     Add gantt diagram to demo page      : 20h
     Add another diagram to demo page    : 48h
-      </div>
-  <div style="display: flex">
-    <div id="FirstLine" class="mermaid">
+    </pre>
+    <div style="display: flex">
+      <pre id="FirstLine" class="mermaid">
       graph TB
         FunctionArg-->URL
         click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
         click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
-    </div>
-    <div id="FirstLine" class="mermaid">
+      </pre>
+      <pre id="FirstLine" class="mermaid">
       flowchart TB
         FunctionArg-->URL
         click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
         click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
-    </div>
+      </pre>
 
-    <div id="FirstLine" class="mermaid">
+      <pre id="FirstLine" class="mermaid">
       classDiagram
       class ShapeLink
       link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
       class ShapeCallback
       click ShapeCallback call clickByClass(123) "This is a tooltip for a callback"
-    </div>
+      </pre>
 
-    <div id="FirstLine" class="mermaid">
+      <pre id="FirstLine" class="mermaid">
       classDiagram-v2
         class ShapeLink2
         link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
         class ShapeCallback2
         click ShapeCallback2 call clickByClass(123) "This is a tooltip for a callback"
+      </pre>
     </div>
 
-  </div>
+    <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';
 
-  <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';
+        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;
 
-    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;
+        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';
+        if (arg1) div.innerText += ' ' + arg1;
+        if (arg2) div.innerText += ' ' + arg2;
+        if (arg3) div.innerText += ' ' + arg3;
 
-    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';
-    if (arg1) div.innerText += ' ' + arg1;
-    if (arg2) div.innerText += ' ' + arg2;
-    if (arg3) div.innerText += ' ' + arg3;
+        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 : '');
 
-    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 : '');
-
-    document.getElementsByTagName('body')[0].appendChild(div);
-  }
-  mermaid.initialize({ startOnLoad: true, securityLevel: 'sandbox', logLevel: 1 });
-  </script>
-</body>
+        document.getElementsByTagName('body')[0].appendChild(div);
+      }
+      mermaid.initialize({ startOnLoad: true, securityLevel: 'sandbox', logLevel: 1 });
+    </script>
+  </body>
 </html>
diff --git a/cypress/platform/click_security_strict.html b/cypress/platform/click_security_strict.html
index 91f05d3ad..00c6d9c6a 100644
--- a/cypress/platform/click_security_strict.html
+++ b/cypress/platform/click_security_strict.html
@@ -1,26 +1,26 @@
 <!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=">
-</head>
-<body>
-  <div id="FirstLine" class="mermaid">
+  <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=" />
+  </head>
+  <body>
+    <pre id="FirstLine" class="mermaid">
     graph TB
       Function-->URL
       click Function clickByFlow "Add a div"
       click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
-</div>
-<div id="FirstLine" class="mermaid">
+    </pre>
+    <pre id="FirstLine" class="mermaid">
   graph TB
     1Function-->2URL
     click 1Function clickByFlow "Add a div"
     click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
-</div>
+    </pre>
 
-<div class="mermaid">
+    <pre class="mermaid">
     gantt
     dateFormat  YYYY-MM-DD
     axisFormat  %d/%m
@@ -59,30 +59,30 @@
     Describe gantt syntax               :after doc1, 3d
     Add gantt diagram to demo page      : 20h
     Add another diagram to demo page    : 48h
-      </div>
+    </pre>
 
-  <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';
+    <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';
 
-    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';
-    if (arg1) div.innerText += ' ' + arg1;
-    if (arg2) div.innerText += ' ' + arg2;
-    if (arg3) div.innerText += ' ' + arg3;
+        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';
+        if (arg1) div.innerText += ' ' + arg1;
+        if (arg2) div.innerText += ' ' + arg2;
+        if (arg3) div.innerText += ' ' + arg3;
 
-    document.getElementsByTagName('body')[0].appendChild(div);
-  }
-  mermaid.initialize({ startOnLoad: true, securityLevel: 'strict', logLevel: 1 });
-  </script>
-</body>
+        document.getElementsByTagName('body')[0].appendChild(div);
+      }
+      mermaid.initialize({ startOnLoad: true, securityLevel: 'strict', logLevel: 1 });
+    </script>
+  </body>
 </html>
diff --git a/cypress/platform/css1.html b/cypress/platform/css1.html
index f02892123..08c518f3e 100644
--- a/cypress/platform/css1.html
+++ b/cypress/platform/css1.html
@@ -1,23 +1,23 @@
 <!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">
+  <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>
+    <pre class="mermaid2">
   %%{init: { 'themeCSS': '} * { background: lightblue }' } }%%
   flowchart TD
     a --> b
-  </div>
-  <div class="mermaid">
+    </pre>
+    <pre class="mermaid">
    %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
     flowchart LR
     subgraph A
@@ -27,13 +27,13 @@
         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>
+    </pre>
+    <script src="./mermaid.js"></script>
+    <script>
+      function showFullFirstSquad(elemName) {
+        console.log('show ' + elemName);
+      }
+      mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 0 });
+    </script>
+  </body>
 </html>
diff --git a/cypress/platform/current2.html b/cypress/platform/current2.html
index 6f9c2184a..e9278c949 100644
--- a/cypress/platform/current2.html
+++ b/cypress/platform/current2.html
@@ -1,19 +1,24 @@
 <html>
   <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
         /* background: rgb(221, 208, 208); */
         /* background:#333; */
         font-family: 'Arial';
-        }
-      h1 { color: grey;}
+      }
+      h1 {
+        color: grey;
+      }
       .mermaid2 {
         display: none;
       }
@@ -22,7 +27,7 @@
   <body>
     <h1>info below</h1>
     <div class="flex">
-      <div class="mermaid2" style="width: 50%; height: 20%;">
+      <pre class="mermaid2" style="width: 50%; height: 20%">
 flowchart BT
     subgraph two
     b1
@@ -32,13 +37,13 @@ flowchart BT
     end
     c1 --apa apa apa--> b1
     two --> c2
-      </div>
-      <div class="mermaid2" style="width: 50%; height: 200px;">
+      </pre>
+      <pre class="mermaid2" style="width: 50%; height: 200px">
 sequenceDiagram
    Alice->>Bob:Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
    Bob->>Alice: I'm short though
-      </div>
-      <div class="mermaid2" style="width: 50%; height: 200px;">
+      </pre>
+      <pre class="mermaid2" style="width: 50%; height: 200px">
         %%{init: {'securityLevel': 'loose'}}%%
       graph TD
         A[Christmas] -->|Get money| B(Go shopping)
@@ -51,8 +56,8 @@ sequenceDiagram
         classDef someclass fill:#f96;
         class A someclass;
         class C someclass;
-      </div>
-      <div class="mermaid2" style="width: 50%; height: 200px;">
+      </pre>
+      <pre class="mermaid2" style="width: 50%; height: 200px">
 
       flowchart BT
       subgraph a
@@ -62,8 +67,8 @@ sequenceDiagram
       c --> d
       b1 --> d
       a --asd123 --> d
-      </div>
-      <div class="mermaid2" style="width: 50%; height: 20%;">
+      </pre>
+      <pre class="mermaid2" style="width: 50%; height: 20%">
 stateDiagram-v2
   state A {
     B1 --> B2: ok
@@ -72,9 +77,9 @@ stateDiagram-v2
   C --> D
   B1 --> D
   A --> D: asd123
-      </div>
-      </div>
-      <div class="mermaid2" style="width: 50%; height: 20%;">
+      </pre>
+    </div>
+    <pre class="mermaid2" style="width: 50%; height: 20%">
         %%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
 flowchart LR
   a -->b
@@ -84,9 +89,8 @@ flowchart LR
   subgraph B
   b
   end
-
-      </div>
-      <div class="mermaid" style="width: 50%; height: 20%;">
+    </pre>
+    <pre class="mermaid" style="width: 50%; height: 20%">
 flowchart TB
     subgraph A
     b-->B
@@ -95,16 +99,15 @@ flowchart TB
     subgraph B
       c
     end
-
-      </div>
-      <div class="mermaid2" style="width: 50%; height: 20%;">
+    </pre>
+    <pre class="mermaid2" style="width: 50%; height: 20%">
 sequenceDiagram
 Alice->Bob: Hello Bob, how are you?
 Note over Alice,Bob: Looks
 Note over Bob,Alice: Looks back
-      </div>
+    </pre>
 
-  <script src="./mermaid.js"></script>
+    <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
@@ -124,8 +127,8 @@ Note over Bob,Alice: Looks back
         securityLevel: 'strict',
       });
       function callback() {
-  alert('It worked');
-}
+        alert('It worked');
+      }
     </script>
   </body>
 </html>
diff --git a/cypress/platform/flow.html b/cypress/platform/flow.html
index b3e805b4f..ed70f80d0 100644
--- a/cypress/platform/flow.html
+++ b/cypress/platform/flow.html
@@ -1,34 +1,34 @@
 <html>
   <head>
-    <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
-      rel="stylesheet"
-    />
-    <style>body {
-      font-family: 'trebuchet ms', verdana, arial;
-    }</style>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <style>
+      body {
+        font-family: 'trebuchet ms', verdana, arial;
+      }
+    </style>
   </head>
   <body>
-    <div class="mermaid">
+    <pre class="mermaid">
       graph TB
       subgraph One
         a1-->a2-->a3
       end
-    </div>
-    <div class="mermaid">
+    </pre>
+    <pre class="mermaid">
       graph TB
         a_a --> b_b:::apa --> c_c:::apa
         classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
         class a_a apa;
-    </div>
-    <div class="mermaid">
+    </pre>
+    <pre class="mermaid">
       graph TB
         a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
         a_a --> c --> d_d --> c_c
         classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
         class a_a apa;
         click a_a "http://www.aftonbladet.se" "apa"
-    </div>
+    </pre>
+
     <script src="./mermaid.js"></script>
     <script>
       mermaid.initialize({
@@ -41,6 +41,5 @@
         // sequenceDiagram: { actorMargin: 300 } // deprecated
       });
     </script>
-    </script>
   </body>
 </html>
diff --git a/cypress/platform/git-graph.html b/cypress/platform/git-graph.html
index 946b91442..da6025f4b 100644
--- a/cypress/platform/git-graph.html
+++ b/cypress/platform/git-graph.html
@@ -1,31 +1,37 @@
 <html>
   <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
     <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
         background: rgb(221, 208, 208);
         /*background:#333;*/
         font-family: 'Arial';
-        }
-      h1 { color: white;}
+      }
+      h1 {
+        color: white;
+      }
       .mermaid2 {
         display: none;
       }
-      .customCss > rect, .customCss{
-        fill:#FF0000 !important;
-        stroke:#FFFF00 !important;
-        stroke-width:4px !important;
-    }
+      .customCss > rect,
+      .customCss {
+        fill: #ff0000 !important;
+        stroke: #ffff00 !important;
+        stroke-width: 4px !important;
+      }
     </style>
   </head>
   <body>
     <h1>info below</h1>
-    <div class="mermaid" style="width: 100%; height: 20%;">
+    <pre class="mermaid" style="width: 100%; height: 20%">
 
       gitGraph
        class BankAccount{
@@ -35,10 +41,9 @@
         +withdrawl(amount) int
        }
        cssClass "BankAccount" customCss
+    </pre>
 
-    </div>
-
-      <script src="./mermaid.js"></script>
+    <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
@@ -60,8 +65,8 @@
         securityLevel: 'loose',
       });
       function callback() {
-  alert('It worked');
-}
+        alert('It worked');
+      }
     </script>
   </body>
 </html>
diff --git a/cypress/platform/gitgraph.html b/cypress/platform/gitgraph.html
index 176e0f5ea..da81427f8 100644
--- a/cypress/platform/gitgraph.html
+++ b/cypress/platform/gitgraph.html
@@ -1,32 +1,36 @@
 <html>
   <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
     <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
         /* background: rgb(221, 208, 208); */
         /* background:#111; */
         /* background:#333; */
         font-family: 'Arial';
-        }
+      }
       /* h1 { color: white;} */
       .mermaid2 {
         display: none;
       }
-      .customCss > rect, .customCss{
-        fill:#FF0000 !important;
-        stroke:#FFFF00 !important;
-        stroke-width:4px !important;
-    }
+      .customCss > rect,
+      .customCss {
+        fill: #ff0000 !important;
+        stroke: #ffff00 !important;
+        stroke-width: 4px !important;
+      }
     </style>
   </head>
   <body>
     <h1>info below</h1>
-    <div class="mermaid" style="width: 100%; height: 20%;">
+    <pre class="mermaid" style="width: 100%; height: 20%">
     %%{init: { "logLevel": "debug", "theme": "default" , "gitGraph" : {"showBranches":"false"},"themeVariables": {
               "gitBranchLabel0": "#ff0000",
               "gitBranchLabel1": "#00ff00",
@@ -50,9 +54,8 @@
        commit
        branch featureA
        commit
-
-    </div>
-    <div class="mermaid2" style="width: 100%; height: 20%;">
+    </pre>
+    <pre class="mermaid2" style="width: 100%; height: 20%">
       gitGraph
       commit type:HIGHLIGHT
       branch hotfix
@@ -94,17 +97,16 @@
       merge main
       checkout develop
       merge release
-
-   </div>
-    <div class="mermaid2" style="width: 100%; height: 20%;">
+    </pre>
+    <pre class="mermaid2" style="width: 100%; height: 20%">
       gitGraph:
       commit
       commit
       branch newbranch
       commit
       merge main
-    </div>
-      <script src="./mermaid.js"></script>
+    </pre>
+    <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
@@ -112,17 +114,17 @@
       mermaid.initialize({
         //theme: 'dark',
         themeVariables: {
-    commitLabelColor: '#9400D3',
-    commitLabelBackground: '#FFFFFF',
-    //       darkMode: true,
-    //       background: '#222',
-    //       //   textColor: 'white',
-    //       //   primaryTextColor: '#f4f4f4',
+          commitLabelColor: '#9400D3',
+          commitLabelBackground: '#FFFFFF',
+          //       darkMode: true,
+          //       background: '#222',
+          //       //   textColor: 'white',
+          //       //   primaryTextColor: '#f4f4f4',
 
-    //       //   // nodeBkg: '#ff0000',
-    //       //   // mainBkg: '#0000ff',
-    // //   // tertiaryColor: '#ffffcc',
-  },
+          //       //   // nodeBkg: '#ff0000',
+          //       //   // mainBkg: '#0000ff',
+          // //   // tertiaryColor: '#ffffcc',
+        },
         // theme: 'forest',
         // theme: 'neutral',
         // theme: 'dark',
@@ -141,8 +143,8 @@
         securityLevel: 'loose',
       });
       function callback() {
-  alert('It worked');
-}
+        alert('It worked');
+      }
     </script>
   </body>
 </html>
diff --git a/cypress/platform/gitgraph2.html b/cypress/platform/gitgraph2.html
index 493efd43a..630819265 100644
--- a/cypress/platform/gitgraph2.html
+++ b/cypress/platform/gitgraph2.html
@@ -1,32 +1,36 @@
 <html>
   <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
     <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
         /* background: rgb(221, 208, 208); */
         /* background:#111; */
         /* background:#333; */
         font-family: 'Arial';
-        }
+      }
       /* h1 { color: white;} */
       .mermaid2 {
         display: none;
       }
-      .customCss > rect, .customCss{
-        fill:#FF0000 !important;
-        stroke:#FFFF00 !important;
-        stroke-width:4px !important;
-    }
+      .customCss > rect,
+      .customCss {
+        fill: #ff0000 !important;
+        stroke: #ffff00 !important;
+        stroke-width: 4px !important;
+      }
     </style>
   </head>
   <body>
     <h1>info below</h1>
-    <div class="mermaid2" style="width: 100%; height: 20%;">
+    <pre class="mermaid2" style="width: 100%; height: 20%">
        gitGraph:
        commit "Ashish"
        branch newbranch
@@ -40,9 +44,8 @@
        commit
        branch b2
        commit
-
-    </div>
-    <div class="mermaid" style="width: 100%; height: 20%;">
+    </pre>
+    <pre class="mermaid" style="width: 100%; height: 20%">
       %%{init: {  "gitGraph": { "showBranches": true, "mainBranchName": "APA" }}}%%
       gitGraph
       commit
@@ -86,17 +89,16 @@
       merge APA
       checkout develop
       merge release
-
-   </div>
-    <div class="mermaid2" style="width: 100%; height: 20%;">
+    </pre>
+    <pre class="mermaid2" style="width: 100%; height: 20%">
       gitGraph:
       commit
       commit
       branch newbranch
       commit
       merge main
-    </div>
-      <script src="./mermaid.js"></script>
+    </pre>
+    <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
@@ -132,8 +134,8 @@
         securityLevel: 'loose',
       });
       function callback() {
-  alert('It worked');
-}
+        alert('It worked');
+      }
     </script>
   </body>
 </html>
diff --git a/cypress/platform/huge.html b/cypress/platform/huge.html
index c8e80615b..70a48cd9e 100644
--- a/cypress/platform/huge.html
+++ b/cypress/platform/huge.html
@@ -1,28 +1,31 @@
 <html>
   <head>
-    <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
-      rel="stylesheet"
-    />
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
     <style>
-      body {background: white}
-      h1 { color: white;}
-      .arrowheadPath {fill: red;}
-
-      .edgePath .path {stroke: red;}
-
+      body {
+        background: white;
+      }
+      h1 {
+        color: white;
+      }
+      .arrowheadPath {
+        fill: red;
+      }
 
+      .edgePath .path {
+        stroke: red;
+      }
     </style>
   </head>
   <body>
     <h1>info below</h1>
-    <div style="display: flex;width: 100%; height: 100%">
-      <div class="mermaid" style="width: 100%; height: 100%">
+    <div style="display: flex; width: 100%; height: 100%">
+      <pre class="mermaid" style="width: 100%; height: 100%">
         graph LR
         A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;A-->B;B-->A;
-      </div>
-</div>
-  <script src="./mermaid.js"></script>
+      </pre>
+    </div>
+    <script src="./mermaid.js"></script>
     <script>
       mermaid.initialize({
         theme: 'dark',
diff --git a/cypress/platform/info.html b/cypress/platform/info.html
index f74f6bdea..db50813c0 100644
--- a/cypress/platform/info.html
+++ b/cypress/platform/info.html
@@ -1,14 +1,12 @@
 <html>
   <head>
-    <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
-      rel="stylesheet"
-    />
-
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
   </head>
   <body>
     <h1>info below</h1>
-    <div class="mermaid">info</div>
+    <pre class="mermaid">
+info
+    </pre>
     <script src="./mermaid.js"></script>
     <script>
       mermaid.initialize({
@@ -21,6 +19,5 @@
         // sequenceDiagram: { actorMargin: 300 } // deprecated
       });
     </script>
-    </script>
   </body>
 </html>
diff --git a/cypress/platform/interaction.html b/cypress/platform/interaction.html
index bf3d8ad3e..59c900433 100644
--- a/cypress/platform/interaction.html
+++ b/cypress/platform/interaction.html
@@ -1,52 +1,52 @@
 <!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>
-    .mermaid2 {
-      display: none;
-    }
-  </style>
-</head>
-<body>
-  <div style="display: flex">
-  <div id="FirstLine" class="mermaid">
+  <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>
+      .mermaid2 {
+        display: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div style="display: flex">
+      <pre id="FirstLine" class="mermaid">
     graph TB
       Function-->URL
       click Function clickByFlow "Add a div"
       click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
-</div>
-<div id="FirstLine" class="mermaid2">
+      </pre>
+      <pre id="FirstLine" class="mermaid2">
   graph TB
     1Function-->2URL
     click 1Function clickByFlow "Add a div"
     click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
-</div>
+      </pre>
 
-<div id="FirstLine" class="mermaid2">
+      <pre id="FirstLine" class="mermaid2">
   classDiagram
     class Test
     class ShapeLink
     link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
     class ShapeCallback
     callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
-</div>
-<div id="FirstLine" class="mermaid">
+      </pre>
+      <pre id="FirstLine" class="mermaid">
   classDiagram-v2
     class ShapeCallback
     callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
-</div>
-<div id="FirstLine" class="mermaid">
+      </pre>
+      <pre id="FirstLine" class="mermaid">
   classDiagram-v2
     class ShapeLink
     link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
-</div>
-</div>
+      </pre>
+    </div>
 
-<div class="mermaid2">
+    <pre class="mermaid2">
     gantt
     dateFormat  YYYY-MM-DD
     axisFormat  %d/%m
@@ -85,38 +85,38 @@
     Describe gantt syntax               :after doc1, 3d
     Add gantt diagram to demo page      : 20h
     Add another diagram to demo page    : 48h
-      </div>
+    </pre>
 
-  <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';
+    <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';
 
-    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';
-    if (arg1) div.innerText += ' ' + arg1;
-    if (arg2) div.innerText += ' ' + arg2;
-    if (arg3) div.innerText += ' ' + arg3;
+        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';
+        if (arg1) div.innerText += ' ' + arg1;
+        if (arg2) div.innerText += ' ' + arg2;
+        if (arg3) div.innerText += ' ' + arg3;
 
-    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';
+        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';
 
-    document.getElementsByTagName('body')[0].appendChild(div);
-  }
-  mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
-  </script>
-</body>
+        document.getElementsByTagName('body')[0].appendChild(div);
+      }
+      mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
+    </script>
+  </body>
 </html>
diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html
index f568c9a5d..c98ce70c8 100644
--- a/cypress/platform/knsv.html
+++ b/cypress/platform/knsv.html
@@ -1,12 +1,15 @@
 <html>
   <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
         /* background: rgb(221, 208, 208); */
@@ -17,27 +20,25 @@
         display: flex;
         flex-direction: column;
         margin-left: 20px;
-        }
-      h1 { color: grey;}
-      .mermaid2,.mermaid3 {
+      }
+      h1 {
+        color: grey;
+      }
+      .mermaid2,
+      .mermaid3 {
         display: none;
       }
       .mermaid {
-
       }
       .mermaid svg {
         border: 1px solid purple;
         /* font-size: 18px !important; */
-        fontFamily: 'courier'
+        fontfamily: 'courier';
       }
     </style>
   </head>
   <body>
-
-
-
-
-<div class="mermaid2" style="width: 50%;">
+    <pre class="mermaid2" style="width: 50%">
 flowchart LR
   classDef aPID stroke:#4e4403,fill:#fdde29,color:#4e4403,rx:5px,ry:5px;
   classDef crm stroke:#333333,fill:#DCDCDC,color:#333333,rx:5px,ry:5px;
@@ -55,8 +56,8 @@ flowchart LR
   click O2 function "Sorry the newline html tags are not being processed correctly<br/> So all of this appears on the <br/> same line."
   O0 -- has type -->O2["Bug"]
   click O0 function "Lots of great info about Joe<br>Lots of great info about Joe<br>burt<br>fred";
-</div>
-<div class="mermaid2" style="width: 50%;">
+    </pre>
+    <pre class="mermaid2" style="width: 50%">
 flowchart TD
     subgraph test
     direction TB
@@ -69,23 +70,22 @@ flowchart TD
       G --> H
     end
     end
-
-</div>
-<div class="mermaid" style="width: 50%;">
+    </pre>
+    <pre class="mermaid" style="width: 50%">
 flowchart TD
 id
-</div>
-<div class="mermaid2" style="width: 50%;">
+    </pre>
+    <pre class="mermaid2" style="width: 50%">
 flowchart LR
         a["<strong>Haiya</strong>"]===>b
-</div>
-<div class="mermaid2" style="width: 50%;">
+    </pre>
+    <pre class="mermaid2" style="width: 50%">
 flowchart TD
     A --> B
     A --> C
     B --> C
-</div>
-<div class="mermaid2" style="width: 50%;">
+    </pre>
+    <pre class="mermaid2" style="width: 50%">
 flowchart TD
       A([stadium shape test])
       A -->|Get money| B([Go shopping])
@@ -98,8 +98,8 @@ flowchart TD
       classDef someclass fill:#f96;
       class A someclass;
       class C someclass;
-</div>
-<div class="mermaid2" style="width: 50%;">
+    </pre>
+    <pre class="mermaid2" style="width: 50%">
    sequenceDiagram
       title: My Sequence Diagram Title
       accTitle: My Acc Sequence Diagram
@@ -108,15 +108,15 @@ flowchart TD
       Alice->>John: Hello John, how are you?
       John-->>Alice: Great!
       Alice-)John: See you later!
-</div>
-      <div class="mermaid2" style="width: 50%;">
+    </pre>
+    <pre class="mermaid2" style="width: 50%">
 graph TD
     A -->|000| B
     B -->|111| C
 
     linkStyle 1 stroke:#ff3,stroke-width:4px,color:red;
-        </div>
-      <div class="mermaid2" style="width: 100%;">
+    </pre>
+    <pre class="mermaid2" style="width: 100%">
   journey
       accTitle: My User Journey Diagram
       accDescr: My User Journey Diagram Description
@@ -129,11 +129,11 @@ graph TD
       section Go home
         Go downstairs: 5: Me
         Sit down: 5: Me
-      </div>
-      <div class="mermaid2" style="width: 100%;">
+    </pre>
+    <pre class="mermaid2" style="width: 100%">
         info
-      </div>
-      <div class="mermaid2" style="width: 100%;">
+    </pre>
+    <pre class="mermaid2" style="width: 100%">
 requirementDiagram
       accTitle: My req Diagram
       accDescr: My req Diagram Description
@@ -173,9 +173,8 @@ requirementDiagram
     test_req - traces -> test_req2
     test_req - contains -> test_req3
     test_req <- copies - test_entity2
-
-      </div>
-      <div class="mermaid2" style="width: 100%;">
+    </pre>
+    <pre class="mermaid2" style="width: 100%">
 gantt
     dateFormat  YYYY-MM-DD
     title       Adding GANTT diagram functionality to mermaid
@@ -206,24 +205,24 @@ gantt
     Describe gantt syntax               :after doc1, 3d
     Add gantt diagram to demo page      :20h
     Add another diagram to demo page    :48h
-      </div>
-      <div class="mermaid2" style="width: 100%;">
+    </pre>
+    <pre class="mermaid2" style="width: 100%">
 stateDiagram
   state Active {
     Idle
   }
   Inactive --> Idle: ACT
   Active --> Active: LOG
-      </div>
-      <div class="mermaid2" style="width: 100%;">
+    </pre>
+    <pre class="mermaid2" style="width: 100%">
       flowchart TB
         accTitle: My flowchart
         accDescr: My flowchart Description
         subgraph One
           a1-->a2-->a3
         end
-      </div>
-      <div class="mermaid2" style="width: 100%;">
+    </pre>
+    <pre class="mermaid2" style="width: 100%">
         sequenceDiagram
           A ->> B: 1
           rect rgb(204, 0, 102)
@@ -233,8 +232,9 @@ stateDiagram
               end
             end
           end
-          B ->> A: Return</div>
-      <div class="mermaid2" style="width: 100%;">
+          B ->> A: Return
+    </pre>
+    <pre class="mermaid2" style="width: 100%">
 classDiagram
 accTitle: My class diagram
 accDescr: My class diagram Description
@@ -251,15 +251,15 @@ class Class10 {
   int id
   size()
 }
-      </div>
-      <div class="mermaid2" style="width: 100%;">
+    </pre>
+    <pre class="mermaid2" style="width: 100%">
 %%{init: {'config': {'wrap': true }}}%%
         sequenceDiagram
         participant A as Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
         A->>Bob: Hola
         Bob-->A: Pasten !
-      </div>
-      <div class="mermaid2" style="width: 100%;">
+    </pre>
+    <pre class="mermaid2" style="width: 100%">
       gitGraph
        commit id: "ZERO"
        branch develop
@@ -279,15 +279,16 @@ class Class10 {
        checkout develop
        commit id:"C"
        merge featureA
-       </div>
-       <div class="mermaid2" style="width: 100%;">
+    </pre>
+    <pre class="mermaid2" style="width: 100%">
 flowchart TD
       A[Christmas] -->|Get money| B(Go shopping)
       B --> C{Let me think}
       C -->|One| D[Laptop]
       C -->|Two| E[iPhone]
       C -->|Three| F[fa:fa-car Car]
-      </div>     <div class="mermaid2" style="width: 100%;">
+    </pre>
+    <pre class="mermaid2" style="width: 100%">
         classDiagram
           Animal "1" <|-- Duck
           Animal <|-- Fish
@@ -309,8 +310,8 @@ flowchart TD
             +bool is_wild
             +run()
           }
-    </div>
-          <div class="mermaid2" style="width: 100%;">
+    </pre>
+    <pre class="mermaid2" style="width: 100%">
         erDiagram
     CAR ||--o{ NAMED-DRIVER : allows
     CAR {
@@ -324,9 +325,9 @@ flowchart TD
         string lastName
         int age
     }
-        </div>
+    </pre>
 
-  <script src="./mermaid.js"></script>
+    <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
@@ -345,17 +346,17 @@ flowchart TD
         },
       });
       function callback() {
-  alert('It worked');
-}
+        alert('It worked');
+      }
 
-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';
+      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';
 
-  document.getElementsByTagName('body')[0].appendChild(div);
-}
+        document.getElementsByTagName('body')[0].appendChild(div);
+      }
     </script>
   </body>
 </html>
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 361c3bdc4..94b99602a 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -1,20 +1,25 @@
 <html>
   <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
         /* background: rgb(221, 208, 208); */
         /* background:#333; */
         font-family: 'Arial';
         /* font-size: 18px !important; */
-        }
-      h1 { color: grey;}
+      }
+      h1 {
+        color: grey;
+      }
       .mermaid2 {
         display: none;
       }
@@ -23,9 +28,9 @@
       }
       .malware {
         position: fixed;
-        bottom:0;
-        left:0;
-        right:0;
+        bottom: 0;
+        left: 0;
+        right: 0;
         height: 150px;
         background: red;
         color: black;
@@ -41,12 +46,13 @@
   <body>
     <div>Security check</div>
     <div class="flex">
-      <div id="diagram" class="mermaid">
+      <pre id="diagram" class="mermaid">
 sequenceDiagram
   Nothing:Valid;
-      </div>
+      </pre>
       <div id="res" class=""></div>
-  <script src="./mermaid.js"></script>
+    </div>
+    <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
@@ -56,16 +62,15 @@ sequenceDiagram
         // themeVariables: {relationLabelColor: 'red'}
       });
       function callback() {
-  alert('It worked');
-}
+        alert('It worked');
+      }
 
-// document.querySelector('#diagram').innerHTML = diagram;
-try {
-  mermaid.initThrowsErrors(undefined, '#diagram');
-} catch (err) {
-  console.log('Caught error:', err);
-}
+      // document.querySelector('#diagram').innerHTML = diagram;
+      try {
+        mermaid.initThrowsErrors(undefined, '#diagram');
+      } catch (err) {
+        console.log('Caught error:', err);
+      }
     </script>
   </body>
 </html>
-
diff --git a/cypress/platform/knsv3.html b/cypress/platform/knsv3.html
index f2c264de8..0c1afadb7 100644
--- a/cypress/platform/knsv3.html
+++ b/cypress/platform/knsv3.html
@@ -1,20 +1,25 @@
 <html>
   <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
         /* background: rgb(221, 208, 208); */
         /* background:#333; */
         font-family: 'Courier New', Courier, monospace;
         /* font-size: 18px !important; */
-        }
-      h1 { color: grey;}
+      }
+      h1 {
+        color: grey;
+      }
       .mermaid2 {
         display: none;
       }
@@ -28,27 +33,27 @@
   <body>
     <div>info below</div>
     <div class="">
-      <div class="mermaid2" style="width: 100%; height: 400px;">
+      <pre class="mermaid2" style="width: 100%; height: 400px">
 flowchart TB;subgraph "number as labels";1;end;
-      </div>
-      <div class="mermaid2" style="width: 100%; height: 400px;">
+      </pre>
+      <pre class="mermaid2" style="width: 100%; height: 400px">
 flowchart TB;a[APA];
-      </div>
-      <div class="mermaid2" style="margin-left:100px;">
+      </pre>
+      <pre class="mermaid2" style="margin-left: 100px">
 graph TD
       work --> sleep
       sleep --> work
       eat --> sleep
       work --> eat
-  </div>
-      <div class="mermaid2" style="margin-left:100px;">
+      </pre>
+      <pre class="mermaid2" style="margin-left: 100px">
 flowchart TD
       work --> sleep
       sleep --> work
       eat --> sleep
       work --> eat
-  </div>
-      <div class="mermaid2" style="">
+      </pre>
+      <pre class="mermaid2" style="">
  graph TB
       A
       B
@@ -76,8 +81,8 @@ flowchart TD
 
       style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
       style bar fill:#999,stroke-width:2px,stroke:#0F0,color:blue
-    </div>
-    <div class="mermaid2" style="">
+      </pre>
+      <pre class="mermaid2" style="">
       graph TB
 %%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
       A
@@ -106,56 +111,56 @@ flowchart TD
 
       style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
       style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
-    </div>
-      <div class="mermaid2" style="">
+      </pre>
+      <pre class="mermaid2" style="">
       graph TD
         A[Christmas] ==> D
         A[Christmas] -->|Get money| B(Go shopping)
         A[Christmas] ==> C
-    </div>
-    <div class="mermaid2" style="">
+      </pre>
+      <pre class="mermaid2" style="">
       graph TD
 %%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
         A[Christmas] ==> D
         A[Christmas] -->|Get money| B(Go shopping)
         A[Christmas] ==> C
-    </div>
-      <div class="mermaid2" style="">
+      </pre>
+      <pre class="mermaid2" style="">
       flowchart TD
         A[Christmas] ==> D
         A[Christmas] -->|Get money| B(Go shopping)
         A[Christmas] ==> C
-    </div>
-    <div class="mermaid2" style="">
+      </pre>
+      <pre class="mermaid2" style="">
       flowchart TD
 %%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
         A[Christmas] ==> D
         A[Christmas] -->|Get money| B(Go shopping)
         A[Christmas] ==> C
-    </div>
-      <div class="mermaid2" style="">
+      </pre>
+      <pre class="mermaid2" style="">
 flowchart LR
         a["<strong>Haiya</strong>"]---->b
-</div>
-      <div class="mermaid" style="">
+      </pre>
+      <pre class="mermaid" style="">
 flowchart LR
 %%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
         a["<strong>Haiya</strong>"]---->b
-</div>
-    <div class="mermaid2" style="">
+      </pre>
+      <pre class="mermaid2" style="">
       flowchart TD
         A[Christmas] ==> D
         A[Christmas] -->|Get money| B(Go shopping)
         A[Christmas] ==> C
-    </div>
-    <div class="mermaid2" style="">
+      </pre>
+      <pre class="mermaid2" style="">
       flowchart TD
 %%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
         A[Christmas] ==> D
         A[Christmas] -->|Get money| B(Go shopping)
         A[Christmas] ==> C
-    </div>
-    <div class="mermaid2" style="">
+      </pre>
+      <pre class="mermaid2" style="">
       %%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
 classDiagram-v2
       Class01 <|-- AveryLongClass : Cool
@@ -182,8 +187,8 @@ classDiagram-v2
         int id
         test()
       }
-      </div>
-    <div class="mermaid2" style="">
+      </pre>
+      <pre class="mermaid2" style="">
 classDiagram-v2
       Class01 <|-- AveryLongClass : Cool
       &lt;&lt;interface&gt;&gt; Class01
@@ -209,8 +214,8 @@ classDiagram-v2
         int id
         test()
       }
-      </div>
-    <div class="mermaid" style="">
+      </pre>
+      <pre class="mermaid" style="">
 flowchart BT
    subgraph S1
     sub1 -->sub2
@@ -220,8 +225,9 @@ flowchart BT
    end
    S1 --> S2
    sub1 --> sub4
-      </div>
-  <script src="./mermaid.js"></script>
+      </pre>
+    </div>
+    <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
@@ -244,8 +250,8 @@ flowchart BT
         // themeVariables: {relationLabelColor: 'red'}
       });
       function callback() {
-  alert('It worked');
-}
+        alert('It worked');
+      }
     </script>
   </body>
 </html>
diff --git a/cypress/platform/regression/issue-1874.html b/cypress/platform/regression/issue-1874.html
index a877df4f7..1edd5c1e6 100644
--- a/cypress/platform/regression/issue-1874.html
+++ b/cypress/platform/regression/issue-1874.html
@@ -1,30 +1,29 @@
 <html>
   <head>
     <script src="http://localhost:9000/mermaid.js"></script>
-  <script>
+    <script>
       mermaid.initialize({
         theme: 'base',
         themeVariables: {},
         startOnLoad: true,
       });
-  </script>
-
+    </script>
   </head>
   <body>
-  <h1>Example</h1>
-  <div class="mermaid">
+    <h1>Example</h1>
+    <pre class="mermaid">
 %%{init:{"theme":"base", "sequence": {"mirrorActors":false},"themeVariables": {"actorBkg":"red"}}}%%
 sequenceDiagram
     Bert->>+Ernie: Start looking for the cookie!
     Ernie-->>-Bert: Found it!
     Note left of Ernie: Cookies are good
-  </div>
-  <div class="mermaid">
+    </pre>
+    <pre class="mermaid">
 %%{init:{"theme":"base", "themeVariables": {}}}%%
 sequenceDiagram
     Bert->>+Ernie: Start looking for the cookie!
     Ernie-->>-Bert: Found it!
     Note left of Ernie: Cookies are good
-  </div>
-</body>
-</html>
\ No newline at end of file
+    </pre>
+  </body>
+</html>
diff --git a/cypress/platform/showcase_base.html b/cypress/platform/showcase_base.html
index 64ceb30ee..227d79cf7 100644
--- a/cypress/platform/showcase_base.html
+++ b/cypress/platform/showcase_base.html
@@ -1,12 +1,15 @@
 <html>
   <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
         /* background: rgb(221, 208, 208); */
@@ -16,8 +19,10 @@
         width: 100%;
         margin: 0;
         padding: 0;
-        }
-      h1 { color: grey;}
+      }
+      h1 {
+        color: grey;
+      }
       .mermaid2 {
         display: none;
       }
@@ -39,7 +44,7 @@
   <body>
     <h1>Showcases of diagrams</h1>
     <div class="flex flex-wrap">
-      <div class="mermaid width height">
+      <pre class="mermaid width height">
 %%{init2: {'securityLevel': 'loose', 'theme':'base'}}%%
         graph TD
           A[Christmas] -->|Get money| B(Go shopping)
@@ -55,8 +60,8 @@
             F
             G
           end
-      </div>
-      <div class="mermaid width height">
+      </pre>
+      <pre class="mermaid width height">
 %%{init2: {'securityLevel': 'loose', 'theme':'base'}}%%
         flowchart TD
           A[Christmas] -->|Get money| B(Go shopping)
@@ -72,8 +77,8 @@
             F
             G
           end
-      </div>
-      <div class="mermaid width height" >
+      </pre>
+      <pre class="mermaid width height">
 %%{init2: {'securityLevel': 'loose', 'theme':'base'}}%%
 
         sequenceDiagram
@@ -91,8 +96,8 @@
               loop Every minute
                 John-->Alice: Great!
             end
-      </div>
-      <div class="mermaid width height" >
+      </pre>
+      <pre class="mermaid width height">
 %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
 
 classDiagram
@@ -116,8 +121,8 @@ classDiagram
 		+bool is_wild
 		+run()
 	}
-      </div>
-      <div class="mermaid width height">
+      </pre>
+      <pre class="mermaid width height">
 gantt
        dateFormat                :YYYY-MM-DD
        title                     Adding GANTT diagram functionality to mermaid
@@ -145,8 +150,8 @@ gantt
        Describe gantt syntax               :after doc1, 3d
        Add gantt diagram to demo page      :20h
        Add another diagram to demo page    :48h
-      </div>
-      <div class="mermaid width height2">
+      </pre>
+      <pre class="mermaid width height2">
 %%{init2: {'securityLevel': 'loose', 'theme':'base'}}%%
       stateDiagram
         [*] --> Active
@@ -173,9 +178,8 @@ gantt
         note right of SomethingElse : This is the note to the right.
 
         SomethingElse --> [*]
-
-      </div>
-      <div class="mermaid width height2">
+      </pre>
+      <pre class="mermaid width height2">
 %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
 stateDiagram-v2
         [*] --> Active
@@ -202,8 +206,8 @@ stateDiagram-v2
         note right of SomethingElse2 : This is the note to the right.
 
         SomethingElse2 --> [*]
-      </div>
-      <div class="mermaid width height2">
+      </pre>
+      <pre class="mermaid width height2">
       erDiagram
         CUSTOMER }|..|{ DELIVERY-ADDRESS : has
         CUSTOMER ||--o{ ORDER : places
@@ -213,8 +217,8 @@ stateDiagram-v2
         ORDER ||--|{ ORDER-ITEM : includes
         PRODUCT-CATEGORY ||--|{ PRODUCT : contains
         PRODUCT ||--o{ ORDER-ITEM : "ordered in"
-      </div>
-      <div class="mermaid width height">
+      </pre>
+      <pre class="mermaid width height">
 journey
             title My working day
             section Go to work
@@ -224,8 +228,8 @@ journey
             section Go home
               Go downstairs: 5: Me
               Sit down: 5: Me
-      </div>
-<div class="mermaid width height">
+      </pre>
+      <pre class="mermaid width height">
 requirementDiagram
 
     requirement test_req {
@@ -263,8 +267,8 @@ requirementDiagram
     test_req - traces -> test_req2
     test_req - contains -> test_req3
     test_req <- copies - test_entity2
-      </div>
-    <div class="mermaid" style="width: 100%; height: 20%;">
+      </pre>
+      <pre class="mermaid" style="width: 100%; height: 20%">
       gitGraph:
       commit
       branch hotfix
@@ -307,8 +311,9 @@ requirementDiagram
       merge main
       checkout develop
       merge release
-   </div>
-  <script src="./mermaid.js"></script>
+      </pre>
+    </div>
+    <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
@@ -328,8 +333,8 @@ requirementDiagram
         securityLevel: 'strict',
       });
       function callback() {
-  alert('It worked');
-}
+        alert('It worked');
+      }
     </script>
   </body>
 </html>
diff --git a/cypress/platform/showcase_base_dark.html b/cypress/platform/showcase_base_dark.html
index 356c9f6a8..21da65911 100644
--- a/cypress/platform/showcase_base_dark.html
+++ b/cypress/platform/showcase_base_dark.html
@@ -1,12 +1,15 @@
 <html>
   <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
         /* background: rgb(221, 208, 208); */
@@ -17,8 +20,10 @@
         width: 100%;
         margin: 0;
         padding: 0;
-        }
-      h1 { color: grey;}
+      }
+      h1 {
+        color: grey;
+      }
       .mermaid2 {
         display: none;
       }
@@ -40,7 +45,7 @@
   <body>
     <h1>Showcases of diagrams</h1>
     <div class="flex flex-wrap">
-      <div class="mermaid width height">
+      <pre class="mermaid width height">
         graph TD
           A[Christmas] -->|Get money| B(Go shopping)
           B --> C{Let me think}
@@ -55,8 +60,8 @@
             F
             G
           end
-      </div>
-      <div class="mermaid width height">
+      </pre>
+      <pre class="mermaid width height">
 %%{init2: {'securityLevel': 'loose', 'theme':'base'}}%%
         flowchart TD
           A[Christmas] -->|Get money| B(Go shopping)
@@ -72,8 +77,8 @@
             F
             G
           end
-      </div>
-      <div class="mermaid width height" >
+      </pre>
+      <pre class="mermaid width height">
         sequenceDiagram
           autonumber
           par Action 1
@@ -89,8 +94,8 @@
               loop Every minute
                 John-->Alice: Great!
             end
-      </div>
-      <div class="mermaid width height" >
+      </pre>
+      <pre class="mermaid width height">
 classDiagram
 	Animal "1" <|-- Duck
 	Animal <|-- Fish
@@ -112,8 +117,8 @@ classDiagram
 		+bool is_wild
 		+run()
 	}
-      </div>
-      <div class="mermaid width height">
+      </pre>
+      <pre class="mermaid width height">
 gantt
        dateFormat                :YYYY-MM-DD
        title                     Adding GANTT diagram functionality to mermaid
@@ -141,8 +146,8 @@ gantt
        Describe gantt syntax               :after doc1, 3d
        Add gantt diagram to demo page      :20h
        Add another diagram to demo page    :48h
-      </div>
-      <div class="mermaid width height2">
+      </pre>
+      <pre class="mermaid width height2">
       stateDiagram
         [*] --> Active
 
@@ -168,9 +173,8 @@ gantt
         note right of SomethingElse : This is the note to the right.
 
         SomethingElse --> [*]
-
-      </div>
-      <div class="mermaid width height2">
+      </pre>
+      <pre class="mermaid width height2">
 stateDiagram-v2
         [*] --> Active
 
@@ -196,8 +200,8 @@ stateDiagram-v2
         note right of SomethingElse2 : This is the note to the right.
 
         SomethingElse2 --> [*]
-      </div>
-      <div class="mermaid width height2">
+      </pre>
+      <pre class="mermaid width height2">
       erDiagram
         CUSTOMER }|..|{ DELIVERY-ADDRESS : has
         CUSTOMER ||--o{ ORDER : places
@@ -207,8 +211,8 @@ stateDiagram-v2
         ORDER ||--|{ ORDER-ITEM : includes
         PRODUCT-CATEGORY ||--|{ PRODUCT : contains
         PRODUCT ||--o{ ORDER-ITEM : "ordered in"
-      </div>
-      <div class="mermaid width height">
+      </pre>
+      <pre class="mermaid width height">
 journey
             title My working day
             section Go to work
@@ -218,8 +222,8 @@ journey
             section Go home
               Go downstairs: 5: Me
               Sit down: 5: Me
-      </div>
-      <div class="mermaid width height">
+      </pre>
+      <pre class="mermaid width height">
 requirementDiagram
 
     requirement test_req {
@@ -257,8 +261,8 @@ requirementDiagram
     test_req - traces -> test_req2
     test_req - contains -> test_req3
     test_req <- copies - test_entity2
-      </div>
-    <div class="mermaid" class="width height">
+      </pre>
+      <pre class="mermaid" class="width height">
 gitGraph
       commit
       branch hotfix
@@ -301,7 +305,9 @@ gitGraph
       merge main
       checkout develop
       merge release
-   </div>
+   
+      </pre>
+    </div>
     <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
@@ -331,8 +337,8 @@ gitGraph
         // securityLevel: 'strict'
       });
       function callback() {
-  alert('It worked');
-}
+        alert('It worked');
+      }
     </script>
   </body>
 </html>
diff --git a/cypress/platform/showcase_dark.html b/cypress/platform/showcase_dark.html
index fd22d8b7e..f018963cc 100644
--- a/cypress/platform/showcase_dark.html
+++ b/cypress/platform/showcase_dark.html
@@ -1,23 +1,28 @@
 <html>
   <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
         /* background: rgb(221, 208, 208); */
-        background:#333;
+        background: #333;
         font-family: 'Arial';
         height: 100%;
         width: 100%;
         margin: 0;
         padding: 0;
-        }
-      h1 { color: grey;}
+      }
+      h1 {
+        color: grey;
+      }
       .mermaid2 {
         display: none;
       }
@@ -39,7 +44,7 @@
   <body>
     <h1>Showcases of diagrams</h1>
     <div class="flex flex-wrap">
-      <div class="mermaid width height">
+      <pre class="mermaid width height">
         %%{init: {'theme': 'base', 'themeVariables':{'primaryColor': '#ff0000'}}%%
         graph TD
           A[Christmas] -->|Get money| B(Go shopping)
@@ -55,8 +60,8 @@
             F
             G
           end
-      </div>
-      <div class="mermaid width height">
+      </pre>
+      <pre class="mermaid width height">
         flowchart TD
           A[Christmas] -->|Get money| B(Go shopping)
           B --> C{Let me think}
@@ -71,8 +76,8 @@
             F
             G
           end
-      </div>
-      <div class="mermaid width height" >
+      </pre>
+      <pre class="mermaid width height">
         sequenceDiagram
           autonumber
           par Action 1
@@ -88,8 +93,9 @@
               loop Every minute
                 John-->Alice: Great!
             end
-      </div>
-            <div class="mermaid width height" >
+      </pre>
+      <pre class="mermaid width height">
+
 %%{init: {'theme':'dark'}}%%
 
 classDiagram
@@ -113,8 +119,9 @@ classDiagram
 		+bool is_wild
 		+run()
 	}
-      </div>
-      <div class="mermaid width height">
+  
+      </pre>
+      <pre class="mermaid width height">
 gantt
        dateFormat                :YYYY-MM-DD
        title                     Adding GANTT diagram functionality to mermaid
@@ -142,8 +149,8 @@ gantt
        Describe gantt syntax               :after doc1, 3d
        Add gantt diagram to demo page      :20h
        Add another diagram to demo page    :48h
-      </div>
-      <div class="mermaid width height2">
+      </pre>
+      <pre class="mermaid width height2">
       stateDiagram
         [*] --> Active
 
@@ -168,8 +175,8 @@ gantt
         Active --> SomethingElse
         SomethingElse --> [*]
         note right of SomethingElse : This is the note to the right.
-      </div>
-      <div class="mermaid width height2">
+      </pre>
+      <pre class="mermaid width height2">
       stateDiagram-v2
         [*] --> Active
 
@@ -194,8 +201,8 @@ gantt
         Active --> SomethingElse2
         SomethingElse2 --> [*]
         note right of SomethingElse2 : This is the note to the right.
-      </div>
-      <div class="mermaid width height2">
+      </pre>
+      <pre class="mermaid width height2">
       erDiagram
         CUSTOMER }|..|{ DELIVERY-ADDRESS : has
         CUSTOMER ||--o{ ORDER : places
@@ -205,8 +212,8 @@ gantt
         ORDER ||--|{ ORDER-ITEM : includes
         PRODUCT-CATEGORY ||--|{ PRODUCT : contains
         PRODUCT ||--o{ ORDER-ITEM : "ordered in"
-      </div>
-      <div class="mermaid width height">
+      </pre>
+      <pre class="mermaid width height">
       journey
             title My working day
             section Go to work
@@ -216,8 +223,8 @@ gantt
             section Go home
               Go downstairs: 5: Me
               Sit down: 5: Me
-      </div>
-<div class="mermaid width height">
+      </pre>
+      <pre class="mermaid width height">
 requirementDiagram
 
     requirement test_req {
@@ -255,8 +262,8 @@ requirementDiagram
     test_req - traces -> test_req2
     test_req - contains -> test_req3
     test_req <- copies - test_entity2
-      </div>
-    <div class="mermaid" class="width height">
+      </pre>
+      <pre class="mermaid" class="width height">
 gitGraph
       commit
       branch hotfix
@@ -299,8 +306,9 @@ gitGraph
       merge main
       checkout develop
       merge release
-   </div>
-  <script src="./mermaid.js"></script>
+      </pre>
+    </div>
+    <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
@@ -319,8 +327,8 @@ gitGraph
         securityLevel: 'strict',
       });
       function callback() {
-  alert('It worked');
-}
+        alert('It worked');
+      }
     </script>
   </body>
 </html>
diff --git a/cypress/platform/showcase_default.html b/cypress/platform/showcase_default.html
index dbbb1d94a..d61690f22 100644
--- a/cypress/platform/showcase_default.html
+++ b/cypress/platform/showcase_default.html
@@ -1,12 +1,15 @@
 <html>
   <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
         /* background: rgb(221, 208, 208); */
@@ -16,8 +19,10 @@
         width: 100%;
         margin: 0;
         padding: 0;
-        }
-      h1 { color: grey;}
+      }
+      h1 {
+        color: grey;
+      }
       .mermaid2 {
         display: none;
       }
@@ -39,7 +44,7 @@
   <body>
     <h1>Showcases of diagrams</h1>
     <div class="flex flex-wrap">
-      <div class="mermaid width height">
+      <pre class="mermaid width height">
         graph TD
           A[Christmas] -->|Get money| B(Go shopping)
           B --> C{Let me think}
@@ -54,8 +59,8 @@
             F
             G
           end
-      </div>
-      <div class="mermaid width height">
+      </pre>
+      <pre class="mermaid width height">
         flowchart TD
           A[Christmas] -->|Get money| B(Go shopping)
           B --> C{Let me think}
@@ -70,8 +75,8 @@
             F
             G
           end
-      </div>
-      <div class="mermaid width height" >
+      </pre>
+      <pre class="mermaid width height">
         sequenceDiagram
           autonumber
           par Action 1
@@ -87,8 +92,8 @@
               loop Every minute
                 John-->Alice: Great!
             end
-      </div>
-      <div class="mermaid width height" >
+      </pre>
+      <pre class="mermaid width height">
 classDiagram
 	Animal "1" <|-- Duck
 	Animal <|-- Fish
@@ -110,8 +115,8 @@ classDiagram
 		+bool is_wild
 		+run()
 	}
-      </div>
-      <div class="mermaid width height">
+      </pre>
+      <pre class="mermaid width height">
 gantt
        dateFormat                :YYYY-MM-DD
        title                     Adding GANTT diagram functionality to mermaid
@@ -139,8 +144,8 @@ gantt
        Describe gantt syntax               :after doc1, 3d
        Add gantt diagram to demo page      :20h
        Add another diagram to demo page    :48h
-      </div>
-      <div class="mermaid width height2">
+      </pre>
+      <pre class="mermaid width height2">
       stateDiagram
         [*] --> Active
 
@@ -164,8 +169,8 @@ gantt
 
         Active --> SomethingElse
         note right of SomethingElse : This is the note to the right.
-      </div>
-      <div class="mermaid width height2">
+      </pre>
+      <pre class="mermaid width height2">
       stateDiagram-v2
         [*] --> Active
 
@@ -189,8 +194,8 @@ gantt
 
         Active --> SomethingElse2
         note right of SomethingElse2 : This is the note to the right.
-      </div>
-      <div class="mermaid width height2">
+      </pre>
+      <pre class="mermaid width height2">
       erDiagram
         CUSTOMER }|..|{ DELIVERY-ADDRESS : has
         CUSTOMER ||--o{ ORDER : places
@@ -200,8 +205,8 @@ gantt
         ORDER ||--|{ ORDER-ITEM : includes
         PRODUCT-CATEGORY ||--|{ PRODUCT : contains
         PRODUCT ||--o{ ORDER-ITEM : "ordered in"
-      </div>
-      <div class="mermaid width height">
+      </pre>
+      <pre class="mermaid width height">
       journey
             title My working day
             section Go to work
@@ -211,8 +216,8 @@ gantt
             section Go home
               Go downstairs: 5: Me
               Sit down: 5: Me
-      </div>
-<div class="mermaid width height">
+      </pre>
+      <pre class="mermaid width height">
 requirementDiagram
 
     requirement test_req {
@@ -250,8 +255,8 @@ requirementDiagram
     test_req - traces -> test_req2
     test_req - contains -> test_req3
     test_req <- copies - test_entity2
-      </div>
-    <div class="mermaid" style="width: 100%; height: 20%;">
+      </pre>
+      <pre class="mermaid" style="width: 100%; height: 20%">
       gitGraph
       commit
       branch hotfix
@@ -294,8 +299,9 @@ requirementDiagram
       merge main
       checkout develop
       merge release
-   </div>
-     <script src="./mermaid.js"></script>
+      </pre>
+    </div>
+    <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
@@ -314,8 +320,8 @@ requirementDiagram
         securityLevel: 'strict',
       });
       function callback() {
-  alert('It worked');
-}
+        alert('It worked');
+      }
     </script>
   </body>
 </html>
diff --git a/cypress/platform/showcase_forest.html b/cypress/platform/showcase_forest.html
index f5bd1e83d..ea762977b 100644
--- a/cypress/platform/showcase_forest.html
+++ b/cypress/platform/showcase_forest.html
@@ -1,12 +1,15 @@
 <html>
   <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
         /* background: rgb(221, 208, 208); */
@@ -16,8 +19,10 @@
         width: 100%;
         margin: 0;
         padding: 0;
-        }
-      h1 { color: grey;}
+      }
+      h1 {
+        color: grey;
+      }
       .mermaid2 {
         display: none;
       }
@@ -39,7 +44,7 @@
   <body>
     <h1>Showcases of diagrams</h1>
     <div class="flex flex-wrap">
-      <div class="mermaid width height">
+      <pre class="mermaid width height">
          %%{init: {'theme': 'forest'}}%%
         graph TD
           A[Christmas] -->|Get money| B(Go shopping)
@@ -55,8 +60,8 @@
             F
             G
           end
-      </div>
-      <div class="mermaid width height">
+      </pre>
+      <pre class="mermaid width height">
         flowchart TD
           A[Christmas] -->|Get money| B(Go shopping)
           B --> C{Let me think}
@@ -71,8 +76,8 @@
             F
             G
           end
-      </div>
-      <div class="mermaid width height" >
+      </pre>
+      <pre class="mermaid width height">
         sequenceDiagram
           autonumber
           par Action 1
@@ -88,8 +93,8 @@
               loop Every minute
                 John-->Alice: Great!
             end
-      </div>
-      <div class="mermaid width height" >
+      </pre>
+      <pre class="mermaid width height">
 %%{init: {'theme':'forest'}}%%
 
 classDiagram
@@ -113,8 +118,8 @@ classDiagram
 		+bool is_wild
 		+run()
 	}
-      </div>
-      <div class="mermaid width height">
+      </pre>
+      <pre class="mermaid width height">
 gantt
        dateFormat                :YYYY-MM-DD
        title                     Adding GANTT diagram functionality to mermaid
@@ -142,8 +147,8 @@ gantt
        Describe gantt syntax               :after doc1, 3d
        Add gantt diagram to demo page      :20h
        Add another diagram to demo page    :48h
-      </div>
-      <div class="mermaid width height2">
+      </pre>
+      <pre class="mermaid width height2">
       stateDiagram
         [*] --> Active
 
@@ -168,8 +173,8 @@ gantt
         Active --> SomethingElse
         note right of SomethingElse : This is the note to the right.
         SomethingElse --> [*]
-      </div>
-      <div class="mermaid width height2">
+      </pre>
+      <pre class="mermaid width height2">
       stateDiagram-v2
         [*] --> Active
 
@@ -193,8 +198,8 @@ gantt
 
         Active --> SomethingElse2
         note right of SomethingElse2 : This is the note to the right.
-      </div>
-      <div class="mermaid width height2">
+      </pre>
+      <pre class="mermaid width height2">
       erDiagram
         CUSTOMER }|..|{ DELIVERY-ADDRESS : has
         CUSTOMER ||--o{ ORDER : places
@@ -204,8 +209,8 @@ gantt
         ORDER ||--|{ ORDER-ITEM : includes
         PRODUCT-CATEGORY ||--|{ PRODUCT : contains
         PRODUCT ||--o{ ORDER-ITEM : "ordered in"
-      </div>
-      <div class="mermaid width height">
+      </pre>
+      <pre class="mermaid width height">
       journey
             title My working day
             section Go to work
@@ -215,8 +220,8 @@ gantt
             section Go home
               Go downstairs: 5: Me
               Sit down: 5: Me
-      </div>
-<div class="mermaid width height">
+      </pre>
+      <pre class="mermaid width height">
 requirementDiagram
 
     requirement test_req {
@@ -254,8 +259,8 @@ requirementDiagram
     test_req - traces -> test_req2
     test_req - contains -> test_req3
     test_req <- copies - test_entity2
-      </div>
-    <div class="mermaid" class="width height">
+      </pre>
+      <pre class="mermaid" class="width height">
       gitGraph:
       commit
       branch hotfix
@@ -298,8 +303,9 @@ requirementDiagram
       merge main
       checkout develop
       merge release
-   </div>
-  <script src="./mermaid.js"></script>
+      </pre>
+    </div>
+    <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
@@ -318,8 +324,8 @@ requirementDiagram
         securityLevel: 'strict',
       });
       function callback() {
-  alert('It worked');
-}
+        alert('It worked');
+      }
     </script>
   </body>
 </html>
diff --git a/cypress/platform/showcase_neutral.html b/cypress/platform/showcase_neutral.html
index 35c304cea..57e1c76e8 100644
--- a/cypress/platform/showcase_neutral.html
+++ b/cypress/platform/showcase_neutral.html
@@ -1,12 +1,15 @@
 <html>
   <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
         /* background: rgb(221, 208, 208); */
@@ -16,8 +19,10 @@
         width: 100%;
         margin: 0;
         padding: 0;
-        }
-      h1 { color: grey;}
+      }
+      h1 {
+        color: grey;
+      }
       .mermaid2 {
         display: none;
       }
@@ -39,7 +44,7 @@
   <body>
     <h1>Showcases of diagrams</h1>
     <div class="flex flex-wrap">
-      <div class="mermaid width height">
+      <pre class="mermaid width height">
          %%{init: {'theme': 'neutral'}}%%
         graph TD
           A[Christmas] -->|Get money| B(Go shopping)
@@ -55,8 +60,8 @@
             F
             G
           end
-      </div>
-      <div class="mermaid width height">
+      </pre>
+      <pre class="mermaid width height">
         flowchart TD
           A[Christmas] -->|Get money| B(Go shopping)
           B --> C{Let me think}
@@ -71,8 +76,8 @@
             F
             G
           end
-      </div>
-      <div class="mermaid width height" >
+      </pre>
+      <pre class="mermaid width height">
         sequenceDiagram
           autonumber
           par Action 1
@@ -88,8 +93,8 @@
               loop Every minute
                 John-->Alice: Great!
             end
-      </div>
-      <div class="mermaid width height" >
+      </pre>
+      <pre class="mermaid width height">
 %%{init: {'theme':'neutral'}}%%
 
 classDiagram
@@ -113,8 +118,8 @@ classDiagram
 		+bool is_wild
 		+run()
 	}
-      </div>
-      <div class="mermaid width height">
+      </pre>
+      <pre class="mermaid width height">
 gantt
        dateFormat                :YYYY-MM-DD
        title                     Adding GANTT diagram functionality to mermaid
@@ -142,8 +147,8 @@ gantt
        Describe gantt syntax               :after doc1, 3d
        Add gantt diagram to demo page      :20h
        Add another diagram to demo page    :48h
-      </div>
-      <div class="mermaid width height2">
+      </pre>
+      <pre class="mermaid width height2">
       stateDiagram
         [*] --> Active
 
@@ -167,8 +172,8 @@ gantt
 
         Active --> SomethingElse
         note right of SomethingElse : This is the note to the right.
-      </div>
-      <div class="mermaid width height2">
+      </pre>
+      <pre class="mermaid width height2">
       stateDiagram-v2
         [*] --> Active
 
@@ -192,8 +197,8 @@ gantt
 
         Active --> SomethingElse2
         note right of SomethingElse2 : This is the note to the right.
-      </div>
-      <div class="mermaid width height2">
+      </pre>
+      <pre class="mermaid width height2">
       erDiagram
         CUSTOMER }|..|{ DELIVERY-ADDRESS : has
         CUSTOMER ||--o{ ORDER : places
@@ -203,8 +208,8 @@ gantt
         ORDER ||--|{ ORDER-ITEM : includes
         PRODUCT-CATEGORY ||--|{ PRODUCT : contains
         PRODUCT ||--o{ ORDER-ITEM : "ordered in"
-      </div>
-      <div class="mermaid width height">
+      </pre>
+      <pre class="mermaid width height">
       journey
             title My working day
             section Go to work
@@ -214,8 +219,8 @@ gantt
             section Go home
               Go downstairs: 5: Me
               Sit down: 5: Me
-      </div>
-<div class="mermaid width height">
+      </pre>
+      <pre class="mermaid width height">
 requirementDiagram
 
     requirement test_req {
@@ -253,9 +258,9 @@ requirementDiagram
     test_req - traces -> test_req2
     test_req - contains -> test_req3
     test_req <- copies - test_entity2
-      </div>
+      </pre>
 
-    <div class="mermaid" class="width height">
+      <pre class="mermaid" class="width height">
       gitGraph:
       commit
       branch hotfix
@@ -298,9 +303,9 @@ requirementDiagram
       merge main
       checkout develop
       merge release
-   </div>
-
-  <script src="./mermaid.js"></script>
+      </pre>
+    </div>
+    <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
@@ -319,8 +324,8 @@ requirementDiagram
         securityLevel: 'strict',
       });
       function callback() {
-  alert('It worked');
-}
+        alert('It worked');
+      }
     </script>
   </body>
 </html>
diff --git a/cypress/platform/subgraph.html b/cypress/platform/subgraph.html
index ae1c6e687..24d85079f 100644
--- a/cypress/platform/subgraph.html
+++ b/cypress/platform/subgraph.html
@@ -1,26 +1,26 @@
 <!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="mermaid">
+  <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>
+    <pre class="mermaid">
     graph TD
       A[Christmas] -->|Get money| B(Go shopping)
       subgraph 1test["id starting with number"]
       A
       end
       style 1test fill:#F99,stroke-width:2px,stroke:#F0F
-  </div>
-  <div class="mermaid">
+    </pre>
+    <pre class="mermaid">
     graph TD
       A.a[Christmas]:::someclass -->|Get money| B(Go shopping):::someclass
       subgraph test["id starting with number"]
@@ -28,18 +28,18 @@
       end
       style test fill:#F99,stroke-width:2px,stroke:#F0F
       classDef someclass fill:#f96;
-  </div>
-  <div class="mermaid">
+    </pre>
+    <pre class="mermaid">
       graph TD
       9e122290-->82072290_1ec3_e711_8c5a_005056ad0002
       style 9e122290 fill:#F99,stroke-width:2px,stroke:#F0F
-  </div>
-  <script src="./mermaid.js"></script>
-  <script>
-     function showFullFirstSquad(elemName) {
-       console.log('show ' + elemName);
-     }
-     mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
-  </script>
-</body>
+    </pre>
+    <script src="./mermaid.js"></script>
+    <script>
+      function showFullFirstSquad(elemName) {
+        console.log('show ' + elemName);
+      }
+      mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
+    </script>
+  </body>
 </html>
diff --git a/cypress/platform/theme-directives.html b/cypress/platform/theme-directives.html
index b51ebb2ea..bdc5552a3 100644
--- a/cypress/platform/theme-directives.html
+++ b/cypress/platform/theme-directives.html
@@ -1,18 +1,21 @@
 <html>
   <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
         /* background: rgb(221, 208, 208); */
         /* background:#333; */
         font-family: 'Arial';
-        }
+      }
       h1 {
         color: #333;
         font-size: 20px;
@@ -37,7 +40,7 @@
     <div class="flex flex-wrap">
       <div class="size">
         <h1>Default</h1>
-        <div class="mermaid" >
+        <pre class="mermaid">
   %%{init: { 'logLevel': 0, 'theme': 'default'} }%%
   graph TD
             A(Start) --> B[/Another/]
@@ -46,11 +49,11 @@
               B
               C
             end
-        </div>
+        </pre>
       </div>
       <div class="size">
         <h1>Forest</h1>
-        <div class="mermaid" >
+        <pre class="mermaid">
   %%{init: { 'logLevel': 1, 'theme': 'forest'} }%%
   graph TD
             A(Start) --> B[/Another/]
@@ -59,11 +62,11 @@
               B
               C
             end
-        </div>
+        </pre>
       </div>
       <div class="size">
         <h1>Neutral</h1>
-        <div class="mermaid" >
+        <pre class="mermaid">
         %%{init: { 'logLevel': 1, 'theme': 'neutral'} }%%
   graph TD
             A(Start) --> B[/Another/]
@@ -72,11 +75,11 @@
               B
               C
             end
-        </div>
+        </pre>
       </div>
       <div class="size dark">
         <h1>Dark</h1>
-        <div class="mermaid">
+        <pre class="mermaid">
         %%{init: { 'logLevel': 1, 'theme': 'dark'} }%%
   graph TD
             A(Start) --> B[/Another/]
@@ -85,11 +88,11 @@
               B
               C
             end
-        </div>
+        </pre>
       </div>
       <div class="size">
         <h1>Base with overriding themeVariable</h1>
-        <div class="mermaid">
+        <pre class="mermaid">
         %%{init: { 'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
 
   graph TD
@@ -99,11 +102,11 @@
               B
               C
             end
-        </div>
+        </pre>
       </div>
       <div class="size">
         <h1>Nothing set, should be Default</h1>
-        <div class="mermaid">
+        <pre class="mermaid">
         %%{init: { 'logLevel': 1} }%%
 
   graph TD
@@ -113,11 +116,11 @@
               B
               C
             end
-        </div>
+        </pre>
       </div>
     </div>
 
-  <script src="./mermaid.js"></script>
+    <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
@@ -138,8 +141,8 @@
         securityLevel: 'strict',
       });
       function callback() {
-  alert('It worked');
-}
+        alert('It worked');
+      }
     </script>
   </body>
 </html>
diff --git a/cypress/platform/user-journey.html b/cypress/platform/user-journey.html
index 736ca021a..62b41adb9 100644
--- a/cypress/platform/user-journey.html
+++ b/cypress/platform/user-journey.html
@@ -1,14 +1,10 @@
 <html>
   <head>
-    <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
-      rel="stylesheet"
-    />
-
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
   </head>
   <body>
     <h1>User Journey</h1>
-    <div class="mermaid">
+    <pre class="mermaid">
       journey
         title Go shopping
 
@@ -28,7 +24,7 @@
           Find keys:4: Mum
           Get into car:4: Dad, Mum, Child 1, Child 2
           Drive home:3: Dad
-    </div>
+    </pre>
     <script src="./mermaid.js"></script>
     <script>
       mermaid.initialize({
diff --git a/cypress/platform/vertices.html b/cypress/platform/vertices.html
index 110331917..64a674d41 100644
--- a/cypress/platform/vertices.html
+++ b/cypress/platform/vertices.html
@@ -1,37 +1,37 @@
 <!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="mermaid">
+  <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>
+    <pre class="mermaid">
     info
-  </div>
-  <div class="mermaid">
+    </pre>
+    <pre class="mermaid">
     graph TD
       subgraph one
         1
       end
-  </div>
-  <!-- <div class="mermaid">
+    </pre>
+    <pre class="mermaid">
     graph TD
       A --> B --> C
-  </div> -->
+    </pre>
 
-  <script src="./mermaid.js"></script>
-  <script>
-     function showFullFirstSquad(elemName) {
-       console.log('show ' + elemName);
-     }
-     mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
-  </script>
-</body>
+    <script src="./mermaid.js"></script>
+    <script>
+      function showFullFirstSquad(elemName) {
+        console.log('show ' + elemName);
+      }
+      mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
+    </script>
+  </body>
 </html>
diff --git a/cypress/platform/xss2.html b/cypress/platform/xss2.html
index 73b3a2624..baedefcc6 100644
--- a/cypress/platform/xss2.html
+++ b/cypress/platform/xss2.html
@@ -1,15 +1,12 @@
 <html>
   <head>
-    <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
-      rel="stylesheet"
-    />
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
     <style>
       .malware {
         position: fixed;
-        bottom:0;
-        left:0;
-        right:0;
+        bottom: 0;
+        left: 0;
+        right: 0;
         height: 150px;
         background: red;
         color: black;
@@ -33,24 +30,24 @@
     </script>
   </head>
   <body>
-    <div class="mermaid">
+    <pre class="mermaid">
       %%{init: { 'theme':'base', '__proto__': {'polluted': 'asdf'}} }%%
       graph LR
           A --> B
-    </div>
-    <div class="mermaid">
+    </pre>
+    <pre class="mermaid">
       %%{init: { 'theme':'base', '__proto__': {'polluted': 'asdf'}} }%%
       %%{init: { 'theme':'base', '__proto__': {'polluted': 'asdf'}} }%%
       graph LR
           A --> B
-    </div>
-    <div class="mermaid">
+    </pre>
+    <pre class="mermaid">
       %%{init: { 'prototype': {'__proto__': {'polluted': 'test'}}} }%%
       %%{init: { 'prototype': {'__proto__': {'polluted': 'test'}}} }%%
       sequenceDiagram
       Alice->>Bob: Hi Bob
       Bob->>Alice: Hi Alice
-    </div>
+    </pre>
     <script src="./mermaid.js"></script>
     <script>
       mermaid.initialize({
diff --git a/cypress/platform/xss22.html b/cypress/platform/xss22.html
index d51a7f384..d7e47cd02 100644
--- a/cypress/platform/xss22.html
+++ b/cypress/platform/xss22.html
@@ -1,16 +1,16 @@
-
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-</head>
-<body>
-  <div class="mermaid">
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <pre class="mermaid">
   graph TD
 A --&gt; B["&lt;a href='javascript#9;t#colon;alert(document.location)'&gt;AAA&lt;/a&gt;"]
-  </div>
-<script src="./mermaid.js"></script>
- <script>mermaid.initialize({ startOnLoad: true });
-</script>
-</body>
-</html>
\ No newline at end of file
+    </pre>
+    <script src="./mermaid.js"></script>
+    <script>
+      mermaid.initialize({ startOnLoad: true });
+    </script>
+  </body>
+</html>
diff --git a/cypress/platform/xss3.html b/cypress/platform/xss3.html
index c2e1113fa..b72e8743c 100644
--- a/cypress/platform/xss3.html
+++ b/cypress/platform/xss3.html
@@ -1,15 +1,12 @@
 <html>
   <head>
-    <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
-      rel="stylesheet"
-    />
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
     <style>
       .malware {
         position: fixed;
-        bottom:0;
-        left:0;
-        right:0;
+        bottom: 0;
+        left: 0;
+        right: 0;
         height: 150px;
         background: red;
         color: black;
@@ -33,11 +30,12 @@
     </script>
   </head>
   <body>
-    <div class="mermaid">
+    <pre class="mermaid">
+      <!-- prettier-ignore -->
       %%{init: { 'fontFamily': '\"></style><img src=x onerror=xssAttack()>'} }%%
       graph LR
           A --> B
-    </div>
+    </pre>
     <script src="./mermaid.js"></script>
     <script>
       mermaid.initialize({
diff --git a/demos/classchart.html b/demos/classchart.html
index d53a6c8d0..ebc3fe0a5 100644
--- a/demos/classchart.html
+++ b/demos/classchart.html
@@ -1,23 +1,20 @@
 <!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>
+      div.mermaid {
+        /* font-family: 'trebuchet ms', verdana, arial; */
+        font-family: 'Courier New', Courier, monospace !important;
+      }
+    </style>
+  </head>
 
-<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>
-		div.mermaid {
-			/* font-family: 'trebuchet ms', verdana, arial; */
-			font-family: 'Courier New', Courier, monospace !important;
-		}
-	</style>
-</head>
-
-<body>
-
-
-	<div class="mermaid">
+  <body>
+    <pre class="mermaid">
 		classDiagram
 		title Animal Diagram
 		accDescription The animal class diagram
@@ -41,22 +38,20 @@
 			+bool is_wild
 			+run()
 		}
-	</div>
+    </pre>
 
-	<script src="./mermaid.js"></script>
-	<script>
-		mermaid.initialize({
-		  theme: 'forest',
-		  // themeCSS: '.node rect { fill: red; }',
-		  logLevel: 3,
-		  securityLevel: 'loose',
-		  flowchart: { curve: 'basis' },
-		  gantt: { axisFormat: '%m/%d/%Y' },
-		  sequence: { actorMargin: 50 },
-		  // sequenceDiagram: { actorMargin: 300 } // deprecated
-		});
-	</script>
-
-</body>
-
-</html>
\ No newline at end of file
+    <script src="./mermaid.js"></script>
+    <script>
+      mermaid.initialize({
+        theme: 'forest',
+        // themeCSS: '.node rect { fill: red; }',
+        logLevel: 3,
+        securityLevel: 'loose',
+        flowchart: { curve: 'basis' },
+        gantt: { axisFormat: '%m/%d/%Y' },
+        sequence: { actorMargin: 50 },
+        // sequenceDiagram: { actorMargin: 300 } // deprecated
+      });
+    </script>
+  </body>
+</html>
diff --git a/demos/dataflowchart.html b/demos/dataflowchart.html
index 829a43459..dea3d595a 100644
--- a/demos/dataflowchart.html
+++ b/demos/dataflowchart.html
@@ -1,26 +1,26 @@
 <!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>
+  <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>
       div.mermaid {
         /* font-family: 'trebuchet ms', verdana, arial; */
         font-family: 'Courier New', Courier, monospace !important;
       }
-  </style>
-</head>
-<body>
-  <h2>Data Flow Diagram Example</h2>
-  <div class="mermaid">
+    </style>
+  </head>
+  <body>
+    <h2>Data Flow Diagram Example</h2>
+    <pre class="mermaid">
     flowchart LR
       DataStore[|borders:tb|Database] -->|input| Process((System)) -->|output| Entity[Customer];
-  </div>
+    </pre>
 
-  <h2>Borders Example</h2>
-  <div class="mermaid">
+    <h2>Borders Example</h2>
+    <pre class="mermaid">
     flowchart TD
       allSides[ stroke all sides ];
       allSides2[|borders:ltrb| stroke all sides ];
@@ -28,26 +28,26 @@
       ltSides[|borders:lt| stroke left and top sides ];
       lrSides[|borders:lr| stroke left and right sides ];
       noSide[|borders:no| stroke no side ];
-  </div>
+    </pre>
 
-  <script src="./mermaid.js"></script>
-  <script>
-    mermaid.initialize({
-      theme: 'forest',
-      logLevel: 3,
-      securityLevel: 'loose',
-      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);
-    }
-  </script>
-</body>
+    <script src="./mermaid.js"></script>
+    <script>
+      mermaid.initialize({
+        theme: 'forest',
+        logLevel: 3,
+        securityLevel: 'loose',
+        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);
+      }
+    </script>
+  </body>
 </html>
diff --git a/demos/er.html b/demos/er.html
index 62285a2b4..0f376bf9e 100644
--- a/demos/er.html
+++ b/demos/er.html
@@ -1,45 +1,40 @@
 <!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>
+      div.mermaid {
+        /* font-family: 'trebuchet ms', verdana, arial; */
+        font-family: 'Courier New', Courier, monospace !important;
+      }
+    </style>
+  </head>
 
-<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>
-	div.mermaid {
-		/* font-family: 'trebuchet ms', verdana, arial; */
-		font-family: 'Courier New', Courier, monospace !important;
-	}
-</style>
-</head>
-
-<body>
-
-
-<div class="mermaid">
+  <body>
+    <pre class="mermaid">
 erDiagram
 title This is a title
 accDescription Test a description
 CUSTOMER ||--o{ ORDER : places
 ORDER ||--|{ LINE-ITEM : contains
 CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
-</div>
+    </pre>
 
-<script src="./mermaid.js"></script>
-<script>
-	mermaid.initialize({
-	  theme: 'forest',
-	  // themeCSS: '.node rect { fill: red; }',
-	  logLevel: 3,
-	  securityLevel: 'loose',
-	  flowchart: { curve: 'basis' },
-	  gantt: { axisFormat: '%m/%d/%Y' },
-	  sequence: { actorMargin: 50 },
-	  // sequenceDiagram: { actorMargin: 300 } // deprecated
-	});
-</script>
-
-</body>
-
-</html>
\ No newline at end of file
+    <script src="./mermaid.js"></script>
+    <script>
+      mermaid.initialize({
+        theme: 'forest',
+        // themeCSS: '.node rect { fill: red; }',
+        logLevel: 3,
+        securityLevel: 'loose',
+        flowchart: { curve: 'basis' },
+        gantt: { axisFormat: '%m/%d/%Y' },
+        sequence: { actorMargin: 50 },
+        // sequenceDiagram: { actorMargin: 300 } // deprecated
+      });
+    </script>
+  </body>
+</html>
diff --git a/demos/flowchart.html b/demos/flowchart.html
index 47a9c520f..4af985533 100644
--- a/demos/flowchart.html
+++ b/demos/flowchart.html
@@ -1,23 +1,23 @@
 <!DOCTYPE html>
 <html>
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <title>Mermaid Quick Flowchart Test Page</title>
-  <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-  <style>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Mermaid Quick Flowchart Test Page</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
+    <style>
       div.mermaid {
         /* font-family: 'trebuchet ms', verdana, arial; */
         font-family: 'Courier New', Courier, monospace !important;
       }
-  </style>
-</head>
-<body>
-  <h1>Comparison "graph vs. flowchart"</h1>
-  <h2>Sample 1</h2>
+    </style>
+  </head>
+  <body>
+    <h1>Comparison "graph vs. flowchart"</h1>
+    <h2>Sample 1</h2>
 
-  <h3>graph</h3>
-  <div class="mermaid">
+    <h3>graph</h3>
+    <pre class="mermaid">
     graph LR
     sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
 
@@ -113,10 +113,10 @@
     sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
     sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
     sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
-  </div>
+    </pre>
 
-  <h3>flowchart</h3>
-  <div class="mermaid">
+    <h3>flowchart</h3>
+    <pre class="mermaid">
     flowchart LR
     sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
 
@@ -212,13 +212,13 @@
     sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
     sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
     sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
-  </div>
+    </pre>
 
-  <hr/>
-  <h2>Sample 2</h2>
+    <hr />
+    <h2>Sample 2</h2>
 
-  <h3>graph</h3>
-  <div class="mermaid">
+    <h3>graph</h3>
+    <pre class="mermaid">
     graph TD
     title What to buy
     accDescription Options of what to buy with Christmas money
@@ -227,10 +227,10 @@
     C -->|One| D[Laptop]
     C -->|Two| E[iPhone]
     C -->|Three| F[Car]
-  </div>
+  </pre>
 
-  <h3>flowchart</h3>
-  <div class="mermaid">
+    <h3>flowchart</h3>
+    <pre class="mermaid">
     flowchart TD
     title What to buy
     accDescription Options of what to buy with Christmas money
@@ -239,13 +239,13 @@
     C -->|One| D[Laptop]
     C -->|Two| E[iPhone]
     C -->|Three| F[Car]
-  </div>
+  </pre>
 
-  <hr/>
-  <h2>Sample 3</h2>
+    <hr />
+    <h2>Sample 3</h2>
 
-  <h3>graph</h3>
-  <div class="mermaid">
+    <h3>graph</h3>
+    <pre class="mermaid">
     graph TD
     A[/Christmas\]
     A -->|Get money| B[\Go shopping/]
@@ -253,10 +253,10 @@
     C -->|One| D[/Laptop/]
     C -->|Two| E[\iPhone\]
     C -->|Three| F[Car]
-  </div>
+  </pre>
 
-  <h3>flowchart</h3>
-  <div class="mermaid">
+    <h3>flowchart</h3>
+    <pre class="mermaid">
     flowchart TD
     A[/Christmas\]
     A -->|Get money| B[\Go shopping/]
@@ -264,13 +264,13 @@
     C -->|One| D[/Laptop/]
     C -->|Two| E[\iPhone\]
     C -->|Three| F[Car]
-  </div>
+  </pre>
 
-  <hr/>
-  <h2>Sample 4</h2>
+    <hr />
+    <h2>Sample 4</h2>
 
-  <h3>graph</h3>
-  <div class="mermaid">
+    <h3>graph</h3>
+    <pre class="mermaid">
     graph LR
     47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
     37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
@@ -292,10 +292,10 @@
     39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits)
     35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
     36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
-  </div>
+    </pre>
 
-  <h3>flowchart</h3>
-  <div class="mermaid">
+    <h3>flowchart</h3>
+    <pre class="mermaid">
     flowchart LR
     47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
     37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
@@ -317,13 +317,13 @@
     39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits)
     35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
     36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
-  </div>
+    </pre>
 
-  <hr/>
-  <h2>Sample 5</h2>
+    <hr />
+    <h2>Sample 5</h2>
 
-  <h3>graph</h3>
-  <div class="mermaid">
+    <h3>graph</h3>
+    <pre class="mermaid">
     graph TD
     9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment")
     82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1")
@@ -387,10 +387,10 @@
     c0102290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
     9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
     9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
-  </div>
+    </pre>
 
-  <h3>flowchart</h3>
-  <div class="mermaid">
+    <h3>flowchart</h3>
+    <pre class="mermaid">
     flowchart TD
     9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment")
     82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1")
@@ -454,32 +454,32 @@
     c0102290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
     9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
     9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
-  </div>
+    </pre>
 
-  <hr/>
-  <h2>Sample 6</h2>
+    <hr />
+    <h2>Sample 6</h2>
 
-  <h3>graph</h3>
-  <div class="mermaid">
+    <h3>graph</h3>
+    <pre class="mermaid">
     graph TB
     subgraph One
       a1-->a2
     end
-  </div>
+    </pre>
 
-  <h3>flowchart</h3>
-  <div class="mermaid">
+    <h3>flowchart</h3>
+    <pre class="mermaid">
     flowchart TB
     subgraph One
       a1-->a2
     end
-  </div>
+    </pre>
 
-  <hr/>
-  <h2>Sample 7</h2>
+    <hr />
+    <h2>Sample 7</h2>
 
-  <h3>graph</h3>
-  <div class="mermaid">
+    <h3>graph</h3>
+    <pre class="mermaid">
     graph TB
     A
     B
@@ -507,10 +507,10 @@
 
     style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
     style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
-  </div>
+    </pre>
 
-  <h3>flowchart</h3>
-  <div class="mermaid">
+    <h3>flowchart</h3>
+    <pre class="mermaid">
     flowchart TB
     A
     B
@@ -538,13 +538,13 @@
 
     style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
     style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
-  </div>
+    </pre>
 
-  <hr/>
-  <h2>Sample 8</h2>
+    <hr />
+    <h2>Sample 8</h2>
 
-  <h3>graph</h3>
-  <div class="mermaid">
+    <h3>graph</h3>
+    <pre class="mermaid">
     graph LR
     456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
     f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]
@@ -558,10 +558,10 @@
     click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC
     3000"
     style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
-  </div>
+    </pre>
 
-  <h3>flowchart</h3>
-  <div class="mermaid">
+    <h3>flowchart</h3>
+    <pre class="mermaid">
     flowchart LR
     456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
     f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]
@@ -575,13 +575,13 @@
     click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC
     3000"
     style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
-  </div>
+    </pre>
 
-  <hr/>
-  <h2>Sample 9</h2>
+    <hr />
+    <h2>Sample 9</h2>
 
-  <h3>graph</h3>
-  <div class="mermaid">
+    <h3>graph</h3>
+    <pre class="mermaid">
     graph TD
     A[Christmas] -->|Get money| B(Go shopping)
     B --> C{{Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?}}
@@ -593,10 +593,10 @@
     classDef someclass fill:#f96;
     class A someclass;
     class C someclass;
-  </div>
+  </pre>
 
-  <h3>flowchart</h3>
-  <div class="mermaid">
+    <h3>flowchart</h3>
+    <pre class="mermaid">
     flowchart TD
     A[Christmas] -->|Get money| B(Go shopping)
     B --> C{{Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?}}
@@ -608,13 +608,13 @@
     classDef someclass fill:#f96;
     class A someclass;
     class C someclass;
-  </div>
+  </pre>
 
-  <hr/>
-  <h2>Sample 10</h2>
+    <hr />
+    <h2>Sample 10</h2>
 
-  <h3>graph</h3>
-  <div class="mermaid">
+    <h3>graph</h3>
+    <pre class="mermaid">
     graph TD
     A([stadium shape test])
     A -->|Get money| B([Go shopping])
@@ -627,10 +627,10 @@
     classDef someclass fill:#f96;
     class A someclass;
     class C someclass;
-  </div>
+  </pre>
 
-  <h3>flowchart</h3>
-  <div class="mermaid">
+    <h3>flowchart</h3>
+    <pre class="mermaid">
     flowchart TD
     A([stadium shape test])
     A -->|Get money| B([Go shopping])
@@ -643,13 +643,13 @@
     classDef someclass fill:#f96;
     class A someclass;
     class C someclass;
-  </div>
+  </pre>
 
-  <hr/>
-  <h2>Sample 11</h2>
+    <hr />
+    <h2>Sample 11</h2>
 
-  <h3>graph</h3>
-  <div class="mermaid">
+    <h3>graph</h3>
+    <pre class="mermaid">
     graph LR
     A[[subroutine shape test]]
     A -->|Get money| B[[Go shopping]]
@@ -662,10 +662,10 @@
     classDef someclass fill:#f96;
     class A someclass;
     class C someclass;
-  </div>
+  </pre>
 
-  <h3>flowchart</h3>
-  <div class="mermaid">
+    <h3>flowchart</h3>
+    <pre class="mermaid">
     flowchart LR
     A[[subroutine shape test]]
     A -->|Get money| B[[Go shopping]]
@@ -678,13 +678,13 @@
     classDef someclass fill:#f96;
     class A someclass;
     class C someclass;
-  </div>
+  </pre>
 
-  <hr/>
-  <h2>Sample 12</h2>
+    <hr />
+    <h2>Sample 12</h2>
 
-  <h3>graph</h3>
-  <div class="mermaid">
+    <h3>graph</h3>
+    <pre class="mermaid">
     graph LR
     A[(cylindrical<br />shape<br />test)]
     A -->|Get money| B1[(Go shopping 1)]
@@ -701,10 +701,10 @@
     click B testClick "click test"
     classDef someclass fill:#f96;
     class A someclass;
-  </div>
+  </pre>
 
-  <h3>flowchart</h3>
-  <div class="mermaid">
+    <h3>flowchart</h3>
+    <pre class="mermaid">
     flowchart LR
     A[(cylindrical<br />shape<br />test)]
     A -->|Get money| B1[(Go shopping 1)]
@@ -721,13 +721,13 @@
     click B testClick "click test"
     classDef someclass fill:#f96;
     class A someclass;
-  </div>
+  </pre>
 
-  <hr/>
-  <h2>Sample 13</h2>
+    <hr />
+    <h2>Sample 13</h2>
 
-  <h3>graph</h3>
-  <div class="mermaid">
+    <h3>graph</h3>
+    <pre class="mermaid">
     graph LR
     A1[Multi<br>Line] -->|Multi<br>Line| B1(Multi<br>Line)
     C1[Multi<br/>Line] -->|Multi<br/>Line| D1(Multi<br/>Line)
@@ -738,10 +738,10 @@
     linkStyle 0 stroke:DarkGray,stroke-width:2px
     linkStyle 1 stroke:DarkGray,stroke-width:2px
     linkStyle 2 stroke:DarkGray,stroke-width:2px
-  </div>
+  </pre>
 
-  <h3>flowchart</h3>
-  <div class="mermaid">
+    <h3>flowchart</h3>
+    <pre class="mermaid">
     flowchart LR
     A1[Multi<br>Line] -->|Multi<br>Line| B1(Multi<br>Line)
     C1[Multi<br/>Line] -->|Multi<br/>Line| D1(Multi<br/>Line)
@@ -752,36 +752,36 @@
     linkStyle 0 stroke:DarkGray,stroke-width:2px
     linkStyle 1 stroke:DarkGray,stroke-width:2px
     linkStyle 2 stroke:DarkGray,stroke-width:2px
-  </div>
+  </pre>
 
-  <hr/>
-  <h2>Sample 14</h2>
+    <hr />
+    <h2>Sample 14</h2>
 
-  <h3>graph</h3>
-  <div class="mermaid">
+    <h3>graph</h3>
+    <pre class="mermaid">
     graph LR
     A(( )) -->|step 1| B(( ))
     B(( )) -->|step 2| C(( ))
     C(( )) -->|step 3| D(( ))
     linkStyle 1 stroke:greenyellow,stroke-width:2px
     style C fill:greenyellow,stroke:green,stroke-width:4px
-  </div>
+    </pre>
 
-  <h3>flowchart</h3>
-  <div class="mermaid">
+    <h3>flowchart</h3>
+    <pre class="mermaid">
     flowchart LR
     A(( )) -->|step 1| B(( ))
     B(( )) -->|step 2| C(( ))
     C(( )) -->|step 3| D(( ))
     linkStyle 1 stroke:greenyellow,stroke-width:2px
     style C fill:greenyellow,stroke:green,stroke-width:4px
-  </div>
+    </pre>
 
-  <hr/>
-  <h2>Sample 15</h2>
+    <hr />
+    <h2>Sample 15</h2>
 
-  <h3>graph</h3>
-  <div class="mermaid">
+    <h3>graph</h3>
+    <pre class="mermaid">
     graph TB
     TITLE["Link Click Events<br>(click the nodes below)"]
     A["link test (open in same tab)"]
@@ -797,10 +797,10 @@
     click D "mailto:user@user.user" "mailto test"
     click E "notes://do-your-thing/id" "other protocol test"
     click F "javascript:alert('test')" "script test"
-  </div>
+  </pre>
 
-  <h3>flowchart</h3>
-  <div class="mermaid">
+    <h3>flowchart</h3>
+    <pre class="mermaid">
     flowchart TB
     TITLE["Link Click Events<br>(click the nodes below)"]
     A["link test (open in same tab)"]
@@ -816,13 +816,13 @@
     click D "mailto:user@user.user" "mailto test"
     click E "notes://do-your-thing/id" "other protocol test"
     click F "javascript:alert('test')" "script test"
-  </div>
+  </pre>
 
-  <hr/>
-  <h2>Sample 16</h2>
+    <hr />
+    <h2>Sample 16</h2>
 
-  <h3>graph</h3>
-  <div class="mermaid">
+    <h3>graph</h3>
+    <pre class="mermaid">
     graph LR
     A[red<br>text] -->|red<br>text| B(blue<br>text)
     C[/red<br/>text/] -->|blue<br/>text| D{blue<br/>text}
@@ -836,10 +836,10 @@
     style D stroke:#0000ff,fill:#ccccff,color:#0000ff
     click B "flowchart.html#link-clicked" "link test"
     click D testClick "click test"
-  </div>
+  </pre>
 
-  <h3>flowchart</h3>
-  <div class="mermaid">
+    <h3>flowchart</h3>
+    <pre class="mermaid">
     flowchart LR
     A[red<br>text] -->|red<br>text| B(blue<br>text)
     C[/red<br/>text/] -->|blue<br/>text| D{blue<br/>text}
@@ -853,13 +853,13 @@
     style D stroke:#0000ff,fill:#ccccff,color:#0000ff
     click B "flowchart.html#link-clicked" "link test"
     click D testClick "click test"
-  </div>
+  </pre>
 
-  <hr/>
-  <h2>Sample 17</h2>
+    <hr />
+    <h2>Sample 17</h2>
 
-  <h3>graph</h3>
-  <div class="mermaid">
+    <h3>graph</h3>
+    <pre class="mermaid">
     graph TD
     A[myClass1] --> B[default] & C[default]
     B[default] & C[default] --> D[myClass2]
@@ -869,10 +869,10 @@
     classDef myClass2 stroke:#0000ff,fill:#ccccff
     class A myClass1
     class D myClass2
-  </div>
+    </pre>
 
-  <h3>flowchart</h3>
-  <div class="mermaid">
+    <h3>flowchart</h3>
+    <pre class="mermaid">
     flowchart TD
     A[myClass1] --> B[default] & C[default]
     B[default] & C[default] --> D[myClass2]
@@ -882,13 +882,13 @@
     classDef myClass2 stroke:#0000ff,fill:#ccccff
     class A myClass1
     class D myClass2
-  </div>
+    </pre>
 
-  <hr/>
-  <h2>Sample 18</h2>
+    <hr />
+    <h2>Sample 18</h2>
 
-  <h3>graph</h3>
-  <div class="mermaid">
+    <h3>graph</h3>
+    <pre class="mermaid">
     graph LR
     A1[red text] -->|default style| A2[blue text]
     B1(red text) -->|default style| B2(blue text)
@@ -933,10 +933,10 @@
     style L2 stroke:#0000ff,fill:#ccccff,color:#0000ff
     style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
     style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
-  </div>
+    </pre>
 
-  <h3>flowchart</h3>
-  <div class="mermaid">
+    <h3>flowchart</h3>
+    <pre class="mermaid">
     flowchart LR
     A1[red text] <-->|default style| A2[blue text]
     B1(red text) <-->|default style| B2(blue text)
@@ -981,13 +981,13 @@
     style L2 stroke:#0000ff,fill:#ccccff,color:#0000ff
     style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
     style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
-  </div>
+    </pre>
 
-  <hr/>
-  <h2>Sample 19</h2>
+    <hr />
+    <h2>Sample 19</h2>
 
-  <h3>graph</h3>
-  <div class="mermaid">
+    <h3>graph</h3>
+    <pre class="mermaid">
     graph TB
     A1[red text] -->|default style| A2[blue text]
     B1(red text) -->|default style| B2(blue text)
@@ -1032,10 +1032,10 @@
     style L2 stroke:#0000ff,fill:#ccccff,color:#0000ff
     style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
     style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
-  </div>
+    </pre>
 
-  <h3>flowchart</h3>
-  <div class="mermaid">
+    <h3>flowchart</h3>
+    <pre class="mermaid">
     flowchart TB
     A1[red text] <-->|default style| A2[blue text]
     B1(red text) <-->|default style| B2(blue text)
@@ -1083,30 +1083,30 @@
     style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
     style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
     style O2 stroke:#0000ff,fill:#ccccff,color:#0000ff
-  </div>
+    </pre>
 
-  <hr/>
+    <hr />
 
-  <h1 id="link-clicked">Anchor for "link-clicked" test</h1>
+    <h1 id="link-clicked">Anchor for "link-clicked" test</h1>
 
-  <script src="./mermaid.js"></script>
-  <script>
-    mermaid.initialize({
-      theme: 'forest',
-      logLevel: 3,
-      securityLevel: 'loose',
-      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);
-    }
-  </script>
-</body>
+    <script src="./mermaid.js"></script>
+    <script>
+      mermaid.initialize({
+        theme: 'forest',
+        logLevel: 3,
+        securityLevel: 'loose',
+        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);
+      }
+    </script>
+  </body>
 </html>
diff --git a/demos/gantt.html b/demos/gantt.html
index 66a18c47b..43efa4f5d 100644
--- a/demos/gantt.html
+++ b/demos/gantt.html
@@ -1,22 +1,20 @@
 <!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>
+      div.mermaid {
+        font-family: 'Courier New', Courier, monospace !important;
+      }
+    </style>
+  </head>
 
-<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>
-	div.mermaid {
-		font-family: 'Courier New', Courier, monospace !important;
-	}
-</style>
-</head>
-
-<body>
-
-<!-- accDescription Tasks for Q4 -->
-<div class="mermaid">
+  <body>
+    <!-- accDescription Tasks for Q4 -->
+    <pre class="mermaid">
 gantt
   title A Gantt Diagram
   accDescription Remaining Q4 Tasks
@@ -27,17 +25,18 @@ gantt
   section Another
   Task in sec      :2014-01-12  , 12d
   another task      : 24d
-</div>
 
-<script src="./mermaid.js"></script>
-<script>
-	mermaid.initialize({
-  logLevel: 3,
-  securityLevel: 'loose',
-  gantt: { axisFormat: '%m/%d/%Y' },
-	});
-</script>
 
-</body>
+</pre
+    >
 
+    <script src="./mermaid.js"></script>
+    <script>
+      mermaid.initialize({
+        logLevel: 3,
+        securityLevel: 'loose',
+        gantt: { axisFormat: '%m/%d/%Y' },
+      });
+    </script>
+  </body>
 </html>
diff --git a/demos/index.html b/demos/index.html
index 904fde7df..58234c6d7 100644
--- a/demos/index.html
+++ b/demos/index.html
@@ -1,27 +1,26 @@
 <!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>
+      div.mermaid {
+        /* font-family: 'trebuchet ms', verdana, arial; */
+        font-family: 'Courier New', Courier, monospace !important;
+      }
+    </style>
+  </head>
 
-<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>
-    div.mermaid {
-      /* font-family: 'trebuchet ms', verdana, arial; */
-      font-family: 'Courier New', Courier, monospace !important;
-    }
-  </style>
-</head>
-
-<body>
-  <div class="mermaid">
+  <body>
+    <pre class="mermaid">
     info
-  </div>
+    </pre>
 
-  <hr />
+    <hr />
 
-  <div class="mermaid">
+    <pre class="mermaid">
     C4Context
       title System Context diagram for Internet Banking System
 Enterprise_Boundary(b0, "BankBoundary0") {
@@ -64,9 +63,9 @@ Enterprise_Boundary(b0, "BankBoundary0") {
       UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
       
       UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
-  </div>
+    </pre>
 
-  <div class="mermaid">
+    <pre class="mermaid">
     C4Container
     title Container diagram for Internet Banking System
 
@@ -102,12 +101,10 @@ Enterprise_Boundary(b0, "BankBoundary0") {
     Rel(backend_api, email_system, "Sends e-mails using", "sync, SMTP")
     UpdateRelStyle(backend_api, email_system, $offsetY="-60")    
     Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
-    UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140") 
+    UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140")
+    </pre>
 
-
-  </div>
-
-  <div class="mermaid">
+    <pre class="mermaid">
     C4Component
     title Component diagram for Internet Banking System - API Application
 
@@ -144,10 +141,9 @@ Enterprise_Boundary(b0, "BankBoundary0") {
         UpdateRelStyle(accounts, mbsfacade, $offsetX="140", $offsetY="10")
         UpdateRelStyle(security, db, $offsetY="-40")
         UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")
+    </pre>
 
-  </div>  
-
-  <div class="mermaid">
+    <pre class="mermaid">
     C4Dynamic
     title Dynamic diagram for Internet Banking System - API Application
 
@@ -164,9 +160,9 @@ Enterprise_Boundary(b0, "BankBoundary0") {
     UpdateRelStyle(c1, c2, $textColor="red", $offsetY="-40")
     UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60")
     UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10")
-  </div>  
+    </pre>
 
-   <div class="mermaid">
+    <pre class="mermaid">
     C4Deployment
     title Deployment Diagram for Internet Banking System - Live
 
@@ -215,11 +211,11 @@ Enterprise_Boundary(b0, "BankBoundary0") {
     UpdateRelStyle(api, db, $offsetY="-20", $offsetX="5")
     UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20")
     UpdateRelStyle(db, db2, $offsetY="-10")
-  </div>  
+     </pre>
 
-  <hr />
+    <hr />
 
-  <div class="mermaid">
+    <pre class="mermaid">
     pie
       title Key elements in Product X
       accDescription This is a pie chart showing the key elements in Product X.
@@ -227,9 +223,9 @@ Enterprise_Boundary(b0, "BankBoundary0") {
       "Potassium" : 50.05
       "Magnesium" : 10.01
       "Iron" :  5
-  </div>
+    </pre>
 
-  <div class="mermaid">
+    <pre class="mermaid">
     gantt
       title Airworks roadmap
       dateFormat YYYY-MM-DD
@@ -244,8 +240,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
       section Airworks 3.4.2
       开发	:a, 2021-10-09, 4d
       测试	:after a, 4d
-  </div>
-  <div class="mermaid">
+    </pre>
+    <pre class="mermaid">
     gantt
     title Exclusive end dates (Manual date should end on 3d)
     dateFormat YYYY-MM-DD
@@ -253,8 +249,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
     section Section1
     2 Days: 1, 2019-01-01,2d
     Manual Date: 2, 2019-01-01,2019-01-03
-  </div>
-  <div class="mermaid">
+    </pre>
+    <pre class="mermaid">
     gantt
     title Inclusive end dates (Manual date should end on 4th)
     dateFormat YYYY-MM-DD
@@ -263,8 +259,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
     section Section1
     2 Days: 1, 2019-01-01,2d
     Manual Date: 2, 2019-01-01,2019-01-03
-  </div>
-  <div class="mermaid">
+    </pre>
+    <pre class="mermaid">
     gantt
     title Hide today marker (vertical line should not be visible)
     dateFormat YYYY-MM-DD
@@ -272,8 +268,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
     todayMarker off
     section Section1
     Today: 1, -1h
-  </div>
-  <div class="mermaid">
+    </pre>
+    <pre class="mermaid">
     gantt
     title Style today marker (vertical line should be 5px wide and half-transparent blue)
     dateFormat YYYY-MM-DD
@@ -281,11 +277,11 @@ Enterprise_Boundary(b0, "BankBoundary0") {
     todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
     section Section1
     Today: 1, -1h
-  </div>
+    </pre>
 
-  <hr />
+    <hr />
 
-  <div class="mermaid">
+    <pre class="mermaid">
     graph LR
     sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
 
@@ -381,16 +377,16 @@ Enterprise_Boundary(b0, "BankBoundary0") {
     sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
     sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
     sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
-  </div>
-  <div class="mermaid">
+    </pre>
+    <pre class="mermaid">
     graph TD
     A[Christmas] -->|Get money| B(Go shopping)
     B --> C{Let me thinksssssx<br />sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss}
     C -->|One| D[Laptop]
     C -->|Two| E[iPhone]
     C -->|Three| F[Car]
-  </div>
-  <div class="mermaid">
+    </pre>
+    <pre class="mermaid">
     graph TD
     A[/Christmas\]
     A -->|Get money| B[\Go shopping/]
@@ -398,8 +394,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
     C -->|One| D[/Laptop/]
     C -->|Two| E[\iPhone\]
     C -->|Three| F[Car]
-  </div>
-  <div class="mermaid">
+    </pre>
+    <pre class="mermaid">
     graph LR
     47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
     37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
@@ -421,8 +417,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
     39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits)
     35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
     36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
-  </div>
-  <div class="mermaid">
+    </pre>
+    <pre class="mermaid">
     graph TD
     9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment")
     82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1")
@@ -486,14 +482,14 @@ Enterprise_Boundary(b0, "BankBoundary0") {
     c0102290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
     9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
     9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
-  </div>
-  <div class="mermaid">
+    </pre>
+    <pre class="mermaid">
     graph TB
     subgraph One
     a1-->a2
     end
-  </div>
-  <div class="mermaid">
+    </pre>
+    <pre class="mermaid">
     graph TB
     A
     B
@@ -521,8 +517,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
 
     style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
     style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
-  </div>
-  <div class="mermaid">
+    </pre>
+    <pre class="mermaid">
     graph LR
     456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
     f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]
@@ -536,8 +532,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
     click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC
     3000"
     style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
-  </div>
-  <div class="mermaid">
+    </pre>
+    <pre class="mermaid">
     graph TD
     A[Christmas] -->|Get money| B(Go shopping)
     B --> C{{Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?}}
@@ -549,8 +545,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
     classDef someclass fill:#f96;
     class A someclass;
     class C someclass;
-  </div>
-  <div class="mermaid">
+    </pre>
+    <pre class="mermaid">
     graph TD
     A([stadium shape test])
     A -->|Get money| B([Go shopping])
@@ -563,8 +559,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
     classDef someclass fill:#f96;
     class A someclass;
     class C someclass;
-  </div>
-  <div class="mermaid">
+    </pre>
+    <pre class="mermaid">
     graph LR
     A[[subroutine shape test]]
     A -->|Get money| B[[Go shopping]]
@@ -577,8 +573,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
     classDef someclass fill:#f96;
     class A someclass;
     class C someclass;
-  </div>
-  <div class="mermaid">
+    </pre>
+    <pre class="mermaid">
     graph LR
     A[(cylindrical<br />shape<br />test)]
     A -->|Get money| B1[(Go shopping 1)]
@@ -595,8 +591,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
     click B testClick "click test"
     classDef someclass fill:#f96;
     class A someclass;
-  </div>
-  <div class="mermaid">
+    </pre>
+    <pre class="mermaid">
     graph LR
     A1[Multi<br>Line] -->|Multi<br>Line| B1(Multi<br>Line)
     C1[Multi<br />Line] -->|Multi<br />Line| D1(Multi<br />Line)
@@ -607,16 +603,16 @@ Enterprise_Boundary(b0, "BankBoundary0") {
     linkStyle 0 stroke:DarkGray,stroke-width:2px
     linkStyle 1 stroke:DarkGray,stroke-width:2px
     linkStyle 2 stroke:DarkGray,stroke-width:2px
-  </div>
-  <div class="mermaid">
+    </pre>
+    <pre class="mermaid">
     graph LR
     A(( )) -->|step 1| B(( ))
     B(( )) -->|step 2| C(( ))
     C(( )) -->|step 3| D(( ))
     linkStyle 1 stroke:greenyellow,stroke-width:2px
     style C fill:greenyellow,stroke:green,stroke-width:4px
-  </div>
-  <div class="mermaid">
+    </pre>
+    <pre class="mermaid">
     graph TB
     TITLE["Link Click Events<br>(click the nodes below)"]
     A["link test (open in same tab)"]
@@ -632,9 +628,9 @@ Enterprise_Boundary(b0, "BankBoundary0") {
     click D "mailto:user@user.user" "mailto test"
     click E "notes://do-your-thing/id" "other protocol test"
     click F "javascript:alert('test')" "script test"
-  </div>
-  <hr />
-  <div class="mermaid">
+    </pre>
+    <hr />
+    <pre class="mermaid">
     graph LR
     A[red<br>text] -->|red<br>text| B(blue<br>text)
     C[/red<br />text/] -->|blue<br />text| D{blue<br />text}
@@ -648,8 +644,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
     style D stroke:#0000ff,fill:#ccccff,color:#0000ff
     click B "index.html#link-clicked" "link test"
     click D testClick "click test"
-  </div>
-  <div class="mermaid">
+    </pre>
+    <pre class="mermaid">
     graph TD
     A[myClass1] --> B[default] & C[default]
     B[default] & C[default] --> D[myClass2]
@@ -659,11 +655,11 @@ Enterprise_Boundary(b0, "BankBoundary0") {
     classDef myClass2 stroke:#0000ff,fill:#ccccff
     class A myClass1
     class D myClass2
-  </div>
+    </pre>
 
-  <hr />
+    <hr />
 
-  <div class="mermaid">
+    <pre class="mermaid">
     sequenceDiagram
     accDescription Hello friends
     participant Alice
@@ -696,8 +692,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
     and
     Alice -->> John: Parallel message 2
     end
-  </div>
-  <div class="mermaid">
+    </pre>
+    <pre class="mermaid">
     sequenceDiagram
     participant 1 as multiline<br>using #lt;br#gt;
     participant 2 as multiline<br />using #lt;br/#gt;
@@ -711,8 +707,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
     note right of 4: multiline<br />using #lt;br /#gt;
     4->>1: multiline<br />using #lt;br /#gt;
     note right of 1: multiline<br />using #lt;br /#gt;
-  </div>
-  <div class="mermaid">
+    </pre>
+    <pre class="mermaid">
     sequenceDiagram
     autonumber
     Alice->>John: Hello John,<br>how are you?
@@ -721,11 +717,11 @@ Enterprise_Boundary(b0, "BankBoundary0") {
     John-->>Alice: Hi Alice,<br />I can hear you!
     autonumber off
     John-->>Alice: I feel great!
-  </div>
+    </pre>
 
-  <hr />
+    <hr />
 
-  <div class="mermaid">
+    <pre class="mermaid">
     gantt
     dateFormat YYYY-MM-DD
     axisFormat %d/%m
@@ -762,8 +758,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
     Describe gantt syntax :after doc1, 3d
     Add gantt diagram to demo page : 20h
     Add another diagram to demo page : 48h
-  </div>
-  <div class="mermaid">
+    </pre>
+    <pre class="mermaid">
     gantt
     dateFormat YYYY-MM-DD
     axisFormat %d/%m
@@ -793,11 +789,11 @@ Enterprise_Boundary(b0, "BankBoundary0") {
     Describe gantt syntax : after doc1, 3d
     Add gantt diagram to demo page : 20h
     Add another diagram to demo page : 48h
-  </div>
+    </pre>
 
-  <hr />
+    <hr />
 
-  <div class="mermaid">
+    <pre class="mermaid">
     gitGraph:
     options
     {
@@ -815,11 +811,11 @@ Enterprise_Boundary(b0, "BankBoundary0") {
     commit
     commit
     merge newbranch
-  </div>
+    </pre>
 
-  <hr />
+    <hr />
 
-  <div class="mermaid">
+    <pre class="mermaid">
     classDiagram
     Class01 <|-- AveryLongClass : Cool
 
@@ -841,9 +837,9 @@ Enterprise_Boundary(b0, "BankBoundary0") {
       int id
       size()
       }
-  </div>
+    </pre>
 
-  <div class="mermaid">
+    <pre class="mermaid">
     classDiagram
     class Class01~T~
     Class01 : #size()
@@ -854,9 +850,9 @@ Enterprise_Boundary(b0, "BankBoundary0") {
     int id
     size()
     }
-  </div>
+    </pre>
 
-  <div class="mermaid">
+    <pre class="mermaid">
     classDiagram
     Class01~T~ <|-- AveryLongClass : Cool
     &lt;&lt;interface&gt;&gt; Class01
@@ -877,22 +873,22 @@ Enterprise_Boundary(b0, "BankBoundary0") {
         int id
         size()
         }
-  </div>
+    </pre>
 
-  <div class="mermaid">
+    <pre class="mermaid">
     classDiagram
     Interface1 ()-- Interface1Impl
-  </div>
+    </pre>
 
-  <div class="mermaid">
+    <pre class="mermaid">
     classDiagram 
     direction LR
     Animal ()-- Dog
     Dog : bark()
     Dog : species()
-  </div>
+    </pre>
 
-  <div class="mermaid">
+    <pre class="mermaid">
     classDiagram 
     direction RL
     Fruit ()-- Apple
@@ -902,25 +898,25 @@ Enterprise_Boundary(b0, "BankBoundary0") {
     Pineapple : color()
     Pineapple : -int leafCount()
     Pineapple : -int spikeCount()
-  </div>
+    </pre>
 
-  <div class="mermaid">
+    <pre class="mermaid">
     stateDiagram
     accDescription This is a state diagram showing one state
     State1
-  </div>
+    </pre>
 
-  <hr>
+    <hr />
 
-  <div class="mermaid">
+    <pre class="mermaid">
     stateDiagram
     [*] --> First
     state First {
     [*] --> second
     second --> [*]
     }
-  </div>
-  <div class="mermaid">
+    </pre>
+    <pre class="mermaid">
     stateDiagram
     State1: The state with a note
     note right of State1
@@ -929,18 +925,18 @@ Enterprise_Boundary(b0, "BankBoundary0") {
     end note
     State1 --> State2
     note left of State2 : This is the note to the left.
-  </div>
-  <div class="mermaid">
+    </pre>
+    <pre class="mermaid">
     stateDiagram
     State1
     note right of State1
     Line1<br>Line2<br />Line3<br />Line4<br />Line5
     end note
-  </div>
+    </pre>
 
-  <hr />
+    <hr />
 
-  <div class="mermaid">
+    <pre class="mermaid">
     requirementDiagram
 
     requirement An Example {
@@ -1007,96 +1003,95 @@ Enterprise_Boundary(b0, "BankBoundary0") {
     test_req4 - derives -> test_req5
     test_req5 - refines -> test_req6
     test_entity3 - verifies -> test_req5
-    An Example <- copies - test_entity2 </div>
-  </div>
+    An Example <- copies - test_entity2
+    </pre>
 
-  <h1 id="link-clicked">Anchor for "link-clicked" test</h1>
+    <h1 id="link-clicked">Anchor for "link-clicked" test</h1>
 
-  <script src="./mermaid.js"></script>
-  <script>
-    const ALLOWED_TAGS = [
-      'a',
-  'b',
-  'blockquote',
-  'br',
-  'dd',
-  'div',
-  'dl',
-      'dt',
-  'em',
-  'foreignObject',
-  'h1',
-  'h2',
-  'h3',
-  'h4',
-      'h5',
-  'h6',
-  'h7',
-  'h8',
-  'hr',
-  'i',
-  'li',
-  'ul',
-  'ol',
-  'p',
-      'pre',
-  'span',
-  'strike',
-  'strong',
-  'table',
-  'tbody',
-      'td',
-  'tfoot',
-  'th',
-  'thead',
-  'tr',
-    ];
-    mermaid.initialize({
-      theme: 'forest',
-      // themeCSS: '.node rect { fill: red; }',
-      logLevel: 3,
-      securityLevel: 'loose',
-      flowchart: { curve: 'basis' },
-      gantt: { axisFormat: '%m/%d/%Y' },
-      sequence: { actorMargin: 50 },
-      dompurifyConfig: {
-        USE_PROFILES: {
-          svg: true,
+    <script src="./mermaid.js"></script>
+    <script>
+      const ALLOWED_TAGS = [
+        'a',
+        'b',
+        'blockquote',
+        'br',
+        'dd',
+        'div',
+        'dl',
+        'dt',
+        'em',
+        'foreignObject',
+        'h1',
+        'h2',
+        'h3',
+        'h4',
+        'h5',
+        'h6',
+        'h7',
+        'h8',
+        'hr',
+        'i',
+        'li',
+        'ul',
+        'ol',
+        'p',
+        'pre',
+        'span',
+        'strike',
+        'strong',
+        'table',
+        'tbody',
+        'td',
+        'tfoot',
+        'th',
+        'thead',
+        'tr',
+      ];
+      mermaid.initialize({
+        theme: 'forest',
+        // themeCSS: '.node rect { fill: red; }',
+        logLevel: 3,
+        securityLevel: 'loose',
+        flowchart: { curve: 'basis' },
+        gantt: { axisFormat: '%m/%d/%Y' },
+        sequence: { actorMargin: 50 },
+        dompurifyConfig: {
+          USE_PROFILES: {
+            svg: true,
+          },
+          ADD_TAGS: ALLOWED_TAGS,
+          ADD_ATTR: ['transform-origin'],
         },
-        ADD_TAGS: ALLOWED_TAGS,
-        ADD_ATTR: ['transform-origin'],
-      },
-      // sequenceDiagram: { actorMargin: 300 } // deprecated
-    });
-  </script>
-  <script>
-    function ganttTestClick(a, b, 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);
-    }
-  </script>
-  <script>
-    const testLineEndings = (test, input) => {
-      try {
-        mermaid.render(test, input, () => {});
-      } catch (err) {
-        console.error('Error in %s:\n\n%s', test, err);
+        // sequenceDiagram: { actorMargin: 300 } // deprecated
+      });
+    </script>
+    <script>
+      function ganttTestClick(a, b, c) {
+        console.log('a:', a);
+        console.log('b:', b);
+        console.log('c:', c);
       }
-    };
-
-    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>
+      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);
+      }
+    </script>
+    <script>
+      const testLineEndings = (test, input) => {
+        try {
+          mermaid.render(test, input, () => {});
+        } catch (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');
+    </script>
+  </body>
 </html>
diff --git a/demos/journey.html b/demos/journey.html
index 177d956ba..6a2544d44 100644
--- a/demos/journey.html
+++ b/demos/journey.html
@@ -1,21 +1,20 @@
 <!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>
+      div.mermaid {
+        /* font-family: 'trebuchet ms', verdana, arial; */
+        font-family: 'Courier New', Courier, monospace !important;
+      }
+    </style>
+  </head>
 
-<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>
-		div.mermaid {
-			/* font-family: 'trebuchet ms', verdana, arial; */
-			font-family: 'Courier New', Courier, monospace !important;
-		}
-	</style>
-</head>
-
-<body>
-	<div class="mermaid">
+  <body>
+    <pre class="mermaid">
         journey
         title My day
         accDescription A user journey diagram of a typical day in my life
@@ -26,20 +25,18 @@
         section Go home
           Go downstairs: 5: Me
           Sit down: 5: Me
-	</div>
+				</pre>
 
-	<script src="./mermaid.js"></script>
-	<script>
-		mermaid.initialize({
-		  theme: 'forest',
-		  logLevel: 3,
-		  securityLevel: 'loose',
-		  flowchart: { curve: 'basis' },
-		  gantt: { axisFormat: '%m/%d/%Y' },
-		  sequence: { actorMargin: 50 },
-		});
-	</script>
-
-</body>
-
-</html>
\ No newline at end of file
+    <script src="./mermaid.js"></script>
+    <script>
+      mermaid.initialize({
+        theme: 'forest',
+        logLevel: 3,
+        securityLevel: 'loose',
+        flowchart: { curve: 'basis' },
+        gantt: { axisFormat: '%m/%d/%Y' },
+        sequence: { actorMargin: 50 },
+      });
+    </script>
+  </body>
+</html>
diff --git a/demos/requirements.html b/demos/requirements.html
index e2dfd738a..6bbd684a8 100644
--- a/demos/requirements.html
+++ b/demos/requirements.html
@@ -1,23 +1,20 @@
 <!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>
+      div.mermaid {
+        /* font-family: 'trebuchet ms', verdana, arial; */
+        font-family: 'Courier New', Courier, monospace !important;
+      }
+    </style>
+  </head>
 
-<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>
-		div.mermaid {
-			/* font-family: 'trebuchet ms', verdana, arial; */
-			font-family: 'Courier New', Courier, monospace !important;
-		}
-	</style>
-</head>
-
-<body>
-
-
-	<div class="mermaid">
+  <body>
+    <pre class="mermaid">
 	requirementDiagram
 	title This is a title
 	requirement test_req {
@@ -85,22 +82,21 @@
 	test_req5 - refines -> test_req6
 	test_entity3 - verifies -> test_req5
 	test_req <- copies - test_entity2
-	</div>
+		</pre
+    >
 
-	<script src="./mermaid.js"></script>
-	<script>
-		mermaid.initialize({
-		  theme: 'forest',
-		  // themeCSS: '.node rect { fill: red; }',
-		  logLevel: 3,
-		  securityLevel: 'loose',
-		  flowchart: { curve: 'basis' },
-		  gantt: { axisFormat: '%m/%d/%Y' },
-		  sequence: { actorMargin: 50 },
-		  // sequenceDiagram: { actorMargin: 300 } // deprecated
-		});
-	</script>
-
-</body>
-
-</html>
\ No newline at end of file
+    <script src="./mermaid.js"></script>
+    <script>
+      mermaid.initialize({
+        theme: 'forest',
+        // themeCSS: '.node rect { fill: red; }',
+        logLevel: 3,
+        securityLevel: 'loose',
+        flowchart: { curve: 'basis' },
+        gantt: { axisFormat: '%m/%d/%Y' },
+        sequence: { actorMargin: 50 },
+        // sequenceDiagram: { actorMargin: 300 } // deprecated
+      });
+    </script>
+  </body>
+</html>
diff --git a/demos/sequence.html b/demos/sequence.html
index 800d44779..4bdf3ee73 100644
--- a/demos/sequence.html
+++ b/demos/sequence.html
@@ -1,23 +1,20 @@
 <!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>
+      div.mermaid {
+        /* font-family: 'trebuchet ms', verdana, arial; */
+        font-family: 'Courier New', Courier, monospace !important;
+      }
+    </style>
+  </head>
 
-<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>
-		div.mermaid {
-			/* font-family: 'trebuchet ms', verdana, arial; */
-			font-family: 'Courier New', Courier, monospace !important;
-		}
-	</style>
-</head>
-
-<body>
-
-
-	<div class="mermaid">
+  <body>
+    <pre class="mermaid">
 		sequenceDiagram
 		title: FancySequenceDiagram
 		accDescription Test a description
@@ -56,22 +53,20 @@
 		and
 		Alice -->> John: Parallel message 2
 		end
-	</div>
-
-	<script src="./mermaid.js"></script>
-	<script>
-		mermaid.initialize({
-		  theme: 'forest',
-		  // themeCSS: '.node rect { fill: red; }',
-		  logLevel: 3,
-		  securityLevel: 'loose',
-		  flowchart: { curve: 'basis' },
-		  gantt: { axisFormat: '%m/%d/%Y' },
-		  sequence: { actorMargin: 50 },
-		  // sequenceDiagram: { actorMargin: 300 } // deprecated
-		});
-	</script>
-
-</body>
+	</pre>
 
+    <script src="./mermaid.js"></script>
+    <script>
+      mermaid.initialize({
+        theme: 'forest',
+        // themeCSS: '.node rect { fill: red; }',
+        logLevel: 3,
+        securityLevel: 'loose',
+        flowchart: { curve: 'basis' },
+        gantt: { axisFormat: '%m/%d/%Y' },
+        sequence: { actorMargin: 50 },
+        // sequenceDiagram: { actorMargin: 300 } // deprecated
+      });
+    </script>
+  </body>
 </html>
diff --git a/demos/state.html b/demos/state.html
index fd621e2e5..374d6bbae 100644
--- a/demos/state.html
+++ b/demos/state.html
@@ -1,50 +1,45 @@
 <!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>
+      div.mermaid {
+        /* font-family: 'trebuchet ms', verdana, arial; */
+        font-family: 'Courier New', Courier, monospace !important;
+      }
+    </style>
+  </head>
 
-<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>
-		div.mermaid {
-			/* font-family: 'trebuchet ms', verdana, arial; */
-			font-family: 'Courier New', Courier, monospace !important;
-		}
-	</style>
-</head>
-
-<body>
-
-
-	<div class="mermaid">
+  <body>
+    <pre class="mermaid">
 		stateDiagram
 		title This is a title
         accDescription This is an accessible description
         State1
-	</div>
+    </pre>
 
-	<div class="mermaid">
+    <pre class="mermaid">
 		stateDiagram-v2
 		title This is a title
         accDescription This is an accessible description
         State1
-	</div>
-
-	<script src="./mermaid.js"></script>
-	<script>
-		mermaid.initialize({
-		  theme: 'forest',
-		  // themeCSS: '.node rect { fill: red; }',
-		  logLevel: 3,
-		  securityLevel: 'loose',
-		  flowchart: { curve: 'basis' },
-		  gantt: { axisFormat: '%m/%d/%Y' },
-		  sequence: { actorMargin: 50 },
-		  // sequenceDiagram: { actorMargin: 300 } // deprecated
-		});
-	</script>
-
-</body>
+    </pre>
 
+    <script src="./mermaid.js"></script>
+    <script>
+      mermaid.initialize({
+        theme: 'forest',
+        // themeCSS: '.node rect { fill: red; }',
+        logLevel: 3,
+        securityLevel: 'loose',
+        flowchart: { curve: 'basis' },
+        gantt: { axisFormat: '%m/%d/%Y' },
+        sequence: { actorMargin: 50 },
+        // sequenceDiagram: { actorMargin: 300 } // deprecated
+      });
+    </script>
+  </body>
 </html>
diff --git a/docs/classDiagram.md b/docs/classDiagram.md
index 8bb8f2c40..87d76cd37 100644
--- a/docs/classDiagram.md
+++ b/docs/classDiagram.md
@@ -100,7 +100,7 @@ class BankAccount{
 
 #### Return Type
 
-Optionally you can end a method/function definition with the data type that will be returned (note: there must be a space between the final `)` and the return type).  An example:
+Optionally you can end a method/function definition with the data type that will be returned (note: there must be a space between the final `)` and the return type). An example:
 
 ```mermaid-example
 classDiagram
@@ -146,13 +146,14 @@ To describe the visibility (or encapsulation) of an attribute or method/function
 - `~` Package/Internal
 
 > _note_ you can also include additional _classifiers_ to a method definition by adding the following notation to the _end_ of the method, i.e.: after the `()`:
+>
 > - `*` Abstract e.g.: `someAbstractMethod()*`
 > - `$` Static e.g.: `someStaticMethod()$`
 
 > _note_ you can also include additional _classifiers_ to a field definition by adding the following notation to the end of its name:
+>
 > - `$` Static e.g.: `String someField$`
 
-
 ## Defining Relationship
 
 A relationship is a general term covering the specific types of logical connections found on class and object diagrams.
@@ -234,7 +235,6 @@ Here is the syntax:
 
 Where `Relation Type` can be one of:
 
-
 | Type | Description |
 | ---- | ----------- |
 | <\|  | Inheritance |
@@ -282,7 +282,7 @@ classDiagram
 
 ## Annotations on classes
 
-It is possible to annotate classes with markers to provide additional metadata about the class.  This can give a clearer indication about its nature. Some common annotations include:
+It is possible to annotate classes with markers to provide additional metadata about the class. This can give a clearer indication about its nature. Some common annotations include:
 
 - `<<Interface>>` To represent an Interface class
 - `<<Abstract>>` To represent an abstract class
@@ -355,7 +355,7 @@ classDiagram
   }
   Student "1" --o "1" IdCard : carries
   Student "1" --o "1" Bike : rides
- ```
+```
 
 ## Interaction
 
@@ -368,6 +368,7 @@ action className "reference" "tooltip"
 click className call callback() "tooltip"
 click className href "url" "tooltip"
 ```
+
 - _action_ is either `link` or `callback`, depending on which type of interaction you want to have called
 - _className_ is the id of the node that the action will be associated with
 - _reference_ is either the url link, or the function name for callback.
@@ -398,9 +399,9 @@ click Shape2 call callbackFunction() "This is a tooltip for a callback"
 
 ```html
 <script>
-    var callbackFunction = function () {
-      alert('A callback was triggered');
-    };
+  var callbackFunction = function () {
+    alert('A callback was triggered');
+  };
 </script>
 ```
 
@@ -422,7 +423,7 @@ Beginner's tip—a full example using interactive links in an HTML page:
 
 ```html
 <body>
-  <div class="mermaid">
+  <pre class="mermaid">
     classDiagram
     Animal <|-- Duck
     Animal <|-- Fish
@@ -447,15 +448,15 @@ Beginner's tip—a full example using interactive links in an HTML page:
 
       callback Duck callback "Tooltip"
       link Zebra "https://www.github.com" "This is a link"
-  </div>
+  </pre>
 
   <script>
     var callback = function () {
-        alert('A callback was triggered');
+      alert('A callback was triggered');
     };
     var config = {
-        startOnLoad: true,
-        securityLevel: 'loose'
+      startOnLoad: true,
+      securityLevel: 'loose',
     };
     mermaid.initialize(config);
   </script>
@@ -470,11 +471,11 @@ It is possible to apply specific styles such as a thicker border or a different
 
 ```html
 <style>
-    .cssClass > rect{
-        fill:#FF0000;
-        stroke:#FFFF00;
-        stroke-width:4px;
-    }
+  .cssClass > rect {
+    fill: #ff0000;
+    stroke: #ffff00;
+    stroke-width: 4px;
+  }
 </style>
 ```
 
@@ -509,7 +510,7 @@ classDiagram
 
 ?> cssClasses cannot be added using this shorthand method at the same time as a relation statement.
 
-?> Due to limitations with existing markup for class diagrams, it is not currently possible to define css classes within the diagram itself.  ***Coming soon!***
+?> Due to limitations with existing markup for class diagrams, it is not currently possible to define css classes within the diagram itself. **_Coming soon!_**
 
 ### Default Styles
 
@@ -531,91 +532,91 @@ The main styling of the class diagram is done with a preset number of css classe
 
 ```scss
 body {
-    background: white;
+  background: white;
 }
 
 g.classGroup text {
-    fill: $nodeBorder;
-    stroke: none;
-    font-family: 'trebuchet ms', verdana, arial;
-    font-family: var(--mermaid-font-family);
-    font-size: 10px;
+  fill: $nodeBorder;
+  stroke: none;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
+  font-size: 10px;
 
-    .title {
-        font-weight: bolder;
-    }
+  .title {
+    font-weight: bolder;
+  }
 }
 
 g.classGroup rect {
-    fill: $nodeBkg;
-    stroke: $nodeBorder;
+  fill: $nodeBkg;
+  stroke: $nodeBorder;
 }
 
 g.classGroup line {
-    stroke: $nodeBorder;
-    stroke-width: 1;
+  stroke: $nodeBorder;
+  stroke-width: 1;
 }
 
 .classLabel .box {
-    stroke: none;
-    stroke-width: 0;
-    fill: $nodeBkg;
-    opacity: 0.5;
+  stroke: none;
+  stroke-width: 0;
+  fill: $nodeBkg;
+  opacity: 0.5;
 }
 
 .classLabel .label {
-    fill: $nodeBorder;
-    font-size: 10px;
+  fill: $nodeBorder;
+  font-size: 10px;
 }
 
 .relation {
-    stroke: $nodeBorder;
-    stroke-width: 1;
-    fill: none;
+  stroke: $nodeBorder;
+  stroke-width: 1;
+  fill: none;
 }
 
 @mixin composition {
-    fill: $nodeBorder;
-    stroke: $nodeBorder;
-    stroke-width: 1;
+  fill: $nodeBorder;
+  stroke: $nodeBorder;
+  stroke-width: 1;
 }
 
 #compositionStart {
-    @include composition;
+  @include composition;
 }
 
 #compositionEnd {
-    @include composition;
+  @include composition;
 }
 
 @mixin aggregation {
-    fill: $nodeBkg;
-    stroke: $nodeBorder;
-    stroke-width: 1;
+  fill: $nodeBkg;
+  stroke: $nodeBorder;
+  stroke-width: 1;
 }
 
 #aggregationStart {
-    @include aggregation;
+  @include aggregation;
 }
 
 #aggregationEnd {
-    @include aggregation;
+  @include aggregation;
 }
 
 #dependencyStart {
-    @include composition;
+  @include composition;
 }
 
 #dependencyEnd {
-    @include composition;
+  @include composition;
 }
 
 #extensionStart {
-    @include composition;
+  @include composition;
 }
 
 #extensionEnd {
-    @include composition;
+  @include composition;
 }
 ```
 
diff --git a/docs/diagrams-and-syntax-and-examples/flowchart.md b/docs/diagrams-and-syntax-and-examples/flowchart.md
index a33927803..252faadc2 100644
--- a/docs/diagrams-and-syntax-and-examples/flowchart.md
+++ b/docs/diagrams-and-syntax-and-examples/flowchart.md
@@ -25,20 +25,19 @@ graph LR
 
 Possible FlowChart orientations are:
 
-* TB - top to bottom
-* TD - top-down (same as top to bottom)
-* BT - bottom to top
-* RL - right to left
-* LR - left to right
-
+- TB - top to bottom
+- TD - top-down (same as top to bottom)
+- BT - bottom to top
+- RL - right to left
+- LR - left to right
 
 ## Flowcharts
 
 This renders a flowchart that allows for features such as: more arrow types, multi directional arrows, and linking to and from subgraphs.
 
-Apart from the graph type, the syntax is the same. This is currently experimental.  When the beta period is over, both the graph and flowchart keywords will render in this new way. At this point it is OK to start beta testing flowcharts.
+Apart from the graph type, the syntax is the same. This is currently experimental. When the beta period is over, both the graph and flowchart keywords will render in this new way. At this point it is OK to start beta testing flowcharts.
 
-> **Important note** Do not type the word "end" as a Flowchart node. Capitalize all or any one the letters to keep the flowchart from breaking, i.e, "End" or "END". Or you can apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897).**
+> **Important note** Do not type the word "end" as a Flowchart node. Capitalize all or any one the letters to keep the flowchart from breaking, i.e, "End" or "END". Or you can apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897).\*\*
 
 ## Nodes and shapes
 
@@ -105,7 +104,8 @@ graph LR
 graph LR
     id1>This is the text in the box]
 ```
-Currently it is only possible to render the shape above, and not its mirror. *This might change with future releases.*
+
+Currently it is only possible to render the shape above, and not its mirror. _This might change with future releases._
 
 ### A node (rhombus)
 
@@ -127,6 +127,7 @@ graph LR
 graph TD
     id1[/This is the text in the box/]
 ```
+
 ### Parallelogram alt
 
 ```mermaid-example
@@ -140,6 +141,7 @@ graph TD
 graph TD
     A[/Christmas\]
 ```
+
 ### Trapezoid alt
 
 ```mermaid-example
@@ -224,23 +226,28 @@ graph LR
 ### Chaining of links
 
 It is possible to declare many links on the same line as per below:
+
 ```mermaid-example
 graph LR
    A -- text --> B -- text2 --> C
 ```
 
 It is also possible to declare multiple nodes links in the same line as per below:
+
 ```mermaid-example
 graph LR
    a --> b & c--> d
 ```
 
 You can then describe dependencies in a very expressive way. Like the one-liner below:
+
 ```mermaid-example
 graph TB
     A & B--> C & D
 ```
+
 If you describe the same diagram using the the basic syntax, it will take four lines:
+
 ```mmd
 graph TB
     A --> C
@@ -248,6 +255,7 @@ graph TB
     B --> C
     B --> D
 ```
+
 A word of warning, one could go overboard with this, making the graph harder to read in
 markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little.
 This goes for expressive syntaxes as well.
@@ -312,12 +320,12 @@ graph TD
 For dotted or thick links, the characters to add are equals signs or dots,
 as summed up in the following table:
 
-| Length            |    1   |    2    |     3    |
-|-------------------|:------:|:-------:|:--------:|
-| Normal            |  `---` |  `----` |  `-----` |
-| Normal with arrow |  `-->` |  `--->` |  `---->` |
-| Thick             |  `===` |  `====` |  `=====` |
-| Thick with arrow  |  `==>` |  `===>` |  `====>` |
+| Length            |   1    |    2    |    3     |
+| ----------------- | :----: | :-----: | :------: |
+| Normal            | `---`  | `----`  | `-----`  |
+| Normal with arrow | `-->`  | `--->`  | `---->`  |
+| Thick             | `===`  | `====`  | `=====`  |
+| Thick with arrow  | `==>`  | `===>`  | `====>`  |
 | Dotted            | `-.-`  | `-..-`  | `-...-`  |
 | Dotted with arrow | `-.->` | `-..->` | `-...->` |
 
@@ -361,7 +369,7 @@ graph TB
     subgraph three
     c1-->c2
     end
- ```
+```
 
 You can also set an explicit id for the subgraph:
 
@@ -371,7 +379,7 @@ graph TB
     subgraph ide1 [one]
     a1-->a2
     end
- ```
+```
 
 ## Flowcharts
 
@@ -392,7 +400,7 @@ flowchart TB
     one --> two
     three --> two
     two --> c2
- ```
+```
 
 ## Interaction
 
@@ -403,8 +411,8 @@ click nodeId callback
 click nodeId call callback()
 ```
 
-* nodeId is the id of the node
-* `callback` is the name of a JavaScript function defined on the page displaying the graph. The function will be called with the nodeId as an incoming parameter.
+- nodeId is the id of the node
+- `callback` is the name of a JavaScript function defined on the page displaying the graph. The function will be called with the nodeId as an incoming parameter.
 
 ```html
 <script>
@@ -428,11 +436,13 @@ graph LR;
     click A call callback() "Tooltip for a callback"
     click B href "https://www.github.com" "This is a tooltip for a link"
 ```
+
 > **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.
 
 ?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/s37cjoau/3/).
 
 Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported):
+
 ```mermaid-example
 graph LR;
     A-->B;
@@ -449,7 +459,7 @@ Beginner's tip—here's a full example of using interactive links in HTML:
 
 ```html
 <body>
-  <div class="mermaid">
+  <pre class="mermaid">
     graph LR;
         A-->B;
         B-->C;
@@ -458,20 +468,20 @@ Beginner's tip—here's a full example of using interactive links in HTML:
         click B "https://www.github.com" "This is a link"
         click C call callback() "Tooltip"
         click D href "https://www.github.com" "This is a link"
-  </div>
+  </pre>
 
   <script>
     var callback = function () {
-        alert('A callback was triggered');
+      alert('A callback was triggered');
     };
     var config = {
-        startOnLoad: true,
-        flowchart: {
-            useMaxWidth: true,
-            htmlLabels: true,
-            curve: 'cardinal'
-        },
-        securityLevel: 'loose'
+      startOnLoad: true,
+      flowchart: {
+        useMaxWidth: true,
+        htmlLabels: true,
+        curve: 'cardinal',
+      },
+      securityLevel: 'loose',
     };
     mermaid.initialize(config);
   </script>
@@ -480,7 +490,7 @@ Beginner's tip—here's a full example of using interactive links in HTML:
 
 ### Comments
 
-Comments can be entered within a flow diagram, which will be ignored by the parser.  Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text until the next newline will be treated as a comment, including all punctuation and any flow syntax.
+Comments can be entered within a flow diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text until the next newline will be treated as a comment, including all punctuation and any flow syntax.
 
 ```mmd
 graph LR
@@ -532,7 +542,6 @@ graph LR
     style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
 ```
 
-
 #### Classes
 
 More convenient than defining the style every time is to define a class of styles and attach this class reference to multiple nodes.
@@ -563,7 +572,6 @@ graph LR
     classDef someclass fill:#f96;
 ```
 
-
 ### Css classes
 
 It is also possible to predefine classes in css styles that can be applied from the graph definition:
@@ -572,9 +580,9 @@ It is also possible to predefine classes in css styles that can be applied from
 
 ```css
 .cssClass > rect {
-    fill: #FF0000;
-    stroke: #FFFF00;
-    stroke-width: 4px;
+  fill: #ff0000;
+  stroke: #ffff00;
+  stroke-width: 4px;
 }
 ```
 
@@ -587,7 +595,6 @@ graph LR;
     class A cssClass;
 ```
 
-
 ### Default class
 
 If a class is named `default` it will be assigned to all nodes that do not have a specific class definition.
@@ -596,10 +603,9 @@ If a class is named `default` it will be assigned to all nodes that do not have
     classDef default fill:#f9f,stroke:#333,stroke-width:4px;
 ```
 
-
 ## Basic support for fontawesome
 
-It is possible to add icons from fontawesome.  These are accessed via the syntax fa:#icon-class-name#.
+It is possible to add icons from fontawesome. These are accessed via the syntax fa:#icon-class-name#.
 
 ```mermaid-example
 graph TD
@@ -609,12 +615,11 @@ graph TD
     B-->E(A fa:fa-camera-retro perhaps?);
 ```
 
-
 ## Graph declarations with spaces between vertices and link and without semicolon
 
-* After release 0.2.16, graph declaration statements do not need to end with a semicolon. (And they can continue to have the ending semicolon—it has now just become optional.) So the below graph declaration is valid along with the old declarations.
+- After release 0.2.16, graph declaration statements do not need to end with a semicolon. (And they can continue to have the ending semicolon—it has now just become optional.) So the below graph declaration is valid along with the old declarations.
 
-* A single space is allowed between vertices and the link, however there should not be any space between a vertex and its text, or a link and its text. The old syntax of graph declarations will also work, so this new feature is optional and is introduced to improve readability.
+- A single space is allowed between vertices and the link, however there should not be any space between a vertex and its text, or a link and its text. The old syntax of graph declarations will also work, so this new feature is optional and is introduced to improve readability.
 
 Below is an example of the new way to declare graph edges. This is valid alongside any old-style declarations of graph edges.
 
@@ -626,7 +631,6 @@ graph LR
     C -->|Two| E[Result two]
 ```
 
-
 ## Configuration...
 
 Is it possible to adjust the width of the rendered flowchart.
@@ -636,6 +640,6 @@ In Javascript config parameters can be set by using `mermaid.flowchartConfig`:
 
 ```javascript
 mermaid.flowchartConfig = {
-    width: '100%'
-}
+  width: '100%',
+};
 ```
diff --git a/docs/flowchart.md b/docs/flowchart.md
index 433bd8fa0..a6fde028d 100644
--- a/docs/flowchart.md
+++ b/docs/flowchart.md
@@ -6,7 +6,7 @@ All Flowcharts are composed of **nodes**, the geometric shapes and **edges**, th
 
 It can also accommodate different arrow types, multi directional arrows, and linking to and from subgraphs.
 
-> **Important note**: Do not type the word "end" as a Flowchart node. Capitalize all or any one the letters to keep the flowchart from breaking, i.e, "End" or "END". Or you can apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897).**
+> **Important note**: Do not type the word "end" as a Flowchart node. Capitalize all or any one the letters to keep the flowchart from breaking, i.e, "End" or "END". Or you can apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897).\*\*
 
 ### A node (default)
 
@@ -50,11 +50,11 @@ flowchart LR
 
 Possible FlowChart orientations are:
 
-* TB - top to bottom
-* TD - top-down/ same as top to bottom
-* BT - bottom to top
-* RL - right to left
-* LR - left to right
+- TB - top to bottom
+- TD - top-down/ same as top to bottom
+- BT - bottom to top
+- RL - right to left
+- LR - left to right
 
 ## Node shapes
 
@@ -99,7 +99,8 @@ flowchart LR
 flowchart LR
     id1>This is the text in the box]
 ```
-Currently only the shape above is possible and not its mirror. *This might change with future releases.*
+
+Currently only the shape above is possible and not its mirror. _This might change with future releases._
 
 ### A node (rhombus)
 
@@ -109,6 +110,7 @@ flowchart LR
 ```
 
 ### A hexagon node
+
 ```mermaid-example
 flowchart LR
     id1{{This is the text in the box}}
@@ -134,6 +136,7 @@ flowchart TD
 flowchart TD
     A[/Christmas\]
 ```
+
 ### Trapezoid alt
 
 ```mermaid-example
@@ -225,26 +228,31 @@ flowchart LR
 ### Chaining of links
 
 It is possible declare many links in the same line as per below:
+
 ```mermaid-example
 flowchart LR
    A -- text --> B -- text2 --> C
 ```
 
 It is also possible to declare multiple nodes links in the same line as per below:
+
 ```mermaid-example
 flowchart LR
    a --> b & c--> d
 ```
 
 You can then describe dependencies in a very expressive way. Like the one-liner below:
+
 ```mermaid-example
 flowchart TB
     A & B--> C & D
 ```
+
 If you describe the same diagram using the the basic syntax, it will take four lines. A
 word of warning, one could go overboard with this making the flowchart harder to read in
 markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little.
 This goes for expressive syntaxes as well.
+
 ```mmd
 flowchart TB
     A --> C
@@ -263,7 +271,6 @@ flowchart LR
     B --x C
 ```
 
-
 ### Multi directional arrows
 
 There is the possibility to use multidirectional arrows.
@@ -314,12 +321,12 @@ flowchart TD
 For dotted or thick links, the characters to add are equals signs or dots,
 as summed up in the following table:
 
-| Length            |    1   |    2    |     3    |
-|-------------------|:------:|:-------:|:--------:|
-| Normal            |  `---` |  `----` |  `-----` |
-| Normal with arrow |  `-->` |  `--->` |  `---->` |
-| Thick             |  `===` |  `====` |  `=====` |
-| Thick with arrow  |  `==>` |  `===>` |  `====>` |
+| Length            |   1    |    2    |    3     |
+| ----------------- | :----: | :-----: | :------: |
+| Normal            | `---`  | `----`  | `-----`  |
+| Normal with arrow | `-->`  | `--->`  | `---->`  |
+| Thick             | `===`  | `====`  | `=====`  |
+| Thick with arrow  | `==>`  | `===>`  | `====>`  |
 | Dotted            | `-.-`  | `-..-`  | `-...-`  |
 | Dotted with arrow | `-.->` | `-..->` | `-...->` |
 
@@ -365,9 +372,9 @@ flowchart TB
     subgraph three
     c1-->c2
     end
- ```
+```
 
- You can also set an explicit id for the subgraph.
+You can also set an explicit id for the subgraph.
 
 ```mermaid-example
 flowchart TB
@@ -375,7 +382,7 @@ flowchart TB
     subgraph ide1 [one]
     a1-->a2
     end
- ```
+```
 
 ## flowcharts
 
@@ -396,9 +403,9 @@ flowchart TB
     one --> two
     three --> two
     two --> c2
- ```
+```
 
- ## Direction in subgraphs
+## Direction in subgraphs
 
 With the graphtype flowcharts you can use the direction statement to set the direction which the subgraph will render like in this example.
 
@@ -417,7 +424,7 @@ flowchart LR
   end
   A --> TOP --> B
   B1 --> B2
- ```
+```
 
 ## Interaction
 
@@ -428,15 +435,15 @@ click nodeId callback
 click nodeId call callback()
 ```
 
-* nodeId is the id of the node
-* callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the nodeId as parameter.
+- nodeId is the id of the node
+- callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the nodeId as parameter.
 
 Examples of tooltip usage below:
 
 ```html
 <script>
   var callback = function () {
-      alert('A callback was triggered');
+    alert('A callback was triggered');
   };
 </script>
 ```
@@ -459,6 +466,7 @@ flowchart LR
 ?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/s37cjoau/3/).
 
 Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported):
+
 ```mermaid-example
 flowchart LR
     A-->B
@@ -472,9 +480,10 @@ flowchart LR
 ```
 
 Beginner's tip—a full example using interactive links in a html context:
+
 ```html
 <body>
-  <div class="mermaid">
+  <pre class="mermaid">
     flowchart LR
         A-->B
         B-->C
@@ -483,16 +492,16 @@ Beginner's tip—a full example using interactive links in a html context:
         click B "https://www.github.com" "This is a link"
         click C call callback() "Tooltip"
         click D href "https://www.github.com" "This is a link"
-  </div>
+  </pre>
 
   <script>
     var callback = function () {
-        alert('A callback was triggered');
+      alert('A callback was triggered');
     };
     var config = {
-        startOnLoad: true,
-        flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
-        securityLevel:'loose'
+      startOnLoad: true,
+      flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
+      securityLevel: 'loose',
     };
     mermaid.initialize(config);
   </script>
@@ -501,7 +510,7 @@ Beginner's tip—a full example using interactive links in a html context:
 
 ### Comments
 
-Comments can be entered within a flow diagram, which will be ignored by the parser.  Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any flow syntax
+Comments can be entered within a flow diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any flow syntax
 
 ```mmd
 flowchart LR
@@ -550,7 +559,6 @@ flowchart LR
     style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
 ```
 
-
 #### Classes
 
 More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that
@@ -558,7 +566,6 @@ should have a different look.
 
 a class definition looks like the example below:
 
-
 ```
     classDef className fill:#f9f,stroke:#333,stroke-width:4px;
 ```
@@ -583,7 +590,6 @@ flowchart LR
     classDef someclass fill:#f96;
 ```
 
-
 ### Css classes
 
 It is also possible to predefine classes in css styles that can be applied from the graph definition as in the example
@@ -593,11 +599,11 @@ below:
 
 ```html
 <style>
-    .cssClass > rect{
-        fill:#FF0000;
-        stroke:#FFFF00;
-        stroke-width:4px;
-    }
+  .cssClass > rect {
+    fill: #ff0000;
+    stroke: #ffff00;
+    stroke-width: 4px;
+  }
 </style>
 ```
 
@@ -610,7 +616,6 @@ flowchart LR;
     class A cssClass
 ```
 
-
 ### Default class
 
 If a class is named default it will be assigned to all classes without specific class definitions.
@@ -619,7 +624,6 @@ If a class is named default it will be assigned to all classes without specific
     classDef default fill:#f9f,stroke:#333,stroke-width:4px;
 ```
 
-
 ## Basic support for fontawesome
 
 It is possible to add icons from fontawesome.
@@ -636,12 +640,11 @@ flowchart TD
 
 ?> Mermaid is now only compatible with Font Awesome versions 4 and 5. Check that you are using the correct version of Font Awesome.
 
-
 ## Graph declarations with spaces between vertices and link and without semicolon
 
-* In graph declarations, the statements also can now end without a semicolon. After release 0.2.16, ending a graph statement with semicolon is just optional. So the below graph declaration is also valid along with the old declarations of the graph.
+- In graph declarations, the statements also can now end without a semicolon. After release 0.2.16, ending a graph statement with semicolon is just optional. So the below graph declaration is also valid along with the old declarations of the graph.
 
-* A single space is allowed between vertices and the link. However there should not be any space between a vertex and its text and a link and its text. The old syntax of graph declaration will also work and hence this new feature is optional and is introduced to improve readability.
+- A single space is allowed between vertices and the link. However there should not be any space between a vertex and its text and a link and its text. The old syntax of graph declaration will also work and hence this new feature is optional and is introduced to improve readability.
 
 Below is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges.
 
@@ -653,7 +656,6 @@ flowchart LR
     C -->|Two| E[Result two]
 ```
 
-
 ## Configuration...
 
 Is it possible to adjust the width of the rendered flowchart.
diff --git a/docs/gantt.md b/docs/gantt.md
index 0207412c0..cd0ef6b03 100644
--- a/docs/gantt.md
+++ b/docs/gantt.md
@@ -2,18 +2,17 @@
 
 > A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrates a project schedule and the amount of time it would take for any one project to finish. Gantt charts illustrate number of days between the start and finish dates of the terminal elements and summary elements of a project.
 
- ## A note to users
- Gantt Charts will record each scheduled task as one continuous bar that extends from the left to the right. The x axis represents time and the y records the different tasks and the order in which they are to be completed.
+## A note to users
 
+Gantt Charts will record each scheduled task as one continuous bar that extends from the left to the right. The x axis represents time and the y records the different tasks and the order in which they are to be completed.
 
- It is important to remember that when a date, day, or collection of dates specific to a task are "excluded", the Gantt Chart will accommodate those changes by extending an equal number of days, towards the right, not by creating a gap inside the task.
- As shown here ![](./img/Gantt-excluded-days-within.png)
+It is important to remember that when a date, day, or collection of dates specific to a task are "excluded", the Gantt Chart will accommodate those changes by extending an equal number of days, towards the right, not by creating a gap inside the task.
+As shown here ![](./img/Gantt-excluded-days-within.png)
 
+However, if the excluded dates are between two tasks that are set to start consecutively, the excluded dates will be skipped graphically and left blank, and the following task will begin after the end of the excluded dates.
+As shown here ![](./img/Gantt-long-weekend-look.png)
 
- However, if the excluded dates are between two tasks that are set to start consecutively, the excluded dates will be skipped graphically and left blank, and the following task will begin after the end of the excluded dates.
- As shown here ![](./img/Gantt-long-weekend-look.png)
-
- A Gantt chart is useful for tracking the amount of time it would take before a project is finished, but it can also be used to graphically represent "non-working days", with a few tweaks.
+A Gantt chart is useful for tracking the amount of time it would take before a project is finished, but it can also be used to graphically represent "non-working days", with a few tweaks.
 
 Mermaid can render Gantt diagrams as SVG, PNG or a MarkDown link that can be pasted into docs.
 
@@ -75,37 +74,35 @@ It is possible to set multiple dependencies separated by space:
 
 ### Title
 
-The `title` is an *optional* string to be displayed at the top of the Gantt chart to describe the chart as a whole.
-
+The `title` is an _optional_ string to be displayed at the top of the Gantt chart to describe the chart as a whole.
 
 ### Section statements
 
 You can divide the chart into various sections, for example to separate different parts of a project like development and documentation.
 
-To do so, start a line with the `section` keyword and give it a name. (Note that unlike with the [title for the entire chart](#title), this name is *required*.
+To do so, start a line with the `section` keyword and give it a name. (Note that unlike with the [title for the entire chart](#title), this name is _required_.
 
 ### Milestones
 
-You can add milestones to the diagrams. Milestones differ from tasks as they represent a single instant in time and are identified by the keyword `milestone`. Below is an example on how to use milestones. As you may notice, the exact location of the milestone is determined by the initial date for the milestone and the "duration" of the task this way: *initial date*+*duration*/2.
+You can add milestones to the diagrams. Milestones differ from tasks as they represent a single instant in time and are identified by the keyword `milestone`. Below is an example on how to use milestones. As you may notice, the exact location of the milestone is determined by the initial date for the milestone and the "duration" of the task this way: _initial date_+_duration_/2.
 
 ```mermaid-example
-gantt 
+gantt
 dateFormat HH:mm
 axisFormat %H:%M
 Initial milestone : milestone, m1, 17:49,2min
 taska2 : 10min
-taska3 : 5min 
+taska3 : 5min
 Final milestone : milestone, m2, 18:14, 2min
 ```
 
-
 ## Setting dates
 
 `dateFormat` defines the format of the date **input** of your gantt elements. How these dates are represented in the rendered chart **output** are defined by `axisFormat`.
 
 ### Input date format
 
-The default input date format is `YYYY-MM-DD`. You can define your custom ``dateFormat``.
+The default input date format is `YYYY-MM-DD`. You can define your custom `dateFormat`.
 
 ```
 dateFormat YYYY-MM-DD
@@ -140,7 +137,7 @@ More info in: https://momentjs.com/docs/#/parsing/string-format/
 
 ### Output date format on the axis
 
-The default output date format is YYYY-MM-DD. You can define your custom ``axisFormat``, like `2020-Q1` for the first quarter of the year 2020.
+The default output date format is YYYY-MM-DD. You can define your custom `axisFormat`, like `2020-Q1` for the first quarter of the year 2020.
 
 ```
 axisFormat  %Y-%m-%d
@@ -201,63 +198,61 @@ Styling of the a gantt diagram is done by defining a number of css classes. Duri
 
 ### Classes used
 
-Class | Description
----                   | ---
-grid.tick             | Styling for the Grid Lines 
-grid.path             | Styling for the Grid's borders
-.taskText             | Task Text Styling
-.taskTextOutsideRight | Styling for Task Text that exceeds the activity bar towards the right. 
-.taskTextOutsideLeft  | Styling for Task Text that exceeds the activity bar, towards the left.
-todayMarker           | Toggle and Styling for the "Today Marker"
-
+| Class                 | Description                                                            |
+| --------------------- | ---------------------------------------------------------------------- |
+| grid.tick             | Styling for the Grid Lines                                             |
+| grid.path             | Styling for the Grid's borders                                         |
+| .taskText             | Task Text Styling                                                      |
+| .taskTextOutsideRight | Styling for Task Text that exceeds the activity bar towards the right. |
+| .taskTextOutsideLeft  | Styling for Task Text that exceeds the activity bar, towards the left. |
+| todayMarker           | Toggle and Styling for the "Today Marker"                              |
 
 ### Sample stylesheet
 
-
 ```css
 .grid .tick {
-    stroke: lightgrey;
-    opacity: 0.3;
-    shape-rendering: crispEdges;
+  stroke: lightgrey;
+  opacity: 0.3;
+  shape-rendering: crispEdges;
 }
 .grid path {
-    stroke-width: 0;
+  stroke-width: 0;
 }
 
 #tag {
-    color: white;
-    background: #FA283D;
-    width: 150px;
-    position: absolute;
-    display: none;
-    padding:3px 6px;
-    margin-left: -80px;
-    font-size: 11px;
+  color: white;
+  background: #fa283d;
+  width: 150px;
+  position: absolute;
+  display: none;
+  padding: 3px 6px;
+  margin-left: -80px;
+  font-size: 11px;
 }
 
 #tag:before {
-    border: solid transparent;
-    content: ' ';
-    height: 0;
-    left: 50%;
-    margin-left: -5px;
-    position: absolute;
-    width: 0;
-    border-width: 10px;
-    border-bottom-color: #FA283D;
-    top: -20px;
+  border: solid transparent;
+  content: ' ';
+  height: 0;
+  left: 50%;
+  margin-left: -5px;
+  position: absolute;
+  width: 0;
+  border-width: 10px;
+  border-bottom-color: #fa283d;
+  top: -20px;
 }
 .taskText {
-    fill:white;
-    text-anchor:middle;
+  fill: white;
+  text-anchor: middle;
 }
 .taskTextOutsideRight {
-    fill:black;
-    text-anchor:start;
+  fill: black;
+  text-anchor: start;
 }
 .taskTextOutsideLeft {
-    fill:black;
-    text-anchor:end;
+  fill: black;
+  text-anchor: end;
 }
 ```
 
@@ -286,20 +281,20 @@ mermaid.ganttConfig can be set to a JSON string with config parameters or the co
 
 ```javascript
 mermaid.ganttConfig = {
-    titleTopMargin:25,
-    barHeight:20,
-    barGap:4,
-    topPadding:75,
-    sidePadding:75
-}
+  titleTopMargin: 25,
+  barHeight: 20,
+  barGap: 4,
+  topPadding: 75,
+  sidePadding: 75,
+};
 ```
 
 ### Possible configuration params:
 
-Param | Description | Default value
---- | --- | ---
-mirrorActor|Turns on/off the rendering of actors below the diagram as well as above it|false
-bottomMarginAdj|Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists.|1
+| Param           | Description                                                                                                                                | Default value |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
+| mirrorActor     | Turns on/off the rendering of actors below the diagram as well as above it                                                                 | false         |
+| bottomMarginAdj | Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists. | 1             |
 
 ## Interaction
 
@@ -310,13 +305,14 @@ click taskId call callback(arguments)
 click taskId href URL
 ```
 
-* taskId is the id of the task
-* callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the taskId as the parameter if no other arguments are specified.
+- taskId is the id of the task
+- callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the taskId as the parameter if no other arguments are specified.
 
 Beginner's tip—a full example using interactive links in an html context:
+
 ```html
 <body>
-  <div class="mermaid">
+  <pre class="mermaid">
     gantt
       dateFormat  YYYY-MM-DD
 
@@ -328,18 +324,18 @@ Beginner's tip—a full example using interactive links in an html context:
       click cl1 href "https://mermaidjs.github.io/"
       click cl2 call printArguments("test1", "test2", test3)
       click cl3 call printTask()
-  </div>
+  </pre>
 
   <script>
-    var printArguments = function(arg1, arg2, arg3) {
+    var printArguments = function (arg1, arg2, arg3) {
       alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);
-    }
-    var printTask = function(taskId) {
+    };
+    var printTask = function (taskId) {
       alert('taskId: ' + taskId);
-    }
+    };
     var config = {
-      startOnLoad:true,
-      securityLevel:'loose',
+      startOnLoad: true,
+      securityLevel: 'loose',
     };
     mermaid.initialize(config);
   </script>
diff --git a/docs/index.html b/docs/index.html
index 02c01d954..e26d66cb4 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -17,7 +17,10 @@
     />
     <!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
     <link rel="stylesheet" href="theme.css" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css"
+    />
     <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.6/dist/mermaid.min.js"></script>
     <!-- <script src="http://localhost:9000/mermaid.js"></script> -->
     <script>
@@ -108,8 +111,7 @@
                 }
 
                 if (lang === 'mermaid' || lang === 'mermaid-example') {
-                  resultingHTML +=
-                    '<div class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + '</div>';
+                  '<pre class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + '</pre>';
                 }
 
                 if (resultingHTML !== '') {
@@ -134,7 +136,8 @@
                 while (!window.hasOwnProperty('monaco'))
                   await new Promise((resolve) => setTimeout(resolve, 1000));
                 colorizeEverything(html).then(
-                  (newHTML) => (document.querySelector('article.markdown-section').innerHTML = newHTML)
+                  (newHTML) =>
+                    (document.querySelector('article.markdown-section').innerHTML = newHTML)
                 );
               })();
             });
diff --git a/docs/n00b-gettingStarted.md b/docs/n00b-gettingStarted.md
index a7e779970..bc329803e 100644
--- a/docs/n00b-gettingStarted.md
+++ b/docs/n00b-gettingStarted.md
@@ -85,35 +85,36 @@ c. The `mermaid.initialize()` call, which dictates the appearance of diagrams an
 
 ```html
 <body>
-    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
 </body>
 ```
 
-**b. The embedded mermaid diagram definition inside a `<div class="mermaid">`:**
+**b. The embedded mermaid diagram definition inside a `<pre class="mermaid">`:**
 
 ```html
 <body>
-    Here is a mermaid diagram:
-    <div class="mermaid">
+  Here is a mermaid diagram:
+  <pre class="mermaid">
         graph TD 
         A[Client] --> B[Load Balancer] 
         B --> C[Server01] 
         B --> D[Server02]
-    </div>
+    </pre
+  >
 </body>
 ```
 
-**Notes**: Every Mermaid chart/graph/diagram definition, should have separate `<div>` tags.
+**Notes**: Every Mermaid chart/graph/diagram definition, should have separate `<pre>` tags.
 
 **c. The `mermaid.initialize()` call.**
 
-`mermaid.initialize()` call takes all the definitions contained in all the `<div class="mermaid">` tags that it finds in the html body and renders them into diagrams. Example:
+`mermaid.initialize()` call takes all the definitions contained in all the `<pre class="mermaid">` tags that it finds in the html body and renders them into diagrams. Example:
 
 ```html
 <body>
-    <script>
-        mermaid.initialize({ startOnLoad: true });
-    </script>
+  <script>
+    mermaid.initialize({ startOnLoad: true });
+  </script>
 </body>
 ```
 
@@ -132,29 +133,31 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
 
 ```html
 <html>
-    <body>
-        <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
-        <script>
-            mermaid.initialize({ startOnLoad: true });
-        </script>
+  <body>
+    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+    <script>
+      mermaid.initialize({ startOnLoad: true });
+    </script>
 
-        Here is one mermaid diagram:
-        <div class="mermaid">
+    Here is one mermaid diagram:
+    <pre class="mermaid">
             graph TD 
             A[Client] --> B[Load Balancer] 
             B --> C[Server1] 
             B --> D[Server2]
-        </div>
+        </pre
+    >
 
-        And here is another:
-        <div class="mermaid">
+    And here is another:
+    <pre class="mermaid">
             graph TD 
             A[Client] -->|tcp_123| B
             B(Load Balancer) 
             B -->|tcp_456| C[Server1] 
             B -->|tcp_456| D[Server2]
-        </div>
-    </body>
+        </pre
+    >
+  </body>
 </html>
 ```
 
@@ -163,27 +166,29 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
 
 ```html
 <html lang="en">
-    <head>
-        <meta charset="utf-8" />
-    </head>
-    <body>
-        <div class="mermaid">
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <pre class="mermaid">
             graph LR 
             A --- B 
             B-->C[fa:fa-ban forbidden] 
             B-->D(fa:fa-spinner);
-        </div>
-        <div class="mermaid">
+        </pre
+    >
+    <pre class="mermaid">
             graph TD 
             A[Client] --> B[Load Balancer] 
             B --> C[Server1] 
             B --> D[Server2]
-        </div>
-        <script src="The\Path\In\Your\Package\mermaid.js"></script>
-        <script>
-            mermaid.initialize({ startOnLoad: true });
-        </script>
-    </body>
+        </pre
+    >
+    <script src="The\Path\In\Your\Package\mermaid.js"></script>
+    <script>
+      mermaid.initialize({ startOnLoad: true });
+    </script>
+  </body>
 </html>
 ```
 
@@ -204,4 +209,4 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
 
 **Comments from Knut Sveidqvist, creator of mermaid:**
 
--   In early versions of mermaid, the `<script src>` tag was invoked in the `<head>` part of the web page. Nowadays we can place it in the `<body>` as seen above. Older parts of the documentation frequently reflects the previous way which still works.
+- In early versions of mermaid, the `<script src>` tag was invoked in the `<head>` part of the web page. Nowadays we can place it in the `<body>` as seen above. Older parts of the documentation frequently reflects the previous way which still works.
diff --git a/docs/n00b-overview.md b/docs/n00b-overview.md
index e6b7d4494..b784ba737 100644
--- a/docs/n00b-overview.md
+++ b/docs/n00b-overview.md
@@ -12,7 +12,7 @@ Diagrams/Charts are significant but also become obsolete/inaccurate very fast. T
 
 # Doc Rot in Diagrams
 
-Doc-Rot kills diagrams as quickly as it does text, but it takes hours in a desktop application to produce a diagram. 
+Doc-Rot kills diagrams as quickly as it does text, but it takes hours in a desktop application to produce a diagram.
 
 Mermaid seeks to change using markdown-inspired syntax. The process is a quicker, less complicated, and more convenient way of going from concept to visualization.
 
@@ -22,25 +22,24 @@ It is a relatively straightforward solution to a significant hurdle with the sof
 
 **Mermaid text definitions can be saved for later reuse and editing.**
 
->These are the Mermaid diagram definitions inside `<div>` tags, with the `class=mermaid`.
+> These are the Mermaid diagram definitions inside `<div>` tags, with the `class=mermaid`.
 
 ```html
- <div class="mermaid">
+<pre class="mermaid">
     graph TD
     A[Client] --> B[Load Balancer]
     B --> C[Server01]
     B --> D[Server02]
-  </div>
+</pre>
 ```
 
 **render**
 
->This is the core function of the Mermaid API. It reads all the `Mermaid Definitions` inside `div` tags and returns an SVG file, based on the definition.
-
+> This is the core function of the Mermaid API. It reads all the `Mermaid Definitions` inside `div` tags and returns an SVG file, based on the definition.
 
 **Nodes**
 
->These are the boxes that contain text or otherwise discrete pieces of each diagram, separated generally by arrows, except for Gantt Charts and User Journey Diagrams. They will be referred often in the instructions. Read for Diagram Specific [Syntax](./n00b-syntaxReference)
+> These are the boxes that contain text or otherwise discrete pieces of each diagram, separated generally by arrows, except for Gantt Charts and User Journey Diagrams. They will be referred often in the instructions. Read for Diagram Specific [Syntax](./n00b-syntaxReference)
 
 ## Advantages of using Mermaid
 
@@ -57,13 +56,13 @@ Mermaid solves this by reducing the time and effort required to create diagrams
 
 Because, the text base for the diagrams allows it to be updated easily. Also, it can be made part of production scripts (and other pieces of code). So less time is spent on documenting, as a separate task.
 
-
 ## Catching up with Development
 
 Being based on markdown, Mermaid can be used, not only by accomplished front-end developers, but by most computer savvy people to render diagrams, at much faster speeds.
 In fact one can pick up the syntax for it quite easily from the examples given and there are many tutorials available in the internet.
 
 ## Mermaid is for everyone.
+
 Video [Tutorials](https://mermaid-js.github.io/mermaid/#/./Tutorials) are also available for the mermaid [live editor](https://mermaid.live/).
 
-Alternatively you can use Mermaid [Plug-Ins](https://mermaid-js.github.io/mermaid/#/./integrations), with tools you already use, like Google Docs. 
+Alternatively you can use Mermaid [Plug-Ins](https://mermaid-js.github.io/mermaid/#/./integrations), with tools you already use, like Google Docs.
diff --git a/docs/usage.md b/docs/usage.md
index 1815f0a36..d29cbdad5 100644
--- a/docs/usage.md
+++ b/docs/usage.md
@@ -1,4 +1,4 @@
- # Usage
+# Usage
 
 **Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/usage.md)
 
@@ -39,30 +39,34 @@ We have compiled some Video [Tutorials](./Tutorials.md) on how to use the mermai
 
 **Hosting mermaid on a web page.**
 
->Note:This topic explored in greater depth in the [User Guide for Beginners](./n00b-gettingStarted.md)
+> Note:This topic explored in greater depth in the [User Guide for Beginners](./n00b-gettingStarted.md)
 
 The easiest way to integrate mermaid on a web page requires three elements:
 
-1. Inclusion of the mermaid address in the html page using a `script` tag, in the `src` section.Example:
+1.  Inclusion of the mermaid address in the html page using a `script` tag, in the `src` section.Example:
+
     ```html
     <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
     ```
 
-2. The `mermaidAPI` call, in a separate `script` tag. Example:
+2.  The `mermaidAPI` call, in a separate `script` tag. Example:
+
     ```html
-    <script>mermaid.initialize({startOnLoad:true});
+    <script>
+      mermaid.initialize({ startOnLoad: true });
     </script>
     ```
 
-3. A graph definition, inside `<div>` tags labeled `class=mermaid`. Example:
-    ```html
-    <div class="mermaid">
-         graph LR
-          A --- B
-          B-->C[fa:fa-ban forbidden]
-          B-->D(fa:fa-spinner);
-    </div>
-    ```
+3.  A graph definition, inside `<div>` tags labeled `class=mermaid`. Example:
+
+```html
+<pre class="mermaid">
+    graph LR
+    A --- B
+    B-->C[fa:fa-ban forbidden]
+    B-->D(fa:fa-spinner);
+</pre>
+```
 
 **Following these directions, mermaid starts at page load and (when the page has loaded) it will
 locate the graph definitions inside the `div` tags with `class="mermaid"` and return diagrams in SVG form, following given definitions.**
@@ -72,54 +76,54 @@ locate the graph definitions inside the `div` tags with `class="mermaid"` and re
 ```html
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-</head>
-<body>
-  <div class="mermaid">
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <pre class="mermaid">
   graph LR
       A --- B
       B-->C[fa:fa-ban forbidden]
       B-->D(fa:fa-spinner);
-  </div>
- <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
- <script>mermaid.initialize({startOnLoad:true});
-</script>
-</body>
+    </pre>
+    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+    <script>
+      mermaid.initialize({ startOnLoad: true });
+    </script>
+  </body>
 </html>
 ```
 
 ## Notes:
+
 An id attribute is also added to mermaid tags without one.
 
 Mermaid can load multiple diagrams, in the same page.
 
 > Try it out, save this code as HTML and load it using any browser.(Except Internet Explorer, please don't use Internet Explorer.)
 
-
 ## Enabling Click Event and Tags in Nodes
 
- A `securityLevel` configuration has to first be cleared, `securityLevel` sets the level of trust for the parsed diagrams and limits click functionality. This was introduce in version 8.2 as a security improvement, aimed at preventing malicious use.
+A `securityLevel` configuration has to first be cleared, `securityLevel` sets the level of trust for the parsed diagrams and limits click functionality. This was introduce in version 8.2 as a security improvement, aimed at preventing malicious use.
 
- **It is the site owner's responsibility to discriminate between trustworthy and untrustworthy user-bases and we encourage the use of discretion.**
+**It is the site owner's responsibility to discriminate between trustworthy and untrustworthy user-bases and we encourage the use of discretion.**
 
 ## securityLevel
 
-| Parameter     | Description                       | Type   | Required | Values                    |
-| ------------- | --------------------------------- | ------ | -------- | ------------------------- |
+| Parameter     | Description                       | Type   | Required | Values                                     |
+| ------------- | --------------------------------- | ------ | -------- | ------------------------------------------ |
 | securityLevel | Level of trust for parsed diagram | String | Required | 'sandbox', 'strict', 'loose', 'antiscript' |
 
 Values:
 
--   **strict**: (**default**) tags in text are encoded, click functionality is disabled
--   **loose**: tags in text are allowed, click functionality is enabled
--   **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled
--   **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This prevent any JavaScript running in the context. This may hinder interactive functionality of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc. 
-
+- **strict**: (**default**) tags in text are encoded, click functionality is disabled
+- **loose**: tags in text are allowed, click functionality is enabled
+- **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled
+- **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This prevent any JavaScript running in the context. This may hinder interactive functionality of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc.
 
 ```note
 This changes the default behaviour of mermaid so that after upgrade to 8.2, unless the `securityLevel` is not changed, tags in flowcharts are encoded as tags and clicking is disabled.
-**sandbox** security level is still in the beta version. 
+**sandbox** security level is still in the beta version.
 ```
 
 **If you are taking responsibility for the diagram source security you can set the `securityLevel` to a value of your choosing . This allows clicks and tags are allowed.**
@@ -128,27 +132,26 @@ This changes the default behaviour of mermaid so that after upgrade to 8.2, unle
 
 ```javascript
 mermaidAPI.initialize({
-    securityLevel: 'loose'
+  securityLevel: 'loose',
 });
 ```
 
-
 ### Labels out of bounds
 
 If you use dynamically loaded fonts that are loaded through CSS, such as Google fonts, mermaid should wait for the
 whole page to load (dom + assets, particularly the fonts file).
 
 ```javascript
-$(document).load(function() {
-    mermaid.initialize();
+$(document).load(function () {
+  mermaid.initialize();
 });
 ```
 
 or
 
 ```javascript
-$(document).ready(function() {
-    mermaid.initialize();
+$(document).ready(function () {
+  mermaid.initialize();
 });
 ```
 
@@ -158,7 +161,7 @@ If your page has other fonts in its body those might be used instead of the merm
 
 ```css
 div.mermaid {
-    font-family: 'trebuchet ms', verdana, arial;
+  font-family: 'trebuchet ms', verdana, arial;
 }
 ```
 
@@ -177,13 +180,13 @@ finer-grained control of this behavior, you can call `init` yourself with:
 Example:
 
 ```javascript
-mermaid.init({noteMargin: 10}, ".someOtherClass");
+mermaid.init({ noteMargin: 10 }, '.someOtherClass');
 ```
 
 Or with no config object, and a jQuery selection:
 
 ```javascript
-mermaid.init(undefined, $("#someId .yetAnotherClass"));
+mermaid.init(undefined, $('#someId .yetAnotherClass'));
 ```
 
 ```warning
@@ -194,7 +197,6 @@ This type of integration is deprecated. Instead the preferred way of handling mo
 
 mermaid fully supports webpack. Here is a [working demo](https://github.com/mermaidjs/mermaid-webpack-demo).
 
-
 ## API usage
 
 The main idea of the API is to be able to call a render function with the graph definition as a string. The render function
@@ -207,14 +209,19 @@ The example below show an outline of how this could be used. The example just lo
 <script src="mermaid.js"></script>
 
 <script>
-    mermaid.mermaidAPI.initialize({ startOnLoad:false }); $(function(){ // Example of using the API var
-element = document.querySelector("#graphDiv"); var insertSvg = function(svgCode, bindFunctions){
-    element.innerHTML = svgCode; }; var graphDefinition = 'graph TB\na-->b'; var graph =
-mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg); });
+  mermaid.mermaidAPI.initialize({ startOnLoad: false });
+  $(function () {
+    // Example of using the API var
+    element = document.querySelector('#graphDiv');
+    var insertSvg = function (svgCode, bindFunctions) {
+      element.innerHTML = svgCode;
+    };
+    var graphDefinition = 'graph TB\na-->b';
+    var graph = mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
+  });
 </script>
 ```
 
-
 ### Binding events
 
 Sometimes the generated graph also has defined interactions like tooltip and click events. When using the API one must
@@ -224,18 +231,17 @@ The example code below is an extract of what mermaid does when using the API. Th
 bind events to an SVG when using the API for rendering.
 
 ```javascript
-var insertSvg = function(svgCode, bindFunctions) {
-    element.innerHTML = svgCode;
-    if(typeof callback !== 'undefined'){
-        callback(id);
-    }
-    bindFunctions(element);
+var insertSvg = function (svgCode, bindFunctions) {
+  element.innerHTML = svgCode;
+  if (typeof callback !== 'undefined') {
+    callback(id);
+  }
+  bindFunctions(element);
 };
 
 var id = 'theGraph';
 
-
-mermaidAPI.render(id,txt,insertSvg, element);
+mermaidAPI.render(id, txt, insertSvg, element);
 ```
 
 1. The graph is generated using the render call.
@@ -244,7 +250,6 @@ mermaidAPI.render(id,txt,insertSvg, element);
 4. Insert the SVG code into the DOM for presentation.
 5. Call the binding function that binds the events.
 
-
 ## Example of a marked renderer
 
 This is the renderer used for transforming the documentation from Markdown to html with mermaid diagrams in the html.
@@ -252,11 +257,11 @@ This is the renderer used for transforming the documentation from Markdown to ht
 ```javascript
 var renderer = new marked.Renderer();
 renderer.code = function (code, language) {
-    if(code.match(/^sequenceDiagram/)||code.match(/^graph/)){
-        return '<div class="mermaid">'+code+'</div>';
-    }
-    else{
-        return '<pre><code>'+code+'</code></pre>';
+    if (code.match(/^sequenceDiagram/) || code.match(/^graph/)) {
+<pre class="mermaid">' + code + '</div>';
+    } else {
+        return '<pre><code>' + code + '</code>
+        return '</pre>';
     }
 };
 ```
@@ -276,14 +281,14 @@ module.exports = (options) ->
       if not hasMermaid
         hasMermaid = true
         html += '<script src="'+options.mermaidPath+'"></script>'
-      html + '<div class="mermaid">'+code+'</div>'
+      html + '<div class="mermaid">'+code+'
+</pre>'
     else
       @defaultCode(code, language)
 
   renderer
 ```
 
-
 ## Advanced usage
 
 **Syntax validation without rendering (Work in Progress)**
@@ -299,23 +304,23 @@ function in order to handle the error in an application-specific way.
 The code-example below in meta code illustrates how this could work:
 
 ```javascript
-mermaid.parseError = function(err,hash){
-    displayErrorInGui(err);
+mermaid.parseError = function (err, hash) {
+  displayErrorInGui(err);
 };
 
-var textFieldUpdated = function(){
-    var textStr = getTextFromFormField('code');
+var textFieldUpdated = function () {
+  var textStr = getTextFromFormField('code');
 
-    if(mermaid.parse(textStr)){
-        reRender(textStr)
-    }
+  if (mermaid.parse(textStr)) {
+    reRender(textStr);
+  }
 };
 
 bindEventHandler('change', 'code', textFieldUpdated);
 ```
-**Alternative to mermaid.parse():**
-One effective and more future-proof method of validating your graph definitions, is to paste and render them via the [Mermaid Live Editor](https://mermaid.live/). This will ensure that your code is compliant with the syntax of Mermaid's most recent version. 
 
+**Alternative to mermaid.parse():**
+One effective and more future-proof method of validating your graph definitions, is to paste and render them via the [Mermaid Live Editor](https://mermaid.live/). This will ensure that your code is compliant with the syntax of Mermaid's most recent version.
 
 ## Configuration
 
@@ -323,14 +328,13 @@ Mermaid takes a number of options which lets you tweak the rendering of the diag
 setting the options in mermaid.
 
 1. Instantiation of the configuration using the initialize call
-2. *Using the global mermaid object* - **Deprecated**
-3. *using the global mermaid_config object* - **Deprecated**
+2. _Using the global mermaid object_ - **Deprecated**
+3. _using the global mermaid_config object_ - **Deprecated**
 4. Instantiation of the configuration using the **mermaid.init** call- **Deprecated**
 
 The list above has two ways too many of doing this. Three are deprecated and will eventually be removed. The list of
 configuration objects are described [in the mermaidAPI documentation](Setup.md).
 
-
 ## Using the `mermaidAPI.initialize`/`mermaid.initialize` call
 
 The future proof way of setting the configuration is by using the initialization call to mermaid or mermaidAPI depending
@@ -339,8 +343,8 @@ on what kind of integration you use.
 ```html
 <script src="../dist/mermaid.js"></script>
 <script>
-    var config = { startOnLoad:true, flowchart:{ useMaxWidth:false, htmlLabels:true } };
-    mermaid.initialize(config);
+  var config = { startOnLoad: true, flowchart: { useMaxWidth: false, htmlLabels: true } };
+  mermaid.initialize(config);
 </script>
 ```
 
@@ -355,8 +359,8 @@ This is the preferred way of configuring mermaid.
 Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this
 approach are:
 
-* mermaid.startOnLoad
-* mermaid.htmlLabels
+- mermaid.startOnLoad
+- mermaid.htmlLabels
 
 ```javascript
 mermaid.startOnLoad = true;
@@ -371,8 +375,8 @@ This way of setting the configuration is deprecated. Instead the preferred way i
 It is possible to set some configuration via the mermaid object. The two parameters that are supported using this
 approach are:
 
-* mermaid_config.startOnLoad
-* mermaid_config.htmlLabels
+- mermaid_config.startOnLoad
+- mermaid_config.htmlLabels
 
 ```javascript
 mermaid_config.startOnLoad = true;
@@ -386,8 +390,8 @@ This way of setting the configuration is deprecated. Instead the preferred way i
 
 To set some configuration via the mermaid object. The two parameters that are supported using this approach are:
 
-* mermaid_config.startOnLoad
-* mermaid_config.htmlLabels
+- mermaid_config.startOnLoad
+- mermaid_config.htmlLabels
 
 ```javascript
 mermaid_config.startOnLoad = true;
diff --git a/package.json b/package.json
index 431b5785a..42c474f4d 100644
--- a/package.json
+++ b/package.json
@@ -29,8 +29,8 @@
     "postbuild": "documentation build src/mermaidAPI.ts src/config.ts src/defaultConfig.ts --shallow -f md --markdown-toc false > docs/Setup.md",
     "build:watch": "yarn build:dev --watch",
     "release": "yarn build",
-    "lint": "eslint --cache ./ --ext .js,.json,.html,.md",
-    "lint:fix": "yarn lint --fix",
+    "lint": "eslint --cache --ignore-path .gitignore .; prettier --check .",
+    "lint:fix": "eslint --fix --ignore-path .gitignore .; prettier --write .",
     "e2e:depr": "yarn lint && jest e2e --config e2e/jest.config.js",
     "cypress": "cypress run",
     "cypress:open": "cypress open",
@@ -83,6 +83,8 @@
     "@types/dompurify": "^2.3.3",
     "@types/jest": "^28.1.7",
     "@types/stylis": "^4.0.2",
+    "@typescript-eslint/eslint-plugin": "^5.36.1",
+    "@typescript-eslint/parser": "^5.36.1",
     "babel-jest": "^29.0.1",
     "babel-loader": "^8.2.2",
     "concurrently": "^7.0.0",
@@ -91,15 +93,14 @@
     "cypress": "9.7.0",
     "cypress-image-snapshot": "^4.0.1",
     "documentation": "13.2.0",
-    "eslint": "^8.4.1",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint": "^8.23.0",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-html": "^7.1.0",
     "eslint-plugin-jest": "^27.0.1",
     "eslint-plugin-jsdoc": "^39.1.0",
     "eslint-plugin-json": "^3.1.0",
     "eslint-plugin-markdown": "^3.0.0",
-    "eslint-plugin-prettier": "^4.0.0",
     "husky": "^8.0.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^28.0.3",
diff --git a/yarn.lock b/yarn.lock
index 656032594..113d19ba2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2795,6 +2795,31 @@
   dependencies:
     "@types/node" "*"
 
+"@typescript-eslint/eslint-plugin@^5.36.1":
+  version "5.36.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.36.1.tgz#471f64dc53600025e470dad2ca4a9f2864139019"
+  integrity sha512-iC40UK8q1tMepSDwiLbTbMXKDxzNy+4TfPWgIL661Ym0sD42vRcQU93IsZIrmi+x292DBr60UI/gSwfdVYexCA==
+  dependencies:
+    "@typescript-eslint/scope-manager" "5.36.1"
+    "@typescript-eslint/type-utils" "5.36.1"
+    "@typescript-eslint/utils" "5.36.1"
+    debug "^4.3.4"
+    functional-red-black-tree "^1.0.1"
+    ignore "^5.2.0"
+    regexpp "^3.2.0"
+    semver "^7.3.7"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/parser@^5.36.1":
+  version "5.36.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.36.1.tgz#931c22c7bacefd17e29734628cdec8b2acdcf1ce"
+  integrity sha512-/IsgNGOkBi7CuDfUbwt1eOqUXF9WGVBW9dwEe1pi+L32XrTsZIgmDFIi2RxjzsvB/8i+MIf5JIoTEH8LOZ368A==
+  dependencies:
+    "@typescript-eslint/scope-manager" "5.36.1"
+    "@typescript-eslint/types" "5.36.1"
+    "@typescript-eslint/typescript-estree" "5.36.1"
+    debug "^4.3.4"
+
 "@typescript-eslint/scope-manager@5.10.1":
   version "5.10.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.10.1.tgz#f0539c73804d2423506db2475352a4dec36cd809"
@@ -2803,11 +2828,34 @@
     "@typescript-eslint/types" "5.10.1"
     "@typescript-eslint/visitor-keys" "5.10.1"
 
+"@typescript-eslint/scope-manager@5.36.1":
+  version "5.36.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.36.1.tgz#23c49b7ddbcffbe09082e6694c2524950766513f"
+  integrity sha512-pGC2SH3/tXdu9IH3ItoqciD3f3RRGCh7hb9zPdN2Drsr341zgd6VbhP5OHQO/reUqihNltfPpMpTNihFMarP2w==
+  dependencies:
+    "@typescript-eslint/types" "5.36.1"
+    "@typescript-eslint/visitor-keys" "5.36.1"
+
+"@typescript-eslint/type-utils@5.36.1":
+  version "5.36.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.36.1.tgz#016fc2bff6679f54c0b2df848a493f0ca3d4f625"
+  integrity sha512-xfZhfmoQT6m3lmlqDvDzv9TiCYdw22cdj06xY0obSznBsT///GK5IEZQdGliXpAOaRL34o8phEvXzEo/VJx13Q==
+  dependencies:
+    "@typescript-eslint/typescript-estree" "5.36.1"
+    "@typescript-eslint/utils" "5.36.1"
+    debug "^4.3.4"
+    tsutils "^3.21.0"
+
 "@typescript-eslint/types@5.10.1":
   version "5.10.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.10.1.tgz#dca9bd4cb8c067fc85304a31f38ec4766ba2d1ea"
   integrity sha512-ZvxQ2QMy49bIIBpTqFiOenucqUyjTQ0WNLhBM6X1fh1NNlYAC6Kxsx8bRTY3jdYsYg44a0Z/uEgQkohbR0H87Q==
 
+"@typescript-eslint/types@5.36.1":
+  version "5.36.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.36.1.tgz#1cf0e28aed1cb3ee676917966eb23c2f8334ce2c"
+  integrity sha512-jd93ShpsIk1KgBTx9E+hCSEuLCUFwi9V/urhjOWnOaksGZFbTOxAT47OH2d4NLJnLhkVD+wDbB48BuaycZPLBg==
+
 "@typescript-eslint/typescript-estree@5.10.1":
   version "5.10.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.10.1.tgz#b268e67be0553f8790ba3fe87113282977adda15"
@@ -2821,6 +2869,31 @@
     semver "^7.3.5"
     tsutils "^3.21.0"
 
+"@typescript-eslint/typescript-estree@5.36.1":
+  version "5.36.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.36.1.tgz#b857f38d6200f7f3f4c65cd0a5afd5ae723f2adb"
+  integrity sha512-ih7V52zvHdiX6WcPjsOdmADhYMDN15SylWRZrT2OMy80wzKbc79n8wFW0xpWpU0x3VpBz/oDgTm2xwDAnFTl+g==
+  dependencies:
+    "@typescript-eslint/types" "5.36.1"
+    "@typescript-eslint/visitor-keys" "5.36.1"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    semver "^7.3.7"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/utils@5.36.1":
+  version "5.36.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.36.1.tgz#136d5208cc7a3314b11c646957f8f0b5c01e07ad"
+  integrity sha512-lNj4FtTiXm5c+u0pUehozaUWhh7UYKnwryku0nxJlYUEWetyG92uw2pr+2Iy4M/u0ONMKzfrx7AsGBTCzORmIg==
+  dependencies:
+    "@types/json-schema" "^7.0.9"
+    "@typescript-eslint/scope-manager" "5.36.1"
+    "@typescript-eslint/types" "5.36.1"
+    "@typescript-eslint/typescript-estree" "5.36.1"
+    eslint-scope "^5.1.1"
+    eslint-utils "^3.0.0"
+
 "@typescript-eslint/utils@^5.10.0":
   version "5.10.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.10.1.tgz#fa682a33af47080ba2c4368ee0ad2128213a1196"
@@ -2841,6 +2914,14 @@
     "@typescript-eslint/types" "5.10.1"
     eslint-visitor-keys "^3.0.0"
 
+"@typescript-eslint/visitor-keys@5.36.1":
+  version "5.36.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.36.1.tgz#7731175312d65738e501780f923896d200ad1615"
+  integrity sha512-ojB9aRyRFzVMN3b5joSYni6FAS10BBSCAfKJhjJAV08t/a95aM6tAhz+O1jF+EtgxktuSO3wJysp2R+Def/IWQ==
+  dependencies:
+    "@typescript-eslint/types" "5.36.1"
+    eslint-visitor-keys "^3.3.0"
+
 "@wdio/config@7.16.11":
   version "7.16.11"
   resolved "https://registry.yarnpkg.com/@wdio/config/-/config-7.16.11.tgz#c35a0efb9c7ec6c80e3324e9818f636010087e97"
@@ -5549,7 +5630,7 @@ escodegen@^2.0.0:
   optionalDependencies:
     source-map "~0.6.1"
 
-eslint-config-prettier@^8.3.0:
+eslint-config-prettier@^8.5.0:
   version "8.5.0"
   resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz#5a81680ec934beca02c7b1a61cf8ca34b66feab1"
   integrity sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==
@@ -5603,13 +5684,6 @@ eslint-plugin-markdown@^3.0.0:
   dependencies:
     mdast-util-from-markdown "^0.8.5"
 
-eslint-plugin-prettier@^4.0.0:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz#651cbb88b1dab98bfd42f017a12fa6b2d993f94b"
-  integrity sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==
-  dependencies:
-    prettier-linter-helpers "^1.0.0"
-
 eslint-scope@5.1.1, eslint-scope@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
@@ -5643,7 +5717,7 @@ eslint-visitor-keys@^3.0.0, eslint-visitor-keys@^3.3.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz#f6480fa6b1f30efe2d1968aa8ac745b862469826"
   integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==
 
-eslint@^8.4.1:
+eslint@^8.23.0:
   version "8.23.0"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.23.0.tgz#a184918d288820179c6041bb3ddcc99ce6eea040"
   integrity sha512-pBG/XOn0MsJcKcTRLr27S5HpzQo4kLr+HjLQIyK4EiCsijDl/TB+h5uEuJU6bQ8Edvwz1XWOjpaP2qgnXGpTcA==
@@ -5974,11 +6048,6 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-diff@^1.1.2:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
-  integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
-
 fast-glob@^3.2.9:
   version "3.2.11"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
@@ -9760,13 +9829,6 @@ prelude-ls@~1.1.2:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
   integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
 
-prettier-linter-helpers@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
-  integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
-  dependencies:
-    fast-diff "^1.1.2"
-
 prettier-plugin-jsdoc@^0.3.30:
   version "0.3.38"
   resolved "https://registry.yarnpkg.com/prettier-plugin-jsdoc/-/prettier-plugin-jsdoc-0.3.38.tgz#b8adbe9efc1dc11f3cc5ff0b07e0233a0fdf533d"

From 41dec4d159f77400a256e390a2e3e27bbfdbc7a8 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 5 Sep 2022 00:57:34 +0530
Subject: [PATCH 57/60] Fix XSS htmls

---
 cypress/platform/xss10.html | 60 ++++++++++++++++++++-----------------
 cypress/platform/xss11.html | 58 +++++++++++++++++++----------------
 cypress/platform/xss12.html | 58 +++++++++++++++++++----------------
 cypress/platform/xss13.html | 58 +++++++++++++++++++----------------
 cypress/platform/xss14.html | 60 ++++++++++++++++++++-----------------
 cypress/platform/xss15.html | 54 ++++++++++++++++++---------------
 cypress/platform/xss16.html | 52 ++++++++++++++++++--------------
 cypress/platform/xss17.html | 52 ++++++++++++++++++--------------
 cypress/platform/xss18.html | 52 ++++++++++++++++++--------------
 cypress/platform/xss19.html | 52 ++++++++++++++++++--------------
 cypress/platform/xss20.html | 54 ++++++++++++++++++---------------
 cypress/platform/xss21.html | 54 ++++++++++++++++++---------------
 cypress/platform/xss4.html  | 57 +++++++++++++++++++----------------
 cypress/platform/xss5.html  | 52 ++++++++++++++++++--------------
 cypress/platform/xss6.html  | 50 +++++++++++++++++--------------
 cypress/platform/xss7.html  | 54 ++++++++++++++++++---------------
 cypress/platform/xss8.html  | 52 ++++++++++++++++++--------------
 cypress/platform/xss9.html  | 52 ++++++++++++++++++--------------
 18 files changed, 544 insertions(+), 437 deletions(-)

diff --git a/cypress/platform/xss10.html b/cypress/platform/xss10.html
index 1a863b4b7..6a027f514 100644
--- a/cypress/platform/xss10.html
+++ b/cypress/platform/xss10.html
@@ -1,20 +1,25 @@
 <html>
   <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
         /* background: rgb(221, 208, 208); */
         /* background:#333; */
         font-family: 'Arial';
         /* font-size: 18px !important; */
-        }
-      h1 { color: grey;}
+      }
+      h1 {
+        color: grey;
+      }
       .mermaid2 {
         display: none;
       }
@@ -23,9 +28,9 @@
       }
       .malware {
         position: fixed;
-        bottom:0;
-        left:0;
-        right:0;
+        bottom: 0;
+        left: 0;
+        right: 0;
         height: 150px;
         background: red;
         color: black;
@@ -43,7 +48,8 @@
     <div class="flex">
       <div id="diagram" class="mermaid"></div>
       <div id="res" class=""></div>
-  <script src="./mermaid.js"></script>
+    </div>
+    <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
@@ -59,8 +65,8 @@
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
           nodeSpacing: 10,
-    curve: 'cardinal',
-    htmlLabels: true,
+          curve: 'cardinal',
+          htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
@@ -76,8 +82,8 @@
         // themeVariables: {relationLabelColor: 'red'}
       });
       function callback() {
-  alert('It worked');
-}
+        alert('It worked');
+      }
       function xssAttack() {
         const div = document.createElement('div');
         div.id = 'the-malware';
@@ -88,20 +94,20 @@
       }
 
       var diagram = 'classDiagram\n';
-diagram += 'class Square~<img/src';
-diagram += "='1'/onerror=xssAttack()>~{\n";
-diagram += 'id A\n';
-diagram += '}';
+      diagram += 'class Square~<img/src';
+      diagram += "='1'/onerror=xssAttack()>~{\n";
+      diagram += 'id A\n';
+      diagram += '}';
 
-//   var diagram = "stateDiagram-v2\n";
-//  diagram += "<img/src='1'/onerror"
-//  diagram += "=xssAttack()> --> B";
-console.log(diagram);
-// document.querySelector('#diagram').innerHTML = diagram;
-mermaid.render('diagram', diagram, (res) => {
-  console.log(res);
-  document.querySelector('#res').innerHTML = res;
-});
+      //   var diagram = "stateDiagram-v2\n";
+      //  diagram += "<img/src='1'/onerror"
+      //  diagram += "=xssAttack()> --> B";
+      console.log(diagram);
+      // document.querySelector('#diagram').innerHTML = diagram;
+      mermaid.render('diagram', diagram, (res) => {
+        console.log(res);
+        document.querySelector('#res').innerHTML = res;
+      });
     </script>
   </body>
 </html>
diff --git a/cypress/platform/xss11.html b/cypress/platform/xss11.html
index 8eadfa43b..9126ac823 100644
--- a/cypress/platform/xss11.html
+++ b/cypress/platform/xss11.html
@@ -1,20 +1,25 @@
 <html>
   <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
         /* background: rgb(221, 208, 208); */
         /* background:#333; */
         font-family: 'Arial';
         /* font-size: 18px !important; */
-        }
-      h1 { color: grey;}
+      }
+      h1 {
+        color: grey;
+      }
       .mermaid2 {
         display: none;
       }
@@ -23,9 +28,9 @@
       }
       .malware {
         position: fixed;
-        bottom:0;
-        left:0;
-        right:0;
+        bottom: 0;
+        left: 0;
+        right: 0;
         height: 150px;
         background: red;
         color: black;
@@ -43,7 +48,8 @@
     <div class="flex">
       <div id="diagram" class="mermaid"></div>
       <div id="res" class=""></div>
-  <script src="./mermaid.js"></script>
+    </div>
+    <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
@@ -59,8 +65,8 @@
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
           nodeSpacing: 10,
-    curve: 'cardinal',
-    htmlLabels: true,
+          curve: 'cardinal',
+          htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
@@ -76,8 +82,8 @@
         // themeVariables: {relationLabelColor: 'red'}
       });
       function callback() {
-  alert('It worked');
-}
+        alert('It worked');
+      }
       function xssAttack() {
         const div = document.createElement('div');
         div.id = 'the-malware';
@@ -87,19 +93,19 @@
         throw new Error('XSS Succeeded');
       }
 
-var diagram = 'stateDiagram-v2\n';
-diagram += 's2 : This is a state description<img/src';
-diagram += "='1'/onerror=xssAttack()>";
+      var diagram = 'stateDiagram-v2\n';
+      diagram += 's2 : This is a state description<img/src';
+      diagram += "='1'/onerror=xssAttack()>";
 
-//   var diagram = "stateDiagram-v2\n";
-//  diagram += "<img/src='1'/onerror"
-//  diagram += "=xssAttack()> --> B";
-console.log(diagram);
-// document.querySelector('#diagram').innerHTML = diagram;
-mermaid.render('diagram', diagram, (res) => {
-  console.log(res);
-  document.querySelector('#res').innerHTML = res;
-});
+      //   var diagram = "stateDiagram-v2\n";
+      //  diagram += "<img/src='1'/onerror"
+      //  diagram += "=xssAttack()> --> B";
+      console.log(diagram);
+      // document.querySelector('#diagram').innerHTML = diagram;
+      mermaid.render('diagram', diagram, (res) => {
+        console.log(res);
+        document.querySelector('#res').innerHTML = res;
+      });
     </script>
   </body>
 </html>
diff --git a/cypress/platform/xss12.html b/cypress/platform/xss12.html
index ff3728542..5f6a3f229 100644
--- a/cypress/platform/xss12.html
+++ b/cypress/platform/xss12.html
@@ -1,20 +1,25 @@
 <html>
   <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
         /* background: rgb(221, 208, 208); */
         /* background:#333; */
         font-family: 'Arial';
         /* font-size: 18px !important; */
-        }
-      h1 { color: grey;}
+      }
+      h1 {
+        color: grey;
+      }
       .mermaid2 {
         display: none;
       }
@@ -23,9 +28,9 @@
       }
       .malware {
         position: fixed;
-        bottom:0;
-        left:0;
-        right:0;
+        bottom: 0;
+        left: 0;
+        right: 0;
         height: 150px;
         background: red;
         color: black;
@@ -43,7 +48,8 @@
     <div class="flex">
       <div id="diagram" class="mermaid"></div>
       <div id="res" class=""></div>
-  <script src="./mermaid.js"></script>
+    </div>
+    <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
@@ -59,8 +65,8 @@
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
           nodeSpacing: 10,
-    curve: 'cardinal',
-    htmlLabels: true,
+          curve: 'cardinal',
+          htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
@@ -76,8 +82,8 @@
         // themeVariables: {relationLabelColor: 'red'}
       });
       function callback() {
-  alert('It worked');
-}
+        alert('It worked');
+      }
       function xssAttack() {
         const div = document.createElement('div');
         div.id = 'the-malware';
@@ -87,19 +93,19 @@
         throw new Error('XSS Succeeded');
       }
 
-var diagram = 'stateDiagram-v2\n';
-diagram += 's2 : A<img/src';
-diagram += "='1'/onerror=xssAttack()>";
+      var diagram = 'stateDiagram-v2\n';
+      diagram += 's2 : A<img/src';
+      diagram += "='1'/onerror=xssAttack()>";
 
-//   var diagram = "stateDiagram-v2\n";
-//  diagram += "<img/src='1'/onerror"
-//  diagram += "=xssAttack()> --> B";
-console.log(diagram);
-// document.querySelector('#diagram').innerHTML = diagram;
-mermaid.render('diagram', diagram, (res) => {
-  console.log(res);
-  document.querySelector('#res').innerHTML = res;
-});
+      //   var diagram = "stateDiagram-v2\n";
+      //  diagram += "<img/src='1'/onerror"
+      //  diagram += "=xssAttack()> --> B";
+      console.log(diagram);
+      // document.querySelector('#diagram').innerHTML = diagram;
+      mermaid.render('diagram', diagram, (res) => {
+        console.log(res);
+        document.querySelector('#res').innerHTML = res;
+      });
     </script>
   </body>
 </html>
diff --git a/cypress/platform/xss13.html b/cypress/platform/xss13.html
index f3e0ecc49..41e868d5c 100644
--- a/cypress/platform/xss13.html
+++ b/cypress/platform/xss13.html
@@ -1,20 +1,25 @@
 <html>
   <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
         /* background: rgb(221, 208, 208); */
         /* background:#333; */
         font-family: 'Arial';
         /* font-size: 18px !important; */
-        }
-      h1 { color: grey;}
+      }
+      h1 {
+        color: grey;
+      }
       .mermaid2 {
         display: none;
       }
@@ -23,9 +28,9 @@
       }
       .malware {
         position: fixed;
-        bottom:0;
-        left:0;
-        right:0;
+        bottom: 0;
+        left: 0;
+        right: 0;
         height: 150px;
         background: red;
         color: black;
@@ -43,7 +48,8 @@
     <div class="flex">
       <div id="diagram" class="mermaid"></div>
       <div id="res" class=""></div>
-  <script src="./mermaid.js"></script>
+    </div>
+    <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
@@ -59,8 +65,8 @@
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
           nodeSpacing: 10,
-    curve: 'cardinal',
-    htmlLabels: true,
+          curve: 'cardinal',
+          htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
@@ -76,8 +82,8 @@
         // themeVariables: {relationLabelColor: 'red'}
       });
       function callback() {
-  alert('It worked');
-}
+        alert('It worked');
+      }
       function xssAttack() {
         const div = document.createElement('div');
         div.id = 'the-malware';
@@ -87,19 +93,19 @@
         throw new Error('XSS Succeeded');
       }
 
-var diagram = 'stateDiagram-v2\n';
-diagram += 'if_state --> False: if n < 0<img/src';
-diagram += "='1'/onerror=xssAttack()>";
+      var diagram = 'stateDiagram-v2\n';
+      diagram += 'if_state --> False: if n < 0<img/src';
+      diagram += "='1'/onerror=xssAttack()>";
 
-//   var diagram = "stateDiagram-v2\n";
-//  diagram += "<img/src='1'/onerror"
-//  diagram += "=xssAttack()> --> B";
-console.log(diagram);
-// document.querySelector('#diagram').innerHTML = diagram;
-mermaid.render('diagram', diagram, (res) => {
-  console.log(res);
-  document.querySelector('#res').innerHTML = res;
-});
+      //   var diagram = "stateDiagram-v2\n";
+      //  diagram += "<img/src='1'/onerror"
+      //  diagram += "=xssAttack()> --> B";
+      console.log(diagram);
+      // document.querySelector('#diagram').innerHTML = diagram;
+      mermaid.render('diagram', diagram, (res) => {
+        console.log(res);
+        document.querySelector('#res').innerHTML = res;
+      });
     </script>
   </body>
 </html>
diff --git a/cypress/platform/xss14.html b/cypress/platform/xss14.html
index 75492bbf4..f3bdf8605 100644
--- a/cypress/platform/xss14.html
+++ b/cypress/platform/xss14.html
@@ -1,20 +1,25 @@
 <html>
   <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
         /* background: rgb(221, 208, 208); */
         /* background:#333; */
         font-family: 'Arial';
         /* font-size: 18px !important; */
-        }
-      h1 { color: grey;}
+      }
+      h1 {
+        color: grey;
+      }
       .mermaid2 {
         display: none;
       }
@@ -23,9 +28,9 @@
       }
       .malware {
         position: fixed;
-        bottom:0;
-        left:0;
-        right:0;
+        bottom: 0;
+        left: 0;
+        right: 0;
         height: 150px;
         background: red;
         color: black;
@@ -43,7 +48,8 @@
     <div class="flex">
       <div id="diagram" class="mermaid"></div>
       <div id="res" class=""></div>
-  <script src="./mermaid.js"></script>
+    </div>
+    <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
@@ -59,8 +65,8 @@
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
           nodeSpacing: 10,
-    curve: 'cardinal',
-    htmlLabels: true,
+          curve: 'cardinal',
+          htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
@@ -76,8 +82,8 @@
         // themeVariables: {relationLabelColor: 'red'}
       });
       function callback() {
-  alert('It worked');
-}
+        alert('It worked');
+      }
       function xssAttack() {
         const div = document.createElement('div');
         div.id = 'the-malware';
@@ -88,20 +94,20 @@
       }
 
       var diagram = 'classDiagram\n';
-diagram += 'classA <-- classB : <ifr';
-diagram += "ame/srcdoc='<scr";
-diagram += 'ipt>parent.xssAttack(`XSS`)</';
-diagram += "script>'>";
+      diagram += 'classA <-- classB : <ifr';
+      diagram += "ame/srcdoc='<scr";
+      diagram += 'ipt>parent.xssAttack(`XSS`)</';
+      diagram += "script>'>";
 
-//   var diagram = "stateDiagram-v2\n";
-//  diagram += "<img/src='1'/onerror"
-//  diagram += "=xssAttack()> --> B";
-console.log(diagram);
-// document.querySelector('#diagram').innerHTML = diagram;
-mermaid.render('diagram', diagram, (res) => {
-  console.log(res);
-  document.querySelector('#res').innerHTML = res;
-});
+      //   var diagram = "stateDiagram-v2\n";
+      //  diagram += "<img/src='1'/onerror"
+      //  diagram += "=xssAttack()> --> B";
+      console.log(diagram);
+      // document.querySelector('#diagram').innerHTML = diagram;
+      mermaid.render('diagram', diagram, (res) => {
+        console.log(res);
+        document.querySelector('#res').innerHTML = res;
+      });
     </script>
   </body>
 </html>
diff --git a/cypress/platform/xss15.html b/cypress/platform/xss15.html
index 1d7cfd5e7..5a3753d53 100644
--- a/cypress/platform/xss15.html
+++ b/cypress/platform/xss15.html
@@ -1,20 +1,25 @@
 <html>
   <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
         /* background: rgb(221, 208, 208); */
         /* background:#333; */
         font-family: 'Arial';
         /* font-size: 18px !important; */
-        }
-      h1 { color: grey;}
+      }
+      h1 {
+        color: grey;
+      }
       .mermaid2 {
         display: none;
       }
@@ -23,9 +28,9 @@
       }
       .malware {
         position: fixed;
-        bottom:0;
-        left:0;
-        right:0;
+        bottom: 0;
+        left: 0;
+        right: 0;
         height: 150px;
         background: red;
         color: black;
@@ -43,7 +48,8 @@
     <div class="flex">
       <div id="diagram" class="mermaid"></div>
       <div id="res" class=""></div>
-  <script src="./mermaid.js"></script>
+    </div>
+    <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
@@ -59,8 +65,8 @@
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
           nodeSpacing: 10,
-    curve: 'cardinal',
-    htmlLabels: true,
+          curve: 'cardinal',
+          htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
@@ -76,8 +82,8 @@
         // themeVariables: {relationLabelColor: 'red'}
       });
       function callback() {
-  alert('It worked');
-}
+        alert('It worked');
+      }
       function xssAttack() {
         const div = document.createElement('div');
         div.id = 'the-malware';
@@ -90,17 +96,17 @@
       var diagram = `sequenceDiagram
     participant John
     links John: {"XSS": "javas`;
-diagram += `cript:alert('AudioParam')"}`;
+      diagram += `cript:alert('AudioParam')"}`;
 
-//   var diagram = "stateDiagram-v2\n";
-//  diagram += "<img/src='1'/onerror"
-//  diagram += "=xssAttack()> --> B";
-console.log(diagram);
-// document.querySelector('#diagram').innerHTML = diagram;
-mermaid.render('diagram', diagram, (res) => {
-  console.log(res);
-  document.querySelector('#res').innerHTML = res;
-});
+      //   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>
diff --git a/cypress/platform/xss16.html b/cypress/platform/xss16.html
index 69355aea3..fe05206ce 100644
--- a/cypress/platform/xss16.html
+++ b/cypress/platform/xss16.html
@@ -1,20 +1,25 @@
 <html>
   <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
         /* background: rgb(221, 208, 208); */
         /* background:#333; */
         font-family: 'Arial';
         /* font-size: 18px !important; */
-        }
-      h1 { color: grey;}
+      }
+      h1 {
+        color: grey;
+      }
       .mermaid2 {
         display: none;
       }
@@ -23,9 +28,9 @@
       }
       .malware {
         position: fixed;
-        bottom:0;
-        left:0;
-        right:0;
+        bottom: 0;
+        left: 0;
+        right: 0;
         height: 150px;
         background: red;
         color: black;
@@ -43,7 +48,8 @@
     <div class="flex">
       <div id="diagram" class="mermaid"></div>
       <div id="res" class=""></div>
-  <script src="./mermaid.js"></script>
+    </div>
+    <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
@@ -59,8 +65,8 @@
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
           nodeSpacing: 10,
-    curve: 'cardinal',
-    htmlLabels: true,
+          curve: 'cardinal',
+          htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
@@ -76,8 +82,8 @@
         // themeVariables: {relationLabelColor: 'red'}
       });
       function callback() {
-  alert('It worked');
-}
+        alert('It worked');
+      }
       function xssAttack() {
         const div = document.createElement('div');
         div.id = 'the-malware';
@@ -91,15 +97,15 @@
     participant Alice
     links Alice: { "Click me!" : "javasjavascript:cript:alert('goose')" }`;
 
-// //   var diagram = "stateDiagram-v2\n";
-// //  diagram += "<img/src='1'/onerror"
-// diagram += '//via.placeholder.com/64\' width=64 />"]';
-// console.log(diagram);
-// document.querySelector('#diagram').innerHTML = diagram;
-mermaid.render('diagram', diagram, (res) => {
-  console.log(res);
-  document.querySelector('#res').innerHTML = res;
-});
+      // //   var diagram = "stateDiagram-v2\n";
+      // //  diagram += "<img/src='1'/onerror"
+      // diagram += '//via.placeholder.com/64\' width=64 />"]';
+      // console.log(diagram);
+      // document.querySelector('#diagram').innerHTML = diagram;
+      mermaid.render('diagram', diagram, (res) => {
+        console.log(res);
+        document.querySelector('#res').innerHTML = res;
+      });
     </script>
   </body>
 </html>
diff --git a/cypress/platform/xss17.html b/cypress/platform/xss17.html
index 874dcb7af..95b52fcc6 100644
--- a/cypress/platform/xss17.html
+++ b/cypress/platform/xss17.html
@@ -1,20 +1,25 @@
 <html>
   <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
         /* background: rgb(221, 208, 208); */
         /* background:#333; */
         font-family: 'Arial';
         /* font-size: 18px !important; */
-        }
-      h1 { color: grey;}
+      }
+      h1 {
+        color: grey;
+      }
       .mermaid2 {
         display: none;
       }
@@ -23,9 +28,9 @@
       }
       .malware {
         position: fixed;
-        bottom:0;
-        left:0;
-        right:0;
+        bottom: 0;
+        left: 0;
+        right: 0;
         height: 150px;
         background: red;
         color: black;
@@ -43,7 +48,8 @@
     <div class="flex">
       <div id="diagram" class="mermaid"></div>
       <div id="res" class=""></div>
-  <script src="./mermaid.js"></script>
+    </div>
+    <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
@@ -59,8 +65,8 @@
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
           nodeSpacing: 10,
-    curve: 'cardinal',
-    htmlLabels: true,
+          curve: 'cardinal',
+          htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
@@ -76,8 +82,8 @@
         // themeVariables: {relationLabelColor: 'red'}
       });
       function callback() {
-  alert('It worked');
-}
+        alert('It worked');
+      }
       function xssAttack() {
         const div = document.createElement('div');
         div.id = 'the-malware';
@@ -91,15 +97,15 @@
     participant Alice
     link Alice: Click Me!@javasjavascript:cript:alert("goose")`;
 
-// //   var diagram = "stateDiagram-v2\n";
-// //  diagram += "<img/src='1'/onerror"
-// diagram += '//via.placeholder.com/64\' width=64 />"]';
-// console.log(diagram);
-// document.querySelector('#diagram').innerHTML = diagram;
-mermaid.render('diagram', diagram, (res) => {
-  console.log(res);
-  document.querySelector('#res').innerHTML = res;
-});
+      // //   var diagram = "stateDiagram-v2\n";
+      // //  diagram += "<img/src='1'/onerror"
+      // diagram += '//via.placeholder.com/64\' width=64 />"]';
+      // console.log(diagram);
+      // document.querySelector('#diagram').innerHTML = diagram;
+      mermaid.render('diagram', diagram, (res) => {
+        console.log(res);
+        document.querySelector('#res').innerHTML = res;
+      });
     </script>
   </body>
 </html>
diff --git a/cypress/platform/xss18.html b/cypress/platform/xss18.html
index c93e603b1..6fb8ec69e 100644
--- a/cypress/platform/xss18.html
+++ b/cypress/platform/xss18.html
@@ -1,20 +1,25 @@
 <html>
   <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
         /* background: rgb(221, 208, 208); */
         /* background:#333; */
         font-family: 'Arial';
         /* font-size: 18px !important; */
-        }
-      h1 { color: grey;}
+      }
+      h1 {
+        color: grey;
+      }
       .mermaid2 {
         display: none;
       }
@@ -23,9 +28,9 @@
       }
       .malware {
         position: fixed;
-        bottom:0;
-        left:0;
-        right:0;
+        bottom: 0;
+        left: 0;
+        right: 0;
         height: 150px;
         background: red;
         color: black;
@@ -43,7 +48,8 @@
     <div class="flex">
       <div id="diagram" class="mermaid"></div>
       <div id="res" class=""></div>
-  <script src="./mermaid.js"></script>
+    </div>
+    <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
@@ -59,8 +65,8 @@
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
           nodeSpacing: 10,
-    curve: 'cardinal',
-    htmlLabels: true,
+          curve: 'cardinal',
+          htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
@@ -76,8 +82,8 @@
         // themeVariables: {relationLabelColor: 'red'}
       });
       function callback() {
-  alert('It worked');
-}
+        alert('It worked');
+      }
       function xssAttack() {
         const div = document.createElement('div');
         div.id = 'the-malware';
@@ -90,15 +96,15 @@
       var diagram = `classDiagram
       Class "<img/src='x'/onerror=xssAttack(1)>" <--> "<img/src='x'/onerror=xssAttack(2)>" C2: Cool label`;
 
-// //   var diagram = "stateDiagram-v2\n";
-// //  diagram += "<img/src='1'/onerror"
-// diagram += '//via.placeholder.com/64\' width=64 />"]';
-// console.log(diagram);
-// document.querySelector('#diagram').innerHTML = diagram;
-mermaid.render('diagram', diagram, (res) => {
-  console.log(res);
-  document.querySelector('#res').innerHTML = res;
-});
+      // //   var diagram = "stateDiagram-v2\n";
+      // //  diagram += "<img/src='1'/onerror"
+      // diagram += '//via.placeholder.com/64\' width=64 />"]';
+      // console.log(diagram);
+      // document.querySelector('#diagram').innerHTML = diagram;
+      mermaid.render('diagram', diagram, (res) => {
+        console.log(res);
+        document.querySelector('#res').innerHTML = res;
+      });
     </script>
   </body>
 </html>
diff --git a/cypress/platform/xss19.html b/cypress/platform/xss19.html
index cce0d97a4..590a195aa 100644
--- a/cypress/platform/xss19.html
+++ b/cypress/platform/xss19.html
@@ -1,20 +1,25 @@
 <html>
   <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
         /* background: rgb(221, 208, 208); */
         /* background:#333; */
         font-family: 'Arial';
         /* font-size: 18px !important; */
-        }
-      h1 { color: grey;}
+      }
+      h1 {
+        color: grey;
+      }
       .mermaid2 {
         display: none;
       }
@@ -23,9 +28,9 @@
       }
       .malware {
         position: fixed;
-        bottom:0;
-        left:0;
-        right:0;
+        bottom: 0;
+        left: 0;
+        right: 0;
         height: 150px;
         background: red;
         color: black;
@@ -43,7 +48,8 @@
     <div class="flex">
       <div id="diagram" class="mermaid"></div>
       <div id="res" class=""></div>
-  <script src="./mermaid.js"></script>
+    </div>
+    <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
@@ -59,8 +65,8 @@
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
           nodeSpacing: 10,
-    curve: 'cardinal',
-    htmlLabels: true,
+          curve: 'cardinal',
+          htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
@@ -76,8 +82,8 @@
         // themeVariables: {relationLabelColor: 'red'}
       });
       function callback() {
-  alert('It worked');
-}
+        alert('It worked');
+      }
       function xssAttack() {
         const div = document.createElement('div');
         div.id = 'the-malware';
@@ -91,16 +97,16 @@
 class Shape{
     <<<img/src='1'/`;
 
-// //   var diagram = "stateDiagram-v2\n";
-diagram += `onerror=xssAttack()>>>
+      // //   var diagram = "stateDiagram-v2\n";
+      diagram += `onerror=xssAttack()>>>
 }`;
-// diagram += '//via.placeholder.com/64\' width=64 />"]';
-// console.log(diagram);
-// document.querySelector('#diagram').innerHTML = diagram;
-mermaid.render('diagram', diagram, (res) => {
-  console.log(res);
-  document.querySelector('#res').innerHTML = res;
-});
+      // diagram += '//via.placeholder.com/64\' width=64 />"]';
+      // console.log(diagram);
+      // document.querySelector('#diagram').innerHTML = diagram;
+      mermaid.render('diagram', diagram, (res) => {
+        console.log(res);
+        document.querySelector('#res').innerHTML = res;
+      });
     </script>
   </body>
 </html>
diff --git a/cypress/platform/xss20.html b/cypress/platform/xss20.html
index b782d52f3..7b8aa9f85 100644
--- a/cypress/platform/xss20.html
+++ b/cypress/platform/xss20.html
@@ -1,20 +1,25 @@
 <html>
   <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
         /* background: rgb(221, 208, 208); */
         /* background:#333; */
         font-family: 'Arial';
         /* font-size: 18px !important; */
-        }
-      h1 { color: grey;}
+      }
+      h1 {
+        color: grey;
+      }
       .mermaid2 {
         display: none;
       }
@@ -23,9 +28,9 @@
       }
       .malware {
         position: fixed;
-        bottom:0;
-        left:0;
-        right:0;
+        bottom: 0;
+        left: 0;
+        right: 0;
         height: 150px;
         background: red;
         color: black;
@@ -43,7 +48,8 @@
     <div class="flex">
       <div id="diagram" class="mermaid"></div>
       <div id="res" class=""></div>
-  <script src="./mermaid.js"></script>
+    </div>
+    <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
@@ -59,8 +65,8 @@
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
           nodeSpacing: 10,
-    curve: 'cardinal',
-    htmlLabels: true,
+          curve: 'cardinal',
+          htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
@@ -76,8 +82,8 @@
         // themeVariables: {relationLabelColor: 'red'}
       });
       function callback() {
-  alert('It worked');
-}
+        alert('It worked');
+      }
       function xssAttack() {
         const div = document.createElement('div');
         div.id = 'the-malware';
@@ -87,18 +93,18 @@
         throw new Error('XSS Succeeded');
       }
 
-//       var diagram = `  graph TD
-// A --> B["&lt;a href='javasc`;
-// diagram += `ript#colon;xssAttack()'&gt;AAA&lt;/a&gt;"]`;
+      //       var diagram = `  graph TD
+      // A --> B["&lt;a href='javasc`;
+      // diagram += `ript#colon;xssAttack()'&gt;AAA&lt;/a&gt;"]`;
       var diagram = `  graph TD
 A --> B["<a href='javasc`;
-diagram += `ript#colon;xssAttack()'>AAA</a>"]`;
-// diagram += '//via.placeholder.com/64\' width=64 />"]';
-// document.querySelector('#diagram').innerHTML = diagram;
-mermaid.render('diagram', diagram, (res) => {
-  // console.log(res);
-  document.querySelector('#res').innerHTML = res;
-});
+      diagram += `ript#colon;xssAttack()'>AAA</a>"]`;
+      // diagram += '//via.placeholder.com/64\' width=64 />"]';
+      // document.querySelector('#diagram').innerHTML = diagram;
+      mermaid.render('diagram', diagram, (res) => {
+        // console.log(res);
+        document.querySelector('#res').innerHTML = res;
+      });
     </script>
   </body>
 </html>
diff --git a/cypress/platform/xss21.html b/cypress/platform/xss21.html
index ed243441f..e65a357ee 100644
--- a/cypress/platform/xss21.html
+++ b/cypress/platform/xss21.html
@@ -1,20 +1,25 @@
 <html>
   <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
         /* background: rgb(221, 208, 208); */
         /* background:#333; */
         font-family: 'Arial';
         /* font-size: 18px !important; */
-        }
-      h1 { color: grey;}
+      }
+      h1 {
+        color: grey;
+      }
       .mermaid2 {
         display: none;
       }
@@ -23,9 +28,9 @@
       }
       .malware {
         position: fixed;
-        bottom:0;
-        left:0;
-        right:0;
+        bottom: 0;
+        left: 0;
+        right: 0;
         height: 150px;
         background: red;
         color: black;
@@ -43,7 +48,8 @@
     <div class="flex">
       <div id="diagram" class="mermaid"></div>
       <div id="res" class=""></div>
-  <script src="./mermaid.js"></script>
+    </div>
+    <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
@@ -59,8 +65,8 @@
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
           nodeSpacing: 10,
-    curve: 'cardinal',
-    htmlLabels: true,
+          curve: 'cardinal',
+          htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
@@ -76,8 +82,8 @@
         // themeVariables: {relationLabelColor: 'red'}
       });
       function callback() {
-  alert('It worked');
-}
+        alert('It worked');
+      }
       function xssAttack() {
         const div = document.createElement('div');
         div.id = 'the-malware';
@@ -87,18 +93,18 @@
         throw new Error('XSS Succeeded');
       }
 
-//       var diagram = `  graph TD
-// A --> B["&lt;a href='javasc`;
-// diagram += `ript#colon;xssAttack()'&gt;AAA&lt;/a&gt;"]`;
+      //       var diagram = `  graph TD
+      // A --> B["&lt;a href='javasc`;
+      // diagram += `ript#colon;xssAttack()'&gt;AAA&lt;/a&gt;"]`;
       var diagram = `  graph TD
 A --> B["<a href='javasc`;
-diagram += `ript#9;t#colon;xssAttack()'>AAA</a>"]`;
-// diagram += '//via.placeholder.com/64\' width=64 />"]';
-// document.querySelector('#diagram').innerHTML = diagram;
-mermaid.render('diagram', diagram, (res) => {
-  console.log(res);
-  document.querySelector('#res').innerHTML = res;
-});
+      diagram += `ript#9;t#colon;xssAttack()'>AAA</a>"]`;
+      // diagram += '//via.placeholder.com/64\' width=64 />"]';
+      // document.querySelector('#diagram').innerHTML = diagram;
+      mermaid.render('diagram', diagram, (res) => {
+        console.log(res);
+        document.querySelector('#res').innerHTML = res;
+      });
     </script>
   </body>
 </html>
diff --git a/cypress/platform/xss4.html b/cypress/platform/xss4.html
index 0a876226a..b6e36edcd 100644
--- a/cypress/platform/xss4.html
+++ b/cypress/platform/xss4.html
@@ -1,20 +1,25 @@
 <html>
   <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
         /* background: rgb(221, 208, 208); */
         /* background:#333; */
         font-family: 'Arial';
         /* font-size: 18px !important; */
-        }
-      h1 { color: grey;}
+      }
+      h1 {
+        color: grey;
+      }
       .mermaid2 {
         display: none;
       }
@@ -23,9 +28,9 @@
       }
       .malware {
         position: fixed;
-        bottom:0;
-        left:0;
-        right:0;
+        bottom: 0;
+        left: 0;
+        right: 0;
         height: 150px;
         background: red;
         color: black;
@@ -43,7 +48,8 @@
     <div class="flex">
       <div id="diagram" class="mermaid"></div>
       <div id="res" class=""></div>
-  <script src="./mermaid.js"></script>
+    </div>
+    <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
@@ -59,8 +65,8 @@
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
           nodeSpacing: 10,
-    curve: 'cardinal',
-    htmlLabels: true,
+          curve: 'cardinal',
+          htmlLabels: true,
         },
         htmlLabels: false,
         // gantt: { axisFormat: '%m/%d/%Y' },
@@ -76,23 +82,22 @@
         // themeVariables: {relationLabelColor: 'red'}
       });
       function callback() {
-  alert('It worked');
-}
+        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>"]';
+      diagram += 'flowchart\n';
+      diagram += 'A["<ifra';
+      diagram += "me srcdoc='<scrip";
+      diagram += 't src=http://localhost:9000/exploit.js>';
+      diagram += '</scr';
+      diagram += 'ipt>\'></iframe>"]';
 
-console.log(diagram);
-// document.querySelector('#diagram').innerHTML = diagram;
-mermaid.render('diagram', diagram, (res) => {
-  document.querySelector('#res').innerHTML = res;
-});
+      console.log(diagram);
+      // document.querySelector('#diagram').innerHTML = diagram;
+      mermaid.render('diagram', diagram, (res) => {
+        document.querySelector('#res').innerHTML = res;
+      });
     </script>
   </body>
 </html>
-
diff --git a/cypress/platform/xss5.html b/cypress/platform/xss5.html
index 86d45eeec..bf8943eee 100644
--- a/cypress/platform/xss5.html
+++ b/cypress/platform/xss5.html
@@ -1,20 +1,25 @@
 <html>
   <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
         /* background: rgb(221, 208, 208); */
         /* background:#333; */
         font-family: 'Arial';
         /* font-size: 18px !important; */
-        }
-      h1 { color: grey;}
+      }
+      h1 {
+        color: grey;
+      }
       .mermaid2 {
         display: none;
       }
@@ -23,9 +28,9 @@
       }
       .malware {
         position: fixed;
-        bottom:0;
-        left:0;
-        right:0;
+        bottom: 0;
+        left: 0;
+        right: 0;
         height: 150px;
         background: red;
         color: black;
@@ -43,7 +48,8 @@
     <div class="flex">
       <div id="diagram" class="mermaid"></div>
       <div id="res" class=""></div>
-  <script src="./mermaid.js"></script>
+    </div>
+    <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
@@ -59,8 +65,8 @@
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
           nodeSpacing: 10,
-    curve: 'cardinal',
-    htmlLabels: true,
+          curve: 'cardinal',
+          htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
@@ -76,8 +82,8 @@
         // themeVariables: {relationLabelColor: 'red'}
       });
       function callback() {
-  alert('It worked');
-}
+        alert('It worked');
+      }
       function xssAttack() {
         const div = document.createElement('div');
         div.id = 'the-malware';
@@ -87,16 +93,16 @@
         throw new Error('XSS Succeeded');
       }
       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';
+      diagram += 'B-->D("<img onerror=location=`java';
+      // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
+      diagram += 'script\x3a;xssAttack\u0028\u0029` src=x>");\n';
 
-console.log(diagram);
-// document.querySelector('#diagram').innerHTML = diagram;
-mermaid.render('diagram', diagram, (res) => {
-  console.log(res);
-  document.querySelector('#res').innerHTML = res;
-});
+      console.log(diagram);
+      // document.querySelector('#diagram').innerHTML = diagram;
+      mermaid.render('diagram', diagram, (res) => {
+        console.log(res);
+        document.querySelector('#res').innerHTML = res;
+      });
     </script>
   </body>
 </html>
diff --git a/cypress/platform/xss6.html b/cypress/platform/xss6.html
index 32eca4313..0c70133b1 100644
--- a/cypress/platform/xss6.html
+++ b/cypress/platform/xss6.html
@@ -1,20 +1,25 @@
 <html>
   <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
         /* background: rgb(221, 208, 208); */
         /* background:#333; */
         font-family: 'Arial';
         /* font-size: 18px !important; */
-        }
-      h1 { color: grey;}
+      }
+      h1 {
+        color: grey;
+      }
       .mermaid2 {
         display: none;
       }
@@ -23,9 +28,9 @@
       }
       .malware {
         position: fixed;
-        bottom:0;
-        left:0;
-        right:0;
+        bottom: 0;
+        left: 0;
+        right: 0;
         height: 150px;
         background: red;
         color: black;
@@ -43,7 +48,8 @@
     <div class="flex">
       <div id="diagram" class="mermaid"></div>
       <div id="res" class=""></div>
-  <script src="./mermaid.js"></script>
+    </div>
+    <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
@@ -59,8 +65,8 @@
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
           nodeSpacing: 10,
-    curve: 'cardinal',
-    htmlLabels: true,
+          curve: 'cardinal',
+          htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
@@ -76,8 +82,8 @@
         // themeVariables: {relationLabelColor: 'red'}
       });
       function callback() {
-  alert('It worked');
-}
+        alert('It worked');
+      }
       function xssAttack() {
         const div = document.createElement('div');
         div.id = 'the-malware';
@@ -87,14 +93,14 @@
         throw new Error('XSS Succeeded');
       }
       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;
-});
+      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>
diff --git a/cypress/platform/xss7.html b/cypress/platform/xss7.html
index 51fcb3ddf..667a77d33 100644
--- a/cypress/platform/xss7.html
+++ b/cypress/platform/xss7.html
@@ -1,20 +1,25 @@
 <html>
   <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
         /* background: rgb(221, 208, 208); */
         /* background:#333; */
         font-family: 'Arial';
         /* font-size: 18px !important; */
-        }
-      h1 { color: grey;}
+      }
+      h1 {
+        color: grey;
+      }
       .mermaid2 {
         display: none;
       }
@@ -23,9 +28,9 @@
       }
       .malware {
         position: fixed;
-        bottom:0;
-        left:0;
-        right:0;
+        bottom: 0;
+        left: 0;
+        right: 0;
         height: 150px;
         background: red;
         color: black;
@@ -43,7 +48,8 @@
     <div class="flex">
       <div id="diagram" class="mermaid"></div>
       <div id="res" class=""></div>
-  <script src="./mermaid.js"></script>
+    </div>
+    <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
@@ -59,8 +65,8 @@
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
           nodeSpacing: 10,
-    curve: 'cardinal',
-    htmlLabels: true,
+          curve: 'cardinal',
+          htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
@@ -76,8 +82,8 @@
         // themeVariables: {relationLabelColor: 'red'}
       });
       function callback() {
-  alert('It worked');
-}
+        alert('It worked');
+      }
       function xssAttack() {
         const div = document.createElement('div');
         div.id = 'the-malware';
@@ -87,16 +93,16 @@
         throw new Error('XSS Succeeded');
       }
       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;
-});
+      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>
diff --git a/cypress/platform/xss8.html b/cypress/platform/xss8.html
index 97709ffc6..64211c778 100644
--- a/cypress/platform/xss8.html
+++ b/cypress/platform/xss8.html
@@ -1,20 +1,25 @@
 <html>
   <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
         /* background: rgb(221, 208, 208); */
         /* background:#333; */
         font-family: 'Arial';
         /* font-size: 18px !important; */
-        }
-      h1 { color: grey;}
+      }
+      h1 {
+        color: grey;
+      }
       .mermaid2 {
         display: none;
       }
@@ -23,9 +28,9 @@
       }
       .malware {
         position: fixed;
-        bottom:0;
-        left:0;
-        right:0;
+        bottom: 0;
+        left: 0;
+        right: 0;
         height: 150px;
         background: red;
         color: black;
@@ -43,7 +48,8 @@
     <div class="flex">
       <div id="diagram" class="mermaid"></div>
       <div id="res" class=""></div>
-  <script src="./mermaid.js"></script>
+    </div>
+    <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
@@ -59,8 +65,8 @@
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
           nodeSpacing: 10,
-    curve: 'cardinal',
-    htmlLabels: true,
+          curve: 'cardinal',
+          htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
@@ -76,8 +82,8 @@
         // themeVariables: {relationLabelColor: 'red'}
       });
       function callback() {
-  alert('It worked');
-}
+        alert('It worked');
+      }
       function xssAttack() {
         const div = document.createElement('div');
         div.id = 'the-malware';
@@ -87,15 +93,15 @@
         throw new Error('XSS Succeeded');
       }
 
-var diagram = 'stateDiagram-v2\n';
-diagram += "<img/src='1'/onerror=xssAttack()> --> B";
-// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
-console.log(diagram);
-// document.querySelector('#diagram').innerHTML = diagram;
-mermaid.render('diagram', diagram, (res) => {
-  console.log(res);
-  document.querySelector('#res').innerHTML = res;
-});
+      var diagram = 'stateDiagram-v2\n';
+      diagram += "<img/src='1'/onerror=xssAttack()> --> B";
+      // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
+      console.log(diagram);
+      // document.querySelector('#diagram').innerHTML = diagram;
+      mermaid.render('diagram', diagram, (res) => {
+        console.log(res);
+        document.querySelector('#res').innerHTML = res;
+      });
     </script>
   </body>
 </html>
diff --git a/cypress/platform/xss9.html b/cypress/platform/xss9.html
index 7d06e988e..09c1d7f20 100644
--- a/cypress/platform/xss9.html
+++ b/cypress/platform/xss9.html
@@ -1,20 +1,25 @@
 <html>
   <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
         /* background: rgb(221, 208, 208); */
         /* background:#333; */
         font-family: 'Arial';
         /* font-size: 18px !important; */
-        }
-      h1 { color: grey;}
+      }
+      h1 {
+        color: grey;
+      }
       .mermaid2 {
         display: none;
       }
@@ -23,9 +28,9 @@
       }
       .malware {
         position: fixed;
-        bottom:0;
-        left:0;
-        right:0;
+        bottom: 0;
+        left: 0;
+        right: 0;
         height: 150px;
         background: red;
         color: black;
@@ -43,7 +48,8 @@
     <div class="flex">
       <div id="diagram" class="mermaid"></div>
       <div id="res" class=""></div>
-  <script src="./mermaid.js"></script>
+    </div>
+    <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
@@ -59,8 +65,8 @@
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
           nodeSpacing: 10,
-    curve: 'cardinal',
-    htmlLabels: true,
+          curve: 'cardinal',
+          htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
@@ -76,8 +82,8 @@
         // themeVariables: {relationLabelColor: 'red'}
       });
       function callback() {
-  alert('It worked');
-}
+        alert('It worked');
+      }
       function xssAttack() {
         const div = document.createElement('div');
         div.id = 'the-malware';
@@ -87,15 +93,15 @@
         throw new Error('XSS Succeeded');
       }
 
-var diagram = 'stateDiagram-v2\n';
-diagram += "<img/src='1'/onerror=xssAttack()> --> B";
-// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
-console.log(diagram);
-// document.querySelector('#diagram').innerHTML = diagram;
-mermaid.render('diagram', diagram, (res) => {
-  console.log(res);
-  document.querySelector('#res').innerHTML = res;
-});
+      var diagram = 'stateDiagram-v2\n';
+      diagram += "<img/src='1'/onerror=xssAttack()> --> B";
+      // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
+      console.log(diagram);
+      // document.querySelector('#diagram').innerHTML = diagram;
+      mermaid.render('diagram', diagram, (res) => {
+        console.log(res);
+        document.querySelector('#res').innerHTML = res;
+      });
     </script>
   </body>
 </html>

From 98e9f5751ad8f94febc510584d2595000ac4d731 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 5 Sep 2022 01:00:47 +0530
Subject: [PATCH 58/60] Prettier pass

---
 .commitlintrc.json                            |    6 +-
 .github/ISSUE_TEMPLATE/bug_report.md          |   18 +-
 .github/ISSUE_TEMPLATE/feature_request.md     |    1 -
 .github/ISSUE_TEMPLATE/question.md            |   11 +-
 .github/codeql/codeql-config.yml              |    2 +-
 .github/dependabot.yml                        |   32 +-
 .github/pull_request_template.md              |   10 +-
 .github/stale.yml                             |    2 +-
 .github/workflows/build.yml                   |   40 +-
 .github/workflows/checks.yml                  |   18 +-
 .github/workflows/codeql.yml                  |   61 +-
 .github/workflows/issue-triage.yml            |   10 +-
 .github/workflows/lint.yml                    |   30 +-
 .github/workflows/release-preview-publish.yml |   45 +-
 .github/workflows/release-publish.yml         |   58 +-
 .github/workflows/test.yml                    |   32 +-
 .github/workflows/unlock-reopened-issues.yml  |    8 +-
 .prettierignore                               |    3 +-
 .tern-project                                 |   10 +-
 CHANGELOG.md                                  | 1194 ++++++------
 CONTRIBUTING.md                               |   30 +-
 README.md                                     |   44 +-
 README.zh-CN.md                               |   26 +-
 __mocks__/d3.js                               |    3 +
 cypress/.eslintrc.json                        |   16 +-
 cypress/platform/current.html                 |  193 +-
 cypress/platform/e2e.html                     |   10 +-
 cypress/platform/ghsa1.html                   |   24 +-
 cypress/platform/ghsa2.html                   |   24 +-
 cypress/platform/render-after-error.html      |   43 +-
 cypress/platform/rerender.html                |   45 +-
 cypress/platform/viewer.js                    |    2 +-
 cypress/platform/webpackUsage.html            |   25 +-
 cypress/platform/xss.html                     |   11 +-
 cypress/support/eyes-index.d.ts               |    2 +-
 docs/8.6.0_docs.md                            |   89 +-
 docs/CHANGELOG.md                             |   95 +-
 docs/Configuration.md                         |   19 +-
 docs/README.md                                |   38 +-
 docs/Setup.md                                 |   62 +-
 docs/Tutorials.md                             |    8 +-
 docs/_navbar.md                               |   22 +-
 docs/_sidebar.md                              |    2 +
 docs/accessibility.md                         |  118 +-
 docs/breakingChanges.md                       |    8 +-
 docs/c4c.md                                   |  192 +-
 docs/developer-docs/configuration.md          |    6 +-
 docs/development.md                           |   20 +-
 docs/directives.md                            |  114 +-
 docs/entityRelationshipDiagram.md             |   40 +-
 docs/examples.md                              |    6 +-
 docs/gitgraph.md                              |  132 +-
 docs/integrations.md                          |   36 +-
 docs/landing/index.html                       |   50 +-
 docs/n00b-advanced.md                         |    3 +
 docs/n00b-syntaxReference.md                  |   54 +-
 docs/newDiagram.md                            |   68 +-
 docs/pie.md                                   |   28 +-
 docs/requirementDiagram.md                    |   19 +-
 docs/security.md                              |    5 +-
 docs/sequenceDiagram.md                       |  123 +-
 docs/stateDiagram.md                          |   11 +-
 docs/theme.css                                |  828 ++++++++-
 docs/theme_themed.css                         | 1653 ++++++++++++++++-
 docs/theming.md                               |  167 +-
 docs/upgrading.md                             |   11 +-
 src/__mocks__/mermaidAPI.ts                   |    9 +-
 src/dagre-wrapper/GraphObjects.md             |   85 +-
 src/dagre-wrapper/createLabel.js              |    2 +-
 src/dagre-wrapper/edges.js                    |    4 +-
 src/dagre-wrapper/index.js                    |    4 +-
 src/dagre-wrapper/nodes.js                    |    2 +-
 src/dagre-wrapper/shapes/note.js              |    2 +-
 src/diagrams/c4/svgDraw.js                    |    1 -
 src/diagrams/class/classRenderer-v2.js        |    1 -
 .../flowchart/flowChartShapes.spec.js         |   13 +
 src/diagrams/flowchart/flowDb.js              |    2 +-
 src/diagrams/gantt/ganttRenderer.js           |    1 -
 src/diagrams/git/gitGraphAst.js               |    4 +-
 src/diagrams/git/layout.js                    |    2 +-
 src/diagrams/sequence/svgDraw.js              |    4 +-
 src/diagrams/state/stateDb.js                 |    5 +-
 src/diagrams/user-journey/svgDraw.js          |    1 -
 src/utils.ts                                  |   13 +-
 test.js                                       |    3 +
 85 files changed, 4377 insertions(+), 1897 deletions(-)

diff --git a/.commitlintrc.json b/.commitlintrc.json
index 67b3aa185..c30e5a970 100644
--- a/.commitlintrc.json
+++ b/.commitlintrc.json
@@ -1,5 +1,3 @@
 {
-    "extends": [
-        "@commitlint/config-conventional"
-    ]
-}
\ No newline at end of file
+  "extends": ["@commitlint/config-conventional"]
+}
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
index f8e453bd3..1ca7dd4c3 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -4,7 +4,6 @@ about: Create a report to help us improve
 title: ''
 labels: 'Status: Triage, Type: Bug / Error'
 assignees: ''
-
 ---
 
 **Describe the bug**
@@ -12,6 +11,7 @@ A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -27,15 +27,17 @@ If applicable, add screenshots to help explain your problem.
 If applicable, add the code sample or a link to the [live editor](https://mermaid.live).
 
 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
 
 **Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
 
 **Additional context**
 Add any other context about the problem here.
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
index d466a4ed3..ba38cf9ac 100644
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -4,7 +4,6 @@ about: Suggest an idea for this project
 title: ''
 labels: 'Status: Triage, Type: Enhancement'
 assignees: ''
-
 ---
 
 **Is your feature request related to a problem? Please describe.**
diff --git a/.github/ISSUE_TEMPLATE/question.md b/.github/ISSUE_TEMPLATE/question.md
index f5b759468..52684fd1d 100644
--- a/.github/ISSUE_TEMPLATE/question.md
+++ b/.github/ISSUE_TEMPLATE/question.md
@@ -4,12 +4,13 @@ about: Get some help from the community.
 title: ''
 labels: 'Help wanted!, Type: Other'
 assignees: ''
-
 ---
 
 ## Help us help you!
+
 You want an answer. Here are some ways to get it quicker:
-* Use a clear and concise title.
-* Try to pose a clear and concise question.
-* Include as much, or as little, code as necessary.
-* Don't be shy to give us some screenshots, if it helps!
+
+- Use a clear and concise title.
+- Try to pose a clear and concise question.
+- Include as much, or as little, code as necessary.
+- Don't be shy to give us some screenshots, if it helps!
diff --git a/.github/codeql/codeql-config.yml b/.github/codeql/codeql-config.yml
index 66909e1df..7628e972f 100644
--- a/.github/codeql/codeql-config.yml
+++ b/.github/codeql/codeql-config.yml
@@ -1,4 +1,4 @@
-name: "CodeQL config"
+name: 'CodeQL config'
 paths-ignore:
   - dist
   - cypress
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index a1c60627c..5add84f22 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -1,18 +1,18 @@
 version: 2
 updates:
-- package-ecosystem: npm
-  open-pull-requests-limit: 10
-  directory: /
-  target-branch: develop
-  versioning-strategy: increase
-  schedule:
-    interval: weekly
-    day: monday
-    time: "07:00"
-- package-ecosystem: github-actions
-  directory: /
-  target-branch: develop
-  schedule:
-    interval: weekly
-    day: monday
-    time: "07:00"
+  - package-ecosystem: npm
+    open-pull-requests-limit: 10
+    directory: /
+    target-branch: develop
+    versioning-strategy: increase
+    schedule:
+      interval: weekly
+      day: monday
+      time: '07:00'
+  - package-ecosystem: github-actions
+    directory: /
+    target-branch: develop
+    schedule:
+      interval: weekly
+      day: monday
+      time: '07:00'
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index bab0b1b63..41d9c4cff 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -1,13 +1,17 @@
 ## :bookmark_tabs: Summary
+
 Brief description about the content of your PR.
 
 Resolves #<your issue id here>
 
 ## :straight_ruler: Design Decisions
+
 Describe the way your implementation works or what design decisions you made if applicable.
 
 ### :clipboard: Tasks
+
 Make sure you
-- [ ] :book: have read the [contribution guidelines](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) 
-- [ ] :computer: have added unit/e2e tests (if appropriate) 
-- [ ] :bookmark: targeted `develop` branch 
+
+- [ ] :book: have read the [contribution guidelines](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md)
+- [ ] :computer: have added unit/e2e tests (if appropriate)
+- [ ] :bookmark: targeted `develop` branch
diff --git a/.github/stale.yml b/.github/stale.yml
index fda0f2321..30c4ca4a0 100644
--- a/.github/stale.yml
+++ b/.github/stale.yml
@@ -16,4 +16,4 @@ markComment: >
 # Comment to post when closing a stale issue. Set to `false` to disable
 closeComment: >
   This issue has been been automatically closed due to a lack of activity. 
-  This is done to maintain a clean list of issues that the community is interested in developing. 
+  This is done to maintain a clean list of issues that the community is interested in developing.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 72495c4e9..e5ca57991 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -18,28 +18,28 @@ jobs:
       matrix:
         node-version: [16.x]
     steps:
-    - uses: actions/checkout@v3
+      - uses: actions/checkout@v3
 
-    - name: Setup Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
-      with:
-        cache: yarn
-        node-version: ${{ matrix.node-version }}
+      - name: Setup Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          cache: yarn
+          node-version: ${{ matrix.node-version }}
 
-    - name: Install Yarn
-      run: npm i yarn --global
+      - name: Install Yarn
+        run: npm i yarn --global
 
-    - name: Install Packages
-      run: |
-        yarn install --frozen-lockfile
-      env:
-        CYPRESS_CACHE_FOLDER: .cache/Cypress
+      - name: Install Packages
+        run: |
+          yarn install --frozen-lockfile
+        env:
+          CYPRESS_CACHE_FOLDER: .cache/Cypress
 
-    - name: Run Build
-      run: yarn build
+      - name: Run Build
+        run: yarn build
 
-    - name: Upload Build as Artifact
-      uses: actions/upload-artifact@v3
-      with:
-        name: dist
-        path: dist
+      - name: Upload Build as Artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: dist
+          path: dist
diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml
index 1b9a76405..c7015dbe7 100644
--- a/.github/workflows/checks.yml
+++ b/.github/workflows/checks.yml
@@ -14,12 +14,12 @@ jobs:
     name: check tests
     if: github.repository_owner == 'mermaid-js'
     steps:
-    - uses: actions/checkout@v2
-      with:
-        fetch-depth: 0
-    - uses: testomatio/check-tests@stable
-      with:
-        framework: cypress
-        tests: "./cypress/e2e/**/**.spec.js"
-        token: ${{ secrets.GITHUB_TOKEN }}
-        has-tests-label: true
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - uses: testomatio/check-tests@stable
+        with:
+          framework: cypress
+          tests: './cypress/e2e/**/**.spec.js'
+          token: ${{ secrets.GITHUB_TOKEN }}
+          has-tests-label: true
diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
index 2db07ad77..26cb2db26 100644
--- a/.github/workflows/codeql.yml
+++ b/.github/workflows/codeql.yml
@@ -1,12 +1,11 @@
-
-name: "CodeQL"
+name: 'CodeQL'
 
 on:
   push:
-    branches: [ develop ]
+    branches: [develop]
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: [ develop ]
+    branches: [develop]
     types:
       - opened
       - synchronize
@@ -24,40 +23,40 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        language: [ 'javascript' ]
+        language: ['javascript']
         # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
         # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
 
     steps:
-    - name: Checkout repository
-      uses: actions/checkout@v3
+      - name: Checkout repository
+        uses: actions/checkout@v3
 
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
-      with:
-        config-file: ./.github/codeql/codeql-config.yml
-        languages: ${{ matrix.language }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
-        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v2
+        with:
+          config-file: ./.github/codeql/codeql-config.yml
+          languages: ${{ matrix.language }}
+          # If you wish to specify custom queries, you can do so here or in a config file.
+          # By default, queries listed here will override any specified in a config file.
+          # Prefix the list here with "+" to use these queries and those in the config file.
+          # queries: ./path/to/local/query, your-org/your-repo/queries@main
 
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v2
+      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+      # If this step fails, then you should remove it and run the build manually (see below)
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v2
 
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+      # ℹ️ Command-line programs to run using the OS shell.
+      # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
 
-    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-    #    and modify them (or add more) to build your code if your project
-    #    uses a compiled language
+      # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+      #    and modify them (or add more) to build your code if your project
+      #    uses a compiled language
 
-    #- run: |
-    #   make bootstrap
-    #   make release
+      #- run: |
+      #   make bootstrap
+      #   make release
 
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v2
diff --git a/.github/workflows/issue-triage.yml b/.github/workflows/issue-triage.yml
index 3dbcf94b0..129bd62b6 100644
--- a/.github/workflows/issue-triage.yml
+++ b/.github/workflows/issue-triage.yml
@@ -1,6 +1,6 @@
 name: Apply triage label to new issue
 
-on: 
+on:
   issues:
     types: [opened]
 
@@ -8,7 +8,7 @@ jobs:
   triage:
     runs-on: ubuntu-latest
     steps:
-    - uses: andymckay/labeler@1.0.4
-      with:
-        repo-token: "${{ secrets.GITHUB_TOKEN }}"
-        add-labels: "Status: Triage"
+      - uses: andymckay/labeler@1.0.4
+        with:
+          repo-token: '${{ secrets.GITHUB_TOKEN }}'
+          add-labels: 'Status: Triage'
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index 050667a8f..e5723d0a3 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -18,22 +18,22 @@ jobs:
       matrix:
         node-version: [16.x]
     steps:
-    - uses: actions/checkout@v3
+      - uses: actions/checkout@v3
 
-    - name: Setup Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
-      with:
-        cache: yarn
-        node-version: ${{ matrix.node-version }}
+      - name: Setup Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          cache: yarn
+          node-version: ${{ matrix.node-version }}
 
-    - name: Install Yarn
-      run: npm i yarn --global
+      - name: Install Yarn
+        run: npm i yarn --global
 
-    - name: Install Packages
-      run: |
-        yarn install --frozen-lockfile
-      env:
-        CYPRESS_CACHE_FOLDER: .cache/Cypress
+      - name: Install Packages
+        run: |
+          yarn install --frozen-lockfile
+        env:
+          CYPRESS_CACHE_FOLDER: .cache/Cypress
 
-    - name: Run Linting
-      run: yarn lint
+      - name: Run Linting
+        run: yarn lint
diff --git a/.github/workflows/release-preview-publish.yml b/.github/workflows/release-preview-publish.yml
index 70e9b42c0..ed55c847d 100644
--- a/.github/workflows/release-preview-publish.yml
+++ b/.github/workflows/release-preview-publish.yml
@@ -9,29 +9,28 @@ jobs:
   publish:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
-    - name: Setup Node.js
-      uses: actions/setup-node@v3
-      with:
-        node-version: 16.x
-    - name: Install Yarn
-      run: npm i yarn --global
+      - uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+      - name: Install Yarn
+        run: npm i yarn --global
 
-    - name: Install Json
-      run: npm i json --global
+      - name: Install Json
+        run: npm i json --global
 
-    - name: Install Packages
-      run: yarn install --frozen-lockfile
-
-    - name: Publish
-      run: |
-        PREVIEW_VERSION=8
-        VERSION=$(echo ${{github.ref}} | tail -c +20)-preview.$PREVIEW_VERSION
-        echo $VERSION
-        npm version --no-git-tag-version --allow-same-version $VERSION
-        npm set //npm.pkg.github.com/:_authToken ${{ secrets.GITHUB_TOKEN }}
-        npm set registry https://npm.pkg.github.com/mermaid-js
-        json -I -f package.json -e 'this.name="@mermaid-js/mermaid"' # Package name needs to be set to a scoped one because GitHub registry requires this
-        json -I -f package.json -e 'this.repository="git://github.com/mermaid-js/mermaid"' # Repo url needs to have a specific format too
-        npm publish
+      - name: Install Packages
+        run: yarn install --frozen-lockfile
 
+      - name: Publish
+        run: |
+          PREVIEW_VERSION=8
+          VERSION=$(echo ${{github.ref}} | tail -c +20)-preview.$PREVIEW_VERSION
+          echo $VERSION
+          npm version --no-git-tag-version --allow-same-version $VERSION
+          npm set //npm.pkg.github.com/:_authToken ${{ secrets.GITHUB_TOKEN }}
+          npm set registry https://npm.pkg.github.com/mermaid-js
+          json -I -f package.json -e 'this.name="@mermaid-js/mermaid"' # Package name needs to be set to a scoped one because GitHub registry requires this
+          json -I -f package.json -e 'this.repository="git://github.com/mermaid-js/mermaid"' # Repo url needs to have a specific format too
+          npm publish
diff --git a/.github/workflows/release-publish.yml b/.github/workflows/release-publish.yml
index 4a14ee74e..9cf49e282 100644
--- a/.github/workflows/release-publish.yml
+++ b/.github/workflows/release-publish.yml
@@ -8,37 +8,37 @@ jobs:
   publish:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
-    - uses: fregante/setup-git-user@v1
+      - uses: actions/checkout@v3
+      - uses: fregante/setup-git-user@v1
 
-    - name: Setup Node.js
-      uses: actions/setup-node@v3
-      with:
-        node-version: 16.x
-    - name: Install Yarn
-      run: npm i yarn --global
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+      - name: Install Yarn
+        run: npm i yarn --global
 
-    - name: Install Json
-      run: npm i json --global
+      - name: Install Json
+        run: npm i json --global
 
-    - name: Install Packages
-      run: yarn install --frozen-lockfile
+      - name: Install Packages
+        run: yarn install --frozen-lockfile
 
-    - name: Prepare release
-      run: |
-        VERSION=${GITHUB_REF:10}
-        echo "Preparing release $VERSION"
-        git checkout -t origin/release/$VERSION
-        npm version --no-git-tag-version --allow-same-version $VERSION
-        git add package.json
-        git commit -m "Bump version $VERSION"
-        git checkout -t origin/master
-        git merge -m "Release $VERSION" --no-ff release/$VERSION
-        git push --no-verify
+      - name: Prepare release
+        run: |
+          VERSION=${GITHUB_REF:10}
+          echo "Preparing release $VERSION"
+          git checkout -t origin/release/$VERSION
+          npm version --no-git-tag-version --allow-same-version $VERSION
+          git add package.json
+          git commit -m "Bump version $VERSION"
+          git checkout -t origin/master
+          git merge -m "Release $VERSION" --no-ff release/$VERSION
+          git push --no-verify
 
-    - name: Publish
-      run: |
-        npm set //registry.npmjs.org/:_authToken $NPM_TOKEN
-        npm publish
-      env:
-        NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+      - name: Publish
+        run: |
+          npm set //registry.npmjs.org/:_authToken $NPM_TOKEN
+          npm publish
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index c91f286bc..97aa0a377 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -12,23 +12,23 @@ jobs:
       matrix:
         node-version: [16.x]
     steps:
-    - uses: actions/checkout@v3
+      - uses: actions/checkout@v3
 
-    - name: Setup Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
-      with:
-        cache: yarn
-        node-version: ${{ matrix.node-version }}
+      - name: Setup Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          cache: yarn
+          node-version: ${{ matrix.node-version }}
 
-    - name: Install Yarn
-      run: npm i yarn --global
+      - name: Install Yarn
+        run: npm i yarn --global
 
-    - name: Install Packages
-      run: |
-        yarn install --frozen-lockfile
-      env:
-        CYPRESS_CACHE_FOLDER: .cache/Cypress
+      - name: Install Packages
+        run: |
+          yarn install --frozen-lockfile
+        env:
+          CYPRESS_CACHE_FOLDER: .cache/Cypress
 
-    - name: Run Unit Tests
-      run: |
-        yarn ci --coverage
+      - name: Run Unit Tests
+        run: |
+          yarn ci --coverage
diff --git a/.github/workflows/unlock-reopened-issues.yml b/.github/workflows/unlock-reopened-issues.yml
index 6bf6cdc08..4c5379729 100644
--- a/.github/workflows/unlock-reopened-issues.yml
+++ b/.github/workflows/unlock-reopened-issues.yml
@@ -1,6 +1,6 @@
 name: Unlock reopened issue
 
-on: 
+on:
   issues:
     types: [reopened]
 
@@ -8,6 +8,6 @@ jobs:
   triage:
     runs-on: ubuntu-latest
     steps:
-    - uses: Dunning-Kruger/unlock-issues@v1
-      with:
-        repo-token: "${{ secrets.GITHUB_TOKEN }}"
+      - uses: Dunning-Kruger/unlock-issues@v1
+        with:
+          repo-token: '${{ secrets.GITHUB_TOKEN }}'
diff --git a/.prettierignore b/.prettierignore
index cdc9d3f01..2ce673fe9 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,2 +1,3 @@
 dist
-cypress/platform/xss3.html
\ No newline at end of file
+cypress/platform/xss3.html
+.cache
\ No newline at end of file
diff --git a/.tern-project b/.tern-project
index a7a55ab0c..1209b33da 100644
--- a/.tern-project
+++ b/.tern-project
@@ -1,12 +1,8 @@
 {
   "ecmaVersion": 6,
-  "libs": [
-    "browser"
-  ],
+  "libs": ["browser"],
   "loadEagerly": [],
-  "dontLoad": [
-    "node_modules/**"
-  ],
+  "dontLoad": ["node_modules/**"],
   "plugins": {
     "modules": {},
     "es_modules": {},
@@ -16,4 +12,4 @@
       "strong": true
     }
   }
-}
\ No newline at end of file
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 582fa0e2e..c5903cd91 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,8 +2,8 @@
 
 // TODO: Populate changelog
 
--   Config has a lot of changes
--   globalReset resets to `defaultConfig` instead of current config. Use `reset` instead.
+- Config has a lot of changes
+- globalReset resets to `defaultConfig` instead of current config. Use `reset` instead.
 
 ## [Unreleased](https://github.com/knsv/mermaid/tree/HEAD)
 
@@ -11,7 +11,7 @@
 
 **Closed issues:**
 
--   Cross-Site Scripting:DOM - Issue [\#847](https://github.com/knsv/mermaid/issues/847)
+- Cross-Site Scripting:DOM - Issue [\#847](https://github.com/knsv/mermaid/issues/847)
 
 ## [8.2.0](https://github.com/knsv/mermaid/tree/8.2.0) (2019-07-17)
 
@@ -19,51 +19,51 @@
 
 **Closed issues:**
 
--   Create issue templates [\#871](https://github.com/knsv/mermaid/issues/871)
--   cross site scripting in mermaid [\#869](https://github.com/knsv/mermaid/issues/869)
--   Make Gantt chart date inclusive [\#868](https://github.com/knsv/mermaid/issues/868)
--   CHANGELOG missing updates for all versions since 0.4.0 [\#865](https://github.com/knsv/mermaid/issues/865)
--   please add tag for 8.0.0 release [\#863](https://github.com/knsv/mermaid/issues/863)
--   classDiagram breaks on any edit [\#858](https://github.com/knsv/mermaid/issues/858)
--   found 1 high severity vulnerability [\#839](https://github.com/knsv/mermaid/issues/839)
--   Missing fontawesome icon support [\#830](https://github.com/knsv/mermaid/issues/830)
--   Docs for integration with wiki.js? [\#829](https://github.com/knsv/mermaid/issues/829)
--   Is this project still maintained? [\#826](https://github.com/knsv/mermaid/issues/826)
--   typora [\#823](https://github.com/knsv/mermaid/issues/823)
--   Maintain the order of the nodes in Flowchart [\#815](https://github.com/knsv/mermaid/issues/815)
--   Overlap, Overflow and cut titles in flowchart [\#814](https://github.com/knsv/mermaid/issues/814)
--   How load mermaidApi notejs electron [\#813](https://github.com/knsv/mermaid/issues/813)
--   How to set the spacing between the text of the flowchart node and the border? [\#812](https://github.com/knsv/mermaid/issues/812)
--   no triming participant name and the name following spaces is as another actor in sequence [\#809](https://github.com/knsv/mermaid/issues/809)
--   uml Class as shape type [\#807](https://github.com/knsv/mermaid/issues/807)
--   Force-directed graph Layout Style [\#806](https://github.com/knsv/mermaid/issues/806)
--   how can I start a newLine in FlowChart [\#805](https://github.com/knsv/mermaid/issues/805)
--   UOEProcessShow [\#801](https://github.com/knsv/mermaid/issues/801)
--   Why the use of code blocks? [\#799](https://github.com/knsv/mermaid/issues/799)
--   fixing class diagram [\#794](https://github.com/knsv/mermaid/issues/794)
--   Autonumber support in sequence diagrams [\#782](https://github.com/knsv/mermaid/issues/782)
--   MomentJS dependency [\#781](https://github.com/knsv/mermaid/issues/781)
--   Feature : Can we color code the flow/arrows [\#766](https://github.com/knsv/mermaid/issues/766)
--   Is there any way to convert flowchart.js code to mermaid code [\#726](https://github.com/knsv/mermaid/issues/726)
--   Fixed width of nodes [\#653](https://github.com/knsv/mermaid/issues/653)
--   Inline comment [\#650](https://github.com/knsv/mermaid/issues/650)
--   alt attribute of img tag in HTML [\#619](https://github.com/knsv/mermaid/issues/619)
--   Just wanted to say : THANKS ! [\#618](https://github.com/knsv/mermaid/issues/618)
--   "animation" [\#446](https://github.com/knsv/mermaid/issues/446)
+- Create issue templates [\#871](https://github.com/knsv/mermaid/issues/871)
+- cross site scripting in mermaid [\#869](https://github.com/knsv/mermaid/issues/869)
+- Make Gantt chart date inclusive [\#868](https://github.com/knsv/mermaid/issues/868)
+- CHANGELOG missing updates for all versions since 0.4.0 [\#865](https://github.com/knsv/mermaid/issues/865)
+- please add tag for 8.0.0 release [\#863](https://github.com/knsv/mermaid/issues/863)
+- classDiagram breaks on any edit [\#858](https://github.com/knsv/mermaid/issues/858)
+- found 1 high severity vulnerability [\#839](https://github.com/knsv/mermaid/issues/839)
+- Missing fontawesome icon support [\#830](https://github.com/knsv/mermaid/issues/830)
+- Docs for integration with wiki.js? [\#829](https://github.com/knsv/mermaid/issues/829)
+- Is this project still maintained? [\#826](https://github.com/knsv/mermaid/issues/826)
+- typora [\#823](https://github.com/knsv/mermaid/issues/823)
+- Maintain the order of the nodes in Flowchart [\#815](https://github.com/knsv/mermaid/issues/815)
+- Overlap, Overflow and cut titles in flowchart [\#814](https://github.com/knsv/mermaid/issues/814)
+- How load mermaidApi notejs electron [\#813](https://github.com/knsv/mermaid/issues/813)
+- How to set the spacing between the text of the flowchart node and the border? [\#812](https://github.com/knsv/mermaid/issues/812)
+- no triming participant name and the name following spaces is as another actor in sequence [\#809](https://github.com/knsv/mermaid/issues/809)
+- uml Class as shape type [\#807](https://github.com/knsv/mermaid/issues/807)
+- Force-directed graph Layout Style [\#806](https://github.com/knsv/mermaid/issues/806)
+- how can I start a newLine in FlowChart [\#805](https://github.com/knsv/mermaid/issues/805)
+- UOEProcessShow [\#801](https://github.com/knsv/mermaid/issues/801)
+- Why the use of code blocks? [\#799](https://github.com/knsv/mermaid/issues/799)
+- fixing class diagram [\#794](https://github.com/knsv/mermaid/issues/794)
+- Autonumber support in sequence diagrams [\#782](https://github.com/knsv/mermaid/issues/782)
+- MomentJS dependency [\#781](https://github.com/knsv/mermaid/issues/781)
+- Feature : Can we color code the flow/arrows [\#766](https://github.com/knsv/mermaid/issues/766)
+- Is there any way to convert flowchart.js code to mermaid code [\#726](https://github.com/knsv/mermaid/issues/726)
+- Fixed width of nodes [\#653](https://github.com/knsv/mermaid/issues/653)
+- Inline comment [\#650](https://github.com/knsv/mermaid/issues/650)
+- alt attribute of img tag in HTML [\#619](https://github.com/knsv/mermaid/issues/619)
+- Just wanted to say : THANKS ! [\#618](https://github.com/knsv/mermaid/issues/618)
+- "animation" [\#446](https://github.com/knsv/mermaid/issues/446)
 
 **Merged pull requests:**
 
--   Trimming whitespace after participant id [\#882](https://github.com/knsv/mermaid/pull/882) ([IOrlandoni](https://github.com/IOrlandoni))
--   chore\(deps\): bump atob from 2.0.3 to 2.1.2 [\#881](https://github.com/knsv/mermaid/pull/881) ([dependabot[bot]](https://github.com/apps/dependabot))
--   chore\(deps\): bump fstream from 1.0.11 to 1.0.12 [\#880](https://github.com/knsv/mermaid/pull/880) ([dependabot[bot]](https://github.com/apps/dependabot))
--   chore\(deps\): bump js-yaml from 3.12.0 to 3.13.1 [\#879](https://github.com/knsv/mermaid/pull/879) ([dependabot[bot]](https://github.com/apps/dependabot))
--   I847 cross site scripting [\#878](https://github.com/knsv/mermaid/pull/878) ([knsv](https://github.com/knsv))
--   Bump lodash.mergewith from 4.6.1 to 4.6.2 [\#877](https://github.com/knsv/mermaid/pull/877) ([dependabot[bot]](https://github.com/apps/dependabot))
--   Adding docs into core repo again [\#876](https://github.com/knsv/mermaid/pull/876) ([knsv](https://github.com/knsv))
--   Bump lodash from 4.17.11 to 4.17.13 [\#875](https://github.com/knsv/mermaid/pull/875) ([dependabot[bot]](https://github.com/apps/dependabot))
--   feat\(stale.yml\): update issue label and bot comment [\#874](https://github.com/knsv/mermaid/pull/874) ([ThePenguin1140](https://github.com/ThePenguin1140))
--   Feature/allow inclusive enddates [\#872](https://github.com/knsv/mermaid/pull/872) ([ThePenguin1140](https://github.com/ThePenguin1140))
--   Adding trapezoid and inverse trapezoid vertex options. [\#741](https://github.com/knsv/mermaid/pull/741) ([adamwulf](https://github.com/adamwulf))
+- Trimming whitespace after participant id [\#882](https://github.com/knsv/mermaid/pull/882) ([IOrlandoni](https://github.com/IOrlandoni))
+- chore\(deps\): bump atob from 2.0.3 to 2.1.2 [\#881](https://github.com/knsv/mermaid/pull/881) ([dependabot[bot]](https://github.com/apps/dependabot))
+- chore\(deps\): bump fstream from 1.0.11 to 1.0.12 [\#880](https://github.com/knsv/mermaid/pull/880) ([dependabot[bot]](https://github.com/apps/dependabot))
+- chore\(deps\): bump js-yaml from 3.12.0 to 3.13.1 [\#879](https://github.com/knsv/mermaid/pull/879) ([dependabot[bot]](https://github.com/apps/dependabot))
+- I847 cross site scripting [\#878](https://github.com/knsv/mermaid/pull/878) ([knsv](https://github.com/knsv))
+- Bump lodash.mergewith from 4.6.1 to 4.6.2 [\#877](https://github.com/knsv/mermaid/pull/877) ([dependabot[bot]](https://github.com/apps/dependabot))
+- Adding docs into core repo again [\#876](https://github.com/knsv/mermaid/pull/876) ([knsv](https://github.com/knsv))
+- Bump lodash from 4.17.11 to 4.17.13 [\#875](https://github.com/knsv/mermaid/pull/875) ([dependabot[bot]](https://github.com/apps/dependabot))
+- feat\(stale.yml\): update issue label and bot comment [\#874](https://github.com/knsv/mermaid/pull/874) ([ThePenguin1140](https://github.com/ThePenguin1140))
+- Feature/allow inclusive enddates [\#872](https://github.com/knsv/mermaid/pull/872) ([ThePenguin1140](https://github.com/ThePenguin1140))
+- Adding trapezoid and inverse trapezoid vertex options. [\#741](https://github.com/knsv/mermaid/pull/741) ([adamwulf](https://github.com/adamwulf))
 
 ## [8.1.0](https://github.com/knsv/mermaid/tree/8.1.0) (2019-06-25)
 
@@ -71,210 +71,210 @@
 
 **Closed issues:**
 
--   Gantt and sequence diagram do not render [\#853](https://github.com/knsv/mermaid/issues/853)
--   margins around flowchart are not balanced [\#852](https://github.com/knsv/mermaid/issues/852)
--   Smaller bundles [\#843](https://github.com/knsv/mermaid/issues/843)
--   unicode in labels [\#776](https://github.com/knsv/mermaid/issues/776)
--   Hard-changing drawing of arrows per edge type [\#775](https://github.com/knsv/mermaid/issues/775)
--   SequenceDiagram wrong [\#773](https://github.com/knsv/mermaid/issues/773)
--   Render mermaid on github pages with simple code [\#772](https://github.com/knsv/mermaid/issues/772)
--   FlowChart - large space between text and the image [\#754](https://github.com/knsv/mermaid/issues/754)
--   Class Diagram Issues when using Mermaid in Stackedit [\#748](https://github.com/knsv/mermaid/issues/748)
--   Multi-platform CI [\#744](https://github.com/knsv/mermaid/issues/744)
--   gantt: sections can't have a colon [\#742](https://github.com/knsv/mermaid/issues/742)
--   Yarn build does not add mermaid.min.css to dist [\#732](https://github.com/knsv/mermaid/issues/732)
--   Is there a grammar / keyword / more than just the basic examples? [\#718](https://github.com/knsv/mermaid/issues/718)
--   Click event and react component [\#717](https://github.com/knsv/mermaid/issues/717)
--   Long text going outside the box [\#706](https://github.com/knsv/mermaid/issues/706)
--   How to migrate from yUML to mermaid? [\#704](https://github.com/knsv/mermaid/issues/704)
--   Issue on Dynamic Creation in PHP [\#690](https://github.com/knsv/mermaid/issues/690)
--   `click "\#target"` and `click "http://url"` should create regular links [\#689](https://github.com/knsv/mermaid/issues/689)
--   Support Chinese punctuation [\#687](https://github.com/knsv/mermaid/issues/687)
--   \[Question\] Proper way to install on Mac? [\#681](https://github.com/knsv/mermaid/issues/681)
--   Has Mermaid a graphical interface to make diagrams? [\#668](https://github.com/knsv/mermaid/issues/668)
--   mermaid installation on debian [\#649](https://github.com/knsv/mermaid/issues/649)
--   "Cannot activate" in sequenceDiagram [\#647](https://github.com/knsv/mermaid/issues/647)
--   Link \("click" statement\) in flowchart does not work in exported SVG [\#646](https://github.com/knsv/mermaid/issues/646)
--   How to pass styling [\#639](https://github.com/knsv/mermaid/issues/639)
--   The live editor cant show seq diagram with notes for 8.0.0-alpha.3 [\#638](https://github.com/knsv/mermaid/issues/638)
--   import mermaid.css with ES6 + NPM [\#634](https://github.com/knsv/mermaid/issues/634)
--   Actor line cuts through other elements [\#633](https://github.com/knsv/mermaid/issues/633)
--   Graph TD line out of the picture \(left side\) [\#630](https://github.com/knsv/mermaid/issues/630)
--   Flowchart labels appear "cutoff" [\#628](https://github.com/knsv/mermaid/issues/628)
--   Uncaught TypeError: \_.constant is not a function \(mermaid.js\) [\#626](https://github.com/knsv/mermaid/issues/626)
--   Missing tags and releases for newer versions [\#623](https://github.com/knsv/mermaid/issues/623)
--   Mermaid and Leo / Leo Vue [\#622](https://github.com/knsv/mermaid/issues/622)
--   mermaidAPI gantt Vue.js [\#621](https://github.com/knsv/mermaid/issues/621)
--   Gantt sections are not separated by colors - Fix: set numberSectionStyles to 4 instead of 3 [\#620](https://github.com/knsv/mermaid/issues/620)
--   how to get mermaidAPI? [\#617](https://github.com/knsv/mermaid/issues/617)
--   Error in startOnLoad documentation? [\#616](https://github.com/knsv/mermaid/issues/616)
--   Example export to SVG generates error [\#614](https://github.com/knsv/mermaid/issues/614)
--   The new online editor does not support previously generated links [\#613](https://github.com/knsv/mermaid/issues/613)
--   Grammar / Syntax documentation for flowcharts [\#607](https://github.com/knsv/mermaid/issues/607)
--   Mermaid does not work with d3.js [\#606](https://github.com/knsv/mermaid/issues/606)
--   Why does this code's flowchart lines get cut-off on screen? [\#604](https://github.com/knsv/mermaid/issues/604)
--   click keyword does not fire my callback \(on the demo Website too\) [\#603](https://github.com/knsv/mermaid/issues/603)
--   Online Editor fails to show exported SVG [\#601](https://github.com/knsv/mermaid/issues/601)
--   Just saying thanks! [\#597](https://github.com/knsv/mermaid/issues/597)
--   stylesheet crashed with other library like abcjs [\#596](https://github.com/knsv/mermaid/issues/596)
--   Missing connection [\#594](https://github.com/knsv/mermaid/issues/594)
--   How to use mermaid on node.js restful api? [\#593](https://github.com/knsv/mermaid/issues/593)
--   Remove status code [\#589](https://github.com/knsv/mermaid/issues/589)
--   Golang based editor [\#588](https://github.com/knsv/mermaid/issues/588)
--   sequenceDiagram -\> notetext css font is hardcoded [\#587](https://github.com/knsv/mermaid/issues/587)
--   Multiple graph in the live editor [\#586](https://github.com/knsv/mermaid/issues/586)
--   All \<svg\> elements in page are colored black [\#584](https://github.com/knsv/mermaid/issues/584)
--   Styling: classes aren't applied to elements. [\#582](https://github.com/knsv/mermaid/issues/582)
--   Rounded connections [\#580](https://github.com/knsv/mermaid/issues/580)
--   Arrows are not being shown correctly in the dark theme [\#578](https://github.com/knsv/mermaid/issues/578)
--   The documentation for CLI seems outdated. [\#572](https://github.com/knsv/mermaid/issues/572)
--   No effect of click event:can not open link [\#571](https://github.com/knsv/mermaid/issues/571)
--   Text colors are not correct in VSCODE [\#570](https://github.com/knsv/mermaid/issues/570)
--   Nodes aren't aligned properly \(just need an explanation\) [\#568](https://github.com/knsv/mermaid/issues/568)
--   setting margin around figure in R [\#567](https://github.com/knsv/mermaid/issues/567)
--   Arrows should Come out in upward and Downward direction from decision Node [\#566](https://github.com/knsv/mermaid/issues/566)
--   TypeError: Cannot read property 'select' of undefined [\#563](https://github.com/knsv/mermaid/issues/563)
--   A little bug [\#557](https://github.com/knsv/mermaid/issues/557)
--   Japanese text appears garbled [\#554](https://github.com/knsv/mermaid/issues/554)
--   classdiagram not works in mermaid live_editor [\#553](https://github.com/knsv/mermaid/issues/553)
--   font awesome in link text? [\#546](https://github.com/knsv/mermaid/issues/546)
--   q: heard of the cosmogol standard? [\#545](https://github.com/knsv/mermaid/issues/545)
--   Arrow heads missing \(cli, 7.0.3\) [\#544](https://github.com/knsv/mermaid/issues/544)
--   No Edge Boxes if useHtmlLabels=false [\#541](https://github.com/knsv/mermaid/issues/541)
--   how to change mermaid text color or line text block color？ [\#534](https://github.com/knsv/mermaid/issues/534)
--   FlowChart visualization broken when downloading from live editor [\#533](https://github.com/knsv/mermaid/issues/533)
--   Can't get flowchart to render paths at the top of the diagram; I even tried the online editor and that shows the same issue. Thoughts? [\#532](https://github.com/knsv/mermaid/issues/532)
--   live editor make browser\(safari on macOS&iOS\) not longer respond [\#531](https://github.com/knsv/mermaid/issues/531)
--   css classes need a prefix/namespace [\#527](https://github.com/knsv/mermaid/issues/527)
--   input activate/deactivate cause safari unresponding [\#521](https://github.com/knsv/mermaid/issues/521)
--   Cannot Render the Mermaid Graph to PDF ? [\#520](https://github.com/knsv/mermaid/issues/520)
--   clicking links works from inset in subgraph but not from nodes [\#516](https://github.com/knsv/mermaid/issues/516)
--   Strange syntax error - when importing mermaid.js [\#515](https://github.com/knsv/mermaid/issues/515)
--   gantt x-axis display [\#510](https://github.com/knsv/mermaid/issues/510)
--   phantomjs renamed to phantomjs-prebuilt [\#508](https://github.com/knsv/mermaid/issues/508)
--   issue when using sphinxcontrib-mermaid extension for sphinx [\#507](https://github.com/knsv/mermaid/issues/507)
--   layout of docs page looks broken [\#504](https://github.com/knsv/mermaid/issues/504)
--   Problem showing graph with php on localhost [\#502](https://github.com/knsv/mermaid/issues/502)
--   logLevel's option doesnt work at 7.0.0 [\#501](https://github.com/knsv/mermaid/issues/501)
--   How do I get the log for a render or parse attempt? [\#500](https://github.com/knsv/mermaid/issues/500)
--   Mermaid neutral style style to built in latest release [\#499](https://github.com/knsv/mermaid/issues/499)
--   Any plans for adding a typescript definition file? [\#495](https://github.com/knsv/mermaid/issues/495)
--   Gantt diagrams too narrow [\#493](https://github.com/knsv/mermaid/issues/493)
--   Flowchart edge labels placement [\#490](https://github.com/knsv/mermaid/issues/490)
--   Very different styles when rendering as png vs. svg [\#489](https://github.com/knsv/mermaid/issues/489)
--   New editor that supports mermaid: Caret [\#488](https://github.com/knsv/mermaid/issues/488)
--   Gant PNG margin [\#486](https://github.com/knsv/mermaid/issues/486)
--   ReferenceError: window is not defined [\#485](https://github.com/knsv/mermaid/issues/485)
--   Menu and layout bugs in docs [\#484](https://github.com/knsv/mermaid/issues/484)
--   Mermaid resets some of the page CSS styles [\#482](https://github.com/knsv/mermaid/issues/482)
--   Arrows rendering incorrectly in online editor [\#480](https://github.com/knsv/mermaid/issues/480)
--   CSS stroke-dasharray ignored by browsers but not other viewers [\#474](https://github.com/knsv/mermaid/issues/474)
--   mermaid - Browser Support issue [\#472](https://github.com/knsv/mermaid/issues/472)
--   Totally love mermaid I might pop! [\#471](https://github.com/knsv/mermaid/issues/471)
--   Sequence Diagram: Missing x on async arrows \(png\) [\#469](https://github.com/knsv/mermaid/issues/469)
--   live editor: the svg file rendered from graph is not supported by browsers [\#468](https://github.com/knsv/mermaid/issues/468)
--   Not found css [\#462](https://github.com/knsv/mermaid/issues/462)
--   Phantomjs Dependency [\#461](https://github.com/knsv/mermaid/issues/461)
--   Mermaid cli not working for subgraphs [\#459](https://github.com/knsv/mermaid/issues/459)
--   Support for notes across multiple participants? [\#458](https://github.com/knsv/mermaid/issues/458)
--   Related to Issue \#329: Phantomjs issues. [\#455](https://github.com/knsv/mermaid/issues/455)
--   Add a click style [\#426](https://github.com/knsv/mermaid/issues/426)
--   Add Parallel block \(par\) to sequence diagrams [\#425](https://github.com/knsv/mermaid/issues/425)
--   updating shapes after the flow chart rendering complete [\#424](https://github.com/knsv/mermaid/issues/424)
--   can't catch parse error Maximum call stack size exceeded on safari [\#421](https://github.com/knsv/mermaid/issues/421)
--   Arrows endings are missing [\#419](https://github.com/knsv/mermaid/issues/419)
--   shouldn't mermaid become more like Markdown ? [\#417](https://github.com/knsv/mermaid/issues/417)
--   Live editor show rendered diagram if syntax invalid [\#415](https://github.com/knsv/mermaid/issues/415)
--   Live editor sticky sidebar [\#414](https://github.com/knsv/mermaid/issues/414)
--   Linkstyle stroke does not work [\#410](https://github.com/knsv/mermaid/issues/410)
--   flowchart id's with dots in them .. break links [\#408](https://github.com/knsv/mermaid/issues/408)
--   Flowchart: Link text beginning with lowercase 'o' causes flowchart to break [\#407](https://github.com/knsv/mermaid/issues/407)
--   Some chinese character will case Safari no responding. [\#405](https://github.com/knsv/mermaid/issues/405)
--   Cannot center-justify text in nodes? [\#397](https://github.com/knsv/mermaid/issues/397)
--   Edge labels should have white background in live editor [\#396](https://github.com/knsv/mermaid/issues/396)
--   Live editor does not support activate/deactivate [\#394](https://github.com/knsv/mermaid/issues/394)
--   Styling subgraph? [\#391](https://github.com/knsv/mermaid/issues/391)
--   Update live editor to version 6.0.0 [\#387](https://github.com/knsv/mermaid/issues/387)
--   sequence diagram config issue [\#385](https://github.com/knsv/mermaid/issues/385)
--   How to add newline in the text [\#384](https://github.com/knsv/mermaid/issues/384)
--   PhantomJS crashes on a large graph [\#380](https://github.com/knsv/mermaid/issues/380)
--   Finnish support for class diagrams using plantuml syntax [\#377](https://github.com/knsv/mermaid/issues/377)
--   mermaidAPI.render generated different svg code from mermaid.int\(\) [\#374](https://github.com/knsv/mermaid/issues/374)
--   Put your own action on the chart [\#372](https://github.com/knsv/mermaid/issues/372)
--   when declaring participants the elements are generated twice [\#370](https://github.com/knsv/mermaid/issues/370)
--   Example Flowchart is cut in display \(Chrome\). [\#368](https://github.com/knsv/mermaid/issues/368)
--   Add shebang support to diagrams [\#365](https://github.com/knsv/mermaid/issues/365)
--   Silencing CLI output [\#352](https://github.com/knsv/mermaid/issues/352)
--   SequenceDiagram: 3+ Alternative Paths [\#348](https://github.com/knsv/mermaid/issues/348)
--   Smaller height of actor boxes [\#342](https://github.com/knsv/mermaid/issues/342)
--   Question: lib/phantomscript.js - foreignObjects in SVG - related to \#58 [\#340](https://github.com/knsv/mermaid/issues/340)
--   npm test fails on osx being blocked at Can not load "PhantomJS", it is not registered! [\#337](https://github.com/knsv/mermaid/issues/337)
--   Tabs & subgraphs cause rendering error [\#336](https://github.com/knsv/mermaid/issues/336)
--   Display question: right angles [\#335](https://github.com/knsv/mermaid/issues/335)
--   No Arrows rendered v0.5.8 [\#330](https://github.com/knsv/mermaid/issues/330)
--   mermaid -v filename.mmd gives You must specify at least one source file. [\#328](https://github.com/knsv/mermaid/issues/328)
--   You had errors in your syntax. Use --help for further information. [\#327](https://github.com/knsv/mermaid/issues/327)
--   Allow alternate arrow syntax that doesn't close html comments [\#322](https://github.com/knsv/mermaid/issues/322)
--   Comment in subgraph [\#319](https://github.com/knsv/mermaid/issues/319)
--   Update graph [\#311](https://github.com/knsv/mermaid/issues/311)
--   css conflicts with boostrap's css [\#308](https://github.com/knsv/mermaid/issues/308)
--   Can not get click event to fire. [\#306](https://github.com/knsv/mermaid/issues/306)
--   Fix phantomjs2 compatibility [\#304](https://github.com/knsv/mermaid/issues/304)
--   Flowcharts do not work in native IE11 [\#303](https://github.com/knsv/mermaid/issues/303)
--   Integration with remark.js - tutorial added [\#302](https://github.com/knsv/mermaid/issues/302)
--   Theme for dark background [\#301](https://github.com/knsv/mermaid/issues/301)
--   Sequence diagram Loops: changing boxMargin spoils the "loop" notation [\#299](https://github.com/knsv/mermaid/issues/299)
--   src/mermaid.js generates bad code [\#297](https://github.com/knsv/mermaid/issues/297)
--   Fresh fork: jasmine tests fail [\#294](https://github.com/knsv/mermaid/issues/294)
--   CSS clash [\#292](https://github.com/knsv/mermaid/issues/292)
--   Mermaid does not work in Chrome 48 [\#281](https://github.com/knsv/mermaid/issues/281)
--   node click is not effective [\#272](https://github.com/knsv/mermaid/issues/272)
--   circle and ellipse cannot change color by classDef [\#271](https://github.com/knsv/mermaid/issues/271)
--   \[Feature request\] gantt diagram axis format [\#269](https://github.com/knsv/mermaid/issues/269)
--   Not Able to See Labels even htmlLabels:false added [\#268](https://github.com/knsv/mermaid/issues/268)
--   npm run watch doesn’t work due missing dependencies [\#266](https://github.com/knsv/mermaid/issues/266)
--   label out of node [\#262](https://github.com/knsv/mermaid/issues/262)
--   IE11 Support issue [\#261](https://github.com/knsv/mermaid/issues/261)
--   mermaid without browser [\#260](https://github.com/knsv/mermaid/issues/260)
--   Insufficient capacity of gantt diagrams [\#226](https://github.com/knsv/mermaid/issues/226)
--   some WARN about installion [\#222](https://github.com/knsv/mermaid/issues/222)
--   Live editor offline access [\#217](https://github.com/knsv/mermaid/issues/217)
--   suggest: code highlight mode config for editors [\#212](https://github.com/knsv/mermaid/issues/212)
--   Uncaught RangeError: Maximum call stack size exceeded [\#189](https://github.com/knsv/mermaid/issues/189)
--   Implement render function for server side rendering using phantomjs [\#169](https://github.com/knsv/mermaid/issues/169)
--   Styling label texts [\#50](https://github.com/knsv/mermaid/issues/50)
--   Graphviz DOT syntax [\#5](https://github.com/knsv/mermaid/issues/5)
+- Gantt and sequence diagram do not render [\#853](https://github.com/knsv/mermaid/issues/853)
+- margins around flowchart are not balanced [\#852](https://github.com/knsv/mermaid/issues/852)
+- Smaller bundles [\#843](https://github.com/knsv/mermaid/issues/843)
+- unicode in labels [\#776](https://github.com/knsv/mermaid/issues/776)
+- Hard-changing drawing of arrows per edge type [\#775](https://github.com/knsv/mermaid/issues/775)
+- SequenceDiagram wrong [\#773](https://github.com/knsv/mermaid/issues/773)
+- Render mermaid on github pages with simple code [\#772](https://github.com/knsv/mermaid/issues/772)
+- FlowChart - large space between text and the image [\#754](https://github.com/knsv/mermaid/issues/754)
+- Class Diagram Issues when using Mermaid in Stackedit [\#748](https://github.com/knsv/mermaid/issues/748)
+- Multi-platform CI [\#744](https://github.com/knsv/mermaid/issues/744)
+- gantt: sections can't have a colon [\#742](https://github.com/knsv/mermaid/issues/742)
+- Yarn build does not add mermaid.min.css to dist [\#732](https://github.com/knsv/mermaid/issues/732)
+- Is there a grammar / keyword / more than just the basic examples? [\#718](https://github.com/knsv/mermaid/issues/718)
+- Click event and react component [\#717](https://github.com/knsv/mermaid/issues/717)
+- Long text going outside the box [\#706](https://github.com/knsv/mermaid/issues/706)
+- How to migrate from yUML to mermaid? [\#704](https://github.com/knsv/mermaid/issues/704)
+- Issue on Dynamic Creation in PHP [\#690](https://github.com/knsv/mermaid/issues/690)
+- `click "\#target"` and `click "http://url"` should create regular links [\#689](https://github.com/knsv/mermaid/issues/689)
+- Support Chinese punctuation [\#687](https://github.com/knsv/mermaid/issues/687)
+- \[Question\] Proper way to install on Mac? [\#681](https://github.com/knsv/mermaid/issues/681)
+- Has Mermaid a graphical interface to make diagrams? [\#668](https://github.com/knsv/mermaid/issues/668)
+- mermaid installation on debian [\#649](https://github.com/knsv/mermaid/issues/649)
+- "Cannot activate" in sequenceDiagram [\#647](https://github.com/knsv/mermaid/issues/647)
+- Link \("click" statement\) in flowchart does not work in exported SVG [\#646](https://github.com/knsv/mermaid/issues/646)
+- How to pass styling [\#639](https://github.com/knsv/mermaid/issues/639)
+- The live editor cant show seq diagram with notes for 8.0.0-alpha.3 [\#638](https://github.com/knsv/mermaid/issues/638)
+- import mermaid.css with ES6 + NPM [\#634](https://github.com/knsv/mermaid/issues/634)
+- Actor line cuts through other elements [\#633](https://github.com/knsv/mermaid/issues/633)
+- Graph TD line out of the picture \(left side\) [\#630](https://github.com/knsv/mermaid/issues/630)
+- Flowchart labels appear "cutoff" [\#628](https://github.com/knsv/mermaid/issues/628)
+- Uncaught TypeError: \_.constant is not a function \(mermaid.js\) [\#626](https://github.com/knsv/mermaid/issues/626)
+- Missing tags and releases for newer versions [\#623](https://github.com/knsv/mermaid/issues/623)
+- Mermaid and Leo / Leo Vue [\#622](https://github.com/knsv/mermaid/issues/622)
+- mermaidAPI gantt Vue.js [\#621](https://github.com/knsv/mermaid/issues/621)
+- Gantt sections are not separated by colors - Fix: set numberSectionStyles to 4 instead of 3 [\#620](https://github.com/knsv/mermaid/issues/620)
+- how to get mermaidAPI? [\#617](https://github.com/knsv/mermaid/issues/617)
+- Error in startOnLoad documentation? [\#616](https://github.com/knsv/mermaid/issues/616)
+- Example export to SVG generates error [\#614](https://github.com/knsv/mermaid/issues/614)
+- The new online editor does not support previously generated links [\#613](https://github.com/knsv/mermaid/issues/613)
+- Grammar / Syntax documentation for flowcharts [\#607](https://github.com/knsv/mermaid/issues/607)
+- Mermaid does not work with d3.js [\#606](https://github.com/knsv/mermaid/issues/606)
+- Why does this code's flowchart lines get cut-off on screen? [\#604](https://github.com/knsv/mermaid/issues/604)
+- click keyword does not fire my callback \(on the demo Website too\) [\#603](https://github.com/knsv/mermaid/issues/603)
+- Online Editor fails to show exported SVG [\#601](https://github.com/knsv/mermaid/issues/601)
+- Just saying thanks! [\#597](https://github.com/knsv/mermaid/issues/597)
+- stylesheet crashed with other library like abcjs [\#596](https://github.com/knsv/mermaid/issues/596)
+- Missing connection [\#594](https://github.com/knsv/mermaid/issues/594)
+- How to use mermaid on node.js restful api? [\#593](https://github.com/knsv/mermaid/issues/593)
+- Remove status code [\#589](https://github.com/knsv/mermaid/issues/589)
+- Golang based editor [\#588](https://github.com/knsv/mermaid/issues/588)
+- sequenceDiagram -\> notetext css font is hardcoded [\#587](https://github.com/knsv/mermaid/issues/587)
+- Multiple graph in the live editor [\#586](https://github.com/knsv/mermaid/issues/586)
+- All \<svg\> elements in page are colored black [\#584](https://github.com/knsv/mermaid/issues/584)
+- Styling: classes aren't applied to elements. [\#582](https://github.com/knsv/mermaid/issues/582)
+- Rounded connections [\#580](https://github.com/knsv/mermaid/issues/580)
+- Arrows are not being shown correctly in the dark theme [\#578](https://github.com/knsv/mermaid/issues/578)
+- The documentation for CLI seems outdated. [\#572](https://github.com/knsv/mermaid/issues/572)
+- No effect of click event:can not open link [\#571](https://github.com/knsv/mermaid/issues/571)
+- Text colors are not correct in VSCODE [\#570](https://github.com/knsv/mermaid/issues/570)
+- Nodes aren't aligned properly \(just need an explanation\) [\#568](https://github.com/knsv/mermaid/issues/568)
+- setting margin around figure in R [\#567](https://github.com/knsv/mermaid/issues/567)
+- Arrows should Come out in upward and Downward direction from decision Node [\#566](https://github.com/knsv/mermaid/issues/566)
+- TypeError: Cannot read property 'select' of undefined [\#563](https://github.com/knsv/mermaid/issues/563)
+- A little bug [\#557](https://github.com/knsv/mermaid/issues/557)
+- Japanese text appears garbled [\#554](https://github.com/knsv/mermaid/issues/554)
+- classdiagram not works in mermaid live_editor [\#553](https://github.com/knsv/mermaid/issues/553)
+- font awesome in link text? [\#546](https://github.com/knsv/mermaid/issues/546)
+- q: heard of the cosmogol standard? [\#545](https://github.com/knsv/mermaid/issues/545)
+- Arrow heads missing \(cli, 7.0.3\) [\#544](https://github.com/knsv/mermaid/issues/544)
+- No Edge Boxes if useHtmlLabels=false [\#541](https://github.com/knsv/mermaid/issues/541)
+- how to change mermaid text color or line text block color？ [\#534](https://github.com/knsv/mermaid/issues/534)
+- FlowChart visualization broken when downloading from live editor [\#533](https://github.com/knsv/mermaid/issues/533)
+- Can't get flowchart to render paths at the top of the diagram; I even tried the online editor and that shows the same issue. Thoughts? [\#532](https://github.com/knsv/mermaid/issues/532)
+- live editor make browser\(safari on macOS&iOS\) not longer respond [\#531](https://github.com/knsv/mermaid/issues/531)
+- css classes need a prefix/namespace [\#527](https://github.com/knsv/mermaid/issues/527)
+- input activate/deactivate cause safari unresponding [\#521](https://github.com/knsv/mermaid/issues/521)
+- Cannot Render the Mermaid Graph to PDF ? [\#520](https://github.com/knsv/mermaid/issues/520)
+- clicking links works from inset in subgraph but not from nodes [\#516](https://github.com/knsv/mermaid/issues/516)
+- Strange syntax error - when importing mermaid.js [\#515](https://github.com/knsv/mermaid/issues/515)
+- gantt x-axis display [\#510](https://github.com/knsv/mermaid/issues/510)
+- phantomjs renamed to phantomjs-prebuilt [\#508](https://github.com/knsv/mermaid/issues/508)
+- issue when using sphinxcontrib-mermaid extension for sphinx [\#507](https://github.com/knsv/mermaid/issues/507)
+- layout of docs page looks broken [\#504](https://github.com/knsv/mermaid/issues/504)
+- Problem showing graph with php on localhost [\#502](https://github.com/knsv/mermaid/issues/502)
+- logLevel's option doesnt work at 7.0.0 [\#501](https://github.com/knsv/mermaid/issues/501)
+- How do I get the log for a render or parse attempt? [\#500](https://github.com/knsv/mermaid/issues/500)
+- Mermaid neutral style style to built in latest release [\#499](https://github.com/knsv/mermaid/issues/499)
+- Any plans for adding a typescript definition file? [\#495](https://github.com/knsv/mermaid/issues/495)
+- Gantt diagrams too narrow [\#493](https://github.com/knsv/mermaid/issues/493)
+- Flowchart edge labels placement [\#490](https://github.com/knsv/mermaid/issues/490)
+- Very different styles when rendering as png vs. svg [\#489](https://github.com/knsv/mermaid/issues/489)
+- New editor that supports mermaid: Caret [\#488](https://github.com/knsv/mermaid/issues/488)
+- Gant PNG margin [\#486](https://github.com/knsv/mermaid/issues/486)
+- ReferenceError: window is not defined [\#485](https://github.com/knsv/mermaid/issues/485)
+- Menu and layout bugs in docs [\#484](https://github.com/knsv/mermaid/issues/484)
+- Mermaid resets some of the page CSS styles [\#482](https://github.com/knsv/mermaid/issues/482)
+- Arrows rendering incorrectly in online editor [\#480](https://github.com/knsv/mermaid/issues/480)
+- CSS stroke-dasharray ignored by browsers but not other viewers [\#474](https://github.com/knsv/mermaid/issues/474)
+- mermaid - Browser Support issue [\#472](https://github.com/knsv/mermaid/issues/472)
+- Totally love mermaid I might pop! [\#471](https://github.com/knsv/mermaid/issues/471)
+- Sequence Diagram: Missing x on async arrows \(png\) [\#469](https://github.com/knsv/mermaid/issues/469)
+- live editor: the svg file rendered from graph is not supported by browsers [\#468](https://github.com/knsv/mermaid/issues/468)
+- Not found css [\#462](https://github.com/knsv/mermaid/issues/462)
+- Phantomjs Dependency [\#461](https://github.com/knsv/mermaid/issues/461)
+- Mermaid cli not working for subgraphs [\#459](https://github.com/knsv/mermaid/issues/459)
+- Support for notes across multiple participants? [\#458](https://github.com/knsv/mermaid/issues/458)
+- Related to Issue \#329: Phantomjs issues. [\#455](https://github.com/knsv/mermaid/issues/455)
+- Add a click style [\#426](https://github.com/knsv/mermaid/issues/426)
+- Add Parallel block \(par\) to sequence diagrams [\#425](https://github.com/knsv/mermaid/issues/425)
+- updating shapes after the flow chart rendering complete [\#424](https://github.com/knsv/mermaid/issues/424)
+- can't catch parse error Maximum call stack size exceeded on safari [\#421](https://github.com/knsv/mermaid/issues/421)
+- Arrows endings are missing [\#419](https://github.com/knsv/mermaid/issues/419)
+- shouldn't mermaid become more like Markdown ? [\#417](https://github.com/knsv/mermaid/issues/417)
+- Live editor show rendered diagram if syntax invalid [\#415](https://github.com/knsv/mermaid/issues/415)
+- Live editor sticky sidebar [\#414](https://github.com/knsv/mermaid/issues/414)
+- Linkstyle stroke does not work [\#410](https://github.com/knsv/mermaid/issues/410)
+- flowchart id's with dots in them .. break links [\#408](https://github.com/knsv/mermaid/issues/408)
+- Flowchart: Link text beginning with lowercase 'o' causes flowchart to break [\#407](https://github.com/knsv/mermaid/issues/407)
+- Some chinese character will case Safari no responding. [\#405](https://github.com/knsv/mermaid/issues/405)
+- Cannot center-justify text in nodes? [\#397](https://github.com/knsv/mermaid/issues/397)
+- Edge labels should have white background in live editor [\#396](https://github.com/knsv/mermaid/issues/396)
+- Live editor does not support activate/deactivate [\#394](https://github.com/knsv/mermaid/issues/394)
+- Styling subgraph? [\#391](https://github.com/knsv/mermaid/issues/391)
+- Update live editor to version 6.0.0 [\#387](https://github.com/knsv/mermaid/issues/387)
+- sequence diagram config issue [\#385](https://github.com/knsv/mermaid/issues/385)
+- How to add newline in the text [\#384](https://github.com/knsv/mermaid/issues/384)
+- PhantomJS crashes on a large graph [\#380](https://github.com/knsv/mermaid/issues/380)
+- Finnish support for class diagrams using plantuml syntax [\#377](https://github.com/knsv/mermaid/issues/377)
+- mermaidAPI.render generated different svg code from mermaid.int\(\) [\#374](https://github.com/knsv/mermaid/issues/374)
+- Put your own action on the chart [\#372](https://github.com/knsv/mermaid/issues/372)
+- when declaring participants the elements are generated twice [\#370](https://github.com/knsv/mermaid/issues/370)
+- Example Flowchart is cut in display \(Chrome\). [\#368](https://github.com/knsv/mermaid/issues/368)
+- Add shebang support to diagrams [\#365](https://github.com/knsv/mermaid/issues/365)
+- Silencing CLI output [\#352](https://github.com/knsv/mermaid/issues/352)
+- SequenceDiagram: 3+ Alternative Paths [\#348](https://github.com/knsv/mermaid/issues/348)
+- Smaller height of actor boxes [\#342](https://github.com/knsv/mermaid/issues/342)
+- Question: lib/phantomscript.js - foreignObjects in SVG - related to \#58 [\#340](https://github.com/knsv/mermaid/issues/340)
+- npm test fails on osx being blocked at Can not load "PhantomJS", it is not registered! [\#337](https://github.com/knsv/mermaid/issues/337)
+- Tabs & subgraphs cause rendering error [\#336](https://github.com/knsv/mermaid/issues/336)
+- Display question: right angles [\#335](https://github.com/knsv/mermaid/issues/335)
+- No Arrows rendered v0.5.8 [\#330](https://github.com/knsv/mermaid/issues/330)
+- mermaid -v filename.mmd gives You must specify at least one source file. [\#328](https://github.com/knsv/mermaid/issues/328)
+- You had errors in your syntax. Use --help for further information. [\#327](https://github.com/knsv/mermaid/issues/327)
+- Allow alternate arrow syntax that doesn't close html comments [\#322](https://github.com/knsv/mermaid/issues/322)
+- Comment in subgraph [\#319](https://github.com/knsv/mermaid/issues/319)
+- Update graph [\#311](https://github.com/knsv/mermaid/issues/311)
+- css conflicts with boostrap's css [\#308](https://github.com/knsv/mermaid/issues/308)
+- Can not get click event to fire. [\#306](https://github.com/knsv/mermaid/issues/306)
+- Fix phantomjs2 compatibility [\#304](https://github.com/knsv/mermaid/issues/304)
+- Flowcharts do not work in native IE11 [\#303](https://github.com/knsv/mermaid/issues/303)
+- Integration with remark.js - tutorial added [\#302](https://github.com/knsv/mermaid/issues/302)
+- Theme for dark background [\#301](https://github.com/knsv/mermaid/issues/301)
+- Sequence diagram Loops: changing boxMargin spoils the "loop" notation [\#299](https://github.com/knsv/mermaid/issues/299)
+- src/mermaid.js generates bad code [\#297](https://github.com/knsv/mermaid/issues/297)
+- Fresh fork: jasmine tests fail [\#294](https://github.com/knsv/mermaid/issues/294)
+- CSS clash [\#292](https://github.com/knsv/mermaid/issues/292)
+- Mermaid does not work in Chrome 48 [\#281](https://github.com/knsv/mermaid/issues/281)
+- node click is not effective [\#272](https://github.com/knsv/mermaid/issues/272)
+- circle and ellipse cannot change color by classDef [\#271](https://github.com/knsv/mermaid/issues/271)
+- \[Feature request\] gantt diagram axis format [\#269](https://github.com/knsv/mermaid/issues/269)
+- Not Able to See Labels even htmlLabels:false added [\#268](https://github.com/knsv/mermaid/issues/268)
+- npm run watch doesn’t work due missing dependencies [\#266](https://github.com/knsv/mermaid/issues/266)
+- label out of node [\#262](https://github.com/knsv/mermaid/issues/262)
+- IE11 Support issue [\#261](https://github.com/knsv/mermaid/issues/261)
+- mermaid without browser [\#260](https://github.com/knsv/mermaid/issues/260)
+- Insufficient capacity of gantt diagrams [\#226](https://github.com/knsv/mermaid/issues/226)
+- some WARN about installion [\#222](https://github.com/knsv/mermaid/issues/222)
+- Live editor offline access [\#217](https://github.com/knsv/mermaid/issues/217)
+- suggest: code highlight mode config for editors [\#212](https://github.com/knsv/mermaid/issues/212)
+- Uncaught RangeError: Maximum call stack size exceeded [\#189](https://github.com/knsv/mermaid/issues/189)
+- Implement render function for server side rendering using phantomjs [\#169](https://github.com/knsv/mermaid/issues/169)
+- Styling label texts [\#50](https://github.com/knsv/mermaid/issues/50)
+- Graphviz DOT syntax [\#5](https://github.com/knsv/mermaid/issues/5)
 
 **Merged pull requests:**
 
--   Remove console.log in classDB. [\#861](https://github.com/knsv/mermaid/pull/861) ([Arthaey](https://github.com/Arthaey))
--   Bump sshpk from 1.13.1 to 1.16.1 [\#851](https://github.com/knsv/mermaid/pull/851) ([dependabot[bot]](https://github.com/apps/dependabot))
--   Significantly smaller bundles [\#850](https://github.com/knsv/mermaid/pull/850) ([fabiospampinato](https://github.com/fabiospampinato))
--   Support styling of subgraphs [\#845](https://github.com/knsv/mermaid/pull/845) ([Qix-](https://github.com/Qix-))
--   fix dark theme loop labels not visible [\#837](https://github.com/knsv/mermaid/pull/837) ([jnnnnn](https://github.com/jnnnnn))
--   fix draw function can only call once [\#832](https://github.com/knsv/mermaid/pull/832) ([vaniship](https://github.com/vaniship))
--   Fix dotted lines not appearing in flowcharts when HTML labels disabled [\#828](https://github.com/knsv/mermaid/pull/828) ([stanhu](https://github.com/stanhu))
--   Fix issue with XML line breaks inside vertex labels [\#824](https://github.com/knsv/mermaid/pull/824) ([jsyang](https://github.com/jsyang))
--   fixed diagrams [\#810](https://github.com/knsv/mermaid/pull/810) ([0xflotus](https://github.com/0xflotus))
--   Clickable gantt tasks [\#804](https://github.com/knsv/mermaid/pull/804) ([abzicht](https://github.com/abzicht))
--   linkStyle now supports list of indexes with a few tests [\#798](https://github.com/knsv/mermaid/pull/798) ([ivan-danilov](https://github.com/ivan-danilov))
--   fix class diagram mermaid [\#795](https://github.com/knsv/mermaid/pull/795) ([DanShai](https://github.com/DanShai))
--   Added exclude weekdays to definition [\#792](https://github.com/knsv/mermaid/pull/792) ([jopapo](https://github.com/jopapo))
--   SVG link rendering [\#791](https://github.com/knsv/mermaid/pull/791) ([flying-sheep](https://github.com/flying-sheep))
--   Gantt milestones [\#788](https://github.com/knsv/mermaid/pull/788) ([gijswijs](https://github.com/gijswijs))
--   Remove duplicate code [\#768](https://github.com/knsv/mermaid/pull/768) ([znxkznxk1030](https://github.com/znxkznxk1030))
--   Render nodes as real links [\#765](https://github.com/knsv/mermaid/pull/765) ([flying-sheep](https://github.com/flying-sheep))
--   Support Multi-line Actor Descriptions [\#764](https://github.com/knsv/mermaid/pull/764) ([watsoncj](https://github.com/watsoncj))
--   Fix issue with marker-end. [\#757](https://github.com/knsv/mermaid/pull/757) ([gjlubbertsen](https://github.com/gjlubbertsen))
--   Make Class Diagrams usable in Stackedit and Live Editor [\#749](https://github.com/knsv/mermaid/pull/749) ([monsterkrampe](https://github.com/monsterkrampe))
--   Sequence numbers [\#722](https://github.com/knsv/mermaid/pull/722) ([paulbland](https://github.com/paulbland))
--   Add option for right angles [\#721](https://github.com/knsv/mermaid/pull/721) ([paulbland](https://github.com/paulbland))
--   Add nested activation classes [\#720](https://github.com/knsv/mermaid/pull/720) ([paulbland](https://github.com/paulbland))
--   wip: class diagram cardinality display [\#705](https://github.com/knsv/mermaid/pull/705) ([Vrixyz](https://github.com/Vrixyz))
--   add comments about CSS in config [\#688](https://github.com/knsv/mermaid/pull/688) ([imma90](https://github.com/imma90))
--   SequenceDiagram: Add support for multiple alt else statements [\#641](https://github.com/knsv/mermaid/pull/641) ([sechel](https://github.com/sechel))
--   fix \#426 - add class .clickable on nodes with click function or link [\#598](https://github.com/knsv/mermaid/pull/598) ([thomasleveil](https://github.com/thomasleveil))
--   Spec fix 1 [\#595](https://github.com/knsv/mermaid/pull/595) ([frankschmitt](https://github.com/frankschmitt))
+- Remove console.log in classDB. [\#861](https://github.com/knsv/mermaid/pull/861) ([Arthaey](https://github.com/Arthaey))
+- Bump sshpk from 1.13.1 to 1.16.1 [\#851](https://github.com/knsv/mermaid/pull/851) ([dependabot[bot]](https://github.com/apps/dependabot))
+- Significantly smaller bundles [\#850](https://github.com/knsv/mermaid/pull/850) ([fabiospampinato](https://github.com/fabiospampinato))
+- Support styling of subgraphs [\#845](https://github.com/knsv/mermaid/pull/845) ([Qix-](https://github.com/Qix-))
+- fix dark theme loop labels not visible [\#837](https://github.com/knsv/mermaid/pull/837) ([jnnnnn](https://github.com/jnnnnn))
+- fix draw function can only call once [\#832](https://github.com/knsv/mermaid/pull/832) ([vaniship](https://github.com/vaniship))
+- Fix dotted lines not appearing in flowcharts when HTML labels disabled [\#828](https://github.com/knsv/mermaid/pull/828) ([stanhu](https://github.com/stanhu))
+- Fix issue with XML line breaks inside vertex labels [\#824](https://github.com/knsv/mermaid/pull/824) ([jsyang](https://github.com/jsyang))
+- fixed diagrams [\#810](https://github.com/knsv/mermaid/pull/810) ([0xflotus](https://github.com/0xflotus))
+- Clickable gantt tasks [\#804](https://github.com/knsv/mermaid/pull/804) ([abzicht](https://github.com/abzicht))
+- linkStyle now supports list of indexes with a few tests [\#798](https://github.com/knsv/mermaid/pull/798) ([ivan-danilov](https://github.com/ivan-danilov))
+- fix class diagram mermaid [\#795](https://github.com/knsv/mermaid/pull/795) ([DanShai](https://github.com/DanShai))
+- Added exclude weekdays to definition [\#792](https://github.com/knsv/mermaid/pull/792) ([jopapo](https://github.com/jopapo))
+- SVG link rendering [\#791](https://github.com/knsv/mermaid/pull/791) ([flying-sheep](https://github.com/flying-sheep))
+- Gantt milestones [\#788](https://github.com/knsv/mermaid/pull/788) ([gijswijs](https://github.com/gijswijs))
+- Remove duplicate code [\#768](https://github.com/knsv/mermaid/pull/768) ([znxkznxk1030](https://github.com/znxkznxk1030))
+- Render nodes as real links [\#765](https://github.com/knsv/mermaid/pull/765) ([flying-sheep](https://github.com/flying-sheep))
+- Support Multi-line Actor Descriptions [\#764](https://github.com/knsv/mermaid/pull/764) ([watsoncj](https://github.com/watsoncj))
+- Fix issue with marker-end. [\#757](https://github.com/knsv/mermaid/pull/757) ([gjlubbertsen](https://github.com/gjlubbertsen))
+- Make Class Diagrams usable in Stackedit and Live Editor [\#749](https://github.com/knsv/mermaid/pull/749) ([monsterkrampe](https://github.com/monsterkrampe))
+- Sequence numbers [\#722](https://github.com/knsv/mermaid/pull/722) ([paulbland](https://github.com/paulbland))
+- Add option for right angles [\#721](https://github.com/knsv/mermaid/pull/721) ([paulbland](https://github.com/paulbland))
+- Add nested activation classes [\#720](https://github.com/knsv/mermaid/pull/720) ([paulbland](https://github.com/paulbland))
+- wip: class diagram cardinality display [\#705](https://github.com/knsv/mermaid/pull/705) ([Vrixyz](https://github.com/Vrixyz))
+- add comments about CSS in config [\#688](https://github.com/knsv/mermaid/pull/688) ([imma90](https://github.com/imma90))
+- SequenceDiagram: Add support for multiple alt else statements [\#641](https://github.com/knsv/mermaid/pull/641) ([sechel](https://github.com/sechel))
+- fix \#426 - add class .clickable on nodes with click function or link [\#598](https://github.com/knsv/mermaid/pull/598) ([thomasleveil](https://github.com/thomasleveil))
+- Spec fix 1 [\#595](https://github.com/knsv/mermaid/pull/595) ([frankschmitt](https://github.com/frankschmitt))
 
 ## [7.0.5](https://github.com/knsv/mermaid/tree/7.0.5) (2017-09-01)
 
@@ -282,23 +282,23 @@
 
 **Closed issues:**
 
--   live editor latin error after update [\#560](https://github.com/knsv/mermaid/issues/560)
--   Simple full example in online documentation is broken [\#558](https://github.com/knsv/mermaid/issues/558)
--   Graph No Arrow Head v7.0.3 [\#543](https://github.com/knsv/mermaid/issues/543)
--   Conflict while using mermaid along with core-js [\#512](https://github.com/knsv/mermaid/issues/512)
--   Export to pdf on website [\#496](https://github.com/knsv/mermaid/issues/496)
--   New downstream project: Mermaid Preview for VSCode [\#442](https://github.com/knsv/mermaid/issues/442)
--   Can't Zoom the flowchart ? [\#399](https://github.com/knsv/mermaid/issues/399)
--   line labels are not rendered correctly in live editor [\#366](https://github.com/knsv/mermaid/issues/366)
--   mermaid-loader [\#361](https://github.com/knsv/mermaid/issues/361)
--   Are there any documentation or examples for classDiagram and gitGraph? [\#359](https://github.com/knsv/mermaid/issues/359)
--   \# character broken in 0.5.8 [\#347](https://github.com/knsv/mermaid/issues/347)
--   Documentation issue: CSS example is not visible [\#345](https://github.com/knsv/mermaid/issues/345)
--   Include documentation for command line usage [\#326](https://github.com/knsv/mermaid/issues/326)
--   Fresh fork: can't build dist [\#296](https://github.com/knsv/mermaid/issues/296)
--   Invalid value for \<svg\> attribute viewBox="0 0 -Infinity -Infinity" [\#291](https://github.com/knsv/mermaid/issues/291)
--   Webpack require fails [\#277](https://github.com/knsv/mermaid/issues/277)
--   New documentation - need improved logo [\#216](https://github.com/knsv/mermaid/issues/216)
+- live editor latin error after update [\#560](https://github.com/knsv/mermaid/issues/560)
+- Simple full example in online documentation is broken [\#558](https://github.com/knsv/mermaid/issues/558)
+- Graph No Arrow Head v7.0.3 [\#543](https://github.com/knsv/mermaid/issues/543)
+- Conflict while using mermaid along with core-js [\#512](https://github.com/knsv/mermaid/issues/512)
+- Export to pdf on website [\#496](https://github.com/knsv/mermaid/issues/496)
+- New downstream project: Mermaid Preview for VSCode [\#442](https://github.com/knsv/mermaid/issues/442)
+- Can't Zoom the flowchart ? [\#399](https://github.com/knsv/mermaid/issues/399)
+- line labels are not rendered correctly in live editor [\#366](https://github.com/knsv/mermaid/issues/366)
+- mermaid-loader [\#361](https://github.com/knsv/mermaid/issues/361)
+- Are there any documentation or examples for classDiagram and gitGraph? [\#359](https://github.com/knsv/mermaid/issues/359)
+- \# character broken in 0.5.8 [\#347](https://github.com/knsv/mermaid/issues/347)
+- Documentation issue: CSS example is not visible [\#345](https://github.com/knsv/mermaid/issues/345)
+- Include documentation for command line usage [\#326](https://github.com/knsv/mermaid/issues/326)
+- Fresh fork: can't build dist [\#296](https://github.com/knsv/mermaid/issues/296)
+- Invalid value for \<svg\> attribute viewBox="0 0 -Infinity -Infinity" [\#291](https://github.com/knsv/mermaid/issues/291)
+- Webpack require fails [\#277](https://github.com/knsv/mermaid/issues/277)
+- New documentation - need improved logo [\#216](https://github.com/knsv/mermaid/issues/216)
 
 ## [7.0.3](https://github.com/knsv/mermaid/tree/7.0.3) (2017-06-04)
 
@@ -306,8 +306,8 @@
 
 **Closed issues:**
 
--   the documentation website is down [\#539](https://github.com/knsv/mermaid/issues/539)
--   Good example of interactivity with mermaidAPI [\#514](https://github.com/knsv/mermaid/issues/514)
+- the documentation website is down [\#539](https://github.com/knsv/mermaid/issues/539)
+- Good example of interactivity with mermaidAPI [\#514](https://github.com/knsv/mermaid/issues/514)
 
 ## [7.0.2](https://github.com/knsv/mermaid/tree/7.0.2) (2017-06-01)
 
@@ -315,36 +315,36 @@
 
 **Closed issues:**
 
--   CDN is not working [\#511](https://github.com/knsv/mermaid/issues/511)
--   A sampe sequenceDiagram crashes mermaid-cli [\#492](https://github.com/knsv/mermaid/issues/492)
--   Mermaid doesn't delete nodes when called multiple times [\#491](https://github.com/knsv/mermaid/issues/491)
--   API crashes on 2nd render\(\) call [\#478](https://github.com/knsv/mermaid/issues/478)
--   sequenceDiagram: dotted line for alt and empty bracket should be hidden [\#456](https://github.com/knsv/mermaid/issues/456)
--   SVG output \(almost\) not correct [\#434](https://github.com/knsv/mermaid/issues/434)
--   How to set axisFormatter of gantt in mermaid CLI? [\#428](https://github.com/knsv/mermaid/issues/428)
--   customizing link style with any color sets `fill` property to `black` instead of `none` [\#416](https://github.com/knsv/mermaid/issues/416)
--   New line at the end of SVG file [\#400](https://github.com/knsv/mermaid/issues/400)
--   CLI doesn't work [\#389](https://github.com/knsv/mermaid/issues/389)
--   Can't render subgraphs with htmlLabels: false [\#367](https://github.com/knsv/mermaid/issues/367)
--   Color arrowhead [\#362](https://github.com/knsv/mermaid/issues/362)
--   CLI: Invisible text, lines in SVG output [\#341](https://github.com/knsv/mermaid/issues/341)
+- CDN is not working [\#511](https://github.com/knsv/mermaid/issues/511)
+- A sampe sequenceDiagram crashes mermaid-cli [\#492](https://github.com/knsv/mermaid/issues/492)
+- Mermaid doesn't delete nodes when called multiple times [\#491](https://github.com/knsv/mermaid/issues/491)
+- API crashes on 2nd render\(\) call [\#478](https://github.com/knsv/mermaid/issues/478)
+- sequenceDiagram: dotted line for alt and empty bracket should be hidden [\#456](https://github.com/knsv/mermaid/issues/456)
+- SVG output \(almost\) not correct [\#434](https://github.com/knsv/mermaid/issues/434)
+- How to set axisFormatter of gantt in mermaid CLI? [\#428](https://github.com/knsv/mermaid/issues/428)
+- customizing link style with any color sets `fill` property to `black` instead of `none` [\#416](https://github.com/knsv/mermaid/issues/416)
+- New line at the end of SVG file [\#400](https://github.com/knsv/mermaid/issues/400)
+- CLI doesn't work [\#389](https://github.com/knsv/mermaid/issues/389)
+- Can't render subgraphs with htmlLabels: false [\#367](https://github.com/knsv/mermaid/issues/367)
+- Color arrowhead [\#362](https://github.com/knsv/mermaid/issues/362)
+- CLI: Invisible text, lines in SVG output [\#341](https://github.com/knsv/mermaid/issues/341)
 
 **Merged pull requests:**
 
--   Update Travis config [\#538](https://github.com/knsv/mermaid/pull/538) ([tylerlong](https://github.com/tylerlong))
--   Fix spelling of 'you' in sequenceDiagram docs [\#537](https://github.com/knsv/mermaid/pull/537) ([ctruelson](https://github.com/ctruelson))
--   Improve CLI output [\#536](https://github.com/knsv/mermaid/pull/536) ([gibson042](https://github.com/gibson042))
--   Modernize mermaid [\#524](https://github.com/knsv/mermaid/pull/524) ([tylerlong](https://github.com/tylerlong))
--   Modernize mermaid [\#519](https://github.com/knsv/mermaid/pull/519) ([tylerlong](https://github.com/tylerlong))
--   Update CLI instructions [\#509](https://github.com/knsv/mermaid/pull/509) ([filipedeschamps](https://github.com/filipedeschamps))
--   Add style for classDiagram to dark/default theme [\#503](https://github.com/knsv/mermaid/pull/503) ([yudenzel](https://github.com/yudenzel))
--   Fix documentation for git graph. [\#498](https://github.com/knsv/mermaid/pull/498) ([gomlgs](https://github.com/gomlgs))
--   Fix links in documentations [\#497](https://github.com/knsv/mermaid/pull/497) ([saveman71](https://github.com/saveman71))
--   Update README.md with git graph sample [\#481](https://github.com/knsv/mermaid/pull/481) ([raghur](https://github.com/raghur))
--   Fix misspelling of “another” [\#479](https://github.com/knsv/mermaid/pull/479) ([stevenschobert](https://github.com/stevenschobert))
--   Fixed \#456 sequenceDiagram: dotted line for alt and empty bracket sho… [\#477](https://github.com/knsv/mermaid/pull/477) ([brookhong](https://github.com/brookhong))
--   Add viewbox attr to class diagram [\#473](https://github.com/knsv/mermaid/pull/473) ([gnkm](https://github.com/gnkm))
--   add par statement to sequenceDiagram [\#470](https://github.com/knsv/mermaid/pull/470) ([u-minor](https://github.com/u-minor))
+- Update Travis config [\#538](https://github.com/knsv/mermaid/pull/538) ([tylerlong](https://github.com/tylerlong))
+- Fix spelling of 'you' in sequenceDiagram docs [\#537](https://github.com/knsv/mermaid/pull/537) ([ctruelson](https://github.com/ctruelson))
+- Improve CLI output [\#536](https://github.com/knsv/mermaid/pull/536) ([gibson042](https://github.com/gibson042))
+- Modernize mermaid [\#524](https://github.com/knsv/mermaid/pull/524) ([tylerlong](https://github.com/tylerlong))
+- Modernize mermaid [\#519](https://github.com/knsv/mermaid/pull/519) ([tylerlong](https://github.com/tylerlong))
+- Update CLI instructions [\#509](https://github.com/knsv/mermaid/pull/509) ([filipedeschamps](https://github.com/filipedeschamps))
+- Add style for classDiagram to dark/default theme [\#503](https://github.com/knsv/mermaid/pull/503) ([yudenzel](https://github.com/yudenzel))
+- Fix documentation for git graph. [\#498](https://github.com/knsv/mermaid/pull/498) ([gomlgs](https://github.com/gomlgs))
+- Fix links in documentations [\#497](https://github.com/knsv/mermaid/pull/497) ([saveman71](https://github.com/saveman71))
+- Update README.md with git graph sample [\#481](https://github.com/knsv/mermaid/pull/481) ([raghur](https://github.com/raghur))
+- Fix misspelling of “another” [\#479](https://github.com/knsv/mermaid/pull/479) ([stevenschobert](https://github.com/stevenschobert))
+- Fixed \#456 sequenceDiagram: dotted line for alt and empty bracket sho… [\#477](https://github.com/knsv/mermaid/pull/477) ([brookhong](https://github.com/brookhong))
+- Add viewbox attr to class diagram [\#473](https://github.com/knsv/mermaid/pull/473) ([gnkm](https://github.com/gnkm))
+- add par statement to sequenceDiagram [\#470](https://github.com/knsv/mermaid/pull/470) ([u-minor](https://github.com/u-minor))
 
 ## [7.0.0](https://github.com/knsv/mermaid/tree/7.0.0) (2017-01-29)
 
@@ -352,50 +352,50 @@
 
 **Closed issues:**
 
--   demos on io site not working [\#466](https://github.com/knsv/mermaid/issues/466)
--   Can not be generated PNG pictures through CLI with Chinese [\#451](https://github.com/knsv/mermaid/issues/451)
--   Round nodes cannot be styled with CSS classes [\#443](https://github.com/knsv/mermaid/issues/443)
--   webpack gulp UglifyJsPlugin error. [\#440](https://github.com/knsv/mermaid/issues/440)
--   String concatenation isn't working [\#432](https://github.com/knsv/mermaid/issues/432)
--   text flow/wrap in actor box of sequence diagram [\#422](https://github.com/knsv/mermaid/issues/422)
--   Online live editor still use old version [\#402](https://github.com/knsv/mermaid/issues/402)
--   uncaught TypeError: t.getTransformToElement is not a function [\#401](https://github.com/knsv/mermaid/issues/401)
--   Only works when using browserify'd code [\#373](https://github.com/knsv/mermaid/issues/373)
--   document the use of shebang line in mmd files [\#364](https://github.com/knsv/mermaid/issues/364)
--   Diagrams are small and unreadable in IE 11 - since 0.5.1 [\#356](https://github.com/knsv/mermaid/issues/356)
--   \[Feature Request\] ER-Diagram Support [\#354](https://github.com/knsv/mermaid/issues/354)
--   npm install -g mermaid does not install phantomjs [\#329](https://github.com/knsv/mermaid/issues/329)
--   activation boxes [\#313](https://github.com/knsv/mermaid/issues/313)
--   The need for mermaid.css should be mentioned explicitly in the intro docs... [\#273](https://github.com/knsv/mermaid/issues/273)
+- demos on io site not working [\#466](https://github.com/knsv/mermaid/issues/466)
+- Can not be generated PNG pictures through CLI with Chinese [\#451](https://github.com/knsv/mermaid/issues/451)
+- Round nodes cannot be styled with CSS classes [\#443](https://github.com/knsv/mermaid/issues/443)
+- webpack gulp UglifyJsPlugin error. [\#440](https://github.com/knsv/mermaid/issues/440)
+- String concatenation isn't working [\#432](https://github.com/knsv/mermaid/issues/432)
+- text flow/wrap in actor box of sequence diagram [\#422](https://github.com/knsv/mermaid/issues/422)
+- Online live editor still use old version [\#402](https://github.com/knsv/mermaid/issues/402)
+- uncaught TypeError: t.getTransformToElement is not a function [\#401](https://github.com/knsv/mermaid/issues/401)
+- Only works when using browserify'd code [\#373](https://github.com/knsv/mermaid/issues/373)
+- document the use of shebang line in mmd files [\#364](https://github.com/knsv/mermaid/issues/364)
+- Diagrams are small and unreadable in IE 11 - since 0.5.1 [\#356](https://github.com/knsv/mermaid/issues/356)
+- \[Feature Request\] ER-Diagram Support [\#354](https://github.com/knsv/mermaid/issues/354)
+- npm install -g mermaid does not install phantomjs [\#329](https://github.com/knsv/mermaid/issues/329)
+- activation boxes [\#313](https://github.com/knsv/mermaid/issues/313)
+- The need for mermaid.css should be mentioned explicitly in the intro docs... [\#273](https://github.com/knsv/mermaid/issues/273)
 
 **Merged pull requests:**
 
--   Update index.html [\#465](https://github.com/knsv/mermaid/pull/465) ([bmsleight](https://github.com/bmsleight))
--   Fix for \#416, customizing link style with any color sets `fill` property to `black` instead of `none` [\#452](https://github.com/knsv/mermaid/pull/452) ([joshuacolvin](https://github.com/joshuacolvin))
--   Allow .node\>circle to receive css styles [\#449](https://github.com/knsv/mermaid/pull/449) ([bfriedz](https://github.com/bfriedz))
--   Fix spelling [\#447](https://github.com/knsv/mermaid/pull/447) ([jawn](https://github.com/jawn))
--   added tests and fix cli css style selector lowercase problem [\#445](https://github.com/knsv/mermaid/pull/445) ([whyzdev](https://github.com/whyzdev))
--   Update d3.js [\#441](https://github.com/knsv/mermaid/pull/441) ([hetz](https://github.com/hetz))
--   adde tests to reproduce \#434 in flowchart [\#439](https://github.com/knsv/mermaid/pull/439) ([whyzdev](https://github.com/whyzdev))
--   Code Climate config [\#437](https://github.com/knsv/mermaid/pull/437) ([larkinscott](https://github.com/larkinscott))
--   fix gantt and sequence digram cli cfg [\#435](https://github.com/knsv/mermaid/pull/435) ([whyzdev](https://github.com/whyzdev))
--   fix gantt chart cli configuration broken [\#433](https://github.com/knsv/mermaid/pull/433) ([whyzdev](https://github.com/whyzdev))
--   fix gantt chart cli configuration parsing including functions [\#430](https://github.com/knsv/mermaid/pull/430) ([whyzdev](https://github.com/whyzdev))
--   Uses an empty text node instead of a string for svg group labels [\#429](https://github.com/knsv/mermaid/pull/429) ([daveaglick](https://github.com/daveaglick))
--   use tspan via d3.textwrap to place actor text in sequence diagram [\#427](https://github.com/knsv/mermaid/pull/427) ([whyzdev](https://github.com/whyzdev))
--   \#422 use foreignObject/div to place actor label in sequence diagram [\#423](https://github.com/knsv/mermaid/pull/423) ([whyzdev](https://github.com/whyzdev))
--   Clarify the need for a CSS stylesheet [\#413](https://github.com/knsv/mermaid/pull/413) ([sifb](https://github.com/sifb))
--   Added hads downstream project [\#412](https://github.com/knsv/mermaid/pull/412) ([sinedied](https://github.com/sinedied))
--   update usage and fix \#273 [\#406](https://github.com/knsv/mermaid/pull/406) ([jinntrance](https://github.com/jinntrance))
--   Add https://github.com/raghur/mermaid-filter to downstream projects docs page [\#404](https://github.com/knsv/mermaid/pull/404) ([raghur](https://github.com/raghur))
--   New neutral theme [\#395](https://github.com/knsv/mermaid/pull/395) ([sinedied](https://github.com/sinedied))
--   fix cli issues [\#390](https://github.com/knsv/mermaid/pull/390) ([ben-page](https://github.com/ben-page))
--   Add missing space for 'Labels out of bounds' section [\#386](https://github.com/knsv/mermaid/pull/386) ([The-Alchemist](https://github.com/The-Alchemist))
--   Fix typo: `pats` -\> `paths` [\#382](https://github.com/knsv/mermaid/pull/382) ([swhgoon](https://github.com/swhgoon))
--   Added class diagram example to README.md [\#379](https://github.com/knsv/mermaid/pull/379) ([HustLion](https://github.com/HustLion))
--   override normal flowchart arrowhead to allow css styling [\#376](https://github.com/knsv/mermaid/pull/376) ([dodoinblue](https://github.com/dodoinblue))
--   added sphinx extension [\#371](https://github.com/knsv/mermaid/pull/371) ([mgaitan](https://github.com/mgaitan))
--   Fix typo in the sequence diagram documentation [\#369](https://github.com/knsv/mermaid/pull/369) ([ggpasqualino](https://github.com/ggpasqualino))
+- Update index.html [\#465](https://github.com/knsv/mermaid/pull/465) ([bmsleight](https://github.com/bmsleight))
+- Fix for \#416, customizing link style with any color sets `fill` property to `black` instead of `none` [\#452](https://github.com/knsv/mermaid/pull/452) ([joshuacolvin](https://github.com/joshuacolvin))
+- Allow .node\>circle to receive css styles [\#449](https://github.com/knsv/mermaid/pull/449) ([bfriedz](https://github.com/bfriedz))
+- Fix spelling [\#447](https://github.com/knsv/mermaid/pull/447) ([jawn](https://github.com/jawn))
+- added tests and fix cli css style selector lowercase problem [\#445](https://github.com/knsv/mermaid/pull/445) ([whyzdev](https://github.com/whyzdev))
+- Update d3.js [\#441](https://github.com/knsv/mermaid/pull/441) ([hetz](https://github.com/hetz))
+- adde tests to reproduce \#434 in flowchart [\#439](https://github.com/knsv/mermaid/pull/439) ([whyzdev](https://github.com/whyzdev))
+- Code Climate config [\#437](https://github.com/knsv/mermaid/pull/437) ([larkinscott](https://github.com/larkinscott))
+- fix gantt and sequence digram cli cfg [\#435](https://github.com/knsv/mermaid/pull/435) ([whyzdev](https://github.com/whyzdev))
+- fix gantt chart cli configuration broken [\#433](https://github.com/knsv/mermaid/pull/433) ([whyzdev](https://github.com/whyzdev))
+- fix gantt chart cli configuration parsing including functions [\#430](https://github.com/knsv/mermaid/pull/430) ([whyzdev](https://github.com/whyzdev))
+- Uses an empty text node instead of a string for svg group labels [\#429](https://github.com/knsv/mermaid/pull/429) ([daveaglick](https://github.com/daveaglick))
+- use tspan via d3.textwrap to place actor text in sequence diagram [\#427](https://github.com/knsv/mermaid/pull/427) ([whyzdev](https://github.com/whyzdev))
+- \#422 use foreignObject/div to place actor label in sequence diagram [\#423](https://github.com/knsv/mermaid/pull/423) ([whyzdev](https://github.com/whyzdev))
+- Clarify the need for a CSS stylesheet [\#413](https://github.com/knsv/mermaid/pull/413) ([sifb](https://github.com/sifb))
+- Added hads downstream project [\#412](https://github.com/knsv/mermaid/pull/412) ([sinedied](https://github.com/sinedied))
+- update usage and fix \#273 [\#406](https://github.com/knsv/mermaid/pull/406) ([jinntrance](https://github.com/jinntrance))
+- Add https://github.com/raghur/mermaid-filter to downstream projects docs page [\#404](https://github.com/knsv/mermaid/pull/404) ([raghur](https://github.com/raghur))
+- New neutral theme [\#395](https://github.com/knsv/mermaid/pull/395) ([sinedied](https://github.com/sinedied))
+- fix cli issues [\#390](https://github.com/knsv/mermaid/pull/390) ([ben-page](https://github.com/ben-page))
+- Add missing space for 'Labels out of bounds' section [\#386](https://github.com/knsv/mermaid/pull/386) ([The-Alchemist](https://github.com/The-Alchemist))
+- Fix typo: `pats` -\> `paths` [\#382](https://github.com/knsv/mermaid/pull/382) ([swhgoon](https://github.com/swhgoon))
+- Added class diagram example to README.md [\#379](https://github.com/knsv/mermaid/pull/379) ([HustLion](https://github.com/HustLion))
+- override normal flowchart arrowhead to allow css styling [\#376](https://github.com/knsv/mermaid/pull/376) ([dodoinblue](https://github.com/dodoinblue))
+- added sphinx extension [\#371](https://github.com/knsv/mermaid/pull/371) ([mgaitan](https://github.com/mgaitan))
+- Fix typo in the sequence diagram documentation [\#369](https://github.com/knsv/mermaid/pull/369) ([ggpasqualino](https://github.com/ggpasqualino))
 
 ## [6.0.0](https://github.com/knsv/mermaid/tree/6.0.0) (2016-05-29)
 
@@ -403,38 +403,38 @@
 
 **Closed issues:**
 
--   Docs css: code hard to read [\#324](https://github.com/knsv/mermaid/issues/324)
--   About Markpad integration [\#323](https://github.com/knsv/mermaid/issues/323)
--   How to link backwords in flowchat? [\#321](https://github.com/knsv/mermaid/issues/321)
--   Help with editor [\#310](https://github.com/knsv/mermaid/issues/310)
--   +1 [\#293](https://github.com/knsv/mermaid/issues/293)
--   Basic chart does not render on Chome, but does in Firefox [\#290](https://github.com/knsv/mermaid/issues/290)
--   Live editor is broken [\#285](https://github.com/knsv/mermaid/issues/285)
--   "No such file or directory" trying to run mermaid 0.5.7 on OS X [\#284](https://github.com/knsv/mermaid/issues/284)
--   participant name as "Long Long Name" [\#283](https://github.com/knsv/mermaid/issues/283)
--   Windows - cli - could not find phantomjs at the specified path [\#236](https://github.com/knsv/mermaid/issues/236)
+- Docs css: code hard to read [\#324](https://github.com/knsv/mermaid/issues/324)
+- About Markpad integration [\#323](https://github.com/knsv/mermaid/issues/323)
+- How to link backwords in flowchat? [\#321](https://github.com/knsv/mermaid/issues/321)
+- Help with editor [\#310](https://github.com/knsv/mermaid/issues/310)
+- +1 [\#293](https://github.com/knsv/mermaid/issues/293)
+- Basic chart does not render on Chome, but does in Firefox [\#290](https://github.com/knsv/mermaid/issues/290)
+- Live editor is broken [\#285](https://github.com/knsv/mermaid/issues/285)
+- "No such file or directory" trying to run mermaid 0.5.7 on OS X [\#284](https://github.com/knsv/mermaid/issues/284)
+- participant name as "Long Long Name" [\#283](https://github.com/knsv/mermaid/issues/283)
+- Windows - cli - could not find phantomjs at the specified path [\#236](https://github.com/knsv/mermaid/issues/236)
 
 **Merged pull requests:**
 
--   The option of gantt for the spaces for the section names. [\#353](https://github.com/knsv/mermaid/pull/353) ([zeroyonichihachi](https://github.com/zeroyonichihachi))
--   Gitgraph: Make reset work with parent ref carets [\#350](https://github.com/knsv/mermaid/pull/350) ([raghur](https://github.com/raghur))
--   Remove the text-shadows that make the text look blurry [\#349](https://github.com/knsv/mermaid/pull/349) ([AsaAyers](https://github.com/AsaAyers))
--   add line interpolation to linkStyle in flowchart [\#346](https://github.com/knsv/mermaid/pull/346) ([AlanHohn](https://github.com/AlanHohn))
--   Support git graph diagrams in mermaid [\#344](https://github.com/knsv/mermaid/pull/344) ([raghur](https://github.com/raghur))
--   Build and test execution changes [\#338](https://github.com/knsv/mermaid/pull/338) ([ssbarnea](https://github.com/ssbarnea))
--   Reformatting of css files [\#331](https://github.com/knsv/mermaid/pull/331) ([Jmuccigr](https://github.com/Jmuccigr))
--   \(WIP\) Sequence Diagram Title Support [\#320](https://github.com/knsv/mermaid/pull/320) ([bronsoja](https://github.com/bronsoja))
--   activations doc + few fixes [\#318](https://github.com/knsv/mermaid/pull/318) ([ciekawy](https://github.com/ciekawy))
--   Dark theme for better contrast on darker backgrounds [\#317](https://github.com/knsv/mermaid/pull/317) ([crodriguez1a](https://github.com/crodriguez1a))
--   Activations [\#316](https://github.com/knsv/mermaid/pull/316) ([ciekawy](https://github.com/ciekawy))
--   Support leading comments for sequenceDiagrams [\#312](https://github.com/knsv/mermaid/pull/312) ([ashsearle](https://github.com/ashsearle))
--   Show a little lenience for white-space around names [\#309](https://github.com/knsv/mermaid/pull/309) ([ashsearle](https://github.com/ashsearle))
--   Update list of downstream projects [\#307](https://github.com/knsv/mermaid/pull/307) ([maxArturo](https://github.com/maxArturo))
--   Issue 299: Sequence diagram Loops: changing boxMargin spoils the "loop" notation [\#300](https://github.com/knsv/mermaid/pull/300) ([LarryKlugerDS](https://github.com/LarryKlugerDS))
--   Issue 297 - src/mermaid.js generates bad code [\#298](https://github.com/knsv/mermaid/pull/298) ([LarryKlugerDS](https://github.com/LarryKlugerDS))
--   Updated instructions for running tests [\#295](https://github.com/knsv/mermaid/pull/295) ([LarryKlugerDS](https://github.com/LarryKlugerDS))
--   Add Markdown Plus to Downstream projects [\#288](https://github.com/knsv/mermaid/pull/288) ([tylerlong](https://github.com/tylerlong))
--   Quote phantomPath so that it doesn't fail on window [\#286](https://github.com/knsv/mermaid/pull/286) ([raghur](https://github.com/raghur))
+- The option of gantt for the spaces for the section names. [\#353](https://github.com/knsv/mermaid/pull/353) ([zeroyonichihachi](https://github.com/zeroyonichihachi))
+- Gitgraph: Make reset work with parent ref carets [\#350](https://github.com/knsv/mermaid/pull/350) ([raghur](https://github.com/raghur))
+- Remove the text-shadows that make the text look blurry [\#349](https://github.com/knsv/mermaid/pull/349) ([AsaAyers](https://github.com/AsaAyers))
+- add line interpolation to linkStyle in flowchart [\#346](https://github.com/knsv/mermaid/pull/346) ([AlanHohn](https://github.com/AlanHohn))
+- Support git graph diagrams in mermaid [\#344](https://github.com/knsv/mermaid/pull/344) ([raghur](https://github.com/raghur))
+- Build and test execution changes [\#338](https://github.com/knsv/mermaid/pull/338) ([ssbarnea](https://github.com/ssbarnea))
+- Reformatting of css files [\#331](https://github.com/knsv/mermaid/pull/331) ([Jmuccigr](https://github.com/Jmuccigr))
+- \(WIP\) Sequence Diagram Title Support [\#320](https://github.com/knsv/mermaid/pull/320) ([bronsoja](https://github.com/bronsoja))
+- activations doc + few fixes [\#318](https://github.com/knsv/mermaid/pull/318) ([ciekawy](https://github.com/ciekawy))
+- Dark theme for better contrast on darker backgrounds [\#317](https://github.com/knsv/mermaid/pull/317) ([crodriguez1a](https://github.com/crodriguez1a))
+- Activations [\#316](https://github.com/knsv/mermaid/pull/316) ([ciekawy](https://github.com/ciekawy))
+- Support leading comments for sequenceDiagrams [\#312](https://github.com/knsv/mermaid/pull/312) ([ashsearle](https://github.com/ashsearle))
+- Show a little lenience for white-space around names [\#309](https://github.com/knsv/mermaid/pull/309) ([ashsearle](https://github.com/ashsearle))
+- Update list of downstream projects [\#307](https://github.com/knsv/mermaid/pull/307) ([maxArturo](https://github.com/maxArturo))
+- Issue 299: Sequence diagram Loops: changing boxMargin spoils the "loop" notation [\#300](https://github.com/knsv/mermaid/pull/300) ([LarryKlugerDS](https://github.com/LarryKlugerDS))
+- Issue 297 - src/mermaid.js generates bad code [\#298](https://github.com/knsv/mermaid/pull/298) ([LarryKlugerDS](https://github.com/LarryKlugerDS))
+- Updated instructions for running tests [\#295](https://github.com/knsv/mermaid/pull/295) ([LarryKlugerDS](https://github.com/LarryKlugerDS))
+- Add Markdown Plus to Downstream projects [\#288](https://github.com/knsv/mermaid/pull/288) ([tylerlong](https://github.com/tylerlong))
+- Quote phantomPath so that it doesn't fail on window [\#286](https://github.com/knsv/mermaid/pull/286) ([raghur](https://github.com/raghur))
 
 ## [0.5.8](https://github.com/knsv/mermaid/tree/0.5.8) (2016-01-27)
 
@@ -446,21 +446,21 @@
 
 **Closed issues:**
 
--   Mermaid + LightPaper = ❤️ [\#280](https://github.com/knsv/mermaid/issues/280)
--   Bower Integration [\#278](https://github.com/knsv/mermaid/issues/278)
--   Mermaid breaks when variables end in 'v' [\#276](https://github.com/knsv/mermaid/issues/276)
--   sequence diagrams don't support participant aliasing [\#263](https://github.com/knsv/mermaid/issues/263)
--   One diagram that fails to render stops further execution on the page [\#259](https://github.com/knsv/mermaid/issues/259)
--   Where to find line layout algorithm? [\#258](https://github.com/knsv/mermaid/issues/258)
--   Compatibility with node.js [\#257](https://github.com/knsv/mermaid/issues/257)
--   Label resizing with dynamically loaded fonts [\#255](https://github.com/knsv/mermaid/issues/255)
--   SVG arrowheads are broken in the CLI [\#249](https://github.com/knsv/mermaid/issues/249)
--   Cannot read property 'replace' of undefined [\#239](https://github.com/knsv/mermaid/issues/239)
+- Mermaid + LightPaper = ❤️ [\#280](https://github.com/knsv/mermaid/issues/280)
+- Bower Integration [\#278](https://github.com/knsv/mermaid/issues/278)
+- Mermaid breaks when variables end in 'v' [\#276](https://github.com/knsv/mermaid/issues/276)
+- sequence diagrams don't support participant aliasing [\#263](https://github.com/knsv/mermaid/issues/263)
+- One diagram that fails to render stops further execution on the page [\#259](https://github.com/knsv/mermaid/issues/259)
+- Where to find line layout algorithm? [\#258](https://github.com/knsv/mermaid/issues/258)
+- Compatibility with node.js [\#257](https://github.com/knsv/mermaid/issues/257)
+- Label resizing with dynamically loaded fonts [\#255](https://github.com/knsv/mermaid/issues/255)
+- SVG arrowheads are broken in the CLI [\#249](https://github.com/knsv/mermaid/issues/249)
+- Cannot read property 'replace' of undefined [\#239](https://github.com/knsv/mermaid/issues/239)
 
 **Merged pull requests:**
 
--   gh-50 Allow styling of edge labels in css [\#267](https://github.com/knsv/mermaid/pull/267) ([Anoia](https://github.com/Anoia))
--   Allow sequenceDiagram participant aliasing [\#265](https://github.com/knsv/mermaid/pull/265) ([gibson042](https://github.com/gibson042))
+- gh-50 Allow styling of edge labels in css [\#267](https://github.com/knsv/mermaid/pull/267) ([Anoia](https://github.com/Anoia))
+- Allow sequenceDiagram participant aliasing [\#265](https://github.com/knsv/mermaid/pull/265) ([gibson042](https://github.com/gibson042))
 
 ## [0.5.6](https://github.com/knsv/mermaid/tree/0.5.6) (2015-11-22)
 
@@ -468,30 +468,30 @@
 
 **Closed issues:**
 
--   title doesn't work in sequenceDiagram [\#248](https://github.com/knsv/mermaid/issues/248)
--   hypen-minus should be valid in sequence diagram alt/else/etc. descriptions [\#247](https://github.com/knsv/mermaid/issues/247)
--   Broken in firefox? [\#245](https://github.com/knsv/mermaid/issues/245)
--   When there is a Chinese symbol in the flowchart, it will crash。 [\#238](https://github.com/knsv/mermaid/issues/238)
--   Non-alpha characters included in ALPHA token \(flow graph jison\) [\#232](https://github.com/knsv/mermaid/issues/232)
--   subgraph not rendering with change to sample [\#231](https://github.com/knsv/mermaid/issues/231)
--   sequence diagram requires a new line at the end? [\#229](https://github.com/knsv/mermaid/issues/229)
--   Live Editor: Permalink address not being parsed [\#202](https://github.com/knsv/mermaid/issues/202)
--   Add download SVG link to the live editor [\#144](https://github.com/knsv/mermaid/issues/144)
+- title doesn't work in sequenceDiagram [\#248](https://github.com/knsv/mermaid/issues/248)
+- hypen-minus should be valid in sequence diagram alt/else/etc. descriptions [\#247](https://github.com/knsv/mermaid/issues/247)
+- Broken in firefox? [\#245](https://github.com/knsv/mermaid/issues/245)
+- When there is a Chinese symbol in the flowchart, it will crash。 [\#238](https://github.com/knsv/mermaid/issues/238)
+- Non-alpha characters included in ALPHA token \(flow graph jison\) [\#232](https://github.com/knsv/mermaid/issues/232)
+- subgraph not rendering with change to sample [\#231](https://github.com/knsv/mermaid/issues/231)
+- sequence diagram requires a new line at the end? [\#229](https://github.com/knsv/mermaid/issues/229)
+- Live Editor: Permalink address not being parsed [\#202](https://github.com/knsv/mermaid/issues/202)
+- Add download SVG link to the live editor [\#144](https://github.com/knsv/mermaid/issues/144)
 
 **Merged pull requests:**
 
--   Make sequenceDiagram terminal newline optional [\#253](https://github.com/knsv/mermaid/pull/253) ([gibson042](https://github.com/gibson042))
--   Support sequenceDiagram "over" notes [\#252](https://github.com/knsv/mermaid/pull/252) ([gibson042](https://github.com/gibson042))
--   Properly handle "rest of line" statements [\#251](https://github.com/knsv/mermaid/pull/251) ([gibson042](https://github.com/gibson042))
--   CLI: Propagate exit code from lib \(i.e., phantomjs\) [\#250](https://github.com/knsv/mermaid/pull/250) ([gibson042](https://github.com/gibson042))
--   flowRender.js - Fix FontAwesome icon insert [\#244](https://github.com/knsv/mermaid/pull/244) ([ma-zal](https://github.com/ma-zal))
--   updated sequence diagram link in live editor [\#242](https://github.com/knsv/mermaid/pull/242) ([r-a-v-a-s](https://github.com/r-a-v-a-s))
--   updated links in README.md [\#240](https://github.com/knsv/mermaid/pull/240) ([r-a-v-a-s](https://github.com/r-a-v-a-s))
--   Ellipse syntax [\#237](https://github.com/knsv/mermaid/pull/237) ([spect88](https://github.com/spect88))
--   Allow keywords as suffixes of node ids [\#235](https://github.com/knsv/mermaid/pull/235) ([spect88](https://github.com/spect88))
--   Highlighted the editor in the nav [\#234](https://github.com/knsv/mermaid/pull/234) ([knsv](https://github.com/knsv))
--   Live editor tweaks [\#233](https://github.com/knsv/mermaid/pull/233) ([spect88](https://github.com/spect88))
--   Add a Gitter chat badge to README.md [\#230](https://github.com/knsv/mermaid/pull/230) ([gitter-badger](https://github.com/gitter-badger))
+- Make sequenceDiagram terminal newline optional [\#253](https://github.com/knsv/mermaid/pull/253) ([gibson042](https://github.com/gibson042))
+- Support sequenceDiagram "over" notes [\#252](https://github.com/knsv/mermaid/pull/252) ([gibson042](https://github.com/gibson042))
+- Properly handle "rest of line" statements [\#251](https://github.com/knsv/mermaid/pull/251) ([gibson042](https://github.com/gibson042))
+- CLI: Propagate exit code from lib \(i.e., phantomjs\) [\#250](https://github.com/knsv/mermaid/pull/250) ([gibson042](https://github.com/gibson042))
+- flowRender.js - Fix FontAwesome icon insert [\#244](https://github.com/knsv/mermaid/pull/244) ([ma-zal](https://github.com/ma-zal))
+- updated sequence diagram link in live editor [\#242](https://github.com/knsv/mermaid/pull/242) ([r-a-v-a-s](https://github.com/r-a-v-a-s))
+- updated links in README.md [\#240](https://github.com/knsv/mermaid/pull/240) ([r-a-v-a-s](https://github.com/r-a-v-a-s))
+- Ellipse syntax [\#237](https://github.com/knsv/mermaid/pull/237) ([spect88](https://github.com/spect88))
+- Allow keywords as suffixes of node ids [\#235](https://github.com/knsv/mermaid/pull/235) ([spect88](https://github.com/spect88))
+- Highlighted the editor in the nav [\#234](https://github.com/knsv/mermaid/pull/234) ([knsv](https://github.com/knsv))
+- Live editor tweaks [\#233](https://github.com/knsv/mermaid/pull/233) ([spect88](https://github.com/spect88))
+- Add a Gitter chat badge to README.md [\#230](https://github.com/knsv/mermaid/pull/230) ([gitter-badger](https://github.com/gitter-badger))
 
 ## [0.5.5](https://github.com/knsv/mermaid/tree/0.5.5) (2015-10-21)
 
@@ -499,11 +499,11 @@
 
 **Closed issues:**
 
--   sequence diagram, arrowhead instead of crosshead [\#227](https://github.com/knsv/mermaid/issues/227)
+- sequence diagram, arrowhead instead of crosshead [\#227](https://github.com/knsv/mermaid/issues/227)
 
 **Merged pull requests:**
 
--   Fix a typo: crosshead --\> arrowhead [\#228](https://github.com/knsv/mermaid/pull/228) ([tylerlong](https://github.com/tylerlong))
+- Fix a typo: crosshead --\> arrowhead [\#228](https://github.com/knsv/mermaid/pull/228) ([tylerlong](https://github.com/tylerlong))
 
 ## [0.5.4](https://github.com/knsv/mermaid/tree/0.5.4) (2015-10-19)
 
@@ -511,23 +511,23 @@
 
 **Closed issues:**
 
--   Weird bug in live editor when using words with substring `end` [\#184](https://github.com/knsv/mermaid/issues/184)
--   Custom icons [\#15](https://github.com/knsv/mermaid/issues/15)
--   Marker-end arrow cannot be shown for URL with query parameter [\#225](https://github.com/knsv/mermaid/issues/225)
--   Please update bower's D3 version [\#221](https://github.com/knsv/mermaid/issues/221)
--   Set log level from mermaid configuration [\#220](https://github.com/knsv/mermaid/issues/220)
--   Width fixed to 400px [\#204](https://github.com/knsv/mermaid/issues/204)
--   render to png from the cli does not display the marker-end arrow heads [\#181](https://github.com/knsv/mermaid/issues/181)
--   Links in sequence diagrams [\#159](https://github.com/knsv/mermaid/issues/159)
--   comment characters `%%` cause parse error [\#141](https://github.com/knsv/mermaid/issues/141)
--   Add a reversed assymetric shape [\#124](https://github.com/knsv/mermaid/issues/124)
--   Add syntax for double headed arrows [\#123](https://github.com/knsv/mermaid/issues/123)
--   Support for font-awesome [\#49](https://github.com/knsv/mermaid/issues/49)
+- Weird bug in live editor when using words with substring `end` [\#184](https://github.com/knsv/mermaid/issues/184)
+- Custom icons [\#15](https://github.com/knsv/mermaid/issues/15)
+- Marker-end arrow cannot be shown for URL with query parameter [\#225](https://github.com/knsv/mermaid/issues/225)
+- Please update bower's D3 version [\#221](https://github.com/knsv/mermaid/issues/221)
+- Set log level from mermaid configuration [\#220](https://github.com/knsv/mermaid/issues/220)
+- Width fixed to 400px [\#204](https://github.com/knsv/mermaid/issues/204)
+- render to png from the cli does not display the marker-end arrow heads [\#181](https://github.com/knsv/mermaid/issues/181)
+- Links in sequence diagrams [\#159](https://github.com/knsv/mermaid/issues/159)
+- comment characters `%%` cause parse error [\#141](https://github.com/knsv/mermaid/issues/141)
+- Add a reversed assymetric shape [\#124](https://github.com/knsv/mermaid/issues/124)
+- Add syntax for double headed arrows [\#123](https://github.com/knsv/mermaid/issues/123)
+- Support for font-awesome [\#49](https://github.com/knsv/mermaid/issues/49)
 
 **Merged pull requests:**
 
--   Allow `end` as a substring of vertex id [\#224](https://github.com/knsv/mermaid/pull/224) ([spect88](https://github.com/spect88))
--   Remove duplicate npm dependencies: d3 and he [\#223](https://github.com/knsv/mermaid/pull/223) ([spect88](https://github.com/spect88))
+- Allow `end` as a substring of vertex id [\#224](https://github.com/knsv/mermaid/pull/224) ([spect88](https://github.com/spect88))
+- Remove duplicate npm dependencies: d3 and he [\#223](https://github.com/knsv/mermaid/pull/223) ([spect88](https://github.com/spect88))
 
 ## [0.5.3](https://github.com/knsv/mermaid/tree/0.5.3) (2015-10-04)
 
@@ -539,53 +539,53 @@
 
 **Closed issues:**
 
--   Installing “atom-mermaid@0.1.3” failed [\#218](https://github.com/knsv/mermaid/issues/218)
--   Render mermaid code on websites? [\#215](https://github.com/knsv/mermaid/issues/215)
--   Brackets in a node with text? [\#213](https://github.com/knsv/mermaid/issues/213)
--   node feature request [\#211](https://github.com/knsv/mermaid/issues/211)
--   Please add prefix for styles [\#208](https://github.com/knsv/mermaid/issues/208)
--   Bad handling of block arguments [\#207](https://github.com/knsv/mermaid/issues/207)
--   please consider port to mac osx [\#203](https://github.com/knsv/mermaid/issues/203)
--   allow phantomjs \>=1.9.x [\#201](https://github.com/knsv/mermaid/issues/201)
--   syntax for venn diagrams? [\#200](https://github.com/knsv/mermaid/issues/200)
--   Broken CLI Graphs? \(v0.5.1\) [\#196](https://github.com/knsv/mermaid/issues/196)
--   Static site does not render under HTTPS [\#194](https://github.com/knsv/mermaid/issues/194)
--   Error on simple graph [\#192](https://github.com/knsv/mermaid/issues/192)
--   Escape "~" [\#191](https://github.com/knsv/mermaid/issues/191)
--   Trying to add link using 'click' to flowchart [\#188](https://github.com/knsv/mermaid/issues/188)
--   cli: no lines and arrowheads rendered / only dotted lines [\#187](https://github.com/knsv/mermaid/issues/187)
--   text of mermaid div displayed on page [\#186](https://github.com/knsv/mermaid/issues/186)
--   using mermaid with laravel [\#185](https://github.com/knsv/mermaid/issues/185)
--   Atom editor package [\#183](https://github.com/knsv/mermaid/issues/183)
--   Auto linewrap for notes in sequence diagrams [\#178](https://github.com/knsv/mermaid/issues/178)
--   Execute code after initialize [\#176](https://github.com/knsv/mermaid/issues/176)
--   Autoscaling for all diagram types [\#175](https://github.com/knsv/mermaid/issues/175)
--   Problem wit click event callback [\#174](https://github.com/knsv/mermaid/issues/174)
--   How to escape characters? [\#170](https://github.com/knsv/mermaid/issues/170)
--   it can not work [\#167](https://github.com/knsv/mermaid/issues/167)
--   UML Class diagram [\#154](https://github.com/knsv/mermaid/issues/154)
--   Broken subgraph using the CLI [\#153](https://github.com/knsv/mermaid/issues/153)
--   Support PlantUML syntax [\#149](https://github.com/knsv/mermaid/issues/149)
--   IE Support issue [\#142](https://github.com/knsv/mermaid/issues/142)
--   Flowchart truncated [\#140](https://github.com/knsv/mermaid/issues/140)
--   Double Quote as text is not working [\#219](https://github.com/knsv/mermaid/issues/219)
--   classDef / class not working with htmlLabels? [\#210](https://github.com/knsv/mermaid/issues/210)
--   Links in graph missing [\#209](https://github.com/knsv/mermaid/issues/209)
--   Last word in comment boxes getting cut off by word wrap library : \( [\#195](https://github.com/knsv/mermaid/issues/195)
--   Escaping characters in sequence diagram [\#193](https://github.com/knsv/mermaid/issues/193)
--   SVG foreignObject rendering [\#180](https://github.com/knsv/mermaid/issues/180)
--   IE9 issue [\#179](https://github.com/knsv/mermaid/issues/179)
--   inoperable in an AMD/requirejs environment: IPython Notebook [\#127](https://github.com/knsv/mermaid/issues/127)
--   \[Parser\] Hyphen in participant name bring TypeError [\#74](https://github.com/knsv/mermaid/issues/74)
--   Support for hyperlink and tooltip [\#34](https://github.com/knsv/mermaid/issues/34)
+- Installing “atom-mermaid@0.1.3” failed [\#218](https://github.com/knsv/mermaid/issues/218)
+- Render mermaid code on websites? [\#215](https://github.com/knsv/mermaid/issues/215)
+- Brackets in a node with text? [\#213](https://github.com/knsv/mermaid/issues/213)
+- node feature request [\#211](https://github.com/knsv/mermaid/issues/211)
+- Please add prefix for styles [\#208](https://github.com/knsv/mermaid/issues/208)
+- Bad handling of block arguments [\#207](https://github.com/knsv/mermaid/issues/207)
+- please consider port to mac osx [\#203](https://github.com/knsv/mermaid/issues/203)
+- allow phantomjs \>=1.9.x [\#201](https://github.com/knsv/mermaid/issues/201)
+- syntax for venn diagrams? [\#200](https://github.com/knsv/mermaid/issues/200)
+- Broken CLI Graphs? \(v0.5.1\) [\#196](https://github.com/knsv/mermaid/issues/196)
+- Static site does not render under HTTPS [\#194](https://github.com/knsv/mermaid/issues/194)
+- Error on simple graph [\#192](https://github.com/knsv/mermaid/issues/192)
+- Escape "~" [\#191](https://github.com/knsv/mermaid/issues/191)
+- Trying to add link using 'click' to flowchart [\#188](https://github.com/knsv/mermaid/issues/188)
+- cli: no lines and arrowheads rendered / only dotted lines [\#187](https://github.com/knsv/mermaid/issues/187)
+- text of mermaid div displayed on page [\#186](https://github.com/knsv/mermaid/issues/186)
+- using mermaid with laravel [\#185](https://github.com/knsv/mermaid/issues/185)
+- Atom editor package [\#183](https://github.com/knsv/mermaid/issues/183)
+- Auto linewrap for notes in sequence diagrams [\#178](https://github.com/knsv/mermaid/issues/178)
+- Execute code after initialize [\#176](https://github.com/knsv/mermaid/issues/176)
+- Autoscaling for all diagram types [\#175](https://github.com/knsv/mermaid/issues/175)
+- Problem wit click event callback [\#174](https://github.com/knsv/mermaid/issues/174)
+- How to escape characters? [\#170](https://github.com/knsv/mermaid/issues/170)
+- it can not work [\#167](https://github.com/knsv/mermaid/issues/167)
+- UML Class diagram [\#154](https://github.com/knsv/mermaid/issues/154)
+- Broken subgraph using the CLI [\#153](https://github.com/knsv/mermaid/issues/153)
+- Support PlantUML syntax [\#149](https://github.com/knsv/mermaid/issues/149)
+- IE Support issue [\#142](https://github.com/knsv/mermaid/issues/142)
+- Flowchart truncated [\#140](https://github.com/knsv/mermaid/issues/140)
+- Double Quote as text is not working [\#219](https://github.com/knsv/mermaid/issues/219)
+- classDef / class not working with htmlLabels? [\#210](https://github.com/knsv/mermaid/issues/210)
+- Links in graph missing [\#209](https://github.com/knsv/mermaid/issues/209)
+- Last word in comment boxes getting cut off by word wrap library : \( [\#195](https://github.com/knsv/mermaid/issues/195)
+- Escaping characters in sequence diagram [\#193](https://github.com/knsv/mermaid/issues/193)
+- SVG foreignObject rendering [\#180](https://github.com/knsv/mermaid/issues/180)
+- IE9 issue [\#179](https://github.com/knsv/mermaid/issues/179)
+- inoperable in an AMD/requirejs environment: IPython Notebook [\#127](https://github.com/knsv/mermaid/issues/127)
+- \[Parser\] Hyphen in participant name bring TypeError [\#74](https://github.com/knsv/mermaid/issues/74)
+- Support for hyperlink and tooltip [\#34](https://github.com/knsv/mermaid/issues/34)
 
 **Merged pull requests:**
 
--   Update flowchart.md [\#214](https://github.com/knsv/mermaid/pull/214) ([orschiro](https://github.com/orschiro))
--   Default style when using the CLI [\#205](https://github.com/knsv/mermaid/pull/205) ([gillesdemey](https://github.com/gillesdemey))
--   Gantt chart - add minutes and seconds durations [\#198](https://github.com/knsv/mermaid/pull/198) ([dbrans](https://github.com/dbrans))
--   Using QUnit for AMD testing [\#190](https://github.com/knsv/mermaid/pull/190) ([bollwyvl](https://github.com/bollwyvl))
--   Update phantomscript.js [\#182](https://github.com/knsv/mermaid/pull/182) ([phairow](https://github.com/phairow))
+- Update flowchart.md [\#214](https://github.com/knsv/mermaid/pull/214) ([orschiro](https://github.com/orschiro))
+- Default style when using the CLI [\#205](https://github.com/knsv/mermaid/pull/205) ([gillesdemey](https://github.com/gillesdemey))
+- Gantt chart - add minutes and seconds durations [\#198](https://github.com/knsv/mermaid/pull/198) ([dbrans](https://github.com/dbrans))
+- Using QUnit for AMD testing [\#190](https://github.com/knsv/mermaid/pull/190) ([bollwyvl](https://github.com/bollwyvl))
+- Update phantomscript.js [\#182](https://github.com/knsv/mermaid/pull/182) ([phairow](https://github.com/phairow))
 
 ## [0.5.1](https://github.com/knsv/mermaid/tree/0.5.1) (2015-06-21)
 
@@ -593,31 +593,31 @@
 
 **Closed issues:**
 
--   Live editor is broken [\#173](https://github.com/knsv/mermaid/issues/173)
--   0.5.0 no longer respects custom date definitions in Gantt diagrams [\#171](https://github.com/knsv/mermaid/issues/171)
--   Drop label character restrictions [\#162](https://github.com/knsv/mermaid/issues/162)
--   can't nest subgraphs in flowchart [\#161](https://github.com/knsv/mermaid/issues/161)
--   Unable to generate gantt diagram with mermaid CLI [\#158](https://github.com/knsv/mermaid/issues/158)
--   Inline css by "mermaid" [\#157](https://github.com/knsv/mermaid/issues/157)
--   Finite State Machine Diagram [\#152](https://github.com/knsv/mermaid/issues/152)
--   How to center align gantt diagram [\#150](https://github.com/knsv/mermaid/issues/150)
--   Security concern regarding class definition [\#148](https://github.com/knsv/mermaid/issues/148)
--   File Extension [\#147](https://github.com/knsv/mermaid/issues/147)
--   To SVG Export [\#146](https://github.com/knsv/mermaid/issues/146)
--   `setTimeout` with clusters problematic with programmatic edits and no callback [\#133](https://github.com/knsv/mermaid/issues/133)
--   Possibility to set the width of the generated flowchart [\#129](https://github.com/knsv/mermaid/issues/129)
--   flowchart - styling of edges via css overrides specific styles set in the graph definition [\#128](https://github.com/knsv/mermaid/issues/128)
--   module.exports.cloneCssStyles\(\) in combination with Angularjs breaks display in Chrome and IE [\#126](https://github.com/knsv/mermaid/issues/126)
--   Gantt - suitable xAxis for longer project [\#125](https://github.com/knsv/mermaid/issues/125)
--   Mix horizontal and vertical graph [\#68](https://github.com/knsv/mermaid/issues/68)
--   How to get started with this project ? [\#64](https://github.com/knsv/mermaid/issues/64)
--   Special characters break parsing [\#54](https://github.com/knsv/mermaid/issues/54)
--   Responsive graph layout for mobile viewers [\#51](https://github.com/knsv/mermaid/issues/51)
--   Styling connector lines [\#31](https://github.com/knsv/mermaid/issues/31)
+- Live editor is broken [\#173](https://github.com/knsv/mermaid/issues/173)
+- 0.5.0 no longer respects custom date definitions in Gantt diagrams [\#171](https://github.com/knsv/mermaid/issues/171)
+- Drop label character restrictions [\#162](https://github.com/knsv/mermaid/issues/162)
+- can't nest subgraphs in flowchart [\#161](https://github.com/knsv/mermaid/issues/161)
+- Unable to generate gantt diagram with mermaid CLI [\#158](https://github.com/knsv/mermaid/issues/158)
+- Inline css by "mermaid" [\#157](https://github.com/knsv/mermaid/issues/157)
+- Finite State Machine Diagram [\#152](https://github.com/knsv/mermaid/issues/152)
+- How to center align gantt diagram [\#150](https://github.com/knsv/mermaid/issues/150)
+- Security concern regarding class definition [\#148](https://github.com/knsv/mermaid/issues/148)
+- File Extension [\#147](https://github.com/knsv/mermaid/issues/147)
+- To SVG Export [\#146](https://github.com/knsv/mermaid/issues/146)
+- `setTimeout` with clusters problematic with programmatic edits and no callback [\#133](https://github.com/knsv/mermaid/issues/133)
+- Possibility to set the width of the generated flowchart [\#129](https://github.com/knsv/mermaid/issues/129)
+- flowchart - styling of edges via css overrides specific styles set in the graph definition [\#128](https://github.com/knsv/mermaid/issues/128)
+- module.exports.cloneCssStyles\(\) in combination with Angularjs breaks display in Chrome and IE [\#126](https://github.com/knsv/mermaid/issues/126)
+- Gantt - suitable xAxis for longer project [\#125](https://github.com/knsv/mermaid/issues/125)
+- Mix horizontal and vertical graph [\#68](https://github.com/knsv/mermaid/issues/68)
+- How to get started with this project ? [\#64](https://github.com/knsv/mermaid/issues/64)
+- Special characters break parsing [\#54](https://github.com/knsv/mermaid/issues/54)
+- Responsive graph layout for mobile viewers [\#51](https://github.com/knsv/mermaid/issues/51)
+- Styling connector lines [\#31](https://github.com/knsv/mermaid/issues/31)
 
 **Merged pull requests:**
 
--   Remove moot `version` property from bower.json [\#172](https://github.com/knsv/mermaid/pull/172) ([kkirsche](https://github.com/kkirsche))
+- Remove moot `version` property from bower.json [\#172](https://github.com/knsv/mermaid/pull/172) ([kkirsche](https://github.com/kkirsche))
 
 ## [0.5.0](https://github.com/knsv/mermaid/tree/0.5.0) (2015-06-07)
 
@@ -625,34 +625,34 @@
 
 **Closed issues:**
 
--   it can not work where graph TD contains chinese character [\#166](https://github.com/knsv/mermaid/issues/166)
--   Broken Examples [\#163](https://github.com/knsv/mermaid/issues/163)
--   uglifyjs wanrings which means we can improve the code [\#156](https://github.com/knsv/mermaid/issues/156)
--   New\(er\) features unavailable in downloadable js files? [\#151](https://github.com/knsv/mermaid/issues/151)
--   Add gh-gapes link to description [\#143](https://github.com/knsv/mermaid/issues/143)
--   Some examples not displayed on Firefox 36.0.1 [\#138](https://github.com/knsv/mermaid/issues/138)
--   tags ending in a "v" don't render [\#132](https://github.com/knsv/mermaid/issues/132)
--   Links in flowchart [\#131](https://github.com/knsv/mermaid/issues/131)
--   Using the library for iOS development [\#130](https://github.com/knsv/mermaid/issues/130)
--   Add a css file, mermaid.css, with default styling [\#122](https://github.com/knsv/mermaid/issues/122)
--   Add capability for gantt diagrams [\#118](https://github.com/knsv/mermaid/issues/118)
--   lower case v causes error in the parser [\#108](https://github.com/knsv/mermaid/issues/108)
--   Label's css conflict with boostrap's .label [\#67](https://github.com/knsv/mermaid/issues/67)
--   TypeError: Cannot read property 'layout' of undefined [\#37](https://github.com/knsv/mermaid/issues/37)
--   software architecture diagram [\#36](https://github.com/knsv/mermaid/issues/36)
--   Support for bar charts and pie diagrams [\#22](https://github.com/knsv/mermaid/issues/22)
+- it can not work where graph TD contains chinese character [\#166](https://github.com/knsv/mermaid/issues/166)
+- Broken Examples [\#163](https://github.com/knsv/mermaid/issues/163)
+- uglifyjs wanrings which means we can improve the code [\#156](https://github.com/knsv/mermaid/issues/156)
+- New\(er\) features unavailable in downloadable js files? [\#151](https://github.com/knsv/mermaid/issues/151)
+- Add gh-gapes link to description [\#143](https://github.com/knsv/mermaid/issues/143)
+- Some examples not displayed on Firefox 36.0.1 [\#138](https://github.com/knsv/mermaid/issues/138)
+- tags ending in a "v" don't render [\#132](https://github.com/knsv/mermaid/issues/132)
+- Links in flowchart [\#131](https://github.com/knsv/mermaid/issues/131)
+- Using the library for iOS development [\#130](https://github.com/knsv/mermaid/issues/130)
+- Add a css file, mermaid.css, with default styling [\#122](https://github.com/knsv/mermaid/issues/122)
+- Add capability for gantt diagrams [\#118](https://github.com/knsv/mermaid/issues/118)
+- lower case v causes error in the parser [\#108](https://github.com/knsv/mermaid/issues/108)
+- Label's css conflict with boostrap's .label [\#67](https://github.com/knsv/mermaid/issues/67)
+- TypeError: Cannot read property 'layout' of undefined [\#37](https://github.com/knsv/mermaid/issues/37)
+- software architecture diagram [\#36](https://github.com/knsv/mermaid/issues/36)
+- Support for bar charts and pie diagrams [\#22](https://github.com/knsv/mermaid/issues/22)
 
 **Merged pull requests:**
 
--   Dev 0.5.0 [\#168](https://github.com/knsv/mermaid/pull/168) ([knsv](https://github.com/knsv))
--   Fix spacing [\#164](https://github.com/knsv/mermaid/pull/164) ([rhcarvalho](https://github.com/rhcarvalho))
--   Fixing typo: "Think" -\> "Thick" [\#160](https://github.com/knsv/mermaid/pull/160) ([it0a](https://github.com/it0a))
--   IE, local html, cssRules access is denied [\#155](https://github.com/knsv/mermaid/pull/155) ([tylerlong](https://github.com/tylerlong))
--   Add automatically generated change log file. [\#139](https://github.com/knsv/mermaid/pull/139) ([skywinder](https://github.com/skywinder))
--   Adding init argument to the global API [\#137](https://github.com/knsv/mermaid/pull/137) ([bollwyvl](https://github.com/bollwyvl))
--   Add description of manual calling of init [\#136](https://github.com/knsv/mermaid/pull/136) ([bollwyvl](https://github.com/bollwyvl))
--   Allow other forms of node selection for init\(\) [\#135](https://github.com/knsv/mermaid/pull/135) ([bollwyvl](https://github.com/bollwyvl))
--   Use a library-level variable for assigning ids [\#134](https://github.com/knsv/mermaid/pull/134) ([bollwyvl](https://github.com/bollwyvl))
+- Dev 0.5.0 [\#168](https://github.com/knsv/mermaid/pull/168) ([knsv](https://github.com/knsv))
+- Fix spacing [\#164](https://github.com/knsv/mermaid/pull/164) ([rhcarvalho](https://github.com/rhcarvalho))
+- Fixing typo: "Think" -\> "Thick" [\#160](https://github.com/knsv/mermaid/pull/160) ([it0a](https://github.com/it0a))
+- IE, local html, cssRules access is denied [\#155](https://github.com/knsv/mermaid/pull/155) ([tylerlong](https://github.com/tylerlong))
+- Add automatically generated change log file. [\#139](https://github.com/knsv/mermaid/pull/139) ([skywinder](https://github.com/skywinder))
+- Adding init argument to the global API [\#137](https://github.com/knsv/mermaid/pull/137) ([bollwyvl](https://github.com/bollwyvl))
+- Add description of manual calling of init [\#136](https://github.com/knsv/mermaid/pull/136) ([bollwyvl](https://github.com/bollwyvl))
+- Allow other forms of node selection for init\(\) [\#135](https://github.com/knsv/mermaid/pull/135) ([bollwyvl](https://github.com/bollwyvl))
+- Use a library-level variable for assigning ids [\#134](https://github.com/knsv/mermaid/pull/134) ([bollwyvl](https://github.com/bollwyvl))
 
 ## [0.4.0](https://github.com/knsv/mermaid/tree/0.4.0) (2015-03-01)
 
@@ -660,12 +660,12 @@
 
 **Closed issues:**
 
--   subgraph background is black in rendered flowchart PNG via CLI [\#121](https://github.com/knsv/mermaid/issues/121)
--   Integrate editor at https://github.com/naseer/mermaid-webapp [\#110](https://github.com/knsv/mermaid/issues/110)
--   Internet Explorer Support [\#99](https://github.com/knsv/mermaid/issues/99)
--   Assymetric shapes not documented [\#82](https://github.com/knsv/mermaid/issues/82)
--   NoModificationAllowedError [\#23](https://github.com/knsv/mermaid/issues/23)
--   Improve arrows [\#3](https://github.com/knsv/mermaid/issues/3)
+- subgraph background is black in rendered flowchart PNG via CLI [\#121](https://github.com/knsv/mermaid/issues/121)
+- Integrate editor at https://github.com/naseer/mermaid-webapp [\#110](https://github.com/knsv/mermaid/issues/110)
+- Internet Explorer Support [\#99](https://github.com/knsv/mermaid/issues/99)
+- Assymetric shapes not documented [\#82](https://github.com/knsv/mermaid/issues/82)
+- NoModificationAllowedError [\#23](https://github.com/knsv/mermaid/issues/23)
+- Improve arrows [\#3](https://github.com/knsv/mermaid/issues/3)
 
 ## [0.3.5](https://github.com/knsv/mermaid/tree/0.3.5) (2015-02-15)
 
@@ -677,27 +677,27 @@
 
 **Closed issues:**
 
--   Subgraph syntax bug? [\#120](https://github.com/knsv/mermaid/issues/120)
--   Live editor [\#115](https://github.com/knsv/mermaid/issues/115)
--   Error in "Basic Syntax" wiki page [\#113](https://github.com/knsv/mermaid/issues/113)
--   semicolons, anyone? [\#111](https://github.com/knsv/mermaid/issues/111)
--   undefined `sequenceConfig` fails [\#109](https://github.com/knsv/mermaid/issues/109)
--   Sequence Diagrams: Show Actors below as well [\#106](https://github.com/knsv/mermaid/issues/106)
--   Allow overriding sequence diagram configuration \(SVG properties\) [\#103](https://github.com/knsv/mermaid/issues/103)
--   Error when rendering A-- This is the text -- B [\#102](https://github.com/knsv/mermaid/issues/102)
--   Clipping in documentation [\#97](https://github.com/knsv/mermaid/issues/97)
--   isolate class styling to the svg container [\#92](https://github.com/knsv/mermaid/issues/92)
--   Apply styling from css when using the CLI utility [\#85](https://github.com/knsv/mermaid/issues/85)
--   Generated SVG works poorly outside web browsers [\#58](https://github.com/knsv/mermaid/issues/58)
--   Make the new graph declaration more visual [\#40](https://github.com/knsv/mermaid/issues/40)
--   Generating SVG text blob for use in Node [\#2](https://github.com/knsv/mermaid/issues/2)
+- Subgraph syntax bug? [\#120](https://github.com/knsv/mermaid/issues/120)
+- Live editor [\#115](https://github.com/knsv/mermaid/issues/115)
+- Error in "Basic Syntax" wiki page [\#113](https://github.com/knsv/mermaid/issues/113)
+- semicolons, anyone? [\#111](https://github.com/knsv/mermaid/issues/111)
+- undefined `sequenceConfig` fails [\#109](https://github.com/knsv/mermaid/issues/109)
+- Sequence Diagrams: Show Actors below as well [\#106](https://github.com/knsv/mermaid/issues/106)
+- Allow overriding sequence diagram configuration \(SVG properties\) [\#103](https://github.com/knsv/mermaid/issues/103)
+- Error when rendering A-- This is the text -- B [\#102](https://github.com/knsv/mermaid/issues/102)
+- Clipping in documentation [\#97](https://github.com/knsv/mermaid/issues/97)
+- isolate class styling to the svg container [\#92](https://github.com/knsv/mermaid/issues/92)
+- Apply styling from css when using the CLI utility [\#85](https://github.com/knsv/mermaid/issues/85)
+- Generated SVG works poorly outside web browsers [\#58](https://github.com/knsv/mermaid/issues/58)
+- Make the new graph declaration more visual [\#40](https://github.com/knsv/mermaid/issues/40)
+- Generating SVG text blob for use in Node [\#2](https://github.com/knsv/mermaid/issues/2)
 
 **Merged pull requests:**
 
--   Add live editor [\#119](https://github.com/knsv/mermaid/pull/119) ([naseer](https://github.com/naseer))
--   Adds CSS option to the CLI [\#116](https://github.com/knsv/mermaid/pull/116) ([fardog](https://github.com/fardog))
--   Update flowchart.md in response Issue \#113 [\#114](https://github.com/knsv/mermaid/pull/114) ([vijay40](https://github.com/vijay40))
--   Ignore all files except the license and dist/ folder when installing with Bower. [\#112](https://github.com/knsv/mermaid/pull/112) ([jasonbellamy](https://github.com/jasonbellamy))
+- Add live editor [\#119](https://github.com/knsv/mermaid/pull/119) ([naseer](https://github.com/naseer))
+- Adds CSS option to the CLI [\#116](https://github.com/knsv/mermaid/pull/116) ([fardog](https://github.com/fardog))
+- Update flowchart.md in response Issue \#113 [\#114](https://github.com/knsv/mermaid/pull/114) ([vijay40](https://github.com/vijay40))
+- Ignore all files except the license and dist/ folder when installing with Bower. [\#112](https://github.com/knsv/mermaid/pull/112) ([jasonbellamy](https://github.com/jasonbellamy))
 
 ## [0.3.3](https://github.com/knsv/mermaid/tree/0.3.3) (2015-01-25)
 
@@ -705,17 +705,17 @@
 
 **Closed issues:**
 
--   Missing arrows in sequence diagram [\#98](https://github.com/knsv/mermaid/issues/98)
--   Error with \>9 linkStyles [\#95](https://github.com/knsv/mermaid/issues/95)
--   Support for dotted links [\#26](https://github.com/knsv/mermaid/issues/26)
+- Missing arrows in sequence diagram [\#98](https://github.com/knsv/mermaid/issues/98)
+- Error with \>9 linkStyles [\#95](https://github.com/knsv/mermaid/issues/95)
+- Support for dotted links [\#26](https://github.com/knsv/mermaid/issues/26)
 
 **Merged pull requests:**
 
--   Require d3 directly to better support Node usage [\#107](https://github.com/knsv/mermaid/pull/107) ([markdalgleish](https://github.com/markdalgleish))
--   update doc with -c option [\#105](https://github.com/knsv/mermaid/pull/105) ([jjmr](https://github.com/jjmr))
--   Add new parameter to the console client to override the svg configuration in sequence diagrams [\#104](https://github.com/knsv/mermaid/pull/104) ([jjmr](https://github.com/jjmr))
--   Text based labels, new shape [\#101](https://github.com/knsv/mermaid/pull/101) ([bjowes](https://github.com/bjowes))
--   fix html tags in example usage [\#100](https://github.com/knsv/mermaid/pull/100) ([deiwin](https://github.com/deiwin))
+- Require d3 directly to better support Node usage [\#107](https://github.com/knsv/mermaid/pull/107) ([markdalgleish](https://github.com/markdalgleish))
+- update doc with -c option [\#105](https://github.com/knsv/mermaid/pull/105) ([jjmr](https://github.com/jjmr))
+- Add new parameter to the console client to override the svg configuration in sequence diagrams [\#104](https://github.com/knsv/mermaid/pull/104) ([jjmr](https://github.com/jjmr))
+- Text based labels, new shape [\#101](https://github.com/knsv/mermaid/pull/101) ([bjowes](https://github.com/bjowes))
+- fix html tags in example usage [\#100](https://github.com/knsv/mermaid/pull/100) ([deiwin](https://github.com/deiwin))
 
 ## [0.3.2](https://github.com/knsv/mermaid/tree/0.3.2) (2015-01-11)
 
@@ -723,19 +723,19 @@
 
 **Closed issues:**
 
--   disable auto render [\#91](https://github.com/knsv/mermaid/issues/91)
--   Tidy breaks mermaid \(linebreaks in \<div\>\) [\#87](https://github.com/knsv/mermaid/issues/87)
--   Bug: \<br\> being rendered as text in node [\#73](https://github.com/knsv/mermaid/issues/73)
--   Graph edges appear to render outside of the canvas [\#70](https://github.com/knsv/mermaid/issues/70)
--   Make link text look like it is on the line [\#53](https://github.com/knsv/mermaid/issues/53)
+- disable auto render [\#91](https://github.com/knsv/mermaid/issues/91)
+- Tidy breaks mermaid \(linebreaks in \<div\>\) [\#87](https://github.com/knsv/mermaid/issues/87)
+- Bug: \<br\> being rendered as text in node [\#73](https://github.com/knsv/mermaid/issues/73)
+- Graph edges appear to render outside of the canvas [\#70](https://github.com/knsv/mermaid/issues/70)
+- Make link text look like it is on the line [\#53](https://github.com/knsv/mermaid/issues/53)
 
 **Merged pull requests:**
 
--   Merge pull request \#1 from knsv/master [\#96](https://github.com/knsv/mermaid/pull/96) ([gkchic](https://github.com/gkchic))
--   Removed duplicated section in flowchart docs [\#94](https://github.com/knsv/mermaid/pull/94) ([kaime](https://github.com/kaime))
--   Grammar changes to sequence page [\#93](https://github.com/knsv/mermaid/pull/93) ([gkchic](https://github.com/gkchic))
--   Github buttons [\#89](https://github.com/knsv/mermaid/pull/89) ([gkchic](https://github.com/gkchic))
--   Template change [\#88](https://github.com/knsv/mermaid/pull/88) ([gkchic](https://github.com/gkchic))
+- Merge pull request \#1 from knsv/master [\#96](https://github.com/knsv/mermaid/pull/96) ([gkchic](https://github.com/gkchic))
+- Removed duplicated section in flowchart docs [\#94](https://github.com/knsv/mermaid/pull/94) ([kaime](https://github.com/kaime))
+- Grammar changes to sequence page [\#93](https://github.com/knsv/mermaid/pull/93) ([gkchic](https://github.com/gkchic))
+- Github buttons [\#89](https://github.com/knsv/mermaid/pull/89) ([gkchic](https://github.com/gkchic))
+- Template change [\#88](https://github.com/knsv/mermaid/pull/88) ([gkchic](https://github.com/gkchic))
 
 ## [0.3.1](https://github.com/knsv/mermaid/tree/0.3.1) (2015-01-05)
 
@@ -743,20 +743,20 @@
 
 **Closed issues:**
 
--   Non ASCII chars in labels [\#84](https://github.com/knsv/mermaid/issues/84)
--   'undefined' titles of Quicklinks on the usage page [\#80](https://github.com/knsv/mermaid/issues/80)
--   \[cli\] Enhancement proposal: not fail --version / --help if phantomjs isn't installed [\#71](https://github.com/knsv/mermaid/issues/71)
--   Neural Networks [\#39](https://github.com/knsv/mermaid/issues/39)
--   Support for sequence diagrams [\#16](https://github.com/knsv/mermaid/issues/16)
--   Client utility for mermaid [\#6](https://github.com/knsv/mermaid/issues/6)
+- Non ASCII chars in labels [\#84](https://github.com/knsv/mermaid/issues/84)
+- 'undefined' titles of Quicklinks on the usage page [\#80](https://github.com/knsv/mermaid/issues/80)
+- \[cli\] Enhancement proposal: not fail --version / --help if phantomjs isn't installed [\#71](https://github.com/knsv/mermaid/issues/71)
+- Neural Networks [\#39](https://github.com/knsv/mermaid/issues/39)
+- Support for sequence diagrams [\#16](https://github.com/knsv/mermaid/issues/16)
+- Client utility for mermaid [\#6](https://github.com/knsv/mermaid/issues/6)
 
 **Merged pull requests:**
 
--   Flowchart doc: Text in the circle now in a circle [\#81](https://github.com/knsv/mermaid/pull/81) ([Grahack](https://github.com/Grahack))
--   Fix for issue \#73 [\#79](https://github.com/knsv/mermaid/pull/79) ([it0a](https://github.com/it0a))
--   Ink template [\#78](https://github.com/knsv/mermaid/pull/78) ([gkchic](https://github.com/gkchic))
--   Show help and version even if phantom isn't present. Fixes \#71 [\#75](https://github.com/knsv/mermaid/pull/75) ([fardog](https://github.com/fardog))
--   Add apostrophe & 'and' [\#72](https://github.com/knsv/mermaid/pull/72) ([sudodoki](https://github.com/sudodoki))
+- Flowchart doc: Text in the circle now in a circle [\#81](https://github.com/knsv/mermaid/pull/81) ([Grahack](https://github.com/Grahack))
+- Fix for issue \#73 [\#79](https://github.com/knsv/mermaid/pull/79) ([it0a](https://github.com/it0a))
+- Ink template [\#78](https://github.com/knsv/mermaid/pull/78) ([gkchic](https://github.com/gkchic))
+- Show help and version even if phantom isn't present. Fixes \#71 [\#75](https://github.com/knsv/mermaid/pull/75) ([fardog](https://github.com/fardog))
+- Add apostrophe & 'and' [\#72](https://github.com/knsv/mermaid/pull/72) ([sudodoki](https://github.com/sudodoki))
 
 ## [0.3.0](https://github.com/knsv/mermaid/tree/0.3.0) (2014-12-22)
 
@@ -764,18 +764,18 @@
 
 **Closed issues:**
 
--   Consider shipping a standalone executable [\#65](https://github.com/knsv/mermaid/issues/65)
--   Trailing whitespace at the end of lines is not ignored [\#55](https://github.com/knsv/mermaid/issues/55)
--   How do I do comments? [\#47](https://github.com/knsv/mermaid/issues/47)
--   This characters failed the lexical parsing [\#46](https://github.com/knsv/mermaid/issues/46)
--   tutorial for creating new type of graph/layout [\#44](https://github.com/knsv/mermaid/issues/44)
--   Improve readability with new line as terminator and whitespace [\#38](https://github.com/knsv/mermaid/issues/38)
--   Use classes instead of inline style for easy styling [\#24](https://github.com/knsv/mermaid/issues/24)
+- Consider shipping a standalone executable [\#65](https://github.com/knsv/mermaid/issues/65)
+- Trailing whitespace at the end of lines is not ignored [\#55](https://github.com/knsv/mermaid/issues/55)
+- How do I do comments? [\#47](https://github.com/knsv/mermaid/issues/47)
+- This characters failed the lexical parsing [\#46](https://github.com/knsv/mermaid/issues/46)
+- tutorial for creating new type of graph/layout [\#44](https://github.com/knsv/mermaid/issues/44)
+- Improve readability with new line as terminator and whitespace [\#38](https://github.com/knsv/mermaid/issues/38)
+- Use classes instead of inline style for easy styling [\#24](https://github.com/knsv/mermaid/issues/24)
 
 **Merged pull requests:**
 
--   Adds Command Line Interface for generating PNGs from mermaid description files [\#69](https://github.com/knsv/mermaid/pull/69) ([fardog](https://github.com/fardog))
--   Allow special symbols for direction along with acronyms [\#66](https://github.com/knsv/mermaid/pull/66) ([vijay40](https://github.com/vijay40))
+- Adds Command Line Interface for generating PNGs from mermaid description files [\#69](https://github.com/knsv/mermaid/pull/69) ([fardog](https://github.com/fardog))
+- Allow special symbols for direction along with acronyms [\#66](https://github.com/knsv/mermaid/pull/66) ([vijay40](https://github.com/vijay40))
 
 ## [0.2.16](https://github.com/knsv/mermaid/tree/0.2.16) (2014-12-15)
 
@@ -783,23 +783,23 @@
 
 **Closed issues:**
 
--   Mermaid not rendering properly on Wordpress pages [\#59](https://github.com/knsv/mermaid/issues/59)
--   Improve example page with live demo [\#52](https://github.com/knsv/mermaid/issues/52)
--   Create image file via CLI? [\#48](https://github.com/knsv/mermaid/issues/48)
--   Does not render upon AngularJS Updates [\#45](https://github.com/knsv/mermaid/issues/45)
--   Download link in README.MD doesn't work. [\#42](https://github.com/knsv/mermaid/issues/42)
--   linkStyle usage is not obvious [\#41](https://github.com/knsv/mermaid/issues/41)
--   Move \*.spec.js in src/ to test/ [\#35](https://github.com/knsv/mermaid/issues/35)
--   Lines routed outside visible area [\#19](https://github.com/knsv/mermaid/issues/19)
+- Mermaid not rendering properly on Wordpress pages [\#59](https://github.com/knsv/mermaid/issues/59)
+- Improve example page with live demo [\#52](https://github.com/knsv/mermaid/issues/52)
+- Create image file via CLI? [\#48](https://github.com/knsv/mermaid/issues/48)
+- Does not render upon AngularJS Updates [\#45](https://github.com/knsv/mermaid/issues/45)
+- Download link in README.MD doesn't work. [\#42](https://github.com/knsv/mermaid/issues/42)
+- linkStyle usage is not obvious [\#41](https://github.com/knsv/mermaid/issues/41)
+- Move \*.spec.js in src/ to test/ [\#35](https://github.com/knsv/mermaid/issues/35)
+- Lines routed outside visible area [\#19](https://github.com/knsv/mermaid/issues/19)
 
 **Merged pull requests:**
 
--   New grammar will allow statements ending without semicolon as disccused in Issue \#38 [\#63](https://github.com/knsv/mermaid/pull/63) ([vijay40](https://github.com/vijay40))
--   Class based styling [\#62](https://github.com/knsv/mermaid/pull/62) ([bjowes](https://github.com/bjowes))
--   Fix typos [\#60](https://github.com/knsv/mermaid/pull/60) ([sublimino](https://github.com/sublimino))
--   Included .DS_Store in gitignore [\#57](https://github.com/knsv/mermaid/pull/57) ([alvynmcq](https://github.com/alvynmcq))
--   Improves readablity discussed in issue \#38 [\#56](https://github.com/knsv/mermaid/pull/56) ([vijay40](https://github.com/vijay40))
--   Added a linting task for gulp [\#43](https://github.com/knsv/mermaid/pull/43) ([serv](https://github.com/serv))
+- New grammar will allow statements ending without semicolon as disccused in Issue \#38 [\#63](https://github.com/knsv/mermaid/pull/63) ([vijay40](https://github.com/vijay40))
+- Class based styling [\#62](https://github.com/knsv/mermaid/pull/62) ([bjowes](https://github.com/bjowes))
+- Fix typos [\#60](https://github.com/knsv/mermaid/pull/60) ([sublimino](https://github.com/sublimino))
+- Included .DS_Store in gitignore [\#57](https://github.com/knsv/mermaid/pull/57) ([alvynmcq](https://github.com/alvynmcq))
+- Improves readablity discussed in issue \#38 [\#56](https://github.com/knsv/mermaid/pull/56) ([vijay40](https://github.com/vijay40))
+- Added a linting task for gulp [\#43](https://github.com/knsv/mermaid/pull/43) ([serv](https://github.com/serv))
 
 ## [0.2.15](https://github.com/knsv/mermaid/tree/0.2.15) (2014-12-05)
 
@@ -807,16 +807,16 @@
 
 **Closed issues:**
 
--   Question marks don't render properly with /dist/mermaid.full.min.js [\#30](https://github.com/knsv/mermaid/issues/30)
--   Error with some characters [\#25](https://github.com/knsv/mermaid/issues/25)
--   Provide parse function in browser widthout `require`? [\#21](https://github.com/knsv/mermaid/issues/21)
--   Better label text support [\#18](https://github.com/knsv/mermaid/issues/18)
--   Cap-cased words break parser [\#8](https://github.com/knsv/mermaid/issues/8)
+- Question marks don't render properly with /dist/mermaid.full.min.js [\#30](https://github.com/knsv/mermaid/issues/30)
+- Error with some characters [\#25](https://github.com/knsv/mermaid/issues/25)
+- Provide parse function in browser widthout `require`? [\#21](https://github.com/knsv/mermaid/issues/21)
+- Better label text support [\#18](https://github.com/knsv/mermaid/issues/18)
+- Cap-cased words break parser [\#8](https://github.com/knsv/mermaid/issues/8)
 
 **Merged pull requests:**
 
--   Include bower_components/ to .gitignore [\#33](https://github.com/knsv/mermaid/pull/33) ([serv](https://github.com/serv))
--   Fixed reference to Git repo. [\#32](https://github.com/knsv/mermaid/pull/32) ([guyellis](https://github.com/guyellis))
+- Include bower_components/ to .gitignore [\#33](https://github.com/knsv/mermaid/pull/33) ([serv](https://github.com/serv))
+- Fixed reference to Git repo. [\#32](https://github.com/knsv/mermaid/pull/32) ([guyellis](https://github.com/guyellis))
 
 ## [0.2.14](https://github.com/knsv/mermaid/tree/0.2.14) (2014-12-03)
 
@@ -828,13 +828,13 @@
 
 **Closed issues:**
 
--   modified init to be applied more than once [\#29](https://github.com/knsv/mermaid/issues/29)
--   Wanted to know build process for the project. [\#28](https://github.com/knsv/mermaid/issues/28)
--   Container support [\#27](https://github.com/knsv/mermaid/issues/27)
--   can not support Chinese description [\#20](https://github.com/knsv/mermaid/issues/20)
--   Node Label text mistaken for Direction [\#17](https://github.com/knsv/mermaid/issues/17)
--   Support unicode chars in labels [\#9](https://github.com/knsv/mermaid/issues/9)
--   Publish to NPM [\#7](https://github.com/knsv/mermaid/issues/7)
+- modified init to be applied more than once [\#29](https://github.com/knsv/mermaid/issues/29)
+- Wanted to know build process for the project. [\#28](https://github.com/knsv/mermaid/issues/28)
+- Container support [\#27](https://github.com/knsv/mermaid/issues/27)
+- can not support Chinese description [\#20](https://github.com/knsv/mermaid/issues/20)
+- Node Label text mistaken for Direction [\#17](https://github.com/knsv/mermaid/issues/17)
+- Support unicode chars in labels [\#9](https://github.com/knsv/mermaid/issues/9)
+- Publish to NPM [\#7](https://github.com/knsv/mermaid/issues/7)
 
 ## [0.2.10](https://github.com/knsv/mermaid/tree/0.2.10) (2014-12-01)
 
@@ -846,12 +846,12 @@
 
 **Closed issues:**
 
--   Add link to jsbin playground to README [\#11](https://github.com/knsv/mermaid/issues/11)
--   What are the requirements ? [\#10](https://github.com/knsv/mermaid/issues/10)
+- Add link to jsbin playground to README [\#11](https://github.com/knsv/mermaid/issues/11)
+- What are the requirements ? [\#10](https://github.com/knsv/mermaid/issues/10)
 
 **Merged pull requests:**
 
--   Allow unicode chars in labels [\#13](https://github.com/knsv/mermaid/pull/13) ([codebeige](https://github.com/codebeige))
+- Allow unicode chars in labels [\#13](https://github.com/knsv/mermaid/pull/13) ([codebeige](https://github.com/codebeige))
 
 ## [0.2.8](https://github.com/knsv/mermaid/tree/0.2.8) (2014-12-01)
 
@@ -863,7 +863,7 @@
 
 **Closed issues:**
 
--   Provide parser as separate module [\#4](https://github.com/knsv/mermaid/issues/4)
+- Provide parser as separate module [\#4](https://github.com/knsv/mermaid/issues/4)
 
 ## [0.2.6](https://github.com/knsv/mermaid/tree/0.2.6) (2014-11-27)
 
@@ -875,7 +875,7 @@
 
 **Merged pull requests:**
 
--   Added new shapes! [\#1](https://github.com/knsv/mermaid/pull/1) ([bjowes](https://github.com/bjowes))
+- Added new shapes! [\#1](https://github.com/knsv/mermaid/pull/1) ([bjowes](https://github.com/bjowes))
 
 ## [0.2.4](https://github.com/knsv/mermaid/tree/0.2.4) (2014-11-25)
 
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 9ed0a7edd..fb7f3bf5a 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -7,6 +7,7 @@ So you want to help? That's great!
 Here are a few things to know to get you started on the right path.
 
 ## Development Installation
+
 ```bash
 git clone git@github.com:mermaid-js/mermaid.git
 cd mermaid
@@ -16,11 +17,11 @@ yarn test
 
 ## Committing code
 
-We make all changes via pull requests. As we have many pull requests from developers new to mermaid, the current approach is to have *knsv, Knut Sveidqvist* as a main reviewer of changes and merging pull requests. More precisely like this:
+We make all changes via pull requests. As we have many pull requests from developers new to mermaid, the current approach is to have _knsv, Knut Sveidqvist_ as a main reviewer of changes and merging pull requests. More precisely like this:
 
-* Large changes reviewed by knsv or other developer asked to review by knsv
-* Smaller low-risk changes like dependencies, documentation etc can be merged by active collaborators
-* documentation (updates to the docs folder is also allowed via direct commits)
+- Large changes reviewed by knsv or other developer asked to review by knsv
+- Smaller low-risk changes like dependencies, documentation etc can be merged by active collaborators
+- documentation (updates to the docs folder is also allowed via direct commits)
 
 To commit code, create a branch, let it start with the type like feature or bug followed by the issue number for reference and some describing text.
 
@@ -93,10 +94,11 @@ The rendering tests are very straightforward to create. There is a function imgS
 When running in ci it will take a snapshot of the rendered diagram and compare it with the snapshot from last build and flag for review it if it differs.
 
 This is what a rendering test looks like:
+
 ```javascript
-  it('should render forks and joins', () => {
-    imgSnapshotTest(
-      `
+it('should render forks and joins', () => {
+  imgSnapshotTest(
+    `
     stateDiagram
     state fork_state &lt;&lt;fork&gt;&gt;
       [*] --> fork_state
@@ -109,18 +111,17 @@ This is what a rendering test looks like:
       join_state --> State4
       State4 --> [*]
     `,
-      { logLevel: 0 }
-    );
-    cy.get('svg');
-  });
-  ```
-
+    { logLevel: 0 }
+  );
+  cy.get('svg');
+});
+```
 
 ### **Add documentation for it**
 
 Finally, if it is not in the documentation, no one will know about it and then **no one will use it**. Wouldn't that be sad? With all the effort that was put into the feature?
 
-The docs are located in the docs folder and are ofc written in markdown. Just pick the right section and start typing. If you want to add to the structure as in adding a new section and new file you do that via the _navbar.md.
+The docs are located in the docs folder and are ofc written in markdown. Just pick the right section and start typing. If you want to add to the structure as in adding a new section and new file you do that via the \_navbar.md.
 
 The changes in master is reflected in https://mermaid-js.github.io/mermaid/ once released the updates are committed to https://mermaid-js.github.io/#/
 
@@ -130,5 +131,4 @@ Don't get daunted if it is hard in the beginning. We have a great community with
 
 [Join our slack community if you want closer contact!](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
 
-
 ![A superhero wishing you good luck](https://media.giphy.com/media/l49JHz7kJvl6MCj3G/giphy.gif)
diff --git a/README.md b/README.md
index 43a09f886..f42bf348d 100644
--- a/README.md
+++ b/README.md
@@ -6,8 +6,6 @@ English | [简体中文](./README.zh-CN.md)
 
 :trophy: **Mermaid was nominated and won the [JS Open Source Awards (2019)](https://osawards.com/javascript/2019) in the category "The most exciting use of technology"!!!**
 
-
-
 **Thanks to all involved, people committing pull requests, people answering questions! 🙏**
 
 <a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
@@ -15,14 +13,15 @@ English | [简体中文](./README.zh-CN.md)
 ## About
 
 <!-- <Main description>   -->
-Mermaid is a JavaScript-based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams.  The main purpose of Mermaid is to help documentation catch up with development.
+
+Mermaid is a JavaScript-based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development.
 
 > Doc-Rot is a Catch-22 that Mermaid helps to solve.
 
 Diagramming and documentation costs precious developer time and gets outdated quickly.
 But not having diagrams or docs ruins productivity and hurts organizational learning.<br/>
-Mermaid addresses this problem by enabling users to create easily modifiable diagrams.  It can also be made part of production scripts (and other pieces of code).<br/>
- <br/>
+Mermaid addresses this problem by enabling users to create easily modifiable diagrams. It can also be made part of production scripts (and other pieces of code).<br/>
+<br/>
 
 Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
 [Tutorials](./docs/Tutorials.md) has video tutorials.
@@ -34,21 +33,18 @@ For a more detailed introduction to Mermaid and some of its more basic uses, loo
 
 🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [Changelog](./docs/CHANGELOG.md)
 
-
-
 In our release process we rely heavily on visual regression tests using [applitools](https://applitools.com/). Applitools is a great service which has been easy to use and integrate with our tests.
 
-
 <a href="https://applitools.com/">
 <svg width="170" height="32" viewBox="0 0 170 32" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" maskUnits="userSpaceOnUse" x="27" y="0" width="143" height="32"><path fill-rule="evenodd" clip-rule="evenodd" d="M27.732.227h141.391v31.19H27.733V.227z" fill="#fff"></path></mask><g mask="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M153.851 22.562l1.971-3.298c1.291 1.219 3.837 2.402 5.988 2.402 1.971 0 2.903-.753 2.903-1.829 0-2.832-10.253-.502-10.253-7.313 0-2.904 2.51-5.45 7.099-5.45 2.904 0 5.234 1.004 6.955 2.367l-1.829 3.226c-1.039-1.075-3.011-2.008-5.126-2.008-1.65 0-2.725.717-2.725 1.685 0 2.546 10.289.395 10.289 7.386 0 3.19-2.724 5.52-7.528 5.52-3.012 0-5.916-1.003-7.744-2.688zm-5.7 2.259h4.553V.908h-4.553v23.913zm-6.273-8.676c0-2.689-1.578-5.02-4.446-5.02-2.832 0-4.409 2.331-4.409 5.02 0 2.724 1.577 5.055 4.409 5.055 2.868 0 4.446-2.33 4.446-5.055zm-13.588 0c0-4.912 3.442-9.07 9.142-9.07 5.736 0 9.178 4.158 9.178 9.07 0 4.911-3.442 9.106-9.178 9.106-5.7 0-9.142-4.195-9.142-9.106zm-5.628 0c0-2.689-1.577-5.02-4.445-5.02-2.832 0-4.41 2.331-4.41 5.02 0 2.724 1.578 5.055 4.41 5.055 2.868 0 4.445-2.33 4.445-5.055zm-13.587 0c0-4.912 3.441-9.07 9.142-9.07 5.736 0 9.178 4.158 9.178 9.07 0 4.911-3.442 9.106-9.178 9.106-5.701 0-9.142-4.195-9.142-9.106zm-8.425 4.338v-8.999h-2.868v-3.98h2.868V2.773h4.553v4.733h3.514v3.979h-3.514v7.78c0 1.111.574 1.936 1.578 1.936.681 0 1.326-.251 1.577-.538l.968 3.478c-.681.609-1.9 1.11-3.8 1.11-3.191 0-4.876-1.648-4.876-4.767zm-8.962 4.338h4.553V7.505h-4.553V24.82zm-.43-21.905a2.685 2.685 0 012.688-2.69c1.506 0 2.725 1.184 2.725 2.69a2.724 2.724 0 01-2.725 2.724c-1.47 0-2.688-1.219-2.688-2.724zM84.482 24.82h4.553V.908h-4.553v23.913zm-6.165-8.676c0-2.976-1.793-5.02-4.41-5.02-1.47 0-3.119.825-3.908 1.973v6.094c.753 1.111 2.438 2.008 3.908 2.008 2.617 0 4.41-2.044 4.41-5.055zm-8.318 6.453v8.82h-4.553V7.504H70v2.187c1.327-1.685 3.227-2.618 5.342-2.618 4.446 0 7.672 3.299 7.672 9.07 0 5.773-3.226 9.107-7.672 9.107-2.043 0-3.907-.86-5.342-2.653zm-10.718-6.453c0-2.976-1.793-5.02-4.41-5.02-1.47 0-3.119.825-3.908 1.973v6.094c.753 1.111 2.438 2.008 3.908 2.008 2.617 0 4.41-2.044 4.41-5.055zm-8.318 6.453v8.82H46.41V7.504h4.553v2.187c1.327-1.685 3.227-2.618 5.342-2.618 4.446 0 7.672 3.299 7.672 9.07 0 5.773-3.226 9.107-7.672 9.107-2.043 0-3.908-.86-5.342-2.653zm-11.758-1.936V18.51c-.753-1.004-2.187-1.542-3.657-1.542-1.793 0-3.263.968-3.263 2.617 0 1.65 1.47 2.582 3.263 2.582 1.47 0 2.904-.502 3.657-1.506zm0 4.159v-1.829c-1.183 1.434-3.227 2.259-5.485 2.259-2.761 0-5.988-1.864-5.988-5.736 0-4.087 3.227-5.593 5.988-5.593 2.33 0 4.337.753 5.485 2.115V13.85c0-1.756-1.506-2.904-3.8-2.904-1.829 0-3.55.717-4.984 2.044L28.63 9.8c2.115-1.901 4.84-2.726 7.564-2.726 3.98 0 7.6 1.578 7.6 6.561v11.186h-4.588z" fill="#00A298"></path></g><path fill-rule="evenodd" clip-rule="evenodd" d="M14.934 16.177c0 1.287-.136 2.541-.391 3.752-1.666-1.039-3.87-2.288-6.777-3.752 2.907-1.465 5.11-2.714 6.777-3.753.255 1.211.39 2.466.39 3.753m4.6-7.666V4.486a78.064 78.064 0 01-4.336 3.567c-1.551-2.367-3.533-4.038-6.14-5.207C11.1 4.658 12.504 6.7 13.564 9.262 5.35 15.155 0 16.177 0 16.177s5.35 1.021 13.564 6.915c-1.06 2.563-2.463 4.603-4.507 6.415 2.607-1.169 4.589-2.84 6.14-5.207a77.978 77.978 0 014.336 3.568v-4.025s-.492-.82-2.846-2.492c.6-1.611.93-3.354.93-5.174a14.8 14.8 0 00-.93-5.174c2.354-1.673 2.846-2.492 2.846-2.492" fill="#00A298"></path></svg>
 </a>
 
-
 <!-- </Main description> -->
 
 ## Examples
 
-__The following are some examples of the diagrams, charts and graphs that can be made using Mermaid. Click here to jump into the [text syntax](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference).__
+**The following are some examples of the diagrams, charts and graphs that can be made using Mermaid. Click here to jump into the [text syntax](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference).**
+
 <!-- <Flowchart> -->
 
 ### Flowchart [<a href="https://mermaid-js.github.io/mermaid/#/flowchart">docs</a> - <a href="https://mermaid.live/edit#pako:eNpNkMtqwzAQRX9FzKqFJK7t1km8KDQP6KJQSLOLvZhIY1tgS0GWmgbb_165IaFaiXvOFTPqgGtBkEJR6zOv0Fj2scsU8-ft8I5G5Gw6fe339GN7tnrYaafE45WvRsLW3Ya4bKVWwzVe_xU-FfVsc9hR62rLwvw_2591z7Y3FuUwgYZMg1L4ObrRzMBW1FAGqb8KKtCLGWRq8Ko7CbS0FdJqA2mBdUsTQGf110VxSK1xdJM2EkuDzd2qNQrypQ7s5TQuXcrW-ie5VoUsx9yZ2seVtac2DYIRz0ppK3eccd0ErRTjD1XfyyRIomSBUUzJPMaXOBb8GC4XRfQcFmL-FEYIwzD8AggvcHE">live editor</a>]
@@ -61,6 +57,7 @@ B --> C{Decision}
 C -->|One| D[Result 1]
 C -->|Two| E[Result 2]
 ```
+
 ```mermaid
 flowchart LR
 
@@ -70,7 +67,6 @@ C -->|One| D[Result 1]
 C -->|Two| E[Result 2]
 ```
 
-
 ### Sequence diagram [<a href="https://mermaid-js.github.io/mermaid/#/sequenceDiagram">docs</a> - <a href="https://mermaid.live/edit#pako:eNo9kMluwjAQhl_F-AykQMuSA1WrbuLQQ3v1ZbAnsVXHkzrjVhHi3etQwKfRv4w-z0FqMihL2eF3wqDxyUEdoVHhwTuNk-12RzaU4g29JzHMY2HpV0BE0VO6V8ETtdkGz1Zb1F8qiPyG5LX84mrLAmpwoWNh-5a0pWCiAxUwGBXeiVHEU4oq8V_6AHYUwAu2lLLTjVQ4bc1rT2yleI0IfJG320faZ9ABbk-Jz3hZnFxBduR9L2oiM5Jj2WBswJn8-cMArSRbbFDJMo8GK0ielVThmKOpNcD4bBxTlGUFvsOxhMT02QctS44JL6HzAS-iJzCYOwfJfTscunYd542aQuXqQU_RZ9kyt11ZFIM9rR3btJ9qaorOGQuR7c9mWSznyzXMF7hcLeBusTB6P9usq_ntrDKrm9kc5PF4_AMJE56Z">live editor</a>]
 
 ```
@@ -84,6 +80,7 @@ John-->>Alice: Great!
 John->>Bob: How about you?
 Bob-->>John: Jolly good!
 ```
+
 ```mermaid
 sequenceDiagram
 Alice->>John: Hello John, how are you?
@@ -108,6 +105,7 @@ gantt
     Parallel 3   :         des5, after des3, 1d
     Parallel 4   :         des6, after des4, 1d
 ```
+
 ```mermaid
 gantt
     section Section
@@ -139,6 +137,7 @@ class Class10 {
   size()
 }
 ```
+
 ```mermaid
 classDiagram
 Class01 <|-- AveryLongClass : Cool
@@ -159,6 +158,7 @@ class Class10 {
 ```
 
 ### State diagram [<a href="https://mermaid-js.github.io/mermaid/#/stateDiagram">docs</a> - <a href="https://mermaid.live/edit#pako:eNpdkEFvgzAMhf8K8nEqpYSNthx22Xbcqcexg0sCiZQQlDhIFeK_L8A6TfXp6fOz9ewJGssFVOAJSbwr7ByadGR1n8T6evpO0vQ1uZDSekOrXGFsPqJPO6q-2-imH8f_0TeHXm50lfelsAMjnEHFY6xpMdRAUhhRQxUlFy0GTTXU_RytYeAx-AdXZB1ULWovdoCB7OXWN1CRC-Ju-r3uz6UtchGHJqDbsPygU57iysb2reoWHpyOWBINvsqypb3vFMlw3TfWZF5xiY7keC6zkpUnZIUojwW-FAVvrvn51LLnvOXHQ84Q5nn-AVtLcwk">live editor</a>]
+
 ```
 stateDiagram-v2
 [*] --> Still
@@ -168,6 +168,7 @@ Moving --> Still
 Moving --> Crash
 Crash --> [*]
 ```
+
 ```mermaid
 stateDiagram-v2
 [*] --> Still
@@ -186,6 +187,7 @@ pie
 "Cats" : 85.9
 "Rats" : 15
 ```
+
 ```mermaid
 pie
 "Dogs" : 386
@@ -196,6 +198,7 @@ pie
 ### Git graph [experimental - <a href="https://mermaid.live/edit#pako:eNqNkMFugzAMhl8F-VyVAR1tOW_aA-zKxSSGRCMJCk6lCvHuNZPKZdM0n-zf3_8r8QIqaIIGMqnB8kfEybQ--y4VnLP8-9RF9Mpkmm40hmlnDKmvkPiH_kfS7nFo_VN0FAf6XwocQGgxa_nGsm1bYEOOWmik1dRjGrmF1q-Cpkkj07u2HCI0PY4zHQATh8-7V9BwTPSE3iwOEd1OjQE1iWkBvk_bzQY7s0Sq4Hs7bHqKo8iGeZqbPN_WR7mpSd1RHpvPVhuMbG7XOq_L-oJlRfW5wteq0qorrpe-PBW9Pr8UJcK6rg-BLYPQ">live editor</a>]
 
 ### User Journey diagram [<a href="https://mermaid-js.github.io/mermaid/#/user-journey">docs</a> - <a href="https://mermaid.live/edit#pako:eNplkMFuwjAQRH9l5TMiTVIC-FqqnjhxzWWJN4khsSN7XRSh_HsdKBVt97R6Mzsj-yoqq0hIAXCywRkaSwNxWHNHsB_hYt1ZmwYUfiueKtbWwIcFtjf5zgH2eCZgQgkrCXt64GgMg2fUzkvIn5Xd_V5COtMFvCH_62ht_5yk7MU8sn61HDTfxD8VYiF6cj1qFd94nWkpuKWYKWRcFdUYOi5FaaZoDYNCpnel2Toha-w8LQQGtofRVEKyC_Qw7TQ2DvsfV2dRUTy6Ch6H-UMb7TlGVtbUupl5cF3ELfPgZZLM8rLR3IbjsrJ94rVq0XH7uS2SIis2mOVUrHNc5bmqjul2U2evaa3WL2mGYpqmL2BGiho">live editor</a>]
+
 ```
   journey
     title My working day
@@ -207,6 +210,7 @@ pie
       Go downstairs: 5: Me
       Sit down: 3: Me
 ```
+
 ```mermaid
   journey
     title My working day
@@ -255,6 +259,7 @@ BiRel(SystemAA, SystemE, "Uses")
 Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
 Rel(SystemC, customerA, "Sends e-mails to")
 ```
+
 ```mermaid
 C4Context
 title System Context diagram for Internet Banking System
@@ -316,23 +321,24 @@ Detailed information about how to contribute can be found in the [contribution g
 
 ## Security and safe diagrams
 
-For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitise the incoming code and keep refining the process but  it is hard to guarantee that there are no loop holes.
+For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitise the incoming code and keep refining the process but it is hard to guarantee that there are no loop holes.
 
-As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing javascript in the code from  being executed. This is a great step forward for better security.
+As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing javascript in the code from being executed. This is a great step forward for better security.
 
-*Unfortunately you can not have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code.*
+_Unfortunately you can not have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code._
 
 ## Reporting vulnerabilities
+
 To report a vulnerability, please e-mail security@mermaid.live with a description of the issue, the steps you took to create the issue, affected versions, and if known, mitigations for the issue.
 
 ## Appreciation
+
 A quick note from Knut Sveidqvist:
->*Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!*
->*Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering.*
->*Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017.*
+
+> _Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!_ >_Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering._ >_Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
 >
->*Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!*
+> _Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!_
 
 ---
 
-*Mermaid was created by Knut Sveidqvist for easier documentation.*
+_Mermaid was created by Knut Sveidqvist for easier documentation._
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 2139541c7..c00c539e0 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -13,6 +13,7 @@
 ## 关于 Mermaid
 
 <!-- <Main description>   -->
+
 Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。
 
 > Doc-Rot 是 Mermaid 致力于解决的一个难题。
@@ -31,7 +32,8 @@ Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://merma
 
 ## 示例
 
-__下面是一些可以使用 Mermaid 创建的图表示例。点击 [语法](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference) 查看详情。__
+**下面是一些可以使用 Mermaid 创建的图表示例。点击 [语法](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference) 查看详情。**
+
 <table>
 <!-- <Flowchart> -->
 
@@ -44,6 +46,7 @@ B --> C{Decision}
 C -->|One| D[Result 1]
 C -->|Two| E[Result 2]
 ```
+
 ```mermaid
 flowchart LR
 A[Hard] -->|Text| B(Round)
@@ -65,6 +68,7 @@ John-->>Alice: Great!
 John->>Bob: How about you?
 Bob-->>John: Jolly good!
 ```
+
 ```mermaid
 sequenceDiagram
 Alice->>John: Hello John, how are you?
@@ -89,6 +93,7 @@ gantt
     Parallel 3   :         des5, after des3, 1d
     Parallel 4   :         des6, after des4, 1d
 ```
+
 ```mermaid
 gantt
     section Section
@@ -120,6 +125,7 @@ class Class10 {
   size()
 }
 ```
+
 ```mermaid
 classDiagram
 Class01 <|-- AveryLongClass : Cool
@@ -150,6 +156,7 @@ Moving --> Still
 Moving --> Crash
 Crash --> [*]
 ```
+
 ```mermaid
 stateDiagram-v2
 [*] --> Still
@@ -168,6 +175,7 @@ pie
 "Cats" : 85
 "Rats" : 15
 ```
+
 ```mermaid
 pie
 "Dogs" : 386
@@ -175,7 +183,7 @@ pie
 "Rats" : 15
 ```
 
-### Git图 [实验特性 - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ2l0R3JhcGg6XG5vcHRpb25zXG57XG4gICAgXCJub2RlU3BhY2luZ1wiOiAxNTAsXG4gICAgXCJub2RlUmFkaXVzXCI6IDEwXG59XG5lbmRcbmNvbW1pdFxuYnJhbmNoIG5ld2JyYW5jaFxuY2hlY2tvdXQgbmV3YnJhbmNoXG5jb21taXRcbmNvbW1pdFxuY2hlY2tvdXQgbWFzdGVyXG5jb21taXRcbmNvbW1pdFxubWVyZ2UgbmV3YnJhbmNoXG4iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
+### Git 图 [实验特性 - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ2l0R3JhcGg6XG5vcHRpb25zXG57XG4gICAgXCJub2RlU3BhY2luZ1wiOiAxNTAsXG4gICAgXCJub2RlUmFkaXVzXCI6IDEwXG59XG5lbmRcbmNvbW1pdFxuYnJhbmNoIG5ld2JyYW5jaFxuY2hlY2tvdXQgbmV3YnJhbmNoXG5jb21taXRcbmNvbW1pdFxuY2hlY2tvdXQgbWFzdGVyXG5jb21taXRcbmNvbW1pdFxubWVyZ2UgbmV3YnJhbmNoXG4iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
 
 ### 用户体验旅程图 [<a href="https://mermaid-js.github.io/mermaid/#/user-journey">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
 
@@ -190,6 +198,7 @@ pie
       Go downstairs: 5: Me
       Sit down: 3: Me
 ```
+
 ```mermaid
   journey
     title My working day
@@ -238,6 +247,7 @@ BiRel(SystemAA, SystemE, "Uses")
 Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
 Rel(SystemC, customerA, "Sends e-mails to")
 ```
+
 ```mermaid
 C4Context
 title System Context diagram for Internet Banking System
@@ -303,20 +313,20 @@ Mermaid 是一个不断发展中的社区，并且还在接收新的贡献者。
 
 作为拥有外部用户的网站的额外安全级别，我们很高兴推出一个新的安全级别，其中的图表在沙盒 iframe 中渲染，防止代码中的 javascript 被执行，这是在安全性方面迈出的一大步。
 
-*很不幸的是，鱼与熊掌不可兼得，在这个场景下它意味着在可能的恶意代码被阻止时，也会损失部分交互能力*。
+_很不幸的是，鱼与熊掌不可兼得，在这个场景下它意味着在可能的恶意代码被阻止时，也会损失部分交互能力_。
 
 ## 报告漏洞
 
 如果想要报告漏洞，请发送邮件到 security@mermaid.live, 并附上问题的描述、复现问题的步骤、受影响的版本，以及解决问题的方案（如果有的话）。
 
 ## 鸣谢
+
 来自 Knut Sveidqvist:
->*特别感谢 [d3](https://d3js.org/) 和 [dagre-d3](https://github.com/cpettitt/dagre-d3) 这两个优秀的项目，它们提供了图形布局和绘图工具库! *
->*同样感谢 [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) 提供了时序图语法的使用。 感谢 Jessica Peter 提供了甘特图渲染的灵感。*
->*感谢 [Tyler Long](https://github.com/tylerlong) 从 2017年四月开始成为了项目的合作者。*
+
+> _特别感谢 [d3](https://d3js.org/) 和 [dagre-d3](https://github.com/cpettitt/dagre-d3) 这两个优秀的项目，它们提供了图形布局和绘图工具库! _ >_同样感谢 [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) 提供了时序图语法的使用。 感谢 Jessica Peter 提供了甘特图渲染的灵感。_ >_感谢 [Tyler Long](https://github.com/tylerlong) 从 2017 年四月开始成为了项目的合作者。_
 >
->*感谢越来越多的 [贡献者们](https://github.com/knsv/mermaid/graphs/contributors)，没有你们，就没有这个项目的今天！*
+> _感谢越来越多的 [贡献者们](https://github.com/knsv/mermaid/graphs/contributors)，没有你们，就没有这个项目的今天！_
 
 ---
 
-*Mermaid 是由 Knut Sveidqvist 创建，它为了更简单的文档编写而生。*
+_Mermaid 是由 Knut Sveidqvist 创建，它为了更简单的文档编写而生。_
diff --git a/__mocks__/d3.js b/__mocks__/d3.js
index c5c7deed8..268aadf24 100644
--- a/__mocks__/d3.js
+++ b/__mocks__/d3.js
@@ -1,4 +1,7 @@
 let NewD3 = function () {
+  /**
+   *
+   */
   function returnThis() {
     return this;
   }
diff --git a/cypress/.eslintrc.json b/cypress/.eslintrc.json
index fe68a538d..4171a6125 100644
--- a/cypress/.eslintrc.json
+++ b/cypress/.eslintrc.json
@@ -1,10 +1,10 @@
 {
-	"env": {
-		"cypress/globals": true
-	},
-	"extends": ["plugin:cypress/recommended"],
-	"plugins": ["cypress"],
-	"rules":{
-		"cypress/no-unnecessary-waiting": 0 
-	}
+  "env": {
+    "cypress/globals": true
+  },
+  "extends": ["plugin:cypress/recommended"],
+  "plugins": ["cypress"],
+  "rules": {
+    "cypress/no-unnecessary-waiting": 0
+  }
 }
diff --git a/cypress/platform/current.html b/cypress/platform/current.html
index 575874605..35b8ce3bc 100644
--- a/cypress/platform/current.html
+++ b/cypress/platform/current.html
@@ -1,19 +1,24 @@
 <html>
   <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
         /* background: rgb(221, 208, 208); */
         /* background:#333; */
         font-family: 'Arial';
-        }
-      h1 { color: grey;}
+      }
+      h1 {
+        color: grey;
+      }
       .mermaid2 {
         display: none;
       }
@@ -22,137 +27,55 @@
   <body>
     <h1>info below</h1>
     <div class="flex">
-      <div class="mermaid" style="width: 50%; height: 20%;">
-flowchart BT
-   subgraph S1
-    sub1 -->sub2
-   end
-  subgraph S2
-    sub4
-   end
-   S1 --> S2
-   sub1 --> sub4
+      <div class="mermaid" style="width: 50%; height: 20%">
+        flowchart BT subgraph S1 sub1 -->sub2 end subgraph S2 sub4 end S1 --> S2 sub1 --> sub4
       </div>
-      <div class="mermaid2" style="width: 50%; height: 200px;">
-sequenceDiagram
-   Alice->>Bob:Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
-   Bob->>Alice: I'm short though
+      <div class="mermaid2" style="width: 50%; height: 200px">
+        sequenceDiagram Alice->>Bob:Extremely utterly long line of longness which had preivously
+        overflown the actor box as it is much longer than what it should be Bob->>Alice: I'm short
+        though
       </div>
-      <div class="mermaid2" style="width: 50%; height: 200px;">
-        %%{init: {'securityLevel': 'loose'}}%%
-      graph TD
-        A[Christmas] -->|Get money| B(Go shopping)
-        B --> C{{Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?}}
-        C -->|One| D[Laptop]
-        C -->|Two| E[iPhone]
-        C -->|Three| F[Car]
-        click A "index.html#link-clicked" "link test"
-        click B callback "click test"
-        classDef someclass fill:#f96;
-        class A someclass;
-        class C someclass;
+      <div class="mermaid2" style="width: 50%; height: 200px">
+        %%{init: {'securityLevel': 'loose'}}%% graph TD A[Christmas] -->|Get money| B(Go shopping) B
+        --> C{{Let me think...<br />Do I want something for work,<br />something to spend every free
+        second with,<br />or something to get around?}} C -->|One| D[Laptop] C -->|Two| E[iPhone] C
+        -->|Three| F[Car] click A "index.html#link-clicked" "link test" click B callback "click
+        test" classDef someclass fill:#f96; class A someclass; class C someclass;
       </div>
-      <div class="mermaid2" style="width: 50%; height: 200px;">
+      <div class="mermaid2" style="width: 50%; height: 200px">
+        flowchart BT subgraph a b1 -- ok --> b2 end a -- sert --> c c --> d b1 --> d a --asd123 -->
+        d
+      </div>
+      <div class="mermaid2" style="width: 50%; height: 20%">
+        stateDiagram-v2 state A { B1 --> B2: ok } A --> C: sert C --> D B1 --> D A --> D: asd123
+      </div>
+    </div>
+    <div class="mermaid2" style="width: 50%; height: 40%">
+      %% this does not produce the desired result flowchart TB subgraph container_Beta
+      process_C-->Process_D end subgraph container_Alpha process_A-->process_B
+      process_B-->|via_AWSBatch|container_Beta process_A-->|messages|process_C end
+    </div>
+    <div class="mermaid" style="width: 50%; height: 40%">
+      flowchart TB a{{"Lorem 'ipsum' dolor 'sit' amet, 'consectetur' adipiscing 'elit'."}} -->
+      b{{"Lorem #quot;ipsum#quot; dolor #quot;sit#quot; amet,#quot;consectetur#quot; adipiscing
+      #quot;elit#quot;."}}
+    </div>
+    <div class="mermaid2" style="width: 50%; height: 50%">
+      flowchart TB internet nat routeur lb1 lb2 compute1 compute2 subgraph project routeur nat
+      subgraph subnet1 compute1 lb1 end subgraph subnet2 compute2 lb2 end end internet --> routeur
+      routeur --> subnet1 & subnet2 subnet1 & subnet2 --> nat --> internet
+    </div>
+    <div class="mermaid2" style="width: 50%; height: 50%">
+      flowchart TD subgraph one[One] subgraph sub_one[Sub One] _sub_one end end subgraph two[Two]
+      _two end sub_one --> two
+    </div>
+    <div class="mermaid2" style="width: 50%; height: 50%">
+      flowchart TD subgraph one[One] subgraph sub_one[Sub One] _sub_one end subgraph sub_two[Sub
+      Two] _sub_two end _one end %% here, either the first or the second one sub_one --> sub_two
+      _one --> b
+    </div>
 
-      flowchart BT
-      subgraph a
-        b1 -- ok --> b2
-      end
-      a -- sert --> c
-      c --> d
-      b1 --> d
-      a --asd123 --> d
-      </div>
-      <div class="mermaid2" style="width: 50%; height: 20%;">
-stateDiagram-v2
-  state A {
-    B1 --> B2: ok
-  }
-  A --> C: sert
-  C --> D
-  B1 --> D
-  A --> D: asd123
-      </div>
-      </div>
-      <div class="mermaid2" style="width: 50%; height: 40%;">
-%% this does not produce the desired result
-flowchart TB
-  subgraph container_Beta
-    process_C-->Process_D
-  end
-  subgraph container_Alpha
-    process_A-->process_B
-    process_B-->|via_AWSBatch|container_Beta
-    process_A-->|messages|process_C
-  end
-
-      </div>
-      <div class="mermaid" style="width: 50%; height: 40%;">
-        flowchart TB
-	a{{"Lorem 'ipsum' dolor 'sit' amet, 'consectetur' adipiscing 'elit'."}}
-	--> b{{"Lorem #quot;ipsum#quot; dolor #quot;sit#quot; amet,#quot;consectetur#quot; adipiscing #quot;elit#quot;."}}
-
-
-      </div>
-      <div class="mermaid2" style="width: 50%; height: 50%;">
-flowchart TB
-  internet
-  nat
-  routeur
-  lb1
-  lb2
-  compute1
-  compute2
-  subgraph project
-  routeur
-  nat
-    subgraph subnet1
-      compute1
-      lb1
-    end
-    subgraph subnet2
-      compute2
-      lb2
-    end
-  end
-  internet --> routeur
-  routeur --> subnet1 & subnet2
-  subnet1 & subnet2 --> nat --> internet
-      </div>
-      <div class="mermaid2" style="width: 50%; height: 50%;">
-flowchart TD
-
-subgraph one[One]
-    subgraph sub_one[Sub One]
-        _sub_one
-    end
-end
-
-subgraph two[Two]
-    _two
-end
-
-sub_one --> two
-      </div>
-      <div class="mermaid2" style="width: 50%; height: 50%;">
-flowchart TD
-
-subgraph one[One]
-    subgraph sub_one[Sub One]
-        _sub_one
-    end
-    subgraph sub_two[Sub Two]
-        _sub_two
-    end
-    _one
-end
-
-%% here, either the first or the second one
-sub_one --> sub_two
-_one --> b
-      </div>
-
-  <script src="./mermaid.js"></script>
+    <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
@@ -172,8 +95,8 @@ _one --> b
         securityLevel: 'strict',
       });
       function callback() {
-  alert('It worked');
-}
+        alert('It worked');
+      }
     </script>
   </body>
 </html>
diff --git a/cypress/platform/e2e.html b/cypress/platform/e2e.html
index 756a739ca..021e2ad58 100644
--- a/cypress/platform/e2e.html
+++ b/cypress/platform/e2e.html
@@ -1,10 +1,13 @@
 <html>
   <head>
-    <meta charset="utf-8"/>
+    <meta charset="utf-8" />
     <!-- <meta charset="iso-8859-15"/> -->
     <script src="/e2e.js"></script>
     <!-- <link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet" /> -->
-    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
+      rel="stylesheet"
+    />
     <style>
       body {
         /* font-family: 'Mansalva', cursive;*/
@@ -27,7 +30,8 @@
       svg {
         border: 2px solid darkred;
       }
-      .exClass2 > rect, .exClass {
+      .exClass2 > rect,
+      .exClass {
         fill: greenyellow !important;
       }
     </style>
diff --git a/cypress/platform/ghsa1.html b/cypress/platform/ghsa1.html
index bf2008d7e..c54358862 100644
--- a/cypress/platform/ghsa1.html
+++ b/cypress/platform/ghsa1.html
@@ -1,28 +1,26 @@
 <html>
-<script>
+  <script>
     //      %%{ init: { "logLevel":0, "themeVariables" : { "primaryColor": "#fff000","textColor": "green","apa":"} #target { background-color: crimson }" } } }%%
-</script>
-<body>
+  </script>
+  <body>
     <div id="target">
-        <h1>This element does not belong to the SVG but we can style it</h1>
+      <h1>This element does not belong to the SVG but we can style it</h1>
     </div>
-    <svg id="diagram">
-    </svg>
+    <svg id="diagram"></svg>
 
     <script src="./mermaid.js"></script>
     <script>
-        mermaid.initialize({ startOnLoad: false, logLevel: 0 });
+      mermaid.initialize({ startOnLoad: false, logLevel: 0 });
 
-        const graph = `
+      const graph = `
      %%{ init: { "themeVariables" : { "textColor": "green;} #target { background-color: crimson }", "mainBkg": "#fff000" } } }%%
             graph TD
                 A[Goose]
             `;
 
-        const diagram = document.getElementById('diagram');
-        const svg = mermaid.render('diagram-svg', graph);
-        diagram.innerHTML = svg;
+      const diagram = document.getElementById('diagram');
+      const svg = mermaid.render('diagram-svg', graph);
+      diagram.innerHTML = svg;
     </script>
-</body>
-
+  </body>
 </html>
diff --git a/cypress/platform/ghsa2.html b/cypress/platform/ghsa2.html
index b4e390c6c..6d4dccca3 100644
--- a/cypress/platform/ghsa2.html
+++ b/cypress/platform/ghsa2.html
@@ -1,28 +1,26 @@
 <html>
-<script>
+  <script>
     //      %%{ init: { "logLevel":0, "themeVariables" : { "primaryColor": "#fff000","textColor": "green","apa":"} #target { background-color: crimson }" } } }%%
-</script>
-<body>
+  </script>
+  <body>
     <div id="target">
-        <h1>This element does not belong to the SVG but we can style it</h1>
+      <h1>This element does not belong to the SVG but we can style it</h1>
     </div>
-    <svg id="diagram">
-    </svg>
+    <svg id="diagram"></svg>
 
     <script src="./mermaid.js"></script>
     <script>
-        mermaid.initialize({ startOnLoad: false, logLevel: 0 });
+      mermaid.initialize({ startOnLoad: false, logLevel: 0 });
 
-        const graph = `
+      const graph = `
      %%{ init: { "fontFamily" : "&125; * { background: red }" } }%%
             graph TD
                 A[Goose]
             `;
 
-        const diagram = document.getElementById('diagram');
-        const svg = mermaid.render('diagram-svg', graph);
-        diagram.innerHTML = svg;
+      const diagram = document.getElementById('diagram');
+      const svg = mermaid.render('diagram-svg', graph);
+      diagram.innerHTML = svg;
     </script>
-</body>
-
+  </body>
 </html>
diff --git a/cypress/platform/render-after-error.html b/cypress/platform/render-after-error.html
index e6b97aea2..267ffade1 100644
--- a/cypress/platform/render-after-error.html
+++ b/cypress/platform/render-after-error.html
@@ -1,29 +1,28 @@
 <!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=">
-    </head>
-    <body>
-        <div id="graph">
-        </div>
+  <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=" />
+  </head>
+  <body>
+    <div id="graph"></div>
 
-        <script src="./mermaid.js"></script>
-        <script>mermaid.init({ startOnLoad: false });
+    <script src="./mermaid.js"></script>
+    <script>
+      mermaid.init({ startOnLoad: false });
 
-         mermaid.mermaidAPI.initialize({ securityLevel: 'strict' });
+      mermaid.mermaidAPI.initialize({ securityLevel: 'strict' });
 
-         try {
-           console.log('rendering');
-           mermaid.mermaidAPI.render('graphDiv', `>`);
-         } catch (e) {}
+      try {
+        console.log('rendering');
+        mermaid.mermaidAPI.render('graphDiv', `>`);
+      } catch (e) {}
 
-         mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`, (html) => {
-           document.getElementById('graph').innerHTML = html;
-         });
-        </script>
-
-    </body>
+      mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`, (html) => {
+        document.getElementById('graph').innerHTML = html;
+      });
+    </script>
+  </body>
 </html>
diff --git a/cypress/platform/rerender.html b/cypress/platform/rerender.html
index 667d143a6..9b6cb130e 100644
--- a/cypress/platform/rerender.html
+++ b/cypress/platform/rerender.html
@@ -1,30 +1,29 @@
 <!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=">
-</head>
-<body>
-<div id="graph">
-</div>
+  <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=" />
+  </head>
+  <body>
+    <div id="graph"></div>
 
-  <script src="./mermaid.js"></script>
-  <script>mermaid.init({ startOnLoad: false });
-    mermaid.mermaidAPI.initialize();
+    <script src="./mermaid.js"></script>
+    <script>
+      mermaid.init({ startOnLoad: false });
+      mermaid.mermaidAPI.initialize();
 
-    rerender('XMas');
+      rerender('XMas');
 
-    function rerender(text) {
-      var graphText = `graph TD
+      function rerender(text) {
+        var graphText = `graph TD
         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;
-    }
-  </script>
-  <button id="rerender" onclick="rerender('Saturday')">Rerender</button>
-
-</body>
+        var graph = mermaid.mermaidAPI.render('id', graphText);
+        console.log('\x1b[35m%s\x1b[0m', '>> graph', graph);
+        document.getElementById('graph').innerHTML = graph;
+      }
+    </script>
+    <button id="rerender" onclick="rerender('Saturday')">Rerender</button>
+  </body>
 </html>
diff --git a/cypress/platform/viewer.js b/cypress/platform/viewer.js
index 10bc34811..2ce15f88a 100644
--- a/cypress/platform/viewer.js
+++ b/cypress/platform/viewer.js
@@ -46,7 +46,7 @@ function merge(current, update) {
     // if update[key] exist, and it's not a string or array,
     // we go in one level deeper
     if (
-      current.hasOwnProperty(key) && // eslint-disable-line
+      current.hasOwnProperty(key) &&
       typeof current[key] === 'object' &&
       !(current[key] instanceof Array)
     ) {
diff --git a/cypress/platform/webpackUsage.html b/cypress/platform/webpackUsage.html
index 82c3c8694..12755c359 100644
--- a/cypress/platform/webpackUsage.html
+++ b/cypress/platform/webpackUsage.html
@@ -1,18 +1,17 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
-<head>
-  <style>
-  /* .mermaid {
+  <head>
+    <style>
+      /* .mermaid {
     font-family: "trebuchet ms", verdana, arial;;
   } */
-  /* .mermaid {
+      /* .mermaid {
     font-family: 'arial';
   } */
-  </style>
-</head>
-<body>
-  <div id="graph-to-be"></div>
-  <script src="./bundle-test.js" charset="utf-8"></script>
-</body>
-
-</html>
\ No newline at end of file
+    </style>
+  </head>
+  <body>
+    <div id="graph-to-be"></div>
+    <script src="./bundle-test.js" charset="utf-8"></script>
+  </body>
+</html>
diff --git a/cypress/platform/xss.html b/cypress/platform/xss.html
index 3938c5aae..4c0fc91ea 100644
--- a/cypress/platform/xss.html
+++ b/cypress/platform/xss.html
@@ -1,16 +1,13 @@
 <html>
   <head>
     <script src="/e2e.js"></script>
-    <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
-      rel="stylesheet"
-    />
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
     <style>
       .malware {
         position: fixed;
-        bottom:0;
-        left:0;
-        right:0;
+        bottom: 0;
+        left: 0;
+        right: 0;
         height: 150px;
         background: red;
         color: black;
diff --git a/cypress/support/eyes-index.d.ts b/cypress/support/eyes-index.d.ts
index b7a17d9de..59fc1eca4 100644
--- a/cypress/support/eyes-index.d.ts
+++ b/cypress/support/eyes-index.d.ts
@@ -1 +1 @@
-import "@applitools/eyes-cypress"
\ No newline at end of file
+import '@applitools/eyes-cypress';
diff --git a/docs/8.6.0_docs.md b/docs/8.6.0_docs.md
index 9a60711b7..6ba835c2e 100644
--- a/docs/8.6.0_docs.md
+++ b/docs/8.6.0_docs.md
@@ -15,19 +15,19 @@ the `init` directive is the main method of configuration for Site and Current Le
 
 The three levels of are Configuration, Global, Site and Current.
 
-| Level of Configuration | Description |
-| --- | --- |
-| Global Configuration| Default Mermaid Configurations|
-| Site Configuration| Configurations made by site owner|
-| Current Configuration| Configurations made by Implementors|
-
+| Level of Configuration | Description                         |
+| ---------------------- | ----------------------------------- |
+| Global Configuration   | Default Mermaid Configurations      |
+| Site Configuration     | Configurations made by site owner   |
+| Current Configuration  | Configurations made by Implementors |
 
 # Limits to Modifying Configurations
+
 **secure Array**
 
-| Parameter | Description |Type | Required | Values|
-| --- | --- | --- | --- | --- |
-| secure | Array of parameters excluded from init directive| Array | Required | Any parameters|
+| Parameter | Description                                      | Type  | Required | Values         |
+| --------- | ------------------------------------------------ | ----- | -------- | -------------- |
+| secure    | Array of parameters excluded from init directive | Array | Required | Any parameters |
 
 The modifiable parts of the Configuration are limited by the secure array, which is an array of immutable parameters, this array can be expanded by site owners.
 
@@ -43,6 +43,7 @@ Default values for the `secure array` consists of: ['secure', 'securityLevel', '
 Implementors can only modify configurations using directives, and cannot change the `secure` array.
 
 # Modifying Configurations and directives:
+
 The Two types of directives: are `init` (or `initialize`) and `wrap`.
 
 ```note
@@ -52,12 +53,12 @@ All directives are enclosed in `%%{ }%%`
 Older versions of mermaid will not parse directives because `%%` will comment out the directive. This makes the update backwards-compatible.
 
 # Init
+
 `init`, or `initialize`: this directive gives the user the ability to overwrite and change the values for any configuration parameters not set in the secure array.
 
-| Parameter | Description |Type | Required | Values|
-| --- | --- | --- | --- | --- |
-| init | modifies configurations| Directive| Optional | Any parameters not included in the secure array|
-
+| Parameter | Description             | Type      | Required | Values                                          |
+| --------- | ----------------------- | --------- | -------- | ----------------------------------------------- |
+| init      | modifies configurations | Directive | Optional | Any parameters not included in the secure array |
 
 ```note
 init would be an argument-directive: `%%{init: { **insert argument here**}}%%`
@@ -73,6 +74,7 @@ When deployed within code, init is called before the graph/diagram description.
 ```
 
 **for example**:
+
 ```mmd
 %%{init: {"theme": "default", "logLevel": 1 }}%%
  graph LR
@@ -84,11 +86,12 @@ When deployed within code, init is called before the graph/diagram description.
   f-->g
   g-->
 ```
+
 # Wrap
 
-| Parameter | Description |Type | Required | Values|
-| --- | --- | --- | --- | --- |
-| wrap | a callable text-wrap function| Directive| Optional | %%{wrap}%%|
+| Parameter | Description                   | Type      | Required | Values     |
+| --------- | ----------------------------- | --------- | -------- | ---------- |
+| wrap      | a callable text-wrap function | Directive | Optional | %%{wrap}%% |
 
 ```note
 Wrap is a function that is currently only deployable for sequence diagrams.
@@ -104,8 +107,8 @@ It is a non-argument directive and can be executed thusly:
 
 ![Image showing wrapped text](img/wrapped%20text.png)
 
-
 # Resetting Configurations:
+
 There are two more functions in the mermaidAPI that can be called by site owners: **reset** and **globalReset**.
 
 **reset**: resets the configuration to whatever the last configuration was. This can be done to undo more recent changes set from the last mermaidAPI.initialize({...}) configuration.
@@ -115,31 +118,30 @@ There are two more functions in the mermaidAPI that can be called by site owners
 **Notes**: Both `reset` and `globalReset` are only available to site owners, and as such implementors have to edit their configs using `init`.
 
 # Additional Utils to mermaid
-•	**memoize**: simple caching for computationally expensive functions, reducing rendering time by about 90%.
 
-•	**assignWithDepth** - an improvement on previous functions with config.js and `Object.assign`. The purpose of this function is to provide a sane mechanism for merging objects, similar to `object.assign`, but with depth.
+• **memoize**: simple caching for computationally expensive functions, reducing rendering time by about 90%.
+
+• **assignWithDepth** - an improvement on previous functions with config.js and `Object.assign`. The purpose of this function is to provide a sane mechanism for merging objects, similar to `object.assign`, but with depth.
 
 Example of **assignWithDepth**:
 
 ![Image showing assignWithDepth](img/assignWithDepth.png)
 
-
 Example of **object.Assign**:
 
 ![Image showing object.assign without depth](img/object.assign%20without%20depth.png)
 
-•	**calculateTextDimensions**, **calculateTextWidth**， and **calculateTextHeight** - for measuring text dimensions, width and height.
+• **calculateTextDimensions**, **calculateTextWidth**， and **calculateTextHeight** - for measuring text dimensions, width and height.
 
 **Notes**: For more information on usage, parameters, and return info for these new functions take a look at the jsdocs for them in the utils package.
 
-
 # New API Requests Introduced in Version 8.6.0
 
 ## setSiteConfig
 
-| Function | Description         | Type    | Values             |Parameters|Returns|
-| --------- | ------------------- | ------- | ------------------ | ------------------ | ------------------ |
-| `setSiteConfig`|Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array|conf|siteConfig|
+| Function        | Description                           | Type        | Values                                  | Parameters | Returns    |
+| --------------- | ------------------------------------- | ----------- | --------------------------------------- | ---------- | ---------- |
+| `setSiteConfig` | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array | conf       | siteConfig |
 
 ```note
 Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset
@@ -151,9 +153,9 @@ Default value: will mirror Global Config
 
 ## getSiteConfig
 
-| Function | Description         | Type    |  Values             |
-| --------- | ------------------- | ------- |  ------------------ |
-| `getSiteConfig`|Returns the current `siteConfig` base configuration | Get Request | Returns Any Values in `siteConfig`|
+| Function        | Description                                         | Type        | Values                             |
+| --------------- | --------------------------------------------------- | ----------- | ---------------------------------- |
+| `getSiteConfig` | Returns the current `siteConfig` base configuration | Get Request | Returns Any Values in `siteConfig` |
 
 ```note
 Returns   any   values in siteConfig.
@@ -161,9 +163,9 @@ Returns   any   values in siteConfig.
 
 ## setConfig
 
-| Function  | Description         | Type    | Values             |Parameters|Returns|
-| --------- | ------------------- | ------- | ------------------ |----------|-------|
-| `setConfig`|Sets the `currentConfig` to desired values | Put Request| Any Values, those in secure array|conf|`currentConfig` merged with the sanitized conf|
+| Function    | Description                                | Type        | Values                            | Parameters | Returns                                        |
+| ----------- | ------------------------------------------ | ----------- | --------------------------------- | ---------- | ---------------------------------------------- |
+| `setConfig` | Sets the `currentConfig` to desired values | Put Request | Any Values, those in secure array | conf       | `currentConfig` merged with the sanitized conf |
 
 ```note
 Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any
@@ -173,10 +175,9 @@ siteConfig value.
 
 ## getConfig
 
-| Function  | Description         | Type    | Return Values            |
-| --------- | ------------------- | ------- | ------------------ |
-| `getConfig` |Obtains the `currentConfig` | Get Request | Any Values from `currentConfig`|
-
+| Function    | Description                 | Type        | Return Values                   |
+| ----------- | --------------------------- | ----------- | ------------------------------- |
+| `getConfig` | Obtains the `currentConfig` | Get Request | Any Values from `currentConfig` |
 
 ```note
 Returns any values in currentConfig.
@@ -184,9 +185,9 @@ Returns any values in currentConfig.
 
 ## sanitize
 
-| Function  | Description         | Type    | Values             |
-| --------- | ------------------- | ------- | ------------------ |
-| `sanitize`  |Sets the `siteConfig` to desired values. | Put Request(?) |None|
+| Function   | Description                              | Type           | Values |
+| ---------- | ---------------------------------------- | -------------- | ------ |
+| `sanitize` | Sets the `siteConfig` to desired values. | Put Request(?) | None   |
 
 ```note
 modifies options in-place
@@ -195,15 +196,15 @@ Ensures options parameter does not attempt to override siteConfig secure keys.
 
 ## reset
 
-| Function | Description         | Type    | Required | Values             |Parameter|
-| --------- | -------------------| ------- | -------- | ------------------ |---------|
-| `reset`|Resets `currentConfig` to conf| Put Request | Required | None| conf|
+| Function | Description                    | Type        | Required | Values | Parameter |
+| -------- | ------------------------------ | ----------- | -------- | ------ | --------- |
+| `reset`  | Resets `currentConfig` to conf | Put Request | Required | None   | conf      |
 
 ## conf
 
-| Parameter | Description |Type | Required | Values|
-| --- | --- | --- | --- | --- |
-| `conf`| base set of values, which `currentConfig` could be reset to.| Dictionary | Required | Any Values, with respect to the secure Array|
+| Parameter | Description                                                  | Type       | Required | Values                                       |
+| --------- | ------------------------------------------------------------ | ---------- | -------- | -------------------------------------------- |
+| `conf`    | base set of values, which `currentConfig` could be reset to. | Dictionary | Required | Any Values, with respect to the secure Array |
 
 ```note
 default: current siteConfig  (optional, default `getSiteConfig()`)
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index 408d1587b..b80e52b30 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -26,7 +26,8 @@ Example of `Initalize` call setting `theme` to `base`:
 
 ```javascript
 mermaidAPI.initialize({
-    'securityLevel': 'loose', 'theme': 'base'
+  securityLevel: 'loose',
+  theme: 'base',
 });
 ```
 
@@ -49,11 +50,10 @@ It is also possible to override site-wide theme settings locally, for a specific
 
 The easiest way to make a custom theme is to start with the base theme, and just modify theme variables through `themeVariables`, via `%%init%%`.
 
-|   Parameter    |                            Description                             | Type  | Required |         Objects contained          |
+| Parameter      | Description                                                        | Type  | Required | Objects contained                  |
 | -------------- | ------------------------------------------------------------------ | ----- | -------- | ---------------------------------- |
 | themeVariables | Array containing objects, modifiable with the `%%init%%` directive | Array | Required | primaryColor, lineColor, textColor |
 
-
 Here is an example of overriding `primaryColor` and giving everything a different look, using `%%init%%`.
 
 ```mmd
@@ -117,9 +117,9 @@ This was introduced in version 8.2 as a security improvement, aimed at preventin
 
 **Notes:**
 
--   **strict**: (**default**) tags in text are encoded, click functionality is disabled
--   **loose**: tags in text are allowed, click functionality is enabled
--   **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled
+- **strict**: (**default**) tags in text are encoded, click functionality is disabled
+- **loose**: tags in text are allowed, click functionality is enabled
+- **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled
 
 ⚠️ **Note**: This changes the default behaviour of mermaid so that after upgrade to 8.2, if the `securityLevel` is not configured, tags in flowcharts are encoded as tags and clicking is prohibited.
 
@@ -129,9 +129,9 @@ By doing this clicks and tags are again allowed.
 ### To change `securityLevel` with `mermaidAPI.initialize`:
 
 ```javascript
-    mermaidAPI.initialize({
-        securityLevel: 'loose'
-    });
+mermaidAPI.initialize({
+  securityLevel: 'loose',
+});
 ```
 
 **Closed issues:**
@@ -160,9 +160,9 @@ By doing this clicks and tags are again allowed.
 - margins around flowchart are not balanced [\#852](https://github.com/knsv/mermaid/issues/852)
 - Smaller bundles [\#843](https://github.com/knsv/mermaid/issues/843)
 - unicode in labels [\#776](https://github.com/knsv/mermaid/issues/776)
-- Hard-changing drawing  of arrows per edge type [\#775](https://github.com/knsv/mermaid/issues/775)
+- Hard-changing drawing of arrows per edge type [\#775](https://github.com/knsv/mermaid/issues/775)
 - SequenceDiagram wrong [\#773](https://github.com/knsv/mermaid/issues/773)
-- Render mermaid on github pages with simple code  [\#772](https://github.com/knsv/mermaid/issues/772)
+- Render mermaid on github pages with simple code [\#772](https://github.com/knsv/mermaid/issues/772)
 - FlowChart - large space between text and the image [\#754](https://github.com/knsv/mermaid/issues/754)
 - Class Diagram Issues when using Mermaid in Stackedit [\#748](https://github.com/knsv/mermaid/issues/748)
 - Multi-platform CI [\#744](https://github.com/knsv/mermaid/issues/744)
@@ -175,18 +175,18 @@ By doing this clicks and tags are again allowed.
 - Issue on Dynamic Creation in PHP [\#690](https://github.com/knsv/mermaid/issues/690)
 - `click "\#target"` and `click "http://url"` should create regular links [\#689](https://github.com/knsv/mermaid/issues/689)
 - Support Chinese punctuation [\#687](https://github.com/knsv/mermaid/issues/687)
-- \[Question\] Proper way to install on Mac?  [\#681](https://github.com/knsv/mermaid/issues/681)
-- Has Mermaid a graphical interface to make diagrams?  [\#668](https://github.com/knsv/mermaid/issues/668)
-- mermaid installation on debian  [\#649](https://github.com/knsv/mermaid/issues/649)
+- \[Question\] Proper way to install on Mac? [\#681](https://github.com/knsv/mermaid/issues/681)
+- Has Mermaid a graphical interface to make diagrams? [\#668](https://github.com/knsv/mermaid/issues/668)
+- mermaid installation on debian [\#649](https://github.com/knsv/mermaid/issues/649)
 - "Cannot activate" in sequenceDiagram [\#647](https://github.com/knsv/mermaid/issues/647)
 - Link \("click" statement\) in flowchart does not work in exported SVG [\#646](https://github.com/knsv/mermaid/issues/646)
-- How to pass styling  [\#639](https://github.com/knsv/mermaid/issues/639)
+- How to pass styling [\#639](https://github.com/knsv/mermaid/issues/639)
 - The live editor cant show seq diagram with notes for 8.0.0-alpha.3 [\#638](https://github.com/knsv/mermaid/issues/638)
 - import mermaid.css with ES6 + NPM [\#634](https://github.com/knsv/mermaid/issues/634)
 - Actor line cuts through other elements [\#633](https://github.com/knsv/mermaid/issues/633)
 - Graph TD line out of the picture \(left side\) [\#630](https://github.com/knsv/mermaid/issues/630)
-- Flowchart labels appear "cutoff"  [\#628](https://github.com/knsv/mermaid/issues/628)
-- Uncaught TypeError: \_.constant is not a function \(mermaid.js\)  [\#626](https://github.com/knsv/mermaid/issues/626)
+- Flowchart labels appear "cutoff" [\#628](https://github.com/knsv/mermaid/issues/628)
+- Uncaught TypeError: \_.constant is not a function \(mermaid.js\) [\#626](https://github.com/knsv/mermaid/issues/626)
 - Missing tags and releases for newer versions [\#623](https://github.com/knsv/mermaid/issues/623)
 - Mermaid and Leo / Leo Vue [\#622](https://github.com/knsv/mermaid/issues/622)
 - mermaidAPI gantt Vue.js [\#621](https://github.com/knsv/mermaid/issues/621)
@@ -221,7 +221,7 @@ By doing this clicks and tags are again allowed.
 - TypeError: Cannot read property 'select' of undefined [\#563](https://github.com/knsv/mermaid/issues/563)
 - A little bug [\#557](https://github.com/knsv/mermaid/issues/557)
 - Japanese text appears garbled [\#554](https://github.com/knsv/mermaid/issues/554)
-- classdiagram not works in mermaid live\_editor  [\#553](https://github.com/knsv/mermaid/issues/553)
+- classdiagram not works in mermaid live_editor [\#553](https://github.com/knsv/mermaid/issues/553)
 - font awesome in link text? [\#546](https://github.com/knsv/mermaid/issues/546)
 - q: heard of the cosmogol standard? [\#545](https://github.com/knsv/mermaid/issues/545)
 - Arrow heads missing \(cli, 7.0.3\) [\#544](https://github.com/knsv/mermaid/issues/544)
@@ -248,7 +248,7 @@ By doing this clicks and tags are again allowed.
 - Flowchart edge labels placement [\#490](https://github.com/knsv/mermaid/issues/490)
 - Very different styles when rendering as png vs. svg [\#489](https://github.com/knsv/mermaid/issues/489)
 - New editor that supports mermaid: Caret [\#488](https://github.com/knsv/mermaid/issues/488)
-- Gant PNG margin  [\#486](https://github.com/knsv/mermaid/issues/486)
+- Gant PNG margin [\#486](https://github.com/knsv/mermaid/issues/486)
 - ReferenceError: window is not defined [\#485](https://github.com/knsv/mermaid/issues/485)
 - Menu and layout bugs in docs [\#484](https://github.com/knsv/mermaid/issues/484)
 - Mermaid resets some of the page CSS styles [\#482](https://github.com/knsv/mermaid/issues/482)
@@ -271,7 +271,7 @@ By doing this clicks and tags are again allowed.
 - shouldn't mermaid become more like Markdown ? [\#417](https://github.com/knsv/mermaid/issues/417)
 - Live editor show rendered diagram if syntax invalid [\#415](https://github.com/knsv/mermaid/issues/415)
 - Linkstyle stroke does not work [\#410](https://github.com/knsv/mermaid/issues/410)
-- flowchart id's with dots in them .. break links  [\#408](https://github.com/knsv/mermaid/issues/408)
+- flowchart id's with dots in them .. break links [\#408](https://github.com/knsv/mermaid/issues/408)
 - Flowchart: Link text beginning with lowercase 'o' causes flowchart to break [\#407](https://github.com/knsv/mermaid/issues/407)
 - Some Chinese character will case Safari no responding. [\#405](https://github.com/knsv/mermaid/issues/405)
 - Cannot center-justify text in nodes? [\#397](https://github.com/knsv/mermaid/issues/397)
@@ -282,7 +282,7 @@ By doing this clicks and tags are again allowed.
 - sequence diagram config issue [\#385](https://github.com/knsv/mermaid/issues/385)
 - How to add newline in the text [\#384](https://github.com/knsv/mermaid/issues/384)
 - PhantomJS crashes on a large graph [\#380](https://github.com/knsv/mermaid/issues/380)
-- Finnish support for class diagrams using plantuml syntax  [\#377](https://github.com/knsv/mermaid/issues/377)
+- Finnish support for class diagrams using plantuml syntax [\#377](https://github.com/knsv/mermaid/issues/377)
 - mermaidAPI.render generated different svg code from mermaid.int\(\) [\#374](https://github.com/knsv/mermaid/issues/374)
 - Put your own action on the chart [\#372](https://github.com/knsv/mermaid/issues/372)
 - when declaring participants the elements are generated twice [\#370](https://github.com/knsv/mermaid/issues/370)
@@ -312,7 +312,7 @@ By doing this clicks and tags are again allowed.
 - Mermaid does not work in Chrome 48 [\#281](https://github.com/knsv/mermaid/issues/281)
 - circle and ellipse cannot change color by classDef [\#271](https://github.com/knsv/mermaid/issues/271)
 - npm run watch doesn't work due missing dependencies [\#266](https://github.com/knsv/mermaid/issues/266)
-- label out of node  [\#262](https://github.com/knsv/mermaid/issues/262)
+- label out of node [\#262](https://github.com/knsv/mermaid/issues/262)
 - IE11 Support issue [\#261](https://github.com/knsv/mermaid/issues/261)
 - mermaid without browser [\#260](https://github.com/knsv/mermaid/issues/260)
 - Insufficient capacity of gantt diagrams [\#226](https://github.com/knsv/mermaid/issues/226)
@@ -346,13 +346,14 @@ By doing this clicks and tags are again allowed.
 - Adding trapezoid and inverse trapezoid vertex options. [\#741](https://github.com/knsv/mermaid/pull/741) ([adamwulf](https://github.com/adamwulf))
 - Add option for right angles [\#721](https://github.com/knsv/mermaid/pull/721) ([paulbland](https://github.com/paulbland))
 - Add nested activation classes [\#720](https://github.com/knsv/mermaid/pull/720) ([paulbland](https://github.com/paulbland))
-- wip: class diagram  cardinality display [\#705](https://github.com/knsv/mermaid/pull/705) ([Vrixyz](https://github.com/Vrixyz))
+- wip: class diagram cardinality display [\#705](https://github.com/knsv/mermaid/pull/705) ([Vrixyz](https://github.com/Vrixyz))
 - add comments about CSS in config [\#688](https://github.com/knsv/mermaid/pull/688) ([imma90](https://github.com/imma90))
 - SequenceDiagram: Add support for multiple alt else statements [\#641](https://github.com/knsv/mermaid/pull/641) ([sechel](https://github.com/sechel))
 - fix \#426 - add class .clickable on nodes with click function or link [\#598](https://github.com/knsv/mermaid/pull/598) ([thomasleveil](https://github.com/thomasleveil))
 - Spec fix 1 [\#595](https://github.com/knsv/mermaid/pull/595) ([frankschmitt](https://github.com/frankschmitt))
 
 ## [7.0.5](https://github.com/knsv/mermaid/tree/7.0.5) (2017-09-01)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/7.0.3...7.0.5)
 
 **Closed issues:**
@@ -376,6 +377,7 @@ By doing this clicks and tags are again allowed.
 - New documentation - need improved logo [\#216](https://github.com/knsv/mermaid/issues/216)
 
 ## [7.0.3](https://github.com/knsv/mermaid/tree/7.0.3) (2017-06-04)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/7.0.2...7.0.3)
 
 **Closed issues:**
@@ -384,6 +386,7 @@ By doing this clicks and tags are again allowed.
 - Good example of interactivity with mermaidAPI [\#514](https://github.com/knsv/mermaid/issues/514)
 
 ## [7.0.2](https://github.com/knsv/mermaid/tree/7.0.2) (2017-06-01)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/7.0.0...7.0.2)
 
 **Closed issues:**
@@ -421,6 +424,7 @@ By doing this clicks and tags are again allowed.
 - add par statement to sequenceDiagram [\#470](https://github.com/knsv/mermaid/pull/470) ([u-minor](https://github.com/u-minor))
 
 ## [7.0.0](https://github.com/knsv/mermaid/tree/7.0.0) (2017-01-29)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/6.0.0...7.0.0)
 
 **Implemented enhancements:**
@@ -434,7 +438,7 @@ By doing this clicks and tags are again allowed.
 - Can not be generated PNG pictures through CLI with Chinese [\#451](https://github.com/knsv/mermaid/issues/451)
 - Round nodes cannot be styled with CSS classes [\#443](https://github.com/knsv/mermaid/issues/443)
 - webpack gulp UglifyJsPlugin error. [\#440](https://github.com/knsv/mermaid/issues/440)
-- String concatenation isn't working  [\#432](https://github.com/knsv/mermaid/issues/432)
+- String concatenation isn't working [\#432](https://github.com/knsv/mermaid/issues/432)
 - text flow/wrap in actor box of sequence diagram [\#422](https://github.com/knsv/mermaid/issues/422)
 - Online live editor still use old version [\#402](https://github.com/knsv/mermaid/issues/402)
 - uncaught TypeError: t.getTransformToElement is not a function [\#401](https://github.com/knsv/mermaid/issues/401)
@@ -459,7 +463,7 @@ By doing this clicks and tags are again allowed.
 - fix gantt chart cli configuration parsing including functions [\#430](https://github.com/knsv/mermaid/pull/430) ([whyzdev](https://github.com/whyzdev))
 - Uses an empty text node instead of a string for svg group labels [\#429](https://github.com/knsv/mermaid/pull/429) ([daveaglick](https://github.com/daveaglick))
 - use tspan via d3.textwrap to place actor text in sequence diagram [\#427](https://github.com/knsv/mermaid/pull/427) ([whyzdev](https://github.com/whyzdev))
-- \#422 use foreignObject/div to place actor label in sequence diagram  [\#423](https://github.com/knsv/mermaid/pull/423) ([whyzdev](https://github.com/whyzdev))
+- \#422 use foreignObject/div to place actor label in sequence diagram [\#423](https://github.com/knsv/mermaid/pull/423) ([whyzdev](https://github.com/whyzdev))
 - Clarify the need for a CSS stylesheet [\#413](https://github.com/knsv/mermaid/pull/413) ([sifb](https://github.com/sifb))
 - Added hads downstream project [\#412](https://github.com/knsv/mermaid/pull/412) ([sinedied](https://github.com/sinedied))
 - update usage and fix \#273 [\#406](https://github.com/knsv/mermaid/pull/406) ([jinntrance](https://github.com/jinntrance))
@@ -474,6 +478,7 @@ By doing this clicks and tags are again allowed.
 - Fix typo in the sequence diagram documentation [\#369](https://github.com/knsv/mermaid/pull/369) ([ggpasqualino](https://github.com/ggpasqualino))
 
 ## [6.0.0](https://github.com/knsv/mermaid/tree/6.0.0) (2016-05-29)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.8...6.0.0)
 
 **Closed issues:**
@@ -512,9 +517,11 @@ By doing this clicks and tags are again allowed.
 - Quote phantomPath so that it doesn't fail on window [\#286](https://github.com/knsv/mermaid/pull/286) ([raghur](https://github.com/raghur))
 
 ## [0.5.8](https://github.com/knsv/mermaid/tree/0.5.8) (2016-01-27)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.7...0.5.8)
 
 ## [0.5.7](https://github.com/knsv/mermaid/tree/0.5.7) (2016-01-25)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.6...0.5.7)
 
 **Closed issues:**
@@ -536,6 +543,7 @@ By doing this clicks and tags are again allowed.
 - Allow sequenceDiagram participant aliasing [\#265](https://github.com/knsv/mermaid/pull/265) ([gibson042](https://github.com/gibson042))
 
 ## [0.5.6](https://github.com/knsv/mermaid/tree/0.5.6) (2015-11-22)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.5...0.5.6)
 
 **Implemented enhancements:**
@@ -572,6 +580,7 @@ By doing this clicks and tags are again allowed.
 - Add a Gitter chat badge to README.md [\#230](https://github.com/knsv/mermaid/pull/230) ([gitter-badger](https://github.com/gitter-badger))
 
 ## [0.5.5](https://github.com/knsv/mermaid/tree/0.5.5) (2015-10-21)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.4...0.5.5)
 
 **Closed issues:**
@@ -583,6 +592,7 @@ By doing this clicks and tags are again allowed.
 - Fix a typo: crosshead --\> arrowhead [\#228](https://github.com/knsv/mermaid/pull/228) ([tylerlong](https://github.com/tylerlong))
 
 ## [0.5.4](https://github.com/knsv/mermaid/tree/0.5.4) (2015-10-19)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.3...0.5.4)
 
 **Implemented enhancements:**
@@ -608,9 +618,11 @@ By doing this clicks and tags are again allowed.
 - Remove duplicate npm dependencies: d3 and he [\#223](https://github.com/knsv/mermaid/pull/223) ([spect88](https://github.com/spect88))
 
 ## [0.5.3](https://github.com/knsv/mermaid/tree/0.5.3) (2015-10-04)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.2...0.5.3)
 
 ## [0.5.2](https://github.com/knsv/mermaid/tree/0.5.2) (2015-10-04)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.1...0.5.2)
 
 **Implemented enhancements:**
@@ -623,7 +635,7 @@ By doing this clicks and tags are again allowed.
 - node feature request [\#211](https://github.com/knsv/mermaid/issues/211)
 - Please add prefix for styles [\#208](https://github.com/knsv/mermaid/issues/208)
 - Bad handling of block arguments [\#207](https://github.com/knsv/mermaid/issues/207)
-- please consider port to mac osx  [\#203](https://github.com/knsv/mermaid/issues/203)
+- please consider port to mac osx [\#203](https://github.com/knsv/mermaid/issues/203)
 - allow phantomjs \>=1.9.x [\#201](https://github.com/knsv/mermaid/issues/201)
 - syntax for venn diagrams? [\#200](https://github.com/knsv/mermaid/issues/200)
 - Broken CLI Graphs? \(v0.5.1\) [\#196](https://github.com/knsv/mermaid/issues/196)
@@ -650,7 +662,7 @@ By doing this clicks and tags are again allowed.
 - Last word in comment boxes getting cut off by word wrap library : \( [\#195](https://github.com/knsv/mermaid/issues/195)
 - Escaping characters in sequence diagram [\#193](https://github.com/knsv/mermaid/issues/193)
 - SVG foreignObject rendering [\#180](https://github.com/knsv/mermaid/issues/180)
-- IE9 issue  [\#179](https://github.com/knsv/mermaid/issues/179)
+- IE9 issue [\#179](https://github.com/knsv/mermaid/issues/179)
 - inoperable in an AMD/requirejs environment: IPython Notebook [\#127](https://github.com/knsv/mermaid/issues/127)
 - \[Parser\] Hyphen in participant name bring TypeError [\#74](https://github.com/knsv/mermaid/issues/74)
 
@@ -663,6 +675,7 @@ By doing this clicks and tags are again allowed.
 - Update phantomscript.js [\#182](https://github.com/knsv/mermaid/pull/182) ([phairow](https://github.com/phairow))
 
 ## [0.5.1](https://github.com/knsv/mermaid/tree/0.5.1) (2015-06-21)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.0...0.5.1)
 
 **Implemented enhancements:**
@@ -699,6 +712,7 @@ By doing this clicks and tags are again allowed.
 - Remove moot `version` property from bower.json [\#172](https://github.com/knsv/mermaid/pull/172) ([kkirsche](https://github.com/kkirsche))
 
 ## [0.5.0](https://github.com/knsv/mermaid/tree/0.5.0) (2015-06-07)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.4.0...0.5.0)
 
 **Implemented enhancements:**
@@ -734,6 +748,7 @@ By doing this clicks and tags are again allowed.
 - Use a library-level variable for assigning ids [\#134](https://github.com/knsv/mermaid/pull/134) ([bollwyvl](https://github.com/bollwyvl))
 
 ## [0.4.0](https://github.com/knsv/mermaid/tree/0.4.0) (2015-03-01)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.3.5...0.4.0)
 
 **Implemented enhancements:**
@@ -752,9 +767,11 @@ By doing this clicks and tags are again allowed.
 - Internet Explorer Support [\#99](https://github.com/knsv/mermaid/issues/99)
 
 ## [0.3.5](https://github.com/knsv/mermaid/tree/0.3.5) (2015-02-15)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.3.4...0.3.5)
 
 ## [0.3.4](https://github.com/knsv/mermaid/tree/0.3.4) (2015-02-15)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.3.3...0.3.4)
 
 **Implemented enhancements:**
@@ -785,6 +802,7 @@ By doing this clicks and tags are again allowed.
 - Ignore all files except the license and dist/ folder when installing with Bower. [\#112](https://github.com/knsv/mermaid/pull/112) ([jasonbellamy](https://github.com/jasonbellamy))
 
 ## [0.3.3](https://github.com/knsv/mermaid/tree/0.3.3) (2015-01-25)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.3.2...0.3.3)
 
 **Implemented enhancements:**
@@ -805,6 +823,7 @@ By doing this clicks and tags are again allowed.
 - fix html tags in example usage [\#100](https://github.com/knsv/mermaid/pull/100) ([deiwin](https://github.com/deiwin))
 
 ## [0.3.2](https://github.com/knsv/mermaid/tree/0.3.2) (2015-01-11)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.3.1...0.3.2)
 
 **Implemented enhancements:**
@@ -827,6 +846,7 @@ By doing this clicks and tags are again allowed.
 - Template change [\#88](https://github.com/knsv/mermaid/pull/88) ([gkchic](https://github.com/gkchic))
 
 ## [0.3.1](https://github.com/knsv/mermaid/tree/0.3.1) (2015-01-05)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.3.0...0.3.1)
 
 **Implemented enhancements:**
@@ -849,6 +869,7 @@ By doing this clicks and tags are again allowed.
 - Add apostrophe & 'and' [\#72](https://github.com/knsv/mermaid/pull/72) ([sudodoki](https://github.com/sudodoki))
 
 ## [0.3.0](https://github.com/knsv/mermaid/tree/0.3.0) (2014-12-22)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.16...0.3.0)
 
 **Implemented enhancements:**
@@ -871,6 +892,7 @@ By doing this clicks and tags are again allowed.
 - Allow special symbols for direction along with acronyms [\#66](https://github.com/knsv/mermaid/pull/66) ([vijay40](https://github.com/vijay40))
 
 ## [0.2.16](https://github.com/knsv/mermaid/tree/0.2.16) (2014-12-15)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.15...0.2.16)
 
 **Fixed bugs:**
@@ -891,11 +913,12 @@ By doing this clicks and tags are again allowed.
 - New grammar will allow statements ending without semicolon as disccused in Issue \#38 [\#63](https://github.com/knsv/mermaid/pull/63) ([vijay40](https://github.com/vijay40))
 - Class based styling [\#62](https://github.com/knsv/mermaid/pull/62) ([bjowes](https://github.com/bjowes))
 - Fix typos [\#60](https://github.com/knsv/mermaid/pull/60) ([sublimino](https://github.com/sublimino))
-- Included .DS\_Store in gitignore [\#57](https://github.com/knsv/mermaid/pull/57) ([alvynmcq](https://github.com/alvynmcq))
+- Included .DS_Store in gitignore [\#57](https://github.com/knsv/mermaid/pull/57) ([alvynmcq](https://github.com/alvynmcq))
 - Improves readability discussed in issue \#38 [\#56](https://github.com/knsv/mermaid/pull/56) ([vijay40](https://github.com/vijay40))
 - Added a linting task for gulp [\#43](https://github.com/knsv/mermaid/pull/43) ([serv](https://github.com/serv))
 
 ## [0.2.15](https://github.com/knsv/mermaid/tree/0.2.15) (2014-12-05)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.14...0.2.15)
 
 **Fixed bugs:**
@@ -911,13 +934,15 @@ By doing this clicks and tags are again allowed.
 
 **Merged pull requests:**
 
-- Include bower\_components/ to .gitignore [\#33](https://github.com/knsv/mermaid/pull/33) ([serv](https://github.com/serv))
+- Include bower_components/ to .gitignore [\#33](https://github.com/knsv/mermaid/pull/33) ([serv](https://github.com/serv))
 - Fixed reference to Git repo. [\#32](https://github.com/knsv/mermaid/pull/32) ([guyellis](https://github.com/guyellis))
 
 ## [0.2.14](https://github.com/knsv/mermaid/tree/0.2.14) (2014-12-03)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.13...0.2.14)
 
 ## [0.2.13](https://github.com/knsv/mermaid/tree/0.2.13) (2014-12-03)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.10...0.2.13)
 
 **Implemented enhancements:**
@@ -932,9 +957,11 @@ By doing this clicks and tags are again allowed.
 - Support unicode chars in labels [\#9](https://github.com/knsv/mermaid/issues/9)
 
 ## [0.2.10](https://github.com/knsv/mermaid/tree/0.2.10) (2014-12-01)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.9...0.2.10)
 
 ## [0.2.9](https://github.com/knsv/mermaid/tree/0.2.9) (2014-12-01)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.8...0.2.9)
 
 **Closed issues:**
@@ -947,9 +974,11 @@ By doing this clicks and tags are again allowed.
 - Allow unicode chars in labels [\#13](https://github.com/knsv/mermaid/pull/13) ([codebeige](https://github.com/codebeige))
 
 ## [0.2.8](https://github.com/knsv/mermaid/tree/0.2.8) (2014-12-01)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.7...0.2.8)
 
 ## [0.2.7](https://github.com/knsv/mermaid/tree/0.2.7) (2014-12-01)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.6...0.2.7)
 
 **Closed issues:**
@@ -957,9 +986,11 @@ By doing this clicks and tags are again allowed.
 - Provide parser as separate module [\#4](https://github.com/knsv/mermaid/issues/4)
 
 ## [0.2.6](https://github.com/knsv/mermaid/tree/0.2.6) (2014-11-27)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.5...0.2.6)
 
 ## [0.2.5](https://github.com/knsv/mermaid/tree/0.2.5) (2014-11-27)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.4...0.2.5)
 
 **Merged pull requests:**
@@ -967,21 +998,27 @@ By doing this clicks and tags are again allowed.
 - Added new shapes! [\#1](https://github.com/knsv/mermaid/pull/1) ([bjowes](https://github.com/bjowes))
 
 ## [0.2.4](https://github.com/knsv/mermaid/tree/0.2.4) (2014-11-25)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.3...0.2.4)
 
 ## [0.2.3](https://github.com/knsv/mermaid/tree/0.2.3) (2014-11-24)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.2...0.2.3)
 
 ## [0.2.2](https://github.com/knsv/mermaid/tree/0.2.2) (2014-11-22)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.1...0.2.2)
 
 ## [0.2.1](https://github.com/knsv/mermaid/tree/0.2.1) (2014-11-22)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.0...0.2.1)
 
 ## [0.2.0](https://github.com/knsv/mermaid/tree/0.2.0) (2014-11-22)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.1.1...0.2.0)
 
 ## [0.1.1](https://github.com/knsv/mermaid/tree/0.1.1) (2014-11-17)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.1.0...0.1.1)
 
 ## [0.1.0](https://github.com/knsv/mermaid/tree/0.1.0) (2014-11-16)
diff --git a/docs/Configuration.md b/docs/Configuration.md
index dcb50a5a9..dfa3edc24 100644
--- a/docs/Configuration.md
+++ b/docs/Configuration.md
@@ -1,27 +1,20 @@
 # Configuration
 
-Configuration is the second half of Mermaid, after deployment. Together Deployment and Configuration constitute the whole of Mermaid. 
+Configuration is the second half of Mermaid, after deployment. Together Deployment and Configuration constitute the whole of Mermaid.
 
-This section will introduce the different methods of configuring of the behaviors and appearances of Mermaid Diagrams. 
-The Following are the most commonly used methods, and are all tied to Mermaid [Deployment](./n00b-gettingStarted.md) methods. 
+This section will introduce the different methods of configuring of the behaviors and appearances of Mermaid Diagrams.
+The Following are the most commonly used methods, and are all tied to Mermaid [Deployment](./n00b-gettingStarted.md) methods.
 
 ## Configuration Section in the [Live Editor](https://mermaid.live/).
 
-
-## The `initialize()` call, for when Mermaid is called via an API, or through a <script> tag. 
-
+## The `initialize()` call, for when Mermaid is called via an API, or through a <script> tag.
 
 ## [Directives](./directives.md),
 
-allows the limited reconfiguration of a diagram just before it is rendered. It can alter the font style, color and other aesthetic aspects of the diagram. you can pass a directive alongside your definition inside `%%{ }%%`, either above or below your diagram definition. 
+allows the limited reconfiguration of a diagram just before it is rendered. It can alter the font style, color and other aesthetic aspects of the diagram. you can pass a directive alongside your definition inside `%%{ }%%`, either above or below your diagram definition.
 
 ## Theme Creation:
-An application of using Directives to change [Themes](./theming.md). `Theme` is an value within mermaid's configuration that dictates the color scheme for diagrams. 
 
+An application of using Directives to change [Themes](./theming.md). `Theme` is an value within mermaid's configuration that dictates the color scheme for diagrams.
 
 If you are interested in altering and customizing your Mermaid Diagrams, you will find the methods and values available for [Configuration](./Setup.md) here. It includes themes
-
-
-
-
-
diff --git a/docs/README.md b/docs/README.md
index 0ad50e013..fa1d1bffa 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -4,8 +4,7 @@
 
 It is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
 
->If you are familiar with Markdown you should have no problem learning [Mermaid's Syntax](./n00b-syntaxReference.md).
-
+> If you are familiar with Markdown you should have no problem learning [Mermaid's Syntax](./n00b-syntaxReference.md).
 
 <img src="img/header.png" alt="" />
 
@@ -14,23 +13,23 @@ It is a JavaScript based diagramming and charting tool that renders Markdown-ins
 [![Build Status](https://travis-ci.org/mermaid-js/mermaid.svg?branch=master)](https://travis-ci.org/mermaid-js/mermaid) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
 
 <!-- Mermaid book banner -->
+
 [![Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!](img/book-banner-post-release.jpg)](https://mermaid-js.github.io/mermaid/landing/)
 
-
 <!-- <Main description> -->
-Mermaid is a JavaScript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams.  The main purpose of Mermaid is to help documentation catch up with development.
+
+Mermaid is a JavaScript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development.
 
 > Doc-Rot is a Catch-22 that Mermaid helps to solve.
 
 Diagramming and documentation costs precious developer time and gets outdated quickly.
 But not having diagrams or docs ruins productivity and hurts organizational learning.<br/>
 Mermaid addresses this problem by enabling users to create easily modifiable diagrams, it can also be made part of production scripts (and other pieces of code).<br/>
- <br/>
+<br/>
 Mermaid allows even non-programmers to easily create detailed and diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
 [Tutorials](./Tutorials.md) has video tutorials.
 Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./integrations.md).
 
-
 For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./n00b-overview.md) and [Usage](./usage.md).
 
 🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/docs/development.md) | 📜 [Version Log](./CHANGELOG.md) | 🔌 [Plug-Ins](./integrations.md)
@@ -43,7 +42,6 @@ For a more detailed introduction to Mermaid and some of its more basic uses, loo
 
 In our release process we rely heavily on visual regression tests using [applitools](https://applitools.com/). Applitools is a great service which has been easy to use and integrate with our tests.
 
-
 <a href="https://applitools.com/">
 <svg width="170" height="32" viewBox="0 0 170 32" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" maskUnits="userSpaceOnUse" x="27" y="0" width="143" height="32"><path fill-rule="evenodd" clip-rule="evenodd" d="M27.732.227h141.391v31.19H27.733V.227z" fill="#fff"></path></mask><g mask="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M153.851 22.562l1.971-3.298c1.291 1.219 3.837 2.402 5.988 2.402 1.971 0 2.903-.753 2.903-1.829 0-2.832-10.253-.502-10.253-7.313 0-2.904 2.51-5.45 7.099-5.45 2.904 0 5.234 1.004 6.955 2.367l-1.829 3.226c-1.039-1.075-3.011-2.008-5.126-2.008-1.65 0-2.725.717-2.725 1.685 0 2.546 10.289.395 10.289 7.386 0 3.19-2.724 5.52-7.528 5.52-3.012 0-5.916-1.003-7.744-2.688zm-5.7 2.259h4.553V.908h-4.553v23.913zm-6.273-8.676c0-2.689-1.578-5.02-4.446-5.02-2.832 0-4.409 2.331-4.409 5.02 0 2.724 1.577 5.055 4.409 5.055 2.868 0 4.446-2.33 4.446-5.055zm-13.588 0c0-4.912 3.442-9.07 9.142-9.07 5.736 0 9.178 4.158 9.178 9.07 0 4.911-3.442 9.106-9.178 9.106-5.7 0-9.142-4.195-9.142-9.106zm-5.628 0c0-2.689-1.577-5.02-4.445-5.02-2.832 0-4.41 2.331-4.41 5.02 0 2.724 1.578 5.055 4.41 5.055 2.868 0 4.445-2.33 4.445-5.055zm-13.587 0c0-4.912 3.441-9.07 9.142-9.07 5.736 0 9.178 4.158 9.178 9.07 0 4.911-3.442 9.106-9.178 9.106-5.701 0-9.142-4.195-9.142-9.106zm-8.425 4.338v-8.999h-2.868v-3.98h2.868V2.773h4.553v4.733h3.514v3.979h-3.514v7.78c0 1.111.574 1.936 1.578 1.936.681 0 1.326-.251 1.577-.538l.968 3.478c-.681.609-1.9 1.11-3.8 1.11-3.191 0-4.876-1.648-4.876-4.767zm-8.962 4.338h4.553V7.505h-4.553V24.82zm-.43-21.905a2.685 2.685 0 012.688-2.69c1.506 0 2.725 1.184 2.725 2.69a2.724 2.724 0 01-2.725 2.724c-1.47 0-2.688-1.219-2.688-2.724zM84.482 24.82h4.553V.908h-4.553v23.913zm-6.165-8.676c0-2.976-1.793-5.02-4.41-5.02-1.47 0-3.119.825-3.908 1.973v6.094c.753 1.111 2.438 2.008 3.908 2.008 2.617 0 4.41-2.044 4.41-5.055zm-8.318 6.453v8.82h-4.553V7.504H70v2.187c1.327-1.685 3.227-2.618 5.342-2.618 4.446 0 7.672 3.299 7.672 9.07 0 5.773-3.226 9.107-7.672 9.107-2.043 0-3.907-.86-5.342-2.653zm-10.718-6.453c0-2.976-1.793-5.02-4.41-5.02-1.47 0-3.119.825-3.908 1.973v6.094c.753 1.111 2.438 2.008 3.908 2.008 2.617 0 4.41-2.044 4.41-5.055zm-8.318 6.453v8.82H46.41V7.504h4.553v2.187c1.327-1.685 3.227-2.618 5.342-2.618 4.446 0 7.672 3.299 7.672 9.07 0 5.773-3.226 9.107-7.672 9.107-2.043 0-3.908-.86-5.342-2.653zm-11.758-1.936V18.51c-.753-1.004-2.187-1.542-3.657-1.542-1.793 0-3.263.968-3.263 2.617 0 1.65 1.47 2.582 3.263 2.582 1.47 0 2.904-.502 3.657-1.506zm0 4.159v-1.829c-1.183 1.434-3.227 2.259-5.485 2.259-2.761 0-5.988-1.864-5.988-5.736 0-4.087 3.227-5.593 5.988-5.593 2.33 0 4.337.753 5.485 2.115V13.85c0-1.756-1.506-2.904-3.8-2.904-1.829 0-3.55.717-4.984 2.044L28.63 9.8c2.115-1.901 4.84-2.726 7.564-2.726 3.98 0 7.6 1.578 7.6 6.561v11.186h-4.588z" fill="#00A298"></path></g><path fill-rule="evenodd" clip-rule="evenodd" d="M14.934 16.177c0 1.287-.136 2.541-.391 3.752-1.666-1.039-3.87-2.288-6.777-3.752 2.907-1.465 5.11-2.714 6.777-3.753.255 1.211.39 2.466.39 3.753m4.6-7.666V4.486a78.064 78.064 0 01-4.336 3.567c-1.551-2.367-3.533-4.038-6.14-5.207C11.1 4.658 12.504 6.7 13.564 9.262 5.35 15.155 0 16.177 0 16.177s5.35 1.021 13.564 6.915c-1.06 2.563-2.463 4.603-4.507 6.415 2.607-1.169 4.589-2.84 6.14-5.207a77.978 77.978 0 014.336 3.568v-4.025s-.492-.82-2.846-2.492c.6-1.611.93-3.354.93-5.174a14.8 14.8 0 00-.93-5.174c2.354-1.673 2.846-2.492 2.846-2.492" fill="#00A298"></path></svg>
 </a>
@@ -158,6 +156,7 @@ journey
       Go downstairs: 5: Me
       Sit down: 5: Me
 ```
+
 ![Journey diagram](img/user-journey.png)
 
 ## Installation
@@ -179,13 +178,14 @@ Replace `<version>` with the desired version number.
 Latest Version: [https://unpkg.com/browse/mermaid@8.8.0/](https://unpkg.com/browse/mermaid@8.8.0/)
 
 ## Deploying Mermaid
+
 To Deploy Mermaid:
 
 1. You will need to install node v16, which would have npm
 2. Download yarn using npm
 3. Enter the following command: `yarn add mermaid`
 4. You can then add mermaid as a dev dependency using this command:
-    `yarn add --dev mermaid`
+   `yarn add --dev mermaid`
 
 ### [Mermaid API](./Setup.md):
 
@@ -193,12 +193,14 @@ To Deploy Mermaid:
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
-<script>mermaid.initialize({startOnLoad:true});
+<script>
+  mermaid.initialize({ startOnLoad: true });
 </script>
 ```
+
 **Doing so will command the mermaid parser to look for the `<div>` tags with `class="mermaid"`. From these tags mermaid will try to read the diagram/chart definitions and render them into SVG charts.**
 
- **Examples can be found at** [Other examples](/examples)
+**Examples can be found at** [Other examples](/examples)
 
 ## Sibling projects
 
@@ -250,6 +252,7 @@ We recommend you to install [editor plugins](https://eslint.org/docs/user-guide/
 ```sh
 yarn test
 ```
+
 Manual test in browser: open `dist/index.html`
 
 ### Release
@@ -280,21 +283,22 @@ Detailed information about how to contribute can be found in the [contribution g
 
 For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitise the incoming code and keep refining the process but it is hard to guarantee that there are no loop holes.
 
-As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing JavaScript in the code from  being executed. This is a great step forward for better security.
+As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing JavaScript in the code from being executed. This is a great step forward for better security.
 
-*Unfortunately you can not have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code.*
+_Unfortunately you can not have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code._
 
 ## Reporting vulnerabilities
+
 To report a vulnerability, please e-mail security@mermaid.live with a description of the issue, the steps you took to create the issue, affected versions, and if known, mitigations for the issue.
 
 ## Appreciation
+
 A quick note from Knut Sveidqvist:
->*Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!*
->*Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering.*
->*Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017.*
+
+> _Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!_ >_Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering._ >_Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
 >
->*Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!*
+> _Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!_
 
 ---
 
-*Mermaid was created by Knut Sveidqvist for easier documentation.*
+_Mermaid was created by Knut Sveidqvist for easier documentation._
diff --git a/docs/Setup.md b/docs/Setup.md
index bc02f194e..a9d8e87e2 100644
--- a/docs/Setup.md
+++ b/docs/Setup.md
@@ -64,12 +64,12 @@ Theme , the CSS style sheet
 
 **Notes:**
 
--   Trace: 0
--   Debug: 1
--   Info: 2
--   Warn: 3
--   Error: 4
--   Fatal: 5 (default)
+- Trace: 0
+- Debug: 1
+- Info: 2
+- Warn: 3
+- Error: 4
+- Fatal: 5 (default)
 
 ## securityLevel
 
@@ -79,13 +79,13 @@ Theme , the CSS style sheet
 
 **Notes**:
 
--   **strict**: (**default**) tags in text are encoded, click functionality is disabled
--   **loose**: tags in text are allowed, click functionality is enabled
--   **antiscript**: html tags in text are allowed, (only script element is removed), click
-    functionality is enabled
--   **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This
-    prevent any JavaScript from running in the context. This may hinder interactive functionality
-    of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc.
+- **strict**: (**default**) tags in text are encoded, click functionality is disabled
+- **loose**: tags in text are allowed, click functionality is enabled
+- **antiscript**: html tags in text are allowed, (only script element is removed), click
+  functionality is enabled
+- **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This
+  prevent any JavaScript from running in the context. This may hinder interactive functionality
+  of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc.
 
 ## startOnLoad
 
@@ -1420,7 +1420,7 @@ function _Default value: At default, will mirror Global Config_
 
 ### Parameters
 
--   `conf` **MermaidConfig** The base currentConfig to use as siteConfig
+- `conf` **MermaidConfig** The base currentConfig to use as siteConfig
 
 Returns **[object][5]** The siteConfig
 
@@ -1450,7 +1450,7 @@ corresponding siteConfig value.
 
 ### Parameters
 
--   `conf` **any** The potential currentConfig
+- `conf` **any** The potential currentConfig
 
 Returns **any** The currentConfig merged with the sanitized conf
 
@@ -1473,14 +1473,14 @@ $(function () {
 
 ### Parameters
 
--   `id` **[string][6]** The id of the element to be rendered
--   `text` **[string][6]** The graph definition
--   `cb` **function (svgCode: [string][6], bindFunctions: function (element: [Element][7]): void): void** 
--   `container` **[Element][7]** Selector to element in which a div with the graph temporarily will be
-      inserted. If one is provided a hidden div will be inserted in the body of the page instead. The
-      element will be removed when rendering is completed.
+- `id` **[string][6]** The id of the element to be rendered
+- `text` **[string][6]** The graph definition
+- `cb` **function (svgCode: [string][6], bindFunctions: function (element: [Element][7]): void): void**
+- `container` **[Element][7]** Selector to element in which a div with the graph temporarily will be
+  inserted. If one is provided a hidden div will be inserted in the body of the page instead. The
+  element will be removed when rendering is completed.
 
-Returns **void** 
+Returns **void**
 
 ## getConfig
 
@@ -1507,7 +1507,7 @@ options in-place
 
 ### Parameters
 
--   `options` **any** The potential setConfig parameter
+- `options` **any** The potential setConfig parameter
 
 ## addDirective
 
@@ -1515,7 +1515,7 @@ Pushes in a directive to the configuration
 
 ### Parameters
 
--   `directive` **[object][5]** The directive to push in
+- `directive` **[object][5]** The directive to push in
 
 ## reset
 
@@ -1535,17 +1535,17 @@ Pushes in a directive to the configuration
 
 ### Parameters
 
--   `config`   (optional, default `siteConfig`)
+- `config` (optional, default `siteConfig`)
 
-Returns **void** 
+Returns **void**
 
 ## initialize
 
 ### Parameters
 
--   `options` **MermaidConfig** 
+- `options` **MermaidConfig**
 
-## 
+##
 
 ## mermaidAPI configuration defaults
 
@@ -1610,15 +1610,9 @@ Returns **void**
 ```
 
 [1]: https://github.com/mermaid-js/mermaid/blob/develop/src/mermaidAPI.js
-
 [2]: Setup.md?id=render
-
 [3]: 8.6.0_docs.md
-
 [4]: #mermaidapi-configuration-defaults
-
 [5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
-
 [6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
-
 [7]: https://developer.mozilla.org/docs/Web/API/Element
diff --git a/docs/Tutorials.md b/docs/Tutorials.md
index 40b5a307e..f4570d8b5 100644
--- a/docs/Tutorials.md
+++ b/docs/Tutorials.md
@@ -1,13 +1,13 @@
 # Tutorials
 
-This is  list of publicly available Tutorials for using Mermaid.JS . This is intended as a basic introduction for the use of the Live Editor for generating diagrams, and deploying Mermaid.JS through HTML.
+This is list of publicly available Tutorials for using Mermaid.JS . This is intended as a basic introduction for the use of the Live Editor for generating diagrams, and deploying Mermaid.JS through HTML.
 
 **Note that these tutorials might display an older interface, but the usage of the live-editor will largely be the same.**
 
 For most purposes, you can use the [Live Editor](https://mermaid-js.github.io/mermaid-live-editor), to quickly and easily render a diagram.
 
-
 ## Live-Editor Tutorials
+
 The definitions that can be generated the Live-Editor are also backwards-compatible as of version 8.7.0.
 
 [Chris Chinchilla: Hands on - Text-based diagrams with Mermaid](https://www.youtube.com/watch?v=4_LdV1cs2sA)
@@ -20,8 +20,8 @@ The definitions that can be generated the Live-Editor are also backwards-compati
 
 [Eddie Jaoude: Can you code your diagrams?](https://www.youtube.com/watch?v=9HZzKkAqrX8)
 
-
 ## Mermaid with HTML
+
 Examples are provided in [Getting Started](n00b-gettingStarted.md)
 
 **CodePen Examples:**
@@ -32,7 +32,6 @@ https://codepen.io/tdkn/pen/vZxQzd
 
 https://codepen.io/janzeteachesit/pen/OWWZKN
 
-
 ## Mermaid with Text Area
 
 https://codepen.io/Ryuno-Ki/pen/LNxwgR
@@ -43,7 +42,6 @@ https://codepen.io/Ryuno-Ki/pen/LNxwgR
 
 [K8s.dev blog: Improve your documentation with Mermaid.js diagrams](https://www.kubernetes.dev/blog/2021/12/01/improve-your-documentation-with-mermaid.js-diagrams/)
 
-
 ## Jupyter Integration with mermaid-js
 
 Here's an example of Python integration with mermaid-js which uses the mermaid.ink service, that displays the graph in a Jupyter notebook.
diff --git a/docs/_navbar.md b/docs/_navbar.md
index 7156cccdb..c77bde3bd 100644
--- a/docs/_navbar.md
+++ b/docs/_navbar.md
@@ -1,13 +1,13 @@
-* Getting started
+- Getting started
 
-  * [Quick start](quickstart.md)
-  * [Writing more pages](more-pages.md)
-  * [Custom navbar](custom-navbar.md)
-  * [Cover page](cover.md)
+  - [Quick start](quickstart.md)
+  - [Writing more pages](more-pages.md)
+  - [Custom navbar](custom-navbar.md)
+  - [Cover page](cover.md)
 
-* Configuration
-  * [Configuration](configuration.md)
-  * [Themes](themes.md)
-  * [Using plugins](plugins.md)
-  * [Markdown configuration](markdown.md)
-  * [Language highlight](language-highlight.md)
\ No newline at end of file
+- Configuration
+  - [Configuration](configuration.md)
+  - [Themes](themes.md)
+  - [Using plugins](plugins.md)
+  - [Markdown configuration](markdown.md)
+  - [Language highlight](language-highlight.md)
diff --git a/docs/_sidebar.md b/docs/_sidebar.md
index 0a8b44995..54ef50afb 100644
--- a/docs/_sidebar.md
+++ b/docs/_sidebar.md
@@ -5,6 +5,7 @@
   - [Syntax and Configuration](n00b-syntaxReference.md)
 
 - 📊 Diagram Syntax
+
   - [Flowchart](flowchart.md)
   - [Sequence Diagram](sequenceDiagram.md)
   - [Class Diagram](classDiagram.md)
@@ -30,6 +31,7 @@
   - [Advanced usage](n00b-advanced.md)
 
 - 📚 Misc
+
   - [Use-Cases and Integrations](integrations.md)
   - [FAQ](faq.md)
 
diff --git a/docs/accessibility.md b/docs/accessibility.md
index 9bac6d836..c0aa9fa4b 100644
--- a/docs/accessibility.md
+++ b/docs/accessibility.md
@@ -3,21 +3,23 @@
 **Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/accessibility.md)
 
 ## Accessibility
+
 Now with Mermaid library is in much wider use, we have started to work towwards more accessible features, based on the feedback from the community.
 
 TO begin with, we have added a new feature to Mermaid library, which is to support accessibility options, **Accessibility Title** and **Accessibility Description**.
 
 This support for accessibility options is available for all the diagrams/chart types. Also, we have tired to keep the same format for the accessibility options, so that it is easy to understand and maintain.
 
-
 ## Defining Accessibility Options
 
 ### Single line accessibility values
-The diagram authors can now add the accessibility options in the diagram definition, using the `accTitle` and `accDescr` keywords, where each keyword is followed by `:` and the string value for title and description like:
--  `accTitle: "Your Accessibility Title"` or
--  `accDescr: "Your Accessibility Description"`
 
-**When these two options are defined, they will  add a coressponding  `<title>` and `<desc>` tag in the SVG.**
+The diagram authors can now add the accessibility options in the diagram definition, using the `accTitle` and `accDescr` keywords, where each keyword is followed by `:` and the string value for title and description like:
+
+- `accTitle: "Your Accessibility Title"` or
+- `accDescr: "Your Accessibility Description"`
+
+**When these two options are defined, they will add a coressponding `<title>` and `<desc>` tag in the SVG.**
 
 Let us take a look at the following example with a flowchart diagram:
 
@@ -30,24 +32,23 @@ Let us take a look at the following example with a flowchart diagram:
       C -->|One| D[Result 1]
 
 ```
+
 See in the code snippet above, the `accTitle` and `accDescr` are defined in the diagram definition. They result in the following tags in SVG code:
 
 ![Accessibility options rendered inside SVG](img/accessibility-div-example.png)
 
-
 ### Multi-line Accessibility title/description
+
 You can also define the accessibility options in a multi-line format, where the keyword is followed by opening curly bracket `{` and then mutltile lines, followed by a closing `}`.
 
-`accTitle: My single line title value` (***single line format***)
+`accTitle: My single line title value` (**_single line format_**)
 
 vs
 
-`accDescr: {
-  My multi-line description
-  of the diagram
-}` (***multi-line format***)
+`accDescr: { My multi-line description of the diagram }` (**_multi-line format_**)
 
 Let us look at it in the following example, with same flowchart:
+
 ```mermaid-example
    graph LR
       accTitle: Big decisions
@@ -62,6 +63,7 @@ Let us look at it in the following example, with same flowchart:
       C -->|One| D[Result 1]
 
 ```
+
 See in the code snippet above, the `accTitle` and `accDescr` are defined in the diagram definition. They result in the following tags in SVG code:
 
 ![Accessibility options rendered inside SVG](img/accessibility-div-example-2.png)
@@ -116,21 +118,21 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the
 
 #### User Journey Diagram
 
-  ```mermaid-example
-    journey
-        accTitle: My User Journey Diagram
-        accDescr: My User Journey Diagram Description
+```mermaid-example
+  journey
+      accTitle: My User Journey Diagram
+      accDescr: My User Journey Diagram Description
 
-        title My working day
-        section Go to work
-          Make tea: 5: Me
-          Go upstairs: 3: Me
-          Do work: 1: Me, Cat
-        section Go home
-          Go downstairs: 5: Me
-          Sit down: 5: Me
+      title My working day
+      section Go to work
+        Make tea: 5: Me
+        Go upstairs: 3: Me
+        Do work: 1: Me, Cat
+      section Go home
+        Go downstairs: 5: Me
+        Sit down: 5: Me
 
-  ```
+```
 
 #### Gantt Chart
 
@@ -164,51 +166,45 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the
     "Iron" :  5
 
 ```
+
 #### Requirement Diagram
 
-  ```mermaid-example
-    requirementDiagram
-        accTitle: My Requirement Diagram
-        accDescr: My Requirement Diagram Description
+```mermaid-example
+  requirementDiagram
+      accTitle: My Requirement Diagram
+      accDescr: My Requirement Diagram Description
 
-         requirement test_req {
-    id: 1
-    text: the test text.
-    risk: high
-    verifymethod: test
-    }
+       requirement test_req {
+  id: 1
+  text: the test text.
+  risk: high
+  verifymethod: test
+  }
 
-    element test_entity {
-    type: simulation
-    }
+  element test_entity {
+  type: simulation
+  }
 
-    test_entity - satisfies -> test_req
+  test_entity - satisfies -> test_req
 
-  ```
+```
 
 #### Gitgraph
 
-  ```mermaid-example
-    gitGraph
-        accTitle: My Gitgraph Accessibility Title
-        accDescr: My Gitgraph Accessibility Description
-
-       commit
-       commit
-       branch develop
-       checkout develop
-       commit
-       commit
-       checkout main
-       merge develop
-       commit
-       commit
-
-  ```
-
-
-
-
-
+```mermaid-example
+  gitGraph
+      accTitle: My Gitgraph Accessibility Title
+      accDescr: My Gitgraph Accessibility Description
 
+     commit
+     commit
+     branch develop
+     checkout develop
+     commit
+     commit
+     checkout main
+     merge develop
+     commit
+     commit
 
+```
diff --git a/docs/breakingChanges.md b/docs/breakingChanges.md
index 7b94bf442..41b411df6 100644
--- a/docs/breakingChanges.md
+++ b/docs/breakingChanges.md
@@ -27,13 +27,13 @@ mermaid.initialize({
 In old versions you needed to reference a CSS file in your HTML:
 
 ```html
-<link rel="stylesheet" href="mermaid.min.css">
+<link rel="stylesheet" href="mermaid.min.css" />
 ```
 
 or
 
 ```html
-<link rel="stylesheet" href="mermaid.forest.min.css">
+<link rel="stylesheet" href="mermaid.forest.min.css" />
 ```
 
 Now it is not needed, and there are no more CSS files in the distribution files.
@@ -42,8 +42,8 @@ You just:
 
 ```javascript
 mermaid.initialize({
-    theme: 'forest'
-})
+  theme: 'forest',
+});
 ```
 
 and it works like a charm because now the CSS is inline with the SVG to allow simpler portability.
diff --git a/docs/c4c.md b/docs/c4c.md
index 62c19c8fd..45e5c3c99 100644
--- a/docs/c4c.md
+++ b/docs/c4c.md
@@ -1,10 +1,9 @@
 # C4 Diagrams
 
 **Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/gitgraph.md)
+
 > C4 Diagram: This is an experimental diagram for now. The syntax and properties can change in future releases. Proper documentation will be provided when the syntax is stable.
 
-
-
 Mermaid's c4 diagram syntax is compatible with plantUML. See example below:
 
 ```mermaid-example
@@ -12,32 +11,32 @@ Mermaid's c4 diagram syntax is compatible with plantUML. See example below:
       title System Context diagram for Internet Banking System
       Enterprise_Boundary(b0, "BankBoundary0") {
         Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
-        Person(customerB, "Banking Customer B")      
-        Person_Ext(customerC, "Banking Customer C", "desc")            
+        Person(customerB, "Banking Customer B")
+        Person_Ext(customerC, "Banking Customer C", "desc")
 
         Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
 
-        System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")  
+        System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
 
         Enterprise_Boundary(b1, "BankBoundary") {
-         
-          SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")      
 
-          System_Boundary(b2, "BankBoundary2") {  
-            System(SystemA, "Banking System A")  
-            System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")        
-          } 
+          SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
 
-          System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.") 
-          SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.") 
+          System_Boundary(b2, "BankBoundary2") {
+            System(SystemA, "Banking System A")
+            System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
+          }
 
-          Boundary(b3, "BankBoundary3", "boundary") {  
-            SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")        
-            SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.") 
+          System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
+          SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
+
+          Boundary(b3, "BankBoundary3", "boundary") {
+            SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
+            SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
           }
         }
       }
-      
+
       BiRel(customerA, SystemAA, "Uses")
       BiRel(SystemAA, SystemE, "Uses")
       Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
@@ -48,7 +47,7 @@ Mermaid's c4 diagram syntax is compatible with plantUML. See example below:
       UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
       UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
       UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
-      
+
       UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
 
 
@@ -58,11 +57,11 @@ For an example, see the source code demos/index.html
 
 5 types of C4 charts are supported.
 
- - System Context (C4Context)
- - Container diagram (C4Container)
- - Component diagram (C4Component)
- - Dynamic diagram (C4Dynamic)
- - Deployment diagram (C4Deployment)
+- System Context (C4Context)
+- Container diagram (C4Container)
+- Component diagram (C4Component)
+- Dynamic diagram (C4Dynamic)
+- Deployment diagram (C4Deployment)
 
 Please refer to the linked document [C4-PlantUML syntax](https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/README.md) for how to write the c4 diagram.
 
@@ -85,73 +84,71 @@ The following unfinished features are not supported in the short term.
 - [ ] link
 - [ ] Legend
 
-- [X] System Context
-- - [X] Person(alias, label, ?descr, ?sprite, ?tags, $link)
-- - [X] Person_Ext
-- - [X] System(alias, label, ?descr, ?sprite, ?tags, $link)
-- - [X] SystemDb
-- - [X] SystemQueue
-- - [X] System_Ext
-- - [X] SystemDb_Ext
-- - [X] SystemQueue_Ext
-- - [X] Boundary(alias, label, ?type, ?tags, $link)
-- - [X] Enterprise_Boundary(alias, label, ?tags, $link)
-- - [X] System_Boundary
+- [x] System Context
+- - [x] Person(alias, label, ?descr, ?sprite, ?tags, $link)
+- - [x] Person_Ext
+- - [x] System(alias, label, ?descr, ?sprite, ?tags, $link)
+- - [x] SystemDb
+- - [x] SystemQueue
+- - [x] System_Ext
+- - [x] SystemDb_Ext
+- - [x] SystemQueue_Ext
+- - [x] Boundary(alias, label, ?type, ?tags, $link)
+- - [x] Enterprise_Boundary(alias, label, ?tags, $link)
+- - [x] System_Boundary
 
-- [X] Container diagram
-- - [X] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
-- - [X] ContainerDb
-- - [X] ContainerQueue
-- - [X] Container_Ext
-- - [X] ContainerDb_Ext
-- - [X] ContainerQueue_Ext
-- - [X] Container_Boundary(alias, label, ?tags, $link)
+- [x] Container diagram
+- - [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
+- - [x] ContainerDb
+- - [x] ContainerQueue
+- - [x] Container_Ext
+- - [x] ContainerDb_Ext
+- - [x] ContainerQueue_Ext
+- - [x] Container_Boundary(alias, label, ?tags, $link)
 
-- [X] Component diagram
-- - [X] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
-- - [X] ComponentDb
-- - [X] ComponentQueue
-- - [X] Component_Ext
-- - [X] ComponentDb_Ext
-- - [X] ComponentQueue_Ext
+- [x] Component diagram
+- - [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
+- - [x] ComponentDb
+- - [x] ComponentQueue
+- - [x] Component_Ext
+- - [x] ComponentDb_Ext
+- - [x] ComponentQueue_Ext
 
-- [X] Dynamic diagram
-- - [X] RelIndex(index, from, to, label, ?tags, $link)
-
-- [X] Deployment diagram
-- - [X] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
-- - [X] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
-- - [X] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
-- - [X] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
-
-- [X] Relationship Types
-- - [X] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
-- - [X] BiRel (bidirectional relationship)
-- - [X] Rel_U, Rel_Up
-- - [X] Rel_D, Rel_Down
-- - [X] Rel_L, Rel_Left
-- - [X] Rel_R, Rel_Right
-- - [X] Rel_Back
-- - [X] RelIndex  * Compatible with C4-Plantuml syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written.
+- [x] Dynamic diagram
+- - [x] RelIndex(index, from, to, label, ?tags, $link)
 
+- [x] Deployment diagram
+- - [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
+- - [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
+- - [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
+- - [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
 
+- [x] Relationship Types
+- - [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
+- - [x] BiRel (bidirectional relationship)
+- - [x] Rel_U, Rel_Up
+- - [x] Rel_D, Rel_Down
+- - [x] Rel_L, Rel_Left
+- - [x] Rel_R, Rel_Right
+- - [x] Rel_Back
+- - [x] RelIndex \* Compatible with C4-Plantuml syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written.
 
 - [ ] Custom tags/stereotypes support and skinparam updates
 - - [ ] AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend.
 - - [ ] AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new Relationship tag. The styles of the tagged relationships are updated and the tag is displayed in the calculated legend.
-- - [X] UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): This call updates the default style of the elements (component, ...) and creates no additional legend entry.
-- - [X] UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY): This call updates the default relationship colors and creates no additional legend entry. Two new parameters, offsetX and offsetY, are added to set the offset of the original position of the text.
+- - [x] UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): This call updates the default style of the elements (component, ...) and creates no additional legend entry.
+- - [x] UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY): This call updates the default relationship colors and creates no additional legend entry. Two new parameters, offsetX and offsetY, are added to set the offset of the original position of the text.
 - - [ ] RoundedBoxShape(): This call returns the name of the rounded box shape and can be used as ?shape argument.
 - - [ ] EightSidedShape(): This call returns the name of the eight sided shape and can be used as ?shape argument.
 - - [ ] DashedLine(): This call returns the name of the dashed line and can be used as ?lineStyle argument.
 - - [ ] DottedLine(): This call returns the name of the dotted line and can be used as ?lineStyle argument.
 - - [ ] BoldLine(): This call returns the name of the bold line and can be used as ?lineStyle argument.
-- - [X] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): New. This call updates the default c4ShapeInRow(4) and c4BoundaryInRow(2). 
+- - [x] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): New. This call updates the default c4ShapeInRow(4) and c4BoundaryInRow(2).
 
-
-There are two ways to assign parameters with question marks. One uses the non-named parameter assignment method in the order of the parameters, and the other uses the named parameter assignment method, where the name must start with a $ symbol. 
+There are two ways to assign parameters with question marks. One uses the non-named parameter assignment method in the order of the parameters, and the other uses the named parameter assignment method, where the name must start with a $ symbol.
 
 Example: UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY)
+
 ```
 UpdateRelStyle(customerA, bankA, "red", "blue", "-40", "60")
 UpdateRelStyle(customerA, bankA, $offsetX="-40", $offsetY="60", $lineColor="blue", $textColor="red")
@@ -166,32 +163,32 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
       title System Context diagram for Internet Banking System
       Enterprise_Boundary(b0, "BankBoundary0") {
         Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
-        Person(customerB, "Banking Customer B")      
-        Person_Ext(customerC, "Banking Customer C", "desc")            
+        Person(customerB, "Banking Customer B")
+        Person_Ext(customerC, "Banking Customer C", "desc")
 
         Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
 
-        System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")  
+        System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
 
         Enterprise_Boundary(b1, "BankBoundary") {
-         
-          SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")      
 
-          System_Boundary(b2, "BankBoundary2") {  
-            System(SystemA, "Banking System A")  
-            System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")        
-          } 
+          SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
 
-          System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.") 
-          SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.") 
+          System_Boundary(b2, "BankBoundary2") {
+            System(SystemA, "Banking System A")
+            System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
+          }
 
-          Boundary(b3, "BankBoundary3", "boundary") {  
-            SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")        
-            SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.") 
+          System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
+          SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
+
+          Boundary(b3, "BankBoundary3", "boundary") {
+            SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
+            SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
           }
         }
       }
-      
+
       BiRel(customerA, SystemAA, "Uses")
       BiRel(SystemAA, SystemE, "Uses")
       Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
@@ -202,7 +199,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
       UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
       UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
       UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
-      
+
       UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
 
 ```
@@ -228,28 +225,29 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
     System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
 
     Rel(customer, web_app, "Uses", "HTTPS")
-    UpdateRelStyle(customer, web_app, $offsetY="60", $offsetX="90")     
+    UpdateRelStyle(customer, web_app, $offsetY="60", $offsetX="90")
     Rel(customer, spa, "Uses", "HTTPS")
-    UpdateRelStyle(customer, spa, $offsetY="-40")    
+    UpdateRelStyle(customer, spa, $offsetY="-40")
     Rel(customer, mobile_app, "Uses")
-    UpdateRelStyle(customer, mobile_app, $offsetY="-30") 
+    UpdateRelStyle(customer, mobile_app, $offsetY="-30")
 
     Rel(web_app, spa, "Delivers")
-    UpdateRelStyle(web_app, spa, $offsetX="130") 
+    UpdateRelStyle(web_app, spa, $offsetX="130")
     Rel(spa, backend_api, "Uses", "async, JSON/HTTPS")
     Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS")
     Rel_Back(database, backend_api, "Reads from and writes to", "sync, JDBC")
 
     Rel(email_system, customer, "Sends e-mails to")
-    UpdateRelStyle(email_system, customer, $offsetX="-45")    
+    UpdateRelStyle(email_system, customer, $offsetX="-45")
     Rel(backend_api, email_system, "Sends e-mails using", "sync, SMTP")
-    UpdateRelStyle(backend_api, email_system, $offsetY="-60")    
+    UpdateRelStyle(backend_api, email_system, $offsetY="-60")
     Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
-    UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140") 
+    UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140")
 
 ```
 
 ## C4 Component diagram (C4Component)
+
 ```mermaid-example
     C4Component
     title Component diagram for Internet Banking System - API Application
@@ -277,7 +275,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
     Rel(ma, sign, "Uses", "JSON/HTTPS")
     Rel(ma, accounts, "Uses", "JSON/HTTPS")
 
-    UpdateRelStyle(spa, sign, $offsetY="-40") 
+    UpdateRelStyle(spa, sign, $offsetY="-40")
     UpdateRelStyle(spa, accounts, $offsetX="40", $offsetY="40")
 
     UpdateRelStyle(ma, sign, $offsetX="-90", $offsetY="40")
diff --git a/docs/developer-docs/configuration.md b/docs/developer-docs/configuration.md
index 300df178d..d248944dd 100644
--- a/docs/developer-docs/configuration.md
+++ b/docs/developer-docs/configuration.md
@@ -2,9 +2,9 @@
 
 When mermaid starts, configuration is extracted to determine a configuration to be used for a diagram. There are 3 sources for configuration:
 
-* The default configuration
-* Overrides at the site level are set by the initialize call, and will be applied to all diagrams in the site/app. The term for this is the **siteConfig**.
-* Directives - diagram authors can update select configuration parameters directly in the diagram code via directives. These are applied to the render config.
+- The default configuration
+- Overrides at the site level are set by the initialize call, and will be applied to all diagrams in the site/app. The term for this is the **siteConfig**.
+- Directives - diagram authors can update select configuration parameters directly in the diagram code via directives. These are applied to the render config.
 
 **The render config** is configuration that is used when rendering by applying these configurations.
 
diff --git a/docs/development.md b/docs/development.md
index 821c893e2..e63b1ffea 100644
--- a/docs/development.md
+++ b/docs/development.md
@@ -22,11 +22,11 @@ This means that **you should branch off your pull request from develop** and dir
 
 ## Contributing Code
 
-We make all changes via Pull Requests. As we have many Pull Requests from developers new to mermaid, we have put in place a process, wherein *knsv, Knut Sveidqvist* is the primary reviewer of changes and merging pull requests. The process is as follows:
+We make all changes via Pull Requests. As we have many Pull Requests from developers new to mermaid, we have put in place a process, wherein _knsv, Knut Sveidqvist_ is the primary reviewer of changes and merging pull requests. The process is as follows:
 
-* Large changes reviewed by knsv or other developer asked to review by knsv
-* Smaller, low-risk changes like dependencies, documentation, etc. can be merged by active collaborators
-* Documentation (we encourage updates to the docs folder; you can submit them via direct commits)
+- Large changes reviewed by knsv or other developer asked to review by knsv
+- Smaller, low-risk changes like dependencies, documentation, etc. can be merged by active collaborators
+- Documentation (we encourage updates to the docs folder; you can submit them via direct commits)
 
 When you commit code, create a branch with the following naming convention:
 
@@ -70,7 +70,7 @@ To start working with the e2e tests:
 
 1. Run `yarn dev` to start the dev server
 2. Start **Cypress** by running `cypress open` in the **mermaid** folder.  
-(Make sure you have path to Cypress in order, the binary is located in `node_modules/.bin`).
+   (Make sure you have path to Cypress in order, the binary is located in `node_modules/.bin`).
 
 The rendering tests are very straightforward to create. There is a function `imgSnapshotTest`, which takes a diagram in text form and the mermaid options, and it renders that diagram in Cypress.
 
@@ -80,8 +80,8 @@ This is what a rendering test looks like:
 
 ```js
 it('should render forks and joins', () => {
-    imgSnapshotTest(
-        `
+  imgSnapshotTest(
+    `
     stateDiagram
     state fork_state &lt;&lt;fork&gt;&gt;
       [*] --> fork_state
@@ -94,9 +94,9 @@ it('should render forks and joins', () => {
       join_state --> State4
       State4 --> [*]
     `,
-        { logLevel: 0 }
-    );
-    cy.get('svg');
+    { logLevel: 0 }
+  );
+  cy.get('svg');
 });
 ```
 
diff --git a/docs/directives.md b/docs/directives.md
index d83fd2194..4ce656421 100644
--- a/docs/directives.md
+++ b/docs/directives.md
@@ -3,38 +3,45 @@
 **Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/directives.md)
 
 ## Directives
+
 Directives gives a diagram author the capability to alter the appearance of a diagram before rendering by changing the applied configuration.
 
 The significance of having directives is that you have them available while writing the diagram, and can modify the default global and diagram specific configurations. So, directives are applied on top of the default configurations. The beauty of directives is that you can use them to alter configuration settings for a specific diagram, i.e. at an individual level.
 
-While directives allow you to change most of the default configuration settings, there are some that are not available, that too for security reasons. Also, you do have the *option to define the set of configurations* that you would allow to be available to the diagram author for overriding with help of directives.
+While directives allow you to change most of the default configuration settings, there are some that are not available, that too for security reasons. Also, you do have the _option to define the set of configurations_ that you would allow to be available to the diagram author for overriding with help of directives.
 
 ## Types of Directives options
+
 Mermaid basically supports two types of configuration options to be overridden by directives.
-1) *General/Top Level configurations* : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are:
-  - theme
-  - fontFamily
-  - logLevel
-  - securityLevel
-  - startOnLoad
-  - secure
 
+1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are:
 
-2) *Diagram specific configurations* : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves.
- For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alter whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type.
+- theme
+- fontFamily
+- logLevel
+- securityLevel
+- startOnLoad
+- secure
+
+2. _Diagram specific configurations_ : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves.
+   For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alter whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type.
 
 **NOTE:** These options listed here are not all the configuration options. To get hold of all the configuration options, please refer to the [defaultConfig.js](https://github.com/mermaid-js/mermaid/blob/develop/src/defaultConfig.js) in the source code.
+
 ```
 Soon we plan to publish a complete list of top-level configurations & all the diagram specific configurations,
 with their possible values in the docs
 ```
- ## Declaring directives
+
+## Declaring directives
+
 Now that we have defined the types of configurations that are available, we can learn how to declare directives.
 A directive always starts and end `%%` sign with directive text in between, like `%% {directive_text} %%`.
 
-Here the structure of a directive text is like a nested key-value pair map or a JSON object with root being *init*. Where all the general configurations are defined in the top level, and all the diagram specific configurations are defined one level deeper with diagram type as key/root for that section.
+Here the structure of a directive text is like a nested key-value pair map or a JSON object with root being _init_. Where all the general configurations are defined in the top level, and all the diagram specific configurations are defined one level deeper with diagram type as key/root for that section.
 
 Following code snippet shows the structure of a directive:
+
 ```
 %%{
   init: {
@@ -51,11 +58,15 @@ Following code snippet shows the structure of a directive:
   }
 }%%
 ```
+
 You can also define the directives in a single line, like this:
+
 ```
 %%{init: { **insert argument here**}}%%
 ```
+
 For example, the following code snippet:
+
 ```
 %%{init: { "sequence": { "mirrorActors":false }}}%%
 ```
@@ -65,6 +76,7 @@ The json object that is passed as {**argument** } must be valid key value pairs
 Valid Key Value pairs can be found in config.
 
 Example with a simple graph:
+
 ```mermaid-example
 %%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
 graph LR
@@ -87,26 +99,28 @@ parsing the above generates a single `%%init%%` JSON object below, combining the
 {
   logLevel: 'fatal',
   theme: 'dark',
-  startOnLoad: true
+  startOnLoad: true,
 }
 ```
 
 This will then be sent to `mermaid.initialize(...)` for rendering.
 
 ## Directive Examples
+
 More directive examples for diagram specific configuration overrides
 Now that the concept of directives has been explained, Let us see some more examples for directives usage:
 
 ### Changing Theme via directive
+
 The following code snippet changes theme to forest:
 
-
-```%%{init: { "theme": "forest" } }%%```
+`%%{init: { "theme": "forest" } }%%`
 
 Possible themes value are: `default`,`base`, `dark`, `forest` and `neutral`.
 Default Value is `default`.
 
 Example:
+
 ```mermaid-example
 %%{init: { "theme": "forest" } }%%
 graph TD
@@ -120,12 +134,13 @@ A --> C[End]
 ```
 
 ### Changing fontFamily via directive
+
 The following code snippet changes theme to forest:
 
-
-```%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%```
+`%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%`
 
 Example:
+
 ```mermaid-example
 %%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%
 graph TD
@@ -139,21 +154,23 @@ A --> C[End]
 ```
 
 ### Changing logLevel via directive
+
 The following code snippet changes theme to forest:
 
-
-```%%{init: { "logLevel": 2 } }%%```
+`%%{init: { "logLevel": 2 } }%%`
 
 Possible logLevel values are:
-- `1` for *debug*,
-- `2` for *info*
-- `3` for *warn*
-- `4` for *error*
-- `5` for *only fatal errors*
+
+- `1` for _debug_,
+- `2` for _info_
+- `3` for _warn_
+- `4` for _error_
+- `5` for _only fatal errors_
 
 Default Value is `5`.
 
 Example:
+
 ```mermaid-example
 %%{init: { "logLevel": 2 } }%%
 graph TD
@@ -166,19 +183,20 @@ A --> C[End]
 ```
 
 ### Changing flowchart config via directive
+
 Some common flowchart configurations are:
-- *htmlLabels*: true/false
-- *curve*: linear/curve
-- *diagramPadding*: number
-- *useMaxWidth*: number
+
+- _htmlLabels_: true/false
+- _curve_: linear/curve
+- _diagramPadding_: number
+- _useMaxWidth_: number
 
 For complete list of flowchart configurations, see [defaultConfig.js](https://github.com/mermaid-js/mermaid/blob/develop/src/defaultConfig.js) in the source code.
-*Soon we plan to publish a complete list all diagram specific configurations updated in the docs*
+_Soon we plan to publish a complete list all diagram specific configurations updated in the docs_
 
 The following code snippet changes flowchart config:
 
-
-```%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%```
+`%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%`
 
 Here were are overriding only the flowchart config, and not the general config, where HtmlLabels is set to true and curve is set to linear.
 
@@ -192,19 +210,22 @@ A --> C[End]
   C
   end
 ```
-### Changing Sequence diagram config via directive
-Some common sequence configurations are:
-- *width*: number
-- *height*: number
-- *messageAlign*: left, center, right
-- *mirrorActors*: boolean
-- *useMaxWidth*: boolean
-- *rightAngles*: boolean
-- *showSequenceNumbers*: boolean
-- *wrap*: boolean
 
-For complete list of sequence diagram configurations, see *defaultConfig.js* in the source code.
-*Soon we plan to publish a complete list all diagram specific configurations updated in the docs*
+### Changing Sequence diagram config via directive
+
+Some common sequence configurations are:
+
+- _width_: number
+- _height_: number
+- _messageAlign_: left, center, right
+- _mirrorActors_: boolean
+- _useMaxWidth_: boolean
+- _rightAngles_: boolean
+- _showSequenceNumbers_: boolean
+- _wrap_: boolean
+
+For complete list of sequence diagram configurations, see _defaultConfig.js_ in the source code.
+_Soon we plan to publish a complete list all diagram specific configurations updated in the docs_
 
 So, `wrap` by default has a value of `false` for sequence diagrams.
 
@@ -223,8 +244,7 @@ Now let us enable wrap for sequence diagrams.
 
 The following code snippet changes sequence diagram config for `wrap` to `true`:
 
-
-```%%{init: { "sequence": { "wrap": true} } }%%```
+`%%{init: { "sequence": { "wrap": true} } }%%`
 
 Using in the diagram above, the wrap will be enabled.
 
@@ -236,7 +256,3 @@ Bob->Alice: Fine, How did you mother like the book I suggested? And did you catc
 Alice->Bob: Good.
 Bob->Alice: Cool
 ```
-
-
-
-
diff --git a/docs/entityRelationshipDiagram.md b/docs/entityRelationshipDiagram.md
index 6097a5d0e..e7d77033d 100644
--- a/docs/entityRelationshipDiagram.md
+++ b/docs/entityRelationshipDiagram.md
@@ -1,9 +1,10 @@
 # Entity Relationship Diagrams
 
 **Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/entityRelationshipDiagram.md)
+
 > An entity–relationship model (or ER model) describes interrelated things of interest in a specific domain of knowledge. A basic ER model is composed of entity types (which classify the things of interest) and specifies relationships that can exist between entities (instances of those entity types). Wikipedia.
 
-Note that practitioners of ER modelling almost always refer to *entity types* simply as *entities*.  For example the `CUSTOMER` entity *type* would be referred to simply as the `CUSTOMER` entity.  This is so common it would be inadvisable to do anything else, but technically an entity is an abstract *instance* of an entity type, and this is what an ER diagram shows - abstract instances, and the relationships between them.  This is why entities are always named using singular nouns.
+Note that practitioners of ER modelling almost always refer to _entity types_ simply as _entities_. For example the `CUSTOMER` entity _type_ would be referred to simply as the `CUSTOMER` entity. This is so common it would be inadvisable to do anything else, but technically an entity is an abstract _instance_ of an entity type, and this is what an ER diagram shows - abstract instances, and the relationships between them. This is why entities are always named using singular nouns.
 
 Mermaid can render ER diagrams
 
@@ -16,9 +17,9 @@ erDiagram
 
 Entity names are often capitalised, although there is no accepted standard on this, and it is not required in Mermaid.
 
-Relationships between entities are represented by lines with end markers representing cardinality.  Mermaid uses the most popular crow's foot notation. The crow's foot intuitively conveys the possibility of many instances of the entity that it connects to.
+Relationships between entities are represented by lines with end markers representing cardinality. Mermaid uses the most popular crow's foot notation. The crow's foot intuitively conveys the possibility of many instances of the entity that it connects to.
 
-ER diagrams can be used for various purposes, ranging from abstract logical models devoid of any implementation details, through to physical models of relational database tables.  It can be useful to include attribute definitions on ER diagrams to aid comprehension of the purpose and meaning of entities.  These do not necessarily need to be exhaustive; often a small subset of attributes is enough.  Mermaid allows them to be defined in terms of their *type* and *name*.
+ER diagrams can be used for various purposes, ranging from abstract logical models devoid of any implementation details, through to physical models of relational database tables. It can be useful to include attribute definitions on ER diagrams to aid comprehension of the purpose and meaning of entities. These do not necessarily need to be exhaustive; often a small subset of attributes is enough. Mermaid allows them to be defined in terms of their _type_ and _name_.
 
 ```mermaid-example
 erDiagram
@@ -40,13 +41,13 @@ erDiagram
     }
 ```
 
-When including attributes on ER diagrams, you must decide whether to include foreign keys as attributes.  This probably depends on how closely you are trying to represent relational table structures.  If your diagram is a *logical* model which is not meant to imply a relational implementation, then it is better to leave these out because the associative relationships already convey the way that entities are associated.  For example, a JSON data structure can implement a one-to-many relationship without the need for foreign key properties, using arrays.  Similarly an object-oriented programming language may use pointers or references to collections.  Even for models that are intended for relational implementation, you might decide that inclusion of foreign key attributes duplicates information already portrayed by the relationships, and does not add meaning to entities.  Ultimately, it's your choice.
+When including attributes on ER diagrams, you must decide whether to include foreign keys as attributes. This probably depends on how closely you are trying to represent relational table structures. If your diagram is a _logical_ model which is not meant to imply a relational implementation, then it is better to leave these out because the associative relationships already convey the way that entities are associated. For example, a JSON data structure can implement a one-to-many relationship without the need for foreign key properties, using arrays. Similarly an object-oriented programming language may use pointers or references to collections. Even for models that are intended for relational implementation, you might decide that inclusion of foreign key attributes duplicates information already portrayed by the relationships, and does not add meaning to entities. Ultimately, it's your choice.
 
 ## Syntax
 
 ### Entities and Relationships
 
-Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to label the relationship.  Each statement consists of the following parts:
+Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to label the relationship. Each statement consists of the following parts:
 
 ```
     <first-entity> [<relationship> <second-entity> : <relationship-label>]
@@ -54,8 +55,8 @@ Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to
 
 Where:
 
-- `first-entity` is the name of an entity.  Names must begin with an alphabetic character and may also contain digits, hyphens, and underscores.
-- `relationship` describes the way that both entities inter-relate.  See below.
+- `first-entity` is the name of an entity. Names must begin with an alphabetic character and may also contain digits, hyphens, and underscores.
+- `relationship` describes the way that both entities inter-relate. See below.
 - `second-entity` is the name of the other entity.
 - `relationship-label` describes the relationship from the perspective of the first entity.
 
@@ -65,9 +66,9 @@ For example:
     PROPERTY ||--|{ ROOM : contains
 ```
 
-This statement can be read as *a property contains one or more rooms, and a room is part of one and only one property*. You can see that the label here is from the first entity's perspective: a property contains a room, but a room does not contain a property.  When considered from the perspective of the second entity, the equivalent label is usually very easy to infer. (Some ER diagrams label relationships from both perspectives, but this is not supported here, and is usually superfluous).
+This statement can be read as _a property contains one or more rooms, and a room is part of one and only one property_. You can see that the label here is from the first entity's perspective: a property contains a room, but a room does not contain a property. When considered from the perspective of the second entity, the equivalent label is usually very easy to infer. (Some ER diagrams label relationships from both perspectives, but this is not supported here, and is usually superfluous).
 
-Only the `first-entity` part of a statement is mandatory.  This makes it possible to show an entity with no relationships, which can be useful during iterative construction of diagrams.  If any other parts of a statement are specified, then all parts are mandatory.
+Only the `first-entity` part of a statement is mandatory. This makes it possible to show an entity with no relationships, which can be useful during iterative construction of diagrams. If any other parts of a statement are specified, then all parts are mandatory.
 
 ### Relationship Syntax
 
@@ -77,18 +78,18 @@ The `relationship` part of each statement can be broken down into three sub-comp
 - whether the relationship confers identity on a 'child' entity
 - the cardinality of the second entity with respect to the first
 
-Cardinality is a property that describes how many elements of another entity can be related to the entity in question.  In the above example a `PROPERTY` can have one or more `ROOM` instances associated to it, whereas a `ROOM` can only be associated with one `PROPERTY`.  In each cardinality marker there are two characters.  The outermost character represents a maximum value, and the innermost character represents a minimum value.  The table below summarises possible cardinalities.
+Cardinality is a property that describes how many elements of another entity can be related to the entity in question. In the above example a `PROPERTY` can have one or more `ROOM` instances associated to it, whereas a `ROOM` can only be associated with one `PROPERTY`. In each cardinality marker there are two characters. The outermost character represents a maximum value, and the innermost character represents a minimum value. The table below summarises possible cardinalities.
 
-| Value (left) | Value (right) | Meaning                                                |
-|:------------:|:-------------:|--------------------------------------------------------|
-|     `\|o`     |      `o\|`     | Zero or one                                            |
-|     `\|\|`     |      `\|\|`     | Exactly one                                            |
-|     `}o`     |      `o{`     | Zero or more (no upper limit)                          |
-|     `}\|`     |      `\|{`     | One or more (no upper limit)                           |
+| Value (left) | Value (right) | Meaning                       |
+| :----------: | :-----------: | ----------------------------- |
+|    `\|o`     |     `o\|`     | Zero or one                   |
+|    `\|\|`    |    `\|\|`     | Exactly one                   |
+|     `}o`     |     `o{`      | Zero or more (no upper limit) |
+|    `}\|`     |     `\|{`     | One or more (no upper limit)  |
 
 ### Identification
 
-Relationships may be classified as either *identifying* or *non-identifying* and these are rendered with either solid or dashed lines respectively. This is relevant when one of the entities in question can not have independent existence without the other.  For example a firm that insures people to drive cars might need to store data on `NAMED-DRIVER`s. In modelling this we might start out by observing that a `CAR` can be driven by many `PERSON` instances, and a `PERSON` can drive many `CAR`s - both entities can exist without the other, so this is a non-identifying relationship that we might specify in Mermaid as: `PERSON }|..|{ CAR : "driver"`.  Note the two dots in the middle of the relationship that will result in a dashed line being drawn between the two entities.  But when this many-to-many relationship is resolved into two one-to-many relationships, we observe that a `NAMED-DRIVER` cannot exist without both a `PERSON` and a `CAR` - the relationships become identifying and would be specified using hyphens, which translate to a solid line:
+Relationships may be classified as either _identifying_ or _non-identifying_ and these are rendered with either solid or dashed lines respectively. This is relevant when one of the entities in question can not have independent existence without the other. For example a firm that insures people to drive cars might need to store data on `NAMED-DRIVER`s. In modelling this we might start out by observing that a `CAR` can be driven by many `PERSON` instances, and a `PERSON` can drive many `CAR`s - both entities can exist without the other, so this is a non-identifying relationship that we might specify in Mermaid as: `PERSON }|..|{ CAR : "driver"`. Note the two dots in the middle of the relationship that will result in a dashed line being drawn between the two entities. But when this many-to-many relationship is resolved into two one-to-many relationships, we observe that a `NAMED-DRIVER` cannot exist without both a `PERSON` and a `CAR` - the relationships become identifying and would be specified using hyphens, which translate to a solid line:
 
 ```mmd
 erDiagram
@@ -98,7 +99,7 @@ erDiagram
 
 ### Attributes
 
-Attributes can be defined for entities by specifying the entity name followed by a block containing multiple `type name` pairs, where a block is delimited by an opening `{` and a closing `}`.  For example:
+Attributes can be defined for entities by specifying the entity name followed by a block containing multiple `type name` pairs, where a block is delimited by an opening `{` and a closing `}`. For example:
 
 ```mermaid-example
 erDiagram
@@ -115,6 +116,7 @@ erDiagram
         int age
     }
 ```
+
 The attributes are rendered inside the entity boxes:
 
 ```mermaid-example
@@ -133,7 +135,7 @@ erDiagram
     }
 ```
 
-The `type` and `name` values must begin with an alphabetic character and may contain digits, hyphens or underscores.  Other than that, there are no restrictions, and there is no implicit set of valid data types.
+The `type` and `name` values must begin with an alphabetic character and may contain digits, hyphens or underscores. Other than that, there are no restrictions, and there is no implicit set of valid data types.
 
 #### Attribute Keys and Comments
 
diff --git a/docs/examples.md b/docs/examples.md
index 0295a2e50..d22efc407 100644
--- a/docs/examples.md
+++ b/docs/examples.md
@@ -13,12 +13,14 @@ pie title NETFLIX
          "Time spent looking for movie" : 90
          "Time spent watching it" : 10
 ```
+
 ```mermaid-example
 pie title What Voldemort doesn't have?
          "FRIENDS" : 2
          "FAMILY" : 3
          "NOSE" : 45
 ```
+
 ## Basic sequence diagram
 
 ```mermaid-example
@@ -43,7 +45,6 @@ graph LR
     C --> D
 ```
 
-
 ## Larger flowchart with some styling
 
 ```mermaid-example
@@ -70,7 +71,6 @@ graph TB
      class di orange
 ```
 
-
 ## SequenceDiagram: Loops, alt and opt
 
 ```mermaid-example
@@ -89,7 +89,6 @@ sequenceDiagram
     end
 ```
 
-
 ## SequenceDiagram: Message to self in loop
 
 ```mermaid-example
@@ -141,6 +140,7 @@ sequenceDiagram
 ```
 
 ## A commit flow diagram.
+
 ```mermaid
 gitGraph:
     commit "Ashish"
diff --git a/docs/gitgraph.md b/docs/gitgraph.md
index 191bc513b..0b13cbce7 100644
--- a/docs/gitgraph.md
+++ b/docs/gitgraph.md
@@ -1,6 +1,7 @@
 # Gitgraph Diagrams
 
 **Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/gitgraph.md)
+
 > A Git Graph is a pictorial representation of git commits and git actions(commands) on various branches.
 
 These kind of diagram are particularly helpful to developers and devops teams to share their Git branching strategies. For example, it makes it easier to visualize how git flow works.
@@ -22,32 +23,34 @@ Mermaid can render Git diagrams
 ```
 
 In Mermaid, we support the basic git operations like:
-- *commit* : Representing a new commit on the current branch.
-- *branch* : To create & switch to a new branch, setting it as the current branch.
-- *checkout* : To checking out an existing branch and setting it as the current branch.
-- *merge* : To merge an existing branch onto the current branch.
+
+- _commit_ : Representing a new commit on the current branch.
+- _branch_ : To create & switch to a new branch, setting it as the current branch.
+- _checkout_ : To checking out an existing branch and setting it as the current branch.
+- _merge_ : To merge an existing branch onto the current branch.
 
 With the help of these key git commands, you will be able to draw a gitgraph in Mermaid very easily and quickly.
 Entity names are often capitalized, although there is no accepted standard on this, and it is not required in Mermaid.
 
-
 ## Syntax
+
 Mermaid syntax for a gitgraph is very straight-forward and simple. It follows a declarative-approach, where each commit is drawn on the timeline in the diagram, in order of its occurrences/presence in code. Basically, it follows the insertion order for each command.
 
 First thing you do is to declare your diagram type using the **gitgraph** keyword. This `gitgraph` keyword, tells Mermaid that you wish to draw a gitgraph, and parse the diagram code accordingly.
 
-Each gitgraph, is initialized with ***main*** branch. So unless you create a different branch, by-default the commits will go to the main branch. This is driven with how git works, where in the beginning you always start with the main branch (formerly called as ***master*** branch). And by-default, `main` branch is set as your ***current branch***.
+Each gitgraph, is initialized with **_main_** branch. So unless you create a different branch, by-default the commits will go to the main branch. This is driven with how git works, where in the beginning you always start with the main branch (formerly called as **_master_** branch). And by-default, `main` branch is set as your **_current branch_**.
 
+You make use of **_commit_** keyword to register a commit on the current branch. Let see how this works:
 
-You make use of ***commit*** keyword to register a commit on the current branch. Let see how this works:
+A simple gitgraph showing three commits on the default (**_main_**) branch:
 
-A simple gitgraph showing three commits on the default (***main***) branch:
 ```mermaid-example
     gitGraph
        commit
        commit
        commit
 ```
+
 If you look closely at the previous example, you can see the default branch `main` along with three commits. Also, notice that by default each commit has been given a unique & random ID. What if you wanted to give your own custom ID to a commit? Yes, it is possible to do that with Mermaid.
 
 ### Adding custom commit id
@@ -68,6 +71,7 @@ In this example, we have given our custom IDs to the commits.
 ### Modifying commit type
 
 In Mermaid, a commit can be of three type, which render a bit different in the diagram. These types are:
+
 - `NORMAL` : Default commit type. Represented by a solid circle in the diagram
 - `REVERSE` : To emphasize a commit as a reverse commit. Represented by a crossed solid circle in the diagram.
 - `HIGHLIGHT` : To highlight a particular commit in the diagram. Represented by a filled rectangle in the diagram.
@@ -111,9 +115,10 @@ Let us see how this works with the help of the following diagram:
 In this example, we have given custom tags to the commits. Also, see how we have combined all these attributes in a single commit declaration. You can mix-match these attributes as you like.
 
 ### Create a new branch
+
 In Mermaid, in-order to create a new branch, you make use of the `branch` keyword. You also need to provide a name of the new branch. The name has to be unique and cannot be that of an existing branch. Usage example: `branch develop`
 
-When Mermaid, reads the `branch` keyword, it creates a new branch and sets it as the current branch. Equivalent to you creating a  new branch and checking it out in Git world.
+When Mermaid, reads the `branch` keyword, it creates a new branch and sets it as the current branch. Equivalent to you creating a new branch and checking it out in Git world.
 
 Let see this in an example:
 
@@ -126,10 +131,12 @@ Let see this in an example:
        commit
        commit
 ```
+
 In this example, see how we started with default `main` branch, and pushed two commits on that.
 Then we created the `develop` branch, and all commits afterwards are put on the `develop` branch as it became the current branch.
 
 ### Checking out an existing branch
+
 In Mermaid, in order to switch to an existing branch, you make use of the `checkout` keyword. You also need to provide a name of an existing branch. If no branch is found with the given name, it will result in console error. Usage example: `checkout develop`
 
 When Mermaid, reads the `checkout` keyword, it finds the given branch and sets it as the current branch. Equivalent to checking out a branch in the Git world.
@@ -148,16 +155,18 @@ Let see modify our previous example:
        commit
        commit
 ```
+
 In this example, see how we started with default `main` branch, and pushed two commits on that.
 Then we created the `develop` branch, and all three commits afterwards are put on the `develop` branch as it became the current branch.
 After this we made use of the `checkout` keyword to set the current branch as `main`, and all commit that follow are registered against the current branch, i.e. `main`.
 
 ### Merging two branches
-In Mermaid, in order to merge or join  to an existing branch, you make use of the `merge` keyword. You also need to provide the name of an existing branch to merge from. If no branch is found with the given name, it will result in console error. Also, you can only merge two separate branches, and cannot merge a branch with itself. In such case an error is throw.
+
+In Mermaid, in order to merge or join to an existing branch, you make use of the `merge` keyword. You also need to provide the name of an existing branch to merge from. If no branch is found with the given name, it will result in console error. Also, you can only merge two separate branches, and cannot merge a branch with itself. In such case an error is throw.
 
 Usage example: `merge develop`
 
-When Mermaid, reads the `merge` keyword, it finds the given branch and its head commit (the last commit on that branch), and joins it with the head commit on the **current branch**. Each merge results in a ***merge commit***, represented in the diagram with **filled double circle**.
+When Mermaid, reads the `merge` keyword, it finds the given branch and its head commit (the last commit on that branch), and joins it with the head commit on the **current branch**. Each merge results in a **_merge commit_**, represented in the diagram with **filled double circle**.
 
 Let us modify our previous example to merge our two branches:
 
@@ -176,6 +185,7 @@ Let us modify our previous example to merge our two branches:
        commit
        commit
 ```
+
 In this example, see how we started with default `main` branch, and pushed two commits on that.
 Then we created the `develop` branch, and all three commits afterwards are put on the `develop` branch as it became the current branch.
 After this we made use of the `checkout` keyword to set the current branch as `main`, and all commits that follow are registered against the current branch, i.e. `main`.
@@ -183,6 +193,7 @@ After this we merge the `develop` branch onto the current branch `main`, resulti
 Since the current branch at this point is still `main`, the last two commits are registered against that.
 
 You can also decorate your merge with similar attributes as you did for the commit using:
+
 - `id`--> To override the default ID with custom ID
 - `tag`--> To add a custom tag to your merge commit
 - `type`--> To override the default shape of merge commit. Here you can use other commit type mentioned earlier.
@@ -218,20 +229,23 @@ Let us see how this works with the help of the following diagram:
 ```
 
 ### Cherry Pick commit from another branch
+
 Similar to how 'git' allows you to cherry-pick a commit from **another branch** onto the **current** branch, Mermaid also supports this functionality. You can also cherry-pick a commit from another branch using the `cherry-pick` keyword.
 
-To use the `cherry-pick` keyword, you must specify the id  using the `id` attribute, followed by `:` and your desired commit id within a `""` quote. For example:
+To use the `cherry-pick` keyword, you must specify the id using the `id` attribute, followed by `:` and your desired commit id within a `""` quote. For example:
 
- `cherry-pick id: "your_custom_id"`
+`cherry-pick id: "your_custom_id"`
 
 Here, a new commit representing the cherry-pick is created on the current branch, and is visually highlighted in the diagram with a **cherry** and a tag depicting the commit id from which it is cherry-picked from.
 
 A few important rules to note here are:
+
 1. You need to provide the `id` for an existing commit to be cherry-picked. If given commit id does not exist it will result in an error. For this, make use of the `commit id:$value` format of declaring commits. See the examples from above.
 2. The given commit must not exist on the current branch. The cherry-picked commit must always be a different branch than the current branch.
 3. Current branch must have at least one commit, before you can cherry-pick, otherwise it will cause an error is throw.
 
 Let see an example:
+
 ```mermaid-example
     gitGraph
        commit id: "ZERO"
@@ -248,18 +262,24 @@ Let see an example:
        checkout develop
        commit id:"C"
 ```
+
 ## Gitgraph specific configuration options
+
 In Mermaid, you have the option to configure the gitgraph diagram. You can configure the following options:
+
 - `showBranches` : Boolean, default is `true`. If set to `false`, the branches are not shown in the diagram.
 - `showCommitLabel` : Boolean, default is `true`. If set to `false`, the commit labels are not shown in the diagram.
 - `mainBranchName` : String, default is `main`. The name of the default/root branch.
 - `mainBranchOrder` : Position of the main branch in the list of branches. default is `0`, meaning, by default `main` branch is the first in the order.
 
 Let's look at them one by one.
+
 ## Hiding Branch names and lines
+
 Sometimes you may want to hide the branch names and lines from the diagram. You can do this by using the `showBranches` keyword. By default its value is `true`. You can set it to `false` using directives.
 
 Usage example:
+
 ```mermaid-example
 %%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false}} }%%
       gitGraph
@@ -304,9 +324,10 @@ Usage example:
         merge main
         checkout develop
         merge release
- ```
+```
 
 ## Commit labels Layout: Rotated or Horizontal
+
 Mermaid supports two types of commit labels layout. The default layout is **rotated**, which means the labels are placed below the commit circle, rotated at 45 degrees for better readability. This is particularly useful for commits with long labels.
 
 The other option is **horizontal**, which means the labels are placed below the commit circle centred horizontally, and are not rotated. This is particularly useful for commits with short labels.
@@ -332,7 +353,7 @@ gitGraph
   commit
   branch b2
   commit
-  ```
+```
 
 Usage example: Horizontal commit labels
 
@@ -353,13 +374,14 @@ gitGraph
   commit
   branch b2
   commit
-  ```
+```
 
 ## Hiding commit labels
+
 Sometimes you may want to hide the commit labels from the diagram. You can do this by using the `showCommitLabel` keyword. By default its value is `true`. You can set it to `false` using directives.
 
-
 Usage example:
+
 ```mermaid-example
 %%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false,'showCommitLabel': false}} }%%
       gitGraph
@@ -404,12 +426,14 @@ Usage example:
         merge main
         checkout develop
         merge release
- ```
+```
 
 ## Customizing main branch name
+
 Sometimes you may want to customize the name of the main/default branch. You can do this by using the `mainBranchName` keyword. By default its value is `main`. You can set it to any string using directives.
 
 Usage example:
+
 ```mermaid-example
 %%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true,'mainBranchName': 'MetroLine1'}} }%%
       gitGraph
@@ -432,15 +456,18 @@ Usage example:
         commit id:"Boston"
         commit id:"Detroit"
         commit type:REVERSE id:"SanFrancisco"
- ```
+```
+
 Look at the imaginary railroad map created using Mermaid. Here, we have changed the default main branch name to `MetroLine1`.
 
 ## Customizing branch ordering
+
 In Mermaid, by default the branches are shown in the order of their definition or appearance in the diagram code.
 
 Sometimes you may want to customize the order of the branches. You can do this by using the `order` keyword next the branch definition. You can set it to a positive number.
 
 Mermaid follows the given precedence order of the `order` keyword.
+
 - Main branch is always shown first as it has default order value of `0`. (unless its order is modified and changed from `0` using the `mainBranchOrder` keyword in the config)
 - Next, All branches without an `order` are shown in the order of their appearance in the diagram code.
 - Next, All branches with an `order` are shown in the order of their `order` value.
@@ -448,6 +475,7 @@ Mermaid follows the given precedence order of the `order` keyword.
 To fully control the order of all the branches, you must define `order` for all the branches.
 
 Usage example:
+
 ```mermaid-example
 %%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true}} }%%
       gitGraph
@@ -456,11 +484,12 @@ Usage example:
       branch test2 order: 2
       branch test3 order: 1
 
- ```
+```
+
 Look at the diagram, all the branches are following the order defined.
 
-
 Usage example:
+
 ```mermaid-example
 %%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true,'mainBranchOrder': 2}} }%%
       gitGraph
@@ -470,7 +499,8 @@ Usage example:
       branch test3
       branch test4 order: 1
 
- ```
+```
+
 Look at the diagram, here, all the branches without a specified order are drawn in their order of definition.
 Then, `test4` branch is drawn because the order of `1`.
 Then, `main` branch is drawn because the order of `2`.
@@ -478,21 +508,21 @@ And, lastly `test1`is drawn because the order of `3`.
 
 NOTE: Because we have overridden the `mainBranchOrder` to `2`, the `main` branch is not drawn in the beginning, instead follows the ordering.
 
-
-
 Here, we have changed the default main branch name to `MetroLine1`.
 
 ## Themes
+
 Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about theming your diagram [here](./theming.md).
 
 The following are the different pre-defined theme options:
+
 - `base`
 - `forest`
 - `dark`
 - `default`
 - `neutral`
 
-**NOTE**: To change theme you can either use the `initialize` call or *directives*. Learn more about [directives](./directives.md)
+**NOTE**: To change theme you can either use the `initialize` call or _directives_. Learn more about [directives](./directives.md)
 Let's put them to use, and see how our sample diagram looks in different themes:
 
 ### Base Theme
@@ -541,9 +571,9 @@ Let's put them to use, and see how our sample diagram looks in different themes:
         merge main
         checkout develop
         merge release
- ```
+```
 
- ### Forest Theme
+### Forest Theme
 
 ```mermaid-example
 %%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
@@ -589,7 +619,8 @@ Let's put them to use, and see how our sample diagram looks in different themes:
         merge main
         checkout develop
         merge release
- ```
+```
+
 ### Default Theme
 
 ```mermaid-example
@@ -636,7 +667,8 @@ Let's put them to use, and see how our sample diagram looks in different themes:
         merge main
         checkout develop
         merge release
- ```
+```
+
 ### Dark Theme
 
 ```mermaid-example
@@ -683,9 +715,9 @@ Let's put them to use, and see how our sample diagram looks in different themes:
         merge main
         checkout develop
         merge release
- ```
+```
 
- ### Neutral Theme
+### Neutral Theme
 
 ```mermaid-example
 %%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%
@@ -731,9 +763,10 @@ Let's put them to use, and see how our sample diagram looks in different themes:
         merge main
         checkout develop
         merge release
- ```
+```
 
 ## Customize using Theme Variables
+
 Mermaid allows you to customize your diagram using theme variables which govern the look and feel of various elements of the diagram.
 
 For understanding let us take a sample diagram with theme `default`, the default values of the theme variables is picked automatically from the theme. Later on we will see how to override the default values of the theme variables.
@@ -755,10 +788,14 @@ See how the default theme is used to set the colors for the branches:
        branch featureA
        commit
 ```
+
 > #### IMPORTANT:
-> Mermaid supports the theme variables to override the default values for **up to 8 branches**, i.e., you can set the color/styling of up to 8 branches using theme variables. After this threshold of 8 branches,  the theme variables are reused in the cyclic manner, i.e. the 9th branch will use the color/styling of the 1st branch, or the branch at index position '8' will use the color/styling of the branch at index position '0'.
- *More on this in the next section. See examples on **Customizing branch label colors** below*
+>
+> Mermaid supports the theme variables to override the default values for **up to 8 branches**, i.e., you can set the color/styling of up to 8 branches using theme variables. After this threshold of 8 branches, the theme variables are reused in the cyclic manner, i.e. the 9th branch will use the color/styling of the 1st branch, or the branch at index position '8' will use the color/styling of the branch at index position '0'.
+> _More on this in the next section. See examples on **Customizing branch label colors** below_
+
 ### Customizing branch colors
+
 You can customize the branch colors using the `git0` to `git7` theme variables. Mermaid allows you to set the colors for up-to 8 branches, where `git0` variable will drive the value of the first branch, `git1` will drive the value of the second branch and so on.
 
 NOTE: Default values for these theme variables are picked from the selected theme. If you want to override the default values, you can use the `initialize` call to add your custom theme variable values.
@@ -792,8 +829,11 @@ Now let's override the default values for the `git0` to `git3` variables:
        commit
 
 ```
+
 See how the branch colors are changed to the values specified in the theme variables.
+
 ### Customizing branch label colors
+
 You can customize the branch label colors using the `gitBranchLabel0` to `gitBranchLabel7` theme variables. Mermaid allows you to set the colors for up-to 8 branches, where `gitBranchLabel0` variable will drive the value of the first branch label, `gitBranchLabel1` will drive the value of the second branch label and so on.
 
 Lets see how the default theme is used to set the colors for the branch labels:
@@ -827,8 +867,11 @@ Now let's override the default values for the `gitBranchLabel0` to `gitBranchLab
     checkout branch1
     commit
 ```
+
 Here, you can see that `branch8` and `branch9` colors and the styles are being picked from branch at index position `0` (`main`) and `1`(`branch1`) respectively, i.e., **branch themeVariables are repeated cyclically**.
+
 ### Customizing Commit colors
+
 You can customize commit using the `commitLabelColor` and `commitLabelBackground` theme variables for changes in the commit label color and background color respectively.
 
 Example:
@@ -853,10 +896,12 @@ Now let's override the default values for the `commitLabelColor` to `commitLabel
        commit
 
 ```
+
 See how the commit label color and background color are changed to the values specified in the theme variables.
 
 ### Customizing Commit Label Font Size
-You can customize commit using the `commitLabelFontSize`  theme variables for changing in the font soze of the commit label .
+
+You can customize commit using the `commitLabelFontSize` theme variables for changing in the font soze of the commit label .
 
 Example:
 Now let's override the default values for the `commitLabelFontSize` variable:
@@ -881,10 +926,12 @@ Now let's override the default values for the `commitLabelFontSize` variable:
        commit
 
 ```
+
 See how the commit label font size changed.
 
 ### Customizing Tag Label Font Size
-You can customize commit using the `tagLabelFontSize`  theme variables for changing in the font soze of the tag label .
+
+You can customize commit using the `tagLabelFontSize` theme variables for changing in the font soze of the tag label .
 
 Example:
 Now let's override the default values for the `tagLabelFontSize` variable:
@@ -909,9 +956,12 @@ Now let's override the default values for the `tagLabelFontSize` variable:
        commit
 
 ```
+
 See how the tag label font size changed.
+
 ### Customizing Tag colors
-You can customize tag using the `tagLabelColor`,`tagLabelBackground` and `tagLabelBorder`  theme variables for changes in the tag label color,tag label background color and tag label border respectively.
+
+You can customize tag using the `tagLabelColor`,`tagLabelBackground` and `tagLabelBorder` theme variables for changes in the tag label color,tag label background color and tag label border respectively.
 Example:
 Now let's override the default values for the `tagLabelColor`, `tagLabelBackground` and to `tagLabelBorder` variables:
 
@@ -935,8 +985,11 @@ Now let's override the default values for the `tagLabelColor`, `tagLabelBackgrou
        commit
 
 ```
+
 See how the tag colors are changed to the values specified in the theme variables.
+
 ### Customizing Highlight commit colors
+
 You can customize the highlight commit colors in relation to the branch it is on using the `gitInv0` to `gitInv7` theme variables. Mermaid allows you to set the colors for up-to 8 branches specific highlight commit, where `gitInv0` variable will drive the value of the first branch's highlight commits, `gitInv1` will drive the value of the second branch's highlight commit label and so on.
 
 Example:
@@ -961,8 +1014,5 @@ Now let's override the default values for the `git0` to `git3` variables:
        commit
 
 ```
+
 See how the highlighted commit color on the first branch is changed to the value specified in the theme variable `gitInv0`.
-
-
-
-
diff --git a/docs/integrations.md b/docs/integrations.md
index 0adef0bf3..5e22fea77 100644
--- a/docs/integrations.md
+++ b/docs/integrations.md
@@ -1,11 +1,11 @@
 # Integrations
 
-The following list is a compilation of different integrations and plugins that allow the rendering of mermaid definitions within other applications. 
+The following list is a compilation of different integrations and plugins that allow the rendering of mermaid definitions within other applications.
 
 They also serve as proof of concept, for the variety of things that can be built with mermaid.
 
-
 ## Productivity
+
 - [GitHub](https://github.com) (**Native support**)
   - [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) (**Native support**)
   - [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
@@ -31,11 +31,11 @@ They also serve as proof of concept, for the variety of things that can be built
   - [redmine-mermaid](https://github.com/styz/redmine_mermaid)
   - [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
 - [Jetsbrain IDE eg Pycharm](https://www.jetbrains.com/go/guide/tips/mermaid-js-support-in-markdown/)
-- [mermerd](https://github.com/KarnerTh/mermerd) 
+- [mermerd](https://github.com/KarnerTh/mermerd)
 
 ## CRM/ERP/Similar
 
-  - [coreBOS](https://blog.corebos.org/blog/december2019)
+- [coreBOS](https://blog.corebos.org/blog/december2019)
 
 ## Blogs
 
@@ -148,22 +148,22 @@ They also serve as proof of concept, for the variety of things that can be built
 
 ## Browser Extensions
 
-| Name | Chrome Web Store | Firefox Add-ons | Opera | Edge | Source/Repository | 
-| -- | -- | -- | -- | -- | -- |
-| GitHub + Mermaid | - | [🦊🔗](https://addons.mozilla.org/firefox/addon/github-mermaid/) | - | - |  [🐙🔗](https://github.com/BackMarket/github-mermaid-extension)
-| Asciidoctor Live Preview | [🎡🔗](https://chrome.google.com/webstore/detail/asciidoctorjs-live-previe/iaalpfgpbocpdfblpnhhgllgbdbchmia) | - | - | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/asciidoctorjs-live-previ/pefkelkanablhjdekgdahplkccnbdggd?hl=en-US) | -|
-| Diagram Tab| -| - | - | - | [🐙🔗](https://github.com/khafast/diagramtab)  |
-| Markdown Diagrams| [🎡🔗](https://chrome.google.com/webstore/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel/) | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/) | [🔴🔗](https://addons.opera.com/en/extensions/details/markdown-diagrams/) | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe) | [🐙🔗](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) |
-| Markdown Viewer| - | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | - | - | [🐙🔗](https://github.com/simov/markdown-viewer)|
-| Extensions for Mermaid| - | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | [🔴🔗](https://addons.opera.com/en/extensions/details/extensions-for-mermaid/)| - | [🐙🔗](https://github.com/Stefan-S/mermaid-extension) |
-| Chrome Diagrammer| [🎡🔗](https://chrome.google.com/webstore/detail/chrome-diagrammer/bkpbgjmkomfoakfklcjeoegkklgjnnpk) | - |- | - | - |
-| Mermaid Diagrams | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-diagrams/phfcghedmopjadpojhmmaffjmfiakfil) | - | - | - | - |
-|Mermaid Markdown | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-markdown/mboeoikjijmjcjgpccghbcoegikliijg) | - | - | - | - |
-| Monkeys | [🎡🔗](https://chrome.google.com/webstore/detail/monkeys-mermaid-for-githu/cplfdpoajbclbgphaphphcldamfkjlgi) | - | - | - | - |
-| Mermaid Previewer | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-previewer/oidjnlhbegipkcklbdfnbkikplpghfdl) | - | - | - | - |
-
+| Name                     | Chrome Web Store                                                                                             | Firefox Add-ons                                                                | Opera                                                                          | Edge                                                                                                                         | Source/Repository                                                                                    |
+| ------------------------ | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
+| GitHub + Mermaid         | -                                                                                                            | [🦊🔗](https://addons.mozilla.org/firefox/addon/github-mermaid/)               | -                                                                              | -                                                                                                                            | [🐙🔗](https://github.com/BackMarket/github-mermaid-extension)                                       |
+| Asciidoctor Live Preview | [🎡🔗](https://chrome.google.com/webstore/detail/asciidoctorjs-live-previe/iaalpfgpbocpdfblpnhhgllgbdbchmia) | -                                                                              | -                                                                              | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/asciidoctorjs-live-previ/pefkelkanablhjdekgdahplkccnbdggd?hl=en-US) | -                                                                                                    |
+| Diagram Tab              | -                                                                                                            | -                                                                              | -                                                                              | -                                                                                                                            | [🐙🔗](https://github.com/khafast/diagramtab)                                                        |
+| Markdown Diagrams        | [🎡🔗](https://chrome.google.com/webstore/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel/)        | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/)      | [🔴🔗](https://addons.opera.com/en/extensions/details/markdown-diagrams/)      | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe)                 | [🐙🔗](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) |
+| Markdown Viewer          | -                                                                                                            | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | -                                                                              | -                                                                                                                            | [🐙🔗](https://github.com/simov/markdown-viewer)                                                     |
+| Extensions for Mermaid   | -                                                                                                            | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | [🔴🔗](https://addons.opera.com/en/extensions/details/extensions-for-mermaid/) | -                                                                                                                            | [🐙🔗](https://github.com/Stefan-S/mermaid-extension)                                                |
+| Chrome Diagrammer        | [🎡🔗](https://chrome.google.com/webstore/detail/chrome-diagrammer/bkpbgjmkomfoakfklcjeoegkklgjnnpk)         | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |
+| Mermaid Diagrams         | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-diagrams/phfcghedmopjadpojhmmaffjmfiakfil)          | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |
+| Mermaid Markdown         | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-markdown/mboeoikjijmjcjgpccghbcoegikliijg)          | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |
+| Monkeys                  | [🎡🔗](https://chrome.google.com/webstore/detail/monkeys-mermaid-for-githu/cplfdpoajbclbgphaphphcldamfkjlgi) | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |
+| Mermaid Previewer        | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-previewer/oidjnlhbegipkcklbdfnbkikplpghfdl)         | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |
 
 ## Other
+
 - [Jekyll](https://jekyllrb.com/)
   - [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid)
   - [jekyll-mermaid-diagrams](https://github.com/fuzhibo/jekyll-mermaid-diagrams)
diff --git a/docs/landing/index.html b/docs/landing/index.html
index 4b04a98ce..9b1e3749f 100644
--- a/docs/landing/index.html
+++ b/docs/landing/index.html
@@ -49,16 +49,7 @@
     <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
-        "
+        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">
@@ -77,24 +68,7 @@
               >
                 <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
-                  "
+                  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>
@@ -352,25 +326,7 @@
       >
         <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
-          "
+          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>
diff --git a/docs/n00b-advanced.md b/docs/n00b-advanced.md
index 407be8c08..1e6546f5c 100644
--- a/docs/n00b-advanced.md
+++ b/docs/n00b-advanced.md
@@ -1,6 +1,7 @@
 # Advanced n00b mermaid (Coming soon..)
 
 ## splitting mermaid code from html
+
 A more condensed html code can be achieved by embedding the mermaid code in its own .js file, which is referenced like so:
 
 ```
@@ -9,11 +10,13 @@ stuff stuff
   </body>
 </html>
 ```
+
 The actual mermaid file could for example look like this:
 
 ```
 mermaid content...
 ```
+
 ---
 
 ## mermaid configuration options
diff --git a/docs/n00b-syntaxReference.md b/docs/n00b-syntaxReference.md
index d10918be2..eba9ca535 100644
--- a/docs/n00b-syntaxReference.md
+++ b/docs/n00b-syntaxReference.md
@@ -1,12 +1,14 @@
 # Diagram Syntax
-Mermaid's syntax is used to create diagrams. You'll find that it is not too tricky and can be learned in a day. The next sections dive deep into the syntax of each diagram type.  
 
-Syntax, together with Deployment and Configuration constitute the whole of Mermaid. 
+Mermaid's syntax is used to create diagrams. You'll find that it is not too tricky and can be learned in a day. The next sections dive deep into the syntax of each diagram type.
+
+Syntax, together with Deployment and Configuration constitute the whole of Mermaid.
 
 Diagram Examples can be found in the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor), it is also a great practice area.
 
 ## Syntax Structure
-One would notice that all **Diagrams definitions begin** with a declaration of the **diagram type**, followed by the definitions of the diagram and its contents. This declaration notifies the parser which kind of diagram the code is supposed to generate. 
+
+One would notice that all **Diagrams definitions begin** with a declaration of the **diagram type**, followed by the definitions of the diagram and its contents. This declaration notifies the parser which kind of diagram the code is supposed to generate.
 
 **Example** : The code below is for an Entity Relationship Diagram, specified by the `erDiagram` declaration. What follows is the definition of the different `Entities` represented in it.
 
@@ -22,56 +24,44 @@ erDiagram
           PRODUCT ||--o{ ORDER-ITEM : "ordered in"
 ```
 
-
 The [Getting Started](./n00b-gettingStarted.md) section can also provide some practical examples of mermaid syntax.
 
- 
-
 ## Diagram Breaking
 
 One should **beware the use of some words or symbols** that can break diagrams. These words or symbols are few and often only affect specific types of diagrams. The table below will continuously be updated.
 
-
-| Diagram Breakers  | Reason |Solution|
-| ---               | ---    |---|
-|  **Comments**     |        |   |
-|[`%%{``}%%`](https://github.com/mermaid-js/mermaid/issues/1968) |  Similar to [Directives](./directives.md) confuses the renderer.|In comments using `%%`, avoid using "{}".|
-|  **Flow-Charts**  |        |   |
-|'end'              |  The word "End" can cause Flowcharts and Sequence diagrams to break |                  Wrap them in quotation marks to prevent breakage.|
-| [Nodes inside Nodes](https://mermaid-js.github.io/mermaid/#/flowchart?id=special-characters-that-break-syntax)|  Mermaid gets confused with nested shapes | wrap them in quotation marks to prevent breaking|
-                                                                                                   
-
+| Diagram Breakers                                                                                               | Reason                                                             | Solution                                          |
+| -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ------------------------------------------------- |
+| **Comments**                                                                                                   |                                                                    |                                                   |
+| [` %%{``}%% `](https://github.com/mermaid-js/mermaid/issues/1968)                                              | Similar to [Directives](./directives.md) confuses the renderer.    | In comments using `%%`, avoid using "{}".         |
+| **Flow-Charts**                                                                                                |                                                                    |                                                   |
+| 'end'                                                                                                          | The word "End" can cause Flowcharts and Sequence diagrams to break | Wrap them in quotation marks to prevent breakage. |
+| [Nodes inside Nodes](https://mermaid-js.github.io/mermaid/#/flowchart?id=special-characters-that-break-syntax) | Mermaid gets confused with nested shapes                           | wrap them in quotation marks to prevent breaking  |
 
 ### Mermaid Live Editor
-Now, that you've seen what you should not add to your diagrams, you can play around with them in the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor). 
+
+Now, that you've seen what you should not add to your diagrams, you can play around with them in the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor).
 
 # Configuration
 
-Configuration is the third part of Mermaid, after deployment and syntax. It deals with the different ways that Mermaid can be customized across different deployments. 
+Configuration is the third part of Mermaid, after deployment and syntax. It deals with the different ways that Mermaid can be customized across different deployments.
 
 If you are interested in altering and customizing your Mermaid Diagrams, you will find the methods and values available for [Configuration](./Setup.md) here. It includes themes.
-This section will introduce the different methods of configuring the behaviors and appearances of Mermaid Diagrams. 
+This section will introduce the different methods of configuring the behaviors and appearances of Mermaid Diagrams.
 The following are the most commonly used methods, and they are all tied to Mermaid [Deployment](./n00b-gettingStarted.md) methods.
 
 ### Configuration Section in the [Live Editor](https://mermaid-js.github.io/mermaid-live-editor).
 
-Here you can edit certain values to change the behavior and appearance of the diagram. 
+Here you can edit certain values to change the behavior and appearance of the diagram.
 
-### [The initialize() call](https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted?id=_3-calling-the-javascript-api), 
-Used when Mermaid is called via an API, or through a `<script>` tag. 
+### [The initialize() call](https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted?id=_3-calling-the-javascript-api),
 
+Used when Mermaid is called via an API, or through a `<script>` tag.
 
 ### [Directives](./directives.md),
-Allows for the limited reconfiguration of a diagram just before it is rendered. It can alter the font style, color and other aesthetic aspects of the diagram. You can pass a directive alongside your definition inside `%%{ }%%`. It can be done either above or below your diagram definition. 
+
+Allows for the limited reconfiguration of a diagram just before it is rendered. It can alter the font style, color and other aesthetic aspects of the diagram. You can pass a directive alongside your definition inside `%%{ }%%`. It can be done either above or below your diagram definition.
 
 ### [Theme Manipulation](./theming.md):
-An application of using Directives to change [Themes](./theming.md). `Theme` is a value within Mermaid's configuration that dictates the color scheme for diagrams. 
-
-
-
-
-
-
-
-
 
+An application of using Directives to change [Themes](./theming.md). `Theme` is a value within Mermaid's configuration that dictates the color scheme for diagrams.
diff --git a/docs/newDiagram.md b/docs/newDiagram.md
index c3fcd18a3..4b6c7dfd6 100644
--- a/docs/newDiagram.md
+++ b/docs/newDiagram.md
@@ -2,15 +2,14 @@
 
 ### Step 1: Grammar & Parsing
 
-
 #### Grammar
 
 This would be to define a jison grammar for the new diagram type. That should start with a way to identify that the text in the mermaid tag is a diagram of that type. Create a new folder under diagrams for your new diagram type and a parser folder in it. This leads us to step 2.
 
 For instance:
 
-* the flowchart starts with the keyword graph.
-* the sequence diagram starts with the keyword sequenceDiagram
+- the flowchart starts with the keyword graph.
+- the sequence diagram starts with the keyword sequenceDiagram
 
 #### Store data found during parsing
 
@@ -36,74 +35,67 @@ For more info look in the example diagram type:
 The `yy` object has the following function:
 
 ```javascript
-exports.parseError = function(err, hash){
-   mermaid.parseError(err, hash)
+exports.parseError = function (err, hash) {
+  mermaid.parseError(err, hash);
 };
 ```
 
 when parsing the `yy` object is initialized as per below:
 
 ```javascript
-var parser
-parser = exampleParser.parser
-parser.yy = db
+var parser;
+parser = exampleParser.parser;
+parser.yy = db;
 ```
 
-
 ### Step 2: Rendering
 
 Write a renderer that given the data found during parsing renders the diagram. To look at an example look at sequenceRenderer.js rather then the flowchart renderer as this is a more generic example.
 
 Place the renderer in the diagram folder.
 
-
 ### Step 3: Detection of the new diagram type
 
 The second thing to do is to add the capability to detect the new new diagram to type to the detectType in utils.js. The detection should return a key for the new diagram type.
 
-
 ### Step 4: The final piece - triggering the rendering
 
 At this point when mermaid is trying to render the diagram, it will detect it as being of the new type but there will be no match when trying to render the diagram. To fix this add a new case in the switch statement in main.js:init this should match the diagram type returned from step #2. The code in this new case statement should call the renderer for the diagram type with the data found by the parser as an argument.
 
-
 ## Usage of the parser as a separate module
 
-
 ### Setup
 
 ```javascript
-var graph = require('./graphDb')
-var flow = require('./parser/flow')
-flow.parser.yy = graph
+var graph = require('./graphDb');
+var flow = require('./parser/flow');
+flow.parser.yy = graph;
 ```
 
-
 ### Parsing
 
 ```javascript
-flow.parser.parse(text)
+flow.parser.parse(text);
 ```
 
-
 ### Data extraction
 
 ```javascript
-graph.getDirection()
-graph.getVertices()
-graph.getEdges()
+graph.getDirection();
+graph.getVertices();
+graph.getEdges();
 ```
 
 The parser is also exposed in the mermaid api by calling:
 
 ```javascript
-var parser = mermaid.getParser()
+var parser = mermaid.getParser();
 ```
 
 Note that the parse needs a graph object to store the data as per:
 
 ```javascript
-flow.parser.yy = graph
+flow.parser.yy = graph;
 ```
 
 Look at `graphDb.js` for more details on that object.
@@ -116,10 +108,10 @@ If you are using a dagre based layout, please use flowchart-v2 as a template and
 
 There are a few features that are common between the different types of diagrams. We try to standardize the diagrams that work as similar as possible for the end user. The commonalities are:
 
-* Directives, a way of modifying the diagram configuration from within the diagram code.
-* Accessibility, a way for an author to provide additional information like titles and descriptions to people accessing a text with diagrams using a screen reader.
-* Themes, there is a common way to modify the styling of diagrams in Mermaid.
-* Comments should follow mermaid standards
+- Directives, a way of modifying the diagram configuration from within the diagram code.
+- Accessibility, a way for an author to provide additional information like titles and descriptions to people accessing a text with diagrams using a screen reader.
+- Themes, there is a common way to modify the styling of diagrams in Mermaid.
+- Comments should follow mermaid standards
 
 Here some pointers on how to handle these different areas.
 
@@ -127,6 +119,7 @@ Here some pointers on how to handle these different areas.
 
 Here is example handling from flowcharts:
 Jison:
+
 ```jison
 
 /* lexical grammar */
@@ -173,6 +166,7 @@ It is probably a good idea to keep the handling similar to this in your new diag
 ## Accessibility
 
 The syntax for adding title and description looks like this:
+
 ```
 accTitle: The title
 accDescr: The description
@@ -222,6 +216,7 @@ import {
 For rendering the accessibility tags you have again an existing function you can use.
 
 **In the renderer:**
+
 ```js
 import addSVGAccessibilityFields from '../../accessibility';
 
@@ -239,11 +234,11 @@ When adding themes to a diagram it comes down to a few important locations in th
 
 The entry point for the styling engine is in **src/styles.js**. The getStyles function will be called by Mermaid when the styles are being applied to the diagram.
 
-This function will in turn call a function *your diagram should provide* returning the css for the new diagram. The diagram specific, also which is commonly also called getStyles and located in the folder for your diagram under src/diagrams and should be named styles.js. The getStyles function will be called with the theme options as an argument like in the following example:
+This function will in turn call a function _your diagram should provide_ returning the css for the new diagram. The diagram specific, also which is commonly also called getStyles and located in the folder for your diagram under src/diagrams and should be named styles.js. The getStyles function will be called with the theme options as an argument like in the following example:
 
 ```js
 const getStyles = (options) =>
-    `
+  `
     .line {
       stroke-width: 1;
       stroke: ${options.lineColor};
@@ -253,17 +248,16 @@ const getStyles = (options) =>
     `;
 ```
 
-Note that you need to provide your function to the main getStyles by adding it into the themes object in  **src/styles.js** like in the xyzDiagram in the provided example:
+Note that you need to provide your function to the main getStyles by adding it into the themes object in **src/styles.js** like in the xyzDiagram in the provided example:
 
 ```js
 const themes = {
-    flowchart,
-    'flowchart-v2': flowchart,
-    sequence,
-    xyzDiagram,
-    //...
+  flowchart,
+  'flowchart-v2': flowchart,
+  sequence,
+  xyzDiagram,
+  //...
 };
 ```
 
 The actual options and values for the colors are defined in **src/theme/theme-[xyz].js**. If you provide the options your diagram needs in the existing theme files then the theming will work smoothly without hiccups.
-
diff --git a/docs/pie.md b/docs/pie.md
index 266b6f317..b7dcd7aa5 100644
--- a/docs/pie.md
+++ b/docs/pie.md
@@ -1,7 +1,7 @@
 # Pie chart diagrams
 
 > A pie chart (or a circle chart) is a circular statistical graphic, which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice (and consequently its central angle and area), is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented. The earliest known pie chart is generally credited to William Playfair's Statistical Breviary of 1801
--Wikipedia
+> -Wikipedia
 
 Mermaid can render Pie Chart diagrams.
 
@@ -12,26 +12,28 @@ pie title Pets adopted by volunteers
     "Rats" : 15
 ```
 
-
 ## Syntax
+
 Drawing a pie chart is really simple in mermaid.
+
 - Start with `pie` keyword to begin the diagram
-    - `showData` to render the actual data values after the legend text. This is ***OPTIONAL*** 
-- Followed by `title` keyword and its value in string to give a title to the pie-chart. This is ***OPTIONAL***
+  - `showData` to render the actual data values after the legend text. This is **_OPTIONAL_**
+- Followed by `title` keyword and its value in string to give a title to the pie-chart. This is **_OPTIONAL_**
 - Followed by dataSet
-    - `label` for a section in the pie diagram within `" "` quotes.
-    - Followed by `:` colon as separator
-    - Followed by `positive numeric value` (supported upto two decimal places)
+  - `label` for a section in the pie diagram within `" "` quotes.
+  - Followed by `:` colon as separator
+  - Followed by `positive numeric value` (supported upto two decimal places)
 
 [pie] [showData] (OPTIONAL)
-     [title] [titlevalue]  (OPTIONAL)
-      "[datakey1]" : [dataValue1]
-      "[datakey2]" : [dataValue2]
-      "[datakey3]" : [dataValue3]
-      .
-      .
+[title] [titlevalue] (OPTIONAL)
+"[datakey1]" : [dataValue1]
+"[datakey2]" : [dataValue2]
+"[datakey3]" : [dataValue3]
+.
+.
 
 ## Example
+
 ```mermaid-example
 pie showData
     title Key elements in Product X
diff --git a/docs/requirementDiagram.md b/docs/requirementDiagram.md
index bc2e1a70b..7c221312b 100644
--- a/docs/requirementDiagram.md
+++ b/docs/requirementDiagram.md
@@ -25,11 +25,12 @@ Rendering requirements is straightforward.
 
 There are three types of components to a requirement diagram: requirement, element, and relationship.
 
-The grammar for defining each is defined below. Words denoted in angle brackets, such as ```<word>```, are enumerated keywords that have options elaborated in a table. ```user_defined_...``` is use in any place where user input is expected.
+The grammar for defining each is defined below. Words denoted in angle brackets, such as `<word>`, are enumerated keywords that have options elaborated in a table. `user_defined_...` is use in any place where user input is expected.
 
-An important note on user text: all input can be surrounded in quotes or not. For example, both ```Id: "here is an example"``` and ```Id: here is an example``` are both valid. However, users must be careful with unquoted input. The parser will fail if another keyword is detected.
+An important note on user text: all input can be surrounded in quotes or not. For example, both `Id: "here is an example"` and `Id: here is an example` are both valid. However, users must be careful with unquoted input. The parser will fail if another keyword is detected.
 
 ### Requirement
+
 A requirement definition contains a requirement type, name, id, text, risk, and verification method. The syntax follows:
 
 ```
@@ -43,13 +44,14 @@ A requirement definition contains a requirement type, name, id, text, risk, and
 
 Type, risk, and method are enumerations defined in SysML.
 
-| Keyword | Options |
-|---|---|
-| Type | requirement, functionalRequirement, interfaceRequirement, performanceRequirement, physicalRequirement, designConstraint |
-| Risk | Low, Medium, High |
-| VerificationMethod | Analysis, Inspection, Test, Demonstration |
+| Keyword            | Options                                                                                                                 |
+| ------------------ | ----------------------------------------------------------------------------------------------------------------------- |
+| Type               | requirement, functionalRequirement, interfaceRequirement, performanceRequirement, physicalRequirement, designConstraint |
+| Risk               | Low, Medium, High                                                                                                       |
+| VerificationMethod | Analysis, Inspection, Test, Demonstration                                                                               |
 
 ### Element
+
 An element definition contains an element name, type, and document reference. These three are all user defined. The element feature is intended to be lightweight but allow requirements to be connected to portions of other documents.
 
 ```
@@ -59,8 +61,8 @@ element user_defined_name {
 }
 ```
 
-
 ### Relationship
+
 Relationships are comprised of a source node, destination node, and relationship type.
 
 Each follows the definition format of
@@ -82,6 +84,7 @@ A relationship type can be one of contains, copies, derives, satisfies, verifies
 Each relationship is labeled in the diagram.
 
 ## Larger Example
+
 This example uses all features of the diagram.
 
 ```mermaid-example
diff --git a/docs/security.md b/docs/security.md
index 03e4fe260..efcb887e2 100644
--- a/docs/security.md
+++ b/docs/security.md
@@ -1,7 +1,9 @@
 # Security
+
 The Mermaid team takes the security of Mermaid and the applications that use Mermaid seriously. This page describes how to report any vulnerabilities you may find, and lists best practices to minimize the risk of introducing a vulnerability.
 
 ## Reporting vulnerabilities
+
 To report a vulnerability, please e-mail security@mermaid.live with a description of the issue, the steps you took to create the issue, affected versions, and if known, mitigations for the issue.
 
 We aim to reply within three working days, probably much sooner.
@@ -16,7 +18,6 @@ Keep current with the latest Mermaid releases. We regularly update Mermaid, and
 
 Keep your application’s dependencies up to date. Make sure you upgrade your package dependencies to keep the dependencies up to date. Avoid pinning to specific versions for your dependencies and, if you do, make sure you check periodically to see if your dependencies have had security updates, and update the pin accordingly.
 
-
 ## Configuring DomPurify
 
-By default Mermaid uses a baseline [DOMPurify](https://github.com/cure53/DOMPurify) config. It is possible to override the options passed to DOMPurify by adding a `dompurifyConfig` key to the Mermaid options. This could potentially break the output of Mermaid so use this with caution.
\ No newline at end of file
+By default Mermaid uses a baseline [DOMPurify](https://github.com/cure53/DOMPurify) config. It is possible to override the options passed to DOMPurify by adding a `dompurifyConfig` key to the Mermaid options. This could potentially break the output of Mermaid so use this with caution.
diff --git a/docs/sequenceDiagram.md b/docs/sequenceDiagram.md
index aac1817fe..77c68da19 100644
--- a/docs/sequenceDiagram.md
+++ b/docs/sequenceDiagram.md
@@ -1,6 +1,7 @@
 # Sequence diagrams
 
 **Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/sequenceDiagram.md)
+
 > A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.
 
 Mermaid can render sequence diagrams.
@@ -38,6 +39,7 @@ sequenceDiagram
 ### Actors
 
 If you specifically want to use the actor symbol instead of a rectangle with text you can do so by using actor statements as per below.
+
 ```mermaid-example
 sequenceDiagram
     actor Alice
@@ -68,15 +70,15 @@ Messages can be of two displayed either solid or with a dotted line.
 
 There are six types of arrows currently supported:
 
-| Type | Description                                 |
-| ---- | ------------------------------------------- |
-| ->   | Solid line without arrow                    |
-| -->  | Dotted line without arrow                   |
-| ->>  | Solid line with arrowhead                   |
-| -->> | Dotted line with arrowhead                  |
-| -x   | Solid line with a cross at the end          |
-| --x  | Dotted line with a cross at the end.        |
-| -)   | Solid line with an open arrow at the end (async)  |
+| Type | Description                                      |
+| ---- | ------------------------------------------------ |
+| ->   | Solid line without arrow                         |
+| -->  | Dotted line without arrow                        |
+| ->>  | Solid line with arrowhead                        |
+| -->> | Dotted line with arrowhead                       |
+| -x   | Solid line with a cross at the end               |
+| --x  | Dotted line with a cross at the end.             |
+| -)   | Solid line with an open arrow at the end (async) |
 | --)  | Dotted line with a open arrow at the end (async) |
 
 ## Activations
@@ -335,7 +337,7 @@ sequenceDiagram
 
 ## Comments
 
-Comments can be entered within a sequence diagram, which will be ignored by the parser.  Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
+Comments can be entered within a sequence diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
 
 ```mmd
 sequenceDiagram
@@ -363,9 +365,9 @@ Because semicolons can be used instead of line breaks to define the markup, you
 It is possible to get a sequence number attached to each arrow in a sequence diagram. This can be configured when adding mermaid to the website as shown below:
 
 ```html
-    <script>
-      mermaid.initialize({ sequence: { showSequenceNumbers: true }, });
-    </script>
+<script>
+  mermaid.initialize({ sequence: { showSequenceNumbers: true } });
+</script>
 ```
 
 It can also be be turned on via the diagram code as in the diagram:
@@ -385,12 +387,14 @@ sequenceDiagram
 
 ## Actor Menus
 
-Actors can have popup-menus containing individualized links to external pages.  For example, if an actor represented a web service, useful links might include a link to the service health dashboard, repo containing the code for the service, or a wiki page describing the service.
+Actors can have popup-menus containing individualized links to external pages. For example, if an actor represented a web service, useful links might include a link to the service health dashboard, repo containing the code for the service, or a wiki page describing the service.
 
 This can be configured by adding one or more link lines with the format:
+
 ```
 link <actor>: <link-label> @ <link-url>
 ```
+
 ```mmd
 sequenceDiagram
     participant Alice
@@ -405,6 +409,7 @@ sequenceDiagram
 ```
 
 #### Advanced Menu Syntax
+
 There is an advanced syntax that relies on JSON formatting. If you are comfortable with JSON format, then this exists as well.
 
 This can be configured by adding the links lines with the format:
@@ -451,81 +456,81 @@ Styling of a sequence diagram is done by defining a number of css classes. Durin
 
 ```css
 body {
-    background: white;
+  background: white;
 }
 
 .actor {
-    stroke: #ccccff;
-    fill: #ececff;
+  stroke: #ccccff;
+  fill: #ececff;
 }
 text.actor {
-    fill: black;
-    stroke: none;
-    font-family: Helvetica;
+  fill: black;
+  stroke: none;
+  font-family: Helvetica;
 }
 
 .actor-line {
-    stroke: grey;
+  stroke: grey;
 }
 
 .messageLine0 {
-    stroke-width: 1.5;
-    stroke-dasharray: '2 2';
-    marker-end: 'url(#arrowhead)';
-    stroke: black;
+  stroke-width: 1.5;
+  stroke-dasharray: '2 2';
+  marker-end: 'url(#arrowhead)';
+  stroke: black;
 }
 
 .messageLine1 {
-    stroke-width: 1.5;
-    stroke-dasharray: '2 2';
-    stroke: black;
+  stroke-width: 1.5;
+  stroke-dasharray: '2 2';
+  stroke: black;
 }
 
 #arrowhead {
-    fill: black;
+  fill: black;
 }
 
 .messageText {
-    fill: black;
-    stroke: none;
-    font-family: 'trebuchet ms', verdana, arial;
-    font-size: 14px;
+  fill: black;
+  stroke: none;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-size: 14px;
 }
 
 .labelBox {
-    stroke: #ccccff;
-    fill: #ececff;
+  stroke: #ccccff;
+  fill: #ececff;
 }
 
 .labelText {
-    fill: black;
-    stroke: none;
-    font-family: 'trebuchet ms', verdana, arial;
+  fill: black;
+  stroke: none;
+  font-family: 'trebuchet ms', verdana, arial;
 }
 
 .loopText {
-    fill: black;
-    stroke: none;
-    font-family: 'trebuchet ms', verdana, arial;
+  fill: black;
+  stroke: none;
+  font-family: 'trebuchet ms', verdana, arial;
 }
 
 .loopLine {
-    stroke-width: 2;
-    stroke-dasharray: '2 2';
-    marker-end: 'url(#arrowhead)';
-    stroke: #ccccff;
+  stroke-width: 2;
+  stroke-dasharray: '2 2';
+  marker-end: 'url(#arrowhead)';
+  stroke: #ccccff;
 }
 
 .note {
-    stroke: #decc93;
-    fill: #fff5ad;
+  stroke: #decc93;
+  fill: #fff5ad;
 }
 
 .noteText {
-    fill: black;
-    stroke: none;
-    font-family: 'trebuchet ms', verdana, arial;
-    font-size: 14px;
+  fill: black;
+  stroke: none;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-size: 14px;
 }
 ```
 
@@ -539,12 +544,12 @@ How to use the CLI is described in the [mermaidCLI](mermaidCLI) page.
 
 ```javascript
 mermaid.sequenceConfig = {
-    diagramMarginX: 50,
-    diagramMarginY: 10,
-    boxTextMargin: 5,
-    noteMargin: 10,
-    messageMargin: 35,
-    mirrorActors: true
+  diagramMarginX: 50,
+  diagramMarginY: 10,
+  boxTextMargin: 5,
+  noteMargin: 10,
+  messageMargin: 35,
+  mirrorActors: true,
 };
 ```
 
@@ -555,8 +560,8 @@ mermaid.sequenceConfig = {
 | mirrorActors      | Turns on/off the rendering of actors below the diagram as well as above it                                                                 | false                          |
 | bottomMarginAdj   | Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists. | 1                              |
 | actorFontSize     | Sets the font size for the actor's description                                                                                             | 14                             |
-| actorFontFamily   | Sets the font family for the actor's description                                                                                           | "Open Sans", sans-serif      |
-| actorFontWeight   | Sets the font weight for the actor's description                                                                                           | "Open Sans", sans-serif      |
+| actorFontFamily   | Sets the font family for the actor's description                                                                                           | "Open Sans", sans-serif        |
+| actorFontWeight   | Sets the font weight for the actor's description                                                                                           | "Open Sans", sans-serif        |
 | noteFontSize      | Sets the font size for actor-attached notes                                                                                                | 14                             |
 | noteFontFamily    | Sets the font family for actor-attached notes                                                                                              | "trebuchet ms", verdana, arial |
 | noteFontWeight    | Sets the font weight for actor-attached notes                                                                                              | "trebuchet ms", verdana, arial |
diff --git a/docs/stateDiagram.md b/docs/stateDiagram.md
index 6db8fbaed..e28819e7a 100644
--- a/docs/stateDiagram.md
+++ b/docs/stateDiagram.md
@@ -140,7 +140,7 @@ stateDiagram-v2
     }
 ```
 
-*You can not define transitions between internal states belonging to different composite states*
+_You can not define transitions between internal states belonging to different composite states_
 
 ## Choice
 
@@ -177,7 +177,7 @@ It is possible to specify a fork in the diagram using &lt;&lt;fork&gt;&gt; &lt;&
 
 Sometimes nothing says it better then a Post-it note. That is also the case in state diagrams.
 
-Here you can choose to put the note to the *right of* or to the *left of* a node.
+Here you can choose to put the note to the _right of_ or to the _left of_ a node.
 
 ```mermaid-example
     stateDiagram-v2
@@ -228,12 +228,11 @@ stateDiagram
       a --> b
     }
     B --> D
- ```
-
+```
 
 ## Comments
 
-Comments can be entered within a state diagram chart, which will be ignored by the parser.  Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
+Comments can be entered within a state diagram chart, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
 
 ```mmd
 stateDiagram-v2
@@ -248,7 +247,7 @@ stateDiagram-v2
 
 ## Styling
 
-Styling of the a state diagram is done by defining a number of css classes.  During rendering these classes are extracted from the file located at src/themes/state.scss
+Styling of the a state diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/state.scss
 
 ## Spaces in state names
 
diff --git a/docs/theme.css b/docs/theme.css
index 15be9db1c..28dbc0ab5 100644
--- a/docs/theme.css
+++ b/docs/theme.css
@@ -1,3 +1,827 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600");*{-webkit-font-smoothing:antialiased;-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:none;-webkit-touch-callout:none;box-sizing:border-box}
+@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600');
+* {
+  -webkit-font-smoothing: antialiased;
+  -webkit-overflow-scrolling: touch;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-text-size-adjust: none;
+  -webkit-touch-callout: none;
+  box-sizing: border-box;
+}
 
-body:not(.ready){overflow:hidden}body:not(.ready) .app-nav,body:not(.ready)>nav,body:not(.ready) [data-cloak]{display:none}div#app{font-size:30px;font-weight:lighter;margin:40vh auto;text-align:center}div#app:empty:before{content:"Loading..."}.emoji{height:1.2rem;vertical-align:middle}.progress{background-color:var(--theme-color,#42b983);height:2px;left:0;position:fixed;right:0;top:0;transition:width .2s,opacity .4s;width:0;z-index:999999}.search .search-keyword,.search a:hover{color:var(--theme-color,#42b983)}.search .search-keyword{font-style:normal;font-weight:700}body,html{height:100%}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:#34495e;font-family:Source Sans Pro,Helvetica Neue,Arial,sans-serif;font-size:15px;letter-spacing:0;margin:0;overflow-x:hidden}img{max-width:100%}a[disabled]{cursor:not-allowed;opacity:.6}kbd{border:1px solid #ccc;border-radius:3px;display:inline-block;font-size:12px!important;line-height:12px;margin-bottom:3px;padding:3px 5px;vertical-align:middle}li input[type=checkbox]{margin:0 .2em .25em 0;vertical-align:middle}.app-nav{margin:25px 60px 0 0;position:absolute;right:0;text-align:right;z-index:10}.app-nav.no-badge{margin-right:25px}.app-nav p{margin:0}.app-nav>a{margin:0 1rem;padding:5px 0}.app-nav li,.app-nav ul{display:inline-block;list-style:none;margin:0}.app-nav a{color:inherit;font-size:16px;text-decoration:none;transition:color .3s}.app-nav a.active,.app-nav a:hover{color:var(--theme-color,#42b983)}.app-nav a.active{border-bottom:2px solid var(--theme-color,#42b983)}.app-nav li{display:inline-block;margin:0 1rem;padding:5px 0;position:relative;cursor:pointer}.app-nav li ul{background-color:#fff;border:1px solid;border-color:#ddd #ddd #ccc;border-radius:4px;box-sizing:border-box;display:none;max-height:calc(100vh - 61px);overflow-y:auto;padding:10px 0;position:absolute;right:-15px;text-align:left;top:100%;white-space:nowrap}.app-nav li ul li{display:block;font-size:14px;line-height:1rem;margin:8px 14px;white-space:nowrap}.app-nav li ul a{display:block;font-size:inherit;margin:0;padding:0}.app-nav li ul a.active{border-bottom:0}.app-nav li:hover ul{display:block}.github-corner{border-bottom:0;position:fixed;right:0;text-decoration:none;top:0;z-index:1}.github-corner:hover .octo-arm{-webkit-animation:octocat-wave .56s ease-in-out;animation:octocat-wave .56s ease-in-out}.github-corner svg{color:#fff;fill:var(--theme-color,#42b983);height:80px;width:80px}main{display:block;position:relative;width:100vw;height:100%;z-index:0}main.hidden{display:none}.anchor{display:inline-block;text-decoration:none;transition:all .3s}.anchor span{color:#34495e}.anchor:hover{text-decoration:underline}.sidebar{border-right:1px solid rgba(0,0,0,.07);overflow-y:auto;padding:40px 0 0;position:absolute;top:0;bottom:0;left:0;transition:transform .25s ease-out;width:300px;z-index:20}.sidebar>h1{margin:0 auto 1rem;font-size:1.5rem;font-weight:300;text-align:center}.sidebar>h1 a{color:inherit;text-decoration:none}.sidebar>h1 .app-nav{display:block;position:static}.sidebar .sidebar-nav{line-height:2em;padding-bottom:40px}.sidebar li.collapse .app-sub-sidebar{display:none}.sidebar ul{margin:0 0 0 15px;padding:0}.sidebar li>p{font-weight:700;margin:0}.sidebar ul,.sidebar ul li{list-style:none}.sidebar ul li a{border-bottom:none;display:block}.sidebar ul li ul{padding-left:20px}.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-thumb{background:transparent;border-radius:4px}.sidebar:hover::-webkit-scrollbar-thumb{background:hsla(0,0%,53.3%,.4)}.sidebar:hover::-webkit-scrollbar-track{background:hsla(0,0%,53.3%,.1)}.sidebar-toggle{background-color:transparent;background-color:hsla(0,0%,100%,.8);border:0;outline:none;padding:10px;position:absolute;bottom:0;left:0;text-align:center;transition:opacity .3s;width:284px;z-index:30;cursor:pointer}.sidebar-toggle:hover .sidebar-toggle-button{opacity:.4}.sidebar-toggle span{background-color:var(--theme-color,#42b983);display:block;margin-bottom:4px;width:16px;height:2px}body.sticky .sidebar,body.sticky .sidebar-toggle{position:fixed}.content{padding-top:60px;position:absolute;top:0;right:0;bottom:0;left:300px;transition:left .25s ease}.markdown-section{margin:0 auto;max-width:80%;padding:30px 15px 40px;position:relative}.markdown-section>*{box-sizing:border-box;font-size:inherit}.markdown-section>:first-child{margin-top:0!important}.markdown-section hr{border:none;border-bottom:1px solid #eee;margin:2em 0}.markdown-section iframe{border:1px solid #eee;width:1px;min-width:100%}.markdown-section table{border-collapse:collapse;border-spacing:0;display:block;margin-bottom:1rem;overflow:auto;width:100%}.markdown-section th{font-weight:700}.markdown-section td,.markdown-section th{border:1px solid #ddd;padding:6px 13px}.markdown-section tr{border-top:1px solid #ccc}.markdown-section p.tip,.markdown-section tr:nth-child(2n){background-color:#f8f8f8}.markdown-section p.tip{border-bottom-right-radius:2px;border-left:4px solid #f66;border-top-right-radius:2px;margin:2em 0;padding:12px 24px 12px 30px;position:relative}.markdown-section p.tip:before{background-color:#f66;border-radius:100%;color:#fff;content:"!";font-family:Dosis,Source Sans Pro,Helvetica Neue,Arial,sans-serif;font-size:14px;font-weight:700;left:-12px;line-height:20px;position:absolute;height:20px;width:20px;text-align:center;top:14px}.markdown-section p.tip code{background-color:#efefef}.markdown-section p.tip em{color:#34495e}.markdown-section p.warn{background:rgba(66,185,131,.1);border-radius:2px;padding:1rem}.markdown-section ul.task-list>li{list-style-type:none}body.close .sidebar{transform:translateX(-300px)}body.close .sidebar-toggle{width:auto}body.close .content{left:0}@media print{.app-nav,.github-corner,.sidebar,.sidebar-toggle{display:none}}@media screen and (max-width:768px){.github-corner,.sidebar,.sidebar-toggle{position:fixed}.app-nav{margin-top:16px}.app-nav li ul{top:30px}main{height:auto;overflow-x:hidden}.sidebar{left:-300px;transition:transform .25s ease-out}.content{left:0;max-width:100vw;position:static;padding-top:20px;transition:transform .25s ease}.app-nav,.github-corner{transition:transform .25s ease-out}.sidebar-toggle{background-color:transparent;width:auto;padding:30px 30px 10px 10px}body.close .sidebar{transform:translateX(300px)}body.close .sidebar-toggle{background-color:hsla(0,0%,100%,.8);transition:background-color 1s;width:284px;padding:10px}body.close .content{transform:translateX(300px)}body.close .app-nav,body.close .github-corner{display:none}.github-corner:hover .octo-arm{-webkit-animation:none;animation:none}.github-corner .octo-arm{-webkit-animation:octocat-wave .56s ease-in-out;animation:octocat-wave .56s ease-in-out}}@-webkit-keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}section.cover{align-items:center;background-position:50%;background-repeat:no-repeat;background-size:cover;height:100vh;width:100vw;display:none}section.cover.show{display:flex}section.cover.has-mask .mask{background-color:#fff;opacity:.8;position:absolute;top:0;height:100%;width:100%}section.cover .cover-main{flex:1;margin:-20px 16px 0;text-align:center}section.cover a{color:inherit}section.cover a,section.cover a:hover{text-decoration:none}section.cover p{line-height:1.5rem;margin:1em 0}section.cover h1{color:inherit;font-size:2.5rem;font-weight:300;margin:.625rem 0 2.5rem;position:relative;text-align:center}section.cover h1 a{display:block}section.cover h1 small{bottom:-.4375rem;font-size:1rem;position:absolute}section.cover blockquote{font-size:1.5rem;text-align:center}section.cover ul{line-height:1.8;list-style-type:none;margin:1em auto;max-width:500px;padding:0}section.cover .cover-main>p:last-child a{border-radius:2rem;border:1px solid var(--theme-color,#42b983);box-sizing:border-box;color:var(--theme-color,#42b983);display:inline-block;font-size:1.05rem;letter-spacing:.1rem;margin:.5rem 1rem;padding:.75em 2rem;text-decoration:none;transition:all .15s ease}section.cover .cover-main>p:last-child a:last-child{background-color:var(--theme-color,#42b983);color:#fff}section.cover .cover-main>p:last-child a:last-child:hover{color:inherit;opacity:.8}section.cover .cover-main>p:last-child a:hover{color:inherit}section.cover blockquote>p>a{border-bottom:2px solid var(--theme-color,#42b983);transition:color .3s}section.cover blockquote>p>a:hover{color:var(--theme-color,#42b983)}.sidebar,body{background-color:#fff}.sidebar{color:#364149}.sidebar li{margin:6px 0}.sidebar ul li a{color:#505d6b;font-size:14px;font-weight:400;overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.sidebar ul li a:hover{text-decoration:underline}.sidebar ul li ul{padding:0}.sidebar ul li.active>a{border-right:2px solid;color:var(--theme-color,#42b983);font-weight:600}.app-sub-sidebar li:before{content:"-";padding-right:4px;float:left}.markdown-section h1,.markdown-section h2,.markdown-section h3,.markdown-section h4,.markdown-section strong{color:#2c3e50;font-weight:600}.markdown-section a{color:var(--theme-color,#42b983);font-weight:600}.markdown-section h1{font-size:2rem;margin:0 0 1rem}.markdown-section h2{font-size:1.75rem;margin:45px 0 .8rem}.markdown-section h3{font-size:1.5rem;margin:40px 0 .6rem}.markdown-section h4{font-size:1.25rem}.markdown-section h5{font-size:1rem}.markdown-section h6{color:#777;font-size:1rem}.markdown-section figure,.markdown-section p{margin:1.2em 0}.markdown-section ol,.markdown-section p,.markdown-section ul{line-height:1.6rem;word-spacing:.05rem}.markdown-section ol,.markdown-section ul{padding-left:1.5rem}.markdown-section blockquote{border-left:4px solid var(--theme-color,#42b983);color:#858585;margin:2em 0;padding-left:20px}.markdown-section blockquote p{font-weight:600;margin-left:0}.markdown-section iframe{margin:1em 0}.markdown-section em{color:#7f8c8d}.markdown-section code{border-radius:2px;color:#e96900;font-size:.8rem;margin:0 2px;padding:3px 5px;white-space:pre-wrap}.markdown-section code,.markdown-section pre{background-color:#f8f8f8;font-family:Roboto Mono,Monaco,courier,monospace}.markdown-section pre{-moz-osx-font-smoothing:initial;-webkit-font-smoothing:initial;line-height:1.5rem;margin:1.2em 0;overflow:auto;padding:0 1.4rem;position:relative;word-wrap:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#8e908c}.token.namespace{opacity:.7}.token.boolean,.token.number{color:#c76b29}.token.punctuation{color:#525252}.token.property{color:#c08b30}.token.tag{color:#2973b7}.token.string{color:var(--theme-color,#42b983)}.token.selector{color:#6679cc}.token.attr-name{color:#2973b7}.language-css .token.string,.style .token.string,.token.entity,.token.url{color:#22a2c9}.token.attr-value,.token.control,.token.directive,.token.unit{color:var(--theme-color,#42b983)}.token.function,.token.keyword{color:#e96900}.token.atrule,.token.regex,.token.statement{color:#22a2c9}.token.placeholder,.token.variable{color:#3d8fd1}.token.deleted{text-decoration:line-through}.token.inserted{border-bottom:1px dotted #202746;text-decoration:none}.token.italic{font-style:italic}.token.bold,.token.important{font-weight:700}.token.important{color:#c94922}.token.entity{cursor:help}.markdown-section pre>code{-moz-osx-font-smoothing:initial;-webkit-font-smoothing:initial;background-color:#f8f8f8;border-radius:2px;color:#525252;display:block;font-family:Roboto Mono,Monaco,courier,monospace;font-size:.8rem;line-height:inherit;margin:0 2px;max-width:inherit;overflow:inherit;padding:2.2em 5px;white-space:inherit}.markdown-section code:after,.markdown-section code:before{letter-spacing:.05rem}code .token{-moz-osx-font-smoothing:initial;-webkit-font-smoothing:initial;min-height:1.5rem;position:relative;left:auto}pre:after{color:#ccc;content:attr(data-lang);font-size:.6rem;font-weight:600;height:15px;line-height:15px;padding:5px 10px 0;position:absolute;right:0;text-align:right;top:0}
+body:not(.ready) {
+  overflow: hidden;
+}
+body:not(.ready) .app-nav,
+body:not(.ready) > nav,
+body:not(.ready) [data-cloak] {
+  display: none;
+}
+div#app {
+  font-size: 30px;
+  font-weight: lighter;
+  margin: 40vh auto;
+  text-align: center;
+}
+div#app:empty:before {
+  content: 'Loading...';
+}
+.emoji {
+  height: 1.2rem;
+  vertical-align: middle;
+}
+.progress {
+  background-color: var(--theme-color, #42b983);
+  height: 2px;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  transition: width 0.2s, opacity 0.4s;
+  width: 0;
+  z-index: 999999;
+}
+.search .search-keyword,
+.search a:hover {
+  color: var(--theme-color, #42b983);
+}
+.search .search-keyword {
+  font-style: normal;
+  font-weight: 700;
+}
+body,
+html {
+  height: 100%;
+}
+body {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  color: #34495e;
+  font-family: Source Sans Pro, Helvetica Neue, Arial, sans-serif;
+  font-size: 15px;
+  letter-spacing: 0;
+  margin: 0;
+  overflow-x: hidden;
+}
+img {
+  max-width: 100%;
+}
+a[disabled] {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+kbd {
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  display: inline-block;
+  font-size: 12px !important;
+  line-height: 12px;
+  margin-bottom: 3px;
+  padding: 3px 5px;
+  vertical-align: middle;
+}
+li input[type='checkbox'] {
+  margin: 0 0.2em 0.25em 0;
+  vertical-align: middle;
+}
+.app-nav {
+  margin: 25px 60px 0 0;
+  position: absolute;
+  right: 0;
+  text-align: right;
+  z-index: 10;
+}
+.app-nav.no-badge {
+  margin-right: 25px;
+}
+.app-nav p {
+  margin: 0;
+}
+.app-nav > a {
+  margin: 0 1rem;
+  padding: 5px 0;
+}
+.app-nav li,
+.app-nav ul {
+  display: inline-block;
+  list-style: none;
+  margin: 0;
+}
+.app-nav a {
+  color: inherit;
+  font-size: 16px;
+  text-decoration: none;
+  transition: color 0.3s;
+}
+.app-nav a.active,
+.app-nav a:hover {
+  color: var(--theme-color, #42b983);
+}
+.app-nav a.active {
+  border-bottom: 2px solid var(--theme-color, #42b983);
+}
+.app-nav li {
+  display: inline-block;
+  margin: 0 1rem;
+  padding: 5px 0;
+  position: relative;
+  cursor: pointer;
+}
+.app-nav li ul {
+  background-color: #fff;
+  border: 1px solid;
+  border-color: #ddd #ddd #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+  display: none;
+  max-height: calc(100vh - 61px);
+  overflow-y: auto;
+  padding: 10px 0;
+  position: absolute;
+  right: -15px;
+  text-align: left;
+  top: 100%;
+  white-space: nowrap;
+}
+.app-nav li ul li {
+  display: block;
+  font-size: 14px;
+  line-height: 1rem;
+  margin: 8px 14px;
+  white-space: nowrap;
+}
+.app-nav li ul a {
+  display: block;
+  font-size: inherit;
+  margin: 0;
+  padding: 0;
+}
+.app-nav li ul a.active {
+  border-bottom: 0;
+}
+.app-nav li:hover ul {
+  display: block;
+}
+.github-corner {
+  border-bottom: 0;
+  position: fixed;
+  right: 0;
+  text-decoration: none;
+  top: 0;
+  z-index: 1;
+}
+.github-corner:hover .octo-arm {
+  -webkit-animation: octocat-wave 0.56s ease-in-out;
+  animation: octocat-wave 0.56s ease-in-out;
+}
+.github-corner svg {
+  color: #fff;
+  fill: var(--theme-color, #42b983);
+  height: 80px;
+  width: 80px;
+}
+main {
+  display: block;
+  position: relative;
+  width: 100vw;
+  height: 100%;
+  z-index: 0;
+}
+main.hidden {
+  display: none;
+}
+.anchor {
+  display: inline-block;
+  text-decoration: none;
+  transition: all 0.3s;
+}
+.anchor span {
+  color: #34495e;
+}
+.anchor:hover {
+  text-decoration: underline;
+}
+.sidebar {
+  border-right: 1px solid rgba(0, 0, 0, 0.07);
+  overflow-y: auto;
+  padding: 40px 0 0;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  transition: transform 0.25s ease-out;
+  width: 300px;
+  z-index: 20;
+}
+.sidebar > h1 {
+  margin: 0 auto 1rem;
+  font-size: 1.5rem;
+  font-weight: 300;
+  text-align: center;
+}
+.sidebar > h1 a {
+  color: inherit;
+  text-decoration: none;
+}
+.sidebar > h1 .app-nav {
+  display: block;
+  position: static;
+}
+.sidebar .sidebar-nav {
+  line-height: 2em;
+  padding-bottom: 40px;
+}
+.sidebar li.collapse .app-sub-sidebar {
+  display: none;
+}
+.sidebar ul {
+  margin: 0 0 0 15px;
+  padding: 0;
+}
+.sidebar li > p {
+  font-weight: 700;
+  margin: 0;
+}
+.sidebar ul,
+.sidebar ul li {
+  list-style: none;
+}
+.sidebar ul li a {
+  border-bottom: none;
+  display: block;
+}
+.sidebar ul li ul {
+  padding-left: 20px;
+}
+.sidebar::-webkit-scrollbar {
+  width: 4px;
+}
+.sidebar::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 4px;
+}
+.sidebar:hover::-webkit-scrollbar-thumb {
+  background: hsla(0, 0%, 53.3%, 0.4);
+}
+.sidebar:hover::-webkit-scrollbar-track {
+  background: hsla(0, 0%, 53.3%, 0.1);
+}
+.sidebar-toggle {
+  background-color: transparent;
+  background-color: hsla(0, 0%, 100%, 0.8);
+  border: 0;
+  outline: none;
+  padding: 10px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  text-align: center;
+  transition: opacity 0.3s;
+  width: 284px;
+  z-index: 30;
+  cursor: pointer;
+}
+.sidebar-toggle:hover .sidebar-toggle-button {
+  opacity: 0.4;
+}
+.sidebar-toggle span {
+  background-color: var(--theme-color, #42b983);
+  display: block;
+  margin-bottom: 4px;
+  width: 16px;
+  height: 2px;
+}
+body.sticky .sidebar,
+body.sticky .sidebar-toggle {
+  position: fixed;
+}
+.content {
+  padding-top: 60px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 300px;
+  transition: left 0.25s ease;
+}
+.markdown-section {
+  margin: 0 auto;
+  max-width: 80%;
+  padding: 30px 15px 40px;
+  position: relative;
+}
+.markdown-section > * {
+  box-sizing: border-box;
+  font-size: inherit;
+}
+.markdown-section > :first-child {
+  margin-top: 0 !important;
+}
+.markdown-section hr {
+  border: none;
+  border-bottom: 1px solid #eee;
+  margin: 2em 0;
+}
+.markdown-section iframe {
+  border: 1px solid #eee;
+  width: 1px;
+  min-width: 100%;
+}
+.markdown-section table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  display: block;
+  margin-bottom: 1rem;
+  overflow: auto;
+  width: 100%;
+}
+.markdown-section th {
+  font-weight: 700;
+}
+.markdown-section td,
+.markdown-section th {
+  border: 1px solid #ddd;
+  padding: 6px 13px;
+}
+.markdown-section tr {
+  border-top: 1px solid #ccc;
+}
+.markdown-section p.tip,
+.markdown-section tr:nth-child(2n) {
+  background-color: #f8f8f8;
+}
+.markdown-section p.tip {
+  border-bottom-right-radius: 2px;
+  border-left: 4px solid #f66;
+  border-top-right-radius: 2px;
+  margin: 2em 0;
+  padding: 12px 24px 12px 30px;
+  position: relative;
+}
+.markdown-section p.tip:before {
+  background-color: #f66;
+  border-radius: 100%;
+  color: #fff;
+  content: '!';
+  font-family: Dosis, Source Sans Pro, Helvetica Neue, Arial, sans-serif;
+  font-size: 14px;
+  font-weight: 700;
+  left: -12px;
+  line-height: 20px;
+  position: absolute;
+  height: 20px;
+  width: 20px;
+  text-align: center;
+  top: 14px;
+}
+.markdown-section p.tip code {
+  background-color: #efefef;
+}
+.markdown-section p.tip em {
+  color: #34495e;
+}
+.markdown-section p.warn {
+  background: rgba(66, 185, 131, 0.1);
+  border-radius: 2px;
+  padding: 1rem;
+}
+.markdown-section ul.task-list > li {
+  list-style-type: none;
+}
+body.close .sidebar {
+  transform: translateX(-300px);
+}
+body.close .sidebar-toggle {
+  width: auto;
+}
+body.close .content {
+  left: 0;
+}
+@media print {
+  .app-nav,
+  .github-corner,
+  .sidebar,
+  .sidebar-toggle {
+    display: none;
+  }
+}
+@media screen and (max-width: 768px) {
+  .github-corner,
+  .sidebar,
+  .sidebar-toggle {
+    position: fixed;
+  }
+  .app-nav {
+    margin-top: 16px;
+  }
+  .app-nav li ul {
+    top: 30px;
+  }
+  main {
+    height: auto;
+    overflow-x: hidden;
+  }
+  .sidebar {
+    left: -300px;
+    transition: transform 0.25s ease-out;
+  }
+  .content {
+    left: 0;
+    max-width: 100vw;
+    position: static;
+    padding-top: 20px;
+    transition: transform 0.25s ease;
+  }
+  .app-nav,
+  .github-corner {
+    transition: transform 0.25s ease-out;
+  }
+  .sidebar-toggle {
+    background-color: transparent;
+    width: auto;
+    padding: 30px 30px 10px 10px;
+  }
+  body.close .sidebar {
+    transform: translateX(300px);
+  }
+  body.close .sidebar-toggle {
+    background-color: hsla(0, 0%, 100%, 0.8);
+    transition: background-color 1s;
+    width: 284px;
+    padding: 10px;
+  }
+  body.close .content {
+    transform: translateX(300px);
+  }
+  body.close .app-nav,
+  body.close .github-corner {
+    display: none;
+  }
+  .github-corner:hover .octo-arm {
+    -webkit-animation: none;
+    animation: none;
+  }
+  .github-corner .octo-arm {
+    -webkit-animation: octocat-wave 0.56s ease-in-out;
+    animation: octocat-wave 0.56s ease-in-out;
+  }
+}
+@-webkit-keyframes octocat-wave {
+  0%,
+  to {
+    transform: rotate(0);
+  }
+  20%,
+  60% {
+    transform: rotate(-25deg);
+  }
+  40%,
+  80% {
+    transform: rotate(10deg);
+  }
+}
+@keyframes octocat-wave {
+  0%,
+  to {
+    transform: rotate(0);
+  }
+  20%,
+  60% {
+    transform: rotate(-25deg);
+  }
+  40%,
+  80% {
+    transform: rotate(10deg);
+  }
+}
+section.cover {
+  align-items: center;
+  background-position: 50%;
+  background-repeat: no-repeat;
+  background-size: cover;
+  height: 100vh;
+  width: 100vw;
+  display: none;
+}
+section.cover.show {
+  display: flex;
+}
+section.cover.has-mask .mask {
+  background-color: #fff;
+  opacity: 0.8;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 100%;
+}
+section.cover .cover-main {
+  flex: 1;
+  margin: -20px 16px 0;
+  text-align: center;
+}
+section.cover a {
+  color: inherit;
+}
+section.cover a,
+section.cover a:hover {
+  text-decoration: none;
+}
+section.cover p {
+  line-height: 1.5rem;
+  margin: 1em 0;
+}
+section.cover h1 {
+  color: inherit;
+  font-size: 2.5rem;
+  font-weight: 300;
+  margin: 0.625rem 0 2.5rem;
+  position: relative;
+  text-align: center;
+}
+section.cover h1 a {
+  display: block;
+}
+section.cover h1 small {
+  bottom: -0.4375rem;
+  font-size: 1rem;
+  position: absolute;
+}
+section.cover blockquote {
+  font-size: 1.5rem;
+  text-align: center;
+}
+section.cover ul {
+  line-height: 1.8;
+  list-style-type: none;
+  margin: 1em auto;
+  max-width: 500px;
+  padding: 0;
+}
+section.cover .cover-main > p:last-child a {
+  border-radius: 2rem;
+  border: 1px solid var(--theme-color, #42b983);
+  box-sizing: border-box;
+  color: var(--theme-color, #42b983);
+  display: inline-block;
+  font-size: 1.05rem;
+  letter-spacing: 0.1rem;
+  margin: 0.5rem 1rem;
+  padding: 0.75em 2rem;
+  text-decoration: none;
+  transition: all 0.15s ease;
+}
+section.cover .cover-main > p:last-child a:last-child {
+  background-color: var(--theme-color, #42b983);
+  color: #fff;
+}
+section.cover .cover-main > p:last-child a:last-child:hover {
+  color: inherit;
+  opacity: 0.8;
+}
+section.cover .cover-main > p:last-child a:hover {
+  color: inherit;
+}
+section.cover blockquote > p > a {
+  border-bottom: 2px solid var(--theme-color, #42b983);
+  transition: color 0.3s;
+}
+section.cover blockquote > p > a:hover {
+  color: var(--theme-color, #42b983);
+}
+.sidebar,
+body {
+  background-color: #fff;
+}
+.sidebar {
+  color: #364149;
+}
+.sidebar li {
+  margin: 6px 0;
+}
+.sidebar ul li a {
+  color: #505d6b;
+  font-size: 14px;
+  font-weight: 400;
+  overflow: hidden;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sidebar ul li a:hover {
+  text-decoration: underline;
+}
+.sidebar ul li ul {
+  padding: 0;
+}
+.sidebar ul li.active > a {
+  border-right: 2px solid;
+  color: var(--theme-color, #42b983);
+  font-weight: 600;
+}
+.app-sub-sidebar li:before {
+  content: '-';
+  padding-right: 4px;
+  float: left;
+}
+.markdown-section h1,
+.markdown-section h2,
+.markdown-section h3,
+.markdown-section h4,
+.markdown-section strong {
+  color: #2c3e50;
+  font-weight: 600;
+}
+.markdown-section a {
+  color: var(--theme-color, #42b983);
+  font-weight: 600;
+}
+.markdown-section h1 {
+  font-size: 2rem;
+  margin: 0 0 1rem;
+}
+.markdown-section h2 {
+  font-size: 1.75rem;
+  margin: 45px 0 0.8rem;
+}
+.markdown-section h3 {
+  font-size: 1.5rem;
+  margin: 40px 0 0.6rem;
+}
+.markdown-section h4 {
+  font-size: 1.25rem;
+}
+.markdown-section h5 {
+  font-size: 1rem;
+}
+.markdown-section h6 {
+  color: #777;
+  font-size: 1rem;
+}
+.markdown-section figure,
+.markdown-section p {
+  margin: 1.2em 0;
+}
+.markdown-section ol,
+.markdown-section p,
+.markdown-section ul {
+  line-height: 1.6rem;
+  word-spacing: 0.05rem;
+}
+.markdown-section ol,
+.markdown-section ul {
+  padding-left: 1.5rem;
+}
+.markdown-section blockquote {
+  border-left: 4px solid var(--theme-color, #42b983);
+  color: #858585;
+  margin: 2em 0;
+  padding-left: 20px;
+}
+.markdown-section blockquote p {
+  font-weight: 600;
+  margin-left: 0;
+}
+.markdown-section iframe {
+  margin: 1em 0;
+}
+.markdown-section em {
+  color: #7f8c8d;
+}
+.markdown-section code {
+  border-radius: 2px;
+  color: #e96900;
+  font-size: 0.8rem;
+  margin: 0 2px;
+  padding: 3px 5px;
+  white-space: pre-wrap;
+}
+.markdown-section code,
+.markdown-section pre {
+  background-color: #f8f8f8;
+  font-family: Roboto Mono, Monaco, courier, monospace;
+}
+.markdown-section pre {
+  -moz-osx-font-smoothing: initial;
+  -webkit-font-smoothing: initial;
+  line-height: 1.5rem;
+  margin: 1.2em 0;
+  overflow: auto;
+  padding: 0 1.4rem;
+  position: relative;
+  word-wrap: normal;
+}
+.token.cdata,
+.token.comment,
+.token.doctype,
+.token.prolog {
+  color: #8e908c;
+}
+.token.namespace {
+  opacity: 0.7;
+}
+.token.boolean,
+.token.number {
+  color: #c76b29;
+}
+.token.punctuation {
+  color: #525252;
+}
+.token.property {
+  color: #c08b30;
+}
+.token.tag {
+  color: #2973b7;
+}
+.token.string {
+  color: var(--theme-color, #42b983);
+}
+.token.selector {
+  color: #6679cc;
+}
+.token.attr-name {
+  color: #2973b7;
+}
+.language-css .token.string,
+.style .token.string,
+.token.entity,
+.token.url {
+  color: #22a2c9;
+}
+.token.attr-value,
+.token.control,
+.token.directive,
+.token.unit {
+  color: var(--theme-color, #42b983);
+}
+.token.function,
+.token.keyword {
+  color: #e96900;
+}
+.token.atrule,
+.token.regex,
+.token.statement {
+  color: #22a2c9;
+}
+.token.placeholder,
+.token.variable {
+  color: #3d8fd1;
+}
+.token.deleted {
+  text-decoration: line-through;
+}
+.token.inserted {
+  border-bottom: 1px dotted #202746;
+  text-decoration: none;
+}
+.token.italic {
+  font-style: italic;
+}
+.token.bold,
+.token.important {
+  font-weight: 700;
+}
+.token.important {
+  color: #c94922;
+}
+.token.entity {
+  cursor: help;
+}
+.markdown-section pre > code {
+  -moz-osx-font-smoothing: initial;
+  -webkit-font-smoothing: initial;
+  background-color: #f8f8f8;
+  border-radius: 2px;
+  color: #525252;
+  display: block;
+  font-family: Roboto Mono, Monaco, courier, monospace;
+  font-size: 0.8rem;
+  line-height: inherit;
+  margin: 0 2px;
+  max-width: inherit;
+  overflow: inherit;
+  padding: 2.2em 5px;
+  white-space: inherit;
+}
+.markdown-section code:after,
+.markdown-section code:before {
+  letter-spacing: 0.05rem;
+}
+code .token {
+  -moz-osx-font-smoothing: initial;
+  -webkit-font-smoothing: initial;
+  min-height: 1.5rem;
+  position: relative;
+  left: auto;
+}
+pre:after {
+  color: #ccc;
+  content: attr(data-lang);
+  font-size: 0.6rem;
+  font-weight: 600;
+  height: 15px;
+  line-height: 15px;
+  padding: 5px 10px 0;
+  position: absolute;
+  right: 0;
+  text-align: right;
+  top: 0;
+}
diff --git a/docs/theme_themed.css b/docs/theme_themed.css
index cce96ad87..9cb520ed7 100644
--- a/docs/theme_themed.css
+++ b/docs/theme_themed.css
@@ -1,10 +1,1653 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600");*{-webkit-font-smoothing:antialiased;-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:none;-webkit-touch-callout:none;box-sizing:border-box}
+@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600');
+* {
+  -webkit-font-smoothing: antialiased;
+  -webkit-overflow-scrolling: touch;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-text-size-adjust: none;
+  -webkit-touch-callout: none;
+  box-sizing: border-box;
+}
 
 @media (prefers-color-scheme: dark2) {
-    body:not(.ready){overflow:hidden}body:not(.ready) .app-nav,body:not(.ready)>nav,body:not(.ready) [data-cloak]{display:none}div#app{font-size:30px;font-weight:lighter;margin:40vh auto;text-align:center}div#app:empty:before{content:"Loading..."}.emoji{height:1.2rem;vertical-align:middle}.progress{background-color:var(--theme-color,#ea6f5a);height:2px;left:0;position:fixed;right:0;top:0;transition:width .2s,opacity .4s;width:0;z-index:999999}.search .search-keyword,.search a:hover{color:var(--theme-color,#ea6f5a)}.search .search-keyword{font-style:normal;font-weight:700}body,html{height:100%}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:#c8c8c8;font-family:Source Sans Pro,Helvetica Neue,Arial,sans-serif;font-size:15px;letter-spacing:0;margin:0;overflow-x:hidden}img{max-width:100%}a[disabled]{cursor:not-allowed;opacity:.6}kbd{border:1px solid #ccc;border-radius:3px;display:inline-block;font-size:12px!important;line-height:12px;margin-bottom:3px;padding:3px 5px;vertical-align:middle}li input[type=checkbox]{margin:0 .2em .25em 0;vertical-align:middle}.app-nav{margin:25px 60px 0 0;position:absolute;right:0;text-align:right;z-index:10}.app-nav.no-badge{margin-right:25px}.app-nav p{margin:0}.app-nav>a{margin:0 1rem;padding:5px 0}.app-nav li,.app-nav ul{display:inline-block;list-style:none;margin:0}.app-nav a{color:inherit;font-size:16px;text-decoration:none;transition:color .3s}.app-nav a.active,.app-nav a:hover{color:var(--theme-color,#ea6f5a)}.app-nav a.active{border-bottom:2px solid var(--theme-color,#ea6f5a)}.app-nav li{display:inline-block;margin:0 1rem;padding:5px 0;position:relative;cursor:pointer}.app-nav li ul{background-color:#fff;border:1px solid;border-color:#ddd #ddd #ccc;border-radius:4px;box-sizing:border-box;display:none;max-height:calc(100vh - 61px);overflow-y:auto;padding:10px 0;position:absolute;right:-15px;text-align:left;top:100%;white-space:nowrap}.app-nav li ul li{display:block;font-size:14px;line-height:1rem;margin:8px 14px;white-space:nowrap}.app-nav li ul a{display:block;font-size:inherit;margin:0;padding:0}.app-nav li ul a.active{border-bottom:0}.app-nav li:hover ul{display:block}.github-corner{border-bottom:0;position:fixed;right:0;text-decoration:none;top:0;z-index:1}.github-corner:hover .octo-arm{-webkit-animation:octocat-wave .56s ease-in-out;animation:octocat-wave .56s ease-in-out}.github-corner svg{color:#3f3f3f;fill:var(--theme-color,#ea6f5a);height:80px;width:80px}main{display:block;position:relative;width:100vw;height:100%;z-index:0}main.hidden{display:none}.anchor{display:inline-block;text-decoration:none;transition:all .3s}.anchor span{color:#c8c8c8}.anchor:hover{text-decoration:underline}.sidebar{border-right:1px solid rgba(0,0,0,.07);overflow-y:auto;padding:40px 0 0;position:absolute;top:0;bottom:0;left:0;transition:transform .25s ease-out;width:300px;z-index:20}.sidebar>h1{margin:0 auto 1rem;font-size:1.5rem;font-weight:300;text-align:center}.sidebar>h1 a{color:inherit;text-decoration:none}.sidebar>h1 .app-nav{display:block;position:static}.sidebar .sidebar-nav{line-height:2em;padding-bottom:40px}.sidebar li.collapse .app-sub-sidebar{display:none}.sidebar ul{margin:0 0 0 15px;padding:0}.sidebar li>p{font-weight:700;margin:0}.sidebar ul,.sidebar ul li{list-style:none}.sidebar ul li a{border-bottom:none;display:block}.sidebar ul li ul{padding-left:20px}.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-thumb{background:transparent;border-radius:4px}.sidebar:hover::-webkit-scrollbar-thumb{background:hsla(0,0%,53.3%,.4)}.sidebar:hover::-webkit-scrollbar-track{background:hsla(0,0%,53.3%,.1)}.sidebar-toggle{background-color:transparent;background-color:rgba(63,63,63,.8);border:0;outline:none;padding:10px;position:absolute;bottom:0;left:0;text-align:center;transition:opacity .3s;width:284px;z-index:30;cursor:pointer}.sidebar-toggle:hover .sidebar-toggle-button{opacity:.4}.sidebar-toggle span{background-color:var(--theme-color,#ea6f5a);display:block;margin-bottom:4px;width:16px;height:2px}body.sticky .sidebar,body.sticky .sidebar-toggle{position:fixed}.content{padding-top:60px;position:absolute;top:0;right:0;bottom:0;left:300px;transition:left .25s ease}.markdown-section{margin:0 auto;max-width:80%;padding:30px 15px 40px;position:relative}.markdown-section>*{box-sizing:border-box;font-size:inherit}.markdown-section>:first-child{margin-top:0!important}.markdown-section hr{border:none;border-bottom:1px solid #eee;margin:2em 0}.markdown-section iframe{border:1px solid #eee;width:1px;min-width:100%}.markdown-section table{border-collapse:collapse;border-spacing:0;display:block;margin-bottom:1rem;overflow:auto;width:100%}.markdown-section th{font-weight:700}.markdown-section td,.markdown-section th{border:1px solid #ddd;padding:6px 13px}.markdown-section tr{border-top:1px solid #ccc}.markdown-section p.tip,.markdown-section tr:nth-child(2n){background-color:#f8f8f8}.markdown-section p.tip{border-bottom-right-radius:2px;border-left:4px solid #f66;border-top-right-radius:2px;margin:2em 0;padding:12px 24px 12px 30px;position:relative}.markdown-section p.tip:before{background-color:#f66;border-radius:100%;color:#3f3f3f;content:"!";font-family:Dosis,Source Sans Pro,Helvetica Neue,Arial,sans-serif;font-size:14px;font-weight:700;left:-12px;line-height:20px;position:absolute;height:20px;width:20px;text-align:center;top:14px}.markdown-section p.tip code{background-color:#efefef}.markdown-section p.tip em{color:#c8c8c8}.markdown-section p.warn{background:rgba(234,111,90,.1);border-radius:2px;padding:1rem}.markdown-section ul.task-list>li{list-style-type:none}body.close .sidebar{transform:translateX(-300px)}body.close .sidebar-toggle{width:auto}body.close .content{left:0}@media print{.app-nav,.github-corner,.sidebar,.sidebar-toggle{display:none}}@media screen and (max-width:768px){.github-corner,.sidebar,.sidebar-toggle{position:fixed}.app-nav{margin-top:16px}.app-nav li ul{top:30px}main{height:auto;overflow-x:hidden}.sidebar{left:-300px;transition:transform .25s ease-out}.content{left:0;max-width:100vw;position:static;padding-top:20px;transition:transform .25s ease}.app-nav,.github-corner{transition:transform .25s ease-out}.sidebar-toggle{background-color:transparent;width:auto;padding:30px 30px 10px 10px}body.close .sidebar{transform:translateX(300px)}body.close .sidebar-toggle{background-color:rgba(63,63,63,.8);transition:background-color 1s;width:284px;padding:10px}body.close .content{transform:translateX(300px)}body.close .app-nav,body.close .github-corner{display:none}.github-corner:hover .octo-arm{-webkit-animation:none;animation:none}.github-corner .octo-arm{-webkit-animation:octocat-wave .56s ease-in-out;animation:octocat-wave .56s ease-in-out}}@-webkit-keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}section.cover{align-items:center;background-position:50%;background-repeat:no-repeat;background-size:cover;height:100vh;width:100vw;display:none}section.cover.show{display:flex}section.cover.has-mask .mask{background-color:#3f3f3f;opacity:.8;position:absolute;top:0;height:100%;width:100%}section.cover .cover-main{flex:1;margin:-20px 16px 0;text-align:center}section.cover a{color:inherit}section.cover a,section.cover a:hover{text-decoration:none}section.cover p{line-height:1.5rem;margin:1em 0}section.cover h1{color:inherit;font-size:2.5rem;font-weight:300;margin:.625rem 0 2.5rem;position:relative;text-align:center}section.cover h1 a{display:block}section.cover h1 small{bottom:-.4375rem;font-size:1rem;position:absolute}section.cover blockquote{font-size:1.5rem;text-align:center}section.cover ul{line-height:1.8;list-style-type:none;margin:1em auto;max-width:500px;padding:0}section.cover .cover-main>p:last-child a{border-radius:2rem;border:1px solid var(--theme-color,#ea6f5a);box-sizing:border-box;color:var(--theme-color,#ea6f5a);display:inline-block;font-size:1.05rem;letter-spacing:.1rem;margin:.5rem 1rem;padding:.75em 2rem;text-decoration:none;transition:all .15s ease}section.cover .cover-main>p:last-child a:last-child{background-color:var(--theme-color,#ea6f5a);color:#fff}section.cover .cover-main>p:last-child a:last-child:hover{color:inherit;opacity:.8}section.cover .cover-main>p:last-child a:hover{color:inherit}section.cover blockquote>p>a{border-bottom:2px solid var(--theme-color,#ea6f5a);transition:color .3s}section.cover blockquote>p>a:hover{color:var(--theme-color,#ea6f5a)}.sidebar,body{background-color:#3f3f3f}.sidebar{color:#c8c8c8}.sidebar li{margin:6px 15px 6px 0}.sidebar ul li a{color:#c8c8c8;font-size:14px;overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.sidebar ul li a:hover{text-decoration:underline}.sidebar ul li ul{padding:0}.sidebar ul li.active>a{color:var(--theme-color,#ea6f5a);font-weight:600}.markdown-section h1,.markdown-section h2,.markdown-section h3,.markdown-section h4,.markdown-section strong{color:#657b83;font-weight:600}.markdown-section a{color:var(--theme-color,#ea6f5a);font-weight:600}.markdown-section h1{font-size:2rem;margin:0 0 1rem}.markdown-section h2{font-size:1.75rem;margin:45px 0 .8rem}.markdown-section h3{font-size:1.5rem;margin:40px 0 .6rem}.markdown-section h4{font-size:1.25rem}.markdown-section h5{font-size:1rem}.markdown-section h6{color:#777;font-size:1rem}.markdown-section figure,.markdown-section ol,.markdown-section p,.markdown-section ul{margin:1.2em 0}.markdown-section ol,.markdown-section p,.markdown-section ul{line-height:1.6rem;word-spacing:.05rem}.markdown-section ol,.markdown-section ul{padding-left:1.5rem}.markdown-section blockquote{border-left:4px solid var(--theme-color,#ea6f5a);color:#858585;margin:2em 0;padding-left:20px}.markdown-section blockquote p{font-weight:600;margin-left:0}.markdown-section iframe{margin:1em 0}.markdown-section em{color:#7f8c8d}.markdown-section code{border-radius:2px;color:#657b83;font-size:.8rem;margin:0 2px;padding:3px 5px;white-space:pre-wrap}.markdown-section code,.markdown-section pre{background-color:#282828;font-family:Roboto Mono,Monaco,courier,monospace}.markdown-section pre{-moz-osx-font-smoothing:initial;-webkit-font-smoothing:initial;line-height:1.5rem;margin:1.2em 0;overflow:auto;padding:0 1.4rem;position:relative;word-wrap:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#8e908c}.token.namespace{opacity:.7}.token.boolean,.token.number{color:#c76b29}.token.punctuation{color:#525252}.token.property{color:#c08b30}.token.tag{color:#2973b7}.token.string{color:var(--theme-color,#ea6f5a)}.token.selector{color:#6679cc}.token.attr-name{color:#2973b7}.language-css .token.string,.style .token.string,.token.entity,.token.url{color:#22a2c9}.token.attr-value,.token.control,.token.directive,.token.unit{color:var(--theme-color,#ea6f5a)}.token.keyword{color:#e96900}.token.atrule,.token.regex,.token.statement{color:#22a2c9}.token.placeholder,.token.variable{color:#3d8fd1}.token.deleted{text-decoration:line-through}.token.inserted{border-bottom:1px dotted #202746;text-decoration:none}.token.italic{font-style:italic}.token.bold,.token.important{font-weight:700}.token.important{color:#c94922}.token.entity{cursor:help}.markdown-section pre>code{-moz-osx-font-smoothing:initial;-webkit-font-smoothing:initial;background-color:#282828;border-radius:2px;color:#657b83;display:block;font-family:Roboto Mono,Monaco,courier,monospace;font-size:.8rem;line-height:inherit;margin:0 2px;max-width:inherit;overflow:inherit;padding:2.2em 5px;white-space:inherit}.markdown-section code:after,.markdown-section code:before{letter-spacing:.05rem}code .token{-moz-osx-font-smoothing:initial;-webkit-font-smoothing:initial;min-height:1.5rem;position:relative;left:auto}pre:after{color:#ccc;content:attr(data-lang);font-size:.6rem;font-weight:600;height:15px;line-height:15px;padding:5px 10px 0;position:absolute;right:0;text-align:right;top:0}.markdown-section p.tip{background-color:#282828;color:#657b83}input[type=search]{background:#4f4f4f;border-color:#4f4f4f;color:#c8c8c8}
+  body:not(.ready) {
+    overflow: hidden;
+  }
+  body:not(.ready) .app-nav,
+  body:not(.ready) > nav,
+  body:not(.ready) [data-cloak] {
+    display: none;
+  }
+  div#app {
+    font-size: 30px;
+    font-weight: lighter;
+    margin: 40vh auto;
+    text-align: center;
+  }
+  div#app:empty:before {
+    content: 'Loading...';
+  }
+  .emoji {
+    height: 1.2rem;
+    vertical-align: middle;
+  }
+  .progress {
+    background-color: var(--theme-color, #ea6f5a);
+    height: 2px;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    transition: width 0.2s, opacity 0.4s;
+    width: 0;
+    z-index: 999999;
+  }
+  .search .search-keyword,
+  .search a:hover {
+    color: var(--theme-color, #ea6f5a);
+  }
+  .search .search-keyword {
+    font-style: normal;
+    font-weight: 700;
+  }
+  body,
+  html {
+    height: 100%;
+  }
+  body {
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    color: #c8c8c8;
+    font-family: Source Sans Pro, Helvetica Neue, Arial, sans-serif;
+    font-size: 15px;
+    letter-spacing: 0;
+    margin: 0;
+    overflow-x: hidden;
+  }
+  img {
+    max-width: 100%;
+  }
+  a[disabled] {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+  kbd {
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    display: inline-block;
+    font-size: 12px !important;
+    line-height: 12px;
+    margin-bottom: 3px;
+    padding: 3px 5px;
+    vertical-align: middle;
+  }
+  li input[type='checkbox'] {
+    margin: 0 0.2em 0.25em 0;
+    vertical-align: middle;
+  }
+  .app-nav {
+    margin: 25px 60px 0 0;
+    position: absolute;
+    right: 0;
+    text-align: right;
+    z-index: 10;
+  }
+  .app-nav.no-badge {
+    margin-right: 25px;
+  }
+  .app-nav p {
+    margin: 0;
+  }
+  .app-nav > a {
+    margin: 0 1rem;
+    padding: 5px 0;
+  }
+  .app-nav li,
+  .app-nav ul {
+    display: inline-block;
+    list-style: none;
+    margin: 0;
+  }
+  .app-nav a {
+    color: inherit;
+    font-size: 16px;
+    text-decoration: none;
+    transition: color 0.3s;
+  }
+  .app-nav a.active,
+  .app-nav a:hover {
+    color: var(--theme-color, #ea6f5a);
+  }
+  .app-nav a.active {
+    border-bottom: 2px solid var(--theme-color, #ea6f5a);
+  }
+  .app-nav li {
+    display: inline-block;
+    margin: 0 1rem;
+    padding: 5px 0;
+    position: relative;
+    cursor: pointer;
+  }
+  .app-nav li ul {
+    background-color: #fff;
+    border: 1px solid;
+    border-color: #ddd #ddd #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+    display: none;
+    max-height: calc(100vh - 61px);
+    overflow-y: auto;
+    padding: 10px 0;
+    position: absolute;
+    right: -15px;
+    text-align: left;
+    top: 100%;
+    white-space: nowrap;
+  }
+  .app-nav li ul li {
+    display: block;
+    font-size: 14px;
+    line-height: 1rem;
+    margin: 8px 14px;
+    white-space: nowrap;
+  }
+  .app-nav li ul a {
+    display: block;
+    font-size: inherit;
+    margin: 0;
+    padding: 0;
+  }
+  .app-nav li ul a.active {
+    border-bottom: 0;
+  }
+  .app-nav li:hover ul {
+    display: block;
+  }
+  .github-corner {
+    border-bottom: 0;
+    position: fixed;
+    right: 0;
+    text-decoration: none;
+    top: 0;
+    z-index: 1;
+  }
+  .github-corner:hover .octo-arm {
+    -webkit-animation: octocat-wave 0.56s ease-in-out;
+    animation: octocat-wave 0.56s ease-in-out;
+  }
+  .github-corner svg {
+    color: #3f3f3f;
+    fill: var(--theme-color, #ea6f5a);
+    height: 80px;
+    width: 80px;
+  }
+  main {
+    display: block;
+    position: relative;
+    width: 100vw;
+    height: 100%;
+    z-index: 0;
+  }
+  main.hidden {
+    display: none;
+  }
+  .anchor {
+    display: inline-block;
+    text-decoration: none;
+    transition: all 0.3s;
+  }
+  .anchor span {
+    color: #c8c8c8;
+  }
+  .anchor:hover {
+    text-decoration: underline;
+  }
+  .sidebar {
+    border-right: 1px solid rgba(0, 0, 0, 0.07);
+    overflow-y: auto;
+    padding: 40px 0 0;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    transition: transform 0.25s ease-out;
+    width: 300px;
+    z-index: 20;
+  }
+  .sidebar > h1 {
+    margin: 0 auto 1rem;
+    font-size: 1.5rem;
+    font-weight: 300;
+    text-align: center;
+  }
+  .sidebar > h1 a {
+    color: inherit;
+    text-decoration: none;
+  }
+  .sidebar > h1 .app-nav {
+    display: block;
+    position: static;
+  }
+  .sidebar .sidebar-nav {
+    line-height: 2em;
+    padding-bottom: 40px;
+  }
+  .sidebar li.collapse .app-sub-sidebar {
+    display: none;
+  }
+  .sidebar ul {
+    margin: 0 0 0 15px;
+    padding: 0;
+  }
+  .sidebar li > p {
+    font-weight: 700;
+    margin: 0;
+  }
+  .sidebar ul,
+  .sidebar ul li {
+    list-style: none;
+  }
+  .sidebar ul li a {
+    border-bottom: none;
+    display: block;
+  }
+  .sidebar ul li ul {
+    padding-left: 20px;
+  }
+  .sidebar::-webkit-scrollbar {
+    width: 4px;
+  }
+  .sidebar::-webkit-scrollbar-thumb {
+    background: transparent;
+    border-radius: 4px;
+  }
+  .sidebar:hover::-webkit-scrollbar-thumb {
+    background: hsla(0, 0%, 53.3%, 0.4);
+  }
+  .sidebar:hover::-webkit-scrollbar-track {
+    background: hsla(0, 0%, 53.3%, 0.1);
+  }
+  .sidebar-toggle {
+    background-color: transparent;
+    background-color: rgba(63, 63, 63, 0.8);
+    border: 0;
+    outline: none;
+    padding: 10px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    text-align: center;
+    transition: opacity 0.3s;
+    width: 284px;
+    z-index: 30;
+    cursor: pointer;
+  }
+  .sidebar-toggle:hover .sidebar-toggle-button {
+    opacity: 0.4;
+  }
+  .sidebar-toggle span {
+    background-color: var(--theme-color, #ea6f5a);
+    display: block;
+    margin-bottom: 4px;
+    width: 16px;
+    height: 2px;
+  }
+  body.sticky .sidebar,
+  body.sticky .sidebar-toggle {
+    position: fixed;
+  }
+  .content {
+    padding-top: 60px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 300px;
+    transition: left 0.25s ease;
+  }
+  .markdown-section {
+    margin: 0 auto;
+    max-width: 80%;
+    padding: 30px 15px 40px;
+    position: relative;
+  }
+  .markdown-section > * {
+    box-sizing: border-box;
+    font-size: inherit;
+  }
+  .markdown-section > :first-child {
+    margin-top: 0 !important;
+  }
+  .markdown-section hr {
+    border: none;
+    border-bottom: 1px solid #eee;
+    margin: 2em 0;
+  }
+  .markdown-section iframe {
+    border: 1px solid #eee;
+    width: 1px;
+    min-width: 100%;
+  }
+  .markdown-section table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    display: block;
+    margin-bottom: 1rem;
+    overflow: auto;
+    width: 100%;
+  }
+  .markdown-section th {
+    font-weight: 700;
+  }
+  .markdown-section td,
+  .markdown-section th {
+    border: 1px solid #ddd;
+    padding: 6px 13px;
+  }
+  .markdown-section tr {
+    border-top: 1px solid #ccc;
+  }
+  .markdown-section p.tip,
+  .markdown-section tr:nth-child(2n) {
+    background-color: #f8f8f8;
+  }
+  .markdown-section p.tip {
+    border-bottom-right-radius: 2px;
+    border-left: 4px solid #f66;
+    border-top-right-radius: 2px;
+    margin: 2em 0;
+    padding: 12px 24px 12px 30px;
+    position: relative;
+  }
+  .markdown-section p.tip:before {
+    background-color: #f66;
+    border-radius: 100%;
+    color: #3f3f3f;
+    content: '!';
+    font-family: Dosis, Source Sans Pro, Helvetica Neue, Arial, sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    left: -12px;
+    line-height: 20px;
+    position: absolute;
+    height: 20px;
+    width: 20px;
+    text-align: center;
+    top: 14px;
+  }
+  .markdown-section p.tip code {
+    background-color: #efefef;
+  }
+  .markdown-section p.tip em {
+    color: #c8c8c8;
+  }
+  .markdown-section p.warn {
+    background: rgba(234, 111, 90, 0.1);
+    border-radius: 2px;
+    padding: 1rem;
+  }
+  .markdown-section ul.task-list > li {
+    list-style-type: none;
+  }
+  body.close .sidebar {
+    transform: translateX(-300px);
+  }
+  body.close .sidebar-toggle {
+    width: auto;
+  }
+  body.close .content {
+    left: 0;
+  }
+  @media print {
+    .app-nav,
+    .github-corner,
+    .sidebar,
+    .sidebar-toggle {
+      display: none;
+    }
+  }
+  @media screen and (max-width: 768px) {
+    .github-corner,
+    .sidebar,
+    .sidebar-toggle {
+      position: fixed;
+    }
+    .app-nav {
+      margin-top: 16px;
+    }
+    .app-nav li ul {
+      top: 30px;
+    }
+    main {
+      height: auto;
+      overflow-x: hidden;
+    }
+    .sidebar {
+      left: -300px;
+      transition: transform 0.25s ease-out;
+    }
+    .content {
+      left: 0;
+      max-width: 100vw;
+      position: static;
+      padding-top: 20px;
+      transition: transform 0.25s ease;
+    }
+    .app-nav,
+    .github-corner {
+      transition: transform 0.25s ease-out;
+    }
+    .sidebar-toggle {
+      background-color: transparent;
+      width: auto;
+      padding: 30px 30px 10px 10px;
+    }
+    body.close .sidebar {
+      transform: translateX(300px);
+    }
+    body.close .sidebar-toggle {
+      background-color: rgba(63, 63, 63, 0.8);
+      transition: background-color 1s;
+      width: 284px;
+      padding: 10px;
+    }
+    body.close .content {
+      transform: translateX(300px);
+    }
+    body.close .app-nav,
+    body.close .github-corner {
+      display: none;
+    }
+    .github-corner:hover .octo-arm {
+      -webkit-animation: none;
+      animation: none;
+    }
+    .github-corner .octo-arm {
+      -webkit-animation: octocat-wave 0.56s ease-in-out;
+      animation: octocat-wave 0.56s ease-in-out;
+    }
+  }
+  @-webkit-keyframes octocat-wave {
+    0%,
+    to {
+      transform: rotate(0);
+    }
+    20%,
+    60% {
+      transform: rotate(-25deg);
+    }
+    40%,
+    80% {
+      transform: rotate(10deg);
+    }
+  }
+  @keyframes octocat-wave {
+    0%,
+    to {
+      transform: rotate(0);
+    }
+    20%,
+    60% {
+      transform: rotate(-25deg);
+    }
+    40%,
+    80% {
+      transform: rotate(10deg);
+    }
+  }
+  section.cover {
+    align-items: center;
+    background-position: 50%;
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 100vh;
+    width: 100vw;
+    display: none;
+  }
+  section.cover.show {
+    display: flex;
+  }
+  section.cover.has-mask .mask {
+    background-color: #3f3f3f;
+    opacity: 0.8;
+    position: absolute;
+    top: 0;
+    height: 100%;
+    width: 100%;
+  }
+  section.cover .cover-main {
+    flex: 1;
+    margin: -20px 16px 0;
+    text-align: center;
+  }
+  section.cover a {
+    color: inherit;
+  }
+  section.cover a,
+  section.cover a:hover {
+    text-decoration: none;
+  }
+  section.cover p {
+    line-height: 1.5rem;
+    margin: 1em 0;
+  }
+  section.cover h1 {
+    color: inherit;
+    font-size: 2.5rem;
+    font-weight: 300;
+    margin: 0.625rem 0 2.5rem;
+    position: relative;
+    text-align: center;
+  }
+  section.cover h1 a {
+    display: block;
+  }
+  section.cover h1 small {
+    bottom: -0.4375rem;
+    font-size: 1rem;
+    position: absolute;
+  }
+  section.cover blockquote {
+    font-size: 1.5rem;
+    text-align: center;
+  }
+  section.cover ul {
+    line-height: 1.8;
+    list-style-type: none;
+    margin: 1em auto;
+    max-width: 500px;
+    padding: 0;
+  }
+  section.cover .cover-main > p:last-child a {
+    border-radius: 2rem;
+    border: 1px solid var(--theme-color, #ea6f5a);
+    box-sizing: border-box;
+    color: var(--theme-color, #ea6f5a);
+    display: inline-block;
+    font-size: 1.05rem;
+    letter-spacing: 0.1rem;
+    margin: 0.5rem 1rem;
+    padding: 0.75em 2rem;
+    text-decoration: none;
+    transition: all 0.15s ease;
+  }
+  section.cover .cover-main > p:last-child a:last-child {
+    background-color: var(--theme-color, #ea6f5a);
+    color: #fff;
+  }
+  section.cover .cover-main > p:last-child a:last-child:hover {
+    color: inherit;
+    opacity: 0.8;
+  }
+  section.cover .cover-main > p:last-child a:hover {
+    color: inherit;
+  }
+  section.cover blockquote > p > a {
+    border-bottom: 2px solid var(--theme-color, #ea6f5a);
+    transition: color 0.3s;
+  }
+  section.cover blockquote > p > a:hover {
+    color: var(--theme-color, #ea6f5a);
+  }
+  .sidebar,
+  body {
+    background-color: #3f3f3f;
+  }
+  .sidebar {
+    color: #c8c8c8;
+  }
+  .sidebar li {
+    margin: 6px 15px 6px 0;
+  }
+  .sidebar ul li a {
+    color: #c8c8c8;
+    font-size: 14px;
+    overflow: hidden;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .sidebar ul li a:hover {
+    text-decoration: underline;
+  }
+  .sidebar ul li ul {
+    padding: 0;
+  }
+  .sidebar ul li.active > a {
+    color: var(--theme-color, #ea6f5a);
+    font-weight: 600;
+  }
+  .markdown-section h1,
+  .markdown-section h2,
+  .markdown-section h3,
+  .markdown-section h4,
+  .markdown-section strong {
+    color: #657b83;
+    font-weight: 600;
+  }
+  .markdown-section a {
+    color: var(--theme-color, #ea6f5a);
+    font-weight: 600;
+  }
+  .markdown-section h1 {
+    font-size: 2rem;
+    margin: 0 0 1rem;
+  }
+  .markdown-section h2 {
+    font-size: 1.75rem;
+    margin: 45px 0 0.8rem;
+  }
+  .markdown-section h3 {
+    font-size: 1.5rem;
+    margin: 40px 0 0.6rem;
+  }
+  .markdown-section h4 {
+    font-size: 1.25rem;
+  }
+  .markdown-section h5 {
+    font-size: 1rem;
+  }
+  .markdown-section h6 {
+    color: #777;
+    font-size: 1rem;
+  }
+  .markdown-section figure,
+  .markdown-section ol,
+  .markdown-section p,
+  .markdown-section ul {
+    margin: 1.2em 0;
+  }
+  .markdown-section ol,
+  .markdown-section p,
+  .markdown-section ul {
+    line-height: 1.6rem;
+    word-spacing: 0.05rem;
+  }
+  .markdown-section ol,
+  .markdown-section ul {
+    padding-left: 1.5rem;
+  }
+  .markdown-section blockquote {
+    border-left: 4px solid var(--theme-color, #ea6f5a);
+    color: #858585;
+    margin: 2em 0;
+    padding-left: 20px;
+  }
+  .markdown-section blockquote p {
+    font-weight: 600;
+    margin-left: 0;
+  }
+  .markdown-section iframe {
+    margin: 1em 0;
+  }
+  .markdown-section em {
+    color: #7f8c8d;
+  }
+  .markdown-section code {
+    border-radius: 2px;
+    color: #657b83;
+    font-size: 0.8rem;
+    margin: 0 2px;
+    padding: 3px 5px;
+    white-space: pre-wrap;
+  }
+  .markdown-section code,
+  .markdown-section pre {
+    background-color: #282828;
+    font-family: Roboto Mono, Monaco, courier, monospace;
+  }
+  .markdown-section pre {
+    -moz-osx-font-smoothing: initial;
+    -webkit-font-smoothing: initial;
+    line-height: 1.5rem;
+    margin: 1.2em 0;
+    overflow: auto;
+    padding: 0 1.4rem;
+    position: relative;
+    word-wrap: normal;
+  }
+  .token.cdata,
+  .token.comment,
+  .token.doctype,
+  .token.prolog {
+    color: #8e908c;
+  }
+  .token.namespace {
+    opacity: 0.7;
+  }
+  .token.boolean,
+  .token.number {
+    color: #c76b29;
+  }
+  .token.punctuation {
+    color: #525252;
+  }
+  .token.property {
+    color: #c08b30;
+  }
+  .token.tag {
+    color: #2973b7;
+  }
+  .token.string {
+    color: var(--theme-color, #ea6f5a);
+  }
+  .token.selector {
+    color: #6679cc;
+  }
+  .token.attr-name {
+    color: #2973b7;
+  }
+  .language-css .token.string,
+  .style .token.string,
+  .token.entity,
+  .token.url {
+    color: #22a2c9;
+  }
+  .token.attr-value,
+  .token.control,
+  .token.directive,
+  .token.unit {
+    color: var(--theme-color, #ea6f5a);
+  }
+  .token.keyword {
+    color: #e96900;
+  }
+  .token.atrule,
+  .token.regex,
+  .token.statement {
+    color: #22a2c9;
+  }
+  .token.placeholder,
+  .token.variable {
+    color: #3d8fd1;
+  }
+  .token.deleted {
+    text-decoration: line-through;
+  }
+  .token.inserted {
+    border-bottom: 1px dotted #202746;
+    text-decoration: none;
+  }
+  .token.italic {
+    font-style: italic;
+  }
+  .token.bold,
+  .token.important {
+    font-weight: 700;
+  }
+  .token.important {
+    color: #c94922;
+  }
+  .token.entity {
+    cursor: help;
+  }
+  .markdown-section pre > code {
+    -moz-osx-font-smoothing: initial;
+    -webkit-font-smoothing: initial;
+    background-color: #282828;
+    border-radius: 2px;
+    color: #657b83;
+    display: block;
+    font-family: Roboto Mono, Monaco, courier, monospace;
+    font-size: 0.8rem;
+    line-height: inherit;
+    margin: 0 2px;
+    max-width: inherit;
+    overflow: inherit;
+    padding: 2.2em 5px;
+    white-space: inherit;
+  }
+  .markdown-section code:after,
+  .markdown-section code:before {
+    letter-spacing: 0.05rem;
+  }
+  code .token {
+    -moz-osx-font-smoothing: initial;
+    -webkit-font-smoothing: initial;
+    min-height: 1.5rem;
+    position: relative;
+    left: auto;
+  }
+  pre:after {
+    color: #ccc;
+    content: attr(data-lang);
+    font-size: 0.6rem;
+    font-weight: 600;
+    height: 15px;
+    line-height: 15px;
+    padding: 5px 10px 0;
+    position: absolute;
+    right: 0;
+    text-align: right;
+    top: 0;
+  }
+  .markdown-section p.tip {
+    background-color: #282828;
+    color: #657b83;
+  }
+  input[type='search'] {
+    background: #4f4f4f;
+    border-color: #4f4f4f;
+    color: #c8c8c8;
+  }
 }
 
 @media (prefers-color-scheme: light or prefers-color-scheme: dark) {
-/* @media (screen) { */
-body:not(.ready){overflow:hidden}body:not(.ready) .app-nav,body:not(.ready)>nav,body:not(.ready) [data-cloak]{display:none}div#app{font-size:30px;font-weight:lighter;margin:40vh auto;text-align:center}div#app:empty:before{content:"Loading..."}.emoji{height:1.2rem;vertical-align:middle}.progress{background-color:var(--theme-color,#42b983);height:2px;left:0;position:fixed;right:0;top:0;transition:width .2s,opacity .4s;width:0;z-index:999999}.search .search-keyword,.search a:hover{color:var(--theme-color,#42b983)}.search .search-keyword{font-style:normal;font-weight:700}body,html{height:100%}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:#34495e;font-family:Source Sans Pro,Helvetica Neue,Arial,sans-serif;font-size:15px;letter-spacing:0;margin:0;overflow-x:hidden}img{max-width:100%}a[disabled]{cursor:not-allowed;opacity:.6}kbd{border:1px solid #ccc;border-radius:3px;display:inline-block;font-size:12px!important;line-height:12px;margin-bottom:3px;padding:3px 5px;vertical-align:middle}li input[type=checkbox]{margin:0 .2em .25em 0;vertical-align:middle}.app-nav{margin:25px 60px 0 0;position:absolute;right:0;text-align:right;z-index:10}.app-nav.no-badge{margin-right:25px}.app-nav p{margin:0}.app-nav>a{margin:0 1rem;padding:5px 0}.app-nav li,.app-nav ul{display:inline-block;list-style:none;margin:0}.app-nav a{color:inherit;font-size:16px;text-decoration:none;transition:color .3s}.app-nav a.active,.app-nav a:hover{color:var(--theme-color,#42b983)}.app-nav a.active{border-bottom:2px solid var(--theme-color,#42b983)}.app-nav li{display:inline-block;margin:0 1rem;padding:5px 0;position:relative;cursor:pointer}.app-nav li ul{background-color:#fff;border:1px solid;border-color:#ddd #ddd #ccc;border-radius:4px;box-sizing:border-box;display:none;max-height:calc(100vh - 61px);overflow-y:auto;padding:10px 0;position:absolute;right:-15px;text-align:left;top:100%;white-space:nowrap}.app-nav li ul li{display:block;font-size:14px;line-height:1rem;margin:8px 14px;white-space:nowrap}.app-nav li ul a{display:block;font-size:inherit;margin:0;padding:0}.app-nav li ul a.active{border-bottom:0}.app-nav li:hover ul{display:block}.github-corner{border-bottom:0;position:fixed;right:0;text-decoration:none;top:0;z-index:1}.github-corner:hover .octo-arm{-webkit-animation:octocat-wave .56s ease-in-out;animation:octocat-wave .56s ease-in-out}.github-corner svg{color:#fff;fill:var(--theme-color,#42b983);height:80px;width:80px}main{display:block;position:relative;width:100vw;height:100%;z-index:0}main.hidden{display:none}.anchor{display:inline-block;text-decoration:none;transition:all .3s}.anchor span{color:#34495e}.anchor:hover{text-decoration:underline}.sidebar{border-right:1px solid rgba(0,0,0,.07);overflow-y:auto;padding:40px 0 0;position:absolute;top:0;bottom:0;left:0;transition:transform .25s ease-out;width:300px;z-index:20}.sidebar>h1{margin:0 auto 1rem;font-size:1.5rem;font-weight:300;text-align:center}.sidebar>h1 a{color:inherit;text-decoration:none}.sidebar>h1 .app-nav{display:block;position:static}.sidebar .sidebar-nav{line-height:2em;padding-bottom:40px}.sidebar li.collapse .app-sub-sidebar{display:none}.sidebar ul{margin:0 0 0 15px;padding:0}.sidebar li>p{font-weight:700;margin:0}.sidebar ul,.sidebar ul li{list-style:none}.sidebar ul li a{border-bottom:none;display:block}.sidebar ul li ul{padding-left:20px}.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-thumb{background:transparent;border-radius:4px}.sidebar:hover::-webkit-scrollbar-thumb{background:hsla(0,0%,53.3%,.4)}.sidebar:hover::-webkit-scrollbar-track{background:hsla(0,0%,53.3%,.1)}.sidebar-toggle{background-color:transparent;background-color:hsla(0,0%,100%,.8);border:0;outline:none;padding:10px;position:absolute;bottom:0;left:0;text-align:center;transition:opacity .3s;width:284px;z-index:30;cursor:pointer}.sidebar-toggle:hover .sidebar-toggle-button{opacity:.4}.sidebar-toggle span{background-color:var(--theme-color,#42b983);display:block;margin-bottom:4px;width:16px;height:2px}body.sticky .sidebar,body.sticky .sidebar-toggle{position:fixed}.content{padding-top:60px;position:absolute;top:0;right:0;bottom:0;left:300px;transition:left .25s ease}.markdown-section{margin:0 auto;max-width:80%;padding:30px 15px 40px;position:relative}.markdown-section>*{box-sizing:border-box;font-size:inherit}.markdown-section>:first-child{margin-top:0!important}.markdown-section hr{border:none;border-bottom:1px solid #eee;margin:2em 0}.markdown-section iframe{border:1px solid #eee;width:1px;min-width:100%}.markdown-section table{border-collapse:collapse;border-spacing:0;display:block;margin-bottom:1rem;overflow:auto;width:100%}.markdown-section th{font-weight:700}.markdown-section td,.markdown-section th{border:1px solid #ddd;padding:6px 13px}.markdown-section tr{border-top:1px solid #ccc}.markdown-section p.tip,.markdown-section tr:nth-child(2n){background-color:#f8f8f8}.markdown-section p.tip{border-bottom-right-radius:2px;border-left:4px solid #f66;border-top-right-radius:2px;margin:2em 0;padding:12px 24px 12px 30px;position:relative}.markdown-section p.tip:before{background-color:#f66;border-radius:100%;color:#fff;content:"!";font-family:Dosis,Source Sans Pro,Helvetica Neue,Arial,sans-serif;font-size:14px;font-weight:700;left:-12px;line-height:20px;position:absolute;height:20px;width:20px;text-align:center;top:14px}.markdown-section p.tip code{background-color:#efefef}.markdown-section p.tip em{color:#34495e}.markdown-section p.warn{background:rgba(66,185,131,.1);border-radius:2px;padding:1rem}.markdown-section ul.task-list>li{list-style-type:none}body.close .sidebar{transform:translateX(-300px)}body.close .sidebar-toggle{width:auto}body.close .content{left:0}@media print{.app-nav,.github-corner,.sidebar,.sidebar-toggle{display:none}}@media screen and (max-width:768px){.github-corner,.sidebar,.sidebar-toggle{position:fixed}.app-nav{margin-top:16px}.app-nav li ul{top:30px}main{height:auto;overflow-x:hidden}.sidebar{left:-300px;transition:transform .25s ease-out}.content{left:0;max-width:100vw;position:static;padding-top:20px;transition:transform .25s ease}.app-nav,.github-corner{transition:transform .25s ease-out}.sidebar-toggle{background-color:transparent;width:auto;padding:30px 30px 10px 10px}body.close .sidebar{transform:translateX(300px)}body.close .sidebar-toggle{background-color:hsla(0,0%,100%,.8);transition:background-color 1s;width:284px;padding:10px}body.close .content{transform:translateX(300px)}body.close .app-nav,body.close .github-corner{display:none}.github-corner:hover .octo-arm{-webkit-animation:none;animation:none}.github-corner .octo-arm{-webkit-animation:octocat-wave .56s ease-in-out;animation:octocat-wave .56s ease-in-out}}@-webkit-keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}section.cover{align-items:center;background-position:50%;background-repeat:no-repeat;background-size:cover;height:100vh;width:100vw;display:none}section.cover.show{display:flex}section.cover.has-mask .mask{background-color:#fff;opacity:.8;position:absolute;top:0;height:100%;width:100%}section.cover .cover-main{flex:1;margin:-20px 16px 0;text-align:center}section.cover a{color:inherit}section.cover a,section.cover a:hover{text-decoration:none}section.cover p{line-height:1.5rem;margin:1em 0}section.cover h1{color:inherit;font-size:2.5rem;font-weight:300;margin:.625rem 0 2.5rem;position:relative;text-align:center}section.cover h1 a{display:block}section.cover h1 small{bottom:-.4375rem;font-size:1rem;position:absolute}section.cover blockquote{font-size:1.5rem;text-align:center}section.cover ul{line-height:1.8;list-style-type:none;margin:1em auto;max-width:500px;padding:0}section.cover .cover-main>p:last-child a{border-radius:2rem;border:1px solid var(--theme-color,#42b983);box-sizing:border-box;color:var(--theme-color,#42b983);display:inline-block;font-size:1.05rem;letter-spacing:.1rem;margin:.5rem 1rem;padding:.75em 2rem;text-decoration:none;transition:all .15s ease}section.cover .cover-main>p:last-child a:last-child{background-color:var(--theme-color,#42b983);color:#fff}section.cover .cover-main>p:last-child a:last-child:hover{color:inherit;opacity:.8}section.cover .cover-main>p:last-child a:hover{color:inherit}section.cover blockquote>p>a{border-bottom:2px solid var(--theme-color,#42b983);transition:color .3s}section.cover blockquote>p>a:hover{color:var(--theme-color,#42b983)}.sidebar,body{background-color:#fff}.sidebar{color:#364149}.sidebar li{margin:6px 0}.sidebar ul li a{color:#505d6b;font-size:14px;font-weight:400;overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.sidebar ul li a:hover{text-decoration:underline}.sidebar ul li ul{padding:0}.sidebar ul li.active>a{border-right:2px solid;color:var(--theme-color,#42b983);font-weight:600}.app-sub-sidebar li:before{content:"-";padding-right:4px;float:left}.markdown-section h1,.markdown-section h2,.markdown-section h3,.markdown-section h4,.markdown-section strong{color:#2c3e50;font-weight:600}.markdown-section a{color:var(--theme-color,#42b983);font-weight:600}.markdown-section h1{font-size:2rem;margin:0 0 1rem}.markdown-section h2{font-size:1.75rem;margin:45px 0 .8rem}.markdown-section h3{font-size:1.5rem;margin:40px 0 .6rem}.markdown-section h4{font-size:1.25rem}.markdown-section h5{font-size:1rem}.markdown-section h6{color:#777;font-size:1rem}.markdown-section figure,.markdown-section p{margin:1.2em 0}.markdown-section ol,.markdown-section p,.markdown-section ul{line-height:1.6rem;word-spacing:.05rem}.markdown-section ol,.markdown-section ul{padding-left:1.5rem}.markdown-section blockquote{border-left:4px solid var(--theme-color,#42b983);color:#858585;margin:2em 0;padding-left:20px}.markdown-section blockquote p{font-weight:600;margin-left:0}.markdown-section iframe{margin:1em 0}.markdown-section em{color:#7f8c8d}.markdown-section code{border-radius:2px;color:#e96900;font-size:.8rem;margin:0 2px;padding:3px 5px;white-space:pre-wrap}.markdown-section code,.markdown-section pre{background-color:#f8f8f8;font-family:Roboto Mono,Monaco,courier,monospace}.markdown-section pre{-moz-osx-font-smoothing:initial;-webkit-font-smoothing:initial;line-height:1.5rem;margin:1.2em 0;overflow:auto;padding:0 1.4rem;position:relative;word-wrap:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#8e908c}.token.namespace{opacity:.7}.token.boolean,.token.number{color:#c76b29}.token.punctuation{color:#525252}.token.property{color:#c08b30}.token.tag{color:#2973b7}.token.string{color:var(--theme-color,#42b983)}.token.selector{color:#6679cc}.token.attr-name{color:#2973b7}.language-css .token.string,.style .token.string,.token.entity,.token.url{color:#22a2c9}.token.attr-value,.token.control,.token.directive,.token.unit{color:var(--theme-color,#42b983)}.token.function,.token.keyword{color:#e96900}.token.atrule,.token.regex,.token.statement{color:#22a2c9}.token.placeholder,.token.variable{color:#3d8fd1}.token.deleted{text-decoration:line-through}.token.inserted{border-bottom:1px dotted #202746;text-decoration:none}.token.italic{font-style:italic}.token.bold,.token.important{font-weight:700}.token.important{color:#c94922}.token.entity{cursor:help}.markdown-section pre>code{-moz-osx-font-smoothing:initial;-webkit-font-smoothing:initial;background-color:#f8f8f8;border-radius:2px;color:#525252;display:block;font-family:Roboto Mono,Monaco,courier,monospace;font-size:.8rem;line-height:inherit;margin:0 2px;max-width:inherit;overflow:inherit;padding:2.2em 5px;white-space:inherit}.markdown-section code:after,.markdown-section code:before{letter-spacing:.05rem}code .token{-moz-osx-font-smoothing:initial;-webkit-font-smoothing:initial;min-height:1.5rem;position:relative;left:auto}pre:after{color:#ccc;content:attr(data-lang);font-size:.6rem;font-weight:600;height:15px;line-height:15px;padding:5px 10px 0;position:absolute;right:0;text-align:right;top:0}
-}
\ No newline at end of file
+  /* @media (screen) { */
+  body:not(.ready) {
+    overflow: hidden;
+  }
+  body:not(.ready) .app-nav,
+  body:not(.ready) > nav,
+  body:not(.ready) [data-cloak] {
+    display: none;
+  }
+  div#app {
+    font-size: 30px;
+    font-weight: lighter;
+    margin: 40vh auto;
+    text-align: center;
+  }
+  div#app:empty:before {
+    content: 'Loading...';
+  }
+  .emoji {
+    height: 1.2rem;
+    vertical-align: middle;
+  }
+  .progress {
+    background-color: var(--theme-color, #42b983);
+    height: 2px;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    transition: width 0.2s, opacity 0.4s;
+    width: 0;
+    z-index: 999999;
+  }
+  .search .search-keyword,
+  .search a:hover {
+    color: var(--theme-color, #42b983);
+  }
+  .search .search-keyword {
+    font-style: normal;
+    font-weight: 700;
+  }
+  body,
+  html {
+    height: 100%;
+  }
+  body {
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    color: #34495e;
+    font-family: Source Sans Pro, Helvetica Neue, Arial, sans-serif;
+    font-size: 15px;
+    letter-spacing: 0;
+    margin: 0;
+    overflow-x: hidden;
+  }
+  img {
+    max-width: 100%;
+  }
+  a[disabled] {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+  kbd {
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    display: inline-block;
+    font-size: 12px !important;
+    line-height: 12px;
+    margin-bottom: 3px;
+    padding: 3px 5px;
+    vertical-align: middle;
+  }
+  li input[type='checkbox'] {
+    margin: 0 0.2em 0.25em 0;
+    vertical-align: middle;
+  }
+  .app-nav {
+    margin: 25px 60px 0 0;
+    position: absolute;
+    right: 0;
+    text-align: right;
+    z-index: 10;
+  }
+  .app-nav.no-badge {
+    margin-right: 25px;
+  }
+  .app-nav p {
+    margin: 0;
+  }
+  .app-nav > a {
+    margin: 0 1rem;
+    padding: 5px 0;
+  }
+  .app-nav li,
+  .app-nav ul {
+    display: inline-block;
+    list-style: none;
+    margin: 0;
+  }
+  .app-nav a {
+    color: inherit;
+    font-size: 16px;
+    text-decoration: none;
+    transition: color 0.3s;
+  }
+  .app-nav a.active,
+  .app-nav a:hover {
+    color: var(--theme-color, #42b983);
+  }
+  .app-nav a.active {
+    border-bottom: 2px solid var(--theme-color, #42b983);
+  }
+  .app-nav li {
+    display: inline-block;
+    margin: 0 1rem;
+    padding: 5px 0;
+    position: relative;
+    cursor: pointer;
+  }
+  .app-nav li ul {
+    background-color: #fff;
+    border: 1px solid;
+    border-color: #ddd #ddd #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+    display: none;
+    max-height: calc(100vh - 61px);
+    overflow-y: auto;
+    padding: 10px 0;
+    position: absolute;
+    right: -15px;
+    text-align: left;
+    top: 100%;
+    white-space: nowrap;
+  }
+  .app-nav li ul li {
+    display: block;
+    font-size: 14px;
+    line-height: 1rem;
+    margin: 8px 14px;
+    white-space: nowrap;
+  }
+  .app-nav li ul a {
+    display: block;
+    font-size: inherit;
+    margin: 0;
+    padding: 0;
+  }
+  .app-nav li ul a.active {
+    border-bottom: 0;
+  }
+  .app-nav li:hover ul {
+    display: block;
+  }
+  .github-corner {
+    border-bottom: 0;
+    position: fixed;
+    right: 0;
+    text-decoration: none;
+    top: 0;
+    z-index: 1;
+  }
+  .github-corner:hover .octo-arm {
+    -webkit-animation: octocat-wave 0.56s ease-in-out;
+    animation: octocat-wave 0.56s ease-in-out;
+  }
+  .github-corner svg {
+    color: #fff;
+    fill: var(--theme-color, #42b983);
+    height: 80px;
+    width: 80px;
+  }
+  main {
+    display: block;
+    position: relative;
+    width: 100vw;
+    height: 100%;
+    z-index: 0;
+  }
+  main.hidden {
+    display: none;
+  }
+  .anchor {
+    display: inline-block;
+    text-decoration: none;
+    transition: all 0.3s;
+  }
+  .anchor span {
+    color: #34495e;
+  }
+  .anchor:hover {
+    text-decoration: underline;
+  }
+  .sidebar {
+    border-right: 1px solid rgba(0, 0, 0, 0.07);
+    overflow-y: auto;
+    padding: 40px 0 0;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    transition: transform 0.25s ease-out;
+    width: 300px;
+    z-index: 20;
+  }
+  .sidebar > h1 {
+    margin: 0 auto 1rem;
+    font-size: 1.5rem;
+    font-weight: 300;
+    text-align: center;
+  }
+  .sidebar > h1 a {
+    color: inherit;
+    text-decoration: none;
+  }
+  .sidebar > h1 .app-nav {
+    display: block;
+    position: static;
+  }
+  .sidebar .sidebar-nav {
+    line-height: 2em;
+    padding-bottom: 40px;
+  }
+  .sidebar li.collapse .app-sub-sidebar {
+    display: none;
+  }
+  .sidebar ul {
+    margin: 0 0 0 15px;
+    padding: 0;
+  }
+  .sidebar li > p {
+    font-weight: 700;
+    margin: 0;
+  }
+  .sidebar ul,
+  .sidebar ul li {
+    list-style: none;
+  }
+  .sidebar ul li a {
+    border-bottom: none;
+    display: block;
+  }
+  .sidebar ul li ul {
+    padding-left: 20px;
+  }
+  .sidebar::-webkit-scrollbar {
+    width: 4px;
+  }
+  .sidebar::-webkit-scrollbar-thumb {
+    background: transparent;
+    border-radius: 4px;
+  }
+  .sidebar:hover::-webkit-scrollbar-thumb {
+    background: hsla(0, 0%, 53.3%, 0.4);
+  }
+  .sidebar:hover::-webkit-scrollbar-track {
+    background: hsla(0, 0%, 53.3%, 0.1);
+  }
+  .sidebar-toggle {
+    background-color: transparent;
+    background-color: hsla(0, 0%, 100%, 0.8);
+    border: 0;
+    outline: none;
+    padding: 10px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    text-align: center;
+    transition: opacity 0.3s;
+    width: 284px;
+    z-index: 30;
+    cursor: pointer;
+  }
+  .sidebar-toggle:hover .sidebar-toggle-button {
+    opacity: 0.4;
+  }
+  .sidebar-toggle span {
+    background-color: var(--theme-color, #42b983);
+    display: block;
+    margin-bottom: 4px;
+    width: 16px;
+    height: 2px;
+  }
+  body.sticky .sidebar,
+  body.sticky .sidebar-toggle {
+    position: fixed;
+  }
+  .content {
+    padding-top: 60px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 300px;
+    transition: left 0.25s ease;
+  }
+  .markdown-section {
+    margin: 0 auto;
+    max-width: 80%;
+    padding: 30px 15px 40px;
+    position: relative;
+  }
+  .markdown-section > * {
+    box-sizing: border-box;
+    font-size: inherit;
+  }
+  .markdown-section > :first-child {
+    margin-top: 0 !important;
+  }
+  .markdown-section hr {
+    border: none;
+    border-bottom: 1px solid #eee;
+    margin: 2em 0;
+  }
+  .markdown-section iframe {
+    border: 1px solid #eee;
+    width: 1px;
+    min-width: 100%;
+  }
+  .markdown-section table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    display: block;
+    margin-bottom: 1rem;
+    overflow: auto;
+    width: 100%;
+  }
+  .markdown-section th {
+    font-weight: 700;
+  }
+  .markdown-section td,
+  .markdown-section th {
+    border: 1px solid #ddd;
+    padding: 6px 13px;
+  }
+  .markdown-section tr {
+    border-top: 1px solid #ccc;
+  }
+  .markdown-section p.tip,
+  .markdown-section tr:nth-child(2n) {
+    background-color: #f8f8f8;
+  }
+  .markdown-section p.tip {
+    border-bottom-right-radius: 2px;
+    border-left: 4px solid #f66;
+    border-top-right-radius: 2px;
+    margin: 2em 0;
+    padding: 12px 24px 12px 30px;
+    position: relative;
+  }
+  .markdown-section p.tip:before {
+    background-color: #f66;
+    border-radius: 100%;
+    color: #fff;
+    content: '!';
+    font-family: Dosis, Source Sans Pro, Helvetica Neue, Arial, sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    left: -12px;
+    line-height: 20px;
+    position: absolute;
+    height: 20px;
+    width: 20px;
+    text-align: center;
+    top: 14px;
+  }
+  .markdown-section p.tip code {
+    background-color: #efefef;
+  }
+  .markdown-section p.tip em {
+    color: #34495e;
+  }
+  .markdown-section p.warn {
+    background: rgba(66, 185, 131, 0.1);
+    border-radius: 2px;
+    padding: 1rem;
+  }
+  .markdown-section ul.task-list > li {
+    list-style-type: none;
+  }
+  body.close .sidebar {
+    transform: translateX(-300px);
+  }
+  body.close .sidebar-toggle {
+    width: auto;
+  }
+  body.close .content {
+    left: 0;
+  }
+  @media print {
+    .app-nav,
+    .github-corner,
+    .sidebar,
+    .sidebar-toggle {
+      display: none;
+    }
+  }
+  @media screen and (max-width: 768px) {
+    .github-corner,
+    .sidebar,
+    .sidebar-toggle {
+      position: fixed;
+    }
+    .app-nav {
+      margin-top: 16px;
+    }
+    .app-nav li ul {
+      top: 30px;
+    }
+    main {
+      height: auto;
+      overflow-x: hidden;
+    }
+    .sidebar {
+      left: -300px;
+      transition: transform 0.25s ease-out;
+    }
+    .content {
+      left: 0;
+      max-width: 100vw;
+      position: static;
+      padding-top: 20px;
+      transition: transform 0.25s ease;
+    }
+    .app-nav,
+    .github-corner {
+      transition: transform 0.25s ease-out;
+    }
+    .sidebar-toggle {
+      background-color: transparent;
+      width: auto;
+      padding: 30px 30px 10px 10px;
+    }
+    body.close .sidebar {
+      transform: translateX(300px);
+    }
+    body.close .sidebar-toggle {
+      background-color: hsla(0, 0%, 100%, 0.8);
+      transition: background-color 1s;
+      width: 284px;
+      padding: 10px;
+    }
+    body.close .content {
+      transform: translateX(300px);
+    }
+    body.close .app-nav,
+    body.close .github-corner {
+      display: none;
+    }
+    .github-corner:hover .octo-arm {
+      -webkit-animation: none;
+      animation: none;
+    }
+    .github-corner .octo-arm {
+      -webkit-animation: octocat-wave 0.56s ease-in-out;
+      animation: octocat-wave 0.56s ease-in-out;
+    }
+  }
+  @-webkit-keyframes octocat-wave {
+    0%,
+    to {
+      transform: rotate(0);
+    }
+    20%,
+    60% {
+      transform: rotate(-25deg);
+    }
+    40%,
+    80% {
+      transform: rotate(10deg);
+    }
+  }
+  @keyframes octocat-wave {
+    0%,
+    to {
+      transform: rotate(0);
+    }
+    20%,
+    60% {
+      transform: rotate(-25deg);
+    }
+    40%,
+    80% {
+      transform: rotate(10deg);
+    }
+  }
+  section.cover {
+    align-items: center;
+    background-position: 50%;
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 100vh;
+    width: 100vw;
+    display: none;
+  }
+  section.cover.show {
+    display: flex;
+  }
+  section.cover.has-mask .mask {
+    background-color: #fff;
+    opacity: 0.8;
+    position: absolute;
+    top: 0;
+    height: 100%;
+    width: 100%;
+  }
+  section.cover .cover-main {
+    flex: 1;
+    margin: -20px 16px 0;
+    text-align: center;
+  }
+  section.cover a {
+    color: inherit;
+  }
+  section.cover a,
+  section.cover a:hover {
+    text-decoration: none;
+  }
+  section.cover p {
+    line-height: 1.5rem;
+    margin: 1em 0;
+  }
+  section.cover h1 {
+    color: inherit;
+    font-size: 2.5rem;
+    font-weight: 300;
+    margin: 0.625rem 0 2.5rem;
+    position: relative;
+    text-align: center;
+  }
+  section.cover h1 a {
+    display: block;
+  }
+  section.cover h1 small {
+    bottom: -0.4375rem;
+    font-size: 1rem;
+    position: absolute;
+  }
+  section.cover blockquote {
+    font-size: 1.5rem;
+    text-align: center;
+  }
+  section.cover ul {
+    line-height: 1.8;
+    list-style-type: none;
+    margin: 1em auto;
+    max-width: 500px;
+    padding: 0;
+  }
+  section.cover .cover-main > p:last-child a {
+    border-radius: 2rem;
+    border: 1px solid var(--theme-color, #42b983);
+    box-sizing: border-box;
+    color: var(--theme-color, #42b983);
+    display: inline-block;
+    font-size: 1.05rem;
+    letter-spacing: 0.1rem;
+    margin: 0.5rem 1rem;
+    padding: 0.75em 2rem;
+    text-decoration: none;
+    transition: all 0.15s ease;
+  }
+  section.cover .cover-main > p:last-child a:last-child {
+    background-color: var(--theme-color, #42b983);
+    color: #fff;
+  }
+  section.cover .cover-main > p:last-child a:last-child:hover {
+    color: inherit;
+    opacity: 0.8;
+  }
+  section.cover .cover-main > p:last-child a:hover {
+    color: inherit;
+  }
+  section.cover blockquote > p > a {
+    border-bottom: 2px solid var(--theme-color, #42b983);
+    transition: color 0.3s;
+  }
+  section.cover blockquote > p > a:hover {
+    color: var(--theme-color, #42b983);
+  }
+  .sidebar,
+  body {
+    background-color: #fff;
+  }
+  .sidebar {
+    color: #364149;
+  }
+  .sidebar li {
+    margin: 6px 0;
+  }
+  .sidebar ul li a {
+    color: #505d6b;
+    font-size: 14px;
+    font-weight: 400;
+    overflow: hidden;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .sidebar ul li a:hover {
+    text-decoration: underline;
+  }
+  .sidebar ul li ul {
+    padding: 0;
+  }
+  .sidebar ul li.active > a {
+    border-right: 2px solid;
+    color: var(--theme-color, #42b983);
+    font-weight: 600;
+  }
+  .app-sub-sidebar li:before {
+    content: '-';
+    padding-right: 4px;
+    float: left;
+  }
+  .markdown-section h1,
+  .markdown-section h2,
+  .markdown-section h3,
+  .markdown-section h4,
+  .markdown-section strong {
+    color: #2c3e50;
+    font-weight: 600;
+  }
+  .markdown-section a {
+    color: var(--theme-color, #42b983);
+    font-weight: 600;
+  }
+  .markdown-section h1 {
+    font-size: 2rem;
+    margin: 0 0 1rem;
+  }
+  .markdown-section h2 {
+    font-size: 1.75rem;
+    margin: 45px 0 0.8rem;
+  }
+  .markdown-section h3 {
+    font-size: 1.5rem;
+    margin: 40px 0 0.6rem;
+  }
+  .markdown-section h4 {
+    font-size: 1.25rem;
+  }
+  .markdown-section h5 {
+    font-size: 1rem;
+  }
+  .markdown-section h6 {
+    color: #777;
+    font-size: 1rem;
+  }
+  .markdown-section figure,
+  .markdown-section p {
+    margin: 1.2em 0;
+  }
+  .markdown-section ol,
+  .markdown-section p,
+  .markdown-section ul {
+    line-height: 1.6rem;
+    word-spacing: 0.05rem;
+  }
+  .markdown-section ol,
+  .markdown-section ul {
+    padding-left: 1.5rem;
+  }
+  .markdown-section blockquote {
+    border-left: 4px solid var(--theme-color, #42b983);
+    color: #858585;
+    margin: 2em 0;
+    padding-left: 20px;
+  }
+  .markdown-section blockquote p {
+    font-weight: 600;
+    margin-left: 0;
+  }
+  .markdown-section iframe {
+    margin: 1em 0;
+  }
+  .markdown-section em {
+    color: #7f8c8d;
+  }
+  .markdown-section code {
+    border-radius: 2px;
+    color: #e96900;
+    font-size: 0.8rem;
+    margin: 0 2px;
+    padding: 3px 5px;
+    white-space: pre-wrap;
+  }
+  .markdown-section code,
+  .markdown-section pre {
+    background-color: #f8f8f8;
+    font-family: Roboto Mono, Monaco, courier, monospace;
+  }
+  .markdown-section pre {
+    -moz-osx-font-smoothing: initial;
+    -webkit-font-smoothing: initial;
+    line-height: 1.5rem;
+    margin: 1.2em 0;
+    overflow: auto;
+    padding: 0 1.4rem;
+    position: relative;
+    word-wrap: normal;
+  }
+  .token.cdata,
+  .token.comment,
+  .token.doctype,
+  .token.prolog {
+    color: #8e908c;
+  }
+  .token.namespace {
+    opacity: 0.7;
+  }
+  .token.boolean,
+  .token.number {
+    color: #c76b29;
+  }
+  .token.punctuation {
+    color: #525252;
+  }
+  .token.property {
+    color: #c08b30;
+  }
+  .token.tag {
+    color: #2973b7;
+  }
+  .token.string {
+    color: var(--theme-color, #42b983);
+  }
+  .token.selector {
+    color: #6679cc;
+  }
+  .token.attr-name {
+    color: #2973b7;
+  }
+  .language-css .token.string,
+  .style .token.string,
+  .token.entity,
+  .token.url {
+    color: #22a2c9;
+  }
+  .token.attr-value,
+  .token.control,
+  .token.directive,
+  .token.unit {
+    color: var(--theme-color, #42b983);
+  }
+  .token.function,
+  .token.keyword {
+    color: #e96900;
+  }
+  .token.atrule,
+  .token.regex,
+  .token.statement {
+    color: #22a2c9;
+  }
+  .token.placeholder,
+  .token.variable {
+    color: #3d8fd1;
+  }
+  .token.deleted {
+    text-decoration: line-through;
+  }
+  .token.inserted {
+    border-bottom: 1px dotted #202746;
+    text-decoration: none;
+  }
+  .token.italic {
+    font-style: italic;
+  }
+  .token.bold,
+  .token.important {
+    font-weight: 700;
+  }
+  .token.important {
+    color: #c94922;
+  }
+  .token.entity {
+    cursor: help;
+  }
+  .markdown-section pre > code {
+    -moz-osx-font-smoothing: initial;
+    -webkit-font-smoothing: initial;
+    background-color: #f8f8f8;
+    border-radius: 2px;
+    color: #525252;
+    display: block;
+    font-family: Roboto Mono, Monaco, courier, monospace;
+    font-size: 0.8rem;
+    line-height: inherit;
+    margin: 0 2px;
+    max-width: inherit;
+    overflow: inherit;
+    padding: 2.2em 5px;
+    white-space: inherit;
+  }
+  .markdown-section code:after,
+  .markdown-section code:before {
+    letter-spacing: 0.05rem;
+  }
+  code .token {
+    -moz-osx-font-smoothing: initial;
+    -webkit-font-smoothing: initial;
+    min-height: 1.5rem;
+    position: relative;
+    left: auto;
+  }
+  pre:after {
+    color: #ccc;
+    content: attr(data-lang);
+    font-size: 0.6rem;
+    font-weight: 600;
+    height: 15px;
+    line-height: 15px;
+    padding: 5px 10px 0;
+    position: absolute;
+    right: 0;
+    text-align: right;
+    top: 0;
+  }
+}
diff --git a/docs/theming.md b/docs/theming.md
index d61f02bdc..f28f6835d 100644
--- a/docs/theming.md
+++ b/docs/theming.md
@@ -2,14 +2,16 @@
 
 **Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/theming.md)
 
-With Version 8.7.0 Mermaid comes out with a system for dynamic and integrated configuration of themes. The intent is to increase the customizability and ease of styling for mermaid diagrams.  
+With Version 8.7.0 Mermaid comes out with a system for dynamic and integrated configuration of themes. The intent is to increase the customizability and ease of styling for mermaid diagrams.
 
 The theme can be altered by changing the root level variable `theme` variable in the configuration. To change it for the whole site you must use the `initialize` call. To do it for just for a single diagram you can use the `%%init%%` directive
 
 Themes follow and build upon the Levels of Configuration, and employ `directives` to modify and create custom configurations, as they were introduced in Version [8.6.0](./8.6.0_docs.md).
 
 ## Deployable Themes
+
 The following are a list of **Deployable themes**, sample `%%init%%` directives and `initialize` calls.
+
 1. **base**- Designed to be modified, as the name implies it is supposed to be used as the base for making custom themes.
 
 2. **forest**- A theme full of light greens that is easy on the eyes.
@@ -20,21 +22,24 @@ The following are a list of **Deployable themes**, sample `%%init%%` directives
 
 5. **neutral**- The theme to be used for black and white printing.
 
-
 ## Site-wide Themes
+
 Site-wide themes are declared via `initialize` by site owners.
 
 Example of `Initialize` call setting `theme` to `base`:
+
 ```javascript
-    mermaidAPI.initialize({
-        'securityLevel': 'loose', 'theme': 'base'
-    });
+mermaidAPI.initialize({
+  securityLevel: 'loose',
+  theme: 'base',
+});
 ```
+
 **Notes**: Only site owners can use the `mermaidAPI.initialize` call, to set values. Site-Users will have to use `%%init%%` to modify or create the theme for their diagrams.
 
 ## Themes at the Local or Current Level
-When Generating a diagram using on a webpage that supports mermaid. It is also possible to override site-wide theme settings locally, for a specific diagram, using directives, as long as it is not prohibited by the `secure` array.
 
+When Generating a diagram using on a webpage that supports mermaid. It is also possible to override site-wide theme settings locally, for a specific diagram, using directives, as long as it is not prohibited by the `secure` array.
 
 ```mmd
 %%{init: {'theme':'base'}}%%
@@ -42,7 +47,6 @@ When Generating a diagram using on a webpage that supports mermaid. It is also p
     a --> b
 ```
 
-
 Here is an example of how `%%init%%` can set the theme to 'base', this assumes that `themeVariables` are set to default:
 
 ```mermaid-example
@@ -62,17 +66,17 @@ Here is an example of how `%%init%%` can set the theme to 'base', this assumes t
             G
           end
 ```
-# List of Themes 
+
+# List of Themes
 
 # Customizing Themes with `themeVariables`
 
 The easiest way to make a custom theme is to start with the base theme, and just modify theme variables through `themeVariables`, via `%%init%%`.
 
-|   Parameter    |                            Description                             | Type  | Required |         Objects contained          |
+| Parameter      | Description                                                        | Type  | Required | Objects contained                  |
 | -------------- | ------------------------------------------------------------------ | ----- | -------- | ---------------------------------- |
 | themeVariables | Array containing objects, modifiable with the `%%init%%` directive | Array | Required | primaryColor, lineColor, textColor |
 
-
 **Here is an example of overriding `primaryColor` through `themeVariables` and giving everything a different look, using `%%init%%`.**
 
 ```mermaid-example
@@ -93,7 +97,6 @@ The easiest way to make a custom theme is to start with the base theme, and just
           end
 ```
 
-
 **Notes:**
 Leaving it empty will set all variable values to default.
 
@@ -105,36 +108,35 @@ Color definitions have certain interactions in mermaid, this is in order to ensu
 
 You can create your own themes, by changing any of the given variables below. If you are using a dark background, set dark mode to true to adjust the colors. It is possible to override the calculations using the variable names below, with `%%init%%` if you wish to style it differently.
 
-
 ## Theme Variables Reference Table
 
 ```note
 Variables that are unique to some diagrams can be affected by changes in Theme Variables
 ```
 
-|       Variable       |         Default/Base/Factor value          | Calc |                                                           Description                                                            |
-| -------------------- | ------------------------------ | ---- | -------------------------------------------------------------------------------------------------------------------------------- |
-| darkMode             | false                          |      | Boolean Value that dictates how to calculate colors. "true" will activate darkmode.                                                                                 |
+| Variable             | Default/Base/Factor value      | Calc | Description                                                                                                                      |
+| -------------------- | ------------------------------ | ---- | -------------------------------------------------------------------------------------------------------------------------------- | --- | --- |
+| darkMode             | false                          |      | Boolean Value that dictates how to calculate colors. "true" will activate darkmode.                                              |
 | background           | #f4f4f4                        |      | Used to calculate color for items that should either be background colored or contrasting to the background.                     |
 | fontFamily           | "trebuchet ms", verdana, arial |      |                                                                                                                                  |
-| fontSize             | 16px                           |      |  Font Size, in pixels                                                                                                                                |
+| fontSize             | 16px                           |      | Font Size, in pixels                                                                                                             |
 | primaryColor         | #fff4dd                        |      | Color to be used as background in nodes, other colors will be derived from this                                                  |
-| primaryBorderColor   | based on primaryColor          | *    | Color to be used as border in nodes using primaryColor                                                                           |
-| primaryTextColor     | based on darkMode #ddd/#333    | *    | Color to be used as text color in nodes using primaryColor   
-| secondaryColor       | based on primaryColor          | *    |                                                                                                                                  |
-| secondaryBorderColor | based on secondaryColor        | *    | Color to be used as border in nodes using secondaryColor                                                                         |
-| secondaryTextColor   | based on secondaryColor        | *    | Color to be used as text color in nodes using secondaryColor   
-| tertiaryColor        | based on primaryColor          | *    |                                                                                                                                  |                                                                     |                                                                   |
-| tertiaryBorderColor  | based on tertiaryColor         | *    | Color to be used as border in nodes using tertiaryColor                                                                          |
-| tertiaryTextColor    | based on tertiaryColor         | *    | Color to be used as text color in nodes using tertiaryColor                                                                       |
+| primaryBorderColor   | based on primaryColor          | \*   | Color to be used as border in nodes using primaryColor                                                                           |
+| primaryTextColor     | based on darkMode #ddd/#333    | \*   | Color to be used as text color in nodes using primaryColor                                                                       |
+| secondaryColor       | based on primaryColor          | \*   |                                                                                                                                  |
+| secondaryBorderColor | based on secondaryColor        | \*   | Color to be used as border in nodes using secondaryColor                                                                         |
+| secondaryTextColor   | based on secondaryColor        | \*   | Color to be used as text color in nodes using secondaryColor                                                                     |
+| tertiaryColor        | based on primaryColor          | \*   |                                                                                                                                  |     |     |
+| tertiaryBorderColor  | based on tertiaryColor         | \*   | Color to be used as border in nodes using tertiaryColor                                                                          |
+| tertiaryTextColor    | based on tertiaryColor         | \*   | Color to be used as text color in nodes using tertiaryColor                                                                      |
 | noteBkgColor         | #fff5ad                        |      | Color used as background in notes                                                                                                |
-| noteTextColor        | #333                           |      | Text color in note rectangles.                                                                                                        |
-| noteBorderColor      | based on noteBkgColor          | *    | Border color in note rectangles.                                                                                                      |
-| lineColor            | based on background            | *    |                                                                                                                                  |
-| textColor            | based on primaryTextColor      | *    | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in gantt diagram |
-| mainBkg              | based on primaryColor          | *    | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram  etc                                 |
-| errorBkgColor        | tertiaryColor                  | *    | Color for syntax error message                                                                                                   |
-| errorTextColor       | tertiaryTextColor              | *    | Color for syntax error message                                                                                                   |
+| noteTextColor        | #333                           |      | Text color in note rectangles.                                                                                                   |
+| noteBorderColor      | based on noteBkgColor          | \*   | Border color in note rectangles.                                                                                                 |
+| lineColor            | based on background            | \*   |                                                                                                                                  |
+| textColor            | based on primaryTextColor      | \*   | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in gantt diagram |
+| mainBkg              | based on primaryColor          | \*   | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc                                  |
+| errorBkgColor        | tertiaryColor                  | \*   | Color for syntax error message                                                                                                   |
+| errorTextColor       | tertiaryTextColor              | \*   | Color for syntax error message                                                                                                   |
 
 # What follows are Variables, specific to different diagrams and charts.
 
@@ -142,64 +144,64 @@ Variables that are unique to some diagrams can be affected by changes in Theme V
 
 ## Flowchart
 
-|       Variable      |    Default/ Associated Value        | Calc |                                                           Description                                                            |
-| -------------------- | ------------------------------ | ---- | -------------------------------------------------------------------------------------------------------------------------------- |
-| nodeBorder           | primaryBorderColor             | *    | Node Border Color                                                                                                                                |
-| clusterBkg           | tertiaryColor                  | *    | Background in subgraphs                                                                                                          |
-| clusterBorder        | tertiaryBorderColor            | *    | Cluster Border Color                                                                                                                               |
-| defaultLinkColor     | lineColor                      | *    | Link Color                                                                                                                                  |
-| titleColor           | tertiaryTextColor              | *    |  Title Color                                                                                                                              |
-| edgeLabelBackground  | based on secondaryColor        | *    |                                                                                                                                  |
-| nodeTextColor        | primaryTextColor               | *    |  Color for text inside Nodes.                                                                                                                                |
+| Variable            | Default/ Associated Value | Calc | Description                  |
+| ------------------- | ------------------------- | ---- | ---------------------------- |
+| nodeBorder          | primaryBorderColor        | \*   | Node Border Color            |
+| clusterBkg          | tertiaryColor             | \*   | Background in subgraphs      |
+| clusterBorder       | tertiaryBorderColor       | \*   | Cluster Border Color         |
+| defaultLinkColor    | lineColor                 | \*   | Link Color                   |
+| titleColor          | tertiaryTextColor         | \*   | Title Color                  |
+| edgeLabelBackground | based on secondaryColor   | \*   |                              |
+| nodeTextColor       | primaryTextColor          | \*   | Color for text inside Nodes. |
 
 # sequence diagram
 
-|         name          |      Default value      | Calc | Description |
-| --------------------- | ----------------------- | ---- | ----------- |
-| actorBorder           | primaryBorderColor      | *    |   Actor Border Color          |
-| actorBkg              | mainBkg                 | *    | Actor Background Color         |
-| actorTextColor        | primaryTextColor        | *    |  Actor Text Color            |
-| actorLineColor        | grey                    | *    |   Actor Line Color           |
-| signalColor           | textColor               | *    |  Signal Color           |
-| signalTextColor       | textColor               | *    |  Signal Text Color           |
-| labelBoxBkgColor      | actorBkg                | *    |  Label Box Background Color            |
-| labelBoxBorderColor   | actorBorder             | *    |   Label Box Border Color          |
-| labelTextColor        | actorTextColor          | *    |   Label Text Color           |
-| loopTextColor         | actorTextColor          | *    |   Loop ext Color            |
-| activationBorderColor | based on secondaryColor | *    |    Activation Border Color         |
-| activationBkgColor    | secondaryColor          | *    |   Activation Background Color          |
-| sequenceNumberColor   | based on lineColor      | *    |    Sequence Number Color          |
+| name                  | Default value           | Calc | Description                 |
+| --------------------- | ----------------------- | ---- | --------------------------- |
+| actorBorder           | primaryBorderColor      | \*   | Actor Border Color          |
+| actorBkg              | mainBkg                 | \*   | Actor Background Color      |
+| actorTextColor        | primaryTextColor        | \*   | Actor Text Color            |
+| actorLineColor        | grey                    | \*   | Actor Line Color            |
+| signalColor           | textColor               | \*   | Signal Color                |
+| signalTextColor       | textColor               | \*   | Signal Text Color           |
+| labelBoxBkgColor      | actorBkg                | \*   | Label Box Background Color  |
+| labelBoxBorderColor   | actorBorder             | \*   | Label Box Border Color      |
+| labelTextColor        | actorTextColor          | \*   | Label Text Color            |
+| loopTextColor         | actorTextColor          | \*   | Loop ext Color              |
+| activationBorderColor | based on secondaryColor | \*   | Activation Border Color     |
+| activationBkgColor    | secondaryColor          | \*   | Activation Background Color |
+| sequenceNumberColor   | based on lineColor      | \*   | Sequence Number Color       |
 
 # state colors
 
-|     name      |  Default value   | Calc |                 Description                 |
-| ------------- | ---------------- | ---- | ------------------------------------------- |
-| labelColor    | primaryTextColor | *    |                                             |
-| altBackground | tertiaryColor    | *    | Used for background in deep composite states |
+| name          | Default value    | Calc | Description                                  |
+| ------------- | ---------------- | ---- | -------------------------------------------- |
+| labelColor    | primaryTextColor | \*   |                                              |
+| altBackground | tertiaryColor    | \*   | Used for background in deep composite states |
 
 # class colors
 
-|   name    | Default value | Calc |      Description       |
-| --------- | ------------- | ---- | ---------------------- |
-| classText | textColor     | *    | Color of Text in class diagrams |
+| name      | Default value | Calc | Description                     |
+| --------- | ------------- | ---- | ------------------------------- |
+| classText | textColor     | \*   | Color of Text in class diagrams |
 
 # User journey colors
 
-|   name    |      Default value       | Calc |               Description               |
-| --------- | ------------------------ | ---- | --------------------------------------- |
-| fillType0 | primaryColor             | *    | Fill for 1st section in journey diagram |
-| fillType1 | secondaryColor           | *    | Fill for 2nd section in journey diagram |
-| fillType2 | based on primaryColor    | *    | Fill for 3rd section in journey diagram |
-| fillType3 | based on  secondaryColor | *    | Fill for 4th section in journey diagram |
-| fillType4 | based on primaryColor    | *    | Fill for 5th section in journey diagram |
-| fillType5 | based on secondaryColor  | *    | Fill for 6th section in journey diagram |
-| fillType6 | based on primaryColor    | *    | Fill for 7th section in journey diagram |
-| fillType7 | based on secondaryColor  | *    | Fill for 8th section in journey diagram |
-
-**Notes: Values are meant to create an alternating look.
+| name      | Default value           | Calc | Description                             |
+| --------- | ----------------------- | ---- | --------------------------------------- |
+| fillType0 | primaryColor            | \*   | Fill for 1st section in journey diagram |
+| fillType1 | secondaryColor          | \*   | Fill for 2nd section in journey diagram |
+| fillType2 | based on primaryColor   | \*   | Fill for 3rd section in journey diagram |
+| fillType3 | based on secondaryColor | \*   | Fill for 4th section in journey diagram |
+| fillType4 | based on primaryColor   | \*   | Fill for 5th section in journey diagram |
+| fillType5 | based on secondaryColor | \*   | Fill for 6th section in journey diagram |
+| fillType6 | based on primaryColor   | \*   | Fill for 7th section in journey diagram |
+| fillType7 | based on secondaryColor | \*   | Fill for 8th section in journey diagram |
 
+\*\*Notes: Values are meant to create an alternating look.
 
 # Here is an example of overriding `primaryColor` and giving everything a different look, using `%%init%%`.
+
 ```mermaid-example
 %%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
         graph TD
@@ -218,12 +220,11 @@ Variables that are unique to some diagrams can be affected by changes in Theme V
           end
 ```
 
-**This got a bit too dark and bit too colorful. With some easy steps this can be fixed:
-
-* Make the primary color a little lighter
-* set the tertiary color to a reddish shade as well
-* make the edge label background differ from the subgraph by setting the edgeLabelBackground
+\*\*This got a bit too dark and bit too colorful. With some easy steps this can be fixed:
 
+- Make the primary color a little lighter
+- set the tertiary color to a reddish shade as well
+- make the edge label background differ from the subgraph by setting the edgeLabelBackground
 
 ```mermaid-example
 %%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ffcccc', 'edgeLabelBackground':'#ffffee', 'tertiaryColor': '#fff0f0'}}}%%
@@ -255,6 +256,7 @@ When adjusting a theme it might be helpful to look at how your preferred theme g
 In the following examples, the directive `init` is used, with the `theme` being declared as `base`. For more information on using directives, read the documentation for [Version 8.6.0](/8.6.0_docs.md)
 
 ### Flowchart
+
 ```mmd
 %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
         graph TD
@@ -272,6 +274,7 @@ In the following examples, the directive `init` is used, with the `theme` being
             G
           end
 ```
+
 ```mermaid
 %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
         graph TD
@@ -291,6 +294,7 @@ In the following examples, the directive `init` is used, with the `theme` being
 ```
 
 ### Flowchart (beta)
+
 ```mermaid-example
 %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
         flowchart TD
@@ -310,6 +314,7 @@ In the following examples, the directive `init` is used, with the `theme` being
 ```
 
 ### Sequence diagram
+
 ```mermaid-example
 %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
         sequenceDiagram
@@ -330,6 +335,7 @@ In the following examples, the directive `init` is used, with the `theme` being
 ```
 
 ### Class diagram
+
 ```mermaid-example
 %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
 
@@ -357,6 +363,7 @@ classDiagram
 ```
 
 ### Gantt
+
 ```mermaid-example
 gantt
        dateFormat                YYYY-MM-DD
@@ -388,6 +395,7 @@ gantt
 ```
 
 ### State diagram
+
 ```mermaid-example
 %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
       stateDiagram
@@ -464,6 +472,7 @@ stateDiagram-v2
 ```
 
 ### User journey diagram
+
 ```mermaid-example
 journey
             title My working day
diff --git a/docs/upgrading.md b/docs/upgrading.md
index 9f318b3c7..16dea1cba 100644
--- a/docs/upgrading.md
+++ b/docs/upgrading.md
@@ -2,27 +2,24 @@
 
 Some of the interfaces has been upgraded.
 
-
 ## From version 0.4.0 to 0.5.0
 
-
 ### Initialization
 
 `mermaid_config` is no longer used. Instead a call to mermaid initialize is done as in the example below:
 
-
 #### version 0.4.0
 
 ```javascript
 mermaid_config = {
-    startOnLoad: true
-}
+  startOnLoad: true,
+};
 ```
 
 #### version 0.5.0
 
 ```javascript
 mermaid.initialize({
-    startOnLoad: true
-})
+  startOnLoad: true,
+});
 ```
diff --git a/src/__mocks__/mermaidAPI.ts b/src/__mocks__/mermaidAPI.ts
index 9531fdc07..edcc58b81 100644
--- a/src/__mocks__/mermaidAPI.ts
+++ b/src/__mocks__/mermaidAPI.ts
@@ -1,6 +1,6 @@
 /**
  * Mocks for `./mermaidAPI`.
- * 
+ *
  * We can't easily use `jest.spyOn(mermaidAPI, "function")` since the object
  * is frozen with `Object.freeze()`.
  */
@@ -16,6 +16,11 @@ import Diagram from '../Diagram';
 // const {parse} = jest.requireActual("./mermaidAPI");
 
 let hasLoadedDiagrams = false;
+/**
+ *
+ * @param text
+ * @param parseError
+ */
 function parse(text: string, parseError?: Function): boolean {
   if (!hasLoadedDiagrams) {
     addDiagrams();
@@ -42,6 +47,6 @@ export const mermaidAPI = {
     configApi.reset(configApi.defaultConfig);
   },
   defaultConfig: configApi.defaultConfig,
-}
+};
 
 export default mermaidAPI;
diff --git a/src/dagre-wrapper/GraphObjects.md b/src/dagre-wrapper/GraphObjects.md
index 416dfeb73..5c2486520 100644
--- a/src/dagre-wrapper/GraphObjects.md
+++ b/src/dagre-wrapper/GraphObjects.md
@@ -16,6 +16,7 @@ flowchart
 ```
 
 In this case the dagre-wrapper will transform the graph to the graph below.
+
 ```mermaid
 flowchart
   C1 --> C2
@@ -28,7 +29,8 @@ When rendering this diagram it it beeing rendered recursively. The diagram is re
 ```
 { clusterNode: true, graph }
 ```
-*Data for a clusterNode*
+
+_Data for a clusterNode_
 
 When a cluster has edges to or from some of its nodes leading outside the cluster the approach of recursive rendering can not be used as the layout of the graph needs to take responsibility for nodes outside of the cluster.
 
@@ -49,7 +51,6 @@ In the diagram above the root diagram would be rendered with C1 whereas C2 would
 
 Of these two approaches the top one renders better and is used when possible. When this is not possible, ie an edge is added crossing the border the non recursive approach is used.
 
-
 # Graph objects and their properties
 
 Explains the representation of various objects used to render the flow charts and what the properties mean. This ofc from the perspective of the dagre-wrapper.
@@ -57,35 +58,36 @@ Explains the representation of various objects used to render the flow charts an
 ## node
 
 Sample object:
+
 ```json
 {
-  "shape":"rect",
-  "labelText":"Test",
-  "rx":0,
-  "ry":0,
-  "class":"default",
-  "style":"",
-  "id":"Test",
-  "type":"group",
-  "padding":15}
+  "shape": "rect",
+  "labelText": "Test",
+  "rx": 0,
+  "ry": 0,
+  "class": "default",
+  "style": "",
+  "id": "Test",
+  "type": "group",
+  "padding": 15
+}
 ```
 
 This is set by the renderer of the diagram and insert the data that the wrapper neds for rendering.
 
-|  property  |                                                 description                                                 |
-| ---------- | ----------------------------------------------------------------------------------------------------------- |
-| labelStyle | Css styles for the label. User for instance for styling the labels for clusters                            |
-| shape      | The shape of the node.                                                                                      |
-| labelText  | The text on the label                                                                                       |
-| rx         | The corner radius - maybe part of the shape instead? Used for rects.                                        |
-| ry         | The corner radius - maybe part of the shape instead? Used for rects.                                        |
-| classes    | Classes to be set for the shape. Not used                                                                   |
-| style      | Css styles for the actual shape                                                                             |
-| id         | id of the shape                                                                                             |
-| type       | if set to group then this node indicates *a cluster*.                                                       |
-| padding    | Padding. Passed from the render as this might differ between different diagrams. Maybe obsolete.            |
-| data       | Non-generic data specific to the shape.                                                                     |
-
+| property   | description                                                                                      |
+| ---------- | ------------------------------------------------------------------------------------------------ |
+| labelStyle | Css styles for the label. User for instance for styling the labels for clusters                  |
+| shape      | The shape of the node.                                                                           |
+| labelText  | The text on the label                                                                            |
+| rx         | The corner radius - maybe part of the shape instead? Used for rects.                             |
+| ry         | The corner radius - maybe part of the shape instead? Used for rects.                             |
+| classes    | Classes to be set for the shape. Not used                                                        |
+| style      | Css styles for the actual shape                                                                  |
+| id         | id of the shape                                                                                  |
+| type       | if set to group then this node indicates _a cluster_.                                            |
+| padding    | Padding. Passed from the render as this might differ between different diagrams. Maybe obsolete. |
+| data       | Non-generic data specific to the shape.                                                          |
 
 # edge
 
@@ -100,22 +102,20 @@ double_arrow_circle
 
 Lets try to make these types semantic free so that diagram type semantics does not find its way in to this more generic layer.
 
-
 Required edgeData for proper rendering:
 
-|  property  |               description                |
-| ---------- | ---------------------------------------- |
-| id         | Id of the edge                           |
-| arrowHead  | overlap between arrowHead and arrowType? |
-| arrowType  | overlap between arrowHead and arrowType? |
-| style      |                                          |
-| labelStyle |                                          |
-| label      | overlap between label and labelText?     |
-| labelPos   |                                          |
-| labelType  | overlap between label and labelText?     |
-| thickness  | Sets the thinkess of the edge. Can be \['normal', 'thick'\] |
-| pattern    | Sets the pattern of the edge. Can be \['solid', 'dotted', 'dashed'\]    |
-
+| property   | description                                                          |
+| ---------- | -------------------------------------------------------------------- |
+| id         | Id of the edge                                                       |
+| arrowHead  | overlap between arrowHead and arrowType?                             |
+| arrowType  | overlap between arrowHead and arrowType?                             |
+| style      |                                                                      |
+| labelStyle |                                                                      |
+| label      | overlap between label and labelText?                                 |
+| labelPos   |                                                                      |
+| labelType  | overlap between label and labelText?                                 |
+| thickness  | Sets the thinkess of the edge. Can be \['normal', 'thick'\]          |
+| pattern    | Sets the pattern of the edge. Can be \['solid', 'dotted', 'dashed'\] |
 
 # Markers
 
@@ -127,12 +127,13 @@ insertMarkers(el, \['point', 'circle'\])
 The example above adds the markers point and cross. This means that edges with the arrowTypes arrow_cross, double_arrow_cross, arrow_point and double_arrow_cross will get the corresponding markers but arrowType arrow_cross will have no impact.
 
 Current markers:
-* point - the standard arrow from flowcharts
-* circle - Arrows ending with circle
-* cross - arrows starting and ending with a cross
 
+- point - the standard arrow from flowcharts
+- circle - Arrows ending with circle
+- cross - arrows starting and ending with a cross
 
 // Todo - in case of common renderer
+
 # Common functions used by the renderer to be implemented by the Db
 
 getDirection
diff --git a/src/dagre-wrapper/createLabel.js b/src/dagre-wrapper/createLabel.js
index 3e3ffdfc9..631fb7645 100644
--- a/src/dagre-wrapper/createLabel.js
+++ b/src/dagre-wrapper/createLabel.js
@@ -1,5 +1,5 @@
 import { select } from 'd3';
-import { log } from '../logger'; // eslint-disable-line
+import { log } from '../logger';
 import { getConfig } from '../config';
 import { sanitizeText, evaluate } from '../diagrams/common/common';
 import { decodeEntities } from '../mermaidAPI';
diff --git a/src/dagre-wrapper/edges.js b/src/dagre-wrapper/edges.js
index 677fda9f1..86e41de1d 100644
--- a/src/dagre-wrapper/edges.js
+++ b/src/dagre-wrapper/edges.js
@@ -1,4 +1,4 @@
-import { log } from '../logger'; // eslint-disable-line
+import { log } from '../logger';
 import createLabel from './createLabel';
 import { line, curveBasis, select } from 'd3';
 import { getConfig } from '../config';
@@ -240,7 +240,7 @@ export const intersection = (node, outsidePoint, insidePoint) => {
   const Q = Math.abs(outsidePoint.y - insidePoint.y);
   const R = Math.abs(outsidePoint.x - insidePoint.x);
   // log.warn();
-  if (Math.abs(y - outsidePoint.y) * w > Math.abs(x - outsidePoint.x) * h) { // eslint-disable-line
+  if (Math.abs(y - outsidePoint.y) * w > Math.abs(x - outsidePoint.x) * h) {
     // Intersection is top or bottom of rect.
     // let q = insidePoint.y < outsidePoint.y ? outsidePoint.y - h - y : y - h - outsidePoint.y;
     let q = insidePoint.y < outsidePoint.y ? outsidePoint.y - h - y : y - h - outsidePoint.y;
diff --git a/src/dagre-wrapper/index.js b/src/dagre-wrapper/index.js
index daf130f0d..72652ff8c 100644
--- a/src/dagre-wrapper/index.js
+++ b/src/dagre-wrapper/index.js
@@ -19,7 +19,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
   const dir = graph.graph().rankdir;
   log.trace('Dir in recursive render - dir:', dir);
 
-  const elem = _elem.insert('g').attr('class', 'root'); // eslint-disable-line
+  const elem = _elem.insert('g').attr('class', 'root');
   if (!graph.nodes()) {
     log.info('No nodes found for', graph);
   } else {
@@ -28,7 +28,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
   if (graph.edges().length > 0) {
     log.trace('Recursive edges', graph.edge(graph.edges()[0]));
   }
-  const clusters = elem.insert('g').attr('class', 'clusters'); // eslint-disable-line
+  const clusters = elem.insert('g').attr('class', 'clusters');
   const edgePaths = elem.insert('g').attr('class', 'edgePaths');
   const edgeLabels = elem.insert('g').attr('class', 'edgeLabels');
   const nodes = elem.insert('g').attr('class', 'nodes');
diff --git a/src/dagre-wrapper/nodes.js b/src/dagre-wrapper/nodes.js
index 5f608b949..344210e93 100644
--- a/src/dagre-wrapper/nodes.js
+++ b/src/dagre-wrapper/nodes.js
@@ -1,5 +1,5 @@
 import { select } from 'd3';
-import { log } from '../logger'; // eslint-disable-line
+import { log } from '../logger';
 import { labelHelper, updateNodeBounds, insertPolygonShape } from './shapes/util';
 import { getConfig } from '../config';
 import intersect from './intersect/index.js';
diff --git a/src/dagre-wrapper/shapes/note.js b/src/dagre-wrapper/shapes/note.js
index f7cfa2ca9..6b693fdf6 100644
--- a/src/dagre-wrapper/shapes/note.js
+++ b/src/dagre-wrapper/shapes/note.js
@@ -1,5 +1,5 @@
 import { updateNodeBounds, labelHelper } from './util';
-import { log } from '../../logger'; // eslint-disable-line
+import { log } from '../../logger';
 import intersect from '../intersect/index.js';
 
 const note = (parent, node) => {
diff --git a/src/diagrams/c4/svgDraw.js b/src/diagrams/c4/svgDraw.js
index 6bcf752dc..c67fb2649 100644
--- a/src/diagrams/c4/svgDraw.js
+++ b/src/diagrams/c4/svgDraw.js
@@ -875,7 +875,6 @@ const _drawTextCandidateFunc = (function () {
   function _setTextAttrs(toText, fromTextAttrsDict) {
     for (const key in fromTextAttrsDict) {
       if (fromTextAttrsDict.hasOwnProperty(key)) {
-        // eslint-disable-line
         toText.attr(key, fromTextAttrsDict[key]);
       }
     }
diff --git a/src/diagrams/class/classRenderer-v2.js b/src/diagrams/class/classRenderer-v2.js
index 5850ee0f1..da3f50b08 100644
--- a/src/diagrams/class/classRenderer-v2.js
+++ b/src/diagrams/class/classRenderer-v2.js
@@ -216,7 +216,6 @@ export const addRelations = function (relations, g) {
       edgeData.labelpos = 'c';
 
       if (getConfig().flowchart.htmlLabels) {
-        // eslint-disable-line
         edgeData.labelType = 'html';
         edgeData.label = '<span class="edgeLabel">' + edge.text + '</span>';
       } else {
diff --git a/src/diagrams/flowchart/flowChartShapes.spec.js b/src/diagrams/flowchart/flowChartShapes.spec.js
index d7406e21e..e7e535056 100644
--- a/src/diagrams/flowchart/flowChartShapes.spec.js
+++ b/src/diagrams/flowchart/flowChartShapes.spec.js
@@ -94,6 +94,9 @@ describe('flowchart shapes', function () {
   });
 });
 
+/**
+ *
+ */
 function MockRender() {
   const shapes = {};
   return {
@@ -103,6 +106,11 @@ function MockRender() {
   };
 }
 
+/**
+ *
+ * @param tag
+ * @param {...any} args
+ */
 function MockSvg(tag, ...args) {
   const children = [];
   const attributes = {};
@@ -139,6 +147,11 @@ function useWidth(w, h) {
   return w;
 }
 
+/**
+ *
+ * @param w
+ * @param h
+ */
 function useHeight(w, h) {
   return h;
 }
diff --git a/src/diagrams/flowchart/flowDb.js b/src/diagrams/flowchart/flowDb.js
index e3921ecb6..192da23d3 100644
--- a/src/diagrams/flowchart/flowDb.js
+++ b/src/diagrams/flowchart/flowDb.js
@@ -477,7 +477,7 @@ export const addSubGraph = function (_id, list, _title) {
         return false;
       }
       if (type in prims) {
-        return prims[type].hasOwnProperty(item) ? false : (prims[type][item] = true); // eslint-disable-line
+        return prims[type].hasOwnProperty(item) ? false : (prims[type][item] = true);
       } else {
         return objs.indexOf(item) >= 0 ? false : objs.push(item);
       }
diff --git a/src/diagrams/gantt/ganttRenderer.js b/src/diagrams/gantt/ganttRenderer.js
index 56b3e00b1..f0866617f 100644
--- a/src/diagrams/gantt/ganttRenderer.js
+++ b/src/diagrams/gantt/ganttRenderer.js
@@ -621,7 +621,6 @@ export const draw = function (text, id, version, diagObj) {
     const result = [];
     for (let i = 0, l = arr.length; i < l; ++i) {
       if (!Object.prototype.hasOwnProperty.call(hash, arr[i])) {
-        // eslint-disable-line
         // it works with objects! in FF, at least
         hash[arr[i]] = true;
         result.push(arr[i]);
diff --git a/src/diagrams/git/gitGraphAst.js b/src/diagrams/git/gitGraphAst.js
index 47c3e9f30..fb9bb100d 100644
--- a/src/diagrams/git/gitGraphAst.js
+++ b/src/diagrams/git/gitGraphAst.js
@@ -24,8 +24,10 @@ let curBranch = mainBranchName;
 let direction = 'LR';
 let seq = 0;
 
+/**
+ *
+ */
 function getId() {
-  // eslint-disable-line
   return random({ length: 7 });
 }
 
diff --git a/src/diagrams/git/layout.js b/src/diagrams/git/layout.js
index 0f61917ab..5714c2b96 100644
--- a/src/diagrams/git/layout.js
+++ b/src/diagrams/git/layout.js
@@ -1,6 +1,6 @@
 import { getConfig } from '../../config';
 
-export default (dir, _branches, _commits) => { // eslint-disable-line
+export default (dir, _branches, _commits) => {
   const config = getConfig().gitGraph;
   const branches = [];
   const commits = [];
diff --git a/src/diagrams/sequence/svgDraw.js b/src/diagrams/sequence/svgDraw.js
index 864037c2b..fd70871e0 100644
--- a/src/diagrams/sequence/svgDraw.js
+++ b/src/diagrams/sequence/svgDraw.js
@@ -918,7 +918,7 @@ const _drawTextCandidateFunc = (function () {
    */
   function _setTextAttrs(toText, fromTextAttrsDict) {
     for (const key in fromTextAttrsDict) {
-      if (fromTextAttrsDict.hasOwnProperty(key)) { // eslint-disable-line
+      if (fromTextAttrsDict.hasOwnProperty(key)) {
         toText.attr(key, fromTextAttrsDict[key]);
       }
     }
@@ -1026,7 +1026,7 @@ const _drawMenuItemTextCandidateFunc = (function () {
    */
   function _setTextAttrs(toText, fromTextAttrsDict) {
     for (const key in fromTextAttrsDict) {
-      if (fromTextAttrsDict.hasOwnProperty(key)) { // eslint-disable-line
+      if (fromTextAttrsDict.hasOwnProperty(key)) {
         toText.attr(key, fromTextAttrsDict[key]);
       }
     }
diff --git a/src/diagrams/state/stateDb.js b/src/diagrams/state/stateDb.js
index a9766e4f8..7092cf1d6 100644
--- a/src/diagrams/state/stateDb.js
+++ b/src/diagrams/state/stateDb.js
@@ -121,8 +121,7 @@ let documents = {
 let currentDocument = documents.root;
 
 let startCnt = 0;
-let endCnt = 0; // eslint-disable-line
-// let stateCnt = 0;
+let endCnt = 0; // let stateCnt = 0;
 
 let title = 'State diagram';
 let description = '';
@@ -180,7 +179,7 @@ export const clear = function (saveCommon) {
   currentDocument = documents.root;
 
   startCnt = 0;
-  endCnt = 0; // eslint-disable-line
+  endCnt = 0;
   classes = [];
   if (!saveCommon) {
     commonClear();
diff --git a/src/diagrams/user-journey/svgDraw.js b/src/diagrams/user-journey/svgDraw.js
index 7276a64e9..f655b9c3a 100644
--- a/src/diagrams/user-journey/svgDraw.js
+++ b/src/diagrams/user-journey/svgDraw.js
@@ -439,7 +439,6 @@ const _drawTextCandidateFunc = (function () {
   function _setTextAttrs(toText, fromTextAttrsDict) {
     for (const key in fromTextAttrsDict) {
       if (key in fromTextAttrsDict) {
-        // eslint-disable-line
         // noinspection JSUnfilteredForInLoop
         toText.attr(key, fromTextAttrsDict[key]);
       }
diff --git a/src/utils.ts b/src/utils.ts
index 2876664f9..78d083c9a 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -44,6 +44,7 @@ const anyComment = /\s*%%.*\n/gm;
 /**
  * @function detectInit Detects the init config object from the text
  *
+ * @param config
  *   ```mermaid
  *   %%{init: {"theme": "debug", "logLevel": 1 }}%%
  *   graph LR
@@ -326,7 +327,7 @@ const calcLabelPosition = (points) => {
 
 const calcCardinalityPosition = (isRelationTypePresent, points, initialPosition) => {
   let prevPoint;
-  let totalDistance = 0; // eslint-disable-line
+  let totalDistance = 0;
   log.info('our points', points);
   if (points[0] !== initialPosition) {
     points = points.reverse();
@@ -386,7 +387,7 @@ const calcTerminalLabelPosition = (terminalMarkerSize, position, _points) => {
   // Todo looking to faster cloning method
   let points = JSON.parse(JSON.stringify(_points));
   let prevPoint;
-  let totalDistance = 0; // eslint-disable-line
+  let totalDistance = 0;
   log.info('our points', points);
   if (position !== 'start_left' && position !== 'start_right') {
     points = points.reverse();
@@ -945,10 +946,18 @@ export interface DetailedError {
   hash: any;
 }
 
+/**
+ *
+ * @param error
+ */
 export function isDetailedError(error: unknown): error is DetailedError {
   return 'str' in error;
 }
 
+/**
+ *
+ * @param error
+ */
 export function getErrorMessage(error: unknown): string {
   if (error instanceof Error) return error.message;
   return String(error);
diff --git a/test.js b/test.js
index 824cfec88..fa728c6ed 100644
--- a/test.js
+++ b/test.js
@@ -1,3 +1,6 @@
+/**
+ *
+ */
 function apa() {
   // comment's
   const a = 1;

From 1f6e4a088715183556a0a9ea10c22541f3d4c594 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 5 Sep 2022 01:33:47 +0530
Subject: [PATCH 59/60] Fix pre

---
 docs/n00b-gettingStarted.md | 15 +++++----------
 docs/usage.md               | 16 ++++++----------
 2 files changed, 11 insertions(+), 20 deletions(-)

diff --git a/docs/n00b-gettingStarted.md b/docs/n00b-gettingStarted.md
index bc329803e..950c4eba6 100644
--- a/docs/n00b-gettingStarted.md
+++ b/docs/n00b-gettingStarted.md
@@ -99,8 +99,7 @@ c. The `mermaid.initialize()` call, which dictates the appearance of diagrams an
         A[Client] --> B[Load Balancer] 
         B --> C[Server01] 
         B --> D[Server02]
-    </pre
-  >
+  </pre>
 </body>
 ```
 
@@ -145,8 +144,7 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
             A[Client] --> B[Load Balancer] 
             B --> C[Server1] 
             B --> D[Server2]
-        </pre
-    >
+    </pre>
 
     And here is another:
     <pre class="mermaid">
@@ -155,8 +153,7 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
             B(Load Balancer) 
             B -->|tcp_456| C[Server1] 
             B -->|tcp_456| D[Server2]
-        </pre
-    >
+    </pre>
   </body>
 </html>
 ```
@@ -175,15 +172,13 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
             A --- B 
             B-->C[fa:fa-ban forbidden] 
             B-->D(fa:fa-spinner);
-        </pre
-    >
+    </pre>
     <pre class="mermaid">
             graph TD 
             A[Client] --> B[Load Balancer] 
             B --> C[Server1] 
             B --> D[Server2]
-        </pre
-    >
+    </pre>
     <script src="The\Path\In\Your\Package\mermaid.js"></script>
     <script>
       mermaid.initialize({ startOnLoad: true });
diff --git a/docs/usage.md b/docs/usage.md
index d29cbdad5..026625894 100644
--- a/docs/usage.md
+++ b/docs/usage.md
@@ -1,7 +1,5 @@
 # Usage
 
-**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/usage.md)
-
 Mermaid is a JavaScript tool that makes use of a Markdown based syntax to render customizable diagrams, charts and visualizations.
 
 Diagrams can be re-rendered/modified by modifying their descriptions.
@@ -257,12 +255,11 @@ This is the renderer used for transforming the documentation from Markdown to ht
 ```javascript
 var renderer = new marked.Renderer();
 renderer.code = function (code, language) {
-    if (code.match(/^sequenceDiagram/) || code.match(/^graph/)) {
-<pre class="mermaid">' + code + '</div>';
-    } else {
-        return '<pre><code>' + code + '</code>
-        return '</pre>';
-    }
+  if (code.match(/^sequenceDiagram/) || code.match(/^graph/)) {
+    return '<pre class="mermaid">' + code + '</pre>';
+  } else {
+    return '<pre><code>' + code + '</code></pre>';
+  }
 };
 ```
 
@@ -281,8 +278,7 @@ module.exports = (options) ->
       if not hasMermaid
         hasMermaid = true
         html += '<script src="'+options.mermaidPath+'"></script>'
-      html + '<div class="mermaid">'+code+'
-</pre>'
+      html + '<pre class="mermaid">'+code+'</pre>'
     else
       @defaultCode(code, language)
 

From d52c1f09d510502a0662fe0f000d8da977b97dcc Mon Sep 17 00:00:00 2001
From: mmorel-35 <mmorel-35@users.noreply.github.com>
Date: Mon, 5 Sep 2022 07:13:42 +0000
Subject: [PATCH 60/60] chore: update browsers list

---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 113d19ba2..01a2b7977 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3937,9 +3937,9 @@ camelcase@^6.2.0:
   integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
 
 caniuse-lite@^1.0.30001359:
-  version "1.0.30001381"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001381.tgz"
-  integrity sha512-fEnkDOKpvp6qc+olg7+NzE1SqyfiyKf4uci7fAU38M3zxs0YOyKOxW/nMZ2l9sJbt7KZHcDIxUnbI0Iime7V4w==
+  version "1.0.30001390"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001390.tgz"
+  integrity sha512-sS4CaUM+/+vqQUlCvCJ2WtDlV81aWtHhqeEVkLokVJJa3ViN4zDxAGfq9R8i1m90uGHxo99cy10Od+lvn3hf0g==
 
 caseless@~0.12.0:
   version "0.12.0"