Updating Release version to 9.1.1

Added support to change the position of the main branch

.github/codeql/codeql-config.yml

@@ -0,0 +1,4 @@
+name: "CodeQL config"
+paths-ignore:
+  - dist
+  - cypress

.github/workflows/build.yml

@@ -2,6 +2,9 @@ name: Build
 
 on: [push, pull_request]
 
+permissions:
+  contents: read
+
 jobs:
   build:
     runs-on: ubuntu-latest
@@ -30,7 +33,7 @@ jobs:
       run: yarn build
 
     - name: Upload Build as Artifact
-      uses: actions/upload-artifact@v2
+      uses: actions/upload-artifact@v3
       with:
         name: dist
         path: dist
@@ -38,21 +41,3 @@ jobs:
     - name: Run Unit Tests
       run: |
         yarn test --coverage
-
-    #- name: Upload Test Results
-    #  uses: coverallsapp/github-action@v1.0.1
-    #  with:
-    #    github-token: ${{ secrets.GITHUB_TOKEN }}
-    #    parallel: true
-
-    # - name: Run E2E Tests
-    #   run: yarn e2e
-    #   env:
-    #     PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
-    #     CYPRESS_CACHE_FOLDER: .cache/Cypress
-
-    #- name: Post Upload Test Results
-    #  uses: coverallsapp/github-action@master
-    #  with:
-    #    github-token: ${{ secrets.GITHUB_TOKEN }}
-    #    parallel-finished: true

.github/workflows/check-readme-in-sync.yml

@@ -10,6 +10,9 @@ on:
     branches:
       - gh-pages
 
+permissions:
+  contents: read
+
 jobs:
   check:
     runs-on: ubuntu-latest

.github/workflows/checks.yml

@@ -16,4 +16,3 @@ jobs:
         tests: "./cypress/integration/**/**.spec.js"
         token: ${{ secrets.GITHUB_TOKEN }}
         has-tests-label: true
-

.github/workflows/codeql.yml

@@ -0,0 +1,59 @@
+
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ develop ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ develop ]
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        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
+
+    # 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
+
+    # ℹ️ 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
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v2

.github/workflows/dependency-review.yml

@@ -0,0 +1,20 @@
+# Dependency Review Action
+#
+# This Action will scan dependency manifest files that change as part of a Pull Reqest, surfacing known-vulnerable versions of the packages declared or updated in the PR. Once installed, if the workflow run is marked as required, PRs introducing known-vulnerable packages will be blocked from merging.
+#
+# Source repository: https://github.com/actions/dependency-review-action
+# Public documentation: https://docs.github.com/en/code-security/supply-chain-security/understanding-your-software-supply-chain/about-dependency-review#dependency-review-enforcement
+name: 'Dependency Review'
+on: [pull_request]
+
+permissions:
+  contents: read
+
+jobs:
+  dependency-review:
+    runs-on: ubuntu-latest
+    steps:
+      - name: 'Checkout Repository'
+        uses: actions/checkout@v3
+      - name: 'Dependency Review'
+        uses: actions/dependency-review-action@v1

.github/workflows/e2e

@@ -2,6 +2,9 @@ name: E2E
 
 on: [push, pull_request]
 
+permissions:
+  contents: read
+
 jobs:
   build:
     runs-on: ubuntu-latest
@@ -29,24 +32,7 @@ jobs:
     - name: Run Build
       run: yarn build
 
-    # - name: Run e2e Tests
-    #   run: |
-    #     yarn e2e
-
-    #- name: Upload Test Results
-    #  uses: coverallsapp/github-action@v1.0.1
-    #  with:
-    #    github-token: ${{ secrets.GITHUB_TOKEN }}
-    #    parallel: true
-
     - name: Run E2E Tests
       run: yarn e2e
       env:
-#        PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
         CYPRESS_CACHE_FOLDER: .cache/Cypress
-
-    #- name: Post Upload Test Results
-    #  uses: coverallsapp/github-action@master
-    #  with:
-    #    github-token: ${{ secrets.GITHUB_TOKEN }}
-    #    parallel-finished: true

CONTRIBUTING.md

@@ -2,7 +2,7 @@
 
 So you want to help? That's great!
 
-![Image of happy people jumping with excitement](https://media.giphy.com/media/BlVnrxJgTGsUw/giphy.gif)
+![Happy people jumping with excitement](https://media.giphy.com/media/BlVnrxJgTGsUw/giphy.gif)
 
 Here are a few things to know to get you started on the right path.
 
@@ -76,7 +76,7 @@ This is important so that, if someone else does a change to the grammar that doe
 
 ### **Add e2e tests**
 
-This tests the rendering and visual apearance of the diagram. This ensures that the rendering of that feature in the e2e will be reviewed in the release process going forward. Less chance that it breaks!
+This tests the rendering and visual appearance of the diagram. This ensures that the rendering of that feature in the e2e will be reviewed in the release process going forward. Less chance that it breaks!
 
 To start working with the e2e tests, run `yarn dev` to start the dev server, after that 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).
 
@@ -123,4 +123,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)
 
 
-![Image of superhero wishing you good luck](https://media.giphy.com/media/l49JHz7kJvl6MCj3G/giphy.gif)
+![A superhero wishing you good luck](https://media.giphy.com/media/l49JHz7kJvl6MCj3G/giphy.gif)

README.md

@@ -2,13 +2,15 @@
 
 English | [简体中文](./README.zh-CN.md)
 
-![banner](./img/header.png)
+<img src="./img/header.png" alt="" />
 
 :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/" alt="Link to landing page for the book The Official Guide To mermaid.js"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/img/book-banner-post-release.jpg"></a>
+<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>
 
 ## About
 
@@ -21,14 +23,27 @@ Diagramming and documentation costs precious developer time and gets outdated qu
 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 allows even non-programmers to easily create detailed and diagrams through the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor/).<br/>
+
+Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor/).<br/>
 [Tutorials](./docs/Tutorials.md) has video tutorials.
 Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/integrations.md).
 
-For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/n00b-overview.md) and [Usage](./docs/usage.md).
+You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/integrations.md).
+
+For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/n00b-overview.md), [Usage](./docs/usage.md) and [Tutorials](./docs/Tutorials.md).
 
 🌐 [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
@@ -36,10 +51,11 @@ For a more detailed introduction to Mermaid and some of its more basic uses, loo
 __The following are some examples of the diagrams, charts and graphs that can be made using Mermaid. Click here 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://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0hhcmRdIC0tPnxUZXh0fCBCKFJvdW5kKVxuICAgIEIgLS0-IEN7RGVjaXNpb259XG4gICAgQyAtLT58T25lfCBEW1Jlc3VsdCAxXVxuICAgIEMgLS0-fFR3b3wgRVtSZXN1bHQgMl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
+### Flowchart [<a href="https://mermaid-js.github.io/mermaid/#/flowchart">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0hhcmRdIC0tPnxUZXh0fCBCKFJvdW5kKVxuICAgIEIgLS0-IEN7RGVjaXNpb259XG4gICAgQyAtLT58T25lfCBEW1Jlc3VsdCAxXVxuICAgIEMgLS0-fFR3b3wgRVtSZXN1bHQgMl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
 
 ```
 flowchart LR
+
 A[Hard] -->|Text| B(Round)
 B --> C{Decision}
 C -->|One| D[Result 1]
@@ -47,6 +63,7 @@ C -->|Two| E[Result 2]
 ```
 ```mermaid
 flowchart LR
+
 A[Hard] -->|Text| B(Round)
 B --> C{Decision}
 C -->|One| D[Result 1]
@@ -54,7 +71,7 @@ C -->|Two| E[Result 2]
 ```
 
 
-## Sequence diagram [<a href="https://mermaid-js.github.io/mermaid/#/sequenceDiagram">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic2VxdWVuY2VEaWFncmFtXG5BbGljZS0-PkpvaG46IEhlbGxvIEpvaG4sIGhvdyBhcmUgeW91P1xubG9vcCBIZWFsdGhjaGVja1xuICAgIEpvaG4tPj5Kb2huOiBGaWdodCBhZ2FpbnN0IGh5cG9jaG9uZHJpYVxuZW5kXG5Ob3RlIHJpZ2h0IG9mIEpvaG46IFJhdGlvbmFsIHRob3VnaHRzIVxuSm9obi0tPj5BbGljZTogR3JlYXQhXG5Kb2huLT4-Qm9iOiBIb3cgYWJvdXQgeW91P1xuQm9iLS0-PkpvaG46IEpvbGx5IGdvb2QhIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
+### Sequence diagram [<a href="https://mermaid-js.github.io/mermaid/#/sequenceDiagram">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic2VxdWVuY2VEaWFncmFtXG5BbGljZS0-PkpvaG46IEhlbGxvIEpvaG4sIGhvdyBhcmUgeW91P1xubG9vcCBIZWFsdGhjaGVja1xuICAgIEpvaG4tPj5Kb2huOiBGaWdodCBhZ2FpbnN0IGh5cG9jaG9uZHJpYVxuZW5kXG5Ob3RlIHJpZ2h0IG9mIEpvaG46IFJhdGlvbmFsIHRob3VnaHRzIVxuSm9obi0tPj5BbGljZTogR3JlYXQhXG5Kb2huLT4-Qm9iOiBIb3cgYWJvdXQgeW91P1xuQm9iLS0-PkpvaG46IEpvbGx5IGdvb2QhIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
 
 ```
 sequenceDiagram
@@ -79,7 +96,7 @@ John->>Bob: How about you?
 Bob-->>John: Jolly good!
 ```
 
-## Gantt chart [<a href="https://mermaid-js.github.io/mermaid/#/gantt">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ2FudHRcbnNlY3Rpb24gU2VjdGlvblxuQ29tcGxldGVkIDpkb25lLCAgICBkZXMxLCAyMDE0LTAxLTA2LDIwMTQtMDEtMDhcbkFjdGl2ZSAgICAgICAgOmFjdGl2ZSwgIGRlczIsIDIwMTQtMDEtMDcsIDNkXG5QYXJhbGxlbCAxICAgOiAgICAgICAgIGRlczMsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAyICAgOiAgICAgICAgIGRlczQsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAzICAgOiAgICAgICAgIGRlczUsIGFmdGVyIGRlczMsIDFkXG5QYXJhbGxlbCA0ICAgOiAgICAgICAgIGRlczYsIGFmdGVyIGRlczQsIDFkIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
+### Gantt chart [<a href="https://mermaid-js.github.io/mermaid/#/gantt">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ2FudHRcbnNlY3Rpb24gU2VjdGlvblxuQ29tcGxldGVkIDpkb25lLCAgICBkZXMxLCAyMDE0LTAxLTA2LDIwMTQtMDEtMDhcbkFjdGl2ZSAgICAgICAgOmFjdGl2ZSwgIGRlczIsIDIwMTQtMDEtMDcsIDNkXG5QYXJhbGxlbCAxICAgOiAgICAgICAgIGRlczMsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAyICAgOiAgICAgICAgIGRlczQsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAzICAgOiAgICAgICAgIGRlczUsIGFmdGVyIGRlczMsIDFkXG5QYXJhbGxlbCA0ICAgOiAgICAgICAgIGRlczYsIGFmdGVyIGRlczQsIDFkIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
 
 ```
 gantt
@@ -102,7 +119,7 @@ gantt
     Parallel 4   :         des6, after des4, 1d
 ```
 
-## Class diagram [<a href="https://mermaid-js.github.io/mermaid/#/classDiagram">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiY2xhc3NEaWFncmFtXG5DbGFzczAxIDx8LS0gQXZlcnlMb25nQ2xhc3MgOiBDb29sXG48PGludGVyZmFjZT4-IENsYXNzMDFcbkNsYXNzMDkgLS0-IEMyIDogV2hlcmUgYW0gaT9cbkNsYXNzMDkgLS0qIEMzXG5DbGFzczA5IC0tfD4gQ2xhc3MwN1xuQ2xhc3MwNyA6IGVxdWFscygpXG5DbGFzczA3IDogT2JqZWN0W10gZWxlbWVudERhdGFcbkNsYXNzMDEgOiBzaXplKClcbkNsYXNzMDEgOiBpbnQgY2hpbXBcbkNsYXNzMDEgOiBpbnQgZ29yaWxsYVxuY2xhc3MgQ2xhc3MxMCB7XG4gID4-c2VydmljZT4-XG4gIGludCBpZFxuICBzaXplKClcbn0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
+### Class diagram [<a href="https://mermaid-js.github.io/mermaid/#/classDiagram">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiY2xhc3NEaWFncmFtXG5DbGFzczAxIDx8LS0gQXZlcnlMb25nQ2xhc3MgOiBDb29sXG48PGludGVyZmFjZT4-IENsYXNzMDFcbkNsYXNzMDkgLS0-IEMyIDogV2hlcmUgYW0gaT9cbkNsYXNzMDkgLS0qIEMzXG5DbGFzczA5IC0tfD4gQ2xhc3MwN1xuQ2xhc3MwNyA6IGVxdWFscygpXG5DbGFzczA3IDogT2JqZWN0W10gZWxlbWVudERhdGFcbkNsYXNzMDEgOiBzaXplKClcbkNsYXNzMDEgOiBpbnQgY2hpbXBcbkNsYXNzMDEgOiBpbnQgZ29yaWxsYVxuY2xhc3MgQ2xhc3MxMCB7XG4gID4-c2VydmljZT4-XG4gIGludCBpZFxuICBzaXplKClcbn0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
 
 ```
 classDiagram
@@ -141,7 +158,7 @@ class Class10 {
 }
 ```
 
-## State diagram [<a href="https://mermaid-js.github.io/mermaid/#/stateDiagram">docs</a> - <a href="https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtLXYyXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQiLCJ0aGVtZVZhcmlhYmxlcyI6eyJiYWNrZ3JvdW5kIjoid2hpdGUiLCJwcmltYXJ5Q29sb3IiOiIjRUNFQ0ZGIiwic2Vjb25kYXJ5Q29sb3IiOiIjZmZmZmRlIiwidGVydGlhcnlDb2xvciI6ImhzbCg4MCwgMTAwJSwgOTYuMjc0NTA5ODAzOSUpIiwicHJpbWFyeUJvcmRlckNvbG9yIjoiaHNsKDI0MCwgNjAlLCA4Ni4yNzQ1MDk4MDM5JSkiLCJzZWNvbmRhcnlCb3JkZXJDb2xvciI6ImhzbCg2MCwgNjAlLCA4My41Mjk0MTE3NjQ3JSkiLCJ0ZXJ0aWFyeUJvcmRlckNvbG9yIjoiaHNsKDgwLCA2MCUsIDg2LjI3NDUwOTgwMzklKSIsInByaW1hcnlUZXh0Q29sb3IiOiIjMTMxMzAwIiwic2Vjb25kYXJ5VGV4dENvbG9yIjoiIzAwMDAyMSIsInRlcnRpYXJ5VGV4dENvbG9yIjoicmdiKDkuNTAwMDAwMDAwMSwgOS41MDAwMDAwMDAxLCA5LjUwMDAwMDAwMDEpIiwibGluZUNvbG9yIjoiIzMzMzMzMyIsInRleHRDb2xvciI6IiMzMzMiLCJtYWluQmtnIjoiI0VDRUNGRiIsInNlY29uZEJrZyI6IiNmZmZmZGUiLCJib3JkZXIxIjoiIzkzNzBEQiIsImJvcmRlcjIiOiIjYWFhYTMzIiwiYXJyb3doZWFkQ29sb3IiOiIjMzMzMzMzIiwiZm9udEZhbWlseSI6IlwidHJlYnVjaGV0IG1zXCIsIHZlcmRhbmEsIGFyaWFsIiwiZm9udFNpemUiOiIxNnB4IiwibGFiZWxCYWNrZ3JvdW5kIjoiI2U4ZThlOCIsIm5vZGVCa2ciOiIjRUNFQ0ZGIiwibm9kZUJvcmRlciI6IiM5MzcwREIiLCJjbHVzdGVyQmtnIjoiI2ZmZmZkZSIsImNsdXN0ZXJCb3JkZXIiOiIjYWFhYTMzIiwiZGVmYXVsdExpbmtDb2xvciI6IiMzMzMzMzMiLCJ0aXRsZUNvbG9yIjoiIzMzMyIsImVkZ2VMYWJlbEJhY2tncm91bmQiOiIjZThlOGU4IiwiYWN0b3JCb3JkZXIiOiJoc2woMjU5LjYyNjE2ODIyNDMsIDU5Ljc3NjUzNjMxMjglLCA4Ny45MDE5NjA3ODQzJSkiLCJhY3RvckJrZyI6IiNFQ0VDRkYiLCJhY3RvclRleHRDb2xvciI6ImJsYWNrIiwiYWN0b3JMaW5lQ29sb3IiOiJncmV5Iiwic2lnbmFsQ29sb3IiOiIjMzMzIiwic2lnbmFsVGV4dENvbG9yIjoiIzMzMyIsImxhYmVsQm94QmtnQ29sb3IiOiIjRUNFQ0ZGIiwibGFiZWxCb3hCb3JkZXJDb2xvciI6ImhzbCgyNTkuNjI2MTY4MjI0MywgNTkuNzc2NTM2MzEyOCUsIDg3LjkwMTk2MDc4NDMlKSIsImxhYmVsVGV4dENvbG9yIjoiYmxhY2siLCJsb29wVGV4dENvbG9yIjoiYmxhY2siLCJub3RlQm9yZGVyQ29sb3IiOiIjYWFhYTMzIiwibm90ZUJrZ0NvbG9yIjoiI2ZmZjVhZCIsIm5vdGVUZXh0Q29sb3IiOiJibGFjayIsImFjdGl2YXRpb25Cb3JkZXJDb2xvciI6IiM2NjYiLCJhY3RpdmF0aW9uQmtnQ29sb3IiOiIjZjRmNGY0Iiwic2VxdWVuY2VOdW1iZXJDb2xvciI6IndoaXRlIiwic2VjdGlvbkJrZ0NvbG9yIjoicmdiYSgxMDIsIDEwMiwgMjU1LCAwLjQ5KSIsImFsdFNlY3Rpb25Ca2dDb2xvciI6IndoaXRlIiwic2VjdGlvbkJrZ0NvbG9yMiI6IiNmZmY0MDAiLCJ0YXNrQm9yZGVyQ29sb3IiOiIjNTM0ZmJjIiwidGFza0JrZ0NvbG9yIjoiIzhhOTBkZCIsInRhc2tUZXh0TGlnaHRDb2xvciI6IndoaXRlIiwidGFza1RleHRDb2xvciI6IndoaXRlIiwidGFza1RleHREYXJrQ29sb3IiOiJibGFjayIsInRhc2tUZXh0T3V0c2lkZUNvbG9yIjoiYmxhY2siLCJ0YXNrVGV4dENsaWNrYWJsZUNvbG9yIjoiIzAwMzE2MyIsImFjdGl2ZVRhc2tCb3JkZXJDb2xvciI6IiM1MzRmYmMiLCJhY3RpdmVUYXNrQmtnQ29sb3IiOiIjYmZjN2ZmIiwiZ3JpZENvbG9yIjoibGlnaHRncmV5IiwiZG9uZVRhc2tCa2dDb2xvciI6ImxpZ2h0Z3JleSIsImRvbmVUYXNrQm9yZGVyQ29sb3IiOiJncmV5IiwiY3JpdEJvcmRlckNvbG9yIjoiI2ZmODg4OCIsImNyaXRCa2dDb2xvciI6InJlZCIsInRvZGF5TGluZUNvbG9yIjoicmVkIiwibGFiZWxDb2xvciI6ImJsYWNrIiwiZXJyb3JCa2dDb2xvciI6IiM1NTIyMjIiLCJlcnJvclRleHRDb2xvciI6IiM1NTIyMjIiLCJjbGFzc1RleHQiOiIjMTMxMzAwIiwiZmlsbFR5cGUwIjoiI0VDRUNGRiIsImZpbGxUeXBlMSI6IiNmZmZmZGUiLCJmaWxsVHlwZTIiOiJoc2woMzA0LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTMiOiJoc2woMTI0LCAxMDAlLCA5My41Mjk0MTE3NjQ3JSkiLCJmaWxsVHlwZTQiOiJoc2woMTc2LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTUiOiJoc2woLTQsIDEwMCUsIDkzLjUyOTQxMTc2NDclKSIsImZpbGxUeXBlNiI6ImhzbCg4LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTciOiJoc2woMTg4LCAxMDAlLCA5My41Mjk0MTE3NjQ3JSkifX0sInVwZGF0ZUVkaXRvciI6ZmFsc2V9">live editor</a>]
+### State diagram [<a href="https://mermaid-js.github.io/mermaid/#/stateDiagram">docs</a> - <a href="https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtLXYyXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQiLCJ0aGVtZVZhcmlhYmxlcyI6eyJiYWNrZ3JvdW5kIjoid2hpdGUiLCJwcmltYXJ5Q29sb3IiOiIjRUNFQ0ZGIiwic2Vjb25kYXJ5Q29sb3IiOiIjZmZmZmRlIiwidGVydGlhcnlDb2xvciI6ImhzbCg4MCwgMTAwJSwgOTYuMjc0NTA5ODAzOSUpIiwicHJpbWFyeUJvcmRlckNvbG9yIjoiaHNsKDI0MCwgNjAlLCA4Ni4yNzQ1MDk4MDM5JSkiLCJzZWNvbmRhcnlCb3JkZXJDb2xvciI6ImhzbCg2MCwgNjAlLCA4My41Mjk0MTE3NjQ3JSkiLCJ0ZXJ0aWFyeUJvcmRlckNvbG9yIjoiaHNsKDgwLCA2MCUsIDg2LjI3NDUwOTgwMzklKSIsInByaW1hcnlUZXh0Q29sb3IiOiIjMTMxMzAwIiwic2Vjb25kYXJ5VGV4dENvbG9yIjoiIzAwMDAyMSIsInRlcnRpYXJ5VGV4dENvbG9yIjoicmdiKDkuNTAwMDAwMDAwMSwgOS41MDAwMDAwMDAxLCA5LjUwMDAwMDAwMDEpIiwibGluZUNvbG9yIjoiIzMzMzMzMyIsInRleHRDb2xvciI6IiMzMzMiLCJtYWluQmtnIjoiI0VDRUNGRiIsInNlY29uZEJrZyI6IiNmZmZmZGUiLCJib3JkZXIxIjoiIzkzNzBEQiIsImJvcmRlcjIiOiIjYWFhYTMzIiwiYXJyb3doZWFkQ29sb3IiOiIjMzMzMzMzIiwiZm9udEZhbWlseSI6IlwidHJlYnVjaGV0IG1zXCIsIHZlcmRhbmEsIGFyaWFsIiwiZm9udFNpemUiOiIxNnB4IiwibGFiZWxCYWNrZ3JvdW5kIjoiI2U4ZThlOCIsIm5vZGVCa2ciOiIjRUNFQ0ZGIiwibm9kZUJvcmRlciI6IiM5MzcwREIiLCJjbHVzdGVyQmtnIjoiI2ZmZmZkZSIsImNsdXN0ZXJCb3JkZXIiOiIjYWFhYTMzIiwiZGVmYXVsdExpbmtDb2xvciI6IiMzMzMzMzMiLCJ0aXRsZUNvbG9yIjoiIzMzMyIsImVkZ2VMYWJlbEJhY2tncm91bmQiOiIjZThlOGU4IiwiYWN0b3JCb3JkZXIiOiJoc2woMjU5LjYyNjE2ODIyNDMsIDU5Ljc3NjUzNjMxMjglLCA4Ny45MDE5NjA3ODQzJSkiLCJhY3RvckJrZyI6IiNFQ0VDRkYiLCJhY3RvclRleHRDb2xvciI6ImJsYWNrIiwiYWN0b3JMaW5lQ29sb3IiOiJncmV5Iiwic2lnbmFsQ29sb3IiOiIjMzMzIiwic2lnbmFsVGV4dENvbG9yIjoiIzMzMyIsImxhYmVsQm94QmtnQ29sb3IiOiIjRUNFQ0ZGIiwibGFiZWxCb3hCb3JkZXJDb2xvciI6ImhzbCgyNTkuNjI2MTY4MjI0MywgNTkuNzc2NTM2MzEyOCUsIDg3LjkwMTk2MDc4NDMlKSIsImxhYmVsVGV4dENvbG9yIjoiYmxhY2siLCJsb29wVGV4dENvbG9yIjoiYmxhY2siLCJub3RlQm9yZGVyQ29sb3IiOiIjYWFhYTMzIiwibm90ZUJrZ0NvbG9yIjoiI2ZmZjVhZCIsIm5vdGVUZXh0Q29sb3IiOiJibGFjayIsImFjdGl2YXRpb25Cb3JkZXJDb2xvciI6IiM2NjYiLCJhY3RpdmF0aW9uQmtnQ29sb3IiOiIjZjRmNGY0Iiwic2VxdWVuY2VOdW1iZXJDb2xvciI6IndoaXRlIiwic2VjdGlvbkJrZ0NvbG9yIjoicmdiYSgxMDIsIDEwMiwgMjU1LCAwLjQ5KSIsImFsdFNlY3Rpb25Ca2dDb2xvciI6IndoaXRlIiwic2VjdGlvbkJrZ0NvbG9yMiI6IiNmZmY0MDAiLCJ0YXNrQm9yZGVyQ29sb3IiOiIjNTM0ZmJjIiwidGFza0JrZ0NvbG9yIjoiIzhhOTBkZCIsInRhc2tUZXh0TGlnaHRDb2xvciI6IndoaXRlIiwidGFza1RleHRDb2xvciI6IndoaXRlIiwidGFza1RleHREYXJrQ29sb3IiOiJibGFjayIsInRhc2tUZXh0T3V0c2lkZUNvbG9yIjoiYmxhY2siLCJ0YXNrVGV4dENsaWNrYWJsZUNvbG9yIjoiIzAwMzE2MyIsImFjdGl2ZVRhc2tCb3JkZXJDb2xvciI6IiM1MzRmYmMiLCJhY3RpdmVUYXNrQmtnQ29sb3IiOiIjYmZjN2ZmIiwiZ3JpZENvbG9yIjoibGlnaHRncmV5IiwiZG9uZVRhc2tCa2dDb2xvciI6ImxpZ2h0Z3JleSIsImRvbmVUYXNrQm9yZGVyQ29sb3IiOiJncmV5IiwiY3JpdEJvcmRlckNvbG9yIjoiI2ZmODg4OCIsImNyaXRCa2dDb2xvciI6InJlZCIsInRvZGF5TGluZUNvbG9yIjoicmVkIiwibGFiZWxDb2xvciI6ImJsYWNrIiwiZXJyb3JCa2dDb2xvciI6IiM1NTIyMjIiLCJlcnJvclRleHRDb2xvciI6IiM1NTIyMjIiLCJjbGFzc1RleHQiOiIjMTMxMzAwIiwiZmlsbFR5cGUwIjoiI0VDRUNGRiIsImZpbGxUeXBlMSI6IiNmZmZmZGUiLCJmaWxsVHlwZTIiOiJoc2woMzA0LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTMiOiJoc2woMTI0LCAxMDAlLCA5My41Mjk0MTE3NjQ3JSkiLCJmaWxsVHlwZTQiOiJoc2woMTc2LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTUiOiJoc2woLTQsIDEwMCUsIDkzLjUyOTQxMTc2NDclKSIsImZpbGxUeXBlNiI6ImhzbCg4LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTciOiJoc2woMTg4LCAxMDAlLCA5My41Mjk0MTE3NjQ3JSkifX0sInVwZGF0ZUVkaXRvciI6ZmFsc2V9">live editor</a>]
 ```
 stateDiagram-v2
 [*] --> Still
@@ -176,9 +193,9 @@ pie
 "Rats" : 15
 ```
 
-## Git graph [experimental - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ2l0R3JhcGg6XG5vcHRpb25zXG57XG4gICAgXCJub2RlU3BhY2luZ1wiOiAxNTAsXG4gICAgXCJub2RlUmFkaXVzXCI6IDEwXG59XG5lbmRcbmNvbW1pdFxuYnJhbmNoIG5ld2JyYW5jaFxuY2hlY2tvdXQgbmV3YnJhbmNoXG5jb21taXRcbmNvbW1pdFxuY2hlY2tvdXQgbWFzdGVyXG5jb21taXRcbmNvbW1pdFxubWVyZ2UgbmV3YnJhbmNoXG4iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
+### Git graph [experimental - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ2l0R3JhcGg6XG5vcHRpb25zXG57XG4gICAgXCJub2RlU3BhY2luZ1wiOiAxNTAsXG4gICAgXCJub2RlUmFkaXVzXCI6IDEwXG59XG5lbmRcbmNvbW1pdFxuYnJhbmNoIG5ld2JyYW5jaFxuY2hlY2tvdXQgbmV3YnJhbmNoXG5jb21taXRcbmNvbW1pdFxuY2hlY2tvdXQgbWFzdGVyXG5jb21taXRcbmNvbW1pdFxubWVyZ2UgbmV3YnJhbmNoXG4iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
 
-## User Journey diagram [<a href="https://mermaid-js.github.io/mermaid/#/user-journey">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
+### User Journey diagram [<a href="https://mermaid-js.github.io/mermaid/#/user-journey">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
 ```
   journey
     title My working day
@@ -202,7 +219,7 @@ pie
       Sit down: 3: Me
 ```
 
-### Release
+## Release
 
 For those who have the permission to do so:
 

README.zh-CN.md

@@ -2,13 +2,13 @@
 
 [English](./README.md) | 简体中文
 
-![banner](./img/header.png)
+<img src="./img/header.png" alt="" />
 
 :trophy: **Mermaid 被提名并获得了 [JS Open Source Awards (2019)](https://osawards.com/javascript/2019) 的 "The most exciting use of technology" 奖项!!!**
 
 **感谢所有参与进来提交 PR，解答疑问的人们! 🙏**
 
-<a href="https://mermaid-js.github.io/mermaid/landing/" alt="Link to landing page for the book The Official Guide To mermaid.js"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/img/book-banner-pre-release.jpg"></a>
+<a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/img/book-banner-pre-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>
 
 ## 关于 Mermaid
 
@@ -23,7 +23,7 @@ Mermaid 通过允许用户创建便于修改的图表来解决这一难题，它
 Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor/) 轻松创建详细的图表。<br/>
 你可以访问 [教程](./docs/Tutorials.md) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](./docs/integrations.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。
 
-如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/n00b-overview.md) and [用法](./docs/usage.md).
+如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/n00b-overview.md), [用法](./docs/usage.md) 和 [教程](./docs/Tutorials.md).
 
 🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [文档](https://mermaidjs.github.io) | 🙌 [贡献](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [更新日志](./docs/CHANGELOG.md)
 
@@ -35,7 +35,7 @@ __下面是一些可以使用 Mermaid 创建的图表示例。点击 [语法](ht
 <table>
 <!-- <Flowchart> -->
 
-## 流程图 [<a href="https://mermaid-js.github.io/mermaid/#/flowchart">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0hhcmRdIC0tPnxUZXh0fCBCKFJvdW5kKVxuICAgIEIgLS0-IEN7RGVjaXNpb259XG4gICAgQyAtLT58T25lfCBEW1Jlc3VsdCAxXVxuICAgIEMgLS0-fFR3b3wgRVtSZXN1bHQgMl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
+### 流程图 [<a href="https://mermaid-js.github.io/mermaid/#/flowchart">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0hhcmRdIC0tPnxUZXh0fCBCKFJvdW5kKVxuICAgIEIgLS0-IEN7RGVjaXNpb259XG4gICAgQyAtLT58T25lfCBEW1Jlc3VsdCAxXVxuICAgIEMgLS0-fFR3b3wgRVtSZXN1bHQgMl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
 
 ```
 flowchart LR
@@ -52,7 +52,7 @@ C -->|One| D[Result 1]
 C -->|Two| E[Result 2]
 ```
 
-## 时序图 [<a href="https://mermaid-js.github.io/mermaid/#/sequenceDiagram">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic2VxdWVuY2VEaWFncmFtXG5BbGljZS0-PkpvaG46IEhlbGxvIEpvaG4sIGhvdyBhcmUgeW91P1xubG9vcCBIZWFsdGhjaGVja1xuICAgIEpvaG4tPj5Kb2huOiBGaWdodCBhZ2FpbnN0IGh5cG9jaG9uZHJpYVxuZW5kXG5Ob3RlIHJpZ2h0IG9mIEpvaG46IFJhdGlvbmFsIHRob3VnaHRzIVxuSm9obi0tPj5BbGljZTogR3JlYXQhXG5Kb2huLT4-Qm9iOiBIb3cgYWJvdXQgeW91P1xuQm9iLS0-PkpvaG46IEpvbGx5IGdvb2QhIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
+### 时序图 [<a href="https://mermaid-js.github.io/mermaid/#/sequenceDiagram">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic2VxdWVuY2VEaWFncmFtXG5BbGljZS0-PkpvaG46IEhlbGxvIEpvaG4sIGhvdyBhcmUgeW91P1xubG9vcCBIZWFsdGhjaGVja1xuICAgIEpvaG4tPj5Kb2huOiBGaWdodCBhZ2FpbnN0IGh5cG9jaG9uZHJpYVxuZW5kXG5Ob3RlIHJpZ2h0IG9mIEpvaG46IFJhdGlvbmFsIHRob3VnaHRzIVxuSm9obi0tPj5BbGljZTogR3JlYXQhXG5Kb2huLT4-Qm9iOiBIb3cgYWJvdXQgeW91P1xuQm9iLS0-PkpvaG46IEpvbGx5IGdvb2QhIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
 
 ```
 sequenceDiagram
@@ -77,7 +77,7 @@ John->>Bob: How about you?
 Bob-->>John: Jolly good!
 ```
 
-## 甘特图 [<a href="https://mermaid-js.github.io/mermaid/#/gantt">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ2FudHRcbnNlY3Rpb24gU2VjdGlvblxuQ29tcGxldGVkIDpkb25lLCAgICBkZXMxLCAyMDE0LTAxLTA2LDIwMTQtMDEtMDhcbkFjdGl2ZSAgICAgICAgOmFjdGl2ZSwgIGRlczIsIDIwMTQtMDEtMDcsIDNkXG5QYXJhbGxlbCAxICAgOiAgICAgICAgIGRlczMsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAyICAgOiAgICAgICAgIGRlczQsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAzICAgOiAgICAgICAgIGRlczUsIGFmdGVyIGRlczMsIDFkXG5QYXJhbGxlbCA0ICAgOiAgICAgICAgIGRlczYsIGFmdGVyIGRlczQsIDFkIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
+### 甘特图 [<a href="https://mermaid-js.github.io/mermaid/#/gantt">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ2FudHRcbnNlY3Rpb24gU2VjdGlvblxuQ29tcGxldGVkIDpkb25lLCAgICBkZXMxLCAyMDE0LTAxLTA2LDIwMTQtMDEtMDhcbkFjdGl2ZSAgICAgICAgOmFjdGl2ZSwgIGRlczIsIDIwMTQtMDEtMDcsIDNkXG5QYXJhbGxlbCAxICAgOiAgICAgICAgIGRlczMsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAyICAgOiAgICAgICAgIGRlczQsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAzICAgOiAgICAgICAgIGRlczUsIGFmdGVyIGRlczMsIDFkXG5QYXJhbGxlbCA0ICAgOiAgICAgICAgIGRlczYsIGFmdGVyIGRlczQsIDFkIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
 
 ```
 gantt
@@ -100,7 +100,7 @@ gantt
     Parallel 4   :         des6, after des4, 1d
 ```
 
-## 类图 [<a href="https://mermaid-js.github.io/mermaid/#/classDiagram">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiY2xhc3NEaWFncmFtXG5DbGFzczAxIDx8LS0gQXZlcnlMb25nQ2xhc3MgOiBDb29sXG48PGludGVyZmFjZT4-IENsYXNzMDFcbkNsYXNzMDkgLS0-IEMyIDogV2hlcmUgYW0gaT9cbkNsYXNzMDkgLS0qIEMzXG5DbGFzczA5IC0tfD4gQ2xhc3MwN1xuQ2xhc3MwNyA6IGVxdWFscygpXG5DbGFzczA3IDogT2JqZWN0W10gZWxlbWVudERhdGFcbkNsYXNzMDEgOiBzaXplKClcbkNsYXNzMDEgOiBpbnQgY2hpbXBcbkNsYXNzMDEgOiBpbnQgZ29yaWxsYVxuY2xhc3MgQ2xhc3MxMCB7XG4gID4-c2VydmljZT4-XG4gIGludCBpZFxuICBzaXplKClcbn0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
+### 类图 [<a href="https://mermaid-js.github.io/mermaid/#/classDiagram">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiY2xhc3NEaWFncmFtXG5DbGFzczAxIDx8LS0gQXZlcnlMb25nQ2xhc3MgOiBDb29sXG48PGludGVyZmFjZT4-IENsYXNzMDFcbkNsYXNzMDkgLS0-IEMyIDogV2hlcmUgYW0gaT9cbkNsYXNzMDkgLS0qIEMzXG5DbGFzczA5IC0tfD4gQ2xhc3MwN1xuQ2xhc3MwNyA6IGVxdWFscygpXG5DbGFzczA3IDogT2JqZWN0W10gZWxlbWVudERhdGFcbkNsYXNzMDEgOiBzaXplKClcbkNsYXNzMDEgOiBpbnQgY2hpbXBcbkNsYXNzMDEgOiBpbnQgZ29yaWxsYVxuY2xhc3MgQ2xhc3MxMCB7XG4gID4-c2VydmljZT4-XG4gIGludCBpZFxuICBzaXplKClcbn0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
 
 ```
 classDiagram
@@ -139,7 +139,7 @@ class Class10 {
 }
 ```
 
-## 状态图 [<a href="https://mermaid-js.github.io/mermaid/#/stateDiagram">文档</a> - <a href="https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtLXYyXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQiLCJ0aGVtZVZhcmlhYmxlcyI6eyJiYWNrZ3JvdW5kIjoid2hpdGUiLCJwcmltYXJ5Q29sb3IiOiIjRUNFQ0ZGIiwic2Vjb25kYXJ5Q29sb3IiOiIjZmZmZmRlIiwidGVydGlhcnlDb2xvciI6ImhzbCg4MCwgMTAwJSwgOTYuMjc0NTA5ODAzOSUpIiwicHJpbWFyeUJvcmRlckNvbG9yIjoiaHNsKDI0MCwgNjAlLCA4Ni4yNzQ1MDk4MDM5JSkiLCJzZWNvbmRhcnlCb3JkZXJDb2xvciI6ImhzbCg2MCwgNjAlLCA4My41Mjk0MTE3NjQ3JSkiLCJ0ZXJ0aWFyeUJvcmRlckNvbG9yIjoiaHNsKDgwLCA2MCUsIDg2LjI3NDUwOTgwMzklKSIsInByaW1hcnlUZXh0Q29sb3IiOiIjMTMxMzAwIiwic2Vjb25kYXJ5VGV4dENvbG9yIjoiIzAwMDAyMSIsInRlcnRpYXJ5VGV4dENvbG9yIjoicmdiKDkuNTAwMDAwMDAwMSwgOS41MDAwMDAwMDAxLCA5LjUwMDAwMDAwMDEpIiwibGluZUNvbG9yIjoiIzMzMzMzMyIsInRleHRDb2xvciI6IiMzMzMiLCJtYWluQmtnIjoiI0VDRUNGRiIsInNlY29uZEJrZyI6IiNmZmZmZGUiLCJib3JkZXIxIjoiIzkzNzBEQiIsImJvcmRlcjIiOiIjYWFhYTMzIiwiYXJyb3doZWFkQ29sb3IiOiIjMzMzMzMzIiwiZm9udEZhbWlseSI6IlwidHJlYnVjaGV0IG1zXCIsIHZlcmRhbmEsIGFyaWFsIiwiZm9udFNpemUiOiIxNnB4IiwibGFiZWxCYWNrZ3JvdW5kIjoiI2U4ZThlOCIsIm5vZGVCa2ciOiIjRUNFQ0ZGIiwibm9kZUJvcmRlciI6IiM5MzcwREIiLCJjbHVzdGVyQmtnIjoiI2ZmZmZkZSIsImNsdXN0ZXJCb3JkZXIiOiIjYWFhYTMzIiwiZGVmYXVsdExpbmtDb2xvciI6IiMzMzMzMzMiLCJ0aXRsZUNvbG9yIjoiIzMzMyIsImVkZ2VMYWJlbEJhY2tncm91bmQiOiIjZThlOGU4IiwiYWN0b3JCb3JkZXIiOiJoc2woMjU5LjYyNjE2ODIyNDMsIDU5Ljc3NjUzNjMxMjglLCA4Ny45MDE5NjA3ODQzJSkiLCJhY3RvckJrZyI6IiNFQ0VDRkYiLCJhY3RvclRleHRDb2xvciI6ImJsYWNrIiwiYWN0b3JMaW5lQ29sb3IiOiJncmV5Iiwic2lnbmFsQ29sb3IiOiIjMzMzIiwic2lnbmFsVGV4dENvbG9yIjoiIzMzMyIsImxhYmVsQm94QmtnQ29sb3IiOiIjRUNFQ0ZGIiwibGFiZWxCb3hCb3JkZXJDb2xvciI6ImhzbCgyNTkuNjI2MTY4MjI0MywgNTkuNzc2NTM2MzEyOCUsIDg3LjkwMTk2MDc4NDMlKSIsImxhYmVsVGV4dENvbG9yIjoiYmxhY2siLCJsb29wVGV4dENvbG9yIjoiYmxhY2siLCJub3RlQm9yZGVyQ29sb3IiOiIjYWFhYTMzIiwibm90ZUJrZ0NvbG9yIjoiI2ZmZjVhZCIsIm5vdGVUZXh0Q29sb3IiOiJibGFjayIsImFjdGl2YXRpb25Cb3JkZXJDb2xvciI6IiM2NjYiLCJhY3RpdmF0aW9uQmtnQ29sb3IiOiIjZjRmNGY0Iiwic2VxdWVuY2VOdW1iZXJDb2xvciI6IndoaXRlIiwic2VjdGlvbkJrZ0NvbG9yIjoicmdiYSgxMDIsIDEwMiwgMjU1LCAwLjQ5KSIsImFsdFNlY3Rpb25Ca2dDb2xvciI6IndoaXRlIiwic2VjdGlvbkJrZ0NvbG9yMiI6IiNmZmY0MDAiLCJ0YXNrQm9yZGVyQ29sb3IiOiIjNTM0ZmJjIiwidGFza0JrZ0NvbG9yIjoiIzhhOTBkZCIsInRhc2tUZXh0TGlnaHRDb2xvciI6IndoaXRlIiwidGFza1RleHRDb2xvciI6IndoaXRlIiwidGFza1RleHREYXJrQ29sb3IiOiJibGFjayIsInRhc2tUZXh0T3V0c2lkZUNvbG9yIjoiYmxhY2siLCJ0YXNrVGV4dENsaWNrYWJsZUNvbG9yIjoiIzAwMzE2MyIsImFjdGl2ZVRhc2tCb3JkZXJDb2xvciI6IiM1MzRmYmMiLCJhY3RpdmVUYXNrQmtnQ29sb3IiOiIjYmZjN2ZmIiwiZ3JpZENvbG9yIjoibGlnaHRncmV5IiwiZG9uZVRhc2tCa2dDb2xvciI6ImxpZ2h0Z3JleSIsImRvbmVUYXNrQm9yZGVyQ29sb3IiOiJncmV5IiwiY3JpdEJvcmRlckNvbG9yIjoiI2ZmODg4OCIsImNyaXRCa2dDb2xvciI6InJlZCIsInRvZGF5TGluZUNvbG9yIjoicmVkIiwibGFiZWxDb2xvciI6ImJsYWNrIiwiZXJyb3JCa2dDb2xvciI6IiM1NTIyMjIiLCJlcnJvclRleHRDb2xvciI6IiM1NTIyMjIiLCJjbGFzc1RleHQiOiIjMTMxMzAwIiwiZmlsbFR5cGUwIjoiI0VDRUNGRiIsImZpbGxUeXBlMSI6IiNmZmZmZGUiLCJmaWxsVHlwZTIiOiJoc2woMzA0LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTMiOiJoc2woMTI0LCAxMDAlLCA5My41Mjk0MTE3NjQ3JSkiLCJmaWxsVHlwZTQiOiJoc2woMTc2LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTUiOiJoc2woLTQsIDEwMCUsIDkzLjUyOTQxMTc2NDclKSIsImZpbGxUeXBlNiI6ImhzbCg4LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTciOiJoc2woMTg4LCAxMDAlLCA5My41Mjk0MTE3NjQ3JSkifX0sInVwZGF0ZUVkaXRvciI6ZmFsc2V9">live editor</a>]
+### 状态图 [[<a href="https://mermaid-js.github.io/mermaid/#/stateDiagram">docs</a> - <a href="https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtLXYyXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQiLCJ0aGVtZVZhcmlhYmxlcyI6eyJiYWNrZ3JvdW5kIjoid2hpdGUiLCJwcmltYXJ5Q29sb3IiOiIjRUNFQ0ZGIiwic2Vjb25kYXJ5Q29sb3IiOiIjZmZmZmRlIiwidGVydGlhcnlDb2xvciI6ImhzbCg4MCwgMTAwJSwgOTYuMjc0NTA5ODAzOSUpIiwicHJpbWFyeUJvcmRlckNvbG9yIjoiaHNsKDI0MCwgNjAlLCA4Ni4yNzQ1MDk4MDM5JSkiLCJzZWNvbmRhcnlCb3JkZXJDb2xvciI6ImhzbCg2MCwgNjAlLCA4My41Mjk0MTE3NjQ3JSkiLCJ0ZXJ0aWFyeUJvcmRlckNvbG9yIjoiaHNsKDgwLCA2MCUsIDg2LjI3NDUwOTgwMzklKSIsInByaW1hcnlUZXh0Q29sb3IiOiIjMTMxMzAwIiwic2Vjb25kYXJ5VGV4dENvbG9yIjoiIzAwMDAyMSIsInRlcnRpYXJ5VGV4dENvbG9yIjoicmdiKDkuNTAwMDAwMDAwMSwgOS41MDAwMDAwMDAxLCA5LjUwMDAwMDAwMDEpIiwibGluZUNvbG9yIjoiIzMzMzMzMyIsInRleHRDb2xvciI6IiMzMzMiLCJtYWluQmtnIjoiI0VDRUNGRiIsInNlY29uZEJrZyI6IiNmZmZmZGUiLCJib3JkZXIxIjoiIzkzNzBEQiIsImJvcmRlcjIiOiIjYWFhYTMzIiwiYXJyb3doZWFkQ29sb3IiOiIjMzMzMzMzIiwiZm9udEZhbWlseSI6IlwidHJlYnVjaGV0IG1zXCIsIHZlcmRhbmEsIGFyaWFsIiwiZm9udFNpemUiOiIxNnB4IiwibGFiZWxCYWNrZ3JvdW5kIjoiI2U4ZThlOCIsIm5vZGVCa2ciOiIjRUNFQ0ZGIiwibm9kZUJvcmRlciI6IiM5MzcwREIiLCJjbHVzdGVyQmtnIjoiI2ZmZmZkZSIsImNsdXN0ZXJCb3JkZXIiOiIjYWFhYTMzIiwiZGVmYXVsdExpbmtDb2xvciI6IiMzMzMzMzMiLCJ0aXRsZUNvbG9yIjoiIzMzMyIsImVkZ2VMYWJlbEJhY2tncm91bmQiOiIjZThlOGU4IiwiYWN0b3JCb3JkZXIiOiJoc2woMjU5LjYyNjE2ODIyNDMsIDU5Ljc3NjUzNjMxMjglLCA4Ny45MDE5NjA3ODQzJSkiLCJhY3RvckJrZyI6IiNFQ0VDRkYiLCJhY3RvclRleHRDb2xvciI6ImJsYWNrIiwiYWN0b3JMaW5lQ29sb3IiOiJncmV5Iiwic2lnbmFsQ29sb3IiOiIjMzMzIiwic2lnbmFsVGV4dENvbG9yIjoiIzMzMyIsImxhYmVsQm94QmtnQ29sb3IiOiIjRUNFQ0ZGIiwibGFiZWxCb3hCb3JkZXJDb2xvciI6ImhzbCgyNTkuNjI2MTY4MjI0MywgNTkuNzc2NTM2MzEyOCUsIDg3LjkwMTk2MDc4NDMlKSIsImxhYmVsVGV4dENvbG9yIjoiYmxhY2siLCJsb29wVGV4dENvbG9yIjoiYmxhY2siLCJub3RlQm9yZGVyQ29sb3IiOiIjYWFhYTMzIiwibm90ZUJrZ0NvbG9yIjoiI2ZmZjVhZCIsIm5vdGVUZXh0Q29sb3IiOiJibGFjayIsImFjdGl2YXRpb25Cb3JkZXJDb2xvciI6IiM2NjYiLCJhY3RpdmF0aW9uQmtnQ29sb3IiOiIjZjRmNGY0Iiwic2VxdWVuY2VOdW1iZXJDb2xvciI6IndoaXRlIiwic2VjdGlvbkJrZ0NvbG9yIjoicmdiYSgxMDIsIDEwMiwgMjU1LCAwLjQ5KSIsImFsdFNlY3Rpb25Ca2dDb2xvciI6IndoaXRlIiwic2VjdGlvbkJrZ0NvbG9yMiI6IiNmZmY0MDAiLCJ0YXNrQm9yZGVyQ29sb3IiOiIjNTM0ZmJjIiwidGFza0JrZ0NvbG9yIjoiIzhhOTBkZCIsInRhc2tUZXh0TGlnaHRDb2xvciI6IndoaXRlIiwidGFza1RleHRDb2xvciI6IndoaXRlIiwidGFza1RleHREYXJrQ29sb3IiOiJibGFjayIsInRhc2tUZXh0T3V0c2lkZUNvbG9yIjoiYmxhY2siLCJ0YXNrVGV4dENsaWNrYWJsZUNvbG9yIjoiIzAwMzE2MyIsImFjdGl2ZVRhc2tCb3JkZXJDb2xvciI6IiM1MzRmYmMiLCJhY3RpdmVUYXNrQmtnQ29sb3IiOiIjYmZjN2ZmIiwiZ3JpZENvbG9yIjoibGlnaHRncmV5IiwiZG9uZVRhc2tCa2dDb2xvciI6ImxpZ2h0Z3JleSIsImRvbmVUYXNrQm9yZGVyQ29sb3IiOiJncmV5IiwiY3JpdEJvcmRlckNvbG9yIjoiI2ZmODg4OCIsImNyaXRCa2dDb2xvciI6InJlZCIsInRvZGF5TGluZUNvbG9yIjoicmVkIiwibGFiZWxDb2xvciI6ImJsYWNrIiwiZXJyb3JCa2dDb2xvciI6IiM1NTIyMjIiLCJlcnJvclRleHRDb2xvciI6IiM1NTIyMjIiLCJjbGFzc1RleHQiOiIjMTMxMzAwIiwiZmlsbFR5cGUwIjoiI0VDRUNGRiIsImZpbGxUeXBlMSI6IiNmZmZmZGUiLCJmaWxsVHlwZTIiOiJoc2woMzA0LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTMiOiJoc2woMTI0LCAxMDAlLCA5My41Mjk0MTE3NjQ3JSkiLCJmaWxsVHlwZTQiOiJoc2woMTc2LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTUiOiJoc2woLTQsIDEwMCUsIDkzLjUyOTQxMTc2NDclKSIsImZpbGxUeXBlNiI6ImhzbCg4LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTciOiJoc2woMTg4LCAxMDAlLCA5My41Mjk0MTE3NjQ3JSkifX0sInVwZGF0ZUVkaXRvciI6ZmFsc2V9">live editor</a>]
 
 ```
 stateDiagram-v2
@@ -160,7 +160,7 @@ Moving --> Crash
 Crash --> [*]
 ```
 
-## 饼图 [<a href="https://mermaid-js.github.io/mermaid/#/pie">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoicGllXG5cIkRvZ3NcIiA6IDQyLjk2XG5cIkNhdHNcIiA6IDUwLjA1XG5cIlJhdHNcIiA6IDEwLjAxIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
+### 饼图 [<a href="https://mermaid-js.github.io/mermaid/#/pie">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoicGllXG5cIkRvZ3NcIiA6IDQyLjk2XG5cIkNhdHNcIiA6IDUwLjA1XG5cIlJhdHNcIiA6IDEwLjAxIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
 
 ```
 pie
@@ -175,9 +175,9 @@ 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>]
+### 用户体验旅程图 [<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>]
 
 ```
   journey
@@ -202,7 +202,7 @@ pie
       Sit down: 3: Me
 ```
 
-### 发布
+## 发布
 
 对于有权限的同学来说，你可以通过以下步骤来完成发布操作：
 

applitools.cnfig.js

@@ -0,0 +1,16 @@
+module.exports = {
+  testConcurrency: 1,
+  // browser: [
+  //   // Add browsers with different viewports
+  //   { width: 800, height: 600, name: 'chrome' },
+  //   { width: 700, height: 500, name: 'firefox' },
+  //   { width: 1600, height: 1200, name: 'ie11' },
+  //   { width: 1024, height: 768, name: 'edgechromium' },
+  //   { width: 800, height: 600, name: 'safari' },
+  //   // Add mobile emulation devices in Portrait mode
+  //   { deviceName: 'iPhone X', screenOrientation: 'portrait' },
+  //   { deviceName: 'Pixel 2', screenOrientation: 'portrait' },
+  // ],
+  // // set batch name to the configuration
+  // batchName: 'Ultrafast Batch',
+};

cypress/fixtures/example.json

@@ -1,5 +1,5 @@
-{
-  "name": "Using fixtures to represent data",
-  "email": "hello@cypress.io",
-  "body": "Fixtures are a great way to mock data for responses to routes"
-}
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/helpers/util.js

@@ -18,7 +18,7 @@ export const mermaidUrl = (graphStr, options, api) => {
   return url;
 };
 
-export const imgSnapshotTest = (graphStr, _options, api) => {
+export const imgSnapshotTest = (graphStr, _options, api = false, validation) => {
   cy.log(_options);
   const options = Object.assign(_options);
   if (!options.fontFamily) {
@@ -42,16 +42,32 @@ export const imgSnapshotTest = (graphStr, _options, api) => {
   if (!options.fontSize) {
     options.fontSize = '16px';
   }
-  cy.log(options);
+  const useAppli = Cypress.env('useAppli');
+  const branch = Cypress.env('codeBranch');
+  cy.log('Hello ' + useAppli ? 'Appli' : 'image-snapshot');
+  const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
+
+  if (useAppli) {
+    cy.eyesOpen({
+      appName: 'Mermaid-' + branch,
+      testName: name,
+      batchName: branch,
+    });
+  }
+
   const url = mermaidUrl(graphStr, options, api);
 
   cy.visit(url);
+  if (validation) cy.get('svg').should(validation);
   cy.get('svg');
-  // cy.percySnapshot();
   // Default name to test title
-  const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
 
-  cy.matchImageSnapshot(name);
+  if (useAppli) {
+    cy.eyesCheckWindow('Click!');
+    cy.eyesClose();
+  } else {
+    cy.matchImageSnapshot(name);
+  }
 };
 
 export const renderGraph = (graphStr, options, api) => {

cypress/integration/rendering/appli.spec.js

@@ -0,0 +1,59 @@
+import { imgSnapshotTest } from '../../helpers/util.js';
+
+describe('Git Graph diagram', () => {
+  it('1: should render a simple gitgraph with commit on main branch', () => {
+    imgSnapshotTest(
+      `gitGraph
+       commit id: "1"
+       commit id: "2"
+       commit id: "3"
+      `,
+      {}
+    );
+  });
+  // it(`ultraFastTest`, function () {
+  //   // Navigate to the url we want to test
+  //   // ⭐️ Note to see visual bugs, run the test using the above URL for the 1st run.
+  //   // but then change the above URL to https://demo.applitools.com/index_v2.html
+  //   // (for the 2nd run)
+  //   cy.visit('https://demo.applitools.com');
+
+  //   // Call Open on eyes to initialize a test session
+  //   cy.eyesOpen({
+  //     appName: 'Demo App',
+  //     testName: 'Ultrafast grid demo',
+  //   });
+
+  //   // check the login page with fluent api, see more info here
+  //   // https://applitools.com/docs/topics/sdk/the-eyes-sdk-check-fluent-api.html
+  //   cy.eyesCheckWindow({
+  //     tag: 'Login Window',
+  //     target: 'window',
+  //     fully: true,
+  //   });
+
+  //   cy.get('#log-in').click();
+
+  //   // Check the app page
+  //   cy.eyesCheckWindow({
+  //     tag: 'App Window',
+  //     target: 'window',
+  //     fully: true,
+  //   });
+
+  //   // Call Close on eyes to let the server know it should display the results
+  //   cy.eyesClose();
+  // });
+  // it('works', () => {
+  //   cy.visit('https://applitools.com/helloworld');
+  //   cy.eyesOpen({
+  //     appName: 'Hello World!',
+  //     testName: 'My first JavaScript test!',
+  //     browser: { width: 800, height: 600 },
+  //   });
+  //   cy.eyesCheckWindow('Main Page');
+  //   cy.get('button').click();
+  //   cy.eyesCheckWindow('Click!');
+  //   cy.eyesClose();
+  // });
+});

cypress/integration/rendering/gantt.spec.js

@@ -291,4 +291,36 @@ describe('Gantt diagram', () => {
       { gantt: { topAxis: true } }
     );
   });
+
+  it('should render accessibility tags', function () {
+    const expectedTitle = 'Gantt Diagram';
+    const expectedAccDescription = 'Tasks for Q4';
+    renderGraph(
+      `
+      gantt
+      accTitle: ${expectedTitle}
+      accDescr: ${expectedAccDescription}
+      dateFormat  YYYY-MM-DD
+      section Section
+      A task :a1, 2014-01-01, 30d
+      `,
+      {}
+    );
+    cy.get('svg').should((svg) => {
+      const el = svg.get(0);
+      const children = Array.from(el.children);
+
+      const titleEl = children.find(function (node) {
+        return node.tagName === 'title';
+      });
+      const descriptionEl = children.find(function (node) {
+        return node.tagName === 'desc';
+      });
+
+      expect(titleEl).to.exist;
+      expect(titleEl.textContent).to.equal(expectedTitle);
+      expect(descriptionEl).to.exist;
+      expect(descriptionEl.textContent).to.equal(expectedAccDescription);
+    });
+  });
 });

cypress/integration/rendering/requirement.spec.js

@@ -46,4 +46,69 @@ describe('Requirement diagram', () => {
     );
     cy.get('svg');
   });
+
+  it('should render accessibility tags', function () {
+    const expectedTitle = 'Gantt Diagram';
+    const expectedAccDescription = 'Tasks for Q4';
+    renderGraph(
+      `
+    requirementDiagram
+    accTitle: ${expectedTitle}
+    accDescr: ${expectedAccDescription}
+
+    requirement test_req {
+    id: 1
+    text: the test text.
+    risk: high
+    verifymethod: test
+    }
+
+    functionalRequirement test_req2 {
+    id: 1.1
+    text: the second test text.
+    risk: low
+    verifymethod: inspection
+    }
+
+    performanceRequirement test_req3 {
+    id: 1.2
+    text: the third test text.
+    risk: medium
+    verifymethod: demonstration
+    }
+
+    element test_entity {
+    type: simulation
+    }
+
+    element test_entity2 {
+    type: word doc
+    docRef: reqs/test_entity
+    }
+
+
+    test_entity - satisfies -> test_req2
+    test_req - traces -> test_req2
+    test_req - contains -> test_req3
+    test_req <- copies - test_entity2
+      `,
+      {}
+    );
+    cy.get('svg').should((svg) => {
+      const el = svg.get(0);
+      const children = Array.from(el.children);
+
+      const titleEl = children.find(function (node) {
+        return node.tagName === 'title';
+      });
+      const descriptionEl = children.find(function (node) {
+        return node.tagName === 'desc';
+      });
+
+      expect(titleEl).to.exist;
+      expect(titleEl.textContent).to.equal(expectedTitle);
+      expect(descriptionEl).to.exist;
+      expect(descriptionEl.textContent).to.equal(expectedAccDescription);
+    });
+  });
 });

cypress/integration/rendering/sequencediagram.spec.js

@@ -610,6 +610,20 @@ context('Sequence diagram', () => {
         }
       );
     });
+    it("shouldn't display unused participants", () => {
+      //Be aware that the syntax for "properties" is likely to be changed.
+      imgSnapshotTest(
+        `
+        %%{init: { "config": { "sequence": {"hideUnusedParticipants": true }}}}%%
+        sequenceDiagram
+        participant a
+      `,
+        {
+          logLevel: 0,
+          sequence: { mirrorActors: false, noteFontSize: 18, noteFontFamily: 'Arial' },
+        }
+      );
+    });
   });
   context('svg size', () => {
     it('should render a sequence diagram when useMaxWidth is true (default)', () => {
@@ -644,7 +658,7 @@ context('Sequence diagram', () => {
         expect(svg).to.have.attr('width', '100%');
         expect(svg).to.have.attr('height');
         const height = parseFloat(svg.attr('height'));
-        expect(height).to.be.within(920, 960);
+        expect(height).to.be.within(920, 971);
         const style = svg.attr('style');
         expect(style).to.match(/^max-width: [\d.]+px;$/);
         const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
@@ -683,7 +697,7 @@ context('Sequence diagram', () => {
       cy.get('svg').should((svg) => {
         const height = parseFloat(svg.attr('height'));
         const width = parseFloat(svg.attr('width'));
-        expect(height).to.be.within(920, 960);
+        expect(height).to.be.within(920, 971);
         // use within because the absolute value can be slightly different depending on the environment ±5%
         expect(width).to.be.within(820 * 0.95, 820 * 1.05);
         expect(svg).to.not.have.attr('style');

cypress/integration/rendering/theme.spec.js

@@ -36,6 +36,8 @@ describe('Pie Chart', () => {
         imgSnapshotTest(
           `
         pie title Sports in Sweden
+          accTitle: This is a title
+          accDescr: This is a description
           "Bandy" : 40
           "Ice-Hockey" : 80
           "Football" : 90
@@ -49,6 +51,8 @@ describe('Pie Chart', () => {
           `
         %%{init: { 'logLevel': 0} }%%
         graph TD
+          accTitle: This is a title
+          accDescr: This is a description
           A[Christmas] -->|Get money| B(Go shopping)
           B --> C{Let me think}
           B --> G[/Another/]
@@ -72,6 +76,9 @@ describe('Pie Chart', () => {
           `
         %%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
         flowchart TD
+          accTitle: This is a title
+          accDescr: This is a description
+
           A[Christmas] -->|Get money| B(Go shopping)
           B --> C{Let me think}
           B --> G[Another]
@@ -95,6 +102,9 @@ describe('Pie Chart', () => {
           `
         %%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
         sequenceDiagram
+          accTitle: This is a title
+          accDescr: This is a description
+
           autonumber
           par Action 1
             Alice->>John: Hello John, how are you?
@@ -122,6 +132,9 @@ describe('Pie Chart', () => {
           `
         %%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
         classDiagram
+          accTitle: This is a title
+          accDescr: This is a description
+
           Animal "*" <|-- "1" Duck
           Animal "1" <|-- "10" Fish
           Animal <|-- Zebra
@@ -168,6 +181,9 @@ describe('Pie Chart', () => {
           `
         %%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
 stateDiagram
+        accTitle: This is a title
+        accDescr: This is a description
+
         [*] --> Active
 
         state Active {
@@ -200,6 +216,9 @@ stateDiagram
           `
         %%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
 stateDiagram-v2
+        accTitle: This is a title
+        accDescr: This is a description
+
         [*] --> Active
 
         state Active {
@@ -231,6 +250,9 @@ stateDiagram-v2
         imgSnapshotTest(
           `
 erDiagram
+          accTitle: This is a title
+          accDescr: This is a description
+
         CUSTOMER }|..|{ DELIVERY-ADDRESS : has
         CUSTOMER ||--o{ ORDER : places
         CUSTOMER ||--o{ INVOICE : "liable for"
@@ -250,6 +272,9 @@ erDiagram
           `
         %%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
         journey
+            accTitle: This is a title
+            accDescr: This is a description
+
             title My working day
             section Go to work
               Make tea: 5: Me
@@ -268,6 +293,9 @@ erDiagram
         imgSnapshotTest(
           `
       gantt
+       accTitle: This is a title
+       accDescr: This is a description
+
        dateFormat                :YYYY-MM-DD
        title                     :Adding GANTT diagram functionality to mermaid
        excludes                  :excludes the named dates/days from being included in a charted task..

cypress/platform/gitgraph.html

@@ -9,7 +9,7 @@
     <style>
       body {
         /* background: rgb(221, 208, 208); */
-        background:#111;
+        /* background:#111; */
         /* background:#333; */
         font-family: 'Arial';
         }
@@ -34,6 +34,11 @@
               "git0": "#550055"
        } } }%%
        gitGraph
+      accTitle: "Git Graph"
+      accDescr {
+        Git Graph description.
+        Multiline description
+      }
        commit
        branch develop
        commit tag:"v1.0.0"

cypress/platform/knsv.html

@@ -26,58 +26,17 @@
     </style>
   </head>
   <body>
-      <div class="mermaid2" style="width: 50%;">
-pie title Pets adopted by volunteers
-    "Dogs" : 386
-    "Cats" : 85
-    "Rats" : 15
-      </div>
-      <div class="mermaid2" style="width: 100%;">
-gantt
-       title                     Adding GANTT diagram functionality to mermaid
-       excludes                  :excludes the named dates/days from being included in a charted task..
-       section Screening
-       Lexplore                  :active, des1, 2023-01-06,2023-01-08
-       H4                        :active,  des2, 2024-01-09, 3d
-       Future task               :         des3, after des2, 5d
-       Future task2              :         des4, after des3, 5d
 
-      </div>
-      <div class="mermaid2" style="width: 100%;">
-info
-      </div>
-      <div class="mermaid2" style="width: 100%;">
-gitGraph:
-options
-{
-    "nodeSpacing": 150,
-    "nodeRadius": 10
-}
-end
-commit
-branch newbranch
-checkout newbranch
-commit
-commit
-checkout master
-commit
-commit
-merge newbranch
-      </div>
+
+
+
       <div class="mermaid" style="width: 50%;">
-sequenceDiagram
-        title: with colon:
-        participant a as Alice
-        participant j as John
-        note right of a: Hello world!
-        properties a: {"class": "internal-service-actor", "type": "@clock"}
-        properties j: {"class": "external-service-actor", "type": "@computer"}
-        links a: {"Repo": "https://www.contoso.com/repo", "Swagger": "https://www.contoso.com/swagger"}
-        links j: {"Repo": "https://www.contoso.com/repo"}
-        links a: {"Dashboard": "https://www.contoso.com/dashboard", "On-Call": "https://www.contoso.com/oncall"}
-        link a: Contacts @ https://contacts.contoso.com/?contact=alice@contoso.com
-        a->>j: Hello John, how are you?
-        j-->>a: Great!      </div>
+graph TD
+    A -->|000| B
+    B -->|111| C
+
+    linkStyle 1 stroke:#ff3,stroke-width:4px,color:red;
+        </div>
       <div class="mermaid2" style="width: 100%;">
 journey
             title My working day
@@ -145,12 +104,6 @@ requirementDiagram
           a1-->a2-->a3
         end
       </div>
-      <div class="mermaid" style="width: 50%;">
- flowchart LR
-      Function-->URL-->A-->B-->C
-      click Function clickByFlow "Add a div"
-      click URL "https://mermaid-js.github.io/mermaid/#/" "Visit <strong>mermaid docs</strong>" _blank
-      </div>
       <div class="mermaid2" style="width: 100%;">
       gantt
     dateFormat  YYYY-MM-DD
@@ -250,26 +203,26 @@ class Class10 {
     nodeSpacing: 10,
     curve: 'cardinal',
     htmlLabels: true,
-    defaultRenderer: 'dagre-d3',
+    // defaultRenderer: 'dagre-d3',
   },
   class: {
-    defaultRenderer: 'dagre-d3',
+    // defaultRenderer: 'dagre-d3',
     htmlLabels: true,
   },
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: {
-    actorFontFamily: 'courier',
-    actorMargin: 50,
-    showSequenceNumbers: false,
-    // forceMenus: true,
-  },
-        // sequenceDiagram: { actorMargin: 300, forceMenus: false }, // deprecated
+  //       sequence: {
+  //   actorFontFamily: 'courier',
+  //   actorMargin: 50,
+  //   showSequenceNumbers: false,
+  //   // hideUnusedParticipants: true,
+  //   // forceMenus: true,
+  // },
+  //       // sequenceDiagram: { actorMargin: 300, forceMenus: false }, // deprecated
         // fontFamily: '"times", sans-serif',
         // fontFamily: 'courier',
         state: {
           nodeSpacing: 50,
           rankSpacing: 50,
-          defaultRenderer: 'dagre-d3',
         },
         logLevel: 0,
         fontSize: 18,

cypress/plugins/index.js

@@ -17,7 +17,16 @@
 // }
 
 const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
+require('@applitools/eyes-cypress')(module);
 
 module.exports = (on, config) => {
   addMatchImageSnapshotPlugin(on, config);
+  // copy any needed variables from process.env to config.env
+  config.env.useAppli = process.env.USE_APPLI ? true : false;
+  config.env.codeBranch = process.env.APPLI_BRANCH;
+
+  // do not forget to return the changed config object!
+  return config;
 };
+
+require('@applitools/eyes-cypress')(module);

cypress/support/eyes-index.d.ts

@@ -0,0 +1 @@
+import "@applitools/eyes-cypress"

cypress/support/index.js

@@ -13,9 +13,12 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
+import '@applitools/eyes-cypress/commands';
+
 // Import commands.js using ES2015 syntax:
 import './commands';
 // import '@percy/cypress';
+import '@applitools/eyes-cypress/commands';
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

demos/classchart.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>Mermaid Quick Test Page</title>
+	<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
+	<style>
+		div.mermaid {
+			/* font-family: 'trebuchet ms', verdana, arial; */
+			font-family: 'Courier New', Courier, monospace !important;
+		}
+	</style>
+</head>
+
+<body>
+
+
+	<div class="mermaid">
+		classDiagram
+		title Animal Diagram
+		accDescription The animal class diagram
+		Animal <|-- Duck
+		Animal <|-- Fish
+		Animal <|-- Zebra
+		Animal : +int age
+		Animal : +String gender
+		Animal: +isMammal()
+		Animal: +mate()
+		class Duck{
+			+String beakColor
+			+swim()
+			+quack()
+		}
+		class Fish{
+			-int sizeInFeet
+			-canEat()
+		}
+		class Zebra{
+			+bool is_wild
+			+run()
+		}
+	</div>
+
+	<script src="./mermaid.js"></script>
+	<script>
+		mermaid.initialize({
+		  theme: 'forest',
+		  // themeCSS: '.node rect { fill: red; }',
+		  logLevel: 3,
+		  securityLevel: 'loose',
+		  flowchart: { curve: 'basis' },
+		  gantt: { axisFormat: '%m/%d/%Y' },
+		  sequence: { actorMargin: 50 },
+		  // sequenceDiagram: { actorMargin: 300 } // deprecated
+		});
+	</script>
+
+</body>
+
+</html>

demos/flowchart.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <title>Mermaid Quick Test Page</title>
+  <title>Mermaid Quick Flowchart Test Page</title>
   <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
   <style>
       div.mermaid {
@@ -220,6 +220,8 @@
   <h3>graph</h3>
   <div class="mermaid">
     graph TD
+    title What to buy
+    accDescription Options of what to buy with Christmas money
     A[Christmas] -->|Get money| B(Go shopping)
     B --> C{Let me thinksssssx<br/>sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss}
     C -->|One| D[Laptop]
@@ -230,8 +232,8 @@
   <h3>flowchart</h3>
   <div class="mermaid">
     flowchart TD
-    title Christmas
-    accDescription Get money
+    title What to buy
+    accDescription Options of what to buy with Christmas money
     A[Christmas] -->|Get money| B(Go shopping)
     B --> C{Let me thinksssssx<br/>sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss}
     C -->|One| D[Laptop]

demos/gantt.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<title>Mermaid Quick Test Page</title>
+<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
+<style>
+	div.mermaid {
+		font-family: 'Courier New', Courier, monospace !important;
+	}
+</style>
+</head>
+
+<body>
+
+<!-- accDescription Tasks for Q4 -->
+<div class="mermaid">
+gantt
+  title A Gantt Diagram
+  accDescription Remaining Q4 Tasks
+  dateFormat  YYYY-MM-DD
+  section Section
+  A task           :a1, 2014-01-01, 30d
+  Another task     :after a1  , 20d
+  section Another
+  Task in sec      :2014-01-12  , 12d
+  another task      : 24d
+</div>
+
+<script src="./mermaid.js"></script>
+<script>
+	mermaid.initialize({
+  logLevel: 3,
+  securityLevel: 'loose',
+  gantt: { axisFormat: '%m/%d/%Y' },
+	});
+</script>
+
+</body>
+
+</html>

demos/index.html

@@ -385,8 +385,7 @@
     A -->|Get money| B1[(Go shopping 1)]
     A -->|Get money| B2[(Go shopping 2)]
     A -->|Get money| B3[(Go shopping 3)]
-    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[(Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?)]
     B1 --> C
     B2 --> C
     B3 --> C
@@ -518,8 +517,10 @@
     sequenceDiagram
     autonumber
     Alice->>John: Hello John,<br>how are you?
+    autonumber 50 10
     Alice->>John: John,<br />can you hear me?
     John-->>Alice: Hi Alice,<br />I can hear you!
+    autonumber off
     John-->>Alice: I feel great!
   </div>
 
@@ -601,10 +602,11 @@
     gitGraph:
     options
     {
-    "nodeSpacing": 150,
-    "nodeRadius": 10
+    "nodeSpacing": 50, 
+    "nodeRadius": 5
     }
     end
+    branch master
     commit
     branch newbranch
     checkout newbranch
@@ -680,6 +682,7 @@
 
   <div class="mermaid">
     stateDiagram
+    accDescription This is a state diagram showing one state
     State1
   </div>
 
@@ -872,4 +875,4 @@
   </script>
 </body>
 
-</html>
+</html>

demos/journey.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>Mermaid Quick Test Page</title>
+	<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
+	<style>
+		div.mermaid {
+			/* font-family: 'trebuchet ms', verdana, arial; */
+			font-family: 'Courier New', Courier, monospace !important;
+		}
+	</style>
+</head>
+
+<body>
+	<div class="mermaid">
+        journey
+        title My day
+        accDescription A user journey diagram of a typical day in my life
+        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
+	</div>
+
+	<script src="./mermaid.js"></script>
+	<script>
+		mermaid.initialize({
+		  theme: 'forest',
+		  logLevel: 3,
+		  securityLevel: 'loose',
+		  flowchart: { curve: 'basis' },
+		  gantt: { axisFormat: '%m/%d/%Y' },
+		  sequence: { actorMargin: 50 },
+		});
+	</script>
+
+</body>
+
+</html>

demos/requirements.html

@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>Mermaid Quick Test Page</title>
+	<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
+	<style>
+		div.mermaid {
+			/* font-family: 'trebuchet ms', verdana, arial; */
+			font-family: 'Courier New', Courier, monospace !important;
+		}
+	</style>
+</head>
+
+<body>
+
+
+	<div class="mermaid">
+	requirementDiagram
+	title This is a title
+	requirement test_req {
+	id: 1
+	text: the test text.
+	risk: high
+	verifymethod: test
+	}
+
+	functionalRequirement test_req2 {
+	id: 1.1
+	text: the second test text.
+	risk: low
+	verifymethod: inspection
+	}
+
+	performanceRequirement test_req3 {
+	id: 1.2
+	text: the third test text.
+	risk: medium
+	verifymethod: demonstration
+	}
+
+	interfaceRequirement test_req4 {
+	id: 1.2.1
+	text: the fourth test text.
+	risk: medium
+	verifymethod: analysis
+	}
+
+	physicalRequirement test_req5 {
+	id: 1.2.2
+	text: the fifth test text.
+	risk: medium
+	verifymethod: analysis
+	}
+
+	designConstraint test_req6 {
+	id: 1.2.3
+	text: the sixth test text.
+	risk: medium
+	verifymethod: analysis
+	}
+
+	element test_entity {
+	type: simulation
+	}
+
+	element test_entity2 {
+	type: word doc
+	docRef: reqs/test_entity
+	}
+
+	element test_entity3 {
+	type: "test suite"
+	docRef: github.com/all_the_tests
+	}
+
+
+	test_entity - satisfies -> test_req2
+	test_req - traces -> test_req2
+	test_req - contains -> test_req3
+	test_req3 - contains -> test_req4
+	test_req4 - derives -> test_req5
+	test_req5 - refines -> test_req6
+	test_entity3 - verifies -> test_req5
+	test_req <- copies - test_entity2
+	</div>
+
+	<script src="./mermaid.js"></script>
+	<script>
+		mermaid.initialize({
+		  theme: 'forest',
+		  // themeCSS: '.node rect { fill: red; }',
+		  logLevel: 3,
+		  securityLevel: 'loose',
+		  flowchart: { curve: 'basis' },
+		  gantt: { axisFormat: '%m/%d/%Y' },
+		  sequence: { actorMargin: 50 },
+		  // sequenceDiagram: { actorMargin: 300 } // deprecated
+		});
+	</script>
+
+</body>
+
+</html>

demos/sequence.html

@@ -24,6 +24,7 @@
 		participant Alice
 		participant Bob
 		participant John as John<br />Second Line
+		autonumber 10 10
 		rect rgb(200, 220, 100)
 		rect rgb(200, 255, 200)
 		Alice ->> Bob: Hello Bob, how are you?
@@ -39,13 +40,17 @@
 		Bob-x John:wrap: John! Are you still debating about how you're doing? How long does it take??
 		Note over John: After a few more moments, John<br />finally snaps out of it.
 		end
+		autonumber off
 		alt either this
-		Alice->>John: Yes
+		Alice->>+John: Yes
+    John-->>-Alice: OK
 		else or this
+		autonumber
 		Alice->>John: No
 		else or this will happen
 		Alice->John: Maybe
 		end
+		autonumber 200
 		par this happens in parallel
 		Alice -->> Bob: Parallel message 1
 		and
@@ -69,4 +74,4 @@
 
 </body>
 
-</html>
+</html>

demos/state.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>Mermaid Quick Test Page</title>
+	<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
+	<style>
+		div.mermaid {
+			/* font-family: 'trebuchet ms', verdana, arial; */
+			font-family: 'Courier New', Courier, monospace !important;
+		}
+	</style>
+</head>
+
+<body>
+
+
+	<div class="mermaid">
+		stateDiagram
+		title This is a title
+        accDescription This is an accessible description
+        State1
+	</div>
+
+	<div class="mermaid">
+		stateDiagram-v2
+		title This is a title
+        accDescription This is an accessible description
+        State1
+	</div>
+
+	<script src="./mermaid.js"></script>
+	<script>
+		mermaid.initialize({
+		  theme: 'forest',
+		  // themeCSS: '.node rect { fill: red; }',
+		  logLevel: 3,
+		  securityLevel: 'loose',
+		  flowchart: { curve: 'basis' },
+		  gantt: { axisFormat: '%m/%d/%Y' },
+		  sequence: { actorMargin: 50 },
+		  // sequenceDiagram: { actorMargin: 300 } // deprecated
+		});
+	</script>
+
+</body>
+
+</html>

docs/8.6.0_docs.md

@@ -7,7 +7,7 @@
 With version 8.6.0 comes the release of directives for mermaid, a new system for modifying configurations, with the aim of establishing centralized, sane defaults and simple implementation.
 
 `directives` allow for a single-use overwriting of `config`, as it has been discussed in [Configurations](./Setup.md).
-This allows site Diagram Authors to instantiate temporary modifications to `config` through the use of [Directives](), which are parsed before rendering diagram definitions. This allows the Diagram Authors to alter the appearance of the diagrams. 
+This allows site Diagram Authors to instantiate temporary modifications to `config` through the use of [Directives](), which are parsed before rendering diagram definitions. This allows the Diagram Authors to alter the appearance of the diagrams.
 
 **A likely application for this is in the creation of diagrams/charts inside company/organizational webpages, that rely on mermaid for diagram and chart rendering.**
 
@@ -65,7 +65,7 @@ init would be an argument-directive: `%%{init: { **insert argument here**}}%%`
 The json object that is passed as {**argument** } must be valid, quoted json or it will be ignored.
     **for example**:
 
-`%%{init: {"theme": default, "logLevel": 1 }}%%`
+`%%{init: {"theme": "default", "logLevel": 1 }}%%`
 
 Configurations that are passed through init cannot change the parameters in secure arrays of higher levels. In the event of a conflict, mermaid will give priority to secure arrays and parse the request, without changing the values of the parameters in conflict.
 

docs/README.md

@@ -7,14 +7,14 @@ It is a Javascript based diagramming and charting tool that renders Markdown-ins
 >If you are familiar with Markdown you should have no problem learning [Mermaid's Syntax](./n00b-syntaxReference.md).
 
 
-![banner](img/header.png)
+<img src="img/header.png" alt="" />
 
 <!-- **Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/README.md) -->
 
 [![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)
 
-<!-- Mermaidn book banner -->
-[![banner](img/book-banner-post-release.jpg)](https://mermaid-js.github.io/mermaid/landing/)
+<!-- 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> -->
@@ -40,8 +40,14 @@ For a more detailed introduction to Mermaid and some of its more basic uses, loo
 
 **Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project 🙏**
 
+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.
 
-# Diagram Types
+
+<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>
+
+## Diagram Types
 
 ### [Flowchart](./flowchart.md?id=flowcharts-basic-syntax)
 
@@ -111,28 +117,20 @@ Class08 <--> C2: Cool label
 
 ![Class diagram](img/class.png)
 
-### Git graph - :exclamation: experimental
-
-```mmd
-gitGraph:
-options
-{
-    "nodeSpacing": 150,
-    "nodeRadius": 10
-}
-end
-commit
-branch newbranch
-checkout newbranch
-commit
-commit
-checkout master
-commit
-commit
-merge newbranch
+### Git graph
 
+```mermaid-example
+    gitGraph
+       commit
+       commit
+       branch develop
+       commit
+       commit
+       commit
+       checkout main
+       commit
+       commit
 ```
-![Git graph](img/git.png)
 
 ### [Entity Relationship Diagram - :exclamation: experimental](./entityRelationshipDiagram.md)
 
@@ -161,7 +159,7 @@ journey
 ```
 ![Journey diagram](img/user-journey.png)
 
-# Installation
+## Installation
 
 **In depth guides and examples can be found at [Getting Started](/n00b-gettingStarted) and [Usage](/usage).**
 
@@ -188,7 +186,7 @@ To Deploy Mermaid:
 4. You can then add mermaid as a dev dependency using this command:
     `yarn add --dev mermaid`
 
-## [Mermaid API](./Setup.md):
+### [Mermaid API](./Setup.md):
 
 **To deploy mermaid without a bundler, one can insert a `script` tag with an absolute address and a `mermaidAPI` call into the HTML like so:**
 
@@ -201,7 +199,7 @@ To Deploy Mermaid:
 
  **Examples can be found at** [Other examples](/examples)
 
-# Sibling projects
+## Sibling projects
 
 - [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
 - [Mermaid CLI](https://github.com/mermaid-js/mermaid-cli)

docs/Tutorials.md

@@ -71,4 +71,4 @@ graph LR;
 
 **Output**
 
-![image](img/python-mermaid-integration.png)
+![Example graph of the Python integration](img/python-mermaid-integration.png)

docs/_sidebar.md

@@ -14,7 +14,7 @@
   - [Gantt](gantt.md)
   - [Pie Chart](pie.md)
   - [Requirement Diagram](requirementDiagram.md)
-  - [Gitgraph (Git) Diagram 🔥🔥🔥](gitgraph.md)
+  - [Gitgraph (Git) Diagram 🔥](gitgraph.md)
   - [Other Examples](examples.md)
 
 - ⚙️ Deployment and Configuration

docs/classDiagram.md

@@ -217,7 +217,7 @@ It is possible to add a label text to a relation:
 classDiagram
 classA <|-- classB : implements
 classC *-- classD : composition
-classE o-- classF : association
+classE o-- classF : aggregation
 ```
 
 ### Two-way relations

docs/developer-docs/configuration.md

@@ -26,5 +26,3 @@ Initialize call is called **only once**. It is called by the site integrator in
 ## configApi.reset
 
 This method resets the configuration for a diagram to the site configuration, the configuration provided by the site integrator. Before each rendering of a diagram reset is called in the very beginning of render.
-
-##

docs/directives.md

@@ -5,31 +5,75 @@
 ## Directives
 Directives gives a diagram author the capability to alter the appearance of a diagram before rendering by changing the applied configuration.
 
-Directives are divided into two sets or orders, by priority in parsing. The first set, containing 'init' or 'initialize' directives are loaded ahead of any other directive. While the other set, containing all other kinds of directives are parsed and factored into the rendering, only after 'init' and the desired graph-type are declared.
+The significance of having directives is that you have them available while writing the diagram, and can modify the defualt 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.
 
-### Init
+While directives allow you to change most of the default configuation 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.
 
-| Parameter | Description |Type | Required | Values|
-| --- | --- | --- | --- | --- |
-| init | modifies configurations| Directive| Optional | Any parameters not included in the secure array|
+## 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
+
+
+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, `mirrroActors` 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
+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.
+
+Following code snippet shows the structure of a directive:
+```
+%%{
+  init: {
+    "theme": "dark",
+    "fontFamily": "monospace",
+    "logLevel": "info",
+    "flowchart": {
+      "htmlLabels": true,
+      "curve": "linear"
+    },
+    "sequence": {
+      "mirrorActors": true
+    }
+  }
+}%%
+```
+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 }}}%%
+```
 
 **Notes:**
-
-init would be an argument-directive: %%{init: { **insert argument here**}}%%
-
 The json object that is passed as {**argument** } must be valid key value pairs and encased in quotation marks or it will be ignored.
 Valid Key Value pairs can be found in config.
 
-The init/initialize directive is parsed earlier in the flow, this allows the incorporation of `%%init%%` directives into the mermaid diagram that is being rendered. Example:
-```mmd
+Example with a simple graph:
+```mermaid-example
 %%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
-graph >
+graph LR
 A-->B
 ```
 
-will set the `logLevel` to `debug` and the `theme` to `dark` for a flowchart diagram, changing the appearance of the diagram itself.
+Here the directive declaration will set the `logLevel` to `debug` and the `theme` to `dark` for a rendered mermaid diagram, changing the appearance of the diagram itself.
 
-Note: 'init' or 'initialize' are both acceptable as init directives. Also note that `%%init%%` and `%%initialize%%` directives will be grouped together after they are parsed. This means:
+Note: You can use 'init' or 'initialize' as both acceptable as init directives. Also note that `%%init%%` and `%%initialize%%` directives will be grouped together after they are parsed. This means:
 
 ```mmd2
 %%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
@@ -37,7 +81,7 @@ Note: 'init' or 'initialize' are both acceptable as init directives. Also note t
 ...
 ```
 
-parsing the above generates the `%%init%%` object below, combining the two directives and carrying over the last value given for `loglevel`:
+parsing the above generates a single `%%init%%` JSON object below, combining the two directives and carrying over the last value given for `loglevel`:
 
 ```json5
 {
@@ -49,36 +93,150 @@ parsing the above generates the `%%init%%` object below, combining the two direc
 
 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:
 
-### Other directives
+### Changing Theme via directive
+The following code snippet changes theme to forest:
 
-In this category are any directives that come after the graph type declaration. Essentially, these directives will only be processed after the init directive. Each individual graph type will handle these directives. As an example:
+
+```%%{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
+A(Forest) --> B[/Another/]
+A --> C[End]
+  subgraph section
+  B
+  C
+  end
 
 ```
-%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
+
+### Changing fontFamily via directive
+The following code snippet changes theme to forest:
+
+
+```%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%```
+
+Example:
+```mermaid-example
+%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%
+graph TD
+A(Forest) --> B[/Another/]
+A --> C[End]
+  subgraph section
+  B
+  C
+  end
+
+```
+
+### Changing logLevel via directive
+The following code snippet changes theme to forest:
+
+
+```%%{init: { "logLevel": 2 } }%%```
+
+Possible logLevel values are:
+- `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
+A(Forest) --> B[/Another/]
+A --> C[End]
+  subgraph section
+  B
+  C
+  end
+```
+
+### Changing flowchart config via directive
+Some common flowchart configurations are:
+- *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 publis a complete list all diagram specific configurations updated in the docs*
+
+The following code snippet changes flowchart config:
+
+
+```%%{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.
+
+```mermaid-example
+%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%
+graph TD
+A(Forest) --> B[/Another/]
+A --> C[End]
+  subgraph section
+  B
+  C
+  end
+```
+### Changing Sequence diagram config via directive
+Some common sequence configurations are:
+- *width*: number
+- *height*: number
+- *messgageAlign*: left, center, right
+- *mirrorActors*: boolean
+- *useMaxWidth*: boolean
+- *rightAngles*: boolean
+- *showSequenceNumbers*: boolean
+- *wrap*: boolean
+
+For complete list of sequeue diagram configurations, see *defaultConfig.js* in the source code.
+*Soon we plan to publis a complete list all diagram specific configurations updated in the docs*
+
+So, `wrap` by default has a value of `false` for sequence diagrams.
+
+Let us see an example:
+
+```mermaid-example
 sequenceDiagram
-%%{config: { 'fontFamily': 'Menlo', 'fontSize': 18, 'fontWeight': 400} }%%
-Alice->>Bob: Hi Bob
-Bob->>Alice: Hi Alice
+
+Alice->Bob: Hello Bob, how are you?
+Bob->Alice: Fine, How did you mother like the book I suggested? And did you catch with the new book about alien invansion?
+Alice->Bob: Good.
+Bob->Alice: Cool
 ```
-## Chronology
-This will set the `logLevel` to `debug` and `theme` to `dark` for a sequence diagram. Then, during processing, the config for the sequence diagram is set by the `config` directive. This directive is handled in the `sequenceDb.js`. In this example, the fontFamily, fontSize, and fontWeight are all set for this sequence diagram.
 
-### Wrapping
+Now let us enble wrap for sequence diagrams.
 
-## Wrap
-
-| Parameter | Description |Type | Required | Values|
-| --- | --- | --- | --- | --- |
-| wrap | a callable text-wrap function| Directive| Optional | %%{wrap}%%|
+The following code snippet changes sequence diagram config for `wrap` to `true`:
 
 
-#### Backwards Compatibility
+```%%{init: { "sequence": { "wrap": true} } }%%```
+
+Using in the diagram above, the wrap will be enabled.
+
+```mermaid-example
+%%{init: { "sequence": { "wrap": true, "width":300 } } }%%
+sequenceDiagram
+Alice->Bob: Hello Bob, how are you?
+Bob->Alice: Fine, How did you mother like the book I suggested? And did you catch with the new book about alien invansion?
+Alice->Bob: Good.
+Bob->Alice: Cool
+```
 
-Init directives and any other non-multiline directives should be backwards compatible, because they will be treated as comments in prior versions of mermaid-js.
 
-Multiline directives, however, will pose an issue and will render an error. This is unavoidable.
-
-# example
 
 

docs/examples.md

@@ -140,7 +140,7 @@ sequenceDiagram
 
 ```
 
-A commit flow diagram.
+## A commit flow diagram.
 ```mermaid
 gitGraph:
     commit "Ashish"
@@ -155,4 +155,4 @@ gitGraph:
     commit
     branch b2
     commit
-```
+```

docs/flowchart.md

@@ -7,7 +7,7 @@ All Flowcharts are composed of **nodes**, the geometric shapes and **edges**, th
 It can also accommodate different arrow types, multi directional arrows, and linking to and from subgraphs.
 
 > **Important note**: Do not type the word "end" as a Flowchart node. Capitalize all or any one the letters to keep the flowchart from breaking, i.e, "End" or "END". Or you can apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897).**
-Node
+
 ### A node (default)
 
 ```mermaid-example

docs/gitgraph.md

@@ -36,7 +36,7 @@ Mermaid syntax for Gitgraph is very straight-forward and simple. It follows a de
 
 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 begging 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:
@@ -48,7 +48,7 @@ A simple gitgraph showing three commits on the default (***main***) branch:
        commit
        commit
 ```
-If you look closely at the previous example, you can see the default branch `main` along with three commits. Also, notice, the by-default each commit has been given a unique & random Id. What if you would want to give your own custom ID to a commit? Yes, it is possible to do that with Mermaid.
+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 would want to give your own custom ID to a commit? Yes, it is possible to do that with Mermaid.
 
 ### Adding custom commit id
 
@@ -63,7 +63,7 @@ Let us see how this works with the help of the following diagram:
        commit id: "Gamma"
 ```
 
-In this example, we have given our custom id's to the commits.
+In this example, we have given our custom IDs to the commits.
 
 ### Modifying commit type
 
@@ -88,7 +88,7 @@ Let us see how these different commit type look with the help of the following d
        commit
 ```
 
-In this example, we have specified different types to each commit. Also, see how we have clubbed both `id` and `type` together at the time of declaring our commits.
+In this example, we have specified different types to each commit. Also, see how we have included both `id` and `type` together at the time of declaring our commits.
 
 ### Adding Tags
 
@@ -178,7 +178,7 @@ Let see modify our previous example to merge our two branches:
 ```
 In this example, see how we started with default `main` branch, and pushed to 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`.
+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`.
 After this we merge the `develop` branch onto the current branch `main`, resulting in a merge commit.
 Since the current branch at this point is still `main`, the last two commits are registered against that.
 
@@ -187,6 +187,7 @@ In Mermaid, you have the option to configure the gitgraph diagram. You can confi
 - `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`, meanig, by default `main` branch is the first in the order.
 
 Let's look at them one by one.
 ## Hiding Branch names and lines
@@ -290,7 +291,7 @@ Usage example:
         merge release
  ```
 
-## Customizing the main/default branch name
+## 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:
@@ -312,12 +313,59 @@ Usage example:
         merge MetroLine3
         commit id:"Miami"
         commit id:"Washington"
-        merge MetroLine2
+        merge MetroLine2 tag:"MY JUNCTION"
         commit id:"Boston"
         commit id:"Detroit"
         commit type:REVERSE id:"SanFrancisco"
  ```
-Looks at the imaginary rail road map created using these Mermaid. Here, we have changed the default main branch name to `MetroLine1`.
+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 defintion 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 definiton. You can set it to a positive number.
+
+Mermaid follows the given precendence 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.
+
+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
+      commit
+      branch test1 order: 3
+      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
+      commit
+      branch test1 order: 3
+      branch test2
+      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 becuase the order of `1`.
+Then, `main` branch is drawn becuase the order of `2`.
+And, lastly `test1`is drawn becuase the order of `3`.
+
+NOTE: Becuase we have overriden the `mainBranchOrder` to `2`, the `main` branch is not drawn in the begining, 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).
@@ -735,7 +783,7 @@ Now let's override the default values for the `git0` to `git3` variables:
        commit
 
 ```
-Se how the highlight commit color on the first branch is changed to the value specified in the theme variable `gitInv0`.
+See how the highlight commit color on the first branch is changed to the value specified in the theme variable `gitInv0`.
 
 
 

docs/index.html

@@ -17,7 +17,7 @@
     />
     <!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
     <link rel="stylesheet" href="theme.css" />
-    <script src="//cdn.jsdelivr.net/npm/mermaid@9.0.0/dist/mermaid.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.1/dist/mermaid.min.js"></script>
     <!-- <script src="http://localhost:9000/mermaid.js"></script> -->
     <script>
       // prettier-ignore
@@ -96,7 +96,7 @@
         markdown: {
           renderer: {
             code: function (code, lang) {
-              if (lang.startsWith('mermaid') || lang === 'mmd') {
+              if (lang && (lang.startsWith('mermaid') || lang === 'mmd')) {
                 var resultingHTML = '';
 
                 if (lang === 'mmd' || lang === 'mermaid-example') {

docs/integrations.md

@@ -6,17 +6,17 @@ They also serve as proof of concept, for the variety of things that can be built
 
 
 ## 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)
+  - [svg-generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
 - [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) (**Native support**)
 - [Gitea](https://gitea.io) (**Native support**)
 - [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) (**Native support**)
 - [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) (**Native support**)
 - [Joplin](https://joplinapp.org) (**Native support**)
 - [Notion](https://notion.so) (**Native support**)
-- [GitHub](https://github.com) (**Native support**)
-  - [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
-  - [svg-generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
-  - [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) (**Native support**)
+- [Observable](https://observablehq.com/@observablehq/mermaid) (**Native support**)
 - [GitBook](http://gitbook.com)
   - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
   - [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)

jest.config.js

@@ -9,7 +9,7 @@ module.exports = {
       { 'token-stack': true },
     ],
   },
-  transformIgnorePatterns: ['/node_modules/(?!dagre-d3-renderer/lib).*\\.js'],
+  transformIgnorePatterns: ['/node_modules/(?!dagre-d3-renderer/lib|khroma).*\\.js'],
   moduleNameMapper: {
     '\\.(css|scss)$': 'identity-obj-proxy',
   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "9.0.1",
+  "version": "9.1.1",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "main": "dist/mermaid.core.js",
   "module": "dist/mermaid.esm.min.mjs",
@@ -58,41 +58,43 @@
   },
   "dependencies": {
     "@braintree/sanitize-url": "^6.0.0",
-    "cypress-image-snapshot": "^4.0.1",
     "d3": "^7.0.0",
     "dagre": "^0.8.5",
     "dagre-d3": "^0.6.4",
     "dompurify": "2.3.6",
     "graphlib": "^2.1.8",
-    "khroma": "^1.4.1",
+    "khroma": "^2.0.0",
     "moment-mini": "^2.24.0",
     "stylis": "^4.0.10"
   },
   "devDependencies": {
+    "@applitools/eyes-cypress": "^3.25.7",
     "@babel/core": "^7.14.6",
     "@babel/eslint-parser": "^7.14.7",
     "@babel/preset-env": "^7.14.7",
     "@babel/register": "^7.14.5",
     "@commitlint/cli": "^16.0.0",
     "@commitlint/config-conventional": "^16.0.0",
-    "babel-jest": "^27.0.6",
+    "babel-jest": "^28.0.3",
     "babel-loader": "^8.2.2",
     "concurrently": "^7.0.0",
     "coveralls": "^3.0.2",
     "css-to-string-loader": "^0.1.3",
-    "cypress": "9.5.2",
+    "cypress": "9.6.0",
+    "cypress-image-snapshot": "^4.0.1",
     "documentation": "13.2.0",
     "eslint": "^8.2.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-html": "^6.2.0",
     "eslint-plugin-jest": "^26.0.0",
-    "eslint-plugin-jsdoc": "^38.0.3",
+    "eslint-plugin-jsdoc": "^39.1.0",
     "eslint-plugin-markdown": "^2.2.1",
     "eslint-plugin-prettier": "^4.0.0",
     "husky": "^7.0.1",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.0.6",
+    "jest": "^28.0.3",
+    "jest-environment-jsdom": "^28.0.2",
     "jison": "^0.4.18",
     "js-base64": "3.7.2",
     "lint-staged": "^12.1.2",

pie.js

@@ -0,0 +1,675 @@
+/* parser generated by jison 0.4.18 */
+/*
+  Returns a Parser object of the following structure:
+
+  Parser: {
+    yy: {}
+  }
+
+  Parser.prototype: {
+    yy: {},
+    trace: function(),
+    symbols_: {associative list: name ==> number},
+    terminals_: {associative list: number ==> name},
+    productions_: [...],
+    performAction: function anonymous(yytext, yyleng, yylineno, yy, yystate, $$, _$),
+    table: [...],
+    defaultActions: {...},
+    parseError: function(str, hash),
+    parse: function(input),
+
+    lexer: {
+        EOF: 1,
+        parseError: function(str, hash),
+        setInput: function(input),
+        input: function(),
+        unput: function(str),
+        more: function(),
+        less: function(n),
+        pastInput: function(),
+        upcomingInput: function(),
+        showPosition: function(),
+        test_match: function(regex_match_array, rule_index),
+        next: function(),
+        lex: function(),
+        begin: function(condition),
+        popState: function(),
+        _currentRules: function(),
+        topState: function(),
+        pushState: function(condition),
+
+        options: {
+            ranges: boolean           (optional: true ==> token location info will include a .range[] member)
+            flex: boolean             (optional: true ==> flex-like lexing behaviour where the rules are tested exhaustively to find the longest match)
+            backtrack_lexer: boolean  (optional: true ==> lexer regexes are tested in order and for each matching regex the action code is invoked; the lexer terminates the scan when a token is returned by the action code)
+        },
+
+        performAction: function(yy, yy_, $avoiding_name_collisions, YY_START),
+        rules: [...],
+        conditions: {associative list: name ==> set},
+    }
+  }
+
+
+  token location info (@$, _$, etc.): {
+    first_line: n,
+    last_line: n,
+    first_column: n,
+    last_column: n,
+    range: [start_number, end_number]       (where the numbers are indexes into the input string, regular zero-based)
+  }
+
+
+  the parseError function receives a 'hash' object with these members for lexer and parser errors: {
+    text:        (matched text)
+    token:       (the produced terminal token, if any)
+    line:        (yylineno)
+  }
+  while parser (grammar) errors will also provide these members, i.e. parser errors deliver a superset of attributes: {
+    loc:         (yylloc)
+    expected:    (string describing the set of expected tokens)
+    recoverable: (boolean: TRUE when the parser has a error recovery rule available for this particular error)
+  }
+*/
+var pie = (function(){
+var o=function(k,v,o,l){for(o=o||{},l=k.length;l--;o[k[l]]=v);return o},$V0=[1,4],$V1=[1,5],$V2=[1,6],$V3=[1,7],$V4=[1,9],$V5=[1,11,13,15,22,23,24,25],$V6=[2,5],$V7=[1,6,11,13,15,22,23,24,25],$V8=[22,23,24],$V9=[2,8],$Va=[1,18],$Vb=[1,19],$Vc=[1,20],$Vd=[1,25],$Ve=[6,22,23,24,25];
+var parser = {trace: function trace () { },
+yy: {},
+symbols_: {"error":2,"start":3,"eol":4,"directive":5,"PIE":6,"document":7,"showData":8,"line":9,"statement":10,"txt":11,"value":12,"title":13,"title_value":14,"accDescription":15,"description_value":16,"openDirective":17,"typeDirective":18,"closeDirective":19,":":20,"argDirective":21,"NEWLINE":22,";":23,"EOF":24,"open_directive":25,"type_directive":26,"arg_directive":27,"close_directive":28,"$accept":0,"$end":1},
+terminals_: {2:"error",6:"PIE",8:"showData",11:"txt",12:"value",13:"title",14:"title_value",15:"accDescription",16:"description_value",20:":",22:"NEWLINE",23:";",24:"EOF",25:"open_directive",26:"type_directive",27:"arg_directive",28:"close_directive"},
+productions_: [0,[3,2],[3,2],[3,2],[3,3],[7,0],[7,2],[9,2],[10,0],[10,2],[10,2],[10,2],[10,1],[5,3],[5,5],[4,1],[4,1],[4,1],[17,1],[18,1],[21,1],[19,1]],
+performAction: function anonymous(yytext, yyleng, yylineno, yy, yystate /* action[1] */, $$ /* vstack */, _$ /* lstack */) {
+/* this == yyval */
+
+var $0 = $$.length - 1;
+switch (yystate) {
+case 4:
+yy.setShowData(true);
+break;
+case 7:
+ this.$ = $$[$0-1] 
+break;
+case 9:
+ yy.addSection($$[$0-1],yy.cleanupValue($$[$0])); 
+break;
+case 10:
+ this.$=$$[$0].trim();yy.setTitle(this.$); 
+break;
+case 11:
+ this.$=$$[$0].trim();yy.setAccDescription(this.$); 
+break;
+case 18:
+ yy.parseDirective('%%{', 'open_directive'); 
+break;
+case 19:
+ yy.parseDirective($$[$0], 'type_directive'); 
+break;
+case 20:
+ $$[$0] = $$[$0].trim().replace(/'/g, '"'); yy.parseDirective($$[$0], 'arg_directive'); 
+break;
+case 21:
+ yy.parseDirective('}%%', 'close_directive', 'pie'); 
+break;
+}
+},
+table: [{3:1,4:2,5:3,6:$V0,17:8,22:$V1,23:$V2,24:$V3,25:$V4},{1:[3]},{3:10,4:2,5:3,6:$V0,17:8,22:$V1,23:$V2,24:$V3,25:$V4},{3:11,4:2,5:3,6:$V0,17:8,22:$V1,23:$V2,24:$V3,25:$V4},o($V5,$V6,{7:12,8:[1,13]}),o($V7,[2,15]),o($V7,[2,16]),o($V7,[2,17]),{18:14,26:[1,15]},{26:[2,18]},{1:[2,1]},{1:[2,2]},o($V8,$V9,{17:8,9:16,10:17,5:21,1:[2,3],11:$Va,13:$Vb,15:$Vc,25:$V4}),o($V5,$V6,{7:22}),{19:23,20:[1,24],28:$Vd},o([20,28],[2,19]),o($V5,[2,6]),{4:26,22:$V1,23:$V2,24:$V3},{12:[1,27]},{14:[1,28]},{16:[1,29]},o($V8,[2,12]),o($V8,$V9,{17:8,9:16,10:17,5:21,1:[2,4],11:$Va,13:$Vb,15:$Vc,25:$V4}),o($Ve,[2,13]),{21:30,27:[1,31]},o($Ve,[2,21]),o($V5,[2,7]),o($V8,[2,9]),o($V8,[2,10]),o($V8,[2,11]),{19:32,28:$Vd},{28:[2,20]},o($Ve,[2,14])],
+defaultActions: {9:[2,18],10:[2,1],11:[2,2],31:[2,20]},
+parseError: function parseError (str, hash) {
+    if (hash.recoverable) {
+        this.trace(str);
+    } else {
+        var error = new Error(str);
+        error.hash = hash;
+        throw error;
+    }
+},
+parse: function parse(input) {
+    var self = this, stack = [0], tstack = [], vstack = [null], lstack = [], table = this.table, yytext = '', yylineno = 0, yyleng = 0, recovering = 0, TERROR = 2, EOF = 1;
+    var args = lstack.slice.call(arguments, 1);
+    var lexer = Object.create(this.lexer);
+    var sharedState = { yy: {} };
+    for (var k in this.yy) {
+        if (Object.prototype.hasOwnProperty.call(this.yy, k)) {
+            sharedState.yy[k] = this.yy[k];
+        }
+    }
+    lexer.setInput(input, sharedState.yy);
+    sharedState.yy.lexer = lexer;
+    sharedState.yy.parser = this;
+    if (typeof lexer.yylloc == 'undefined') {
+        lexer.yylloc = {};
+    }
+    var yyloc = lexer.yylloc;
+    lstack.push(yyloc);
+    var ranges = lexer.options && lexer.options.ranges;
+    if (typeof sharedState.yy.parseError === 'function') {
+        this.parseError = sharedState.yy.parseError;
+    } else {
+        this.parseError = Object.getPrototypeOf(this).parseError;
+    }
+    function popStack(n) {
+        stack.length = stack.length - 2 * n;
+        vstack.length = vstack.length - n;
+        lstack.length = lstack.length - n;
+    }
+    _token_stack:
+        var lex = function () {
+            var token;
+            token = lexer.lex() || EOF;
+            if (typeof token !== 'number') {
+                token = self.symbols_[token] || token;
+            }
+            return token;
+        };
+    var symbol, preErrorSymbol, state, action, a, r, yyval = {}, p, len, newState, expected;
+    while (true) {
+        state = stack[stack.length - 1];
+        if (this.defaultActions[state]) {
+            action = this.defaultActions[state];
+        } else {
+            if (symbol === null || typeof symbol == 'undefined') {
+                symbol = lex();
+            }
+            action = table[state] && table[state][symbol];
+        }
+                    if (typeof action === 'undefined' || !action.length || !action[0]) {
+                var errStr = '';
+                expected = [];
+                for (p in table[state]) {
+                    if (this.terminals_[p] && p > TERROR) {
+                        expected.push('\'' + this.terminals_[p] + '\'');
+                    }
+                }
+                if (lexer.showPosition) {
+                    errStr = 'Parse error on line ' + (yylineno + 1) + ':\n' + lexer.showPosition() + '\nExpecting ' + expected.join(', ') + ', got \'' + (this.terminals_[symbol] || symbol) + '\'';
+                } else {
+                    errStr = 'Parse error on line ' + (yylineno + 1) + ': Unexpected ' + (symbol == EOF ? 'end of input' : '\'' + (this.terminals_[symbol] || symbol) + '\'');
+                }
+                this.parseError(errStr, {
+                    text: lexer.match,
+                    token: this.terminals_[symbol] || symbol,
+                    line: lexer.yylineno,
+                    loc: yyloc,
+                    expected: expected
+                });
+            }
+        if (action[0] instanceof Array && action.length > 1) {
+            throw new Error('Parse Error: multiple actions possible at state: ' + state + ', token: ' + symbol);
+        }
+        switch (action[0]) {
+        case 1:
+            stack.push(symbol);
+            vstack.push(lexer.yytext);
+            lstack.push(lexer.yylloc);
+            stack.push(action[1]);
+            symbol = null;
+            if (!preErrorSymbol) {
+                yyleng = lexer.yyleng;
+                yytext = lexer.yytext;
+                yylineno = lexer.yylineno;
+                yyloc = lexer.yylloc;
+                if (recovering > 0) {
+                    recovering--;
+                }
+            } else {
+                symbol = preErrorSymbol;
+                preErrorSymbol = null;
+            }
+            break;
+        case 2:
+            len = this.productions_[action[1]][1];
+            yyval.$ = vstack[vstack.length - len];
+            yyval._$ = {
+                first_line: lstack[lstack.length - (len || 1)].first_line,
+                last_line: lstack[lstack.length - 1].last_line,
+                first_column: lstack[lstack.length - (len || 1)].first_column,
+                last_column: lstack[lstack.length - 1].last_column
+            };
+            if (ranges) {
+                yyval._$.range = [
+                    lstack[lstack.length - (len || 1)].range[0],
+                    lstack[lstack.length - 1].range[1]
+                ];
+            }
+            r = this.performAction.apply(yyval, [
+                yytext,
+                yyleng,
+                yylineno,
+                sharedState.yy,
+                action[1],
+                vstack,
+                lstack
+            ].concat(args));
+            if (typeof r !== 'undefined') {
+                return r;
+            }
+            if (len) {
+                stack = stack.slice(0, -1 * len * 2);
+                vstack = vstack.slice(0, -1 * len);
+                lstack = lstack.slice(0, -1 * len);
+            }
+            stack.push(this.productions_[action[1]][0]);
+            vstack.push(yyval.$);
+            lstack.push(yyval._$);
+            newState = table[stack[stack.length - 2]][stack[stack.length - 1]];
+            stack.push(newState);
+            break;
+        case 3:
+            return true;
+        }
+    }
+    return true;
+}};
+
+/* generated by jison-lex 0.3.4 */
+var lexer = (function(){
+var lexer = ({
+
+EOF:1,
+
+parseError:function parseError(str, hash) {
+        if (this.yy.parser) {
+            this.yy.parser.parseError(str, hash);
+        } else {
+            throw new Error(str);
+        }
+    },
+
+// resets the lexer, sets new input
+setInput:function (input, yy) {
+        this.yy = yy || this.yy || {};
+        this._input = input;
+        this._more = this._backtrack = this.done = false;
+        this.yylineno = this.yyleng = 0;
+        this.yytext = this.matched = this.match = '';
+        this.conditionStack = ['INITIAL'];
+        this.yylloc = {
+            first_line: 1,
+            first_column: 0,
+            last_line: 1,
+            last_column: 0
+        };
+        if (this.options.ranges) {
+            this.yylloc.range = [0,0];
+        }
+        this.offset = 0;
+        return this;
+    },
+
+// consumes and returns one char from the input
+input:function () {
+        var ch = this._input[0];
+        this.yytext += ch;
+        this.yyleng++;
+        this.offset++;
+        this.match += ch;
+        this.matched += ch;
+        var lines = ch.match(/(?:\r\n?|\n).*/g);
+        if (lines) {
+            this.yylineno++;
+            this.yylloc.last_line++;
+        } else {
+            this.yylloc.last_column++;
+        }
+        if (this.options.ranges) {
+            this.yylloc.range[1]++;
+        }
+
+        this._input = this._input.slice(1);
+        return ch;
+    },
+
+// unshifts one char (or a string) into the input
+unput:function (ch) {
+        var len = ch.length;
+        var lines = ch.split(/(?:\r\n?|\n)/g);
+
+        this._input = ch + this._input;
+        this.yytext = this.yytext.substr(0, this.yytext.length - len);
+        //this.yyleng -= len;
+        this.offset -= len;
+        var oldLines = this.match.split(/(?:\r\n?|\n)/g);
+        this.match = this.match.substr(0, this.match.length - 1);
+        this.matched = this.matched.substr(0, this.matched.length - 1);
+
+        if (lines.length - 1) {
+            this.yylineno -= lines.length - 1;
+        }
+        var r = this.yylloc.range;
+
+        this.yylloc = {
+            first_line: this.yylloc.first_line,
+            last_line: this.yylineno + 1,
+            first_column: this.yylloc.first_column,
+            last_column: lines ?
+                (lines.length === oldLines.length ? this.yylloc.first_column : 0)
+                 + oldLines[oldLines.length - lines.length].length - lines[0].length :
+              this.yylloc.first_column - len
+        };
+
+        if (this.options.ranges) {
+            this.yylloc.range = [r[0], r[0] + this.yyleng - len];
+        }
+        this.yyleng = this.yytext.length;
+        return this;
+    },
+
+// When called from action, caches matched text and appends it on next action
+more:function () {
+        this._more = true;
+        return this;
+    },
+
+// When called from action, signals the lexer that this rule fails to match the input, so the next matching rule (regex) should be tested instead.
+reject:function () {
+        if (this.options.backtrack_lexer) {
+            this._backtrack = true;
+        } else {
+            return this.parseError('Lexical error on line ' + (this.yylineno + 1) + '. You can only invoke reject() in the lexer when the lexer is of the backtracking persuasion (options.backtrack_lexer = true).\n' + this.showPosition(), {
+                text: "",
+                token: null,
+                line: this.yylineno
+            });
+
+        }
+        return this;
+    },
+
+// retain first n characters of the match
+less:function (n) {
+        this.unput(this.match.slice(n));
+    },
+
+// displays already matched input, i.e. for error messages
+pastInput:function () {
+        var past = this.matched.substr(0, this.matched.length - this.match.length);
+        return (past.length > 20 ? '...':'') + past.substr(-20).replace(/\n/g, "");
+    },
+
+// displays upcoming input, i.e. for error messages
+upcomingInput:function () {
+        var next = this.match;
+        if (next.length < 20) {
+            next += this._input.substr(0, 20-next.length);
+        }
+        return (next.substr(0,20) + (next.length > 20 ? '...' : '')).replace(/\n/g, "");
+    },
+
+// displays the character position where the lexing error occurred, i.e. for error messages
+showPosition:function () {
+        var pre = this.pastInput();
+        var c = new Array(pre.length + 1).join("-");
+        return pre + this.upcomingInput() + "\n" + c + "^";
+    },
+
+// test the lexed token: return FALSE when not a match, otherwise return token
+test_match:function(match, indexed_rule) {
+        var token,
+            lines,
+            backup;
+
+        if (this.options.backtrack_lexer) {
+            // save context
+            backup = {
+                yylineno: this.yylineno,
+                yylloc: {
+                    first_line: this.yylloc.first_line,
+                    last_line: this.last_line,
+                    first_column: this.yylloc.first_column,
+                    last_column: this.yylloc.last_column
+                },
+                yytext: this.yytext,
+                match: this.match,
+                matches: this.matches,
+                matched: this.matched,
+                yyleng: this.yyleng,
+                offset: this.offset,
+                _more: this._more,
+                _input: this._input,
+                yy: this.yy,
+                conditionStack: this.conditionStack.slice(0),
+                done: this.done
+            };
+            if (this.options.ranges) {
+                backup.yylloc.range = this.yylloc.range.slice(0);
+            }
+        }
+
+        lines = match[0].match(/(?:\r\n?|\n).*/g);
+        if (lines) {
+            this.yylineno += lines.length;
+        }
+        this.yylloc = {
+            first_line: this.yylloc.last_line,
+            last_line: this.yylineno + 1,
+            first_column: this.yylloc.last_column,
+            last_column: lines ?
+                         lines[lines.length - 1].length - lines[lines.length - 1].match(/\r?\n?/)[0].length :
+                         this.yylloc.last_column + match[0].length
+        };
+        this.yytext += match[0];
+        this.match += match[0];
+        this.matches = match;
+        this.yyleng = this.yytext.length;
+        if (this.options.ranges) {
+            this.yylloc.range = [this.offset, this.offset += this.yyleng];
+        }
+        this._more = false;
+        this._backtrack = false;
+        this._input = this._input.slice(match[0].length);
+        this.matched += match[0];
+        token = this.performAction.call(this, this.yy, this, indexed_rule, this.conditionStack[this.conditionStack.length - 1]);
+        if (this.done && this._input) {
+            this.done = false;
+        }
+        if (token) {
+            return token;
+        } else if (this._backtrack) {
+            // recover context
+            for (var k in backup) {
+                this[k] = backup[k];
+            }
+            return false; // rule action called reject() implying the next rule should be tested instead.
+        }
+        return false;
+    },
+
+// return next match in input
+next:function () {
+        if (this.done) {
+            return this.EOF;
+        }
+        if (!this._input) {
+            this.done = true;
+        }
+
+        var token,
+            match,
+            tempMatch,
+            index;
+        if (!this._more) {
+            this.yytext = '';
+            this.match = '';
+        }
+        var rules = this._currentRules();
+        for (var i = 0; i < rules.length; i++) {
+            tempMatch = this._input.match(this.rules[rules[i]]);
+            if (tempMatch && (!match || tempMatch[0].length > match[0].length)) {
+                match = tempMatch;
+                index = i;
+                if (this.options.backtrack_lexer) {
+                    token = this.test_match(tempMatch, rules[i]);
+                    if (token !== false) {
+                        return token;
+                    } else if (this._backtrack) {
+                        match = false;
+                        continue; // rule action called reject() implying a rule MISmatch.
+                    } else {
+                        // else: this is a lexer rule which consumes input without producing a token (e.g. whitespace)
+                        return false;
+                    }
+                } else if (!this.options.flex) {
+                    break;
+                }
+            }
+        }
+        if (match) {
+            token = this.test_match(match, rules[index]);
+            if (token !== false) {
+                return token;
+            }
+            // else: this is a lexer rule which consumes input without producing a token (e.g. whitespace)
+            return false;
+        }
+        if (this._input === "") {
+            return this.EOF;
+        } else {
+            return this.parseError('Lexical error on line ' + (this.yylineno + 1) + '. Unrecognized text.\n' + this.showPosition(), {
+                text: "",
+                token: null,
+                line: this.yylineno
+            });
+        }
+    },
+
+// return next match that has a token
+lex:function lex () {
+        var r = this.next();
+        if (r) {
+            return r;
+        } else {
+            return this.lex();
+        }
+    },
+
+// activates a new lexer condition state (pushes the new lexer condition state onto the condition stack)
+begin:function begin (condition) {
+        this.conditionStack.push(condition);
+    },
+
+// pop the previously active lexer condition state off the condition stack
+popState:function popState () {
+        var n = this.conditionStack.length - 1;
+        if (n > 0) {
+            return this.conditionStack.pop();
+        } else {
+            return this.conditionStack[0];
+        }
+    },
+
+// produce the lexer rule set which is active for the currently active lexer condition state
+_currentRules:function _currentRules () {
+        if (this.conditionStack.length && this.conditionStack[this.conditionStack.length - 1]) {
+            return this.conditions[this.conditionStack[this.conditionStack.length - 1]].rules;
+        } else {
+            return this.conditions["INITIAL"].rules;
+        }
+    },
+
+// return the currently active lexer condition state; when an index argument is provided it produces the N-th previous condition state, if available
+topState:function topState (n) {
+        n = this.conditionStack.length - 1 - Math.abs(n || 0);
+        if (n >= 0) {
+            return this.conditionStack[n];
+        } else {
+            return "INITIAL";
+        }
+    },
+
+// alias for begin(condition)
+pushState:function pushState (condition) {
+        this.begin(condition);
+    },
+
+// return the number of states currently on the stack
+stateStackSize:function stateStackSize() {
+        return this.conditionStack.length;
+    },
+options: {"case-insensitive":true},
+performAction: function anonymous(yy,yy_,$avoiding_name_collisions,YY_START) {
+var YYSTATE=YY_START;
+switch($avoiding_name_collisions) {
+case 0: this.begin('open_directive'); return 25; 
+break;
+case 1: this.begin('type_directive'); return 26; 
+break;
+case 2: this.popState(); this.begin('arg_directive'); return 20; 
+break;
+case 3: this.popState(); this.popState(); return 28; 
+break;
+case 4:return 27;
+break;
+case 5:/* skip comments */
+break;
+case 6:/* skip comments */{ /*console.log('');*/ }
+break;
+case 7:return 22;
+break;
+case 8:/* do nothing */
+break;
+case 9:/* ignore */
+break;
+case 10: this.begin("title");return 13; 
+break;
+case 11: this.popState(); return "title_value"; 
+break;
+case 12: this.begin("acc_title");return 'acc_title'; 
+break;
+case 13: this.popState(); return "acc_title_value"; 
+break;
+case 14: this.begin("acc_descr");return 'acc_descr'; 
+break;
+case 15: this.popState(); return "acc_descr_value"; 
+break;
+case 16: this.begin("acc_descr_multiline");
+break;
+case 17: this.popState(); 
+break;
+case 18:return "acc_descr_multiline_value";
+break;
+case 19: this.begin("string"); 
+break;
+case 20: this.popState(); 
+break;
+case 21: return "txt"; 
+break;
+case 22:return 6;
+break;
+case 23:return 8;
+break;
+case 24:return "value";
+break;
+case 25:return 24;
+break;
+}
+},
+rules: [/^(?:%%\{)/i,/^(?:((?:(?!\}%%)[^:.])*))/i,/^(?::)/i,/^(?:\}%%)/i,/^(?:((?:(?!\}%%).|\n)*))/i,/^(?:%%(?!\{)[^\n]*)/i,/^(?:[^\}]%%[^\n]*)/i,/^(?:[\n\r]+)/i,/^(?:%%[^\n]*)/i,/^(?:[\s]+)/i,/^(?:title\b)/i,/^(?:(?!\n||)*[^\n]*)/i,/^(?:accTitle\s*:\s*)/i,/^(?:(?!\n||)*[^\n]*)/i,/^(?:accDescr\s*:\s*)/i,/^(?:(?!\n||)*[^\n]*)/i,/^(?:accDescr\s*\{\s*)/i,/^(?:[\}])/i,/^(?:[^\}]*)/i,/^(?:["])/i,/^(?:["])/i,/^(?:[^"]*)/i,/^(?:pie\b)/i,/^(?:showData\b)/i,/^(?::[\s]*[\d]+(?:\.[\d]+)?)/i,/^(?:$)/i],
+conditions: {"acc_descr_multiline":{"rules":[17,18],"inclusive":false},"acc_descr":{"rules":[15],"inclusive":false},"acc_title":{"rules":[13],"inclusive":false},"close_directive":{"rules":[],"inclusive":false},"arg_directive":{"rules":[3,4],"inclusive":false},"type_directive":{"rules":[2,3],"inclusive":false},"open_directive":{"rules":[1],"inclusive":false},"title":{"rules":[11],"inclusive":false},"string":{"rules":[20,21],"inclusive":false},"INITIAL":{"rules":[0,5,6,7,8,9,10,12,14,16,19,22,23,24,25],"inclusive":true}}
+});
+return lexer;
+})();
+parser.lexer = lexer;
+function Parser () {
+  this.yy = {};
+}
+Parser.prototype = parser;parser.Parser = Parser;
+return new Parser;
+})();
+
+
+if (typeof require !== 'undefined' && typeof exports !== 'undefined') {
+exports.parser = pie;
+exports.Parser = pie.Parser;
+exports.parse = function () { return pie.parse.apply(pie, arguments); };
+exports.main = function commonjsMain (args) {
+    if (!args[1]) {
+        console.log('Usage: '+args[0]+' FILE');
+        process.exit(1);
+    }
+    var source = require('fs').readFileSync(require('path').normalize(args[1]), "utf8");
+    return exports.parser.parse(source);
+};
+if (typeof module !== 'undefined' && require.main === module) {
+  exports.main(process.argv.slice(1));
+}
+}

src/accessibility.js

@@ -1,17 +1,20 @@
 /**
  * This method will add a basic title and description element to a chart. The yy parser will need to
  * respond to getTitle and getAccDescription, where the title is the title element on the chart,
- * which is not displayed and the accDescription is the description element on the chart, which is
- * also not displayed.
+ * which is generally not displayed and the accDescription is the description element on the chart,
+ * which is never displayed.
+ *
+ * The following charts display their title as a visual and accessibility element: gantt
  *
  * @param yy_parser
  * @param svg
  * @param id
  */
 export default function addSVGAccessibilityFields(yy_parser, svg, id) {
-  if (typeof svg.insert == 'undefined') {
+  if (typeof svg.insert === 'undefined') {
     return;
   }
+
   let title_string = yy_parser.getTitle();
   let description = yy_parser.getAccDescription();
   svg.attr('role', 'img').attr('aria-labelledby', 'chart-title-' + id + ' chart-desc-' + id);

src/commonDb.js

@@ -0,0 +1,34 @@
+import { sanitizeText as _sanitizeText } from './diagrams/common/common';
+import { getConfig } from './config';
+let title = '';
+let description = '';
+const sanitizeText = (txt) => _sanitizeText(txt, getConfig());
+
+export const clear = function () {
+  title = '';
+  description = '';
+};
+
+export const setTitle = function (txt) {
+  title = sanitizeText(txt).replace(/^\s+/g, '');
+};
+
+export const getTitle = function () {
+  return title;
+};
+
+export const setAccDescription = function (txt) {
+  description = sanitizeText(txt).replace(/\n\s+/g, '\n');
+};
+
+export const getAccDescription = function () {
+  return description;
+};
+
+export default {
+  setTitle,
+  getTitle,
+  getAccDescription,
+  setAccDescription,
+  clear,
+};

src/config.js

@@ -3,8 +3,6 @@ import { log } from './logger';
 import theme from './themes';
 import config from './defaultConfig';
 
-// debugger;
-
 export const defaultConfig = Object.freeze(config);
 
 let siteConfig = assignWithDepth({}, defaultConfig);
@@ -29,7 +27,7 @@ export const updateCurrentConfig = (siteCfg, _directives) => {
 
   cfg = assignWithDepth(cfg, sumOfDirectives);
 
-  if (sumOfDirectives.theme) {
+  if (sumOfDirectives.theme && theme[sumOfDirectives.theme]) {
     const tmpConfigFromInitialize = assignWithDepth({}, configFromInitialize);
     const themeVariables = assignWithDepth(
       tmpConfigFromInitialize.themeVariables || {},
@@ -61,7 +59,7 @@ export const setSiteConfig = (conf) => {
   siteConfig = assignWithDepth({}, defaultConfig);
   siteConfig = assignWithDepth(siteConfig, conf);
 
-  if (conf.theme) {
+  if (conf.theme && theme[conf.theme]) {
     siteConfig.themeVariables = theme[conf.theme].getThemeVariables(conf.themeVariables);
   }
 

src/dagre-wrapper/edges.spec.js

@@ -1,5 +1,5 @@
 import { intersection } from './edges';
-import { setLogLevel, log } from '../logger';
+import { setLogLevel } from '../logger';
 
 describe('Graphlib decorations', () => {
   let node;

src/defaultConfig.js

@@ -230,6 +230,7 @@ const config = {
 
   /** The object containing configurations specific for sequence diagrams */
   sequence: {
+    hideUnusedParticipants: false,
     /**
      * | Parameter       | Description                  | Type    | Required | Values             |
      * | --------------- | ---------------------------- | ------- | -------- | ------------------ |
@@ -1054,6 +1055,7 @@ const config = {
       y: 0,
     },
     mainBranchName: 'main',
+    mainBranchOrder: 0,
     showCommitLabel: true,
     showBranches: true,
   },

src/diagrams/class/classDb.js

@@ -4,6 +4,13 @@ import * as configApi from '../../config';
 import common from '../common/common';
 import utils from '../../utils';
 import mermaidAPI from '../../mermaidAPI';
+import {
+  setTitle,
+  getTitle,
+  getAccDescription,
+  setAccDescription,
+  clear as commonClear,
+} from '../../commonDb';
 
 const MERMAID_DOM_ID_PREFIX = 'classid-';
 
@@ -77,6 +84,7 @@ export const clear = function () {
   classes = {};
   funs = [];
   funs.push(setupToolTips);
+  commonClear();
 };
 
 export const getClass = function (id) {
@@ -134,6 +142,7 @@ export const addAnnotation = function (className, annotation) {
  * @public
  */
 export const addMember = function (className, member) {
+  console.log(className, member);
   const validatedClassName = splitClassNameAndType(className).className;
   const theClass = classes[validatedClassName];
 
@@ -326,7 +335,7 @@ const setupToolTips = function (element) {
 
       tooltipElem.transition().duration(200).style('opacity', '.9');
       tooltipElem
-        .html(el.attr('title'))
+        .text(el.attr('title'))
         .style('left', window.scrollX + rect.left + (rect.right - rect.left) / 2 + 'px')
         .style('top', window.scrollY + rect.top - 14 + document.body.scrollTop + 'px');
       el.classed('hover', true);
@@ -347,6 +356,10 @@ const setDirection = (dir) => {
 
 export default {
   parseDirective,
+  setTitle,
+  getTitle,
+  getAccDescription,
+  setAccDescription,
   getConfig: () => configApi.getConfig().class,
   addClass,
   bindFunctions,

src/diagrams/class/classDiagram.spec.js

@@ -543,6 +543,34 @@ foo()
       expect(relations[0].relation.lineType).toBe(classDb.lineType.LINE);
     });
 
+    it('should handle accTitle and accDescr', function () {
+      const str = `classDiagram
+            accTitle: My Title
+            accDescr: My Description
+
+            Class01 <|-- Class02
+            `;
+
+      parser.parse(str);
+      expect(parser.yy.getTitle()).toBe('My Title');
+      expect(parser.yy.getAccDescription()).toBe('My Description');
+    });
+    it('should handle accTitle and multiline accDescr', function () {
+      const str = `classDiagram
+            accTitle: My Title
+            accDescr {
+              This is mu multi
+              line description
+            }
+
+            Class01 <|-- Class02
+            `;
+
+      parser.parse(str);
+      expect(parser.yy.getTitle()).toBe('My Title');
+      expect(parser.yy.getAccDescription()).toBe('This is mu multi\nline description');
+    });
+
     it('should handle relation definitions AGGREGATION and dotted line', function () {
       const str = 'classDiagram\n' + 'Class01 o.. Class02';
 

src/diagrams/class/classRenderer-v2.js

@@ -11,6 +11,7 @@ import { render } from '../../dagre-wrapper/index.js';
 import { curveLinear } from 'd3';
 import { interpolateToCurve, getStylesFromArray, configureSvgSize } from '../../utils';
 import common from '../common/common';
+import addSVGAccessibilityFields from '../../accessibility';
 
 parser.yy = classDb;
 
@@ -397,6 +398,7 @@ export const draw = function (text, id) {
     }
   }
 
+  addSVGAccessibilityFields(parser.yy, svg, id);
   // If node has a link, wrap it in an anchor SVG object.
   // const keys = Object.keys(classes);
   // keys.forEach(function(key) {

src/diagrams/class/classRenderer.js

@@ -7,6 +7,7 @@ import { parser } from './parser/classDiagram';
 import svgDraw from './svgDraw';
 import { configureSvgSize } from '../../utils';
 import { getConfig } from '../../config';
+import addSVGAccessibilityFields from '../../accessibility';
 
 parser.yy = classDb;
 
@@ -263,6 +264,7 @@ export const draw = function (text, id) {
   const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;
   log.debug(`viewBox ${vBox}`);
   diagram.attr('viewBox', vBox);
+  addSVGAccessibilityFields(parser.yy, diagram, id);
 };
 
 export default {

src/diagrams/class/parser/classDiagram.jison

@@ -16,7 +16,9 @@
 %x open_directive
 %x type_directive
 %x arg_directive
-
+%x acc_title
+%x acc_descr
+%x acc_descr_multiline
 %%
 \%\%\{                                                          { this.begin('open_directive'); return 'open_directive'; }
 .*direction\s+TB[^\n]*                                          return 'direction_tb';
@@ -29,6 +31,13 @@
 <arg_directive>((?:(?!\}\%\%).|\n)*)                            return 'arg_directive';
 \%\%(?!\{)*[^\n]*(\r?\n?)+                                      /* skip comments */
 \%\%[^\n]*(\r?\n)*                                              /* skip comments */
+accTitle\s*":"\s*                                               { this.begin("acc_title");return 'acc_title'; }
+<acc_title>(?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_title_value"; }
+accDescr\s*":"\s*                                               { this.begin("acc_descr");return 'acc_descr'; }
+<acc_descr>(?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_descr_value"; }
+accDescr\s*"{"\s*                                { this.begin("acc_descr_multiline");}
+<acc_descr_multiline>[\}]                       { this.popState(); }
+<acc_descr_multiline>[^\}]*                     return "acc_descr_multiline_value";
 
 \s*(\r?\n)+                return 'NEWLINE';
 \s+                     /* skip whitespace */
@@ -185,6 +194,7 @@ Function arguments are optional: 'call <callback_name>()' simply executes 'callb
 
 start
     : mermaidDoc
+    | statments
     | direction
     | directive start
     ;
@@ -253,6 +263,9 @@ statement
     | cssClassStatement
     | directive
     | direction
+    | acc_title acc_title_value  { $$=$2.trim();yy.setTitle($$); }
+    | acc_descr acc_descr_value  { $$=$2.trim();yy.setAccDescription($$); }
+    | acc_descr_multiline_value  { $$=$1.trim();yy.setAccDescription($$); }
     ;
 
 classStatement

src/diagrams/common/common.js

@@ -57,11 +57,11 @@ export const removeScript = (txt) => {
     }
   }
   let decodedText = removeEscapes(rs);
-  decodedText = decodedText.replace(/script>/gi, '#');
-  decodedText = decodedText.replace(/javascript:/gi, '#');
-  decodedText = decodedText.replace(/javascript&colon/gi, '#');
-  decodedText = decodedText.replace(/onerror=/gi, 'onerror:');
-  decodedText = decodedText.replace(/<iframe/gi, '');
+  decodedText = decodedText.replaceAll(/script>/gi, '#');
+  decodedText = decodedText.replaceAll(/javascript:/gi, '#');
+  decodedText = decodedText.replaceAll(/javascript&colon/gi, '#');
+  decodedText = decodedText.replaceAll(/onerror=/gi, 'onerror:');
+  decodedText = decodedText.replaceAll(/<iframe/gi, '');
   return decodedText;
 };
 

src/diagrams/common/common.spec.js

@@ -1,6 +1,14 @@
 import { sanitizeText, removeScript, removeEscapes } from './common';
 
 describe('when securityLevel is antiscript, all script must be removed', function () {
+  /**
+   * @param {string} original The original text
+   * @param {string} result The expected sanitized text
+   */
+  function compareRemoveScript(original, result) {
+    expect(removeScript(original)).toEqual(result);
+  }
+
   it('should remove all script block, script inline.', function () {
     const labelString = `1
 		Act1: Hello 1<script src="http://abc.com/script1.js"></script>1
@@ -9,19 +17,34 @@ describe('when securityLevel is antiscript, all script must be removed', functio
 			alert('script run......');
 		</script>1
 	1`;
-
-    const result = removeScript(labelString);
-    const hasScript = result.indexOf('script') >= 0;
-    expect(hasScript).toEqual(false);
-
     const exactlyString = `1
 		Act1: Hello 11
 		<b>Act2</b>:
 		11
 	1`;
+    compareRemoveScript(labelString, exactlyString);
+  });
 
-    const isEqual = result == exactlyString;
-    expect(isEqual).toEqual(true);
+  it('should remove all javascript urls', function () {
+    compareRemoveScript(
+      `This is a <a href="javascript:runHijackingScript();">clean link</a> + <a href="javascript:runHijackingScript();">clean link</a>
+  and <a href="javascript&colon;bipassedMining();">me too</a>`,
+      `This is a <a href="#runHijackingScript();">clean link</a> + <a href="#runHijackingScript();">clean link</a>
+  and <a href="#;bipassedMining();">me too</a>`
+    );
+  });
+
+  it('should detect malicious images', function () {
+    compareRemoveScript(`<img onerror="alert('hello');">`, `<img onerror:"alert('hello');">`);
+  });
+
+  it('should detect iframes', function () {
+    compareRemoveScript(
+      `<iframe src="http://abc.com/script1.js"></iframe>
+    <iframe src="http://example.com/iframeexample"></iframe>`,
+      ` src="http://abc.com/script1.js"></iframe>
+     src="http://example.com/iframeexample"></iframe>`
+    );
   });
 });
 

src/diagrams/er/erDb.js

@@ -1,6 +1,14 @@
 import { log } from '../../logger';
 import mermaidAPI from '../../mermaidAPI';
 import * as configApi from '../../config';
+import common from '../common/common';
+import {
+  setTitle,
+  getTitle,
+  getAccDescription,
+  setAccDescription,
+  clear as commonClear,
+} from '../../commonDb';
 
 let entities = {};
 let relationships = [];
@@ -67,27 +75,11 @@ const addRelationship = function (entA, rolA, entB, rSpec) {
 
 const getRelationships = () => relationships;
 
-// Keep this - TODO: revisit...allow the diagram to have a title
-const setTitle = function (txt) {
-  title = txt;
-};
-
-const getTitle = function () {
-  return title;
-};
-
-const setAccDescription = function (txt) {
-  description = txt;
-};
-
-const getAccDescription = function () {
-  return description;
-};
-
 const clear = function () {
   entities = {};
   relationships = [];
   title = '';
+  commonClear();
 };
 
 export default {

src/diagrams/er/parser/erDiagram.jison

@@ -2,14 +2,18 @@
 
 %options case-insensitive
 %x open_directive type_directive arg_directive block
-%x title
-%x accDescription
+%x acc_title
+%x acc_descr
+%x acc_descr_multiline
 
 %%
-title                                                           { this.begin("title");return 'title'; }
-<title>(?!\n|;|#)*[^\n]*                                        { this.popState(); return "title_value"; }
-accDescription                                                  { this.begin("accDescription");return 'accDescription'; }
-<accDescription>(?!\n|;|#)*[^\n]*                               { this.popState(); return "description_value"; }
+accTitle\s*":"\s*                                               { this.begin("acc_title");return 'acc_title'; }
+<acc_title>(?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_title_value"; }
+accDescr\s*":"\s*                                               { this.begin("acc_descr");return 'acc_descr'; }
+<acc_descr>(?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_descr_value"; }
+accDescr\s*"{"\s*                                { this.begin("acc_descr_multiline");}
+<acc_descr_multiline>[\}]                       { this.popState(); }
+<acc_descr_multiline>[^\}]*                     return "acc_descr_multiline_value";
 \%\%\{                                                          { this.begin('open_directive'); return 'open_directive'; }
 <open_directive>((?:(?!\}\%\%)[^:.])*)                          { this.begin('type_directive'); return 'type_directive'; }
 <type_directive>":"                                             { this.popState(); this.begin('arg_directive'); return ':'; }
@@ -91,7 +95,9 @@ statement
     | entityName BLOCK_START BLOCK_STOP { yy.addEntity($1); }
     | entityName { yy.addEntity($1); }
     | title title_value  { $$=$2.trim();yy.setTitle($$); }
-    | accDescription description_value  { $$=$2.trim();yy.setAccDescription($$); }
+    | acc_title acc_title_value  { $$=$2.trim();yy.setTitle($$); }
+    | acc_descr acc_descr_value  { $$=$2.trim();yy.setAccDescription($$); }
+    | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); }
     ;
 
 entityName

src/diagrams/er/parser/erDiagram.spec.js

@@ -181,12 +181,31 @@ describe('when parsing ER diagram it...', function () {
     expect(Object.keys(erDb.getEntities()).length).toBe(1);
   });
 
-  it('should allow for a title and acc description', function () {
+  it('should allow for a accessibility title and description (accDescr)', function () {
     const teacherRole = 'is teacher of';
     const line1 = `TEACHER }o--o{ STUDENT : "${teacherRole}"`;
 
     erDiagram.parser.parse(
-      `erDiagram\ntitle graph title\n accDescription this graph is about stuff\n${line1}`
+      `erDiagram
+      accTitle: graph title
+      accDescr: this graph is about stuff
+      ${line1}`
+    );
+    expect(erDb.getTitle()).toBe('graph title');
+    expect(erDb.getAccDescription()).toBe('this graph is about stuff');
+  });
+
+  it('should allow for a accessibility title and multi line description (accDescr)', function () {
+    const teacherRole = 'is teacher of';
+    const line1 = `TEACHER }o--o{ STUDENT : "${teacherRole}"`;
+
+    erDiagram.parser.parse(
+      `erDiagram
+      accTitle: graph title
+      accDescr {
+        this graph is about stuff
+      }\n
+      ${line1}`
     );
     expect(erDb.getTitle()).toBe('graph title');
     expect(erDb.getAccDescription()).toBe('this graph is about stuff');

src/diagrams/flowchart/flowDb.js

@@ -4,6 +4,13 @@ import * as configApi from '../../config';
 import common from '../common/common';
 import mermaidAPI from '../../mermaidAPI';
 import { log } from '../../logger';
+import {
+  setTitle,
+  getTitle,
+  getAccDescription,
+  setAccDescription,
+  clear as commonClear,
+} from '../../commonDb';
 
 const MERMAID_DOM_ID_PREFIX = 'flowchart-';
 let vertexCounter = 0;
@@ -23,6 +30,8 @@ let version; // As in graph
 // Functions to be run after graph rendering
 let funs = [];
 
+const sanitizeText = (txt) => common.sanitizeText(txt, config);
+
 export const parseDirective = function (statement, context, type) {
   mermaidAPI.parseDirective(this, statement, context, type);
 };
@@ -77,7 +86,7 @@ export const addVertex = function (_id, text, type, style, classes, dir, props =
   vertexCounter++;
   if (typeof text !== 'undefined') {
     config = configApi.getConfig();
-    txt = common.sanitizeText(text.trim(), config);
+    txt = sanitizeText(text.trim());
 
     // strip quotes if string starts and ends with a quote
     if (txt[0] === '"' && txt[txt.length - 1] === '"') {
@@ -132,7 +141,7 @@ export const addSingleLink = function (_start, _end, type, linktext) {
   linktext = type.text;
 
   if (typeof linktext !== 'undefined') {
-    edge.text = common.sanitizeText(linktext.trim(), config);
+    edge.text = sanitizeText(linktext.trim());
 
     // strip quotes if string starts and exnds with a quote
     if (edge.text[0] === '"' && edge.text[edge.text.length - 1] === '"') {
@@ -255,7 +264,7 @@ export const setClass = function (ids, className) {
 const setTooltip = function (ids, tooltip) {
   ids.split(',').forEach(function (id) {
     if (typeof tooltip !== 'undefined') {
-      tooltips[version === 'gen-1' ? lookUpDomId(id) : id] = common.sanitizeText(tooltip, config);
+      tooltips[version === 'gen-1' ? lookUpDomId(id) : id] = sanitizeText(tooltip);
     }
   });
 };
@@ -397,7 +406,7 @@ const setupToolTips = function (element) {
 
       tooltipElem.transition().duration(200).style('opacity', '.9');
       tooltipElem
-        .html(el.attr('title'))
+        .text(el.attr('title'))
         .style('left', window.scrollX + rect.left + (rect.right - rect.left) / 2 + 'px')
         .style('top', window.scrollY + rect.top - 14 + document.body.scrollTop + 'px');
       el.classed('hover', true);
@@ -427,6 +436,7 @@ export const clear = function (ver) {
   tooltips = [];
   firstGraphFlag = true;
   version = ver || 'gen-1';
+  commonClear();
 };
 export const setGen = (ver) => {
   version = ver || 'gen-1';
@@ -488,7 +498,7 @@ export const addSubGraph = function (_id, list, _title) {
   id = id || 'subGraph' + subCount;
   // if (id[0].match(/\d/)) id = lookUpDomId(id);
   title = title || '';
-  title = common.sanitizeText(title, config);
+  title = sanitizeText(title);
   subCount = subCount + 1;
   const subGraph = { id: id, nodes: nodeList, title: title.trim(), classes: [], dir };
 
@@ -736,6 +746,10 @@ const makeUniq = (sg, allSubgraphs) => {
 export default {
   parseDirective,
   defaultConfig: () => configApi.defaultConfig.flowchart,
+  setTitle,
+  getTitle,
+  getAccDescription,
+  setAccDescription,
   addVertex,
   lookUpDomId,
   addLink,

src/diagrams/flowchart/flowRenderer-v2.js

@@ -10,6 +10,7 @@ import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
 import { log } from '../../logger';
 import common, { evaluate } from '../common/common';
 import { interpolateToCurve, getStylesFromArray, configureSvgSize } from '../../utils';
+import addSVGAccessibilityFields from '../../accessibility';
 
 const conf = {};
 export const setConf = function (cnf) {
@@ -181,7 +182,7 @@ export const addVertices = function (vert, g, svgId, root, doc) {
 };
 
 /**
- * Add edges to graph based on parsed graph defninition
+ * Add edges to graph based on parsed graph definition
  *
  * @param {object} edges The edges to add to the graph
  * @param {object} g The graph object
@@ -380,7 +381,7 @@ export const draw = function (text, id) {
   const rankSpacing = conf.rankSpacing || 50;
 
   const securityLevel = getConfig().securityLevel;
-  // Handle root and ocument for when rendering in sanbox mode
+  // Handle root and document for when rendering in sandbox mode
   let sandboxElement;
   if (securityLevel === 'sandbox') {
     sandboxElement = select('#i' + id);
@@ -416,7 +417,7 @@ export const draw = function (text, id) {
     flowDb.addVertex(subG.id, subG.title, 'group', undefined, subG.classes, subG.dir);
   }
 
-  // Fetch the verices/nodes and edges/links from the parsed graph definition
+  // Fetch the vertices/nodes and edges/links from the parsed graph definition
   const vert = flowDb.getVertices();
 
   const edges = flowDb.getEdges();
@@ -444,6 +445,9 @@ export const draw = function (text, id) {
   const svg = root.select(`[id="${id}"]`);
   svg.attr('xmlns:xlink', 'http://www.w3.org/1999/xlink');
 
+  // Adds title and description to the flow chart
+  addSVGAccessibilityFields(parser.yy, svg, id);
+
   // Run the renderer. This is what draws the final graph.
   const element = root.select('#' + id + ' g');
   render(element, g, ['point', 'circle', 'cross'], 'flowchart', id);

src/diagrams/flowchart/flowRenderer.js

@@ -11,6 +11,7 @@ import { log } from '../../logger';
 import common, { evaluate } from '../common/common';
 import { interpolateToCurve, getStylesFromArray, configureSvgSize } from '../../utils';
 import flowChartShapes from './flowChartShapes';
+import addSVGAccessibilityFields from '../../accessibility';
 
 const conf = {};
 export const setConf = function (cnf) {
@@ -158,7 +159,7 @@ export const addVertices = function (vert, g, svgId, root, _doc) {
 };
 
 /**
- * Add edges to graph based on parsed graph defninition
+ * Add edges to graph based on parsed graph definition
  *
  * @param {object} edges The edges to add to the graph
  * @param {object} g The graph object
@@ -240,7 +241,9 @@ export const addEdges = function (edges, g) {
 
       if (evaluate(getConfig().flowchart.htmlLabels)) {
         edgeData.labelType = 'html';
-        edgeData.label = `<span id="L-${linkId}" class="edgeLabel L-${linkNameStart}' L-${linkNameEnd}">${edge.text.replace(
+        edgeData.label = `<span id="L-${linkId}" class="edgeLabel L-${linkNameStart}' L-${linkNameEnd}" style="${
+          edgeData.labelStyle
+        }">${edge.text.replace(
           /fa[lrsb]?:fa-[\w-]+/g,
           (s) => `<i class='${s.replace(':', ' ')}'></i>`
         )}</span>`;
@@ -350,7 +353,7 @@ export const draw = function (text, id) {
     flowDb.addVertex(subG.id, subG.title, 'group', undefined, subG.classes);
   }
 
-  // Fetch the verices/nodes and edges/links from the parsed graph definition
+  // Fetch the vertices/nodes and edges/links from the parsed graph definition
   const vert = flowDb.getVertices();
   log.warn('Get vertices', vert);
 
@@ -426,6 +429,9 @@ export const draw = function (text, id) {
 
   log.warn(g);
 
+  // Adds title and description to the flow chart
+  addSVGAccessibilityFields(parser.yy, svg, id);
+
   // Run the renderer. This is what draws the final graph.
   const element = root.select('#' + id + ' g');
   render(element, g);

src/diagrams/flowchart/parser/flow.jison

@@ -7,6 +7,9 @@
 /* lexical grammar */
 %lex
 %x string
+%x acc_title
+%x acc_descr
+%x acc_descr_multiline
 %x dir
 %x vertex
 %x click
@@ -26,6 +29,14 @@
 <arg_directive>((?:(?!\}\%\%).|\n)*)                            return 'arg_directive';
 \%\%(?!\{)[^\n]*                                                /* skip comments */
 [^\}]\%\%[^\n]*                                                 /* skip comments */
+accTitle\s*":"\s*                                               { this.begin("acc_title");return 'acc_title'; }
+<acc_title>(?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_title_value"; }
+accDescr\s*":"\s*                                               { this.begin("acc_descr");return 'acc_descr'; }
+<acc_descr>(?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_descr_value"; }
+accDescr\s*"{"\s*                                { this.begin("acc_descr_multiline");}
+<acc_descr_multiline>[\}]                       { this.popState(); }
+<acc_descr_multiline>[^\}]*                     return "acc_descr_multiline_value";
+// <acc_descr_multiline>.*[^\n]*                    {  return "acc_descr_line"}
 ["]                     this.begin("string");
 <string>["]             this.popState();
 <string>[^"]*           return "STR";
@@ -337,25 +348,13 @@ statement
     | subgraph separator document end
     {$$=yy.addSubGraph(undefined,$3,undefined);}
     | direction
+    | acc_title acc_title_value  { $$=$2.trim();yy.setTitle($$); }
+    | acc_descr acc_descr_value  { $$=$2.trim();yy.setAccDescription($$); }
+    | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); }
     ;
 
 separator: NEWLINE | SEMI | EOF ;
 
-// verticeStatement:
-//     vertex link vertex
-//         { yy.addLink($1,$3,$2);$$ = [$1,$3];}
-//     | vertex link vertex STYLE_SEPARATOR idString
-//        { yy.addLink($1,$3,$2);$$ = [$1,$3];yy.setClass($3,$5);}
-//     | vertex STYLE_SEPARATOR idString link vertex
-//        { yy.addLink($1,$5,$4);$$ = [$1,$5];yy.setClass($1,$3);}
-//     | vertex STYLE_SEPARATOR idString link vertex STYLE_SEPARATOR idString
-//        { yy.addLink($1,$5,$4);$$ = [$1,$5];yy.setClass($5,$7);yy.setClass($1,$3);}
-//     |vertex
-//         {$$ = [$1];}
-//     |vertex STYLE_SEPARATOR idString
-//         {$$ = [$1];yy.setClass($1,$3)}
-//    ;
-
 
 verticeStatement: verticeStatement link node
         { /* console.warn('vs',$1.stmt,$3); */ yy.addLink($1.stmt,$3,$2); $$ = { stmt: $3, nodes: $3.concat($1.nodes) } }

src/diagrams/flowchart/parser/flow.spec.js

@@ -6,13 +6,13 @@ setConfig({
   securityLevel: 'strict',
 });
 
-describe('when parsing ', function () {
+describe('parsing a flow chart', function () {
   beforeEach(function () {
     flow.parser.yy = flowDb;
     flow.parser.yy.clear();
   });
 
-  it('it should handle a trailing whitespaces after statememnts', function () {
+  it('should handle a trailing whitespaces after statememnts', function () {
     const res = flow.parser.parse('graph TD;\n\n\n %% Comment\n A-->B; \n B-->C;');
 
     const vert = flow.parser.yy.getVertices();
@@ -80,47 +80,47 @@ describe('when parsing ', function () {
       flow.parser.yy.clear();
     };
 
-    it("it should be able to parse a '.'", function () {
+    it("should be able to parse a '.'", function () {
       charTest('.');
       charTest('Start 103a.a1');
     });
 
-    // it('it should be able to parse text containing \'_\'', function () {
+    // it('should be able to parse text containing \'_\'', function () {
     //   charTest('_')
     // })
 
-    it("it should be able to parse a ':'", function () {
+    it("should be able to parse a ':'", function () {
       charTest(':');
     });
 
-    it("it should be able to parse a ','", function () {
+    it("should be able to parse a ','", function () {
       charTest(',');
     });
 
-    it("it should be able to parse text containing '-'", function () {
+    it("should be able to parse text containing '-'", function () {
       charTest('a-b');
     });
 
-    it("it should be able to parse a '+'", function () {
+    it("should be able to parse a '+'", function () {
       charTest('+');
     });
 
-    it("it should be able to parse a '*'", function () {
+    it("should be able to parse a '*'", function () {
       charTest('*');
     });
 
-    it("it should be able to parse a '<'", function () {
+    it("should be able to parse a '<'", function () {
       charTest('<', '&lt;');
     });
 
-    // it("it should be able to parse a '>'", function() {
+    // it("should be able to parse a '>'", function() {
     //   charTest('>', '&gt;');
     // });
 
-    // it("it should be able to parse a '='", function() {
+    // it("should be able to parse a '='", function() {
     //   charTest('=', '&equals;');
     // });
-    it("it should be able to parse a '&'", function () {
+    it("should be able to parse a '&'", function () {
       charTest('&');
     });
   });
@@ -146,6 +146,7 @@ describe('when parsing ', function () {
     const classes = flow.parser.yy.getClasses();
     expect(vertices['A'].id).toBe('A');
   });
+
   it('should be possible to use numbers as labels', function () {
     let statement = '';
 
@@ -155,4 +156,42 @@ describe('when parsing ', function () {
     const classes = flow.parser.yy.getClasses();
     expect(vertices['1'].id).toBe('1');
   });
+
+  it('should add accTitle and accDescr to flow chart', function () {
+    const flowChart = `graph LR
+      accTitle: Big decisions
+      accDescr: Flow chart of the decision making process
+      A[Hard] -->|Text| B(Round)
+      B --> C{Decision}
+      C -->|One| D[Result 1]
+      C -->|Two| E[Result 2]
+      `;
+
+    flow.parser.parse(flowChart);
+    expect(flow.parser.yy.getTitle()).toBe('Big decisions');
+    expect(flow.parser.yy.getAccDescription()).toBe('Flow chart of the decision making process');
+  });
+  it('should add accTitle and a multi line accDescr to flow chart', function () {
+    const flowChart = `graph LR
+      accTitle: Big decisions
+
+      accDescr {
+        Flow chart of the decision making process
+        with a second line
+      }
+
+      A[Hard] -->|Text| B(Round)
+      B --> C{Decision}
+      C -->|One| D[Result 1]
+      C -->|Two| E[Result 2]
+`;
+
+    flow.parser.parse(flowChart);
+    expect(flow.parser.yy.getTitle()).toBe('Big decisions');
+    console.log(flow.parser.yy.getAccDescription());
+    expect(flow.parser.yy.getAccDescription()).toBe(
+      `Flow chart of the decision making process
+with a second line`
+    );
+  });
 });

src/diagrams/gantt/ganttDb.js

@@ -4,6 +4,14 @@ import { log } from '../../logger';
 import * as configApi from '../../config';
 import utils from '../../utils';
 import mermaidAPI from '../../mermaidAPI';
+import common from '../common/common';
+import {
+  setTitle,
+  getTitle,
+  getAccDescription,
+  setAccDescription,
+  clear as commonClear,
+} from '../../commonDb';
 
 let dateFormat = '';
 let axisFormat = '';
@@ -12,6 +20,7 @@ let includes = [];
 let excludes = [];
 let links = {};
 let title = '';
+let accDescription = '';
 let sections = [];
 let tasks = [];
 let currentSection = '';
@@ -23,6 +32,10 @@ let topAxis = false;
 // The serial order of the task in the script
 let lastOrder = 0;
 
+const sanitizeText = function (txt) {
+  return common.sanitizeText(txt, configApi.getConfig());
+};
+
 export const parseDirective = function (statement, context, type) {
   mermaidAPI.parseDirective(this, statement, context, type);
 };
@@ -46,6 +59,7 @@ export const clear = function () {
   topAxis = false;
   lastOrder = 0;
   links = {};
+  commonClear();
 };
 
 export const setAxisFormat = function (txt) {
@@ -107,14 +121,6 @@ export const getLinks = function () {
   return links;
 };
 
-export const setTitle = function (txt) {
-  title = txt;
-};
-
-export const getTitle = function () {
-  return title;
-};
-
 export const addSection = function (txt) {
   currentSection = txt;
   sections.push(txt);
@@ -637,6 +643,8 @@ export default {
   getTodayMarker,
   setTitle,
   getTitle,
+  setAccDescription,
+  getAccDescription,
   addSection,
   getSections,
   getTasks,

src/diagrams/gantt/ganttDb.spec.js

@@ -32,6 +32,7 @@ describe('when using the ganttDb', function () {
       fn                        | expected
       ${'getTasks'}             | ${[]}
       ${'getTitle'}             | ${''}
+      ${'getAccDescription'}    | ${''}
       ${'getDateFormat'}        | ${''}
       ${'getAxisFormat'}        | ${''}
       ${'getTodayMarker'}       | ${''}

src/diagrams/gantt/ganttRenderer.js

@@ -15,6 +15,7 @@ import common from '../common/common';
 import ganttDb from './ganttDb';
 import { getConfig } from '../../config';
 import { configureSvgSize } from '../../utils';
+import addSVGAccessibilityFields from '../../accessibility';
 
 parser.yy = ganttDb;
 export const setConf = function () {
@@ -114,6 +115,8 @@ export const draw = function (text, id) {
     .attr('y', conf.titleTopMargin)
     .attr('class', 'titleText');
 
+  addSVGAccessibilityFields(parser.yy, svg, id);
+
   /**
    * @param tasks
    * @param pageWidth

src/diagrams/gantt/parser/gantt.jison

@@ -15,12 +15,24 @@
 %x type_directive
 %x arg_directive
 %x close_directive
+%x acc_title
+%x acc_descr
+%x acc_descr_multiline
 %%
 \%\%\{                                                          { this.begin('open_directive'); return 'open_directive'; }
 <open_directive>((?:(?!\}\%\%)[^:.])*)                          { this.begin('type_directive'); return 'type_directive'; }
 <type_directive>":"                                             { this.popState(); this.begin('arg_directive'); return ':'; }
 <type_directive,arg_directive>\}\%\%                            { this.popState(); this.popState(); return 'close_directive'; }
 <arg_directive>((?:(?!\}\%\%).|\n)*)                            return 'arg_directive';
+
+accTitle\s*":"\s*                                               { this.begin("acc_title");return 'acc_title'; }
+<acc_title>(?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_title_value"; }
+accDescr\s*":"\s*                                               { this.begin("acc_descr");return 'acc_descr'; }
+<acc_descr>(?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_descr_value"; }
+accDescr\s*"{"\s*                                { this.begin("acc_descr_multiline");}
+<acc_descr_multiline>[\}]                       { this.popState(); }
+<acc_descr_multiline>[^\}]*                     return "acc_descr_multiline_value";
+
 \%\%(?!\{)*[^\n]*                                               /* skip comments */
 [^\}]\%\%*[^\n]*                                                /* skip comments */
 \%\%*[^\n]*[\n]*           /* do nothing */
@@ -65,22 +77,23 @@ that id.
 <click>[\s\n]           this.popState();
 <click>[^\s\n]*         return 'click';
 
-"gantt"                 return 'gantt';
-"dateFormat"\s[^#\n;]+  return 'dateFormat';
-"inclusiveEndDates"     return 'inclusiveEndDates';
-"topAxis"               return 'topAxis';
-"axisFormat"\s[^#\n;]+  return 'axisFormat';
-"includes"\s[^#\n;]+    return 'includes';
-"excludes"\s[^#\n;]+    return 'excludes';
-"todayMarker"\s[^\n;]+  return 'todayMarker';
-\d\d\d\d"-"\d\d"-"\d\d  return 'date';
-"title"\s[^#\n;]+       return 'title';
-"section"\s[^#:\n;]+    return 'section';
-[^#:\n;]+               return 'taskTxt';
-":"[^#\n;]+             return 'taskData';
-":"                     return ':';
-<<EOF>>                 return 'EOF';
-.                       return 'INVALID';
+"gantt"                     return 'gantt';
+"dateFormat"\s[^#\n;]+      return 'dateFormat';
+"inclusiveEndDates"         return 'inclusiveEndDates';
+"topAxis"                   return 'topAxis';
+"axisFormat"\s[^#\n;]+      return 'axisFormat';
+"includes"\s[^#\n;]+        return 'includes';
+"excludes"\s[^#\n;]+        return 'excludes';
+"todayMarker"\s[^\n;]+      return 'todayMarker';
+\d\d\d\d"-"\d\d"-"\d\d      return 'date';
+"title"\s[^#\n;]+           return 'title';
+"accDescription"\s[^#\n;]+  return 'accDescription'
+"section"\s[^#:\n;]+        return 'section';
+[^#:\n;]+                   return 'taskTxt';
+":"[^#\n;]+                 return 'taskData';
+":"                         return ':';
+<<EOF>>                     return 'EOF';
+.                           return 'INVALID';
 
 /lex
 
@@ -116,7 +129,9 @@ statement
   | includes {yy.setIncludes($1.substr(9));$$=$1.substr(9);}
   | todayMarker {yy.setTodayMarker($1.substr(12));$$=$1.substr(12);}
   | title {yy.setTitle($1.substr(6));$$=$1.substr(6);}
-  | section {yy.addSection($1.substr(8));$$=$1.substr(8);}
+  | acc_title acc_title_value  { $$=$2.trim();yy.setTitle($$); }
+  | acc_descr acc_descr_value  { $$=$2.trim();yy.setAccDescription($$); }
+  | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); }  | section {yy.addSection($1.substr(8));$$=$1.substr(8);}
   | clickStatement
   | taskTxt taskData {yy.addTask($1,$2);$$='task';}
   | directive

src/diagrams/gantt/parser/gantt.spec.js

@@ -156,4 +156,38 @@ describe('when parsing a gantt diagram it', function () {
       '"test0", test1, test2'
     );
   });
+
+  it('should allow for a accessibility title and description (accDescr)', function () {
+    const expectedTitle = 'Gantt Diagram';
+    const expectedAccDescription = 'Tasks for Q4';
+    const ganttString = `gantt
+       accTitle: ${expectedTitle}
+       accDescr: ${expectedAccDescription}
+       dateFormat  YYYY-MM-DD
+       section Section
+       A task :a1, 2014-01-01, 30d\n`;
+
+    parser.parse(ganttString);
+
+    expect(ganttDb.getTitle()).toBe(expectedTitle);
+    expect(ganttDb.getAccDescription()).toBe(expectedAccDescription);
+  });
+  it('should allow for a accessibility title and multiline description (accDescr)', function () {
+    const expectedTitle = 'Gantt Diagram';
+    const expectedAccDescription = `Tasks for Q4 row1
+row2`;
+    const ganttString = `gantt
+       accTitle: ${expectedTitle}
+       accDescr {
+         ${expectedAccDescription}
+       }
+       dateFormat  YYYY-MM-DD
+       section Section
+       A task :a1, 2014-01-01, 30d\n`;
+
+    parser.parse(ganttString);
+
+    expect(ganttDb.getTitle()).toBe(expectedTitle);
+    expect(ganttDb.getAccDescription()).toBe(expectedAccDescription);
+  });
 });

src/diagrams/git/gitGraphAst.js

@@ -4,10 +4,20 @@ import mermaidAPI from '../../mermaidAPI';
 import * as configApi from '../../config';
 import { getConfig } from '../../config';
 import common from '../common/common';
+import {
+  setTitle,
+  getTitle,
+  getAccDescription,
+  setAccDescription,
+  clear as commonClear,
+} from '../../commonDb';
 
 let mainBranchName = getConfig().gitGraph.mainBranchName;
+let mainBranchOrder = getConfig().gitGraph.mainBranchOrder;
 let commits = {};
 let head = null;
+let branchesConfig = {};
+branchesConfig[mainBranchName] = { name: mainBranchName, order: mainBranchOrder };
 let branches = {};
 branches[mainBranchName] = head;
 let curBranch = mainBranchName;
@@ -113,10 +123,11 @@ export const commit = function (msg, id, type, tag) {
   log.debug('in pushCommit ' + commit.id);
 };
 
-export const branch = function (name) {
+export const branch = function (name, order) {
   name = common.sanitizeText(name, configApi.getConfig());
   if (typeof branches[name] === 'undefined') {
     branches[name] = head != null ? head.id : null;
+    branchesConfig[name] = { name, order: order ? parseInt(order, 10) : null };
     checkout(name);
     log.debug('in createBranch');
   } else {
@@ -136,7 +147,7 @@ export const branch = function (name) {
   }
 };
 
-export const merge = function (otherBranch) {
+export const merge = function (otherBranch, tag) {
   otherBranch = common.sanitizeText(otherBranch, configApi.getConfig());
   const currentCommit = commits[branches[curBranch]];
   const otherCommit = commits[branches[otherBranch]];
@@ -213,6 +224,7 @@ export const merge = function (otherBranch) {
     parents: [head == null ? null : head.id, branches[otherBranch]],
     branch: curBranch,
     type: commitType.MERGE,
+    tag: tag ? tag : '',
   };
   head = commit;
   commits[commit.id] = commit;
@@ -321,19 +333,29 @@ export const clear = function () {
   commits = {};
   head = null;
   let mainBranch = getConfig().gitGraph.mainBranchName;
+  let mainBranchOrder = getConfig().gitGraph.mainBranchOrder;
   branches = {};
   branches[mainBranch] = null;
+  branchesConfig = {};
+  branchesConfig[mainBranch] = { name: mainBranch, order: mainBranchOrder };
   curBranch = mainBranch;
   seq = 0;
+  commonClear();
 };
 
 export const getBranchesAsObjArray = function () {
-  const branchArr = [];
-  for (let branch in branches) {
-    // branchArr.push({ name: branch, commit: commits[branches[branch]] });
-    branchArr.push({ name: branch });
-  }
-  return branchArr;
+  const branchesArray = Object.values(branchesConfig)
+    .map((branchConfig, i) => {
+      if (branchConfig.order !== null) return branchConfig;
+      return {
+        ...branchConfig,
+        order: parseFloat(`0.${i}`, 10),
+      };
+    })
+    .sort((a, b) => a.order - b.order)
+    .map(({ name }) => ({ name }));
+
+  return branchesArray;
 };
 
 export const getBranches = function () {
@@ -389,5 +411,9 @@ export default {
   getCurrentBranch,
   getDirection,
   getHead,
+  setTitle,
+  getTitle,
+  getAccDescription,
+  setAccDescription,
   commitType,
 };

src/diagrams/git/gitGraphParserV2.spec.js

@@ -255,7 +255,7 @@ describe('when parsing a gitGraph', function () {
   it('should handle a gitGraph commit with custom  type,tag, msg, commit id,', function () {
     const str = `gitGraph:
     commit type:REVERSE tag: "test tag" msg: "test msg" id: "1111"
-    
+
     `;
 
     parser.parse(str);
@@ -336,6 +336,20 @@ describe('when parsing a gitGraph', function () {
     expect(Object.keys(parser.yy.getBranches()).length).toBe(2);
   });
 
+  it('should allow _-./ characters in branch names', function () {
+    const str = `gitGraph:
+    commit
+    branch azAZ_-./test
+    `;
+
+    parser.parse(str);
+    const commits = parser.yy.getCommits();
+    expect(Object.keys(commits).length).toBe(1);
+    expect(parser.yy.getCurrentBranch()).toBe('azAZ_-./test');
+    expect(parser.yy.getDirection()).toBe('LR');
+    expect(Object.keys(parser.yy.getBranches()).length).toBe(2);
+  });
+
   it('should handle new branch checkout', function () {
     const str = `gitGraph:
     commit
@@ -350,6 +364,46 @@ describe('when parsing a gitGraph', function () {
     expect(parser.yy.getDirection()).toBe('LR');
     expect(Object.keys(parser.yy.getBranches()).length).toBe(2);
   });
+  it('should handle new branch checkout with order', function () {
+    const str = `gitGraph:
+    commit
+    branch test1 order: 3
+    branch test2 order: 2
+    branch test3 order: 1
+    `;
+
+    parser.parse(str);
+    const commits = parser.yy.getCommits();
+    expect(Object.keys(commits).length).toBe(1);
+    expect(parser.yy.getCurrentBranch()).toBe('test3');
+    expect(Object.keys(parser.yy.getBranches()).length).toBe(4);
+    expect(parser.yy.getBranchesAsObjArray()).toStrictEqual([
+      { name: 'main' },
+      { name: 'test3' },
+      { name: 'test2' },
+      { name: 'test1' },
+    ]);
+  });
+  it('should handle new branch checkout with and without order', function () {
+    const str = `gitGraph:
+    commit
+    branch test1 order: 1
+    branch test2
+    branch test3
+    `;
+
+    parser.parse(str);
+    const commits = parser.yy.getCommits();
+    expect(Object.keys(commits).length).toBe(1);
+    expect(parser.yy.getCurrentBranch()).toBe('test3');
+    expect(Object.keys(parser.yy.getBranches()).length).toBe(4);
+    expect(parser.yy.getBranchesAsObjArray()).toStrictEqual([
+      { name: 'main' },
+      { name: 'test2' },
+      { name: 'test3' },
+      { name: 'test1' },
+    ]);
+  });
 
   it('should handle new branch checkout & commit', function () {
     const str = `gitGraph:
@@ -411,6 +465,41 @@ describe('when parsing a gitGraph', function () {
     ]);
   });
 
+  it('should handle merge tags', function () {
+    const str = `gitGraph:
+    commit
+    branch testBranch
+    checkout testBranch
+    commit
+    checkout main
+    merge testBranch tag: "merge-tag"
+    `;
+
+    parser.parse(str);
+    const commits = parser.yy.getCommits();
+    expect(Object.keys(commits).length).toBe(3);
+    expect(parser.yy.getCurrentBranch()).toBe('main');
+    expect(parser.yy.getDirection()).toBe('LR');
+    expect(Object.keys(parser.yy.getBranches()).length).toBe(2);
+    const commit1 = Object.keys(commits)[0];
+    const commit2 = Object.keys(commits)[1];
+    const commit3 = Object.keys(commits)[2];
+
+    expect(commits[commit1].branch).toBe('main');
+    expect(commits[commit1].parents).toStrictEqual([]);
+
+    expect(commits[commit2].branch).toBe('testBranch');
+    expect(commits[commit2].parents).toStrictEqual([commits[commit1].id]);
+
+    expect(commits[commit3].branch).toBe('main');
+    expect(commits[commit3].parents).toStrictEqual([commits[commit1].id, commits[commit2].id]);
+    expect(commits[commit3].tag).toBe('merge-tag');
+    expect(parser.yy.getBranchesAsObjArray()).toStrictEqual([
+      { name: 'main' },
+      { name: 'testBranch' },
+    ]);
+  });
+
   it('should throw error when try to branch existing branch: main', function () {
     const str = `gitGraph
     commit
@@ -567,4 +656,29 @@ describe('when parsing a gitGraph', function () {
       );
     }
   });
+  describe('accessibility', () => {
+    it('should handle a title and a description (accDescr)', () => {
+      const str = `gitGraph:
+      accTitle: This is a title
+      accDescr: This is a description
+    commit
+    `;
+      parser.parse(str);
+      expect(parser.yy.getTitle()).toBe('This is a title');
+      expect(parser.yy.getAccDescription()).toBe('This is a description');
+    });
+    it('should handle a title and a multiline description (accDescr)', () => {
+      const str = `gitGraph:
+      accTitle: This is a title
+      accDescr {
+        This is a description
+        using multiple lines
+      }
+    commit
+    `;
+      parser.parse(str);
+      expect(parser.yy.getTitle()).toBe('This is a title');
+      expect(parser.yy.getAccDescription()).toBe('This is a description\nusing multiple lines');
+    });
+  });
 });

src/diagrams/git/gitGraphRenderer.js

@@ -4,6 +4,8 @@ import db from './gitGraphAst';
 import gitGraphParser from './parser/gitGraph';
 import { log } from '../../logger';
 import { getConfig } from '../../config';
+import addSVGAccessibilityFields from '../../accessibility';
+
 let allCommitsDict = {};
 let branchNum;
 
@@ -416,7 +418,7 @@ const drawBranches = (svg, branches) => {
 
     lanes.push(pos);
 
-    let name = index === 0 ? gitGraphConfig.mainBranchName : branch.name;
+    let name = branch.name;
 
     // Create the actual text element
     const labelElement = drawText(name);
@@ -480,6 +482,9 @@ export const draw = function (txt, id, ver) {
 
   const diagram = select(`[id="${id}"]`);
 
+  // Adds title and description to the flow chart
+  addSVGAccessibilityFields(parser.yy, diagram, id);
+
   drawCommits(diagram, allCommitsDict, false);
   if (gitGraphConfig.showBranches) {
     drawBranches(diagram, branches);

src/diagrams/git/parser/gitGraph.jison

@@ -13,6 +13,9 @@
 %x type_directive
 %x arg_directive
 %x close_directive
+%x acc_title
+%x acc_descr
+%x acc_descr_multiline
 %options case-insensitive
 
 
@@ -22,35 +25,44 @@
 <type_directive>":"                                             { this.popState(); this.begin('arg_directive'); return ':'; }
 <type_directive,arg_directive>\}\%\%                            { this.popState(); this.popState(); return 'close_directive'; }
 <arg_directive>((?:(?!\}\%\%).|\n)*)                            return 'arg_directive';
+accTitle\s*":"\s*                                               { this.begin("acc_title");return 'acc_title'; }
+<acc_title>(?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_title_value"; }
+accDescr\s*":"\s*                                               { this.begin("acc_descr");return 'acc_descr'; }
+<acc_descr>(?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_descr_value"; }
+accDescr\s*"{"\s*                                               { this.begin("acc_descr_multiline");}
+<acc_descr_multiline>[\}]                                       { this.popState(); }
+<acc_descr_multiline>[^\}]*                                     return "acc_descr_multiline_value";
 (\r?\n)+                               /*{console.log('New line');return 'NL';}*/ return 'NL';
 \s+                                    /* skip all whitespace */
 \#[^\n]*                               /* skip comments */
 \%%[^\n]*                              /* skip comments */
-"gitGraph"                             return 'GG';
-"commit"                               return 'COMMIT';
-"id:"                                  return 'COMMIT_ID';
-"type:"                                return 'COMMIT_TYPE';
-"msg:"                                 return 'COMMIT_MSG';
-"NORMAL"                               return 'NORMAL';
-"REVERSE"                              return 'REVERSE';
-"HIGHLIGHT"                            return 'HIGHLIGHT';
-"tag:"                                 return 'COMMIT_TAG';
-"branch"                               return 'BRANCH';
-"merge"                                return 'MERGE';
-// "reset"                                return 'RESET';
-"checkout"                             return 'CHECKOUT';
-"LR"                                   return 'DIR';
-"BT"                                   return 'DIR';
-":"                                    return ':';
-"^"                                    return 'CARET'
-"options"\r?\n                         this.begin("options");
-<options>"end"\r?\n                    this.popState();
-<options>[^\n]+\r?\n                   return 'OPT';
-["]                                    this.begin("string");
-<string>["]                            this.popState();
-<string>[^"]*                          return 'STR';
-[a-zA-Z][-_\.a-zA-Z0-9]*[-_a-zA-Z0-9]  return 'ID';
-<<EOF>>                                return 'EOF';
+"gitGraph"                              return 'GG';
+"commit"                                return 'COMMIT';
+"id:"                                   return 'COMMIT_ID';
+"type:"                                 return 'COMMIT_TYPE';
+"msg:"                                  return 'COMMIT_MSG';
+"NORMAL"                                return 'NORMAL';
+"REVERSE"                               return 'REVERSE';
+"HIGHLIGHT"                             return 'HIGHLIGHT';
+"tag:"                                  return 'COMMIT_TAG';
+"branch"                                return 'BRANCH';
+"order:"                                return 'ORDER';
+"merge"                                 return 'MERGE';
+// "reset"                                 return 'RESET';
+"checkout"                              return 'CHECKOUT';
+"LR"                                    return 'DIR';
+"BT"                                    return 'DIR';
+":"                                     return ':';
+"^"                                     return 'CARET'
+"options"\r?\n                          this.begin("options"); //
+<options>[ \r\n\t]+"end"                this.popState();       // not used anymore in the renderer, fixed for backward compatibility
+<options>[\s\S]+(?=[ \r\n\t]+"end")     return 'OPT';          //
+["]                                     this.begin("string");
+<string>["]                             this.popState();
+<string>[^"]*                           return 'STR';
+[0-9]+                                  return 'NUM';
+[a-zA-Z][-_\./a-zA-Z0-9]*[-_a-zA-Z0-9]  return 'ID';
+<<EOF>>                                 return 'EOF';
 
 /lex
 
@@ -89,11 +101,24 @@ line
 
 statement
     : commitStatement
-    | BRANCH ID {yy.branch($2)}
+    | mergeStatement
+    | acc_title acc_title_value  { $$=$2.trim();yy.setTitle($$); }
+    | acc_descr acc_descr_value  { $$=$2.trim();yy.setAccDescription($$); }
+    | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); }  | section {yy.addSection($1.substr(8));$$=$1.substr(8);}
+    | branchStatement
     | CHECKOUT ID {yy.checkout($2)}
-    | MERGE ID {yy.merge($2)}
     // | RESET reset_arg {yy.reset($2)}
     ;
+branchStatement
+    : BRANCH ID {yy.branch($2)}
+    | BRANCH ID ORDER NUM {yy.branch($2, $4)}
+    ;
+
+mergeStatement
+    : MERGE ID {yy.merge($2)}
+    | MERGE ID COMMIT_TAG STR {yy.merge($2, $4)}
+    ;
+
 commitStatement
     : COMMIT commit_arg {yy.commit($2)}
     | COMMIT COMMIT_TAG STR {yy.commit('','',yy.commitType.NORMAL,$3)}

src/diagrams/pie/parser/pie.jison

@@ -8,12 +8,13 @@
 
 %x string
 %x title
-%x accDescription
 %x open_directive
 %x type_directive
 %x arg_directive
 %x close_directive
-
+%x acc_title
+%x acc_descr
+%x acc_descr_multiline
 %%
 \%\%\{                                                          { this.begin('open_directive'); return 'open_directive'; }
 <open_directive>((?:(?!\}\%\%)[^:.])*)                          { this.begin('type_directive'); return 'type_directive'; }
@@ -27,8 +28,14 @@
 [\s]+ 		                                                      /* ignore */
 title                                                           { this.begin("title");return 'title'; }
 <title>(?!\n|;|#)*[^\n]*                                        { this.popState(); return "title_value"; }
-accDescription                                                  { this.begin("accDescription");return 'accDescription'; }
-<accDescription>(?!\n|;|#)*[^\n]*                               { this.popState(); return "description_value"; }
+
+accTitle\s*":"\s*                                               { this.begin("acc_title");return 'acc_title'; }
+<acc_title>(?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_title_value"; }
+accDescr\s*":"\s*                                               { this.begin("acc_descr");return 'acc_descr'; }
+<acc_descr>(?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_descr_value"; }
+accDescr\s*"{"\s*                                { this.begin("acc_descr_multiline");}
+<acc_descr_multiline>[\}]                       { this.popState(); }
+<acc_descr_multiline>[^\}]*                     return "acc_descr_multiline_value";
 ["]                                                             { this.begin("string"); }
 <string>["]                                                     { this.popState(); }
 <string>[^"]*                                                   { return "txt"; }
@@ -62,8 +69,10 @@ line
 statement
   :
 	| txt value          { yy.addSection($1,yy.cleanupValue($2)); }
-	| title title_value  { $$=$2.trim();yy.setTitle($$); }
-  | accDescription description_value  { $$=$2.trim();yy.setAccDescription($$); }
+	| title title_value  { $$=$2.trim();yy.setPieTitle($$); }
+  | acc_title acc_title_value  { $$=$2.trim();yy.setTitle($$); }
+  | acc_descr acc_descr_value  { $$=$2.trim();yy.setAccDescription($$); }
+  | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); }  | section {yy.addSection($1.substr(8));$$=$1.substr(8);}
 	| directive
 	;
 

src/diagrams/pie/parser/pie.spec.js

@@ -56,20 +56,20 @@ pie
 "bat" : 40
 `);
     const sections = pieDb.getSections();
-    const title = pieDb.getTitle();
+    const title = pieDb.getPieTitle();
     const section1 = sections['ash'];
     expect(section1).toBe(60);
     expect(title).toBe('a 60/40 pie');
   });
 
-  it('should handle simple pie without an acc description', function () {
+  it('should handle simple pie without an acc description  (accDescr)', function () {
     const res = pie.parser.parse(`pie title a neat chart
 "ash" : 60
 "bat" : 40
 `);
 
     const sections = pieDb.getSections();
-    const title = pieDb.getTitle();
+    const title = pieDb.getPieTitle();
     const description = pieDb.getAccDescription();
     const section1 = sections['ash'];
     expect(section1).toBe(60);
@@ -77,21 +77,39 @@ pie
     expect(description).toBe('');
   });
 
-  it('should handle simple pie with an acc description', function () {
+  it('should handle simple pie with an acc description (accDescr)', function () {
     const res = pie.parser.parse(`pie title a neat chart
-    accDescription a neat description
+    accDescr: a neat description
 "ash" : 60
 "bat" : 40
 `);
 
     const sections = pieDb.getSections();
-    const title = pieDb.getTitle();
+    const title = pieDb.getPieTitle();
     const description = pieDb.getAccDescription();
     const section1 = sections['ash'];
     expect(section1).toBe(60);
     expect(title).toBe('a neat chart');
     expect(description).toBe('a neat description');
   });
+  it('should handle simple pie with a multiline acc description (accDescr)', function () {
+    const res = pie.parser.parse(`pie title a neat chart
+    accDescr {
+      a neat description
+      on multiple lines
+    }
+"ash" : 60
+"bat" : 40
+`);
+
+    const sections = pieDb.getSections();
+    const title = pieDb.getPieTitle();
+    const description = pieDb.getAccDescription();
+    const section1 = sections['ash'];
+    expect(section1).toBe(60);
+    expect(title).toBe('a neat chart');
+    expect(description).toBe('a neat description\non multiple lines');
+  });
 
   it('should handle simple pie with positive decimal', function () {
     const res = pie.parser.parse(`pie

src/diagrams/pie/pieDb.js

@@ -2,7 +2,13 @@ import { log } from '../../logger';
 import mermaidAPI from '../../mermaidAPI';
 import * as configApi from '../../config';
 import common from '../common/common';
-const sanitizeText = (txt) => common.sanitizeText(txt, configApi.getConfig());
+import {
+  setTitle,
+  getTitle,
+  getAccDescription,
+  setAccDescription,
+  clear as commonClear,
+} from '../../commonDb';
 
 let sections = {};
 let title = '';
@@ -22,10 +28,6 @@ const addSection = function (id, value) {
 };
 const getSections = () => sections;
 
-const setTitle = function (txt) {
-  title = common.sanitizeText(txt, configApi.getConfig());
-};
-
 const setShowData = function (toggle) {
   showData = toggle;
 };
@@ -34,18 +36,6 @@ const getShowData = function () {
   return showData;
 };
 
-const getTitle = function () {
-  return title;
-};
-
-const setAccDescription = function (txt) {
-  description = common.sanitizeText(txt, configApi.getConfig());
-};
-
-const getAccDescription = function () {
-  return description;
-};
-
 const cleanupValue = function (value) {
   if (value.substring(0, 1) === ':') {
     value = value.substring(1).trim();
@@ -59,10 +49,17 @@ const clear = function () {
   sections = {};
   title = '';
   showData = false;
+  commonClear();
+};
+
+export const setPieTitle = function (txt) {
+  let sanitizedText = common.sanitizeText(txt, configApi.getConfig());
+  title = sanitizedText;
+};
+
+export const getPieTitle = function () {
+  return title;
 };
-// export const parseError = (err, hash) => {
-//   global.mermaidAPI.parseError(err, hash)
-// }
 
 export default {
   parseDirective,
@@ -73,9 +70,10 @@ export default {
   clear,
   setTitle,
   getTitle,
+  setPieTitle,
+  getPieTitle,
   setShowData,
   getShowData,
   getAccDescription,
   setAccDescription,
-  // parseError
 };

src/diagrams/pie/pieRenderer.js

@@ -136,7 +136,7 @@ export const draw = (txt, id) => {
 
     svg
       .append('text')
-      .text(parser.yy.getTitle())
+      .text(parser.yy.getPieTitle())
       .attr('x', 0)
       .attr('y', -(height - 50) / 2)
       .attr('class', 'pieTitleText');

src/diagrams/requirement/parser/requirementDiagram.jison

@@ -13,7 +13,9 @@
 %x type_directive
 %x arg_directive
 %x close_directive
-
+%x acc_title
+%x acc_descr
+%x acc_descr_multiline
 %%
 \%\%\{                                                          { this.begin('open_directive'); return 'open_directive'; }
 <open_directive>((?:(?!\}\%\%)[^:.])*)                          { this.begin('type_directive'); return 'type_directive'; }
@@ -21,6 +23,14 @@
 <type_directive,arg_directive>\}\%\%                            { this.popState(); this.popState(); return 'close_directive'; }
 <arg_directive>((?:(?!\}\%\%).|\n)*)                            return 'arg_directive';
 
+"title"\s[^#\n;]+       return 'title';
+accTitle\s*":"\s*                                               { this.begin("acc_title");return 'acc_title'; }
+<acc_title>(?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_title_value"; }
+accDescr\s*":"\s*                                               { this.begin("acc_descr");return 'acc_descr'; }
+<acc_descr>(?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_descr_value"; }
+accDescr\s*"{"\s*                                { this.begin("acc_descr_multiline");}
+<acc_descr_multiline>[\}]                       { this.popState(); }
+<acc_descr_multiline>[^\}]*                     return "acc_descr_multiline_value";
 (\r?\n)+                               return 'NEWLINE';
 \s+                                    /* skip all whitespace */
 \#[^\n]*                               /* skip comments */
@@ -90,8 +100,11 @@ start
 
 directive
   : openDirective typeDirective closeDirective
-  | openDirective typeDirective ':' argDirective closeDirective;
-
+  | openDirective typeDirective ':' argDirective closeDirective
+  | acc_title acc_title_value  { $$=$2.trim();yy.setTitle($$); }
+  | acc_descr acc_descr_value  { $$=$2.trim();yy.setAccDescription($$); }
+  | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); }
+  ;
 openDirective
   : open_directive { yy.parseDirective('%%{', 'open_directive'); };
 
@@ -191,6 +204,7 @@ relationship
   | TRACES
       { $$=yy.Relationships.TRACES;};
 
+
 requirementName: unqString | qString;
 id : unqString | qString;
 text : unqString | qString;

src/diagrams/requirement/parser/requirementDiagram.spec.js

@@ -72,6 +72,45 @@ describe('when parsing requirement diagram it...', function () {
     expect(Object.keys(requirementDb.getRelationships()).length).toBe(0);
   });
 
+  it('will use a accessibility title and description (accDescr)', function () {
+    const expectedTitle = 'test title';
+    const expectedAccDescription = 'my chart description';
+
+    const doc = `requirementDiagram
+      accTitle: ${expectedTitle}
+      accDescr: ${expectedAccDescription}
+      element test_name {
+      type: test_type
+      docref: test_ref
+      }`;
+
+    reqDiagram.parser.parse(doc);
+
+    expect(requirementDb.getTitle()).toBe(expectedTitle);
+    expect(requirementDb.getAccDescription()).toBe(expectedAccDescription);
+  });
+
+  it('will use a accessibility title and multiline description (accDescr)', function () {
+    const expectedTitle = 'test title';
+    const expectedAccDescription = `my chart description
+line 2`;
+
+    const doc = `requirementDiagram
+      accTitle: ${expectedTitle}
+      accDescr {
+        ${expectedAccDescription}
+      }
+      element test_name {
+      type: test_type
+      docref: test_ref
+      }`;
+
+    reqDiagram.parser.parse(doc);
+
+    expect(requirementDb.getTitle()).toBe(expectedTitle);
+    expect(requirementDb.getAccDescription()).toBe(expectedAccDescription);
+  });
+
   it('will accept full relationship definition', function () {
     const expectedSrc = 'a';
     const expectedDest = 'b';

src/diagrams/requirement/requirementDb.js

@@ -1,12 +1,24 @@
 import * as configApi from '../../config';
 import { log } from '../../logger';
 import mermaidAPI from '../../mermaidAPI';
+import common from '../common/common';
+import {
+  setTitle,
+  getTitle,
+  getAccDescription,
+  setAccDescription,
+  clear as commonClear,
+} from '../../commonDb';
 
 let relations = [];
 let latestRequirement = {};
 let requirements = {};
 let latestElement = {};
 let elements = {};
+let title = '';
+let accDescription = '';
+
+const sanitizeText = (txt) => common.sanitizeText(txt, configApi.getConfig());
 
 const RequirementType = {
   REQUIREMENT: 'Requirement',
@@ -132,6 +144,7 @@ const clear = () => {
   requirements = {};
   latestElement = {};
   elements = {};
+  commonClear();
 };
 
 export default {
@@ -149,6 +162,10 @@ export default {
   setNewReqText,
   setNewReqRisk,
   setNewReqVerifyMethod,
+  setTitle,
+  getTitle,
+  setAccDescription,
+  getAccDescription,
 
   addElement,
   getElements,

src/diagrams/requirement/requirementRenderer.js

@@ -9,6 +9,7 @@ import { parser } from './parser/requirementDiagram';
 import requirementDb from './requirementDb';
 import markers from './requirementMarkers';
 import { getConfig } from '../../config';
+import addSVGAccessibilityFields from '../../accessibility';
 
 const conf = {};
 let relCnt = 0;
@@ -377,6 +378,8 @@ export const draw = (text, id) => {
   configureSvgSize(svg, height, width, conf.useMaxWidth);
 
   svg.attr('viewBox', `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`);
+  // Adds title and description to the requirements diagram
+  addSVGAccessibilityFields(parser.yy, svg, id);
 };
 
 export default {

src/diagrams/sequence/parser/sequenceDiagram.jison

@@ -18,7 +18,9 @@
 
 // Directive states
 %x open_directive type_directive arg_directive
-
+%x acc_title
+%x acc_descr
+%x acc_descr_multiline
 %%
 
 \%\%\{                                                          { this.begin('open_directive'); return 'open_directive'; }
@@ -32,6 +34,7 @@
 <INITIAL,ID,ALIAS,LINE,arg_directive,type_directive,open_directive>\#[^\n]*   /* skip comments */
 \%%(?!\{)[^\n]*                                                 /* skip comments */
 [^\}]\%\%[^\n]*                                                 /* skip comments */
+[0-9]+(?=[ \n]+)       											return 'NUM';
 "participant"                                                   { this.begin('ID'); return 'participant'; }
 "actor"                                                   	{ this.begin('ID'); return 'participant_actor'; }
 <ID>[^\->:\n,;]+?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$)           { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; }
@@ -58,9 +61,16 @@
 "deactivate"                                                    { this.begin('ID'); return 'deactivate'; }
 "title"\s[^#\n;]+                                               return 'title';
 "title:"\s[^#\n;]+                                              return 'legacy_title';
-"accDescription"\s[^#\n;]+       				return 'accDescription';
+accTitle\s*":"\s*                                               { this.begin("acc_title");return 'acc_title'; }
+<acc_title>(?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_title_value"; }
+accDescr\s*":"\s*                                               { this.begin("acc_descr");return 'acc_descr'; }
+<acc_descr>(?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_descr_value"; }
+accDescr\s*"{"\s*                                { this.begin("acc_descr_multiline");}
+<acc_descr_multiline>[\}]                       { this.popState(); }
+<acc_descr_multiline>[^\}]*                     return "acc_descr_multiline_value";
 "sequenceDiagram"                                               return 'SD';
 "autonumber"                                                    return 'autonumber';
+"off"															return 'off';
 ","                                                             return ',';
 ";"                                                             return 'NEWLINE';
 [^\+\->:\n,;]+((?!(\-x|\-\-x|\-\)|\-\-\)))[\-]*[^\+\->:\n,;]+)*             { yytext = yytext.trim(); return 'ACTOR'; }
@@ -115,7 +125,10 @@ statement
 	| 'participant_actor' actor 'AS' restOfLine 'NEWLINE' {$2.type='addActor';$2.description=yy.parseMessage($4); $$=$2;}
 	| 'participant_actor' actor 'NEWLINE' {$2.type='addActor'; $$=$2;}
 	| signal 'NEWLINE'
-	| autonumber {yy.enableSequenceNumbers()}
+	| autonumber NUM NUM 'NEWLINE' { $$= {type:'sequenceIndex',sequenceIndex: Number($2), sequenceIndexStep:Number($3), sequenceVisible:true, signalType:yy.LINETYPE.AUTONUMBER};}
+	| autonumber NUM 'NEWLINE' { $$ = {type:'sequenceIndex',sequenceIndex: Number($2), sequenceIndexStep:1, sequenceVisible:true, signalType:yy.LINETYPE.AUTONUMBER};}
+	| autonumber off 'NEWLINE' { $$ = {type:'sequenceIndex', sequenceVisible:false, signalType:yy.LINETYPE.AUTONUMBER};}
+	| autonumber 'NEWLINE'  {$$ = {type:'sequenceIndex', sequenceVisible:true, signalType:yy.LINETYPE.AUTONUMBER}; }
 	| 'activate' actor 'NEWLINE' {$$={type: 'activeStart', signalType: yy.LINETYPE.ACTIVE_START, actor: $2};}
 	| 'deactivate' actor 'NEWLINE' {$$={type: 'activeEnd', signalType: yy.LINETYPE.ACTIVE_END, actor: $2};}
 	| note_statement 'NEWLINE'
@@ -123,9 +136,11 @@ statement
 	| link_statement 'NEWLINE'
 	| properties_statement 'NEWLINE'
 	| details_statement 'NEWLINE'
-	| title {yy.setTitle($1.substring(6));$$=$1.substring(6);}
-	| legacy_title {yy.setTitle($1.substring(7));$$=$1.substring(7);}
-	| accDescription {yy.setAccDescription($1.substring(15));$$=$1.substring(15);}
+	| title {yy.setDiagramTitle($1.substring(6));$$=$1.substring(6);}
+	| legacy_title {yy.setDiagramTitle($1.substring(7));$$=$1.substring(7);}
+  | acc_title acc_title_value  { $$=$2.trim();yy.setTitle($$); }
+  | acc_descr acc_descr_value  { $$=$2.trim();yy.setAccDescription($$); }
+  | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); }
 	| 'loop' restOfLine document end
 	{
 		$3.unshift({type: 'loopStart', loopText:yy.parseMessage($2), signalType: yy.LINETYPE.LOOP_START});

src/diagrams/sequence/sequenceDb.js

@@ -2,12 +2,19 @@ import mermaidAPI from '../../mermaidAPI';
 import * as configApi from '../../config';
 import { log } from '../../logger';
 import { sanitizeText } from '../common/common';
+import {
+  setTitle,
+  getTitle,
+  getAccDescription,
+  setAccDescription,
+  clear as commonClear,
+} from '../../commonDb';
 
 let prevActor = undefined;
 let actors = {};
 let messages = [];
 const notes = [];
-let title = '';
+let diagramTitle = '';
 let description = '';
 let sequenceNumbersEnabled = false;
 let wrapEnabled = false;
@@ -119,12 +126,12 @@ export const getActor = function (id) {
 export const getActorKeys = function () {
   return Object.keys(actors);
 };
-export const getTitle = function () {
-  return title;
-};
 export const enableSequenceNumbers = function () {
   sequenceNumbersEnabled = true;
 };
+export const disableSequenceNumbers = function () {
+  sequenceNumbersEnabled = false;
+};
 export const showSequenceNumbers = () => sequenceNumbersEnabled;
 
 export const setWrap = function (wrapSetting) {
@@ -137,6 +144,8 @@ export const clear = function () {
   actors = {};
   messages = [];
   sequenceNumbersEnabled = false;
+  diagramTitle = '';
+  commonClear();
 };
 
 export const parseMessage = function (str) {
@@ -178,6 +187,7 @@ export const LINETYPE = {
   RECT_END: 23,
   SOLID_POINT: 24,
   DOTTED_POINT: 25,
+  AUTONUMBER: 26,
 };
 
 export const ARROWTYPE = {
@@ -321,9 +331,13 @@ export const getActorProperty = function (actor, key) {
   return undefined;
 };
 
-export const setTitle = function (txt) {
+export const setDiagramTitle = function (txt) {
   let sanitizedText = sanitizeText(txt, configApi.getConfig());
-  title = sanitizedText;
+  diagramTitle = sanitizedText;
+};
+
+export const getDiagramTitle = function () {
+  return diagramTitle;
 };
 
 export const apply = function (param) {
@@ -333,6 +347,19 @@ export const apply = function (param) {
     });
   } else {
     switch (param.type) {
+      case 'sequenceIndex':
+        messages.push({
+          from: undefined,
+          to: undefined,
+          message: {
+            start: param.sequenceIndex,
+            step: param.sequenceIndexStep,
+            visible: param.sequenceVisible,
+          },
+          wrap: false,
+          type: param.signalType,
+        });
+        break;
       case 'addParticipant':
         addActor(param.actor, param.actor, param.description, 'participant');
         break;
@@ -406,15 +433,6 @@ export const apply = function (param) {
   }
 };
 
-const setAccDescription = function (description_lex) {
-  let sanitizedText = sanitizeText(description_lex, configApi.getConfig());
-  description = sanitizedText;
-};
-
-const getAccDescription = function () {
-  return description;
-};
-
 export default {
   addActor,
   addMessage,
@@ -425,6 +443,7 @@ export default {
   autoWrap,
   setWrap,
   enableSequenceNumbers,
+  disableSequenceNumbers,
   showSequenceNumbers,
   getMessages,
   getActors,
@@ -432,6 +451,7 @@ export default {
   getActorKeys,
   getActorProperty,
   getTitle,
+  getDiagramTitle,
   parseDirective,
   getConfig: () => configApi.getConfig().sequence,
   clear,
@@ -441,6 +461,7 @@ export default {
   PLACEMENT,
   addNote,
   setTitle,
+  setDiagramTitle,
   apply,
   setAccDescription,
   getAccDescription,

src/diagrams/sequence/sequenceDiagram.spec.js

@@ -21,7 +21,7 @@ describe('when parsing a sequenceDiagram', function () {
     parser.yy = sequenceDb;
     parser.yy.clear();
   });
-  it('it should handle a sequenceDiagram definition', function () {
+  it('should handle a sequenceDiagram definition', function () {
     const str = `
 sequenceDiagram
 Alice->Bob:Hello Bob, how are you?
@@ -47,6 +47,7 @@ Note right of Bob: Bob thinks
 Bob-->Alice: I am good thanks!`;
 
     mermaidAPI.parse(str);
+    renderer.draw(str, 'tst'); // needs to be rendered for the correct value of visibility autonumbers
     expect(parser.yy.showSequenceNumbers()).toBe(false);
   });
   it('it should show sequence numbers when autonumber is enabled', function () {
@@ -58,6 +59,7 @@ Note right of Bob: Bob thinks
 Bob-->Alice: I am good thanks!`;
 
     mermaidAPI.parse(str);
+    renderer.draw(str, 'tst'); // needs to be rendered for the correct value of visibility autonumbers
     expect(parser.yy.showSequenceNumbers()).toBe(true);
   });
   it('it should handle a sequenceDiagram definition with a title:', function () {
@@ -75,7 +77,7 @@ Bob-->Alice: I am good thanks!`;
 
     expect(parser.yy.getAccDescription()).toBe('');
     const messages = parser.yy.getMessages();
-    const title = parser.yy.getTitle();
+    const title = parser.yy.getDiagramTitle();
 
     expect(messages.length).toBe(3);
     expect(messages[0].from).toBe('Alice');
@@ -98,7 +100,7 @@ Bob-->Alice: I am good thanks!`;
 
     expect(parser.yy.getAccDescription()).toBe('');
     const messages = parser.yy.getMessages();
-    const title = parser.yy.getTitle();
+    const title = parser.yy.getDiagramTitle();
 
     expect(messages.length).toBe(3);
     expect(messages[0].from).toBe('Alice');
@@ -106,26 +108,36 @@ Bob-->Alice: I am good thanks!`;
     expect(title).toBe('Diagram Title');
   });
 
-  it('it should handle a sequenceDiagram definition with a accDescription', function () {
+  it('it should handle a sequenceDiagram definition with a accessibility title and description (accDescr)', function () {
     const str = `
 sequenceDiagram
-accDescription Accessibility Description
+title: Diagram Title
+accTitle: This is the title
+accDescr: Accessibility Description
 Alice->Bob:Hello Bob, how are you?
-Note right of Bob: Bob thinks
-Bob-->Alice: I am good thanks!`;
+`;
 
     mermaidAPI.parse(str);
-    const actors = parser.yy.getActors();
-    expect(actors.Alice.description).toBe('Alice');
-    actors.Bob.description = 'Bob';
-
+    expect(parser.yy.getDiagramTitle()).toBe('Diagram Title');
+    expect(parser.yy.getTitle()).toBe('This is the title');
     expect(parser.yy.getAccDescription()).toBe('Accessibility Description');
     const messages = parser.yy.getMessages();
-    const title = parser.yy.getTitle();
+  });
+  it('it should handle a sequenceDiagram definition with a accessibility title and multiline description (accDescr)', function () {
+    const str = `
+sequenceDiagram
+accTitle: This is the title
+accDescr {
+Accessibility
+Description
+}
+Alice->Bob:Hello Bob, how are you?
+`;
 
-    expect(messages.length).toBe(3);
-    expect(messages[0].from).toBe('Alice');
-    expect(messages[2].from).toBe('Bob');
+    mermaidAPI.parse(str);
+    expect(parser.yy.getTitle()).toBe('This is the title');
+    expect(parser.yy.getAccDescription()).toBe('Accessibility\nDescription');
+    const messages = parser.yy.getMessages();
   });
 
   it('it should space in actor names', function () {
@@ -1676,6 +1688,7 @@ Note right of Bob: Bob thinks
 Bob-->Alice: I am good thanks!`;
 
     mermaidAPI.parse(str1);
+    renderer.draw(str1, 'tst'); // needs to be rendered for the correct value of visibility autonumbers
     expect(parser.yy.showSequenceNumbers()).toBe(true);
 
     const str2 = `
@@ -1685,6 +1698,7 @@ Note right of Bob: Bob thinks
 Bob-->Alice: I am good thanks!`;
 
     mermaidAPI.parse(str2);
+    renderer.draw(str2, 'tst');
     expect(parser.yy.showSequenceNumbers()).toBe(false);
   });
 });

src/diagrams/sequence/sequenceRenderer.js

@@ -272,20 +272,65 @@ const actorFont = (cnf) => {
 };
 
 /**
- * Draws a message
+ * Process a message by adding its dimensions to the bound. It returns the Y coordinate of the
+ * message so it can be drawn later. We do not draw the message at this point so the arrowhead can
+ * be on top of the activation box.
  *
- * @param {any} g - The parent of the message element
+ * @param {any} diagram - The parent of the message element
  * @param {any} msgModel - The model containing fields describing a message
+ * @returns {number} LineStarty - The Y coordinate at which the message line starts
  */
-const drawMessage = function (g, msgModel) {
+const boundMessage = function (diagram, msgModel) {
   bounds.bumpVerticalPos(10);
-  const { startx, stopx, starty, message, type, sequenceIndex } = msgModel;
+  const { startx, stopx, message } = msgModel;
   const lines = common.splitBreaks(message).length;
   let textDims = utils.calculateTextDimensions(message, messageFont(conf));
   const lineHeight = textDims.height / lines;
   msgModel.height += lineHeight;
 
   bounds.bumpVerticalPos(lineHeight);
+
+  let lineStarty;
+  let totalOffset = textDims.height - 10;
+  let textWidth = textDims.width;
+
+  if (startx === stopx) {
+    lineStarty = bounds.getVerticalPos() + totalOffset;
+    if (!conf.rightAngles) {
+      totalOffset += conf.boxMargin;
+      lineStarty = bounds.getVerticalPos() + totalOffset;
+    }
+    totalOffset += 30;
+    const dx = Math.max(textWidth / 2, conf.width / 2);
+    bounds.insert(
+      startx - dx,
+      bounds.getVerticalPos() - 10 + totalOffset,
+      stopx + dx,
+      bounds.getVerticalPos() + 30 + totalOffset
+    );
+  } else {
+    totalOffset += conf.boxMargin;
+    lineStarty = bounds.getVerticalPos() + totalOffset;
+    bounds.insert(startx, lineStarty - 10, stopx, lineStarty);
+  }
+  bounds.bumpVerticalPos(totalOffset);
+  msgModel.height += totalOffset;
+  msgModel.stopy = msgModel.starty + msgModel.height;
+  bounds.insert(msgModel.fromBounds, msgModel.starty, msgModel.toBounds, msgModel.stopy);
+
+  return lineStarty;
+};
+
+/**
+ * Draws a message. Note that the bounds have previously been updated by boundMessage.
+ *
+ * @param {any} diagram - The parent of the message element
+ * @param {any} msgModel - The model containing fields describing a message
+ * @param {float} lineStarty - The Y coordinate at which the message line starts
+ */
+const drawMessage = function (diagram, msgModel, lineStarty) {
+  const { startx, stopx, starty, message, type, sequenceIndex, sequenceVisible } = msgModel;
+  let textDims = utils.calculateTextDimensions(message, messageFont(conf));
   const textObj = svgDraw.getTextObj();
   textObj.x = startx;
   textObj.y = starty + 10;
@@ -301,17 +346,14 @@ const drawMessage = function (g, msgModel) {
   textObj.textMargin = conf.wrapPadding;
   textObj.tspan = false;
 
-  drawText(g, textObj);
-
-  let totalOffset = textDims.height - 10;
+  drawText(diagram, textObj);
 
   let textWidth = textDims.width;
 
-  let line, lineStarty;
+  let line;
   if (startx === stopx) {
-    lineStarty = bounds.getVerticalPos() + totalOffset;
     if (conf.rightAngles) {
-      line = g
+      line = diagram
         .append('path')
         .attr(
           'd',
@@ -320,10 +362,7 @@ const drawMessage = function (g, msgModel) {
           } H ${startx}`
         );
     } else {
-      totalOffset += conf.boxMargin;
-
-      lineStarty = bounds.getVerticalPos() + totalOffset;
-      line = g
+      line = diagram
         .append('path')
         .attr(
           'd',
@@ -345,24 +384,12 @@ const drawMessage = function (g, msgModel) {
             (lineStarty + 20)
         );
     }
-
-    totalOffset += 30;
-    const dx = Math.max(textWidth / 2, conf.width / 2);
-    bounds.insert(
-      startx - dx,
-      bounds.getVerticalPos() - 10 + totalOffset,
-      stopx + dx,
-      bounds.getVerticalPos() + 30 + totalOffset
-    );
   } else {
-    totalOffset += conf.boxMargin;
-    lineStarty = bounds.getVerticalPos() + totalOffset;
-    line = g.append('line');
+    line = diagram.append('line');
     line.attr('x1', startx);
     line.attr('y1', lineStarty);
     line.attr('x2', stopx);
     line.attr('y2', lineStarty);
-    bounds.insert(startx, lineStarty - 10, stopx, lineStarty);
   }
   // Make an SVG Container
   // Draw the line
@@ -405,9 +432,10 @@ const drawMessage = function (g, msgModel) {
   }
 
   // add node number
-  if (sequenceDb.showSequenceNumbers() || conf.showSequenceNumbers) {
+  if (sequenceVisible || conf.showSequenceNumbers) {
     line.attr('marker-start', 'url(' + url + '#sequencenumber)');
-    g.append('text')
+    diagram
+      .append('text')
       .attr('x', startx)
       .attr('y', lineStarty + 4)
       .attr('font-family', 'sans-serif')
@@ -417,13 +445,25 @@ const drawMessage = function (g, msgModel) {
       .attr('class', 'sequenceNumber')
       .text(sequenceIndex);
   }
-  bounds.bumpVerticalPos(totalOffset);
-  msgModel.height += totalOffset;
-  msgModel.stopy = msgModel.starty + msgModel.height;
-  bounds.insert(msgModel.fromBounds, msgModel.starty, msgModel.toBounds, msgModel.stopy);
 };
 
-export const drawActors = function (diagram, actors, actorKeys, verticalPos) {
+export const drawActors = function (
+  diagram,
+  actors,
+  actorKeys,
+  verticalPos,
+  configuration,
+  messages
+) {
+  if (configuration.hideUnusedParticipants === true) {
+    const newActors = new Set();
+    messages.forEach((message) => {
+      newActors.add(message.from);
+      newActors.add(message.to);
+    });
+    actorKeys = actorKeys.filter((actorKey) => newActors.has(actorKey));
+  }
+
   // Draw the actors
   let prevWidth = 0;
   let prevMargin = 0;
@@ -572,7 +612,7 @@ export const draw = function (text, id) {
   const actors = parser.yy.getActors();
   const actorKeys = parser.yy.getActorKeys();
   const messages = parser.yy.getMessages();
-  const title = parser.yy.getTitle();
+  const title = parser.yy.getDiagramTitle();
 
   const maxMessageWidthPerActor = getMaxMessageWidthPerActor(actors, messages);
   conf.height = calculateActorMargins(actors, maxMessageWidthPerActor);
@@ -581,7 +621,7 @@ export const draw = function (text, id) {
   svgDraw.insertDatabaseIcon(diagram);
   svgDraw.insertClockIcon(diagram);
 
-  drawActors(diagram, actors, actorKeys, 0);
+  drawActors(diagram, actors, actorKeys, 0, conf, messages);
   const loopWidths = calculateLoopBounds(messages, actors, maxMessageWidthPerActor);
 
   // The arrow head definition is attached to the svg once
@@ -613,6 +653,8 @@ export const draw = function (text, id) {
 
   // Draw the messages/signals
   let sequenceIndex = 1;
+  let sequenceIndexStep = 1;
+  let messagesToDraw = Array();
   messages.forEach(function (msg) {
     let loopModel, noteModel, msgModel;
 
@@ -716,13 +758,21 @@ export const draw = function (text, id) {
         bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos());
         bounds.models.addLoop(loopModel);
         break;
+      case parser.yy.LINETYPE.AUTONUMBER:
+        sequenceIndex = msg.message.start || sequenceIndex;
+        sequenceIndexStep = msg.message.step || sequenceIndexStep;
+        if (msg.message.visible) parser.yy.enableSequenceNumbers();
+        else parser.yy.disableSequenceNumbers();
+        break;
       default:
         try {
           // lastMsg = msg
           msgModel = msg.msgModel;
           msgModel.starty = bounds.getVerticalPos();
           msgModel.sequenceIndex = sequenceIndex;
-          drawMessage(diagram, msgModel);
+          msgModel.sequenceVisible = parser.yy.showSequenceNumbers();
+          let lineStarty = boundMessage(diagram, msgModel);
+          messagesToDraw.push({ messageModel: msgModel, lineStarty: lineStarty });
           bounds.models.addMessage(msgModel);
         } catch (e) {
           log.error('error while drawing message', e);
@@ -742,14 +792,16 @@ export const draw = function (text, id) {
         parser.yy.LINETYPE.DOTTED_POINT,
       ].includes(msg.type)
     ) {
-      sequenceIndex++;
+      sequenceIndex = sequenceIndex + sequenceIndexStep;
     }
   });
 
+  messagesToDraw.forEach((e) => drawMessage(diagram, e.messageModel, e.lineStarty));
+
   if (conf.mirrorActors) {
     // Draw actors below diagram
     bounds.bumpVerticalPos(conf.boxMargin * 2);
-    drawActors(diagram, actors, actorKeys, bounds.getVerticalPos());
+    drawActors(diagram, actors, actorKeys, bounds.getVerticalPos(), conf, messages);
     bounds.bumpVerticalPos(conf.boxMargin);
     fixLifeLineHeights(diagram, bounds.getVerticalPos());
   }

src/diagrams/state/parser/stateDiagram.jison

@@ -20,6 +20,9 @@
 %x STATE_ID
 %x ALIAS
 %x SCALE
+%x acc_title
+%x acc_descr
+%x acc_descr_multiline
 %x NOTE
 %x NOTE_ID
 %x NOTE_TEXT
@@ -58,6 +61,14 @@
 <SCALE>\d+            return 'WIDTH';
 <SCALE>\s+"width"     {this.popState();}
 
+accTitle\s*":"\s*                                               { this.begin("acc_title");return 'acc_title'; }
+<acc_title>(?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_title_value"; }
+accDescr\s*":"\s*                                               { this.begin("acc_descr");return 'acc_descr'; }
+<acc_descr>(?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_descr_value"; }
+accDescr\s*"{"\s*                                { this.begin("acc_descr_multiline");}
+<acc_descr_multiline>[\}]                       { this.popState(); }
+<acc_descr_multiline>[^\}]*                     return "acc_descr_multiline_value";
+
 <INITIAL,struct>"state"\s+            { /*console.log('Starting STATE zxzx'+yy.getDirection());*/this.pushState('STATE'); }
 <STATE>.*"<<fork>>"                   {this.popState();yytext=yytext.slice(0,-8).trim(); /*console.warn('Fork Fork: ',yytext);*/return 'FORK';}
 <STATE>.*"<<join>>"                   {this.popState();yytext=yytext.slice(0,-8).trim();/*console.warn('Fork Join: ',yytext);*/return 'JOIN';}
@@ -193,7 +204,9 @@ statement
     | note NOTE_TEXT AS ID
   	| directive
     | direction
-    ;
+    | acc_title acc_title_value  { $$=$2.trim();yy.setTitle($$); }
+    | acc_descr acc_descr_value  { $$=$2.trim();yy.setAccDescription($$); }
+    | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); }    ;
 
 directive
     : openDirective typeDirective closeDirective

src/diagrams/state/stateDb.js

@@ -3,6 +3,15 @@ import { generateId } from '../../utils';
 import mermaidAPI from '../../mermaidAPI';
 import common from '../common/common';
 import * as configApi from '../../config';
+import {
+  setTitle,
+  getTitle,
+  getAccDescription,
+  setAccDescription,
+  clear as commonClear,
+} from '../../commonDb';
+
+const sanitizeText = (txt) => common.sanitizeText(txt, configApi.getConfig());
 
 const clone = (o) => JSON.parse(JSON.stringify(o));
 let rootDoc = [];
@@ -115,6 +124,9 @@ let startCnt = 0;
 let endCnt = 0; // eslint-disable-line
 // let stateCnt = 0;
 
+let title = 'State diagram';
+let description = '';
+
 /**
  * Function called by parser when a node definition has been found.
  *
@@ -170,6 +182,7 @@ export const clear = function () {
   startCnt = 0;
   endCnt = 0; // eslint-disable-line
   classes = [];
+  commonClear();
 };
 
 export const getState = function (id) {
@@ -280,4 +293,8 @@ export default {
   getRootDocV2,
   extract,
   trimColon,
+  getTitle,
+  setTitle,
+  getAccDescription,
+  setAccDescription,
 };

src/diagrams/state/stateDiagram-v2.spec.js

@@ -0,0 +1,376 @@
+import { parser } from './parser/stateDiagram';
+import stateDb from './stateDb';
+
+describe('state diagram, ', function () {
+  describe('when parsing an info graph it', function () {
+    beforeEach(function () {
+      parser.yy = stateDb;
+    });
+
+    it('super simple', function () {
+      const str = `
+      stateDiagram-v2
+      [*] --> State1
+      State1 --> [*]
+      `;
+
+      parser.parse(str);
+    });
+    it('simple', function () {
+      const str = `stateDiagram-v2\n
+      State1 : this is another string
+      [*] --> State1
+      State1 --> [*]
+      `;
+
+      parser.parse(str);
+      const description = stateDb.getAccDescription();
+      expect(description).toBe('');
+    });
+    it('simple with accDescription', function () {
+      const str = `stateDiagram-v2\n
+      accDescr: a simple description of the diagram
+      State1 : this is another string
+      [*] --> State1
+      State1 --> [*]
+      `;
+
+      parser.parse(str);
+      const description = stateDb.getAccDescription();
+      expect(description).toBe('a simple description of the diagram');
+    });
+    it('simple with title', function () {
+      const str = `stateDiagram-v2\n
+      accTitle: a simple title of the diagram
+      State1 : this is another string
+      [*] --> State1
+      State1 --> [*]
+      `;
+
+      parser.parse(str);
+      const title = stateDb.getTitle();
+      expect(title).toBe('a simple title of the diagram');
+    });
+    it('simple with directive', function () {
+      const str = `%%{init: {'logLevel': 0 }}%%
+      stateDiagram-v2\n
+      State1 : this is another string
+      [*] --> State1
+      State1 --> [*]
+      `;
+
+      parser.parse(str);
+    });
+    it('should handle relation definitions', function () {
+      const str = `stateDiagram-v2\n
+      [*] --> State1
+      State1 --> [*]
+      State1 : this is a string
+      State1 : this is another string
+
+      State1 --> State2
+      State2 --> [*]
+      `;
+
+      parser.parse(str);
+    });
+    it('hide empty description', function () {
+      const str = `stateDiagram-v2\n
+      hide empty description
+      [*] --> State1
+      State1 --> [*]
+      State1 : this is a string
+      State1 : this is another string
+
+      State1 --> State2
+      State2 --> [*]
+      `;
+
+      parser.parse(str);
+    });
+
+    it('handle "as" in state names', function () {
+      const str = `stateDiagram-v2
+      assemble
+      state assemble
+      `;
+
+      parser.parse(str);
+    });
+    it('handle "as" in state names 1', function () {
+      const str = `stateDiagram-v2
+      assemble
+      state assemble
+      `;
+
+      parser.parse(str);
+    });
+    it('handle "as" in state names 2', function () {
+      const str = `stateDiagram-v2
+      assembleas
+      state assembleas
+      `;
+
+      parser.parse(str);
+    });
+    it('handle "as" in state names 3', function () {
+      const str = `stateDiagram-v2
+      state "as" as as
+      `;
+
+      parser.parse(str);
+    });
+
+    it('scale', function () {
+      const str = `stateDiagram-v2\n
+      scale 350 width
+      [*] --> State1
+      State1 --> [*]
+      State1 : this is a string with - in it
+      State1 : this is another string
+
+      State1 --> State2
+      State2 --> [*]
+      `;
+
+      parser.parse(str);
+    });
+
+    it('description after second state', function () {
+      const str = `stateDiagram-v2\n
+      scale 350 width
+      [*] --> State1 : This is the description with - in it
+      State1 --> [*]
+      `;
+
+      parser.parse(str);
+    });
+    it('shall handle descriptions including minus signs', function () {
+      const str = `stateDiagram-v2\n
+      scale 350 width
+      [*] --> State1 : This is the description +-!
+      State1 --> [*]
+      `;
+
+      parser.parse(str);
+    });
+    it('should handle state statements', function () {
+      const str = `stateDiagram-v2\n
+      state Configuring {
+        [*] --> NewValueSelection
+        NewValueSelection --> NewValuePreview : EvNewValue
+        NewValuePreview --> NewValueSelection : EvNewValueRejected
+        NewValuePreview --> NewValueSelection : EvNewValueSaved1
+      }
+      `;
+
+      parser.parse(str);
+    });
+    it('should handle recursive state definitions', function () {
+      const str = `stateDiagram-v2\n
+      state Configuring {
+        [*] --> NewValueSelection
+        NewValueSelection --> NewValuePreview : EvNewValue
+        NewValuePreview --> NewValueSelection : EvNewValueRejected
+        NewValuePreview --> NewValueSelection : EvNewValueSaved
+
+        state NewValuePreview {
+          State1 --> State2
+        }
+      }
+      `;
+
+      parser.parse(str);
+    });
+    it('should handle multiple recursive state definitions', function () {
+      const str = `stateDiagram-v2\n
+      scale 350 width
+      [*] --> NotShooting
+
+      state NotShooting {
+        [*] --> Idle
+        Idle --> Configuring : EvConfig
+        Configuring --> Idle : EvConfig
+      }
+
+      state Configuring {
+        [*] --> NewValueSelection
+        NewValueSelection --> NewValuePreview : EvNewValue
+        NewValuePreview --> NewValueSelection : EvNewValueRejected
+        NewValuePreview --> NewValueSelection : EvNewValueSaved
+
+        state NewValuePreview {
+          State1 --> State2
+        }
+      }
+      `;
+
+      parser.parse(str);
+    });
+    it('should handle state deifintions with separation of id', function () {
+      const str = `stateDiagram-v2\n
+      state "Long state description" as state1
+      `;
+
+      parser.parse(str);
+    });
+    it('should handle state deifintions with separation of id', function () {
+      const str = `stateDiagram-v2
+      state "Not Shooting State" as NotShooting {
+        state "Idle mode" as Idle
+        state "Configuring mode" as Configuring
+        [*] --> Idle
+        Idle --> Configuring : EvConfig
+        Configuring --> Idle : EvConfig
+      }
+      `;
+
+      parser.parse(str);
+    });
+
+    it('should State definition with quotes', function () {
+      const str = `stateDiagram-v2\n
+      scale 600 width
+
+      [*] --> State1
+      State1 --> State2 : Succeeded
+      State1 --> [*] : Aborted
+      State2 --> State3 : Succeeded
+      State2 --> [*] : Aborted
+      state State3 {
+        state "Accumulate Enough Data\nLong State Name" as long1
+        long1 : Just a test
+        [*] --> long1
+        long1 --> long1 : New Data
+        long1 --> ProcessData : Enough Data
+      }
+      State3 --> State3 : Failed
+      State3 --> [*] : Succeeded / Save Result
+      State3 --> [*] : Aborted
+      `;
+
+      parser.parse(str);
+    });
+    it('should handle fork statements', function () {
+      const str = `stateDiagram-v2\n
+      state fork_state <<fork>>
+      [*] --> fork_state
+      fork_state --> State2
+      fork_state --> State3
+
+      state join_state <<join>>
+      State2 --> join_state
+      State3 --> join_state
+      join_state --> State4
+      State4 --> [*]
+      `;
+
+      parser.parse(str);
+    });
+    it('should handle concurrent state', function () {
+      const str = `stateDiagram-v2\n
+      [*] --> Active
+
+      state Active {
+        [*] --> NumLockOff
+        NumLockOff --> NumLockOn : EvNumLockPressed
+        NumLockOn --> NumLockOff : EvNumLockPressed
+        --
+        [*] --> CapsLockOff
+        CapsLockOff --> CapsLockOn : EvCapsLockPressed
+        CapsLockOn --> CapsLockOff : EvCapsLockPressed
+        --
+        [*] --> ScrollLockOff
+        ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
+        ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
+      }
+      `;
+
+      parser.parse(str);
+    });
+    it('should handle concurrent state', function () {
+      const str = `stateDiagram-v2\n
+      [*] --> Active
+
+      state Active {
+        [*] --> NumLockOff
+        --
+        [*] --> CapsLockOff
+        --
+        [*] --> ScrollLockOff
+      }
+      `;
+
+      parser.parse(str);
+    });
+    // it('should handle arrow directions definitions', function() {
+    //   const str = `stateDiagram-v2\n
+    //     [*] -up-> First
+    //     First -right-> Second
+    //     Second --> Third
+    //     Third -left-> Last
+    //   `;
+
+    //   parser.parse(str);
+    // });
+    it('should handle note statements', function () {
+      const str = `stateDiagram-v2\n
+      [*] --> Active
+      Active --> Inactive
+
+      note left of Active : this is a short<br/>note
+
+      note right of Inactive
+      A note can also
+      be defined on
+      several lines
+      end note
+      `;
+
+      parser.parse(str);
+    });
+    it('should handle multiline notes with different line breaks', function () {
+      const str = `stateDiagram-v2
+      State1
+      note right of State1
+      Line1<br>Line2<br/>Line3<br />Line4<br	/>Line5
+      end note
+      `;
+
+      parser.parse(str);
+    });
+    it('should handle floating notes', function () {
+      const str = `stateDiagram-v2
+      foo: bar
+      note "This is a floating note" as N1
+      `;
+
+      parser.parse(str);
+    });
+    it('should handle floating notes', function () {
+      const str = `stateDiagram-v2\n
+      state foo
+      note "This is a floating note" as N1
+      `;
+
+      parser.parse(str);
+    });
+    it('should handle notes for composit states', function () {
+      const str = `stateDiagram-v2\n
+      [*] --> NotShooting
+
+      state "Not Shooting State" as NotShooting {
+        state "Idle mode" as Idle
+        state "Configuring mode" as Configuring
+        [*] --> Idle
+        Idle --> Configuring : EvConfig
+        Configuring --> Idle : EvConfig
+      }
+
+      note right of NotShooting : This is a note on a composite state
+      `;
+
+      parser.parse(str);
+    });
+  });
+});

src/diagrams/state/stateDiagram.spec.js

@@ -24,6 +24,47 @@ describe('state diagram, ', function () {
       `;
 
       parser.parse(str);
+      const description = stateDb.getAccDescription();
+      expect(description).toBe('');
+    });
+    it('simple with accDescription (accDescr)', function () {
+      const str = `stateDiagram\n
+          accDescr: a simple description of the diagram
+          State1 : this is another string
+          [*] --> State1
+          State1 --> [*]
+      `;
+
+      parser.parse(str);
+      const description = stateDb.getAccDescription();
+      expect(description).toBe('a simple description of the diagram');
+    });
+    it('simple with multiline accDescription (accDescr)', function () {
+      const str = `stateDiagram\n
+          accDescr {
+             a simple description of the diagram
+            using multiple lines
+          }
+          State1 : this is another string
+          [*] --> State1
+          State1 --> [*]
+      `;
+
+      parser.parse(str);
+      const description = stateDb.getAccDescription();
+      expect(description).toBe('a simple description of the diagram\nusing multiple lines');
+    });
+    it('simple with title  (accDescr)', function () {
+      const str = `stateDiagram\n
+          accTitle: a simple title of the diagram
+          State1 : this is another string
+          [*] --> State1
+          State1 --> [*]
+      `;
+
+      parser.parse(str);
+      const title = stateDb.getTitle();
+      expect(title).toBe('a simple title of the diagram');
     });
     it('simple with directive', function () {
       const str = `%%{init: {'logLevel': 0 }}%%
@@ -119,7 +160,7 @@ describe('state diagram, ', function () {
 
       parser.parse(str);
     });
-    it('shall handle descriptions inkluding minus signs', function () {
+    it('shall handle descriptions including minus signs', function () {
       const str = `stateDiagram\n
         scale 350 width
         [*] --> State1 : This is the description +-!

src/diagrams/state/stateRenderer-v2.js

@@ -7,6 +7,7 @@ import { render } from '../../dagre-wrapper/index.js';
 import { log } from '../../logger';
 import { configureSvgSize } from '../../utils';
 import common from '../common/common';
+import addSVGAccessibilityFields from '../../accessibility';
 
 const conf = {};
 export const setConf = function (cnf) {
@@ -336,6 +337,7 @@ export const draw = function (text, id) {
     label.insertBefore(rect, label.firstChild);
     // }
   }
+  addSVGAccessibilityFields(parser.yy, svg, id);
 };
 
 export default {

src/diagrams/state/stateRenderer.js

@@ -9,6 +9,7 @@ import { parser } from './parser/stateDiagram';
 import { drawState, addTitleAndBox, drawEdge } from './shapes';
 import { getConfig } from '../../config';
 import { configureSvgSize } from '../../utils';
+import addSVGAccessibilityFields from '../../accessibility';
 
 parser.yy = stateDb;
 
@@ -97,6 +98,7 @@ export const draw = function (text, id) {
     'viewBox',
     `${bounds.x - conf.padding}  ${bounds.y - conf.padding} ` + width + ' ' + height
   );
+  addSVGAccessibilityFields(parser.yy, diagram, id);
 };
 const getLabelWidth = (text) => {
   return text ? text.length * conf.fontSizeFactor : 1;

src/diagrams/user-journey/journeyDb.js

@@ -1,7 +1,18 @@
 import mermaidAPI from '../../mermaidAPI';
 import * as configApi from '../../config';
+import common from '../common/common';
+import {
+  setTitle,
+  getTitle,
+  getAccDescription,
+  setAccDescription,
+  clear as commonClear,
+} from '../../commonDb';
+
+const sanitizeText = (txt) => common.sanitizeText(txt, configApi.getConfig());
 
 let title = '';
+let description = '';
 let currentSection = '';
 
 const sections = [];
@@ -17,15 +28,9 @@ export const clear = function () {
   tasks.length = 0;
   currentSection = '';
   title = '';
+  description = '';
   rawTasks.length = 0;
-};
-
-export const setTitle = function (txt) {
-  title = txt;
-};
-
-export const getTitle = function () {
-  return title;
+  commonClear();
 };
 
 export const addSection = function (txt) {
@@ -123,6 +128,8 @@ export default {
   clear,
   setTitle,
   getTitle,
+  setAccDescription,
+  getAccDescription,
   addSection,
   getSections,
   getTasks,