Prettier pass

2022-09-05 01:00:47 +05:30 · 2022-09-05 01:00:47 +05:30 · 98e9f5751a
parent 41dec4d159
commit 98e9f5751a
85 changed files with 4377 additions and 1897 deletions
--- a/.commitlintrc.json
+++ b/.commitlintrc.json
@ -1,5 +1,3 @@
 {
-    "extends": [
-        "@commitlint/config-conventional"
-    ]
-}
+  "extends": ["@commitlint/config-conventional"]
+}
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@ -4,7 +4,6 @@ about: Create a report to help us improve
 title: ''
 labels: 'Status: Triage, Type: Bug / Error'
 assignees: ''
-
 ---

 **Describe the bug**
@ -12,6 +11,7 @@ A clear and concise description of what the bug is.

 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@ -27,15 +27,17 @@ If applicable, add screenshots to help explain your problem.
 If applicable, add the code sample or a link to the [live editor](https://mermaid.live).

 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]

 **Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]

 **Additional context**
 Add any other context about the problem here.
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@ -4,7 +4,6 @@ about: Suggest an idea for this project
 title: ''
 labels: 'Status: Triage, Type: Enhancement'
 assignees: ''
-
 ---

 **Is your feature request related to a problem? Please describe.**
--- a/.github/ISSUE_TEMPLATE/question.md
+++ b/.github/ISSUE_TEMPLATE/question.md
@ -4,12 +4,13 @@ about: Get some help from the community.
 title: ''
 labels: 'Help wanted!, Type: Other'
 assignees: ''
-
 ---

 ## Help us help you!
+
 You want an answer. Here are some ways to get it quicker:
-* Use a clear and concise title.
-* Try to pose a clear and concise question.
-* Include as much, or as little, code as necessary.
-* Don't be shy to give us some screenshots, if it helps!
+
+- Use a clear and concise title.
+- Try to pose a clear and concise question.
+- Include as much, or as little, code as necessary.
+- Don't be shy to give us some screenshots, if it helps!
--- a/.github/codeql/codeql-config.yml
+++ b/.github/codeql/codeql-config.yml
@ -1,4 +1,4 @@
-name: "CodeQL config"
+name: 'CodeQL config'
 paths-ignore:
  - dist
  - cypress
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@ -1,18 +1,18 @@
 version: 2
 updates:
- package-ecosystem: npm
-  open-pull-requests-limit: 10
-  directory: /
-  target-branch: develop
-  versioning-strategy: increase
-  schedule:
-    interval: weekly
-    day: monday
-    time: "07:00"
- package-ecosystem: github-actions
-  directory: /
-  target-branch: develop
-  schedule:
-    interval: weekly
-    day: monday
-    time: "07:00"
+  - package-ecosystem: npm
+    open-pull-requests-limit: 10
+    directory: /
+    target-branch: develop
+    versioning-strategy: increase
+    schedule:
+      interval: weekly
+      day: monday
+      time: '07:00'
+  - package-ecosystem: github-actions
+    directory: /
+    target-branch: develop
+    schedule:
+      interval: weekly
+      day: monday
+      time: '07:00'
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@ -1,13 +1,17 @@
 ## :bookmark_tabs: Summary
+
 Brief description about the content of your PR.

 Resolves #<your issue id here>

 ## :straight_ruler: Design Decisions
+
 Describe the way your implementation works or what design decisions you made if applicable.

 ### :clipboard: Tasks
+
 Make sure you
- [ ] :book: have read the [contribution guidelines](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) 
- [ ] :computer: have added unit/e2e tests (if appropriate) 
- [ ] :bookmark: targeted `develop` branch 
+
+- [ ] :book: have read the [contribution guidelines](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md)
+- [ ] :computer: have added unit/e2e tests (if appropriate)
+- [ ] :bookmark: targeted `develop` branch
--- a/.github/stale.yml
+++ b/.github/stale.yml
@ -16,4 +16,4 @@ markComment: >
 # Comment to post when closing a stale issue. Set to `false` to disable
 closeComment: >
  This issue has been been automatically closed due to a lack of activity. 
-  This is done to maintain a clean list of issues that the community is interested in developing. 
+  This is done to maintain a clean list of issues that the community is interested in developing.
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@ -18,28 +18,28 @@ jobs:
      matrix:
        node-version: [16.x]
    steps:
-    - uses: actions/checkout@v3
+      - uses: actions/checkout@v3

-    - name: Setup Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
-      with:
-        cache: yarn
-        node-version: ${{ matrix.node-version }}
+      - name: Setup Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          cache: yarn
+          node-version: ${{ matrix.node-version }}

-    - name: Install Yarn
-      run: npm i yarn --global
+      - name: Install Yarn
+        run: npm i yarn --global

-    - name: Install Packages
-      run: |
-        yarn install --frozen-lockfile
-      env:
-        CYPRESS_CACHE_FOLDER: .cache/Cypress
+      - name: Install Packages
+        run: |
+          yarn install --frozen-lockfile
+        env:
+          CYPRESS_CACHE_FOLDER: .cache/Cypress

-    - name: Run Build
-      run: yarn build
+      - name: Run Build
+        run: yarn build

-    - name: Upload Build as Artifact
-      uses: actions/upload-artifact@v3
-      with:
-        name: dist
-        path: dist
+      - name: Upload Build as Artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: dist
+          path: dist
--- a/.github/workflows/checks.yml
+++ b/.github/workflows/checks.yml
@ -14,12 +14,12 @@ jobs:
    name: check tests
    if: github.repository_owner == 'mermaid-js'
    steps:
-    - uses: actions/checkout@v2
-      with:
-        fetch-depth: 0
-    - uses: testomatio/check-tests@stable
-      with:
-        framework: cypress
-        tests: "./cypress/e2e/**/**.spec.js"
-        token: ${{ secrets.GITHUB_TOKEN }}
-        has-tests-label: true
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - uses: testomatio/check-tests@stable
+        with:
+          framework: cypress
+          tests: './cypress/e2e/**/**.spec.js'
+          token: ${{ secrets.GITHUB_TOKEN }}
+          has-tests-label: true
--- a/.github/workflows/codeql.yml
+++ b/.github/workflows/codeql.yml
@ -1,12 +1,11 @@
-
-name: "CodeQL"
+name: 'CodeQL'

 on:
  push:
-    branches: [ develop ]
+    branches: [develop]
  pull_request:
    # The branches below must be a subset of the branches above
-    branches: [ develop ]
+    branches: [develop]
    types:
      - opened
      - synchronize
@ -24,40 +23,40 @@ jobs:
    strategy:
      fail-fast: false
      matrix:
-        language: [ 'javascript' ]
+        language: ['javascript']
        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
        # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support

    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v3
+      - name: Checkout repository
+        uses: actions/checkout@v3

-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
-      with:
-        config-file: ./.github/codeql/codeql-config.yml
-        languages: ${{ matrix.language }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
-        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v2
+        with:
+          config-file: ./.github/codeql/codeql-config.yml
+          languages: ${{ matrix.language }}
+          # If you wish to specify custom queries, you can do so here or in a config file.
+          # By default, queries listed here will override any specified in a config file.
+          # Prefix the list here with "+" to use these queries and those in the config file.
+          # queries: ./path/to/local/query, your-org/your-repo/queries@main

-    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v2
+      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+      # If this step fails, then you should remove it and run the build manually (see below)
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v2

-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+      # ℹ️ Command-line programs to run using the OS shell.
+      # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun

-    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-    #    and modify them (or add more) to build your code if your project
-    #    uses a compiled language
+      # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+      #    and modify them (or add more) to build your code if your project
+      #    uses a compiled language

-    #- run: |
-    #   make bootstrap
-    #   make release
+      #- run: |
+      #   make bootstrap
+      #   make release

-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v2
--- a/.github/workflows/issue-triage.yml
+++ b/.github/workflows/issue-triage.yml
@ -1,6 +1,6 @@
 name: Apply triage label to new issue

-on: 
+on:
  issues:
    types: [opened]

@ -8,7 +8,7 @@ jobs:
  triage:
    runs-on: ubuntu-latest
    steps:
-    - uses: andymckay/labeler@1.0.4
-      with:
-        repo-token: "${{ secrets.GITHUB_TOKEN }}"
-        add-labels: "Status: Triage"
+      - uses: andymckay/labeler@1.0.4
+        with:
+          repo-token: '${{ secrets.GITHUB_TOKEN }}'
+          add-labels: 'Status: Triage'
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@ -18,22 +18,22 @@ jobs:
      matrix:
        node-version: [16.x]
    steps:
-    - uses: actions/checkout@v3
+      - uses: actions/checkout@v3

-    - name: Setup Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
-      with:
-        cache: yarn
-        node-version: ${{ matrix.node-version }}
+      - name: Setup Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          cache: yarn
+          node-version: ${{ matrix.node-version }}

-    - name: Install Yarn
-      run: npm i yarn --global
+      - name: Install Yarn
+        run: npm i yarn --global

-    - name: Install Packages
-      run: |
-        yarn install --frozen-lockfile
-      env:
-        CYPRESS_CACHE_FOLDER: .cache/Cypress
+      - name: Install Packages
+        run: |
+          yarn install --frozen-lockfile
+        env:
+          CYPRESS_CACHE_FOLDER: .cache/Cypress

-    - name: Run Linting
-      run: yarn lint
+      - name: Run Linting
+        run: yarn lint
--- a/.github/workflows/release-preview-publish.yml
+++ b/.github/workflows/release-preview-publish.yml
@ -9,29 +9,28 @@ jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v3
-    - name: Setup Node.js
-      uses: actions/setup-node@v3
-      with:
-        node-version: 16.x
-    - name: Install Yarn
-      run: npm i yarn --global
+      - uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+      - name: Install Yarn
+        run: npm i yarn --global

-    - name: Install Json
-      run: npm i json --global
+      - name: Install Json
+        run: npm i json --global

-    - name: Install Packages
-      run: yarn install --frozen-lockfile
-
-    - name: Publish
-      run: |
-        PREVIEW_VERSION=8
-        VERSION=$(echo ${{github.ref}} | tail -c +20)-preview.$PREVIEW_VERSION
-        echo $VERSION
-        npm version --no-git-tag-version --allow-same-version $VERSION
-        npm set //npm.pkg.github.com/:_authToken ${{ secrets.GITHUB_TOKEN }}
-        npm set registry https://npm.pkg.github.com/mermaid-js
-        json -I -f package.json -e 'this.name="@mermaid-js/mermaid"' # Package name needs to be set to a scoped one because GitHub registry requires this
-        json -I -f package.json -e 'this.repository="git://github.com/mermaid-js/mermaid"' # Repo url needs to have a specific format too
-        npm publish
+      - name: Install Packages
+        run: yarn install --frozen-lockfile

+      - name: Publish
+        run: |
+          PREVIEW_VERSION=8
+          VERSION=$(echo ${{github.ref}} | tail -c +20)-preview.$PREVIEW_VERSION
+          echo $VERSION
+          npm version --no-git-tag-version --allow-same-version $VERSION
+          npm set //npm.pkg.github.com/:_authToken ${{ secrets.GITHUB_TOKEN }}
+          npm set registry https://npm.pkg.github.com/mermaid-js
+          json -I -f package.json -e 'this.name="@mermaid-js/mermaid"' # Package name needs to be set to a scoped one because GitHub registry requires this
+          json -I -f package.json -e 'this.repository="git://github.com/mermaid-js/mermaid"' # Repo url needs to have a specific format too
+          npm publish
--- a/.github/workflows/release-publish.yml
+++ b/.github/workflows/release-publish.yml
@ -8,37 +8,37 @@ jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v3
-    - uses: fregante/setup-git-user@v1
+      - uses: actions/checkout@v3
+      - uses: fregante/setup-git-user@v1

-    - name: Setup Node.js
-      uses: actions/setup-node@v3
-      with:
-        node-version: 16.x
-    - name: Install Yarn
-      run: npm i yarn --global
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+      - name: Install Yarn
+        run: npm i yarn --global

-    - name: Install Json
-      run: npm i json --global
+      - name: Install Json
+        run: npm i json --global

-    - name: Install Packages
-      run: yarn install --frozen-lockfile
+      - name: Install Packages
+        run: yarn install --frozen-lockfile

-    - name: Prepare release
-      run: |
-        VERSION=${GITHUB_REF:10}
-        echo "Preparing release $VERSION"
-        git checkout -t origin/release/$VERSION
-        npm version --no-git-tag-version --allow-same-version $VERSION
-        git add package.json
-        git commit -m "Bump version $VERSION"
-        git checkout -t origin/master
-        git merge -m "Release $VERSION" --no-ff release/$VERSION
-        git push --no-verify
+      - name: Prepare release
+        run: |
+          VERSION=${GITHUB_REF:10}
+          echo "Preparing release $VERSION"
+          git checkout -t origin/release/$VERSION
+          npm version --no-git-tag-version --allow-same-version $VERSION
+          git add package.json
+          git commit -m "Bump version $VERSION"
+          git checkout -t origin/master
+          git merge -m "Release $VERSION" --no-ff release/$VERSION
+          git push --no-verify

-    - name: Publish
-      run: |
-        npm set //registry.npmjs.org/:_authToken $NPM_TOKEN
-        npm publish
-      env:
-        NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+      - name: Publish
+        run: |
+          npm set //registry.npmjs.org/:_authToken $NPM_TOKEN
+          npm publish
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@ -12,23 +12,23 @@ jobs:
      matrix:
        node-version: [16.x]
    steps:
-    - uses: actions/checkout@v3
+      - uses: actions/checkout@v3

-    - name: Setup Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
-      with:
-        cache: yarn
-        node-version: ${{ matrix.node-version }}
+      - name: Setup Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          cache: yarn
+          node-version: ${{ matrix.node-version }}

-    - name: Install Yarn
-      run: npm i yarn --global
+      - name: Install Yarn
+        run: npm i yarn --global

-    - name: Install Packages
-      run: |
-        yarn install --frozen-lockfile
-      env:
-        CYPRESS_CACHE_FOLDER: .cache/Cypress
+      - name: Install Packages
+        run: |
+          yarn install --frozen-lockfile
+        env:
+          CYPRESS_CACHE_FOLDER: .cache/Cypress

-    - name: Run Unit Tests
-      run: |
-        yarn ci --coverage
+      - name: Run Unit Tests
+        run: |
+          yarn ci --coverage
--- a/.github/workflows/unlock-reopened-issues.yml
+++ b/.github/workflows/unlock-reopened-issues.yml
@ -1,6 +1,6 @@
 name: Unlock reopened issue

-on: 
+on:
  issues:
    types: [reopened]

@ -8,6 +8,6 @@ jobs:
  triage:
    runs-on: ubuntu-latest
    steps:
-    - uses: Dunning-Kruger/unlock-issues@v1
-      with:
-        repo-token: "${{ secrets.GITHUB_TOKEN }}"
+      - uses: Dunning-Kruger/unlock-issues@v1
+        with:
+          repo-token: '${{ secrets.GITHUB_TOKEN }}'
--- a/.prettierignore
+++ b/.prettierignore
@ -1,2 +1,3 @@
 dist
-cypress/platform/xss3.html
+cypress/platform/xss3.html
+.cache
--- a/.tern-project
+++ b/.tern-project
@ -1,12 +1,8 @@
 {
  "ecmaVersion": 6,
-  "libs": [
-    "browser"
-  ],
+  "libs": ["browser"],
  "loadEagerly": [],
-  "dontLoad": [
-    "node_modules/**"
-  ],
+  "dontLoad": ["node_modules/**"],
  "plugins": {
    "modules": {},
    "es_modules": {},
@ -16,4 +12,4 @@
      "strong": true
    }
  }
-}
+}
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -7,6 +7,7 @@ So you want to help? That's great!
 Here are a few things to know to get you started on the right path.

 ## Development Installation
+
 ```bash
 git clone git@github.com:mermaid-js/mermaid.git
 cd mermaid
@ -16,11 +17,11 @@ yarn test

 ## Committing code

-We make all changes via pull requests. As we have many pull requests from developers new to mermaid, the current approach is to have *knsv, Knut Sveidqvist* as a main reviewer of changes and merging pull requests. More precisely like this:
+We make all changes via pull requests. As we have many pull requests from developers new to mermaid, the current approach is to have _knsv, Knut Sveidqvist_ as a main reviewer of changes and merging pull requests. More precisely like this:

-* Large changes reviewed by knsv or other developer asked to review by knsv
-* Smaller low-risk changes like dependencies, documentation etc can be merged by active collaborators
-* documentation (updates to the docs folder is also allowed via direct commits)
+- Large changes reviewed by knsv or other developer asked to review by knsv
+- Smaller low-risk changes like dependencies, documentation etc can be merged by active collaborators
+- documentation (updates to the docs folder is also allowed via direct commits)

 To commit code, create a branch, let it start with the type like feature or bug followed by the issue number for reference and some describing text.

@ -93,10 +94,11 @@ The rendering tests are very straightforward to create. There is a function imgS
 When running in ci it will take a snapshot of the rendered diagram and compare it with the snapshot from last build and flag for review it if it differs.

 This is what a rendering test looks like:
+
 ```javascript
-  it('should render forks and joins', () => {
-    imgSnapshotTest(
-      `
+it('should render forks and joins', () => {
+  imgSnapshotTest(
+    `
    stateDiagram
    state fork_state &lt;&lt;fork&gt;&gt;
      [*] --> fork_state
@ -109,18 +111,17 @@ This is what a rendering test looks like:
      join_state --> State4
      State4 --> [*]
    `,
-      { logLevel: 0 }
-    );
-    cy.get('svg');
-  });
-  ```
-
+    { logLevel: 0 }
+  );
+  cy.get('svg');
+});
+```

 ### **Add documentation for it**

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

-The docs are located in the docs folder and are ofc written in markdown. Just pick the right section and start typing. If you want to add to the structure as in adding a new section and new file you do that via the _navbar.md.
+The docs are located in the docs folder and are ofc written in markdown. Just pick the right section and start typing. If you want to add to the structure as in adding a new section and new file you do that via the \_navbar.md.

 The changes in master is reflected in https://mermaid-js.github.io/mermaid/ once released the updates are committed to https://mermaid-js.github.io/#/

@ -130,5 +131,4 @@ Don't get daunted if it is hard in the beginning. We have a great community with

 [Join our slack community if you want closer contact!](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)

-
 ![A superhero wishing you good luck](https://media.giphy.com/media/l49JHz7kJvl6MCj3G/giphy.gif)
--- a/README.md
+++ b/README.md
@ -6,8 +6,6 @@ English | [简体中文](./README.zh-CN.md)

 :trophy: **Mermaid was nominated and won the [JS Open Source Awards (2019)](https://osawards.com/javascript/2019) in the category "The most exciting use of technology"!!!**

-
-
 **Thanks to all involved, people committing pull requests, people answering questions! 🙏**

 <a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
@ -15,14 +13,15 @@ English | [简体中文](./README.zh-CN.md)
 ## About

 <!-- <Main description>   -->
-Mermaid is a JavaScript-based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams.  The main purpose of Mermaid is to help documentation catch up with development.
+
+Mermaid is a JavaScript-based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development.

 > Doc-Rot is a Catch-22 that Mermaid helps to solve.

 Diagramming and documentation costs precious developer time and gets outdated quickly.
 But not having diagrams or docs ruins productivity and hurts organizational learning.<br/>
-Mermaid addresses this problem by enabling users to create easily modifiable diagrams.  It can also be made part of production scripts (and other pieces of code).<br/>
- <br/>
+Mermaid addresses this problem by enabling users to create easily modifiable diagrams. It can also be made part of production scripts (and other pieces of code).<br/>
+<br/>

 Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
 [Tutorials](./docs/Tutorials.md) has video tutorials.
@ -34,21 +33,18 @@ For a more detailed introduction to Mermaid and some of its more basic uses, loo

 🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [Changelog](./docs/CHANGELOG.md)

-
-
 In our release process we rely heavily on visual regression tests using [applitools](https://applitools.com/). Applitools is a great service which has been easy to use and integrate with our tests.

-
 <a href="https://applitools.com/">
 <svg width="170" height="32" viewBox="0 0 170 32" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" maskUnits="userSpaceOnUse" x="27" y="0" width="143" height="32"><path fill-rule="evenodd" clip-rule="evenodd" d="M27.732.227h141.391v31.19H27.733V.227z" fill="#fff"></path></mask><g mask="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M153.851 22.562l1.971-3.298c1.291 1.219 3.837 2.402 5.988 2.402 1.971 0 2.903-.753 2.903-1.829 0-2.832-10.253-.502-10.253-7.313 0-2.904 2.51-5.45 7.099-5.45 2.904 0 5.234 1.004 6.955 2.367l-1.829 3.226c-1.039-1.075-3.011-2.008-5.126-2.008-1.65 0-2.725.717-2.725 1.685 0 2.546 10.289.395 10.289 7.386 0 3.19-2.724 5.52-7.528 5.52-3.012 0-5.916-1.003-7.744-2.688zm-5.7 2.259h4.553V.908h-4.553v23.913zm-6.273-8.676c0-2.689-1.578-5.02-4.446-5.02-2.832 0-4.409 2.331-4.409 5.02 0 2.724 1.577 5.055 4.409 5.055 2.868 0 4.446-2.33 4.446-5.055zm-13.588 0c0-4.912 3.442-9.07 9.142-9.07 5.736 0 9.178 4.158 9.178 9.07 0 4.911-3.442 9.106-9.178 9.106-5.7 0-9.142-4.195-9.142-9.106zm-5.628 0c0-2.689-1.577-5.02-4.445-5.02-2.832 0-4.41 2.331-4.41 5.02 0 2.724 1.578 5.055 4.41 5.055 2.868 0 4.445-2.33 4.445-5.055zm-13.587 0c0-4.912 3.441-9.07 9.142-9.07 5.736 0 9.178 4.158 9.178 9.07 0 4.911-3.442 9.106-9.178 9.106-5.701 0-9.142-4.195-9.142-9.106zm-8.425 4.338v-8.999h-2.868v-3.98h2.868V2.773h4.553v4.733h3.514v3.979h-3.514v7.78c0 1.111.574 1.936 1.578 1.936.681 0 1.326-.251 1.577-.538l.968 3.478c-.681.609-1.9 1.11-3.8 1.11-3.191 0-4.876-1.648-4.876-4.767zm-8.962 4.338h4.553V7.505h-4.553V24.82zm-.43-21.905a2.685 2.685 0 012.688-2.69c1.506 0 2.725 1.184 2.725 2.69a2.724 2.724 0 01-2.725 2.724c-1.47 0-2.688-1.219-2.688-2.724zM84.482 24.82h4.553V.908h-4.553v23.913zm-6.165-8.676c0-2.976-1.793-5.02-4.41-5.02-1.47 0-3.119.825-3.908 1.973v6.094c.753 1.111 2.438 2.008 3.908 2.008 2.617 0 4.41-2.044 4.41-5.055zm-8.318 6.453v8.82h-4.553V7.504H70v2.187c1.327-1.685 3.227-2.618 5.342-2.618 4.446 0 7.672 3.299 7.672 9.07 0 5.773-3.226 9.107-7.672 9.107-2.043 0-3.907-.86-5.342-2.653zm-10.718-6.453c0-2.976-1.793-5.02-4.41-5.02-1.47 0-3.119.825-3.908 1.973v6.094c.753 1.111 2.438 2.008 3.908 2.008 2.617 0 4.41-2.044 4.41-5.055zm-8.318 6.453v8.82H46.41V7.504h4.553v2.187c1.327-1.685 3.227-2.618 5.342-2.618 4.446 0 7.672 3.299 7.672 9.07 0 5.773-3.226 9.107-7.672 9.107-2.043 0-3.908-.86-5.342-2.653zm-11.758-1.936V18.51c-.753-1.004-2.187-1.542-3.657-1.542-1.793 0-3.263.968-3.263 2.617 0 1.65 1.47 2.582 3.263 2.582 1.47 0 2.904-.502 3.657-1.506zm0 4.159v-1.829c-1.183 1.434-3.227 2.259-5.485 2.259-2.761 0-5.988-1.864-5.988-5.736 0-4.087 3.227-5.593 5.988-5.593 2.33 0 4.337.753 5.485 2.115V13.85c0-1.756-1.506-2.904-3.8-2.904-1.829 0-3.55.717-4.984 2.044L28.63 9.8c2.115-1.901 4.84-2.726 7.564-2.726 3.98 0 7.6 1.578 7.6 6.561v11.186h-4.588z" fill="#00A298"></path></g><path fill-rule="evenodd" clip-rule="evenodd" d="M14.934 16.177c0 1.287-.136 2.541-.391 3.752-1.666-1.039-3.87-2.288-6.777-3.752 2.907-1.465 5.11-2.714 6.777-3.753.255 1.211.39 2.466.39 3.753m4.6-7.666V4.486a78.064 78.064 0 01-4.336 3.567c-1.551-2.367-3.533-4.038-6.14-5.207C11.1 4.658 12.504 6.7 13.564 9.262 5.35 15.155 0 16.177 0 16.177s5.35 1.021 13.564 6.915c-1.06 2.563-2.463 4.603-4.507 6.415 2.607-1.169 4.589-2.84 6.14-5.207a77.978 77.978 0 014.336 3.568v-4.025s-.492-.82-2.846-2.492c.6-1.611.93-3.354.93-5.174a14.8 14.8 0 00-.93-5.174c2.354-1.673 2.846-2.492 2.846-2.492" fill="#00A298"></path></svg>
 </a>

-
 <!-- </Main description> -->

 ## Examples

-__The following are some examples of the diagrams, charts and graphs that can be made using Mermaid. Click here to jump into the [text syntax](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference).__
+**The following are some examples of the diagrams, charts and graphs that can be made using Mermaid. Click here to jump into the [text syntax](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference).**
+
 <!-- <Flowchart> -->

 ### Flowchart [<a href="https://mermaid-js.github.io/mermaid/#/flowchart">docs</a> - <a href="https://mermaid.live/edit#pako:eNpNkMtqwzAQRX9FzKqFJK7t1km8KDQP6KJQSLOLvZhIY1tgS0GWmgbb_165IaFaiXvOFTPqgGtBkEJR6zOv0Fj2scsU8-ft8I5G5Gw6fe339GN7tnrYaafE45WvRsLW3Ya4bKVWwzVe_xU-FfVsc9hR62rLwvw_2591z7Y3FuUwgYZMg1L4ObrRzMBW1FAGqb8KKtCLGWRq8Ko7CbS0FdJqA2mBdUsTQGf110VxSK1xdJM2EkuDzd2qNQrypQ7s5TQuXcrW-ie5VoUsx9yZ2seVtac2DYIRz0ppK3eccd0ErRTjD1XfyyRIomSBUUzJPMaXOBb8GC4XRfQcFmL-FEYIwzD8AggvcHE">live editor</a>]
@ -61,6 +57,7 @@ B --> C{Decision}
 C -->|One| D[Result 1]
 C -->|Two| E[Result 2]
 ```
+
 ```mermaid
 flowchart LR

@ -70,7 +67,6 @@ C -->|One| D[Result 1]
 C -->|Two| E[Result 2]
 ```

-
 ### Sequence diagram [<a href="https://mermaid-js.github.io/mermaid/#/sequenceDiagram">docs</a> - <a href="https://mermaid.live/edit#pako:eNo9kMluwjAQhl_F-AykQMuSA1WrbuLQQ3v1ZbAnsVXHkzrjVhHi3etQwKfRv4w-z0FqMihL2eF3wqDxyUEdoVHhwTuNk-12RzaU4g29JzHMY2HpV0BE0VO6V8ETtdkGz1Zb1F8qiPyG5LX84mrLAmpwoWNh-5a0pWCiAxUwGBXeiVHEU4oq8V_6AHYUwAu2lLLTjVQ4bc1rT2yleI0IfJG320faZ9ABbk-Jz3hZnFxBduR9L2oiM5Jj2WBswJn8-cMArSRbbFDJMo8GK0ielVThmKOpNcD4bBxTlGUFvsOxhMT02QctS44JL6HzAS-iJzCYOwfJfTscunYd542aQuXqQU_RZ9kyt11ZFIM9rR3btJ9qaorOGQuR7c9mWSznyzXMF7hcLeBusTB6P9usq_ntrDKrm9kc5PF4_AMJE56Z">live editor</a>]

 ```
@ -84,6 +80,7 @@ John-->>Alice: Great!
 John->>Bob: How about you?
 Bob-->>John: Jolly good!
 ```
+
 ```mermaid
 sequenceDiagram
 Alice->>John: Hello John, how are you?
@ -108,6 +105,7 @@ gantt
    Parallel 3   :         des5, after des3, 1d
    Parallel 4   :         des6, after des4, 1d
 ```
+
 ```mermaid
 gantt
    section Section
@ -139,6 +137,7 @@ class Class10 {
  size()
 }
 ```
+
 ```mermaid
 classDiagram
 Class01 <|-- AveryLongClass : Cool
@ -159,6 +158,7 @@ class Class10 {
 ```

 ### State diagram [<a href="https://mermaid-js.github.io/mermaid/#/stateDiagram">docs</a> - <a href="https://mermaid.live/edit#pako:eNpdkEFvgzAMhf8K8nEqpYSNthx22Xbcqcexg0sCiZQQlDhIFeK_L8A6TfXp6fOz9ewJGssFVOAJSbwr7ByadGR1n8T6evpO0vQ1uZDSekOrXGFsPqJPO6q-2-imH8f_0TeHXm50lfelsAMjnEHFY6xpMdRAUhhRQxUlFy0GTTXU_RytYeAx-AdXZB1ULWovdoCB7OXWN1CRC-Ju-r3uz6UtchGHJqDbsPygU57iysb2reoWHpyOWBINvsqypb3vFMlw3TfWZF5xiY7keC6zkpUnZIUojwW-FAVvrvn51LLnvOXHQ84Q5nn-AVtLcwk">live editor</a>]
+
 ```
 stateDiagram-v2
 [*] --> Still
@ -168,6 +168,7 @@ Moving --> Still
 Moving --> Crash
 Crash --> [*]
 ```
+
 ```mermaid
 stateDiagram-v2
 [*] --> Still
@ -186,6 +187,7 @@ pie
 "Cats" : 85.9
 "Rats" : 15
 ```
+
 ```mermaid
 pie
 "Dogs" : 386
@ -196,6 +198,7 @@ pie
 ### Git graph [experimental - <a href="https://mermaid.live/edit#pako:eNqNkMFugzAMhl8F-VyVAR1tOW_aA-zKxSSGRCMJCk6lCvHuNZPKZdM0n-zf3_8r8QIqaIIGMqnB8kfEybQ--y4VnLP8-9RF9Mpkmm40hmlnDKmvkPiH_kfS7nFo_VN0FAf6XwocQGgxa_nGsm1bYEOOWmik1dRjGrmF1q-Cpkkj07u2HCI0PY4zHQATh8-7V9BwTPSE3iwOEd1OjQE1iWkBvk_bzQY7s0Sq4Hs7bHqKo8iGeZqbPN_WR7mpSd1RHpvPVhuMbG7XOq_L-oJlRfW5wteq0qorrpe-PBW9Pr8UJcK6rg-BLYPQ">live editor</a>]

 ### User Journey diagram [<a href="https://mermaid-js.github.io/mermaid/#/user-journey">docs</a> - <a href="https://mermaid.live/edit#pako:eNplkMFuwjAQRH9l5TMiTVIC-FqqnjhxzWWJN4khsSN7XRSh_HsdKBVt97R6Mzsj-yoqq0hIAXCywRkaSwNxWHNHsB_hYt1ZmwYUfiueKtbWwIcFtjf5zgH2eCZgQgkrCXt64GgMg2fUzkvIn5Xd_V5COtMFvCH_62ht_5yk7MU8sn61HDTfxD8VYiF6cj1qFd94nWkpuKWYKWRcFdUYOi5FaaZoDYNCpnel2Toha-w8LQQGtofRVEKyC_Qw7TQ2DvsfV2dRUTy6Ch6H-UMb7TlGVtbUupl5cF3ELfPgZZLM8rLR3IbjsrJ94rVq0XH7uS2SIis2mOVUrHNc5bmqjul2U2evaa3WL2mGYpqmL2BGiho">live editor</a>]
+
 ```
  journey
    title My working day
@ -207,6 +210,7 @@ pie
      Go downstairs: 5: Me
      Sit down: 3: Me
 ```
+
 ```mermaid
  journey
    title My working day
@ -255,6 +259,7 @@ BiRel(SystemAA, SystemE, "Uses")
 Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
 Rel(SystemC, customerA, "Sends e-mails to")
 ```
+
 ```mermaid
 C4Context
 title System Context diagram for Internet Banking System
@ -316,23 +321,24 @@ Detailed information about how to contribute can be found in the [contribution g

 ## Security and safe diagrams

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

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

-*Unfortunately you can not have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code.*
+_Unfortunately you can not have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code._

 ## Reporting vulnerabilities
+
 To report a vulnerability, please e-mail security@mermaid.live with a description of the issue, the steps you took to create the issue, affected versions, and if known, mitigations for the issue.

 ## Appreciation
+
 A quick note from Knut Sveidqvist:
->*Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!*
->*Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering.*
->*Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017.*
+
+> _Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!_ >_Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering._ >_Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
 >
->*Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!*
+> _Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!_

 ---

-*Mermaid was created by Knut Sveidqvist for easier documentation.*
+_Mermaid was created by Knut Sveidqvist for easier documentation._
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@ -13,6 +13,7 @@
 ## 关于 Mermaid

 <!-- <Main description>   -->
+
 Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。

 > Doc-Rot 是 Mermaid 致力于解决的一个难题。
@ -31,7 +32,8 @@ Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://merma

 ## 示例

-__下面是一些可以使用 Mermaid 创建的图表示例。点击 [语法](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference) 查看详情。__
+**下面是一些可以使用 Mermaid 创建的图表示例。点击 [语法](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference) 查看详情。**
+
 <table>
 <!-- <Flowchart> -->

@ -44,6 +46,7 @@ B --> C{Decision}
 C -->|One| D[Result 1]
 C -->|Two| E[Result 2]
 ```
+
 ```mermaid
 flowchart LR
 A[Hard] -->|Text| B(Round)
@ -65,6 +68,7 @@ John-->>Alice: Great!
 John->>Bob: How about you?
 Bob-->>John: Jolly good!
 ```
+
 ```mermaid
 sequenceDiagram
 Alice->>John: Hello John, how are you?
@ -89,6 +93,7 @@ gantt
    Parallel 3   :         des5, after des3, 1d
    Parallel 4   :         des6, after des4, 1d
 ```
+
 ```mermaid
 gantt
    section Section
@ -120,6 +125,7 @@ class Class10 {
  size()
 }
 ```
+
 ```mermaid
 classDiagram
 Class01 <|-- AveryLongClass : Cool
@ -150,6 +156,7 @@ Moving --> Still
 Moving --> Crash
 Crash --> [*]
 ```
+
 ```mermaid
 stateDiagram-v2
 [*] --> Still
@ -168,6 +175,7 @@ pie
 "Cats" : 85
 "Rats" : 15
 ```
+
 ```mermaid
 pie
 "Dogs" : 386
@ -175,7 +183,7 @@ pie
 "Rats" : 15
 ```

-### Git图 [实验特性 - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ2l0R3JhcGg6XG5vcHRpb25zXG57XG4gICAgXCJub2RlU3BhY2luZ1wiOiAxNTAsXG4gICAgXCJub2RlUmFkaXVzXCI6IDEwXG59XG5lbmRcbmNvbW1pdFxuYnJhbmNoIG5ld2JyYW5jaFxuY2hlY2tvdXQgbmV3YnJhbmNoXG5jb21taXRcbmNvbW1pdFxuY2hlY2tvdXQgbWFzdGVyXG5jb21taXRcbmNvbW1pdFxubWVyZ2UgbmV3YnJhbmNoXG4iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
+### Git 图 [实验特性 - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ2l0R3JhcGg6XG5vcHRpb25zXG57XG4gICAgXCJub2RlU3BhY2luZ1wiOiAxNTAsXG4gICAgXCJub2RlUmFkaXVzXCI6IDEwXG59XG5lbmRcbmNvbW1pdFxuYnJhbmNoIG5ld2JyYW5jaFxuY2hlY2tvdXQgbmV3YnJhbmNoXG5jb21taXRcbmNvbW1pdFxuY2hlY2tvdXQgbWFzdGVyXG5jb21taXRcbmNvbW1pdFxubWVyZ2UgbmV3YnJhbmNoXG4iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]

 ### 用户体验旅程图 [<a href="https://mermaid-js.github.io/mermaid/#/user-journey">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]

@ -190,6 +198,7 @@ pie
      Go downstairs: 5: Me
      Sit down: 3: Me
 ```
+
 ```mermaid
  journey
    title My working day
@ -238,6 +247,7 @@ BiRel(SystemAA, SystemE, "Uses")
 Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
 Rel(SystemC, customerA, "Sends e-mails to")
 ```
+
 ```mermaid
 C4Context
 title System Context diagram for Internet Banking System
@ -303,20 +313,20 @@ Mermaid 是一个不断发展中的社区，并且还在接收新的贡献者。

 作为拥有外部用户的网站的额外安全级别，我们很高兴推出一个新的安全级别，其中的图表在沙盒 iframe 中渲染，防止代码中的 javascript 被执行，这是在安全性方面迈出的一大步。

-*很不幸的是，鱼与熊掌不可兼得，在这个场景下它意味着在可能的恶意代码被阻止时，也会损失部分交互能力*。
+_很不幸的是，鱼与熊掌不可兼得，在这个场景下它意味着在可能的恶意代码被阻止时，也会损失部分交互能力_。

 ## 报告漏洞

 如果想要报告漏洞，请发送邮件到 security@mermaid.live, 并附上问题的描述、复现问题的步骤、受影响的版本，以及解决问题的方案（如果有的话）。

 ## 鸣谢
+
 来自 Knut Sveidqvist:
->*特别感谢 [d3](https://d3js.org/) 和 [dagre-d3](https://github.com/cpettitt/dagre-d3) 这两个优秀的项目，它们提供了图形布局和绘图工具库! *
->*同样感谢 [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) 提供了时序图语法的使用。 感谢 Jessica Peter 提供了甘特图渲染的灵感。*
->*感谢 [Tyler Long](https://github.com/tylerlong) 从 2017年四月开始成为了项目的合作者。*
+
+> _特别感谢 [d3](https://d3js.org/) 和 [dagre-d3](https://github.com/cpettitt/dagre-d3) 这两个优秀的项目，它们提供了图形布局和绘图工具库! _ >_同样感谢 [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) 提供了时序图语法的使用。 感谢 Jessica Peter 提供了甘特图渲染的灵感。_ >_感谢 [Tyler Long](https://github.com/tylerlong) 从 2017 年四月开始成为了项目的合作者。_
 >
->*感谢越来越多的 [贡献者们](https://github.com/knsv/mermaid/graphs/contributors)，没有你们，就没有这个项目的今天！*
+> _感谢越来越多的 [贡献者们](https://github.com/knsv/mermaid/graphs/contributors)，没有你们，就没有这个项目的今天！_

 ---

-*Mermaid 是由 Knut Sveidqvist 创建，它为了更简单的文档编写而生。*
+_Mermaid 是由 Knut Sveidqvist 创建，它为了更简单的文档编写而生。_
--- a/mocks/d3.js
+++ b/mocks/d3.js
@ -1,4 +1,7 @@
 let NewD3 = function () {
+  /**
+   *
+   */
  function returnThis() {
    return this;
  }
--- a/cypress/.eslintrc.json
+++ b/cypress/.eslintrc.json
@ -1,10 +1,10 @@
 {
-	"env": {
-		"cypress/globals": true
-	},
-	"extends": ["plugin:cypress/recommended"],
-	"plugins": ["cypress"],
-	"rules":{
-		"cypress/no-unnecessary-waiting": 0 
-	}
+  "env": {
+    "cypress/globals": true
+  },
+  "extends": ["plugin:cypress/recommended"],
+  "plugins": ["cypress"],
+  "rules": {
+    "cypress/no-unnecessary-waiting": 0
+  }
 }
--- a/cypress/platform/current.html
+++ b/cypress/platform/current.html
@ -1,19 +1,24 @@
 <html>
  <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
      rel="stylesheet"
    />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
    <style>
      body {
        /* background: rgb(221, 208, 208); */
        /* background:#333; */
        font-family: 'Arial';
-        }
-      h1 { color: grey;}
+      }
+      h1 {
+        color: grey;
+      }
      .mermaid2 {
        display: none;
      }
@ -22,137 +27,55 @@
  <body>
    <h1>info below</h1>
    <div class="flex">
-      <div class="mermaid" style="width: 50%; height: 20%;">
-flowchart BT
-   subgraph S1
-    sub1 -->sub2
-   end
-  subgraph S2
-    sub4
-   end
-   S1 --> S2
-   sub1 --> sub4
+      <div class="mermaid" style="width: 50%; height: 20%">
+        flowchart BT subgraph S1 sub1 -->sub2 end subgraph S2 sub4 end S1 --> S2 sub1 --> sub4
      </div>
-      <div class="mermaid2" style="width: 50%; height: 200px;">
-sequenceDiagram
-   Alice->>Bob:Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
-   Bob->>Alice: I'm short though
+      <div class="mermaid2" style="width: 50%; height: 200px">
+        sequenceDiagram Alice->>Bob:Extremely utterly long line of longness which had preivously
+        overflown the actor box as it is much longer than what it should be Bob->>Alice: I'm short
+        though
      </div>
-      <div class="mermaid2" style="width: 50%; height: 200px;">
-        %%{init: {'securityLevel': 'loose'}}%%
-      graph TD
-        A[Christmas] -->|Get money| B(Go shopping)
-        B --> C{{Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?}}
-        C -->|One| D[Laptop]
-        C -->|Two| E[iPhone]
-        C -->|Three| F[Car]
-        click A "index.html#link-clicked" "link test"
-        click B callback "click test"
-        classDef someclass fill:#f96;
-        class A someclass;
-        class C someclass;
+      <div class="mermaid2" style="width: 50%; height: 200px">
+        %%{init: {'securityLevel': 'loose'}}%% graph TD A[Christmas] -->|Get money| B(Go shopping) B
+        --> C{{Let me think...<br />Do I want something for work,<br />something to spend every free
+        second with,<br />or something to get around?}} C -->|One| D[Laptop] C -->|Two| E[iPhone] C
+        -->|Three| F[Car] click A "index.html#link-clicked" "link test" click B callback "click
+        test" classDef someclass fill:#f96; class A someclass; class C someclass;
      </div>
-      <div class="mermaid2" style="width: 50%; height: 200px;">
+      <div class="mermaid2" style="width: 50%; height: 200px">
+        flowchart BT subgraph a b1 -- ok --> b2 end a -- sert --> c c --> d b1 --> d a --asd123 -->
+        d
+      </div>
+      <div class="mermaid2" style="width: 50%; height: 20%">
+        stateDiagram-v2 state A { B1 --> B2: ok } A --> C: sert C --> D B1 --> D A --> D: asd123
+      </div>
+    </div>
+    <div class="mermaid2" style="width: 50%; height: 40%">
+      %% this does not produce the desired result flowchart TB subgraph container_Beta
+      process_C-->Process_D end subgraph container_Alpha process_A-->process_B
+      process_B-->|via_AWSBatch|container_Beta process_A-->|messages|process_C end
+    </div>
+    <div class="mermaid" style="width: 50%; height: 40%">
+      flowchart TB a{{"Lorem 'ipsum' dolor 'sit' amet, 'consectetur' adipiscing 'elit'."}} -->
+      b{{"Lorem #quot;ipsum#quot; dolor #quot;sit#quot; amet,#quot;consectetur#quot; adipiscing
+      #quot;elit#quot;."}}
+    </div>
+    <div class="mermaid2" style="width: 50%; height: 50%">
+      flowchart TB internet nat routeur lb1 lb2 compute1 compute2 subgraph project routeur nat
+      subgraph subnet1 compute1 lb1 end subgraph subnet2 compute2 lb2 end end internet --> routeur
+      routeur --> subnet1 & subnet2 subnet1 & subnet2 --> nat --> internet
+    </div>
+    <div class="mermaid2" style="width: 50%; height: 50%">
+      flowchart TD subgraph one[One] subgraph sub_one[Sub One] _sub_one end end subgraph two[Two]
+      _two end sub_one --> two
+    </div>
+    <div class="mermaid2" style="width: 50%; height: 50%">
+      flowchart TD subgraph one[One] subgraph sub_one[Sub One] _sub_one end subgraph sub_two[Sub
+      Two] _sub_two end _one end %% here, either the first or the second one sub_one --> sub_two
+      _one --> b
+    </div>

-      flowchart BT
-      subgraph a
-        b1 -- ok --> b2
-      end
-      a -- sert --> c
-      c --> d
-      b1 --> d
-      a --asd123 --> d
-      </div>
-      <div class="mermaid2" style="width: 50%; height: 20%;">
-stateDiagram-v2
-  state A {
-    B1 --> B2: ok
-  }
-  A --> C: sert
-  C --> D
-  B1 --> D
-  A --> D: asd123
-      </div>
-      </div>
-      <div class="mermaid2" style="width: 50%; height: 40%;">
-%% this does not produce the desired result
-flowchart TB
-  subgraph container_Beta
-    process_C-->Process_D
-  end
-  subgraph container_Alpha
-    process_A-->process_B
-    process_B-->|via_AWSBatch|container_Beta
-    process_A-->|messages|process_C
-  end
-
-      </div>
-      <div class="mermaid" style="width: 50%; height: 40%;">
-        flowchart TB
-	a{{"Lorem 'ipsum' dolor 'sit' amet, 'consectetur' adipiscing 'elit'."}}
-	--> b{{"Lorem #quot;ipsum#quot; dolor #quot;sit#quot; amet,#quot;consectetur#quot; adipiscing #quot;elit#quot;."}}
-
-
-      </div>
-      <div class="mermaid2" style="width: 50%; height: 50%;">
-flowchart TB
-  internet
-  nat
-  routeur
-  lb1
-  lb2
-  compute1
-  compute2
-  subgraph project
-  routeur
-  nat
-    subgraph subnet1
-      compute1
-      lb1
-    end
-    subgraph subnet2
-      compute2
-      lb2
-    end
-  end
-  internet --> routeur
-  routeur --> subnet1 & subnet2
-  subnet1 & subnet2 --> nat --> internet
-      </div>
-      <div class="mermaid2" style="width: 50%; height: 50%;">
-flowchart TD
-
-subgraph one[One]
-    subgraph sub_one[Sub One]
-        _sub_one
-    end
-end
-
-subgraph two[Two]
-    _two
-end
-
-sub_one --> two
-      </div>
-      <div class="mermaid2" style="width: 50%; height: 50%;">
-flowchart TD
-
-subgraph one[One]
-    subgraph sub_one[Sub One]
-        _sub_one
-    end
-    subgraph sub_two[Sub Two]
-        _sub_two
-    end
-    _one
-end
-
-%% here, either the first or the second one
-sub_one --> sub_two
-_one --> b
-      </div>
-
-  <script src="./mermaid.js"></script>
+    <script src="./mermaid.js"></script>
    <script>
      mermaid.parseError = function (err, hash) {
        // console.error('Mermaid error: ', err);
@ -172,8 +95,8 @@ _one --> b
        securityLevel: 'strict',
      });
      function callback() {
-  alert('It worked');
-}
+        alert('It worked');
+      }
    </script>
  </body>
 </html>
--- a/cypress/platform/e2e.html
+++ b/cypress/platform/e2e.html
@ -1,10 +1,13 @@
 <html>
  <head>
-    <meta charset="utf-8"/>
+    <meta charset="utf-8" />
    <!-- <meta charset="iso-8859-15"/> -->
    <script src="/e2e.js"></script>
    <!-- <link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet" /> -->
-    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
+      rel="stylesheet"
+    />
    <style>
      body {
        /* font-family: 'Mansalva', cursive;*/
@ -27,7 +30,8 @@
      svg {
        border: 2px solid darkred;
      }
-      .exClass2 > rect, .exClass {
+      .exClass2 > rect,
+      .exClass {
        fill: greenyellow !important;
      }
    </style>
--- a/cypress/platform/ghsa1.html
+++ b/cypress/platform/ghsa1.html
@ -1,28 +1,26 @@
 <html>
-<script>
+  <script>
    //      %%{ init: { "logLevel":0, "themeVariables" : { "primaryColor": "#fff000","textColor": "green","apa":"} #target { background-color: crimson }" } } }%%
-</script>
-<body>
+  </script>
+  <body>
    <div id="target">
-        <h1>This element does not belong to the SVG but we can style it</h1>
+      <h1>This element does not belong to the SVG but we can style it</h1>
    </div>
-    <svg id="diagram">
-    </svg>
+    <svg id="diagram"></svg>

    <script src="./mermaid.js"></script>
    <script>
-        mermaid.initialize({ startOnLoad: false, logLevel: 0 });
+      mermaid.initialize({ startOnLoad: false, logLevel: 0 });

-        const graph = `
+      const graph = `
     %%{ init: { "themeVariables" : { "textColor": "green;} #target { background-color: crimson }", "mainBkg": "#fff000" } } }%%
            graph TD
                A[Goose]
            `;

-        const diagram = document.getElementById('diagram');
-        const svg = mermaid.render('diagram-svg', graph);
-        diagram.innerHTML = svg;
+      const diagram = document.getElementById('diagram');
+      const svg = mermaid.render('diagram-svg', graph);
+      diagram.innerHTML = svg;
    </script>
-</body>
-
+  </body>
 </html>
--- a/cypress/platform/ghsa2.html
+++ b/cypress/platform/ghsa2.html
@ -1,28 +1,26 @@
 <html>
-<script>
+  <script>
    //      %%{ init: { "logLevel":0, "themeVariables" : { "primaryColor": "#fff000","textColor": "green","apa":"} #target { background-color: crimson }" } } }%%
-</script>
-<body>
+  </script>
+  <body>
    <div id="target">
-        <h1>This element does not belong to the SVG but we can style it</h1>
+      <h1>This element does not belong to the SVG but we can style it</h1>
    </div>
-    <svg id="diagram">
-    </svg>
+    <svg id="diagram"></svg>

    <script src="./mermaid.js"></script>
    <script>
-        mermaid.initialize({ startOnLoad: false, logLevel: 0 });
+      mermaid.initialize({ startOnLoad: false, logLevel: 0 });

-        const graph = `
+      const graph = `
     %%{ init: { "fontFamily" : "&125; * { background: red }" } }%%
            graph TD
                A[Goose]
            `;

-        const diagram = document.getElementById('diagram');
-        const svg = mermaid.render('diagram-svg', graph);
-        diagram.innerHTML = svg;
+      const diagram = document.getElementById('diagram');
+      const svg = mermaid.render('diagram-svg', graph);
+      diagram.innerHTML = svg;
    </script>
-</body>
-
+  </body>
 </html>
--- a/cypress/platform/render-after-error.html
+++ b/cypress/platform/render-after-error.html
@ -1,29 +1,28 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <meta charset="utf-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <title>Mermaid Quick Test Page</title>
-        <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-    </head>
-    <body>
-        <div id="graph">
-        </div>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Mermaid Quick Test Page</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
+  </head>
+  <body>
+    <div id="graph"></div>

-        <script src="./mermaid.js"></script>
-        <script>mermaid.init({ startOnLoad: false });
+    <script src="./mermaid.js"></script>
+    <script>
+      mermaid.init({ startOnLoad: false });

-         mermaid.mermaidAPI.initialize({ securityLevel: 'strict' });
+      mermaid.mermaidAPI.initialize({ securityLevel: 'strict' });

-         try {
-           console.log('rendering');
-           mermaid.mermaidAPI.render('graphDiv', `>`);
-         } catch (e) {}
+      try {
+        console.log('rendering');
+        mermaid.mermaidAPI.render('graphDiv', `>`);
+      } catch (e) {}

-         mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`, (html) => {
-           document.getElementById('graph').innerHTML = html;
-         });
-        </script>
-
-    </body>
+      mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`, (html) => {
+        document.getElementById('graph').innerHTML = html;
+      });
+    </script>
+  </body>
 </html>
--- a/cypress/platform/rerender.html
+++ b/cypress/platform/rerender.html
@ -1,30 +1,29 @@
 <!DOCTYPE html>
 <html>
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <title>Mermaid Quick Test Page</title>
-  <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-</head>
-<body>
-<div id="graph">
-</div>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Mermaid Quick Test Page</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
+  </head>
+  <body>
+    <div id="graph"></div>

-  <script src="./mermaid.js"></script>
-  <script>mermaid.init({ startOnLoad: false });
-    mermaid.mermaidAPI.initialize();
+    <script src="./mermaid.js"></script>
+    <script>
+      mermaid.init({ startOnLoad: false });
+      mermaid.mermaidAPI.initialize();

-    rerender('XMas');
+      rerender('XMas');

-    function rerender(text) {
-      var graphText = `graph TD
+      function rerender(text) {
+        var graphText = `graph TD
        A[${text}] -->|Get money| B(Go shopping)`;
-      var graph = mermaid.mermaidAPI.render('id', graphText);
-      console.log('\x1b[35m%s\x1b[0m', '>> graph', graph);
-      document.getElementById('graph').innerHTML = graph;
-    }
-  </script>
-  <button id="rerender" onclick="rerender('Saturday')">Rerender</button>
-
-</body>
+        var graph = mermaid.mermaidAPI.render('id', graphText);
+        console.log('\x1b[35m%s\x1b[0m', '>> graph', graph);
+        document.getElementById('graph').innerHTML = graph;
+      }
+    </script>
+    <button id="rerender" onclick="rerender('Saturday')">Rerender</button>
+  </body>
 </html>
--- a/cypress/platform/viewer.js
+++ b/cypress/platform/viewer.js
@ -46,7 +46,7 @@ function merge(current, update) {
    // if update[key] exist, and it's not a string or array,
    // we go in one level deeper
    if (
-      current.hasOwnProperty(key) && // eslint-disable-line
+      current.hasOwnProperty(key) &&
      typeof current[key] === 'object' &&
      !(current[key] instanceof Array)
    ) {
--- a/cypress/platform/webpackUsage.html
+++ b/cypress/platform/webpackUsage.html
@ -1,18 +1,17 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
-<head>
-  <style>
-  /* .mermaid {
+  <head>
+    <style>
+      /* .mermaid {
    font-family: "trebuchet ms", verdana, arial;;
  } */
-  /* .mermaid {
+      /* .mermaid {
    font-family: 'arial';
  } */
-  </style>
-</head>
-<body>
-  <div id="graph-to-be"></div>
-  <script src="./bundle-test.js" charset="utf-8"></script>
-</body>
-
-</html>
+    </style>
+  </head>
+  <body>
+    <div id="graph-to-be"></div>
+    <script src="./bundle-test.js" charset="utf-8"></script>
+  </body>
+</html>
--- a/cypress/platform/xss.html
+++ b/cypress/platform/xss.html
@ -1,16 +1,13 @@
 <html>
  <head>
    <script src="/e2e.js"></script>
-    <link
-      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
-      rel="stylesheet"
-    />
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
    <style>
      .malware {
        position: fixed;
-        bottom:0;
-        left:0;
-        right:0;
+        bottom: 0;
+        left: 0;
+        right: 0;
        height: 150px;
        background: red;
        color: black;
--- a/cypress/support/eyes-index.d.ts
+++ b/cypress/support/eyes-index.d.ts
@ -1 +1 @@
-import "@applitools/eyes-cypress"
+import '@applitools/eyes-cypress';
--- a/docs/8.6.0_docs.md
+++ b/docs/8.6.0_docs.md
@ -15,19 +15,19 @@ the `init` directive is the main method of configuration for Site and Current Le

 The three levels of are Configuration, Global, Site and Current.

-| Level of Configuration | Description |
-| --- | --- |
-| Global Configuration| Default Mermaid Configurations|
-| Site Configuration| Configurations made by site owner|
-| Current Configuration| Configurations made by Implementors|
-
+| Level of Configuration | Description                         |
+| ---------------------- | ----------------------------------- |
+| Global Configuration   | Default Mermaid Configurations      |
+| Site Configuration     | Configurations made by site owner   |
+| Current Configuration  | Configurations made by Implementors |

 # Limits to Modifying Configurations
+
 **secure Array**

-| Parameter | Description |Type | Required | Values|
-| --- | --- | --- | --- | --- |
-| secure | Array of parameters excluded from init directive| Array | Required | Any parameters|
+| Parameter | Description                                      | Type  | Required | Values         |
+| --------- | ------------------------------------------------ | ----- | -------- | -------------- |
+| secure    | Array of parameters excluded from init directive | Array | Required | Any parameters |

 The modifiable parts of the Configuration are limited by the secure array, which is an array of immutable parameters, this array can be expanded by site owners.

@ -43,6 +43,7 @@ Default values for the `secure array` consists of: ['secure', 'securityLevel', '
 Implementors can only modify configurations using directives, and cannot change the `secure` array.

 # Modifying Configurations and directives:
+
 The Two types of directives: are `init` (or `initialize`) and `wrap`.

 ```note
@ -52,12 +53,12 @@ All directives are enclosed in `%%{ }%%`
 Older versions of mermaid will not parse directives because `%%` will comment out the directive. This makes the update backwards-compatible.

 # Init
+
 `init`, or `initialize`: this directive gives the user the ability to overwrite and change the values for any configuration parameters not set in the secure array.

-| Parameter | Description |Type | Required | Values|
-| --- | --- | --- | --- | --- |
-| init | modifies configurations| Directive| Optional | Any parameters not included in the secure array|
-
+| Parameter | Description             | Type      | Required | Values                                          |
+| --------- | ----------------------- | --------- | -------- | ----------------------------------------------- |
+| init      | modifies configurations | Directive | Optional | Any parameters not included in the secure array |

 ```note
 init would be an argument-directive: `%%{init: { **insert argument here**}}%%`
@ -73,6 +74,7 @@ When deployed within code, init is called before the graph/diagram description.
 ```

 **for example**:
+
 ```mmd
 %%{init: {"theme": "default", "logLevel": 1 }}%%
 graph LR
@ -84,11 +86,12 @@ When deployed within code, init is called before the graph/diagram description.
  f-->g
  g-->
 ```
+
 # Wrap

-| Parameter | Description |Type | Required | Values|
-| --- | --- | --- | --- | --- |
-| wrap | a callable text-wrap function| Directive| Optional | %%{wrap}%%|
+| Parameter | Description                   | Type      | Required | Values     |
+| --------- | ----------------------------- | --------- | -------- | ---------- |
+| wrap      | a callable text-wrap function | Directive | Optional | %%{wrap}%% |

 ```note
 Wrap is a function that is currently only deployable for sequence diagrams.
@ -104,8 +107,8 @@ It is a non-argument directive and can be executed thusly:

 ![Image showing wrapped text](img/wrapped%20text.png)

-
 # Resetting Configurations:
+
 There are two more functions in the mermaidAPI that can be called by site owners: **reset** and **globalReset**.

 **reset**: resets the configuration to whatever the last configuration was. This can be done to undo more recent changes set from the last mermaidAPI.initialize({...}) configuration.
@ -115,31 +118,30 @@ There are two more functions in the mermaidAPI that can be called by site owners
 **Notes**: Both `reset` and `globalReset` are only available to site owners, and as such implementors have to edit their configs using `init`.

 # Additional Utils to mermaid
-•	**memoize**: simple caching for computationally expensive functions, reducing rendering time by about 90%.

-•	**assignWithDepth** - an improvement on previous functions with config.js and `Object.assign`. The purpose of this function is to provide a sane mechanism for merging objects, similar to `object.assign`, but with depth.
+• **memoize**: simple caching for computationally expensive functions, reducing rendering time by about 90%.
+
+• **assignWithDepth** - an improvement on previous functions with config.js and `Object.assign`. The purpose of this function is to provide a sane mechanism for merging objects, similar to `object.assign`, but with depth.

 Example of **assignWithDepth**:

 ![Image showing assignWithDepth](img/assignWithDepth.png)

-
 Example of **object.Assign**:

 ![Image showing object.assign without depth](img/object.assign%20without%20depth.png)

-•	**calculateTextDimensions**, **calculateTextWidth**， and **calculateTextHeight** - for measuring text dimensions, width and height.
+• **calculateTextDimensions**, **calculateTextWidth**， and **calculateTextHeight** - for measuring text dimensions, width and height.

 **Notes**: For more information on usage, parameters, and return info for these new functions take a look at the jsdocs for them in the utils package.

-
 # New API Requests Introduced in Version 8.6.0

 ## setSiteConfig

-| Function | Description         | Type    | Values             |Parameters|Returns|
-| --------- | ------------------- | ------- | ------------------ | ------------------ | ------------------ |
-| `setSiteConfig`|Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array|conf|siteConfig|
+| Function        | Description                           | Type        | Values                                  | Parameters | Returns    |
+| --------------- | ------------------------------------- | ----------- | --------------------------------------- | ---------- | ---------- |
+| `setSiteConfig` | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array | conf       | siteConfig |

 ```note
 Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset
@ -151,9 +153,9 @@ Default value: will mirror Global Config

 ## getSiteConfig

-| Function | Description         | Type    |  Values             |
-| --------- | ------------------- | ------- |  ------------------ |
-| `getSiteConfig`|Returns the current `siteConfig` base configuration | Get Request | Returns Any Values in `siteConfig`|
+| Function        | Description                                         | Type        | Values                             |
+| --------------- | --------------------------------------------------- | ----------- | ---------------------------------- |
+| `getSiteConfig` | Returns the current `siteConfig` base configuration | Get Request | Returns Any Values in `siteConfig` |

 ```note
 Returns   any   values in siteConfig.
@ -161,9 +163,9 @@ Returns   any   values in siteConfig.

 ## setConfig

-| Function  | Description         | Type    | Values             |Parameters|Returns|
-| --------- | ------------------- | ------- | ------------------ |----------|-------|
-| `setConfig`|Sets the `currentConfig` to desired values | Put Request| Any Values, those in secure array|conf|`currentConfig` merged with the sanitized conf|
+| Function    | Description                                | Type        | Values                            | Parameters | Returns                                        |
+| ----------- | ------------------------------------------ | ----------- | --------------------------------- | ---------- | ---------------------------------------------- |
+| `setConfig` | Sets the `currentConfig` to desired values | Put Request | Any Values, those in secure array | conf       | `currentConfig` merged with the sanitized conf |

 ```note
 Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any
@ -173,10 +175,9 @@ siteConfig value.

 ## getConfig

-| Function  | Description         | Type    | Return Values            |
-| --------- | ------------------- | ------- | ------------------ |
-| `getConfig` |Obtains the `currentConfig` | Get Request | Any Values from `currentConfig`|
-
+| Function    | Description                 | Type        | Return Values                   |
+| ----------- | --------------------------- | ----------- | ------------------------------- |
+| `getConfig` | Obtains the `currentConfig` | Get Request | Any Values from `currentConfig` |

 ```note
 Returns any values in currentConfig.
@ -184,9 +185,9 @@ Returns any values in currentConfig.

 ## sanitize

-| Function  | Description         | Type    | Values             |
-| --------- | ------------------- | ------- | ------------------ |
-| `sanitize`  |Sets the `siteConfig` to desired values. | Put Request(?) |None|
+| Function   | Description                              | Type           | Values |
+| ---------- | ---------------------------------------- | -------------- | ------ |
+| `sanitize` | Sets the `siteConfig` to desired values. | Put Request(?) | None   |

 ```note
 modifies options in-place
@ -195,15 +196,15 @@ Ensures options parameter does not attempt to override siteConfig secure keys.

 ## reset

-| Function | Description         | Type    | Required | Values             |Parameter|
-| --------- | -------------------| ------- | -------- | ------------------ |---------|
-| `reset`|Resets `currentConfig` to conf| Put Request | Required | None| conf|
+| Function | Description                    | Type        | Required | Values | Parameter |
+| -------- | ------------------------------ | ----------- | -------- | ------ | --------- |
+| `reset`  | Resets `currentConfig` to conf | Put Request | Required | None   | conf      |

 ## conf

-| Parameter | Description |Type | Required | Values|
-| --- | --- | --- | --- | --- |
-| `conf`| base set of values, which `currentConfig` could be reset to.| Dictionary | Required | Any Values, with respect to the secure Array|
+| Parameter | Description                                                  | Type       | Required | Values                                       |
+| --------- | ------------------------------------------------------------ | ---------- | -------- | -------------------------------------------- |
+| `conf`    | base set of values, which `currentConfig` could be reset to. | Dictionary | Required | Any Values, with respect to the secure Array |

 ```note
 default: current siteConfig  (optional, default `getSiteConfig()`)
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@ -26,7 +26,8 @@ Example of `Initalize` call setting `theme` to `base`:

 ```javascript
 mermaidAPI.initialize({
-    'securityLevel': 'loose', 'theme': 'base'
+  securityLevel: 'loose',
+  theme: 'base',
 });
 ```

@ -49,11 +50,10 @@ It is also possible to override site-wide theme settings locally, for a specific

 The easiest way to make a custom theme is to start with the base theme, and just modify theme variables through `themeVariables`, via `%%init%%`.

-|   Parameter    |                            Description                             | Type  | Required |         Objects contained          |
+| Parameter      | Description                                                        | Type  | Required | Objects contained                  |
 | -------------- | ------------------------------------------------------------------ | ----- | -------- | ---------------------------------- |
 | themeVariables | Array containing objects, modifiable with the `%%init%%` directive | Array | Required | primaryColor, lineColor, textColor |

-
 Here is an example of overriding `primaryColor` and giving everything a different look, using `%%init%%`.

 ```mmd
@ -117,9 +117,9 @@ This was introduced in version 8.2 as a security improvement, aimed at preventin

 **Notes:**

-   **strict**: (**default**) tags in text are encoded, click functionality is disabled
-   **loose**: tags in text are allowed, click functionality is enabled
-   **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled
+- **strict**: (**default**) tags in text are encoded, click functionality is disabled
+- **loose**: tags in text are allowed, click functionality is enabled
+- **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled

 ⚠️ **Note**: This changes the default behaviour of mermaid so that after upgrade to 8.2, if the `securityLevel` is not configured, tags in flowcharts are encoded as tags and clicking is prohibited.

@ -129,9 +129,9 @@ By doing this clicks and tags are again allowed.
 ### To change `securityLevel` with `mermaidAPI.initialize`:

 ```javascript
-    mermaidAPI.initialize({
-        securityLevel: 'loose'
-    });
+mermaidAPI.initialize({
+  securityLevel: 'loose',
+});
 ```

 **Closed issues:**
@ -160,9 +160,9 @@ By doing this clicks and tags are again allowed.
 - margins around flowchart are not balanced [\#852](https://github.com/knsv/mermaid/issues/852)
 - Smaller bundles [\#843](https://github.com/knsv/mermaid/issues/843)
 - unicode in labels [\#776](https://github.com/knsv/mermaid/issues/776)
- Hard-changing drawing  of arrows per edge type [\#775](https://github.com/knsv/mermaid/issues/775)
+- Hard-changing drawing of arrows per edge type [\#775](https://github.com/knsv/mermaid/issues/775)
 - SequenceDiagram wrong [\#773](https://github.com/knsv/mermaid/issues/773)
- Render mermaid on github pages with simple code  [\#772](https://github.com/knsv/mermaid/issues/772)
+- Render mermaid on github pages with simple code [\#772](https://github.com/knsv/mermaid/issues/772)
 - FlowChart - large space between text and the image [\#754](https://github.com/knsv/mermaid/issues/754)
 - Class Diagram Issues when using Mermaid in Stackedit [\#748](https://github.com/knsv/mermaid/issues/748)
 - Multi-platform CI [\#744](https://github.com/knsv/mermaid/issues/744)
@ -175,18 +175,18 @@ By doing this clicks and tags are again allowed.
 - Issue on Dynamic Creation in PHP [\#690](https://github.com/knsv/mermaid/issues/690)
 - `click "\#target"` and `click "http://url"` should create regular links [\#689](https://github.com/knsv/mermaid/issues/689)
 - Support Chinese punctuation [\#687](https://github.com/knsv/mermaid/issues/687)
- \[Question\] Proper way to install on Mac?  [\#681](https://github.com/knsv/mermaid/issues/681)
- Has Mermaid a graphical interface to make diagrams?  [\#668](https://github.com/knsv/mermaid/issues/668)
- mermaid installation on debian  [\#649](https://github.com/knsv/mermaid/issues/649)
+- \[Question\] Proper way to install on Mac? [\#681](https://github.com/knsv/mermaid/issues/681)
+- Has Mermaid a graphical interface to make diagrams? [\#668](https://github.com/knsv/mermaid/issues/668)
+- mermaid installation on debian [\#649](https://github.com/knsv/mermaid/issues/649)
 - "Cannot activate" in sequenceDiagram [\#647](https://github.com/knsv/mermaid/issues/647)
 - Link \("click" statement\) in flowchart does not work in exported SVG [\#646](https://github.com/knsv/mermaid/issues/646)
- How to pass styling  [\#639](https://github.com/knsv/mermaid/issues/639)
+- How to pass styling [\#639](https://github.com/knsv/mermaid/issues/639)
 - The live editor cant show seq diagram with notes for 8.0.0-alpha.3 [\#638](https://github.com/knsv/mermaid/issues/638)
 - import mermaid.css with ES6 + NPM [\#634](https://github.com/knsv/mermaid/issues/634)
 - Actor line cuts through other elements [\#633](https://github.com/knsv/mermaid/issues/633)
 - Graph TD line out of the picture \(left side\) [\#630](https://github.com/knsv/mermaid/issues/630)
- Flowchart labels appear "cutoff"  [\#628](https://github.com/knsv/mermaid/issues/628)
- Uncaught TypeError: \_.constant is not a function \(mermaid.js\)  [\#626](https://github.com/knsv/mermaid/issues/626)
+- Flowchart labels appear "cutoff" [\#628](https://github.com/knsv/mermaid/issues/628)
+- Uncaught TypeError: \_.constant is not a function \(mermaid.js\) [\#626](https://github.com/knsv/mermaid/issues/626)
 - Missing tags and releases for newer versions [\#623](https://github.com/knsv/mermaid/issues/623)
 - Mermaid and Leo / Leo Vue [\#622](https://github.com/knsv/mermaid/issues/622)
 - mermaidAPI gantt Vue.js [\#621](https://github.com/knsv/mermaid/issues/621)
@ -221,7 +221,7 @@ By doing this clicks and tags are again allowed.
 - TypeError: Cannot read property 'select' of undefined [\#563](https://github.com/knsv/mermaid/issues/563)
 - A little bug [\#557](https://github.com/knsv/mermaid/issues/557)
 - Japanese text appears garbled [\#554](https://github.com/knsv/mermaid/issues/554)
- classdiagram not works in mermaid live\_editor  [\#553](https://github.com/knsv/mermaid/issues/553)
+- classdiagram not works in mermaid live_editor [\#553](https://github.com/knsv/mermaid/issues/553)
 - font awesome in link text? [\#546](https://github.com/knsv/mermaid/issues/546)
 - q: heard of the cosmogol standard? [\#545](https://github.com/knsv/mermaid/issues/545)
 - Arrow heads missing \(cli, 7.0.3\) [\#544](https://github.com/knsv/mermaid/issues/544)
@ -248,7 +248,7 @@ By doing this clicks and tags are again allowed.
 - Flowchart edge labels placement [\#490](https://github.com/knsv/mermaid/issues/490)
 - Very different styles when rendering as png vs. svg [\#489](https://github.com/knsv/mermaid/issues/489)
 - New editor that supports mermaid: Caret [\#488](https://github.com/knsv/mermaid/issues/488)
- Gant PNG margin  [\#486](https://github.com/knsv/mermaid/issues/486)
+- Gant PNG margin [\#486](https://github.com/knsv/mermaid/issues/486)
 - ReferenceError: window is not defined [\#485](https://github.com/knsv/mermaid/issues/485)
 - Menu and layout bugs in docs [\#484](https://github.com/knsv/mermaid/issues/484)
 - Mermaid resets some of the page CSS styles [\#482](https://github.com/knsv/mermaid/issues/482)
@ -271,7 +271,7 @@ By doing this clicks and tags are again allowed.
 - shouldn't mermaid become more like Markdown ? [\#417](https://github.com/knsv/mermaid/issues/417)
 - Live editor show rendered diagram if syntax invalid [\#415](https://github.com/knsv/mermaid/issues/415)
 - Linkstyle stroke does not work [\#410](https://github.com/knsv/mermaid/issues/410)
- flowchart id's with dots in them .. break links  [\#408](https://github.com/knsv/mermaid/issues/408)
+- flowchart id's with dots in them .. break links [\#408](https://github.com/knsv/mermaid/issues/408)
 - Flowchart: Link text beginning with lowercase 'o' causes flowchart to break [\#407](https://github.com/knsv/mermaid/issues/407)
 - Some Chinese character will case Safari no responding. [\#405](https://github.com/knsv/mermaid/issues/405)
 - Cannot center-justify text in nodes? [\#397](https://github.com/knsv/mermaid/issues/397)
@ -282,7 +282,7 @@ By doing this clicks and tags are again allowed.
 - sequence diagram config issue [\#385](https://github.com/knsv/mermaid/issues/385)
 - How to add newline in the text [\#384](https://github.com/knsv/mermaid/issues/384)
 - PhantomJS crashes on a large graph [\#380](https://github.com/knsv/mermaid/issues/380)
- Finnish support for class diagrams using plantuml syntax  [\#377](https://github.com/knsv/mermaid/issues/377)
+- Finnish support for class diagrams using plantuml syntax [\#377](https://github.com/knsv/mermaid/issues/377)
 - mermaidAPI.render generated different svg code from mermaid.int\(\) [\#374](https://github.com/knsv/mermaid/issues/374)
 - Put your own action on the chart [\#372](https://github.com/knsv/mermaid/issues/372)
 - when declaring participants the elements are generated twice [\#370](https://github.com/knsv/mermaid/issues/370)
@ -312,7 +312,7 @@ By doing this clicks and tags are again allowed.
 - Mermaid does not work in Chrome 48 [\#281](https://github.com/knsv/mermaid/issues/281)
 - circle and ellipse cannot change color by classDef [\#271](https://github.com/knsv/mermaid/issues/271)
 - npm run watch doesn't work due missing dependencies [\#266](https://github.com/knsv/mermaid/issues/266)
- label out of node  [\#262](https://github.com/knsv/mermaid/issues/262)
+- label out of node [\#262](https://github.com/knsv/mermaid/issues/262)
 - IE11 Support issue [\#261](https://github.com/knsv/mermaid/issues/261)
 - mermaid without browser [\#260](https://github.com/knsv/mermaid/issues/260)
 - Insufficient capacity of gantt diagrams [\#226](https://github.com/knsv/mermaid/issues/226)
@ -346,13 +346,14 @@ By doing this clicks and tags are again allowed.
 - Adding trapezoid and inverse trapezoid vertex options. [\#741](https://github.com/knsv/mermaid/pull/741) ([adamwulf](https://github.com/adamwulf))
 - Add option for right angles [\#721](https://github.com/knsv/mermaid/pull/721) ([paulbland](https://github.com/paulbland))
 - Add nested activation classes [\#720](https://github.com/knsv/mermaid/pull/720) ([paulbland](https://github.com/paulbland))
- wip: class diagram  cardinality display [\#705](https://github.com/knsv/mermaid/pull/705) ([Vrixyz](https://github.com/Vrixyz))
+- wip: class diagram cardinality display [\#705](https://github.com/knsv/mermaid/pull/705) ([Vrixyz](https://github.com/Vrixyz))
 - add comments about CSS in config [\#688](https://github.com/knsv/mermaid/pull/688) ([imma90](https://github.com/imma90))
 - SequenceDiagram: Add support for multiple alt else statements [\#641](https://github.com/knsv/mermaid/pull/641) ([sechel](https://github.com/sechel))
 - fix \#426 - add class .clickable on nodes with click function or link [\#598](https://github.com/knsv/mermaid/pull/598) ([thomasleveil](https://github.com/thomasleveil))
 - Spec fix 1 [\#595](https://github.com/knsv/mermaid/pull/595) ([frankschmitt](https://github.com/frankschmitt))

 ## [7.0.5](https://github.com/knsv/mermaid/tree/7.0.5) (2017-09-01)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/7.0.3...7.0.5)

 **Closed issues:**
@ -376,6 +377,7 @@ By doing this clicks and tags are again allowed.
 - New documentation - need improved logo [\#216](https://github.com/knsv/mermaid/issues/216)

 ## [7.0.3](https://github.com/knsv/mermaid/tree/7.0.3) (2017-06-04)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/7.0.2...7.0.3)

 **Closed issues:**
@ -384,6 +386,7 @@ By doing this clicks and tags are again allowed.
 - Good example of interactivity with mermaidAPI [\#514](https://github.com/knsv/mermaid/issues/514)

 ## [7.0.2](https://github.com/knsv/mermaid/tree/7.0.2) (2017-06-01)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/7.0.0...7.0.2)

 **Closed issues:**
@ -421,6 +424,7 @@ By doing this clicks and tags are again allowed.
 - add par statement to sequenceDiagram [\#470](https://github.com/knsv/mermaid/pull/470) ([u-minor](https://github.com/u-minor))

 ## [7.0.0](https://github.com/knsv/mermaid/tree/7.0.0) (2017-01-29)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/6.0.0...7.0.0)

 **Implemented enhancements:**
@ -434,7 +438,7 @@ By doing this clicks and tags are again allowed.
 - Can not be generated PNG pictures through CLI with Chinese [\#451](https://github.com/knsv/mermaid/issues/451)
 - Round nodes cannot be styled with CSS classes [\#443](https://github.com/knsv/mermaid/issues/443)
 - webpack gulp UglifyJsPlugin error. [\#440](https://github.com/knsv/mermaid/issues/440)
- String concatenation isn't working  [\#432](https://github.com/knsv/mermaid/issues/432)
+- String concatenation isn't working [\#432](https://github.com/knsv/mermaid/issues/432)
 - text flow/wrap in actor box of sequence diagram [\#422](https://github.com/knsv/mermaid/issues/422)
 - Online live editor still use old version [\#402](https://github.com/knsv/mermaid/issues/402)
 - uncaught TypeError: t.getTransformToElement is not a function [\#401](https://github.com/knsv/mermaid/issues/401)
@ -459,7 +463,7 @@ By doing this clicks and tags are again allowed.
 - fix gantt chart cli configuration parsing including functions [\#430](https://github.com/knsv/mermaid/pull/430) ([whyzdev](https://github.com/whyzdev))
 - Uses an empty text node instead of a string for svg group labels [\#429](https://github.com/knsv/mermaid/pull/429) ([daveaglick](https://github.com/daveaglick))
 - use tspan via d3.textwrap to place actor text in sequence diagram [\#427](https://github.com/knsv/mermaid/pull/427) ([whyzdev](https://github.com/whyzdev))
- \#422 use foreignObject/div to place actor label in sequence diagram  [\#423](https://github.com/knsv/mermaid/pull/423) ([whyzdev](https://github.com/whyzdev))
+- \#422 use foreignObject/div to place actor label in sequence diagram [\#423](https://github.com/knsv/mermaid/pull/423) ([whyzdev](https://github.com/whyzdev))
 - Clarify the need for a CSS stylesheet [\#413](https://github.com/knsv/mermaid/pull/413) ([sifb](https://github.com/sifb))
 - Added hads downstream project [\#412](https://github.com/knsv/mermaid/pull/412) ([sinedied](https://github.com/sinedied))
 - update usage and fix \#273 [\#406](https://github.com/knsv/mermaid/pull/406) ([jinntrance](https://github.com/jinntrance))
@ -474,6 +478,7 @@ By doing this clicks and tags are again allowed.
 - Fix typo in the sequence diagram documentation [\#369](https://github.com/knsv/mermaid/pull/369) ([ggpasqualino](https://github.com/ggpasqualino))

 ## [6.0.0](https://github.com/knsv/mermaid/tree/6.0.0) (2016-05-29)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.8...6.0.0)

 **Closed issues:**
@ -512,9 +517,11 @@ By doing this clicks and tags are again allowed.
 - Quote phantomPath so that it doesn't fail on window [\#286](https://github.com/knsv/mermaid/pull/286) ([raghur](https://github.com/raghur))

 ## [0.5.8](https://github.com/knsv/mermaid/tree/0.5.8) (2016-01-27)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.7...0.5.8)

 ## [0.5.7](https://github.com/knsv/mermaid/tree/0.5.7) (2016-01-25)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.6...0.5.7)

 **Closed issues:**
@ -536,6 +543,7 @@ By doing this clicks and tags are again allowed.
 - Allow sequenceDiagram participant aliasing [\#265](https://github.com/knsv/mermaid/pull/265) ([gibson042](https://github.com/gibson042))

 ## [0.5.6](https://github.com/knsv/mermaid/tree/0.5.6) (2015-11-22)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.5...0.5.6)

 **Implemented enhancements:**
@ -572,6 +580,7 @@ By doing this clicks and tags are again allowed.
 - Add a Gitter chat badge to README.md [\#230](https://github.com/knsv/mermaid/pull/230) ([gitter-badger](https://github.com/gitter-badger))

 ## [0.5.5](https://github.com/knsv/mermaid/tree/0.5.5) (2015-10-21)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.4...0.5.5)

 **Closed issues:**
@ -583,6 +592,7 @@ By doing this clicks and tags are again allowed.
 - Fix a typo: crosshead --\> arrowhead [\#228](https://github.com/knsv/mermaid/pull/228) ([tylerlong](https://github.com/tylerlong))

 ## [0.5.4](https://github.com/knsv/mermaid/tree/0.5.4) (2015-10-19)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.3...0.5.4)

 **Implemented enhancements:**
@ -608,9 +618,11 @@ By doing this clicks and tags are again allowed.
 - Remove duplicate npm dependencies: d3 and he [\#223](https://github.com/knsv/mermaid/pull/223) ([spect88](https://github.com/spect88))

 ## [0.5.3](https://github.com/knsv/mermaid/tree/0.5.3) (2015-10-04)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.2...0.5.3)

 ## [0.5.2](https://github.com/knsv/mermaid/tree/0.5.2) (2015-10-04)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.1...0.5.2)

 **Implemented enhancements:**
@ -623,7 +635,7 @@ By doing this clicks and tags are again allowed.
 - node feature request [\#211](https://github.com/knsv/mermaid/issues/211)
 - Please add prefix for styles [\#208](https://github.com/knsv/mermaid/issues/208)
 - Bad handling of block arguments [\#207](https://github.com/knsv/mermaid/issues/207)
- please consider port to mac osx  [\#203](https://github.com/knsv/mermaid/issues/203)
+- please consider port to mac osx [\#203](https://github.com/knsv/mermaid/issues/203)
 - allow phantomjs \>=1.9.x [\#201](https://github.com/knsv/mermaid/issues/201)
 - syntax for venn diagrams? [\#200](https://github.com/knsv/mermaid/issues/200)
 - Broken CLI Graphs? \(v0.5.1\) [\#196](https://github.com/knsv/mermaid/issues/196)
@ -650,7 +662,7 @@ By doing this clicks and tags are again allowed.
 - Last word in comment boxes getting cut off by word wrap library : \( [\#195](https://github.com/knsv/mermaid/issues/195)
 - Escaping characters in sequence diagram [\#193](https://github.com/knsv/mermaid/issues/193)
 - SVG foreignObject rendering [\#180](https://github.com/knsv/mermaid/issues/180)
- IE9 issue  [\#179](https://github.com/knsv/mermaid/issues/179)
+- IE9 issue [\#179](https://github.com/knsv/mermaid/issues/179)
 - inoperable in an AMD/requirejs environment: IPython Notebook [\#127](https://github.com/knsv/mermaid/issues/127)
 - \[Parser\] Hyphen in participant name bring TypeError [\#74](https://github.com/knsv/mermaid/issues/74)

@ -663,6 +675,7 @@ By doing this clicks and tags are again allowed.
 - Update phantomscript.js [\#182](https://github.com/knsv/mermaid/pull/182) ([phairow](https://github.com/phairow))

 ## [0.5.1](https://github.com/knsv/mermaid/tree/0.5.1) (2015-06-21)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.0...0.5.1)

 **Implemented enhancements:**
@ -699,6 +712,7 @@ By doing this clicks and tags are again allowed.
 - Remove moot `version` property from bower.json [\#172](https://github.com/knsv/mermaid/pull/172) ([kkirsche](https://github.com/kkirsche))

 ## [0.5.0](https://github.com/knsv/mermaid/tree/0.5.0) (2015-06-07)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.4.0...0.5.0)

 **Implemented enhancements:**
@ -734,6 +748,7 @@ By doing this clicks and tags are again allowed.
 - Use a library-level variable for assigning ids [\#134](https://github.com/knsv/mermaid/pull/134) ([bollwyvl](https://github.com/bollwyvl))

 ## [0.4.0](https://github.com/knsv/mermaid/tree/0.4.0) (2015-03-01)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.3.5...0.4.0)

 **Implemented enhancements:**
@ -752,9 +767,11 @@ By doing this clicks and tags are again allowed.
 - Internet Explorer Support [\#99](https://github.com/knsv/mermaid/issues/99)

 ## [0.3.5](https://github.com/knsv/mermaid/tree/0.3.5) (2015-02-15)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.3.4...0.3.5)

 ## [0.3.4](https://github.com/knsv/mermaid/tree/0.3.4) (2015-02-15)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.3.3...0.3.4)

 **Implemented enhancements:**
@ -785,6 +802,7 @@ By doing this clicks and tags are again allowed.
 - Ignore all files except the license and dist/ folder when installing with Bower. [\#112](https://github.com/knsv/mermaid/pull/112) ([jasonbellamy](https://github.com/jasonbellamy))

 ## [0.3.3](https://github.com/knsv/mermaid/tree/0.3.3) (2015-01-25)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.3.2...0.3.3)

 **Implemented enhancements:**
@ -805,6 +823,7 @@ By doing this clicks and tags are again allowed.
 - fix html tags in example usage [\#100](https://github.com/knsv/mermaid/pull/100) ([deiwin](https://github.com/deiwin))

 ## [0.3.2](https://github.com/knsv/mermaid/tree/0.3.2) (2015-01-11)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.3.1...0.3.2)

 **Implemented enhancements:**
@ -827,6 +846,7 @@ By doing this clicks and tags are again allowed.
 - Template change [\#88](https://github.com/knsv/mermaid/pull/88) ([gkchic](https://github.com/gkchic))

 ## [0.3.1](https://github.com/knsv/mermaid/tree/0.3.1) (2015-01-05)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.3.0...0.3.1)

 **Implemented enhancements:**
@ -849,6 +869,7 @@ By doing this clicks and tags are again allowed.
 - Add apostrophe & 'and' [\#72](https://github.com/knsv/mermaid/pull/72) ([sudodoki](https://github.com/sudodoki))

 ## [0.3.0](https://github.com/knsv/mermaid/tree/0.3.0) (2014-12-22)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.16...0.3.0)

 **Implemented enhancements:**
@ -871,6 +892,7 @@ By doing this clicks and tags are again allowed.
 - Allow special symbols for direction along with acronyms [\#66](https://github.com/knsv/mermaid/pull/66) ([vijay40](https://github.com/vijay40))

 ## [0.2.16](https://github.com/knsv/mermaid/tree/0.2.16) (2014-12-15)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.15...0.2.16)

 **Fixed bugs:**
@ -891,11 +913,12 @@ By doing this clicks and tags are again allowed.
 - New grammar will allow statements ending without semicolon as disccused in Issue \#38 [\#63](https://github.com/knsv/mermaid/pull/63) ([vijay40](https://github.com/vijay40))
 - Class based styling [\#62](https://github.com/knsv/mermaid/pull/62) ([bjowes](https://github.com/bjowes))
 - Fix typos [\#60](https://github.com/knsv/mermaid/pull/60) ([sublimino](https://github.com/sublimino))
- Included .DS\_Store in gitignore [\#57](https://github.com/knsv/mermaid/pull/57) ([alvynmcq](https://github.com/alvynmcq))
+- Included .DS_Store in gitignore [\#57](https://github.com/knsv/mermaid/pull/57) ([alvynmcq](https://github.com/alvynmcq))
 - Improves readability discussed in issue \#38 [\#56](https://github.com/knsv/mermaid/pull/56) ([vijay40](https://github.com/vijay40))
 - Added a linting task for gulp [\#43](https://github.com/knsv/mermaid/pull/43) ([serv](https://github.com/serv))

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

 **Fixed bugs:**
@ -911,13 +934,15 @@ By doing this clicks and tags are again allowed.

 **Merged pull requests:**

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

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

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

 **Implemented enhancements:**
@ -932,9 +957,11 @@ By doing this clicks and tags are again allowed.
 - Support unicode chars in labels [\#9](https://github.com/knsv/mermaid/issues/9)

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

 ## [0.2.9](https://github.com/knsv/mermaid/tree/0.2.9) (2014-12-01)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.8...0.2.9)

 **Closed issues:**
@ -947,9 +974,11 @@ By doing this clicks and tags are again allowed.
 - Allow unicode chars in labels [\#13](https://github.com/knsv/mermaid/pull/13) ([codebeige](https://github.com/codebeige))

 ## [0.2.8](https://github.com/knsv/mermaid/tree/0.2.8) (2014-12-01)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.7...0.2.8)

 ## [0.2.7](https://github.com/knsv/mermaid/tree/0.2.7) (2014-12-01)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.6...0.2.7)

 **Closed issues:**
@ -957,9 +986,11 @@ By doing this clicks and tags are again allowed.
 - Provide parser as separate module [\#4](https://github.com/knsv/mermaid/issues/4)

 ## [0.2.6](https://github.com/knsv/mermaid/tree/0.2.6) (2014-11-27)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.5...0.2.6)

 ## [0.2.5](https://github.com/knsv/mermaid/tree/0.2.5) (2014-11-27)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.4...0.2.5)

 **Merged pull requests:**
@ -967,21 +998,27 @@ By doing this clicks and tags are again allowed.
 - Added new shapes! [\#1](https://github.com/knsv/mermaid/pull/1) ([bjowes](https://github.com/bjowes))

 ## [0.2.4](https://github.com/knsv/mermaid/tree/0.2.4) (2014-11-25)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.3...0.2.4)

 ## [0.2.3](https://github.com/knsv/mermaid/tree/0.2.3) (2014-11-24)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.2...0.2.3)

 ## [0.2.2](https://github.com/knsv/mermaid/tree/0.2.2) (2014-11-22)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.1...0.2.2)

 ## [0.2.1](https://github.com/knsv/mermaid/tree/0.2.1) (2014-11-22)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.0...0.2.1)

 ## [0.2.0](https://github.com/knsv/mermaid/tree/0.2.0) (2014-11-22)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.1.1...0.2.0)

 ## [0.1.1](https://github.com/knsv/mermaid/tree/0.1.1) (2014-11-17)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.1.0...0.1.1)

 ## [0.1.0](https://github.com/knsv/mermaid/tree/0.1.0) (2014-11-16)
--- a/docs/Configuration.md
+++ b/docs/Configuration.md
@ -1,27 +1,20 @@
 # Configuration

-Configuration is the second half of Mermaid, after deployment. Together Deployment and Configuration constitute the whole of Mermaid. 
+Configuration is the second half of Mermaid, after deployment. Together Deployment and Configuration constitute the whole of Mermaid.

-This section will introduce the different methods of configuring of the behaviors and appearances of Mermaid Diagrams. 
-The Following are the most commonly used methods, and are all tied to Mermaid [Deployment](./n00b-gettingStarted.md) methods. 
+This section will introduce the different methods of configuring of the behaviors and appearances of Mermaid Diagrams.
+The Following are the most commonly used methods, and are all tied to Mermaid [Deployment](./n00b-gettingStarted.md) methods.

 ## Configuration Section in the [Live Editor](https://mermaid.live/).

-
-## The `initialize()` call, for when Mermaid is called via an API, or through a <script> tag. 
-
+## The `initialize()` call, for when Mermaid is called via an API, or through a <script> tag.

 ## [Directives](./directives.md),

-allows the limited reconfiguration of a diagram just before it is rendered. It can alter the font style, color and other aesthetic aspects of the diagram. you can pass a directive alongside your definition inside `%%{ }%%`, either above or below your diagram definition. 
+allows the limited reconfiguration of a diagram just before it is rendered. It can alter the font style, color and other aesthetic aspects of the diagram. you can pass a directive alongside your definition inside `%%{ }%%`, either above or below your diagram definition.

 ## Theme Creation:
-An application of using Directives to change [Themes](./theming.md). `Theme` is an value within mermaid's configuration that dictates the color scheme for diagrams. 

+An application of using Directives to change [Themes](./theming.md). `Theme` is an value within mermaid's configuration that dictates the color scheme for diagrams.

 If you are interested in altering and customizing your Mermaid Diagrams, you will find the methods and values available for [Configuration](./Setup.md) here. It includes themes
-
-
-
-
-
--- a/docs/README.md
+++ b/docs/README.md
@ -4,8 +4,7 @@

 It is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.

->If you are familiar with Markdown you should have no problem learning [Mermaid's Syntax](./n00b-syntaxReference.md).
-
+> If you are familiar with Markdown you should have no problem learning [Mermaid's Syntax](./n00b-syntaxReference.md).

 <img src="img/header.png" alt="" />

@ -14,23 +13,23 @@ It is a JavaScript based diagramming and charting tool that renders Markdown-ins
 [![Build Status](https://travis-ci.org/mermaid-js/mermaid.svg?branch=master)](https://travis-ci.org/mermaid-js/mermaid) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)

 <!-- Mermaid book banner -->
+
 [![Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!](img/book-banner-post-release.jpg)](https://mermaid-js.github.io/mermaid/landing/)

-
 <!-- <Main description> -->
-Mermaid is a JavaScript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams.  The main purpose of Mermaid is to help documentation catch up with development.
+
+Mermaid is a JavaScript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development.

 > Doc-Rot is a Catch-22 that Mermaid helps to solve.

 Diagramming and documentation costs precious developer time and gets outdated quickly.
 But not having diagrams or docs ruins productivity and hurts organizational learning.<br/>
 Mermaid addresses this problem by enabling users to create easily modifiable diagrams, it can also be made part of production scripts (and other pieces of code).<br/>
- <br/>
+<br/>
 Mermaid allows even non-programmers to easily create detailed and diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
 [Tutorials](./Tutorials.md) has video tutorials.
 Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./integrations.md).

-
 For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./n00b-overview.md) and [Usage](./usage.md).

 🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/docs/development.md) | 📜 [Version Log](./CHANGELOG.md) | 🔌 [Plug-Ins](./integrations.md)
@ -43,7 +42,6 @@ For a more detailed introduction to Mermaid and some of its more basic uses, loo

 In our release process we rely heavily on visual regression tests using [applitools](https://applitools.com/). Applitools is a great service which has been easy to use and integrate with our tests.

-
 <a href="https://applitools.com/">
 <svg width="170" height="32" viewBox="0 0 170 32" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" maskUnits="userSpaceOnUse" x="27" y="0" width="143" height="32"><path fill-rule="evenodd" clip-rule="evenodd" d="M27.732.227h141.391v31.19H27.733V.227z" fill="#fff"></path></mask><g mask="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M153.851 22.562l1.971-3.298c1.291 1.219 3.837 2.402 5.988 2.402 1.971 0 2.903-.753 2.903-1.829 0-2.832-10.253-.502-10.253-7.313 0-2.904 2.51-5.45 7.099-5.45 2.904 0 5.234 1.004 6.955 2.367l-1.829 3.226c-1.039-1.075-3.011-2.008-5.126-2.008-1.65 0-2.725.717-2.725 1.685 0 2.546 10.289.395 10.289 7.386 0 3.19-2.724 5.52-7.528 5.52-3.012 0-5.916-1.003-7.744-2.688zm-5.7 2.259h4.553V.908h-4.553v23.913zm-6.273-8.676c0-2.689-1.578-5.02-4.446-5.02-2.832 0-4.409 2.331-4.409 5.02 0 2.724 1.577 5.055 4.409 5.055 2.868 0 4.446-2.33 4.446-5.055zm-13.588 0c0-4.912 3.442-9.07 9.142-9.07 5.736 0 9.178 4.158 9.178 9.07 0 4.911-3.442 9.106-9.178 9.106-5.7 0-9.142-4.195-9.142-9.106zm-5.628 0c0-2.689-1.577-5.02-4.445-5.02-2.832 0-4.41 2.331-4.41 5.02 0 2.724 1.578 5.055 4.41 5.055 2.868 0 4.445-2.33 4.445-5.055zm-13.587 0c0-4.912 3.441-9.07 9.142-9.07 5.736 0 9.178 4.158 9.178 9.07 0 4.911-3.442 9.106-9.178 9.106-5.701 0-9.142-4.195-9.142-9.106zm-8.425 4.338v-8.999h-2.868v-3.98h2.868V2.773h4.553v4.733h3.514v3.979h-3.514v7.78c0 1.111.574 1.936 1.578 1.936.681 0 1.326-.251 1.577-.538l.968 3.478c-.681.609-1.9 1.11-3.8 1.11-3.191 0-4.876-1.648-4.876-4.767zm-8.962 4.338h4.553V7.505h-4.553V24.82zm-.43-21.905a2.685 2.685 0 012.688-2.69c1.506 0 2.725 1.184 2.725 2.69a2.724 2.724 0 01-2.725 2.724c-1.47 0-2.688-1.219-2.688-2.724zM84.482 24.82h4.553V.908h-4.553v23.913zm-6.165-8.676c0-2.976-1.793-5.02-4.41-5.02-1.47 0-3.119.825-3.908 1.973v6.094c.753 1.111 2.438 2.008 3.908 2.008 2.617 0 4.41-2.044 4.41-5.055zm-8.318 6.453v8.82h-4.553V7.504H70v2.187c1.327-1.685 3.227-2.618 5.342-2.618 4.446 0 7.672 3.299 7.672 9.07 0 5.773-3.226 9.107-7.672 9.107-2.043 0-3.907-.86-5.342-2.653zm-10.718-6.453c0-2.976-1.793-5.02-4.41-5.02-1.47 0-3.119.825-3.908 1.973v6.094c.753 1.111 2.438 2.008 3.908 2.008 2.617 0 4.41-2.044 4.41-5.055zm-8.318 6.453v8.82H46.41V7.504h4.553v2.187c1.327-1.685 3.227-2.618 5.342-2.618 4.446 0 7.672 3.299 7.672 9.07 0 5.773-3.226 9.107-7.672 9.107-2.043 0-3.908-.86-5.342-2.653zm-11.758-1.936V18.51c-.753-1.004-2.187-1.542-3.657-1.542-1.793 0-3.263.968-3.263 2.617 0 1.65 1.47 2.582 3.263 2.582 1.47 0 2.904-.502 3.657-1.506zm0 4.159v-1.829c-1.183 1.434-3.227 2.259-5.485 2.259-2.761 0-5.988-1.864-5.988-5.736 0-4.087 3.227-5.593 5.988-5.593 2.33 0 4.337.753 5.485 2.115V13.85c0-1.756-1.506-2.904-3.8-2.904-1.829 0-3.55.717-4.984 2.044L28.63 9.8c2.115-1.901 4.84-2.726 7.564-2.726 3.98 0 7.6 1.578 7.6 6.561v11.186h-4.588z" fill="#00A298"></path></g><path fill-rule="evenodd" clip-rule="evenodd" d="M14.934 16.177c0 1.287-.136 2.541-.391 3.752-1.666-1.039-3.87-2.288-6.777-3.752 2.907-1.465 5.11-2.714 6.777-3.753.255 1.211.39 2.466.39 3.753m4.6-7.666V4.486a78.064 78.064 0 01-4.336 3.567c-1.551-2.367-3.533-4.038-6.14-5.207C11.1 4.658 12.504 6.7 13.564 9.262 5.35 15.155 0 16.177 0 16.177s5.35 1.021 13.564 6.915c-1.06 2.563-2.463 4.603-4.507 6.415 2.607-1.169 4.589-2.84 6.14-5.207a77.978 77.978 0 014.336 3.568v-4.025s-.492-.82-2.846-2.492c.6-1.611.93-3.354.93-5.174a14.8 14.8 0 00-.93-5.174c2.354-1.673 2.846-2.492 2.846-2.492" fill="#00A298"></path></svg>
 </a>
@ -158,6 +156,7 @@ journey
      Go downstairs: 5: Me
      Sit down: 5: Me
 ```
+
 ![Journey diagram](img/user-journey.png)

 ## Installation
@ -179,13 +178,14 @@ Replace `<version>` with the desired version number.
 Latest Version: [https://unpkg.com/browse/mermaid@8.8.0/](https://unpkg.com/browse/mermaid@8.8.0/)

 ## Deploying Mermaid
+
 To Deploy Mermaid:

 1. You will need to install node v16, which would have npm
 2. Download yarn using npm
 3. Enter the following command: `yarn add mermaid`
 4. You can then add mermaid as a dev dependency using this command:
-    `yarn add --dev mermaid`
+   `yarn add --dev mermaid`

 ### [Mermaid API](./Setup.md):

@ -193,12 +193,14 @@ To Deploy Mermaid:

 ```html
 <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
-<script>mermaid.initialize({startOnLoad:true});
+<script>
+  mermaid.initialize({ startOnLoad: true });
 </script>
 ```
+
 **Doing so will command the mermaid parser to look for the `<div>` tags with `class="mermaid"`. From these tags mermaid will try to read the diagram/chart definitions and render them into SVG charts.**

- **Examples can be found at** [Other examples](/examples)
+**Examples can be found at** [Other examples](/examples)

 ## Sibling projects

@ -250,6 +252,7 @@ We recommend you to install [editor plugins](https://eslint.org/docs/user-guide/
 ```sh
 yarn test
 ```
+
 Manual test in browser: open `dist/index.html`

 ### Release
@ -280,21 +283,22 @@ Detailed information about how to contribute can be found in the [contribution g

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

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

-*Unfortunately you can not have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code.*
+_Unfortunately you can not have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code._

 ## Reporting vulnerabilities
+
 To report a vulnerability, please e-mail security@mermaid.live with a description of the issue, the steps you took to create the issue, affected versions, and if known, mitigations for the issue.

 ## Appreciation
+
 A quick note from Knut Sveidqvist:
->*Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!*
->*Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering.*
->*Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017.*
+
+> _Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!_ >_Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering._ >_Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
 >
->*Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!*
+> _Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!_

 ---

-*Mermaid was created by Knut Sveidqvist for easier documentation.*
+_Mermaid was created by Knut Sveidqvist for easier documentation._
--- a/docs/Setup.md
+++ b/docs/Setup.md
@ -64,12 +64,12 @@ Theme , the CSS style sheet

 **Notes:**

-   Trace: 0
-   Debug: 1
-   Info: 2
-   Warn: 3
-   Error: 4
-   Fatal: 5 (default)
+- Trace: 0
+- Debug: 1
+- Info: 2
+- Warn: 3
+- Error: 4
+- Fatal: 5 (default)

 ## securityLevel

@ -79,13 +79,13 @@ Theme , the CSS style sheet

 **Notes**:

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

 ## startOnLoad

@ -1420,7 +1420,7 @@ function _Default value: At default, will mirror Global Config_

 ### Parameters

-   `conf` **MermaidConfig** The base currentConfig to use as siteConfig
+- `conf` **MermaidConfig** The base currentConfig to use as siteConfig

 Returns **[object][5]** The siteConfig

@ -1450,7 +1450,7 @@ corresponding siteConfig value.

 ### Parameters

-   `conf` **any** The potential currentConfig
+- `conf` **any** The potential currentConfig

 Returns **any** The currentConfig merged with the sanitized conf

@ -1473,14 +1473,14 @@ $(function () {

 ### Parameters

-   `id` **[string][6]** The id of the element to be rendered
-   `text` **[string][6]** The graph definition
-   `cb` **function (svgCode: [string][6], bindFunctions: function (element: [Element][7]): void): void** 
-   `container` **[Element][7]** Selector to element in which a div with the graph temporarily will be
-      inserted. If one is provided a hidden div will be inserted in the body of the page instead. The
-      element will be removed when rendering is completed.
+- `id` **[string][6]** The id of the element to be rendered
+- `text` **[string][6]** The graph definition
+- `cb` **function (svgCode: [string][6], bindFunctions: function (element: [Element][7]): void): void**
+- `container` **[Element][7]** Selector to element in which a div with the graph temporarily will be
+  inserted. If one is provided a hidden div will be inserted in the body of the page instead. The
+  element will be removed when rendering is completed.

-Returns **void** 
+Returns **void**

 ## getConfig

@ -1507,7 +1507,7 @@ options in-place

 ### Parameters

-   `options` **any** The potential setConfig parameter
+- `options` **any** The potential setConfig parameter

 ## addDirective

@ -1515,7 +1515,7 @@ Pushes in a directive to the configuration

 ### Parameters

-   `directive` **[object][5]** The directive to push in
+- `directive` **[object][5]** The directive to push in

 ## reset

@ -1535,17 +1535,17 @@ Pushes in a directive to the configuration

 ### Parameters

-   `config`   (optional, default `siteConfig`)
+- `config` (optional, default `siteConfig`)

-Returns **void** 
+Returns **void**

 ## initialize

 ### Parameters

-   `options` **MermaidConfig** 
+- `options` **MermaidConfig**

-## 
+##

 ## mermaidAPI configuration defaults

@ -1610,15 +1610,9 @@ Returns **void**
 ```

 [1]: https://github.com/mermaid-js/mermaid/blob/develop/src/mermaidAPI.js
-
 [2]: Setup.md?id=render
-
 [3]: 8.6.0_docs.md
-
 [4]: #mermaidapi-configuration-defaults
-
 [5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
-
 [6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
-
 [7]: https://developer.mozilla.org/docs/Web/API/Element
--- a/docs/Tutorials.md
+++ b/docs/Tutorials.md
@ -1,13 +1,13 @@
 # Tutorials

-This is  list of publicly available Tutorials for using Mermaid.JS . This is intended as a basic introduction for the use of the Live Editor for generating diagrams, and deploying Mermaid.JS through HTML.
+This is list of publicly available Tutorials for using Mermaid.JS . This is intended as a basic introduction for the use of the Live Editor for generating diagrams, and deploying Mermaid.JS through HTML.

 **Note that these tutorials might display an older interface, but the usage of the live-editor will largely be the same.**

 For most purposes, you can use the [Live Editor](https://mermaid-js.github.io/mermaid-live-editor), to quickly and easily render a diagram.

-
 ## Live-Editor Tutorials
+
 The definitions that can be generated the Live-Editor are also backwards-compatible as of version 8.7.0.

 [Chris Chinchilla: Hands on - Text-based diagrams with Mermaid](https://www.youtube.com/watch?v=4_LdV1cs2sA)
@ -20,8 +20,8 @@ The definitions that can be generated the Live-Editor are also backwards-compati

 [Eddie Jaoude: Can you code your diagrams?](https://www.youtube.com/watch?v=9HZzKkAqrX8)

-
 ## Mermaid with HTML
+
 Examples are provided in [Getting Started](n00b-gettingStarted.md)

 **CodePen Examples:**
@ -32,7 +32,6 @@ https://codepen.io/tdkn/pen/vZxQzd

 https://codepen.io/janzeteachesit/pen/OWWZKN

-
 ## Mermaid with Text Area

 https://codepen.io/Ryuno-Ki/pen/LNxwgR
@ -43,7 +42,6 @@ https://codepen.io/Ryuno-Ki/pen/LNxwgR

 [K8s.dev blog: Improve your documentation with Mermaid.js diagrams](https://www.kubernetes.dev/blog/2021/12/01/improve-your-documentation-with-mermaid.js-diagrams/)

-
 ## Jupyter Integration with mermaid-js

 Here's an example of Python integration with mermaid-js which uses the mermaid.ink service, that displays the graph in a Jupyter notebook.
--- a/docs/_navbar.md
+++ b/docs/_navbar.md
@ -1,13 +1,13 @@
-* Getting started
+- Getting started

-  * [Quick start](quickstart.md)
-  * [Writing more pages](more-pages.md)
-  * [Custom navbar](custom-navbar.md)
-  * [Cover page](cover.md)
+  - [Quick start](quickstart.md)
+  - [Writing more pages](more-pages.md)
+  - [Custom navbar](custom-navbar.md)
+  - [Cover page](cover.md)

-* Configuration
-  * [Configuration](configuration.md)
-  * [Themes](themes.md)
-  * [Using plugins](plugins.md)
-  * [Markdown configuration](markdown.md)
-  * [Language highlight](language-highlight.md)
+- Configuration
+  - [Configuration](configuration.md)
+  - [Themes](themes.md)
+  - [Using plugins](plugins.md)
+  - [Markdown configuration](markdown.md)
+  - [Language highlight](language-highlight.md)
--- a/docs/_sidebar.md
+++ b/docs/_sidebar.md
@ -5,6 +5,7 @@
  - [Syntax and Configuration](n00b-syntaxReference.md)

 - 📊 Diagram Syntax
+
  - [Flowchart](flowchart.md)
  - [Sequence Diagram](sequenceDiagram.md)
  - [Class Diagram](classDiagram.md)
@ -30,6 +31,7 @@
  - [Advanced usage](n00b-advanced.md)

 - 📚 Misc
+
  - [Use-Cases and Integrations](integrations.md)
  - [FAQ](faq.md)

--- a/docs/accessibility.md
+++ b/docs/accessibility.md
@ -3,21 +3,23 @@
 **Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/accessibility.md)

 ## Accessibility
+
 Now with Mermaid library is in much wider use, we have started to work towwards more accessible features, based on the feedback from the community.

 TO begin with, we have added a new feature to Mermaid library, which is to support accessibility options, **Accessibility Title** and **Accessibility Description**.

 This support for accessibility options is available for all the diagrams/chart types. Also, we have tired to keep the same format for the accessibility options, so that it is easy to understand and maintain.

-
 ## Defining Accessibility Options

 ### Single line accessibility values
-The diagram authors can now add the accessibility options in the diagram definition, using the `accTitle` and `accDescr` keywords, where each keyword is followed by `:` and the string value for title and description like:
-  `accTitle: "Your Accessibility Title"` or
-  `accDescr: "Your Accessibility Description"`

-**When these two options are defined, they will  add a coressponding  `<title>` and `<desc>` tag in the SVG.**
+The diagram authors can now add the accessibility options in the diagram definition, using the `accTitle` and `accDescr` keywords, where each keyword is followed by `:` and the string value for title and description like:
+
+- `accTitle: "Your Accessibility Title"` or
+- `accDescr: "Your Accessibility Description"`
+
+**When these two options are defined, they will add a coressponding `<title>` and `<desc>` tag in the SVG.**

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

@ -30,24 +32,23 @@ Let us take a look at the following example with a flowchart diagram:
      C -->|One| D[Result 1]

 ```
+
 See in the code snippet above, the `accTitle` and `accDescr` are defined in the diagram definition. They result in the following tags in SVG code:

 ![Accessibility options rendered inside SVG](img/accessibility-div-example.png)

-
 ### Multi-line Accessibility title/description
+
 You can also define the accessibility options in a multi-line format, where the keyword is followed by opening curly bracket `{` and then mutltile lines, followed by a closing `}`.

-`accTitle: My single line title value` (***single line format***)
+`accTitle: My single line title value` (**_single line format_**)

 vs

-`accDescr: {
-  My multi-line description
-  of the diagram
-}` (***multi-line format***)
+`accDescr: { My multi-line description of the diagram }` (**_multi-line format_**)

 Let us look at it in the following example, with same flowchart:
+
 ```mermaid-example
   graph LR
      accTitle: Big decisions
@ -62,6 +63,7 @@ Let us look at it in the following example, with same flowchart:
      C -->|One| D[Result 1]

 ```
+
 See in the code snippet above, the `accTitle` and `accDescr` are defined in the diagram definition. They result in the following tags in SVG code:

 ![Accessibility options rendered inside SVG](img/accessibility-div-example-2.png)
@ -116,21 +118,21 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the

 #### User Journey Diagram

-  ```mermaid-example
-    journey
-        accTitle: My User Journey Diagram
-        accDescr: My User Journey Diagram Description
+```mermaid-example
+  journey
+      accTitle: My User Journey Diagram
+      accDescr: My User Journey Diagram Description

-        title My working day
-        section Go to work
-          Make tea: 5: Me
-          Go upstairs: 3: Me
-          Do work: 1: Me, Cat
-        section Go home
-          Go downstairs: 5: Me
-          Sit down: 5: Me
+      title My working day
+      section Go to work
+        Make tea: 5: Me
+        Go upstairs: 3: Me
+        Do work: 1: Me, Cat
+      section Go home
+        Go downstairs: 5: Me
+        Sit down: 5: Me

-  ```
+```

 #### Gantt Chart

@ -164,51 +166,45 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the
    "Iron" :  5

 ```
+
 #### Requirement Diagram

-  ```mermaid-example
-    requirementDiagram
-        accTitle: My Requirement Diagram
-        accDescr: My Requirement Diagram Description
+```mermaid-example
+  requirementDiagram
+      accTitle: My Requirement Diagram
+      accDescr: My Requirement Diagram Description

-         requirement test_req {
-    id: 1
-    text: the test text.
-    risk: high
-    verifymethod: test
-    }
+       requirement test_req {
+  id: 1
+  text: the test text.
+  risk: high
+  verifymethod: test
+  }

-    element test_entity {
-    type: simulation
-    }
+  element test_entity {
+  type: simulation
+  }

-    test_entity - satisfies -> test_req
+  test_entity - satisfies -> test_req

-  ```
+```

 #### Gitgraph

-  ```mermaid-example
-    gitGraph
-        accTitle: My Gitgraph Accessibility Title
-        accDescr: My Gitgraph Accessibility Description
-
-       commit
-       commit
-       branch develop
-       checkout develop
-       commit
-       commit
-       checkout main
-       merge develop
-       commit
-       commit
-
-  ```
-
-
-
-
-
+```mermaid-example
+  gitGraph
+      accTitle: My Gitgraph Accessibility Title
+      accDescr: My Gitgraph Accessibility Description

+     commit
+     commit
+     branch develop
+     checkout develop
+     commit
+     commit
+     checkout main
+     merge develop
+     commit
+     commit

+```
--- a/docs/breakingChanges.md
+++ b/docs/breakingChanges.md
@ -27,13 +27,13 @@ mermaid.initialize({
 In old versions you needed to reference a CSS file in your HTML:

 ```html
-<link rel="stylesheet" href="mermaid.min.css">
+<link rel="stylesheet" href="mermaid.min.css" />
 ```

 or

 ```html
-<link rel="stylesheet" href="mermaid.forest.min.css">
+<link rel="stylesheet" href="mermaid.forest.min.css" />
 ```

 Now it is not needed, and there are no more CSS files in the distribution files.
@ -42,8 +42,8 @@ You just:

 ```javascript
 mermaid.initialize({
-    theme: 'forest'
-})
+  theme: 'forest',
+});
 ```

 and it works like a charm because now the CSS is inline with the SVG to allow simpler portability.
--- a/docs/c4c.md
+++ b/docs/c4c.md
@ -1,10 +1,9 @@
 # C4 Diagrams

 **Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/gitgraph.md)
+
 > C4 Diagram: This is an experimental diagram for now. The syntax and properties can change in future releases. Proper documentation will be provided when the syntax is stable.

-
-
 Mermaid's c4 diagram syntax is compatible with plantUML. See example below:

 ```mermaid-example
@ -12,32 +11,32 @@ Mermaid's c4 diagram syntax is compatible with plantUML. See example below:
      title System Context diagram for Internet Banking System
      Enterprise_Boundary(b0, "BankBoundary0") {
        Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
-        Person(customerB, "Banking Customer B")      
-        Person_Ext(customerC, "Banking Customer C", "desc")            
+        Person(customerB, "Banking Customer B")
+        Person_Ext(customerC, "Banking Customer C", "desc")

        Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")

-        System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")  
+        System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")

        Enterprise_Boundary(b1, "BankBoundary") {
-         
-          SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")      

-          System_Boundary(b2, "BankBoundary2") {  
-            System(SystemA, "Banking System A")  
-            System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")        
-          } 
+          SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")

-          System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.") 
-          SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.") 
+          System_Boundary(b2, "BankBoundary2") {
+            System(SystemA, "Banking System A")
+            System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
+          }

-          Boundary(b3, "BankBoundary3", "boundary") {  
-            SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")        
-            SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.") 
+          System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
+          SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
+
+          Boundary(b3, "BankBoundary3", "boundary") {
+            SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
+            SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
          }
        }
      }
-      
+
      BiRel(customerA, SystemAA, "Uses")
      BiRel(SystemAA, SystemE, "Uses")
      Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
@ -48,7 +47,7 @@ Mermaid's c4 diagram syntax is compatible with plantUML. See example below:
      UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
      UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
      UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
-      
+
      UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")


@ -58,11 +57,11 @@ For an example, see the source code demos/index.html

 5 types of C4 charts are supported.

- - System Context (C4Context)
- - Container diagram (C4Container)
- - Component diagram (C4Component)
- - Dynamic diagram (C4Dynamic)
- - Deployment diagram (C4Deployment)
+- System Context (C4Context)
+- Container diagram (C4Container)
+- Component diagram (C4Component)
+- Dynamic diagram (C4Dynamic)
+- Deployment diagram (C4Deployment)

 Please refer to the linked document [C4-PlantUML syntax](https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/README.md) for how to write the c4 diagram.

@ -85,73 +84,71 @@ The following unfinished features are not supported in the short term.
 - [ ] link
 - [ ] Legend

- [X] System Context
- - [X] Person(alias, label, ?descr, ?sprite, ?tags, $link)
- - [X] Person_Ext
- - [X] System(alias, label, ?descr, ?sprite, ?tags, $link)
- - [X] SystemDb
- - [X] SystemQueue
- - [X] System_Ext
- - [X] SystemDb_Ext
- - [X] SystemQueue_Ext
- - [X] Boundary(alias, label, ?type, ?tags, $link)
- - [X] Enterprise_Boundary(alias, label, ?tags, $link)
- - [X] System_Boundary
+- [x] System Context
+- - [x] Person(alias, label, ?descr, ?sprite, ?tags, $link)
+- - [x] Person_Ext
+- - [x] System(alias, label, ?descr, ?sprite, ?tags, $link)
+- - [x] SystemDb
+- - [x] SystemQueue
+- - [x] System_Ext
+- - [x] SystemDb_Ext
+- - [x] SystemQueue_Ext
+- - [x] Boundary(alias, label, ?type, ?tags, $link)
+- - [x] Enterprise_Boundary(alias, label, ?tags, $link)
+- - [x] System_Boundary

- [X] Container diagram
- - [X] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
- - [X] ContainerDb
- - [X] ContainerQueue
- - [X] Container_Ext
- - [X] ContainerDb_Ext
- - [X] ContainerQueue_Ext
- - [X] Container_Boundary(alias, label, ?tags, $link)
+- [x] Container diagram
+- - [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
+- - [x] ContainerDb
+- - [x] ContainerQueue
+- - [x] Container_Ext
+- - [x] ContainerDb_Ext
+- - [x] ContainerQueue_Ext
+- - [x] Container_Boundary(alias, label, ?tags, $link)

- [X] Component diagram
- - [X] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
- - [X] ComponentDb
- - [X] ComponentQueue
- - [X] Component_Ext
- - [X] ComponentDb_Ext
- - [X] ComponentQueue_Ext
+- [x] Component diagram
+- - [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
+- - [x] ComponentDb
+- - [x] ComponentQueue
+- - [x] Component_Ext
+- - [x] ComponentDb_Ext
+- - [x] ComponentQueue_Ext

- [X] Dynamic diagram
- - [X] RelIndex(index, from, to, label, ?tags, $link)
-
- [X] Deployment diagram
- - [X] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
- - [X] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
- - [X] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
- - [X] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
-
- [X] Relationship Types
- - [X] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
- - [X] BiRel (bidirectional relationship)
- - [X] Rel_U, Rel_Up
- - [X] Rel_D, Rel_Down
- - [X] Rel_L, Rel_Left
- - [X] Rel_R, Rel_Right
- - [X] Rel_Back
- - [X] RelIndex  * Compatible with C4-Plantuml syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written.
+- [x] Dynamic diagram
+- - [x] RelIndex(index, from, to, label, ?tags, $link)

+- [x] Deployment diagram
+- - [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
+- - [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
+- - [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
+- - [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()

+- [x] Relationship Types
+- - [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
+- - [x] BiRel (bidirectional relationship)
+- - [x] Rel_U, Rel_Up
+- - [x] Rel_D, Rel_Down
+- - [x] Rel_L, Rel_Left
+- - [x] Rel_R, Rel_Right
+- - [x] Rel_Back
+- - [x] RelIndex \* Compatible with C4-Plantuml syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written.

 - [ ] Custom tags/stereotypes support and skinparam updates
 - - [ ] AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend.
 - - [ ] AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new Relationship tag. The styles of the tagged relationships are updated and the tag is displayed in the calculated legend.
- - [X] UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): This call updates the default style of the elements (component, ...) and creates no additional legend entry.
- - [X] UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY): This call updates the default relationship colors and creates no additional legend entry. Two new parameters, offsetX and offsetY, are added to set the offset of the original position of the text.
+- - [x] UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): This call updates the default style of the elements (component, ...) and creates no additional legend entry.
+- - [x] UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY): This call updates the default relationship colors and creates no additional legend entry. Two new parameters, offsetX and offsetY, are added to set the offset of the original position of the text.
 - - [ ] RoundedBoxShape(): This call returns the name of the rounded box shape and can be used as ?shape argument.
 - - [ ] EightSidedShape(): This call returns the name of the eight sided shape and can be used as ?shape argument.
 - - [ ] DashedLine(): This call returns the name of the dashed line and can be used as ?lineStyle argument.
 - - [ ] DottedLine(): This call returns the name of the dotted line and can be used as ?lineStyle argument.
 - - [ ] BoldLine(): This call returns the name of the bold line and can be used as ?lineStyle argument.
- - [X] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): New. This call updates the default c4ShapeInRow(4) and c4BoundaryInRow(2). 
+- - [x] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): New. This call updates the default c4ShapeInRow(4) and c4BoundaryInRow(2).

-
-There are two ways to assign parameters with question marks. One uses the non-named parameter assignment method in the order of the parameters, and the other uses the named parameter assignment method, where the name must start with a $ symbol. 
+There are two ways to assign parameters with question marks. One uses the non-named parameter assignment method in the order of the parameters, and the other uses the named parameter assignment method, where the name must start with a $ symbol.

 Example: UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY)
+
 ```
 UpdateRelStyle(customerA, bankA, "red", "blue", "-40", "60")
 UpdateRelStyle(customerA, bankA, $offsetX="-40", $offsetY="60", $lineColor="blue", $textColor="red")
@ -166,32 +163,32 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
      title System Context diagram for Internet Banking System
      Enterprise_Boundary(b0, "BankBoundary0") {
        Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
-        Person(customerB, "Banking Customer B")      
-        Person_Ext(customerC, "Banking Customer C", "desc")            
+        Person(customerB, "Banking Customer B")
+        Person_Ext(customerC, "Banking Customer C", "desc")

        Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")

-        System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")  
+        System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")

        Enterprise_Boundary(b1, "BankBoundary") {
-         
-          SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")      

-          System_Boundary(b2, "BankBoundary2") {  
-            System(SystemA, "Banking System A")  
-            System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")        
-          } 
+          SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")

-          System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.") 
-          SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.") 
+          System_Boundary(b2, "BankBoundary2") {
+            System(SystemA, "Banking System A")
+            System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
+          }

-          Boundary(b3, "BankBoundary3", "boundary") {  
-            SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")        
-            SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.") 
+          System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
+          SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
+
+          Boundary(b3, "BankBoundary3", "boundary") {
+            SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
+            SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
          }
        }
      }
-      
+
      BiRel(customerA, SystemAA, "Uses")
      BiRel(SystemAA, SystemE, "Uses")
      Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
@ -202,7 +199,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
      UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
      UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
      UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
-      
+
      UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")

 ```
@ -228,28 +225,29 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
    System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")

    Rel(customer, web_app, "Uses", "HTTPS")
-    UpdateRelStyle(customer, web_app, $offsetY="60", $offsetX="90")     
+    UpdateRelStyle(customer, web_app, $offsetY="60", $offsetX="90")
    Rel(customer, spa, "Uses", "HTTPS")
-    UpdateRelStyle(customer, spa, $offsetY="-40")    
+    UpdateRelStyle(customer, spa, $offsetY="-40")
    Rel(customer, mobile_app, "Uses")
-    UpdateRelStyle(customer, mobile_app, $offsetY="-30") 
+    UpdateRelStyle(customer, mobile_app, $offsetY="-30")

    Rel(web_app, spa, "Delivers")
-    UpdateRelStyle(web_app, spa, $offsetX="130") 
+    UpdateRelStyle(web_app, spa, $offsetX="130")
    Rel(spa, backend_api, "Uses", "async, JSON/HTTPS")
    Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS")
    Rel_Back(database, backend_api, "Reads from and writes to", "sync, JDBC")

    Rel(email_system, customer, "Sends e-mails to")
-    UpdateRelStyle(email_system, customer, $offsetX="-45")    
+    UpdateRelStyle(email_system, customer, $offsetX="-45")
    Rel(backend_api, email_system, "Sends e-mails using", "sync, SMTP")
-    UpdateRelStyle(backend_api, email_system, $offsetY="-60")    
+    UpdateRelStyle(backend_api, email_system, $offsetY="-60")
    Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
-    UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140") 
+    UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140")

 ```

 ## C4 Component diagram (C4Component)
+
 ```mermaid-example
    C4Component
    title Component diagram for Internet Banking System - API Application
@ -277,7 +275,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
    Rel(ma, sign, "Uses", "JSON/HTTPS")
    Rel(ma, accounts, "Uses", "JSON/HTTPS")

-    UpdateRelStyle(spa, sign, $offsetY="-40") 
+    UpdateRelStyle(spa, sign, $offsetY="-40")
    UpdateRelStyle(spa, accounts, $offsetX="40", $offsetY="40")

    UpdateRelStyle(ma, sign, $offsetX="-90", $offsetY="40")
--- a/docs/developer-docs/configuration.md
+++ b/docs/developer-docs/configuration.md
@ -2,9 +2,9 @@

 When mermaid starts, configuration is extracted to determine a configuration to be used for a diagram. There are 3 sources for configuration:

-* The default configuration
-* Overrides at the site level are set by the initialize call, and will be applied to all diagrams in the site/app. The term for this is the **siteConfig**.
-* Directives - diagram authors can update select configuration parameters directly in the diagram code via directives. These are applied to the render config.
+- The default configuration
+- Overrides at the site level are set by the initialize call, and will be applied to all diagrams in the site/app. The term for this is the **siteConfig**.
+- Directives - diagram authors can update select configuration parameters directly in the diagram code via directives. These are applied to the render config.

 **The render config** is configuration that is used when rendering by applying these configurations.

--- a/docs/development.md
+++ b/docs/development.md
@ -22,11 +22,11 @@ This means that **you should branch off your pull request from develop** and dir

 ## Contributing Code

-We make all changes via Pull Requests. As we have many Pull Requests from developers new to mermaid, we have put in place a process, wherein *knsv, Knut Sveidqvist* is the primary reviewer of changes and merging pull requests. The process is as follows:
+We make all changes via Pull Requests. As we have many Pull Requests from developers new to mermaid, we have put in place a process, wherein _knsv, Knut Sveidqvist_ is the primary reviewer of changes and merging pull requests. The process is as follows:

-* Large changes reviewed by knsv or other developer asked to review by knsv
-* Smaller, low-risk changes like dependencies, documentation, etc. can be merged by active collaborators
-* Documentation (we encourage updates to the docs folder; you can submit them via direct commits)
+- Large changes reviewed by knsv or other developer asked to review by knsv
+- Smaller, low-risk changes like dependencies, documentation, etc. can be merged by active collaborators
+- Documentation (we encourage updates to the docs folder; you can submit them via direct commits)

 When you commit code, create a branch with the following naming convention:

@ -70,7 +70,7 @@ To start working with the e2e tests:

 1. Run `yarn dev` to start the dev server
 2. Start **Cypress** by running `cypress open` in the **mermaid** folder.  
-(Make sure you have path to Cypress in order, the binary is located in `node_modules/.bin`).
+   (Make sure you have path to Cypress in order, the binary is located in `node_modules/.bin`).

 The rendering tests are very straightforward to create. There is a function `imgSnapshotTest`, which takes a diagram in text form and the mermaid options, and it renders that diagram in Cypress.

@ -80,8 +80,8 @@ This is what a rendering test looks like:

 ```js
 it('should render forks and joins', () => {
-    imgSnapshotTest(
-        `
+  imgSnapshotTest(
+    `
    stateDiagram
    state fork_state &lt;&lt;fork&gt;&gt;
      [*] --> fork_state
@ -94,9 +94,9 @@ it('should render forks and joins', () => {
      join_state --> State4
      State4 --> [*]
    `,
-        { logLevel: 0 }
-    );
-    cy.get('svg');
+    { logLevel: 0 }
+  );
+  cy.get('svg');
 });
 ```

--- a/docs/directives.md
+++ b/docs/directives.md
@ -3,38 +3,45 @@
 **Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/directives.md)

 ## Directives
+
 Directives gives a diagram author the capability to alter the appearance of a diagram before rendering by changing the applied configuration.

 The significance of having directives is that you have them available while writing the diagram, and can modify the default global and diagram specific configurations. So, directives are applied on top of the default configurations. The beauty of directives is that you can use them to alter configuration settings for a specific diagram, i.e. at an individual level.

-While directives allow you to change most of the default configuration settings, there are some that are not available, that too for security reasons. Also, you do have the *option to define the set of configurations* that you would allow to be available to the diagram author for overriding with help of directives.
+While directives allow you to change most of the default configuration settings, there are some that are not available, that too for security reasons. Also, you do have the _option to define the set of configurations_ that you would allow to be available to the diagram author for overriding with help of directives.

 ## Types of Directives options
+
 Mermaid basically supports two types of configuration options to be overridden by directives.
-1) *General/Top Level configurations* : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are:
-  - theme
-  - fontFamily
-  - logLevel
-  - securityLevel
-  - startOnLoad
-  - secure

+1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are:

-2) *Diagram specific configurations* : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves.
- For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alter whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type.
+- theme
+- fontFamily
+- logLevel
+- securityLevel
+- startOnLoad
+- secure
+
+2. _Diagram specific configurations_ : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves.
+   For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alter whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type.

 **NOTE:** These options listed here are not all the configuration options. To get hold of all the configuration options, please refer to the [defaultConfig.js](https://github.com/mermaid-js/mermaid/blob/develop/src/defaultConfig.js) in the source code.
+
 ```
 Soon we plan to publish a complete list of top-level configurations & all the diagram specific configurations,
 with their possible values in the docs
 ```
- ## Declaring directives
+
+## Declaring directives
+
 Now that we have defined the types of configurations that are available, we can learn how to declare directives.
 A directive always starts and end `%%` sign with directive text in between, like `%% {directive_text} %%`.

-Here the structure of a directive text is like a nested key-value pair map or a JSON object with root being *init*. Where all the general configurations are defined in the top level, and all the diagram specific configurations are defined one level deeper with diagram type as key/root for that section.
+Here the structure of a directive text is like a nested key-value pair map or a JSON object with root being _init_. Where all the general configurations are defined in the top level, and all the diagram specific configurations are defined one level deeper with diagram type as key/root for that section.

 Following code snippet shows the structure of a directive:
+
 ```
 %%{
  init: {
@ -51,11 +58,15 @@ Following code snippet shows the structure of a directive:
  }
 }%%
 ```
+
 You can also define the directives in a single line, like this:
+
 ```
 %%{init: { **insert argument here**}}%%
 ```
+
 For example, the following code snippet:
+
 ```
 %%{init: { "sequence": { "mirrorActors":false }}}%%
 ```
@ -65,6 +76,7 @@ The json object that is passed as {**argument** } must be valid key value pairs
 Valid Key Value pairs can be found in config.

 Example with a simple graph:
+
 ```mermaid-example
 %%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
 graph LR
@ -87,26 +99,28 @@ parsing the above generates a single `%%init%%` JSON object below, combining the
 {
  logLevel: 'fatal',
  theme: 'dark',
-  startOnLoad: true
+  startOnLoad: true,
 }
 ```

 This will then be sent to `mermaid.initialize(...)` for rendering.

 ## Directive Examples
+
 More directive examples for diagram specific configuration overrides
 Now that the concept of directives has been explained, Let us see some more examples for directives usage:

 ### Changing Theme via directive
+
 The following code snippet changes theme to forest:

-
-```%%{init: { "theme": "forest" } }%%```
+`%%{init: { "theme": "forest" } }%%`

 Possible themes value are: `default`,`base`, `dark`, `forest` and `neutral`.
 Default Value is `default`.

 Example:
+
 ```mermaid-example
 %%{init: { "theme": "forest" } }%%
 graph TD
@ -120,12 +134,13 @@ A --> C[End]
 ```

 ### Changing fontFamily via directive
+
 The following code snippet changes theme to forest:

-
-```%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%```
+`%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%`

 Example:
+
 ```mermaid-example
 %%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%
 graph TD
@ -139,21 +154,23 @@ A --> C[End]
 ```

 ### Changing logLevel via directive
+
 The following code snippet changes theme to forest:

-
-```%%{init: { "logLevel": 2 } }%%```
+`%%{init: { "logLevel": 2 } }%%`

 Possible logLevel values are:
- `1` for *debug*,
- `2` for *info*
- `3` for *warn*
- `4` for *error*
- `5` for *only fatal errors*
+
+- `1` for _debug_,
+- `2` for _info_
+- `3` for _warn_
+- `4` for _error_
+- `5` for _only fatal errors_

 Default Value is `5`.

 Example:
+
 ```mermaid-example
 %%{init: { "logLevel": 2 } }%%
 graph TD
@ -166,19 +183,20 @@ A --> C[End]
 ```

 ### Changing flowchart config via directive
+
 Some common flowchart configurations are:
- *htmlLabels*: true/false
- *curve*: linear/curve
- *diagramPadding*: number
- *useMaxWidth*: number
+
+- _htmlLabels_: true/false
+- _curve_: linear/curve
+- _diagramPadding_: number
+- _useMaxWidth_: number

 For complete list of flowchart configurations, see [defaultConfig.js](https://github.com/mermaid-js/mermaid/blob/develop/src/defaultConfig.js) in the source code.
-*Soon we plan to publish a complete list all diagram specific configurations updated in the docs*
+_Soon we plan to publish a complete list all diagram specific configurations updated in the docs_

 The following code snippet changes flowchart config:

-
-```%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%```
+`%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%`

 Here were are overriding only the flowchart config, and not the general config, where HtmlLabels is set to true and curve is set to linear.

@ -192,19 +210,22 @@ A --> C[End]
  C
  end
 ```
-### Changing Sequence diagram config via directive
-Some common sequence configurations are:
- *width*: number
- *height*: number
- *messageAlign*: left, center, right
- *mirrorActors*: boolean
- *useMaxWidth*: boolean
- *rightAngles*: boolean
- *showSequenceNumbers*: boolean
- *wrap*: boolean

-For complete list of sequence diagram configurations, see *defaultConfig.js* in the source code.
-*Soon we plan to publish a complete list all diagram specific configurations updated in the docs*
+### Changing Sequence diagram config via directive
+
+Some common sequence configurations are:
+
+- _width_: number
+- _height_: number
+- _messageAlign_: left, center, right
+- _mirrorActors_: boolean
+- _useMaxWidth_: boolean
+- _rightAngles_: boolean
+- _showSequenceNumbers_: boolean
+- _wrap_: boolean
+
+For complete list of sequence diagram configurations, see _defaultConfig.js_ in the source code.
+_Soon we plan to publish a complete list all diagram specific configurations updated in the docs_

 So, `wrap` by default has a value of `false` for sequence diagrams.

@ -223,8 +244,7 @@ Now let us enable wrap for sequence diagrams.

 The following code snippet changes sequence diagram config for `wrap` to `true`:

-
-```%%{init: { "sequence": { "wrap": true} } }%%```
+`%%{init: { "sequence": { "wrap": true} } }%%`

 Using in the diagram above, the wrap will be enabled.

@ -236,7 +256,3 @@ Bob->Alice: Fine, How did you mother like the book I suggested? And did you catc
 Alice->Bob: Good.
 Bob->Alice: Cool
 ```
-
-
-
-
--- a/docs/entityRelationshipDiagram.md
+++ b/docs/entityRelationshipDiagram.md
@ -1,9 +1,10 @@
 # Entity Relationship Diagrams

 **Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/entityRelationshipDiagram.md)
+
 > An entity–relationship model (or ER model) describes interrelated things of interest in a specific domain of knowledge. A basic ER model is composed of entity types (which classify the things of interest) and specifies relationships that can exist between entities (instances of those entity types). Wikipedia.

-Note that practitioners of ER modelling almost always refer to *entity types* simply as *entities*.  For example the `CUSTOMER` entity *type* would be referred to simply as the `CUSTOMER` entity.  This is so common it would be inadvisable to do anything else, but technically an entity is an abstract *instance* of an entity type, and this is what an ER diagram shows - abstract instances, and the relationships between them.  This is why entities are always named using singular nouns.
+Note that practitioners of ER modelling almost always refer to _entity types_ simply as _entities_. For example the `CUSTOMER` entity _type_ would be referred to simply as the `CUSTOMER` entity. This is so common it would be inadvisable to do anything else, but technically an entity is an abstract _instance_ of an entity type, and this is what an ER diagram shows - abstract instances, and the relationships between them. This is why entities are always named using singular nouns.

 Mermaid can render ER diagrams

@ -16,9 +17,9 @@ erDiagram

 Entity names are often capitalised, although there is no accepted standard on this, and it is not required in Mermaid.

-Relationships between entities are represented by lines with end markers representing cardinality.  Mermaid uses the most popular crow's foot notation. The crow's foot intuitively conveys the possibility of many instances of the entity that it connects to.
+Relationships between entities are represented by lines with end markers representing cardinality. Mermaid uses the most popular crow's foot notation. The crow's foot intuitively conveys the possibility of many instances of the entity that it connects to.

-ER diagrams can be used for various purposes, ranging from abstract logical models devoid of any implementation details, through to physical models of relational database tables.  It can be useful to include attribute definitions on ER diagrams to aid comprehension of the purpose and meaning of entities.  These do not necessarily need to be exhaustive; often a small subset of attributes is enough.  Mermaid allows them to be defined in terms of their *type* and *name*.
+ER diagrams can be used for various purposes, ranging from abstract logical models devoid of any implementation details, through to physical models of relational database tables. It can be useful to include attribute definitions on ER diagrams to aid comprehension of the purpose and meaning of entities. These do not necessarily need to be exhaustive; often a small subset of attributes is enough. Mermaid allows them to be defined in terms of their _type_ and _name_.

 ```mermaid-example
 erDiagram
@ -40,13 +41,13 @@ erDiagram
    }
 ```

-When including attributes on ER diagrams, you must decide whether to include foreign keys as attributes.  This probably depends on how closely you are trying to represent relational table structures.  If your diagram is a *logical* model which is not meant to imply a relational implementation, then it is better to leave these out because the associative relationships already convey the way that entities are associated.  For example, a JSON data structure can implement a one-to-many relationship without the need for foreign key properties, using arrays.  Similarly an object-oriented programming language may use pointers or references to collections.  Even for models that are intended for relational implementation, you might decide that inclusion of foreign key attributes duplicates information already portrayed by the relationships, and does not add meaning to entities.  Ultimately, it's your choice.
+When including attributes on ER diagrams, you must decide whether to include foreign keys as attributes. This probably depends on how closely you are trying to represent relational table structures. If your diagram is a _logical_ model which is not meant to imply a relational implementation, then it is better to leave these out because the associative relationships already convey the way that entities are associated. For example, a JSON data structure can implement a one-to-many relationship without the need for foreign key properties, using arrays. Similarly an object-oriented programming language may use pointers or references to collections. Even for models that are intended for relational implementation, you might decide that inclusion of foreign key attributes duplicates information already portrayed by the relationships, and does not add meaning to entities. Ultimately, it's your choice.

 ## Syntax

 ### Entities and Relationships

-Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to label the relationship.  Each statement consists of the following parts:
+Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to label the relationship. Each statement consists of the following parts:

 ```
    <first-entity> [<relationship> <second-entity> : <relationship-label>]
@ -54,8 +55,8 @@ Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to

 Where:

- `first-entity` is the name of an entity.  Names must begin with an alphabetic character and may also contain digits, hyphens, and underscores.
- `relationship` describes the way that both entities inter-relate.  See below.
+- `first-entity` is the name of an entity. Names must begin with an alphabetic character and may also contain digits, hyphens, and underscores.
+- `relationship` describes the way that both entities inter-relate. See below.
 - `second-entity` is the name of the other entity.
 - `relationship-label` describes the relationship from the perspective of the first entity.

@ -65,9 +66,9 @@ For example:
    PROPERTY ||--|{ ROOM : contains
 ```

-This statement can be read as *a property contains one or more rooms, and a room is part of one and only one property*. You can see that the label here is from the first entity's perspective: a property contains a room, but a room does not contain a property.  When considered from the perspective of the second entity, the equivalent label is usually very easy to infer. (Some ER diagrams label relationships from both perspectives, but this is not supported here, and is usually superfluous).
+This statement can be read as _a property contains one or more rooms, and a room is part of one and only one property_. You can see that the label here is from the first entity's perspective: a property contains a room, but a room does not contain a property. When considered from the perspective of the second entity, the equivalent label is usually very easy to infer. (Some ER diagrams label relationships from both perspectives, but this is not supported here, and is usually superfluous).

-Only the `first-entity` part of a statement is mandatory.  This makes it possible to show an entity with no relationships, which can be useful during iterative construction of diagrams.  If any other parts of a statement are specified, then all parts are mandatory.
+Only the `first-entity` part of a statement is mandatory. This makes it possible to show an entity with no relationships, which can be useful during iterative construction of diagrams. If any other parts of a statement are specified, then all parts are mandatory.

 ### Relationship Syntax

@ -77,18 +78,18 @@ The `relationship` part of each statement can be broken down into three sub-comp
 - whether the relationship confers identity on a 'child' entity
 - the cardinality of the second entity with respect to the first

-Cardinality is a property that describes how many elements of another entity can be related to the entity in question.  In the above example a `PROPERTY` can have one or more `ROOM` instances associated to it, whereas a `ROOM` can only be associated with one `PROPERTY`.  In each cardinality marker there are two characters.  The outermost character represents a maximum value, and the innermost character represents a minimum value.  The table below summarises possible cardinalities.
+Cardinality is a property that describes how many elements of another entity can be related to the entity in question. In the above example a `PROPERTY` can have one or more `ROOM` instances associated to it, whereas a `ROOM` can only be associated with one `PROPERTY`. In each cardinality marker there are two characters. The outermost character represents a maximum value, and the innermost character represents a minimum value. The table below summarises possible cardinalities.

-| Value (left) | Value (right) | Meaning                                                |
-|:------------:|:-------------:|--------------------------------------------------------|
-|     `\|o`     |      `o\|`     | Zero or one                                            |
-|     `\|\|`     |      `\|\|`     | Exactly one                                            |
-|     `}o`     |      `o{`     | Zero or more (no upper limit)                          |
-|     `}\|`     |      `\|{`     | One or more (no upper limit)                           |
+| Value (left) | Value (right) | Meaning                       |
+| :----------: | :-----------: | ----------------------------- |
+|    `\|o`     |     `o\|`     | Zero or one                   |
+|    `\|\|`    |    `\|\|`     | Exactly one                   |
+|     `}o`     |     `o{`      | Zero or more (no upper limit) |
+|    `}\|`     |     `\|{`     | One or more (no upper limit)  |

 ### Identification

-Relationships may be classified as either *identifying* or *non-identifying* and these are rendered with either solid or dashed lines respectively. This is relevant when one of the entities in question can not have independent existence without the other.  For example a firm that insures people to drive cars might need to store data on `NAMED-DRIVER`s. In modelling this we might start out by observing that a `CAR` can be driven by many `PERSON` instances, and a `PERSON` can drive many `CAR`s - both entities can exist without the other, so this is a non-identifying relationship that we might specify in Mermaid as: `PERSON }|..|{ CAR : "driver"`.  Note the two dots in the middle of the relationship that will result in a dashed line being drawn between the two entities.  But when this many-to-many relationship is resolved into two one-to-many relationships, we observe that a `NAMED-DRIVER` cannot exist without both a `PERSON` and a `CAR` - the relationships become identifying and would be specified using hyphens, which translate to a solid line:
+Relationships may be classified as either _identifying_ or _non-identifying_ and these are rendered with either solid or dashed lines respectively. This is relevant when one of the entities in question can not have independent existence without the other. For example a firm that insures people to drive cars might need to store data on `NAMED-DRIVER`s. In modelling this we might start out by observing that a `CAR` can be driven by many `PERSON` instances, and a `PERSON` can drive many `CAR`s - both entities can exist without the other, so this is a non-identifying relationship that we might specify in Mermaid as: `PERSON }|..|{ CAR : "driver"`. Note the two dots in the middle of the relationship that will result in a dashed line being drawn between the two entities. But when this many-to-many relationship is resolved into two one-to-many relationships, we observe that a `NAMED-DRIVER` cannot exist without both a `PERSON` and a `CAR` - the relationships become identifying and would be specified using hyphens, which translate to a solid line:

 ```mmd
 erDiagram
@ -98,7 +99,7 @@ erDiagram

 ### Attributes

-Attributes can be defined for entities by specifying the entity name followed by a block containing multiple `type name` pairs, where a block is delimited by an opening `{` and a closing `}`.  For example:
+Attributes can be defined for entities by specifying the entity name followed by a block containing multiple `type name` pairs, where a block is delimited by an opening `{` and a closing `}`. For example:

 ```mermaid-example
 erDiagram
@ -115,6 +116,7 @@ erDiagram
        int age
    }
 ```
+
 The attributes are rendered inside the entity boxes:

 ```mermaid-example
@ -133,7 +135,7 @@ erDiagram
    }
 ```

-The `type` and `name` values must begin with an alphabetic character and may contain digits, hyphens or underscores.  Other than that, there are no restrictions, and there is no implicit set of valid data types.
+The `type` and `name` values must begin with an alphabetic character and may contain digits, hyphens or underscores. Other than that, there are no restrictions, and there is no implicit set of valid data types.

 #### Attribute Keys and Comments

--- a/docs/examples.md
+++ b/docs/examples.md
@ -13,12 +13,14 @@ pie title NETFLIX
         "Time spent looking for movie" : 90
         "Time spent watching it" : 10
 ```
+
 ```mermaid-example
 pie title What Voldemort doesn't have?
         "FRIENDS" : 2
         "FAMILY" : 3
         "NOSE" : 45
 ```
+
 ## Basic sequence diagram

 ```mermaid-example
@ -43,7 +45,6 @@ graph LR
    C --> D
 ```

-
 ## Larger flowchart with some styling

 ```mermaid-example
@ -70,7 +71,6 @@ graph TB
     class di orange
 ```

-
 ## SequenceDiagram: Loops, alt and opt

 ```mermaid-example
@ -89,7 +89,6 @@ sequenceDiagram
    end
 ```

-
 ## SequenceDiagram: Message to self in loop

 ```mermaid-example
@ -141,6 +140,7 @@ sequenceDiagram
 ```

 ## A commit flow diagram.
+
 ```mermaid
 gitGraph:
    commit "Ashish"
--- a/docs/gitgraph.md
+++ b/docs/gitgraph.md
@ -1,6 +1,7 @@
 # Gitgraph Diagrams

 **Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/gitgraph.md)
+
 > A Git Graph is a pictorial representation of git commits and git actions(commands) on various branches.

 These kind of diagram are particularly helpful to developers and devops teams to share their Git branching strategies. For example, it makes it easier to visualize how git flow works.
@ -22,32 +23,34 @@ Mermaid can render Git diagrams
 ```

 In Mermaid, we support the basic git operations like:
- *commit* : Representing a new commit on the current branch.
- *branch* : To create & switch to a new branch, setting it as the current branch.
- *checkout* : To checking out an existing branch and setting it as the current branch.
- *merge* : To merge an existing branch onto the current branch.
+
+- _commit_ : Representing a new commit on the current branch.
+- _branch_ : To create & switch to a new branch, setting it as the current branch.
+- _checkout_ : To checking out an existing branch and setting it as the current branch.
+- _merge_ : To merge an existing branch onto the current branch.

 With the help of these key git commands, you will be able to draw a gitgraph in Mermaid very easily and quickly.
 Entity names are often capitalized, although there is no accepted standard on this, and it is not required in Mermaid.

-
 ## Syntax
+
 Mermaid syntax for a gitgraph is very straight-forward and simple. It follows a declarative-approach, where each commit is drawn on the timeline in the diagram, in order of its occurrences/presence in code. Basically, it follows the insertion order for each command.

 First thing you do is to declare your diagram type using the **gitgraph** keyword. This `gitgraph` keyword, tells Mermaid that you wish to draw a gitgraph, and parse the diagram code accordingly.

-Each gitgraph, is initialized with ***main*** branch. So unless you create a different branch, by-default the commits will go to the main branch. This is driven with how git works, where in the beginning you always start with the main branch (formerly called as ***master*** branch). And by-default, `main` branch is set as your ***current branch***.
+Each gitgraph, is initialized with **_main_** branch. So unless you create a different branch, by-default the commits will go to the main branch. This is driven with how git works, where in the beginning you always start with the main branch (formerly called as **_master_** branch). And by-default, `main` branch is set as your **_current branch_**.

+You make use of **_commit_** keyword to register a commit on the current branch. Let see how this works:

-You make use of ***commit*** keyword to register a commit on the current branch. Let see how this works:
+A simple gitgraph showing three commits on the default (**_main_**) branch:

-A simple gitgraph showing three commits on the default (***main***) branch:
 ```mermaid-example
    gitGraph
       commit
       commit
       commit
 ```
+
 If you look closely at the previous example, you can see the default branch `main` along with three commits. Also, notice that by default each commit has been given a unique & random ID. What if you wanted to give your own custom ID to a commit? Yes, it is possible to do that with Mermaid.

 ### Adding custom commit id
@ -68,6 +71,7 @@ In this example, we have given our custom IDs to the commits.
 ### Modifying commit type

 In Mermaid, a commit can be of three type, which render a bit different in the diagram. These types are:
+
 - `NORMAL` : Default commit type. Represented by a solid circle in the diagram
 - `REVERSE` : To emphasize a commit as a reverse commit. Represented by a crossed solid circle in the diagram.
 - `HIGHLIGHT` : To highlight a particular commit in the diagram. Represented by a filled rectangle in the diagram.
@ -111,9 +115,10 @@ Let us see how this works with the help of the following diagram:
 In this example, we have given custom tags to the commits. Also, see how we have combined all these attributes in a single commit declaration. You can mix-match these attributes as you like.

 ### Create a new branch
+
 In Mermaid, in-order to create a new branch, you make use of the `branch` keyword. You also need to provide a name of the new branch. The name has to be unique and cannot be that of an existing branch. Usage example: `branch develop`

-When Mermaid, reads the `branch` keyword, it creates a new branch and sets it as the current branch. Equivalent to you creating a  new branch and checking it out in Git world.
+When Mermaid, reads the `branch` keyword, it creates a new branch and sets it as the current branch. Equivalent to you creating a new branch and checking it out in Git world.

 Let see this in an example:

@ -126,10 +131,12 @@ Let see this in an example:
       commit
       commit
 ```
+
 In this example, see how we started with default `main` branch, and pushed two commits on that.
 Then we created the `develop` branch, and all commits afterwards are put on the `develop` branch as it became the current branch.

 ### Checking out an existing branch
+
 In Mermaid, in order to switch to an existing branch, you make use of the `checkout` keyword. You also need to provide a name of an existing branch. If no branch is found with the given name, it will result in console error. Usage example: `checkout develop`

 When Mermaid, reads the `checkout` keyword, it finds the given branch and sets it as the current branch. Equivalent to checking out a branch in the Git world.
@ -148,16 +155,18 @@ Let see modify our previous example:
       commit
       commit
 ```
+
 In this example, see how we started with default `main` branch, and pushed two commits on that.
 Then we created the `develop` branch, and all three commits afterwards are put on the `develop` branch as it became the current branch.
 After this we made use of the `checkout` keyword to set the current branch as `main`, and all commit that follow are registered against the current branch, i.e. `main`.

 ### Merging two branches
-In Mermaid, in order to merge or join  to an existing branch, you make use of the `merge` keyword. You also need to provide the name of an existing branch to merge from. If no branch is found with the given name, it will result in console error. Also, you can only merge two separate branches, and cannot merge a branch with itself. In such case an error is throw.
+
+In Mermaid, in order to merge or join to an existing branch, you make use of the `merge` keyword. You also need to provide the name of an existing branch to merge from. If no branch is found with the given name, it will result in console error. Also, you can only merge two separate branches, and cannot merge a branch with itself. In such case an error is throw.

 Usage example: `merge develop`

-When Mermaid, reads the `merge` keyword, it finds the given branch and its head commit (the last commit on that branch), and joins it with the head commit on the **current branch**. Each merge results in a ***merge commit***, represented in the diagram with **filled double circle**.
+When Mermaid, reads the `merge` keyword, it finds the given branch and its head commit (the last commit on that branch), and joins it with the head commit on the **current branch**. Each merge results in a **_merge commit_**, represented in the diagram with **filled double circle**.

 Let us modify our previous example to merge our two branches:

@ -176,6 +185,7 @@ Let us modify our previous example to merge our two branches:
       commit
       commit
 ```
+
 In this example, see how we started with default `main` branch, and pushed two commits on that.
 Then we created the `develop` branch, and all three commits afterwards are put on the `develop` branch as it became the current branch.
 After this we made use of the `checkout` keyword to set the current branch as `main`, and all commits that follow are registered against the current branch, i.e. `main`.
@ -183,6 +193,7 @@ After this we merge the `develop` branch onto the current branch `main`, resulti
 Since the current branch at this point is still `main`, the last two commits are registered against that.

 You can also decorate your merge with similar attributes as you did for the commit using:
+
 - `id`--> To override the default ID with custom ID
 - `tag`--> To add a custom tag to your merge commit
 - `type`--> To override the default shape of merge commit. Here you can use other commit type mentioned earlier.
@ -218,20 +229,23 @@ Let us see how this works with the help of the following diagram:
 ```

 ### Cherry Pick commit from another branch
+
 Similar to how 'git' allows you to cherry-pick a commit from **another branch** onto the **current** branch, Mermaid also supports this functionality. You can also cherry-pick a commit from another branch using the `cherry-pick` keyword.

-To use the `cherry-pick` keyword, you must specify the id  using the `id` attribute, followed by `:` and your desired commit id within a `""` quote. For example:
+To use the `cherry-pick` keyword, you must specify the id using the `id` attribute, followed by `:` and your desired commit id within a `""` quote. For example:

- `cherry-pick id: "your_custom_id"`
+`cherry-pick id: "your_custom_id"`

 Here, a new commit representing the cherry-pick is created on the current branch, and is visually highlighted in the diagram with a **cherry** and a tag depicting the commit id from which it is cherry-picked from.

 A few important rules to note here are:
+
 1. You need to provide the `id` for an existing commit to be cherry-picked. If given commit id does not exist it will result in an error. For this, make use of the `commit id:$value` format of declaring commits. See the examples from above.
 2. The given commit must not exist on the current branch. The cherry-picked commit must always be a different branch than the current branch.
 3. Current branch must have at least one commit, before you can cherry-pick, otherwise it will cause an error is throw.

 Let see an example:
+
 ```mermaid-example
    gitGraph
       commit id: "ZERO"
@ -248,18 +262,24 @@ Let see an example:
       checkout develop
       commit id:"C"
 ```
+
 ## Gitgraph specific configuration options
+
 In Mermaid, you have the option to configure the gitgraph diagram. You can configure the following options:
+
 - `showBranches` : Boolean, default is `true`. If set to `false`, the branches are not shown in the diagram.
 - `showCommitLabel` : Boolean, default is `true`. If set to `false`, the commit labels are not shown in the diagram.
 - `mainBranchName` : String, default is `main`. The name of the default/root branch.
 - `mainBranchOrder` : Position of the main branch in the list of branches. default is `0`, meaning, by default `main` branch is the first in the order.

 Let's look at them one by one.
+
 ## Hiding Branch names and lines
+
 Sometimes you may want to hide the branch names and lines from the diagram. You can do this by using the `showBranches` keyword. By default its value is `true`. You can set it to `false` using directives.

 Usage example:
+
 ```mermaid-example
 %%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false}} }%%
      gitGraph
@ -304,9 +324,10 @@ Usage example:
        merge main
        checkout develop
        merge release
- ```
+```

 ## Commit labels Layout: Rotated or Horizontal
+
 Mermaid supports two types of commit labels layout. The default layout is **rotated**, which means the labels are placed below the commit circle, rotated at 45 degrees for better readability. This is particularly useful for commits with long labels.

 The other option is **horizontal**, which means the labels are placed below the commit circle centred horizontally, and are not rotated. This is particularly useful for commits with short labels.
@ -332,7 +353,7 @@ gitGraph
  commit
  branch b2
  commit
-  ```
+```

 Usage example: Horizontal commit labels

@ -353,13 +374,14 @@ gitGraph
  commit
  branch b2
  commit
-  ```
+```

 ## Hiding commit labels
+
 Sometimes you may want to hide the commit labels from the diagram. You can do this by using the `showCommitLabel` keyword. By default its value is `true`. You can set it to `false` using directives.

-
 Usage example:
+
 ```mermaid-example
 %%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false,'showCommitLabel': false}} }%%
      gitGraph
@ -404,12 +426,14 @@ Usage example:
        merge main
        checkout develop
        merge release
- ```
+```

 ## Customizing main branch name
+
 Sometimes you may want to customize the name of the main/default branch. You can do this by using the `mainBranchName` keyword. By default its value is `main`. You can set it to any string using directives.

 Usage example:
+
 ```mermaid-example
 %%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true,'mainBranchName': 'MetroLine1'}} }%%
      gitGraph
@ -432,15 +456,18 @@ Usage example:
        commit id:"Boston"
        commit id:"Detroit"
        commit type:REVERSE id:"SanFrancisco"
- ```
+```
+
 Look at the imaginary railroad map created using Mermaid. Here, we have changed the default main branch name to `MetroLine1`.

 ## Customizing branch ordering
+
 In Mermaid, by default the branches are shown in the order of their definition or appearance in the diagram code.

 Sometimes you may want to customize the order of the branches. You can do this by using the `order` keyword next the branch definition. You can set it to a positive number.

 Mermaid follows the given precedence order of the `order` keyword.
+
 - Main branch is always shown first as it has default order value of `0`. (unless its order is modified and changed from `0` using the `mainBranchOrder` keyword in the config)
 - Next, All branches without an `order` are shown in the order of their appearance in the diagram code.
 - Next, All branches with an `order` are shown in the order of their `order` value.
@ -448,6 +475,7 @@ Mermaid follows the given precedence order of the `order` keyword.
 To fully control the order of all the branches, you must define `order` for all the branches.

 Usage example:
+
 ```mermaid-example
 %%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true}} }%%
      gitGraph
@ -456,11 +484,12 @@ Usage example:
      branch test2 order: 2
      branch test3 order: 1

- ```
+```
+
 Look at the diagram, all the branches are following the order defined.

-
 Usage example:
+
 ```mermaid-example
 %%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true,'mainBranchOrder': 2}} }%%
      gitGraph
@ -470,7 +499,8 @@ Usage example:
      branch test3
      branch test4 order: 1

- ```
+```
+
 Look at the diagram, here, all the branches without a specified order are drawn in their order of definition.
 Then, `test4` branch is drawn because the order of `1`.
 Then, `main` branch is drawn because the order of `2`.
@ -478,21 +508,21 @@ And, lastly `test1`is drawn because the order of `3`.

 NOTE: Because we have overridden the `mainBranchOrder` to `2`, the `main` branch is not drawn in the beginning, instead follows the ordering.

-
-
 Here, we have changed the default main branch name to `MetroLine1`.

 ## Themes
+
 Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about theming your diagram [here](./theming.md).

 The following are the different pre-defined theme options:
+
 - `base`
 - `forest`
 - `dark`
 - `default`
 - `neutral`

-**NOTE**: To change theme you can either use the `initialize` call or *directives*. Learn more about [directives](./directives.md)
+**NOTE**: To change theme you can either use the `initialize` call or _directives_. Learn more about [directives](./directives.md)
 Let's put them to use, and see how our sample diagram looks in different themes:

 ### Base Theme
@ -541,9 +571,9 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        merge main
        checkout develop
        merge release
- ```
+```

- ### Forest Theme
+### Forest Theme

 ```mermaid-example
 %%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
@ -589,7 +619,8 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        merge main
        checkout develop
        merge release
- ```
+```
+
 ### Default Theme

 ```mermaid-example
@ -636,7 +667,8 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        merge main
        checkout develop
        merge release
- ```
+```
+
 ### Dark Theme

 ```mermaid-example
@ -683,9 +715,9 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        merge main
        checkout develop
        merge release
- ```
+```

- ### Neutral Theme
+### Neutral Theme

 ```mermaid-example
 %%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%
@ -731,9 +763,10 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        merge main
        checkout develop
        merge release
- ```
+```

 ## Customize using Theme Variables
+
 Mermaid allows you to customize your diagram using theme variables which govern the look and feel of various elements of the diagram.

 For understanding let us take a sample diagram with theme `default`, the default values of the theme variables is picked automatically from the theme. Later on we will see how to override the default values of the theme variables.
@ -755,10 +788,14 @@ See how the default theme is used to set the colors for the branches:
       branch featureA
       commit
 ```
+
 > #### IMPORTANT:
-> Mermaid supports the theme variables to override the default values for **up to 8 branches**, i.e., you can set the color/styling of up to 8 branches using theme variables. After this threshold of 8 branches,  the theme variables are reused in the cyclic manner, i.e. the 9th branch will use the color/styling of the 1st branch, or the branch at index position '8' will use the color/styling of the branch at index position '0'.
- *More on this in the next section. See examples on **Customizing branch label colors** below*
+>
+> Mermaid supports the theme variables to override the default values for **up to 8 branches**, i.e., you can set the color/styling of up to 8 branches using theme variables. After this threshold of 8 branches, the theme variables are reused in the cyclic manner, i.e. the 9th branch will use the color/styling of the 1st branch, or the branch at index position '8' will use the color/styling of the branch at index position '0'.
+> _More on this in the next section. See examples on **Customizing branch label colors** below_
+
 ### Customizing branch colors
+
 You can customize the branch colors using the `git0` to `git7` theme variables. Mermaid allows you to set the colors for up-to 8 branches, where `git0` variable will drive the value of the first branch, `git1` will drive the value of the second branch and so on.

 NOTE: Default values for these theme variables are picked from the selected theme. If you want to override the default values, you can use the `initialize` call to add your custom theme variable values.
@ -792,8 +829,11 @@ Now let's override the default values for the `git0` to `git3` variables:
       commit

 ```
+
 See how the branch colors are changed to the values specified in the theme variables.
+
 ### Customizing branch label colors
+
 You can customize the branch label colors using the `gitBranchLabel0` to `gitBranchLabel7` theme variables. Mermaid allows you to set the colors for up-to 8 branches, where `gitBranchLabel0` variable will drive the value of the first branch label, `gitBranchLabel1` will drive the value of the second branch label and so on.

 Lets see how the default theme is used to set the colors for the branch labels:
@ -827,8 +867,11 @@ Now let's override the default values for the `gitBranchLabel0` to `gitBranchLab
    checkout branch1
    commit
 ```
+
 Here, you can see that `branch8` and `branch9` colors and the styles are being picked from branch at index position `0` (`main`) and `1`(`branch1`) respectively, i.e., **branch themeVariables are repeated cyclically**.
+
 ### Customizing Commit colors
+
 You can customize commit using the `commitLabelColor` and `commitLabelBackground` theme variables for changes in the commit label color and background color respectively.

 Example:
@ -853,10 +896,12 @@ Now let's override the default values for the `commitLabelColor` to `commitLabel
       commit

 ```
+
 See how the commit label color and background color are changed to the values specified in the theme variables.

 ### Customizing Commit Label Font Size
-You can customize commit using the `commitLabelFontSize`  theme variables for changing in the font soze of the commit label .
+
+You can customize commit using the `commitLabelFontSize` theme variables for changing in the font soze of the commit label .

 Example:
 Now let's override the default values for the `commitLabelFontSize` variable:
@ -881,10 +926,12 @@ Now let's override the default values for the `commitLabelFontSize` variable:
       commit

 ```
+
 See how the commit label font size changed.

 ### Customizing Tag Label Font Size
-You can customize commit using the `tagLabelFontSize`  theme variables for changing in the font soze of the tag label .
+
+You can customize commit using the `tagLabelFontSize` theme variables for changing in the font soze of the tag label .

 Example:
 Now let's override the default values for the `tagLabelFontSize` variable:
@ -909,9 +956,12 @@ Now let's override the default values for the `tagLabelFontSize` variable:
       commit

 ```
+
 See how the tag label font size changed.
+
 ### Customizing Tag colors
-You can customize tag using the `tagLabelColor`,`tagLabelBackground` and `tagLabelBorder`  theme variables for changes in the tag label color,tag label background color and tag label border respectively.
+
+You can customize tag using the `tagLabelColor`,`tagLabelBackground` and `tagLabelBorder` theme variables for changes in the tag label color,tag label background color and tag label border respectively.
 Example:
 Now let's override the default values for the `tagLabelColor`, `tagLabelBackground` and to `tagLabelBorder` variables:

@ -935,8 +985,11 @@ Now let's override the default values for the `tagLabelColor`, `tagLabelBackgrou
       commit

 ```
+
 See how the tag colors are changed to the values specified in the theme variables.
+
 ### Customizing Highlight commit colors
+
 You can customize the highlight commit colors in relation to the branch it is on using the `gitInv0` to `gitInv7` theme variables. Mermaid allows you to set the colors for up-to 8 branches specific highlight commit, where `gitInv0` variable will drive the value of the first branch's highlight commits, `gitInv1` will drive the value of the second branch's highlight commit label and so on.

 Example:
@ -961,8 +1014,5 @@ Now let's override the default values for the `git0` to `git3` variables:
       commit

 ```
+
 See how the highlighted commit color on the first branch is changed to the value specified in the theme variable `gitInv0`.
-
-
-
-
--- a/docs/integrations.md
+++ b/docs/integrations.md
@ -1,11 +1,11 @@
 # Integrations

-The following list is a compilation of different integrations and plugins that allow the rendering of mermaid definitions within other applications. 
+The following list is a compilation of different integrations and plugins that allow the rendering of mermaid definitions within other applications.

 They also serve as proof of concept, for the variety of things that can be built with mermaid.

-
 ## Productivity
+
 - [GitHub](https://github.com) (**Native support**)
  - [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) (**Native support**)
  - [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
@ -31,11 +31,11 @@ They also serve as proof of concept, for the variety of things that can be built
  - [redmine-mermaid](https://github.com/styz/redmine_mermaid)
  - [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
 - [Jetsbrain IDE eg Pycharm](https://www.jetbrains.com/go/guide/tips/mermaid-js-support-in-markdown/)
- [mermerd](https://github.com/KarnerTh/mermerd) 
+- [mermerd](https://github.com/KarnerTh/mermerd)

 ## CRM/ERP/Similar

-  - [coreBOS](https://blog.corebos.org/blog/december2019)
+- [coreBOS](https://blog.corebos.org/blog/december2019)

 ## Blogs

@ -148,22 +148,22 @@ They also serve as proof of concept, for the variety of things that can be built

 ## Browser Extensions

-| Name | Chrome Web Store | Firefox Add-ons | Opera | Edge | Source/Repository | 
-| -- | -- | -- | -- | -- | -- |
-| GitHub + Mermaid | - | [🦊🔗](https://addons.mozilla.org/firefox/addon/github-mermaid/) | - | - |  [🐙🔗](https://github.com/BackMarket/github-mermaid-extension)
-| Asciidoctor Live Preview | [🎡🔗](https://chrome.google.com/webstore/detail/asciidoctorjs-live-previe/iaalpfgpbocpdfblpnhhgllgbdbchmia) | - | - | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/asciidoctorjs-live-previ/pefkelkanablhjdekgdahplkccnbdggd?hl=en-US) | -|
-| Diagram Tab| -| - | - | - | [🐙🔗](https://github.com/khafast/diagramtab)  |
-| Markdown Diagrams| [🎡🔗](https://chrome.google.com/webstore/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel/) | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/) | [🔴🔗](https://addons.opera.com/en/extensions/details/markdown-diagrams/) | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe) | [🐙🔗](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) |
-| Markdown Viewer| - | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | - | - | [🐙🔗](https://github.com/simov/markdown-viewer)|
-| Extensions for Mermaid| - | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | [🔴🔗](https://addons.opera.com/en/extensions/details/extensions-for-mermaid/)| - | [🐙🔗](https://github.com/Stefan-S/mermaid-extension) |
-| Chrome Diagrammer| [🎡🔗](https://chrome.google.com/webstore/detail/chrome-diagrammer/bkpbgjmkomfoakfklcjeoegkklgjnnpk) | - |- | - | - |
-| Mermaid Diagrams | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-diagrams/phfcghedmopjadpojhmmaffjmfiakfil) | - | - | - | - |
-|Mermaid Markdown | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-markdown/mboeoikjijmjcjgpccghbcoegikliijg) | - | - | - | - |
-| Monkeys | [🎡🔗](https://chrome.google.com/webstore/detail/monkeys-mermaid-for-githu/cplfdpoajbclbgphaphphcldamfkjlgi) | - | - | - | - |
-| Mermaid Previewer | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-previewer/oidjnlhbegipkcklbdfnbkikplpghfdl) | - | - | - | - |
-
+| Name                     | Chrome Web Store                                                                                             | Firefox Add-ons                                                                | Opera                                                                          | Edge                                                                                                                         | Source/Repository                                                                                    |
+| ------------------------ | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
+| GitHub + Mermaid         | -                                                                                                            | [🦊🔗](https://addons.mozilla.org/firefox/addon/github-mermaid/)               | -                                                                              | -                                                                                                                            | [🐙🔗](https://github.com/BackMarket/github-mermaid-extension)                                       |
+| Asciidoctor Live Preview | [🎡🔗](https://chrome.google.com/webstore/detail/asciidoctorjs-live-previe/iaalpfgpbocpdfblpnhhgllgbdbchmia) | -                                                                              | -                                                                              | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/asciidoctorjs-live-previ/pefkelkanablhjdekgdahplkccnbdggd?hl=en-US) | -                                                                                                    |
+| Diagram Tab              | -                                                                                                            | -                                                                              | -                                                                              | -                                                                                                                            | [🐙🔗](https://github.com/khafast/diagramtab)                                                        |
+| Markdown Diagrams        | [🎡🔗](https://chrome.google.com/webstore/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel/)        | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/)      | [🔴🔗](https://addons.opera.com/en/extensions/details/markdown-diagrams/)      | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe)                 | [🐙🔗](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) |
+| Markdown Viewer          | -                                                                                                            | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | -                                                                              | -                                                                                                                            | [🐙🔗](https://github.com/simov/markdown-viewer)                                                     |
+| Extensions for Mermaid   | -                                                                                                            | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | [🔴🔗](https://addons.opera.com/en/extensions/details/extensions-for-mermaid/) | -                                                                                                                            | [🐙🔗](https://github.com/Stefan-S/mermaid-extension)                                                |
+| Chrome Diagrammer        | [🎡🔗](https://chrome.google.com/webstore/detail/chrome-diagrammer/bkpbgjmkomfoakfklcjeoegkklgjnnpk)         | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |
+| Mermaid Diagrams         | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-diagrams/phfcghedmopjadpojhmmaffjmfiakfil)          | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |
+| Mermaid Markdown         | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-markdown/mboeoikjijmjcjgpccghbcoegikliijg)          | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |
+| Monkeys                  | [🎡🔗](https://chrome.google.com/webstore/detail/monkeys-mermaid-for-githu/cplfdpoajbclbgphaphphcldamfkjlgi) | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |
+| Mermaid Previewer        | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-previewer/oidjnlhbegipkcklbdfnbkikplpghfdl)         | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |

 ## Other
+
 - [Jekyll](https://jekyllrb.com/)
  - [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid)
  - [jekyll-mermaid-diagrams](https://github.com/fuzhibo/jekyll-mermaid-diagrams)
--- a/docs/landing/index.html
+++ b/docs/landing/index.html
@ -49,16 +49,7 @@
    <div class="pt-24">
      <div
        style=""
-        class="
-          container
-          lg:px-24
-          max-w-5xl
-          px-4
-          mx-auto
-          flex flex-wrap flex-col
-          md:flex-row
-          items-center
-        "
+        class="container lg:px-24 max-w-5xl px-4 mx-auto flex flex-wrap flex-col md:flex-row items-center"
      >
        <!--Left Col-->
        <div class="w-full md:w-1/2">
@ -77,24 +68,7 @@
              >
                <button
                  style="background: #ffa41c; border: 1px solid #ff8f00"
-                  class="
-                    mx-auto
-                    lg:mx-0
-                    hover:underline
-                    text-black
-                    font-bold
-                    rounded-full
-                    my-6
-                    py-4
-                    px-8
-                    shadow-lg
-                    focus:outline-none focus:shadow-outline
-                    transform
-                    transition
-                    hover:scale-105
-                    duration-300
-                    ease-in-out
-                  "
+                  class="mx-auto lg:mx-0 hover:underline text-black font-bold rounded-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out"
                >
                  Purchase on Amazon
                </button>
@ -352,25 +326,7 @@
      >
        <button
          style="background: #ffa41c; border: 1px solid #ff8f00"
-          class="
-            mx-auto
-            lg:mx-0
-            hover:underline
-            bg-white
-            text-gray-800
-            font-bold
-            rounded-full
-            my-6
-            py-4
-            px-8
-            shadow-lg
-            focus:outline-none focus:shadow-outline
-            transform
-            transition
-            hover:scale-105
-            duration-300
-            ease-in-out
-          "
+          class="mx-auto lg:mx-0 hover:underline bg-white text-gray-800 font-bold rounded-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out"
        >
          Purchase Now on Amazon
        </button>
--- a/docs/n00b-advanced.md
+++ b/docs/n00b-advanced.md
@ -1,6 +1,7 @@
 # Advanced n00b mermaid (Coming soon..)

 ## splitting mermaid code from html
+
 A more condensed html code can be achieved by embedding the mermaid code in its own .js file, which is referenced like so:

 ```
@ -9,11 +10,13 @@ stuff stuff
  </body>
 </html>
 ```
+
 The actual mermaid file could for example look like this:

 ```
 mermaid content...
 ```
+
 ---

 ## mermaid configuration options
--- a/docs/n00b-syntaxReference.md
+++ b/docs/n00b-syntaxReference.md
@ -1,12 +1,14 @@
 # Diagram Syntax
-Mermaid's syntax is used to create diagrams. You'll find that it is not too tricky and can be learned in a day. The next sections dive deep into the syntax of each diagram type.  

-Syntax, together with Deployment and Configuration constitute the whole of Mermaid. 
+Mermaid's syntax is used to create diagrams. You'll find that it is not too tricky and can be learned in a day. The next sections dive deep into the syntax of each diagram type.
+
+Syntax, together with Deployment and Configuration constitute the whole of Mermaid.

 Diagram Examples can be found in the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor), it is also a great practice area.

 ## Syntax Structure
-One would notice that all **Diagrams definitions begin** with a declaration of the **diagram type**, followed by the definitions of the diagram and its contents. This declaration notifies the parser which kind of diagram the code is supposed to generate. 
+
+One would notice that all **Diagrams definitions begin** with a declaration of the **diagram type**, followed by the definitions of the diagram and its contents. This declaration notifies the parser which kind of diagram the code is supposed to generate.

 **Example** : The code below is for an Entity Relationship Diagram, specified by the `erDiagram` declaration. What follows is the definition of the different `Entities` represented in it.

@ -22,56 +24,44 @@ erDiagram
          PRODUCT ||--o{ ORDER-ITEM : "ordered in"
 ```

-
 The [Getting Started](./n00b-gettingStarted.md) section can also provide some practical examples of mermaid syntax.

- 
-
 ## Diagram Breaking

 One should **beware the use of some words or symbols** that can break diagrams. These words or symbols are few and often only affect specific types of diagrams. The table below will continuously be updated.

-
-| Diagram Breakers  | Reason |Solution|
-| ---               | ---    |---|
-|  **Comments**     |        |   |
-|[`%%{``}%%`](https://github.com/mermaid-js/mermaid/issues/1968) |  Similar to [Directives](./directives.md) confuses the renderer.|In comments using `%%`, avoid using "{}".|
-|  **Flow-Charts**  |        |   |
-|'end'              |  The word "End" can cause Flowcharts and Sequence diagrams to break |                  Wrap them in quotation marks to prevent breakage.|
-| [Nodes inside Nodes](https://mermaid-js.github.io/mermaid/#/flowchart?id=special-characters-that-break-syntax)|  Mermaid gets confused with nested shapes | wrap them in quotation marks to prevent breaking|
-                                                                                                   
-
+| Diagram Breakers                                                                                               | Reason                                                             | Solution                                          |
+| -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ------------------------------------------------- |
+| **Comments**                                                                                                   |                                                                    |                                                   |
+| [` %%{``}%% `](https://github.com/mermaid-js/mermaid/issues/1968)                                              | Similar to [Directives](./directives.md) confuses the renderer.    | In comments using `%%`, avoid using "{}".         |
+| **Flow-Charts**                                                                                                |                                                                    |                                                   |
+| 'end'                                                                                                          | The word "End" can cause Flowcharts and Sequence diagrams to break | Wrap them in quotation marks to prevent breakage. |
+| [Nodes inside Nodes](https://mermaid-js.github.io/mermaid/#/flowchart?id=special-characters-that-break-syntax) | Mermaid gets confused with nested shapes                           | wrap them in quotation marks to prevent breaking  |

 ### Mermaid Live Editor
-Now, that you've seen what you should not add to your diagrams, you can play around with them in the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor). 
+
+Now, that you've seen what you should not add to your diagrams, you can play around with them in the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor).

 # Configuration

-Configuration is the third part of Mermaid, after deployment and syntax. It deals with the different ways that Mermaid can be customized across different deployments. 
+Configuration is the third part of Mermaid, after deployment and syntax. It deals with the different ways that Mermaid can be customized across different deployments.

 If you are interested in altering and customizing your Mermaid Diagrams, you will find the methods and values available for [Configuration](./Setup.md) here. It includes themes.
-This section will introduce the different methods of configuring the behaviors and appearances of Mermaid Diagrams. 
+This section will introduce the different methods of configuring the behaviors and appearances of Mermaid Diagrams.
 The following are the most commonly used methods, and they are all tied to Mermaid [Deployment](./n00b-gettingStarted.md) methods.

 ### Configuration Section in the [Live Editor](https://mermaid-js.github.io/mermaid-live-editor).

-Here you can edit certain values to change the behavior and appearance of the diagram. 
+Here you can edit certain values to change the behavior and appearance of the diagram.

-### [The initialize() call](https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted?id=_3-calling-the-javascript-api), 
-Used when Mermaid is called via an API, or through a `<script>` tag. 
+### [The initialize() call](https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted?id=_3-calling-the-javascript-api),

+Used when Mermaid is called via an API, or through a `<script>` tag.

 ### [Directives](./directives.md),
-Allows for the limited reconfiguration of a diagram just before it is rendered. It can alter the font style, color and other aesthetic aspects of the diagram. You can pass a directive alongside your definition inside `%%{ }%%`. It can be done either above or below your diagram definition. 
+
+Allows for the limited reconfiguration of a diagram just before it is rendered. It can alter the font style, color and other aesthetic aspects of the diagram. You can pass a directive alongside your definition inside `%%{ }%%`. It can be done either above or below your diagram definition.

 ### [Theme Manipulation](./theming.md):
-An application of using Directives to change [Themes](./theming.md). `Theme` is a value within Mermaid's configuration that dictates the color scheme for diagrams. 
-
-
-
-
-
-
-
-

+An application of using Directives to change [Themes](./theming.md). `Theme` is a value within Mermaid's configuration that dictates the color scheme for diagrams.
--- a/docs/newDiagram.md
+++ b/docs/newDiagram.md
@ -2,15 +2,14 @@

 ### Step 1: Grammar & Parsing

-
 #### Grammar

 This would be to define a jison grammar for the new diagram type. That should start with a way to identify that the text in the mermaid tag is a diagram of that type. Create a new folder under diagrams for your new diagram type and a parser folder in it. This leads us to step 2.

 For instance:

-* the flowchart starts with the keyword graph.
-* the sequence diagram starts with the keyword sequenceDiagram
+- the flowchart starts with the keyword graph.
+- the sequence diagram starts with the keyword sequenceDiagram

 #### Store data found during parsing

@ -36,74 +35,67 @@ For more info look in the example diagram type:
 The `yy` object has the following function:

 ```javascript
-exports.parseError = function(err, hash){
-   mermaid.parseError(err, hash)
+exports.parseError = function (err, hash) {
+  mermaid.parseError(err, hash);
 };
 ```

 when parsing the `yy` object is initialized as per below:

 ```javascript
-var parser
-parser = exampleParser.parser
-parser.yy = db
+var parser;
+parser = exampleParser.parser;
+parser.yy = db;
 ```

-
 ### Step 2: Rendering

 Write a renderer that given the data found during parsing renders the diagram. To look at an example look at sequenceRenderer.js rather then the flowchart renderer as this is a more generic example.

 Place the renderer in the diagram folder.

-
 ### Step 3: Detection of the new diagram type

 The second thing to do is to add the capability to detect the new new diagram to type to the detectType in utils.js. The detection should return a key for the new diagram type.

-
 ### Step 4: The final piece - triggering the rendering

 At this point when mermaid is trying to render the diagram, it will detect it as being of the new type but there will be no match when trying to render the diagram. To fix this add a new case in the switch statement in main.js:init this should match the diagram type returned from step #2. The code in this new case statement should call the renderer for the diagram type with the data found by the parser as an argument.

-
 ## Usage of the parser as a separate module

-
 ### Setup

 ```javascript
-var graph = require('./graphDb')
-var flow = require('./parser/flow')
-flow.parser.yy = graph
+var graph = require('./graphDb');
+var flow = require('./parser/flow');
+flow.parser.yy = graph;
 ```

-
 ### Parsing

 ```javascript
-flow.parser.parse(text)
+flow.parser.parse(text);
 ```

-
 ### Data extraction

 ```javascript
-graph.getDirection()
-graph.getVertices()
-graph.getEdges()
+graph.getDirection();
+graph.getVertices();
+graph.getEdges();
 ```

 The parser is also exposed in the mermaid api by calling:

 ```javascript
-var parser = mermaid.getParser()
+var parser = mermaid.getParser();
 ```

 Note that the parse needs a graph object to store the data as per:

 ```javascript
-flow.parser.yy = graph
+flow.parser.yy = graph;
 ```

 Look at `graphDb.js` for more details on that object.
@ -116,10 +108,10 @@ If you are using a dagre based layout, please use flowchart-v2 as a template and

 There are a few features that are common between the different types of diagrams. We try to standardize the diagrams that work as similar as possible for the end user. The commonalities are:

-* Directives, a way of modifying the diagram configuration from within the diagram code.
-* Accessibility, a way for an author to provide additional information like titles and descriptions to people accessing a text with diagrams using a screen reader.
-* Themes, there is a common way to modify the styling of diagrams in Mermaid.
-* Comments should follow mermaid standards
+- Directives, a way of modifying the diagram configuration from within the diagram code.
+- Accessibility, a way for an author to provide additional information like titles and descriptions to people accessing a text with diagrams using a screen reader.
+- Themes, there is a common way to modify the styling of diagrams in Mermaid.
+- Comments should follow mermaid standards

 Here some pointers on how to handle these different areas.

@ -127,6 +119,7 @@ Here some pointers on how to handle these different areas.

 Here is example handling from flowcharts:
 Jison:
+
 ```jison

 /* lexical grammar */
@ -173,6 +166,7 @@ It is probably a good idea to keep the handling similar to this in your new diag
 ## Accessibility

 The syntax for adding title and description looks like this:
+
 ```
 accTitle: The title
 accDescr: The description
@ -222,6 +216,7 @@ import {
 For rendering the accessibility tags you have again an existing function you can use.

 **In the renderer:**
+
 ```js
 import addSVGAccessibilityFields from '../../accessibility';

@ -239,11 +234,11 @@ When adding themes to a diagram it comes down to a few important locations in th

 The entry point for the styling engine is in **src/styles.js**. The getStyles function will be called by Mermaid when the styles are being applied to the diagram.

-This function will in turn call a function *your diagram should provide* returning the css for the new diagram. The diagram specific, also which is commonly also called getStyles and located in the folder for your diagram under src/diagrams and should be named styles.js. The getStyles function will be called with the theme options as an argument like in the following example:
+This function will in turn call a function _your diagram should provide_ returning the css for the new diagram. The diagram specific, also which is commonly also called getStyles and located in the folder for your diagram under src/diagrams and should be named styles.js. The getStyles function will be called with the theme options as an argument like in the following example:

 ```js
 const getStyles = (options) =>
-    `
+  `
    .line {
      stroke-width: 1;
      stroke: ${options.lineColor};
@ -253,17 +248,16 @@ const getStyles = (options) =>
    `;
 ```

-Note that you need to provide your function to the main getStyles by adding it into the themes object in  **src/styles.js** like in the xyzDiagram in the provided example:
+Note that you need to provide your function to the main getStyles by adding it into the themes object in **src/styles.js** like in the xyzDiagram in the provided example:

 ```js
 const themes = {
-    flowchart,
-    'flowchart-v2': flowchart,
-    sequence,
-    xyzDiagram,
-    //...
+  flowchart,
+  'flowchart-v2': flowchart,
+  sequence,
+  xyzDiagram,
+  //...
 };
 ```

 The actual options and values for the colors are defined in **src/theme/theme-[xyz].js**. If you provide the options your diagram needs in the existing theme files then the theming will work smoothly without hiccups.
-
--- a/docs/pie.md
+++ b/docs/pie.md
@ -1,7 +1,7 @@
 # Pie chart diagrams

 > A pie chart (or a circle chart) is a circular statistical graphic, which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice (and consequently its central angle and area), is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented. The earliest known pie chart is generally credited to William Playfair's Statistical Breviary of 1801
-Wikipedia
+> -Wikipedia

 Mermaid can render Pie Chart diagrams.

@ -12,26 +12,28 @@ pie title Pets adopted by volunteers
    "Rats" : 15
 ```

-
 ## Syntax
+
 Drawing a pie chart is really simple in mermaid.
+
 - Start with `pie` keyword to begin the diagram
-    - `showData` to render the actual data values after the legend text. This is ***OPTIONAL*** 
- Followed by `title` keyword and its value in string to give a title to the pie-chart. This is ***OPTIONAL***
+  - `showData` to render the actual data values after the legend text. This is **_OPTIONAL_**
+- Followed by `title` keyword and its value in string to give a title to the pie-chart. This is **_OPTIONAL_**
 - Followed by dataSet
-    - `label` for a section in the pie diagram within `" "` quotes.
-    - Followed by `:` colon as separator
-    - Followed by `positive numeric value` (supported upto two decimal places)
+  - `label` for a section in the pie diagram within `" "` quotes.
+  - Followed by `:` colon as separator
+  - Followed by `positive numeric value` (supported upto two decimal places)

 [pie] [showData] (OPTIONAL)
-     [title] [titlevalue]  (OPTIONAL)
-      "[datakey1]" : [dataValue1]
-      "[datakey2]" : [dataValue2]
-      "[datakey3]" : [dataValue3]
-      .
-      .
+[title] [titlevalue] (OPTIONAL)
+"[datakey1]" : [dataValue1]
+"[datakey2]" : [dataValue2]
+"[datakey3]" : [dataValue3]
+.
+.

 ## Example
+
 ```mermaid-example
 pie showData
    title Key elements in Product X
--- a/docs/requirementDiagram.md
+++ b/docs/requirementDiagram.md
@ -25,11 +25,12 @@ Rendering requirements is straightforward.

 There are three types of components to a requirement diagram: requirement, element, and relationship.

-The grammar for defining each is defined below. Words denoted in angle brackets, such as ```<word>```, are enumerated keywords that have options elaborated in a table. ```user_defined_...``` is use in any place where user input is expected.
+The grammar for defining each is defined below. Words denoted in angle brackets, such as `<word>`, are enumerated keywords that have options elaborated in a table. `user_defined_...` is use in any place where user input is expected.

-An important note on user text: all input can be surrounded in quotes or not. For example, both ```Id: "here is an example"``` and ```Id: here is an example``` are both valid. However, users must be careful with unquoted input. The parser will fail if another keyword is detected.
+An important note on user text: all input can be surrounded in quotes or not. For example, both `Id: "here is an example"` and `Id: here is an example` are both valid. However, users must be careful with unquoted input. The parser will fail if another keyword is detected.

 ### Requirement
+
 A requirement definition contains a requirement type, name, id, text, risk, and verification method. The syntax follows:

 ```
@ -43,13 +44,14 @@ A requirement definition contains a requirement type, name, id, text, risk, and

 Type, risk, and method are enumerations defined in SysML.

-| Keyword | Options |
-|---|---|
-| Type | requirement, functionalRequirement, interfaceRequirement, performanceRequirement, physicalRequirement, designConstraint |
-| Risk | Low, Medium, High |
-| VerificationMethod | Analysis, Inspection, Test, Demonstration |
+| Keyword            | Options                                                                                                                 |
+| ------------------ | ----------------------------------------------------------------------------------------------------------------------- |
+| Type               | requirement, functionalRequirement, interfaceRequirement, performanceRequirement, physicalRequirement, designConstraint |
+| Risk               | Low, Medium, High                                                                                                       |
+| VerificationMethod | Analysis, Inspection, Test, Demonstration                                                                               |

 ### Element
+
 An element definition contains an element name, type, and document reference. These three are all user defined. The element feature is intended to be lightweight but allow requirements to be connected to portions of other documents.

 ```
@ -59,8 +61,8 @@ element user_defined_name {
 }
 ```

-
 ### Relationship
+
 Relationships are comprised of a source node, destination node, and relationship type.

 Each follows the definition format of
@ -82,6 +84,7 @@ A relationship type can be one of contains, copies, derives, satisfies, verifies
 Each relationship is labeled in the diagram.

 ## Larger Example
+
 This example uses all features of the diagram.

 ```mermaid-example
--- a/docs/security.md
+++ b/docs/security.md
@ -1,7 +1,9 @@
 # Security
+
 The Mermaid team takes the security of Mermaid and the applications that use Mermaid seriously. This page describes how to report any vulnerabilities you may find, and lists best practices to minimize the risk of introducing a vulnerability.

 ## Reporting vulnerabilities
+
 To report a vulnerability, please e-mail security@mermaid.live with a description of the issue, the steps you took to create the issue, affected versions, and if known, mitigations for the issue.

 We aim to reply within three working days, probably much sooner.
@ -16,7 +18,6 @@ Keep current with the latest Mermaid releases. We regularly update Mermaid, and

 Keep your application’s dependencies up to date. Make sure you upgrade your package dependencies to keep the dependencies up to date. Avoid pinning to specific versions for your dependencies and, if you do, make sure you check periodically to see if your dependencies have had security updates, and update the pin accordingly.

-
 ## Configuring DomPurify

-By default Mermaid uses a baseline [DOMPurify](https://github.com/cure53/DOMPurify) config. It is possible to override the options passed to DOMPurify by adding a `dompurifyConfig` key to the Mermaid options. This could potentially break the output of Mermaid so use this with caution.
+By default Mermaid uses a baseline [DOMPurify](https://github.com/cure53/DOMPurify) config. It is possible to override the options passed to DOMPurify by adding a `dompurifyConfig` key to the Mermaid options. This could potentially break the output of Mermaid so use this with caution.
--- a/docs/sequenceDiagram.md
+++ b/docs/sequenceDiagram.md
@ -1,6 +1,7 @@
 # Sequence diagrams

 **Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/sequenceDiagram.md)
+
 > A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.

 Mermaid can render sequence diagrams.
@ -38,6 +39,7 @@ sequenceDiagram
 ### Actors

 If you specifically want to use the actor symbol instead of a rectangle with text you can do so by using actor statements as per below.
+
 ```mermaid-example
 sequenceDiagram
    actor Alice
@ -68,15 +70,15 @@ Messages can be of two displayed either solid or with a dotted line.

 There are six types of arrows currently supported:

-| Type | Description                                 |
-| ---- | ------------------------------------------- |
-| ->   | Solid line without arrow                    |
-| -->  | Dotted line without arrow                   |
-| ->>  | Solid line with arrowhead                   |
-| -->> | Dotted line with arrowhead                  |
-| -x   | Solid line with a cross at the end          |
-| --x  | Dotted line with a cross at the end.        |
-| -)   | Solid line with an open arrow at the end (async)  |
+| Type | Description                                      |
+| ---- | ------------------------------------------------ |
+| ->   | Solid line without arrow                         |
+| -->  | Dotted line without arrow                        |
+| ->>  | Solid line with arrowhead                        |
+| -->> | Dotted line with arrowhead                       |
+| -x   | Solid line with a cross at the end               |
+| --x  | Dotted line with a cross at the end.             |
+| -)   | Solid line with an open arrow at the end (async) |
 | --)  | Dotted line with a open arrow at the end (async) |

 ## Activations
@ -335,7 +337,7 @@ sequenceDiagram

 ## Comments

-Comments can be entered within a sequence diagram, which will be ignored by the parser.  Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
+Comments can be entered within a sequence diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax

 ```mmd
 sequenceDiagram
@ -363,9 +365,9 @@ Because semicolons can be used instead of line breaks to define the markup, you
 It is possible to get a sequence number attached to each arrow in a sequence diagram. This can be configured when adding mermaid to the website as shown below:

 ```html
-    <script>
-      mermaid.initialize({ sequence: { showSequenceNumbers: true }, });
-    </script>
+<script>
+  mermaid.initialize({ sequence: { showSequenceNumbers: true } });
+</script>
 ```

 It can also be be turned on via the diagram code as in the diagram:
@ -385,12 +387,14 @@ sequenceDiagram

 ## Actor Menus

-Actors can have popup-menus containing individualized links to external pages.  For example, if an actor represented a web service, useful links might include a link to the service health dashboard, repo containing the code for the service, or a wiki page describing the service.
+Actors can have popup-menus containing individualized links to external pages. For example, if an actor represented a web service, useful links might include a link to the service health dashboard, repo containing the code for the service, or a wiki page describing the service.

 This can be configured by adding one or more link lines with the format:
+
 ```
 link <actor>: <link-label> @ <link-url>
 ```
+
 ```mmd
 sequenceDiagram
    participant Alice
@ -405,6 +409,7 @@ sequenceDiagram
 ```

 #### Advanced Menu Syntax
+
 There is an advanced syntax that relies on JSON formatting. If you are comfortable with JSON format, then this exists as well.

 This can be configured by adding the links lines with the format:
@ -451,81 +456,81 @@ Styling of a sequence diagram is done by defining a number of css classes. Durin

 ```css
 body {
-    background: white;
+  background: white;
 }

 .actor {
-    stroke: #ccccff;
-    fill: #ececff;
+  stroke: #ccccff;
+  fill: #ececff;
 }
 text.actor {
-    fill: black;
-    stroke: none;
-    font-family: Helvetica;
+  fill: black;
+  stroke: none;
+  font-family: Helvetica;
 }

 .actor-line {
-    stroke: grey;
+  stroke: grey;
 }

 .messageLine0 {
-    stroke-width: 1.5;
-    stroke-dasharray: '2 2';
-    marker-end: 'url(#arrowhead)';
-    stroke: black;
+  stroke-width: 1.5;
+  stroke-dasharray: '2 2';
+  marker-end: 'url(#arrowhead)';
+  stroke: black;
 }

 .messageLine1 {
-    stroke-width: 1.5;
-    stroke-dasharray: '2 2';
-    stroke: black;
+  stroke-width: 1.5;
+  stroke-dasharray: '2 2';
+  stroke: black;
 }

 #arrowhead {
-    fill: black;
+  fill: black;
 }

 .messageText {
-    fill: black;
-    stroke: none;
-    font-family: 'trebuchet ms', verdana, arial;
-    font-size: 14px;
+  fill: black;
+  stroke: none;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-size: 14px;
 }

 .labelBox {
-    stroke: #ccccff;
-    fill: #ececff;
+  stroke: #ccccff;
+  fill: #ececff;
 }

 .labelText {
-    fill: black;
-    stroke: none;
-    font-family: 'trebuchet ms', verdana, arial;
+  fill: black;
+  stroke: none;
+  font-family: 'trebuchet ms', verdana, arial;
 }

 .loopText {
-    fill: black;
-    stroke: none;
-    font-family: 'trebuchet ms', verdana, arial;
+  fill: black;
+  stroke: none;
+  font-family: 'trebuchet ms', verdana, arial;
 }

 .loopLine {
-    stroke-width: 2;
-    stroke-dasharray: '2 2';
-    marker-end: 'url(#arrowhead)';
-    stroke: #ccccff;
+  stroke-width: 2;
+  stroke-dasharray: '2 2';
+  marker-end: 'url(#arrowhead)';
+  stroke: #ccccff;
 }

 .note {
-    stroke: #decc93;
-    fill: #fff5ad;
+  stroke: #decc93;
+  fill: #fff5ad;
 }

 .noteText {
-    fill: black;
-    stroke: none;
-    font-family: 'trebuchet ms', verdana, arial;
-    font-size: 14px;
+  fill: black;
+  stroke: none;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-size: 14px;
 }
 ```

@ -539,12 +544,12 @@ How to use the CLI is described in the [mermaidCLI](mermaidCLI) page.

 ```javascript
 mermaid.sequenceConfig = {
-    diagramMarginX: 50,
-    diagramMarginY: 10,
-    boxTextMargin: 5,
-    noteMargin: 10,
-    messageMargin: 35,
-    mirrorActors: true
+  diagramMarginX: 50,
+  diagramMarginY: 10,
+  boxTextMargin: 5,
+  noteMargin: 10,
+  messageMargin: 35,
+  mirrorActors: true,
 };
 ```

@ -555,8 +560,8 @@ mermaid.sequenceConfig = {
 | mirrorActors      | Turns on/off the rendering of actors below the diagram as well as above it                                                                 | false                          |
 | bottomMarginAdj   | Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists. | 1                              |
 | actorFontSize     | Sets the font size for the actor's description                                                                                             | 14                             |
-| actorFontFamily   | Sets the font family for the actor's description                                                                                           | "Open Sans", sans-serif      |
-| actorFontWeight   | Sets the font weight for the actor's description                                                                                           | "Open Sans", sans-serif      |
+| actorFontFamily   | Sets the font family for the actor's description                                                                                           | "Open Sans", sans-serif        |
+| actorFontWeight   | Sets the font weight for the actor's description                                                                                           | "Open Sans", sans-serif        |
 | noteFontSize      | Sets the font size for actor-attached notes                                                                                                | 14                             |
 | noteFontFamily    | Sets the font family for actor-attached notes                                                                                              | "trebuchet ms", verdana, arial |
 | noteFontWeight    | Sets the font weight for actor-attached notes                                                                                              | "trebuchet ms", verdana, arial |
--- a/docs/stateDiagram.md
+++ b/docs/stateDiagram.md
@ -140,7 +140,7 @@ stateDiagram-v2
    }
 ```

-*You can not define transitions between internal states belonging to different composite states*
+_You can not define transitions between internal states belonging to different composite states_

 ## Choice

@ -177,7 +177,7 @@ It is possible to specify a fork in the diagram using &lt;&lt;fork&gt;&gt; &lt;&

 Sometimes nothing says it better then a Post-it note. That is also the case in state diagrams.

-Here you can choose to put the note to the *right of* or to the *left of* a node.
+Here you can choose to put the note to the _right of_ or to the _left of_ a node.

 ```mermaid-example
    stateDiagram-v2
@ -228,12 +228,11 @@ stateDiagram
      a --> b
    }
    B --> D
- ```
-
+```

 ## Comments

-Comments can be entered within a state diagram chart, which will be ignored by the parser.  Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
+Comments can be entered within a state diagram chart, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax

 ```mmd
 stateDiagram-v2
@ -248,7 +247,7 @@ stateDiagram-v2

 ## Styling

-Styling of the a state diagram is done by defining a number of css classes.  During rendering these classes are extracted from the file located at src/themes/state.scss
+Styling of the a state diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/state.scss

 ## Spaces in state names

--- a/docs/theme.css
+++ b/docs/theme.css
--- a/docs/theme_themed.css
+++ b/docs/theme_themed.css
--- a/docs/theming.md
+++ b/docs/theming.md
@ -2,14 +2,16 @@

 **Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/theming.md)

-With Version 8.7.0 Mermaid comes out with a system for dynamic and integrated configuration of themes. The intent is to increase the customizability and ease of styling for mermaid diagrams.  
+With Version 8.7.0 Mermaid comes out with a system for dynamic and integrated configuration of themes. The intent is to increase the customizability and ease of styling for mermaid diagrams.

 The theme can be altered by changing the root level variable `theme` variable in the configuration. To change it for the whole site you must use the `initialize` call. To do it for just for a single diagram you can use the `%%init%%` directive

 Themes follow and build upon the Levels of Configuration, and employ `directives` to modify and create custom configurations, as they were introduced in Version [8.6.0](./8.6.0_docs.md).

 ## Deployable Themes
+
 The following are a list of **Deployable themes**, sample `%%init%%` directives and `initialize` calls.
+
 1. **base**- Designed to be modified, as the name implies it is supposed to be used as the base for making custom themes.

 2. **forest**- A theme full of light greens that is easy on the eyes.
@ -20,21 +22,24 @@ The following are a list of **Deployable themes**, sample `%%init%%` directives

 5. **neutral**- The theme to be used for black and white printing.

-
 ## Site-wide Themes
+
 Site-wide themes are declared via `initialize` by site owners.

 Example of `Initialize` call setting `theme` to `base`:
+
 ```javascript
-    mermaidAPI.initialize({
-        'securityLevel': 'loose', 'theme': 'base'
-    });
+mermaidAPI.initialize({
+  securityLevel: 'loose',
+  theme: 'base',
+});
 ```
+
 **Notes**: Only site owners can use the `mermaidAPI.initialize` call, to set values. Site-Users will have to use `%%init%%` to modify or create the theme for their diagrams.

 ## Themes at the Local or Current Level
-When Generating a diagram using on a webpage that supports mermaid. It is also possible to override site-wide theme settings locally, for a specific diagram, using directives, as long as it is not prohibited by the `secure` array.

+When Generating a diagram using on a webpage that supports mermaid. It is also possible to override site-wide theme settings locally, for a specific diagram, using directives, as long as it is not prohibited by the `secure` array.

 ```mmd
 %%{init: {'theme':'base'}}%%
@ -42,7 +47,6 @@ When Generating a diagram using on a webpage that supports mermaid. It is also p
    a --> b
 ```

-
 Here is an example of how `%%init%%` can set the theme to 'base', this assumes that `themeVariables` are set to default:

 ```mermaid-example
@ -62,17 +66,17 @@ Here is an example of how `%%init%%` can set the theme to 'base', this assumes t
            G
          end
 ```
-# List of Themes 
+
+# List of Themes

 # Customizing Themes with `themeVariables`

 The easiest way to make a custom theme is to start with the base theme, and just modify theme variables through `themeVariables`, via `%%init%%`.

-|   Parameter    |                            Description                             | Type  | Required |         Objects contained          |
+| Parameter      | Description                                                        | Type  | Required | Objects contained                  |
 | -------------- | ------------------------------------------------------------------ | ----- | -------- | ---------------------------------- |
 | themeVariables | Array containing objects, modifiable with the `%%init%%` directive | Array | Required | primaryColor, lineColor, textColor |

-
 **Here is an example of overriding `primaryColor` through `themeVariables` and giving everything a different look, using `%%init%%`.**

 ```mermaid-example
@ -93,7 +97,6 @@ The easiest way to make a custom theme is to start with the base theme, and just
          end
 ```

-
 **Notes:**
 Leaving it empty will set all variable values to default.

@ -105,36 +108,35 @@ Color definitions have certain interactions in mermaid, this is in order to ensu

 You can create your own themes, by changing any of the given variables below. If you are using a dark background, set dark mode to true to adjust the colors. It is possible to override the calculations using the variable names below, with `%%init%%` if you wish to style it differently.

-
 ## Theme Variables Reference Table

 ```note
 Variables that are unique to some diagrams can be affected by changes in Theme Variables
 ```

-|       Variable       |         Default/Base/Factor value          | Calc |                                                           Description                                                            |
-| -------------------- | ------------------------------ | ---- | -------------------------------------------------------------------------------------------------------------------------------- |
-| darkMode             | false                          |      | Boolean Value that dictates how to calculate colors. "true" will activate darkmode.                                                                                 |
+| Variable             | Default/Base/Factor value      | Calc | Description                                                                                                                      |
+| -------------------- | ------------------------------ | ---- | -------------------------------------------------------------------------------------------------------------------------------- | --- | --- |
+| darkMode             | false                          |      | Boolean Value that dictates how to calculate colors. "true" will activate darkmode.                                              |
 | background           | #f4f4f4                        |      | Used to calculate color for items that should either be background colored or contrasting to the background.                     |
 | fontFamily           | "trebuchet ms", verdana, arial |      |                                                                                                                                  |
-| fontSize             | 16px                           |      |  Font Size, in pixels                                                                                                                                |
+| fontSize             | 16px                           |      | Font Size, in pixels                                                                                                             |
 | primaryColor         | #fff4dd                        |      | Color to be used as background in nodes, other colors will be derived from this                                                  |
-| primaryBorderColor   | based on primaryColor          | *    | Color to be used as border in nodes using primaryColor                                                                           |
-| primaryTextColor     | based on darkMode #ddd/#333    | *    | Color to be used as text color in nodes using primaryColor   
-| secondaryColor       | based on primaryColor          | *    |                                                                                                                                  |
-| secondaryBorderColor | based on secondaryColor        | *    | Color to be used as border in nodes using secondaryColor                                                                         |
-| secondaryTextColor   | based on secondaryColor        | *    | Color to be used as text color in nodes using secondaryColor   
-| tertiaryColor        | based on primaryColor          | *    |                                                                                                                                  |                                                                     |                                                                   |
-| tertiaryBorderColor  | based on tertiaryColor         | *    | Color to be used as border in nodes using tertiaryColor                                                                          |
-| tertiaryTextColor    | based on tertiaryColor         | *    | Color to be used as text color in nodes using tertiaryColor                                                                       |
+| primaryBorderColor   | based on primaryColor          | \*   | Color to be used as border in nodes using primaryColor                                                                           |
+| primaryTextColor     | based on darkMode #ddd/#333    | \*   | Color to be used as text color in nodes using primaryColor                                                                       |
+| secondaryColor       | based on primaryColor          | \*   |                                                                                                                                  |
+| secondaryBorderColor | based on secondaryColor        | \*   | Color to be used as border in nodes using secondaryColor                                                                         |
+| secondaryTextColor   | based on secondaryColor        | \*   | Color to be used as text color in nodes using secondaryColor                                                                     |
+| tertiaryColor        | based on primaryColor          | \*   |                                                                                                                                  |     |     |
+| tertiaryBorderColor  | based on tertiaryColor         | \*   | Color to be used as border in nodes using tertiaryColor                                                                          |
+| tertiaryTextColor    | based on tertiaryColor         | \*   | Color to be used as text color in nodes using tertiaryColor                                                                      |
 | noteBkgColor         | #fff5ad                        |      | Color used as background in notes                                                                                                |
-| noteTextColor        | #333                           |      | Text color in note rectangles.                                                                                                        |
-| noteBorderColor      | based on noteBkgColor          | *    | Border color in note rectangles.                                                                                                      |
-| lineColor            | based on background            | *    |                                                                                                                                  |
-| textColor            | based on primaryTextColor      | *    | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in gantt diagram |
-| mainBkg              | based on primaryColor          | *    | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram  etc                                 |
-| errorBkgColor        | tertiaryColor                  | *    | Color for syntax error message                                                                                                   |
-| errorTextColor       | tertiaryTextColor              | *    | Color for syntax error message                                                                                                   |
+| noteTextColor        | #333                           |      | Text color in note rectangles.                                                                                                   |
+| noteBorderColor      | based on noteBkgColor          | \*   | Border color in note rectangles.                                                                                                 |
+| lineColor            | based on background            | \*   |                                                                                                                                  |
+| textColor            | based on primaryTextColor      | \*   | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in gantt diagram |
+| mainBkg              | based on primaryColor          | \*   | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc                                  |
+| errorBkgColor        | tertiaryColor                  | \*   | Color for syntax error message                                                                                                   |
+| errorTextColor       | tertiaryTextColor              | \*   | Color for syntax error message                                                                                                   |

 # What follows are Variables, specific to different diagrams and charts.

@ -142,64 +144,64 @@ Variables that are unique to some diagrams can be affected by changes in Theme V

 ## Flowchart

-|       Variable      |    Default/ Associated Value        | Calc |                                                           Description                                                            |
-| -------------------- | ------------------------------ | ---- | -------------------------------------------------------------------------------------------------------------------------------- |
-| nodeBorder           | primaryBorderColor             | *    | Node Border Color                                                                                                                                |
-| clusterBkg           | tertiaryColor                  | *    | Background in subgraphs                                                                                                          |
-| clusterBorder        | tertiaryBorderColor            | *    | Cluster Border Color                                                                                                                               |
-| defaultLinkColor     | lineColor                      | *    | Link Color                                                                                                                                  |
-| titleColor           | tertiaryTextColor              | *    |  Title Color                                                                                                                              |
-| edgeLabelBackground  | based on secondaryColor        | *    |                                                                                                                                  |
-| nodeTextColor        | primaryTextColor               | *    |  Color for text inside Nodes.                                                                                                                                |
+| Variable            | Default/ Associated Value | Calc | Description                  |
+| ------------------- | ------------------------- | ---- | ---------------------------- |
+| nodeBorder          | primaryBorderColor        | \*   | Node Border Color            |
+| clusterBkg          | tertiaryColor             | \*   | Background in subgraphs      |
+| clusterBorder       | tertiaryBorderColor       | \*   | Cluster Border Color         |
+| defaultLinkColor    | lineColor                 | \*   | Link Color                   |
+| titleColor          | tertiaryTextColor         | \*   | Title Color                  |
+| edgeLabelBackground | based on secondaryColor   | \*   |                              |
+| nodeTextColor       | primaryTextColor          | \*   | Color for text inside Nodes. |

 # sequence diagram

-|         name          |      Default value      | Calc | Description |
-| --------------------- | ----------------------- | ---- | ----------- |
-| actorBorder           | primaryBorderColor      | *    |   Actor Border Color          |
-| actorBkg              | mainBkg                 | *    | Actor Background Color         |
-| actorTextColor        | primaryTextColor        | *    |  Actor Text Color            |
-| actorLineColor        | grey                    | *    |   Actor Line Color           |
-| signalColor           | textColor               | *    |  Signal Color           |
-| signalTextColor       | textColor               | *    |  Signal Text Color           |
-| labelBoxBkgColor      | actorBkg                | *    |  Label Box Background Color            |
-| labelBoxBorderColor   | actorBorder             | *    |   Label Box Border Color          |
-| labelTextColor        | actorTextColor          | *    |   Label Text Color           |
-| loopTextColor         | actorTextColor          | *    |   Loop ext Color            |
-| activationBorderColor | based on secondaryColor | *    |    Activation Border Color         |
-| activationBkgColor    | secondaryColor          | *    |   Activation Background Color          |
-| sequenceNumberColor   | based on lineColor      | *    |    Sequence Number Color          |
+| name                  | Default value           | Calc | Description                 |
+| --------------------- | ----------------------- | ---- | --------------------------- |
+| actorBorder           | primaryBorderColor      | \*   | Actor Border Color          |
+| actorBkg              | mainBkg                 | \*   | Actor Background Color      |
+| actorTextColor        | primaryTextColor        | \*   | Actor Text Color            |
+| actorLineColor        | grey                    | \*   | Actor Line Color            |
+| signalColor           | textColor               | \*   | Signal Color                |
+| signalTextColor       | textColor               | \*   | Signal Text Color           |
+| labelBoxBkgColor      | actorBkg                | \*   | Label Box Background Color  |
+| labelBoxBorderColor   | actorBorder             | \*   | Label Box Border Color      |
+| labelTextColor        | actorTextColor          | \*   | Label Text Color            |
+| loopTextColor         | actorTextColor          | \*   | Loop ext Color              |
+| activationBorderColor | based on secondaryColor | \*   | Activation Border Color     |
+| activationBkgColor    | secondaryColor          | \*   | Activation Background Color |
+| sequenceNumberColor   | based on lineColor      | \*   | Sequence Number Color       |

 # state colors

-|     name      |  Default value   | Calc |                 Description                 |
-| ------------- | ---------------- | ---- | ------------------------------------------- |
-| labelColor    | primaryTextColor | *    |                                             |
-| altBackground | tertiaryColor    | *    | Used for background in deep composite states |
+| name          | Default value    | Calc | Description                                  |
+| ------------- | ---------------- | ---- | -------------------------------------------- |
+| labelColor    | primaryTextColor | \*   |                                              |
+| altBackground | tertiaryColor    | \*   | Used for background in deep composite states |

 # class colors

-|   name    | Default value | Calc |      Description       |
-| --------- | ------------- | ---- | ---------------------- |
-| classText | textColor     | *    | Color of Text in class diagrams |
+| name      | Default value | Calc | Description                     |
+| --------- | ------------- | ---- | ------------------------------- |
+| classText | textColor     | \*   | Color of Text in class diagrams |

 # User journey colors

-|   name    |      Default value       | Calc |               Description               |
-| --------- | ------------------------ | ---- | --------------------------------------- |
-| fillType0 | primaryColor             | *    | Fill for 1st section in journey diagram |
-| fillType1 | secondaryColor           | *    | Fill for 2nd section in journey diagram |
-| fillType2 | based on primaryColor    | *    | Fill for 3rd section in journey diagram |
-| fillType3 | based on  secondaryColor | *    | Fill for 4th section in journey diagram |
-| fillType4 | based on primaryColor    | *    | Fill for 5th section in journey diagram |
-| fillType5 | based on secondaryColor  | *    | Fill for 6th section in journey diagram |
-| fillType6 | based on primaryColor    | *    | Fill for 7th section in journey diagram |
-| fillType7 | based on secondaryColor  | *    | Fill for 8th section in journey diagram |
-
-**Notes: Values are meant to create an alternating look.
+| name      | Default value           | Calc | Description                             |
+| --------- | ----------------------- | ---- | --------------------------------------- |
+| fillType0 | primaryColor            | \*   | Fill for 1st section in journey diagram |
+| fillType1 | secondaryColor          | \*   | Fill for 2nd section in journey diagram |
+| fillType2 | based on primaryColor   | \*   | Fill for 3rd section in journey diagram |
+| fillType3 | based on secondaryColor | \*   | Fill for 4th section in journey diagram |
+| fillType4 | based on primaryColor   | \*   | Fill for 5th section in journey diagram |
+| fillType5 | based on secondaryColor | \*   | Fill for 6th section in journey diagram |
+| fillType6 | based on primaryColor   | \*   | Fill for 7th section in journey diagram |
+| fillType7 | based on secondaryColor | \*   | Fill for 8th section in journey diagram |

+\*\*Notes: Values are meant to create an alternating look.

 # Here is an example of overriding `primaryColor` and giving everything a different look, using `%%init%%`.
+
 ```mermaid-example
 %%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
        graph TD
@ -218,12 +220,11 @@ Variables that are unique to some diagrams can be affected by changes in Theme V
          end
 ```

-**This got a bit too dark and bit too colorful. With some easy steps this can be fixed:
-
-* Make the primary color a little lighter
-* set the tertiary color to a reddish shade as well
-* make the edge label background differ from the subgraph by setting the edgeLabelBackground
+\*\*This got a bit too dark and bit too colorful. With some easy steps this can be fixed:

+- Make the primary color a little lighter
+- set the tertiary color to a reddish shade as well
+- make the edge label background differ from the subgraph by setting the edgeLabelBackground

 ```mermaid-example
 %%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ffcccc', 'edgeLabelBackground':'#ffffee', 'tertiaryColor': '#fff0f0'}}}%%
@ -255,6 +256,7 @@ When adjusting a theme it might be helpful to look at how your preferred theme g
 In the following examples, the directive `init` is used, with the `theme` being declared as `base`. For more information on using directives, read the documentation for [Version 8.6.0](/8.6.0_docs.md)

 ### Flowchart
+
 ```mmd
 %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
        graph TD
@ -272,6 +274,7 @@ In the following examples, the directive `init` is used, with the `theme` being
            G
          end
 ```
+
 ```mermaid
 %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
        graph TD
@ -291,6 +294,7 @@ In the following examples, the directive `init` is used, with the `theme` being
 ```

 ### Flowchart (beta)
+
 ```mermaid-example
 %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
        flowchart TD
@ -310,6 +314,7 @@ In the following examples, the directive `init` is used, with the `theme` being
 ```

 ### Sequence diagram
+
 ```mermaid-example
 %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
        sequenceDiagram
@ -330,6 +335,7 @@ In the following examples, the directive `init` is used, with the `theme` being
 ```

 ### Class diagram
+
 ```mermaid-example
 %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%

@ -357,6 +363,7 @@ classDiagram
 ```

 ### Gantt
+
 ```mermaid-example
 gantt
       dateFormat                YYYY-MM-DD
@ -388,6 +395,7 @@ gantt
 ```

 ### State diagram
+
 ```mermaid-example
 %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
      stateDiagram
@ -464,6 +472,7 @@ stateDiagram-v2
 ```

 ### User journey diagram
+
 ```mermaid-example
 journey
            title My working day
--- a/docs/upgrading.md
+++ b/docs/upgrading.md
@ -2,27 +2,24 @@

 Some of the interfaces has been upgraded.

-
 ## From version 0.4.0 to 0.5.0

-
 ### Initialization

 `mermaid_config` is no longer used. Instead a call to mermaid initialize is done as in the example below:

-
 #### version 0.4.0

 ```javascript
 mermaid_config = {
-    startOnLoad: true
-}
+  startOnLoad: true,
+};
 ```

 #### version 0.5.0

 ```javascript
 mermaid.initialize({
-    startOnLoad: true
-})
+  startOnLoad: true,
+});
 ```
--- a/src/mocks/mermaidAPI.ts
+++ b/src/mocks/mermaidAPI.ts
@ -1,6 +1,6 @@
 /**
 * Mocks for `./mermaidAPI`.
- * 
+ *
 * We can't easily use `jest.spyOn(mermaidAPI, "function")` since the object
 * is frozen with `Object.freeze()`.
 */
@ -16,6 +16,11 @@ import Diagram from '../Diagram';
 // const {parse} = jest.requireActual("./mermaidAPI");

 let hasLoadedDiagrams = false;
+/**
+ *
+ * @param text
+ * @param parseError
+ */
 function parse(text: string, parseError?: Function): boolean {
  if (!hasLoadedDiagrams) {
    addDiagrams();
@ -42,6 +47,6 @@ export const mermaidAPI = {
    configApi.reset(configApi.defaultConfig);
  },
  defaultConfig: configApi.defaultConfig,
-}
+};

 export default mermaidAPI;
--- a/src/dagre-wrapper/GraphObjects.md
+++ b/src/dagre-wrapper/GraphObjects.md
@ -16,6 +16,7 @@ flowchart
 ```

 In this case the dagre-wrapper will transform the graph to the graph below.
+
 ```mermaid
 flowchart
  C1 --> C2
@ -28,7 +29,8 @@ When rendering this diagram it it beeing rendered recursively. The diagram is re
 ```
 { clusterNode: true, graph }
 ```
-*Data for a clusterNode*
+
+_Data for a clusterNode_

 When a cluster has edges to or from some of its nodes leading outside the cluster the approach of recursive rendering can not be used as the layout of the graph needs to take responsibility for nodes outside of the cluster.

@ -49,7 +51,6 @@ In the diagram above the root diagram would be rendered with C1 whereas C2 would

 Of these two approaches the top one renders better and is used when possible. When this is not possible, ie an edge is added crossing the border the non recursive approach is used.

-
 # Graph objects and their properties

 Explains the representation of various objects used to render the flow charts and what the properties mean. This ofc from the perspective of the dagre-wrapper.
@ -57,35 +58,36 @@ Explains the representation of various objects used to render the flow charts an
 ## node

 Sample object:
+
 ```json
 {
-  "shape":"rect",
-  "labelText":"Test",
-  "rx":0,
-  "ry":0,
-  "class":"default",
-  "style":"",
-  "id":"Test",
-  "type":"group",
-  "padding":15}
+  "shape": "rect",
+  "labelText": "Test",
+  "rx": 0,
+  "ry": 0,
+  "class": "default",
+  "style": "",
+  "id": "Test",
+  "type": "group",
+  "padding": 15
+}
 ```

 This is set by the renderer of the diagram and insert the data that the wrapper neds for rendering.

-|  property  |                                                 description                                                 |
-| ---------- | ----------------------------------------------------------------------------------------------------------- |
-| labelStyle | Css styles for the label. User for instance for styling the labels for clusters                            |
-| shape      | The shape of the node.                                                                                      |
-| labelText  | The text on the label                                                                                       |
-| rx         | The corner radius - maybe part of the shape instead? Used for rects.                                        |
-| ry         | The corner radius - maybe part of the shape instead? Used for rects.                                        |
-| classes    | Classes to be set for the shape. Not used                                                                   |
-| style      | Css styles for the actual shape                                                                             |
-| id         | id of the shape                                                                                             |
-| type       | if set to group then this node indicates *a cluster*.                                                       |
-| padding    | Padding. Passed from the render as this might differ between different diagrams. Maybe obsolete.            |
-| data       | Non-generic data specific to the shape.                                                                     |
-
+| property   | description                                                                                      |
+| ---------- | ------------------------------------------------------------------------------------------------ |
+| labelStyle | Css styles for the label. User for instance for styling the labels for clusters                  |
+| shape      | The shape of the node.                                                                           |
+| labelText  | The text on the label                                                                            |
+| rx         | The corner radius - maybe part of the shape instead? Used for rects.                             |
+| ry         | The corner radius - maybe part of the shape instead? Used for rects.                             |
+| classes    | Classes to be set for the shape. Not used                                                        |
+| style      | Css styles for the actual shape                                                                  |
+| id         | id of the shape                                                                                  |
+| type       | if set to group then this node indicates _a cluster_.                                            |
+| padding    | Padding. Passed from the render as this might differ between different diagrams. Maybe obsolete. |
+| data       | Non-generic data specific to the shape.                                                          |

 # edge

@ -100,22 +102,20 @@ double_arrow_circle

 Lets try to make these types semantic free so that diagram type semantics does not find its way in to this more generic layer.

-
 Required edgeData for proper rendering:

-|  property  |               description                |
-| ---------- | ---------------------------------------- |
-| id         | Id of the edge                           |
-| arrowHead  | overlap between arrowHead and arrowType? |
-| arrowType  | overlap between arrowHead and arrowType? |
-| style      |                                          |
-| labelStyle |                                          |
-| label      | overlap between label and labelText?     |
-| labelPos   |                                          |
-| labelType  | overlap between label and labelText?     |
-| thickness  | Sets the thinkess of the edge. Can be \['normal', 'thick'\] |
-| pattern    | Sets the pattern of the edge. Can be \['solid', 'dotted', 'dashed'\]    |
-
+| property   | description                                                          |
+| ---------- | -------------------------------------------------------------------- |
+| id         | Id of the edge                                                       |
+| arrowHead  | overlap between arrowHead and arrowType?                             |
+| arrowType  | overlap between arrowHead and arrowType?                             |
+| style      |                                                                      |
+| labelStyle |                                                                      |
+| label      | overlap between label and labelText?                                 |
+| labelPos   |                                                                      |
+| labelType  | overlap between label and labelText?                                 |
+| thickness  | Sets the thinkess of the edge. Can be \['normal', 'thick'\]          |
+| pattern    | Sets the pattern of the edge. Can be \['solid', 'dotted', 'dashed'\] |

 # Markers

@ -127,12 +127,13 @@ insertMarkers(el, \['point', 'circle'\])
 The example above adds the markers point and cross. This means that edges with the arrowTypes arrow_cross, double_arrow_cross, arrow_point and double_arrow_cross will get the corresponding markers but arrowType arrow_cross will have no impact.

 Current markers:
-* point - the standard arrow from flowcharts
-* circle - Arrows ending with circle
-* cross - arrows starting and ending with a cross

+- point - the standard arrow from flowcharts
+- circle - Arrows ending with circle
+- cross - arrows starting and ending with a cross

 // Todo - in case of common renderer
+
 # Common functions used by the renderer to be implemented by the Db

 getDirection
--- a/src/dagre-wrapper/createLabel.js
+++ b/src/dagre-wrapper/createLabel.js
@ -1,5 +1,5 @@
 import { select } from 'd3';
-import { log } from '../logger'; // eslint-disable-line
+import { log } from '../logger';
 import { getConfig } from '../config';
 import { sanitizeText, evaluate } from '../diagrams/common/common';
 import { decodeEntities } from '../mermaidAPI';
--- a/src/dagre-wrapper/edges.js
+++ b/src/dagre-wrapper/edges.js
@ -1,4 +1,4 @@
-import { log } from '../logger'; // eslint-disable-line
+import { log } from '../logger';
 import createLabel from './createLabel';
 import { line, curveBasis, select } from 'd3';
 import { getConfig } from '../config';
@ -240,7 +240,7 @@ export const intersection = (node, outsidePoint, insidePoint) => {
  const Q = Math.abs(outsidePoint.y - insidePoint.y);
  const R = Math.abs(outsidePoint.x - insidePoint.x);
  // log.warn();
-  if (Math.abs(y - outsidePoint.y) * w > Math.abs(x - outsidePoint.x) * h) { // eslint-disable-line
+  if (Math.abs(y - outsidePoint.y) * w > Math.abs(x - outsidePoint.x) * h) {
    // Intersection is top or bottom of rect.
    // let q = insidePoint.y < outsidePoint.y ? outsidePoint.y - h - y : y - h - outsidePoint.y;
    let q = insidePoint.y < outsidePoint.y ? outsidePoint.y - h - y : y - h - outsidePoint.y;
--- a/src/dagre-wrapper/index.js
+++ b/src/dagre-wrapper/index.js
@ -19,7 +19,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
  const dir = graph.graph().rankdir;
  log.trace('Dir in recursive render - dir:', dir);

-  const elem = _elem.insert('g').attr('class', 'root'); // eslint-disable-line
+  const elem = _elem.insert('g').attr('class', 'root');
  if (!graph.nodes()) {
    log.info('No nodes found for', graph);
  } else {
@ -28,7 +28,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
  if (graph.edges().length > 0) {
    log.trace('Recursive edges', graph.edge(graph.edges()[0]));
  }
-  const clusters = elem.insert('g').attr('class', 'clusters'); // eslint-disable-line
+  const clusters = elem.insert('g').attr('class', 'clusters');
  const edgePaths = elem.insert('g').attr('class', 'edgePaths');
  const edgeLabels = elem.insert('g').attr('class', 'edgeLabels');
  const nodes = elem.insert('g').attr('class', 'nodes');
--- a/src/dagre-wrapper/nodes.js
+++ b/src/dagre-wrapper/nodes.js
@ -1,5 +1,5 @@
 import { select } from 'd3';
-import { log } from '../logger'; // eslint-disable-line
+import { log } from '../logger';
 import { labelHelper, updateNodeBounds, insertPolygonShape } from './shapes/util';
 import { getConfig } from '../config';
 import intersect from './intersect/index.js';
--- a/src/dagre-wrapper/shapes/note.js
+++ b/src/dagre-wrapper/shapes/note.js
@ -1,5 +1,5 @@
 import { updateNodeBounds, labelHelper } from './util';
-import { log } from '../../logger'; // eslint-disable-line
+import { log } from '../../logger';
 import intersect from '../intersect/index.js';

 const note = (parent, node) => {
--- a/src/diagrams/c4/svgDraw.js
+++ b/src/diagrams/c4/svgDraw.js
@ -875,7 +875,6 @@ const _drawTextCandidateFunc = (function () {
  function _setTextAttrs(toText, fromTextAttrsDict) {
    for (const key in fromTextAttrsDict) {
      if (fromTextAttrsDict.hasOwnProperty(key)) {
-        // eslint-disable-line
        toText.attr(key, fromTextAttrsDict[key]);
      }
    }
--- a/src/diagrams/class/classRenderer-v2.js
+++ b/src/diagrams/class/classRenderer-v2.js
@ -216,7 +216,6 @@ export const addRelations = function (relations, g) {
      edgeData.labelpos = 'c';

      if (getConfig().flowchart.htmlLabels) {
-        // eslint-disable-line
        edgeData.labelType = 'html';
        edgeData.label = '<span class="edgeLabel">' + edge.text + '</span>';
      } else {
--- a/src/diagrams/flowchart/flowChartShapes.spec.js
+++ b/src/diagrams/flowchart/flowChartShapes.spec.js
@ -94,6 +94,9 @@ describe('flowchart shapes', function () {
  });
 });

+/**
+ *
+ */
 function MockRender() {
  const shapes = {};
  return {
@ -103,6 +106,11 @@ function MockRender() {
  };
 }

+/**
+ *
+ * @param tag
+ * @param {...any} args
+ */
 function MockSvg(tag, ...args) {
  const children = [];
  const attributes = {};
@ -139,6 +147,11 @@ function useWidth(w, h) {
  return w;
 }

+/**
+ *
+ * @param w
+ * @param h
+ */
 function useHeight(w, h) {
  return h;
 }
--- a/src/diagrams/flowchart/flowDb.js
+++ b/src/diagrams/flowchart/flowDb.js
@ -477,7 +477,7 @@ export const addSubGraph = function (_id, list, _title) {
        return false;
      }
      if (type in prims) {
-        return prims[type].hasOwnProperty(item) ? false : (prims[type][item] = true); // eslint-disable-line
+        return prims[type].hasOwnProperty(item) ? false : (prims[type][item] = true);
      } else {
        return objs.indexOf(item) >= 0 ? false : objs.push(item);
      }
--- a/src/diagrams/gantt/ganttRenderer.js
+++ b/src/diagrams/gantt/ganttRenderer.js
@ -621,7 +621,6 @@ export const draw = function (text, id, version, diagObj) {
    const result = [];
    for (let i = 0, l = arr.length; i < l; ++i) {
      if (!Object.prototype.hasOwnProperty.call(hash, arr[i])) {
-        // eslint-disable-line
        // it works with objects! in FF, at least
        hash[arr[i]] = true;
        result.push(arr[i]);
--- a/src/diagrams/git/gitGraphAst.js
+++ b/src/diagrams/git/gitGraphAst.js
@ -24,8 +24,10 @@ let curBranch = mainBranchName;
 let direction = 'LR';
 let seq = 0;

+/**
+ *
+ */
 function getId() {
-  // eslint-disable-line
  return random({ length: 7 });
 }

--- a/src/diagrams/git/layout.js
+++ b/src/diagrams/git/layout.js
@ -1,6 +1,6 @@
 import { getConfig } from '../../config';

-export default (dir, _branches, _commits) => { // eslint-disable-line
+export default (dir, _branches, _commits) => {
  const config = getConfig().gitGraph;
  const branches = [];
  const commits = [];
--- a/src/diagrams/sequence/svgDraw.js
+++ b/src/diagrams/sequence/svgDraw.js
@ -918,7 +918,7 @@ const _drawTextCandidateFunc = (function () {
   */
  function _setTextAttrs(toText, fromTextAttrsDict) {
    for (const key in fromTextAttrsDict) {
-      if (fromTextAttrsDict.hasOwnProperty(key)) { // eslint-disable-line
+      if (fromTextAttrsDict.hasOwnProperty(key)) {
        toText.attr(key, fromTextAttrsDict[key]);
      }
    }
@ -1026,7 +1026,7 @@ const _drawMenuItemTextCandidateFunc = (function () {
   */
  function _setTextAttrs(toText, fromTextAttrsDict) {
    for (const key in fromTextAttrsDict) {
-      if (fromTextAttrsDict.hasOwnProperty(key)) { // eslint-disable-line
+      if (fromTextAttrsDict.hasOwnProperty(key)) {
        toText.attr(key, fromTextAttrsDict[key]);
      }
    }
--- a/src/diagrams/state/stateDb.js
+++ b/src/diagrams/state/stateDb.js
@ -121,8 +121,7 @@ let documents = {
 let currentDocument = documents.root;

 let startCnt = 0;
-let endCnt = 0; // eslint-disable-line
-// let stateCnt = 0;
+let endCnt = 0; // let stateCnt = 0;

 let title = 'State diagram';
 let description = '';
@ -180,7 +179,7 @@ export const clear = function (saveCommon) {
  currentDocument = documents.root;

  startCnt = 0;
-  endCnt = 0; // eslint-disable-line
+  endCnt = 0;
  classes = [];
  if (!saveCommon) {
    commonClear();
--- a/src/diagrams/user-journey/svgDraw.js
+++ b/src/diagrams/user-journey/svgDraw.js
@ -439,7 +439,6 @@ const _drawTextCandidateFunc = (function () {
  function _setTextAttrs(toText, fromTextAttrsDict) {
    for (const key in fromTextAttrsDict) {
      if (key in fromTextAttrsDict) {
-        // eslint-disable-line
        // noinspection JSUnfilteredForInLoop
        toText.attr(key, fromTextAttrsDict[key]);
      }
--- a/src/utils.ts
+++ b/src/utils.ts
@ -44,6 +44,7 @@ const anyComment = /\s*%%.*\n/gm;
 /**
 * @function detectInit Detects the init config object from the text
 *
+ * @param config
 *   ```mermaid
 *   %%{init: {"theme": "debug", "logLevel": 1 }}%%
 *   graph LR
@ -326,7 +327,7 @@ const calcLabelPosition = (points) => {

 const calcCardinalityPosition = (isRelationTypePresent, points, initialPosition) => {
  let prevPoint;
-  let totalDistance = 0; // eslint-disable-line
+  let totalDistance = 0;
  log.info('our points', points);
  if (points[0] !== initialPosition) {
    points = points.reverse();
@ -386,7 +387,7 @@ const calcTerminalLabelPosition = (terminalMarkerSize, position, _points) => {
  // Todo looking to faster cloning method
  let points = JSON.parse(JSON.stringify(_points));
  let prevPoint;
-  let totalDistance = 0; // eslint-disable-line
+  let totalDistance = 0;
  log.info('our points', points);
  if (position !== 'start_left' && position !== 'start_right') {
    points = points.reverse();
@ -945,10 +946,18 @@ export interface DetailedError {
  hash: any;
 }

+/**
+ *
+ * @param error
+ */
 export function isDetailedError(error: unknown): error is DetailedError {
  return 'str' in error;
 }

+/**
+ *
+ * @param error
+ */
 export function getErrorMessage(error: unknown): string {
  if (error instanceof Error) return error.message;
  return String(error);
--- a/test.js
+++ b/test.js
@ -1,3 +1,6 @@
+/**
+ *
+ */
 function apa() {
  // comment's
  const a = 1;