Revert "chore(deps-dev): bump documentation from 13.2.0 to 14.0.0"

chore(deps-dev): bump prettier-plugin-jsdoc from 0.3.38 to 0.4.1

.eslintignore

@@ -1,2 +1,3 @@
 dist/**
 .github/**
+docs/Setup.md

.eslintrc.json

@@ -13,17 +13,25 @@
     },
     "sourceType": "module"
   },
-  "extends": ["eslint:recommended", "plugin:jsdoc/recommended", "plugin:markdown/recommended", "plugin:prettier/recommended"],
-  "plugins": ["html", "jest", "jsdoc", "prettier"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:jsdoc/recommended",
+    "plugin:json/recommended",
+    "plugin:markdown/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "plugins": ["html", "jest", "jsdoc", "json", "prettier"],
   "rules": {
-    "no-prototype-builtins": 0,
-    "no-unused-vars": 0,
-    "jsdoc/check-indentation": 0,
-    "jsdoc/check-alignment": 0,
-    "jsdoc/check-line-alignment": 0,
-    "jsdoc/multiline-blocks": 0,
-    "jsdoc/newline-after-description": 0,
-    "jsdoc/tag-lines": 0,
+    "no-prototype-builtins": "off",
+    "no-unused-vars": "off",
+    "jsdoc/check-indentation": "off",
+    "jsdoc/check-alignment": "off",
+    "jsdoc/check-line-alignment": "off",
+    "jsdoc/multiline-blocks": "off",
+    "jsdoc/newline-after-description": "off",
+    "jsdoc/tag-lines": "off",
+    "cypress/no-async-tests": "off",
+    "json/*": ["error", "allowComments"],
     "no-empty": ["error", { "allowEmptyCatch": true }]
   },
   "overrides": [
@@ -33,6 +41,12 @@
         "no-undef": "off",
         "jsdoc/require-jsdoc": "off"
       }
+    },
+    {
+      "files": "./**/*.md/*.html",
+      "rules": {
+        "prettier/prettier": "off"
+      }
     }
   ]
 }

.gitattributes

@@ -0,0 +1 @@
+* text=auto

.github/ISSUE_TEMPLATE/bug_report.md

@@ -24,7 +24,7 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Code Sample**
-If applicable, add the code sample or a link to the [live editor](https://mermaid-js.github.io/mermaid-live-editor).
+If applicable, add the code sample or a link to the [live editor](https://mermaid.live).
 
 **Desktop (please complete the following information):**
  - OS: [e.g. iOS]

.github/workflows/build.yml

@@ -1,6 +1,12 @@
 name: Build
 
-on: [push, pull_request]
+on:
+  push: {}
+  pull_request:
+    types:
+      - opened
+      - synchronize
+      - ready_for_review
 
 permissions:
   contents: read
@@ -37,7 +43,3 @@ jobs:
       with:
         name: dist
         path: dist
-
-    - name: Run Unit Tests
-      run: |
-        yarn test --coverage

.github/workflows/checks.yml

@@ -1,4 +1,10 @@
-on: [push]
+on:
+  push: {}
+  pull_request:
+    types:
+      - opened
+      - synchronize
+      - ready_for_review
 
 name: Static analysis
 
@@ -6,6 +12,7 @@ jobs:
   test:
     runs-on: ubuntu-latest
     name: check tests
+    if: github.repository_owner == 'mermaid-js'
     steps:
     - uses: actions/checkout@v2
       with:
@@ -13,6 +20,6 @@ jobs:
     - uses: testomatio/check-tests@stable
       with:
         framework: cypress
-        tests: "./cypress/integration/**/**.spec.js"
+        tests: "./cypress/e2e/**/**.spec.js"
         token: ${{ secrets.GITHUB_TOKEN }}
         has-tests-label: true

.github/workflows/codeql.yml

@@ -7,6 +7,10 @@ on:
   pull_request:
     # The branches below must be a subset of the branches above
     branches: [ develop ]
+    types:
+      - opened
+      - synchronize
+      - ready_for_review
 
 jobs:
   analyze:

.github/workflows/dependency-review.yml

@@ -17,4 +17,4 @@ jobs:
       - name: 'Checkout Repository'
         uses: actions/checkout@v3
       - name: 'Dependency Review'
-        uses: actions/dependency-review-action@v1
+        uses: actions/dependency-review-action@v2

.github/workflows/lint.yml

@@ -0,0 +1,39 @@
+name: Lint
+
+on:
+  push: {}
+  pull_request:
+    types:
+      - opened
+      - synchronize
+      - ready_for_review
+
+permissions:
+  contents: read
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [16.x]
+    steps:
+    - uses: actions/checkout@v3
+
+    - name: Setup Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        cache: yarn
+        node-version: ${{ matrix.node-version }}
+
+    - name: Install Yarn
+      run: npm i yarn --global
+
+    - name: Install Packages
+      run: |
+        yarn install --frozen-lockfile
+      env:
+        CYPRESS_CACHE_FOLDER: .cache/Cypress
+
+    - name: Run Linting
+      run: yarn lint

.github/workflows/pr-labeler-config-validator.yml

@@ -1,5 +1,11 @@
 name: Validate PR Labeler Configuration
-on: [push, pull_request]
+on:
+  push: {}
+  pull_request:
+    types:
+      - opened
+      - synchronize
+      - ready_for_review
 
 jobs:
   pr-labeler:

.github/workflows/test.yml

@@ -0,0 +1,34 @@
+name: Unit Tests
+
+on: [push, pull_request]
+
+permissions:
+  contents: read
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [16.x]
+    steps:
+    - uses: actions/checkout@v3
+
+    - name: Setup Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        cache: yarn
+        node-version: ${{ matrix.node-version }}
+
+    - name: Install Yarn
+      run: npm i yarn --global
+
+    - name: Install Packages
+      run: |
+        yarn install --frozen-lockfile
+      env:
+        CYPRESS_CACHE_FOLDER: .cache/Cypress
+
+    - name: Run Unit Tests
+      run: |
+        yarn ci --coverage

.lintstagedrc.json

@@ -1,5 +1,5 @@
 {
-  "*.{js,html,md}": [
+  "*.{js,json,html,md}": [
       "yarn lint:fix" 
    ]
 }

.tern-project

@@ -3,12 +3,9 @@
   "libs": [
     "browser"
   ],
-  "loadEagerly": [
-    "path/to/your/js/**/*.js"
-  ],
+  "loadEagerly": [],
   "dontLoad": [
-    "node_modules/**",
-    "path/to/your/js/**/*.js"
+    "node_modules/**"
   ],
   "plugins": {
     "modules": {},

CHANGELOG.md

@@ -23,7 +23,7 @@
 - Missing fontawesome icon support [\#830](https://github.com/knsv/mermaid/issues/830)
 - Docs for integration with wiki.js? [\#829](https://github.com/knsv/mermaid/issues/829)
 - Is this project still maintained? [\#826](https://github.com/knsv/mermaid/issues/826)
-- typroa [\#823](https://github.com/knsv/mermaid/issues/823)
+- typora [\#823](https://github.com/knsv/mermaid/issues/823)
 - Maintain the order of the nodes in Flowchart [\#815](https://github.com/knsv/mermaid/issues/815)
 - Overlap, Overflow and cut titles in flowchart [\#814](https://github.com/knsv/mermaid/issues/814)
 - How load mermaidApi notejs electron  [\#813](https://github.com/knsv/mermaid/issues/813)

CONTRIBUTING.md

@@ -6,6 +6,14 @@ So you want to help? That's great!
 
 Here are a few things to know to get you started on the right path.
 
+## Development Installation
+```bash
+git clone git@github.com:mermaid-js/mermaid.git
+cd mermaid
+yarn
+yarn test
+```
+
 ## Committing code
 
 We make all changes via pull requests. As we have many pull requests from developers new to mermaid, the current approach is to have *knsv, Knut Sveidqvist* as a main reviewer of changes and merging pull requests. More precisely like this:
@@ -114,7 +122,7 @@ Finally, if it is not in the documentation, no one will know about it and then *
 
 The docs are located in the docs folder and are ofc written in markdown. Just pick the right section and start typing. If you want to add to the structure as in adding a new section and new file you do that via the _navbar.md.
 
-The changes in master is reflected in http://mermaid-js.github.io/mermaid/ once released the updates are committed to https://mermaid-js.github.io/#/
+The changes in master is reflected in https://mermaid-js.github.io/mermaid/ once released the updates are committed to https://mermaid-js.github.io/#/
 
 ## Last words
 

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2014 - 2021 Knut Sveidqvist
+Copyright (c) 2014 - 2022 Knut Sveidqvist
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -15,7 +15,7 @@ English | [简体中文](./README.zh-CN.md)
 ## About
 
 <!-- <Main description>   -->
-Mermaid is a Javascript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams.  The main purpose of Mermaid is to help documentation catch up with development.
+Mermaid is a JavaScript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams.  The main purpose of Mermaid is to help documentation catch up with development.
 
 > Doc-Rot is a Catch-22 that Mermaid helps to solve.
 
@@ -24,7 +24,7 @@ But not having diagrams or docs ruins productivity and hurts organizational lear
 Mermaid addresses this problem by enabling users to create easily modifiable diagrams, it can also be made part of production scripts (and other pieces of code).<br/>
  <br/>
 
-Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor/).<br/>
+Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
 [Tutorials](./docs/Tutorials.md) has video tutorials.
 Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/integrations.md).
 
@@ -51,7 +51,7 @@ In our release process we rely heavily on visual regression tests using [applito
 __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://mermaid.live/edit#pako:eNpNkMtqwzAQRX9FzKqFJK7t1km8KDQP6KJQSLOLvZhIY1tgS0GWmgbb_165IaFaiXvOFTPqgGtBkEJR6zOv0Fj2scsU8-ft8I5G5Gw6fe339GN7tnrYaafE45WvRsLW3Ya4bKVWwzVe_xU-FfVsc9hR62rLwvw_2591z7Y3FuUwgYZMg1L4ObrRzMBW1FAGqb8KKtCLGWRq8Ko7CbS0FdJqA2mBdUsTQGf110VxSK1xdJM2EkuDzd2qNQrypQ7s5TQuXcrW-ie5VoUsx9yZ2seVtac2DYIRz0ppK3eccd0ErRTjD1XfyyRIomSBUUzJPMaXOBb8GC4XRfQcFmL-FEYIwzD8AggvcHE">live editor</a>]
 
 ```
 flowchart LR
@@ -71,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://mermaid.live/edit#pako:eNo9kMluwjAQhl_F-AykQMuSA1WrbuLQQ3v1ZbAnsVXHkzrjVhHi3etQwKfRv4w-z0FqMihL2eF3wqDxyUEdoVHhwTuNk-12RzaU4g29JzHMY2HpV0BE0VO6V8ETtdkGz1Zb1F8qiPyG5LX84mrLAmpwoWNh-5a0pWCiAxUwGBXeiVHEU4oq8V_6AHYUwAu2lLLTjVQ4bc1rT2yleI0IfJG320faZ9ABbk-Jz3hZnFxBduR9L2oiM5Jj2WBswJn8-cMArSRbbFDJMo8GK0ielVThmKOpNcD4bBxTlGUFvsOxhMT02QctS44JL6HzAS-iJzCYOwfJfTscunYd542aQuXqQU_RZ9kyt11ZFIM9rR3btJ9qaorOGQuR7c9mWSznyzXMF7hcLeBusTB6P9usq_ntrDKrm9kc5PF4_AMJE56Z">live editor</a>]
 
 ```
 sequenceDiagram
@@ -96,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://mermaid.live/edit#pako:eNp90cGOgyAQBuBXIZxtFbG29bbZ3fsmvXKZylhJEAyOTZrGd1_sto3xsHMBhu-HBO689hp5xS_giJQbsCbjHTv9jcp9-q63SKhZpb3DhMXSOIiE5ZkoNpnYZGXynh6U-4jBK7JnVfBYJo9QvgjtEya1cj8QwFq0TMz4lZqxTBg0hOF5m1jifI2Lf7Bc490CyxUu1rhc4GLGPOEdhg6Mjq92V44xxanFDhWv4lRjA6MlxZWbIh17DYTf2pAPvGrADphwGMmfbq7mFYURX-jLwCVA91bWg8YYunO69Y8vMgPFI2vvGnOZ-2Owsd0S9UOVpvP29mKoHc_b2nfpYHQLgdrrsUzLvDxALrHcS9hJqeuzOB6avBCN3mciBz5N0y_wxZ0J">live editor</a>]
 
 ```
 gantt
@@ -119,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://mermaid.live/edit#pako:eNpdkTFPwzAQhf-K5QlQ2zQJJG1UBaGWDYmBgYEwXO1LYuTEwXYqlZL_jt02asXm--690zvfgTLFkWaUSTBmI6DS0BTt2lfzkKx-p1PytEO9f1FtdaQkI2ulZNGuVqK1qEtgmOfk7BitSzKdOhg59XuNGgk0RDxed-_IOr6uf8cZ6UhTZ8bvHqS5ub1mr9svZPbjk6DEBlu7AQuXyBkx4gcvDk9cUMJq0XT_YaW0kNK5j-ufAoRzcihaQvLcoN4Jv50vvVxw_xrnD3RCG9QNCO4-8OgpqK1dpoJm7smxhF7agp6kfcfB4jMXVmmalW4tnFDorXrbt4xmVvc4is53GKFUwNF5DtTuO3-sShjrJjLVlqLyvNfS4drazmRB4NuzSti6386YagIjeA3a1rtlEiRRsoAoxiSN4SGOOduGy0UZ3YclT-dhBHQYhj8dc6_I">live editor</a>]
 
 ```
 classDiagram
@@ -158,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.live/edit#pako:eNpdkEFvgzAMhf8K8nEqpYSNthx22Xbcqcexg0sCiZQQlDhIFeK_L8A6TfXp6fOz9ewJGssFVOAJSbwr7ByadGR1n8T6evpO0vQ1uZDSekOrXGFsPqJPO6q-2-imH8f_0TeHXm50lfelsAMjnEHFY6xpMdRAUhhRQxUlFy0GTTXU_RytYeAx-AdXZB1ULWovdoCB7OXWN1CRC-Ju-r3uz6UtchGHJqDbsPygU57iysb2reoWHpyOWBINvsqypb3vFMlw3TfWZF5xiY7keC6zkpUnZIUojwW-FAVvrvn51LLnvOXHQ84Q5nn-AVtLcwk">live editor</a>]
 ```
 stateDiagram-v2
 [*] --> Still
@@ -178,24 +178,24 @@ Moving --> Crash
 Crash --> [*]
 ```
 
-### Pie chart [<a href="https://mermaid-js.github.io/mermaid/#/pie">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoicGllXG5cIkRvZ3NcIiA6IDQyLjk2XG5cIkNhdHNcIiA6IDUwLjA1XG5cIlJhdHNcIiA6IDEwLjAxIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
+### Pie chart [<a href="https://mermaid-js.github.io/mermaid/#/pie">docs</a> - <a href="https://mermaid.live/edit#pako:eNo9jsFugzAMhl8F-VzBgEEh13Uv0F1zcYkTIpEEBadShXj3BU3dzf_n77e8wxQUgYDVkvQSbsFsEgpRtEN_5i_kvzx05XiC-xvUHVzAUXRoVe7v0heFBJ7JkQSRR0Ua08ISpD-ymlaFTN_KcoggNC4bXQATh5-Xn0BwTPSWbhZNRPdvLQEV5dIO_FrPZ43dOJ-cgtfWnDzFJeOZed1EVZ3r0lie06Ocgqs2q2aMPD_HvuqbfsCmpf7aYte2anrU46Cbz1qr60fdIBzH8QvW9lkl">live editor</a>]
 
 ```
 pie
 "Dogs" : 386
-"Cats" : 85
+"Cats" : 85.9
 "Rats" : 15
 ```
 ```mermaid
 pie
 "Dogs" : 386
-"Cats" : 85
+"Cats" : 85.9
 "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://mermaid.live/edit#pako:eNqNkMFugzAMhl8F-VyVAR1tOW_aA-zKxSSGRCMJCk6lCvHuNZPKZdM0n-zf3_8r8QIqaIIGMqnB8kfEybQ--y4VnLP8-9RF9Mpkmm40hmlnDKmvkPiH_kfS7nFo_VN0FAf6XwocQGgxa_nGsm1bYEOOWmik1dRjGrmF1q-Cpkkj07u2HCI0PY4zHQATh8-7V9BwTPSE3iwOEd1OjQE1iWkBvk_bzQY7s0Sq4Hs7bHqKo8iGeZqbPN_WR7mpSd1RHpvPVhuMbG7XOq_L-oJlRfW5wteq0qorrpe-PBW9Pr8UJcK6rg-BLYPQ">live editor</a>]
 
-### User Journey diagram [<a href="https://mermaid-js.github.io/mermaid/#/user-journey">docs</a> - <a href="https://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://mermaid.live/edit#pako:eNplkMFuwjAQRH9l5TMiTVIC-FqqnjhxzWWJN4khsSN7XRSh_HsdKBVt97R6Mzsj-yoqq0hIAXCywRkaSwNxWHNHsB_hYt1ZmwYUfiueKtbWwIcFtjf5zgH2eCZgQgkrCXt64GgMg2fUzkvIn5Xd_V5COtMFvCH_62ht_5yk7MU8sn61HDTfxD8VYiF6cj1qFd94nWkpuKWYKWRcFdUYOi5FaaZoDYNCpnel2Toha-w8LQQGtofRVEKyC_Qw7TQ2DvsfV2dRUTy6Ch6H-UMb7TlGVtbUupl5cF3ELfPgZZLM8rLR3IbjsrJ94rVq0XH7uS2SIis2mOVUrHNc5bmqjul2U2evaa3WL2mGYpqmL2BGiho">live editor</a>]
 ```
   journey
     title My working day
@@ -219,6 +219,77 @@ pie
       Sit down: 3: Me
 ```
 
+### C4 diagram [<a href="https://mermaid-js.github.io/mermaid/#/c4c">docs</a>]
+
+```
+C4Context
+title System Context diagram for Internet Banking System
+
+Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
+Person(customerB, "Banking Customer B")
+Person_Ext(customerC, "Banking Customer C")
+System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
+
+Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
+
+Enterprise_Boundary(b1, "BankBoundary") {
+
+  SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
+
+  System_Boundary(b2, "BankBoundary2") {
+    System(SystemA, "Banking System A")
+    System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
+  }
+
+  System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
+  SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
+
+  Boundary(b3, "BankBoundary3", "boundary") {
+    SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
+    SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
+  }
+}
+
+BiRel(customerA, SystemAA, "Uses")
+BiRel(SystemAA, SystemE, "Uses")
+Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
+Rel(SystemC, customerA, "Sends e-mails to")
+```
+```mermaid
+C4Context
+title System Context diagram for Internet Banking System
+
+Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
+Person(customerB, "Banking Customer B")
+Person_Ext(customerC, "Banking Customer C")
+System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
+
+Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
+
+Enterprise_Boundary(b1, "BankBoundary") {
+
+  SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
+
+  System_Boundary(b2, "BankBoundary2") {
+    System(SystemA, "Banking System A")
+    System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
+  }
+
+  System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
+  SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
+
+  Boundary(b3, "BankBoundary3", "boundary") {
+    SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
+    SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
+  }
+}
+
+BiRel(customerA, SystemAA, "Uses")
+BiRel(SystemAA, SystemE, "Uses")
+Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
+Rel(SystemC, customerA, "Sends e-mails to")
+```
+
 ## Release
 
 For those who have the permission to do so:

README.zh-CN.md

@@ -20,7 +20,7 @@ Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markd
 绘图和编写文档花费了开发者宝贵的开发时间，而且随着业务的变更，它很快就会过期。 但是如果缺少了图表或文档，对于生产力和团队新人的业务学习都会产生巨大的阻碍。 <br/>
 Mermaid 通过允许用户创建便于修改的图表来解决这一难题，它也可以作为生产脚本（或其他代码）的一部分。<br/>
 <br/>
-Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor/) 轻松创建详细的图表。<br/>
+Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://mermaid.live/) 轻松创建详细的图表。<br/>
 你可以访问 [教程](./docs/Tutorials.md) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](./docs/integrations.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。
 
 如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/n00b-overview.md), [用法](./docs/usage.md) 和 [教程](./docs/Tutorials.md).
@@ -139,7 +139,7 @@ class Class10 {
 }
 ```
 
-### 状态图 [[<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>]
+### 状态图 [[<a href="https://mermaid-js.github.io/mermaid/#/stateDiagram">docs</a> - <a href="https://mermaid.live/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtLXYyXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQiLCJ0aGVtZVZhcmlhYmxlcyI6eyJiYWNrZ3JvdW5kIjoid2hpdGUiLCJwcmltYXJ5Q29sb3IiOiIjRUNFQ0ZGIiwic2Vjb25kYXJ5Q29sb3IiOiIjZmZmZmRlIiwidGVydGlhcnlDb2xvciI6ImhzbCg4MCwgMTAwJSwgOTYuMjc0NTA5ODAzOSUpIiwicHJpbWFyeUJvcmRlckNvbG9yIjoiaHNsKDI0MCwgNjAlLCA4Ni4yNzQ1MDk4MDM5JSkiLCJzZWNvbmRhcnlCb3JkZXJDb2xvciI6ImhzbCg2MCwgNjAlLCA4My41Mjk0MTE3NjQ3JSkiLCJ0ZXJ0aWFyeUJvcmRlckNvbG9yIjoiaHNsKDgwLCA2MCUsIDg2LjI3NDUwOTgwMzklKSIsInByaW1hcnlUZXh0Q29sb3IiOiIjMTMxMzAwIiwic2Vjb25kYXJ5VGV4dENvbG9yIjoiIzAwMDAyMSIsInRlcnRpYXJ5VGV4dENvbG9yIjoicmdiKDkuNTAwMDAwMDAwMSwgOS41MDAwMDAwMDAxLCA5LjUwMDAwMDAwMDEpIiwibGluZUNvbG9yIjoiIzMzMzMzMyIsInRleHRDb2xvciI6IiMzMzMiLCJtYWluQmtnIjoiI0VDRUNGRiIsInNlY29uZEJrZyI6IiNmZmZmZGUiLCJib3JkZXIxIjoiIzkzNzBEQiIsImJvcmRlcjIiOiIjYWFhYTMzIiwiYXJyb3doZWFkQ29sb3IiOiIjMzMzMzMzIiwiZm9udEZhbWlseSI6IlwidHJlYnVjaGV0IG1zXCIsIHZlcmRhbmEsIGFyaWFsIiwiZm9udFNpemUiOiIxNnB4IiwibGFiZWxCYWNrZ3JvdW5kIjoiI2U4ZThlOCIsIm5vZGVCa2ciOiIjRUNFQ0ZGIiwibm9kZUJvcmRlciI6IiM5MzcwREIiLCJjbHVzdGVyQmtnIjoiI2ZmZmZkZSIsImNsdXN0ZXJCb3JkZXIiOiIjYWFhYTMzIiwiZGVmYXVsdExpbmtDb2xvciI6IiMzMzMzMzMiLCJ0aXRsZUNvbG9yIjoiIzMzMyIsImVkZ2VMYWJlbEJhY2tncm91bmQiOiIjZThlOGU4IiwiYWN0b3JCb3JkZXIiOiJoc2woMjU5LjYyNjE2ODIyNDMsIDU5Ljc3NjUzNjMxMjglLCA4Ny45MDE5NjA3ODQzJSkiLCJhY3RvckJrZyI6IiNFQ0VDRkYiLCJhY3RvclRleHRDb2xvciI6ImJsYWNrIiwiYWN0b3JMaW5lQ29sb3IiOiJncmV5Iiwic2lnbmFsQ29sb3IiOiIjMzMzIiwic2lnbmFsVGV4dENvbG9yIjoiIzMzMyIsImxhYmVsQm94QmtnQ29sb3IiOiIjRUNFQ0ZGIiwibGFiZWxCb3hCb3JkZXJDb2xvciI6ImhzbCgyNTkuNjI2MTY4MjI0MywgNTkuNzc2NTM2MzEyOCUsIDg3LjkwMTk2MDc4NDMlKSIsImxhYmVsVGV4dENvbG9yIjoiYmxhY2siLCJsb29wVGV4dENvbG9yIjoiYmxhY2siLCJub3RlQm9yZGVyQ29sb3IiOiIjYWFhYTMzIiwibm90ZUJrZ0NvbG9yIjoiI2ZmZjVhZCIsIm5vdGVUZXh0Q29sb3IiOiJibGFjayIsImFjdGl2YXRpb25Cb3JkZXJDb2xvciI6IiM2NjYiLCJhY3RpdmF0aW9uQmtnQ29sb3IiOiIjZjRmNGY0Iiwic2VxdWVuY2VOdW1iZXJDb2xvciI6IndoaXRlIiwic2VjdGlvbkJrZ0NvbG9yIjoicmdiYSgxMDIsIDEwMiwgMjU1LCAwLjQ5KSIsImFsdFNlY3Rpb25Ca2dDb2xvciI6IndoaXRlIiwic2VjdGlvbkJrZ0NvbG9yMiI6IiNmZmY0MDAiLCJ0YXNrQm9yZGVyQ29sb3IiOiIjNTM0ZmJjIiwidGFza0JrZ0NvbG9yIjoiIzhhOTBkZCIsInRhc2tUZXh0TGlnaHRDb2xvciI6IndoaXRlIiwidGFza1RleHRDb2xvciI6IndoaXRlIiwidGFza1RleHREYXJrQ29sb3IiOiJibGFjayIsInRhc2tUZXh0T3V0c2lkZUNvbG9yIjoiYmxhY2siLCJ0YXNrVGV4dENsaWNrYWJsZUNvbG9yIjoiIzAwMzE2MyIsImFjdGl2ZVRhc2tCb3JkZXJDb2xvciI6IiM1MzRmYmMiLCJhY3RpdmVUYXNrQmtnQ29sb3IiOiIjYmZjN2ZmIiwiZ3JpZENvbG9yIjoibGlnaHRncmV5IiwiZG9uZVRhc2tCa2dDb2xvciI6ImxpZ2h0Z3JleSIsImRvbmVUYXNrQm9yZGVyQ29sb3IiOiJncmV5IiwiY3JpdEJvcmRlckNvbG9yIjoiI2ZmODg4OCIsImNyaXRCa2dDb2xvciI6InJlZCIsInRvZGF5TGluZUNvbG9yIjoicmVkIiwibGFiZWxDb2xvciI6ImJsYWNrIiwiZXJyb3JCa2dDb2xvciI6IiM1NTIyMjIiLCJlcnJvclRleHRDb2xvciI6IiM1NTIyMjIiLCJjbGFzc1RleHQiOiIjMTMxMzAwIiwiZmlsbFR5cGUwIjoiI0VDRUNGRiIsImZpbGxUeXBlMSI6IiNmZmZmZGUiLCJmaWxsVHlwZTIiOiJoc2woMzA0LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTMiOiJoc2woMTI0LCAxMDAlLCA5My41Mjk0MTE3NjQ3JSkiLCJmaWxsVHlwZTQiOiJoc2woMTc2LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTUiOiJoc2woLTQsIDEwMCUsIDkzLjUyOTQxMTc2NDclKSIsImZpbGxUeXBlNiI6ImhzbCg4LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTciOiJoc2woMTg4LCAxMDAlLCA5My41Mjk0MTE3NjQ3JSkifX0sInVwZGF0ZUVkaXRvciI6ZmFsc2V9">live editor</a>]
 
 ```
 stateDiagram-v2
@@ -202,6 +202,77 @@ pie
       Sit down: 3: Me
 ```
 
+### C4 图 [<a href="https://mermaid-js.github.io/mermaid/#/c4c">文档</a>]
+
+```
+C4Context
+title System Context diagram for Internet Banking System
+
+Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
+Person(customerB, "Banking Customer B")
+Person_Ext(customerC, "Banking Customer C")
+System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
+
+Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
+
+Enterprise_Boundary(b1, "BankBoundary") {
+
+  SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
+
+  System_Boundary(b2, "BankBoundary2") {
+    System(SystemA, "Banking System A")
+    System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
+  }
+
+  System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
+  SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
+
+  Boundary(b3, "BankBoundary3", "boundary") {
+    SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
+    SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
+  }
+}
+
+BiRel(customerA, SystemAA, "Uses")
+BiRel(SystemAA, SystemE, "Uses")
+Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
+Rel(SystemC, customerA, "Sends e-mails to")
+```
+```mermaid
+C4Context
+title System Context diagram for Internet Banking System
+
+Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
+Person(customerB, "Banking Customer B")
+Person_Ext(customerC, "Banking Customer C")
+System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
+
+Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
+
+Enterprise_Boundary(b1, "BankBoundary") {
+
+  SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
+
+  System_Boundary(b2, "BankBoundary2") {
+    System(SystemA, "Banking System A")
+    System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
+  }
+
+  System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
+  SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
+
+  Boundary(b3, "BankBoundary3", "boundary") {
+    SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
+    SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
+  }
+}
+
+BiRel(customerA, SystemAA, "Uses")
+BiRel(SystemAA, SystemE, "Uses")
+Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
+Rel(SystemC, customerA, "Sends e-mails to")
+```
+
 ## 发布
 
 对于有权限的同学来说，你可以通过以下步骤来完成发布操作：

cypress.config.js

@@ -0,0 +1,20 @@
+const { defineConfig } = require('cypress');
+const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
+require('@applitools/eyes-cypress')(module);
+
+module.exports = defineConfig({
+  e2e: {
+    specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
+    setupNodeEvents(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;
+    },
+    supportFile: 'cypress/support/index.js',
+  },
+  video: false,
+});

cypress.json

@@ -1,3 +0,0 @@
-{
-    "video": false
-}

cypress/examples/actions.spec.js

@@ -1,264 +0,0 @@
-/// <reference types="Cypress" />
-
-context('Actions', () => {
-  beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/actions');
-  });
-
-  // https://on.cypress.io/interacting-with-elements
-
-  it('.type() - type into a DOM element', () => {
-    // https://on.cypress.io/type
-    cy.get('.action-email')
-      .type('fake@email.com')
-      .should('have.value', 'fake@email.com')
-
-      // .type() with special character sequences
-      .type('{leftarrow}{rightarrow}{uparrow}{downarrow}')
-      .type('{del}{selectall}{backspace}')
-
-      // .type() with key modifiers
-      .type('{alt}{option}') //these are equivalent
-      .type('{ctrl}{control}') //these are equivalent
-      .type('{meta}{command}{cmd}') //these are equivalent
-      .type('{shift}')
-
-      // Delay each keypress by 0.1 sec
-      .type('slow.typing@email.com', { delay: 100 })
-      .should('have.value', 'slow.typing@email.com');
-
-    cy.get('.action-disabled')
-      // Ignore error checking prior to type
-      // like whether the input is visible or disabled
-      .type('disabled error checking', { force: true })
-      .should('have.value', 'disabled error checking');
-  });
-
-  it('.focus() - focus on a DOM element', () => {
-    // https://on.cypress.io/focus
-    cy.get('.action-focus')
-      .focus()
-      .should('have.class', 'focus')
-      .prev()
-      .should('have.attr', 'style', 'color: orange;');
-  });
-
-  it('.blur() - blur off a DOM element', () => {
-    // https://on.cypress.io/blur
-    cy.get('.action-blur')
-      .type('About to blur')
-      .blur()
-      .should('have.class', 'error')
-      .prev()
-      .should('have.attr', 'style', 'color: red;');
-  });
-
-  it('.clear() - clears an input or textarea element', () => {
-    // https://on.cypress.io/clear
-    cy.get('.action-clear')
-      .type('Clear this text')
-      .should('have.value', 'Clear this text')
-      .clear()
-      .should('have.value', '');
-  });
-
-  it('.submit() - submit a form', () => {
-    // https://on.cypress.io/submit
-    cy.get('.action-form').find('[type="text"]').type('HALFOFF');
-    cy.get('.action-form').submit().next().should('contain', 'Your form has been submitted!');
-  });
-
-  it('.click() - click on a DOM element', () => {
-    // https://on.cypress.io/click
-    cy.get('.action-btn').click();
-
-    // You can click on 9 specific positions of an element:
-    //  -----------------------------------
-    // | topLeft        top       topRight |
-    // |                                   |
-    // |                                   |
-    // |                                   |
-    // | left          center        right |
-    // |                                   |
-    // |                                   |
-    // |                                   |
-    // | bottomLeft   bottom   bottomRight |
-    //  -----------------------------------
-
-    // clicking in the center of the element is the default
-    cy.get('#action-canvas').click();
-
-    cy.get('#action-canvas').click('topLeft');
-    cy.get('#action-canvas').click('top');
-    cy.get('#action-canvas').click('topRight');
-    cy.get('#action-canvas').click('left');
-    cy.get('#action-canvas').click('right');
-    cy.get('#action-canvas').click('bottomLeft');
-    cy.get('#action-canvas').click('bottom');
-    cy.get('#action-canvas').click('bottomRight');
-
-    // .click() accepts an x and y coordinate
-    // that controls where the click occurs :)
-
-    cy.get('#action-canvas')
-      .click(80, 75) // click 80px on x coord and 75px on y coord
-      .click(170, 75)
-      .click(80, 165)
-      .click(100, 185)
-      .click(125, 190)
-      .click(150, 185)
-      .click(170, 165);
-
-    // click multiple elements by passing multiple: true
-    cy.get('.action-labels>.label').click({ multiple: true });
-
-    // Ignore error checking prior to clicking
-    cy.get('.action-opacity>.btn').click({ force: true });
-  });
-
-  it('.dblclick() - double click on a DOM element', () => {
-    // https://on.cypress.io/dblclick
-
-    // Our app has a listener on 'dblclick' event in our 'scripts.js'
-    // that hides the div and shows an input on double click
-    cy.get('.action-div').dblclick().should('not.be.visible');
-    cy.get('.action-input-hidden').should('be.visible');
-  });
-
-  it('.check() - check a checkbox or radio element', () => {
-    // https://on.cypress.io/check
-
-    // By default, .check() will check all
-    // matching checkbox or radio elements in succession, one after another
-    cy.get('.action-checkboxes [type="checkbox"]').not('[disabled]').check().should('be.checked');
-
-    cy.get('.action-radios [type="radio"]').not('[disabled]').check().should('be.checked');
-
-    // .check() accepts a value argument
-    cy.get('.action-radios [type="radio"]').check('radio1').should('be.checked');
-
-    // .check() accepts an array of values
-    cy.get('.action-multiple-checkboxes [type="checkbox"]')
-      .check(['checkbox1', 'checkbox2'])
-      .should('be.checked');
-
-    // Ignore error checking prior to checking
-    cy.get('.action-checkboxes [disabled]').check({ force: true }).should('be.checked');
-
-    cy.get('.action-radios [type="radio"]').check('radio3', { force: true }).should('be.checked');
-  });
-
-  it('.uncheck() - uncheck a checkbox element', () => {
-    // https://on.cypress.io/uncheck
-
-    // By default, .uncheck() will uncheck all matching
-    // checkbox elements in succession, one after another
-    cy.get('.action-check [type="checkbox"]').not('[disabled]').uncheck().should('not.be.checked');
-
-    // .uncheck() accepts a value argument
-    cy.get('.action-check [type="checkbox"]')
-      .check('checkbox1')
-      .uncheck('checkbox1')
-      .should('not.be.checked');
-
-    // .uncheck() accepts an array of values
-    cy.get('.action-check [type="checkbox"]')
-      .check(['checkbox1', 'checkbox3'])
-      .uncheck(['checkbox1', 'checkbox3'])
-      .should('not.be.checked');
-
-    // Ignore error checking prior to unchecking
-    cy.get('.action-check [disabled]').uncheck({ force: true }).should('not.be.checked');
-  });
-
-  it('.select() - select an option in a <select> element', () => {
-    // https://on.cypress.io/select
-
-    // Select option(s) with matching text content
-    cy.get('.action-select').select('apples');
-
-    cy.get('.action-select-multiple').select(['apples', 'oranges', 'bananas']);
-
-    // Select option(s) with matching value
-    cy.get('.action-select').select('fr-bananas');
-
-    cy.get('.action-select-multiple').select(['fr-apples', 'fr-oranges', 'fr-bananas']);
-  });
-
-  it('.scrollIntoView() - scroll an element into view', () => {
-    // https://on.cypress.io/scrollintoview
-
-    // normally all of these buttons are hidden,
-    // because they're not within
-    // the viewable area of their parent
-    // (we need to scroll to see them)
-    cy.get('#scroll-horizontal button').should('not.be.visible');
-
-    // scroll the button into view, as if the user had scrolled
-    cy.get('#scroll-horizontal button').scrollIntoView().should('be.visible');
-
-    cy.get('#scroll-vertical button').should('not.be.visible');
-
-    // Cypress handles the scroll direction needed
-    cy.get('#scroll-vertical button').scrollIntoView().should('be.visible');
-
-    cy.get('#scroll-both button').should('not.be.visible');
-
-    // Cypress knows to scroll to the right and down
-    cy.get('#scroll-both button').scrollIntoView().should('be.visible');
-  });
-
-  it('.trigger() - trigger an event on a DOM element', () => {
-    // https://on.cypress.io/trigger
-
-    // To interact with a range input (slider)
-    // we need to set its value & trigger the
-    // event to signal it changed
-
-    // Here, we invoke jQuery's val() method to set
-    // the value and trigger the 'change' event
-    cy.get('.trigger-input-range')
-      .invoke('val', 25)
-      .trigger('change')
-      .get('input[type=range]')
-      .siblings('p')
-      .should('have.text', '25');
-  });
-
-  it('cy.scrollTo() - scroll the window or element to a position', () => {
-    // https://on.cypress.io/scrollTo
-
-    // You can scroll to 9 specific positions of an element:
-    //  -----------------------------------
-    // | topLeft        top       topRight |
-    // |                                   |
-    // |                                   |
-    // |                                   |
-    // | left          center        right |
-    // |                                   |
-    // |                                   |
-    // |                                   |
-    // | bottomLeft   bottom   bottomRight |
-    //  -----------------------------------
-
-    // if you chain .scrollTo() off of cy, we will
-    // scroll the entire window
-    cy.scrollTo('bottom');
-
-    cy.get('#scrollable-horizontal').scrollTo('right');
-
-    // or you can scroll to a specific coordinate:
-    // (x axis, y axis) in pixels
-    cy.get('#scrollable-vertical').scrollTo(250, 250);
-
-    // or you can scroll to a specific percentage
-    // of the (width, height) of the element
-    cy.get('#scrollable-both').scrollTo('75%', '25%');
-
-    // control the easing of the scroll (default is 'swing')
-    cy.get('#scrollable-vertical').scrollTo('center', { easing: 'linear' });
-
-    // control the duration of the scroll (in ms)
-    cy.get('#scrollable-both').scrollTo('center', { duration: 2000 });
-  });
-});

cypress/examples/aliasing.spec.js

@@ -1,36 +0,0 @@
-/// <reference types="Cypress" />
-
-context('Aliasing', () => {
-  beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/aliasing');
-  });
-
-  it('.as() - alias a DOM element for later use', () => {
-    // https://on.cypress.io/as
-
-    // Alias a DOM element for use later
-    // We don't have to traverse to the element
-    // later in our code, we reference it with @
-
-    cy.get('.as-table').find('tbody>tr').first().find('td').first().find('button').as('firstBtn');
-
-    // when we reference the alias, we place an
-    // @ in front of its name
-    cy.get('@firstBtn').click();
-
-    cy.get('@firstBtn').should('have.class', 'btn-success').and('contain', 'Changed');
-  });
-
-  it('.as() - alias a route for later use', () => {
-    // Alias the route to wait for its response
-    cy.server();
-    cy.route('GET', 'comments/*').as('getComment');
-
-    // we have code that gets a comment when
-    // the button is clicked in scripts.js
-    cy.get('.network-btn').click();
-
-    // https://on.cypress.io/wait
-    cy.wait('@getComment').its('status').should('eq', 200);
-  });
-});

cypress/examples/assertions.spec.js

@@ -1,169 +0,0 @@
-/// <reference types="Cypress" />
-
-context('Assertions', () => {
-  beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/assertions');
-  });
-
-  describe('Implicit Assertions', () => {
-    it('.should() - make an assertion about the current subject', () => {
-      // https://on.cypress.io/should
-      cy.get('.assertion-table')
-        .find('tbody tr:last')
-        .should('have.class', 'success')
-        .find('td')
-        .first()
-        // checking the text of the <td> element in various ways
-        .should('have.text', 'Column content')
-        .should('contain', 'Column content')
-        .should('have.html', 'Column content')
-        // chai-jquery uses "is()" to check if element matches selector
-        .should('match', 'td')
-        // to match text content against a regular expression
-        // first need to invoke jQuery method text()
-        // and then match using regular expression
-        .invoke('text')
-        .should('match', /column content/i);
-
-      // a better way to check element's text content against a regular expression
-      // is to use "cy.contains"
-      // https://on.cypress.io/contains
-      cy.get('.assertion-table')
-        .find('tbody tr:last')
-        // finds first <td> element with text content matching regular expression
-        .contains('td', /column content/i)
-        .should('be.visible');
-
-      // for more information about asserting element's text
-      // see https://on.cypress.io/using-cypress-faq#How-do-I-get-an-element’s-text-contents
-    });
-
-    it('.and() - chain multiple assertions together', () => {
-      // https://on.cypress.io/and
-      cy.get('.assertions-link')
-        .should('have.class', 'active')
-        .and('have.attr', 'href')
-        .and('include', 'cypress.io');
-    });
-  });
-
-  describe('Explicit Assertions', () => {
-    // https://on.cypress.io/assertions
-    it('expect - make an assertion about a specified subject', () => {
-      // We can use Chai's BDD style assertions
-      expect(true).to.be.true;
-      const o = { foo: 'bar' };
-
-      expect(o).to.equal(o);
-      expect(o).to.deep.equal({ foo: 'bar' });
-      // matching text using regular expression
-      expect('FooBar').to.match(/bar$/i);
-    });
-
-    it('pass your own callback function to should()', () => {
-      // Pass a function to should that can have any number
-      // of explicit assertions within it.
-      // The ".should(cb)" function will be retried
-      // automatically until it passes all your explicit assertions or times out.
-      cy.get('.assertions-p')
-        .find('p')
-        .should(($p) => {
-          // https://on.cypress.io/$
-          // return an array of texts from all of the p's
-          // @ts-ignore TS6133 unused variable
-          const texts = $p.map((i, el) => Cypress.$(el).text());
-
-          // jquery map returns jquery object
-          // and .get() convert this to simple array
-          const paragraphs = texts.get();
-
-          // array should have length of 3
-          expect(paragraphs, 'has 3 paragraphs').to.have.length(3);
-
-          // use second argument to expect(...) to provide clear
-          // message with each assertion
-          expect(paragraphs, 'has expected text in each paragraph').to.deep.eq([
-            'Some text from first p',
-            'More text from second p',
-            'And even more text from third p',
-          ]);
-        });
-    });
-
-    it('finds element by class name regex', () => {
-      cy.get('.docs-header')
-        .find('div')
-        // .should(cb) callback function will be retried
-        .should(($div) => {
-          expect($div).to.have.length(1);
-
-          const className = $div[0].className;
-
-          expect(className).to.match(/heading-/);
-        })
-        // .then(cb) callback is not retried,
-        // it either passes or fails
-        .then(($div) => {
-          expect($div, 'text content').to.have.text('Introduction');
-        });
-    });
-
-    it('can throw any error', () => {
-      cy.get('.docs-header')
-        .find('div')
-        .should(($div) => {
-          if ($div.length !== 1) {
-            // you can throw your own errors
-            throw new Error('Did not find 1 element');
-          }
-
-          const className = $div[0].className;
-
-          if (!className.match(/heading-/)) {
-            throw new Error(`Could not find class "heading-" in ${className}`);
-          }
-        });
-    });
-
-    it('matches unknown text between two elements', () => {
-      /**
-       * Text from the first element.
-       *
-       * @type {string}
-       */
-      let text;
-
-      /**
-       * Normalizes passed text, useful before comparing text with spaces and different capitalization.
-       *
-       * @param {string} s Text to normalize
-       */
-      const normalizeText = (s) => s.replace(/\s/g, '').toLowerCase();
-
-      cy.get('.two-elements')
-        .find('.first')
-        .then(($first) => {
-          // save text from the first element
-          text = normalizeText($first.text());
-        });
-
-      cy.get('.two-elements')
-        .find('.second')
-        .should(($div) => {
-          // we can massage text before comparing
-          const secondText = normalizeText($div.text());
-
-          expect(secondText, 'second text').to.equal(text);
-        });
-    });
-
-    it('assert - assert shape of an object', () => {
-      const person = {
-        name: 'Joe',
-        age: 20,
-      };
-
-      assert.isObject(person, 'value is object');
-    });
-  });
-});

cypress/examples/connectors.spec.js

@@ -1,55 +0,0 @@
-/// <reference types="Cypress" />
-
-context('Connectors', () => {
-  beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/connectors');
-  });
-
-  it('.each() - iterate over an array of elements', () => {
-    // https://on.cypress.io/each
-    cy.get('.connectors-each-ul>li').each(($el, index, $list) => {
-      console.log($el, index, $list);
-    });
-  });
-
-  it('.its() - get properties on the current subject', () => {
-    // https://on.cypress.io/its
-    cy.get('.connectors-its-ul>li')
-      // calls the 'length' property yielding that value
-      .its('length')
-      .should('be.gt', 2);
-  });
-
-  it('.invoke() - invoke a function on the current subject', () => {
-    // our div is hidden in our script.js
-    // $('.connectors-div').hide()
-
-    // https://on.cypress.io/invoke
-    cy.get('.connectors-div')
-      .should('be.hidden')
-      // call the jquery method 'show' on the 'div.container'
-      .invoke('show')
-      .should('be.visible');
-  });
-
-  it('.spread() - spread an array as individual args to callback function', () => {
-    // https://on.cypress.io/spread
-    const arr = ['foo', 'bar', 'baz'];
-
-    cy.wrap(arr).spread((foo, bar, baz) => {
-      expect(foo).to.eq('foo');
-      expect(bar).to.eq('bar');
-      expect(baz).to.eq('baz');
-    });
-  });
-
-  it('.then() - invoke a callback function with the current subject', () => {
-    // https://on.cypress.io/then
-    cy.get('.connectors-list > li').then(($lis) => {
-      expect($lis, '3 items').to.have.length(3);
-      expect($lis.eq(0), 'first item').to.contain('Walk the dog');
-      expect($lis.eq(1), 'second item').to.contain('Feed the cat');
-      expect($lis.eq(2), 'third item').to.contain('Write JavaScript');
-    });
-  });
-});

cypress/examples/cookies.spec.js

@@ -1,79 +0,0 @@
-/// <reference types="Cypress" />
-
-context('Cookies', () => {
-  beforeEach(() => {
-    Cypress.Cookies.debug(true);
-
-    cy.visit('https://example.cypress.io/commands/cookies');
-
-    // clear cookies again after visiting to remove
-    // any 3rd party cookies picked up such as cloudflare
-    cy.clearCookies();
-  });
-
-  it('cy.getCookie() - get a browser cookie', () => {
-    // https://on.cypress.io/getcookie
-    cy.get('#getCookie .set-a-cookie').click();
-
-    // cy.getCookie() yields a cookie object
-    cy.getCookie('token').should('have.property', 'value', '123ABC');
-  });
-
-  it('cy.getCookies() - get browser cookies', () => {
-    // https://on.cypress.io/getcookies
-    cy.getCookies().should('be.empty');
-
-    cy.get('#getCookies .set-a-cookie').click();
-
-    // cy.getCookies() yields an array of cookies
-    cy.getCookies()
-      .should('have.length', 1)
-      .should((cookies) => {
-        // each cookie has these properties
-        expect(cookies[0]).to.have.property('name', 'token');
-        expect(cookies[0]).to.have.property('value', '123ABC');
-        expect(cookies[0]).to.have.property('httpOnly', false);
-        expect(cookies[0]).to.have.property('secure', false);
-        expect(cookies[0]).to.have.property('domain');
-        expect(cookies[0]).to.have.property('path');
-      });
-  });
-
-  it('cy.setCookie() - set a browser cookie', () => {
-    // https://on.cypress.io/setcookie
-    cy.getCookies().should('be.empty');
-
-    cy.setCookie('foo', 'bar');
-
-    // cy.getCookie() yields a cookie object
-    cy.getCookie('foo').should('have.property', 'value', 'bar');
-  });
-
-  it('cy.clearCookie() - clear a browser cookie', () => {
-    // https://on.cypress.io/clearcookie
-    cy.getCookie('token').should('be.null');
-
-    cy.get('#clearCookie .set-a-cookie').click();
-
-    cy.getCookie('token').should('have.property', 'value', '123ABC');
-
-    // cy.clearCookies() yields null
-    cy.clearCookie('token').should('be.null');
-
-    cy.getCookie('token').should('be.null');
-  });
-
-  it('cy.clearCookies() - clear browser cookies', () => {
-    // https://on.cypress.io/clearcookies
-    cy.getCookies().should('be.empty');
-
-    cy.get('#clearCookies .set-a-cookie').click();
-
-    cy.getCookies().should('have.length', 1);
-
-    // cy.clearCookies() yields null
-    cy.clearCookies();
-
-    cy.getCookies().should('be.empty');
-  });
-});

cypress/examples/cypress_api.spec.js

@@ -1,225 +0,0 @@
-/// <reference types="Cypress" />
-
-context('Cypress.Commands', () => {
-  beforeEach(() => {
-    cy.visit('https://example.cypress.io/cypress-api');
-  });
-
-  // https://on.cypress.io/custom-commands
-
-  it('.add() - create a custom command', () => {
-    Cypress.Commands.add(
-      'console',
-      {
-        prevSubject: true,
-      },
-      (subject, method) => {
-        // the previous subject is automatically received
-        // and the commands arguments are shifted
-
-        // allow us to change the console method used
-        method = method || 'log';
-
-        // log the subject to the console
-        // @ts-ignore TS7017
-        console[method]('The subject is', subject);
-
-        // whatever we return becomes the new subject
-        // we don't want to change the subject so
-        // we return whatever was passed in
-        return subject;
-      }
-    );
-
-    // @ts-ignore TS2339
-    cy.get('button')
-      .console('info')
-      .then(($button) => {
-        // subject is still $button
-      });
-  });
-});
-
-context('Cypress.Cookies', () => {
-  beforeEach(() => {
-    cy.visit('https://example.cypress.io/cypress-api');
-  });
-
-  // https://on.cypress.io/cookies
-  it('.debug() - enable or disable debugging', () => {
-    Cypress.Cookies.debug(true);
-
-    // Cypress will now log in the console when
-    // cookies are set or cleared
-    cy.setCookie('fakeCookie', '123ABC');
-    cy.clearCookie('fakeCookie');
-    cy.setCookie('fakeCookie', '123ABC');
-    cy.clearCookie('fakeCookie');
-    cy.setCookie('fakeCookie', '123ABC');
-  });
-
-  it('.preserveOnce() - preserve cookies by key', () => {
-    // normally cookies are reset after each test
-    cy.getCookie('fakeCookie').should('not.be.ok');
-
-    // preserving a cookie will not clear it when
-    // the next test starts
-    cy.setCookie('lastCookie', '789XYZ');
-    Cypress.Cookies.preserveOnce('lastCookie');
-  });
-
-  it('.defaults() - set defaults for all cookies', () => {
-    // now any cookie with the name 'session_id' will
-    // not be cleared before each new test runs
-    Cypress.Cookies.defaults({
-      whitelist: 'session_id',
-    });
-  });
-});
-
-context('Cypress.Server', () => {
-  beforeEach(() => {
-    cy.visit('https://example.cypress.io/cypress-api');
-  });
-
-  // Permanently override server options for
-  // all instances of cy.server()
-
-  // https://on.cypress.io/cypress-server
-  it('.defaults() - change default config of server', () => {
-    Cypress.Server.defaults({
-      delay: 0,
-      force404: false,
-    });
-  });
-});
-
-context('Cypress.arch', () => {
-  beforeEach(() => {
-    cy.visit('https://example.cypress.io/cypress-api');
-  });
-
-  it('Get CPU architecture name of underlying OS', () => {
-    // https://on.cypress.io/arch
-    expect(Cypress.arch).to.exist;
-  });
-});
-
-context('Cypress.config()', () => {
-  beforeEach(() => {
-    cy.visit('https://example.cypress.io/cypress-api');
-  });
-
-  it('Get and set configuration options', () => {
-    // https://on.cypress.io/config
-    let myConfig = Cypress.config();
-
-    expect(myConfig).to.have.property('animationDistanceThreshold', 5);
-    expect(myConfig).to.have.property('baseUrl', null);
-    expect(myConfig).to.have.property('defaultCommandTimeout', 4000);
-    expect(myConfig).to.have.property('requestTimeout', 5000);
-    expect(myConfig).to.have.property('responseTimeout', 30000);
-    expect(myConfig).to.have.property('viewportHeight', 660);
-    expect(myConfig).to.have.property('viewportWidth', 1000);
-    expect(myConfig).to.have.property('pageLoadTimeout', 60000);
-    expect(myConfig).to.have.property('waitForAnimations', true);
-
-    expect(Cypress.config('pageLoadTimeout')).to.eq(60000);
-
-    // this will change the config for the rest of your tests!
-    Cypress.config('pageLoadTimeout', 20000);
-
-    expect(Cypress.config('pageLoadTimeout')).to.eq(20000);
-
-    Cypress.config('pageLoadTimeout', 60000);
-  });
-});
-
-context('Cypress.dom', () => {
-  beforeEach(() => {
-    cy.visit('https://example.cypress.io/cypress-api');
-  });
-
-  // https://on.cypress.io/dom
-  it('.isHidden() - determine if a DOM element is hidden', () => {
-    let hiddenP = Cypress.$('.dom-p p.hidden').get(0);
-    let visibleP = Cypress.$('.dom-p p.visible').get(0);
-
-    // our first paragraph has css class 'hidden'
-    expect(Cypress.dom.isHidden(hiddenP)).to.be.true;
-    expect(Cypress.dom.isHidden(visibleP)).to.be.false;
-  });
-});
-
-context('Cypress.env()', () => {
-  beforeEach(() => {
-    cy.visit('https://example.cypress.io/cypress-api');
-  });
-
-  // We can set environment variables for highly dynamic values
-
-  // https://on.cypress.io/environment-variables
-  it('Get environment variables', () => {
-    // https://on.cypress.io/env
-    // set multiple environment variables
-    Cypress.env({
-      host: 'veronica.dev.local',
-      api_server: 'http://localhost:8888/v1/',
-    });
-
-    // get environment variable
-    expect(Cypress.env('host')).to.eq('veronica.dev.local');
-
-    // set environment variable
-    Cypress.env('api_server', 'http://localhost:8888/v2/');
-    expect(Cypress.env('api_server')).to.eq('http://localhost:8888/v2/');
-
-    // get all environment variable
-    expect(Cypress.env()).to.have.property('host', 'veronica.dev.local');
-    expect(Cypress.env()).to.have.property('api_server', 'http://localhost:8888/v2/');
-  });
-});
-
-context('Cypress.log', () => {
-  beforeEach(() => {
-    cy.visit('https://example.cypress.io/cypress-api');
-  });
-
-  it('Control what is printed to the Command Log', () => {
-    // https://on.cypress.io/cypress-log
-  });
-});
-
-context('Cypress.platform', () => {
-  beforeEach(() => {
-    cy.visit('https://example.cypress.io/cypress-api');
-  });
-
-  it('Get underlying OS name', () => {
-    // https://on.cypress.io/platform
-    expect(Cypress.platform).to.be.exist;
-  });
-});
-
-context('Cypress.version', () => {
-  beforeEach(() => {
-    cy.visit('https://example.cypress.io/cypress-api');
-  });
-
-  it('Get current version of Cypress being run', () => {
-    // https://on.cypress.io/version
-    expect(Cypress.version).to.be.exist;
-  });
-});
-
-context('Cypress.spec', () => {
-  beforeEach(() => {
-    cy.visit('https://example.cypress.io/cypress-api');
-  });
-
-  it('Get current spec information', () => {
-    // https://on.cypress.io/spec
-    // wrap the object so we can inspect it easily by clicking in the command log
-    cy.wrap(Cypress.spec).should('have.keys', ['name', 'relative', 'absolute']);
-  });
-});

cypress/examples/files.spec.js

@@ -1,114 +0,0 @@
-/// <reference types="Cypress" />
-
-/// JSON fixture file can be loaded directly using
-// the built-in JavaScript bundler
-// @ts-ignore
-const requiredExample = require('../../fixtures/example');
-
-context('Files', () => {
-  beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/files');
-  });
-
-  beforeEach(() => {
-    // load example.json fixture file and store
-    // in the test context object
-    cy.fixture('example.json').as('example');
-  });
-
-  it('cy.fixture() - load a fixture', () => {
-    // https://on.cypress.io/fixture
-
-    // Instead of writing a response inline you can
-    // use a fixture file's content.
-
-    cy.server();
-    cy.fixture('example.json').as('comment');
-    // when application makes an Ajax request matching "GET comments/*"
-    // Cypress will intercept it and reply with object
-    // from the "comment" alias
-    cy.route('GET', 'comments/*', '@comment').as('getComment');
-
-    // we have code that gets a comment when
-    // the button is clicked in scripts.js
-    cy.get('.fixture-btn').click();
-
-    cy.wait('@getComment')
-      .its('responseBody')
-      .should('have.property', 'name')
-      .and('include', 'Using fixtures to represent data');
-
-    // you can also just write the fixture in the route
-    cy.route('GET', 'comments/*', 'fixture:example.json').as('getComment');
-
-    // we have code that gets a comment when
-    // the button is clicked in scripts.js
-    cy.get('.fixture-btn').click();
-
-    cy.wait('@getComment')
-      .its('responseBody')
-      .should('have.property', 'name')
-      .and('include', 'Using fixtures to represent data');
-
-    // or write fx to represent fixture
-    // by default it assumes it's .json
-    cy.route('GET', 'comments/*', 'fx:example').as('getComment');
-
-    // we have code that gets a comment when
-    // the button is clicked in scripts.js
-    cy.get('.fixture-btn').click();
-
-    cy.wait('@getComment')
-      .its('responseBody')
-      .should('have.property', 'name')
-      .and('include', 'Using fixtures to represent data');
-  });
-
-  it('cy.fixture() or require - load a fixture', function () {
-    // we are inside the "function () { ... }"
-    // callback and can use test context object "this"
-    // "this.example" was loaded in "beforeEach" function callback
-    expect(this.example, 'fixture in the test context').to.deep.equal(requiredExample);
-
-    // or use "cy.wrap" and "should('deep.equal', ...)" assertion
-    // @ts-ignore
-    cy.wrap(this.example, 'fixture vs require').should('deep.equal', requiredExample);
-  });
-
-  it('cy.readFile() - read a files contents', () => {
-    // https://on.cypress.io/readfile
-
-    // You can read a file and yield its contents
-    // The filePath is relative to your project's root.
-    cy.readFile('cypress.json').then((json) => {
-      expect(json).to.be.an('object');
-    });
-  });
-
-  it('cy.writeFile() - write to a file', () => {
-    // https://on.cypress.io/writefile
-
-    // You can write to a file
-
-    // Use a response from a request to automatically
-    // generate a fixture file for use later
-    cy.request('https://jsonplaceholder.cypress.io/users').then((response) => {
-      cy.writeFile('cypress/fixtures/users.json', response.body);
-    });
-    cy.fixture('users').should((users) => {
-      expect(users[0].name).to.exist;
-    });
-
-    // JavaScript arrays and objects are stringified
-    // and formatted into text.
-    cy.writeFile('cypress/fixtures/profile.json', {
-      id: 8739,
-      name: 'Jane',
-      email: 'jane@example.com',
-    });
-
-    cy.fixture('profile').should((profile) => {
-      expect(profile.name).to.eq('Jane');
-    });
-  });
-});

cypress/examples/local_storage.spec.js

@@ -1,58 +0,0 @@
-/// <reference types="Cypress" />
-
-context('Local Storage', () => {
-  beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/local-storage');
-  });
-  // Although local storage is automatically cleared
-  // in between tests to maintain a clean state
-  // sometimes we need to clear the local storage manually
-
-  it('cy.clearLocalStorage() - clear all data in local storage', () => {
-    // https://on.cypress.io/clearlocalstorage
-    cy.get('.ls-btn')
-      .click()
-      .should(() => {
-        expect(localStorage.getItem('prop1')).to.eq('red');
-        expect(localStorage.getItem('prop2')).to.eq('blue');
-        expect(localStorage.getItem('prop3')).to.eq('magenta');
-      });
-
-    // clearLocalStorage() yields the localStorage object
-    cy.clearLocalStorage().should((ls) => {
-      expect(ls.getItem('prop1')).to.be.null;
-      expect(ls.getItem('prop2')).to.be.null;
-      expect(ls.getItem('prop3')).to.be.null;
-    });
-
-    // Clear key matching string in Local Storage
-    cy.get('.ls-btn')
-      .click()
-      .should(() => {
-        expect(localStorage.getItem('prop1')).to.eq('red');
-        expect(localStorage.getItem('prop2')).to.eq('blue');
-        expect(localStorage.getItem('prop3')).to.eq('magenta');
-      });
-
-    cy.clearLocalStorage('prop1').should((ls) => {
-      expect(ls.getItem('prop1')).to.be.null;
-      expect(ls.getItem('prop2')).to.eq('blue');
-      expect(ls.getItem('prop3')).to.eq('magenta');
-    });
-
-    // Clear keys matching regex in Local Storage
-    cy.get('.ls-btn')
-      .click()
-      .should(() => {
-        expect(localStorage.getItem('prop1')).to.eq('red');
-        expect(localStorage.getItem('prop2')).to.eq('blue');
-        expect(localStorage.getItem('prop3')).to.eq('magenta');
-      });
-
-    cy.clearLocalStorage(/prop1|2/).should((ls) => {
-      expect(ls.getItem('prop1')).to.be.null;
-      expect(ls.getItem('prop2')).to.be.null;
-      expect(ls.getItem('prop3')).to.eq('magenta');
-    });
-  });
-});

cypress/examples/location.spec.js

@@ -1,32 +0,0 @@
-/// <reference types="Cypress" />
-
-context('Location', () => {
-  beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/location');
-  });
-
-  it('cy.hash() - get the current URL hash', () => {
-    // https://on.cypress.io/hash
-    cy.hash().should('be.empty');
-  });
-
-  it('cy.location() - get window.location', () => {
-    // https://on.cypress.io/location
-    cy.location().should((location) => {
-      expect(location.hash).to.be.empty;
-      expect(location.href).to.eq('https://example.cypress.io/commands/location');
-      expect(location.host).to.eq('example.cypress.io');
-      expect(location.hostname).to.eq('example.cypress.io');
-      expect(location.origin).to.eq('https://example.cypress.io');
-      expect(location.pathname).to.eq('/commands/location');
-      expect(location.port).to.eq('');
-      expect(location.protocol).to.eq('https:');
-      expect(location.search).to.be.empty;
-    });
-  });
-
-  it('cy.url() - get the current URL', () => {
-    // https://on.cypress.io/url
-    cy.url().should('eq', 'https://example.cypress.io/commands/location');
-  });
-});

cypress/examples/misc.spec.js

@@ -1,77 +0,0 @@
-/// <reference types="Cypress" />
-
-context('Misc', () => {
-  beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/misc');
-  });
-
-  it('.end() - end the command chain', () => {
-    // https://on.cypress.io/end
-
-    // cy.end is useful when you want to end a chain of commands
-    // and force Cypress to re-query from the root element
-    cy.get('.misc-table').within(() => {
-      // ends the current chain and yields null
-      cy.contains('Cheryl').click().end();
-
-      // queries the entire table again
-      cy.contains('Charles').click();
-    });
-  });
-
-  it('cy.exec() - execute a system command', () => {
-    // https://on.cypress.io/exec
-
-    // execute a system command.
-    // so you can take actions necessary for
-    // your test outside the scope of Cypress.
-    cy.exec('echo Jane Lane').its('stdout').should('contain', 'Jane Lane');
-
-    // we can use Cypress.platform string to
-    // select appropriate command
-    // https://on.cypress/io/platform
-    cy.log(`Platform ${Cypress.platform} architecture ${Cypress.arch}`);
-
-    if (Cypress.platform === 'win32') {
-      cy.exec('print cypress.json').its('stderr').should('be.empty');
-    } else {
-      cy.exec('cat cypress.json').its('stderr').should('be.empty');
-
-      cy.exec('pwd').its('code').should('eq', 0);
-    }
-  });
-
-  it('cy.focused() - get the DOM element that has focus', () => {
-    // https://on.cypress.io/focused
-    cy.get('.misc-form').find('#name').click();
-    cy.focused().should('have.id', 'name');
-
-    cy.get('.misc-form').find('#description').click();
-    cy.focused().should('have.id', 'description');
-  });
-
-  context('Cypress.Screenshot', function () {
-    it('cy.screenshot() - take a screenshot', () => {
-      // https://on.cypress.io/screenshot
-      cy.screenshot('my-image');
-    });
-
-    it('Cypress.Screenshot.defaults() - change default config of screenshots', function () {
-      Cypress.Screenshot.defaults({
-        blackout: ['.foo'],
-        capture: 'viewport',
-        clip: { x: 0, y: 0, width: 200, height: 200 },
-        scale: false,
-        disableTimersAndAnimations: true,
-        screenshotOnRunFailure: true,
-        beforeScreenshot() {},
-        afterScreenshot() {},
-      });
-    });
-  });
-
-  it('cy.wrap() - wrap an object', () => {
-    // https://on.cypress.io/wrap
-    cy.wrap({ foo: 'bar' }).should('have.property', 'foo').and('include', 'bar');
-  });
-});

cypress/examples/navigation.spec.js

@@ -1,56 +0,0 @@
-/// <reference types="Cypress" />
-
-context('Navigation', () => {
-  beforeEach(() => {
-    cy.visit('https://example.cypress.io');
-    cy.get('.navbar-nav').contains('Commands').click();
-    cy.get('.dropdown-menu').contains('Navigation').click();
-  });
-
-  it("cy.go() - go back or forward in the browser's history", () => {
-    // https://on.cypress.io/go
-
-    cy.location('pathname').should('include', 'navigation');
-
-    cy.go('back');
-    cy.location('pathname').should('not.include', 'navigation');
-
-    cy.go('forward');
-    cy.location('pathname').should('include', 'navigation');
-
-    // clicking back
-    cy.go(-1);
-    cy.location('pathname').should('not.include', 'navigation');
-
-    // clicking forward
-    cy.go(1);
-    cy.location('pathname').should('include', 'navigation');
-  });
-
-  it('cy.reload() - reload the page', () => {
-    // https://on.cypress.io/reload
-    cy.reload();
-
-    // reload the page without using the cache
-    cy.reload(true);
-  });
-
-  it('cy.visit() - visit a remote url', () => {
-    // https://on.cypress.io/visit
-
-    // Visit any sub-domain of your current domain
-
-    // Pass options to the visit
-    cy.visit('https://example.cypress.io/commands/navigation', {
-      timeout: 50000, // increase total time for the visit to resolve
-      onBeforeLoad(contentWindow) {
-        // contentWindow is the remote page's window object
-        expect(typeof contentWindow === 'object').to.be.true;
-      },
-      onLoad(contentWindow) {
-        // contentWindow is the remote page's window object
-        expect(typeof contentWindow === 'object').to.be.true;
-      },
-    });
-  });
-});

cypress/examples/network_requests.spec.js

@@ -1,192 +0,0 @@
-/// <reference types="Cypress" />
-
-context('Network Requests', () => {
-  beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/network-requests');
-  });
-
-  // Manage AJAX / XHR requests in your app
-
-  it('cy.server() - control behavior of network requests and responses', () => {
-    // https://on.cypress.io/server
-
-    cy.server().should((server) => {
-      // the default options on server
-      // you can override any of these options
-      expect(server.delay).to.eq(0);
-      expect(server.method).to.eq('GET');
-      expect(server.status).to.eq(200);
-      expect(server.headers).to.be.null;
-      expect(server.response).to.be.null;
-      expect(server.onRequest).to.be.undefined;
-      expect(server.onResponse).to.be.undefined;
-      expect(server.onAbort).to.be.undefined;
-
-      // These options control the server behavior
-      // affecting all requests
-
-      // pass false to disable existing route stubs
-      expect(server.enable).to.be.true;
-      // forces requests that don't match your routes to 404
-      expect(server.force404).to.be.false;
-      // whitelists requests from ever being logged or stubbed
-      expect(server.whitelist).to.be.a('function');
-    });
-
-    cy.server({
-      method: 'POST',
-      delay: 1000,
-      status: 422,
-      response: {},
-    });
-
-    // any route commands will now inherit the above options
-    // from the server. anything we pass specifically
-    // to route will override the defaults though.
-  });
-
-  it('cy.request() - make an XHR request', () => {
-    // https://on.cypress.io/request
-    cy.request('https://jsonplaceholder.cypress.io/comments').should((response) => {
-      expect(response.status).to.eq(200);
-      expect(response.body).to.have.length(500);
-      expect(response).to.have.property('headers');
-      expect(response).to.have.property('duration');
-    });
-  });
-
-  it('cy.request() - verify response using BDD syntax', () => {
-    cy.request('https://jsonplaceholder.cypress.io/comments').then((response) => {
-      // https://on.cypress.io/assertions
-      expect(response).property('status').to.equal(200);
-      expect(response).property('body').to.have.length(500);
-      expect(response).to.include.keys('headers', 'duration');
-    });
-  });
-
-  it('cy.request() with query parameters', () => {
-    // will execute request
-    // https://jsonplaceholder.cypress.io/comments?postId=1&id=3
-    cy.request({
-      url: 'https://jsonplaceholder.cypress.io/comments',
-      qs: {
-        postId: 1,
-        id: 3,
-      },
-    })
-      .its('body')
-      .should('be.an', 'array')
-      .and('have.length', 1)
-      .its('0') // yields first element of the array
-      .should('contain', {
-        postId: 1,
-        id: 3,
-      });
-  });
-
-  it('cy.request() - pass result to the second request', () => {
-    // first, let's find out the userId of the first user we have
-    cy.request('https://jsonplaceholder.cypress.io/users?_limit=1')
-      .its('body.0') // yields the first element of the returned list
-      .then((user) => {
-        expect(user).property('id').to.be.a('number');
-        // make a new post on behalf of the user
-        cy.request('POST', 'https://jsonplaceholder.cypress.io/posts', {
-          userId: user.id,
-          title: 'Cypress Test Runner',
-          body: 'Fast, easy and reliable testing for anything that runs in a browser.',
-        });
-      })
-      // note that the value here is the returned value of the 2nd request
-      // which is the new post object
-      .then((response) => {
-        expect(response).property('status').to.equal(201); // new entity created
-        expect(response).property('body').to.contain({
-          id: 101, // there are already 100 posts, so new entity gets id 101
-          title: 'Cypress Test Runner',
-        });
-        // we don't know the user id here - since it was in above closure
-        // so in this test just confirm that the property is there
-        expect(response.body).property('userId').to.be.a('number');
-      });
-  });
-
-  it('cy.request() - save response in the shared test context', () => {
-    // https://on.cypress.io/variables-and-aliases
-    cy.request('https://jsonplaceholder.cypress.io/users?_limit=1')
-      .its('body.0') // yields the first element of the returned list
-      .as('user') // saves the object in the test context
-      .then(function () {
-        // NOTE 👀
-        //  By the time this callback runs the "as('user')" command
-        //  has saved the user object in the test context.
-        //  To access the test context we need to use
-        //  the "function () { ... }" callback form,
-        //  otherwise "this" points at a wrong or undefined object!
-        cy.request('POST', 'https://jsonplaceholder.cypress.io/posts', {
-          userId: this.user.id,
-          title: 'Cypress Test Runner',
-          body: 'Fast, easy and reliable testing for anything that runs in a browser.',
-        })
-          .its('body')
-          .as('post'); // save the new post from the response
-      })
-      .then(function () {
-        // When this callback runs, both "cy.request" API commands have finished
-        // and the test context has "user" and "post" objects set.
-        // Let's verify them.
-        expect(this.post, 'post has the right user id').property('userId').to.equal(this.user.id);
-      });
-  });
-
-  it('cy.route() - route responses to matching requests', () => {
-    // https://on.cypress.io/route
-
-    let message = 'whoa, this comment does not exist';
-
-    cy.server();
-
-    // Listen to GET to comments/1
-    cy.route('GET', 'comments/*').as('getComment');
-
-    // we have code that gets a comment when
-    // the button is clicked in scripts.js
-    cy.get('.network-btn').click();
-
-    // https://on.cypress.io/wait
-    cy.wait('@getComment').its('status').should('eq', 200);
-
-    // Listen to POST to comments
-    cy.route('POST', '/comments').as('postComment');
-
-    // we have code that posts a comment when
-    // the button is clicked in scripts.js
-    cy.get('.network-post').click();
-    cy.wait('@postComment');
-
-    // get the route
-    cy.get('@postComment').should((xhr) => {
-      expect(xhr.requestBody).to.include('email');
-      expect(xhr.requestHeaders).to.have.property('Content-Type');
-      expect(xhr.responseBody).to.have.property('name', 'Using POST in cy.route()');
-    });
-
-    // Stub a response to PUT comments/ ****
-    cy.route({
-      method: 'PUT',
-      url: 'comments/*',
-      status: 404,
-      response: { error: message },
-      delay: 500,
-    }).as('putComment');
-
-    // we have code that puts a comment when
-    // the button is clicked in scripts.js
-    cy.get('.network-put').click();
-
-    cy.wait('@putComment');
-
-    // our 404 statusCode logic in scripts.js executed
-    cy.get('.network-put-comment').should('contain', message);
-  });
-});

cypress/examples/querying.spec.js

@@ -1,75 +0,0 @@
-/// <reference types="Cypress" />
-
-context('Querying', () => {
-  beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/querying');
-  });
-
-  // The most commonly used query is 'cy.get()', you can
-  // think of this like the '$' in jQuery
-
-  it('cy.get() - query DOM elements', () => {
-    // https://on.cypress.io/get
-
-    cy.get('#query-btn').should('contain', 'Button');
-
-    cy.get('.query-btn').should('contain', 'Button');
-
-    cy.get('#querying .well>button:first').should('contain', 'Button');
-    //              ↲
-    // Use CSS selectors just like jQuery
-
-    cy.get('[data-test-id="test-example"]').should('have.class', 'example');
-
-    // 'cy.get()' yields jQuery object, you can get its attribute
-    // by invoking `.attr()` method
-    cy.get('[data-test-id="test-example"]')
-      .invoke('attr', 'data-test-id')
-      .should('equal', 'test-example');
-
-    // or you can get element's CSS property
-    cy.get('[data-test-id="test-example"]').invoke('css', 'position').should('equal', 'static');
-
-    // or use assertions directly during 'cy.get()'
-    // https://on.cypress.io/assertions
-    cy.get('[data-test-id="test-example"]')
-      .should('have.attr', 'data-test-id', 'test-example')
-      .and('have.css', 'position', 'static');
-  });
-
-  it('cy.contains() - query DOM elements with matching content', () => {
-    // https://on.cypress.io/contains
-    cy.get('.query-list').contains('bananas').should('have.class', 'third');
-
-    // we can pass a regexp to `.contains()`
-    cy.get('.query-list').contains(/^b\w+/).should('have.class', 'third');
-
-    cy.get('.query-list').contains('apples').should('have.class', 'first');
-
-    // passing a selector to contains will
-    // yield the selector containing the text
-    cy.get('#querying').contains('ul', 'oranges').should('have.class', 'query-list');
-
-    cy.get('.query-button').contains('Save Form').should('have.class', 'btn');
-  });
-
-  it('.within() - query DOM elements within a specific element', () => {
-    // https://on.cypress.io/within
-    cy.get('.query-form').within(() => {
-      cy.get('input:first').should('have.attr', 'placeholder', 'Email');
-      cy.get('input:last').should('have.attr', 'placeholder', 'Password');
-    });
-  });
-
-  it('cy.root() - query the root DOM element', () => {
-    // https://on.cypress.io/root
-
-    // By default, root is the document
-    cy.root().should('match', 'html');
-
-    cy.get('.query-ul').within(() => {
-      // In this within, the root is now the ul DOM element
-      cy.root().should('have.class', 'query-ul');
-    });
-  });
-});

cypress/examples/spies_stubs_clocks.spec.js

@@ -1,94 +0,0 @@
-/// <reference types="Cypress" />
-
-context('Spies, Stubs, and Clock', () => {
-  it('cy.spy() - wrap a method in a spy', () => {
-    // https://on.cypress.io/spy
-    cy.visit('https://example.cypress.io/commands/spies-stubs-clocks');
-
-    const obj = {
-      foo() {},
-    };
-
-    const spy = cy.spy(obj, 'foo').as('anyArgs');
-
-    obj.foo();
-
-    expect(spy).to.be.called;
-  });
-
-  it('cy.spy() retries until assertions pass', () => {
-    cy.visit('https://example.cypress.io/commands/spies-stubs-clocks');
-
-    const obj = {
-      /**
-       * Prints the argument passed
-       *
-       * @param x {any}
-       */
-      foo(x) {
-        console.log('obj.foo called with', x);
-      },
-    };
-
-    cy.spy(obj, 'foo').as('foo');
-
-    setTimeout(() => {
-      obj.foo('first');
-    }, 500);
-
-    setTimeout(() => {
-      obj.foo('second');
-    }, 2500);
-
-    cy.get('@foo').should('have.been.calledTwice');
-  });
-
-  it('cy.stub() - create a stub and/or replace a function with stub', () => {
-    // https://on.cypress.io/stub
-    cy.visit('https://example.cypress.io/commands/spies-stubs-clocks');
-
-    const obj = {
-      /**
-       * Prints both arguments to the console
-       *
-       * @param a {string}
-       * @param b {string}
-       */
-      foo(a, b) {
-        console.log('a', a, 'b', b);
-      },
-    };
-
-    const stub = cy.stub(obj, 'foo').as('foo');
-
-    obj.foo('foo', 'bar');
-
-    expect(stub).to.be.called;
-  });
-
-  it('cy.clock() - control time in the browser', () => {
-    // https://on.cypress.io/clock
-
-    // create the date in UTC so its always the same
-    // no matter what local timezone the browser is running in
-    const now = new Date(Date.UTC(2017, 2, 14)).getTime();
-
-    cy.clock(now);
-    cy.visit('https://example.cypress.io/commands/spies-stubs-clocks');
-    cy.get('#clock-div').click().should('have.text', '1489449600');
-  });
-
-  it('cy.tick() - move time in the browser', () => {
-    // https://on.cypress.io/tick
-
-    // create the date in UTC so its always the same
-    // no matter what local timezone the browser is running in
-    const now = new Date(Date.UTC(2017, 2, 14)).getTime();
-
-    cy.clock(now);
-    cy.visit('https://example.cypress.io/commands/spies-stubs-clocks');
-    cy.get('#tick-div').click().should('have.text', '1489449600');
-    cy.tick(10000); // 10 seconds passed
-    cy.get('#tick-div').click().should('have.text', '1489449610');
-  });
-});

cypress/examples/traversal.spec.js

@@ -1,97 +0,0 @@
-/// <reference types="Cypress" />
-
-context('Traversal', () => {
-  beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/traversal');
-  });
-
-  it('.children() - get child DOM elements', () => {
-    // https://on.cypress.io/children
-    cy.get('.traversal-breadcrumb').children('.active').should('contain', 'Data');
-  });
-
-  it('.closest() - get closest ancestor DOM element', () => {
-    // https://on.cypress.io/closest
-    cy.get('.traversal-badge').closest('ul').should('have.class', 'list-group');
-  });
-
-  it('.eq() - get a DOM element at a specific index', () => {
-    // https://on.cypress.io/eq
-    cy.get('.traversal-list>li').eq(1).should('contain', 'siamese');
-  });
-
-  it('.filter() - get DOM elements that match the selector', () => {
-    // https://on.cypress.io/filter
-    cy.get('.traversal-nav>li').filter('.active').should('contain', 'About');
-  });
-
-  it('.find() - get descendant DOM elements of the selector', () => {
-    // https://on.cypress.io/find
-    cy.get('.traversal-pagination').find('li').find('a').should('have.length', 7);
-  });
-
-  it('.first() - get first DOM element', () => {
-    // https://on.cypress.io/first
-    cy.get('.traversal-table td').first().should('contain', '1');
-  });
-
-  it('.last() - get last DOM element', () => {
-    // https://on.cypress.io/last
-    cy.get('.traversal-buttons .btn').last().should('contain', 'Submit');
-  });
-
-  it('.next() - get next sibling DOM element', () => {
-    // https://on.cypress.io/next
-    cy.get('.traversal-ul').contains('apples').next().should('contain', 'oranges');
-  });
-
-  it('.nextAll() - get all next sibling DOM elements', () => {
-    // https://on.cypress.io/nextall
-    cy.get('.traversal-next-all').contains('oranges').nextAll().should('have.length', 3);
-  });
-
-  it('.nextUntil() - get next sibling DOM elements until next el', () => {
-    // https://on.cypress.io/nextuntil
-    cy.get('#veggies').nextUntil('#nuts').should('have.length', 3);
-  });
-
-  it('.not() - remove DOM elements from set of DOM elements', () => {
-    // https://on.cypress.io/not
-    cy.get('.traversal-disabled .btn').not('[disabled]').should('not.contain', 'Disabled');
-  });
-
-  it('.parent() - get parent DOM element from DOM elements', () => {
-    // https://on.cypress.io/parent
-    cy.get('.traversal-mark').parent().should('contain', 'Morbi leo risus');
-  });
-
-  it('.parents() - get parent DOM elements from DOM elements', () => {
-    // https://on.cypress.io/parents
-    cy.get('.traversal-cite').parents().should('match', 'blockquote');
-  });
-
-  it('.parentsUntil() - get parent DOM elements from DOM elements until el', () => {
-    // https://on.cypress.io/parentsuntil
-    cy.get('.clothes-nav').find('.active').parentsUntil('.clothes-nav').should('have.length', 2);
-  });
-
-  it('.prev() - get previous sibling DOM element', () => {
-    // https://on.cypress.io/prev
-    cy.get('.birds').find('.active').prev().should('contain', 'Lorikeets');
-  });
-
-  it('.prevAll() - get all previous sibling DOM elements', () => {
-    // https://on.cypress.io/prevAll
-    cy.get('.fruits-list').find('.third').prevAll().should('have.length', 2);
-  });
-
-  it('.prevUntil() - get all previous sibling DOM elements until el', () => {
-    // https://on.cypress.io/prevUntil
-    cy.get('.foods-list').find('#nuts').prevUntil('#veggies').should('have.length', 3);
-  });
-
-  it('.siblings() - get all sibling DOM elements', () => {
-    // https://on.cypress.io/siblings
-    cy.get('.traversal-pills .active').siblings().should('have.length', 2);
-  });
-});

cypress/examples/utilities.spec.js

@@ -1,129 +0,0 @@
-/// <reference types="Cypress" />
-
-context('Utilities', () => {
-  beforeEach(() => {
-    cy.visit('https://example.cypress.io/utilities');
-  });
-
-  it('Cypress._ - call a lodash method', () => {
-    // https://on.cypress.io/_
-    cy.request('https://jsonplaceholder.cypress.io/users').then((response) => {
-      let ids = Cypress._.chain(response.body).map('id').take(3).value();
-
-      expect(ids).to.deep.eq([1, 2, 3]);
-    });
-  });
-
-  it('Cypress.$ - call a jQuery method', () => {
-    // https://on.cypress.io/$
-    let $li = Cypress.$('.utility-jquery li:first');
-
-    cy.wrap($li).should('not.have.class', 'active').click().should('have.class', 'active');
-  });
-
-  it('Cypress.Blob - blob utilities and base64 string conversion', () => {
-    // https://on.cypress.io/blob
-    cy.get('.utility-blob').then(($div) =>
-      // https://github.com/nolanlawson/blob-util#imgSrcToDataURL
-      // get the dataUrl string for the javascript-logo
-      Cypress.Blob.imgSrcToDataURL(
-        'https://example.cypress.io/assets/img/javascript-logo.png',
-        undefined,
-        'anonymous'
-      ).then((dataUrl) => {
-        // create an <img> element and set its src to the dataUrl
-        let img = Cypress.$('<img />', { src: dataUrl });
-
-        // need to explicitly return cy here since we are initially returning
-        // the Cypress.Blob.imgSrcToDataURL promise to our test
-        // append the image
-        $div.append(img);
-
-        cy.get('.utility-blob img').click().should('have.attr', 'src', dataUrl);
-      })
-    );
-  });
-
-  it('Cypress.minimatch - test out glob patterns against strings', () => {
-    // https://on.cypress.io/minimatch
-    let matching = Cypress.minimatch('/users/1/comments', '/users/*/comments', {
-      matchBase: true,
-    });
-
-    expect(matching, 'matching wildcard').to.be.true;
-
-    matching = Cypress.minimatch('/users/1/comments/2', '/users/*/comments', {
-      matchBase: true,
-    });
-    expect(matching, 'comments').to.be.false;
-
-    // ** matches against all downstream path segments
-    matching = Cypress.minimatch('/foo/bar/baz/123/quux?a=b&c=2', '/foo/**', {
-      matchBase: true,
-    });
-    expect(matching, 'comments').to.be.true;
-
-    // whereas * matches only the next path segment
-
-    matching = Cypress.minimatch('/foo/bar/baz/123/quux?a=b&c=2', '/foo/*', {
-      matchBase: false,
-    });
-    expect(matching, 'comments').to.be.false;
-  });
-
-  it('Cypress.moment() - format or parse dates using a moment method', () => {
-    // https://on.cypress.io/moment
-    const time = Cypress.moment().utc('2014-04-25T19:38:53.196Z').format('h:mm A');
-
-    expect(time).to.be.a('string');
-
-    cy.get('.utility-moment').contains('3:38 PM').should('have.class', 'badge');
-
-    // the time in the element should be between 3pm and 5pm
-    const start = Cypress.moment('3:00 PM', 'LT');
-    const end = Cypress.moment('5:00 PM', 'LT');
-
-    cy.get('.utility-moment .badge').should(($el) => {
-      // parse American time like "3:38 PM"
-      const m = Cypress.moment($el.text().trim(), 'LT');
-
-      // display hours + minutes + AM|PM
-      const f = 'h:mm A';
-
-      expect(
-        m.isBetween(start, end),
-        `${m.format(f)} should be between ${start.format(f)} and ${end.format(f)}`
-      ).to.be.true;
-    });
-  });
-
-  it('Cypress.Promise - instantiate a bluebird promise', () => {
-    // https://on.cypress.io/promise
-    let waited = false;
-
-    /** @returns Bluebird<string> */
-    function waitOneSecond() {
-      // return a promise that resolves after 1 second
-      // @ts-ignore TS2351 (new Cypress.Promise)
-      return new Cypress.Promise((resolve, reject) => {
-        setTimeout(() => {
-          // set waited to true
-          waited = true;
-
-          // resolve with 'foo' string
-          resolve('foo');
-        }, 1000);
-      });
-    }
-
-    cy.then(() =>
-      // return a promise to cy.then() that
-      // is awaited until it resolves
-      // @ts-ignore TS7006
-      waitOneSecond().then((str) => {
-        expect(str).to.eq('foo');
-        expect(waited).to.be.true;
-      })
-    );
-  });
-});

cypress/examples/viewport.spec.js

@@ -1,59 +0,0 @@
-/// <reference types="Cypress" />
-
-context('Viewport', () => {
-  beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/viewport');
-  });
-
-  it('cy.viewport() - set the viewport size and dimension', () => {
-    // https://on.cypress.io/viewport
-
-    cy.get('#navbar').should('be.visible');
-    cy.viewport(320, 480);
-
-    // the navbar should have collapse since our screen is smaller
-    cy.get('#navbar').should('not.be.visible');
-    cy.get('.navbar-toggle').should('be.visible').click();
-    cy.get('.nav').find('a').should('be.visible');
-
-    // lets see what our app looks like on a super large screen
-    cy.viewport(2999, 2999);
-
-    // cy.viewport() accepts a set of preset sizes
-    // to easily set the screen to a device's width and height
-
-    // We added a cy.wait() between each viewport change so you can see
-    // the change otherwise it is a little too fast to see :)
-
-    cy.viewport('macbook-15');
-    cy.wait(200);
-    cy.viewport('macbook-13');
-    cy.wait(200);
-    cy.viewport('macbook-11');
-    cy.wait(200);
-    cy.viewport('ipad-2');
-    cy.wait(200);
-    cy.viewport('ipad-mini');
-    cy.wait(200);
-    cy.viewport('iphone-6+');
-    cy.wait(200);
-    cy.viewport('iphone-6');
-    cy.wait(200);
-    cy.viewport('iphone-5');
-    cy.wait(200);
-    cy.viewport('iphone-4');
-    cy.wait(200);
-    cy.viewport('iphone-3');
-    cy.wait(200);
-
-    // cy.viewport() accepts an orientation for all presets
-    // the default orientation is 'portrait'
-    cy.viewport('ipad-2', 'portrait');
-    cy.wait(200);
-    cy.viewport('iphone-4', 'landscape');
-    cy.wait(200);
-
-    // The viewport will be reset back to the default dimensions
-    // in between tests (the  default can be set in cypress.json)
-  });
-});

cypress/examples/waiting.spec.js

@@ -1,33 +0,0 @@
-/// <reference types="Cypress" />
-
-context('Waiting', () => {
-  beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/waiting');
-  });
-  // BE CAREFUL of adding unnecessary wait times.
-  // https://on.cypress.io/best-practices#Unnecessary-Waiting
-
-  // https://on.cypress.io/wait
-  it('cy.wait() - wait for a specific amount of time', () => {
-    cy.get('.wait-input1').type('Wait 1000ms after typing');
-    cy.wait(1000);
-    cy.get('.wait-input2').type('Wait 1000ms after typing');
-    cy.wait(1000);
-    cy.get('.wait-input3').type('Wait 1000ms after typing');
-    cy.wait(1000);
-  });
-
-  it('cy.wait() - wait for a specific route', () => {
-    cy.server();
-
-    // Listen to GET to comments/1
-    cy.route('GET', 'comments/*').as('getComment');
-
-    // we have code that gets a comment when
-    // the button is clicked in scripts.js
-    cy.get('.network-btn').click();
-
-    // wait for GET comments/1
-    cy.wait('@getComment').its('status').should('eq', 200);
-  });
-});

cypress/examples/window.spec.js

@@ -1,22 +0,0 @@
-/// <reference types="Cypress" />
-
-context('Window', () => {
-  beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/window');
-  });
-
-  it('cy.window() - get the global window object', () => {
-    // https://on.cypress.io/window
-    cy.window().should('have.property', 'top');
-  });
-
-  it('cy.document() - get the document object', () => {
-    // https://on.cypress.io/document
-    cy.document().should('have.property', 'charset').and('eq', 'UTF-8');
-  });
-
-  it('cy.title() - get the title', () => {
-    // https://on.cypress.io/title
-    cy.title().should('include', 'Kitchen Sink');
-  });
-});

cypress/helpers/util.js

@@ -43,6 +43,7 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) =>
     options.fontSize = '16px';
   }
   const useAppli = Cypress.env('useAppli');
+  //const useAppli = false;
   const branch = Cypress.env('codeBranch');
   cy.log('Hello ' + useAppli ? 'Appli' : 'image-snapshot');
   const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
@@ -70,6 +71,56 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) =>
   }
 };
 
+export const urlSnapshotTest = (url, _options, api = false, validation) => {
+  cy.log(_options);
+  const options = Object.assign(_options);
+  if (!options.fontFamily) {
+    options.fontFamily = 'courier';
+  }
+  if (!options.sequence) {
+    options.sequence = {};
+  }
+  if (!options.sequence || (options.sequence && !options.sequence.actorFontFamily)) {
+    options.sequence.actorFontFamily = 'courier';
+  }
+  if (options.sequence && !options.sequence.noteFontFamily) {
+    options.sequence.noteFontFamily = 'courier';
+  }
+  options.sequence.actorFontFamily = 'courier';
+  options.sequence.noteFontFamily = 'courier';
+  options.sequence.messageFontFamily = 'courier';
+  if (options.sequence && !options.sequence.actorFontFamily) {
+    options.sequence.actorFontFamily = 'courier';
+  }
+  if (!options.fontSize) {
+    options.fontSize = '16px';
+  }
+  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,
+    });
+  }
+
+  cy.visit(url);
+  if (validation) cy.get('svg').should(validation);
+  cy.get('body');
+  // Default name to test title
+
+  if (useAppli) {
+    cy.eyesCheckWindow('Click!');
+    cy.eyesClose();
+  } else {
+    cy.matchImageSnapshot(name);
+  }
+};
+
 export const renderGraph = (graphStr, options, api) => {
   const url = mermaidUrl(graphStr, options, api);
 

cypress/integration/other/configuration.spec.js

@@ -41,7 +41,7 @@ describe('Configuration', () => {
         .should('exist')
         .and('include', 'url(#');
     });
-    it('should handle arrowMarkerAbsolute excplicitly set to false', () => {
+    it('should handle arrowMarkerAbsolute explicitly set to false', () => {
       renderGraph(
         `graph TD
         A[Christmas] -->|Get money| B(Go shopping)
@@ -63,7 +63,7 @@ describe('Configuration', () => {
         .should('exist')
         .and('include', 'url(#');
     });
-    it('should handle arrowMarkerAbsolute excplicitly set to "false" as false', () => {
+    it('should handle arrowMarkerAbsolute explicitly set to "false" as false', () => {
       renderGraph(
         `graph TD
         A[Christmas] -->|Get money| B(Go shopping)

cypress/integration/other/ghsa.spec.js

@@ -0,0 +1,10 @@
+import { urlSnapshotTest } from '../../helpers/util';
+
+describe('CSS injections', () => {
+  it('should not allow CSS injections outside of the diagram', () => {
+    urlSnapshotTest('http://localhost:9000/ghsa1.html', {
+      logLevel: 1,
+      flowchart: { htmlLabels: false },
+    });
+  });
+});

cypress/integration/other/interaction.spec.js

@@ -4,7 +4,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body').find('g#flowchart-Function-2').click();
+      cy.get('body').find('g#flowchart-Function-4').click();
 
       cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
     });
@@ -12,7 +12,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body').find('g#flowchart-FunctionArg-18').click();
+      cy.get('body').find('g#flowchart-FunctionArg-28').click();
 
       cy.get('.created-by-click-2').should('have.text', 'Clicked By Flow: ARGUMENT');
     });
@@ -20,7 +20,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body').find('g[id="flowchart-FunctionArg-22"]').click();
+      cy.get('body').find('g[id="flowchart-FunctionArg-34"]').click();
 
       cy.get('.created-by-click-2').should('have.text', 'Clicked By Flow: ARGUMENT');
     });
@@ -28,7 +28,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body').find('#flowchart-URL-3').click();
+      cy.get('body').find('#flowchart-URL-5').click();
 
       cy.location().should((location) => {
         expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
@@ -38,7 +38,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body').find('g[id="flowchart-2URL-7"]').click();
+      cy.get('body').find('g[id="flowchart-2URL-11"]').click();
 
       cy.location().should((location) => {
         expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
@@ -49,7 +49,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body').find('g#flowchart-Function-10').click();
+      cy.get('body').find('g#flowchart-Function-16').click();
 
       cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
     });
@@ -57,7 +57,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body').find('g[id="flowchart-1Function-14"]').click();
+      cy.get('body').find('g[id="flowchart-1Function-22"]').click();
 
       cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
     });
@@ -65,7 +65,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body').find('#flowchart-URL-11').click();
+      cy.get('body').find('#flowchart-URL-17').click();
 
       cy.location().should((location) => {
         expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
@@ -75,7 +75,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body').find('g[id="flowchart-2URL-15"]').click();
+      cy.get('body').find('g[id="flowchart-2URL-23"]').click();
 
       cy.location().should((location) => {
         expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
@@ -142,7 +142,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_strict.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body').find('g#flowchart-Function-2').click();
+      cy.get('body').find('g#flowchart-Function-4').click();
 
       cy.get('.created-by-click').should('not.exist');
       // cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
@@ -151,7 +151,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_strict.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body').find('g[id="flowchart-1Function-6"]').click();
+      cy.get('body').find('g[id="flowchart-1Function-10"]').click();
 
       // cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
       cy.get('.created-by-click').should('not.exist');
@@ -160,7 +160,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_strict.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body').find('g#flowchart-URL-3').click();
+      cy.get('body').find('g#flowchart-URL-5').click();
 
       cy.location().should((location) => {
         expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
@@ -170,7 +170,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_strict.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body').find('g[id="flowchart-2URL-7"]').click();
+      cy.get('body').find('g[id="flowchart-2URL-11"]').click();
 
       cy.location().should((location) => {
         expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
@@ -222,7 +222,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_other.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body').find('g#flowchart-Function-2').click();
+      cy.get('body').find('g#flowchart-Function-4').click();
 
       // cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
       cy.get('.created-by-click').should('not.exist');
@@ -231,7 +231,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_other.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body').find('g[id="flowchart-1Function-6"]').click();
+      cy.get('body').find('g[id="flowchart-1Function-10"]').click();
 
       cy.get('.created-by-click').should('not.exist');
       cy.get('.created-by-click').should('not.exist');
@@ -240,7 +240,7 @@ describe('Interaction', () => {
       const url = 'http://localhost:9000/click_security_other.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body').find('g#flowchart-URL-3').click();
+      cy.get('body').find('g#flowchart-URL-5').click();
 
       cy.location().should((location) => {
         expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');

cypress/integration/other/rerender.spec.js

@@ -1,5 +1,5 @@
 describe('Rerendering', () => {
-  it('should be able to render after an error has occured', () => {
+  it('should be able to render after an error has occurred', () => {
     const url = 'http://localhost:9000/render-after-error.html';
     cy.viewport(1440, 1024);
     cy.visit(url);

cypress/integration/other/xss.spec.js

@@ -60,52 +60,52 @@ describe('XSS', () => {
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   });
-  it('should not allow maniplulating htmlLabels into a false positive', () => {
+  it('should not allow manipulating htmlLabels into a false positive', () => {
     cy.visit('http://localhost:9000/xss4.html');
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   });
-  it('should not allow maniplulating antiscript to run javascript', () => {
+  it('should not allow manipulating antiscript to run javascript', () => {
     cy.visit('http://localhost:9000/xss5.html');
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   });
-  it('should not allow maniplulating antiscript to run javascript using onerror', () => {
+  it('should not allow manipulating antiscript to run javascript using onerror', () => {
     cy.visit('http://localhost:9000/xss6.html');
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   });
-  it('should not allow maniplulating antiscript to run javascript using onerror in state diagrams with dagre wrapper', () => {
+  it('should not allow manipulating antiscript to run javascript using onerror in state diagrams with dagre wrapper', () => {
     cy.visit('http://localhost:9000/xss8.html');
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   });
-  it('should not allow maniplulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
+  it('should not allow manipulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
     cy.visit('http://localhost:9000/xss9.html');
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   });
-  it('should not allow maniplulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
+  it('should not allow manipulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
     cy.visit('http://localhost:9000/xss10.html');
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   });
-  it('should not allow maniplulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
+  it('should not allow manipulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
     cy.visit('http://localhost:9000/xss11.html');
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   });
-  it('should not allow maniplulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
+  it('should not allow manipulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
     cy.visit('http://localhost:9000/xss12.html');
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   });
-  it('should not allow maniplulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
+  it('should not allow manipulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
     cy.visit('http://localhost:9000/xss13.html');
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   });
-  it('should not allow maniplulating antiscript to run javascript iframes in class diagrams', () => {
+  it('should not allow manipulating antiscript to run javascript iframes in class diagrams', () => {
     cy.visit('http://localhost:9000/xss14.html');
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');

cypress/integration/rendering/classDiagram-v2.spec.js

@@ -381,7 +381,7 @@ describe('Class diagram V2', () => {
     cy.get('svg');
   });
 
-  it('16b: should handle the direction statemnent with TB', () => {
+  it('16b: should handle the direction statement with TB', () => {
     imgSnapshotTest(
       `
       classDiagram
@@ -406,7 +406,7 @@ describe('Class diagram V2', () => {
     cy.get('svg');
   });
 
-  it('18: should handle the direction statemnent with LR', () => {
+  it('18: should handle the direction statement with LR', () => {
     imgSnapshotTest(
       `
       classDiagram
@@ -430,7 +430,7 @@ describe('Class diagram V2', () => {
     );
     cy.get('svg');
   });
-  it('17a: should handle the direction statemnent with BT', () => {
+  it('17a: should handle the direction statement with BT', () => {
     imgSnapshotTest(
       `
       classDiagram
@@ -454,7 +454,7 @@ describe('Class diagram V2', () => {
     );
     cy.get('svg');
   });
-  it('17b: should handle the direction statemment with RL', () => {
+  it('17b: should handle the direction statement with RL', () => {
     imgSnapshotTest(
       `
       classDiagram

cypress/integration/rendering/classDiagram.spec.js

@@ -1,410 +1,410 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
-
-describe('Class diagram', () => {
-  it('1: should render a simple class diagram', () => {
-    imgSnapshotTest(
-      `
-    classDiagram
-      Class01 <|-- AveryLongClass : Cool
-      &lt;&lt;interface&gt;&gt; Class01
-      Class03 *-- Class04
-      Class05 o-- Class06
-      Class07 .. Class08
-      Class09 --> C2 : Where am i?
-      Class09 --* C3
-      Class09 --|> Class07
-      Class12 <|.. Class08
-      Class11 ..>Class12
-      Class07 : equals()
-      Class07 : Object[] elementData
-      Class01 : size()
-      Class01 : int chimp
-      Class01 : int gorilla
-      Class01 : -int privateChimp
-      Class01 : +int publicGorilla
-      Class01 : #int protectedMarmoset
-      Class08 <--> C2: Cool label
-      class Class10 {
-        &lt;&lt;service&gt;&gt;
-        int id
-        test()
-      }
-      `,
-      { logLevel: 1 }
-    );
-    cy.get('svg');
-  });
-
-  it('2: should render a simple class diagrams with cardinality', () => {
-    imgSnapshotTest(
-      `
-    classDiagram
-      Class01 "1" <|--|> "*" AveryLongClass : Cool
-      &lt;&lt;interface&gt;&gt; Class01
-      Class03 "1" *-- "*" Class04
-      Class05 "1" o-- "many" Class06
-      Class07 "1" .. "*" Class08
-      Class09 "1" --> "*" C2 : Where am i?
-      Class09 "*" --* "*" C3
-      Class09 "1" --|> "1" Class07
-      Class07  : equals()
-      Class07  : Object[] elementData
-      Class01  : size()
-      Class01  : int chimp
-      Class01  : int gorilla
-      Class08 "1" <--> "*" C2: Cool label
-      class Class10 {
-        &lt;&lt;service&gt;&gt;
-        int id
-        test()
-      }
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-
-  it('3: should render a simple class diagram with different visibilities', () => {
-    imgSnapshotTest(
-      `
-    classDiagram
-      Class01 <|-- AveryLongClass : Cool
-      &lt;&lt;interface&gt;&gt; Class01
-      Class01 : -privateMethod()
-      Class01 : +publicMethod()
-      Class01 : #protectedMethod()
-      Class01 : -int privateChimp
-      Class01 : +int publicGorilla
-      Class01 : #int protectedMarmoset
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-
-  it('4: should render a simple class diagram with comments', () => {
-    imgSnapshotTest(
-      `
-    classDiagram
-      %% this is a comment
-      Class01 <|-- AveryLongClass : Cool
-      &lt;&lt;interface&gt;&gt; Class01
-      Class03 *-- Class04
-      Class05 o-- Class06
-      Class07 .. Class08
-      Class09 --> C2 : Where am i?
-      Class09 --* C3
-      Class09 --|> Class07
-      Class07 : equals()
-      Class07 : Object[] elementData
-      Class01 : size()
-      Class01 : int chimp
-      Class01 : int gorilla
-      Class08 <--> C2: Cool label
-      class Class10 {
-        &lt;&lt;service&gt;&gt;
-        int id
-        test()
-      }
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-
-  it('5: should render a simple class diagram with abstract method', () => {
-    imgSnapshotTest(
-      `
-    classDiagram
-      Class01 <|-- AveryLongClass : Cool
-      Class01 : someMethod()*
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-
-  it('6: should render a simple class diagram with static method', () => {
-    imgSnapshotTest(
-      `
-    classDiagram
-      Class01 <|-- AveryLongClass : Cool
-      Class01 : someMethod()$
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-
-  it('7: should render a simple class diagram with Generic class', () => {
-    imgSnapshotTest(
-      `
-    classDiagram
-    class Class01~T~
-      Class01 : size()
-      Class01 : int chimp
-      Class01 : int gorilla
-      Class08 <--> C2: Cool label
-      class Class10~T~ {
-        &lt;&lt;service&gt;&gt;
-        int id
-        test()
-      }
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-
-  it('8: should render a simple class diagram with Generic class and relations', () => {
-    imgSnapshotTest(
-      `
-    classDiagram
-    Class01~T~ <|-- AveryLongClass : Cool
-    Class03~T~ *-- Class04~T~
-      Class01 : size()
-      Class01 : int chimp
-      Class01 : int gorilla
-      Class08 <--> C2: Cool label
-      class Class10~T~ {
-        &lt;&lt;service&gt;&gt;
-        int id
-        test()
-      }
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-
-  it('9: should render a simple class diagram with clickable link', () => {
-    imgSnapshotTest(
-      `
-    classDiagram
-    Class01~T~ <|-- AveryLongClass : Cool
-    Class03~T~ *-- Class04~T~
-      Class01 : size()
-      Class01 : int chimp
-      Class01 : int gorilla
-      Class08 <--> C2: Cool label
-      class Class10~T~ {
-        &lt;&lt;service&gt;&gt;
-        int id
-        test()
-      }
-      link Class01 "google.com" "A Tooltip"
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-
-  it('10: should render a simple class diagram with clickable callback', () => {
-    imgSnapshotTest(
-      `
-    classDiagram
-    Class01~T~ <|-- AveryLongClass : Cool
-    Class03~T~ *-- Class04~T~
-      Class01 : size()
-      Class01 : int chimp
-      Class01 : int gorilla
-      Class08 <--> C2: Cool label
-      class Class10~T~ {
-        &lt;&lt;service&gt;&gt;
-        int id
-        test()
-      }
-      callback Class01 "functionCall" "A Tooltip"
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-
-  it('11: should render a simple class diagram with return type on method', () => {
-    imgSnapshotTest(
-      `
-    classDiagram
-      class Class10~T~ {
-        int[] id
-        test(int[] ids) bool
-        testArray() bool[]
-      }
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-
-  it('12: should render a simple class diagram with generic types', () => {
-    imgSnapshotTest(
-      `
-    classDiagram
-      class Class10~T~ {
-        int[] id
-        List~int~ ids
-        test(List~int~ ids) List~bool~
-        testArray() bool[]
-      }
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-
-  it('13: should render a simple class diagram with css classes applied', () => {
-    imgSnapshotTest(
-      `
-    classDiagram
-      class Class10 {
-        int[] id
-        List~int~ ids
-        test(List~int~ ids) List~bool~
-        testArray() bool[]
-      }
-
-      class Class10:::exClass2
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-
-  it('14: should render a simple class diagram with css classes applied directly', () => {
-    imgSnapshotTest(
-      `
-    classDiagram
-      class Class10:::exClass2 {
-        int[] id
-        List~int~ ids
-        test(List~int~ ids) List~bool~
-        testArray() bool[]
-      }
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-
-  it('15: should render a simple class diagram with css classes applied two multiple classes', () => {
-    imgSnapshotTest(
-      `
-    classDiagram
-      class Class10
-      class Class20
-
-      cssClass "Class10, Class20" exClass2
-      class Class20:::exClass2
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-
-  it('16: should render multiple class diagrams', () => {
-    imgSnapshotTest(
-      [
-        `
-    classDiagram
-      Class01 "1" <|--|> "*" AveryLongClass : Cool
-      &lt;&lt;interface&gt;&gt; Class01
-      Class03 "1" *-- "*" Class04
-      Class05 "1" o-- "many" Class06
-      Class07 "1" .. "*" Class08
-      Class09 "1" --> "*" C2 : Where am i?
-      Class09 "*" --* "*" C3
-      Class09 "1" --|> "1" Class07
-      Class07  : equals()
-      Class07  : Object[] elementData
-      Class01  : size()
-      Class01  : int chimp
-      Class01  : int gorilla
-      Class08 "1" <--> "*" C2: Cool label
-      class Class10 {
-        &lt;&lt;service&gt;&gt;
-        int id
-        test()
-      }
-      `,
-        `
-    classDiagram
-      Class01 "1" <|--|> "*" AveryLongClass : Cool
-      &lt;&lt;interface&gt;&gt; Class01
-      Class03 "1" *-- "*" Class04
-      Class05 "1" o-- "many" Class06
-      Class07 "1" .. "*" Class08
-      Class09 "1" --> "*" C2 : Where am i?
-      Class09 "*" --* "*" C3
-      Class09 "1" --|> "1" Class07
-      Class07  : equals()
-      Class07  : Object[] elementData
-      Class01  : size()
-      Class01  : int chimp
-      Class01  : int gorilla
-      Class08 "1" <--> "*" C2: Cool label
-      class Class10 {
-        &lt;&lt;service&gt;&gt;
-        int id
-        test()
-      }
-      `,
-      ],
-      {}
-    );
-    cy.get('svg');
-  });
-
-  // it('17: should render a class diagram when useMaxWidth is true (default)', () => {
-  //   renderGraph(
-  //     `
-  //   classDiagram
-  //     Class01 <|-- AveryLongClass : Cool
-  //     Class01 : size()
-  //     Class01 : int chimp
-  //     Class01 : int gorilla
-  //     Class01 : -int privateChimp
-  //     Class01 : +int publicGorilla
-  //     Class01 : #int protectedMarmoset
-  //     `,
-  //     { class: { useMaxWidth: true } }
-  //   );
-  //   cy.get('svg')
-  //     .should((svg) => {
-  //       expect(svg).to.have.attr('width', '100%');
-  //       const height = parseFloat(svg.attr('height'));
-  //       expect(height).to.be.within(332, 333);
-  //      // expect(svg).to.have.attr('height', '218');
-  //       const style = svg.attr('style');
-  //       expect(style).to.match(/^max-width: [\d.]+px;$/);
-  //       const maxWidthValue = parseInt(style.match(/[\d.]+/g).join(''));
-  //       // use within because the absolute value can be slightly different depending on the environment ±5%
-  //       expect(maxWidthValue).to.be.within(203, 204);
-  //     });
-  // });
-
-  // it('18: should render a class diagram when useMaxWidth is false', () => {
-  //   renderGraph(
-  //     `
-  //   classDiagram
-  //     Class01 <|-- AveryLongClass : Cool
-  //     Class01 : size()
-  //     Class01 : int chimp
-  //     Class01 : int gorilla
-  //     Class01 : -int privateChimp
-  //     Class01 : +int publicGorilla
-  //     Class01 : #int protectedMarmoset
-  //     `,
-  //     { class: { useMaxWidth: false } }
-  //   );
-  //   cy.get('svg')
-  //     .should((svg) => {
-  //       const width = parseFloat(svg.attr('width'));
-  //       // use within because the absolute value can be slightly different depending on the environment ±5%
-  //       expect(width).to.be.within(100, 101);
-  //       const height = parseFloat(svg.attr('height'));
-  //       expect(height).to.be.within(332, 333);
-  //      // expect(svg).to.have.attr('height', '332');
-  //      // expect(svg).to.not.have.attr('style');
-  //     });
-  // });
-});
+import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+
+describe('Class diagram', () => {
+  it('1: should render a simple class diagram', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+      Class01 <|-- AveryLongClass : Cool
+      &lt;&lt;interface&gt;&gt; Class01
+      Class03 *-- Class04
+      Class05 o-- Class06
+      Class07 .. Class08
+      Class09 --> C2 : Where am i?
+      Class09 --* C3
+      Class09 --|> Class07
+      Class12 <|.. Class08
+      Class11 ..>Class12
+      Class07 : equals()
+      Class07 : Object[] elementData
+      Class01 : size()
+      Class01 : int chimp
+      Class01 : int gorilla
+      Class01 : -int privateChimp
+      Class01 : +int publicGorilla
+      Class01 : #int protectedMarmoset
+      Class08 <--> C2: Cool label
+      class Class10 {
+        &lt;&lt;service&gt;&gt;
+        int id
+        test()
+      }
+      `,
+      { logLevel: 1 }
+    );
+    cy.get('svg');
+  });
+
+  it('2: should render a simple class diagrams with cardinality', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+      Class01 "1" <|--|> "*" AveryLongClass : Cool
+      &lt;&lt;interface&gt;&gt; Class01
+      Class03 "1" *-- "*" Class04
+      Class05 "1" o-- "many" Class06
+      Class07 "1" .. "*" Class08
+      Class09 "1" --> "*" C2 : Where am i?
+      Class09 "*" --* "*" C3
+      Class09 "1" --|> "1" Class07
+      Class07  : equals()
+      Class07  : Object[] elementData
+      Class01  : size()
+      Class01  : int chimp
+      Class01  : int gorilla
+      Class08 "1" <--> "*" C2: Cool label
+      class Class10 {
+        &lt;&lt;service&gt;&gt;
+        int id
+        test()
+      }
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+
+  it('3: should render a simple class diagram with different visibilities', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+      Class01 <|-- AveryLongClass : Cool
+      &lt;&lt;interface&gt;&gt; Class01
+      Class01 : -privateMethod()
+      Class01 : +publicMethod()
+      Class01 : #protectedMethod()
+      Class01 : -int privateChimp
+      Class01 : +int publicGorilla
+      Class01 : #int protectedMarmoset
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+
+  it('4: should render a simple class diagram with comments', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+      %% this is a comment
+      Class01 <|-- AveryLongClass : Cool
+      &lt;&lt;interface&gt;&gt; Class01
+      Class03 *-- Class04
+      Class05 o-- Class06
+      Class07 .. Class08
+      Class09 --> C2 : Where am i?
+      Class09 --* C3
+      Class09 --|> Class07
+      Class07 : equals()
+      Class07 : Object[] elementData
+      Class01 : size()
+      Class01 : int chimp
+      Class01 : int gorilla
+      Class08 <--> C2: Cool label
+      class Class10 {
+        &lt;&lt;service&gt;&gt;
+        int id
+        test()
+      }
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+
+  it('5: should render a simple class diagram with abstract method', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+      Class01 <|-- AveryLongClass : Cool
+      Class01 : someMethod()*
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+
+  it('6: should render a simple class diagram with static method', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+      Class01 <|-- AveryLongClass : Cool
+      Class01 : someMethod()$
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+
+  it('7: should render a simple class diagram with Generic class', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+    class Class01~T~
+      Class01 : size()
+      Class01 : int chimp
+      Class01 : int gorilla
+      Class08 <--> C2: Cool label
+      class Class10~T~ {
+        &lt;&lt;service&gt;&gt;
+        int id
+        test()
+      }
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+
+  it('8: should render a simple class diagram with Generic class and relations', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+    Class01~T~ <|-- AveryLongClass : Cool
+    Class03~T~ *-- Class04~T~
+      Class01 : size()
+      Class01 : int chimp
+      Class01 : int gorilla
+      Class08 <--> C2: Cool label
+      class Class10~T~ {
+        &lt;&lt;service&gt;&gt;
+        int id
+        test()
+      }
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+
+  it('9: should render a simple class diagram with clickable link', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+    Class01~T~ <|-- AveryLongClass : Cool
+    Class03~T~ *-- Class04~T~
+      Class01 : size()
+      Class01 : int chimp
+      Class01 : int gorilla
+      Class08 <--> C2: Cool label
+      class Class10~T~ {
+        &lt;&lt;service&gt;&gt;
+        int id
+        test()
+      }
+      link Class01 "google.com" "A Tooltip"
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+
+  it('10: should render a simple class diagram with clickable callback', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+    Class01~T~ <|-- AveryLongClass : Cool
+    Class03~T~ *-- Class04~T~
+      Class01 : size()
+      Class01 : int chimp
+      Class01 : int gorilla
+      Class08 <--> C2: Cool label
+      class Class10~T~ {
+        &lt;&lt;service&gt;&gt;
+        int id
+        test()
+      }
+      callback Class01 "functionCall" "A Tooltip"
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+
+  it('11: should render a simple class diagram with return type on method', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+      class Class10~T~ {
+        int[] id
+        test(int[] ids) bool
+        testArray() bool[]
+      }
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+
+  it('12: should render a simple class diagram with generic types', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+      class Class10~T~ {
+        int[] id
+        List~int~ ids
+        test(List~int~ ids) List~bool~
+        testArray() bool[]
+      }
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+
+  it('13: should render a simple class diagram with css classes applied', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+      class Class10 {
+        int[] id
+        List~int~ ids
+        test(List~int~ ids) List~bool~
+        testArray() bool[]
+      }
+
+      class Class10:::exClass2
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+
+  it('14: should render a simple class diagram with css classes applied directly', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+      class Class10:::exClass2 {
+        int[] id
+        List~int~ ids
+        test(List~int~ ids) List~bool~
+        testArray() bool[]
+      }
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+
+  it('15: should render a simple class diagram with css classes applied two multiple classes', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+      class Class10
+      class Class20
+
+      cssClass "Class10, Class20" exClass2
+      class Class20:::exClass2
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+
+  it('16: should render multiple class diagrams', () => {
+    imgSnapshotTest(
+      [
+        `
+    classDiagram
+      Class01 "1" <|--|> "*" AveryLongClass : Cool
+      &lt;&lt;interface&gt;&gt; Class01
+      Class03 "1" *-- "*" Class04
+      Class05 "1" o-- "many" Class06
+      Class07 "1" .. "*" Class08
+      Class09 "1" --> "*" C2 : Where am i?
+      Class09 "*" --* "*" C3
+      Class09 "1" --|> "1" Class07
+      Class07  : equals()
+      Class07  : Object[] elementData
+      Class01  : size()
+      Class01  : int chimp
+      Class01  : int gorilla
+      Class08 "1" <--> "*" C2: Cool label
+      class Class10 {
+        &lt;&lt;service&gt;&gt;
+        int id
+        test()
+      }
+      `,
+        `
+    classDiagram
+      Class01 "1" <|--|> "*" AveryLongClass : Cool
+      &lt;&lt;interface&gt;&gt; Class01
+      Class03 "1" *-- "*" Class04
+      Class05 "1" o-- "many" Class06
+      Class07 "1" .. "*" Class08
+      Class09 "1" --> "*" C2 : Where am i?
+      Class09 "*" --* "*" C3
+      Class09 "1" --|> "1" Class07
+      Class07  : equals()
+      Class07  : Object[] elementData
+      Class01  : size()
+      Class01  : int chimp
+      Class01  : int gorilla
+      Class08 "1" <--> "*" C2: Cool label
+      class Class10 {
+        &lt;&lt;service&gt;&gt;
+        int id
+        test()
+      }
+      `,
+      ],
+      {}
+    );
+    cy.get('svg');
+  });
+
+  // it('17: should render a class diagram when useMaxWidth is true (default)', () => {
+  //   renderGraph(
+  //     `
+  //   classDiagram
+  //     Class01 <|-- AveryLongClass : Cool
+  //     Class01 : size()
+  //     Class01 : int chimp
+  //     Class01 : int gorilla
+  //     Class01 : -int privateChimp
+  //     Class01 : +int publicGorilla
+  //     Class01 : #int protectedMarmoset
+  //     `,
+  //     { class: { useMaxWidth: true } }
+  //   );
+  //   cy.get('svg')
+  //     .should((svg) => {
+  //       expect(svg).to.have.attr('width', '100%');
+  //       const height = parseFloat(svg.attr('height'));
+  //       expect(height).to.be.within(332, 333);
+  //      // expect(svg).to.have.attr('height', '218');
+  //       const style = svg.attr('style');
+  //       expect(style).to.match(/^max-width: [\d.]+px;$/);
+  //       const maxWidthValue = parseInt(style.match(/[\d.]+/g).join(''));
+  //       // use within because the absolute value can be slightly different depending on the environment ±5%
+  //       expect(maxWidthValue).to.be.within(203, 204);
+  //     });
+  // });
+
+  // it('18: should render a class diagram when useMaxWidth is false', () => {
+  //   renderGraph(
+  //     `
+  //   classDiagram
+  //     Class01 <|-- AveryLongClass : Cool
+  //     Class01 : size()
+  //     Class01 : int chimp
+  //     Class01 : int gorilla
+  //     Class01 : -int privateChimp
+  //     Class01 : +int publicGorilla
+  //     Class01 : #int protectedMarmoset
+  //     `,
+  //     { class: { useMaxWidth: false } }
+  //   );
+  //   cy.get('svg')
+  //     .should((svg) => {
+  //       const width = parseFloat(svg.attr('width'));
+  //       // use within because the absolute value can be slightly different depending on the environment ±5%
+  //       expect(width).to.be.within(100, 101);
+  //       const height = parseFloat(svg.attr('height'));
+  //       expect(height).to.be.within(332, 333);
+  //      // expect(svg).to.have.attr('height', '332');
+  //      // expect(svg).to.not.have.attr('style');
+  //     });
+  // });
+});

cypress/integration/rendering/conf-and-directives.spec.js

@@ -16,7 +16,7 @@ describe('Configuration and directives - nodes should be light blue', () => {
     );
     cy.get('svg');
   });
-  it('Settigns from intitialize - nodes should be green', () => {
+  it('Settings from initialize - nodes should be green', () => {
     imgSnapshotTest(
       `
 graph TD
@@ -30,7 +30,7 @@ graph TD
     );
     cy.get('svg');
   });
-  it('Settings from initialize overriding themeVariable - nodes shold be red', () => {
+  it('Settings from initialize overriding themeVariable - nodes should be red', () => {
     imgSnapshotTest(
       `
 

cypress/integration/rendering/gitGraph.spec.js

@@ -102,4 +102,155 @@ describe('Git Graph diagram', () => {
       {}
     );
   });
+  it('8: should render a simple gitgraph with more than 8 branchs &  overriding variables', () => {
+    imgSnapshotTest(
+      `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
+        'gitBranchLabel0': '#ffffff',
+        'gitBranchLabel1': '#ffffff',
+        'gitBranchLabel2': '#ffffff',
+        'gitBranchLabel3': '#ffffff',
+        'gitBranchLabel4': '#ffffff',
+        'gitBranchLabel5': '#ffffff',
+        'gitBranchLabel6': '#ffffff',
+        'gitBranchLabel7': '#ffffff',
+  } } }%%
+  gitGraph
+    checkout main
+    branch branch1
+    branch branch2
+    branch branch3
+    branch branch4
+    branch branch5
+    branch branch6
+    branch branch7
+    branch branch8
+    branch branch9
+    checkout branch1
+    commit id: "1"
+      `,
+      {}
+    );
+  });
+  it('9: should render a simple gitgraph with rotated labels', () => {
+    imgSnapshotTest(
+      `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'gitGraph': {
+        'rotateCommitLabel': true
+  } } }%%
+        gitGraph
+        commit id: "75f7219e83b321cd3fdde7dcf83bc7c1000a6828"
+        commit id: "0db4784daf82736dec4569e0dc92980d328c1f2e"
+        commit id: "7067e9973f9eaa6cd4a4b723c506d1eab598e83e"
+        commit id: "66972321ad6c199013b5b31f03b3a86fa3f9817d"
+      `,
+      {}
+    );
+  });
+  it('10: should render a simple gitgraph with horizontal labels', () => {
+    imgSnapshotTest(
+      `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'gitGraph': {
+        'rotateCommitLabel': false
+  } } }%%
+        gitGraph
+        commit id: "Alpha"
+        commit id: "Beta"
+        commit id: "Gamma"
+        commit id: "Delta"
+      `,
+      {}
+    );
+  });
+  it('11: should render a simple gitgraph with cherry pick commit', () => {
+    imgSnapshotTest(
+      `
+    gitGraph
+       commit id: "ZERO"
+       branch develop
+       commit id:"A"
+       checkout main
+       commit id:"ONE"
+       checkout develop
+       commit id:"B"
+       checkout main
+       commit id:"TWO"
+       cherry-pick id:"A"
+       commit id:"THREE"
+       checkout develop
+       commit id:"C"
+      `,
+      {}
+    );
+  });
+
+  it('11: should render a simple gitgraph with two cherry pick commit', () => {
+    imgSnapshotTest(
+      `
+    gitGraph
+       commit id: "ZERO"
+       branch develop
+       commit id:"A"
+       checkout main
+       commit id:"ONE"
+       checkout develop
+       commit id:"B"
+       branch featureA
+       commit id:"FIX"
+       commit id: "FIX-2"
+       checkout main
+       commit id:"TWO"
+       cherry-pick id:"A"
+       commit id:"THREE"
+       cherry-pick id:"FIX"
+       checkout develop
+       commit id:"C"
+       merge featureA
+      `,
+      {}
+    );
+  });
+
+  it('12: should render commits for more than 8 branches', () => {
+    imgSnapshotTest(
+      `
+      gitGraph
+      checkout main
+      commit
+      checkout main
+      branch branch1
+      commit
+      checkout main
+      merge branch1
+      branch branch2
+      commit
+      checkout main
+      merge branch2
+      branch branch3
+      commit
+      checkout main
+      merge branch3
+      branch branch4
+      commit
+      checkout main
+      merge branch4
+      branch branch5
+      commit
+      checkout main
+      merge branch5
+      branch branch6
+      commit
+      checkout main
+      merge branch6
+      branch branch7
+      commit
+      checkout main
+      merge branch7
+      branch branch8
+      commit
+      checkout main
+      merge branch8
+      branch branch9
+      commit
+      `,
+      {}
+    );
+  });
 });

cypress/integration/rendering/sequencediagram.spec.js

@@ -76,11 +76,11 @@ context('Sequence diagram', () => {
     imgSnapshotTest(
       `
         sequenceDiagram
-        Alice->>Bob: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        Alice->>Bob: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
         loop Loopy
             Bob->>Alice: Pasten
         end      `,
-      {}
+      { wrap: true }
     );
   });
   context('font settings', () => {
@@ -126,6 +126,17 @@ context('Sequence diagram', () => {
         { sequence: { noteAlign: 'left' } }
       );
     });
+    it('should render multi-line notes aligned to the left when configured', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        Alice->>Bob: I'm short
+        note left of Alice: I am left aligned<br>but also<br>multiline
+        Bob->>Alice: Short as well
+      `,
+        { sequence: { noteAlign: 'left' } }
+      );
+    });
     it('should render notes aligned to the right when configured', () => {
       imgSnapshotTest(
         `
@@ -137,13 +148,44 @@ context('Sequence diagram', () => {
         { sequence: { noteAlign: 'right' } }
       );
     });
+    it('should render multi-line notes aligned to the right when configured', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        Alice->>Bob: I'm short
+        note left of Alice: I am right aligned<br>but also<br>multiline
+        Bob->>Alice: Short as well
+      `,
+        { sequence: { noteAlign: 'right' } }
+      );
+    });
+    it('should render multi-line messages aligned to the left when configured', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        Alice->>Bob: I'm short<br>but also<br>multiline
+        Bob->>Alice: Short as well<br>and also<br>multiline
+      `,
+        { sequence: { messageAlign: 'left' } }
+      );
+    });
+    it('should render multi-line messages aligned to the right when configured', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        Alice->>Bob: I'm short<br>but also<br>multiline
+        Bob->>Alice: Short as well<br>and also<br>multiline
+      `,
+        { sequence: { messageAlign: 'right' } }
+      );
+    });
   });
   context('auth width scaling', () => {
     it('should render long actor descriptions', () => {
       imgSnapshotTest(
         `
         sequenceDiagram
-        participant A as Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        participant A as Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
         A->>Bob: Hola
         Bob-->A: Pasten !
       `,
@@ -154,7 +196,7 @@ context('Sequence diagram', () => {
       imgSnapshotTest(
         `
         sequenceDiagram
-        participant A as wrap:Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        participant A as wrap:Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
         A->>Bob: Hola
         Bob-->A: Pasten !
       `,
@@ -166,7 +208,7 @@ context('Sequence diagram', () => {
         `
         %%{init: {'config': {'wrap': true }}}%%
         sequenceDiagram
-        participant A as Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        participant A as Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
         A->>Bob: Hola
         Bob-->A: Pasten !
       `,
@@ -190,7 +232,7 @@ context('Sequence diagram', () => {
         `
         sequenceDiagram
         Alice->>Bob: Hola
-        Note left of Alice: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        Note left of Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
         Bob->>Alice: I'm short though
       `,
         {}
@@ -201,7 +243,7 @@ context('Sequence diagram', () => {
         `
         sequenceDiagram
         Alice->>Bob: Hola
-        Note left of Alice:wrap: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        Note left of Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
         Bob->>Alice: I'm short though
       `,
         {}
@@ -212,7 +254,7 @@ context('Sequence diagram', () => {
         `
         sequenceDiagram
         Alice->>Bob: Hola
-        Note right of Alice: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        Note right of Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
         Bob->>Alice: I'm short though
       `,
         {}
@@ -223,7 +265,7 @@ context('Sequence diagram', () => {
         `
         sequenceDiagram
         Alice->>Bob: Hola
-        Note right of Alice:wrap: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        Note right of Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
         Bob->>Alice: I'm short though
       `,
         {}
@@ -234,7 +276,7 @@ context('Sequence diagram', () => {
         `
         sequenceDiagram
         Alice->>Bob: Hola
-        Note over Alice: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        Note over Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
         Bob->>Alice: I'm short though
       `,
         {}
@@ -245,7 +287,7 @@ context('Sequence diagram', () => {
         `
         sequenceDiagram
         Alice->>Bob: Hola
-        Note over Alice:wrap: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        Note over Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
         Bob->>Alice: I'm short though
       `,
         {}
@@ -255,7 +297,7 @@ context('Sequence diagram', () => {
       imgSnapshotTest(
         `
         sequenceDiagram
-        Alice->>Bob: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        Alice->>Bob: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
         Bob->>Alice: I'm short though
       `,
         {}
@@ -265,7 +307,7 @@ context('Sequence diagram', () => {
       imgSnapshotTest(
         `
         sequenceDiagram
-        Alice->>Bob:wrap:Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        Alice->>Bob:wrap:Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
         Bob->>Alice: I'm short though
       `,
         {}
@@ -276,7 +318,7 @@ context('Sequence diagram', () => {
         `
         sequenceDiagram
         Alice->>Bob: I'm short
-        Bob->>Alice: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        Bob->>Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
       `,
         {}
       );
@@ -286,7 +328,7 @@ context('Sequence diagram', () => {
         `
         sequenceDiagram
         Alice->>Bob: I'm short
-        Bob->>Alice:wrap: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        Bob->>Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
       `,
         {}
       );
@@ -452,6 +494,42 @@ context('Sequence diagram', () => {
         {}
       );
     });
+    it('should render rect around and inside criticals', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+          A ->> B: 1
+          rect rgb(204, 0, 102)
+            critical yes
+              C ->> C: 1
+            option no
+              rect rgb(0, 204, 204)
+                C ->> C: 0
+              end
+            end
+          end
+          B ->> A: Return
+      `,
+        {}
+      );
+    });
+    it('should render rect around and inside breaks', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+          A ->> B: 1
+          rect rgb(204, 0, 102)
+            break yes
+              rect rgb(0, 204, 204)
+                C ->> C: 0
+              end
+            end
+          end
+          B ->> A: Return
+      `,
+        {}
+      );
+    });
     it('should render autonumber when configured with such', () => {
       imgSnapshotTest(
         `

cypress/integration/rendering/stateDiagram-v2.spec.js

@@ -346,6 +346,21 @@ describe('State diagram', () => {
       }
     );
   });
+  it('v2 A compound state should be able to link to itself', () => {
+    imgSnapshotTest(
+      `
+stateDiagram
+  state Active {
+    Idle
+  }
+  Inactive --> Idle: ACT
+  Active --> Active: LOG
+    `,
+      {
+        logLevel: 0,
+      }
+    );
+  });
   it('v2 width of compond state should grow with title if title is wider', () => {
     imgSnapshotTest(
       `
@@ -494,4 +509,16 @@ stateDiagram-v2
       expect(svg).to.not.have.attr('style');
     });
   });
+
+  it('v2 should render a state diagram and set the correct length of the labels', () => {
+    imgSnapshotTest(
+      `
+      stateDiagram-v2
+      [*] --> 1
+      1 --> 2: test({ foo#colon; 'far' })
+      2 --> [*]
+    `,
+      { logLevel: 0, fontFamily: 'courier' }
+    );
+  });
 });

cypress/platform/class.html

@@ -78,7 +78,7 @@
       a_a --> c --> d_d --> c_c
       classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
       class a_a apa;
-      click a_a "http://www.aftonbladet.se" "apa"
+      click a_a "https://www.aftonbladet.se" "apa"
 
       </div>
 

cypress/platform/current.html

@@ -22,16 +22,16 @@
   <body>
     <h1>info below</h1>
     <div class="flex">
-      <div class="mermaid2" style="width: 50%; height: 20%;">
+      <div class="mermaid" style="width: 50%; height: 20%;">
 flowchart BT
-    subgraph two
-    b1
-    end
-    subgraph three
-    c1-->c2
-    end
-    c1 --apa apa apa--> b1
-    two --> c2
+   subgraph S1
+    sub1 -->sub2
+   end
+  subgraph S2
+    sub4
+   end
+   S1 --> S2
+   sub1 --> sub4
       </div>
       <div class="mermaid2" style="width: 50%; height: 200px;">
 sequenceDiagram
@@ -163,7 +163,7 @@ _one --> b
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { curve: 'cardinal', htmlLabels: true },
+        flowchart: { curve: 'cardinal', htmlLabels: false },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated

cypress/platform/current2.html

@@ -35,7 +35,7 @@ flowchart BT
       </div>
       <div class="mermaid2" style="width: 50%; height: 200px;">
 sequenceDiagram
-   Alice->>Bob:Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+   Alice->>Bob:Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
    Bob->>Alice: I'm short though
       </div>
       <div class="mermaid2" style="width: 50%; height: 200px;">

cypress/platform/exploit.js

@@ -3,4 +3,4 @@ div.id = 'the-malware';
 div.className = 'malware';
 div.innerHTML = 'XSS Succeeded';
 parent.document.getElementsByTagName('body')[0].appendChild(div);
-throw new Error('XSS Succeded');
+throw new Error('XSS Succeeded');

cypress/platform/ghsa1.html

@@ -0,0 +1,28 @@
+<html>
+<script>
+    //      %%{ init: { "logLevel":0, "themeVariables" : { "primaryColor": "#fff000","textColor": "green","apa":"} #target { background-color: crimson }" } } }%%
+</script>
+<body>
+    <div id="target">
+        <h1>This element does not belong to the SVG but we can style it</h1>
+    </div>
+    <svg id="diagram">
+    </svg>
+
+    <script src="./mermaid.js"></script>
+    <script>
+        mermaid.initialize({ startOnLoad: false, logLevel: 0 });
+
+        const graph = `
+     %%{ init: { "themeVariables" : { "textColor": "green;} #target { background-color: crimson }", "mainBkg": "#fff000" } } }%%
+            graph TD
+                A[Goose]
+            `;
+
+        const diagram = document.getElementById('diagram');
+        const svg = mermaid.render('diagram-svg', graph);
+        diagram.innerHTML = svg;
+    </script>
+</body>
+
+</html>

cypress/platform/ghsa2.html

@@ -0,0 +1,28 @@
+<html>
+<script>
+    //      %%{ init: { "logLevel":0, "themeVariables" : { "primaryColor": "#fff000","textColor": "green","apa":"} #target { background-color: crimson }" } } }%%
+</script>
+<body>
+    <div id="target">
+        <h1>This element does not belong to the SVG but we can style it</h1>
+    </div>
+    <svg id="diagram">
+    </svg>
+
+    <script src="./mermaid.js"></script>
+    <script>
+        mermaid.initialize({ startOnLoad: false, logLevel: 0 });
+
+        const graph = `
+     %%{ init: { "fontFamily" : "&125; * { background: red }" } }%%
+            graph TD
+                A[Goose]
+            `;
+
+        const diagram = document.getElementById('diagram');
+        const svg = mermaid.render('diagram-svg', graph);
+        diagram.innerHTML = svg;
+    </script>
+</body>
+
+</html>

cypress/platform/knsv.html

@@ -15,6 +15,8 @@
         /* font-size: 18px !important; */
         width: 100%;
         display: flex;
+        flex-direction: column;
+        margin-left: 20px;
         }
       h1 { color: grey;}
       .mermaid2,.mermaid3 {
@@ -30,7 +32,55 @@
 
 
 
-      <div class="mermaid" style="width: 50%;">
+<div class="mermaid2" style="width: 50%;">
+flowchart LR
+  classDef aPID stroke:#4e4403,fill:#fdde29,color:#4e4403,rx:5px,ry:5px;
+  classDef crm stroke:#333333,fill:#DCDCDC,color:#333333,rx:5px,ry:5px;
+  classDef type stroke:#502604,fill:#FAB565,color:#502604,rx:20px,ry:20px;;
+
+  O0("Joe")
+  class O0 aPID;
+
+  O1("Person")
+  class O1 crm;
+  O0 -- has type -->O1["Person"]
+
+  O2("aat:300411314")
+  class O2 type;
+  click O2 function "Sorry the newline html tags are not being processed correctly<br/> So all of this appears on the <br/> same line."
+  O0 -- has type -->O2["Bug"]
+  click O0 function "Lots of great info about Joe<br>Lots of great info about Joe<br>burt<br>fred";
+</div>
+<div class="mermaid" style="width: 50%;">
+classDiagram-v2
+  class Shape
+  link Shape "https://www.github.com" "This is a<br/>tooltip<br>for a link"
+  class Shape2
+  click Shape2 href "https://www.github.com" "This is a tooltip for a link"
+</div>
+<div class="mermaid2" style="width: 50%;">
+ gitGraph
+       commit
+       commit
+       branch develop
+       commit
+       commit
+       commit
+       checkout main
+       commit
+       commit
+</div>
+<div class="mermaid2" style="width: 50%;">
+   sequenceDiagram
+      title: My Sequence Diagram Title
+      accTitle: My Acc Sequence Diagram
+      accDescr: My Sequence Diagram Description
+
+      Alice->>John: Hello John, how are you?
+      John-->>Alice: Great!
+      Alice-)John: See you later!
+</div>
+      <div class="mermaid2" style="width: 50%;">
 graph TD
     A -->|000| B
     B -->|111| C
@@ -38,18 +88,26 @@ graph TD
     linkStyle 1 stroke:#ff3,stroke-width:4px,color:red;
         </div>
       <div class="mermaid2" style="width: 100%;">
-journey
-            title My working day
-            section Go to work
-              Make tea: 5: Me
-              Go upstairs: 3: Me
-              Do work: 1: Me, Cat
-            section Go home
-              Go downstairs: 5: Me
-              Sit down: 5: Me
+  journey
+      accTitle: My User Journey Diagram
+      accDescr: My User Journey Diagram Description
+
+      title My working day
+      section Go to work
+        Make tea: 5: Me
+        Go upstairs: 3: Me
+        Do work: 1: Me, Cat
+      section Go home
+        Go downstairs: 5: Me
+        Sit down: 5: Me
+      </div>
+      <div class="mermaid2" style="width: 100%;">
+        info
       </div>
       <div class="mermaid2" style="width: 100%;">
 requirementDiagram
+      accTitle: My req Diagram
+      accDescr: My req Diagram Description
 
     requirement test_req {
     id: 1
@@ -86,36 +144,20 @@ requirementDiagram
     test_req - traces -> test_req2
     test_req - contains -> test_req3
     test_req <- copies - test_entity2
+
       </div>
       <div class="mermaid2" style="width: 100%;">
-      erDiagram
-        CUSTOMER }|..|{ DELIVERY-ADDRESS : has
-        CUSTOMER ||--o{ ORDER : places
-        CUSTOMER ||--o{ INVOICE : "liable for"
-        DELIVERY-ADDRESS ||--o{ ORDER : receives
-        INVOICE ||--|{ ORDER : covers
-        ORDER ||--|{ ORDER-ITEM : includes
-        PRODUCT-CATEGORY ||--|{ PRODUCT : contains
-        PRODUCT ||--o{ ORDER-ITEM : "ordered in"
-      </div>
-      <div class="mermaid2" style="width: 100%;">
-      graph TB
-        subgraph One
-          a1-->a2-->a3
-        end
-      </div>
-      <div class="mermaid2" style="width: 100%;">
-      gantt
+gantt
     dateFormat  YYYY-MM-DD
-    axisFormat  %d/%m
-    title Adding GANTT diagram to mermaid
-    excludes weekdays 2014-01-10
+    title       Adding GANTT diagram functionality to mermaid
+    excludes    weekends
+    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
 
     section A section
     Completed task            :done,    des1, 2014-01-06,2014-01-08
     Active task               :active,  des2, 2014-01-09, 3d
     Future task               :         des3, after des2, 5d
-    Future task2               :         des4, after des3, 5d
+    Future task2              :         des4, after des3, 5d
 
     section Critical tasks
     Completed task in the critical line :crit, done, 2014-01-06,24h
@@ -124,28 +166,49 @@ requirementDiagram
     Future task in critical line        :crit, 5d
     Create tests for renderer           :2d
     Add to mermaid                      :1d
+    Functionality added                 :milestone, 2014-01-25, 0d
 
     section Documentation
     Describe gantt syntax               :active, a1, after des1, 3d
     Add gantt diagram to demo page      :after a1  , 20h
     Add another diagram to demo page    :doc1, after a1  , 48h
 
-    section Clickable
-    Visit mermaidjs               :active, cl1, 2014-01-07,2014-01-10
-    Calling a Callback (look at the console log) :cl2, after cl1, 3d
-    Calling a Callback with args :cl3, after cl1, 3d
-
-    click cl1 href "https://mermaid-js.github.io/mermaid/#/"
-    click cl2 call clickByGantt()
-    click cl3 call clickByGantt("test1", test2, test3)
-
     section Last section
     Describe gantt syntax               :after doc1, 3d
-    Add gantt diagram to demo page      : 20h
-    Add another diagram to demo page    : 48h
-  </div>
+    Add gantt diagram to demo page      :20h
+    Add another diagram to demo page    :48h
+      </div>
+      <div class="mermaid2" style="width: 100%;">
+stateDiagram
+  state Active {
+    Idle
+  }
+  Inactive --> Idle: ACT
+  Active --> Active: LOG
+      </div>
+      <div class="mermaid2" style="width: 100%;">
+      flowchart TB
+        accTitle: My flowchart
+        accDescr: My flowchart Description
+        subgraph One
+          a1-->a2-->a3
+        end
+      </div>
+      <div class="mermaid2" style="width: 100%;">
+        sequenceDiagram
+          A ->> B: 1
+          rect rgb(204, 0, 102)
+            break yes
+              rect rgb(0, 204, 204)
+                C ->> C: 0
+              end
+            end
+          end
+          B ->> A: Return</div>
       <div class="mermaid2" style="width: 100%;">
 classDiagram
+accTitle: My class diagram
+accDescr: My class diagram Description
 Class01 <|-- AveryLongClass : Cool
 Class09 --> C2 : Where am i?
 Class09 --* C3
@@ -161,11 +224,41 @@ class Class10 {
 }
       </div>
       <div class="mermaid2" style="width: 100%;">
-        stateDiagram
-      [*] --> S1
-      state "Some long name" as S1
+%%{init: {'config': {'wrap': true }}}%%
+        sequenceDiagram
+        participant A as Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
+        A->>Bob: Hola
+        Bob-->A: Pasten !
       </div>
       <div class="mermaid2" style="width: 100%;">
+      gitGraph
+       commit id: "ZERO"
+       branch develop
+       commit id:"A"
+       checkout main
+       commit id:"ONE"
+       checkout develop
+       commit id:"B"
+       branch featureA
+       commit id:"FIX"
+       commit id: "FIX-2"
+       checkout main
+       commit id:"TWO"
+       cherry-pick id:"A"
+       commit id:"THREE"
+       cherry-pick id:"FIX"
+       checkout develop
+       commit id:"C"
+       merge featureA
+       </div>
+       <div class="mermaid2" style="width: 100%;">
+flowchart TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      B --> C{Let me think}
+      C -->|One| D[Laptop]
+      C -->|Two| E[iPhone]
+      C -->|Three| F[fa:fa-car Car]
+      </div>     <div class="mermaid2" style="width: 100%;">
         classDiagram
           Animal "1" <|-- Duck
           Animal <|-- Fish
@@ -188,6 +281,21 @@ class Class10 {
             +run()
           }
     </div>
+          <div class="mermaid2" style="width: 100%;">
+        erDiagram
+    CAR ||--o{ NAMED-DRIVER : allows
+    CAR {
+        string registrationNumber
+        string make
+        string model
+    }
+    PERSON ||--o{ NAMED-DRIVER : is
+    PERSON {
+        string firstName
+        string lastName
+        int age
+    }
+        </div>
 
   <script src="./mermaid.js"></script>
     <script>
@@ -195,40 +303,15 @@ class Class10 {
         // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
-        // theme: 'dark',
-        // theme: 'forest',
-        // arrowMarkerAbsolute: true,
-        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
-        flowchart: {
-    nodeSpacing: 10,
-    curve: 'cardinal',
-    htmlLabels: true,
-    // defaultRenderer: 'dagre-d3',
-  },
-  class: {
-    // defaultRenderer: 'dagre-d3',
-    htmlLabels: true,
-  },
-        // gantt: { axisFormat: '%m/%d/%Y' },
-  //       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,
-        },
+        maxTextSize: 900000,
+        startOnLoad: true,
+        securityLevel: 'loose',
         logLevel: 0,
-        fontSize: 18,
-        curve: 'cardinal',
-        // securityLevel: 'sandbox',
-        // themeVariables: {relationLabelColor: 'red'}
+        flowchart: {
+          curve: 'basis',
+          useMaxWidth: false,
+          htmlLabels: true,
+        },
       });
       function callback() {
   alert('It worked');

cypress/platform/knsv2.html

@@ -41,7 +41,10 @@
   <body>
     <div>Security check</div>
     <div class="flex">
-      <div id="diagram" class="mermaid"></div>
+      <div id="diagram" class="mermaid">
+sequenceDiagram
+  Nothing:Valid;
+      </div>
       <div id="res" class=""></div>
   <script src="./mermaid.js"></script>
     <script>
@@ -49,28 +52,6 @@
         // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
-        theme: 'forest',
-        arrowMarkerAbsolute: true,
-        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
-        logLevel: 0,
-        state: {
-          defaultRenderer: 'dagre-wrapper',
-        },
-        flowchart: {
-          // defaultRenderer: 'dagre-wrapper',
-          nodeSpacing: 10,
-    curve: 'cardinal',
-    htmlLabels: true,
-        },
-        htmlLabels: false,
-        // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
-        // sequenceDiagram: { actorMargin: 300 } // deprecated
-        // fontFamily: '"times", sans-serif',
-        // fontFamily: 'courier',
-        fontSize: 18,
-        curve: 'basis',
-        securityLevel: 'strict',
         startOnLoad: false,
         // themeVariables: {relationLabelColor: 'red'}
       });
@@ -78,19 +59,12 @@
   alert('It worked');
 }
 
-      var diagram = '%%{init: {"flowchart": {"htmlLabels": "false"}} }%%\n';
-diagram += 'flowchart\n';
-diagram += 'A["<ifra';
-diagram += "me srcdoc='<scrip";
-diagram += 't src=http://localhost:9000/exploit.js>';
-diagram += '</scr';
-diagram += 'ipt>\'></iframe>"]';
-
-console.log(diagram);
 // document.querySelector('#diagram').innerHTML = diagram;
-mermaid.render('diagram', diagram, (res) => {
-  document.querySelector('#res').innerHTML = res;
-});
+try {
+  mermaid.initThrowsErrors(undefined, '#diagram');
+} catch (err) {
+  console.log('Caught error:', err);
+}
     </script>
   </body>
 </html>

cypress/platform/knsv3.html

@@ -11,52 +11,207 @@
       body {
         /* background: rgb(221, 208, 208); */
         /* background:#333; */
-        font-family: 'Arial';
+        font-family: 'Courier New', Courier, monospace;
         /* font-size: 18px !important; */
         }
       h1 { color: grey;}
       .mermaid2 {
         display: none;
       }
-      .mermaid svg {
+      .mermaid {
+        border: 1px solid red;
+        font-family: 'Courier New', Courier, monospace;
         /* font-size: 18px !important; */
       }
     </style>
   </head>
   <body>
     <div>info below</div>
-    <div class="flex">
+    <div class="">
       <div class="mermaid2" style="width: 100%; height: 400px;">
-%%{init: { "logLevel": 1, "er": {"fontSize":18 }} }%%
-      erDiagram
-        CUSTOMER }|..|{ DELIVERY-ADDRESS : has
-        CUSTOMER ||--o{ ORDER : places
-        CUSTOMER ||--o{ INVOICE : "liable for"
-        DELIVERY-ADDRESS ||--o{ ORDER : receives
-        INVOICE ||--|{ ORDER : covers
-        ORDER ||--|{ ORDER-ITEM : includes
-        PRODUCT-CATEGORY ||--|{ PRODUCT : contains
-        PRODUCT ||--o{ ORDER-ITEM : "ordered in"
+flowchart TB;subgraph "number as labels";1;end;
       </div>
-      <div class="mermaid2" style="width: 50%; height: 400px;">
+      <div class="mermaid2" style="width: 100%; height: 400px;">
+flowchart TB;a[APA];
+      </div>
+      <div class="mermaid2" style="margin-left:100px;">
+graph TD
+      work --> sleep
+      sleep --> work
+      eat --> sleep
+      work --> eat
+  </div>
+      <div class="mermaid2" style="margin-left:100px;">
 flowchart TD
-  A[Christmas] ==> D
-  A[Christmas] -->|Get money| B(Go shopping)
-  A[Christmas] ==> C
-  subgraph T ["Test"]
-    A
-    B
-    C
-  end
+      work --> sleep
+      sleep --> work
+      eat --> sleep
+      work --> eat
+  </div>
+      <div class="mermaid2" style="">
+ graph TB
+      A
+      B
+      subgraph foo[Foo SubGraph]
+        C
+        D
+      end
+      subgraph bar[Bar SubGraph]
+        E
+        F
+      end
+      G
 
-  classDef Test fill:#F84E68,stroke:#333,color:white;
-  class A,T Test
-  classDef TestSub fill:green;
-  class T TestSub
-  linkStyle 0,1 color:orange, stroke: orange;
+      A-->B
+      B-->C
+      C-->D
+      B-->D
+      D-->E
+      E-->A
+      E-->F
+      F-->D
+      F-->G
+      B-->G
+      G-->D
+
+      style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
+      style bar fill:#999,stroke-width:2px,stroke:#0F0,color:blue
+    </div>
+    <div class="mermaid2" style="">
+      graph TB
+%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
+      A
+      B
+      subgraph foo[Foo SubGraph]
+        C
+        D
+      end
+      subgraph bar[Bar SubGraph]
+        E
+        F
+      end
+      G
+
+      A-->B
+      B-->C
+      C-->D
+      B-->D
+      D-->E
+      E-->A
+      E-->F
+      F-->D
+      F-->G
+      B-->G
+      G-->D
+
+      style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
+      style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
+    </div>
+      <div class="mermaid2" style="">
+      graph TD
+        A[Christmas] ==> D
+        A[Christmas] -->|Get money| B(Go shopping)
+        A[Christmas] ==> C
+    </div>
+    <div class="mermaid2" style="">
+      graph TD
+%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
+        A[Christmas] ==> D
+        A[Christmas] -->|Get money| B(Go shopping)
+        A[Christmas] ==> C
+    </div>
+      <div class="mermaid2" style="">
+      flowchart TD
+        A[Christmas] ==> D
+        A[Christmas] -->|Get money| B(Go shopping)
+        A[Christmas] ==> C
+    </div>
+    <div class="mermaid2" style="">
+      flowchart TD
+%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
+        A[Christmas] ==> D
+        A[Christmas] -->|Get money| B(Go shopping)
+        A[Christmas] ==> C
+    </div>
+      <div class="mermaid2" style="">
+flowchart LR
+        a["<strong>Haiya</strong>"]---->b
 </div>
-      <div class="mermaid" style="width: 100%; height: 20%;">
-flowchart TB
+      <div class="mermaid" style="">
+flowchart LR
+%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
+        a["<strong>Haiya</strong>"]---->b
+</div>
+    <div class="mermaid2" style="">
+      flowchart TD
+        A[Christmas] ==> D
+        A[Christmas] -->|Get money| B(Go shopping)
+        A[Christmas] ==> C
+    </div>
+    <div class="mermaid2" style="">
+      flowchart TD
+%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
+        A[Christmas] ==> D
+        A[Christmas] -->|Get money| B(Go shopping)
+        A[Christmas] ==> C
+    </div>
+    <div class="mermaid2" style="">
+      %%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
+classDiagram-v2
+      Class01 <|-- AveryLongClass : Cool
+      &lt;&lt;interface&gt;&gt; Class01
+      Class03 *-- Class04
+      Class05 o-- Class06
+      Class07 .. Class08
+      Class09 --> C2 : Where am i?
+      Class09 --* C3
+      Class09 --|> Class07
+      Class12 <|.. Class08
+      Class11 ..>Class12
+      Class07 : equals()
+      Class07 : Object[] elementData
+      Class01 : size()
+      Class01 : int chimp
+      Class01 : int gorilla
+      Class01 : -int privateChimp
+      Class01 : +int publicGorilla
+      Class01 : #int protectedMarmoset
+      Class08 <--> C2: Cool label
+      class Class10 {
+        &lt;&lt;service&gt;&gt;
+        int id
+        test()
+      }
+      </div>
+    <div class="mermaid2" style="">
+classDiagram-v2
+      Class01 <|-- AveryLongClass : Cool
+      &lt;&lt;interface&gt;&gt; Class01
+      Class03 *-- Class04
+      Class05 o-- Class06
+      Class07 .. Class08
+      Class09 --> C2 : Where am i?
+      Class09 --* C3
+      Class09 --|> Class07
+      Class12 <|.. Class08
+      Class11 ..>Class12
+      Class07 : equals()
+      Class07 : Object[] elementData
+      Class01 : size()
+      Class01 : int chimp
+      Class01 : int gorilla
+      Class01 : -int privateChimp
+      Class01 : +int publicGorilla
+      Class01 : #int protectedMarmoset
+      Class08 <--> C2: Cool label
+      class Class10 {
+        &lt;&lt;service&gt;&gt;
+        int id
+        test()
+      }
+      </div>
+    <div class="mermaid" style="">
+flowchart BT
    subgraph S1
     sub1 -->sub2
    end
@@ -66,141 +221,25 @@ flowchart TB
    S1 --> S2
    sub1 --> sub4
       </div>
-<div class="mermaid2" style="width: 100%; height: 20%;">
-flowchart TB
-    c1-->a2
-    subgraph one
-    a1-->a2
-    end
-    subgraph two
-    b1-->b2
-    end
-    subgraph three
-    c1-->c2
-    end
-    one --> two
-    three --> two
-    two --> c2
-</div>
-      <div class="mermaid2" style="width: 100%; height: 20%;">
-stateDiagram-v2
-state S1 {
-sub1 -->sub2
-}
-state S2 {
-    sub4
-}
-S1 --> S2
-sub1 --> sub4
-
-      </div>
-<div class="mermaid2" style="width: 100%; height: 20%;">
-  requirementDiagram
-  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
-  </div>
-      <div class="mermaid2" style="width: 50%; height: 20%;">
-flowchart LR
-  classDef dark fill:#000,stroke:#000,stroke-width:4px,color:#fff
-  Lorem --> Ipsum --> Dolor
-  class Lorem,Dolor dark
-      </div>
-      <div class="mermaid2" style="width: 50%; height: 20%;">
-%%{init: {'theme': 'base' }}%%
-%%{init2: { 'logLevel': 0, 'theme': 'forest'} }%%
-flowchart TD
-      L1 --- L2
-      L2 --- C
-      M1 ---> C
-      R1 .-> R2
-      R2 <.-> C
-      C -->|Label 1| E1
-      C <-- Label 2 ---> E2
-      C ----> E3
-      C <-...-> E4
-      C ======> E5
-      </div>
-      <div class="mermaid2" style="width: 50%; height: 21%;">
-flowchart LR
-A[red text] -->|default style| B(blue text)
-C([red text]) -->|default style| D[[blue text]]
-E[(red text)] -->|default style| F((blue text))
-G>red text] -->|default style| H{blue text}
-I{{red text}} -->|default style| J[/blue text/]
-K[
-ed text] -->|default style| L[/blue text]
-M[
-ed text/] -->|default style| N[blue text]
-linkStyle default color:Sienna;
-style A stroke:#ff0000,fill:#ffcccc,color:#ff0000
-style B stroke:#0000ff,fill:#ccccff,color:#0000ff
-style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
-style D stroke:#0000ff,fill:#ccccff,color:#0000ff
-style E stroke:#ff0000,fill:#ffcccc,color:#ff0000
-style F stroke:#0000ff,fill:#ccccff,color:#0000ff
-style G stroke:#ff0000,fill:#ffcccc,color:#ff0000
-style H stroke:#0000ff,fill:#ccccff,color:#0000ff
-style I stroke:#ff0000,fill:#ffcccc,color:#ff0000
-style J stroke:#0000ff,fill:#ccccff,color:#0000ff
-style K stroke:#ff0000,fill:#ffcccc,color:#ff0000
-style L stroke:#0000ff,fill:#ccccff,color:#0000ff
-style M stroke:#ff0000,fill:#ffcccc,color:#ff0000
-style N stroke:#0000ff,fill:#ccccff,color:#0000ff
-      </div>
-
-
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
-        theme: 'neutral',
-        arrowMarkerAbsolute: true,
+        // theme: 'neutral',
+        // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: true },
-        htmlLabels: true,
+        flowchart: { curve: 'cardinal', htmlLabels: false },
+        // htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
+        // sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         // fontFamily: '"times", sans-serif',
-        // fontFamily: 'courier',
-        fontSize: 18,
-        curve: 'cardinal',
+        fontFamily: 'courier',
+        // fontSize: 18,
+        // curve: 'cardinal',
         securityLevel: 'loose',
         // themeVariables: {relationLabelColor: 'red'}
       });

cypress/platform/xss.html

@@ -31,7 +31,7 @@
         document.getElementsByTagName('body')[0].appendChild(div);
         // const el = document.querySelector('.mermaid');
         // el.parentNode.removeChild(el);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
     </script>
   </head>

cypress/platform/xss10.html

@@ -84,7 +84,7 @@
         div.className = 'malware';
         div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
 
       var diagram = 'classDiagram\n';
@@ -105,4 +105,3 @@ mermaid.render('diagram', diagram, (res) => {
     </script>
   </body>
 </html>
-

cypress/platform/xss11.html

@@ -84,7 +84,7 @@
         div.className = 'malware';
         div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
 
 var diagram = 'stateDiagram-v2\n';
@@ -103,4 +103,3 @@ mermaid.render('diagram', diagram, (res) => {
     </script>
   </body>
 </html>
-

cypress/platform/xss12.html

@@ -84,7 +84,7 @@
         div.className = 'malware';
         div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
 
 var diagram = 'stateDiagram-v2\n';
@@ -103,4 +103,3 @@ mermaid.render('diagram', diagram, (res) => {
     </script>
   </body>
 </html>
-

cypress/platform/xss13.html

@@ -84,7 +84,7 @@
         div.className = 'malware';
         div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
 
 var diagram = 'stateDiagram-v2\n';
@@ -103,4 +103,3 @@ mermaid.render('diagram', diagram, (res) => {
     </script>
   </body>
 </html>
-

cypress/platform/xss14.html

@@ -84,7 +84,7 @@
         div.className = 'malware';
         div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
 
       var diagram = 'classDiagram\n';
@@ -105,4 +105,3 @@ mermaid.render('diagram', diagram, (res) => {
     </script>
   </body>
 </html>
-

cypress/platform/xss15.html

@@ -84,7 +84,7 @@
         div.className = 'malware';
         div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
 
       var diagram = `sequenceDiagram
@@ -104,4 +104,3 @@ mermaid.render('diagram', diagram, (res) => {
     </script>
   </body>
 </html>
-

cypress/platform/xss16.html

@@ -84,7 +84,7 @@
         div.className = 'malware';
         div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
 
       var diagram = `sequenceDiagram
@@ -103,4 +103,3 @@ mermaid.render('diagram', diagram, (res) => {
     </script>
   </body>
 </html>
-

cypress/platform/xss17.html

@@ -84,7 +84,7 @@
         div.className = 'malware';
         div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
 
       var diagram = `sequenceDiagram
@@ -103,4 +103,3 @@ mermaid.render('diagram', diagram, (res) => {
     </script>
   </body>
 </html>
-

cypress/platform/xss18.html

@@ -84,7 +84,7 @@
         div.className = 'malware';
         div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
 
       var diagram = `classDiagram
@@ -102,4 +102,3 @@ mermaid.render('diagram', diagram, (res) => {
     </script>
   </body>
 </html>
-

cypress/platform/xss19.html

@@ -84,7 +84,7 @@
         div.className = 'malware';
         div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
 
       var diagram = `classDiagram
@@ -104,4 +104,3 @@ mermaid.render('diagram', diagram, (res) => {
     </script>
   </body>
 </html>
-

cypress/platform/xss2.html

@@ -28,7 +28,7 @@
         div.className = 'malware';
         div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
     </script>
   </head>

cypress/platform/xss20.html

@@ -84,7 +84,7 @@
         div.className = 'malware';
         div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
 
 //       var diagram = `  graph TD
@@ -102,4 +102,3 @@ mermaid.render('diagram', diagram, (res) => {
     </script>
   </body>
 </html>
-

cypress/platform/xss21.html

@@ -84,7 +84,7 @@
         div.className = 'malware';
         div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
 
 //       var diagram = `  graph TD
@@ -102,4 +102,3 @@ mermaid.render('diagram', diagram, (res) => {
     </script>
   </body>
 </html>
-

cypress/platform/xss3.html

@@ -28,7 +28,7 @@
         div.className = 'malware';
         div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
     </script>
   </head>

cypress/platform/xss5.html

@@ -84,7 +84,7 @@
         div.className = 'malware';
         div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
       var diagram = 'graph LR\n';
 diagram += 'B-->D("<img onerror=location=`java';
@@ -100,4 +100,3 @@ mermaid.render('diagram', diagram, (res) => {
     </script>
   </body>
 </html>
-

cypress/platform/xss6.html

@@ -84,7 +84,7 @@
         div.className = 'malware';
         div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
       var diagram = 'graph LR\n';
 diagram += 'A(<img/src/onerror=xssAttack`1`>)';
@@ -98,4 +98,3 @@ mermaid.render('diagram', diagram, (res) => {
     </script>
   </body>
 </html>
-

cypress/platform/xss7.html

@@ -84,7 +84,7 @@
         div.className = 'malware';
         div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
       var diagram = 'graph LR\n';
 diagram += " B(<a href='<";
@@ -100,4 +100,3 @@ mermaid.render('diagram', diagram, (res) => {
     </script>
   </body>
 </html>
-

cypress/platform/xss8.html

@@ -84,7 +84,7 @@
         div.className = 'malware';
         div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
 
 var diagram = 'stateDiagram-v2\n';
@@ -99,4 +99,3 @@ mermaid.render('diagram', diagram, (res) => {
     </script>
   </body>
 </html>
-

cypress/platform/xss9.html

@@ -84,7 +84,7 @@
         div.className = 'malware';
         div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeded');
+        throw new Error('XSS Succeeded');
       }
 
 var diagram = 'stateDiagram-v2\n';
@@ -99,4 +99,3 @@ mermaid.render('diagram', diagram, (res) => {
     </script>
   </body>
 </html>
-

demos/index.html

@@ -20,6 +20,205 @@
   </div>
 
   <hr />
+
+  <div class="mermaid">
+    C4Context
+      title System Context diagram for Internet Banking System
+Enterprise_Boundary(b0, "BankBoundary0") {
+      Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
+      Person(customerB, "Banking Customer B")      
+      Person_Ext(customerC, "Banking Customer C", "desc")            
+
+      Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
+
+      System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")  
+
+      Enterprise_Boundary(b1, "BankBoundary") {
+       
+        SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")      
+
+        System_Boundary(b2, "BankBoundary2") {  
+          System(SystemA, "Banking System A")  
+          System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")        
+        } 
+
+        System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.") 
+        SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.") 
+
+        Boundary(b3, "BankBoundary3", "boundary") {  
+          SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")        
+          SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.") 
+        }
+      }
+    }
+      
+      BiRel(customerA, SystemAA, "Uses")
+      BiRel(SystemAA, SystemE, "Uses")
+      Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
+      Rel(SystemC, customerA, "Sends e-mails to")
+
+      UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
+      UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
+      UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
+      UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
+      UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
+      
+      UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
+  </div>
+
+  <div class="mermaid">
+    C4Container
+    title Container diagram for Internet Banking System
+
+    System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", $tags="v1.0")
+    Person(customer, Customer, "A customer of the bank, with personal bank accounts", $tags="v1.0")
+
+    Container_Boundary(c1, "Internet Banking") {
+        Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser")
+        Container_Ext(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
+        Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
+        ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")
+        ContainerDb_Ext(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API")
+
+    }
+
+    System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
+
+    Rel(customer, web_app, "Uses", "HTTPS")
+    UpdateRelStyle(customer, web_app, $offsetY="60", $offsetX="90")     
+    Rel(customer, spa, "Uses", "HTTPS")
+    UpdateRelStyle(customer, spa, $offsetY="-40")    
+    Rel(customer, mobile_app, "Uses")
+    UpdateRelStyle(customer, mobile_app, $offsetY="-30") 
+
+    Rel(web_app, spa, "Delivers")
+    UpdateRelStyle(web_app, spa, $offsetX="130") 
+    Rel(spa, backend_api, "Uses", "async, JSON/HTTPS")
+    Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS")
+    Rel_Back(database, backend_api, "Reads from and writes to", "sync, JDBC")
+
+    Rel(email_system, customer, "Sends e-mails to")
+    UpdateRelStyle(email_system, customer, $offsetX="-45")    
+    Rel(backend_api, email_system, "Sends e-mails using", "sync, SMTP")
+    UpdateRelStyle(backend_api, email_system, $offsetY="-60")    
+    Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
+    UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140") 
+
+
+  </div>
+
+  <div class="mermaid">
+    C4Component
+    title Component diagram for Internet Banking System - API Application
+
+    Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
+    Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.")
+    ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
+    System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
+
+    Container_Boundary(api, "API Application") {
+        Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system")
+        Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary of their bank accounts")
+        Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.")
+        Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.")
+
+        Rel(sign, security, "Uses")
+        Rel(accounts, mbsfacade, "Uses")
+        Rel(security, db, "Read & write to", "JDBC")
+        Rel(mbsfacade, mbs, "Uses", "XML/HTTPS")
+    }
+
+    Rel_Back(spa, sign, "Uses", "JSON/HTTPS")
+    Rel(spa, accounts, "Uses", "JSON/HTTPS")
+
+    Rel(ma, sign, "Uses", "JSON/HTTPS")
+    Rel(ma, accounts, "Uses", "JSON/HTTPS")
+
+    UpdateRelStyle(spa, sign, $offsetY="-40") 
+    UpdateRelStyle(spa, accounts, $offsetX="40", $offsetY="40")
+
+    UpdateRelStyle(ma, sign, $offsetX="-90", $offsetY="40")
+    UpdateRelStyle(ma, accounts, $offsetY="-40")
+
+        UpdateRelStyle(sign, security, $offsetX="-160", $offsetY="10")
+        UpdateRelStyle(accounts, mbsfacade, $offsetX="140", $offsetY="10")
+        UpdateRelStyle(security, db, $offsetY="-40")
+        UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")
+
+  </div>  
+
+  <div class="mermaid">
+    C4Dynamic
+    title Dynamic diagram for Internet Banking System - API Application
+
+    ContainerDb(c4, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
+    Container(c1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
+    Container_Boundary(b, "API Application") {
+      Component(c3, "Security Component", "Spring Bean", "Provides functionality Related to signing in, changing passwords, etc.")
+      Component(c2, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.")
+    }
+    Rel(c1, c2, "Submits credentials to", "JSON/HTTPS")
+    Rel(c2, c3, "Calls isAuthenticated() on")
+    Rel(c3, c4, "select * from users where username = ?", "JDBC")
+
+    UpdateRelStyle(c1, c2, $textColor="red", $offsetY="-40")
+    UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60")
+    UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10")
+  </div>  
+
+   <div class="mermaid">
+    C4Deployment
+    title Deployment Diagram for Internet Banking System - Live
+
+    Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){
+        Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
+    }
+
+    Deployment_Node(comp, "Customer's computer", "Mircosoft Windows or Apple macOS"){
+        Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,<br/> Apple Safari or Microsoft Edge"){
+            Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.")
+        }
+    }
+
+    Deployment_Node(plc, "Big Bank plc", "Big Bank plc data center"){
+        Deployment_Node(dn, "bigbank-api*** x8", "Ubuntu 16.04 LTS"){
+            Deployment_Node(apache, "Apache Tomcat", "Apache Tomcat 8.x"){
+                Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.")
+            }
+        }
+        Deployment_Node(bb2, "bigbank-web*** x4", "Ubuntu 16.04 LTS"){
+            Deployment_Node(apache2, "Apache Tomcat", "Apache Tomcat 8.x"){
+                Container(web, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet Banking single page application.")
+            }
+        }
+        Deployment_Node(bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS"){
+            Deployment_Node(oracle, "Oracle - Primary", "Oracle 12c"){
+                ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
+            }
+        }
+        Deployment_Node(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS") {
+            Deployment_Node(oracle2, "Oracle - Secondary", "Oracle 12c") {
+                ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
+            }
+        }
+    }
+
+    Rel(mobile, api, "Makes API calls to", "json/HTTPS")
+    Rel(spa, api, "Makes API calls to", "json/HTTPS")
+    Rel_U(web, spa, "Delivers to the customer's web browser")
+    Rel(api, db, "Reads from and writes to", "JDBC")
+    Rel(api, db2, "Reads from and writes to", "JDBC")
+    Rel_R(db, db2, "Replicates data to")
+
+    UpdateRelStyle(spa, api, $offsetY="-40")
+    UpdateRelStyle(web, spa, $offsetY="-40")
+    UpdateRelStyle(api, db, $offsetY="-20", $offsetX="5")
+    UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20")
+    UpdateRelStyle(db, db2, $offsetY="-10")
+  </div>  
+
+  <hr />
+
   <div class="mermaid">
     pie
       title Key elements in Product X

docs/8.6.0_docs.md

@@ -203,7 +203,7 @@ Ensures options parameter does not attempt to override siteConfig secure keys.
 
 | Parameter | Description |Type | Required | Values|
 | --- | --- | --- | --- | --- |
-| conf| base set of values, which currentConfig coul be   reset   to.| Dictionary | Required | Any Values, with respect to the secure Array|
+| conf| base set of values, which currentConfig could be   reset   to.| Dictionary | Required | Any Values, with respect to the secure Array|
 
 ```note
 default: current siteConfig  (optional, default `getSiteConfig()`)

docs/Configuration.md

@@ -5,7 +5,7 @@ Configuration is the second half of Mermaid, after deployment. Together Deployme
 This section will introduce the different methods of configuring of the behaviors and appearances of Mermaid Diagrams. 
 The Following are the most commonly used methods, and are all tied to Mermaid [Deployment](./n00b-gettingStarted.md) methods. 
 
-## Configuration Section in the [Live Editor](https://mermaid-js.github.io/mermaid-live-editor).
+## Configuration Section in the [Live Editor](https://mermaid.live/).
 
 
 ## The `initialize()` call, for when Mermaid is called via an API, or through a <script> tag. 

docs/README.md

@@ -2,7 +2,7 @@
 
 **Mermaid lets you create diagrams and visualizations using text and code.**
 
-It is a Javascript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
+It is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
 
 >If you are familiar with Markdown you should have no problem learning [Mermaid's Syntax](./n00b-syntaxReference.md).
 
@@ -18,7 +18,7 @@ It is a Javascript based diagramming and charting tool that renders Markdown-ins
 
 
 <!-- <Main description> -->
-Mermaid is a Javascript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams.  The main purpose of Mermaid is to help documentation catch up with development.
+Mermaid is a JavaScript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams.  The main purpose of Mermaid is to help documentation catch up with development.
 
 > Doc-Rot is a Catch-22 that Mermaid helps to solve.
 
@@ -26,11 +26,12 @@ 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/>
-[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).
+Mermaid allows even non-programmers to easily create detailed and diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
+[Tutorials](./Tutorials.md) has video tutorials.
+Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./integrations.md).
 
-For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/n00b-overview.md) and [Usage](./docs/usage.md).
+
+For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./n00b-overview.md) and [Usage](./usage.md).
 
 🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/docs/development.md) | 📜 [Version Log](./CHANGELOG.md) | 🔌 [Plug-Ins](./integrations.md)
 
@@ -195,7 +196,7 @@ To Deploy Mermaid:
 <script>mermaid.initialize({startOnLoad:true});
 </script>
 ```
-**Doing so will command the mermaid parser to look for the `<div>` tags with `class="mermaid"`. From these tags mermaid will try to read the diagram/chart definitions and render them into svg charts.**
+**Doing so will command the mermaid parser to look for the `<div>` tags with `class="mermaid"`. From these tags mermaid will try to read the diagram/chart definitions and render them into SVG charts.**
 
  **Examples can be found at** [Other examples](/examples)
 
@@ -277,9 +278,9 @@ Detailed information about how to contribute can be found in the [contribution g
 
 ## Security and safe diagrams
 
-For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitise the incoming code and keep refining the process but  it is hard to guarantee that there are no loop holes.
+For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitise the incoming code and keep refining the process but it is hard to guarantee that there are no loop holes.
 
-As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing javascript in the code from  being executed. This is a great step forward for better security.
+As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing JavaScript in the code from  being executed. This is a great step forward for better security.
 
 *Unfortunately you can not have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code.*
 

docs/Setup.md

@@ -818,13 +818,13 @@ Default value: 'TB'
 
 ### entityPadding
 
-| Parameter     | Description                                                 | Type    | Required | Values             |
-| ------------- | ----------------------------------------------------------- | ------- | -------- | ------------------ |
-| entityPadding | Minimum internal padding betweentext in box and box borders | Integer | 4        | Any Positive Value |
+| Parameter     | Description                                                  | Type    | Required | Values             |
+| ------------- | ------------------------------------------------------------ | ------- | -------- | ------------------ |
+| entityPadding | Minimum internal padding between text in box and box borders | Integer | 4        | Any Positive Value |
 
 **Notes:**
 
-The minimum internal padding betweentext in an entity box and the enclosing box borders,
+The minimum internal padding between text in an entity box and the enclosing box borders,
 expressed in pixels.
 
 Default value: 15
@@ -902,6 +902,514 @@ available space. If set to false, the diagram reserves its absolute width.
 
 Default value: true
 
+## c4
+
+The object containing configurations specific for c4 diagrams
+
+### diagramMarginX
+
+| Parameter      | Description                                    | Type    | Required | Values             |
+| -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
+| diagramMarginX | Margin to the right and left of the c4 diagram | Integer | Required | Any Positive Value |
+
+**Notes:** Default value: 50
+
+### diagramMarginY
+
+| Parameter      | Description                                 | Type    | Required | Values             |
+| -------------- | ------------------------------------------- | ------- | -------- | ------------------ |
+| diagramMarginY | Margin to the over and under the c4 diagram | Integer | Required | Any Positive Value |
+
+**Notes:** Default value: 10
+
+### c4ShapeMargin
+
+| Parameter     | Description           | Type    | Required | Values             |
+| ------------- | --------------------- | ------- | -------- | ------------------ |
+| c4ShapeMargin | Margin between shapes | Integer | Required | Any Positive Value |
+
+**Notes:** Default value: 50
+
+### c4ShapePadding
+
+| Parameter      | Description            | Type    | Required | Values             |
+| -------------- | ---------------------- | ------- | -------- | ------------------ |
+| c4ShapePadding | Padding between shapes | Integer | Required | Any Positive Value |
+
+**Notes:** Default value: 20
+
+### width
+
+| Parameter | Description           | Type    | Required | Values             |
+| --------- | --------------------- | ------- | -------- | ------------------ |
+| width     | Width of person boxes | Integer | Required | Any Positive Value |
+
+**Notes:** Default value: 216
+
+### height
+
+| Parameter | Description            | Type    | Required | Values             |
+| --------- | ---------------------- | ------- | -------- | ------------------ |
+| height    | Height of person boxes | Integer | Required | Any Positive Value |
+
+**Notes:** Default value: 60
+
+### boxMargin
+
+| Parameter | Description         | Type    | Required | Values             |
+| --------- | ------------------- | ------- | -------- | ------------------ |
+| boxMargin | Margin around boxes | Integer | Required | Any Positive Value |
+
+**Notes:** Default value: 10
+
+### useMaxWidth
+
+| Parameter   | Description | Type    | Required | Values      |
+| ----------- | ----------- | ------- | -------- | ----------- |
+| useMaxWidth | See Notes   | boolean | Required | true, false |
+
+**Notes:** When this flag is set to true, the height and width is set to 100% and is then
+scaling with the available space. If set to false, the absolute space required is used.
+
+Default value: true
+
+### c4ShapeInRow
+
+| Parameter    | Description | Type    | Required | Values             |
+| ------------ | ----------- | ------- | -------- | ------------------ |
+| c4ShapeInRow | See Notes   | Integer | Required | Any Positive Value |
+
+**Notes:** How many shapes to place in each row.
+
+Default value: 4
+
+### c4BoundaryInRow
+
+| Parameter       | Description | Type    | Required | Values             |
+| --------------- | ----------- | ------- | -------- | ------------------ |
+| c4BoundaryInRow | See Notes   | Integer | Required | Any Positive Value |
+
+**Notes:** How many boundarys to place in each row.
+
+Default value: 2
+
+### personFontSize
+
+This sets the font size of Person shape for the diagram
+
+**Notes:** Default value: 14.
+
+### personFontFamily
+
+This sets the font family of Person shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### personFontWeight
+
+This sets the font weight of Person shape for the diagram
+
+**Notes:** Default value: normal.
+
+### external_personFontSize
+
+This sets the font size of External Person shape for the diagram
+
+**Notes:** Default value: 14.
+
+### external_personFontFamily
+
+This sets the font family of External Person shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### external_personFontWeight
+
+This sets the font weight of External Person shape for the diagram
+
+**Notes:** Default value: normal.
+
+### systemFontSize
+
+This sets the font size of System shape for the diagram
+
+**Notes:** Default value: 14.
+
+### systemFontFamily
+
+This sets the font family of System shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### systemFontWeight
+
+This sets the font weight of System shape for the diagram
+
+**Notes:** Default value: normal.
+
+### external_systemFontSize
+
+This sets the font size of External System shape for the diagram
+
+**Notes:** Default value: 14.
+
+### external_systemFontFamily
+
+This sets the font family of External System shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### external_systemFontWeight
+
+This sets the font weight of External System shape for the diagram
+
+**Notes:** Default value: normal.
+
+### system_dbFontSize
+
+This sets the font size of System DB shape for the diagram
+
+**Notes:** Default value: 14.
+
+### system_dbFontFamily
+
+This sets the font family of System DB shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### system_dbFontWeight
+
+This sets the font weight of System DB shape for the diagram
+
+**Notes:** Default value: normal.
+
+### external_system_dbFontSize
+
+This sets the font size of External System DB shape for the diagram
+
+**Notes:** Default value: 14.
+
+### external_system_dbFontFamily
+
+This sets the font family of External System DB shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### external_system_dbFontWeight
+
+This sets the font weight of External System DB shape for the diagram
+
+**Notes:** Default value: normal.
+
+### system_queueFontSize
+
+This sets the font size of System Queue shape for the diagram
+
+**Notes:** Default value: 14.
+
+### system_queueFontFamily
+
+This sets the font family of System Queue shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### system_queueFontWeight
+
+This sets the font weight of System Queue shape for the diagram
+
+**Notes:** Default value: normal.
+
+### external_system_queueFontSize
+
+This sets the font size of External System Queue shape for the diagram
+
+**Notes:** Default value: 14.
+
+### external_system_queueFontFamily
+
+This sets the font family of External System Queue shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### external_system_queueFontWeight
+
+This sets the font weight of External System Queue shape for the diagram
+
+**Notes:** Default value: normal.
+
+### boundaryFontSize
+
+This sets the font size of Boundary shape for the diagram
+
+**Notes:** Default value: 14.
+
+### boundaryFontFamily
+
+This sets the font family of Boundary shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### boundaryFontWeight
+
+This sets the font weight of Boundary shape for the diagram
+
+**Notes:** Default value: normal.
+
+### messageFontSize
+
+This sets the font size of Message shape for the diagram
+
+**Notes:** Default value: 12.
+
+### messageFontFamily
+
+This sets the font family of Message shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### messageFontWeight
+
+This sets the font weight of Message shape for the diagram
+
+**Notes:** Default value: normal.
+
+### containerFontSize
+
+This sets the font size of Container shape for the diagram
+
+**Notes:** Default value: 14.
+
+### containerFontFamily
+
+This sets the font family of Container shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### containerFontWeight
+
+This sets the font weight of Container shape for the diagram
+
+**Notes:** Default value: normal.
+
+### external_containerFontSize
+
+This sets the font size of External Container shape for the diagram
+
+**Notes:** Default value: 14.
+
+### external_containerFontFamily
+
+This sets the font family of External Container shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### external_containerFontWeight
+
+This sets the font weight of External Container shape for the diagram
+
+**Notes:** Default value: normal.
+
+### container_dbFontSize
+
+This sets the font size of Container DB shape for the diagram
+
+**Notes:** Default value: 14.
+
+### container_dbFontFamily
+
+This sets the font family of Container DB shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### container_dbFontWeight
+
+This sets the font weight of Container DB shape for the diagram
+
+**Notes:** Default value: normal.
+
+### external_container_dbFontSize
+
+This sets the font size of External Container DB shape for the diagram
+
+**Notes:** Default value: 14.
+
+### external_container_dbFontFamily
+
+This sets the font family of External Container DB shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### external_container_dbFontWeight
+
+This sets the font weight of External Container DB shape for the diagram
+
+**Notes:** Default value: normal.
+
+### container_queueFontSize
+
+This sets the font size of Container Queue shape for the diagram
+
+**Notes:** Default value: 14.
+
+### container_queueFontFamily
+
+This sets the font family of Container Queue shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### container_queueFontWeight
+
+This sets the font weight of Container Queue shape for the diagram
+
+**Notes:** Default value: normal.
+
+### external_container_queueFontSize
+
+This sets the font size of External Container Queue shape for the diagram
+
+**Notes:** Default value: 14.
+
+### external_container_queueFontFamily
+
+This sets the font family of External Container Queue shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### external_container_queueFontWeight
+
+This sets the font weight of External Container Queue shape for the diagram
+
+**Notes:** Default value: normal.
+
+### componentFontSize
+
+This sets the font size of Component shape for the diagram
+
+**Notes:** Default value: 14.
+
+### componentFontFamily
+
+This sets the font family of Component shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### componentFontWeight
+
+This sets the font weight of Component shape for the diagram
+
+**Notes:** Default value: normal.
+
+### external_componentFontSize
+
+This sets the font size of External Component shape for the diagram
+
+**Notes:** Default value: 14.
+
+### external_componentFontFamily
+
+This sets the font family of External Component shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### external_componentFontWeight
+
+This sets the font weight of External Component shape for the diagram
+
+**Notes:** Default value: normal.
+
+### component_dbFontSize
+
+This sets the font size of Component DB shape for the diagram
+
+**Notes:** Default value: 14.
+
+### component_dbFontFamily
+
+This sets the font family of Component DB shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### component_dbFontWeight
+
+This sets the font weight of Component DB shape for the diagram
+
+**Notes:** Default value: normal.
+
+### external_component_dbFontSize
+
+This sets the font size of External Component DB shape for the diagram
+
+**Notes:** Default value: 14.
+
+### external_component_dbFontFamily
+
+This sets the font family of External Component DB shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### external_component_dbFontWeight
+
+This sets the font weight of External Component DB shape for the diagram
+
+**Notes:** Default value: normal.
+
+### component_queueFontSize
+
+This sets the font size of Component Queue shape for the diagram
+
+**Notes:** Default value: 14.
+
+### component_queueFontFamily
+
+This sets the font family of Component Queue shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### component_queueFontWeight
+
+This sets the font weight of Component Queue shape for the diagram
+
+**Notes:** Default value: normal.
+
+### external_component_queueFontSize
+
+This sets the font size of External Component Queue shape for the diagram
+
+**Notes:** Default value: 14.
+
+### external_component_queueFontFamily
+
+This sets the font family of External Component Queue shape for the diagram
+
+**Notes:** Default value: "Open Sans", sans-serif.
+
+### external_component_queueFontWeight
+
+This sets the font weight of External Component Queue shape for the diagram
+
+**Notes:** Default value: normal.
+
+### wrap
+
+This sets the auto-wrap state for the diagram
+
+**Notes:** Default value: true.
+
+### wrapPadding
+
+This sets the auto-wrap padding for the diagram (sides only)
+
+**Notes:** Default value: 0.
+
+## parse
+
+### Parameters
+
+-   `text`  
+-   `dia`  
+
+Returns **any** 
+
 ## setSiteConfig
 
 ## setSiteConfig
@@ -921,14 +1429,6 @@ function _Default value: At default, will mirror Global Config_
 
 Returns **[object][5]** The siteConfig
 
-## parse
-
-### Parameters
-
--   `text`  
-
-Returns **any** 
-
 ## getSiteConfig
 
 ## getSiteConfig
@@ -986,30 +1486,6 @@ options in-place
 
 -   `options` **any** The potential setConfig parameter
 
-## addDirective
-
-Pushes in a directive to the configuration
-
-### Parameters
-
--   `directive` **[object][5]** The directive to push in
-
-## reset
-
-## reset
-
-| Function | Description                  | Type        | Required | Values |
-| -------- | ---------------------------- | ----------- | -------- | ------ |
-| reset    | Resets currentConfig to conf | Put Request | Required | None   |
-
-## conf
-
-| Parameter | Description                                                   | Type       | Required | Values                                       |
-| --------- | ------------------------------------------------------------- | ---------- | -------- | -------------------------------------------- |
-| conf      | base set of values, which currentConfig coul be **reset** to. | Dictionary | Required | Any Values, with respect to the secure Array |
-
-**Notes**: (default: current siteConfig ) (optional, default `getSiteConfig()`)
-
 ## render
 
 Function that renders an svg with a graph from a chart definition. Usage example below.
@@ -1038,16 +1514,36 @@ $(function () {
 
 Returns **any** 
 
+## addDirective
+
+Pushes in a directive to the configuration
+
+### Parameters
+
+-   `directive` **[object][5]** The directive to push in
+
+## reset
+
+## reset
+
+| Function | Description                  | Type        | Required | Values |
+| -------- | ---------------------------- | ----------- | -------- | ------ |
+| reset    | Resets currentConfig to conf | Put Request | Required | None   |
+
+## conf
+
+| Parameter | Description                                                    | Type       | Required | Values                                       |
+| --------- | -------------------------------------------------------------- | ---------- | -------- | -------------------------------------------- |
+| conf      | base set of values, which currentConfig could be **reset** to. | Dictionary | Required | Any Values, with respect to the secure Array |
+
+**Notes**: (default: current siteConfig ) (optional, default `getSiteConfig()`)
+
 ## updateRendererConfigs
 
 ### Parameters
 
 -   `conf` **any** 
 
-## reinitialize
-
-To be removed
-
 ## initialize
 
 ### Parameters

docs/_sidebar.md

@@ -15,6 +15,7 @@
   - [Pie Chart](pie.md)
   - [Requirement Diagram](requirementDiagram.md)
   - [Gitgraph (Git) Diagram 🔥](gitgraph.md)
+  - [C4C Diagram (Context) Diagram 🦺⚠️](c4c.md)
   - [Other Examples](examples.md)
 
 - ⚙️ Deployment and Configuration
@@ -24,6 +25,7 @@
   - [Mermaid API Configuration](Setup.md)
   - [Directives](directives.md)
   - [Theming](theming.md)
+  - [Accessibility](accessibility.md)
   - [Mermaid CLI](mermaidCLI.md)
   - [Advanced usage](n00b-advanced.md)
 

docs/accessibility.md

@@ -0,0 +1,214 @@
+# Accessibility Options
+
+**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/accessibility.md)
+
+## Accessibility
+Now with Mermaid library is in much wider use, we have started to work towwards more accessible features, based on the feedback from the community.
+
+TO begin with, we have added a new feature to Mermaid library, which is to support accessibility options, **Accessibility Title** and **Accessibility Description**.
+
+This support for accessibility options is available for all the diagrams/chart types. Also, we have tired to keep the same format for the accessibility options, so that it is easy to understand and maintain.
+
+
+## Defining Accessibility Options
+
+### Single line accessibility values
+The diagram authors can now add the accessibility options in the diagram definition, using the `accTitle` and `accDescr` keywords, where each keyword is followed by `:` and the string value for title and description like:
+-  `accTitle: "Your Accessibility Title"` or
+-  `accDescr: "Your Accessibility Description"`
+
+**When these two options are defined, they will  add a coressponding  `<title>` and `<desc>` tag in the SVG.**
+
+Let us take a look at the following example with a flowchart diagram:
+
+```mermaid-example
+   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]
+
+```
+See in the code snippet above, the `accTitle` and `accDescr` are defined in the diagram definition. They result in the following tags in SVG code:
+
+![Accessibility options rendered inside SVG](img/accessibility-div-example.png)
+
+
+### Multi-line Accessibility title/description
+You can also define the accessibility options in a multi-line format, where the keyword is followed by opening curly bracket `{` and then mutltile lines, followed by a closing `}`.
+
+`accTitle: My single line title value` (***single line format***)
+
+vs
+
+`accDescr: {
+  My multi-line description
+  of the diagram
+}` (***multi-line format***)
+
+Let us look at it in the following example, with same flowchart:
+```mermaid-example
+   graph LR
+      accTitle: Big decisions
+
+      accDescr {
+        My multi-line description
+        of the diagram
+      }
+
+      A[Hard] -->|Text| B(Round)
+      B --> C{Decision}
+      C -->|One| D[Result 1]
+
+```
+See in the code snippet above, the `accTitle` and `accDescr` are defined in the diagram definition. They result in the following tags in SVG code:
+
+![Accessibility options rendered inside SVG](img/accessibility-div-example-2.png)
+
+### Sample Code Snippet for other diagram types
+
+#### Sequence Diagram
+
+```mermaid-example
+   sequenceDiagram
+      accTitle: My Sequence Diagram
+      accDescr: My Sequence Diagram Description
+
+      Alice->>John: Hello John, how are you?
+      John-->>Alice: Great!
+      Alice-)John: See you later!
+```
+
+#### Class Diagram
+
+```mermaid-example
+   classDiagram
+      accTitle: My Class Diagram
+      accDescr: My Class Diagram Description
+
+      Vehicle <|-- Car
+```
+
+#### State Diagram
+
+```mermaid-example
+   stateDiagram
+      accTitle: My State Diagram
+      accDescr: My State Diagram Description
+
+       s1 --> s2
+
+```
+
+#### Entity Relationship Diagram
+
+```mermaid-example
+   erDiagram
+      accTitle: My Entity Relationship Diagram
+      accDescr: My Entity Relationship Diagram Description
+
+    CUSTOMER ||--o{ ORDER : places
+    ORDER ||--|{ LINE-ITEM : contains
+    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+
+```
+
+#### User Journey Diagram
+
+  ```mermaid-example
+    journey
+        accTitle: My User Journey Diagram
+        accDescr: My User Journey Diagram Description
+
+        title My working day
+        section Go to work
+          Make tea: 5: Me
+          Go upstairs: 3: Me
+          Do work: 1: Me, Cat
+        section Go home
+          Go downstairs: 5: Me
+          Sit down: 5: Me
+
+  ```
+
+#### Gantt Chart
+
+```mermaid-example
+   gantt
+      accTitle: My Gantt Chart Accessibility Title
+      accDescr: My Gantt Chart Accessibility Description
+
+    title A Gantt Diagram
+    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
+
+```
+
+#### Pie Chart
+
+```mermaid-example
+   pie
+      accTitle: My Pie Chart Accessibility Title
+      accDescr: My Pie Chart Accessibility Description
+
+    title Key elements in Product X
+    "Calcium" : 42.96
+    "Potassium" : 50.05
+    "Magnesium" : 10.01
+    "Iron" :  5
+
+```
+#### Requirement Diagram
+
+  ```mermaid-example
+    requirementDiagram
+        accTitle: My Requirement Diagram
+        accDescr: My Requirement Diagram Description
+
+         requirement test_req {
+    id: 1
+    text: the test text.
+    risk: high
+    verifymethod: test
+    }
+
+    element test_entity {
+    type: simulation
+    }
+
+    test_entity - satisfies -> test_req
+
+  ```
+
+#### Gitgraph
+
+  ```mermaid-example
+    gitGraph
+        accTitle: My Gitgraph Accessibility Title
+        accDescr: My Gitgraph Accessibility Description
+
+       commit
+       commit
+       branch develop
+       checkout develop
+       commit
+       commit
+       checkout main
+       merge develop
+       commit
+       commit
+
+  ```
+
+
+
+
+
+
+

docs/c4c.md

@@ -0,0 +1,367 @@
+# C4 Diagrams
+
+**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/gitgraph.md)
+> C4 Diagram: This is an experimental diagram for now. The syntax and properties can change in future releases. Proper documentation will be provided when the syntax is stable.
+
+
+
+Mermaid's c4 diagram syntax is compatible with plantUML. See example below:
+
+```mermaid-example
+    C4Context
+      title System Context diagram for Internet Banking System
+      Enterprise_Boundary(b0, "BankBoundary0") {
+        Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
+        Person(customerB, "Banking Customer B")      
+        Person_Ext(customerC, "Banking Customer C", "desc")            
+
+        Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
+
+        System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")  
+
+        Enterprise_Boundary(b1, "BankBoundary") {
+         
+          SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")      
+
+          System_Boundary(b2, "BankBoundary2") {  
+            System(SystemA, "Banking System A")  
+            System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")        
+          } 
+
+          System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.") 
+          SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.") 
+
+          Boundary(b3, "BankBoundary3", "boundary") {  
+            SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")        
+            SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.") 
+          }
+        }
+      }
+      
+      BiRel(customerA, SystemAA, "Uses")
+      BiRel(SystemAA, SystemE, "Uses")
+      Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
+      Rel(SystemC, customerA, "Sends e-mails to")
+
+      UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
+      UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
+      UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
+      UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
+      UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
+      
+      UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
+
+
+```
+
+For an example, see the source code demos/index.html
+
+5 types of C4 charts are supported.
+
+ - System Context (C4Context)
+ - Container diagram (C4Container)
+ - Component diagram (C4Component)
+ - Dynamic diagram (C4Dynamic)
+ - Deployment diagram (C4Deployment)
+
+Please refer to the linked document [C4-PlantUML syntax](https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/README.md) for how to write the c4 diagram.
+
+C4 diagram is fixed style, such as css color, so different css is not provided under different skins.
+updateElementStyle and UpdateElementStyle are written in the diagram last part. updateElementStyle is inconsistent with the original definition and updates the style of the relationship, including the offset of the text label relative to the original position.
+
+The layout does not use a fully automated layout algorithm. The position of shapes is adjusted by changing the order in which statements are written. So there is no plan to support the following Layout statements.
+The number of shapes per row and the number of boundaries can be adjusted using UpdateLayoutConfig.
+
+- Layout
+- - Lay_U, Lay_Up
+- - Lay_D, Lay_Down
+- - Lay_L, Lay_Left
+- - Lay_R, Lay_Right
+
+The following unfinished features are not supported in the short term.
+
+- [ ] sprite
+- [ ] tags
+- [ ] link
+- [ ] Legend
+
+- [X] System Context
+- - [X] Person(alias, label, ?descr, ?sprite, ?tags, $link)
+- - [X] Person_Ext
+- - [X] System(alias, label, ?descr, ?sprite, ?tags, $link)
+- - [X] SystemDb
+- - [X] SystemQueue
+- - [X] System_Ext
+- - [X] SystemDb_Ext
+- - [X] SystemQueue_Ext
+- - [X] Boundary(alias, label, ?type, ?tags, $link)
+- - [X] Enterprise_Boundary(alias, label, ?tags, $link)
+- - [X] System_Boundary
+
+- [X] Container diagram
+- - [X] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
+- - [X] ContainerDb
+- - [X] ContainerQueue
+- - [X] Container_Ext
+- - [X] ContainerDb_Ext
+- - [X] ContainerQueue_Ext
+- - [X] Container_Boundary(alias, label, ?tags, $link)
+
+- [X] Component diagram
+- - [X] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
+- - [X] ComponentDb
+- - [X] ComponentQueue
+- - [X] Component_Ext
+- - [X] ComponentDb_Ext
+- - [X] ComponentQueue_Ext
+
+- [X] Dynamic diagram
+- - [X] RelIndex(index, from, to, label, ?tags, $link)
+
+- [X] Deployment diagram
+- - [X] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
+- - [X] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
+- - [X] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
+- - [X] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
+
+- [X] Relationship Types
+- - [X] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
+- - [X] BiRel (bidirectional relationship)
+- - [X] Rel_U, Rel_Up
+- - [X] Rel_D, Rel_Down
+- - [X] Rel_L, Rel_Left
+- - [X] Rel_R, Rel_Right
+- - [X] Rel_Back
+- - [X] RelIndex  * Compatible with C4-Plantuml syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written.
+
+
+
+- [ ] Custom tags/stereotypes support and skinparam updates
+- - [ ] AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend.
+- - [ ] AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new Relationship tag. The styles of the tagged relationships are updated and the tag is displayed in the calculated legend.
+- - [X] UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): This call updates the default style of the elements (component, ...) and creates no additional legend entry.
+- - [X] UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY): This call updates the default relationship colors and creates no additional legend entry. Two new parameters, offsetX and offsetY, are added to set the offset of the original position of the text.
+- - [ ] RoundedBoxShape(): This call returns the name of the rounded box shape and can be used as ?shape argument.
+- - [ ] EightSidedShape(): This call returns the name of the eight sided shape and can be used as ?shape argument.
+- - [ ] DashedLine(): This call returns the name of the dashed line and can be used as ?lineStyle argument.
+- - [ ] DottedLine(): This call returns the name of the dotted line and can be used as ?lineStyle argument.
+- - [ ] BoldLine(): This call returns the name of the bold line and can be used as ?lineStyle argument.
+- - [X] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): New. This call updates the default c4ShapeInRow(4) and c4BoundaryInRow(2). 
+
+
+There are two ways to assign parameters with question marks. One uses the non-named parameter assignment method in the order of the parameters, and the other uses the named parameter assignment method, where the name must start with a $ symbol. 
+
+Example: UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY)
+```
+UpdateRelStyle(customerA, bankA, "red", "blue", "-40", "60")
+UpdateRelStyle(customerA, bankA, $offsetX="-40", $offsetY="60", $lineColor="blue", $textColor="red")
+UpdateRelStyle(customerA, bankA, $offsetY="60")
+
+```
+
+## C4 System Context Diagram (C4Context)
+
+```mermaid-example
+    C4Context
+      title System Context diagram for Internet Banking System
+      Enterprise_Boundary(b0, "BankBoundary0") {
+        Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
+        Person(customerB, "Banking Customer B")      
+        Person_Ext(customerC, "Banking Customer C", "desc")            
+
+        Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
+
+        System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")  
+
+        Enterprise_Boundary(b1, "BankBoundary") {
+         
+          SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")      
+
+          System_Boundary(b2, "BankBoundary2") {  
+            System(SystemA, "Banking System A")  
+            System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")        
+          } 
+
+          System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.") 
+          SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.") 
+
+          Boundary(b3, "BankBoundary3", "boundary") {  
+            SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")        
+            SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.") 
+          }
+        }
+      }
+      
+      BiRel(customerA, SystemAA, "Uses")
+      BiRel(SystemAA, SystemE, "Uses")
+      Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
+      Rel(SystemC, customerA, "Sends e-mails to")
+
+      UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
+      UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
+      UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
+      UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
+      UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
+      
+      UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
+
+```
+
+## C4 Container diagram (C4Container)
+
+```mermaid-example
+    C4Container
+    title Container diagram for Internet Banking System
+
+    System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", $tags="v1.0")
+    Person(customer, Customer, "A customer of the bank, with personal bank accounts", $tags="v1.0")
+
+    Container_Boundary(c1, "Internet Banking") {
+        Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to cutomers via their web browser")
+        Container_Ext(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
+        Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
+        ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")
+        ContainerDb_Ext(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API")
+
+    }
+
+    System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
+
+    Rel(customer, web_app, "Uses", "HTTPS")
+    UpdateRelStyle(customer, web_app, $offsetY="60", $offsetX="90")     
+    Rel(customer, spa, "Uses", "HTTPS")
+    UpdateRelStyle(customer, spa, $offsetY="-40")    
+    Rel(customer, mobile_app, "Uses")
+    UpdateRelStyle(customer, mobile_app, $offsetY="-30") 
+
+    Rel(web_app, spa, "Delivers")
+    UpdateRelStyle(web_app, spa, $offsetX="130") 
+    Rel(spa, backend_api, "Uses", "async, JSON/HTTPS")
+    Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS")
+    Rel_Back(database, backend_api, "Reads from and writes to", "sync, JDBC")
+
+    Rel(email_system, customer, "Sends e-mails to")
+    UpdateRelStyle(email_system, customer, $offsetX="-45")    
+    Rel(backend_api, email_system, "Sends e-mails using", "sync, SMTP")
+    UpdateRelStyle(backend_api, email_system, $offsetY="-60")    
+    Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
+    UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140") 
+
+```
+
+## C4 Component diagram (C4Component)
+```mermaid-example
+    C4Component
+    title Component diagram for Internet Banking System - API Application
+
+    Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
+    Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.")
+    ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
+    System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
+
+    Container_Boundary(api, "API Application") {
+        Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system")
+        Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary of their bank accounts")
+        Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.")
+        Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.")
+
+        Rel(sign, security, "Uses")
+        Rel(accounts, mbsfacade, "Uses")
+        Rel(security, db, "Read & write to", "JDBC")
+        Rel(mbsfacade, mbs, "Uses", "XML/HTTPS")
+    }
+
+    Rel_Back(spa, sign, "Uses", "JSON/HTTPS")
+    Rel(spa, accounts, "Uses", "JSON/HTTPS")
+
+    Rel(ma, sign, "Uses", "JSON/HTTPS")
+    Rel(ma, accounts, "Uses", "JSON/HTTPS")
+
+    UpdateRelStyle(spa, sign, $offsetY="-40") 
+    UpdateRelStyle(spa, accounts, $offsetX="40", $offsetY="40")
+
+    UpdateRelStyle(ma, sign, $offsetX="-90", $offsetY="40")
+    UpdateRelStyle(ma, accounts, $offsetY="-40")
+
+        UpdateRelStyle(sign, security, $offsetX="-160", $offsetY="10")
+        UpdateRelStyle(accounts, mbsfacade, $offsetX="140", $offsetY="10")
+        UpdateRelStyle(security, db, $offsetY="-40")
+        UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")
+
+```
+
+## C4 Dynamic diagram (C4Dynamic)
+
+```mermaid-example
+    C4Dynamic
+    title Dynamic diagram for Internet Banking System - API Application
+
+    ContainerDb(c4, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
+    Container(c1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
+    Container_Boundary(b, "API Application") {
+      Component(c3, "Security Component", "Spring Bean", "Provides functionality Related to signing in, changing passwords, etc.")
+      Component(c2, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.")
+    }
+    Rel(c1, c2, "Submits credentials to", "JSON/HTTPS")
+    Rel(c2, c3, "Calls isAuthenticated() on")
+    Rel(c3, c4, "select * from users where username = ?", "JDBC")
+
+    UpdateRelStyle(c1, c2, $textColor="red", $offsetY="-40")
+    UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60")
+    UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10")
+
+```
+
+## C4 Deployment diagram (C4Deployment)
+
+```mermaid-example
+    C4Deployment
+    title Deployment Diagram for Internet Banking System - Live
+
+    Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){
+        Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
+    }
+
+    Deployment_Node(comp, "Customer's computer", "Mircosoft Windows or Apple macOS"){
+        Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,<br/> Apple Safari or Microsoft Edge"){
+            Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.")
+        }
+    }
+
+    Deployment_Node(plc, "Big Bank plc", "Big Bank plc data center"){
+        Deployment_Node(dn, "bigbank-api*** x8", "Ubuntu 16.04 LTS"){
+            Deployment_Node(apache, "Apache Tomcat", "Apache Tomcat 8.x"){
+                Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.")
+            }
+        }
+        Deployment_Node(bb2, "bigbank-web*** x4", "Ubuntu 16.04 LTS"){
+            Deployment_Node(apache2, "Apache Tomcat", "Apache Tomcat 8.x"){
+                Container(web, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet Banking single page application.")
+            }
+        }
+        Deployment_Node(bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS"){
+            Deployment_Node(oracle, "Oracle - Primary", "Oracle 12c"){
+                ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
+            }
+        }
+        Deployment_Node(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS") {
+            Deployment_Node(oracle2, "Oracle - Secondary", "Oracle 12c") {
+                ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
+            }
+        }
+    }
+
+    Rel(mobile, api, "Makes API calls to", "json/HTTPS")
+    Rel(spa, api, "Makes API calls to", "json/HTTPS")
+    Rel_U(web, spa, "Delivers to the customer's web browser")
+    Rel(api, db, "Reads from and writes to", "JDBC")
+    Rel(api, db2, "Reads from and writes to", "JDBC")
+    Rel_R(db, db2, "Replicates data to")
+
+    UpdateRelStyle(spa, api, $offsetY="-40")
+    UpdateRelStyle(web, spa, $offsetY="-40")
+    UpdateRelStyle(api, db, $offsetY="-20", $offsetX="5")
+    UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20")
+    UpdateRelStyle(db, db2, $offsetY="-10")
+
+```

docs/classDiagram.md

@@ -8,28 +8,27 @@ The class diagram is the main building block of object-oriented modeling. It is
 Mermaid can render class diagrams.
 
 ```mermaid-example
- classDiagram
-      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()
-      }
-
+classDiagram
+    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()
+    }
 ```
 
 ## Syntax
@@ -49,7 +48,7 @@ classDiagram
     BankAccount : +String owner
     BankAccount : +Bigdecimal balance
     BankAccount : +deposit(amount)
-    BankAccount : +withdrawl(amount)
+    BankAccount : +withdrawal(amount)
 
 ```
 
@@ -79,12 +78,12 @@ There are two ways to define the members of a class, and regardless of whichever
 - Associate a member of a class using **:** (colon) followed by member name, useful to define one member at a time. For example:
 
 ```mermaid-example
- classDiagram
- class BankAccount
- BankAccount : +String owner
- BankAccount : +BigDecimal balance
- BankAccount : +deposit(amount)
- BankAccount : +withdrawal(amount)
+classDiagram
+class BankAccount
+BankAccount : +String owner
+BankAccount : +BigDecimal balance
+BankAccount : +deposit(amount)
+BankAccount : +withdrawal(amount)
 ```
 
 - Associate members of a class using **{}** brackets, where members are grouped within curly brackets. Suitable for defining multiple members at once. For example:
@@ -95,7 +94,7 @@ class BankAccount{
     +String owner
     +BigDecimal balance
     +deposit(amount)
-    +withdrawl(amount)
+    +withdrawal(amount)
 }
 ```
 
@@ -110,7 +109,7 @@ class BankAccount{
     +String owner
     +BigDecimal balance
     +deposit(amount) bool
-    +withdrawl(amount) int
+    +withdrawal(amount) int
 }
 ```
 
@@ -385,9 +384,9 @@ _URL Link:_
 ```mmd
 classDiagram
 class Shape
-link Shape "http://www.github.com" "This is a tooltip for a link"
+link Shape "https://www.github.com" "This is a tooltip for a link"
 class Shape2
-click Shape2 href "http://www.github.com" "This is a tooltip for a link"
+click Shape2 href "https://www.github.com" "This is a tooltip for a link"
 ```
 
 _Callback:_
@@ -402,10 +401,10 @@ click Shape2 call callbackFunction() "This is a tooltip for a callback"
 
 ```html
 <script>
-    var callbackFunction = function(){
-        alert('A callback was triggered');
-    }
-<script>
+    var callbackFunction = function () {
+      alert('A callback was triggered');
+    };
+</script>
 ```
 
 ```mermaid
@@ -413,11 +412,11 @@ classDiagram
     class Class01
     class Class02
     callback Class01 "callbackFunction" "Callback tooltip"
-    link Class02 "http://www.github.com" "This is a link"
+    link Class02 "https://www.github.com" "This is a link"
     class Class03
     class Class04
     click Class03 call callbackFunction() "Callback tooltip"
-    click Class04 href "http://www.github.com" "This is a link"
+    click Class04 href "https://www.github.com" "This is a link"
 ```
 
 > **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.
@@ -450,18 +449,17 @@ Beginners tip, a full example using interactive links in an html context:
       }
 
       callback Duck callback "Tooltip"
-      link Zebra "http://www.github.com" "This is a link"
+      link Zebra "https://www.github.com" "This is a link"
   </div>
 
   <script>
-    var callback = function(){
+    var callback = function () {
         alert('A callback was triggered');
-    }
-    var config = {
-      startOnLoad:true,
-      securityLevel:'loose',
     };
-
+    var config = {
+        startOnLoad: true,
+        securityLevel: 'loose'
+    };
     mermaid.initialize(config);
   </script>
 </body>

docs/developer-docs/configuration.md

@@ -1,9 +1,9 @@
 # Configuration
 
-When mermaid starts configuration is extracted to a configuration to be used for a diagram. There a 3 sources for configuration:
+When mermaid starts configuration is extracted to a configuration to be used for a diagram. There are 3 sources for configuration:
 
 * The default configuration
-* Overrides on the site level, set is set by the initialize call and will  be applied for all diagrams in the site/app. The term for this is the **siteConfig**.
+* Overrides on the site level is set by the initialize call and will be applied to all diagrams in the site/app. The term for this is the **siteConfig**.
 * Directives - diagram authors can update select configuration parameters directly in the diagram code via directives and these are applied to the render config.
 
 **The render config** is configuration that is used when rendering by applying these configurations.

docs/development.md

@@ -1,135 +1,134 @@
-# Development and Contribution 🙌
-
-So you want to help? That's great!
-
-![Image of 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.
-
-**The Docs Structure is dictated by [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**
-
-**Note: Commits and Pull Requests should be directed to the develop branch.**
-
-## Branching
-
-Mermaid uses a [Git Flow](https://guides.github.com/introduction/flow/)–inspired approach to branching. So development is done in the `develop` branch.
-
-Once development is done we branch a `release` branch from `develop` for testing.
-
-Once the release happens we merge the `release` branch with `master` and kill the `release` branch.
-
-This means that **you should branch off your pull request from develop** and direct all Pull Requests to it.
-
-## Contributing Code
-
-We make all changes via Pull Requests. As we have many Pull Requests from developers new to mermaid, we have put in place a process, wherein *knsv, Knut Sveidqvist* is the primary reviewer of changes and merging pull requests. The process is as follows:
-
-* Large changes reviewed by knsv or other developer asked to review by knsv
-* Smaller, low-risk changes like dependencies, documentation, etc. can be merged by active collaborators
-* Documentation (we encourage updates to the docs folder; you can submit them via direct commits)
-
-When you commit code, create a branch with the following naming convention:
-
-Start with the type, such as **feature** or **bug**, followed by the issue number for reference, and a text that describes the issue.
-
-**One example:**
-
-`feature/945_state_diagrams`
-
-**Another example:**
-
-`bug/123_nasty_bug_branch`
-
-## Contributing to Documentation
-
-If it is not in the documentation, it's like it never happened. Wouldn't that be sad? With all the effort that was put into the feature?
-
-The docs are located in the `docs` folder and are written in Markdown. Just pick the right section and start typing. If you want to propose changes to the structure of the documentation, such as adding a new section or a new file you do that via the **[sidebar](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**.
-
-> **All the documents displayed in the github.io page are listed in [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**.
-
-The contents of [https://mermaid-js.github.io/mermaid/](https://mermaid-js.github.io/mermaid/) are based on the docs from the `master` branch. Updates committed to the `master` branch are reflected in the [Mermaid Docs](https://mermaid-js.github.io/mermaid/) once released.
-
-## How to Contribute to Documentation
-
-We are a little less strict here, it is OK to commit directly in the `develop` branch if you are a collaborator.
-
-The documentation is located in the `docs` directory and organized according to relevant subfolder.
-
-We encourage contributions to the documentation at [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs). We publish documentation using GitHub Pages with [Docsify](https://www.youtube.com/watch?v=TV88lp7egMw&t=3s)
-
-### Add Unit Tests for Parsing
-
-This is important so that, if someone that does not know about this great feature suggests a change to the grammar, they get notified early on when that change breaks the parser. Another important aspect is that, without proper parsing, tests refactoring is pretty much impossible.
-
-### Add E2E Tests
-
-This tests the rendering and visual apearance of the diagrams. 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:
-
-1. Run `yarn dev` to start the dev server
-2. Start **Cypress** by running `cypress open` in the **mermaid** folder.  
-(Make sure you have path to Cypress in order, the binary is located in `node_modules/.bin`).
-
-The rendering tests are very straightforward to create. There is a function `imgSnapshotTest`, which takes a diagram in text form and the mermaid options, and it renders that diagram in Cypress.
-
-When running in CI it will take a snapshot of the rendered diagram and compare it with the snapshot from last build and flag it for review if it differs.
-
-This is what a rendering test looks like:
-
-```js
-it('should render forks and joins', () => {
-    imgSnapshotTest(
-        `
-    stateDiagram
-    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 --> [*]
-    `,
-        { logLevel: 0 }
-    );
-    cy.get('svg');
-});
-
-```
-
-### Any Questions or Suggestions?
-
-After logging in at [GitHub.com](https://www.github.com), open or append to an issue [using the GitHub issue tracker of the mermaid-js repository](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Area%3A+Documentation%22).
-
-### How to Contribute a Suggestion
-
-Markdown is used to format the text, for more information about Markdown [see the GitHub Markdown help page](https://help.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax).
-
-To edit Docs on your computer:
-
-1. Find the Markdown file (.md) to edit in the [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs) directory in the `develop` branch.
-2. Create a fork of the develop branch.
-3. Make changes or add new documentation.
-4. Commit changes to your fork and push it to GitHub.
-5. Create a Pull Request of your fork.
-
-To edit Docs on GitHub:
-
-1. Login to [GitHub.com](https://www.github.com).
-2. Navigate to [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs).
-3. To edit a file, click the pencil icon at the top-right of the file contents panel.
-4. Describe what you changed in the **Propose file change** section, located at the bottom of the page.
-5. Submit your changes by clicking the button **Propose file change** at the bottom (by automatic creation of a fork and a new branch).
-6. Create a Pull Request of your newly forked branch by clicking the green **Create Pull Request** button.
-
-## Last Words
-
-Don't get daunted if it is hard in the beginning. We have a great community with only encouraging words. So, if you get stuck, ask for help and hints in the Slack forum. If you want to show off something good, show it off there.
-
-[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)
+# Development and Contribution 🙌
+
+So you want to help? That's great!
+
+![Image of 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.
+
+**The Docs Structure is dictated by [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**
+
+**Note: Commits and Pull Requests should be directed to the develop branch.**
+
+## Branching
+
+Mermaid uses a [Git Flow](https://guides.github.com/introduction/flow/)–inspired approach to branching. So development is done in the `develop` branch.
+
+Once development is done we branch a `release` branch from `develop` for testing.
+
+Once the release happens we merge the `release` branch with `master` and kill the `release` branch.
+
+This means that **you should branch off your pull request from develop** and direct all Pull Requests to it.
+
+## Contributing Code
+
+We make all changes via Pull Requests. As we have many Pull Requests from developers new to mermaid, we have put in place a process, wherein *knsv, Knut Sveidqvist* is the primary reviewer of changes and merging pull requests. The process is as follows:
+
+* Large changes reviewed by knsv or other developer asked to review by knsv
+* Smaller, low-risk changes like dependencies, documentation, etc. can be merged by active collaborators
+* Documentation (we encourage updates to the docs folder; you can submit them via direct commits)
+
+When you commit code, create a branch with the following naming convention:
+
+Start with the type, such as **feature** or **bug**, followed by the issue number for reference, and a text that describes the issue.
+
+**One example:**
+
+`feature/945_state_diagrams`
+
+**Another example:**
+
+`bug/123_nasty_bug_branch`
+
+## Contributing to Documentation
+
+If it is not in the documentation, it's like it never happened. Wouldn't that be sad? With all the effort that was put into the feature?
+
+The docs are located in the `docs` folder and are written in Markdown. Just pick the right section and start typing. If you want to propose changes to the structure of the documentation, such as adding a new section or a new file you do that via the **[sidebar](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**.
+
+> **All the documents displayed in the github.io page are listed in [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**.
+
+The contents of [https://mermaid-js.github.io/mermaid/](https://mermaid-js.github.io/mermaid/) are based on the docs from the `master` branch. Updates committed to the `master` branch are reflected in the [Mermaid Docs](https://mermaid-js.github.io/mermaid/) once released.
+
+## How to Contribute to Documentation
+
+We are a little less strict here, it is OK to commit directly in the `develop` branch if you are a collaborator.
+
+The documentation is located in the `docs` directory and organized according to relevant subfolder.
+
+We encourage contributions to the documentation at [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs). We publish documentation using GitHub Pages with [Docsify](https://www.youtube.com/watch?v=TV88lp7egMw&t=3s)
+
+### Add Unit Tests for Parsing
+
+This is important so that, if someone that does not know about this great feature suggests a change to the grammar, they get notified early on when that change breaks the parser. Another important aspect is that, without proper parsing, tests refactoring is pretty much impossible.
+
+### Add E2E Tests
+
+This tests the rendering and visual appearance of the diagrams. 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:
+
+1. Run `yarn dev` to start the dev server
+2. Start **Cypress** by running `cypress open` in the **mermaid** folder.  
+(Make sure you have path to Cypress in order, the binary is located in `node_modules/.bin`).
+
+The rendering tests are very straightforward to create. There is a function `imgSnapshotTest`, which takes a diagram in text form and the mermaid options, and it renders that diagram in Cypress.
+
+When running in CI it will take a snapshot of the rendered diagram and compare it with the snapshot from last build and flag it for review if it differs.
+
+This is what a rendering test looks like:
+
+```js
+it('should render forks and joins', () => {
+    imgSnapshotTest(
+        `
+    stateDiagram
+    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 --> [*]
+    `,
+        { logLevel: 0 }
+    );
+    cy.get('svg');
+});
+```
+
+### Any Questions or Suggestions?
+
+After logging in at [GitHub.com](https://www.github.com), open or append to an issue [using the GitHub issue tracker of the mermaid-js repository](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Area%3A+Documentation%22).
+
+### How to Contribute a Suggestion
+
+Markdown is used to format the text, for more information about Markdown [see the GitHub Markdown help page](https://help.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax).
+
+To edit Docs on your computer:
+
+1. Find the Markdown file (.md) to edit in the [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs) directory in the `develop` branch.
+2. Create a fork of the develop branch.
+3. Make changes or add new documentation.
+4. Commit changes to your fork and push it to GitHub.
+5. Create a Pull Request of your fork.
+
+To edit Docs on GitHub:
+
+1. Login to [GitHub.com](https://www.github.com).
+2. Navigate to [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs).
+3. To edit a file, click the pencil icon at the top-right of the file contents panel.
+4. Describe what you changed in the **Propose file change** section, located at the bottom of the page.
+5. Submit your changes by clicking the button **Propose file change** at the bottom (by automatic creation of a fork and a new branch).
+6. Create a Pull Request of your newly forked branch by clicking the green **Create Pull Request** button.
+
+## Last Words
+
+Don't get daunted if it is hard in the beginning. We have a great community with only encouraging words. So, if you get stuck, ask for help and hints in the Slack forum. If you want to show off something good, show it off there.
+
+[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)

docs/diagrams-and-syntax-and-examples/flowchart.md

@@ -400,7 +400,7 @@ flowchart TB
 
 ## Interaction
 
-It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
+It is possible to bind a click event to a node, the click can lead to either a JavaScript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
 
 ```
 click nodeId callback
@@ -408,15 +408,15 @@ click nodeId call callback()
 ```
 
 * nodeId is the id of the node
-* callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the nodeId as parameter.
+* callback is the name of a JavaScript function defined on the page displaying the graph, the function will be called with the nodeId as parameter.
 
 Examples of tooltip usage below:
 
 ```html
 <script>
-  var callback = function(){
-      alert('A callback was triggered');
-  }
+  var callback = function () {
+    alert('A callback was triggered');
+  };
 </script>
 ```
 
@@ -428,9 +428,9 @@ graph LR;
     B-->C;
     C-->D;
     click A callback "Tooltip for a callback"
-    click B "http://www.github.com" "This is a tooltip for a link"
+    click B "https://www.github.com" "This is a tooltip for a link"
     click A call callback() "Tooltip for a callback"
-    click B href "http://www.github.com" "This is a tooltip for a link"
+    click B href "https://www.github.com" "This is a tooltip for a link"
 ```
 > **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.
 
@@ -443,13 +443,14 @@ graph LR;
     B-->C;
     C-->D;
     D-->E;
-    click A "http://www.github.com" _blank
-    click B "http://www.github.com" "Open this in a new tab" _blank
-    click C href "http://www.github.com" _blank
-    click D href "http://www.github.com" "Open this in a new tab" _blank
+    click A "https://www.github.com" _blank
+    click B "https://www.github.com" "Open this in a new tab" _blank
+    click C href "https://www.github.com" _blank
+    click D href "https://www.github.com" "Open this in a new tab" _blank
 ```
 
 Beginners tip, a full example using interactive links in a html context:
+
 ```html
 <body>
   <div class="mermaid">
@@ -458,25 +459,24 @@ Beginners tip, a full example using interactive links in a html context:
         B-->C;
         C-->D;
         click A callback "Tooltip"
-        click B "http://www.github.com" "This is a link"
+        click B "https://www.github.com" "This is a link"
         click C call callback() "Tooltip"
-        click D href "http://www.github.com" "This is a link"
+        click D href "https://www.github.com" "This is a link"
   </div>
 
   <script>
-    var callback = function(){
+    var callback = function () {
         alert('A callback was triggered');
-    }
-    var config = {
-        startOnLoad:true,
-        flowchart:{
-            useMaxWidth:true,
-            htmlLabels:true,
-            curve:'cardinal',
-        },
-        securityLevel:'loose',
     };
-
+    var config = {
+        startOnLoad: true,
+        flowchart: {
+            useMaxWidth: true,
+            htmlLabels: true,
+            curve: 'cardinal'
+        },
+        securityLevel: 'loose'
+    };
     mermaid.initialize(config);
   </script>
 </body>
@@ -578,14 +578,12 @@ below:
 
 **Example style**
 
-```html
-<style>
-    .cssClass > rect{
-        fill:#FF0000;
-        stroke:#FFFF00;
-        stroke-width:4px;
-    }
-</style>
+```css
+.cssClass > rect {
+    fill: #FF0000;
+    stroke: #FFFF00;
+    stroke-width: 4px;
+}
 ```
 
 **Example definition**
@@ -649,6 +647,6 @@ mermaid.flowchartConfig can be set to a JSON string with config parameters or th
 
 ```javascript
 mermaid.flowchartConfig = {
-    width: 100%
+    width: '100%'
 }
 ```

docs/directives.md

@@ -5,9 +5,9 @@
 ## Directives
 Directives gives a diagram author the capability to alter the appearance of a diagram before rendering by changing the applied configuration.
 
-The significance of having directives is that you have them available while writing the diagram, and can modify the 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.
+The significance of having directives is that you have them available while writing the diagram, and can modify the default global and diagram specific configurations. So, directives are applied on top of the default configurations. The beauty of directives is that you can use them to alter configuration settings for a specific diagram, i.e. at an individual level.
 
-While directives allow you to change most of the default 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.
+While directives allow you to change most of the default configuration settings, there are some that are not available, that too for security reasons. Also, you do have the *option to define the set of configurations* that you would allow to be available to the diagram author for overriding with help of directives.
 
 ## Types of Directives options
 Mermaid basically supports two types of configuration options to be overridden by directives.
@@ -21,7 +21,7 @@ Mermaid basically supports two types of configuration options to be overridden b
 
 
 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.
+ For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alter whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type.
 
 **NOTE:** These options listed here are not all the configuration options. To get hold of all the configuration options, please refer to the [defaultConfig.js](https://github.com/mermaid-js/mermaid/blob/develop/src/defaultConfig.js) in the source code.
 ```
@@ -173,7 +173,7 @@ Some common flowchart configurations are:
 - *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*
+*Soon we plan to publish a complete list all diagram specific configurations updated in the docs*
 
 The following code snippet changes flowchart config:
 
@@ -196,15 +196,15 @@ A --> C[End]
 Some common sequence configurations are:
 - *width*: number
 - *height*: number
-- *messgageAlign*: left, center, right
+- *messageAlign*: 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*
+For complete list of sequence diagram configurations, see *defaultConfig.js* in the source code.
+*Soon we plan to publish a complete list all diagram specific configurations updated in the docs*
 
 So, `wrap` by default has a value of `false` for sequence diagrams.
 
@@ -214,12 +214,12 @@ Let us see an example:
 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?
+Bob->Alice: Fine, How did you mother like the book I suggested? And did you catch with the new book about alien invasion?
 Alice->Bob: Good.
 Bob->Alice: Cool
 ```
 
-Now let us enble wrap for sequence diagrams.
+Now let us enable wrap for sequence diagrams.
 
 The following code snippet changes sequence diagram config for `wrap` to `true`:
 
@@ -232,7 +232,7 @@ Using in the diagram above, the wrap will be enabled.
 %%{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?
+Bob->Alice: Fine, How did you mother like the book I suggested? And did you catch with the new book about alien invasion?
 Alice->Bob: Good.
 Bob->Alice: Cool
 ```