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/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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/50] #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/50] #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/50] #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/50] #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/50] 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 e7b199adaf7971f6b7e9372ecaaf3aa4bbd7b499 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 31 Aug 2022 11:48:23 +0530
Subject: [PATCH 41/50] Update dependabot.yml

---
 .github/dependabot.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index 9de58cc4f..a1c60627c 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -4,6 +4,7 @@ updates:
   open-pull-requests-limit: 10
   directory: /
   target-branch: develop
+  versioning-strategy: increase
   schedule:
     interval: weekly
     day: monday

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 42/50] 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 43/50] 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 44/50] 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 45/50] 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 46/50] 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 47/50] 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 48/50] 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 49/50] 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 50/50] 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"