tsConversion: mermaidAPI

2025-08-25 11:16:53 +02:00 · 2022-08-22 11:10:30 +05:30
parent 39aaf2f813
commit d365dacbf7
16 changed files with 776 additions and 760 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # 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)
@@ -9,6 +14,7 @@
 -   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:**
@@ -60,6 +66,7 @@
 -   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:**
@@ -129,7 +136,7 @@
 -   TypeError: Cannot read property 'select' of undefined [\#563](https://github.com/knsv/mermaid/issues/563)
 -   A little bug [\#557](https://github.com/knsv/mermaid/issues/557)
 -   Japanese text appears garbled [\#554](https://github.com/knsv/mermaid/issues/554)
- classdiagram not works in mermaid live\_editor  [\#553](https://github.com/knsv/mermaid/issues/553)
+-   classdiagram not works in mermaid live_editor [\#553](https://github.com/knsv/mermaid/issues/553)
 -   font awesome in link text? [\#546](https://github.com/knsv/mermaid/issues/546)
 -   q: heard of the cosmogol standard? [\#545](https://github.com/knsv/mermaid/issues/545)
 -   Arrow heads missing \(cli, 7.0.3\) [\#544](https://github.com/knsv/mermaid/issues/544)
@@ -270,6 +277,7 @@
 -   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:**
@@ -293,6 +301,7 @@
 -   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:**
@@ -301,6 +310,7 @@
 -   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:**
@@ -337,6 +347,7 @@
 -   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:**
@@ -387,6 +398,7 @@
 -   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:**
@@ -425,9 +437,11 @@
 -   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:**
@@ -449,6 +463,7 @@
 -   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:**
@@ -479,6 +494,7 @@
 -   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:**
@@ -490,6 +506,7 @@
 -   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:**
@@ -513,9 +530,11 @@
 -   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:**
@@ -569,6 +588,7 @@
 -   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:**
@@ -600,6 +620,7 @@
 -   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:**
@@ -634,6 +655,7 @@
 -   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:**
@@ -646,9 +668,11 @@
 -   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:**
@@ -676,6 +700,7 @@
 -   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:**
@@ -693,6 +718,7 @@
 -   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:**
@@ -712,6 +738,7 @@
 -   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:**
@@ -732,6 +759,7 @@
 -   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:**
@@ -750,6 +778,7 @@
 -   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:**
@@ -768,11 +797,12 @@
 -   New grammar will allow statements ending without semicolon as disccused in Issue \#38 [\#63](https://github.com/knsv/mermaid/pull/63) ([vijay40](https://github.com/vijay40))
 -   Class based styling [\#62](https://github.com/knsv/mermaid/pull/62) ([bjowes](https://github.com/bjowes))
 -   Fix typos [\#60](https://github.com/knsv/mermaid/pull/60) ([sublimino](https://github.com/sublimino))
- Included .DS\_Store in gitignore [\#57](https://github.com/knsv/mermaid/pull/57) ([alvynmcq](https://github.com/alvynmcq))
+-   Included .DS_Store in gitignore [\#57](https://github.com/knsv/mermaid/pull/57) ([alvynmcq](https://github.com/alvynmcq))
 -   Improves 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:**
@@ -785,13 +815,15 @@

 **Merged pull requests:**

- Include bower\_components/ to .gitignore [\#33](https://github.com/knsv/mermaid/pull/33) ([serv](https://github.com/serv))
+-   Include bower_components/ to .gitignore [\#33](https://github.com/knsv/mermaid/pull/33) ([serv](https://github.com/serv))
 -   Fixed reference to Git repo. [\#32](https://github.com/knsv/mermaid/pull/32) ([guyellis](https://github.com/guyellis))

 ## [0.2.14](https://github.com/knsv/mermaid/tree/0.2.14) (2014-12-03)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.13...0.2.14)

 ## [0.2.13](https://github.com/knsv/mermaid/tree/0.2.13) (2014-12-03)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.10...0.2.13)

 **Closed issues:**
@@ -805,9 +837,11 @@
 -   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:**
@@ -820,9 +854,11 @@
 -   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:**
@@ -830,9 +866,11 @@
 -   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:**
@@ -840,24 +878,29 @@
 -   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)*
+\* _This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/Github-Changelog-Generator)_
--- 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** 

 ## 

--- 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",
--- 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() {
--- 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);
 };
--- 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') {
--- 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];
--- 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') {
--- 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());
--- 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();
--- 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);
+    });
  });
 });
--- 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,
 };

--- 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.
+      expect(
+        mermaidAPI.parse('this is not a mermaid diagram definition', () => {
          parseErrorWasCalled = true;
-      });
-      expect(mermaid.parseError).not.toEqual(undefined);
-      expect(mermaidAPI.parse('this is not a mermaid diagram definition')).toEqual(false);
+        })
+      ).toEqual(false);
      expect(parseErrorWasCalled).toEqual(true);
    });
    it('it should return true for valid definition', function () {
--- a/src/mermaidAPI.ts
+++ 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(/ﬂ°°/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
+    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
--- 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"]
 }
--- 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"