Merge branch 'sidv/noVar' into pr/aryandeelwal/3579

* sidv/noVar: (77 commits) fix: Fix eslint warnings docs: Fix docs path in Contributing.md Fix file name during "dev" script docs: Sync capitalization fix format Setup.md format cSpell.json format docs YAML format cSpell.json separate words & ignoreWords fix: "skin param" ignore the changelog Revert "fix: "skin param"" fix: "skin param" fix: "corresponding" known terms known terms fix: "JetBrains" known terms known terms ...
2025-01-14 06:43:25 +08:00 · 2022-10-09 22:13:36 +08:00 · 2022-10-09 22:13:36 +08:00 · 238b15df9d
commit 238b15df9d
parent 43f3784c83 6e2deb1fa7
113 changed files with 917 additions and 823 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -52,24 +52,25 @@
  },
  "overrides": [
    {
-      "files": "./**/*.html",
-      "rules": {
-        "no-undef": "off",
-        "jsdoc/require-jsdoc": "off"
-      }
-    },
-    {
-      "files": ["./cypress/**", "./demos/**"],
+      "files": ["cypress/**", "demos/**"],
      "rules": {
        "no-console": "off"
      }
    },
    {
-      "files": ["./**/*.spec.{ts,js}", "./cypress/**", "./demos/**", "./**/docs/**"],
+      "files": ["*.spec.{ts,js}", "cypress/**", "demos/**", "**/docs/**"],
      "rules": {
        "jsdoc/require-jsdoc": "off",
        "@typescript-eslint/no-unused-vars": "off"
      }
+    },
+    {
+      "files": ["*.html", "*.md", "**/*.md/*"],
+      "rules": {
+        "no-var": "error",
+        "no-undef": "off",
+        "@typescript-eslint/no-unused-vars": "off"
+      }
    }
  ]
 }
--- a/.github/workflows/docs.yml
+++ b/.github/workflows/docs.yml
@ -0,0 +1,28 @@
+name: Documentation Checks
+
+on:
+  push:
+    branches:
+      - develop
+    paths:
+      - 'packages/mermaid/src/docs/**/*'
+  pull_request:
+    branches:
+      - develop
+    paths:
+      - 'packages/mermaid/src/docs/**/*'
+jobs:
+  spellcheck:
+    name: 'Docs: Spellcheck'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        name: Check out the code
+      - uses: actions/setup-node@v1
+        name: Setup node
+        with:
+          node-version: '16'
+      - run: npm install -g cspell
+        name: Install cSpell
+      - run: cspell --config ./cSpell.json "packages/mermaid/src/docs/**/*.md" --no-progress
+        name: Run cSpell
--- a/.vite/build.ts
+++ b/.vite/build.ts
@ -22,22 +22,22 @@ const packageOptions = {
  'mermaid-mindmap': {
    name: 'mermaid-mindmap',
    packageName: 'mermaid-mindmap',
-    file: 'add-diagram.ts',
+    file: 'diagram-definition.ts',
  },
  'mermaid-mindmap-detector': {
    name: 'mermaid-mindmap-detector',
    packageName: 'mermaid-mindmap',
-    file: 'registry.ts',
+    file: 'detector.ts',
  },
  'mermaid-example-diagram': {
    name: 'mermaid-example-diagram',
    packageName: 'mermaid-example-diagram',
-    file: 'add-diagram.ts',
+    file: 'diagram-definition.ts',
  },
  'mermaid-example-diagram-detector': {
    name: 'mermaid-example-diagram-detector',
    packageName: 'mermaid-example-diagram',
-    file: 'registry.ts',
+    file: 'detector.ts',
  },
 };

--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@ -0,0 +1,128 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+- Focusing on what is best not just for us as individuals, but for the
+  overall community
+
+Examples of unacceptable behavior include:
+
+- The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at security@mermaid.live
+.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior, harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct
+enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -39,16 +39,16 @@ Less strict here, it is OK to commit directly in the `develop` branch if you are

 The documentation is written in **Markdown**. For more information about Markdown [see the GitHub Markdown help page](https://help.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax).

-### Documentation source files are in /src/docs
+### Documentation source files are in [`/packages/mermaid/src/docs`](packages/mermaid/src/docs)

-The source files for the project documentation are located in the `/src/docs` directory. This is where you should make changes.
-The files under `/src/docs` are processed to generate the published documentation, and the resulting files are put into the `/docs` directory.
+The source files for the project documentation are located in the [`/packages/mermaid/src/docs`](packages/mermaid/src/docs) directory. This is where you should make changes.
+The files under `/packages/mermaid/src/docs` are processed to generate the published documentation, and the resulting files are put into the `/docs` directory.

 ```mermaid
 flowchart LR
  classDef default fill:#fff,color:black,stroke:black

-  source["files in /src/docs\n(changes should be done here)"] -- automatic processing\nto generate the final documentation--> published["files in /docs\ndisplayed on the official documentation site"]
+  source["files in /packages/mermaid/src/docs\n(changes should be done here)"] -- automatic processing\nto generate the final documentation--> published["files in /docs\ndisplayed on the official documentation site"]

 ```

@ -137,7 +137,7 @@ it('should render forks and joins', () => {

 Finally, if it is not in the documentation, no one will know about it and then **no one will use it**. Wouldn't that be sad? With all the effort that was put into the feature?

-The source files for documentation are in `/src/docs` and are written in markdown. Just pick the right section and start typing. See the [Committing Documentation](#committing-documentation) section for more about how the documentation is generated.
+The source files for documentation are in `/packages/mermaid/src/docs` and are written in markdown. Just pick the right section and start typing. See the [Committing Documentation](#committing-documentation) section for more about how the documentation is generated.

 #### Adding to or changing the documentation organization

--- a/V10-BreakingChanges.md
+++ b/V10-BreakingChanges.md
@ -0,0 +1,5 @@
+# A collection of updates that change the behaviour
+
+## Lazy loading and asynchronisity
+
+- Invalid dates are rendered as syntax error instead of returning best guess or the current date
--- a/mocks/dagre-d3.ts
+++ b/mocks/dagre-d3.ts
@ -1,3 +1 @@
-import { vi } from 'vitest';
-
-// export const render = vi.fn();
+// DO NOT delete this file. It is used by vitest to mock the dagre-d3 module.
--- a/cSpell.json
+++ b/cSpell.json
@ -0,0 +1,95 @@
+{
+  "version": "0.2",
+  "language": "en",
+  "words": [
+    "customizability",
+    "Gantt",
+    "jison",
+    "knsv",
+    "Knut",
+    "mindmap",
+    "Mindmaps",
+    "mitigations",
+    "sandboxed",
+    "Sveidqvist",
+    "verdana",
+    "Visio"
+  ],
+  "ignoreWords": [
+    "Adamiecki",
+    "applitools",
+    "Asciidoctor",
+    "Astah",
+    "Bisheng",
+    "codedoc",
+    "Docsy",
+    "Doku",
+    "Gitea",
+    "Gitgraph",
+    "Grav",
+    "Inkdrop",
+    "Jaoude",
+    "mdbook",
+    "mermerd",
+    "mkdocs",
+    "phpbb",
+    "Plantuml",
+    "Playfair's",
+    "Podlite",
+    "redmine",
+    "sphinxcontrib",
+    "Tuleap"
+  ],
+  "patterns": [
+    {
+      "name": "Markdown links",
+      "pattern": "\\((.*)\\)",
+      "description": ""
+    },
+    {
+      "name": "Markdown code blocks",
+      "pattern": "/^(\\s*`{3,}).*[\\s\\S]*?^\\1/gmx",
+      "description": "Taken from the cSpell example at https://cspell.org/configuration/patterns/#verbose-regular-expressions"
+    },
+    {
+      "name": "Inline code blocks",
+      "pattern": "\\`([^\\`\\r\\n]+?)\\`",
+      "description": "https://stackoverflow.com/questions/41274241/how-to-capture-inline-markdown-code-but-not-a-markdown-code-fence-with-regex"
+    },
+    {
+      "name": "Link contents",
+      "pattern": "\\<a(.*)\\>",
+      "description": ""
+    },
+    {
+      "name": "Snippet references",
+      "pattern": "-- snippet:(.*)",
+      "description": ""
+    },
+    {
+      "name": "Snippet references 2",
+      "pattern": "\\<\\[sample:(.*)",
+      "description": "another kind of snippet reference"
+    },
+    {
+      "name": "Multi-line code blocks",
+      "pattern": "/^\\s*```[\\s\\S]*?^\\s*```/gm"
+    },
+    {
+      "name": "HTML Tags",
+      "pattern": "<[^>]*>",
+      "description": "Reference: https://stackoverflow.com/questions/11229831/regular-expression-to-remove-html-tags-from-a-string"
+    }
+  ],
+  "ignoreRegExpList": [
+    "Markdown links",
+    "Markdown code blocks",
+    "Inline code blocks",
+    "Link contents",
+    "Snippet references",
+    "Snippet references 2",
+    "Multi-line code blocks",
+    "HTML Tags"
+  ],
+  "ignorePaths": ["packages/mermaid/src/docs/CHANGELOG.md"]
+}
--- a/cypress/integration/other/interaction.spec.js
+++ b/cypress/integration/other/interaction.spec.js
@ -1,266 +1,180 @@
 describe('Interaction', () => {
-  describe('Interaction - security level loose', () => {
-    it('Graph: should handle a click on a node with a bound function', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g#flowchart-Function-4').click();
+  describe('Security level loose', () => {
+    beforeEach(() => {
+      cy.visit('http://localhost:9000/click_security_loose.html');
+    });

+    it('Graph: should handle a click on a node with a bound function', () => {
+      cy.contains('FunctionTest1').parents('.node').click();
      cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
    });
+
    it('Graph: should handle a click on a node with a bound function with args', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g#flowchart-FunctionArg-28').click();
-
+      cy.contains('FunctionArgTest2').parents('.node').click();
      cy.get('.created-by-click-2').should('have.text', 'Clicked By Flow: ARGUMENT');
    });
+
    it('Flowchart: should handle a click on a node with a bound function where the node starts with a number', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g[id="flowchart-FunctionArg-34"]').click();
-
+      cy.contains('2FunctionArg').parents('.node').click();
      cy.get('.created-by-click-2').should('have.text', 'Clicked By Flow: ARGUMENT');
    });
+
    it('Graph: should handle a click on a node with a bound url', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('#flowchart-URL-5').click();
+      // When there is a URL, cy.contains selects the a tag instead of the span. The .node is a child of a, so we have to use find instead of parent.
+      cy.contains('URLTest1').find('.node').click();
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/empty.html');
+      });
+    });

-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
-      });
-    });
    it('Graph: should handle a click on a node with a bound url where the node starts with a number', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g[id="flowchart-2URL-11"]').click();
-
-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      cy.contains('2URL').find('.node').click();
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/empty.html');
      });
    });

    it('Flowchart-v2: should handle a click on a node with a bound function', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g#flowchart-Function-16').click();
-
+      cy.contains('FunctionTest2').parents('.node').click();
      cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
    });
+
    it('Flowchart-v2: should handle a click on a node with a bound function where the node starts with a number', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g[id="flowchart-1Function-22"]').click();
-
+      cy.contains('10Function').parents('.node').click();
      cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
    });
+
    it('Flowchart-v2: should handle a click on a node with a bound url', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('#flowchart-URL-17').click();
+      cy.contains('URLTest2').find('.node').click();
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/empty.html');
+      });
+    });

-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
-      });
-    });
    it('Flowchart-v2: should handle a click on a node with a bound url where the node starts with a number', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g[id="flowchart-2URL-23"]').click();
-
-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      cy.contains('20URL').find('.node').click();
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/empty.html');
      });
    });

    it('should handle a click on a task with a bound URL clicking on the rect', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('rect#cl1').click({ force: true });
+      cy.get('rect#cl1').click({ force: true });
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/empty.html');
+      });
+    });

-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
-      });
-    });
    it('should handle a click on a task with a bound URL clicking on the text', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('text#cl1-text').click({ force: true });
+      cy.get('text#cl1-text').click({ force: true });
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/empty.html');
+      });
+    });

-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
-      });
-    });
    it('should handle a click on a task with a bound function without args', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('rect#cl2').click({ force: true });
-
+      cy.get('rect#cl2').click({ force: true });
      cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant cl2');
    });
-    it('should handle a click on a task with a bound function with args', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('rect#cl3').click({ force: true });

+    it('should handle a click on a task with a bound function with args', () => {
+      cy.get('rect#cl3').click({ force: true });
      cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant test1 test2 test3');
    });

    it('should handle a click on a task with a bound function without args', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('text#cl2-text').click({ force: true });
-
+      cy.get('text#cl2-text').click({ force: true });
      cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant cl2');
    });
-    it('should handle a click on a task with a bound function with args ', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('text#cl3-text').click({ force: true });

+    it('should handle a click on a task with a bound function with args ', () => {
+      cy.get('text#cl3-text').click({ force: true });
      cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant test1 test2 test3');
    });
  });

  describe('Interaction - security level tight', () => {
+    beforeEach(() => {
+      cy.visit('http://localhost:9000/click_security_strict.html');
+    });
    it('should handle a click on a node without a bound function', () => {
-      const url = 'http://localhost:9000/click_security_strict.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g#flowchart-Function-4').click();
-
+      cy.contains('Function1').parents('.node').click();
      cy.get('.created-by-click').should('not.exist');
-      // cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
    });
+
    it('should handle a click on a node with a bound function where the node starts with a number', () => {
-      const url = 'http://localhost:9000/click_security_strict.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g[id="flowchart-1Function-10"]').click();
-
-      // cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
+      cy.contains('1Function').parents('.node').click();
      cy.get('.created-by-click').should('not.exist');
    });
+
    it('should handle a click on a node with a bound url', () => {
-      const url = 'http://localhost:9000/click_security_strict.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g#flowchart-URL-5').click();
+      cy.contains('URL1').find('.node').click();
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/empty.html');
+      });
+    });

-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
-      });
-    });
    it('should handle a click on a node with a bound url where the node starts with a number', () => {
-      const url = 'http://localhost:9000/click_security_strict.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g[id="flowchart-2URL-11"]').click();
-
-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      cy.contains('2URL').find('.node').click();
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/empty.html');
      });
    });

    it('should handle a click on a task with a bound URL clicking on the rect', () => {
-      const url = 'http://localhost:9000/click_security_strict.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('rect#cl1').click({ force: true });
+      cy.get('rect#cl1').click({ force: true });
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/empty.html');
+      });
+    });

-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
-      });
-    });
    it('should handle a click on a task with a bound URL clicking on the text', () => {
-      const url = 'http://localhost:9000/click_security_strict.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('text#cl1-text').click({ force: true });
+      cy.get('text#cl1-text').click({ force: true });
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/empty.html');
+      });
+    });

-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
-      });
-    });
    it('should handle a click on a task with a bound function', () => {
-      const url = 'http://localhost:9000/click_security_strict.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('rect#cl2').click({ force: true });
-
-      // cy.get('.created-by-gant-click').should('not.have.text', 'Clicked By Gant cl2');
+      cy.get('rect#cl2').click({ force: true });
      cy.get('.created-by-gant-click').should('not.exist');
    });
-    it('should handle a click on a task with a bound function', () => {
-      const url = 'http://localhost:9000/click_security_strict.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('text#cl2-text').click({ force: true });

-      // cy.get('.created-by-gant-click').should('not.have.text', 'Clicked By Gant cl2');
+    it('should handle a click on a task with a bound function', () => {
+      cy.get('text#cl2-text').click({ force: true });
      cy.get('.created-by-gant-click').should('not.exist');
    });
  });

  describe('Interaction - security level other, missspelling', () => {
+    beforeEach(() => {
+      cy.visit('http://localhost:9000/click_security_other.html');
+    });
+
    it('should handle a click on a node with a bound function', () => {
-      const url = 'http://localhost:9000/click_security_other.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g#flowchart-Function-4').click();
-
-      // cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
+      cy.contains('Function1').parents('.node').click();
      cy.get('.created-by-click').should('not.exist');
    });
+
    it('should handle a click on a node with a bound function where the node starts with a number', () => {
-      const url = 'http://localhost:9000/click_security_other.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g[id="flowchart-1Function-10"]').click();
-
-      cy.get('.created-by-click').should('not.exist');
+      cy.contains('1Function').parents('.node').click();
      cy.get('.created-by-click').should('not.exist');
    });
+
    it('should handle a click on a node with a bound url', () => {
-      const url = 'http://localhost:9000/click_security_other.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g#flowchart-URL-5').click();
-
-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      cy.contains('URL1').find('.node').click();
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/empty.html');
      });
    });

    it('should handle a click on a task with a bound function', () => {
-      const url = 'http://localhost:9000/click_security_other.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('rect#cl2').click({ force: true });
-
+      cy.get('rect#cl2').click({ force: true });
      cy.get('.created-by-gant-click').should('not.exist');
    });
+
    it('should handle a click on a task with a bound function', () => {
-      const url = 'http://localhost:9000/click_security_other.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('text#cl2-text').click({ force: true });
-
+      cy.get('text#cl2-text').click({ force: true });
      cy.get('.created-by-gant-click').should('not.exist');
    });
  });
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/cypress/integration/rendering/gantt.spec.js
@ -92,7 +92,7 @@ describe('Gantt diagram', () => {
      {}
    );
  });
-  it('should render a gantt chart for issue #1060', () => {
+  it('should FAIL redering a gantt chart for issue #1060 with invalid date', () => {
    imgSnapshotTest(
      `
      gantt
--- a/cypress/platform/click_security_loose.html
+++ b/cypress/platform/click_security_loose.html
@ -13,42 +13,42 @@
  </head>
  <body>
    <div style="display: flex">
-      <pre id="FirstLine" class="mermaid">
+      <pre class="mermaid">
    graph TB
-      Function-->URL
-      click Function clickByFlow "Add a div"
-      click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+      FunctionTest1-->URLTest1
+      click FunctionTest1 clickByFlow "Add a div"
+      click URLTest1 "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
      </pre>
-      <pre id="FirstLine" class="mermaid">
+      <pre class="mermaid">
  graph TB
    1Function--->2URL
    click 1Function clickByFlow "Add a div"
-    click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+    click 2URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
      </pre>
-      <pre id="FirstLine" class="mermaid">
+      <pre class="mermaid">
    flowchart TB
-      Function-->URL
-      click Function clickByFlow "Add a div"
-      click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
+      FunctionTest2-->URLTest2
+      click FunctionTest2 clickByFlow "Add a div"
+      click URLTest2 "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>" _self
      </pre>
-      <pre id="FirstLine" class="mermaid">
+      <pre class="mermaid">
  flowchart TB
-    1Function--->2URL
-    click 1Function clickByFlow "Add a div"
-    click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
+    10Function--->20URL
+    click 10Function clickByFlow "Add a div"
+    click 20URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>" _self
      </pre>

-      <pre id="FirstLine" class="mermaid">
+      <pre class="mermaid">
  classDiagram
    class ShapeLink
-    link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+    link ShapeLink "http://localhost:9000/empty.html" "This is a tooltip for a link"
    class ShapeCallback
    callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
      </pre>
-      <pre id="FirstLine" class="mermaid">
+      <pre class="mermaid">
  classDiagram-v2
    class ShapeLink2
-    link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+    link ShapeLink2 "http://localhost:9000/empty.html" "This is a tooltip for a link"
    class ShapeCallback2
    callback ShapeCallback2 "clickByClass" "This is a tooltip for a callback"
      </pre>
@ -85,7 +85,7 @@
    Calling a Callback (look at the console log) :cl2, after cl1, 3d
    Calling a Callback with args :cl3, after cl1, 3d

-    click cl1 href "http://localhost:9000/webpackUsage.html"
+    click cl1 href "http://localhost:9000/empty.html"
    click cl2 call clickByGantt()
    click cl3 call clickByGantt("test1", test2, test3)

@ -95,31 +95,31 @@
    Add another diagram to demo page    : 48h
    </pre>
    <div style="display: flex">
-      <pre id="FirstLine" class="mermaid">
+      <pre class="mermaid">
      graph TB
-        FunctionArg-->URL
-        click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
-        click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+        FunctionArgTest2-->URL
+        click FunctionArgTest2 call clickByFlowArg(ARGUMENT) "Add a div"
+        click URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
      </pre>
-      <pre id="FirstLine" class="mermaid">
+      <pre class="mermaid">
      flowchart TB
-        FunctionArg-->URL
-        click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
-        click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+        2FunctionArg-->URL
+        click 2FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
+        click URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
      </pre>

-      <pre id="FirstLine" class="mermaid">
+      <pre class="mermaid">
      classDiagram
      class ShapeLink
-      link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+      link ShapeLink "http://localhost:9000/empty.html" "This is a tooltip for a link"
      class ShapeCallback
      click ShapeCallback call clickByClass(123) "This is a tooltip for a callback"
      </pre>

-      <pre id="FirstLine" class="mermaid">
+      <pre class="mermaid">
      classDiagram-v2
        class ShapeLink2
-        link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+        link ShapeLink2 "http://localhost:9000/empty.html" "This is a tooltip for a link"
        class ShapeCallback2
        click ShapeCallback2 call clickByClass(123) "This is a tooltip for a callback"
      </pre>
--- a/cypress/platform/click_security_other.html
+++ b/cypress/platform/click_security_other.html
@ -9,15 +9,15 @@
  <body>
    <pre id="FirstLine" class="mermaid">
    graph TB
-      Function-->URL
-      click Function clickByFlow "Add a div"
-      click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+      Function1-->URL1
+      click Function1 clickByFlow "Add a div"
+      click URL1 "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
    </pre>
    <pre id="FirstLine" class="mermaid">
  graph TB
    1Function-->2URL
    click 1Function clickByFlow "Add a div"
-    click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+    click 2URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
    </pre>

    <pre class="mermaid">
@ -50,7 +50,7 @@
    Visit mermaidjs               :active, cl1, 2014-01-07,2014-01-10
    Calling a Callback (look at the console log) :cl2, after cl1, 3d

-    click cl1 href "http://localhost:9000/webpackUsage.html"
+    click cl1 href "http://localhost:9000/empty.html"
    click cl2 call clickByGantt("test", test, test)

    section Last section
--- a/cypress/platform/click_security_sandbox.html
+++ b/cypress/platform/click_security_sandbox.html
@ -17,38 +17,38 @@
    graph TB
      Function-->URL
      click Function clickByFlow "Add a div"
-      click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+      click URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
      </pre>
      <pre id="FirstLine" class="mermaid">
  graph TB
    1Function--->2URL
    click 1Function clickByFlow "Add a div"
-    click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+    click 2URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
      </pre>
      <pre id="FirstLine" class="mermaid">
    flowchart TB
      Function-->URL
      click Function clickByFlow "Add a div"
-      click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
+      click URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>" _self
      </pre>
      <pre id="FirstLine" class="mermaid">
  flowchart TB
    1Function--->2URL
    click 1Function clickByFlow "Add a div"
-    click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
+    click 2URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>" _self
      </pre>

      <pre id="FirstLine" class="mermaid">
  classDiagram
    class ShapeLink
-    link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+    link ShapeLink "http://localhost:9000/empty.html" "This is a tooltip for a link"
    class ShapeCallback
    callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
      </pre>
      <pre id="FirstLine" class="mermaid">
  classDiagram-v2
    class ShapeLink2
-    link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+    link ShapeLink2 "http://localhost:9000/empty.html" "This is a tooltip for a link"
    class ShapeCallback2
    callback ShapeCallback2 "clickByClass" "This is a tooltip for a callback"
      </pre>
@ -85,7 +85,7 @@
    Calling a Callback (look at the console log) :cl2, after cl1, 3d
    Calling a Callback with args :cl3, after cl1, 3d

-    click cl1 href "http://localhost:9000/webpackUsage.html"
+    click cl1 href "http://localhost:9000/empty.html"
    click cl2 call clickByGantt()
    click cl3 call clickByGantt("test1", test2, test3)

@ -99,19 +99,19 @@
      graph TB
        FunctionArg-->URL
        click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
-        click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+        click URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
      </pre>
      <pre id="FirstLine" class="mermaid">
      flowchart TB
        FunctionArg-->URL
        click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
-        click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+        click URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
      </pre>

      <pre id="FirstLine" class="mermaid">
      classDiagram
      class ShapeLink
-      link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+      link ShapeLink "http://localhost:9000/empty.html" "This is a tooltip for a link"
      class ShapeCallback
      click ShapeCallback call clickByClass(123) "This is a tooltip for a callback"
      </pre>
@ -119,7 +119,7 @@
      <pre id="FirstLine" class="mermaid">
      classDiagram-v2
        class ShapeLink2
-        link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+        link ShapeLink2 "http://localhost:9000/empty.html" "This is a tooltip for a link"
        class ShapeCallback2
        click ShapeCallback2 call clickByClass(123) "This is a tooltip for a callback"
      </pre>
--- a/cypress/platform/click_security_strict.html
+++ b/cypress/platform/click_security_strict.html
@ -9,15 +9,15 @@
  <body>
    <pre id="FirstLine" class="mermaid">
    graph TB
-      Function-->URL
-      click Function clickByFlow "Add a div"
-      click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+      Function1-->URL1
+      click Function1 clickByFlow "Add a div"
+      click URL1 "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
    </pre>
    <pre id="FirstLine" class="mermaid">
  graph TB
    1Function-->2URL
    click 1Function clickByFlow "Add a div"
-    click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+    click 2URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
    </pre>

    <pre class="mermaid">
@ -51,7 +51,7 @@
    Calling a Callback (look at the console log) :cl2, after cl1, 3d
    Calling a Callback with args :cl3, after cl1, 3d

-    click cl1 href "http://localhost:9000/webpackUsage.html"
+    click cl1 href "http://localhost:9000/empty.html"
    click cl2 call clickByGantt()
    click cl3 call clickByGantt("test1", test2, test3)

--- a/cypress/platform/empty.html
+++ b/cypress/platform/empty.html
@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Empty</title>
+  </head>
+  <body></body>
+</html>
--- a/cypress/platform/knsv.html
+++ b/cypress/platform/knsv.html
@ -368,7 +368,6 @@ flowchart TD
    </pre>

    <!-- <script src="./mermaid.js"></script> -->
-    <script src="./mermaid-mindmap-detector.js"></script>
    <script src="./mermaid.js"></script>
    <script>
      mermaid.parseError = function (err, hash) {
@ -386,6 +385,7 @@ flowchart TD
          htmlLabels: false,
          fontFamily: 'courier',
        },
+        lazyLoadedDiagrams: ['./mermaid-mindmap-detector.js'],
      });
      function callback() {
        alert('It worked');
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@ -55,11 +55,24 @@
  </head>
  <body>
    <div>Security check</div>
-    <pre id="diagram" class="mermaid2">
-example-diagram
-        </pre
-    >
    <pre id="diagram" class="mermaid">
+classDiagram
+        direction LR
+        class Student {
+          -idCard : IdCard
+        }
+        class IdCard{
+          -id : int
+          -name : string
+        }
+        class Bike{
+          -id : int
+          -name : string
+        }
+        Student "1" --o "1" IdCard : carries
+        Student "1" --o "1" Bike : rides
+    </pre>
+    <pre id="diagram" class="mermaid2">
 mindmap
  root
    A
@ -85,10 +98,16 @@ mindmap
        ::icon(mdi mdi-fire)
          gc7((grand<br/>grand<br/>child 8))
        </pre>
+    <pre id="diagram" class="mermaid2">
+      example-diagram
+    </pre>
+
    <!-- <div id="cy"></div> -->
-    <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script>
-    <script src="./mermaid-example-diagram-detector.js"></script>
+    <!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
+    <!-- <script src="./mermaid-example-diagram-detector.js"></script>    -->
+    <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
    <script src="./mermaid.js"></script>
+
    <script>
      mermaid.parseError = function (err, hash) {
        // console.error('Mermaid error: ', err);
@ -97,8 +116,13 @@ mindmap
        theme: 'forest',
        startOnLoad: true,
        logLevel: 0,
-        basePath: './packages/',
+        // basePath: './packages/',
        // themeVariables: { darkMode: true },
+        lazyLoadedDiagrams: [
+          './mermaid-mindmap-detector.esm.mjs',
+          './mermaid-example-diagram-detector.esm.mjs',
+        ],
+        // lazyLoadedDiagrams: ['../../mermaid-mindmap/registry.ts'],
      });
      function callback() {
        alert('It worked');
--- a/cypress/platform/render-after-error.html
+++ b/cypress/platform/render-after-error.html
@ -14,15 +14,16 @@
      mermaid.init({ startOnLoad: false });

      mermaid.mermaidAPI.initialize({ securityLevel: 'strict' });
-
+      (async () => {
        try {
          console.log('rendering');
-        mermaid.mermaidAPI.render('graphDiv', `>`);
+          await mermaid.mermaidAPI.render('graphDiv', `>`);
        } catch (e) {}

-      mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`, (html) => {
+        await mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`, (html) => {
          document.getElementById('graph').innerHTML = html;
        });
+      })();
    </script>
  </body>
 </html>
--- a/cypress/platform/rerender.html
+++ b/cypress/platform/rerender.html
@ -17,11 +17,12 @@
      rerender('XMas');

      function rerender(text) {
-        var graphText = `graph TD
+        const graphText = `graph TD
        A[${text}] -->|Get money| B(Go shopping)`;
-        var graph = mermaid.mermaidAPI.render('id', graphText);
-        console.log('\x1b[35m%s\x1b[0m', '>> graph', graph);
-        document.getElementById('graph').innerHTML = graph;
+        mermaid.mermaidAPI.render('id', graphText).then((svg) => {
+          console.log('\x1b[35m%s\x1b[0m', '>> graph', svg);
+          document.getElementById('graph').innerHTML = svg;
+        });
      }
    </script>
    <button id="rerender" onclick="rerender('Saturday')">Rerender</button>
--- a/cypress/platform/viewer.js
+++ b/cypress/platform/viewer.js
@ -36,6 +36,8 @@ const contentLoaded = function () {
      document.getElementsByTagName('body')[0].appendChild(div);
    }

+    graphObj.mermaid.lazyLoadedDiagrams = ['/mermaid-mindmap-detector.esm.mjs'];
+
    mermaid2.initialize(graphObj.mermaid);
    mermaid2.init();
  }
--- a/cypress/platform/xss10.html
+++ b/cypress/platform/xss10.html
@ -93,7 +93,7 @@
        throw new Error('XSS Succeeded');
      }

-      var diagram = 'classDiagram\n';
+      let diagram = 'classDiagram\n';
      diagram += 'class Square~<img/src';
      diagram += "='1'/onerror=xssAttack()>~{\n";
      diagram += 'id A\n';
--- a/cypress/platform/xss11.html
+++ b/cypress/platform/xss11.html
@ -93,7 +93,7 @@
        throw new Error('XSS Succeeded');
      }

-      var diagram = 'stateDiagram-v2\n';
+      let diagram = 'stateDiagram-v2\n';
      diagram += 's2 : This is a state description<img/src';
      diagram += "='1'/onerror=xssAttack()>";

--- a/cypress/platform/xss12.html
+++ b/cypress/platform/xss12.html
@ -93,7 +93,7 @@
        throw new Error('XSS Succeeded');
      }

-      var diagram = 'stateDiagram-v2\n';
+      let diagram = 'stateDiagram-v2\n';
      diagram += 's2 : A<img/src';
      diagram += "='1'/onerror=xssAttack()>";

--- a/cypress/platform/xss13.html
+++ b/cypress/platform/xss13.html
@ -93,7 +93,7 @@
        throw new Error('XSS Succeeded');
      }

-      var diagram = 'stateDiagram-v2\n';
+      let diagram = 'stateDiagram-v2\n';
      diagram += 'if_state --> False: if n < 0<img/src';
      diagram += "='1'/onerror=xssAttack()>";

--- a/cypress/platform/xss14.html
+++ b/cypress/platform/xss14.html
@ -93,7 +93,7 @@
        throw new Error('XSS Succeeded');
      }

-      var diagram = 'classDiagram\n';
+      let diagram = 'classDiagram\n';
      diagram += 'classA <-- classB : <ifr';
      diagram += "ame/srcdoc='<scr";
      diagram += 'ipt>parent.xssAttack(`XSS`)</';
--- a/cypress/platform/xss15.html
+++ b/cypress/platform/xss15.html
@ -93,7 +93,7 @@
        throw new Error('XSS Succeeded');
      }

-      var diagram = `sequenceDiagram
+      let diagram = `sequenceDiagram
    participant John
    links John: {"XSS": "javas`;
      diagram += `cript:alert('AudioParam')"}`;
--- a/cypress/platform/xss16.html
+++ b/cypress/platform/xss16.html
@ -93,7 +93,7 @@
        throw new Error('XSS Succeeded');
      }

-      var diagram = `sequenceDiagram
+      let diagram = `sequenceDiagram
    participant Alice
    links Alice: { "Click me!" : "javasjavascript:cript:alert('goose')" }`;

--- a/cypress/platform/xss17.html
+++ b/cypress/platform/xss17.html
@ -93,7 +93,7 @@
        throw new Error('XSS Succeeded');
      }

-      var diagram = `sequenceDiagram
+      let diagram = `sequenceDiagram
    participant Alice
    link Alice: Click Me!@javasjavascript:cript:alert("goose")`;

--- a/cypress/platform/xss18.html
+++ b/cypress/platform/xss18.html
@ -93,7 +93,7 @@
        throw new Error('XSS Succeeded');
      }

-      var diagram = `classDiagram
+      let diagram = `classDiagram
      Class "<img/src='x'/onerror=xssAttack(1)>" <--> "<img/src='x'/onerror=xssAttack(2)>" C2: Cool label`;

      // //   var diagram = "stateDiagram-v2\n";
--- a/cypress/platform/xss19.html
+++ b/cypress/platform/xss19.html
@ -93,7 +93,7 @@
        throw new Error('XSS Succeeded');
      }

-      var diagram = `classDiagram
+      let diagram = `classDiagram
 class Shape{
    <<<img/src='1'/`;

--- a/cypress/platform/xss2.html
+++ b/cypress/platform/xss2.html
@ -54,9 +54,9 @@
        startOnLoad: true,
        useMaxWidth: true,
      });
-      var cnt = 0;
-      var a;
-      var handler = setInterval(() => {
+      let cnt = 0;
+      let a;
+      const handler = setInterval(() => {
        cnt++;
        a = {};
        if (typeof a.polluted !== 'undefined') {
--- a/cypress/platform/xss20.html
+++ b/cypress/platform/xss20.html
@ -96,7 +96,7 @@
      //       var diagram = `  graph TD
      // A --> B["&lt;a href='javasc`;
      // diagram += `ript#colon;xssAttack()'&gt;AAA&lt;/a&gt;"]`;
-      var diagram = `  graph TD
+      let diagram = `  graph TD
 A --> B["<a href='javasc`;
      diagram += `ript#colon;xssAttack()'>AAA</a>"]`;
      // diagram += '//via.placeholder.com/64\' width=64 />"]';
--- a/cypress/platform/xss21.html
+++ b/cypress/platform/xss21.html
@ -96,7 +96,7 @@
      //       var diagram = `  graph TD
      // A --> B["&lt;a href='javasc`;
      // diagram += `ript#colon;xssAttack()'&gt;AAA&lt;/a&gt;"]`;
-      var diagram = `  graph TD
+      let diagram = `  graph TD
 A --> B["<a href='javasc`;
      diagram += `ript#9;t#colon;xssAttack()'>AAA</a>"]`;
      // diagram += '//via.placeholder.com/64\' width=64 />"]';
--- a/cypress/platform/xss3.html
+++ b/cypress/platform/xss3.html
@ -42,9 +42,9 @@
        startOnLoad: true,
        useMaxWidth: true,
      });
-      var cnt = 0;
-      var a;
-      var handler = setInterval(() => {
+      let cnt = 0;
+      let a;
+      const handler = setInterval(() => {
        cnt++;
        a = {};
        if (typeof a.polluted !== 'undefined') {
--- a/cypress/platform/xss4.html
+++ b/cypress/platform/xss4.html
@ -85,7 +85,7 @@
        alert('It worked');
      }

-      var diagram = '%%{init: {"flowchart": {"htmlLabels": "true"}} }%%\n';
+      let diagram = '%%{init: {"flowchart": {"htmlLabels": "true"}} }%%\n';
      diagram += 'flowchart\n';
      diagram += 'A["<ifra';
      diagram += "me srcdoc='<scrip";
--- a/cypress/platform/xss5.html
+++ b/cypress/platform/xss5.html
@ -92,7 +92,7 @@
        document.getElementsByTagName('body')[0].appendChild(div);
        throw new Error('XSS Succeeded');
      }
-      var diagram = 'graph LR\n';
+      let diagram = 'graph LR\n';
      diagram += 'B-->D("<img onerror=location=`java';
      // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
      diagram += 'script\x3a;xssAttack\u0028\u0029` src=x>");\n';
--- a/cypress/platform/xss6.html
+++ b/cypress/platform/xss6.html
@ -92,7 +92,7 @@
        document.getElementsByTagName('body')[0].appendChild(div);
        throw new Error('XSS Succeeded');
      }
-      var diagram = 'graph LR\n';
+      let diagram = 'graph LR\n';
      diagram += 'A(<img/src/onerror=xssAttack`1`>)';
      // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
      console.log(diagram);
--- a/cypress/platform/xss7.html
+++ b/cypress/platform/xss7.html
@ -92,7 +92,7 @@
        document.getElementsByTagName('body')[0].appendChild(div);
        throw new Error('XSS Succeeded');
      }
-      var diagram = 'graph LR\n';
+      let diagram = 'graph LR\n';
      diagram += " B(<a href='<";
      diagram += 'script></';
      diagram += "script>Javascript:xssAttack`1`'>Click)";
--- a/cypress/platform/xss8.html
+++ b/cypress/platform/xss8.html
@ -93,7 +93,7 @@
        throw new Error('XSS Succeeded');
      }

-      var diagram = 'stateDiagram-v2\n';
+      let diagram = 'stateDiagram-v2\n';
      diagram += "<img/src='1'/onerror=xssAttack()> --> B";
      // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
      console.log(diagram);
--- a/cypress/platform/xss9.html
+++ b/cypress/platform/xss9.html
@ -93,7 +93,7 @@
        throw new Error('XSS Succeeded');
      }

-      var diagram = 'stateDiagram-v2\n';
+      let diagram = 'stateDiagram-v2\n';
      diagram += "<img/src='1'/onerror=xssAttack()> --> B";
      // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
      console.log(diagram);
--- a/demos/c4context.html
+++ b/demos/c4context.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@ -14,6 +14,7 @@
  </head>

  <body>
+    <h1>C4 context diagram demos</h1>
    <pre class="mermaid">
    C4Context
      accTitle: C4 context demo
@ -62,6 +63,7 @@
      
      UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
    </pre>
+    <hr />

    <pre class="mermaid">
    C4Container
@ -101,6 +103,7 @@
    Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
    UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140")
    </pre>
+    <hr />

    <pre class="mermaid">
    C4Component
@ -140,6 +143,7 @@
        UpdateRelStyle(security, db, $offsetY="-40")
        UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")
    </pre>
+    <hr />

    <pre class="mermaid">
    C4Dynamic
@ -159,6 +163,7 @@
    UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60")
    UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10")
    </pre>
+    <hr />

    <pre class="mermaid">
    C4Deployment
@ -210,7 +215,6 @@
    UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20")
    UpdateRelStyle(db, db2, $offsetY="-10")
     </pre>
-
    <hr />

    <script src="./mermaid.js"></script>
@ -273,7 +277,7 @@
    <script>
      function testClick(nodeId) {
        console.log('clicked', nodeId);
-        var originalBgColor = document.querySelector('body').style.backgroundColor;
+        let originalBgColor = document.querySelector('body').style.backgroundColor;
        document.querySelector('body').style.backgroundColor = 'yellow';
        setTimeout(function () {
          document.querySelector('body').style.backgroundColor = originalBgColor;
--- a/demos/classchart.html
+++ b/demos/classchart.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@ -14,6 +14,8 @@
  </head>

  <body>
+    <h1>Class diagram demos</h1>
+
    <pre class="mermaid">
 		classDiagram
      accTitle: Demo Class Diagram
@ -42,8 +44,8 @@
      }

    </pre>
-
    <hr />
+
    <pre class="mermaid">
    classDiagram
    Class01 <|-- AveryLongClass : Cool
@ -68,6 +70,7 @@
      }
    </pre>
    <hr />
+
    <pre class="mermaid">
    classDiagram
    class Class01~T~
@ -81,6 +84,7 @@
    }
    </pre>
    <hr />
+
    <pre class="mermaid">
    classDiagram
    Class01~T~ <|-- AveryLongClass : Cool
@ -104,11 +108,13 @@
        }
    </pre>
    <hr />
+
    <pre class="mermaid">
    classDiagram
    Interface1 ()-- Interface1Impl
    </pre>
    <hr />
+
    <pre class="mermaid">
    classDiagram
    direction LR
@ -117,6 +123,7 @@
    Dog : species()
    </pre>
    <hr />
+
    <pre class="mermaid">
    classDiagram
    direction RL
--- a/demos/dataflowchart.html
+++ b/demos/dataflowchart.html
@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>Mermaid Quick Test Page</title>
+    <title>Data Flow Mermaid Quick Test Page</title>
    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
    <style>
      div.mermaid {
@ -13,7 +13,7 @@
    </style>
  </head>
  <body>
-    <h2>Data Flow Diagram Example</h2>
+    <h1>Data Flow Diagram demos</h1>
    <pre class="mermaid">
    flowchart LR
      accTitle: A simple linear flowchart.
@ -21,6 +21,8 @@
      DataStore[|borders:tb|Database] -->|input| Process((System)) -->|output| Entity[Customer];
    </pre>

+    <hr />
+
    <h2>Borders Example</h2>
    <pre class="mermaid">
    flowchart TD
@ -44,7 +46,7 @@
    <script>
      function testClick(nodeId) {
        console.log('clicked', nodeId);
-        var originalBgColor = document.querySelector('body').style.backgroundColor;
+        let originalBgColor = document.querySelector('body').style.backgroundColor;
        document.querySelector('body').style.backgroundColor = 'yellow';
        setTimeout(function () {
          document.querySelector('body').style.backgroundColor = originalBgColor;
--- a/demos/er.html
+++ b/demos/er.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@ -10,6 +10,10 @@
        /* font-family: 'trebuchet ms', verdana, arial; */
        font-family: 'Courier New', Courier, monospace !important;
      }
+      .diagram-title {
+        fill: red;
+        font-size: 24pt;
+      }
    </style>
  </head>

@ -51,8 +55,8 @@ erDiagram
      }
    </pre>

+    <script src="./mermaid.js"></script>
    <script type="module">
-      import mermaid from '../src/mermaid';
      mermaid.initialize({
        theme: 'default',

--- a/demos/flowchart.html
+++ b/demos/flowchart.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@ -15,7 +15,6 @@
  <body>
    <h1>Comparison "graph vs. flowchart"</h1>
    <h2>Sample 1</h2>
-
    <h3>graph</h3>
    <pre class="mermaid">
    graph LR
@ -117,6 +116,7 @@
    sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
    sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
    </pre>
+    <hr />

    <h3>flowchart</h3>
    <pre class="mermaid">
@ -216,10 +216,9 @@
    sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
    sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
    </pre>
-
    <hr />
+
    <h2>Sample 2</h2>
-
    <h3>graph</h3>
    <pre class="mermaid">
    graph TD
@ -231,6 +230,7 @@
      C -->|Two| E[iPhone]
      C -->|Three| F[Car]
  </pre>
+    <hr />

    <h3>flowchart</h3>
    <pre class="mermaid">
@ -243,10 +243,9 @@
      C -->|Two| E[iPhone]
      C -->|Three| F[Car]
  </pre>
-
    <hr />
+
    <h2>Sample 3</h2>
-
    <h3>graph</h3>
    <pre class="mermaid">
    graph TD
@ -257,6 +256,7 @@
    C -->|Two| E[\iPhone\]
    C -->|Three| F[Car]
  </pre>
+    <hr />

    <h3>flowchart</h3>
    <pre class="mermaid">
@ -268,10 +268,9 @@
    C -->|Two| E[\iPhone\]
    C -->|Three| F[Car]
  </pre>
-
    <hr />
+
    <h2>Sample 4</h2>
-
    <h3>graph</h3>
    <pre class="mermaid">
    graph LR
@ -296,6 +295,7 @@
    35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
    36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
    </pre>
+    <hr />

    <h3>flowchart</h3>
    <pre class="mermaid">
@ -321,10 +321,9 @@
    35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
    36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
    </pre>
-
    <hr />
+
    <h2>Sample 5</h2>
-
    <h3>graph</h3>
    <pre class="mermaid">
    graph TD
@ -391,6 +390,7 @@
    9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
    9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
    </pre>
+    <hr />

    <h3>flowchart</h3>
    <pre class="mermaid">
@ -458,10 +458,9 @@
    9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
    9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
    </pre>
-
    <hr />
+
    <h2>Sample 6</h2>
-
    <h3>graph</h3>
    <pre class="mermaid">
    graph TB
@ -469,6 +468,7 @@
      a1-->a2
    end
    </pre>
+    <hr />

    <h3>flowchart</h3>
    <pre class="mermaid">
@ -477,10 +477,9 @@
      a1-->a2
    end
    </pre>
-
    <hr />
+
    <h2>Sample 7</h2>
-
    <h3>graph</h3>
    <pre class="mermaid">
    graph TB
@ -511,6 +510,7 @@
    style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
    style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
    </pre>
+    <hr />

    <h3>flowchart</h3>
    <pre class="mermaid">
@ -542,10 +542,9 @@
    style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
    style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
    </pre>
-
    <hr />
+
    <h2>Sample 8</h2>
-
    <h3>graph</h3>
    <pre class="mermaid">
    graph LR
@ -562,6 +561,7 @@
    3000"
    style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
    </pre>
+    <hr />

    <h3>flowchart</h3>
    <pre class="mermaid">
@ -579,10 +579,9 @@
    3000"
    style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
    </pre>
-
    <hr />
+
    <h2>Sample 9</h2>
-
    <h3>graph</h3>
    <pre class="mermaid">
    graph TD
@ -597,6 +596,7 @@
    class A someclass;
    class C someclass;
  </pre>
+    <hr />

    <h3>flowchart</h3>
    <pre class="mermaid">
@ -612,10 +612,9 @@
    class A someclass;
    class C someclass;
  </pre>
-
    <hr />
+
    <h2>Sample 10</h2>
-
    <h3>graph</h3>
    <pre class="mermaid">
    graph TD
@ -631,6 +630,7 @@
    class A someclass;
    class C someclass;
  </pre>
+    <hr />

    <h3>flowchart</h3>
    <pre class="mermaid">
@ -647,10 +647,9 @@
    class A someclass;
    class C someclass;
  </pre>
-
    <hr />
+
    <h2>Sample 11</h2>
-
    <h3>graph</h3>
    <pre class="mermaid">
    graph LR
@ -666,6 +665,7 @@
    class A someclass;
    class C someclass;
  </pre>
+    <hr />

    <h3>flowchart</h3>
    <pre class="mermaid">
@ -682,10 +682,9 @@
    class A someclass;
    class C someclass;
  </pre>
-
    <hr />
+
    <h2>Sample 12</h2>
-
    <h3>graph</h3>
    <pre class="mermaid">
    graph LR
@ -705,6 +704,7 @@
    classDef someclass fill:#f96;
    class A someclass;
  </pre>
+    <hr />

    <h3>flowchart</h3>
    <pre class="mermaid">
@ -725,10 +725,9 @@
    classDef someclass fill:#f96;
    class A someclass;
  </pre>
-
    <hr />
+
    <h2>Sample 13</h2>
-
    <h3>graph</h3>
    <pre class="mermaid">
    graph LR
@ -742,6 +741,7 @@
    linkStyle 1 stroke:DarkGray,stroke-width:2px
    linkStyle 2 stroke:DarkGray,stroke-width:2px
  </pre>
+    <hr />

    <h3>flowchart</h3>
    <pre class="mermaid">
@ -756,10 +756,9 @@
    linkStyle 1 stroke:DarkGray,stroke-width:2px
    linkStyle 2 stroke:DarkGray,stroke-width:2px
  </pre>
-
    <hr />
+
    <h2>Sample 14</h2>
-
    <h3>graph</h3>
    <pre class="mermaid">
    graph LR
@ -769,6 +768,7 @@
    linkStyle 1 stroke:greenyellow,stroke-width:2px
    style C fill:greenyellow,stroke:green,stroke-width:4px
    </pre>
+    <hr />

    <h3>flowchart</h3>
    <pre class="mermaid">
@ -779,10 +779,9 @@
    linkStyle 1 stroke:greenyellow,stroke-width:2px
    style C fill:greenyellow,stroke:green,stroke-width:4px
    </pre>
-
    <hr />
-    <h2>Sample 15</h2>

+    <h2>Sample 15</h2>
    <h3>graph</h3>
    <pre class="mermaid">
    graph TB
@ -801,6 +800,7 @@
    click E "notes://do-your-thing/id" "other protocol test"
    click F "javascript:alert('test')" "script test"
  </pre>
+    <hr />

    <h3>flowchart</h3>
    <pre class="mermaid">
@ -820,10 +820,9 @@
    click E "notes://do-your-thing/id" "other protocol test"
    click F "javascript:alert('test')" "script test"
  </pre>
-
    <hr />
-    <h2>Sample 16</h2>

+    <h2>Sample 16</h2>
    <h3>graph</h3>
    <pre class="mermaid">
    graph LR
@ -840,6 +839,7 @@
    click B "flowchart.html#link-clicked" "link test"
    click D testClick "click test"
  </pre>
+    <hr />

    <h3>flowchart</h3>
    <pre class="mermaid">
@ -857,10 +857,9 @@
    click B "flowchart.html#link-clicked" "link test"
    click D testClick "click test"
  </pre>
-
    <hr />
-    <h2>Sample 17</h2>

+    <h2>Sample 17</h2>
    <h3>graph</h3>
    <pre class="mermaid">
    graph TD
@ -873,6 +872,7 @@
    class A myClass1
    class D myClass2
    </pre>
+    <hr />

    <h3>flowchart</h3>
    <pre class="mermaid">
@ -886,10 +886,9 @@
    class A myClass1
    class D myClass2
    </pre>
-
    <hr />
-    <h2>Sample 18</h2>

+    <h2>Sample 18</h2>
    <h3>graph</h3>
    <pre class="mermaid">
    graph LR
@ -937,6 +936,7 @@
    style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
    style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
    </pre>
+    <hr />

    <h3>flowchart</h3>
    <pre class="mermaid">
@ -985,10 +985,9 @@
    style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
    style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
    </pre>
-
    <hr />
-    <h2>Sample 19</h2>

+    <h2>Sample 19</h2>
    <h3>graph</h3>
    <pre class="mermaid">
    graph TB
@ -1036,6 +1035,7 @@
    style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
    style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
    </pre>
+    <hr />

    <h3>flowchart</h3>
    <pre class="mermaid">
@ -1087,7 +1087,6 @@
    style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
    style O2 stroke:#0000ff,fill:#ccccff,color:#0000ff
    </pre>
-
    <hr />

    <hr />
@ -1189,6 +1188,8 @@
    sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
    sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
    </pre>
+    <hr />
+
    <pre class="mermaid">
    graph TD
    A[Christmas] -->|Get money| B(Go shopping)
@ -1197,6 +1198,8 @@
    C -->|Two| E[iPhone]
    C -->|Three| F[Car]
    </pre>
+    <hr />
+
    <pre class="mermaid">
    graph TD
    A[/Christmas\]
@ -1206,6 +1209,8 @@
    C -->|Two| E[\iPhone\]
    C -->|Three| F[Car]
    </pre>
+    <hr />
+
    <pre class="mermaid">
    graph LR
    47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
@ -1229,6 +1234,8 @@
    35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
    36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
    </pre>
+    <hr />
+
    <pre class="mermaid">
    graph TD
    9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment")
@ -1294,12 +1301,16 @@
    9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
    9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
    </pre>
+    <hr />
+
    <pre class="mermaid">
    graph TB
    subgraph One
    a1-->a2
    end
    </pre>
+    <hr />
+
    <pre class="mermaid">
    graph TB
    A
@ -1329,6 +1340,8 @@
    style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
    style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
    </pre>
+    <hr />
+
    <pre class="mermaid">
    graph LR
    456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
@ -1344,6 +1357,8 @@
    3000"
    style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
    </pre>
+    <hr />
+
    <pre class="mermaid">
    graph TD
    A[Christmas] -->|Get money| B(Go shopping)
@ -1357,6 +1372,8 @@
    class A someclass;
    class C someclass;
    </pre>
+    <hr />
+
    <pre class="mermaid">
    graph TD
    A([stadium shape test])
@ -1371,6 +1388,8 @@
    class A someclass;
    class C someclass;
    </pre>
+    <hr />
+
    <pre class="mermaid">
    graph LR
    A[[subroutine shape test]]
@ -1385,6 +1404,8 @@
    class A someclass;
    class C someclass;
    </pre>
+    <hr />
+
    <pre class="mermaid">
    graph LR
    A[(cylindrical<br />shape<br />test)]
@ -1403,6 +1424,8 @@
    classDef someclass fill:#f96;
    class A someclass;
    </pre>
+    <hr />
+
    <pre class="mermaid">
    graph LR
    A1[Multi<br>Line] -->|Multi<br>Line| B1(Multi<br>Line)
@ -1415,6 +1438,8 @@
    linkStyle 1 stroke:DarkGray,stroke-width:2px
    linkStyle 2 stroke:DarkGray,stroke-width:2px
    </pre>
+    <hr />
+
    <pre class="mermaid">
    graph LR
    A(( )) -->|step 1| B(( ))
@ -1423,6 +1448,8 @@
    linkStyle 1 stroke:greenyellow,stroke-width:2px
    style C fill:greenyellow,stroke:green,stroke-width:4px
    </pre>
+    <hr />
+
    <pre class="mermaid">
    graph TB
    TITLE["Link Click Events<br>(click the nodes below)"]
@ -1441,6 +1468,7 @@
    click F "javascript:alert('test')" "script test"
    </pre>
    <hr />
+
    <pre class="mermaid">
    graph LR
    A[red<br>text] -->|red<br>text| B(blue<br>text)
@ -1456,6 +1484,8 @@
    click B "index.html#link-clicked" "link test"
    click D testClick "click test"
    </pre>
+    <hr />
+
    <pre class="mermaid">
    graph TD
    A[myClass1] --> B[default] & C[default]
@ -1467,6 +1497,7 @@
    class A myClass1
    class D myClass2
    </pre>
+    <hr />

    <h1 id="link-clicked">Anchor for "link-clicked" test</h1>

@ -1482,7 +1513,7 @@
    <script>
      function testClick(nodeId) {
        console.log('clicked', nodeId);
-        var originalBgColor = document.querySelector('body').style.backgroundColor;
+        let originalBgColor = document.querySelector('body').style.backgroundColor;
        document.querySelector('body').style.backgroundColor = 'yellow';
        setTimeout(function () {
          document.querySelector('body').style.backgroundColor = originalBgColor;
--- a/demos/gantt.html
+++ b/demos/gantt.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@ -13,6 +13,7 @@
  </head>

  <body>
+    <h1>Gantt chart diagram demos</h1>
    <!-- accDescription Tasks for Q4 -->
    <pre class="mermaid">
      gantt
@ -27,6 +28,7 @@
        Task in sec      :2014-01-12  , 12d
        another task      : 24d
    </pre>
+    <hr />

    <pre class="mermaid">
    gantt
@ -44,6 +46,8 @@
      开发	:a, 2021-10-09, 4d
      测试	:after a, 4d
    </pre>
+    <hr />
+
    <pre class="mermaid">
    gantt
    title Exclusive end dates (Manual date should end on 3d)
@ -53,6 +57,8 @@
    2 Days: 1, 2019-01-01,2d
    Manual Date: 2, 2019-01-01,2019-01-03
    </pre>
+    <hr />
+
    <pre class="mermaid">
    gantt
    title Inclusive end dates (Manual date should end on 4th)
@ -63,6 +69,8 @@
    2 Days: 1, 2019-01-01,2d
    Manual Date: 2, 2019-01-01,2019-01-03
    </pre>
+    <hr />
+
    <pre class="mermaid">
    gantt
    title Hide today marker (vertical line should not be visible)
@ -72,6 +80,8 @@
    section Section1
    Today: 1, -1h
    </pre>
+    <hr />
+
    <pre class="mermaid">
    gantt
    title Style today marker (vertical line should be 5px wide and half-transparent blue)
@ -81,6 +91,7 @@
    section Section1
    Today: 1, -1h
    </pre>
+    <hr />

    <pre class="mermaid">
    gantt
@ -120,6 +131,8 @@
    Add gantt diagram to demo page : 20h
    Add another diagram to demo page : 48h
    </pre>
+    <hr />
+
    <pre class="mermaid">
    gantt
    dateFormat YYYY-MM-DD
@ -151,6 +164,7 @@
    Add gantt diagram to demo page : 20h
    Add another diagram to demo page : 48h
    </pre>
+    <hr />

    <script>
      function ganttTestClick(a, b, c) {
@ -160,13 +174,14 @@
      }
      function testClick(nodeId) {
        console.log('clicked', nodeId);
-        var originalBgColor = document.querySelector('body').style.backgroundColor;
+        let originalBgColor = document.querySelector('body').style.backgroundColor;
        document.querySelector('body').style.backgroundColor = 'yellow';
        setTimeout(function () {
          document.querySelector('body').style.backgroundColor = originalBgColor;
        }, 100);
      }
    </script>
+
    <script src="./mermaid.js"></script>
    <script>
      mermaid.initialize({
--- a/demos/git.html
+++ b/demos/git.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@ -14,6 +14,7 @@
  </head>

  <body>
+    <h1>Git diagram demo</h1>
    <pre class="mermaid">
    gitGraph:
    options
--- a/demos/index.html
+++ b/demos/index.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@ -15,6 +15,13 @@

  <body>
    <h1>Mermaid quick test and demo pages</h1>
+    <p>
+      Some of these pages have duplicates; some are slow to load because they have so many graphs.
+    </p>
+    <p>
+      If you'd like to clean up one of the pages, please feel free to
+      <a href="https://github.com/mermaid-js/mermaid/pulls">submit a pull request (PR).</a>
+    </p>

    <ul>
      <li>
@ -26,6 +33,9 @@
      <li>
        <h2><a href="./dataflowchart.html">Data flow charts</a></h2>
      </li>
+      <li>
+        <h2><a href="./er.html">Entity Relation diagram</a></h2>
+      </li>
      <li>
        <h2><a href="./flowchart.html">Flow charts</a></h2>
      </li>
@ -51,93 +61,5 @@
        <h2><a href="./state.html">State</a></h2>
      </li>
    </ul>
-
-    <script src="./mermaid.js"></script>
-    <script>
-      const ALLOWED_TAGS = [
-        'a',
-        'b',
-        'blockquote',
-        'br',
-        'dd',
-        'div',
-        'dl',
-        'dt',
-        'em',
-        'foreignObject',
-        'h1',
-        'h2',
-        'h3',
-        'h4',
-        'h5',
-        'h6',
-        'h7',
-        'h8',
-        'hr',
-        'i',
-        'li',
-        'ul',
-        'ol',
-        'p',
-        'pre',
-        'span',
-        'strike',
-        'strong',
-        'table',
-        'tbody',
-        'td',
-        'tfoot',
-        'th',
-        'thead',
-        'tr',
-      ];
-      mermaid.initialize({
-        theme: 'forest',
-        // themeCSS: '.node rect { fill: red; }',
-        logLevel: 3,
-        securityLevel: 'loose',
-        flowchart: { curve: 'basis' },
-        gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorMargin: 50 },
-        dompurifyConfig: {
-          USE_PROFILES: {
-            svg: true,
-          },
-          ADD_TAGS: ALLOWED_TAGS,
-          ADD_ATTR: ['transform-origin'],
-        },
-        // sequenceDiagram: { actorMargin: 300 } // deprecated
-      });
-    </script>
-    <script>
-      function ganttTestClick(a, b, c) {
-        console.log('a:', a);
-        console.log('b:', b);
-        console.log('c:', c);
-      }
-      function testClick(nodeId) {
-        console.log('clicked', nodeId);
-        var originalBgColor = document.querySelector('body').style.backgroundColor;
-        document.querySelector('body').style.backgroundColor = 'yellow';
-        setTimeout(function () {
-          document.querySelector('body').style.backgroundColor = originalBgColor;
-        }, 100);
-      }
-    </script>
-    <script>
-      const testLineEndings = (test, input) => {
-        try {
-          mermaid.render(test, input, () => {
-            //no-op
-          });
-        } catch (err) {
-          console.error('Error in %s:\n\n%s', test, err);
-        }
-      };
-
-      testLineEndings('CR', 'graph LR\rsubgraph CR\rA --> B\rend');
-      testLineEndings('LF', 'graph LR\nsubgraph LF\nA --> B\nend');
-      testLineEndings('CRLF', 'graph LR\r\nsubgraph CRLF\r\nA --> B\r\nend');
-    </script>
  </body>
 </html>
--- a/demos/journey.html
+++ b/demos/journey.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@ -14,6 +14,7 @@
  </head>

  <body>
+    <h1>Journey diagram demo</h1>
    <pre class="mermaid">
         journey
    title My working day
--- a/demos/pie.html
+++ b/demos/pie.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@ -14,6 +14,7 @@
  </head>

  <body>
+    <h1>Pie chart demos</h1>
    <pre class="mermaid">
      pie title Pets adopted by volunteers
      accTitle: simple pie char demo
@ -23,6 +24,7 @@
    "Rats" : 15
    </pre>

+    <hr />
    <pre class="mermaid">
    pie
      title Key elements in Product X
@ -35,7 +37,7 @@
    </pre>

    <script type="module">
-      import mermaid from '../src/mermaid';
+      import mermaid from '../packages/mermaid';
      mermaid.initialize({
        theme: 'forest',
        // themeCSS: '.node rect { fill: red; }',
--- a/demos/requirements.html
+++ b/demos/requirements.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@ -14,6 +14,7 @@
  </head>

  <body>
+    <h1>Requirement diagram demos</h1>
    <pre class="mermaid">
 	requirementDiagram
 	  accTitle: Requirments demo in black and white
--- a/demos/sequence.html
+++ b/demos/sequence.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@ -14,6 +14,7 @@
  </head>

  <body>
+    <h1>Sequence diagram demos</h1>
    <pre class="mermaid">
 		sequenceDiagram
 			accTitle: test the accTitle
@ -59,7 +60,7 @@
 			Alice -->> John: Parallel message 2
 			end
 	</pre>
-
+    <hr />
    <pre class="mermaid">
    sequenceDiagram
      accTitle: Sequence diagram title is here
@ -96,6 +97,8 @@
    Alice -->> John: Parallel message 2
    end
    </pre>
+    <hr />
+
    <pre class="mermaid">
    sequenceDiagram
    participant 1 as multiline<br>using #lt;br#gt;
@ -111,6 +114,8 @@
    4->>1: multiline<br />using #lt;br /#gt;
    note right of 1: multiline<br />using #lt;br /#gt;
    </pre>
+    <hr />
+
    <pre class="mermaid">
    sequenceDiagram
    autonumber
@ -121,6 +126,7 @@
    autonumber off
    John-->>Alice: I feel great!
    </pre>
+    <hr />

    <script src="./mermaid.js"></script>
    <script>
--- a/demos/state.html
+++ b/demos/state.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@ -14,6 +14,7 @@
  </head>

  <body>
+    <h1>State diagram demos</h1>
    <pre class="mermaid">
 		stateDiagram
 		  accTitle: This is the accessible title
--- a/docs/README.md
+++ b/docs/README.md
@ -347,7 +347,7 @@ Update version number in `package.json`.
 npm publish
 ```

-The above command generates files into the `dist` folder and publishes them to npmjs.org.
+The above command generates files into the `dist` folder and publishes them to \<npmjs.org>.

 ## Related projects

@ -363,7 +363,7 @@ Detailed information about how to contribute can be found in the [contribution g

 ## Security and safe diagrams

-For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitise the incoming code and keep refining the process but it is hard to guarantee that there are no loop holes.
+For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitize the incoming code and keep refining the process but it is hard to guarantee that there are no loop holes.

 As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing JavaScript in the code from being executed. This is a great step forward for better security.

--- a/docs/Setup.md
+++ b/docs/Setup.md
@ -74,15 +74,15 @@ Theme , the CSS style sheet

 | Parameter     | Description                       | Type   | Required | Values                                     |
 | ------------- | --------------------------------- | ------ | -------- | ------------------------------------------ |
-| securityLevel | Level of trust for parsed diagram | string | Required | 'sandbox', 'strict', 'loose', 'antiscript' |
+| securityLevel | Level of trust for parsed diagram | string | Required | `sandbox`, `strict`, `loose`, `antiscript` |

 **Notes**:

- **strict**: (**default**) tags in text are encoded, click functionality is disabled
- **loose**: tags in text are allowed, click functionality is enabled
- **antiscript**: html tags in text are allowed, (only script element is removed), click
+- **`strict`**: (**default**) tags in text are encoded, click functionality is disabled
+- **`loose`**: tags in text are allowed, click functionality is enabled
+- **`antiscript`**: html tags in text are allowed, (only script element is removed), click
  functionality is enabled
- **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This
+- **`sandbox`**: With this security level all rendering takes place in a sandboxed iframe. This
  prevent any JavaScript from running in the context. This may hinder interactive functionality
  of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc.

@ -121,7 +121,7 @@ Default value: \['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']

 This option controls if the generated ids of nodes in the SVG are generated randomly or based
 on a seed. If set to false, the IDs are generated based on the current date and thus are not
-deterministic. This is the default behaviour.
+deterministic. This is the default behavior.

 **Notes**:

@ -213,15 +213,15 @@ Default value: true
 ### defaultRenderer

 | Parameter       | Description | Type    | Required | Values                      |
-| --------------- | ----------- | ------- | -------- | ----------------------- |
-| defaultRenderer | See notes   | boolean | 4        | dagre-d3, dagre-wrapper |
+| --------------- | ----------- | ------- | -------- | --------------------------- |
+| defaultRenderer | See notes   | boolean | 4        | `dagre-d3`, `dagre-wrapper` |

 **Notes:**

 Decides which rendering engine that is to be used for the rendering. Legal values are:
-dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid
+`dagre-d3` `dagre-wrapper` - wrapper for `dagre` implemented in mermaid

-Default value: 'dagre-wrapper'
+Default value: `dagre-wrapper`

 ## sequence

@ -738,15 +738,15 @@ Default value: true
 ## defaultRenderer

 | Parameter       | Description | Type    | Required | Values                      |
-| --------------- | ----------- | ------- | -------- | ----------------------- |
-| defaultRenderer | See notes   | boolean | 4        | dagre-d3, dagre-wrapper |
+| --------------- | ----------- | ------- | -------- | --------------------------- |
+| defaultRenderer | See notes   | boolean | 4        | `dagre-d3`, `dagre-wrapper` |

 **Notes**:

 Decides which rendering engine that is to be used for the rendering. Legal values are:
-dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid
+`dagre-d3` `dagre-wrapper` - wrapper for `dagre` implemented in mermaid

-Default value: 'dagre-d3'
+Default value: `dagre-d3`

 ## useMaxWidth

@ -764,15 +764,15 @@ Default value: true
 ## defaultRenderer

 | Parameter       | Description | Type    | Required | Values                      |
-| --------------- | ----------- | ------- | -------- | ----------------------- |
-| defaultRenderer | See notes   | boolean | 4        | dagre-d3, dagre-wrapper |
+| --------------- | ----------- | ------- | -------- | --------------------------- |
+| defaultRenderer | See notes   | boolean | 4        | `dagre-d3`, `dagre-wrapper` |

 **Notes:**

 Decides which rendering engine that is to be used for the rendering. Legal values are:
-dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid
+`dagre-d3` `dagre-wrapper` - wrapper for `dagre` implemented in mermaid

-Default value: 'dagre-d3'
+Default value: `dagre-d3`

 ## er

@ -994,7 +994,7 @@ Default value: 4
 | --------------- | ----------- | ------- | -------- | ------------------ |
 | c4BoundaryInRow | See Notes   | Integer | Required | Any Positive Value |

-**Notes:** How many boundarys to place in each row.
+**Notes:** How many boundaries to place in each row.

 Default value: 2

@ -1561,7 +1561,7 @@ Returns **void**

 ```html
 <script>
-  var config = {
+  const config = {
    theme: 'default',
    logLevel: 'fatal',
    securityLevel: 'strict',
--- a/docs/accessibility.md
+++ b/docs/accessibility.md
@ -19,7 +19,7 @@ The diagram authors can now add the accessibility options in the diagram definit
 - `accTitle: "Your Accessibility Title"` or
 - `accDescr: "Your Accessibility Description"`

-**When these two options are defined, they will add a coressponding `<title>` and `<desc>` tag in the SVG.**
+**When these two options are defined, they will add a corresponding `<title>` and `<desc>` tag in the SVG.**

 Let us take a look at the following example with a flowchart diagram:

--- a/docs/classDiagram.md
+++ b/docs/classDiagram.md
@ -589,7 +589,7 @@ click Shape2 call callbackFunction() "This is a tooltip for a callback"

 ```html
 <script>
-  var callbackFunction = function () {
+  const callbackFunction = function () {
    alert('A callback was triggered');
  };
 </script>
@ -653,10 +653,10 @@ Beginner's tip—a full example using interactive links in an HTML page:
  </pre>

  <script>
-    var callback = function () {
+    const callback = function () {
      alert('A callback was triggered');
    };
-    var config = {
+    const config = {
      startOnLoad: true,
      securityLevel: 'loose',
    };
--- a/docs/diagrams-and-syntax-and-examples/flowchart.md
+++ b/docs/diagrams-and-syntax-and-examples/flowchart.md
@ -649,7 +649,7 @@ A node can have click events bound that lead to either a JavaScript callback or

 ```html
 <script>
-  var callback = function (nodeId) {
+  const callback = function (nodeId) {
    alert('A callback was triggered on ' + nodeId);
  };
 </script>
@ -727,10 +727,10 @@ Beginner's tip—here's a full example of using interactive links in HTML:
  </pre>

  <script>
-    var callback = function () {
+    const callback = function () {
      alert('A callback was triggered');
    };
-    var config = {
+    const config = {
      startOnLoad: true,
      flowchart: {
        useMaxWidth: true,
--- a/docs/flowchart.md
+++ b/docs/flowchart.md
@ -695,7 +695,7 @@ Examples of tooltip usage below:

 ```html
 <script>
-  var callback = function () {
+  const callback = function () {
    alert('A callback was triggered');
  };
 </script>
@ -771,10 +771,10 @@ Beginner's tip—a full example using interactive links in a html context:
  </pre>

  <script>
-    var callback = function () {
+    const callback = function () {
      alert('A callback was triggered');
    };
-    var config = {
+    const config = {
      startOnLoad: true,
      flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
      securityLevel: 'loose',
--- a/docs/gantt.md
+++ b/docs/gantt.md
@ -391,13 +391,13 @@ Beginner's tip—a full example using interactive links in an html context:
  </pre>

  <script>
-    var printArguments = function (arg1, arg2, arg3) {
+    const printArguments = function (arg1, arg2, arg3) {
      alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);
    };
-    var printTask = function (taskId) {
+    const printTask = function (taskId) {
      alert('taskId: ' + taskId);
    };
-    var config = {
+    const config = {
      startOnLoad: true,
      securityLevel: 'loose',
    };
--- a/docs/index.html
+++ b/docs/index.html
@ -29,7 +29,7 @@
      src="https://plausible.io/js/plausible.js"
    ></script>
    <script>
-      let require = {
+      const require = {
        paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs' },
      };
    </script>
@ -60,7 +60,7 @@
        initEditor(monaco);
        return new Promise((resolve, reject) => {
          monaco.editor.setTheme('mermaid');
-          let parsed = parser.parseFromString(html, 'text/html').body;
+          const parsed = parser.parseFromString(html, 'text/html').body;
          Promise.all(
            [...parsed.querySelectorAll('pre[id*="code"]')].map((codeBlock) =>
              monaco.editor.colorize(codeBlock.innerText, 'mermaid')
@ -136,7 +136,6 @@
        ],
      };

-      let num = 0;
      const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

      const conf = {
--- a/docs/integrations.md
+++ b/docs/integrations.md
@ -33,7 +33,7 @@ They also serve as proof of concept, for the variety of things that can be built
  - [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro)
  - [redmine-mermaid](https://github.com/styz/redmine_mermaid)
  - [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
- [Jetsbrain IDE eg Pycharm](https://www.jetbrains.com/go/guide/tips/mermaid-js-support-in-markdown/)
+- [JetBrains IDE eg Pycharm](https://www.jetbrains.com/go/guide/tips/mermaid-js-support-in-markdown/)
 - [mermerd](https://github.com/KarnerTh/mermerd)

 ## CRM/ERP/Similar
--- a/docs/mindmap.md
+++ b/docs/mindmap.md
@ -2,7 +2,7 @@

 # Mindmap

-> Mindmap: This is an experimental diagram for now. The syntax and properties can change in future releases. The syntax is stabel except for the icon integration which is the experimental part.
+> Mindmap: This is an experimental diagram for now. The syntax and properties can change in future releases. The syntax is stable except for the icon integration which is the experimental part.

 "A mind map is a diagram used to visually organize information into a hierarchy, showing relationships among pieces of the whole. It is often created around a single concept, drawn as an image in the center of a blank page, to which associated representations of ideas such as images, words and parts of words are added. Major ideas are connected directly to the central concept, and other ideas branch out from those major ideas." Wikipedia

@ -54,7 +54,7 @@ mindmap

 The syntax for creating Mindmaps is simple and relies on indentation for setting the levels in the hierarchy.

-In the following example you can see how there are 3 dufferent levels. One with starting at the left of the text and another level with two rows starting at the same column, defining the node A. At the end there is one more level where the text is indented further then the prevoius lines defining the nodes B and C.
+In the following example you can see how there are 3 different levels. One with starting at the left of the text and another level with two rows starting at the same column, defining the node A. At the end there is one more level where the text is indented further then the previous lines defining the nodes B and C.

    mindmap
        Root
--- a/docs/n00b-syntaxReference.md
+++ b/docs/n00b-syntaxReference.md
@ -26,6 +26,18 @@ erDiagram
          PRODUCT ||--o{ ORDER-ITEM : "ordered in"
 ```

+```mermaid
+erDiagram
+          CUSTOMER }|..|{ DELIVERY-ADDRESS : has
+          CUSTOMER ||--o{ ORDER : places
+          CUSTOMER ||--o{ INVOICE : "liable for"
+          DELIVERY-ADDRESS ||--o{ ORDER : receives
+          INVOICE ||--|{ ORDER : covers
+          ORDER ||--|{ ORDER-ITEM : includes
+          PRODUCT-CATEGORY ||--|{ PRODUCT : contains
+          PRODUCT ||--o{ ORDER-ITEM : "ordered in"
+```
+
 The [Getting Started](./n00b-gettingStarted.md) section can also provide some practical examples of mermaid syntax.

 ## Diagram Breaking
--- a/docs/usage.md
+++ b/docs/usage.md
@ -208,14 +208,14 @@ The example below show an outline of how this could be used. The example just lo

 <script>
  mermaid.mermaidAPI.initialize({ startOnLoad: false });
-  $(function () {
+  $(async function () {
    // Example of using the API var
    element = document.querySelector('#graphDiv');
-    var insertSvg = function (svgCode, bindFunctions) {
+    const insertSvg = function (svgCode, bindFunctions) {
      element.innerHTML = svgCode;
    };
-    var graphDefinition = 'graph TB\na-->b';
-    var graph = mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
+    const graphDefinition = 'graph TB\na-->b';
+    const graph = await mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
  });
 </script>
 ```
@ -339,7 +339,7 @@ on what kind of integration you use.
 ```html
 <script src="../dist/mermaid.js"></script>
 <script>
-  var config = { startOnLoad: true, flowchart: { useMaxWidth: false, htmlLabels: true } };
+  let config = { startOnLoad: true, flowchart: { useMaxWidth: false, htmlLabels: true } };
  mermaid.initialize(config);
 </script>
 ```
--- a/package.json
+++ b/package.json
@ -7,7 +7,7 @@
  "module": "dist/mermaid.core.mjs",
  "types": "dist/mermaid.d.ts",
  "type": "module",
-  "packageManager": "pnpm@7.12.2",
+  "packageManager": "pnpm@7.13.2",
  "exports": {
    ".": {
      "require": "./dist/mermaid.min.js",
@ -26,12 +26,11 @@
    "git graph"
  ],
  "scripts": {
-    "clean": "rimraf dist",
    "build:vite": "ts-node-esm --transpileOnly --project=.vite/tsconfig.json .vite/build.ts",
    "build:types": "concurrently \"tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly\" \"tsc -p ./packages/mermaid-mindmap/tsconfig.json --emitDeclarationOnly\"",
    "build:watch": "pnpm build:vite --watch",
-    "build": "pnpm clean; concurrently \"pnpm build:vite\" \"pnpm build:types\"",
-    "dev": "concurrently \"pnpm build:vite --watch\" \"ts-node-esm .vite/server\"",
+    "build": "pnpm run -r clean && concurrently \"pnpm build:vite\" \"pnpm build:types\"",
+    "dev": "concurrently \"pnpm build:vite --watch\" \"ts-node-esm .vite/server.ts\"",
    "docs:build": "ts-node-esm --transpileOnly packages/mermaid/src/docs.mts",
    "docs:verify": "pnpm docs:build --verify",
    "todo-postbuild": "documentation build src/mermaidAPI.ts src/config.ts src/defaultConfig.ts --shallow -f md --markdown-toc false > src/docs/Setup.md && prettier --write src/docs/Setup.md",
@ -71,8 +70,8 @@
  },
  "dependencies": {
    "@braintree/sanitize-url": "^6.0.0",
-    "@types/uuid": "^8.3.4",
    "@types/node": "^18.8.1",
+    "@types/uuid": "^8.3.4",
    "d3": "^7.0.0",
    "dagre": "^0.8.5",
    "dagre-d3": "^0.6.4",
@ -107,8 +106,8 @@
    "coveralls": "^3.1.1",
    "cypress": "^10.0.0",
    "cypress-image-snapshot": "^4.0.1",
-    "esbuild": "^0.15.10",
    "documentation": "13.2.0",
+    "esbuild": "^0.15.10",
    "eslint": "^8.24.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-cypress": "^2.12.1",
@ -126,8 +125,8 @@
    "jsdom": "^20.0.1",
    "lint-staged": "^13.0.3",
    "markdown-it": "^13.0.1",
-    "moment": "^2.23.0",
    "path-browserify": "^1.0.1",
+    "pnpm": "^7.13.2",
    "prettier": "^2.7.1",
    "prettier-plugin-jsdoc": "^0.4.2",
    "remark": "^14.0.2",
@ -136,10 +135,10 @@
    "ts-node": "^10.9.1",
    "typescript": "^4.8.4",
    "unist-util-flatmap": "^1.0.0",
+    "vite": "^3.1.4",
    "vitepress": "^1.0.0-alpha.19",
    "vitepress-plugin-mermaid": "^2.0.8",
    "vitepress-plugin-search": "^1.0.4-alpha.11",
-    "vite": "^3.1.4",
    "vitest": "^0.23.4"
  },
  "resolutions": {
--- a/packages/mermaid-example-diagram/package.json
+++ b/packages/mermaid-example-diagram/package.json
@ -29,10 +29,6 @@
    "lint": "eslint --cache --ignore-path .gitignore . && yarn lint:jison && prettier --check .",
    "lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .",
    "lint:jison": "ts-node-esm src/jison/lint.mts",
-    "ci": "vitest run",
-    "test": "yarn lint && vitest run",
-    "test:watch": "vitest --coverage --watch",
-    "todo-prepublishOnly": "yarn build && yarn test",
    "todo-prepare": "concurrently \"husky install ../../.husky\" \"yarn build\"",
    "todo-pre-commit": "lint-staged"
  },
--- a/packages/mermaid-example-diagram/src/exampleDetector.ts
+++ b/packages/mermaid-example-diagram/src/exampleDetector.ts
@ -1,3 +1,6 @@
+// @ts-ignore: TODO Fix ts errors
+export const id = 'example-diagram';
+
 /**
 * Detector function that will be called by mermaid to determine if the diagram is this type of digram.
 *
@ -8,3 +11,8 @@
 export const detector = (txt: string) => {
  return txt.match(/^\s*example-diagram/) !== null;
 };
+
+export const loadDiagram = async () => {
+  const { diagram } = await import('./diagram-definition');
+  return { id, diagram };
+};
--- a/packages/mermaid-example-diagram/src/diagram-definition.ts
+++ b/packages/mermaid-example-diagram/src/diagram-definition.ts
@ -5,13 +5,10 @@ import renderer from './exampleDiagramRenderer';
 import styles from './styles';
 import { injectUtils } from './mermaidUtils';

-window.mermaid.connectDiagram(
-  'example-diagram',
-  {
+export const diagram = {
  db,
  renderer,
  parser,
  styles,
-  },
-  injectUtils
-);
+  injectUtils,
+};
--- a/packages/mermaid-example-diagram/src/registry.ts
+++ b/packages/mermaid-example-diagram/src/registry.ts
@ -1,33 +0,0 @@
-// @ts-ignore: TODO Fix ts errors
-import { detector } from './exampleDetector';
-
-const scriptElement = document.currentScript as HTMLScriptElement;
-const path = scriptElement.src;
-const lastSlash = path.lastIndexOf('/');
-const baseFolder = lastSlash < 0 ? path : path.substring(0, lastSlash + 1);
-
-if (typeof document !== 'undefined') {
-  if (window.mermaid && typeof window.mermaid.detectors === 'object') {
-    window.mermaid.detectors.push({ id: 'example-diagram', detector });
-  } else {
-    window.mermaid = {};
-    window.mermaid.detectors = [{ id: 'example-diagram', detector }];
-  }
-
-  /*
-   * Wait for document loaded before starting the execution.
-   */
-  window.addEventListener(
-    'load',
-    () => {
-      if (window.mermaid && typeof window.mermaid.detectors === 'object') {
-        window.mermaid.detectors.push({
-          id: 'example-diagram',
-          detector,
-          path: baseFolder,
-        });
-      }
-    },
-    false
-  );
-}
--- a/packages/mermaid-mindmap/package.json
+++ b/packages/mermaid-mindmap/package.json
@ -29,10 +29,6 @@
    "lint": "eslint --cache --ignore-path .gitignore . && yarn lint:jison && prettier --check .",
    "lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .",
    "lint:jison": "ts-node-esm src/jison/lint.mts",
-    "ci": "vitest run",
-    "test": "yarn lint && vitest run",
-    "test:watch": "vitest --coverage --watch",
-    "todo-prepublishOnly": "yarn build && yarn test",
    "todo-prepare": "concurrently \"husky install ../../.husky\" \"yarn build\"",
    "todo-pre-commit": "lint-staged"
  },
--- a/packages/mermaid-mindmap/src/detector.ts
+++ b/packages/mermaid-mindmap/src/detector.ts
@ -0,0 +1,10 @@
+export const id = 'mindmap';
+
+export const detector = (txt: string) => {
+  return txt.match(/^\s*mindmap/) !== null;
+};
+
+export const loadDiagram = async () => {
+  const { diagram } = await import('./diagram-definition');
+  return { id, diagram };
+};
--- a/packages/mermaid-mindmap/src/diagram-definition.ts
+++ b/packages/mermaid-mindmap/src/diagram-definition.ts
@ -5,13 +5,10 @@ import mindmapRenderer from './mindmapRenderer';
 import mindmapStyles from './styles';
 import { injectUtils } from './mermaidUtils';

-window.mermaid.connectDiagram(
-  'mindmap',
-  {
+export const diagram = {
  db: mindmapDb,
  renderer: mindmapRenderer,
  parser: mindmapParser,
  styles: mindmapStyles,
-  },
-  injectUtils
-);
+  injectUtils,
+};
--- a/packages/mermaid-mindmap/src/mermaidUtils.ts
+++ b/packages/mermaid-mindmap/src/mermaidUtils.ts
@ -53,29 +53,3 @@ export const injectUtils = (
  sanitizeText = _sanitizeText;
  setupGraphViewbox = _setupGraphViewbox;
 };
-
-/*
-const warning = (..._args: any[]) => {
-  console.error('Log function was called before initialization');
-};
-
-export let log = {
-  trace: warning,
-  debug: warning,
-  info: warning,
-  warn: warning,
-  error: warning,
-  fatal: warning,
-};
-export let setLogLevel;
-export let getConfig;
-export let sanitizeText;
-export let setupGraphViewbox;
-export const injectUtils = (_log, _setLogLevel, _getConfig, _sanitizeText, _setupGraphViewbox) => {
-  log = _log;
-  setLogLevel = _setLogLevel;
-  getConfig = _getConfig;
-  sanitizeText = _sanitizeText;
-  setupGraphViewbox = _setupGraphViewbox;
-};
-*/
--- a/packages/mermaid-mindmap/src/mindmapDetector.ts
+++ b/packages/mermaid-mindmap/src/mindmapDetector.ts
@ -1,3 +0,0 @@
-export const mindmapDetector = (txt: string) => {
-  return txt.match(/^\s*mindmap/) !== null;
-};
--- a/packages/mermaid-mindmap/src/registry.ts
+++ b/packages/mermaid-mindmap/src/registry.ts
@ -1,34 +0,0 @@
-// @ts-ignore: TODO Fix ts errors
-import { mindmapDetector } from './mindmapDetector';
-
-const scriptElement = document.currentScript as HTMLScriptElement;
-const path = scriptElement.src;
-const lastSlash = path.lastIndexOf('/');
-const baseFolder = lastSlash < 0 ? path : path.substring(0, lastSlash + 1);
-
-if (typeof document !== 'undefined') {
-  if (window.mermaid && typeof window.mermaid.detectors === 'object') {
-    window.mermaid.detectors.push({ id: 'mindmap', detector: mindmapDetector });
-  } else {
-    window.mermaid = {};
-    window.mermaid.detectors = [{ id: 'mindmap', detector: mindmapDetector }];
-  }
-
-  /*!
-   * Wait for document loaded before starting the execution.
-   */
-  window.addEventListener(
-    'load',
-    () => {
-      if (window.mermaid && typeof window.mermaid.detectors === 'object') {
-        window.mermaid.detectors.push({
-          id: 'mindmap',
-          detector: mindmapDetector,
-          path: baseFolder,
-        });
-        console.error(window.mermaid.detectors); // eslint-disable-line no-console
-      }
-    },
-    false
-  );
-}
--- a/packages/mermaid-mindmap/tsconfig.json
+++ b/packages/mermaid-mindmap/tsconfig.json
@ -1,5 +1,6 @@
 {
  "extends": "../../tsconfig.json",
+  "module": "esnext",
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist"
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@ -41,10 +41,6 @@
    "cypress": "cypress run",
    "cypress:open": "cypress open",
    "e2e": "start-server-and-test dev http://localhost:9000/ cypress",
-    "ci": "vitest run",
-    "test": "yarn lint && vitest run",
-    "test:watch": "vitest --coverage --watch",
-    "prepublishOnly": "yarn build && yarn test",
    "todo-prepare": "concurrently \"husky install\" \"yarn build\"",
    "pre-commit": "lint-staged"
  },
@ -92,8 +88,6 @@
    "@types/stylis": "^4.0.2",
    "@typescript-eslint/eslint-plugin": "^5.37.0",
    "@typescript-eslint/parser": "^5.37.0",
-    "@vitest/coverage-c8": "^0.23.2",
-    "@vitest/ui": "^0.23.2",
    "concurrently": "^7.4.0",
    "coveralls": "^3.1.1",
    "cypress": "^10.0.0",
@ -125,8 +119,7 @@
    "start-server-and-test": "^1.12.6",
    "ts-node": "^10.9.1",
    "typescript": "^4.8.3",
-    "unist-util-flatmap": "^1.0.0",
-    "vitest": "^0.23.1"
+    "unist-util-flatmap": "^1.0.0"
  },
  "resolutions": {
    "d3": "^7.0.0"
--- a/packages/mermaid/src/Diagram.ts
+++ b/packages/mermaid/src/Diagram.ts
@ -1,7 +1,7 @@
 import * as configApi from './config';
 import { log } from './logger';
-import { getDiagram, loadDiagram } from './diagram-api/diagramAPI';
-import { detectType, getPathForDiagram } from './diagram-api/detectType';
+import { getDiagram, registerDiagram } from './diagram-api/diagramAPI';
+import { detectType, getDiagramLoader } from './diagram-api/detectType';
 import { isDetailedError } from './utils';
 export class Diagram {
  type = 'graph';
@ -75,10 +75,25 @@ export const getDiagramFromText = async (txt: string, parseError?: Function) =>
    // Trying to find the diagram
    getDiagram(type);
  } catch (error) {
+    const loader = getDiagramLoader(type);
+    if (!loader) {
+      throw new Error(`Diagram ${type} not found.`);
+    }
    // Diagram not avaiable, loading it
-    const path = getPathForDiagram(type);
+    // const path = getPathForDiagram(type);
+    const { diagram } = await loader(); // eslint-disable-line @typescript-eslint/no-explicit-any
+    registerDiagram(
+      type,
+      {
+        db: diagram.db,
+        renderer: diagram.renderer,
+        parser: diagram.parser,
+        styles: diagram.styles,
+      },
+      diagram.injectUtils
+    );
    // await loadDiagram('./packages/mermaid-mindmap/dist/mermaid-mindmap.js');
-    await loadDiagram(path + 'mermaid-' + type + '.js');
+    // await loadDiagram(path + 'mermaid-' + type + '.js');
    // new diagram will try getDiagram again and if fails then it is a valid throw
  }
  // If either of the above worked, we have the diagram
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@ -3,6 +3,7 @@
 import DOMPurify from 'dompurify';

 export interface MermaidConfig {
+  lazyLoadedDiagrams?: any;
  theme?: string;
  themeVariables?: any;
  themeCSS?: string;
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@ -115,7 +115,7 @@ const config: Partial<MermaidConfig> = {
   * Default value: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
   */
  secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
-
+  lazyLoadedDiagrams: [],
  /**
   * This option controls if the generated ids of nodes in the SVG are generated randomly or based
   * on a seed. If set to false, the IDs are generated based on the current date and thus are not
--- a/packages/mermaid/src/diagram-api/detectType.ts
+++ b/packages/mermaid/src/diagram-api/detectType.ts
@ -1,8 +1,8 @@
 import { MermaidConfig } from '../config.type';

 export type DiagramDetector = (text: string, config?: MermaidConfig) => boolean;
-export type DetectorRecord = { detector: DiagramDetector; path: string };
-
+export type DiagramLoader = (() => any) | null;
+export type DetectorRecord = { detector: DiagramDetector; loader: DiagramLoader };
 const directive =
  /[%]{2}[{]\s*(?:(?:(\w+)\s*:|(\w+))\s*(?:(?:(\w+))|((?:(?![}][%]{2}).|\r?\n)*))?\s*)(?:[}][%]{2})?/gi;
 const anyComment = /\s*%%.*\n/gm;
@ -37,8 +37,9 @@ export const detectType = function (text: string, config?: MermaidConfig): strin

  // console.log(detectors);

-  for (const [key, detectorRecord] of Object.entries(detectors)) {
-    if (detectorRecord.detector(text, config)) {
+  for (const [key, { detector }] of Object.entries(detectors)) {
+    const diagram = detector(text, config);
+    if (diagram) {
      return key;
    }
  }
@ -47,13 +48,12 @@ export const detectType = function (text: string, config?: MermaidConfig): strin
  return 'flowchart';
 };

-export const addDetector = (key: string, detector: DiagramDetector, path: string) => {
-  detectors[key] = { detector, path };
+export const addDetector = (
+  key: string,
+  detector: DiagramDetector,
+  loader: DiagramLoader | null
+) => {
+  detectors[key] = { detector, loader };
 };

-export const getPathForDiagram = (id: string) => {
-  const detectorRecord = detectors[id];
-  if (detectorRecord) {
-    return detectorRecord.path;
-  }
-};
+export const getDiagramLoader = (key: string) => detectors[key].loader;
--- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts
+++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
@ -112,7 +112,7 @@ const registerDiagramAndDetector = (
  detector: DiagramDetector
 ) => {
  registerDiagram(id, diagram);
-  registerDetector(id, detector, '');
+  registerDetector(id, detector);
 };

 export const addDiagrams = () => {
--- a/packages/mermaid/src/diagram-api/diagramAPI.spec.ts
+++ b/packages/mermaid/src/diagram-api/diagramAPI.spec.ts
@ -19,17 +19,13 @@ describe('DiagramAPI', () => {
    const detector: DiagramDetector = (str: string) => {
      return str.match('loki') !== null;
    };
-    registerDetector('loki', detector, '');
-    registerDiagram(
-      'loki',
-      {
+    registerDetector('loki', detector);
+    registerDiagram('loki', {
      db: {},
      parser: {},
      renderer: {},
      styles: {},
-      },
-      (text: string) => text.includes('loki')
-    );
+    });
    expect(getDiagram('loki')).not.toBeNull();
    expect(detectType('loki diagram')).toBe('loki');
  });
--- a/packages/mermaid/src/diagram-api/diagramAPI.ts
+++ b/packages/mermaid/src/diagram-api/diagramAPI.ts
@ -18,12 +18,21 @@ export const getConfig = _getConfig;
 export const sanitizeText = (text: string) => _sanitizeText(text, getConfig());
 export const setupGraphViewbox = _setupGraphViewbox;

+export interface InjectUtils {
+  _log: any;
+  _setLogLevel: any;
+  _getConfig: any;
+  _sanitizeText: any;
+  _setupGraphViewbox: any;
+}
+
 export interface DiagramDefinition {
  db: any;
  renderer: any;
  parser: any;
  styles: any;
  init?: (config: MermaidConfig) => void;
+  injectUtils?: (utils: InjectUtils) => void;
 }

 const diagrams: Record<string, DiagramDefinition> = {};
@ -32,8 +41,8 @@ export interface Detectors {
  [key: string]: DiagramDetector;
 }

-export const registerDetector = (id: string, detector: DiagramDetector, path: string) => {
-  addDetector(id, detector, path);
+export const registerDetector = (id: string, detector: DiagramDetector) => {
+  addDetector(id, detector, null);
 };

 export const registerDiagram = (
@ -52,7 +61,9 @@ export const registerDiagram = (
  }
  diagrams[id] = diagram;
  addStylesForDiagram(id, diagram.styles);
-  connectCallbacks[id] = callback;
+  if (typeof callback !== 'undefined') {
+    callback(log, setLogLevel, getConfig, sanitizeText, setupGraphViewbox);
+  }
 };

 export const getDiagram = (name: string): DiagramDefinition => {
--- a/packages/mermaid/src/diagrams/class/svgDraw.js
+++ b/packages/mermaid/src/diagrams/class/svgDraw.js
@ -347,9 +347,10 @@ const buildMethodDisplay = function (parsedText) {
 };

 const buildLegacyDisplay = function (text) {
-  // if for some reason we don't have any match, use old format to parse text
+  // if for some reason we dont 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(')');
@ -370,29 +371,28 @@ const buildLegacyDisplay = function (text) {
    }

    const parameters = text.substring(methodStart + 1, methodEnd);
-    const classifier = text.substring(methodEnd + 1, methodEnd + 2);
-    cssStyle = parseClassifier(classifier);
+    const classifier = text.substring(methodEnd + 1, 1);
+    cssStyle = parseClassifier(text.substring(methodEnd + 1, methodEnd + 2));

    displayText = visibility + methodName + '(' + parseGenericTypes(parameters.trim()) + ')';

-    if (methodEnd <= text.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);
  }
-  }

  return {
    displayText,
    cssStyle,
  };
 };
-
 /**
 * Adds a <tspan> for a member in a diagram
 *
--- a/packages/mermaid/src/diagrams/gantt/ganttDb.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttDb.js
@ -217,10 +217,12 @@ const getStartDate = function (prevTime, dateFormat, str) {
  } else {
    log.debug('Invalid date:' + str);
    log.debug('With date format:' + dateFormat.trim());
+    const d = new Date(str);
+    if (typeof d === 'undefined' || isNaN(d.getTime())) {
+      throw new Error('Invalid date:' + str);
+    }
+    return d;
  }
-
-  // Default date - now
-  return new Date();
 };

 /**
--- a/packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts
+++ b/packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts
@ -1,7 +1,6 @@
 // @ts-nocheck TODO: Fix TS
 import moment from 'moment-mini';
 import ganttDb from './ganttDb';
-import { it, describe } from 'vitest';
 import { convert } from '../../tests/util';

 describe('when using the ganttDb', function () {
--- a/packages/mermaid/src/docs/README.md
+++ b/packages/mermaid/src/docs/README.md
@ -263,7 +263,7 @@ Update version number in `package.json`.
 npm publish
 ```

-The above command generates files into the `dist` folder and publishes them to npmjs.org.
+The above command generates files into the `dist` folder and publishes them to <npmjs.org>.

 ## Related projects

@ -279,7 +279,7 @@ Detailed information about how to contribute can be found in the [contribution g

 ## Security and safe diagrams

-For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitise the incoming code and keep refining the process but it is hard to guarantee that there are no loop holes.
+For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitize the incoming code and keep refining the process but it is hard to guarantee that there are no loop holes.

 As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing JavaScript in the code from being executed. This is a great step forward for better security.

--- a/packages/mermaid/src/docs/Setup.md
+++ b/packages/mermaid/src/docs/Setup.md
@ -72,15 +72,15 @@ Theme , the CSS style sheet

 | Parameter     | Description                       | Type   | Required | Values                                     |
 | ------------- | --------------------------------- | ------ | -------- | ------------------------------------------ |
-| securityLevel | Level of trust for parsed diagram | string | Required | 'sandbox', 'strict', 'loose', 'antiscript' |
+| securityLevel | Level of trust for parsed diagram | string | Required | `sandbox`, `strict`, `loose`, `antiscript` |

 **Notes**:

- **strict**: (**default**) tags in text are encoded, click functionality is disabled
- **loose**: tags in text are allowed, click functionality is enabled
- **antiscript**: html tags in text are allowed, (only script element is removed), click
+- **`strict`**: (**default**) tags in text are encoded, click functionality is disabled
+- **`loose`**: tags in text are allowed, click functionality is enabled
+- **`antiscript`**: html tags in text are allowed, (only script element is removed), click
  functionality is enabled
- **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This
+- **`sandbox`**: With this security level all rendering takes place in a sandboxed iframe. This
  prevent any JavaScript from running in the context. This may hinder interactive functionality
  of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc.

@ -119,7 +119,7 @@ Default value: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']

 This option controls if the generated ids of nodes in the SVG are generated randomly or based
 on a seed. If set to false, the IDs are generated based on the current date and thus are not
-deterministic. This is the default behaviour.
+deterministic. This is the default behavior.

 **Notes**:

@ -211,15 +211,15 @@ Default value: true
 ### defaultRenderer

 | Parameter       | Description | Type    | Required | Values                      |
-| --------------- | ----------- | ------- | -------- | ----------------------- |
-| defaultRenderer | See notes   | boolean | 4        | dagre-d3, dagre-wrapper |
+| --------------- | ----------- | ------- | -------- | --------------------------- |
+| defaultRenderer | See notes   | boolean | 4        | `dagre-d3`, `dagre-wrapper` |

 **Notes:**

 Decides which rendering engine that is to be used for the rendering. Legal values are:
-dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid
+`dagre-d3` `dagre-wrapper` - wrapper for `dagre` implemented in mermaid

-Default value: 'dagre-wrapper'
+Default value: `dagre-wrapper`

 ## sequence

@ -736,15 +736,15 @@ Default value: true
 ## defaultRenderer

 | Parameter       | Description | Type    | Required | Values                      |
-| --------------- | ----------- | ------- | -------- | ----------------------- |
-| defaultRenderer | See notes   | boolean | 4        | dagre-d3, dagre-wrapper |
+| --------------- | ----------- | ------- | -------- | --------------------------- |
+| defaultRenderer | See notes   | boolean | 4        | `dagre-d3`, `dagre-wrapper` |

 **Notes**:

 Decides which rendering engine that is to be used for the rendering. Legal values are:
-dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid
+`dagre-d3` `dagre-wrapper` - wrapper for `dagre` implemented in mermaid

-Default value: 'dagre-d3'
+Default value: `dagre-d3`

 ## useMaxWidth

@ -762,15 +762,15 @@ Default value: true
 ## defaultRenderer

 | Parameter       | Description | Type    | Required | Values                      |
-| --------------- | ----------- | ------- | -------- | ----------------------- |
-| defaultRenderer | See notes   | boolean | 4        | dagre-d3, dagre-wrapper |
+| --------------- | ----------- | ------- | -------- | --------------------------- |
+| defaultRenderer | See notes   | boolean | 4        | `dagre-d3`, `dagre-wrapper` |

 **Notes:**

 Decides which rendering engine that is to be used for the rendering. Legal values are:
-dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid
+`dagre-d3` `dagre-wrapper` - wrapper for `dagre` implemented in mermaid

-Default value: 'dagre-d3'
+Default value: `dagre-d3`

 ## er

@ -992,7 +992,7 @@ Default value: 4
 | --------------- | ----------- | ------- | -------- | ------------------ |
 | c4BoundaryInRow | See Notes   | Integer | Required | Any Positive Value |

-**Notes:** How many boundarys to place in each row.
+**Notes:** How many boundaries to place in each row.

 Default value: 2

@ -1559,7 +1559,7 @@ Returns **void**

 ```html
 <script>
-  var config = {
+  const config = {
    theme: 'default',
    logLevel: 'fatal',
    securityLevel: 'strict',
--- a/packages/mermaid/src/docs/accessibility.md
+++ b/packages/mermaid/src/docs/accessibility.md
@ -17,7 +17,7 @@ The diagram authors can now add the accessibility options in the diagram definit
 - `accTitle: "Your Accessibility Title"` or
 - `accDescr: "Your Accessibility Description"`

-**When these two options are defined, they will add a coressponding `<title>` and `<desc>` tag in the SVG.**
+**When these two options are defined, they will add a corresponding `<title>` and `<desc>` tag in the SVG.**

 Let us take a look at the following example with a flowchart diagram:

--- a/packages/mermaid/src/docs/classDiagram.md
+++ b/packages/mermaid/src/docs/classDiagram.md
@ -399,7 +399,7 @@ click Shape2 call callbackFunction() "This is a tooltip for a callback"

 ```html
 <script>
-  var callbackFunction = function () {
+  const callbackFunction = function () {
    alert('A callback was triggered');
  };
 </script>
@ -451,10 +451,10 @@ Beginner's tip—a full example using interactive links in an HTML page:
  </pre>

  <script>
-    var callback = function () {
+    const callback = function () {
      alert('A callback was triggered');
    };
-    var config = {
+    const config = {
      startOnLoad: true,
      securityLevel: 'loose',
    };
--- a/packages/mermaid/src/docs/diagrams-and-syntax-and-examples/flowchart.md
+++ b/packages/mermaid/src/docs/diagrams-and-syntax-and-examples/flowchart.md
@ -416,7 +416,7 @@ click nodeId call callback()

 ```html
 <script>
-  var callback = function (nodeId) {
+  const callback = function (nodeId) {
    alert('A callback was triggered on ' + nodeId);
  };
 </script>
@ -471,10 +471,10 @@ Beginner's tip—here's a full example of using interactive links in HTML:
  </pre>

  <script>
-    var callback = function () {
+    const callback = function () {
      alert('A callback was triggered');
    };
-    var config = {
+    const config = {
      startOnLoad: true,
      flowchart: {
        useMaxWidth: true,
--- a/packages/mermaid/src/docs/flowchart.md
+++ b/packages/mermaid/src/docs/flowchart.md
@ -442,7 +442,7 @@ Examples of tooltip usage below:

 ```html
 <script>
-  var callback = function () {
+  const callback = function () {
    alert('A callback was triggered');
  };
 </script>
@ -495,10 +495,10 @@ Beginner's tip—a full example using interactive links in a html context:
  </pre>

  <script>
-    var callback = function () {
+    const callback = function () {
      alert('A callback was triggered');
    };
-    var config = {
+    const config = {
      startOnLoad: true,
      flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
      securityLevel: 'loose',
--- a/packages/mermaid/src/docs/gantt.md
+++ b/packages/mermaid/src/docs/gantt.md
@ -327,13 +327,13 @@ Beginner's tip—a full example using interactive links in an html context:
  </pre>

  <script>
-    var printArguments = function (arg1, arg2, arg3) {
+    const printArguments = function (arg1, arg2, arg3) {
      alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);
    };
-    var printTask = function (taskId) {
+    const printTask = function (taskId) {
      alert('taskId: ' + taskId);
    };
-    var config = {
+    const config = {
      startOnLoad: true,
      securityLevel: 'loose',
    };
--- a/packages/mermaid/src/docs/index.html
+++ b/packages/mermaid/src/docs/index.html
@ -29,7 +29,7 @@
      src="https://plausible.io/js/plausible.js"
    ></script>
    <script>
-      var require = {
+      const require = {
        paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs' },
      };
    </script>
@ -51,16 +51,16 @@
  <body>
    <div id="app"></div>
    <script>
-      var initEditor = exports.default;
-      var parser = new DOMParser();
-      var currentCodeExample = 0;
-      var colorize = [];
+      let initEditor = exports.default;
+      let parser = new DOMParser();
+      let currentCodeExample = 0;
+      let colorize = [];

      function colorizeEverything(html) {
        initEditor(monaco);
        return new Promise((resolve, reject) => {
          monaco.editor.setTheme('mermaid');
-          var parsed = parser.parseFromString(html, 'text/html').body;
+          const parsed = parser.parseFromString(html, 'text/html').body;
          Promise.all(
            [...parsed.querySelectorAll('pre[id*="code"]')].map((codeBlock) =>
              monaco.editor.colorize(codeBlock.innerText, 'mermaid')
@ -117,7 +117,7 @@
          function (hook, vm) {
            hook.beforeEach(function (html) {
              url = 'https://github.com/mermaid-js/mermaid/blob/develop/src/docs/' + vm.route.file;
-              var editHtml = '[:memo: Edit this Page](' + url + ')\n';
+              const editHtml = '[:memo: Edit this Page](' + url + ')\n';
              return editHtml + html;
            });

@ -136,7 +136,6 @@
        ],
      };

-      var num = 0;
      const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

      const conf = {
--- a/packages/mermaid/src/docs/integrations.md
+++ b/packages/mermaid/src/docs/integrations.md
@ -31,7 +31,7 @@ They also serve as proof of concept, for the variety of things that can be built
  - [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro)
  - [redmine-mermaid](https://github.com/styz/redmine_mermaid)
  - [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
- [Jetsbrain IDE eg Pycharm](https://www.jetbrains.com/go/guide/tips/mermaid-js-support-in-markdown/)
+- [JetBrains IDE eg Pycharm](https://www.jetbrains.com/go/guide/tips/mermaid-js-support-in-markdown/)
 - [mermerd](https://github.com/KarnerTh/mermerd)

 ## CRM/ERP/Similar
--- a/packages/mermaid/src/docs/mindmap.md
+++ b/packages/mermaid/src/docs/mindmap.md
@ -1,6 +1,6 @@
 # Mindmap

-> Mindmap: This is an experimental diagram for now. The syntax and properties can change in future releases. The syntax is stabel except for the icon integration which is the experimental part.
+> Mindmap: This is an experimental diagram for now. The syntax and properties can change in future releases. The syntax is stable except for the icon integration which is the experimental part.

 "A mind map is a diagram used to visually organize information into a hierarchy, showing relationships among pieces of the whole. It is often created around a single concept, drawn as an image in the center of a blank page, to which associated representations of ideas such as images, words and parts of words are added. Major ideas are connected directly to the central concept, and other ideas branch out from those major ideas." Wikipedia

@ -31,7 +31,7 @@ mindmap

 The syntax for creating Mindmaps is simple and relies on indentation for setting the levels in the hierarchy.

-In the following example you can see how there are 3 dufferent levels. One with starting at the left of the text and another level with two rows starting at the same column, defining the node A. At the end there is one more level where the text is indented further then the prevoius lines defining the nodes B and C.
+In the following example you can see how there are 3 different levels. One with starting at the left of the text and another level with two rows starting at the same column, defining the node A. At the end there is one more level where the text is indented further then the previous lines defining the nodes B and C.

 ```
 mindmap
--- a/packages/mermaid/src/docs/usage.md
+++ b/packages/mermaid/src/docs/usage.md
@ -208,14 +208,14 @@ The example below show an outline of how this could be used. The example just lo

 <script>
  mermaid.mermaidAPI.initialize({ startOnLoad: false });
-  $(function () {
+  $(async function () {
    // Example of using the API var
    element = document.querySelector('#graphDiv');
-    var insertSvg = function (svgCode, bindFunctions) {
+    const insertSvg = function (svgCode, bindFunctions) {
      element.innerHTML = svgCode;
    };
-    var graphDefinition = 'graph TB\na-->b';
-    var graph = mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
+    const graphDefinition = 'graph TB\na-->b';
+    const graph = await mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
  });
 </script>
 ```
@ -339,7 +339,7 @@ on what kind of integration you use.
 ```html
 <script src="../dist/mermaid.js"></script>
 <script>
-  var config = { startOnLoad: true, flowchart: { useMaxWidth: false, htmlLabels: true } };
+  let config = { startOnLoad: true, flowchart: { useMaxWidth: false, htmlLabels: true } };
  mermaid.initialize(config);
 </script>
 ```
--- a/packages/mermaid/src/mermaid.spec.ts
+++ b/packages/mermaid/src/mermaid.spec.ts
@ -1,7 +1,6 @@
 import mermaid from './mermaid';
 import { mermaidAPI } from './mermaidAPI';
 import './diagram-api/diagram-orchestration';
-import { vi, describe, it, beforeEach, afterEach, expect } from 'vitest';
 const spyOn = vi.spyOn;

 vi.mock('./mermaidAPI');
--- a/Show More
+++ b/Show More