chore: merge branch 'develop' into 1252_gitgraph_reinvented

2025-01-14 06:43:25 +08:00 · 2022-02-17 17:48:48 +01:00 · 2022-02-17 17:48:48 +01:00 · 40f95a5dc1
commit 40f95a5dc1
parent bb2dd2f5f3 3b9900c1e0
106 changed files with 6452 additions and 13149 deletions
--- a/.github/workflows/lock-closed-issue.yml
+++ b/.github/workflows/lock-closed-issue.yml
@ -1,13 +0,0 @@
-name: Lock closed issue
-
-on: 
-  issues:
-    types: [closed]
-
-jobs:
-  triage:
-    runs-on: ubuntu-latest
-    steps:
-    - uses: Dunning-Kruger/lock-issues@v1
-      with:
-        repo-token: "${{ secrets.GITHUB_TOKEN }}"
--- a/.github/workflows/update-browserlist.yml
+++ b/.github/workflows/update-browserlist.yml
@ -11,7 +11,7 @@ jobs:
      - uses: actions/checkout@v2
      - run: npx browserslist@latest --update-db
      - name: Commit changes
-        uses: EndBug/add-and-commit@v8.0.1
+        uses: EndBug/add-and-commit@v8.0.2
        with:
          author_name: ${{ github.actor }}
          author_email: ${{ github.actor }}@users.noreply.github.com
--- a/.prettierrc
+++ b/.prettierrc
@ -1,4 +0,0 @@
-{
-  "printWidth": 100,
-  "singleQuote": true
-}
--- a/.travis.yml
+++ b/.travis.yml
@ -1,12 +0,0 @@
-dist: trusty
-language: node_js
-node_js:
-  - "10"
-cache:
-  npm: false
-script:
-  - yarn build
-  - yarn test --coverage
-  - yarn e2e
-after_success:
-  - cat ./coverage/lcov.info | ./node_modules/.bin/coveralls
--- a/README.md
+++ b/README.md
@ -37,7 +37,7 @@ For a more detailed introduction to Mermaid and some of its more basic uses, loo
 __The following are some examples of the diagrams, charts and graphs that can be made using Mermaid and the Markdown-inspired text specific to it. Click here jump into the [text syntax](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference).__
 <!-- <Flowchart> -->

-## Flowchart [<a href="http://mermaid-js.github.io/mermaid/#/flowchart">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0hhcmRdIC0tPnxUZXh0fCBCKFJvdW5kKVxuICAgIEIgLS0-IEN7RGVjaXNpb259XG4gICAgQyAtLT58T25lfCBEW1Jlc3VsdCAxXVxuICAgIEMgLS0-fFR3b3wgRVtSZXN1bHQgMl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
+## Flowchart [<a href="https://mermaid-js.github.io/mermaid/#/flowchart">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0hhcmRdIC0tPnxUZXh0fCBCKFJvdW5kKVxuICAgIEIgLS0-IEN7RGVjaXNpb259XG4gICAgQyAtLT58T25lfCBEW1Jlc3VsdCAxXVxuICAgIEMgLS0-fFR3b3wgRVtSZXN1bHQgMl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]

 ```
 flowchart LR
@ -55,7 +55,7 @@ C -->|Two| E[Result 2]
 ```


-## Sequence diagram [<a href="http://mermaid-js.github.io/mermaid/#/sequenceDiagram">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic2VxdWVuY2VEaWFncmFtXG5BbGljZS0-PkpvaG46IEhlbGxvIEpvaG4sIGhvdyBhcmUgeW91P1xubG9vcCBIZWFsdGhjaGVja1xuICAgIEpvaG4tPj5Kb2huOiBGaWdodCBhZ2FpbnN0IGh5cG9jaG9uZHJpYVxuZW5kXG5Ob3RlIHJpZ2h0IG9mIEpvaG46IFJhdGlvbmFsIHRob3VnaHRzIVxuSm9obi0tPj5BbGljZTogR3JlYXQhXG5Kb2huLT4-Qm9iOiBIb3cgYWJvdXQgeW91P1xuQm9iLS0-PkpvaG46IEpvbGx5IGdvb2QhIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
+## Sequence diagram [<a href="https://mermaid-js.github.io/mermaid/#/sequenceDiagram">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic2VxdWVuY2VEaWFncmFtXG5BbGljZS0-PkpvaG46IEhlbGxvIEpvaG4sIGhvdyBhcmUgeW91P1xubG9vcCBIZWFsdGhjaGVja1xuICAgIEpvaG4tPj5Kb2huOiBGaWdodCBhZ2FpbnN0IGh5cG9jaG9uZHJpYVxuZW5kXG5Ob3RlIHJpZ2h0IG9mIEpvaG46IFJhdGlvbmFsIHRob3VnaHRzIVxuSm9obi0tPj5BbGljZTogR3JlYXQhXG5Kb2huLT4-Qm9iOiBIb3cgYWJvdXQgeW91P1xuQm9iLS0-PkpvaG46IEpvbGx5IGdvb2QhIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]

 ```
 sequenceDiagram
@ -80,7 +80,7 @@ John->>Bob: How about you?
 Bob-->>John: Jolly good!
 ```

-## Gantt chart [<a href="http://mermaid-js.github.io/mermaid/#/gantt">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ2FudHRcbnNlY3Rpb24gU2VjdGlvblxuQ29tcGxldGVkIDpkb25lLCAgICBkZXMxLCAyMDE0LTAxLTA2LDIwMTQtMDEtMDhcbkFjdGl2ZSAgICAgICAgOmFjdGl2ZSwgIGRlczIsIDIwMTQtMDEtMDcsIDNkXG5QYXJhbGxlbCAxICAgOiAgICAgICAgIGRlczMsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAyICAgOiAgICAgICAgIGRlczQsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAzICAgOiAgICAgICAgIGRlczUsIGFmdGVyIGRlczMsIDFkXG5QYXJhbGxlbCA0ICAgOiAgICAgICAgIGRlczYsIGFmdGVyIGRlczQsIDFkIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
+## Gantt chart [<a href="https://mermaid-js.github.io/mermaid/#/gantt">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ2FudHRcbnNlY3Rpb24gU2VjdGlvblxuQ29tcGxldGVkIDpkb25lLCAgICBkZXMxLCAyMDE0LTAxLTA2LDIwMTQtMDEtMDhcbkFjdGl2ZSAgICAgICAgOmFjdGl2ZSwgIGRlczIsIDIwMTQtMDEtMDcsIDNkXG5QYXJhbGxlbCAxICAgOiAgICAgICAgIGRlczMsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAyICAgOiAgICAgICAgIGRlczQsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAzICAgOiAgICAgICAgIGRlczUsIGFmdGVyIGRlczMsIDFkXG5QYXJhbGxlbCA0ICAgOiAgICAgICAgIGRlczYsIGFmdGVyIGRlczQsIDFkIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]

 ```
 gantt
@ -103,7 +103,7 @@ gantt
    Parallel 4   :         des6, after des4, 1d
 ```

-## Class diagram [<a href="http://mermaid-js.github.io/mermaid/#/classDiagram">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiY2xhc3NEaWFncmFtXG5DbGFzczAxIDx8LS0gQXZlcnlMb25nQ2xhc3MgOiBDb29sXG48PGludGVyZmFjZT4-IENsYXNzMDFcbkNsYXNzMDkgLS0-IEMyIDogV2hlcmUgYW0gaT9cbkNsYXNzMDkgLS0qIEMzXG5DbGFzczA5IC0tfD4gQ2xhc3MwN1xuQ2xhc3MwNyA6IGVxdWFscygpXG5DbGFzczA3IDogT2JqZWN0W10gZWxlbWVudERhdGFcbkNsYXNzMDEgOiBzaXplKClcbkNsYXNzMDEgOiBpbnQgY2hpbXBcbkNsYXNzMDEgOiBpbnQgZ29yaWxsYVxuY2xhc3MgQ2xhc3MxMCB7XG4gID4-c2VydmljZT4-XG4gIGludCBpZFxuICBzaXplKClcbn0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
+## Class diagram [<a href="https://mermaid-js.github.io/mermaid/#/classDiagram">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiY2xhc3NEaWFncmFtXG5DbGFzczAxIDx8LS0gQXZlcnlMb25nQ2xhc3MgOiBDb29sXG48PGludGVyZmFjZT4-IENsYXNzMDFcbkNsYXNzMDkgLS0-IEMyIDogV2hlcmUgYW0gaT9cbkNsYXNzMDkgLS0qIEMzXG5DbGFzczA5IC0tfD4gQ2xhc3MwN1xuQ2xhc3MwNyA6IGVxdWFscygpXG5DbGFzczA3IDogT2JqZWN0W10gZWxlbWVudERhdGFcbkNsYXNzMDEgOiBzaXplKClcbkNsYXNzMDEgOiBpbnQgY2hpbXBcbkNsYXNzMDEgOiBpbnQgZ29yaWxsYVxuY2xhc3MgQ2xhc3MxMCB7XG4gID4-c2VydmljZT4-XG4gIGludCBpZFxuICBzaXplKClcbn0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]

 ```
 classDiagram
@ -142,7 +142,7 @@ class Class10 {
 }
 ```

-## State diagram [<a href="http://mermaid-js.github.io/mermaid/#/stateDiagram">docs</a> - <a href="https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtLXYyXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQiLCJ0aGVtZVZhcmlhYmxlcyI6eyJiYWNrZ3JvdW5kIjoid2hpdGUiLCJwcmltYXJ5Q29sb3IiOiIjRUNFQ0ZGIiwic2Vjb25kYXJ5Q29sb3IiOiIjZmZmZmRlIiwidGVydGlhcnlDb2xvciI6ImhzbCg4MCwgMTAwJSwgOTYuMjc0NTA5ODAzOSUpIiwicHJpbWFyeUJvcmRlckNvbG9yIjoiaHNsKDI0MCwgNjAlLCA4Ni4yNzQ1MDk4MDM5JSkiLCJzZWNvbmRhcnlCb3JkZXJDb2xvciI6ImhzbCg2MCwgNjAlLCA4My41Mjk0MTE3NjQ3JSkiLCJ0ZXJ0aWFyeUJvcmRlckNvbG9yIjoiaHNsKDgwLCA2MCUsIDg2LjI3NDUwOTgwMzklKSIsInByaW1hcnlUZXh0Q29sb3IiOiIjMTMxMzAwIiwic2Vjb25kYXJ5VGV4dENvbG9yIjoiIzAwMDAyMSIsInRlcnRpYXJ5VGV4dENvbG9yIjoicmdiKDkuNTAwMDAwMDAwMSwgOS41MDAwMDAwMDAxLCA5LjUwMDAwMDAwMDEpIiwibGluZUNvbG9yIjoiIzMzMzMzMyIsInRleHRDb2xvciI6IiMzMzMiLCJtYWluQmtnIjoiI0VDRUNGRiIsInNlY29uZEJrZyI6IiNmZmZmZGUiLCJib3JkZXIxIjoiIzkzNzBEQiIsImJvcmRlcjIiOiIjYWFhYTMzIiwiYXJyb3doZWFkQ29sb3IiOiIjMzMzMzMzIiwiZm9udEZhbWlseSI6IlwidHJlYnVjaGV0IG1zXCIsIHZlcmRhbmEsIGFyaWFsIiwiZm9udFNpemUiOiIxNnB4IiwibGFiZWxCYWNrZ3JvdW5kIjoiI2U4ZThlOCIsIm5vZGVCa2ciOiIjRUNFQ0ZGIiwibm9kZUJvcmRlciI6IiM5MzcwREIiLCJjbHVzdGVyQmtnIjoiI2ZmZmZkZSIsImNsdXN0ZXJCb3JkZXIiOiIjYWFhYTMzIiwiZGVmYXVsdExpbmtDb2xvciI6IiMzMzMzMzMiLCJ0aXRsZUNvbG9yIjoiIzMzMyIsImVkZ2VMYWJlbEJhY2tncm91bmQiOiIjZThlOGU4IiwiYWN0b3JCb3JkZXIiOiJoc2woMjU5LjYyNjE2ODIyNDMsIDU5Ljc3NjUzNjMxMjglLCA4Ny45MDE5NjA3ODQzJSkiLCJhY3RvckJrZyI6IiNFQ0VDRkYiLCJhY3RvclRleHRDb2xvciI6ImJsYWNrIiwiYWN0b3JMaW5lQ29sb3IiOiJncmV5Iiwic2lnbmFsQ29sb3IiOiIjMzMzIiwic2lnbmFsVGV4dENvbG9yIjoiIzMzMyIsImxhYmVsQm94QmtnQ29sb3IiOiIjRUNFQ0ZGIiwibGFiZWxCb3hCb3JkZXJDb2xvciI6ImhzbCgyNTkuNjI2MTY4MjI0MywgNTkuNzc2NTM2MzEyOCUsIDg3LjkwMTk2MDc4NDMlKSIsImxhYmVsVGV4dENvbG9yIjoiYmxhY2siLCJsb29wVGV4dENvbG9yIjoiYmxhY2siLCJub3RlQm9yZGVyQ29sb3IiOiIjYWFhYTMzIiwibm90ZUJrZ0NvbG9yIjoiI2ZmZjVhZCIsIm5vdGVUZXh0Q29sb3IiOiJibGFjayIsImFjdGl2YXRpb25Cb3JkZXJDb2xvciI6IiM2NjYiLCJhY3RpdmF0aW9uQmtnQ29sb3IiOiIjZjRmNGY0Iiwic2VxdWVuY2VOdW1iZXJDb2xvciI6IndoaXRlIiwic2VjdGlvbkJrZ0NvbG9yIjoicmdiYSgxMDIsIDEwMiwgMjU1LCAwLjQ5KSIsImFsdFNlY3Rpb25Ca2dDb2xvciI6IndoaXRlIiwic2VjdGlvbkJrZ0NvbG9yMiI6IiNmZmY0MDAiLCJ0YXNrQm9yZGVyQ29sb3IiOiIjNTM0ZmJjIiwidGFza0JrZ0NvbG9yIjoiIzhhOTBkZCIsInRhc2tUZXh0TGlnaHRDb2xvciI6IndoaXRlIiwidGFza1RleHRDb2xvciI6IndoaXRlIiwidGFza1RleHREYXJrQ29sb3IiOiJibGFjayIsInRhc2tUZXh0T3V0c2lkZUNvbG9yIjoiYmxhY2siLCJ0YXNrVGV4dENsaWNrYWJsZUNvbG9yIjoiIzAwMzE2MyIsImFjdGl2ZVRhc2tCb3JkZXJDb2xvciI6IiM1MzRmYmMiLCJhY3RpdmVUYXNrQmtnQ29sb3IiOiIjYmZjN2ZmIiwiZ3JpZENvbG9yIjoibGlnaHRncmV5IiwiZG9uZVRhc2tCa2dDb2xvciI6ImxpZ2h0Z3JleSIsImRvbmVUYXNrQm9yZGVyQ29sb3IiOiJncmV5IiwiY3JpdEJvcmRlckNvbG9yIjoiI2ZmODg4OCIsImNyaXRCa2dDb2xvciI6InJlZCIsInRvZGF5TGluZUNvbG9yIjoicmVkIiwibGFiZWxDb2xvciI6ImJsYWNrIiwiZXJyb3JCa2dDb2xvciI6IiM1NTIyMjIiLCJlcnJvclRleHRDb2xvciI6IiM1NTIyMjIiLCJjbGFzc1RleHQiOiIjMTMxMzAwIiwiZmlsbFR5cGUwIjoiI0VDRUNGRiIsImZpbGxUeXBlMSI6IiNmZmZmZGUiLCJmaWxsVHlwZTIiOiJoc2woMzA0LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTMiOiJoc2woMTI0LCAxMDAlLCA5My41Mjk0MTE3NjQ3JSkiLCJmaWxsVHlwZTQiOiJoc2woMTc2LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTUiOiJoc2woLTQsIDEwMCUsIDkzLjUyOTQxMTc2NDclKSIsImZpbGxUeXBlNiI6ImhzbCg4LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTciOiJoc2woMTg4LCAxMDAlLCA5My41Mjk0MTE3NjQ3JSkifX0sInVwZGF0ZUVkaXRvciI6ZmFsc2V9">live editor</a>]
+## State diagram [<a href="https://mermaid-js.github.io/mermaid/#/stateDiagram">docs</a> - <a href="https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtLXYyXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQiLCJ0aGVtZVZhcmlhYmxlcyI6eyJiYWNrZ3JvdW5kIjoid2hpdGUiLCJwcmltYXJ5Q29sb3IiOiIjRUNFQ0ZGIiwic2Vjb25kYXJ5Q29sb3IiOiIjZmZmZmRlIiwidGVydGlhcnlDb2xvciI6ImhzbCg4MCwgMTAwJSwgOTYuMjc0NTA5ODAzOSUpIiwicHJpbWFyeUJvcmRlckNvbG9yIjoiaHNsKDI0MCwgNjAlLCA4Ni4yNzQ1MDk4MDM5JSkiLCJzZWNvbmRhcnlCb3JkZXJDb2xvciI6ImhzbCg2MCwgNjAlLCA4My41Mjk0MTE3NjQ3JSkiLCJ0ZXJ0aWFyeUJvcmRlckNvbG9yIjoiaHNsKDgwLCA2MCUsIDg2LjI3NDUwOTgwMzklKSIsInByaW1hcnlUZXh0Q29sb3IiOiIjMTMxMzAwIiwic2Vjb25kYXJ5VGV4dENvbG9yIjoiIzAwMDAyMSIsInRlcnRpYXJ5VGV4dENvbG9yIjoicmdiKDkuNTAwMDAwMDAwMSwgOS41MDAwMDAwMDAxLCA5LjUwMDAwMDAwMDEpIiwibGluZUNvbG9yIjoiIzMzMzMzMyIsInRleHRDb2xvciI6IiMzMzMiLCJtYWluQmtnIjoiI0VDRUNGRiIsInNlY29uZEJrZyI6IiNmZmZmZGUiLCJib3JkZXIxIjoiIzkzNzBEQiIsImJvcmRlcjIiOiIjYWFhYTMzIiwiYXJyb3doZWFkQ29sb3IiOiIjMzMzMzMzIiwiZm9udEZhbWlseSI6IlwidHJlYnVjaGV0IG1zXCIsIHZlcmRhbmEsIGFyaWFsIiwiZm9udFNpemUiOiIxNnB4IiwibGFiZWxCYWNrZ3JvdW5kIjoiI2U4ZThlOCIsIm5vZGVCa2ciOiIjRUNFQ0ZGIiwibm9kZUJvcmRlciI6IiM5MzcwREIiLCJjbHVzdGVyQmtnIjoiI2ZmZmZkZSIsImNsdXN0ZXJCb3JkZXIiOiIjYWFhYTMzIiwiZGVmYXVsdExpbmtDb2xvciI6IiMzMzMzMzMiLCJ0aXRsZUNvbG9yIjoiIzMzMyIsImVkZ2VMYWJlbEJhY2tncm91bmQiOiIjZThlOGU4IiwiYWN0b3JCb3JkZXIiOiJoc2woMjU5LjYyNjE2ODIyNDMsIDU5Ljc3NjUzNjMxMjglLCA4Ny45MDE5NjA3ODQzJSkiLCJhY3RvckJrZyI6IiNFQ0VDRkYiLCJhY3RvclRleHRDb2xvciI6ImJsYWNrIiwiYWN0b3JMaW5lQ29sb3IiOiJncmV5Iiwic2lnbmFsQ29sb3IiOiIjMzMzIiwic2lnbmFsVGV4dENvbG9yIjoiIzMzMyIsImxhYmVsQm94QmtnQ29sb3IiOiIjRUNFQ0ZGIiwibGFiZWxCb3hCb3JkZXJDb2xvciI6ImhzbCgyNTkuNjI2MTY4MjI0MywgNTkuNzc2NTM2MzEyOCUsIDg3LjkwMTk2MDc4NDMlKSIsImxhYmVsVGV4dENvbG9yIjoiYmxhY2siLCJsb29wVGV4dENvbG9yIjoiYmxhY2siLCJub3RlQm9yZGVyQ29sb3IiOiIjYWFhYTMzIiwibm90ZUJrZ0NvbG9yIjoiI2ZmZjVhZCIsIm5vdGVUZXh0Q29sb3IiOiJibGFjayIsImFjdGl2YXRpb25Cb3JkZXJDb2xvciI6IiM2NjYiLCJhY3RpdmF0aW9uQmtnQ29sb3IiOiIjZjRmNGY0Iiwic2VxdWVuY2VOdW1iZXJDb2xvciI6IndoaXRlIiwic2VjdGlvbkJrZ0NvbG9yIjoicmdiYSgxMDIsIDEwMiwgMjU1LCAwLjQ5KSIsImFsdFNlY3Rpb25Ca2dDb2xvciI6IndoaXRlIiwic2VjdGlvbkJrZ0NvbG9yMiI6IiNmZmY0MDAiLCJ0YXNrQm9yZGVyQ29sb3IiOiIjNTM0ZmJjIiwidGFza0JrZ0NvbG9yIjoiIzhhOTBkZCIsInRhc2tUZXh0TGlnaHRDb2xvciI6IndoaXRlIiwidGFza1RleHRDb2xvciI6IndoaXRlIiwidGFza1RleHREYXJrQ29sb3IiOiJibGFjayIsInRhc2tUZXh0T3V0c2lkZUNvbG9yIjoiYmxhY2siLCJ0YXNrVGV4dENsaWNrYWJsZUNvbG9yIjoiIzAwMzE2MyIsImFjdGl2ZVRhc2tCb3JkZXJDb2xvciI6IiM1MzRmYmMiLCJhY3RpdmVUYXNrQmtnQ29sb3IiOiIjYmZjN2ZmIiwiZ3JpZENvbG9yIjoibGlnaHRncmV5IiwiZG9uZVRhc2tCa2dDb2xvciI6ImxpZ2h0Z3JleSIsImRvbmVUYXNrQm9yZGVyQ29sb3IiOiJncmV5IiwiY3JpdEJvcmRlckNvbG9yIjoiI2ZmODg4OCIsImNyaXRCa2dDb2xvciI6InJlZCIsInRvZGF5TGluZUNvbG9yIjoicmVkIiwibGFiZWxDb2xvciI6ImJsYWNrIiwiZXJyb3JCa2dDb2xvciI6IiM1NTIyMjIiLCJlcnJvclRleHRDb2xvciI6IiM1NTIyMjIiLCJjbGFzc1RleHQiOiIjMTMxMzAwIiwiZmlsbFR5cGUwIjoiI0VDRUNGRiIsImZpbGxUeXBlMSI6IiNmZmZmZGUiLCJmaWxsVHlwZTIiOiJoc2woMzA0LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTMiOiJoc2woMTI0LCAxMDAlLCA5My41Mjk0MTE3NjQ3JSkiLCJmaWxsVHlwZTQiOiJoc2woMTc2LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTUiOiJoc2woLTQsIDEwMCUsIDkzLjUyOTQxMTc2NDclKSIsImZpbGxUeXBlNiI6ImhzbCg4LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTciOiJoc2woMTg4LCAxMDAlLCA5My41Mjk0MTE3NjQ3JSkifX0sInVwZGF0ZUVkaXRvciI6ZmFsc2V9">live editor</a>]
 ```
 stateDiagram-v2
 [*] --> Still
@ -162,7 +162,7 @@ Moving --> Crash
 Crash --> [*]
 ```

-### Pie chart [<a href="http://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://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoicGllXG5cIkRvZ3NcIiA6IDQyLjk2XG5cIkNhdHNcIiA6IDUwLjA1XG5cIlJhdHNcIiA6IDEwLjAxIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]

 ```
 pie
@ -179,7 +179,7 @@ pie

 ## Git graph [experimental - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ2l0R3JhcGg6XG5vcHRpb25zXG57XG4gICAgXCJub2RlU3BhY2luZ1wiOiAxNTAsXG4gICAgXCJub2RlUmFkaXVzXCI6IDEwXG59XG5lbmRcbmNvbW1pdFxuYnJhbmNoIG5ld2JyYW5jaFxuY2hlY2tvdXQgbmV3YnJhbmNoXG5jb21taXRcbmNvbW1pdFxuY2hlY2tvdXQgbWFzdGVyXG5jb21taXRcbmNvbW1pdFxubWVyZ2UgbmV3YnJhbmNoXG4iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]

-## User Journey diagram [<a href="http://mermaid-js.github.io/mermaid/#/user-journey">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
+## User Journey diagram [<a href="https://mermaid-js.github.io/mermaid/#/user-journey">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
 ```
  journey
    title My working day
@ -220,8 +220,8 @@ To report a vulnerability, please e-mail security@mermaid.live with a descriptio

 ## Appreciation
 A quick note from Knut Sveidqvist:
->*Many thanks to the [d3](http://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!*
->*Thanks also to the [js-sequence-diagram](http://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering.*
+>*Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!*
+>*Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering.*
 >*Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017.*
 >
 >*Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!*
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@ -36,7 +36,7 @@ __下面是一些使用 Mermaid 和类 Markdown 语法创建的图表示例。
 <!-- <Flowchart> -->
 <tr><td colspan=2 align="center">
    <b>流程图</b></br>
-    [<a href="http://mermaid-js.github.io/mermaid/#/flowchart">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0hhcmRdIC0tPnxUZXh0fCBCKFJvdW5kKVxuICAgIEIgLS0-IEN7RGVjaXNpb259XG4gICAgQyAtLT58T25lfCBEW1Jlc3VsdCAxXVxuICAgIEMgLS0-fFR3b3wgRVtSZXN1bHQgMl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
+    [<a href="https://mermaid-js.github.io/mermaid/#/flowchart">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0hhcmRdIC0tPnxUZXh0fCBCKFJvdW5kKVxuICAgIEIgLS0-IEN7RGVjaXNpb259XG4gICAgQyAtLT58T25lfCBEW1Jlc3VsdCAxXVxuICAgIEMgLS0-fFR3b3wgRVtSZXN1bHQgMl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
 </td></tr>
 <tr>
    <td><pre>
@ -54,7 +54,7 @@ C -->|Two| E[Result 2]
 <!-- <Sequence> -->
 <tr><td colspan=2 align="center">
    <b>时序图</b><br />
-    [<a href="http://mermaid-js.github.io/mermaid/#/sequenceDiagram">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic2VxdWVuY2VEaWFncmFtXG5BbGljZS0-PkpvaG46IEhlbGxvIEpvaG4sIGhvdyBhcmUgeW91P1xubG9vcCBIZWFsdGhjaGVja1xuICAgIEpvaG4tPj5Kb2huOiBGaWdodCBhZ2FpbnN0IGh5cG9jaG9uZHJpYVxuZW5kXG5Ob3RlIHJpZ2h0IG9mIEpvaG46IFJhdGlvbmFsIHRob3VnaHRzIVxuSm9obi0tPj5BbGljZTogR3JlYXQhXG5Kb2huLT4-Qm9iOiBIb3cgYWJvdXQgeW91P1xuQm9iLS0-PkpvaG46IEpvbGx5IGdvb2QhIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
+    [<a href="https://mermaid-js.github.io/mermaid/#/sequenceDiagram">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic2VxdWVuY2VEaWFncmFtXG5BbGljZS0-PkpvaG46IEhlbGxvIEpvaG4sIGhvdyBhcmUgeW91P1xubG9vcCBIZWFsdGhjaGVja1xuICAgIEpvaG4tPj5Kb2huOiBGaWdodCBhZ2FpbnN0IGh5cG9jaG9uZHJpYVxuZW5kXG5Ob3RlIHJpZ2h0IG9mIEpvaG46IFJhdGlvbmFsIHRob3VnaHRzIVxuSm9obi0tPj5BbGljZTogR3JlYXQhXG5Kb2huLT4-Qm9iOiBIb3cgYWJvdXQgeW91P1xuQm9iLS0-PkpvaG46IEpvbGx5IGdvb2QhIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
 </td></tr>
 <tr>
    <td><pre>
@ -76,7 +76,7 @@ Bob-->>John: Jolly good!
 <!-- <Gantt> -->
 <tr><td colspan=2 align="center">
    <b>甘特图</b><br />
-    [<a href="http://mermaid-js.github.io/mermaid/#/gantt">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ2FudHRcbnNlY3Rpb24gU2VjdGlvblxuQ29tcGxldGVkIDpkb25lLCAgICBkZXMxLCAyMDE0LTAxLTA2LDIwMTQtMDEtMDhcbkFjdGl2ZSAgICAgICAgOmFjdGl2ZSwgIGRlczIsIDIwMTQtMDEtMDcsIDNkXG5QYXJhbGxlbCAxICAgOiAgICAgICAgIGRlczMsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAyICAgOiAgICAgICAgIGRlczQsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAzICAgOiAgICAgICAgIGRlczUsIGFmdGVyIGRlczMsIDFkXG5QYXJhbGxlbCA0ICAgOiAgICAgICAgIGRlczYsIGFmdGVyIGRlczQsIDFkIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
+    [<a href="https://mermaid-js.github.io/mermaid/#/gantt">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ2FudHRcbnNlY3Rpb24gU2VjdGlvblxuQ29tcGxldGVkIDpkb25lLCAgICBkZXMxLCAyMDE0LTAxLTA2LDIwMTQtMDEtMDhcbkFjdGl2ZSAgICAgICAgOmFjdGl2ZSwgIGRlczIsIDIwMTQtMDEtMDcsIDNkXG5QYXJhbGxlbCAxICAgOiAgICAgICAgIGRlczMsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAyICAgOiAgICAgICAgIGRlczQsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAzICAgOiAgICAgICAgIGRlczUsIGFmdGVyIGRlczMsIDFkXG5QYXJhbGxlbCA0ICAgOiAgICAgICAgIGRlczYsIGFmdGVyIGRlczQsIDFkIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
 </td></tr>
 <tr>
    <td><pre>
@ -97,7 +97,7 @@ Parallel 4   :         des6, after des4, 1d
 <!-- <Class> -->
 <tr><td colspan=2 align="center">
    <b>类图</b><br />
-    [<a href="http://mermaid-js.github.io/mermaid/#/classDiagram">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiY2xhc3NEaWFncmFtXG5DbGFzczAxIDx8LS0gQXZlcnlMb25nQ2xhc3MgOiBDb29sXG48PGludGVyZmFjZT4-IENsYXNzMDFcbkNsYXNzMDkgLS0-IEMyIDogV2hlcmUgYW0gaT9cbkNsYXNzMDkgLS0qIEMzXG5DbGFzczA5IC0tfD4gQ2xhc3MwN1xuQ2xhc3MwNyA6IGVxdWFscygpXG5DbGFzczA3IDogT2JqZWN0W10gZWxlbWVudERhdGFcbkNsYXNzMDEgOiBzaXplKClcbkNsYXNzMDEgOiBpbnQgY2hpbXBcbkNsYXNzMDEgOiBpbnQgZ29yaWxsYVxuY2xhc3MgQ2xhc3MxMCB7XG4gID4-c2VydmljZT4-XG4gIGludCBpZFxuICBzaXplKClcbn0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
+    [<a href="https://mermaid-js.github.io/mermaid/#/classDiagram">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiY2xhc3NEaWFncmFtXG5DbGFzczAxIDx8LS0gQXZlcnlMb25nQ2xhc3MgOiBDb29sXG48PGludGVyZmFjZT4-IENsYXNzMDFcbkNsYXNzMDkgLS0-IEMyIDogV2hlcmUgYW0gaT9cbkNsYXNzMDkgLS0qIEMzXG5DbGFzczA5IC0tfD4gQ2xhc3MwN1xuQ2xhc3MwNyA6IGVxdWFscygpXG5DbGFzczA3IDogT2JqZWN0W10gZWxlbWVudERhdGFcbkNsYXNzMDEgOiBzaXplKClcbkNsYXNzMDEgOiBpbnQgY2hpbXBcbkNsYXNzMDEgOiBpbnQgZ29yaWxsYVxuY2xhc3MgQ2xhc3MxMCB7XG4gID4-c2VydmljZT4-XG4gIGludCBpZFxuICBzaXplKClcbn0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
 </td></tr>
 <tr>
    <td><pre>
@ -126,7 +126,7 @@ class Class10 {
 <!-- <State> -->
 <tr><td colspan=2 align="center">
    <b>状态图</b><br />
-    [<a href="http://mermaid-js.github.io/mermaid/#/stateDiagram">文档</a> - <a href="https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtLXYyXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQiLCJ0aGVtZVZhcmlhYmxlcyI6eyJiYWNrZ3JvdW5kIjoid2hpdGUiLCJwcmltYXJ5Q29sb3IiOiIjRUNFQ0ZGIiwic2Vjb25kYXJ5Q29sb3IiOiIjZmZmZmRlIiwidGVydGlhcnlDb2xvciI6ImhzbCg4MCwgMTAwJSwgOTYuMjc0NTA5ODAzOSUpIiwicHJpbWFyeUJvcmRlckNvbG9yIjoiaHNsKDI0MCwgNjAlLCA4Ni4yNzQ1MDk4MDM5JSkiLCJzZWNvbmRhcnlCb3JkZXJDb2xvciI6ImhzbCg2MCwgNjAlLCA4My41Mjk0MTE3NjQ3JSkiLCJ0ZXJ0aWFyeUJvcmRlckNvbG9yIjoiaHNsKDgwLCA2MCUsIDg2LjI3NDUwOTgwMzklKSIsInByaW1hcnlUZXh0Q29sb3IiOiIjMTMxMzAwIiwic2Vjb25kYXJ5VGV4dENvbG9yIjoiIzAwMDAyMSIsInRlcnRpYXJ5VGV4dENvbG9yIjoicmdiKDkuNTAwMDAwMDAwMSwgOS41MDAwMDAwMDAxLCA5LjUwMDAwMDAwMDEpIiwibGluZUNvbG9yIjoiIzMzMzMzMyIsInRleHRDb2xvciI6IiMzMzMiLCJtYWluQmtnIjoiI0VDRUNGRiIsInNlY29uZEJrZyI6IiNmZmZmZGUiLCJib3JkZXIxIjoiIzkzNzBEQiIsImJvcmRlcjIiOiIjYWFhYTMzIiwiYXJyb3doZWFkQ29sb3IiOiIjMzMzMzMzIiwiZm9udEZhbWlseSI6IlwidHJlYnVjaGV0IG1zXCIsIHZlcmRhbmEsIGFyaWFsIiwiZm9udFNpemUiOiIxNnB4IiwibGFiZWxCYWNrZ3JvdW5kIjoiI2U4ZThlOCIsIm5vZGVCa2ciOiIjRUNFQ0ZGIiwibm9kZUJvcmRlciI6IiM5MzcwREIiLCJjbHVzdGVyQmtnIjoiI2ZmZmZkZSIsImNsdXN0ZXJCb3JkZXIiOiIjYWFhYTMzIiwiZGVmYXVsdExpbmtDb2xvciI6IiMzMzMzMzMiLCJ0aXRsZUNvbG9yIjoiIzMzMyIsImVkZ2VMYWJlbEJhY2tncm91bmQiOiIjZThlOGU4IiwiYWN0b3JCb3JkZXIiOiJoc2woMjU5LjYyNjE2ODIyNDMsIDU5Ljc3NjUzNjMxMjglLCA4Ny45MDE5NjA3ODQzJSkiLCJhY3RvckJrZyI6IiNFQ0VDRkYiLCJhY3RvclRleHRDb2xvciI6ImJsYWNrIiwiYWN0b3JMaW5lQ29sb3IiOiJncmV5Iiwic2lnbmFsQ29sb3IiOiIjMzMzIiwic2lnbmFsVGV4dENvbG9yIjoiIzMzMyIsImxhYmVsQm94QmtnQ29sb3IiOiIjRUNFQ0ZGIiwibGFiZWxCb3hCb3JkZXJDb2xvciI6ImhzbCgyNTkuNjI2MTY4MjI0MywgNTkuNzc2NTM2MzEyOCUsIDg3LjkwMTk2MDc4NDMlKSIsImxhYmVsVGV4dENvbG9yIjoiYmxhY2siLCJsb29wVGV4dENvbG9yIjoiYmxhY2siLCJub3RlQm9yZGVyQ29sb3IiOiIjYWFhYTMzIiwibm90ZUJrZ0NvbG9yIjoiI2ZmZjVhZCIsIm5vdGVUZXh0Q29sb3IiOiJibGFjayIsImFjdGl2YXRpb25Cb3JkZXJDb2xvciI6IiM2NjYiLCJhY3RpdmF0aW9uQmtnQ29sb3IiOiIjZjRmNGY0Iiwic2VxdWVuY2VOdW1iZXJDb2xvciI6IndoaXRlIiwic2VjdGlvbkJrZ0NvbG9yIjoicmdiYSgxMDIsIDEwMiwgMjU1LCAwLjQ5KSIsImFsdFNlY3Rpb25Ca2dDb2xvciI6IndoaXRlIiwic2VjdGlvbkJrZ0NvbG9yMiI6IiNmZmY0MDAiLCJ0YXNrQm9yZGVyQ29sb3IiOiIjNTM0ZmJjIiwidGFza0JrZ0NvbG9yIjoiIzhhOTBkZCIsInRhc2tUZXh0TGlnaHRDb2xvciI6IndoaXRlIiwidGFza1RleHRDb2xvciI6IndoaXRlIiwidGFza1RleHREYXJrQ29sb3IiOiJibGFjayIsInRhc2tUZXh0T3V0c2lkZUNvbG9yIjoiYmxhY2siLCJ0YXNrVGV4dENsaWNrYWJsZUNvbG9yIjoiIzAwMzE2MyIsImFjdGl2ZVRhc2tCb3JkZXJDb2xvciI6IiM1MzRmYmMiLCJhY3RpdmVUYXNrQmtnQ29sb3IiOiIjYmZjN2ZmIiwiZ3JpZENvbG9yIjoibGlnaHRncmV5IiwiZG9uZVRhc2tCa2dDb2xvciI6ImxpZ2h0Z3JleSIsImRvbmVUYXNrQm9yZGVyQ29sb3IiOiJncmV5IiwiY3JpdEJvcmRlckNvbG9yIjoiI2ZmODg4OCIsImNyaXRCa2dDb2xvciI6InJlZCIsInRvZGF5TGluZUNvbG9yIjoicmVkIiwibGFiZWxDb2xvciI6ImJsYWNrIiwiZXJyb3JCa2dDb2xvciI6IiM1NTIyMjIiLCJlcnJvclRleHRDb2xvciI6IiM1NTIyMjIiLCJjbGFzc1RleHQiOiIjMTMxMzAwIiwiZmlsbFR5cGUwIjoiI0VDRUNGRiIsImZpbGxUeXBlMSI6IiNmZmZmZGUiLCJmaWxsVHlwZTIiOiJoc2woMzA0LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTMiOiJoc2woMTI0LCAxMDAlLCA5My41Mjk0MTE3NjQ3JSkiLCJmaWxsVHlwZTQiOiJoc2woMTc2LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTUiOiJoc2woLTQsIDEwMCUsIDkzLjUyOTQxMTc2NDclKSIsImZpbGxUeXBlNiI6ImhzbCg4LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTciOiJoc2woMTg4LCAxMDAlLCA5My41Mjk0MTE3NjQ3JSkifX0sInVwZGF0ZUVkaXRvciI6ZmFsc2V9">live editor</a>]
+    [<a href="https://mermaid-js.github.io/mermaid/#/stateDiagram">文档</a> - <a href="https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtLXYyXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQiLCJ0aGVtZVZhcmlhYmxlcyI6eyJiYWNrZ3JvdW5kIjoid2hpdGUiLCJwcmltYXJ5Q29sb3IiOiIjRUNFQ0ZGIiwic2Vjb25kYXJ5Q29sb3IiOiIjZmZmZmRlIiwidGVydGlhcnlDb2xvciI6ImhzbCg4MCwgMTAwJSwgOTYuMjc0NTA5ODAzOSUpIiwicHJpbWFyeUJvcmRlckNvbG9yIjoiaHNsKDI0MCwgNjAlLCA4Ni4yNzQ1MDk4MDM5JSkiLCJzZWNvbmRhcnlCb3JkZXJDb2xvciI6ImhzbCg2MCwgNjAlLCA4My41Mjk0MTE3NjQ3JSkiLCJ0ZXJ0aWFyeUJvcmRlckNvbG9yIjoiaHNsKDgwLCA2MCUsIDg2LjI3NDUwOTgwMzklKSIsInByaW1hcnlUZXh0Q29sb3IiOiIjMTMxMzAwIiwic2Vjb25kYXJ5VGV4dENvbG9yIjoiIzAwMDAyMSIsInRlcnRpYXJ5VGV4dENvbG9yIjoicmdiKDkuNTAwMDAwMDAwMSwgOS41MDAwMDAwMDAxLCA5LjUwMDAwMDAwMDEpIiwibGluZUNvbG9yIjoiIzMzMzMzMyIsInRleHRDb2xvciI6IiMzMzMiLCJtYWluQmtnIjoiI0VDRUNGRiIsInNlY29uZEJrZyI6IiNmZmZmZGUiLCJib3JkZXIxIjoiIzkzNzBEQiIsImJvcmRlcjIiOiIjYWFhYTMzIiwiYXJyb3doZWFkQ29sb3IiOiIjMzMzMzMzIiwiZm9udEZhbWlseSI6IlwidHJlYnVjaGV0IG1zXCIsIHZlcmRhbmEsIGFyaWFsIiwiZm9udFNpemUiOiIxNnB4IiwibGFiZWxCYWNrZ3JvdW5kIjoiI2U4ZThlOCIsIm5vZGVCa2ciOiIjRUNFQ0ZGIiwibm9kZUJvcmRlciI6IiM5MzcwREIiLCJjbHVzdGVyQmtnIjoiI2ZmZmZkZSIsImNsdXN0ZXJCb3JkZXIiOiIjYWFhYTMzIiwiZGVmYXVsdExpbmtDb2xvciI6IiMzMzMzMzMiLCJ0aXRsZUNvbG9yIjoiIzMzMyIsImVkZ2VMYWJlbEJhY2tncm91bmQiOiIjZThlOGU4IiwiYWN0b3JCb3JkZXIiOiJoc2woMjU5LjYyNjE2ODIyNDMsIDU5Ljc3NjUzNjMxMjglLCA4Ny45MDE5NjA3ODQzJSkiLCJhY3RvckJrZyI6IiNFQ0VDRkYiLCJhY3RvclRleHRDb2xvciI6ImJsYWNrIiwiYWN0b3JMaW5lQ29sb3IiOiJncmV5Iiwic2lnbmFsQ29sb3IiOiIjMzMzIiwic2lnbmFsVGV4dENvbG9yIjoiIzMzMyIsImxhYmVsQm94QmtnQ29sb3IiOiIjRUNFQ0ZGIiwibGFiZWxCb3hCb3JkZXJDb2xvciI6ImhzbCgyNTkuNjI2MTY4MjI0MywgNTkuNzc2NTM2MzEyOCUsIDg3LjkwMTk2MDc4NDMlKSIsImxhYmVsVGV4dENvbG9yIjoiYmxhY2siLCJsb29wVGV4dENvbG9yIjoiYmxhY2siLCJub3RlQm9yZGVyQ29sb3IiOiIjYWFhYTMzIiwibm90ZUJrZ0NvbG9yIjoiI2ZmZjVhZCIsIm5vdGVUZXh0Q29sb3IiOiJibGFjayIsImFjdGl2YXRpb25Cb3JkZXJDb2xvciI6IiM2NjYiLCJhY3RpdmF0aW9uQmtnQ29sb3IiOiIjZjRmNGY0Iiwic2VxdWVuY2VOdW1iZXJDb2xvciI6IndoaXRlIiwic2VjdGlvbkJrZ0NvbG9yIjoicmdiYSgxMDIsIDEwMiwgMjU1LCAwLjQ5KSIsImFsdFNlY3Rpb25Ca2dDb2xvciI6IndoaXRlIiwic2VjdGlvbkJrZ0NvbG9yMiI6IiNmZmY0MDAiLCJ0YXNrQm9yZGVyQ29sb3IiOiIjNTM0ZmJjIiwidGFza0JrZ0NvbG9yIjoiIzhhOTBkZCIsInRhc2tUZXh0TGlnaHRDb2xvciI6IndoaXRlIiwidGFza1RleHRDb2xvciI6IndoaXRlIiwidGFza1RleHREYXJrQ29sb3IiOiJibGFjayIsInRhc2tUZXh0T3V0c2lkZUNvbG9yIjoiYmxhY2siLCJ0YXNrVGV4dENsaWNrYWJsZUNvbG9yIjoiIzAwMzE2MyIsImFjdGl2ZVRhc2tCb3JkZXJDb2xvciI6IiM1MzRmYmMiLCJhY3RpdmVUYXNrQmtnQ29sb3IiOiIjYmZjN2ZmIiwiZ3JpZENvbG9yIjoibGlnaHRncmV5IiwiZG9uZVRhc2tCa2dDb2xvciI6ImxpZ2h0Z3JleSIsImRvbmVUYXNrQm9yZGVyQ29sb3IiOiJncmV5IiwiY3JpdEJvcmRlckNvbG9yIjoiI2ZmODg4OCIsImNyaXRCa2dDb2xvciI6InJlZCIsInRvZGF5TGluZUNvbG9yIjoicmVkIiwibGFiZWxDb2xvciI6ImJsYWNrIiwiZXJyb3JCa2dDb2xvciI6IiM1NTIyMjIiLCJlcnJvclRleHRDb2xvciI6IiM1NTIyMjIiLCJjbGFzc1RleHQiOiIjMTMxMzAwIiwiZmlsbFR5cGUwIjoiI0VDRUNGRiIsImZpbGxUeXBlMSI6IiNmZmZmZGUiLCJmaWxsVHlwZTIiOiJoc2woMzA0LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTMiOiJoc2woMTI0LCAxMDAlLCA5My41Mjk0MTE3NjQ3JSkiLCJmaWxsVHlwZTQiOiJoc2woMTc2LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTUiOiJoc2woLTQsIDEwMCUsIDkzLjUyOTQxMTc2NDclKSIsImZpbGxUeXBlNiI6ImhzbCg4LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTciOiJoc2woMTg4LCAxMDAlLCA5My41Mjk0MTE3NjQ3JSkifX0sInVwZGF0ZUVkaXRvciI6ZmFsc2V9">live editor</a>]
 </td></tr>
 <tr>
    <td><pre>
@ -146,7 +146,7 @@ Crash --> [*]
 <!-- <Pie> -->
 <tr><td colspan=2 align="center">
    <b>饼图</b><br />
-    [<a href="http://mermaid-js.github.io/mermaid/#/pie">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoicGllXG5cIkRvZ3NcIiA6IDQyLjk2XG5cIkNhdHNcIiA6IDUwLjA1XG5cIlJhdHNcIiA6IDEwLjAxIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
+    [<a href="https://mermaid-js.github.io/mermaid/#/pie">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoicGllXG5cIkRvZ3NcIiA6IDQyLjk2XG5cIkNhdHNcIiA6IDUwLjA1XG5cIlJhdHNcIiA6IDEwLjAxIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
 </td></tr>
 <tr>
    <td><pre>
@ -172,7 +172,7 @@ pie
 <!-- <Journey> -->
 <tr><td colspan=2 align="center">
    <b>用户体验旅程图</b><br />
-    [<a href="http://mermaid-js.github.io/mermaid/#/user-journey">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
+    [<a href="https://mermaid-js.github.io/mermaid/#/user-journey">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
 </td></tr>
 <tr>
  <td>
@ -213,8 +213,8 @@ Mermaid 是一个不断发展中的社区，并且还在接收新的贡献者。

 ## 鸣谢
 来自 Knut Sveidqvist:
->*特别感谢 [d3](http://d3js.org/) 和 [dagre-d3](https://github.com/cpettitt/dagre-d3) 这两个优秀的项目，它们提供了图形布局和绘图工具库! *
->*同样感谢 [js-sequence-diagram](http://bramp.github.io/js-sequence-diagrams) 提供了时序图语法的使用。 感谢 Jessica Peter 提供了甘特图渲染的灵感。*
+>*特别感谢 [d3](https://d3js.org/) 和 [dagre-d3](https://github.com/cpettitt/dagre-d3) 这两个优秀的项目，它们提供了图形布局和绘图工具库! *
+>*同样感谢 [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) 提供了时序图语法的使用。 感谢 Jessica Peter 提供了甘特图渲染的灵感。*
 >*感谢 [Tyler Long](https://github.com/tylerlong) 从 2017年四月开始成为了项目的合作者。*
 >
 >*感谢越来越多的 [贡献者们](https://github.com/knsv/mermaid/graphs/contributors)，没有你们，就没有这个项目的今天！*
--- a/cypress/platform/knsv.html
+++ b/cypress/platform/knsv.html
@ -12,119 +12,59 @@
        /* background: rgb(221, 208, 208); */
        /* background:#333; */
        font-family: 'Arial';
+        /* font-size: 18px !important; */
+        width: 100%;
        }
      h1 { color: grey;}
-      .mermaid2 {
+      .mermaid2,.mermaid3 {
        display: none;
      }
+      .mermaid svg {
+        /* font-size: 18px !important; */
+      }
    </style>
  </head>
  <body>
-    <h1>info below</h1>
-    <div class="flex">
-      <div class="mermaid2" style="width: 50%; height: 400px;">
-graph TD
-  A[Christmas] ==> D
-  A[Christmas] -->|Get money| B(Go shopping)
-  A[Christmas] ==> C
-  subgraph T ["Test"]
-    A
-    B
-    C
-  end
-  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;
-      </div>
-      <div class="mermaid2" style="width: 50%; height: 400px;">
-flowchart TD
-  A[Christmas] ==> D
-  A[Christmas] -->|Get money| B(Go shopping)
-  A[Christmas] ==> C
-  subgraph T ["Test"]
-    A
-    B
-    C
-  end
+    <div>info below</div>
+    <div class="flex flex-wrap">

-  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;
-      </div>
-      <div class="mermaid2" style="width: 50%; height: 20%;">
-graph TD
-  C -->|fa:fa-car Car| F[fa:fa-car Car]
-      </div>
-      <div class="mermaid2" style="width: 50%; height: 20%;">
-flowchart TD
-  C -->|fa:fa-car Car| F[fa:fa-car Car]
-      </div>
-      <div class="mermaid2" style="width: 50%; height: 20%;">
-        %%{init: {"fontFamily": "arial2"}}%%
-graph TD
-      A[Christmas]
-      </div>
-      <div class="mermaid2" style="width: 50%; height: 20%;">
-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: 20%;">
-graph 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="mermaid" style="width: 50%; height: 20%;">
-sequenceDiagram
-    participant John
-    participant Alice
-    Alice->>John: Hello John, how are you?
-    John-->>Alice: Great!
-      </div>
+<div class="mermaid" style="width: 100%; height: 20%;">
+stateDiagram-v2
+      [*] --> S1
+      state "Some long name" as S1

+</div>

  <script src="./mermaid.js"></script>
    <script>
      mermaid.parseError = function (err, hash) {
-          // console.error('Mermaid error: ', err);
-        };
+        // console.error('Mermaid error: ', err);
+      };
      mermaid.initialize({
-        // theme: 'forest',
-        // themeVariables:{primaryColor: '#ff0000'},
-        // arrowMarkerAbsolute: true,
+        // theme: 'dark',
+        theme: 'forest',
+        arrowMarkerAbsolute: true,
        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
-        logLevel: 0,
-        flowchart: { curve: 'cardinal', htmlLabels: true },
-        htmlLabels: true,
+        flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: false },
        // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { showSequenceNumbers: true },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
        // sequenceDiagram: { actorMargin: 300 } // deprecated
-        // fontFamily: '"arial", sans-serif',
-        fontFamily: 'courier',
+        // fontFamily: '"times", sans-serif',
+        // fontFamily: 'courier',
+        state: {
+          nodeSpacing: 50,
+          rankSpacing: 50,
+          defaultRenderer: 'dagre-wrapper',
+        },
+        logLevel: 0,
+        fontSize: 18,
        curve: 'cardinal',
-        securityLevel: 'loose'
+        securityLevel: 'strict',
+        // themeVariables: {relationLabelColor: 'red'}
      });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
    </script>
  </body>
 </html>
--- a/cypress/screenshots/rendering/classDiagram.spec.js/Class
+++ b/cypress/screenshots/rendering/classDiagram.spec.js/Class
--- a/cypress/screenshots/rendering/classDiagram.spec.js/Class
+++ b/cypress/screenshots/rendering/classDiagram.spec.js/Class
--- a/cypress/screenshots/rendering/sequencediagram.spec.js/Sequence
+++ b/cypress/screenshots/rendering/sequencediagram.spec.js/Sequence
--- a/cypress/screenshots/rendering/sequencediagram.spec.js/Sequence
+++ b/cypress/screenshots/rendering/sequencediagram.spec.js/Sequence
--- a/cypress/screenshots/rendering/stateDiagram-v2.spec.js/State
+++ b/cypress/screenshots/rendering/stateDiagram-v2.spec.js/State
--- a/cypress/screenshots/rendering/stateDiagram-v2.spec.js/State
+++ b/cypress/screenshots/rendering/stateDiagram-v2.spec.js/State
--- a/dist/index.html
+++ b/dist/index.html
@ -1,723 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <title>Mermaid Quick Test Page</title>
-  <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-  <style>
-      div.mermaid {
-        /* font-family: 'trebuchet ms', verdana, arial; */
-        font-family: 'Courier New', Courier, monospace !important;
-      }
-  </style>
-</head>
-<body>
-  <div class="mermaid">
-    info
-  </div>
-
-  <hr/>
-
-  <div class="mermaid">
-    gantt
-      title Exclusive end dates (Manual date should end on 3d)
-      dateFormat YYYY-MM-DD
-      axisFormat %d
-      section Section1
-       2 Days: 1, 2019-01-01,2d
-       Manual Date: 2, 2019-01-01,2019-01-03
-  </div>
-  <div class="mermaid">
-    gantt
-      title Inclusive end dates (Manual date should end on 4th)
-      dateFormat YYYY-MM-DD
-      axisFormat %d
-      inclusiveEndDates
-      section Section1
-       2 Days: 1, 2019-01-01,2d
-       Manual Date: 2, 2019-01-01,2019-01-03
-  </div>
-  <div class="mermaid">
-    gantt
-      title Hide today marker (vertical line should not be visible)
-      dateFormat YYYY-MM-DD
-      axisFormat %d
-      todayMarker off
-      section Section1
-       Today: 1, -1h
-  </div>
-  <div class="mermaid">
-    gantt
-      title Style today marker (vertical line should be 5px wide and half-transparent blue)
-      dateFormat YYYY-MM-DD
-      axisFormat %d
-      todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
-      section Section1
-       Today: 1, -1h
-  </div>
-
-  <hr/>
-
-  <div class="mermaid">
-      graph LR
-      sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
-
-      提交申请
-      熊大
-      "];
-      class sid-B3655226-6C29-4D00-B685-3D5C734DC7E1 node-executed;
-      sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A["
-      负责人审批
-      强子
-      "];
-      class sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A node-executed;
-      sid-E27C0367-E6D6-497F-9736-3CDC21FDE221["
-      DBA审批
-      强子
-      "];
-      class sid-E27C0367-E6D6-497F-9736-3CDC21FDE221 node-executed;
-      sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD["
-      SA审批
-      阿美
-      "];
-      class sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD node-executed;
-      sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7["
-      主管审批
-      光头强
-      "];
-      class sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7 node-executed;
-      sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89["
-      DBA确认
-      强子
-      "];
-      class sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89 node-executed;
-      sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937["
-      SA确认
-      阿美
-      "];
-      class sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937 node-executed;
-      sid-4FC27B48-A6F9-460A-A675-021F5854FE22["
-      结束
-      "];
-      class sid-4FC27B48-A6F9-460A-A675-021F5854FE22 node-executed;
-      sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E["
-      SA执行1
-      强子
-      "];
-      class sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E node-executed;
-      sid-6C2120F3-D940-4958-A067-0903DCE879C4["
-      SA执行2
-      强子
-      "];
-      class sid-6C2120F3-D940-4958-A067-0903DCE879C4 node-executed;
-      sid-9180E2A0-5C4B-435F-B42F-0D152470A338["
-      DBA执行1
-      强子
-      "];
-      class sid-9180E2A0-5C4B-435F-B42F-0D152470A338 node-executed;
-      sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD["
-      DBA执行3
-      强子
-      "];
-      class sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD node-executed;
-      sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756["
-      DBA执行2
-      强子
-      "];
-      class sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756 node-executed;
-      sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93["
-      DBA执行4
-      强子
-      "];
-      class sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93 node-executed;
-      sid-1897B30A-9C5C-4D5B-B80B-76A038785070["
-      负责人确认
-      梁静茹
-      "];
-      class sid-1897B30A-9C5C-4D5B-B80B-76A038785070 node-executed;
-      sid-B3655226-6C29-4D00-B685-3D5C734DC7E1-->sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7;
-      sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A-->sid-1897B30A-9C5C-4D5B-B80B-76A038785070;
-      sid-E27C0367-E6D6-497F-9736-3CDC21FDE221-->sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89;
-      sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD-->sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937;
-      sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
-      sid-9180E2A0-5C4B-435F-B42F-0D152470A338-->sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756;
-      sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD-->sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93;
-      sid-6C2120F3-D940-4958-A067-0903DCE879C4-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
-      sid-1897B30A-9C5C-4D5B-B80B-76A038785070-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
-      sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E;
-      sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-9180E2A0-5C4B-435F-B42F-0D152470A338;
-      sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD;
-      sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
-      sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
-      sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD;
-      sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-E27C0367-E6D6-497F-9736-3CDC21FDE221;
-      sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
-      sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
-      sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
-    </div>
-    <div class="mermaid">
-      graph TD
-      A[Christmas] -->|Get money| B(Go shopping)
-      B --> C{Let me thinksssssx<br/>sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss}
-      C -->|One| D[Laptop]
-      C -->|Two| E[iPhone]
-      C -->|Three| F[Car]
-    </div>
-  <div class="mermaid">
-    graph TD
-    A[/Christmas\]
-    A -->|Get money| B[\Go shopping/]
-    B --> C{Let me thinksssss<br/>ssssssssssssssssssssss<br/>sssssssssssssssssssssssssss}
-    C -->|One| D[/Laptop/]
-    C -->|Two| E[\iPhone\]
-    C -->|Three| F[Car]
-  </div>
-  <div class="mermaid">
-    graph LR
-47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
-37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
-35(SAM.CommonFA.PopulationFME)-->47(SAM.CommonFA.FMESummary)
-41(SAM.CommonFA.MetricCost)-->47(SAM.CommonFA.FMESummary)
-44(SAM.CommonFA.MetricOutliers)-->47(SAM.CommonFA.FMESummary)
-46(SAM.CommonFA.MetricOpportunity)-->47(SAM.CommonFA.FMESummary)
-40(SAM.CommonFA.OPVisits)-->47(SAM.CommonFA.FMESummary)
-38(SAM.CommonFA.CommonFAFinanceRefund)-->47(SAM.CommonFA.FMESummary)
-43(SAM.CommonFA.CommonFAFinancePicuDays)-->47(SAM.CommonFA.FMESummary)
-42(SAM.CommonFA.CommonFAFinanceNurseryDays)-->47(SAM.CommonFA.FMESummary)
-45(SAM.CommonFA.MetricPreOpportunity)-->46(SAM.CommonFA.MetricOpportunity)
-35(SAM.CommonFA.PopulationFME)-->45(SAM.CommonFA.MetricPreOpportunity)
-41(SAM.CommonFA.MetricCost)-->45(SAM.CommonFA.MetricPreOpportunity)
-41(SAM.CommonFA.MetricCost)-->44(SAM.CommonFA.MetricOutliers)
-39(SAM.CommonFA.ChargeDetails)-->43(SAM.CommonFA.CommonFAFinancePicuDays)
-39(SAM.CommonFA.ChargeDetails)-->42(SAM.CommonFA.CommonFAFinanceNurseryDays)
-39(SAM.CommonFA.ChargeDetails)-->41(SAM.CommonFA.MetricCost)
-39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits)
-35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
-36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
-  </div>
-  <div class="mermaid">
-      graph TD
-      9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment")
-      82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1")
-      db052290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 2")
-      4e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 1")
-      30122290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 2")
-      5e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 1")
-      c1112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 2")
-      b7042290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SupportDb]")
-      8f102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[DevelopmentDb]")
-      0e102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[TestDb]")
-      07132290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SharedReportingDb]")
-      c7072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Business Logic Server")
-      ca122290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Report Server")
-      68102290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Dedicated Test Business Logic Server")
-      f4112290_1ec3_e711_8c5a_005056ad0002("fa:fa-database [DBServer\SharedDbInstance]")
-      d6072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server DBServer")
-      71082290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:MSSQLSERVER")
-      c0102290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLAgent")
-      9a072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLBrowser")
-      1d0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost1")
-      200a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost2")
-      1c0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost3")
-      9e122290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
-      9e122290_1ec3_e711_8c5a_005056ad0002-->db052290_1ec3_e711_8c5a_005056ad0002
-      9e122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
-      9e122290_1ec3_e711_8c5a_005056ad0002-->30122290_1ec3_e711_8c5a_005056ad0002
-      9e122290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
-      9e122290_1ec3_e711_8c5a_005056ad0002-->c1112290_1ec3_e711_8c5a_005056ad0002
-      82072290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
-      82072290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
-      82072290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
-      82072290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
-      db052290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
-      db052290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
-      4e112290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
-      4e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
-      4e112290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
-      4e112290_1ec3_e711_8c5a_005056ad0002-->07132290_1ec3_e711_8c5a_005056ad0002
-      4e112290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
-      30122290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
-      30122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
-      5e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
-      5e112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
-      c1112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
-      c1112290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
-      b7042290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
-      8f102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
-      0e102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
-      07132290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
-      c7072290_1ec3_e711_8c5a_005056ad0002-->1d0a2290_1ec3_e711_8c5a_005056ad0002
-      ca122290_1ec3_e711_8c5a_005056ad0002-->200a2290_1ec3_e711_8c5a_005056ad0002
-      68102290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
-      f4112290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
-      f4112290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
-      f4112290_1ec3_e711_8c5a_005056ad0002-->c0102290_1ec3_e711_8c5a_005056ad0002
-      f4112290_1ec3_e711_8c5a_005056ad0002-->9a072290_1ec3_e711_8c5a_005056ad0002
-      d6072290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
-      71082290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
-      c0102290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
-      c0102290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
-      9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
-      9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
-  </div>
-  <div class="mermaid">
-graph TB
-	subgraph One
-		a1-->a2
-	end
-  </div>
-  <div class="mermaid">
-  graph TB
-  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
-  style bar fill:#999,stroke-width:10px,stroke:#0F0
-  </div>
-  <div class="mermaid">
-      graph LR
-      456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
-      f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]
-      81dc9bdb52d04dc20036dbd8313ed055[1234 CCC fa:fa-check]
-      456ac9b0d15a8b7f1e71073221059886 -->|Node| f7f580e11d00a75814d2ded41fe8e8fe
-      f7f580e11d00a75814d2ded41fe8e8fe -->|Node| 81dc9bdb52d04dc20036dbd8313ed055
-      click 456ac9b0d15a8b7f1e71073221059886 "/admin/user/view?id=1051" "AAA
-      6000"
-      click f7f580e11d00a75814d2ded41fe8e8fe "/admin/user/view?id=1141" "BBB
-      600"
-      click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC
-      3000"
-      style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
-  </div>
-  <div class="mermaid">
-    graph TD
-    A[Christmas] -->|Get money| B(Go shopping)
-    B --> C{{Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?}}
-    C -->|One| D[Laptop]
-    C -->|Two| E[iPhone]
-    C -->|Three| F[Car]
-    click A "index.html#link-clicked" "link test"
-    click B testClick "click test"
-    classDef someclass fill:#f96;
-    class A someclass;
-    class C someclass;
-  </div>
-  <div class="mermaid">
-    graph TD
-    A([stadium shape test])
-    A -->|Get money| B([Go shopping])
-    B --> C([Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?])
-    C -->|One| D([Laptop])
-    C -->|Two| E([iPhone])
-    C -->|Three| F([Car<br/>wroom wroom])
-    click A "index.html#link-clicked" "link test"
-    click B testClick "click test"
-    classDef someclass fill:#f96;
-    class A someclass;
-    class C someclass;
-  </div>
-  <div class="mermaid">
-    graph LR
-    A[[subroutine shape test]]
-    A -->|Get money| B[[Go shopping]]
-    B --> C[[Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?]]
-    C -->|One| D[[Laptop]]
-    C -->|Two| E[[iPhone]]
-    C -->|Three| F[[Car<br/>wroom wroom]]
-    click A "index.html#link-clicked" "link test"
-    click B testClick "click test"
-    classDef someclass fill:#f96;
-    class A someclass;
-    class C someclass;
-  </div>
-  <div class="mermaid">
-    graph LR
-    A[(cylindrical<br />shape<br />test)]
-    A -->|Get money| B1[(Go shopping 1)]
-    A -->|Get money| B2[(Go shopping 2)]
-    A -->|Get money| B3[(Go shopping 3)]
-    C[(Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?)]
-    B1 --> C
-    B2 --> C
-    B3 --> C
-    C -->|One| D[(Laptop)]
-    C -->|Two| E[(iPhone)]
-    C -->|Three| F[(Car)]
-    click A "index.html#link-clicked" "link test"
-    click B testClick "click test"
-    classDef someclass fill:#f96;
-    class A someclass;
-  </div>
-  <div class="mermaid">
-    graph LR
-    A1[Multi<br>Line] -->|Multi<br>Line| B1(Multi<br>Line)
-    C1[Multi<br/>Line] -->|Multi<br/>Line| D1(Multi<br/>Line)
-    E1[Multi<br />Line] -->|Multi<br />Line| F1(Multi<br />Line)
-    A2[Multi<br>Line] -->|Multi<br>Line| B2(Multi<br>Line)
-    C2[Multi<br/>Line] -->|Multi<br/>Line| D2(Multi<br/>Line)
-    E2[Multi<br />Line] -->|Multi<br />Line| F2(Multi<br />Line)
-    linkStyle 0 stroke:DarkGray,stroke-width:2px
-    linkStyle 1 stroke:DarkGray,stroke-width:2px
-    linkStyle 2 stroke:DarkGray,stroke-width:2px
-  </div>
-  <div class="mermaid">
-    graph LR
-    A(( )) -->|step 1| B(( ))
-    B(( )) -->|step 2| C(( ))
-    C(( )) -->|step 3| D(( ))
-    linkStyle 1 stroke:greenyellow,stroke-width:2px
-    style C fill:greenyellow,stroke:green,stroke-width:4px
-  </div>
-  <div class="mermaid">
-    graph TB
-    TITLE["Link Click Events<br>(click the nodes below)"]
-    A["link test (open in same tab)"]
-    B["link test (open in new tab)"]
-    C[anchor test]
-    D[mailto test]
-    E[other protocol test]
-    F[script test]
-    TITLE --> A & B & C & D & E & F
-    click A "https://mermaid-js.github.io/mermaid/#/" "link test (open in same tab)"
-    click B "https://mermaid-js.github.io/mermaid/#/" "link test (open in new tab)" _blank
-    click C "#link-clicked"
-    click D "mailto:user@user.user" "mailto test"
-    click E "notes://do-your-thing/id" "other protocol test"
-    click F "javascript:alert('test')" "script test"
-  </div>
-  <hr/>
-  <div class="mermaid">
-    graph LR
-    A[red<br>text] -->|red<br>text| B(blue<br>text)
-    C[/red<br/>text/] -->|blue<br/>text| D{blue<br/>text}
-    E{{default<br />style}} -->|default<br />style| F([default<br />style])
-    linkStyle default color:Sienna;
-    linkStyle 0 color:red;
-    linkStyle 1 stroke:DarkGray,stroke-width:2px,color:#0000ff
-    style A color:red;
-    style B color:blue;
-    style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
-    style D stroke:#0000ff,fill:#ccccff,color:#0000ff
-    click B "index.html#link-clicked" "link test"
-    click D testClick "click test"
-  </div>
-  <div class="mermaid">
-    graph TD
-    A[myClass1] --> B[default] & C[default]
-    B[default] & C[default] --> D[myClass2]
-    classDef default stroke-width:2px,fill:none,stroke:silver
-    classDef node color:red
-    classDef myClass1 color:#0000ff
-    classDef myClass2 stroke:#0000ff,fill:#ccccff
-    class A myClass1
-    class D myClass2
-  </div>
-
-  <hr/>
-
-  <div class="mermaid">
-sequenceDiagram
-participant Alice
-participant Bob
-participant John as John<br/>Second Line
-rect rgb(200, 220, 100)
-rect rgb(200, 255, 200)
-Alice ->> Bob: Hello Bob, how are you?
-Bob-->>John: How about you John?
-end
-Bob--x Alice: I am good thanks!
-Bob-x John: I am good thanks!
-Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
-Bob-->Alice: Checking with John...
-end
-alt either this
-Alice->>John: Yes
-else or this
-Alice->>John: No
-else or this will happen
-Alice->John: Maybe
-end
-par this happens in parallel
-Alice -->> Bob: Parallel message 1
-and
-Alice -->> John: Parallel message 2
-end
-  </div>
-  <div class="mermaid">
-    sequenceDiagram
-    participant 1 as multiline<br>using #lt;br#gt;
-    participant 2 as multiline<br/>using #lt;br/#gt;
-    participant 3 as multiline<br />using #lt;br /#gt;
-    participant 4 as multiline<br 	/>using #lt;br 	/#gt;
-    1->>2: multiline<br>using #lt;br#gt;
-    note right of 2: multiline<br>using #lt;br#gt;
-    2->>3: multiline<br/>using #lt;br/#gt;
-    note right of 3: multiline<br/>using #lt;br/#gt;
-    3->>4: multiline<br />using #lt;br /#gt;
-    note right of 4: multiline<br />using #lt;br /#gt;
-    4->>1: multiline<br 	/>using #lt;br 	/#gt;
-    note right of 1: multiline<br 	/>using #lt;br 	/#gt;
-  </div>
-  <div class="mermaid">
-    sequenceDiagram
-    autonumber
-    Alice->>John: Hello John,<br>how are you?
-    Alice->>John: John,<br/>can you hear me?
-    John-->>Alice: Hi Alice,<br />I can hear you!
-    John-->>Alice: I feel great!
-  </div>
-
-  <hr/>
-
-  <div class="mermaid">
-gantt
-dateFormat  YYYY-MM-DD
-axisFormat  %d/%m
-title Adding GANTT diagram to mermaid
-excludes weekdays 2014-01-10
-
-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
-
-section Critical tasks
-Completed task in the critical line :crit, done, 2014-01-06,24h
-Implement parser and jison          :crit, done, after des1, 2d
-Create tests for parser             :crit, active, 3d
-Future task in critical line        :crit, 5d
-Create tests for renderer           :2d
-Add to mermaid                      :1d
-
-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
-
-click cl1 href "https://mermaidjs.github.io/"
-click cl2 call ganttTestClick("test", test, test)
-
-section Last section
-Describe gantt syntax               :after doc1, 3d
-Add gantt diagram to demo page      : 20h
-Add another diagram to demo page    : 48h
-  </div>
-  <div class="mermaid">
-    gantt
-    dateFormat  YYYY-MM-DD
-    axisFormat  %d/%m
-    title       GANTT diagram with multiline section titles
-    excludes    weekdays 2014-01-10
-
-    section A section<br>multiline
-    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
-
-    section Critical tasks<br/>multiline
-    Completed task in the critical line : crit, done, 2014-01-06, 24h
-    Implement parser and jison          : crit, done, after des1, 2d
-    Create tests for parser             : crit, active, 3d
-    Future task in critical line        : crit, 5d
-    Create tests for renderer           : 2d
-    Add to mermaid                      : 1d
-
-    section Documentation<br />multiline
-    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 Last section<br	/>multiline
-    Describe gantt syntax               : after doc1, 3d
-    Add gantt diagram to demo page      : 20h
-    Add another diagram to demo page    : 48h
-  </div>
-
-  <hr/>
-
-  <div class="mermaid">
-gitGraph:
-options
-{
-    "nodeSpacing": 150,
-    "nodeRadius": 10
-}
-end
-commit
-branch newbranch
-checkout newbranch
-commit
-commit
-checkout master
-commit
-commit
-merge newbranch
-  </div>
-
-  <hr/>
-
-  <div class="mermaid">
-classDiagram
-Class01 <|-- AveryLongClass : Cool
-&lt;&lt;interface&gt;&gt; Class01
-Class03 "0" *-- "0..n" Class04
-Class05 "1" o-- "many" Class06
-Class07 .. Class08
-Class09 "many" --> "1" C2  : Where am i?
-Class09 "0" --* "1..n" 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
-  size()
-}
-  </div>
-
-  <div class="mermaid">
-    classDiagram
-    class Class01~T~
-    Class01 : #size()
-    Class01 : -int chimp
-    Class01 : +int gorilla
-    class Class10~T~ {
-      &lt;&lt;service&gt;&gt;
-      int id
-      size()
-    }
-  </div>
-
-  <div class="mermaid">
-    classDiagram
-    Class01~T~ <|-- AveryLongClass : Cool
-    &lt;&lt;interface&gt;&gt; Class01
-    Class03~T~ "0" *-- "0..n" Class04
-    Class05 "1" o-- "many" Class06
-    Class07~T~ .. Class08
-    Class09 "many" --> "1" C2  : Where am i?
-    Class09 "0" --* "1..n" 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
-      size()
-    }
-  </div>
-
-  <div class="mermaid">
-    stateDiagram
-      State1
-  </div>
-
-  <hr>
-
-  <div class="mermaid">
-    stateDiagram
-    [*] --> First
-    state First {
-        [*] --> second
-        second --> [*]
-    }
-  </div>
-  <div class="mermaid">
-    stateDiagram
-        State1: The state with a note
-        note right of State1
-            Important information! You can write
-            notes.
-        end note
-        State1 --> State2
-        note left of State2 : This is the note to the left.
-  </div>
-  <div class="mermaid">
-    stateDiagram
-    State1
-    note right of State1
-    Line1<br>Line2<br/>Line3<br />Line4<br	/>Line5
-    end note
-  </div>
-
-  <h1 id="link-clicked">Anchor for "link-clicked" test</h1>
-
-  <script src="./mermaid.js"></script>
-  <script>
-    mermaid.initialize({
-      theme: 'forest',
-      // themeCSS: '.node rect { fill: red; }',
-      logLevel: 3,
-      securityLevel: 'loose',
-      flowchart: { curve: 'basis' },
-      gantt: { axisFormat: '%m/%d/%Y' },
-      sequence: { actorMargin: 50 },
-      // sequenceDiagram: { actorMargin: 300 } // deprecated
-    });
-  </script>
-  <script>
-    function ganttTestClick(a, b, c){
-      console.log("a:", a)
-      console.log("b:", b)
-      console.log("c:", c)
-    }
-    function testClick(nodeId) {
-      console.log("clicked", nodeId)
-      var originalBgColor = document.querySelector('body').style.backgroundColor
-      document.querySelector('body').style.backgroundColor = 'yellow'
-      setTimeout(function() {
-        document.querySelector('body').style.backgroundColor = originalBgColor
-      }, 100)
-    }
-  </script>
-  <script>
-     const testLineEndings = (test, input) => {
-       try {
-         mermaid.render(test, input, () => {});
-       } catch (err) {
-         console.error("Error in %s:\n\n%s", test, err);
-       }
-     };
-
-     testLineEndings("CR", "graph LR\rsubgraph CR\rA --> B\rend");
-     testLineEndings("LF", "graph LR\nsubgraph LF\nA --> B\nend");
-     testLineEndings("CRLF", "graph LR\r\nsubgraph CRLF\r\nA --> B\r\nend");
-  </script>
-</body>
-</html>
--- a/dist/mermaid.min.js
+++ b/dist/mermaid.min.js
--- a/dist/mermaid.min.js.map
+++ b/dist/mermaid.min.js.map
--- a/dist_dev/mermaid.core.js
+++ b/dist_dev/mermaid.core.js
--- a/dist_dev/mermaid.core.js.map
+++ b/dist_dev/mermaid.core.js.map
--- a/dist_dev/mermaid.js
+++ b/dist_dev/mermaid.js
--- a/dist_dev/mermaid.js.map
+++ b/dist_dev/mermaid.js.map
--- a/dist_dev/mermaid.min.js
+++ b/dist_dev/mermaid.min.js
--- a/dist_dev/mermaid.min.js.map
+++ b/dist_dev/mermaid.min.js.map
--- a/docs/.debug.yml
+++ b/docs/.debug.yml
@ -1,5 +0,0 @@
-remote_theme: false
-
-baseurl: /mermaid
-
-theme: jekyll-rtd-theme
--- a/docs/Gemfile
+++ b/docs/Gemfile
@ -1,5 +0,0 @@
-source "https://rubygems.org"
-
-gem "jekyll-rtd-theme"
-
-gem "github-pages", group: :jekyll_plugins
--- a/docs/Makefile
+++ b/docs/Makefile
@ -1,14 +0,0 @@
-default:
-	@gem install jekyll bundler && bundle install
-
-update:
-	@bundle update
-
-clean:
-	@bundle exec jekyll clean
-
-build: clean
-	@bundle exec jekyll build --profile --config _config.yml,.debug.yml
-
-server: clean
-	@bundle exec jekyll server --livereload --config _config.yml,.debug.yml
--- a/docs/Setup.md
+++ b/docs/Setup.md
@ -387,7 +387,7 @@ Default value: false
 | --------------- | ---------------------------------------------------- | ------ | -------- | --------------------------- |
 | actorFontFamily | This sets the font family of the actor's description | string | Required | Any Possible CSS FontFamily |

-**Notes:** Default value: "'Open-Sans", "sans-serif"'
+**Notes:** Default value: "'Open Sans", sans-serif'

 ### actorFontWeight

@ -1069,61 +1069,16 @@ Returns **any**

 ```html
 <script>
-  var config = {
-    theme: 'default',
-    logLevel: 'fatal',
-    securityLevel: 'strict',
-    startOnLoad: true,
-    arrowMarkerAbsolute: false,
-
-    er: {
-      diagramPadding: 20,
-      layoutDirection: 'TB',
-      minEntityWidth: 100,
-      minEntityHeight: 75,
-      entityPadding: 15,
-      stroke: 'gray',
-      fill: 'honeydew',
-      fontSize: 12,
-      useMaxWidth: true,
-    },
-    flowchart: {
-      diagramPadding: 8,
-      htmlLabels: true,
-      curve: 'basis',
-    },
-    sequence: {
-      diagramMarginX: 50,
-      diagramMarginY: 10,
-      actorMargin: 50,
-      width: 150,
-      height: 65,
-      boxMargin: 10,
-      boxTextMargin: 5,
-      noteMargin: 10,
-      messageMargin: 35,
-      messageAlign: 'center',
-      mirrorActors: true,
-      bottomMarginAdj: 1,
-      useMaxWidth: true,
-      rightAngles: false,
-      showSequenceNumbers: false,
-    },
-    gantt: {
-      titleTopMargin: 25,
-      barHeight: 20,
-      barGap: 4,
-      topPadding: 50,
-      leftPadding: 75,
-      gridLineStartPadding: 35,
-      fontSize: 11,
-      fontFamily: '"Open-Sans", "sans-serif"',
-      numberSectionStyles: 4,
-      axisFormat: '%Y-%m-%d',
-      topAxis: false,
-    },
-  };
-  mermaid.initialize(config);
+  var config = { theme: 'default', logLevel: 'fatal', securityLevel: 'strict', startOnLoad: true,
+  arrowMarkerAbsolute: false, er: { diagramPadding: 20, layoutDirection: 'TB', minEntityWidth: 100,
+  minEntityHeight: 75, entityPadding: 15, stroke: 'gray', fill: 'honeydew', fontSize: 12, useMaxWidth:
+true, }, flowchart: { diagramPadding: 8, htmlLabels: true, curve: 'basis', }, sequence: {
+  diagramMarginX: 50, diagramMarginY: 10, actorMargin: 50, width: 150, height: 65, boxMargin: 10,
+  boxTextMargin: 5, noteMargin: 10, messageMargin: 35, messageAlign: 'center', mirrorActors: true,
+  bottomMarginAdj: 1, useMaxWidth: true, rightAngles: false, showSequenceNumbers: false, }, gantt: {
+  titleTopMargin: 25, barHeight: 20, barGap: 4, topPadding: 50, leftPadding: 75, gridLineStartPadding:
+35, fontSize: 11, fontFamily: '"Open Sans", sans-serif', numberSectionStyles: 4, axisFormat:
+'%Y-%m-%d', topAxis: false, }, }; mermaid.initialize(config);
 </script>
 ```

--- a/docs/_config.yml
+++ b/docs/_config.yml
@ -1,37 +0,0 @@
-title: mermaid
-lang: en
-description: Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.
-
-remote_theme: rundocs/jekyll-rtd-theme
-
-mermaid:
-  custom: https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js
-
-copyright:
-  since: 2014
-  revision: true
-
-edit: true
-addons_branch: true
-
-google:
-  gtag: UA-153180559-1
-
-sass:
-  style: compressed
-
-addons:
-  - github
-  - i18n
-  - analytics
-
-plugins:
-  - jemoji
-
-readme_index:
-  with_frontmatter: true
-
-exclude:
-  - Makefile
-  - Gemfile
-  - Gemfile.lock
--- a/docs/_includes/assets/custom.js
+++ b/docs/_includes/assets/custom.js
--- a/docs/_includes/assets/custom.scss
+++ b/docs/_includes/assets/custom.scss
--- a/docs/assets/SUMMARY.md
+++ b/docs/assets/SUMMARY.md
@ -1,15 +0,0 @@
-# Summary
-
- [mermaid](README.md)
- [FAQ](faq.md)
- [Breaking changes](breakingChanges.md)
- [Usage](usage.md)
- [Flowchart](flowchart.md)
- [Sequence diagram](sequenceDiagram.md)
- [Gantt diagram](gantt.md)
- [mermaid CLI](mermaidCLI.md)
- [Demos](demos.md)
- [mermaidAPI](mermaidAPI.md)
- [Development](development.md)
- [Upgrading](upgrading.md)
- [Contribute to this website](https://github.com/mermaidjs/mermaid-gitbook)
--- a/docs/assets/_navbar.md
+++ b/docs/assets/_navbar.md
@ -1,13 +0,0 @@
-* Getting started
-
-  * [Quick start](quickstart.md)
-  * [Writing more pages](more-pages.md)
-  * [Custom navbar](custom-navbar.md)
-  * [Cover page](cover.md)
-
-* Configuration
-  * [Configuration](configuration.md)
-  * [Themes](themes.md)
-  * [Using plugins](plugins.md)
-  * [Markdown configuration](markdown.md)
-  * [Language highlight](language-highlight.md)
--- a/docs/assets/_sidebar.md
+++ b/docs/assets/_sidebar.md
@ -1,37 +0,0 @@
- Overview
-  - [mermaid](README.md)
-  <!-- - [overview](n00b-overview.md) -->
-  <!-- - [Use-Cases and Integrations](integrations.md) -->
-  <!-- - [FAQ](faq.md) -->
-
- Getting Started
-
-  <!-- - [Getting started - easier](n00b-gettingStarted.md) -->
-  <!-- - [Tutorials](Tutorials.md) -->
-  <!-- - [API-Usage](usage.md) -->
-  <!-- - [Configurations](Setup.md) -->
-  <!-- - [Directives](8.6.0_docs.md) -->
-  <!-- - [Theming](theming.md) -->
-  <!-- - [mermaid CLI](mermaidCLI.md) -->
-  <!-- - [Advanced usage](n00b-advanced.md) -->
-
-
- Contributions and Community
-
-  <!-- - [Development and Contribution](development.md)-->
-  <!-- - [Adding Diagrams](newDiagram.md)-->
-  <!-- - [Changelog](CHANGELOG.md) -->
-  
-
- Diagrams and Syntax and Examples
-
-  <!-- - [Diagram syntax intro](n00b-syntaxReference.md) -->
-  <!-- - [Examples](examples.md)
-  - [Flowchart](flowchart.md) -->
-  <!-- - [Sequence diagram](sequenceDiagram.md)
-  - [Class Diagram](classDiagram.md)
-  - [State Diagram](stateDiagram.md)
-  - [Entity Relationship Diagram](entityRelationshipDiagram.md)
-  - [User Journey](user-journey.md)
-  - [Gantt](gantt.md)
-  - [Pie Chart](pie.md)
--- a/docs/assets/breakingChanges.md
+++ b/docs/assets/breakingChanges.md
@ -1,51 +0,0 @@
-# Breaking changes
-**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/breakingChanges.md)
-### Breaking changes from history version to latest version:
-
-## #1
-
-```javascript
-mermaid.initialize({
-    sequenceDiagram:{
-        ...
-    }
-})
-```
-
-has been changed to
-
-```javascript
-mermaid.initialize({
-    sequence:{
-        ...
-    }
-})
-```
-
-## #2
-
-In old versions you need to add CSS file to your HTML:
-
-```html
-<link rel="stylesheet" href="mermaid.min.css">
-```
-
-or
-
-```html
-<link rel="stylesheet" href="mermaid.forest.min.css">
-```
-
-Now it is not needed to do so. And there are no more CSS files in distrubtion files.
-
-You just
-
-```javascript
-mermaid.initialize({
-    theme: 'forest'
-})
-```
-
-and it works like a charm.
-
-This is because now the CSS is inline with SVG for portability.
--- a/docs/assets/developer-docs/configuration.md
+++ b/docs/assets/developer-docs/configuration.md
@ -1,30 +0,0 @@
-# Configuration
-
-When mermaid starts configuration is extracted to a configuration to be used for a diagram. There a 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**.
-* Directives - diagram authors can update select configuration parameters directly int he diagram code via directives and these are applied to the render config.
-
-**The render config** is configration that is used when rendering by applying these configurations.
-
-## Theme configuration
-
-## Starting mermaid
-
-```mermaid
-sequenceDiagram
-	Site->>mermaid: initialize
-	Site->>mermaid: content loaded
-	mermaid->>mermaidAPI: init
-```
-
-## Initialize
-
-Intialize call is calloed **only once**. It is called by the site integrator in order to override the default configuration on a site level.
-
-## configApi.reset
-
-This method resets the configuration for a diagram to the site configuration, the configuration provided by the site integrator. Before each rendering of a diagram reset is called in the very beginning of render.
-
-##
--- a/docs/assets/img/Gantt-excluded-days-within.png
+++ b/docs/assets/img/Gantt-excluded-days-within.png
--- a/docs/assets/img/Gantt-long-weekend-look.png
+++ b/docs/assets/img/Gantt-long-weekend-look.png
--- a/docs/assets/img/GitHub-Mark-32px.png
+++ b/docs/assets/img/GitHub-Mark-32px.png
--- a/docs/assets/img/assignWithDepth.png
+++ b/docs/assets/img/assignWithDepth.png
--- a/docs/assets/img/class.png
+++ b/docs/assets/img/class.png
--- a/docs/assets/img/er.png
+++ b/docs/assets/img/er.png
--- a/docs/assets/img/flow.png
+++ b/docs/assets/img/flow.png
--- a/docs/assets/img/gantt.png
+++ b/docs/assets/img/gantt.png
--- a/docs/assets/img/git.png
+++ b/docs/assets/img/git.png
--- a/docs/assets/img/header.png
+++ b/docs/assets/img/header.png
--- a/docs/assets/img/liveEditorOptions.png
+++ b/docs/assets/img/liveEditorOptions.png
--- a/docs/assets/img/n00b-Confluence1.png
+++ b/docs/assets/img/n00b-Confluence1.png
--- a/docs/assets/img/n00b-Confluence2.png
+++ b/docs/assets/img/n00b-Confluence2.png
--- a/docs/assets/img/n00b-Confluence3.png
+++ b/docs/assets/img/n00b-Confluence3.png
--- a/docs/assets/img/n00b-Confluence4.png
+++ b/docs/assets/img/n00b-Confluence4.png
--- a/docs/assets/img/n00b-firstFlow.png
+++ b/docs/assets/img/n00b-firstFlow.png
--- a/docs/assets/img/n00b-liveEditor.png
+++ b/docs/assets/img/n00b-liveEditor.png
--- a/docs/assets/img/new-diagrams.png
+++ b/docs/assets/img/new-diagrams.png
--- a/docs/assets/img/object.assign
+++ b/docs/assets/img/object.assign
--- a/docs/assets/img/sequence.png
+++ b/docs/assets/img/sequence.png
--- a/docs/assets/img/simple-er.png
+++ b/docs/assets/img/simple-er.png
--- a/docs/assets/img/user-journey.png
+++ b/docs/assets/img/user-journey.png
--- a/docs/assets/img/without
+++ b/docs/assets/img/without
--- a/docs/assets/img/wrapped
+++ b/docs/assets/img/wrapped
--- a/docs/assets/index.docsify.html
+++ b/docs/assets/index.docsify.html
@ -1,77 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.</title>
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-  <meta name="description" content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.">
-  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-  <!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
-  <link rel="stylesheet" href="theme.css">  <script src="//cdn.jsdelivr.net/npm/mermaid@8.7.0/dist/mermaid.min.js"></script>
-  <!-- <script src="http://localhost:9000/mermaid.js"></script> -->
-  <script>
-    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-
-    ga('create', 'UA-153180559-1', 'auto');
-    if(location) {
-       ga('send', 'pageview', location.hash);
-     }
-
-    </script>
-
-  <style>
-  .markdown-section {
-    max-width: 1200px;
-  }
-  </style>
-</head>
-<body>
-  <div id="app"></div>
-  <script>
-    window.$docsify = {
-      search: 'auto',
-      name: 'mermaid',
-      repo: 'https://github.com/knsv/mermaid',
-      loadSidebar: true,
-      mergeNavbar: true,
-      maxLevel: 4,
-      subMaxLevel: 2,
-      markdown: {
-        renderer: {
-          code: function(code, lang) {
-            if (lang === "mermaid") {
-              return (
-                '<div class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + "</div>"
-              );
-            }
-            return this.origin.code.apply(this, arguments);
-          }
-        }
-      }
-    }
-
-    var num = 0;
-    const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches
-
-    const conf = { logLevel:4, startOnLoad: false, themeCSS:'.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }' };
-    if(isDarkMode && false) conf.theme = 'dark';
-    mermaid.initialize(conf);
-
-  </script>
-  <script>
-   window.onhashchange = function(a) {
-     //code
-     if(location) {
-       ga('send', 'pageview', location.hash);
-     }
-  }
-  </script>
-  <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
-  <script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
-  <scrpt src="//unpkg.com/docsify/lib/plugins/ga.min.js"></scrpt>
-</body>
-</html>
-<!--  -->
--- a/docs/assets/liveEditorOptions.png
+++ b/docs/assets/liveEditorOptions.png
--- a/docs/assets/theme.css
+++ b/docs/assets/theme.css
--- a/docs/assets/theme_themed.css
+++ b/docs/assets/theme_themed.css
--- a/docs/assets/upgrading.md
+++ b/docs/assets/upgrading.md
@ -1,28 +0,0 @@
-# Upgrading
-
-Some of the interfaces has been upgraded.
-
-
-## From version 0.4.0 to 0.5.0
-
-
-### Initialization
-
-`mermaid_config` is no longer used. Instead a call to mermaid initialize is done as in the example below:
-
-
-#### version 0.4.0
-
-```javascript
-mermaid_config = {
-    startOnLoad: true
-}
-```
-
-#### version 0.5.0
-
-```javascript
-mermaid.initialize({
-    startOnLoad: true
-})
-```
--- a/docs/diagrams-and-syntax-and-examples/README.md
+++ b/docs/diagrams-and-syntax-and-examples/README.md
@ -1,6 +0,0 @@
---
-sort: 4
---
-
-# Diagrams and Syntax and Examples
-{% include list.liquid %}
--- a/docs/diagrams-and-syntax-and-examples/classDiagram.md
+++ b/docs/diagrams-and-syntax-and-examples/classDiagram.md
@ -1,707 +0,0 @@
---
-sort: 5
---
-
-# Class diagrams
-
-> "In software engineering, a class diagram in the Unified Modeling Language (UML) is a type of static structure diagram that describes the structure of a system by showing the system's classes, their attributes, operations (or methods), and the relationships among objects."
-> Wikipedia
-
-The class diagram is the main building block of object-oriented modeling. It is used for general conceptual modeling of the structure of the application, and for detailed modeling translating the models into programming code. Class diagrams can also be used for data modeling. The classes in a class diagram represent both the main elements, interactions in the application, and the classes to be programmed.
-
-Mermaid can render class diagrams.
-
-```
- 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()
-      }
-
-```
-
-```mermaid
- 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
-
-### Class
-
-UML provides mechanisms to represent class members, such as attributes and methods, and additional information about them.
-A single instance of a class in the diagram contains three compartments:
-
- The top compartment contains the name of the class. It is printed in bold and centered, and the first letter is capitalized. It may also contain optional annotation text describing the nature of the class.
- The middle compartment contains the attributes of the class. They are left-aligned and the first letter is lowercase.
-    The bottom compartment contains the operations the class can execute. They are also left-aligned and the first letter is lowercase.
-
-```
-classDiagram
-    class BankAccount
-    BankAccount : +String owner
-    BankAccount : +Bigdecimal balance
-    BankAccount : +deposit(amount)
-    BankAccount : +withdrawl(amount)
-
-```
-
-```mermaid
-classDiagram
-    class BankAccount
-    BankAccount : +String owner
-    BankAccount : +BigDecimal balance
-    BankAccount : +deposit(amount)
-    BankAccount : +withdrawl(amount)
-```
-
-## Define a class
-
-There are two ways to define a class:
-
- Explicitly defining a class using keyword **class** like `class Animal`. This defines the Animal class
- Define two classes via a **relationship** between them `Vehicle <|-- Car`. This defines two classes Vehicle and Car along with their relationship.
-
-```
-classDiagram
-    class Animal
-    Vehicle <|-- Car
-```
-
-```mermaid
-classDiagram
-    class Animal
-    Vehicle <|-- Car
-```
-
-Naming convention: a class name should be composed of alphanumeric (unicode allowed) and underscore characters.
-
-## Defining Members of a class
-
-UML provides mechanisms to represent class members, such as attributes and methods, and additional information about them.
-
-Mermaid distinguishes between attributes and functions/methods based on if the **parenthesis** `()` are present or not. The ones with `()` are treated as functions/methods, and others as attributes.
-
-There are two ways to define the members of a class, and regardless of whichever syntax is used to define the members, the output will still be same. The two different ways are :
-
- Associate a member of a class using **:** (colon) followed by member name, useful to define one member at a time. For example:
-
-```
- class BankAccount
- BankAccount : +String owner
- BankAccount : +BigDecimal balance
- BankAccount : +deposit(amount)
- BankAccount : +withdrawal(amount)
-```
-
-```mermaid
-  classDiagram
-  class BankAccount
-  BankAccount : +String owner
-  BankAccount : +BigDecimal balance
-  BankAccount : +deposit(amount)
-  BankAccount : +withdrawl(amount)
-```
-
- Associate members of a class using **{}** brackets, where members are grouped within curly brackets. Suitable for defining multiple members at once. For example:
-
-```
-class BankAccount{
-    +String owner
-    +BigDecimal balance
-    +deposit(amount) bool
-    +withdrawl(amount)
-}
-```
-
-```mermaid
-  classDiagram
-    class BankAccount{
-        +String owner
-        +BigDecimal balance
-        +deposit(amount) bool
-        +withdrawl(amount) int
-}
-```
-
-#### Return Type
-
-Optionally you can end the method/function definition with the data type that will be returned (note: there must be a space between the final `)` of the method definition and return type
-example:
-
-```
-class BankAccount{
-    +String owner
-    +BigDecimal balance
-    +deposit(amount) bool
-    +withdrawl(amount) int
-}
-```
-
-```mermaid
-    classDiagram
-    class BankAccount{
-        +String owner
-        +BigDecimal balance
-        +deposit(amount) bool
-        +withdrawl(amount) int
-}
-```
-
-#### Generic Types
-
-Members can be defined using generic types, such as `List<int>`, for fields, parameters and return types by enclosing the type within `~` (**tilde**). Note: **nested** type declarations (such as `List<List<int>>`) are not currently supported
-
-This can be done as part of either class definition method:
-
-```
-classDiagram
-class Square~Shape~{
-    int id
-    List~int~ position
-    setPoints(List~int~ points)
-    getPoints() List~int~
-}
-
-Square : -List~string~ messages
-Square : +setMessages(List~string~ messages)
-Square : +getMessages() List~string~
-```
-
-```mermaid
-classDiagram
-class Square~Shape~{
-    int id
-    List~int~ position
-    setPoints(List~int~ points)
-    getPoints() List~int~
-}
-
-Square : -List~string~ messages
-Square : +setMessages(List~string~ messages)
-Square : +getMessages() List~string~
-```
-
-#### Return Type
-
-Optionally you can end the method/function definition with the data type that will be returned
-
-#### Visibility
-
-To specify the visibility of a class member (i.e. any attribute or method), these notations may be placed before the member's name, but it is optional:
-
- `+` Public
- `-` Private
- `#` Protected
- `~` Package/Internal
-
-> _note_ you can also include additional _classifiers_ to a method definition by adding the following notations to the end of the method, i.e.: after the `()`:
-
-> - `*` Abstract e.g.: `someAbstractMethod()*`
-> - `$` Static e.g.: `someStaticMethod()$`
-
-## Defining Relationship
-
-A relationship is a general term covering the specific types of logical connections found on class and object diagrams.
-
-```
-[classA][Arrow][ClassB]:LabelText
-```
-
-There are different types of relations defined for classes under UML which are currently supported:
-
-| Type  | Description   |
-| ----- | ------------- |
-| <\|-- | Inheritance   |
-| \*--  | Composition   |
-| o--   | Aggregation   |
-| -->   | Association   |
-| --    | Link (Solid)  |
-| ..>   | Dependency    |
-| ..\|> | Realization   |
-| ..    | Link (Dashed) |
-
-```
-classDiagram
-classA <|-- classB
-classC *-- classD
-classE o-- classF
-classG <-- classH
-classI -- classJ
-classK <.. classL
-classM <|.. classN
-classO .. classP
-
-```
-
-```mermaid
-classDiagram
-classA <|-- classB
-classC *-- classD
-classE o-- classF
-classG <-- classH
-classI -- classJ
-classK <.. classL
-classM <|.. classN
-classO .. classP
-
-```
-
-We can use the labels to describe nature of relation between two classes. Also, arrowheads can be used in opposite directions as well :
-
-```
-classDiagram
-classA --|> classB : Inheritance
-classC --* classD : Composition
-classE --o classF : Aggregation
-classG --> classH : Association
-classI -- classJ : Link(Solid)
-classK ..> classL : Dependency
-classM ..|> classN : Realization
-classO .. classP : Link(Dashed)
-
-```
-
-```mermaid
-classDiagram
-classA --|> classB : Inheritance
-classC --* classD : Composition
-classE --o classF : Aggregation
-classG --> classH : Association
-classI -- classJ : Link(Solid)
-classK ..> classL : Dependency
-classM ..|> classN : Realization
-classO .. classP : Link(Dashed)
-```
-
-## Labels on Relations
-
-It is possible to add a label text to a relation:
-
-```
-[classA][Arrow][ClassB]:LabelText
-```
-
-```
-classDiagram
-classA <|-- classB : implements
-classC *-- classD : composition
-classE o-- classF : association
-```
-
-```mermaid
-classDiagram
-classA <|-- classB : implements
-classE o-- classF : association
-
-```
-
-## Cardinality / Multiplicity on relations
-
-Multiplicity or cardinality in class diagrams indicates the number of instances of one class linked to one instance of the other class. For example, one company will have one or more employees, but each employee works for just one company.
-
-Multiplicity notations are placed near the ends of an association.
-
-The different cardinality options are :
-
- `0..1` Zero or one
- `1` Only 1
- `0..1` Zero or One
- `1..*` One or more
- `*` Many
- `n` n {where n>1}
- `0..n` zero to n {where n>1}
- `1..n` one to n {where n>1}
-
-Cardinality can be easily defined by placing cardinality text within quotes `"` before(optional) and after(optional) a given arrow.
-
-```
-[classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText
-```
-
-```
-classDiagram
-    Customer "1" --> "*" Ticket
-    Student "1" --> "1..*" Course
-    Galaxy --> "many" Star : Contains
-```
-
-```mermaid
-classDiagram
-    Customer "1" --> "*" Ticket
-    Student "1" --> "1..*" Course
-    Galaxy --> "many" Star : Contains
-```
-
-## Annotations on classes
-
-It is possible to annotate classes with a specific marker text which is like meta-data for the class, giving a clear indication about its nature. Some common annotations examples could be:
-
- `<<Interface>>` To represent an Interface class
- `<<abstract>>` To represent an abstract class
- `<<Service>>` To represent a service class
- `<<enumeration>>` To represent an enum
-
-Annotations are defined within the opening `<<` and closing `>>`. There are two ways to add an annotation to a class and regardless of the syntax used output will be same. The two ways are :
-
- In a **_separate line_** after a class is defined. For example:
-
-```
-classDiagram
-class Shape
-<<interface>> Shape
-```
-
-```mermaid
-classDiagram
-class Shape
-<<interface>> Shape
-Shape : noOfVertices
-Shape : draw()
-```
-
- In a **_nested structure_** along with class definition. For example:
-
-```
-classDiagram
-class Shape{
-    <<interface>>
-    noOfVertices
-    draw()
-}
-class Color{
-    <<enumeration>>
-    RED
-    BLUE
-    GREEN
-    WHITE
-    BLACK
-}
-
-```
-
-```mermaid
-classDiagram
-class Shape{
-    <<interface>>
-    noOfVertices
-    draw()
-}
-class Color{
-    <<enumeration>>
-    RED
-    BLUE
-    GREEN
-    WHITE
-    BLACK
-}
-```
-
-## Comments
-
-Comments can be entered within a class diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any class diagram syntax
-
-```
-classDiagram
-%% This whole line is a comment classDiagram class Shape <<interface>>
-class Shape{
-    <<interface>>
-    noOfVertices
-    draw()
-}
-
-```
-
-## 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'`.
-
-You would define these actions on a separate line after all classes have been declared.
-
-```
-action className "reference" "tooltip"
-```
-
- _action_ is either `link` or `callback`, depending on which type of interaction you want to have called
- _className_ is the id of the node that the action will be associated with
- _reference_ is either the url link, or the function name for callback. (note: callback function will be called with the nodeId as parameter).
- (_optional_) tooltip is a string to be displayed when hovering over element (note: The styles of the tooltip are set by the class .mermaidTooltip.)
-
-### Examples
-
-_URL Link:_
-
-```
-classDiagram
-class Shape
-link Shape "http://www.github.com" "This is a tooltip for a link"
-```
-
-_Callback:_
-
-```
-classDiagram
-class Shape
-callback Shape "callbackFunction" "This is a tooltip for a callback"
-```
-
-```
-<script>
-    var callbackFunction = function(){
-        alert('A callback was triggered');
-    }
-<script>
-```
-
-```mermaid
-classDiagram
-    class Class01
-    class Class02
-    callback Class01 "callbackFunction" "Callback tooltip"
-    link Class02 "http://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.
-
-Beginners tip, a full example using interactive links in an html context:
-
-```
-<body>
-  <div class="mermaid">
-    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()
-      }
-
-      callback Duck callback "Tooltip"
-      click Zebra "http://www.github.com" "This is a link"
-  </div>
-
-  <script>
-    var callback = function(){
-        alert('A callback was triggered');
-    }
-    var config = {
-      startOnLoad:true,
-      securityLevel:'loose',
-    };
-
-    mermaid.initialize(config);
-  </script>
-</body>
-```
-
-## Styling
-
-### Styling a node
-
-It is possible to apply specific styles such as a thicker border or a different background color to individual nodes. This is done by predefining classes in css styles that can be applied from the graph definition as in the example
-below:
-
-```html
-<style>
-    .cssClass > rect{
-        fill:#FF0000;
-        stroke:#FFFF00;
-        stroke-width:4px;
-    }
-</style>
-```
-
-Then attaching that class to a specific node as per below:
-
-```
-    cssClass "nodeId1" cssClass;
-```
-
-It is also possible to attach a class to a list of nodes in one statement:
-
-```
-    cssClass "nodeId1,nodeId2" cssClass;
-```
-
-A shorter form of adding a class is to attach the classname to the node using the `:::` operator as per below:
-
-```
-classDiagram
-    class Animal:::cssClass
-```
-
-Or:
-
-```
-classDiagram
-    class Animal:::cssClass {
-        -int sizeInFeet
-        -canEat()
-    }
-```
-
-?> cssClasses cannot be added using this shorthand method at the same time as a relation statement.
-
-?> Due to limitations with existing markup for class diagrams, it is not currently possible to define css classes within the diagram itself.  ***Coming soon!***
-
-### Default Styles
-
-The main styling of the class diagram is done with a preset number of css classes. During rendering these classes are extracted from the file located at src/themes/class.scss. The classes used here are described below:
-
-| Class              | Description                                                       |
-| ------------------ | ----------------------------------------------------------------- |
-| g.classGroup text  | Styles for general class text                                     |
-| classGroup .title  | Styles for general class title                                    |
-| g.classGroup rect  | Styles for class diagram rectangle                                |
-| g.classGroup line  | Styles for class diagram line                                     |
-| .classLabel .box   | Styles for class label box                                        |
-| .classLabel .label | Styles for class label text                                       |
-| composition        | Styles for composition arrow head and arrow line                  |
-| aggregation        | Styles for aggregation arrow head and arrow line(dashed or solid) |
-| dependency         | Styles for dependency arrow head and arrow line                   |
-
-#### Sample stylesheet
-
-```scss
-body {
-    background: white;
-}
-
-g.classGroup text {
-    fill: $nodeBorder;
-    stroke: none;
-    font-family: 'trebuchet ms', verdana, arial;
-    font-family: var(--mermaid-font-family);
-    font-size: 10px;
-
-    .title {
-        font-weight: bolder;
-    }
-}
-
-g.classGroup rect {
-    fill: $nodeBkg;
-    stroke: $nodeBorder;
-}
-
-g.classGroup line {
-    stroke: $nodeBorder;
-    stroke-width: 1;
-}
-
-.classLabel .box {
-    stroke: none;
-    stroke-width: 0;
-    fill: $nodeBkg;
-    opacity: 0.5;
-}
-
-.classLabel .label {
-    fill: $nodeBorder;
-    font-size: 10px;
-}
-
-.relation {
-    stroke: $nodeBorder;
-    stroke-width: 1;
-    fill: none;
-}
-
-@mixin composition {
-    fill: $nodeBorder;
-    stroke: $nodeBorder;
-    stroke-width: 1;
-}
-
-#compositionStart {
-    @include composition;
-}
-
-#compositionEnd {
-    @include composition;
-}
-
-@mixin aggregation {
-    fill: $nodeBkg;
-    stroke: $nodeBorder;
-    stroke-width: 1;
-}
-
-#aggregationStart {
-    @include aggregation;
-}
-
-#aggregationEnd {
-    @include aggregation;
-}
-
-#dependencyStart {
-    @include composition;
-}
-
-#dependencyEnd {
-    @include composition;
-}
-
-#extensionStart {
-    @include composition;
-}
-
-#extensionEnd {
-    @include composition;
-}
-```
-
-## Configuration
-
-`Coming soon`
--- a/docs/diagrams-and-syntax-and-examples/directives.md
+++ b/docs/diagrams-and-syntax-and-examples/directives.md
@ -1,81 +0,0 @@
---
-sort: 10
---
-
-## Directives
-
-## Directives were added in [Version 8.6.0](../getting-started/8.6.0_docs.md). Please Read it for more information.
-
-## Directives
-With this version, directives are supported. Directives are divided in two sets, by priority. the first set, containing 'init' or 'initialize' directives take priority. While the other set, containing all other kinds of directives are considered only after 'init' and the graph-type declared.
-
-#### Init
-
-
-| Parameter | Description |Type | Required | Values|
-| --- | --- | --- | --- | --- |
-| init | modifies configurations| Directive| Optional | Any parameters not included in the secure array|
-
-**Notes:**
-
-init would be an argument-directive: %%{init: { **insert argument here**}}%%
-
-The json object that is passed as {**argument** } must be valid, quoted json or it will be ignored.
-
-The init/initialize directive is parsed early in the flow, enough to be able to re-initialize mermaid with a new configuration object. Example:
-```
-%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
-graph >
-A-->B
-```
-
-will set the `logLevel` to `debug` and the `theme` to `dark` for a flowchart diagram.
-
-Note: 'init' or 'initialize' are both acceptable as init directives. Also note that init directives are coalesced. This means:
-
-```
-%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
-%%{initialize: { 'logLevel': 'fatal', "theme":'dark', 'startOnLoad': true } }%%
-...
-```
-
-will result an init object looking like this:
-
-```
-{
-  logLevel: 'fatal',
-  theme: 'dark',
-  startOnLoad: true
-}
-```
-
-to be sent to `mermaid.initialize(...)`
-
-
-#### Other directives
-
-In this category are any directives that follow the graph type declaration. Essentially, these directives will not be processed early in the flow like the init directive. Each individual graph type will handle these directives. As an example:
-
-```
-%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
-sequenceDiagram
-%%{config: { 'fontFamily': 'Menlo', 'fontSize': 18, 'fontWeight': 400} }%%
-Alice->>Bob: Hi Bob
-Bob->>Alice: Hi Alice
-```
-## Chronology
-This will set the `logLevel` to `debug` and `theme` to `dark` for a sequence diagram. Then, during processing, the config for the sequence diagram is set by the `config` directive. This directive is handled in the `sequenceDb.js`. In this example, the fontFamily, fontSize, and fontWeight are all set for this sequence diagram.
-
-#### Backwards Compatibility
-
-Init directives and any other non-multiline directives should be backwards compatible, because they will be treated as comments in prior versions of mermaid-js.
-
-Multiline directives, however, will pose an issue and will render an error. This is unavoidable.
-
-### Wrapping
-
-# Wrap
-
-| Parameter | Description |Type | Required | Values|
-| --- | --- | --- | --- | --- |
-| wrap | a callable text-wrap function| Directive| Optional | %%{wrap}%%|
--- a/docs/diagrams-and-syntax-and-examples/entityRelationshipDiagram.md
+++ b/docs/diagrams-and-syntax-and-examples/entityRelationshipDiagram.md
@ -1,112 +0,0 @@
---
-sort: 7
---
-
-# Entity Relationship Diagrams
-
-> An entity–relationship model (or ER model) describes interrelated things of interest in a specific domain of knowledge. A basic ER model is composed of entity types (which classify the things of interest) and specifies relationships that can exist between entities (instances of those entity types). Wikipedia.
-
-Note that practitioners of ER modelling almost always refer to *entity types* simply as *entities*.  For example the CUSTOMER entity type would be referred to simply as the CUSTOMER entity.  This is so common it would be inadvisable to do anything else, but technically an entity is an abstract *instance* of an entity type, and this is what an ER diagram shows - abstract instances, and the relationships between them.  This is why entities are always named using singular nouns.
-
-Mermaid can render ER diagrams
-
-```markdown
-erDiagram
-    CUSTOMER ||--o{ ORDER : places
-    ORDER ||--|{ LINE-ITEM : contains
-    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
-```
-
-```mermaid
-erDiagram
-    CUSTOMER ||--o{ ORDER : places
-    ORDER ||--|{ LINE-ITEM : contains
-    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
-```
-
-Entity names are often capitalised, although there is no accepted standard on this, and it is not required in Mermaid.
-
-Relationships between entities are represented by lines with end markers representing cardinality.  Mermaid uses the most popular crow's foot notation. The crow's foot intuitively conveys the possibility of many instances of the entity that it connects to.
-
-## Status
-
-ER diagrams are a new feature in Mermaid and are **experimental**.  There are likely to be a few bugs and constraints, and enhancements will be made in due course.  Currently you can only define entities and relationships, but not attributes.
-
-## Syntax
-
-### Entities and Relationships
-
-Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to label the relationship.  Each statement consists of the following parts, all of which are mandatory:
-
-```markdown
-    <first-entity> <relationship> <second-entity> : <relationship-label>
-```
-
-Where:
-
- `first-entity` is the name of an entity.  Names must begin with an alphabetic character and may also contain digits and hyphens
- `relationship` describes the way that both entities inter-relate.  See below.
- `second-entity` is the name of the other entity
- `relationship-label` describes the relationship from the perspective of the first entity.
-
-For example:
-
-```markdown
-    PROPERTY ||--|{ ROOM : contains
-```
-
-This statement can be read as *a property contains one or more rooms, and a room is part of one and only one property*. You can see that the label here is from the first entity's perspective: a property contains a room, but a room does not contain a property.  When considered from the perspective of the second entity, the equivalent label is usually very easy to infer. (Some ER diagrams label relationships from both perspectives, but this is not supported here, and is usually superfluous).
-
-### Relationship Syntax
-
-The `relationship` part of each statement can be broken down into three sub-components:
-
- the cardinality of the first entity with respect to the second,
- whether the relationship confers identity on a 'child' entity
- the cardinality of the second entity with respect to the first
-
-Cardinality is a property that describes how many elements of another entity can be related to the entity in question.  In the above example a `PROPERTY` can have one or more `ROOM` instances associated to it, whereas a `ROOM` can only be associated with one `PROPERTY`.  In each cardinality marker there are two characters.  The outermost character represents a maximum value, and the innermost character represents a minimum value.  The table below summarises possible cardinalities.
-
-| Value (left) | Value (right) | Meaning                                                |
-|:------------:|:-------------:|--------------------------------------------------------|
-|     `\|o`    |       `o\|`   | Zero or one                                            |
-|     `\|\|`   |       `\|\|`  | Exactly one                                            |
-|     `}o`     |       `o{`    | Zero or more (no upper limit)                          |
-|     `}\|`    |       `\|{`   | One or more (no upper limit)                           |
-
-### Identification
-
-Relationships may be classified as either *identifying* or *non-identifying* and these are rendered with either solid or dashed lines respectively. This is relevant when one of the entities in question can not have independent existence without the other.  For example a firm that insures people to drive cars might need to store data on `NAMED-DRIVER`s. In modelling this we might start out by observing that a `CAR` can be driven by many `PERSON` instances, and a `PERSON` can drive many `CAR`s - both entities can exist without the other, so this is a non-identifying relationship that we might specify in Mermaid as: `PERSON }|..|{ CAR : "driver"`.  Note the two dots in the middle of the relationship that will result in a dashed line being drawn between the two entities.  But when this many-to-many relationship is resolved into two one-to-many relationships, we observe that a `NAMED-DRIVER` cannot exist without both a `PERSON` and a `CAR` - the relationships become identifying and would be specified using hyphens, which translate to a solid line:
-
-```markdown
-    CAR ||--o{ NAMED-DRIVER : allows
-    PERSON ||--o{ NAMED-DRIVER : is
-```
-
-### Other Things
-
- If you want the relationship label to be more than one word, you must use double quotes around the phrase
- If you don't want a label at all on a relationship, you must use an empty double-quoted string
-
-## Styling
-
-### Config options
-
-For simple color customization:
-
-| Name     | Used as                                                 |
-| :------- | :------------------------------------------------------ |
-| `fill`   | Background color of an entity                           |
-| `stroke` | Border color of an entity, line color of a relationship |
-
-### Classes used
-
-The following CSS class selectors are available for richer styling:
-
-| Selector                   | Description                                           |
-| :------------------------- | :---------------------------------------------------- |
-| `.er.entityBox`            | The box representing an entity                        |
-| `.er.entityLabel`          | The label for an entity                               |
-| `.er.relationshipLabel`    | The label for a relationship                          |
-| `.er.relationshipLabelBox` | The box surrounding a relationship label              |
-| `.er.relationshipLine`     | The line representing a relationship between entities |
--- a/docs/diagrams-and-syntax-and-examples/examples.md
+++ b/docs/diagrams-and-syntax-and-examples/examples.md
@ -1,191 +0,0 @@
---
-sort: 2
---
-
-# Examples
-
-This page contains a collection of examples of diagrams and charts that can be created through mermaid and its myriad applications.
-
-## If you wish to learn how to support mermaid on your webpage, read the [Beginner's Guide](../getting-started/n00b-gettingStarted.md).
-
-## If you wish to learn about mermaid's syntax, Read the [Diagram Syntax](n00b-syntaxReference.md) section.
-
-## Basic Pie Chart
-
-```
-pie title NETFLIX
-         "Time spent looking for movie" : 90
-         "Time spent watching it" : 10
-```
-```mermaid
-pie title NETFLIX
-         "Time spent looking for movie" : 90
-         "Time spent watching it" : 10
-```
-```
-pie title What Voldemort doesn't have?
-         "FRIENDS" : 2
-         "FAMILY" : 3
-         "NOSE" : 45
-```
-```mermaid
-pie title What Voldemort doesn't have?
-         "FRIENDS" : 2
-         "FAMILY" : 3
-         "NOSE" : 45
-```
-## Basic sequence diagram
-
-```
-sequenceDiagram
-    Alice ->> Bob: Hello Bob, how are you?
-    Bob-->>John: How about you John?
-    Bob--x Alice: I am good thanks!
-    Bob-x John: I am good thanks!
-    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
-
-    Bob-->Alice: Checking with John...
-    Alice->John: Yes... John, how are you?
-```
-```mermaid
-sequenceDiagram
-    Alice ->> Bob: Hello Bob, how are you?
-    Bob-->>John: How about you John?
-    Bob--x Alice: I am good thanks!
-    Bob-x John: I am good thanks!
-    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
-
-    Bob-->Alice: Checking with John...
-    Alice->John: Yes... John, how are you?
-```
-
-## Basic flowchart
-
-```
-graph LR
-    A[Square Rect] -- Link text --> B((Circle))
-    A --> C(Round Rect)
-    B --> D{Rhombus}
-    C --> D
-```
-```mermaid
-graph LR
-    A[Square Rect] -- Link text --> B((Circle))
-    A --> C(Round Rect)
-    B --> D{Rhombus}
-    C --> D
-```
-
-
-## Larger flowchart with some styling
-
-```
-graph TB
-    sq[Square shape] --> ci((Circle shape))
-
-    subgraph A
-        od>Odd shape]-- Two line<br/>edge comment --> ro
-        di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
-        di==>ro2(Rounded square shape)
-    end
-
-    %% Notice that no text in shape are added here instead that is appended further down
-    e --> od3>Really long text with linebreak<br>in an Odd shape]
-
-    %% Comments after double percent signs
-    e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
-
-    cyr[Cyrillic]-->cyr2((Circle shape Начало));
-
-     classDef green fill:#9f6,stroke:#333,stroke-width:2px;
-     classDef orange fill:#f96,stroke:#333,stroke-width:4px;
-     class sq,e green
-     class di orange
-```
-```mermaid
-graph TB
-    sq[Square shape] --> ci((Circle shape))
-
-    subgraph A
-        od>Odd shape]-- Two line<br/>edge comment --> ro
-        di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
-        di==>ro2(Rounded square shape)
-    end
-
-    %% Notice that no text in shape are added here instead that is appended further down
-    e --> od3>Really long text with linebreak<br>in an Odd shape]
-
-    %% Comments after double percent signs
-    e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
-
-    cyr[Cyrillic]-->cyr2((Circle shape Начало));
-
-     classDef green fill:#9f6,stroke:#333,stroke-width:2px;
-     classDef orange fill:#f96,stroke:#333,stroke-width:4px;
-     class sq,e green
-     class di orange
-```
-
-
-## Loops, alt and opt
-
-```
-sequenceDiagram
-    loop Daily query
-        Alice->>Bob: Hello Bob, how are you?
-        alt is sick
-            Bob->>Alice: Not so good :(
-        else is well
-            Bob->>Alice: Feeling fresh like a daisy
-        end
-
-        opt Extra response
-            Bob->>Alice: Thanks for asking
-        end
-    end
-```
-```mermaid
-sequenceDiagram
-    loop Daily query
-        Alice->>Bob: Hello Bob, how are you?
-        alt is sick
-            Bob->>Alice: Not so good :(
-        else is well
-            Bob->>Alice: Feeling fresh like a daisy
-        end
-
-        opt Extra response
-            Bob->>Alice: Thanks for asking
-        end
-    end
-```
-
-
-## Message to self in loop
-
-```
-sequenceDiagram
-    participant Alice
-    participant Bob
-    Alice->>John: Hello John, how are you?
-    loop Healthcheck
-        John->>John: Fight against hypochondria
-    end
-    Note right of John: Rational thoughts<br/>prevail...
-    John-->>Alice: Great!
-    John->>Bob: How about you?
-    Bob-->>John: Jolly good!
-```
-```mermaid
-sequenceDiagram
-    participant Alice
-    participant Bob
-    Alice->>John: Hello John, how are you?
-    loop Healthcheck
-        John->>John: Fight against hypochondria
-    end
-    Note right of John: Rational thoughts<br/>prevail...
-    John-->>Alice: Great!
-    John->>Bob: How about you?
-    Bob-->>John: Jolly good!
-```
--- a/docs/diagrams-and-syntax-and-examples/gantt.md
+++ b/docs/diagrams-and-syntax-and-examples/gantt.md
@ -1,389 +0,0 @@
---
-sort: 9
-title: Gantt
---
-
-# Gantt diagrams
-
-> A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrates a project schedule and the amount of time it would take for any one project to finish. Gantt charts illustrate number of days between the start and finish dates of the terminal elements and summary elements of a project.
-
- ## A note to users
- Gantt Charts will record each scheduled task as one continuous bar that extends from the left to the right. The x axis represents time and the y records the different tasks and the order in which they are to be completed.   
-
-
- It is important to remember that when a date, day, or collection of dates specific to a task are "excluded", the Gantt Chart will accomodate those changes by extending an equal number of day, towards the right, not by creating a gap inside the task.
- As shown here ![](https://raw.githubusercontent.com/NeilCuzon/mermaid/develop/docs/assets/img/Gantt-excluded-days-within.png)
-
-
- However, if the excluded dates are between two tasks that are set to start consecutively, the excluded dates will be skipped graphically and left blank, and the following task will begin after the end of the excluded dates.   
- As shown here ![](https://raw.githubusercontent.com/NeilCuzon/mermaid/develop/docs/assets/img/Gantt-long-weekend-look.png)
-
- A Gantt chart is useful for tracking the amount of time it would take before a project is finished, but it can also be used to graphically represent "non-working days", with a few tweaks.
-
-Mermaid can render Gantt diagrams as SVG, PNG or a MarkDown link that can be pasted into docs.
-
-```
-gantt
-    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
-```
-```mermaid
-gantt
-    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
-```
-## Syntax
-
-```
-gantt
-    dateFormat  YYYY-MM-DD
-    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
-
-    section Critical tasks
-    Completed task in the critical line :crit, done, 2014-01-06,24h
-    Implement parser and jison          :crit, done, after des1, 2d
-    Create tests for parser             :crit, active, 3d
-    Future task in critical line        :crit, 5d
-    Create tests for renderer           :2d
-    Add to mermaid                      :1d
-
-    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 Last section
-    Describe gantt syntax               :after doc1, 3d
-    Add gantt diagram to demo page      :20h
-    Add another diagram to demo page    :48h
-```
-```mermaid
-gantt
-    dateFormat  YYYY-MM-DD
-    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
-
-    section Critical tasks
-    Completed task in the critical line :crit, done, 2014-01-06,24h
-    Implement parser and jison          :crit, done, after des1, 2d
-    Create tests for parser             :crit, active, 3d
-    Future task in critical line        :crit, 5d
-    Create tests for renderer           :2d
-    Add to mermaid                      :1d
-
-    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 Last section
-    Describe gantt syntax               :after doc1, 3d
-    Add gantt diagram to demo page      :20h
-    Add another diagram to demo page    :48h
-```
-
-It is possible to set multiple dependencies separated by space:
-```
-    gantt
-        apple :a, 2017-07-20, 1w
-        banana :crit, b, 2017-07-23, 1d
-        cherry :active, c, after b a, 1d
-```
-```
-    gantt
-        apple :a, 2017-07-20, 1w
-        banana :crit, b, 2017-07-23, 1d
-        cherry :active, c, after b a, 1d
-```
-
-### Title
-
-The `title` is an *optional* string to be displayed at the top of the Gantt chart to describe the chart as a whole.
-
-
-### Section statements
-
-You can divide the chart into various sections, for example to separate different parts of a project like development and documentation.
-
-To do so, start a line with the `section` keyword and give it a name. (Note that unlike with the [title for the entire chart](#title), this name is *required*.
-
-
-## Setting dates
-
-`dateFormat` defines the format of the date **input** of your gantt elements. How these dates are represented in the rendered chart **output** are defined by `axisFormat`.
-
-
-### Input date format
-
-The default input date format is `YYYY-MM-DD`. You can define your custom ``dateFormat``.
-
-```
-dateFormat YYYY-MM-DD
-```
-
-The following formating options are supported:
-
-```
-Input	Example	Description:
-YYYY	2014	4 digit year
-YY	14	2 digit year
-Q	1..4	Quarter of year. Sets month to first month in quarter.
-M MM	1..12	Month number
-MMM MMMM	January..Dec	Month name in locale set by moment.locale()
-D DD	1..31	Day of month
-Do	1st..31st	Day of month with ordinal
-DDD DDDD	1..365	Day of year
-X	1410715640.579	Unix timestamp
-x	1410715640579	Unix ms timestamp
-H HH	0..23	24 hour time
-h hh	1..12	12 hour time used with a A.
-a A	am pm	Post or ante meridiem
-m mm	0..59	Minutes
-s ss	0..59	Seconds
-S	0..9	Tenths of a second
-SS	0..99	Hundreds of a second
-SSS	0..999	Thousandths of a second
-Z ZZ	+12:00	Offset from UTC as +-HH:mm, +-HHmm, or Z
-```
-
-More info in: http://momentjs.com/docs/#/parsing/string-format/
-
-### Output date format on the axis
-
-The default output date format is YYYY-MM-DD. You can define your custom ``axisFormat``, like `2020-Q1` for the first quarter of the year 2020.
-
-```
-axisFormat  %Y-%m-%d
-```
-
-The following formating strings are supported:
-
-```
-%a - abbreviated weekday name.
-%A - full weekday name.
-%b - abbreviated month name.
-%B - full month name.
-%c - date and time, as "%a %b %e %H:%M:%S %Y".
-%d - zero-padded day of the month as a decimal number [01,31].
-%e - space-padded day of the month as a decimal number [ 1,31]; equivalent to %_d.
-%H - hour (24-hour clock) as a decimal number [00,23].
-%I - hour (12-hour clock) as a decimal number [01,12].
-%j - day of the year as a decimal number [001,366].
-%m - month as a decimal number [01,12].
-%M - minute as a decimal number [00,59].
-%L - milliseconds as a decimal number [000, 999].
-%p - either AM or PM.
-%S - second as a decimal number [00,61].
-%U - week number of the year (Sunday as the first day of the week) as a decimal number [00,53].
-%w - weekday as a decimal number [0(Sunday),6].
-%W - week number of the year (Monday as the first day of the week) as a decimal number [00,53].
-%x - date, as "%m/%d/%Y".
-%X - time, as "%H:%M:%S".
-%y - year without century as a decimal number [00,99].
-%Y - year with century as a decimal number.
-%Z - time zone offset, such as "-0700".
-%% - a literal "%" character.
-```
-
-More info in: https://github.com/mbostock/d3/wiki/Time-Formatting
-
-## Comments
-
-Comments can be entered within a gantt chart, which will be ignored by the parser.  Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
-
-```
-gantt
-    title A Gantt Diagram
-    %% this is a comment
-    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
-
-```
-
-## Styling
-
-Styling of the a gantt diagram is done by defining a number of css classes.  During rendering these classes are extracted from the
-
-### Classes used
-
-Class | Description
---          | ---
-actor        | Style for the actor box at the top of the diagram.
-text.actor   | Styles for text in the actor box at the top of the diagram.
-actor-line   | The vertical line for an actor.
-messageLine0 | Styles for the solid message line.
-messageLine1 | Styles for the dotted message line.
-messageText  | Defines styles for the text on the message arrows.
-labelBox     | Defines styles label to left in a loop.
-labelText    | Styles for the text in label for loops.
-loopText     | Styles for the text in the loop box.
-loopLine     | Defines styles for the lines in the loop box.
-note         | Styles for the note box.
-noteText     | Styles for the text on in the note boxes.
-
-### Sample stylesheet
-
-
-```css
-.grid .tick {
-    stroke: lightgrey;
-    opacity: 0.3;
-    shape-rendering: crispEdges;
-}
-.grid path {
-    stroke-width: 0;
-}
-
-#tag {
-    color: white;
-    background: #FA283D;
-    width: 150px;
-    position: absolute;
-    display: none;
-    padding:3px 6px;
-    margin-left: -80px;
-    font-size: 11px;
-}
-
-#tag:before {
-    border: solid transparent;
-    content: ' ';
-    height: 0;
-    left: 50%;
-    margin-left: -5px;
-    position: absolute;
-    width: 0;
-    border-width: 10px;
-    border-bottom-color: #FA283D;
-    top: -20px;
-}
-.taskText {
-    fill:white;
-    text-anchor:middle;
-}
-.taskTextOutsideRight {
-    fill:black;
-    text-anchor:start;
-}
-.taskTextOutsideLeft {
-    fill:black;
-    text-anchor:end;
-}
-```
-
-## Today marker
-
-You can style or hide the marker for the current date. To style it, add a value for the `todayMarker` key.
-
-```
-todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
-```
-
-To hide the marker, set `todayMarker` to `off`.
-
-```
-todayMarker off
-```
-
-## Configuration
-
-Is it possible to adjust the margins for rendering the gantt diagram.
-
-This is done by defining the `ganttConfig` part of the configuration object.
-How to use the CLI is described in the [mermaidCLI](mermaidCLI.html) page.
-
-mermaid.ganttConfig can be set to a JSON string with config parameters or the corresponding object.
-
-```javascript
-mermaid.ganttConfig = {
-    titleTopMargin:25,
-    barHeight:20,
-    barGap:4,
-    topPadding:75,
-    sidePadding:75
-}
-```
-
-### Possible configration params:
-
-Param | Descriotion | Default value
--- | --- | ---
-mirrorActor|Turns on/off the rendering of actors below the diagram as well as above it|false
-bottomMarginAdj|Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists.|1
-
-## Interaction
-
-It is possible to bind a click event to a task, the click can lead to either a javascript callback or to a link which will be opened in the current browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
-
-```
-click taskId call callback(arguments)
-click taskId href URL
-```
-
-* taskId is the id of the task
-* callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the taskId as the parameter if no other arguments are specified..
-
-Beginners tip, a full example using interactive links in an html context:
-```html
-<body>
-  <div class="mermaid">
-    gantt
-      dateFormat  YYYY-MM-DD
-
-      section Clickable
-      Visit mermaidjs           :active, cl1, 2014-01-07, 3d
-      Print arguments         :cl2, after cl1, 3d
-      Print task              :cl3, after cl2, 3d
-
-      click cl1 href "https://mermaidjs.github.io/"
-      click cl2 call printArguments("test1", "test2", test3)
-      click cl3 call printTask()
-  </div>
-
-  <script>
-    var printArguments = function(arg1, arg2, arg3) {
-      alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);
-    }
-    var printTask = function(taskId) {
-      alert('taskId: ' + taskId);
-    }
-    var config = {
-      startOnLoad:true,
-      securityLevel:'loose',
-    };
-    mermaid.initialize(config);
-  </script>
-</body>
-```
--- a/docs/diagrams-and-syntax-and-examples/n00b-syntaxReference.md
+++ b/docs/diagrams-and-syntax-and-examples/n00b-syntaxReference.md
@ -1,33 +0,0 @@
---
-sort: 1
-title: Diagram syntax intro
---
-
-## Diagram syntax
-
-If you are new to mermaid, read the [Getting Started](../getting-started/n00b-gettingStarted.md) and [Overview](../overview/n00b-overview.md) sections, to learn the basics of mermaid.
-Video Tutorials can be found at the bottom of the Overview Section.
-
-This section is a list of diagram types supported by mermaid. Below is a list of links to articles that explain the syntax of the diagrams or charts that can be called.
-
-They also detail how diagrams can be defined, or described in the manner with which the diagram is to be rendered by the renderer.
-
-### The benefits of text based diagramming are its speed and modifiability. mermaid allows for easy maintenance and modification of diagrams. This means your diagrams will always be up to date and closely follow your code and improve your documentation.  
-
-## mermaid tag:
-These Diagram Definitions can be entered within a \<div class=mermaid> tag.
-like so :
-```html
-<div class="mermaid">
-     graph LR
-      A --- B
-      B-->C[fa:fa-ban forbidden]
-      B-->D(fa:fa-spinner);
-</div>
-```
-## mermaid Live Editor
-These definitions can also be entered into the [mermaid live editor](https://mermaid-js.github.io/mermaid-live-editor), to render them immediately.
-This would then offer
-
-
-{% include list.liquid %}
--- a/docs/diagrams-and-syntax-and-examples/pie.md
+++ b/docs/diagrams-and-syntax-and-examples/pie.md
@ -1,60 +0,0 @@
---
-sort: 10
-title: Pie Chart
---
-
-# Pie chart diagrams
-
-> A pie chart (or a circle chart) is a circular statistical graphic, which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice (and consequently its central angle and area), is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented. The earliest known pie chart is generally credited to William Playfair's Statistical Breviary of 1801
-Wikipedia
-
-Mermaid can render Pie Chart diagrams.
-
-```
-pie title Pets adopted by volunteers
-    "Dogs" : 386
-    "Cats" : 85
-    "Rats" : 15
-```
-```mermaid
-pie title Pets adopted by volunteers
-    "Dogs" : 386
-    "Cats" : 85
-    "Rats" : 35
-```
-
-
-## Syntax
-Drawing a pie chart is really simple in mermaid.
- Start with `pie` keyword to begin the diagram
- Followed by `title` keyword and its value in string to give a title to the pie-chart. This is ***OPTIONAL***
- Followed by dataSet
-    - `label` for a section in the pie diagram within `" "` quotes.
-    - Followed by `:` colon as separator
-    - Followed by `positive numeric value` (supported upto two decimal places)
-
-[pie]
-     [title] [titlevalue]  (OPTIONAL)  
-      "[datakey1]" : [dataValue1]  
-      "[datakey2]" : [dataValue2]  
-      "[datakey3]" : [dataValue3]  
-      .  
-      .
-
-## Example
-```
-pie
-    title Key elements in Product X
-    "Calcium" : 42.96
-    "Potassium" : 50.05
-    "Magnesium" : 10.01
-    "Iron" :  5
-```
-```mermaid
-pie
-title Key elements in Product X
-    "Calcium" : 42.96
-    "Potassium" : 50.05
-    "Magnesium" : 25.01
-    "Iron" :  15
- ```
--- a/docs/diagrams-and-syntax-and-examples/stateDiagram.md
+++ b/docs/diagrams-and-syntax-and-examples/stateDiagram.md
@ -1,356 +0,0 @@
---
-sort: 6
---
-
-# State diagrams
-
-> "A state diagram is a type of diagram used in computer science and related fields to describe the behavior of systems. State diagrams require that the system described is composed of a finite number of states; sometimes, this is indeed the case, while at other times this is a reasonable abstraction." Wikipedia
-
-Mermaid can render state diagrams. The syntax tries to be compliant with the syntax used in plantUml as this will make it easier for users to share diagrams between mermaid and plantUml.
-
-```
-stateDiagram-v2
-    [*] --> Still
-    Still --> [*]
-
-    Still --> Moving
-    Moving --> Still
-    Moving --> Crash
-    Crash --> [*]
-```
-
-```mermaid
-stateDiagram-v2
-    [*] --> Still
-    Still --> [*]
-
-    Still --> Moving
-    Moving --> Still
-    Moving --> Crash
-    Crash --> [*]
-```
-```mermaid
-stateDiagram
-    [*] --> Still
-    Still --> [*]
-
-    Still --> Moving
-    Moving --> Still
-    Moving --> Crash
-    Crash --> [*]
-```
-
-In state diagrams systems are described in terms of its states and how the systems state can change to another state via a transitions. The example diagram above shows three states **Still**, **Moving** and **Crash**. You start in the state of Still. From Still you can change the state to Moving. In Moving you can change the state either back to Still or to Crash. There is no transition from Still to Crash.
-
-## States
-
-A state can be declared in multiple ways. The simplest way is to define a state id as a description.
-
-```markdown
-stateDiagram-v2
-    s1
-```
-
-```mermaid
-stateDiagram-v2
-    s1
-```
-
-Another way is by using the state keyword with a description as per below:
-
-```markdown
-stateDiagram-v2
-    state "This is a state description" as s2
-```
-
-```mermaid
-stateDiagram-v2
-    state "This is a state description" as s2
-```
-
-Another way to define a state with a description is to define the state id followed by a colon and the description:
-
-```markdown
-stateDiagram-v2
-    s2 : This is a state description
-```
-
-```mermaid
-stateDiagram-v2
-    s2 : This is a state description
-```
-
-## Transitions
-
-Transitions are path/edges when one state passes into another. This is represented using text arrow, "\-\-\>".
-
-When you define a transition between two states and the states are not already defined the undefined states are defined with the id from the transition. You can later add descriptions to states defined this way.
-
-```
-stateDiagram-v2
-    s1 --> s2
-```
-
-```mermaid
-stateDiagram-v2
-    s1 --> s2
-```
-
-It is possible to add text to a transition. To describe what it represents.
-
-```
-stateDiagram-v2
-    s1 --> s2: A transition
-```
-
-```mermaid
-stateDiagram-v2
-    s1 --> s2: A transition
-```
-
-## Start and End
-
-There are two special states indicating the start and stop of the diagram. These are written with the [\*] syntax and the direction of the transition to it defines it either as a start or a stop state.
-
-```
-stateDiagram-v2
-    [*] --> s1
-    s1 --> [*]
-```
-
-```mermaid
-stateDiagram-v2
-    [*] --> s1
-    s1 --> [*]
-```
-
-## Composite states
-
-In a real world use of state diagrams you often end up with diagrams that are multi-dimensional as one state can
-have several internal states. These are called composite states in this terminology.
-
-In order to define a composite state you need to use the state keyword followed by and id and the body of the composite state between \{\}. See the example below:
-
-```
-stateDiagram-v2
-    [*] --> First
-    state First {
-        [*] --> second
-        second --> [*]
-    }
-```
-
-```mermaid
-stateDiagram-v2
-    [*] --> First
-    state First {
-        [*] --> second
-        second --> [*]
-    }
-```
-
-You can do this in several layers:
-
-```
-stateDiagram-v2
-    [*] --> First
-
-    state First {
-        [*] --> Second
-
-        state Second {
-            [*] --> second
-            second --> Third
-
-            state Third {
-                [*] --> third
-                third --> [*]
-            }
-        }
-    }
-```
-
-```mermaid
-stateDiagram-v2
-    [*] --> First
-
-    state First {
-        [*] --> Second
-        state Second {
-            [*] --> second2
-            second2 --> Third
-
-            state Third {
-                [*] --> third
-                third --> [*]
-            }
-        }
-    }
-```
-
-You can also define transitions also between composite states:
-
-```
-stateDiagram-v2
-    [*] --> First
-    First --> Second
-    First --> Third
-
-    state First {
-        [*] --> fir
-        fir --> [*]
-    }
-    state Second {
-        [*] --> sec
-        sec --> [*]
-    }
-    state Third {
-        [*] --> thi
-        thi --> [*]
-    }
-```
-
-```mermaid
-stateDiagram-v2
-    [*] --> First
-    First --> Second
-    First --> Third
-
-    state First {
-        [*] --> fir
-        fir --> [*]
-    }
-    state Second {
-        [*] --> sec
-        sec --> [*]
-    }
-    state Third {
-        [*] --> thi
-        thi --> [*]
-    }
-```
-
-*You can not define transitions between internal states belonging to different composite states*
-
-## Forks
-
-It is possible to specify a fork in the diagram using &lt;&lt;fork&gt;&gt; &lt;&lt;join&gt;&gt;.
-
-```
-   stateDiagram-v2
-    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 --> [*]
-```
-
-```mermaid
-   stateDiagram-v2
-    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 --> [*]
-
-```
-
-## Notes
-
-Sometimes nothing says it better then a Post-it note. That is also the case in state diagrams.
-
-Here you can choose to put the note to the *right of* or to the *left of* a node.
-
-```
-    stateDiagram-v2
-        State1: The state with a note
-        note right of State1
-            Important information! You can write
-            notes.
-        end note
-        State1 --> State2
-        note left of State2 : This is the note to the left.
-```
-
-```mermaid
-    stateDiagram-v2
-    State1: The state with a note
-    note right of State1
-      Important information! You can write
-      notes.
-    end note
-    State1 --> State2
-    note left of State2 : This is the note to the left.
-
-```
-
-## Concurrency
-
-As in plantUml you can specify concurrency using the -- symbol.
-
-```
-stateDiagram-v2
-    [*] --> Active
-
-    state Active {
-        [*] --> NumLockOff
-        NumLockOff --> NumLockOn : EvNumLockPressed
-        NumLockOn --> NumLockOff : EvNumLockPressed
-        --
-        [*] --> CapsLockOff
-        CapsLockOff --> CapsLockOn : EvCapsLockPressed
-        CapsLockOn --> CapsLockOff : EvCapsLockPressed
-        --
-        [*] --> ScrollLockOff
-        ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
-        ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
-    }
-```
-
-```mermaid
-stateDiagram-v2
-    [*] --> Active
-
-    state Active {
-        [*] --> NumLockOff
-        NumLockOff --> NumLockOn : EvNumLockPressed
-        NumLockOn --> NumLockOff : EvNumLockPressed
-        --
-        [*] --> CapsLockOff
-        CapsLockOff --> CapsLockOn : EvCapsLockPressed
-        CapsLockOn --> CapsLockOff : EvCapsLockPressed
-        --
-        [*] --> ScrollLockOff
-        ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
-        ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
-    }
-```
-
-## Comments
-
-Comments can be entered within a state diagram chart, which will be ignored by the parser.  Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
-
-```
-stateDiagram-v2
-    [*] --> Still
-    Still --> [*]
-%% this is a comment
-    Still --> Moving
-    Moving --> Still %% another comment
-    Moving --> Crash
-    Crash --> [*]
-```
-
-## Styling
-
-Styling of the a state diagram is done by defining a number of css classes.  During rendering these classes are extracted from the file located at src/themes/state.scss
--- a/docs/diagrams-and-syntax-and-examples/user-journey.md
+++ b/docs/diagrams-and-syntax-and-examples/user-journey.md
@ -1,37 +0,0 @@
---
-sort: 8
---
-
-# User Journey Diagram
-
-> User journeys describe at a high level of detail exactly what steps different users take to complete a specific task within a system, application or website. This technique shows the current (as-is) user workflow, and reveals areas of improvement for the to-be workflow. (Wikipedia)
-
-Mermaid can render user journey diagrams:
-
-```markdown
-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
-```
-```mermaid
-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
-```
-
-Each user journey is split into sections, these describe the part of the task
-the user is trying to complete.
-
-Tasks syntax is `Task name: <score>: <comma separated list of actors>`
--- a/docs/flowchart.md
+++ b/docs/flowchart.md
@ -4,7 +4,7 @@

 All Flowcharts are composed of **nodes**, the geometric shapes and **edges**, the arrows or lines. The mermaid code defines the way that these **nodes** and **edges** are made and interact.

-It can also accomodate different arrow types, multi directional arrows, and linking to and from subgraphs.
+It can also accommodate different arrow types, multi directional arrows, and linking to and from subgraphs.

 > **Important note**: Do not type the word "end" as a Flowchart node. Capitalize all or any one the letters to keep the flowchart from breaking, i.e, "End" or "END". Or you can apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897).**
 Node
--- a/docs/getting-started/8.6.0_docs.md
+++ b/docs/getting-started/8.6.0_docs.md
@ -1,217 +0,0 @@
---
-sort: 4
-title: Directives
---
-
-# Version 8.6.0 Changes
-
-## [New Mermaid Live-Editor Beta](https://mermaid-js.github.io/docs/mermaid-live-editor-beta/#/edit/eyJjb2RlIjoiJSV7aW5pdDoge1widGhlbWVcIjogXCJmb3Jlc3RcIiwgXCJsb2dMZXZlbFwiOiAxIH19JSVcbmdyYXBoIFREXG4gIEFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgQyAtLT58T25lfCBEW0xhcHRvcF1cbiAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl1cblx0XHQiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGFyayJ9fQ)
-
-## [CDN](https://unpkg.com/mermaid/)
-
-With version 8.6.0 comes the release of directives for mermaid, a new system for modifying configurations, with the aim of establishing centralized, sane defaults and simple implementation.
-
-`directives` allow for a diagram specific overriding of `config`, as it has been discussed in [Configurations](./Setup.md).
-This allows site users to input modifications to `config` alongside diagram definitions, when creating diagrams on a private webpage that supports mermaid.
-
-**A likely application for this is in the creation of diagrams/charts inside company/organizational webpages, that rely on mermaid for diagram and chart rendering.**
-
-the `init` directive is the main method of configuration for Site and Current Levels.
-
-The three levels of are Configuration, Global, Site and Current.
-
-| Level of Configuration | Description |
-| --- | --- |
-| Global Configuration| Default Mermaid Configurations|
-| Site Configuration| Configurations made by site owner|
-| Current Configuration| Configurations made by Implementors|
-
-
-# Limits to Modifying Configurations
-**secure Array**
-
-| Parameter | Description |Type | Required | Values|
-| --- | --- | --- | --- | --- |
-| secure | Array of parameters excluded from init directive| Array | Required | Any parameters|
-
-The modifiable parts of the Configuration are limited by the secure array, which is an array of immutable parameters, this array can be expanded by site owners.
-
-**Notes**: secure arrays work like nesting dolls, with the Global Configurations’ secure array being the default and immutable list of immutable parameters, or the smallest doll, to which site owners may add to, but implementors may not modify it.
-
-# Secure Arrays
-
-Site owners can add to the **secure** array using this command:
-mermaidAPI.initialize( { startOnLoad: true, secure: ['parameter1', 'parameter2'] } );
-
-default values for the `secure array` consists of: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']. These default values are immutable.
-
-Implementors can only modify configurations using directives, but cannot change the `secure` array.
-
-# Modifying Configurations and directives:
-The Two types of directives: are `init` or `initialize` and `wrap`.
-
-```note
-All directives are enclosed in `%%{ }%%.`
-```
-
-Older versions of mermaid will not parse directives because `%%` will comment out the directive. This makes the update backward compatible.
-
-# Init
-`init`, or `initialize`: the init or initialize directive gives the user the ability to overwrite and change the values for configuration parameters, with respect to the secure array that is in effect.
-
-| Parameter | Description |Type | Required | Values|
-| --- | --- | --- | --- | --- |
-| init | modifies configurations| Directive| Optional | Any parameters not included in the secure array|
-
-
-```note
-init would be an argument-directive: `%%{init: { **insert argument here**}}%%`
-
-The json object that is passed as {**argument** } must be valid, quoted json or it will be ignored.
-    **for example**:
-
-`%%{init: {"theme": default, "logLevel": 1 }}%%`
-
-Configurations that are passed through init cannot change the parameters in secure arrays of higher levels. In the event of a conflict, mermaid will give priority to secure arrays and parse the request, without changing the values of the parameters in conflict.
-
-When deployed within code, init is called before the graph/diagram description.
-```
-
-**for example**:
-```
-%%{init: {"theme": "default", "logLevel": 1 }}%%
- graph LR
-  a-->b
-  b-->c
-  c-->d
-  d-->e
-  e-->f
-  f-->g
-  g-->
-```
-# Wrap
-
-| Parameter | Description |Type | Required | Values|
-| --- | --- | --- | --- | --- |
-| wrap | a callable text-wrap function| Directive| Optional | %%{wrap}%%|
-
-```note
-Wrap is a function that is currently only deployable for sequence diagrams.
-
-wrap respects manually added <br\> so if the user wants to break up their text, they have full control over those breaks by adding their own <br\> tags.
-
-It is a non-argument directive and can be executed thusly:
-
-`%%{wrap}%%` .
-```
-
-**an example of text wrapping in a sequence diagram**:
-
-![Image showing wrapped text](../assets/img/wrapped%20text.png)
-
-
-# Resetting Configurations:
-There are two more functions in the mermaidAPI that can be called by site owners: **reset** and **globalReset**.
-
-**reset**: resets the configuration to whatever the last configuration was. This can be done to undo more recent changes to the last mermaidAPI.initialize({...}) configuration.
-
-**globalReset** will reset both the current configuration AND the site configuration back to the global defaults.
-
-**Notes**:  both reset and globalReset are only available to site owners, as such implementors would have to edit their configs with init.
-
-# Additional Utils to mermaid
-•	**memoize**: simple caching for computationally expensive functions. It reduces the rendering time for computationally intensive diagrams by about 90%.
-
-•	**assignWithDepth** - this is an improvement on previous functions with config.js and Object.assign. The purpose of this function is to provide a sane mechanism for merging objects, similar to object.assign, but with depth.
-
-Example of **assignWithDepth**:
-
-![Image showing assignWithDepth](../assets/img/assignWithDepth.png)
-
-
-Example of **object.Assign**:
-
-![Image showing object.assign without depth](../assets/img/object.assign%20without%20depth.png)
-
-•	**calculateTextDimensions, calculateTextWidth,** and **calculateTextHeight** - for measuring text dimensions, width and height.
-
-**Notes**:For more information on usage, parameters, and return info for these new functions take a look at the jsdocs for them in the utils package.
-
-
-# New API Requests Introduced in Version 8.6.0
-
-## setSiteConfig
-
-| Function | Description         | Type    | Values             |Parameters|Returns|
-| --------- | ------------------- | ------- | ------------------ | ------------------ | ------------------ |
-| setSiteConfig|Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array|conf|siteConfig|
-
-```note
-Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset
-the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) will reset siteConfig and currentConfig
-to the defaultConfig
-Note: currentConfig is set in this function
-Default value: At default, will mirror Global Config
-```
-
-## getSiteConfig
-
-| Function | Description         | Type    |  Values             |
-| --------- | ------------------- | ------- |  ------------------ |
-| setSiteConfig|Returns the current siteConfig base configuration | Get Request | Returns Any Values  in siteConfig|
-
-```note
-Returns   any   values in siteConfig.
-```
-
-## setConfig
-
-| Function  | Description         | Type    | Values             |Parameters|Returns|
-| --------- | ------------------- | ------- | ------------------ |----------|-------|
-| setSiteConfig|Sets the siteConfig to desired values | Put Request| Any Values, those in secure array|conf|currentConfig merged with the sanitized conf|
-
-```note
-Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any
-values found in conf with key found in siteConfig.secure will be replaced with the corresponding
-siteConfig value.
-```
-
-## getConfig
-
-| Function  | Description         | Type    | Return Values            |
-| --------- | ------------------- | ------- | ------------------ |
-| getConfig |Obtains the currentConfig | Get Request | Any Values from currentConfig|
-
-
-```note
-Returns any values in currentConfig.
-```
-
-## sanitize
-
-| Function  | Description         | Type    | Values             |
-| --------- | ------------------- | ------- | ------------------ |
-| sanitize  |Sets the siteConfig to desired values. | Put Request(?) |None|
-
-```note
-modifies options in-place
-Ensures options parameter does not attempt to override siteConfig secure keys.
-```
-
-## reset
-
-| Function | Description         | Type    | Required | Values             |Parameter|
-| --------- | -------------------| ------- | -------- | ------------------ |---------|
-| reset|Resets currentConfig to conf| Put Request | Required | None| conf|
-
-## 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|
-
-```note
-default: current siteConfig  (optional, default `getSiteConfig()`)
-```
-
-## For more information, read [Setup](Setup.md).
--- a/docs/getting-started/README.md
+++ b/docs/getting-started/README.md
@ -1,6 +0,0 @@
---
-sort: 2
---
-
-# Getting Started
-{% include list.liquid %}
--- a/docs/getting-started/Setup.md
+++ b/docs/getting-started/Setup.md
@ -1,208 +0,0 @@
---
-sort: 3
-title: Configurations
---
-
-<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
-
-## mermaidAPI
-
-This is the api to be used when optionally handling the integration with the web page, instead of using the default integration provided by mermaid.js.
-
-The core of this api is the [**render**][1] function which, given a graph
-definition as text, renders the graph/diagram and returns an svg element for the graph.
-
-It is is then up to the user of the API to make use of the svg, either insert it somewhere in the page or do something completely different.
-
-In addition to the render function, a number of behavioral configuration options are available.
-
-## setSiteConfig
-
-## setSiteConfig
-
-| Function      | Description                           | Type        | Values                                  |
-| ------------- | ------------------------------------- | ----------- | --------------------------------------- |
-| setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array |
-
-**Notes:**
-Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset
-the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) will reset siteConfig and currentConfig
-to the defaultConfig
-Note: currentConfig is set in this function
-\*Default value: At default, will mirror Global Config\*\*
-
-### Parameters
-
-   `conf`  the base currentConfig to use as siteConfig
-
-Returns **any** the siteConfig
-
-## getSiteConfig
-
-## getSiteConfig
-
-| Function      | Description                                       | Type        | Values                            |
-| ------------- | ------------------------------------------------- | ----------- | --------------------------------- |
-| setSiteConfig | Returns the current siteConfig base configuration | Get Request | Returns Any Values  in siteConfig |
-
-**Notes**:
-Returns **any** values in siteConfig.
-
-Returns **any** 
-
-## setConfig
-
-## setConfig
-
-| Function      | Description                           | Type        | Values                                  |
-| ------------- | ------------------------------------- | ----------- | --------------------------------------- |
-| setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array |
-
-**Notes**:
-Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any
-values found in conf with key found in siteConfig.secure will be replaced with the corresponding
-siteConfig value.
-
-### Parameters
-
-   `conf`  the potential currentConfig
-
-Returns **any** the currentConfig merged with the sanitized conf
-
-## getConfig
-
-## getConfig
-
-| Function  | Description               | Type        | Return Values                 |
-| --------- | ------------------------- | ----------- | ----------------------------- |
-| getConfig | Obtains the currentConfig | Get Request | Any Values from currentConfig |
-
-**Notes**:
-Returns **any** the currentConfig
-
-Returns **any** the currentConfig
-
-## sanitize
-
-## sanitize
-
-| Function | Description                            | Type        | Values |
-| -------- | -------------------------------------- | ----------- | ------ |
-| sanitize | Sets the siteConfig to desired values. | Put Request | None   |
-
-Ensures options parameter does not attempt to override siteConfig secure keys
-Note: modifies options in-place
-
-### Parameters
-
-   `options`  the potential setConfig parameter
-
-## reset
-
-## reset
-
-| Function | Description                  | Type        | Required | Values |
-| -------- | ---------------------------- | ----------- | -------- | ------ |
-| reset    | Resets currentConfig to conf | Put Request | Required | None   |
-
-| 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()`)
-
-### Parameters
-
-   `conf`  the base currentConfig to reset to (default: current siteConfig ) (optional, default `getSiteConfig()`)
-
-## render
-
-Function that renders an svg with a graph from a chart definition. Usage example below.
-
-```js
-mermaidAPI.initialize({
-     startOnLoad:true
- });
- $(function(){
-     const graphDefinition = 'graph TB\na-->b';
-     const cb = function(svgGraph){
-         console.log(svgGraph);
-     };
-     mermaidAPI.render('id1',graphDefinition,cb);
- });
-```
-
-### Parameters
-
-   `id`  the id of the element to be rendered
-   `_txt`  the graph definition
-   `cb`  callback which is called after rendering is finished with the svg code as inparam.
-   `container`  selector to element in which a div with the graph temporarily will be inserted. In one is
-    provided a hidden div will be inserted in the body of the page instead. The element will be removed when rendering is
-    completed.
-
-## 
-
-## mermaidAPI configuration defaults
-
-```html
-<script>
-  var config = {
-    theme:'default',
-    logLevel:'fatal',
-    securityLevel:'strict',
-    startOnLoad:true,
-    arrowMarkerAbsolute:false,
-
-    er:{
-      diagramPadding:20,
-      layoutDirection:'TB',
-      minEntityWidth:100,
-      minEntityHeight:75,
-      entityPadding:15,
-      stroke:'gray',
-      fill:'honeydew',
-      fontSize:12,
-      useMaxWidth:true,
-    },
-    flowchart:{
-      diagramPadding:8,
-      htmlLabels:true,
-      curve:'linear',
-    },
-    sequence:{
-      diagramMarginX:50,
-      diagramMarginY:10,
-      actorMargin:50,
-      width:150,
-      height:65,
-      boxMargin:10,
-      boxTextMargin:5,
-      noteMargin:10,
-      messageMargin:35,
-      messageAlign:'center',
-      mirrorActors:true,
-      bottomMarginAdj:1,
-      useMaxWidth:true,
-      rightAngles:false,
-      showSequenceNumbers:false,
-    },
-    gantt:{
-      titleTopMargin:25,
-      barHeight:20,
-      barGap:4,
-      topPadding:50,
-      leftPadding:75,
-      gridLineStartPadding:35,
-      fontSize:11,
-      fontFamily:'"Open-Sans", "sans-serif"',
-      numberSectionStyles:4,
-      axisFormat:'%Y-%m-%d',
-    }
-  };
-  mermaid.initialize(config);
-</script>
-```
-
-[1]: Setup.md?id=render
--- a/docs/getting-started/Tutorials.md
+++ b/docs/getting-started/Tutorials.md
@ -1,34 +0,0 @@
-# Tutorials
-
-This is  list of publicly available Tutorials for using Mermaid.JS . This is intended as a basic introduction for the use of the Live Editor for generating diagrams, and deploying Mermaid.JS through HTML.  
-
-For most purposes, you can use the [Live Editor](https://mermaid-js.github.io/mermaid-live-editor), to quickly and easily render a diagram. 
-
-
-## Live-Editor Tutorials
-The definitions that can be generated the Live-Editor are also backwards-compatible as of version 8.7.0.
-
-[GitLab Unfiltered: How to Create Mermaid Diagrams](https://www.youtube.com/watch?v=SQ9QmuTHuSI&t=438s)
-
-[GitLab Unfiltered: Emilie adds a mermaid diagram to the handbook](https://www.youtube.com/watch?v=5RQqht3NNSE)
-
-[World of Zero: I Learn How To Build Flowcharts and Signal Diagram's in Mermaid.JS](https://www.youtube.com/watch?v=7_2IroEs6Is&t=207s)
-
-[Eddie Jaoude: Can you code your diagrams?](https://www.youtube.com/watch?v=9HZzKkAqrX8)
-
-
-## Mermaid with HTML:
-Examples are provided in [Gettting Started](n00b-gettingStarted.md)
-
-**CodePen Examples:**
-
-https://codepen.io/CarlBoneri/pen/BQwZzq
-
-https://codepen.io/tdkn/pen/vZxQzd
-
-https://codepen.io/janzeteachesit/pen/OWWZKN
-
-
-## Mermaid with Text Area:
-
-https://codepen.io/Ryuno-Ki/pen/LNxwgR
--- a/docs/getting-started/mermaidCLI.md
+++ b/docs/getting-started/mermaidCLI.md
@ -1,7 +0,0 @@
---
-sort: 6
---
-
-# mermaid CLI
-
-mermaid CLI has been moved to [mermaid-cli](https://github.com/mermaid-js/mermaid-cli). Please read its documentation instead.
--- a/docs/getting-started/n00b-advanced.md
+++ b/docs/getting-started/n00b-advanced.md
@ -1,26 +0,0 @@
---
-sort: 7
-title: Advanced usage
---
-
-# Advanced n00b mermaid (Coming soon..)
-
-## splitting mermaid code from html
-A more condensed html code can be achieved by embedding the mermaid code in its own .js file, which is referenced like so:
-
-```
-stuff stuff
-  </div>
-  </body>
-</html>
-```
-The actual mermaid file could for example look like this:
-
-```
-mermaid content...
-```
---
-
-## mermaid configuration options
-
-...
--- a/docs/getting-started/n00b-gettingStarted.md
+++ b/docs/getting-started/n00b-gettingStarted.md
@ -1,246 +0,0 @@
---
-sort: 1
-title: Getting started - easier
---
-
-# A basic mermaid User-Guide for Beginners
-
-Creating diagrams and charts using mermaid code is simple.
-The code is turned into a diagram in the web page with the use of a mermaid renderer.
-
-The mermaid renderer is a piece of javascript that parses mermaid definitions, when called.
-This then renders a diagram based on that code in SVG, alternatively it
-
-Most web browsers, such as Firefox, Chrome and Safari, can render mermaid, Internet Explorer however cannot.
-
-## For beginners, there are four relatively easy ways you can use mermaid:
-1. Using the mermaid [live editor](https://mermaid-js.github.io/mermaid-live-editor/). For some popular video tutorials on the live editor go to [Overview](../overview/n00b-overview.md).
-2. Using one of the many [mermaid plugins](../overview/integrations.md).
-3. Hosting mermaid on a webpage, with an absolute link.
-4. Downloading mermaid and hosting it on your Web Page.
-
-**Notes**: More in depth information can be found on [Usage](./usage.md).
-
-# Following any of these examples, you can get started with creating your own diagrams using mermaid code.
-
-## 1. The mermaid live editor:
-
- A great way to get started with mermaid is to visit [The mermaid live editor](https://mermaidjs.github.io/mermaid-live-editor).
-
-In the `Code` section one can write or edit raw mermaid code, and instantly `Preview` the rendered result on the panel beside it.
-
-**This is a great way to learn how to define a mermaid diagram.**
-
-For some popular video tutorials on the live editor go to [Overview](../overview/n00b-overview.md).
-
-![Flowchart](../assets/img/n00b-liveEditor.png)
-
-**Notes:**
-
-You can also click "Copy Markdown" to copy the markdown code for the diagram, that can then be pasted directly into your documentation.
-
-![Flowchart](../assets/img/liveEditorOptions.png)
-
-The `Mermaid configuration` is for controlling mermaid behaviour. An easy introduction to mermaid configuration is found in the [Advanced usage](n00b-advanced.md) section. A complete configuration reference cataloguing default values is found on the [mermaidAPI](Setup.md) page.
-
-
-## 2. Using mermaid plugins:
-
-Thanks to the growing popularity of mermaid, many plugins already exist which incorporate a mermaid renderer. An extensive list can be found [here](../overview/integrations.md).
-
-One example in the list is the [Atlassian Confluence mermaid plugin](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview)
-
-When the mermaid plugin is installed on a Confluence server, one can insert a mermaid object into any Confluence page.
-### Here is a step by step process for using the mermaid-Confluence plugin:
-
---
-
- In a Confluence page, Add Other macros.
-
-![Flowchart](../assets/img/n00b-Confluence1.png)
-
---
-
- Search for mermaid.
-
-![Flowchart](../assets/img/n00b-Confluence2.png)
-
---
-
- The mermaid object appears. Paste your mermaid code into it.
-
-![Flowchart](../assets/img/n00b-Confluence3.png)
-
---
-
- Save the page and the diagram appears.
-
-![Flowchart](../assets/img/n00b-Confluence4.png)
-
---
-## The following are two ways of hosting mermaid on a webpage.  
-**This is covered in greater detail in the [Usage section](usage.md)**
-
-## 3. Using the Mermaid API: The quick and dirty way of deploying mermaid
-
-This method can be used with any common web server. Apache, IIS, nginx, node express [...], you pick your favourite.
-
-We do not need to install anything on the server, apart from a program (like Notepad++) that can generate an html file, which is then deployed by a web browser (such as Firefox, Chrome, Safari, but not Internet Explorer).
-
-So if you want to really simplify things when testing this out, don't use a web server at all but just create an HTML file locally and drag it into your browser window. The browser will do the work of rendering the mermaid diagrams according to the descriptions you've given!
-
-### Note that all this is written in the html `<body>` section of the web page.
-
-When writing the html file, we give the web browser three instructions inside the html code:
-
-a. A reference for fetching the online mermaid renderer, which is written in Javascript.
-
-b. The mermaid code for the diagram we want to create.
-
-c. The `mermaid.initialize()` API call to start the rendering process.
-
-
-## This is what needs to go into the html file (and all of them are important), for the mermaidAPI to render the diagrams:
-
-
-
-### a. A reference to the address of the `mermaid.js` or the `mermaid.min.js` file has to be contained in a `<script src>` tag like so:
-
-```html
-<body>
-  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
-</body>
-```
-
-### b. The embedded mermaid diagram definition needs to be contained inside a `<div>` tag that signifies that it is a mermaid diagram:
-
-```html
-<body>
-  Here is a mermaid diagram:
-  <div class="mermaid">
-    graph TD
-    A[Client] --> B[Load Balancer]
-    B --> C[Server01]
-    B --> D[Server02]
-  </div>
-</body>
-```
-**Notes**: every mermaid chart/graph/diagram definition, has to have separate `<div>` tags.
-
-### c. The `mermaid.initialize()` API call
-
-`mermaid.initialize()` calls take all the definitions contained in `<div class="mermaid">` tags it can find in the html body and starts to render them one by one. It is called this way:
-
-```html
-<body>
-  <script>mermaid.initialize({startOnLoad:true});</script>
-</body>
-```
-**Notes**: It is good practice to keep the `mermaid.initialize()` API call right next the `mermaid.min.js` `script` tag.
-`startOnLoad` is a parameter that can optionally be changed to false, this would then prevent mermaid from immediately rendering upon loading.
-
-### If the three steps mentioned are followed you will end up with something like this:
-
-
-```html
-<html>
-  <body>
-    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
-    <script>mermaid.initialize({startOnLoad:true});</script>
-
-    Here is one mermaid diagram:
-    <div class="mermaid">
-      graph TD
-      A[Client] --> B[Load Balancer]
-      B --> C[Server1]
-      B --> D[Server2]
-    </div>
-
-    And here is another:
-    <div class="mermaid">
-      graph TD
-      A[Client] -->|tcp_123| B(Load Balancer)
-      B -->|tcp_456| C[Server1]
-      B -->|tcp_456| D[Server2]
-    </div>
-  </body>
-</html>
-```
-
-**Notes**: This has to be saved in an `HTML` file and opened with a browser.
-
---
-## 4. Calling mermaid from a relative link.
-
-This method is similar to 3, if only a little more involved. The difference may be very subtle even, but it offers its own advantages, mainly in speed.
-
-1. install node v10 or 12, which would have npm
-
-2. download yarn using npm by entering the command below:
-    npm install -g yarn
-
-3. After yarn installs, enter the following command:
-    yarn add mermaid
-
-4. After downloading mermaid, you can then open the mermaid file you’ve downloaded and go to the `dist` folder.
-
-5. Find the `mermaid.min.js` file,
-    a. select the file.
-    b. press the shift key and right click on it
-    c. select copy as path from the options.
-
-6. Paste it within the `script` tag as the `src`.
-```html
-<script src="Paste the mermaid.min.js file address here"></script>
-<script>mermaid.initialize({startOnLoad:true});</script>
-```
-7. It should look something like this
-```html
-<script src="C:\Users\myPC\mermaid\dist\mermaid.js"></script>
-<script>mermaid.initialize({startOnLoad:true});</script>
-```
-8. Add the graph and diagram definitions as you would in number 3.
-    a. be mindful of the `div` tags.
-
-9. Save, load/edit your HTML file to your liking.  
-
-
-**Note** placing the HTML file on the same folder the `mermaid` file you've downloaded is a good practice and allows you to shorten the address on the `src` section.
-
-**As seen here, in this full example:**
-```html
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-</head>
-<body>
-  <div class="mermaid">
-  graph LR
-      A --- B
-      B-->C[fa:fa-ban forbidden]
-      B-->D(fa:fa-spinner);
-  </div>
-  <div class="mermaid">
-     graph TD
-     A[Client] --> B[Load Balancer]
-     B --> C[Server1]
-     B --> D[Server2]
-  </div>
-  <script src="C:\Users\MyPC\mermaid\dist\mermaid.js"></script>
-  <script>mermaid.initialize({startOnLoad:true});</script>
-</body>
-</html>
-```
-
-
-
-**Three additional comments from Knut Sveidqvist, creator of mermaid:**
- In early versions of mermaid, the `<script src>` tag was invoked in the `<head>` part of the web page. Nowadays we can place it directly in `<body>` as seen above. However, older parts of the documentation frequently reflects the previous way which still works.
-
- We initialize the mermaid rendering with `mermaid.initialize()` directly in the html code. In principle this could be done through placing `mermaid.initialize()` inside of `mermaid.min.js`. We would then eliminate the need for this explicit line in the html. However, there are use cases where we do want to separate the two steps. Sometimes we want full control over when we start looking for `<div>`tags inside the web page with `mermaid.initialize()`, for example when we think that all `<div>` tags may not have been loaded by the time `mermaid.min.js` runs.
-
- In the third method, `mermaid.min.js` is called using an absolute path. Even worse, the example includes the mermaid version number which of course will change as time goes by. However, the example makes it easy to understand what is going on - even though it is perhaps doomed in a way we do not want in a production environment. When going from testing mermaid out to getting serious with it, I would suggest one of the following approaches for calling `mermaid.min.js`:
-
-  1. If you do not enter a specific version, you automatically get the latest one.
-  2. If you really need a specific version, hard code it (this is rare but it happens).
-  3. If you need to know the current mermaid version, replace a mermaid code block with the word `info` and the version will be returned like [this](https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiaW5mb1xuXG4iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ==)
--- a/docs/getting-started/theming.md
+++ b/docs/getting-started/theming.md
@ -1,692 +0,0 @@
---
-sort: 5
-title: Theming
---
-
-# Version 8.7.0: Theme Configuration
-
-With Version 8.7.0 Mermaid comes out with a system for dynamic and integrated configuration of the diagram themes. The objective of this is to increase the customizability of mermaid and the ease of Styling, with the customization of themes through the `%%init%%` directive and `initialize` calls.
-
-Themes follow and build upon the Levels of Configuration and employ `directives` to modify and create custom configurations, as they were introduced in Version [8.6.0](./8.6.0_docs.md).
-
-**These Theming Configurations, similar to directives, will also be made applicable in the Live-Editor, to maximize customizability.
-
-## Site-wide Themes
-Site-wide themes are still declared via `initialize` by site owners.
-
-Example of `Initalize` call setting `theme` to `base`:
-```
-    mermaidAPI.initialize({
-        'securityLevel': 'loose', 'theme': 'base'
-    });
-```
-**Notes**: Only site owners can use the `mermaidAPI.initialize` call, to set values. Site-Users will have to use `%%init%%` to modify or create the theme for their diagrams.
-
-## Themes at the Local or Current Level
-When Generating a diagram using on a webpage that supports mermaid. It is also possible to override site-wide theme settings locally, for a specific diagram, using directives, as long as it is not prohibited by the `secure` array.
-
-
-```
-%%{init: {'theme':'base'}}%%
-  graph TD
-    a --> b
-```
-
-
-Here is an example of how `%%init%%` can set the theme to 'base', this assumes that `themeVariables` are set to default:
-
-```mermaid
-%%{init: {'theme':'base'}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-# Making a Custom Theme  with `themeVariables`
-
-The easiest way to make a custom theme is to start with the base theme, and just modify theme variables through `themeVariables`, via `%%init%%`.
-
-|   Parameter    |                            Description                             | Type  | Required |         Objects contained          |
-| -------------- | ------------------------------------------------------------------ | ----- | -------- | ---------------------------------- |
-| themeVariables | Array containing objects, modifiable with the `%%init%%` directive | Array | Required | primaryColor, lineColor, textColor |
-
-
-## Here is an example of overriding `primaryColor` through `themeVariables` and giving everything a different look, using `%%init%%`.
-
-```
-%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-```mermaid
-%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#00ff00'}}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-
-**Notes:
-Leaving it empty will set all variable values to default.
-
-## Color and Color Calculation:
-
-Color definitions have certain interactions in mermaid, this is in order to ensure visibility for diagrams. mermaid will adjust some variables automatically, when colors are changed in order to compensate and maintain readability.
-
-**The Default Value Column** to the right of the Variable column will denote the Variable paired/associated with the Variable on the left and the nature of this pairing or association. If it for instance says primaryColor it means that it gets primaryColor as default value. If it says "based on primaryColor" it means that it is calculated/ derived from primaryColor. This calculation can be primary color inversion, a change of hue, darkening or lightening by 10%, etc.
-
-You can create your own themes, by changing any of the given variables below. If you are using a dark background, set dark mode to true to adjust the colors. It is possible to override the calculations using the variable names below, with `%%init%%` if you wish to style it differently.
-
-
-## Theme Variables Reference Table
-
-```note
-Variables that are unique to some diagrams can be affected by changes in Theme Variables
-```
-
-|       Variable       |         Default/Base/Factor value          | Calc |                                                           Description                                                            |
-| -------------------- | ------------------------------ | ---- | -------------------------------------------------------------------------------------------------------------------------------- |
-| darkMode             | false                          |      | Boolean Value that dictates how to calculate colors. "true" will activate darkmode.                                                                                 |
-| background           | #f4f4f4                        |      | Used to calculate color for items that should either be background colored or contrasting to the background.                     |
-| primaryColor         | #fff4dd                        |      | Color to be used as background in nodes, other colors will be derived from this                                                  |
-| fontFamily           | "trebuchet ms", verdana, arial |      |                                                                                                                                  |
-| fontSize             | 16px                           |      |  Font Size, in pixels                                                                                                                                |
-| secondaryColor       | based on primaryColor          | *    |                                                                                                                                  |
-| tertiaryColor        | based on primaryColor          | *    |                                                                                                                                  |
-| primaryBorderColor   | based on primaryColor          | *    | Color to be used as border in nodes using primaryColor                                                                           |
-| primaryTextColor     | based on darkMode #ddd/#333    | *    | Color to be used as text color in nodes using primaryColor                                                                        |
-| secondaryBorderColor | based on secondaryColor        | *    | Color to be used as border in nodes using secondaryColor                                                                         |
-| secondaryTextColor   | based on secondaryColor        | *    | Color to be used as text color in nodes using secondaryColor                                                                      |
-| tertiaryBorderColor  | based on tertiaryColor         | *    | Color to be used as border in nodes using tertiaryColor                                                                          |
-| tertiaryTextColor    | based on tertiaryColor         | *    | Color to be used as text color in nodes using tertiaryColor                                                                       |
-| noteBkgColor         | #fff5ad                        |      | Color used as background in notes                                                                                                |
-| noteTextColor        | #333                           |      | Text color in note rectangles.                                                                                                        |
-| noteBorderColor      | based on noteBkgColor          | *    | Border color in note rectangles.                                                                                                      |
-| lineColor            | based on background            | *    |                                                                                                                                  |
-| textColor            | based on primaryTextColor      | *    | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in gantt diagram |
-| mainBkg              | based on primaryColor          | *    | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram  etc                                 |
-| errorBkgColor        | tertiaryColor                  | *    | Color for syntax error message                                                                                                   |
-| errorTextColor       | tertiaryTextColor              | *    | Color for syntax error message                                                                                                   |
-
-# What follows are Variables, specific to different diagrams and charts.
-
-## Some Theme Variables serve as, or affect the Default Values for Specific Diagram Variables, unless changed using `%%init%%` .
-
-## Flowchart
-
-|       Variable      |    Default/ Associated Value        | Calc |                                                           Description                                                            |
-| -------------------- | ------------------------------ | ---- | -------------------------------------------------------------------------------------------------------------------------------- |
-| nodeBorder           | primaryBorderColor             | *    | Node Border Color                                                                                                                                |
-| clusterBkg           | tertiaryColor                  | *    | Background in subgraphs                                                                                                          |
-| clusterBorder        | tertiaryBorderColor            | *    | Cluster Border Color                                                                                                                               |
-| defaultLinkColor     | lineColor                      | *    | Link Color                                                                                                                                  |
-| titleColor           | tertiaryTextColor              | *    |  Title Color                                                                                                                              |
-| edgeLabelBackground  | based on secondaryColor        | *    |                                                                                                                                  |
-| nodeTextColor        | primaryTextColor               | *    |  Color for text inside Nodes.                                                                                                                                |
-
-# sequence diagram
-
-|         name          |      Default value      | Calc | Description |
-| --------------------- | ----------------------- | ---- | ----------- |
-| actorBorder           | primaryBorderColor      | *    |   Actor Border Color          |
-| actorBkg              | mainBkg                 | *    | Actor Background Color         |
-| actorTextColor        | primaryTextColor        | *    |  Actor Text Color            |
-| actorLineColor        | grey                    | *    |   Actor Line Color           |
-| labelBoxBkgColor      | actorBkg                | *    |  Label Box Background Color            |
-| signalColor           | textColor               | *    |  Signal Color           |
-| signalTextColor       | textColor               | *    |  Signal Text Color           |
-| labelBoxBorderColor   | actorBorder             | *    |   Label Box Border Color          |
-| labelTextColor        | actorTextColor          | *    |   Label Text Color           |
-| loopTextColor         | actorTextColor          | *    |   Loop ext Color            |
-| activationBorderColor | based on secondaryColor | *    |    Activation Border Color         |
-| activationBkgColor    | secondaryColor          | *    |   Activation Background Color          |
-| sequenceNumberColor   | based on lineColor      | *    |    Sequence Number Color          |
-
-# state colors
-
-|     name      |  Default value   | Calc |                 Description                 |
-| ------------- | ---------------- | ---- | ------------------------------------------- |
-| labelColor    | primaryTextColor | *    |                                             |
-| altBackground | tertiaryColor    | *    | Used for background in deep composite states |
-
-# class colors
-
-|   name    | Default value | Calc |      Description       |
-| --------- | ------------- | ---- | ---------------------- |
-| classText | textColor     | *    | Color of Text in class diagrams |
-
-# User journey colors
-
-|   name    |      Default value       | Calc |               Description               |
-| --------- | ------------------------ | ---- | --------------------------------------- |
-| fillType0 | primaryColor             | *    | Fill for 1st section in journey diagram |
-| fillType1 | secondaryColor           | *    | Fill for 2nd section in journey diagram |
-| fillType2 | based on primaryColor    | *    | Fill for 3rd section in journey diagram |
-| fillType3 | based on  secondaryColor | *    | Fill for 4th section in journey diagram |
-| fillType4 | based on primaryColor    | *    | Fill for 5th section in journey diagram |
-| fillType5 | based on secondaryColor  | *    | Fill for 6th section in journey diagram |
-| fillType6 | based on primaryColor    | *    | Fill for 7th section in journey diagram |
-| fillType7 | based on secondaryColor  | *    | Fill for 8th section in journey diagram |
-
-**Notes: Values are meant to create an alternating look.
-
-
-# Here is an example of overriding `primaryColor` and giving everything a different look, using `%%init%%`.
-```
-%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-```mermaid
-
-%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-**This got a bit too dark and bit too colorful. With some easy steps this can be fixed:
-
-* Make the primary color a little lighter
-* set the tertiary color to a reddish shade as well
-* make the edge label background differ from the subgraph by setting the edgeLabelBackground
-
-
-```
-%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ffcccc', 'edgeLabelBackground':'#ffffee', 'tertiaryColor': '#fff0f0'}}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-```mermaid
-%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ffcccc', 'edgeLabelBackground':'#ffffee', 'tertiaryColor': '#fff0f0'}}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-The Theming Engine does not admit color codes and will only accept proper color values. Color Names is not supported so for instance, the color value 'red' will not work, but '#ff0000' will work.
-
-# Common theming activities
-
-## How to change the color of the arrows
-
-# Examples:
-
-When adjusting a theme it might be helpful to look at how your preferred theme goes with the diagrams, to evaluate whether everything is visible and looks good.
-In the following examples, the directive `init` is used, with the `theme` being declared as `base`. For more information on using directives, read the documentation for [Version 8.6.0](/8.6.0_docs.md)
-
-### Flowchart
-```
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-```mermaid
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-### Flowchart (beta)
-```
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-        flowchart TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[Another]
-          C ==>|One| D[Laptop]
-          C x--x|Two| E[iPhone]
-          C o--o|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-```mermaid
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-        flowchart TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[Another]
-          C ==>|One| D[Laptop]
-          C x--x|Two| E[iPhone]
-          C o--o|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-### Sequence diagram
-```
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-        sequenceDiagram
-          autonumber
-          par Action 1
-            Alice->>John: Hello John, how are you?
-          and Action 2
-            Alice->>Bob: Hello Bob, how are you?
-          end
-          Alice->>+John: Hello John, how are you?
-          Alice->>+John: John, can you hear me?
-          John-->>-Alice: Hi Alice, I can hear you!
-          Note right of John: John is perceptive
-          John-->>-Alice: I feel great!
-              loop Every minute
-                John-->Alice: Great!
-            end
-```
-```mermaid
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-        sequenceDiagram
-          autonumber
-          par Action 1
-            Alice->>John: Hello John, how are you?
-          and Action 2
-            Alice->>Bob: Hello Bob, how are you?
-          end
-          Alice->>+John: Hello John, how are you?
-          Alice->>+John: John, can you hear me?
-          John-->>-Alice: Hi Alice, I can hear you!
-          Note right of John: John is perceptive
-          John-->>-Alice: I feel great!
-              loop Every minute
-                John-->Alice: Great!
-            end
-```
-
-### Class diagram
-```
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-
-classDiagram
-	Animal "1" <|-- Duck
-	Animal <|-- Fish
-	Animal <--o 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()
-	}
-```
-```mermaid
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-
-classDiagram
-	Animal "1" <|-- Duck
-	Animal <|-- Fish
-	Animal <--o 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()
-	}
-
-```
-
-### Gantt
-```
-gantt
-       dateFormat                :YYYY-MM-DD
-       title                     Adding GANTT diagram functionality to mermaid
-       excludes                  :excludes the named dates/days from being included in a charted task..
-       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
-
-       section Critical tasks
-       Completed task in the critical line :crit, done, 2014-01-06,24h
-       Implement parser and jison          :crit, done, after des1, 2d
-       Create tests for parser             :crit, active, 3d
-       Future task in critical line        :crit, 5d
-       Create tests for renderer           :2d
-       Add to mermaid                      :1d
-
-       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 Last section
-       Describe gantt syntax               :after doc1, 3d
-       Add gantt diagram to demo page      :20h
-       Add another diagram to demo page    :48h
-```
-
-```mermaid
-gantt
-       dateFormat                :YYYY-MM-DD
-       title                     Adding GANTT diagram functionality to mermaid
-       excludes                  :excludes the named dates/days from being included in a charted task..
-       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
-
-       section Critical tasks
-       Completed task in the critical line :crit, done, 2014-01-06,24h
-       Implement parser and jison          :crit, done, after des1, 2d
-       Create tests for parser             :crit, active, 3d
-       Future task in critical line        :crit, 5d
-       Create tests for renderer           :2d
-       Add to mermaid                      :1d
-
-       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 Last section
-       Describe gantt syntax               :after doc1, 3d
-       Add gantt diagram to demo page      :20h
-       Add another diagram to demo page    :48h
-```
-
-### State diagram
-```
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-      stateDiagram
-        [*] --> Active
-
-        state Active {
-            [*] --> NumLockOff
-            NumLockOff --> NumLockOn : EvNumLockPressed
-            NumLockOn --> NumLockOff : EvNumLockPressed
-            --
-            [*] --> CapsLockOff
-            CapsLockOff --> CapsLockOn : EvCapsLockPressed
-            CapsLockOn --> CapsLockOff : EvCapsLockPressed
-            --
-            [*] --> ScrollLockOff
-            ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
-            ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
-        }
-        state SomethingElse {
-          A --> B
-          B --> A
-        }
-
-        Active --> SomethingElse
-        note right of SomethingElse : This is the note to the right.
-
-        SomethingElse --> [*]
-
-```
-```mermaid
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-      stateDiagram
-        [*] --> Active
-
-        state Active {
-            [*] --> NumLockOff
-            NumLockOff --> NumLockOn : EvNumLockPressed
-            NumLockOn --> NumLockOff : EvNumLockPressed
-            --
-            [*] --> CapsLockOff
-            CapsLockOff --> CapsLockOn : EvCapsLockPressed
-            CapsLockOn --> CapsLockOff : EvCapsLockPressed
-            --
-            [*] --> ScrollLockOff
-            ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
-            ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
-        }
-        state SomethingElse {
-          A --> B
-          B --> A
-        }
-
-        Active --> SomethingElse
-        note right of SomethingElse : This is the note to the right.
-
-        SomethingElse --> [*]
-
-```
-
-### State diagram (beta)
-
-```
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-stateDiagram-v2
-        [*] --> Active
-
-        state Active {
-            [*] --> NumLockOff
-            NumLockOff --> NumLockOn : EvNumLockPressed
-            NumLockOn --> NumLockOff : EvNumLockPressed
-            --
-            [*] --> CapsLockOff
-            CapsLockOff --> CapsLockOn : EvCapsLockPressed
-            CapsLockOn --> CapsLockOff : EvCapsLockPressed
-            --
-            [*] --> ScrollLockOff
-            ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
-            ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
-        }
-        state SomethingElse {
-          A --> B
-          B --> A
-        }
-
-        Active --> SomethingElse2
-        note right of SomethingElse2 : This is the note to the right.
-
-        SomethingElse2 --> [*]
-```
-```mermaid
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-stateDiagram-v2
-        [*] --> Active
-
-        state Active {
-            [*] --> NumLockOff
-            NumLockOff --> NumLockOn : EvNumLockPressed
-            NumLockOn --> NumLockOff : EvNumLockPressed
-            --
-            [*] --> CapsLockOff
-            CapsLockOff --> CapsLockOn : EvCapsLockPressed
-            CapsLockOn --> CapsLockOff : EvCapsLockPressed
-            --
-            [*] --> ScrollLockOff
-            ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
-            ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
-        }
-        state SomethingElse {
-          A --> B
-          B --> A
-        }
-
-        Active --> SomethingElse2
-        note right of SomethingElse2 : This is the note to the right.
-
-        SomethingElse2 --> [*]
-```
-
-### Entity Relations diagram
-
-```
-      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"
-```
-```mermaid
-      erDiagram
-        CUSTOMER }|..|{ DELIVERY-ADDRESS : has
-        CUSTOMER ||--o{ ORDER : places
-        CUSTOMER ||--o{ INVOICE : "liable for"
-        DELIVERY-ADDRESS ||--o{ ORDER : receives
-        INVOICE ||--|{ ORDER : covers
-        ORDER ||--|{ ORDER-ITEM : includes
-        PRODUCT-CATEGORY ||--|{ PRODUCT : contains
-        PRODUCT ||--o{ ORDER-ITEM : "ordered in"
-```
-
-### User journey diagram
-```
-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
-```
-
-```mermaid
-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
-```
--- a/docs/getting-started/usage.md
+++ b/docs/getting-started/usage.md
@ -1,415 +0,0 @@
---
-sort: 2
-title: API-Usage
---
-
-# Usage
-
-mermaid is a javascript tool that makes use of a markdown based syntax to render customizable diagrams and charts, for greater speed and ease.
-
-mermaid was made to help Documentation catch up with Development, in quickly changing projects.
-
-### CDN
-
-[https://unpkg.com/mermaid/](https://unpkg.com/mermaid/)
-
-Please note that you can switch versions through the dropdown box at the top right.
-
-## Using mermaid
-
-For the majority of beginners, using the live editor or supporting mermaid on a webpage would cover their uses for mermaid.
-
-## Installing and Hosting mermaid on a webpage
-
-### Using the npm package
-
-```
-1.You will need to install node v10 or 12, which would have npm.
-
-2. download yarn using npm.
-
-3. enter the following command:
-    yarn add mermaid
-
-4. At this point, you can add mermaid as a dev dependency using this command:
-    yarn add --dev mermaid
-
-5. Alternatively, you can also deploy mermaid using the script tag in an HTML file with mermaid diagram descriptions.
-    as is shown in the example below
-```
-
-## Hosting mermaid on a web page.
-
-```note
-This topic explored in greater depth in the [User Guide for Beginners](./n00b-gettingStarted.md)
-```
-
-The easiest way to integrate mermaid on a web page requires three elements:
-
-1. Inclusion of the mermaid address in the html page using a `script` tag, in the `src` section.Example:
-    ```html
-    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
-    ```
-
-2. The `mermaidAPI` call, in a separate `script` tag. Example:
-    ```html
-    <script>mermaid.initialize({startOnLoad:true});</script>
-    ```
-
-3. A graph definition, inside `<div>` tags labeled `class=mermaid`. Example:
-    ```html
-    <div class="mermaid">
-         graph LR
-          A --- B
-          B-->C[fa:fa-ban forbidden]
-          B-->D(fa:fa-spinner);
-    </div>
-    ```
-
-**If these things are in place mermaid starts at the page load event and when fired (when the page has loaded) it will
-locate the graph definitions inside the `div` tags with `class="mermaid"` on the page and transform them to svg charts or diagrams.**
-
-## Simple full example:
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-</head>
-<body>
-  <div class="mermaid">
-  graph LR
-      A --- B
-      B-->C[fa:fa-ban forbidden]
-      B-->D(fa:fa-spinner);
-  </div>
- <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
- <script>mermaid.initialize({startOnLoad:true});</script>
-</body>
-</html>
-```
-
-## Notes:
-An id attribute is also added to mermaid tags without one.
-
-Mermaid can load multiple diagrams, in the same page.
-
-### Try it out, save this code as HTML and load it using any browser.(Except Internet Explorer, please don't use Internet Explorer.)
-
-
-## To enable click event and tags in nodes
-
- A `securityLevel` configuration has to first be cleared, `securityLevel` sets the level of trust for the parsed diagrams and limits click functionality. This was introduce in version 8.2 as a security improvement, aimed at preventing malicious use.
-
- **It is the site owner's responsibility to discriminate between trustworthy and untrustworthy user-bases and we encourage the use of discretion.**
-
-## securityLevel
-
-| Parameter     | Description                       | Type   | Required | Values                    |
-| ------------- | --------------------------------- | ------ | -------- | ------------------------- |
-| securitylevel | Level of trust for parsed diagram | String | Required | Strict, Loose, antiscript |
-
-\*\*Notes:
-
-   **strict**: (**default**) tags in text are encoded, click functionality is disabeled
-   **loose**: tags in text are allowed, click functionality is enabled
-   **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled
-
-
-```note
-This changes the default behaviour of mermaid so that after upgrade to 8.2, if the `securityLevel` is not configured, tags in flowcharts are encoded as tags and clicking is prohibited.
-```
-
-**If you are taking responsibility for the diagram source security you can set the `securityLevel` to a value of your choosing . By doing this clicks and tags are allowed.**
-
-## To change `securityLevel` with `mermaidAPI.initialize`:
-
-```javascript
-mermaidAPI.initialize({
-    securityLevel: 'loose'
-});
-```
-
-
-### Labels out of bounds
-
-If you use dynamically loaded fonts that are loaded through CSS, such as Google fonts, mermaid should wait for the
-whole page to load (dom + assets, particularly the fonts file).
-
-```javascript
-$(document).load(function() {
-    mermaid.initialize();
-});
-```
-
-or
-
-```javascript
-$(document).ready(function() {
-    mermaid.initialize();
-});
-```
-
-Not doing so will most likely result in mermaid rendering graphs that have labels out of bounds. The default integration in mermaid uses the window.load event to start rendering.
-
-If your page has other fonts in its body those might be used instead of the mermaid font. Specifying the font in your styling is a workaround for this.
-
-```css
-div.mermaid {
-    font-family: 'trebuchet ms', verdana, arial;
-}
-```
-
-# This likely requires a `script.js` file, separate from the `HTML`.
-
-### Calling `mermaid.init`
-
-By default, `mermaid.init` will be called when the document is ready, finding all elements with
-`class="mermaid"`. If you are adding content after mermaid is loaded, or otherwise need
-finer-grained control of this behavior, you can call `init` yourself with:
-
- a configuration object
- some nodes, as
-  - a node
-  - an array-like of nodes
-  - or W3C selector that will find your nodes
-
-Example:
-
-```javascript
-mermaid.init({noteMargin: 10}, ".someOtherClass");
-```
-
-Or with no config object, and a jQuery selection:
-
-```javascript
-mermaid.init(undefined, $("#someId .yetAnotherClass"));
-```
-
-```warning
-This type of integration is deprecated. Instead the preferred way of handling more complex integration is to use the mermaidAPI instead.
-```
-
-## Usage with webpack
-
-mermaid fully supports webpack. Here is a [working demo](https://github.com/mermaidjs/mermaid-webpack-demo).
-
-
-## API usage
-
-The main idea of the API is to be able to call a render function with the graph definition as a string. The render function
-will render the graph and call a callback with the resulting svg code. With this approach it is up to the site creator to
-fetch the graph definition from the site (perhaps from a textarea), render it and place the graph somewhere in the site.
-
-The example below show an outline of how this could be used. The example just logs the resulting svg to the javascript console.
-
-```html
-<script src="mermaid.js"></script>
-
-<script>
-    mermaid.mermaidAPI.initialize({
-        startOnLoad:false
-    });
-    $(function(){
-        // Example of using the API
-        var element = document.querySelector("#graphDiv");
-
-        var insertSvg = function(svgCode, bindFunctions){
-            element.innerHTML = svgCode;
-        };
-
-        var graphDefinition = 'graph TB\na-->b';
-        var graph = mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
-    });
-</script>
-```
-
-
-### Binding events
-
-Sometimes the generated graph also has defined interactions like tooltip and click events. When using the API one must
-add those events after the graph has been inserted into the DOM.
-
-The example code below is an extract of what mermaid does when using the API. The example shows how it is possible to
-bind events to an svg when using the API for rendering.
-
-```javascript
-var insertSvg = function(svgCode, bindFunctions) {
-    element.innerHTML = svgCode;
-    if(typeof callback !== 'undefined'){
-        callback(id);
-    }
-    bindFunctions(element);
-};
-
-var id = 'theGraph';
-
-
-mermaidAPI.render(id,txt,insertSvg, element);
-```
-
-1. The graph is generated using the render call.
-2. After generation the render function calls the provided callback function, in this case it's called insertSvg.
-3. The callback function is called with two parameters, the svg code of the generated graph and a function. This function binds events to the svg **after** it is inserted into the DOM.
-4. Insert the svg code into the DOM for presentation.
-5. Call the binding function that binds the events.
-
-
-## Example of a marked renderer
-
-This is the renderer used for transforming the documentation from markdown to html with mermaid diagrams in the html.
-
-```javascript
-var renderer = new marked.Renderer();
-renderer.code = function (code, language) {
-    if(code.match(/^sequenceDiagram/)||code.match(/^graph/)){
-        return '<div class="mermaid">'+code+'</div>';
-    }
-    else{
-        return '<pre><code>'+code+'</code></pre>';
-    }
-};
-```
-
-Another example in coffeescript that also includes the mermaid script tag in the generated markup.
-
-```js
-marked = require 'marked'
-
-module.exports = (options) ->
-  hasMermaid = false
-  renderer = new marked.Renderer()
-  renderer.defaultCode = renderer.code
-  renderer.code = (code, language) ->
-    if language is 'mermaid'
-      html = ''
-      if not hasMermaid
-        hasMermaid = true
-        html += '<script src="'+options.mermaidPath+'"></script>'
-      html + '<div class="mermaid">'+code+'</div>'
-    else
-      @defaultCode(code, language)
-
-  renderer
-```
-
-
-## Advanced usage
-
-**Error handling**
-
-When the parser encounters invalid syntax the **mermaid.parseError** function is called. It is possible to override this
-function in order to handle the error in an application-specific way.
-
-**Parsing text without rendering**
-
-It is also possible to validate the syntax before rendering in order to streamline the user experience. The function
-**mermaid.parse(txt)** takes a text string as an argument and returns true if the text is syntactically correct and
-false if it is not. The parseError function will be called when the parse function returns false.
-
-The code-example below in meta code illustrates how this could work:
-
-```javascript
-mermaid.parseError = function(err,hash){
-    displayErrorInGui(err);
-};
-
-var textFieldUpdated = function(){
-    var textStr = getTextFromFormField('code');
-
-    if(mermaid.parse(textStr)){
-        reRender(textStr)
-    }
-};
-
-bindEventHandler('change', 'code', textFieldUpdated);
-```
-
-
-## Configuration
-
-Mermaid takes a number of options which lets you tweak the rendering of the diagrams. Currently there are three ways of
-setting the options in mermaid.
-
-1. Instantiation of the configuration using the initialize call
-2. *Using the global mermaid object* - deprecated
-3. *using the global mermaid_config object* - deprecated
-4. Instantiation of the configuration using the **mermaid.init** call
-
-The list above has two ways too many of doing this. Three are deprecated and will eventually be removed. The list of
-configuration objects are described [in the mermaidAPI documentation](Setup.md).
-
-
-## Using the `mermaidAPI.initialize`/`mermaid.initialize` call
-
-The future proof way of setting the configuration is by using the initialization call to mermaid or mermaidAPI depending
-on what kind of integration you use.
-
-```html
-<script src="../dist/mermaid.js"></script>
-<script>
-    var config = {
-        startOnLoad:true,
-        flowchart:{
-            useMaxWidth:false,
-            htmlLabels:true
-        }
-    };
-    mermaid.initialize(config);
-</script>
-```
-
-```tip
-This is the preferred way of configuring mermaid.
-```
-
-
-## Using the mermaid object
-
-Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this
-approach are:
-
-* mermaid.startOnLoad
-* mermaid.htmlLabels
-
-```js
-mermaid.startOnLoad = true;
-```
-
-```warning
-This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility.
-```
-
-## Using the mermaid_config
-
-It is possible to set some configuration via the mermaid object. The two parameters that are supported using this
-approach are:
-
-* mermaid_config.startOnLoad
-* mermaid_config.htmlLabels
-
-```javascript
-mermaid_config.startOnLoad = true;
-```
-
-```warning
-This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility.
-```
-
-## Using the mermaid.init call
-
-#
-Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this
-approach are:
-
-* mermaid_config.startOnLoad
-* mermaid_config.htmlLabels
-
-```
-mermaid_config.startOnLoad = true;
-```
-
-```warning
-This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility.
-```
--- a/docs/integrations.md
+++ b/docs/integrations.md
@ -8,17 +8,20 @@ They also serve as proof of concept, for the variety of things that can be built
 ## Productivity

 - [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) (**Native support**)
+- [Gitea](https://gitea.io) (**Native support**)
 - [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) (**Native support**)
 - [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) (**Native support**)
 - [Joplin](https://joplinapp.org) (**Native support**)
 - [Notion](https://notion.so) (**Native support**)
- [GitHub](https://github.com)
+- [GitHub](https://github.com) (**Native support**)
  - [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
  - [svg-generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
+  - [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) (**Native support**)
 - [GitBook](http://gitbook.com)
  - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
  - [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)
  - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
+- [LiveBook](https://livebook.dev) (**Native support**)
 - [Atlassian Products](https://www.atlassian.com)
  - [Mermaid Plugin for Confluence](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview)
  - [CloudScript.io Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview)
@ -167,3 +170,5 @@ They also serve as proof of concept, for the variety of things that can be built
 - [Reveal CK](https://github.com/jedcn/reveal-ck)
  - [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
 - [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
+- [ExDoc](https://github.com/elixir-lang/ex_doc)
+  - [Rendering Mermaid graphs](https://github.com/elixir-lang/ex_doc#rendering-mermaid-graphs)
--- a/docs/overview/integrations.md
+++ b/docs/overview/integrations.md
@ -1,11 +1,6 @@
---
-sort: 2
-title: Use-Cases and Integrations
---
-
 # Integrations

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

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

@ -14,8 +9,11 @@ They also serve as proof of concept, for the variety of things that can be built

 - [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) (**Native support**)
 - [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) (**Native support**)
+- [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) (**Native support**)
+- [Joplin](https://joplinapp.org) (**Native support**)
+- [Notion](https://notion.so) (**Native support**)
 - [GitHub](https://github.com)
-  - [Github action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
+  - [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
  - [svg-generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
 - [GitBook](http://gitbook.com)
  - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
@ -40,7 +38,7 @@ They also serve as proof of concept, for the variety of things that can be built
  - [WordPress Markdown Editor](https://wordpress.org/plugins/wp-githuber-md)
  - [WP-ReliableMD](https://wordpress.org/plugins/wp-reliablemd/)
 - [Hexo](https://hexo.io)
-  - [hexo-filter-mermid-diagrams](https://github.com/webappdevelp/hexo-filter-mermaid-diagrams)
+  - [hexo-filter-mermaid-diagrams](https://github.com/webappdevelp/hexo-filter-mermaid-diagrams)
  - [hexo-tag-mermaid](https://github.com/JameChou/hexo-tag-mermaid)
  - [hexo-mermaid-diagrams](https://github.com/mslxl/hexo-mermaid-diagrams)

@ -75,8 +73,10 @@ They also serve as proof of concept, for the variety of things that can be built
  - [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin)
 - [DokuWiki](https://dokuwiki.org)
  - [Flowcharts](https://www.dokuwiki.org/plugin:flowcharts?s[]=mermaid)
+  - [ComboStrap](https://combostrap.com/mermaid)
 - [TiddlyWiki](https://tiddlywiki.com/)
-  - [mermaid-tw5-plugin](https://github.com/michaeljmcd/mermaid-tw5-plugin)
+  - [mermaid-tw5: full js library](https://github.com/efurlanm/mermaid-tw5)
+  - [tw5-mermaid: wrapper for Mermaid Live](https://github.com/jasonmhoule/tw5-mermaid)

 ## Editor Plugins

@ -109,10 +109,19 @@ They also serve as proof of concept, for the variety of things that can be built
 - [Inkdrop](http://inkdrop.app) - [Plugin](https://github.com/inkdropapp/inkdrop-mermaid)
 - [Vim](https://vim.org)
  - [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram)
+- [GNU Emacs](https://www.gnu.org/software/emacs/)
+  - [Major mode for .mmd files](https://github.com/abrochard/mermaid-mode)
+  - [Org-Mode integration](https://github.com/arnm/ob-mermaid)
 - [Brackets](http://brackets.io/)
  - [Mermaid Preview](https://s3.amazonaws.com/extend.brackets/alanhohn.mermaid-preview/alanhohn.mermaid-preview-1.0.2.zip)
 - [Iodide](https://github.com/iodide-project/iodide)
  - [iodide-mermaid-plugin](https://github.com/iodide-project/iodide-mermaid-plugin)
+- [Google docs](https://docs.google.com/)
+  - [Mermaid plugin for google docs](https://workspace.google.com/marketplace/app/mermaid/636321283856)
+- [Podlite](https://github.com/zag/podlite-desktop)
+  - [Named block =Diagram](https://github.com/zag/podlite/tree/main/packages/podlite-diagrams)
+- [GNU Nano](https://www.nano-editor.org/)
+  - [Nano Mermaid](https://github.com/Yash-Singh1/nano-mermaid)

 ## Document Generation

@ -123,22 +132,31 @@ They also serve as proof of concept, for the variety of things that can be built
 - [jSDoc](https://jsdoc.app/)
  - [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid)
 - [MkDocs](https://mkdocs.org)
-  - [MarkdownMermaid](https://github.com/sebastienwarin/mkdocs-mermaid-plugin)
+  - [mkdocs-mermaid2-plugin](https://github.com/fralau/mkdocs-mermaid2-plugin)
 - [Type Doc](https://typedoc.org/)
  - [typedoc-plugin-mermaid](https://www.npmjs.com/package/typedoc-plugin-mermaid)
+- [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) (Native support in theme)
+- [Codedoc](https://codedoc.cc/)
+  - [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin)

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

- [Mermaid Diagrams](https://chrome.google.com/webstore/detail/mermaid-diagrams/phfcghedmopjadpojhmmaffjmfiakfil)
- [GitHub + Mermaid](https://chrome.google.com/webstore/detail/github-%2B-mermaid/goiiopgdnkogdbjmncgedmgpoajilohe)
- [Mermaid Markdown](https://chrome.google.com/webstore/detail/mermaid-markdown/mboeoikjijmjcjgpccghbcoegikliijg)
- [Monkeys](https://chrome.google.com/webstore/detail/monkeys-mermaid-for-githu/cplfdpoajbclbgphaphphcldamfkjlgi)
- [Asciidoctor Live Preview](https://chrome.google.com/webstore/detail/asciidoctorjs-live-previe/iaalpfgpbocpdfblpnhhgllgbdbchmia) __works in the new IE as well__
- [Chrome Diagrammer](https://chrome.google.com/webstore/detail/chrome-diagrammer/bkpbgjmkomfoakfklcjeoegkklgjnnpk)
- [Diagram Tab](https://github.com/khafast/diagramtab)

 ## Other
-
 - [Jekyll](https://jekyllrb.com/)
  - [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid)
  - [jekyll-mermaid-diagrams](https://github.com/fuzhibo/jekyll-mermaid-diagrams)
--- a/docs/n00b-gettingStarted.md
+++ b/docs/n00b-gettingStarted.md
@ -149,7 +149,7 @@ Rendering in Mermaid is initalized by `mermaid.initialize()` call. You can place
        And here is another:
        <div class="mermaid">
            graph TD 
-            A[Client] -->|tcp_123| 
+            A[Client] -->|tcp_123| B
            B(Load Balancer) 
            B -->|tcp_456| C[Server1] 
            B -->|tcp_456| D[Server2]
--- a/docs/overview/README.md
+++ b/docs/overview/README.md
@ -1,7 +0,0 @@
---
-sort: 1
---
-
-# Overview
-
-{% include list.liquid %}
--- a/docs/overview/faq.md
+++ b/docs/overview/faq.md
@ -1,16 +0,0 @@
---
-sort: 3
-title: FAQ
---
-
-# Frequently Asked Questions
-
-1. [How to add title to flowchart?](https://github.com/knsv/mermaid/issues/556#issuecomment-363182217)
-1. [How to specify custom CSS file?](https://github.com/mermaidjs/mermaid.cli/pull/24#issuecomment-373402785)
-1. [How to fix tooltip misplacement issue?](https://github.com/knsv/mermaid/issues/542#issuecomment-3343564621)
-1. [How to specify gantt diagram xAxis format?](https://github.com/knsv/mermaid/issues/269#issuecomment-373229136)
-1. [How to bind an event?](https://github.com/knsv/mermaid/issues/372)
-1. [How to add newline in the text?](https://github.com/knsv/mermaid/issues/384#issuecomment-281339381)
-1. [How to have special characters in link text?](https://github.com/knsv/mermaid/issues/407#issuecomment-329944735)
-1. [How to change Flowchart curve style?](https://github.com/knsv/mermaid/issues/580#issuecomment-373929046)
-1. [How to create a Flowchart end-Node that says "End"](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897)
--- a/docs/overview/n00b-overview.md
+++ b/docs/overview/n00b-overview.md
@ -1,74 +0,0 @@
---
-sort: 1
-title: Overview
---
-
-# Overview for Beginners
-
-## Explaining with a Diagram 	
-
-A picture is worth a thousand words, a good diagram would be worth more. There is no disputing that they are indeed very useful. Yet very few people use them, even fewer still do so for documentation. Mainly because it takes too much time that could be used for more important functions.
-
-
-## Creating and Maintaining Diagrams
-
-Anyone who has used Visio, or (God Forbid) Excel to make a Gantt Chart, knows how hard it is to make, edit and maintain good visualizations.
-
-In an environment of constantly changing information , diagrams/charts are both very important and also become obsolete/inaccurate very fast. This catch-22 hobbles the information transfer and productivity in teams.
-
-# Doc Rot in Diagrams
-
-Doc-Rot is quite quick on diagrams makes, after a change is made,  it quite hard to rationalize taking hours in a desktop application, to produce a diagram that you would need to recreate again the following week in order to account for updates and changes in the app you are documenting. Yet that is often the reality for diagrams and charts and the people who make them.
-
-mermaid seeks to change that. mermaid is a javascript based tool that utilizes a markdown inspired syntax to generate documentation, which is actually quicker, less complicated and more convenient than most traditional diagramming software. This is a relatively straightforward solution to a major hurdle in software teams.  
-
-# :blue_book: Definition of Terms/ Dictionary
-
-**Mermaid definitions**
-
->These are the instructions for how the diagram is to rendered, written in mermaid, which is based on Markdown. These can be found inside `<div>` tags, with the `class=mermaid`.
-
-```html
- <div class="mermaid">
-    graph TD
-    A[Client] --> B[Load Balancer]
-    B --> C[Server01]
-    B --> D[Server02]
-  </div>
-```
-
-**render**
-
->This is the core function of Mermaid and its API, it is a function that is called to read all the `Mermaid Definitions` and returns an SVG file, based on the definitions.
-
-
-**Nodes**
-
->These are the boxes that contain text or otherwise discrete pieces of each diagram, separated generally by arrows, except for Gantt Charts and User Journey Diagrams. They will be referred to often in the instructions. For Diagram Specific Syntax and Instructions, refer to
-
-## Advantages of Using Mermaid
-
- Ease of generate, modify and render diagrams, when you make
- The number of integrations and plugins it has.
- It can be added to your or your company's website.
- Diagrams can be created through comments like this in a script:
-
-## The catch-22 of Diagrams and Charts:
-
-**Diagramming and charting is a gigantic waste of developer time, but not having diagrams ruins productivity.**
-
-mermaid solves this by cutting the time, effort and tooling that is required to create diagrams and charts.
-
-Because, the text base for  diagrams allows for it to be updated easily, it can also be made part of production scripts (and other pieces of code). So less time needs be spent on documenting, as a separate task.
-
-
-## Catching up with Development
-
-Being based on markdown, mermaid can be used, not only by accomplished front-end developers, but by most computer savvy people to render diagrams, at much faster speeds.
-In fact one can pick up the syntax for it quite easily from the examples given and there are many tutorials in the internet.
-
-## Mermaid is for everyone.
-Video [Tutorials](./getting-started/Tutorials.md) are also available for the mermaid [live editor](https://mermaid-js.github.io/mermaid-live-editor/).
-
-For information on how to use mermaid, click [here](https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted).
-Alternatively, you could also view the [integrations and uses](https://mermaid-js.github.io/mermaid/#/./integrations), to see how mermaid is used.
--- a/docs/sequenceDiagram.md
+++ b/docs/sequenceDiagram.md
@ -300,9 +300,7 @@ It is possible to get a sequence number attached to each arrow in a sequence dia

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

@ -493,8 +491,8 @@ mermaid.sequenceConfig = {
 | mirrorActors      | Turns on/off the rendering of actors below the diagram as well as above it                                                                 | false                          |
 | bottomMarginAdj   | Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists. | 1                              |
 | actorFontSize     | Sets the font size for the actor's description                                                                                             | 14                             |
-| actorFontFamily   | Sets the font family for the actor's description                                                                                           | "Open-Sans", "sans-serif"      |
-| actorFontWeight   | Sets the font weight for the actor's description                                                                                           | "Open-Sans", "sans-serif"      |
+| actorFontFamily   | Sets the font family for the actor's description                                                                                           | "Open Sans", sans-serif      |
+| actorFontWeight   | Sets the font weight for the actor's description                                                                                           | "Open Sans", sans-serif      |
 | noteFontSize      | Sets the font size for actor-attached notes                                                                                                | 14                             |
 | noteFontFamily    | Sets the font family for actor-attached notes                                                                                              | "trebuchet ms", verdana, arial |
 | noteFontWeight    | Sets the font weight for actor-attached notes                                                                                              | "trebuchet ms", verdana, arial |
--- a/docs/diagrams-and-syntax-and-examples/sequenceDiagram.md
+++ b/docs/diagrams-and-syntax-and-examples/sequenceDiagram.md
@ -1,23 +1,15 @@
---
-sort: 4
---
-
 # Sequence diagrams

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

 Mermaid can render sequence diagrams.

-```
-sequenceDiagram
-    Alice->>John: Hello John, how are you?
-    John-->>Alice: Great!
-```
-
-```mermaid
+```mermaid-example
 sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
+    Alice-)John: See you later!
 ```

 ```note
@ -35,35 +27,30 @@ rendered in order of appearance in the diagram source text. Sometimes you might
 different order than how they appear in the first message. It is possible to specify the actor's order of
 appearance by doing the following:

-```
+```mermaid-example
 sequenceDiagram
-    participant John
    participant Alice
-    Alice->>John: Hello John, how are you?
-    John-->>Alice: Great!
+    participant Bob
+    Alice->>Bob: Hi Bob
+    Bob->>Alice: Hi Alice
 ```

-```mermaid
+### Actors
+
+If you specifically want to use the actor symbol instead of a rectangle with text you can do so by using actor statements as per below.
+```mermaid-example
 sequenceDiagram
-    participant John
-    participant Alice
-    Alice->>John: Hello John, how are you?
-    John-->>Alice: Great!
+    actor Alice
+    actor Bob
+    Alice->>Bob: Hi Bob
+    Bob->>Alice: Hi Alice
 ```

 ### Aliases

 The actor can have a convenient identifier and a descriptive label.

-```
-sequenceDiagram
-    participant A as Alice
-    participant J as John
-    A->>J: Hello John, how are you?
-    J->>A: Great!
-```
-
-```mermaid
+```mermaid-example
 sequenceDiagram
    participant A as Alice
    participant J as John
@ -87,22 +74,16 @@ There are six types of arrows currently supported:
 | -->  | Dotted line without arrow                   |
 | ->>  | Solid line with arrowhead                   |
 | -->> | Dotted line with arrowhead                  |
-| -x   | Solid line with a cross at the end (async)  |
-| --x  | Dotted line with a cross at the end (async) |
+| -x   | Solid line with a cross at the end          |
+| --x  | Dotted line with a cross at the end.        |
+| -)   | Solid line with an open arrow at the end (async)  |
+| --)  | Dotted line with a open arrow at the end (async) |

 ## Activations

 It is possible to activate and deactivate an actor. (de)activation can be dedicated declarations:

-```
-sequenceDiagram
-    Alice->>John: Hello John, how are you?
-    activate John
-    John-->>Alice: Great!
-    deactivate John
-```
-
-```mermaid
+```mermaid-example
 sequenceDiagram
    Alice->>John: Hello John, how are you?
    activate John
@ -112,13 +93,7 @@ sequenceDiagram

 There is also a shortcut notation by appending `+`/`-` suffix to the message arrow:

-```
-sequenceDiagram
-    Alice->>+John: Hello John, how are you?
-    John-->>-Alice: Great!
-```
-
-```mermaid
+```mermaid-example
 sequenceDiagram
    Alice->>+John: Hello John, how are you?
    John-->>-Alice: Great!
@ -126,15 +101,7 @@ sequenceDiagram

 Activations can be stacked for same actor:

-```
-sequenceDiagram
-    Alice->>+John: Hello John, how are you?
-    Alice->>+John: John, can you hear me?
-    John-->>-Alice: Hi Alice, I can hear you!
-    John-->>-Alice: I feel great!
-```
-
-```mermaid
+```mermaid-example
 sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
@ -149,13 +116,7 @@ Note [ right of | left of | over ] [Actor]: Text in note content

 See the example below:

-```
-sequenceDiagram
-    participant John
-    Note right of John: Text in note
-```
-
-```mermaid
+```mermaid-example
 sequenceDiagram
    participant John
    Note right of John: Text in note
@ -163,13 +124,7 @@ sequenceDiagram

 It is also possible to create notes spanning two participants:

-```
-sequenceDiagram
-    Alice->John: Hello John, how are you?
-    Note over Alice,John: A typical interaction
-```
-
-```mermaid
+```mermaid-example
 sequenceDiagram
    Alice->John: Hello John, how are you?
    Note over Alice,John: A typical interaction
@ -187,15 +142,7 @@ end

 See the example below:

-```
-sequenceDiagram
-    Alice->John: Hello John, how are you?
-    loop Every minute
-        John-->Alice: Great!
-    end
-```
-
-```mermaid
+```mermaid-example
 sequenceDiagram
    Alice->John: Hello John, how are you?
    loop Every minute
@ -225,20 +172,7 @@ end

 See the example below:

-```
-sequenceDiagram
-    Alice->>Bob: Hello Bob, how are you?
-    alt is sick
-        Bob->>Alice: Not so good :(
-    else is well
-        Bob->>Alice: Feeling fresh like a daisy
-    end
-    opt Extra response
-        Bob->>Alice: Thanks for asking
-    end
-```
-
-```mermaid
+```mermaid-example
 sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    alt is sick
@ -269,7 +203,7 @@ end

 See the example below:

-```mermaid
+```mermaid-example
 sequenceDiagram
    par Alice to Bob
        Alice->>Bob: Hello guys!
@ -282,7 +216,7 @@ sequenceDiagram

 It is also possible to nest parallel blocks.

-```mermaid
+```mermaid-example
 sequenceDiagram
    par Alice to Bob
        Alice->>Bob: Go help John
@ -316,7 +250,7 @@ end

 See the examples below:

-```mermaid
+```mermaid-example
 sequenceDiagram
    participant Alice
    participant John
@ -339,18 +273,32 @@ sequenceDiagram

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

-```
+```mmd
 sequenceDiagram
    Alice->>John: Hello John, how are you?
    %% this is a comment
    John-->>Alice: Great!
 ```

+## Entity codes to escape characters
+
+It is possible to escape characters using the syntax exemplified here.
+
+```mermaid-example
+sequenceDiagram
+    A->>B: I #9829; you!
+    B->>A: I #9829; you #infin; times more!
+```
+
+Numbers given are base 10, so `#` can be encoded as `#35;`. It is also supported to use HTML character names.
+
+Because semicolons can be used instead of line breaks to define the markup, you need to use `#59;` to include a semicolon in message text.
+
 ## sequenceNumbers

 It is possible to get a sequence number attached to each arrow in a sequence diagram. This can be configured when adding mermaid to the website as shown below:

-```
+```html
    <script>
      mermaid.initialize({
        sequence: { showSequenceNumbers: true },
@ -360,7 +308,7 @@ It is possible to get a sequence number attached to each arrow in a sequence dia

 It can also be be turned on via the diagram code as in the diagram:

-```
+```mermaid-example
 sequenceDiagram
    autonumber
    Alice->>John: Hello John, how are you?
@ -373,17 +321,47 @@ sequenceDiagram
    Bob-->>John: Jolly good!
 ```

-```mermaid
+## Actor Menus
+
+Actors can have popup-menus containing individualized links to external pages.  For example, if an actor represented a web service, useful links might include a link to the service health dashboard, repo containing the code for the service, or a wiki page describing the service.
+
+This can be configured by adding one or more link lines with the format:
+```
+link <actor>: <link-label> @ <link-url>
+```
+```mmd
 sequenceDiagram
-    autonumber
+    participant Alice
+    participant John
+    link Alice: Dashboard @ https://dashboard.contoso.com/alice
+    link Alice: Wiki @ https://wiki.contoso.com/alice
+    link John: Dashboard @ https://dashboard.contoso.com/john
+    link John: Wiki @ https://wiki.contoso.com/john
    Alice->>John: Hello John, how are you?
-    loop Healthcheck
-        John->>John: Fight against hypochondria
-    end
-    Note right of John: Rational thoughts!
    John-->>Alice: Great!
-    John->>Bob: How about you?
-    Bob-->>John: Jolly good!
+    Alice-)John: See you later!
+```
+
+#### Advanced Menu Syntax
+There is an advanced syntax that relies on JSON formatting. If you are comfortable with JSON format, then this exists as well.
+
+This can be configured by adding the links lines with the format:
+
+```
+links <actor>: <json-formatted link-name link-url pairs>
+```
+
+An example is below:
+
+```mmd
+sequenceDiagram
+    participant Alice
+    participant John
+    links Alice: {"Dashboard": "https://dashboard.contoso.com/alice", "Wiki": "https://wiki.contoso.com/alice"}
+    links John: {"Dashboard": "https://dashboard.contoso.com/john", "Wiki": "https://wiki.contoso.com/john"}
+    Alice->>John: Hello John, how are you?
+    John-->>Alice: Great!
+    Alice-)John: See you later!
 ```

 ## Styling
@ -494,7 +472,7 @@ text.actor {
 Is it possible to adjust the margins for rendering the sequence diagram.

 This is done by defining `mermaid.sequenceConfig` or by the CLI to use a json file with the configuration.
-How to use the CLI is described in the [mermaidCLI](mermaidCLI.html) page.
+How to use the CLI is described in the [mermaidCLI](mermaidCLI) page.
 `mermaid.sequenceConfig` can be set to a JSON string with config parameters or the corresponding object.

 ```javascript
--- a/docs/tutorials-and-community/CHANGELOG.md
+++ b/docs/tutorials-and-community/CHANGELOG.md
@ -1,992 +0,0 @@
---
-sort: 3
-title: Changelog
---
-
-# Change Log
-
-Here is the list of the newest versions in Descending Order, beginning from the latest version.
-
-## Unreleased
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/8.7.0...HEAD)
-
-## 8.7.0 (2020-08-09)
-
-🔖 [Release Notes](https://github.com/mermaid-js/mermaid/releases/tag/8.7.0) |
-📜 [Full Changelog](https://github.com/mermaid-js/mermaid/compare/8.6.0...8.7.0)
-
-This version brings with it a system for [dynamic and integrated configuration of the diagram themes](./theming.md).
-The objective of this is to increase the customizability of mermaid and the ease of Styling, with the customization of themes through the `%%init%%` directive and `initialize` calls.
-
-Themes follow and build upon the Levels of Configuration and employ `directives` to modify and create custom configurations, as they were introduced in Version [8.6.0](../getting-started/8.6.0_docs.md).
-
-**These Theming Configurations, similar to directives, will also be made applicable in the Live-Editor, for easier styling.**
-
-### Site-wide Themes
-
-Site-wide themes are still declared via `initialize` by site owners.
-
-Example of `Initalize` call setting `theme` to `base`:
-
-```js
-mermaidAPI.initialize({
-    'securityLevel': 'loose', 'theme': 'base'
-});
-```
-
-**Notes**: Only site owners can use the `mermaidAPI.initialize` call, to set values. Site-Users will have to use `%%init%%` to modify or create the theme for their diagrams.
-
-### Themes at the Local or Current Level
-
-When Generating a diagram using on a webpage that supports mermaid.
-It is also possible to override site-wide theme settings locally, for a specific diagram, using directives, as long as it is not prohibited by the `secure` array.
-
-**Following is an example:**
-
-```
-%%{init: {'theme':'base'}}%%
-  graph TD
-    a --> b
-```
-
-### Making a Custom Theme with `themeVariables`
-
-The easiest way to make a custom theme is to start with the base theme, and just modify theme variables through `themeVariables`, via `%%init%%`.
-
-|   Parameter    |                            Description                             | Type  | Required |         Objects contained          |
-| -------------- | ------------------------------------------------------------------ | ----- | -------- | ---------------------------------- |
-| themeVariables | Array containing objects, modifiable with the `%%init%%` directive | Array | Required | primaryColor, lineColor, textColor |
-
-
-Here is an example of overriding `primaryColor` and giving everything a different look, using `%%init%%`.
-
-```
-%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-**Notes:**
-Leaving it empty will set all variable values to default.
-
-## 8.6.0 (2020-07-13)
-
-🔖 [Release Notes](https://github.com/mermaid-js/mermaid/releases/tag/8.6.0)
-
-[Version 8.6.0](../getting-started/8.6.0_docs.md) introduces New Configuration Protocols and Directives and a Beta for the [New Mermaid Live-Editor](https://mermaid-js.github.io/docs/mermaid-live-editor-beta/#/edit/eyJjb2RlIjoiJSV7aW5pdDoge1widGhlbWVcIjogXCJmb3Jlc3RcIiwgXCJsb2dMZXZlbFwiOiAxIH19JSVcbmdyYXBoIFREXG4gIEFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgQyAtLT58T25lfCBEW0xhcHRvcF1cbiAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl1cblx0XHQiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGFyayJ9fQ)
-
-**With version 8.6.0 comes the release of directives for mermaid, a new system for modifying configurations, with the aim of establishing centralized, sane defaults and simple implementation.**
-
-Directives allow for a diagram specific overriding of config, as it has been discussed in Configurations.
-This allows site users to input modifications to config alongside diagram definitions, when creating diagrams on a private webpage that supports Mermaid.
-
-## 8.5.0 (2020-04-11)
-
-🔖 [Release Notes](https://github.com/mermaid-js/mermaid/releases/tag/untagged-31c93788afe260d914bb)
-
-This version introduces New diagrams!
-
-**New diagrams in 8.5**
-
-With version 8.5 there are some bug fixes and enhancements, plus a new diagram type, entity relationship diagrams.
-
-![Image showing the new ER diagram type](./img/er.png)
-
-## 8.2.0 (2019-07-17)
-
-🏷️ [Tag](https://github.com/mermaid-js/mermaid/tree/8.2.0)
-
-Version 8.2.0, introduces a security improvement.
-
-A `securityLevel` configuration has to first be cleared, `securityLevel` sets the level of trust for the parsed diagrams and limits click functionality.
-This was introduced in version 8.2 as a security improvement, aimed at preventing malicious use.
-
-### securityLevel
-
-| Parameter     | Description                       | Type   | Required | Values                    |
-| ------------- | --------------------------------- | ------ | -------- | ------------------------- |
-| securitylevel | Level of trust for parsed diagram | String | Required | Strict, Loose, antiscript |
-
-**Notes:**
-
-   **strict**: (**default**) tags in text are encoded, click functionality is disabled
-   **loose**: tags in text are allowed, click functionality is enabled
-   **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled
-
-⚠️ **Note**: This changes the default behaviour of mermaid so that after upgrade to 8.2, if the `securityLevel` is not configured, tags in flowcharts are encoded as tags and clicking is prohibited.
-
-If you are taking responsibility for the diagram source security you can set the `securityLevel` to a value of your choosing.
-By doing this clicks and tags are again allowed.
-
-### To change `securityLevel` with `mermaidAPI.initialize`:
-
-```javascript
-    mermaidAPI.initialize({
-        securityLevel: 'loose'
-    });
-```
-
-**Closed issues:**
-
- please add tag for 8.0.0 release [\#863](https://github.com/knsv/mermaid/issues/863)
- classDiagram breaks on any edit [\#858](https://github.com/knsv/mermaid/issues/858)
-
-## [8.1.0](https://github.com/knsv/mermaid/tree/8.1.0) (2019-06-25)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/7.0.5...8.1.0)
-
-**Implemented enhancements:**
-
- Theme for dark background [\#301](https://github.com/knsv/mermaid/issues/301)
- \[Feature request\] gantt diagram axis format [\#269](https://github.com/knsv/mermaid/issues/269)
- Implement render function for server side rendering using phantomjs [\#169](https://github.com/knsv/mermaid/issues/169)
-
-**Fixed bugs:**
-
- mermaid -v filename.mmd gives You must specify at least one source file. [\#328](https://github.com/knsv/mermaid/issues/328)
- Not Able to See Labels even htmlLabels:false added [\#268](https://github.com/knsv/mermaid/issues/268)
-
-**Closed issues:**
-
- Gantt and sequence diagram do not render [\#853](https://github.com/knsv/mermaid/issues/853)
- margins around flowchart are not balanced [\#852](https://github.com/knsv/mermaid/issues/852)
- Smaller bundles [\#843](https://github.com/knsv/mermaid/issues/843)
- unicode in labels [\#776](https://github.com/knsv/mermaid/issues/776)
- Hard-changing drawing  of arrows per edge type [\#775](https://github.com/knsv/mermaid/issues/775)
- SequenceDiagram wrong [\#773](https://github.com/knsv/mermaid/issues/773)
- Render mermaid on github pages with simple code  [\#772](https://github.com/knsv/mermaid/issues/772)
- FlowChart - large space between text and the image [\#754](https://github.com/knsv/mermaid/issues/754)
- Class Diagram Issues when using Mermaid in Stackedit [\#748](https://github.com/knsv/mermaid/issues/748)
- Multi-platform CI [\#744](https://github.com/knsv/mermaid/issues/744)
- gantt: sections can't have a colon [\#742](https://github.com/knsv/mermaid/issues/742)
- Yarn build does not add mermaid.min.css to dist [\#732](https://github.com/knsv/mermaid/issues/732)
- Is there a grammar / keyword / more than just the basic examples? [\#718](https://github.com/knsv/mermaid/issues/718)
- Click event and react component [\#717](https://github.com/knsv/mermaid/issues/717)
- Long text going outside the box [\#706](https://github.com/knsv/mermaid/issues/706)
- How to migrate from yUML to mermaid? [\#704](https://github.com/knsv/mermaid/issues/704)
- Issue on Dynamic Creation in PHP [\#690](https://github.com/knsv/mermaid/issues/690)
- `click "\#target"` and `click "http://url"` should create regular links [\#689](https://github.com/knsv/mermaid/issues/689)
- Support Chinese punctuation [\#687](https://github.com/knsv/mermaid/issues/687)
- \[Question\] Proper way to install on Mac?  [\#681](https://github.com/knsv/mermaid/issues/681)
- Has Mermaid a graphical interface to make diagrams?  [\#668](https://github.com/knsv/mermaid/issues/668)
- mermaid installation on debian  [\#649](https://github.com/knsv/mermaid/issues/649)
- "Cannot activate" in sequenceDiagram [\#647](https://github.com/knsv/mermaid/issues/647)
- Link \("click" statement\) in flowchart does not work in exported SVG [\#646](https://github.com/knsv/mermaid/issues/646)
- How to pass styling  [\#639](https://github.com/knsv/mermaid/issues/639)
- The live editor cant show seq diagram with notes for 8.0.0-alpha.3 [\#638](https://github.com/knsv/mermaid/issues/638)
- import mermaid.css with ES6 + NPM [\#634](https://github.com/knsv/mermaid/issues/634)
- Actor line cuts through other elements [\#633](https://github.com/knsv/mermaid/issues/633)
- Graph TD line out of the picture \(left side\) [\#630](https://github.com/knsv/mermaid/issues/630)
- Flowchart labels appear "cutoff"  [\#628](https://github.com/knsv/mermaid/issues/628)
- Uncaught TypeError: \_.constant is not a function \(mermaid.js\)  [\#626](https://github.com/knsv/mermaid/issues/626)
- Missing tags and releases for newer versions [\#623](https://github.com/knsv/mermaid/issues/623)
- Mermaid and Leo / Leo Vue [\#622](https://github.com/knsv/mermaid/issues/622)
- mermaidAPI gantt Vue.js [\#621](https://github.com/knsv/mermaid/issues/621)
- Gantt sections are not separated by colors - Fix: set numberSectionStyles to 4 instead of 3 [\#620](https://github.com/knsv/mermaid/issues/620)
- how to get mermaidAPI? [\#617](https://github.com/knsv/mermaid/issues/617)
- Error in startOnLoad documentation? [\#616](https://github.com/knsv/mermaid/issues/616)
- Example export to SVG generates error [\#614](https://github.com/knsv/mermaid/issues/614)
- The new online editor does not support previously generated links [\#613](https://github.com/knsv/mermaid/issues/613)
- Grammar / Syntax documentation for flowcharts [\#607](https://github.com/knsv/mermaid/issues/607)
- Mermaid does not work with d3.js [\#606](https://github.com/knsv/mermaid/issues/606)
- Why does this code's flowchart lines get cut-off on screen? [\#604](https://github.com/knsv/mermaid/issues/604)
- click keyword does not fire my callback \(on the demo Website too\) [\#603](https://github.com/knsv/mermaid/issues/603)
- Online Editor fails to show exported SVG [\#601](https://github.com/knsv/mermaid/issues/601)
- Just saying thanks! [\#597](https://github.com/knsv/mermaid/issues/597)
- stylesheet crashed with other library like abcjs [\#596](https://github.com/knsv/mermaid/issues/596)
- Missing connection [\#594](https://github.com/knsv/mermaid/issues/594)
- How to use mermaid on node.js restful api? [\#593](https://github.com/knsv/mermaid/issues/593)
- Remove status code [\#589](https://github.com/knsv/mermaid/issues/589)
- Golang based editor [\#588](https://github.com/knsv/mermaid/issues/588)
- sequenceDiagram -\> notetext css font is hardcoded [\#587](https://github.com/knsv/mermaid/issues/587)
- Multiple graph in the live editor [\#586](https://github.com/knsv/mermaid/issues/586)
- All \<svg\> elements in page are colored black [\#584](https://github.com/knsv/mermaid/issues/584)
- Styling: classes aren't applied to elements. [\#582](https://github.com/knsv/mermaid/issues/582)
- Rounded connections [\#580](https://github.com/knsv/mermaid/issues/580)
- Arrows are not being shown correctly in the dark theme [\#578](https://github.com/knsv/mermaid/issues/578)
- The documentation for CLI seems outdated. [\#572](https://github.com/knsv/mermaid/issues/572)
- No effect of click event:can not open link [\#571](https://github.com/knsv/mermaid/issues/571)
- Text colors are not correct in VSCODE [\#570](https://github.com/knsv/mermaid/issues/570)
- Nodes aren't aligned properly \(just need an explanation\) [\#568](https://github.com/knsv/mermaid/issues/568)
- setting margin around figure in R [\#567](https://github.com/knsv/mermaid/issues/567)
- Arrows should Come out in upward and Downward direction from decision Node [\#566](https://github.com/knsv/mermaid/issues/566)
- TypeError: Cannot read property 'select' of undefined [\#563](https://github.com/knsv/mermaid/issues/563)
- A little bug [\#557](https://github.com/knsv/mermaid/issues/557)
- Japanese text appears garbled [\#554](https://github.com/knsv/mermaid/issues/554)
- classdiagram not works in mermaid live\_editor  [\#553](https://github.com/knsv/mermaid/issues/553)
- font awesome in link text? [\#546](https://github.com/knsv/mermaid/issues/546)
- q: heard of the cosmogol standard? [\#545](https://github.com/knsv/mermaid/issues/545)
- Arrow heads missing \(cli, 7.0.3\) [\#544](https://github.com/knsv/mermaid/issues/544)
- No Edge Boxes if useHtmlLabels=false [\#541](https://github.com/knsv/mermaid/issues/541)
- how to change mermaid text color or line text block color？ [\#534](https://github.com/knsv/mermaid/issues/534)
- FlowChart visualization broken when downloading from live editor [\#533](https://github.com/knsv/mermaid/issues/533)
- Can't get flowchart to render paths at the top of the diagram; I even tried the online editor and that shows the same issue. Thoughts? [\#532](https://github.com/knsv/mermaid/issues/532)
- live editor make browser\(safari on macOS&iOS\) not longer respond [\#531](https://github.com/knsv/mermaid/issues/531)
- css classes need a prefix/namespace [\#527](https://github.com/knsv/mermaid/issues/527)
- input activate/deactivate cause safari unresponding [\#521](https://github.com/knsv/mermaid/issues/521)
- Cannot Render the Mermaid Graph to PDF ? [\#520](https://github.com/knsv/mermaid/issues/520)
- clicking links works from inset in subgraph but not from nodes [\#516](https://github.com/knsv/mermaid/issues/516)
- Strange syntax error - when importing mermaid.js [\#515](https://github.com/knsv/mermaid/issues/515)
- gantt x-axis display [\#510](https://github.com/knsv/mermaid/issues/510)
- phantomjs renamed to phantomjs-prebuilt [\#508](https://github.com/knsv/mermaid/issues/508)
- issue when using sphinxcontrib-mermaid extension for sphinx [\#507](https://github.com/knsv/mermaid/issues/507)
- layout of docs page looks broken [\#504](https://github.com/knsv/mermaid/issues/504)
- Problem showing graph with php on localhost [\#502](https://github.com/knsv/mermaid/issues/502)
- logLevel's option doesn't work at 7.0.0 [\#501](https://github.com/knsv/mermaid/issues/501)
- How do I get the log for a render or parse attempt? [\#500](https://github.com/knsv/mermaid/issues/500)
- Mermaid neutral style style to built in latest release [\#499](https://github.com/knsv/mermaid/issues/499)
- Any plans for adding a typescript definition file? [\#495](https://github.com/knsv/mermaid/issues/495)
- Gantt diagrams too narrow [\#493](https://github.com/knsv/mermaid/issues/493)
- Flowchart edge labels placement [\#490](https://github.com/knsv/mermaid/issues/490)
- Very different styles when rendering as png vs. svg [\#489](https://github.com/knsv/mermaid/issues/489)
- New editor that supports mermaid: Caret [\#488](https://github.com/knsv/mermaid/issues/488)
- Gant PNG margin  [\#486](https://github.com/knsv/mermaid/issues/486)
- ReferenceError: window is not defined [\#485](https://github.com/knsv/mermaid/issues/485)
- Menu and layout bugs in docs [\#484](https://github.com/knsv/mermaid/issues/484)
- Mermaid resets some of the page CSS styles [\#482](https://github.com/knsv/mermaid/issues/482)
- Arrows rendering incorrectly in online editor [\#480](https://github.com/knsv/mermaid/issues/480)
- CSS stroke-dasharray ignored by browsers but not other viewers [\#474](https://github.com/knsv/mermaid/issues/474)
- mermaid - Browser Support issue [\#472](https://github.com/knsv/mermaid/issues/472)
- Totally love mermaid I might pop! [\#471](https://github.com/knsv/mermaid/issues/471)
- Sequence Diagram: Missing x on async arrows \(png\) [\#469](https://github.com/knsv/mermaid/issues/469)
- live editor: the svg file rendered from graph is not supported by browsers [\#468](https://github.com/knsv/mermaid/issues/468)
- Not found css [\#462](https://github.com/knsv/mermaid/issues/462)
- Phantomjs Dependency [\#461](https://github.com/knsv/mermaid/issues/461)
- Mermaid cli not working for subgraphs [\#459](https://github.com/knsv/mermaid/issues/459)
- Support for notes across multiple participants? [\#458](https://github.com/knsv/mermaid/issues/458)
- Related to Issue \#329: Phantomjs issues. [\#455](https://github.com/knsv/mermaid/issues/455)
- Add a click style [\#426](https://github.com/knsv/mermaid/issues/426)
- Add Parallel block \(par\) to sequence diagrams [\#425](https://github.com/knsv/mermaid/issues/425)
- updating shapes after the flow chart rendering complete [\#424](https://github.com/knsv/mermaid/issues/424)
- can't catch parse error Maximum call stack size exceeded on safari [\#421](https://github.com/knsv/mermaid/issues/421)
- Arrows endings are missing [\#419](https://github.com/knsv/mermaid/issues/419)
- shouldn't mermaid become more like Markdown ? [\#417](https://github.com/knsv/mermaid/issues/417)
- Live editor show rendered diagram if syntax invalid [\#415](https://github.com/knsv/mermaid/issues/415)
- Linkstyle stroke does not work [\#410](https://github.com/knsv/mermaid/issues/410)
- flowchart id's with dots in them .. break links  [\#408](https://github.com/knsv/mermaid/issues/408)
- Flowchart: Link text beginning with lowercase 'o' causes flowchart to break [\#407](https://github.com/knsv/mermaid/issues/407)
- Some Chinese character will case Safari no responding. [\#405](https://github.com/knsv/mermaid/issues/405)
- Cannot center-justify text in nodes? [\#397](https://github.com/knsv/mermaid/issues/397)
- Edge labels should have white background in live editor [\#396](https://github.com/knsv/mermaid/issues/396)
- Live editor does not support activate/deactivate [\#394](https://github.com/knsv/mermaid/issues/394)
- Styling subgraph? [\#391](https://github.com/knsv/mermaid/issues/391)
- Update live editor to version 6.0.0 [\#387](https://github.com/knsv/mermaid/issues/387)
- sequence diagram config issue [\#385](https://github.com/knsv/mermaid/issues/385)
- How to add newline in the text [\#384](https://github.com/knsv/mermaid/issues/384)
- PhantomJS crashes on a large graph [\#380](https://github.com/knsv/mermaid/issues/380)
- Finnish support for class diagrams using plantuml syntax  [\#377](https://github.com/knsv/mermaid/issues/377)
- mermaidAPI.render generated different svg code from mermaid.int\(\) [\#374](https://github.com/knsv/mermaid/issues/374)
- Put your own action on the chart [\#372](https://github.com/knsv/mermaid/issues/372)
- when declaring participants the elements are generated twice [\#370](https://github.com/knsv/mermaid/issues/370)
- Example Flowchart is cut in display \(Chrome\). [\#368](https://github.com/knsv/mermaid/issues/368)
- Add shebang support to diagrams [\#365](https://github.com/knsv/mermaid/issues/365)
- Silencing CLI output [\#352](https://github.com/knsv/mermaid/issues/352)
- SequenceDiagram: 3+ Alternative Paths [\#348](https://github.com/knsv/mermaid/issues/348)
- Smaller height of actor boxes [\#342](https://github.com/knsv/mermaid/issues/342)
- Question: lib/phantomscript.js - foreignObjects in SVG - related to \#58 [\#340](https://github.com/knsv/mermaid/issues/340)
- npm test fails on osx being blocked at Can not load "PhantomJS", it is not registered! [\#337](https://github.com/knsv/mermaid/issues/337)
- Tabs & subgraphs cause rendering error [\#336](https://github.com/knsv/mermaid/issues/336)
- Display question: right angles [\#335](https://github.com/knsv/mermaid/issues/335)
- No Arrows rendered v0.5.8 [\#330](https://github.com/knsv/mermaid/issues/330)
- You had errors in your syntax. Use --help for further information. [\#327](https://github.com/knsv/mermaid/issues/327)
- Allow alternate arrow syntax that doesn't close html comments [\#322](https://github.com/knsv/mermaid/issues/322)
- Comment in subgraph [\#319](https://github.com/knsv/mermaid/issues/319)
- Update graph [\#311](https://github.com/knsv/mermaid/issues/311)
- css conflicts with boostrap's css [\#308](https://github.com/knsv/mermaid/issues/308)
- Can not get click event to fire. [\#306](https://github.com/knsv/mermaid/issues/306)
- Fix phantomjs2 compatibility [\#304](https://github.com/knsv/mermaid/issues/304)
- Flowcharts do not work in native IE11 [\#303](https://github.com/knsv/mermaid/issues/303)
- Integration with remark.js - tutorial added [\#302](https://github.com/knsv/mermaid/issues/302)
- Sequence diagram Loops: changing boxMargin spoils the "loop" notation [\#299](https://github.com/knsv/mermaid/issues/299)
- src/mermaid.js generates bad code [\#297](https://github.com/knsv/mermaid/issues/297)
- Fresh fork: jasmine tests fail [\#294](https://github.com/knsv/mermaid/issues/294)
- CSS clash [\#292](https://github.com/knsv/mermaid/issues/292)
- Mermaid does not work in Chrome 48 [\#281](https://github.com/knsv/mermaid/issues/281)
- circle and ellipse cannot change color by classDef [\#271](https://github.com/knsv/mermaid/issues/271)
- npm run watch doesn't work due missing dependencies [\#266](https://github.com/knsv/mermaid/issues/266)
- label out of node  [\#262](https://github.com/knsv/mermaid/issues/262)
- IE11 Support issue [\#261](https://github.com/knsv/mermaid/issues/261)
- mermaid without browser [\#260](https://github.com/knsv/mermaid/issues/260)
- Insufficient capacity of gantt diagrams [\#226](https://github.com/knsv/mermaid/issues/226)
- some WARN about installation [\#222](https://github.com/knsv/mermaid/issues/222)
- Live editor offline access [\#217](https://github.com/knsv/mermaid/issues/217)
- suggest: code highlight mode config for editors [\#212](https://github.com/knsv/mermaid/issues/212)
- Uncaught RangeError: Maximum call stack size exceeded [\#189](https://github.com/knsv/mermaid/issues/189)
- Styling label texts [\#50](https://github.com/knsv/mermaid/issues/50)
-
-**Merged pull requests:**
-
- Remove console.log in classDB. [\#861](https://github.com/knsv/mermaid/pull/861) ([Arthaey](https://github.com/Arthaey))
- Bump sshpk from 1.13.1 to 1.16.1 [\#851](https://github.com/knsv/mermaid/pull/851) ([dependabot[bot]](https://github.com/apps/dependabot))
- Significantly smaller bundles [\#850](https://github.com/knsv/mermaid/pull/850) ([fabiospampinato](https://github.com/fabiospampinato))
- Support styling of subgraphs [\#845](https://github.com/knsv/mermaid/pull/845) ([Qix-](https://github.com/Qix-))
- fix dark theme loop labels not visible [\#837](https://github.com/knsv/mermaid/pull/837) ([jnnnnn](https://github.com/jnnnnn))
- fix draw function can only call once [\#832](https://github.com/knsv/mermaid/pull/832) ([vaniship](https://github.com/vaniship))
- Fix dotted lines not appearing in flowcharts when HTML labels disabled [\#828](https://github.com/knsv/mermaid/pull/828) ([stanhu](https://github.com/stanhu))
- Fix issue with XML line breaks inside vertex labels [\#824](https://github.com/knsv/mermaid/pull/824) ([jsyang](https://github.com/jsyang))
- fixed diagrams [\#810](https://github.com/knsv/mermaid/pull/810) ([0xflotus](https://github.com/0xflotus))
- Clickable gantt tasks [\#804](https://github.com/knsv/mermaid/pull/804) ([abzicht](https://github.com/abzicht))
- linkStyle now supports list of indexes with a few tests [\#798](https://github.com/knsv/mermaid/pull/798) ([ivan-danilov](https://github.com/ivan-danilov))
- fix class diagram mermaid [\#795](https://github.com/knsv/mermaid/pull/795) ([DanShai](https://github.com/DanShai))
- Added exclude weekdays to definition [\#792](https://github.com/knsv/mermaid/pull/792) ([jopapo](https://github.com/jopapo))
- SVG link rendering [\#791](https://github.com/knsv/mermaid/pull/791) ([flying-sheep](https://github.com/flying-sheep))
- Gantt milestones [\#788](https://github.com/knsv/mermaid/pull/788) ([gijswijs](https://github.com/gijswijs))
- Remove duplicate code [\#768](https://github.com/knsv/mermaid/pull/768) ([znxkznxk1030](https://github.com/znxkznxk1030))
- Render nodes as real links [\#765](https://github.com/knsv/mermaid/pull/765) ([flying-sheep](https://github.com/flying-sheep))
- Fix issue with marker-end. [\#757](https://github.com/knsv/mermaid/pull/757) ([gjlubbertsen](https://github.com/gjlubbertsen))
- Make Class Diagrams usable in Stackedit and Live Editor [\#749](https://github.com/knsv/mermaid/pull/749) ([monsterkrampe](https://github.com/monsterkrampe))
- Adding trapezoid and inverse trapezoid vertex options. [\#741](https://github.com/knsv/mermaid/pull/741) ([adamwulf](https://github.com/adamwulf))
- Add option for right angles [\#721](https://github.com/knsv/mermaid/pull/721) ([paulbland](https://github.com/paulbland))
- Add nested activation classes [\#720](https://github.com/knsv/mermaid/pull/720) ([paulbland](https://github.com/paulbland))
- wip: class diagram  cardinality display [\#705](https://github.com/knsv/mermaid/pull/705) ([Vrixyz](https://github.com/Vrixyz))
- add comments about CSS in config [\#688](https://github.com/knsv/mermaid/pull/688) ([imma90](https://github.com/imma90))
- SequenceDiagram: Add support for multiple alt else statements [\#641](https://github.com/knsv/mermaid/pull/641) ([sechel](https://github.com/sechel))
- fix \#426 - add class .clickable on nodes with click function or link [\#598](https://github.com/knsv/mermaid/pull/598) ([thomasleveil](https://github.com/thomasleveil))
- Spec fix 1 [\#595](https://github.com/knsv/mermaid/pull/595) ([frankschmitt](https://github.com/frankschmitt))
-
-## [7.0.5](https://github.com/knsv/mermaid/tree/7.0.5) (2017-09-01)
-[Full Changelog](https://github.com/knsv/mermaid/compare/7.0.3...7.0.5)
-
-**Closed issues:**
-
- live editor latin error after update [\#560](https://github.com/knsv/mermaid/issues/560)
- Simple full example in online documentation is broken [\#558](https://github.com/knsv/mermaid/issues/558)
- Graph No Arrow Head v7.0.3 [\#543](https://github.com/knsv/mermaid/issues/543)
- Conflict while using mermaid along with core-js [\#512](https://github.com/knsv/mermaid/issues/512)
- Export to pdf on website [\#496](https://github.com/knsv/mermaid/issues/496)
- New downstream project: Mermaid Preview for VSCode [\#442](https://github.com/knsv/mermaid/issues/442)
- Can't Zoom the flowchart ? [\#399](https://github.com/knsv/mermaid/issues/399)
- line labels are not rendered correctly in live editor [\#366](https://github.com/knsv/mermaid/issues/366)
- mermaid-loader [\#361](https://github.com/knsv/mermaid/issues/361)
- Are there any documentation or examples for classDiagram and gitGraph? [\#359](https://github.com/knsv/mermaid/issues/359)
- \# character broken in 0.5.8 [\#347](https://github.com/knsv/mermaid/issues/347)
- Documentation issue: CSS example is not visible [\#345](https://github.com/knsv/mermaid/issues/345)
- Include documentation for command line usage [\#326](https://github.com/knsv/mermaid/issues/326)
- Fresh fork: can't build dist [\#296](https://github.com/knsv/mermaid/issues/296)
- Invalid value for \<svg\> attribute viewBox="0 0 -Infinity -Infinity" [\#291](https://github.com/knsv/mermaid/issues/291)
- Webpack require fails [\#277](https://github.com/knsv/mermaid/issues/277)
- New documentation - need improved logo [\#216](https://github.com/knsv/mermaid/issues/216)
-
-## [7.0.3](https://github.com/knsv/mermaid/tree/7.0.3) (2017-06-04)
-[Full Changelog](https://github.com/knsv/mermaid/compare/7.0.2...7.0.3)
-
-**Closed issues:**
-
- the documentation website is down [\#539](https://github.com/knsv/mermaid/issues/539)
- Good example of interactivity with mermaidAPI [\#514](https://github.com/knsv/mermaid/issues/514)
-
-## [7.0.2](https://github.com/knsv/mermaid/tree/7.0.2) (2017-06-01)
-[Full Changelog](https://github.com/knsv/mermaid/compare/7.0.0...7.0.2)
-
-**Closed issues:**
-
- CDN is not working [\#511](https://github.com/knsv/mermaid/issues/511)
- A sampe sequenceDiagram crashes mermaid-cli [\#492](https://github.com/knsv/mermaid/issues/492)
- Mermaid doesn't delete nodes when called multiple times [\#491](https://github.com/knsv/mermaid/issues/491)
- API crashes on 2nd render\(\) call [\#478](https://github.com/knsv/mermaid/issues/478)
- sequenceDiagram: dotted line for alt and empty bracket should be hidden [\#456](https://github.com/knsv/mermaid/issues/456)
- SVG output \(almost\) not correct [\#434](https://github.com/knsv/mermaid/issues/434)
- How to set axisFormatter of gantt in mermaid CLI? [\#428](https://github.com/knsv/mermaid/issues/428)
- customizing link style with any color sets `fill` property to `black` instead of `none` [\#416](https://github.com/knsv/mermaid/issues/416)
- New line at the end of SVG file [\#400](https://github.com/knsv/mermaid/issues/400)
- CLI doesn't work [\#389](https://github.com/knsv/mermaid/issues/389)
- Can't render subgraphs with htmlLabels: false [\#367](https://github.com/knsv/mermaid/issues/367)
- Color arrowhead [\#362](https://github.com/knsv/mermaid/issues/362)
- CLI: Invisible text, lines in SVG output [\#341](https://github.com/knsv/mermaid/issues/341)
-
-**Merged pull requests:**
-
- Support Multi-line Actor Descriptions [\#764](https://github.com/knsv/mermaid/pull/764) ([watsoncj](https://github.com/watsoncj))
- Update Travis config [\#538](https://github.com/knsv/mermaid/pull/538) ([tylerlong](https://github.com/tylerlong))
- Fix spelling of 'you' in sequenceDiagram docs [\#537](https://github.com/knsv/mermaid/pull/537) ([ctruelson](https://github.com/ctruelson))
- Improve CLI output [\#536](https://github.com/knsv/mermaid/pull/536) ([gibson042](https://github.com/gibson042))
- Modernize mermaid [\#524](https://github.com/knsv/mermaid/pull/524) ([tylerlong](https://github.com/tylerlong))
- Modernize mermaid [\#519](https://github.com/knsv/mermaid/pull/519) ([tylerlong](https://github.com/tylerlong))
- Update CLI instructions [\#509](https://github.com/knsv/mermaid/pull/509) ([filipedeschamps](https://github.com/filipedeschamps))
- Add style for classDiagram to dark/default theme [\#503](https://github.com/knsv/mermaid/pull/503) ([yudenzel](https://github.com/yudenzel))
- Fix documentation for git graph. [\#498](https://github.com/knsv/mermaid/pull/498) ([gomlgs](https://github.com/gomlgs))
- Fix links in documentations [\#497](https://github.com/knsv/mermaid/pull/497) ([saveman71](https://github.com/saveman71))
- Update README.md with git graph sample [\#481](https://github.com/knsv/mermaid/pull/481) ([raghur](https://github.com/raghur))
- Fix misspelling of “another” [\#479](https://github.com/knsv/mermaid/pull/479) ([stevenschobert](https://github.com/stevenschobert))
- Fixed \#456 sequenceDiagram: dotted line for alt and empty bracket sho… [\#477](https://github.com/knsv/mermaid/pull/477) ([brookhong](https://github.com/brookhong))
- Add viewbox attr to class diagram [\#473](https://github.com/knsv/mermaid/pull/473) ([gnkm](https://github.com/gnkm))
- add par statement to sequenceDiagram [\#470](https://github.com/knsv/mermaid/pull/470) ([u-minor](https://github.com/u-minor))
-
-## [7.0.0](https://github.com/knsv/mermaid/tree/7.0.0) (2017-01-29)
-[Full Changelog](https://github.com/knsv/mermaid/compare/6.0.0...7.0.0)
-
-**Implemented enhancements:**
-
- npm install -g mermaid does not install phantomjs [\#329](https://github.com/knsv/mermaid/issues/329)
- activation boxes [\#313](https://github.com/knsv/mermaid/issues/313)
-
-**Closed issues:**
-
- demos on io site not working [\#466](https://github.com/knsv/mermaid/issues/466)
- Can not be generated PNG pictures through CLI with Chinese [\#451](https://github.com/knsv/mermaid/issues/451)
- Round nodes cannot be styled with CSS classes [\#443](https://github.com/knsv/mermaid/issues/443)
- webpack gulp UglifyJsPlugin error. [\#440](https://github.com/knsv/mermaid/issues/440)
- String concatenation isn't working  [\#432](https://github.com/knsv/mermaid/issues/432)
- text flow/wrap in actor box of sequence diagram [\#422](https://github.com/knsv/mermaid/issues/422)
- Online live editor still use old version [\#402](https://github.com/knsv/mermaid/issues/402)
- uncaught TypeError: t.getTransformToElement is not a function [\#401](https://github.com/knsv/mermaid/issues/401)
- Only works when using browserify'd code [\#373](https://github.com/knsv/mermaid/issues/373)
- document the use of shebang line in mmd files [\#364](https://github.com/knsv/mermaid/issues/364)
- Diagrams are small and unreadable in IE 11 - since 0.5.1 [\#356](https://github.com/knsv/mermaid/issues/356)
- \[Feature Request\] ER-Diagram Support [\#354](https://github.com/knsv/mermaid/issues/354)
- The need for mermaid.css should be mentioned explicitly in the intro docs... [\#273](https://github.com/knsv/mermaid/issues/273)
-
-**Merged pull requests:**
-
- Update index.html [\#465](https://github.com/knsv/mermaid/pull/465) ([bmsleight](https://github.com/bmsleight))
- Fix for \#416, customizing link style with any color sets `fill` property to `black` instead of `none` [\#452](https://github.com/knsv/mermaid/pull/452) ([joshuacolvin](https://github.com/joshuacolvin))
- Allow .node\>circle to receive css styles [\#449](https://github.com/knsv/mermaid/pull/449) ([bfriedz](https://github.com/bfriedz))
- Fix spelling [\#447](https://github.com/knsv/mermaid/pull/447) ([jawn](https://github.com/jawn))
- added tests and fix cli css style selector lowercase problem [\#445](https://github.com/knsv/mermaid/pull/445) ([whyzdev](https://github.com/whyzdev))
- Update d3.js [\#441](https://github.com/knsv/mermaid/pull/441) ([hetz](https://github.com/hetz))
- added tests to reproduce \#434 in flowchart [\#439](https://github.com/knsv/mermaid/pull/439) ([whyzdev](https://github.com/whyzdev))
- Code Climate config [\#437](https://github.com/knsv/mermaid/pull/437) ([larkinscott](https://github.com/larkinscott))
- fix gantt and sequence digram cli cfg [\#435](https://github.com/knsv/mermaid/pull/435) ([whyzdev](https://github.com/whyzdev))
- fix gantt chart cli configuration broken [\#433](https://github.com/knsv/mermaid/pull/433) ([whyzdev](https://github.com/whyzdev))
- fix gantt chart cli configuration parsing including functions [\#430](https://github.com/knsv/mermaid/pull/430) ([whyzdev](https://github.com/whyzdev))
- Uses an empty text node instead of a string for svg group labels [\#429](https://github.com/knsv/mermaid/pull/429) ([daveaglick](https://github.com/daveaglick))
- use tspan via d3.textwrap to place actor text in sequence diagram [\#427](https://github.com/knsv/mermaid/pull/427) ([whyzdev](https://github.com/whyzdev))
- \#422 use foreignObject/div to place actor label in sequence diagram  [\#423](https://github.com/knsv/mermaid/pull/423) ([whyzdev](https://github.com/whyzdev))
- Clarify the need for a CSS stylesheet [\#413](https://github.com/knsv/mermaid/pull/413) ([sifb](https://github.com/sifb))
- Added hads downstream project [\#412](https://github.com/knsv/mermaid/pull/412) ([sinedied](https://github.com/sinedied))
- update usage and fix \#273 [\#406](https://github.com/knsv/mermaid/pull/406) ([jinntrance](https://github.com/jinntrance))
- Add https://github.com/raghur/mermaid-filter to downstream projects docs page [\#404](https://github.com/knsv/mermaid/pull/404) ([raghur](https://github.com/raghur))
- New neutral theme [\#395](https://github.com/knsv/mermaid/pull/395) ([sinedied](https://github.com/sinedied))
- fix cli issues [\#390](https://github.com/knsv/mermaid/pull/390) ([ben-page](https://github.com/ben-page))
- Add missing space for 'Labels out of bounds' section [\#386](https://github.com/knsv/mermaid/pull/386) ([The-Alchemist](https://github.com/The-Alchemist))
- Fix typo: `pats` -\> `paths` [\#382](https://github.com/knsv/mermaid/pull/382) ([swhgoon](https://github.com/swhgoon))
- Added class diagram example to README.md [\#379](https://github.com/knsv/mermaid/pull/379) ([HustLion](https://github.com/HustLion))
- override normal flowchart arrowhead to allow css styling [\#376](https://github.com/knsv/mermaid/pull/376) ([dodoinblue](https://github.com/dodoinblue))
- added sphinx extension [\#371](https://github.com/knsv/mermaid/pull/371) ([mgaitan](https://github.com/mgaitan))
- Fix typo in the sequence diagram documentation [\#369](https://github.com/knsv/mermaid/pull/369) ([ggpasqualino](https://github.com/ggpasqualino))
-
-## [6.0.0](https://github.com/knsv/mermaid/tree/6.0.0) (2016-05-29)
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.5.8...6.0.0)
-
-**Closed issues:**
-
- Docs css: code hard to read [\#324](https://github.com/knsv/mermaid/issues/324)
- About Markpad integration [\#323](https://github.com/knsv/mermaid/issues/323)
- How to link backwards in flowchart? [\#321](https://github.com/knsv/mermaid/issues/321)
- Help with editor [\#310](https://github.com/knsv/mermaid/issues/310)
- +1 [\#293](https://github.com/knsv/mermaid/issues/293)
- Basic chart does not render on Chome, but does in Firefox [\#290](https://github.com/knsv/mermaid/issues/290)
- Live editor is broken [\#285](https://github.com/knsv/mermaid/issues/285)
- "No such file or directory" trying to run mermaid 0.5.7 on OS X [\#284](https://github.com/knsv/mermaid/issues/284)
- participant name as "Long Long Name" [\#283](https://github.com/knsv/mermaid/issues/283)
- Windows - cli - could not find phantomjs at the specified path [\#236](https://github.com/knsv/mermaid/issues/236)
-
-**Merged pull requests:**
-
- The option of gantt for the spaces for the section names. [\#353](https://github.com/knsv/mermaid/pull/353) ([zeroyonichihachi](https://github.com/zeroyonichihachi))
- Gitgraph: Make reset work with parent ref carets [\#350](https://github.com/knsv/mermaid/pull/350) ([raghur](https://github.com/raghur))
- Remove the text-shadows that make the text look blurry [\#349](https://github.com/knsv/mermaid/pull/349) ([AsaAyers](https://github.com/AsaAyers))
- add line interpolation to linkStyle in flowchart [\#346](https://github.com/knsv/mermaid/pull/346) ([AlanHohn](https://github.com/AlanHohn))
- Support git graph diagrams in mermaid [\#344](https://github.com/knsv/mermaid/pull/344) ([raghur](https://github.com/raghur))
- Build and test execution changes [\#338](https://github.com/knsv/mermaid/pull/338) ([ssbarnea](https://github.com/ssbarnea))
- Reformatting of css files [\#331](https://github.com/knsv/mermaid/pull/331) ([Jmuccigr](https://github.com/Jmuccigr))
- \(WIP\) Sequence Diagram Title Support [\#320](https://github.com/knsv/mermaid/pull/320) ([bronsoja](https://github.com/bronsoja))
- activations doc + few fixes [\#318](https://github.com/knsv/mermaid/pull/318) ([ciekawy](https://github.com/ciekawy))
- Dark theme for better contrast on darker backgrounds [\#317](https://github.com/knsv/mermaid/pull/317) ([crodriguez1a](https://github.com/crodriguez1a))
- Activations [\#316](https://github.com/knsv/mermaid/pull/316) ([ciekawy](https://github.com/ciekawy))
- Support leading comments for sequenceDiagrams [\#312](https://github.com/knsv/mermaid/pull/312) ([ashsearle](https://github.com/ashsearle))
- Show a little lenience for white-space around names [\#309](https://github.com/knsv/mermaid/pull/309) ([ashsearle](https://github.com/ashsearle))
- Update list of downstream projects [\#307](https://github.com/knsv/mermaid/pull/307) ([maxArturo](https://github.com/maxArturo))
- Issue 299: Sequence diagram Loops: changing boxMargin spoils the "loop" notation [\#300](https://github.com/knsv/mermaid/pull/300) ([LarryKlugerDS](https://github.com/LarryKlugerDS))
- Issue 297 - src/mermaid.js generates bad code [\#298](https://github.com/knsv/mermaid/pull/298) ([LarryKlugerDS](https://github.com/LarryKlugerDS))
- Updated instructions for running tests [\#295](https://github.com/knsv/mermaid/pull/295) ([LarryKlugerDS](https://github.com/LarryKlugerDS))
- Add Markdown Plus to Downstream projects [\#288](https://github.com/knsv/mermaid/pull/288) ([tylerlong](https://github.com/tylerlong))
- Quote phantomPath so that it doesn't fail on window [\#286](https://github.com/knsv/mermaid/pull/286) ([raghur](https://github.com/raghur))
-
-## [0.5.8](https://github.com/knsv/mermaid/tree/0.5.8) (2016-01-27)
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.5.7...0.5.8)
-
-## [0.5.7](https://github.com/knsv/mermaid/tree/0.5.7) (2016-01-25)
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.5.6...0.5.7)
-
-**Closed issues:**
-
- Mermaid + LightPaper = ❤️ [\#280](https://github.com/knsv/mermaid/issues/280)
- Bower Integration [\#278](https://github.com/knsv/mermaid/issues/278)
- Mermaid breaks when variables end in 'v' [\#276](https://github.com/knsv/mermaid/issues/276)
- sequence diagrams don't support participant aliasing [\#263](https://github.com/knsv/mermaid/issues/263)
- One diagram that fails to render stops further execution on the page [\#259](https://github.com/knsv/mermaid/issues/259)
- Where to find line layout algorithm? [\#258](https://github.com/knsv/mermaid/issues/258)
- Compatibility with node.js [\#257](https://github.com/knsv/mermaid/issues/257)
- Label resizing with dynamically loaded fonts [\#255](https://github.com/knsv/mermaid/issues/255)
- SVG arrowheads are broken in the CLI [\#249](https://github.com/knsv/mermaid/issues/249)
- Cannot read property 'replace' of undefined [\#239](https://github.com/knsv/mermaid/issues/239)
-
-**Merged pull requests:**
-
- gh-50 Allow styling of edge labels in css [\#267](https://github.com/knsv/mermaid/pull/267) ([Anoia](https://github.com/Anoia))
- Allow sequenceDiagram participant aliasing [\#265](https://github.com/knsv/mermaid/pull/265) ([gibson042](https://github.com/gibson042))
-
-## [0.5.6](https://github.com/knsv/mermaid/tree/0.5.6) (2015-11-22)
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.5.5...0.5.6)
-
-**Implemented enhancements:**
-
- Add download SVG link to the live editor [\#144](https://github.com/knsv/mermaid/issues/144)
-
-**Fixed bugs:**
-
- Live Editor: Permalink address not being parsed [\#202](https://github.com/knsv/mermaid/issues/202)
-
-**Closed issues:**
-
- title doesn't work in sequenceDiagram [\#248](https://github.com/knsv/mermaid/issues/248)
- hypen-minus should be valid in sequence diagram alt/else/etc. descriptions [\#247](https://github.com/knsv/mermaid/issues/247)
- Broken in firefox? [\#245](https://github.com/knsv/mermaid/issues/245)
- When there is a Chinese symbol in the flowchart, it will crash。 [\#238](https://github.com/knsv/mermaid/issues/238)
- Non-alpha characters included in ALPHA token \(flow graph jison\) [\#232](https://github.com/knsv/mermaid/issues/232)
- subgraph not rendering with change to sample [\#231](https://github.com/knsv/mermaid/issues/231)
- sequence diagram requires a new line at the end? [\#229](https://github.com/knsv/mermaid/issues/229)
-
-**Merged pull requests:**
-
- Make sequenceDiagram terminal newline optional [\#253](https://github.com/knsv/mermaid/pull/253) ([gibson042](https://github.com/gibson042))
- Support sequenceDiagram "over" notes [\#252](https://github.com/knsv/mermaid/pull/252) ([gibson042](https://github.com/gibson042))
- Properly handle "rest of line" statements [\#251](https://github.com/knsv/mermaid/pull/251) ([gibson042](https://github.com/gibson042))
- CLI: Propagate exit code from lib \(i.e., phantomjs\) [\#250](https://github.com/knsv/mermaid/pull/250) ([gibson042](https://github.com/gibson042))
- flowRender.js - Fix FontAwesome icon insert [\#244](https://github.com/knsv/mermaid/pull/244) ([ma-zal](https://github.com/ma-zal))
- updated sequence diagram link in live editor [\#242](https://github.com/knsv/mermaid/pull/242) ([r-a-v-a-s](https://github.com/r-a-v-a-s))
- updated links in README.md [\#240](https://github.com/knsv/mermaid/pull/240) ([r-a-v-a-s](https://github.com/r-a-v-a-s))
- Ellipse syntax [\#237](https://github.com/knsv/mermaid/pull/237) ([spect88](https://github.com/spect88))
- Allow keywords as suffixes of node ids [\#235](https://github.com/knsv/mermaid/pull/235) ([spect88](https://github.com/spect88))
- Highlighted the editor in the nav [\#234](https://github.com/knsv/mermaid/pull/234) ([knsv](https://github.com/knsv))
- Live editor tweaks [\#233](https://github.com/knsv/mermaid/pull/233) ([spect88](https://github.com/spect88))
- Add a Gitter chat badge to README.md [\#230](https://github.com/knsv/mermaid/pull/230) ([gitter-badger](https://github.com/gitter-badger))
-
-## [0.5.5](https://github.com/knsv/mermaid/tree/0.5.5) (2015-10-21)
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.5.4...0.5.5)
-
-**Closed issues:**
-
- sequence diagram, arrowhead instead of crosshead [\#227](https://github.com/knsv/mermaid/issues/227)
-
-**Merged pull requests:**
-
- Fix a typo: crosshead --\> arrowhead [\#228](https://github.com/knsv/mermaid/pull/228) ([tylerlong](https://github.com/tylerlong))
-
-## [0.5.4](https://github.com/knsv/mermaid/tree/0.5.4) (2015-10-19)
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.5.3...0.5.4)
-
-**Implemented enhancements:**
-
- Set log level from mermaid configuration [\#220](https://github.com/knsv/mermaid/issues/220)
- Links in sequence diagrams [\#159](https://github.com/knsv/mermaid/issues/159)
- Add syntax for double headed arrows [\#123](https://github.com/knsv/mermaid/issues/123)
-
-**Fixed bugs:**
-
- comment characters `%%` cause parse error [\#141](https://github.com/knsv/mermaid/issues/141)
-
-**Closed issues:**
-
- Marker-end arrow cannot be shown for URL with query parameter [\#225](https://github.com/knsv/mermaid/issues/225)
- Please update bower's D3 version [\#221](https://github.com/knsv/mermaid/issues/221)
- Width fixed to 400px [\#204](https://github.com/knsv/mermaid/issues/204)
- render to png from the cli does not display the marker-end arrow heads [\#181](https://github.com/knsv/mermaid/issues/181)
-
-**Merged pull requests:**
-
- Allow `end` as a substring of vertex id [\#224](https://github.com/knsv/mermaid/pull/224) ([spect88](https://github.com/spect88))
- Remove duplicate npm dependencies: d3 and he [\#223](https://github.com/knsv/mermaid/pull/223) ([spect88](https://github.com/spect88))
-
-## [0.5.3](https://github.com/knsv/mermaid/tree/0.5.3) (2015-10-04)
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.5.2...0.5.3)
-
-## [0.5.2](https://github.com/knsv/mermaid/tree/0.5.2) (2015-10-04)
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.5.1...0.5.2)
-
-**Implemented enhancements:**
-
- Support for hyperlink and tooltip [\#34](https://github.com/knsv/mermaid/issues/34)
-
-**Closed issues:**
-
- Installing “atom-mermaid@0.1.3” failed [\#218](https://github.com/knsv/mermaid/issues/218)
- node feature request [\#211](https://github.com/knsv/mermaid/issues/211)
- Please add prefix for styles [\#208](https://github.com/knsv/mermaid/issues/208)
- Bad handling of block arguments [\#207](https://github.com/knsv/mermaid/issues/207)
- please consider port to mac osx  [\#203](https://github.com/knsv/mermaid/issues/203)
- allow phantomjs \>=1.9.x [\#201](https://github.com/knsv/mermaid/issues/201)
- syntax for venn diagrams? [\#200](https://github.com/knsv/mermaid/issues/200)
- Broken CLI Graphs? \(v0.5.1\) [\#196](https://github.com/knsv/mermaid/issues/196)
- Static site does not render under HTTPS [\#194](https://github.com/knsv/mermaid/issues/194)
- Error on simple graph [\#192](https://github.com/knsv/mermaid/issues/192)
- Escape "~" [\#191](https://github.com/knsv/mermaid/issues/191)
- Trying to add link using 'click' to flowchart [\#188](https://github.com/knsv/mermaid/issues/188)
- cli: no lines and arrowheads rendered / only dotted lines [\#187](https://github.com/knsv/mermaid/issues/187)
- text of mermaid div displayed on page [\#186](https://github.com/knsv/mermaid/issues/186)
- using mermaid with laravel [\#185](https://github.com/knsv/mermaid/issues/185)
- Atom editor package [\#183](https://github.com/knsv/mermaid/issues/183)
- Auto linewrap for notes in sequence diagrams [\#178](https://github.com/knsv/mermaid/issues/178)
- Execute code after initialize [\#176](https://github.com/knsv/mermaid/issues/176)
- Autoscaling for all diagram types [\#175](https://github.com/knsv/mermaid/issues/175)
- Problem wit click event callback [\#174](https://github.com/knsv/mermaid/issues/174)
- How to escape characters? [\#170](https://github.com/knsv/mermaid/issues/170)
- it can not work [\#167](https://github.com/knsv/mermaid/issues/167)
- Broken subgraph using the CLI [\#153](https://github.com/knsv/mermaid/issues/153)
- IE Support issue [\#142](https://github.com/knsv/mermaid/issues/142)
- Flowchart truncated [\#140](https://github.com/knsv/mermaid/issues/140)
- Double Quote as text is not working [\#219](https://github.com/knsv/mermaid/issues/219)
- classDef / class not working with htmlLabels? [\#210](https://github.com/knsv/mermaid/issues/210)
- Links in graph missing [\#209](https://github.com/knsv/mermaid/issues/209)
- Last word in comment boxes getting cut off by word wrap library : \( [\#195](https://github.com/knsv/mermaid/issues/195)
- Escaping characters in sequence diagram [\#193](https://github.com/knsv/mermaid/issues/193)
- SVG foreignObject rendering [\#180](https://github.com/knsv/mermaid/issues/180)
- IE9 issue  [\#179](https://github.com/knsv/mermaid/issues/179)
- inoperable in an AMD/requirejs environment: IPython Notebook [\#127](https://github.com/knsv/mermaid/issues/127)
- \[Parser\] Hyphen in participant name bring TypeError [\#74](https://github.com/knsv/mermaid/issues/74)
-
-**Merged pull requests:**
-
- Update flowchart.md [\#214](https://github.com/knsv/mermaid/pull/214) ([orschiro](https://github.com/orschiro))
- Default style when using the CLI [\#205](https://github.com/knsv/mermaid/pull/205) ([gillesdemey](https://github.com/gillesdemey))
- Gantt chart - add minutes and seconds durations [\#198](https://github.com/knsv/mermaid/pull/198) ([dbrans](https://github.com/dbrans))
- Using QUnit for AMD testing [\#190](https://github.com/knsv/mermaid/pull/190) ([bollwyvl](https://github.com/bollwyvl))
- Update phantomscript.js [\#182](https://github.com/knsv/mermaid/pull/182) ([phairow](https://github.com/phairow))
-
-## [0.5.1](https://github.com/knsv/mermaid/tree/0.5.1) (2015-06-21)
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.5.0...0.5.1)
-
-**Implemented enhancements:**
-
- To SVG Export [\#146](https://github.com/knsv/mermaid/issues/146)
- Possibility to set the width of the generated flowchart [\#129](https://github.com/knsv/mermaid/issues/129)
- Special characters break parsing [\#54](https://github.com/knsv/mermaid/issues/54)
- Responsive graph layout for mobile viewers [\#51](https://github.com/knsv/mermaid/issues/51)
- Styling connector lines [\#31](https://github.com/knsv/mermaid/issues/31)
-
-**Fixed bugs:**
-
- flowchart - styling of edges via css overrides specific styles set in the graph definition [\#128](https://github.com/knsv/mermaid/issues/128)
-
-**Closed issues:**
-
- Live editor is broken [\#173](https://github.com/knsv/mermaid/issues/173)
- 0.5.0 no longer respects custom date definitions in Gantt diagrams [\#171](https://github.com/knsv/mermaid/issues/171)
- Drop label character restrictions [\#162](https://github.com/knsv/mermaid/issues/162)
- can't nest subgraphs in flowchart [\#161](https://github.com/knsv/mermaid/issues/161)
- Unable to generate gantt diagram with mermaid CLI [\#158](https://github.com/knsv/mermaid/issues/158)
- Inline css by "mermaid" [\#157](https://github.com/knsv/mermaid/issues/157)
- Finite State Machine Diagram [\#152](https://github.com/knsv/mermaid/issues/152)
- How to center align gantt diagram [\#150](https://github.com/knsv/mermaid/issues/150)
- Security concern regarding class definition [\#148](https://github.com/knsv/mermaid/issues/148)
- File Extension [\#147](https://github.com/knsv/mermaid/issues/147)
- `setTimeout` with clusters problematic with programmatic edits and no callback [\#133](https://github.com/knsv/mermaid/issues/133)
- module.exports.cloneCssStyles\(\) in combination with Angularjs breaks display in Chrome and IE [\#126](https://github.com/knsv/mermaid/issues/126)
- Gantt - suitable xAxis for longer project [\#125](https://github.com/knsv/mermaid/issues/125)
- How to get started with this project ? [\#64](https://github.com/knsv/mermaid/issues/64)
-
-**Merged pull requests:**
-
- Remove moot `version` property from bower.json [\#172](https://github.com/knsv/mermaid/pull/172) ([kkirsche](https://github.com/kkirsche))
-
-## [0.5.0](https://github.com/knsv/mermaid/tree/0.5.0) (2015-06-07)
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.4.0...0.5.0)
-
-**Implemented enhancements:**
-
- Add a css file, mermaid.css, with default styling [\#122](https://github.com/knsv/mermaid/issues/122)
- software architecture diagram [\#36](https://github.com/knsv/mermaid/issues/36)
- Support for bar charts and pie diagrams [\#22](https://github.com/knsv/mermaid/issues/22)
-
-**Closed issues:**
-
- uglifyjs wanrings which means we can improve the code [\#156](https://github.com/knsv/mermaid/issues/156)
- New\(er\) features unavailable in downloadable js files? [\#151](https://github.com/knsv/mermaid/issues/151)
- Add gh-gapes link to description [\#143](https://github.com/knsv/mermaid/issues/143)
- Some examples not displayed on Firefox 36.0.1 [\#138](https://github.com/knsv/mermaid/issues/138)
- tags ending in a "v" don't render [\#132](https://github.com/knsv/mermaid/issues/132)
- Links in flowchart [\#131](https://github.com/knsv/mermaid/issues/131)
- Using the library for iOS development [\#130](https://github.com/knsv/mermaid/issues/130)
- Add capability for gantt diagrams [\#118](https://github.com/knsv/mermaid/issues/118)
- lower case v causes error in the parser [\#108](https://github.com/knsv/mermaid/issues/108)
- Label's css conflict with boostrap's .label [\#67](https://github.com/knsv/mermaid/issues/67)
- TypeError: Cannot read property 'layout' of undefined [\#37](https://github.com/knsv/mermaid/issues/37)
-
-**Merged pull requests:**
-
- Dev 0.5.0 [\#168](https://github.com/knsv/mermaid/pull/168) ([knsv](https://github.com/knsv))
- Fix spacing [\#164](https://github.com/knsv/mermaid/pull/164) ([rhcarvalho](https://github.com/rhcarvalho))
- Fixing typo: "Think" -\> "Thick" [\#160](https://github.com/knsv/mermaid/pull/160) ([it0a](https://github.com/it0a))
- IE, local html, cssRules access is denied [\#155](https://github.com/knsv/mermaid/pull/155) ([tylerlong](https://github.com/tylerlong))
- Add automatically generated change log file. [\#139](https://github.com/knsv/mermaid/pull/139) ([skywinder](https://github.com/skywinder))
- Adding init argument to the global API [\#137](https://github.com/knsv/mermaid/pull/137) ([bollwyvl](https://github.com/bollwyvl))
- Add description of manual calling of init [\#136](https://github.com/knsv/mermaid/pull/136) ([bollwyvl](https://github.com/bollwyvl))
- Allow other forms of node selection for init\(\) [\#135](https://github.com/knsv/mermaid/pull/135) ([bollwyvl](https://github.com/bollwyvl))
- Use a library-level variable for assigning ids [\#134](https://github.com/knsv/mermaid/pull/134) ([bollwyvl](https://github.com/bollwyvl))
-
-## [0.4.0](https://github.com/knsv/mermaid/tree/0.4.0) (2015-03-01)
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.3.5...0.4.0)
-
-**Implemented enhancements:**
-
- Assymetric shapes not documented [\#82](https://github.com/knsv/mermaid/issues/82)
- Improve arrows [\#3](https://github.com/knsv/mermaid/issues/3)
-
-**Fixed bugs:**
-
- NoModificationAllowedError [\#23](https://github.com/knsv/mermaid/issues/23)
-
-**Closed issues:**
-
- subgraph background is black in rendered flowchart PNG via CLI [\#121](https://github.com/knsv/mermaid/issues/121)
- Integrate editor at https://github.com/naseer/mermaid-webapp [\#110](https://github.com/knsv/mermaid/issues/110)
- Internet Explorer Support [\#99](https://github.com/knsv/mermaid/issues/99)
-
-## [0.3.5](https://github.com/knsv/mermaid/tree/0.3.5) (2015-02-15)
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.3.4...0.3.5)
-
-## [0.3.4](https://github.com/knsv/mermaid/tree/0.3.4) (2015-02-15)
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.3.3...0.3.4)
-
-**Implemented enhancements:**
-
- Apply styling from css when using the CLI utility [\#85](https://github.com/knsv/mermaid/issues/85)
- Generated SVG works poorly outside web browsers [\#58](https://github.com/knsv/mermaid/issues/58)
- Generating SVG text blob for use in Node [\#2](https://github.com/knsv/mermaid/issues/2)
-
-**Closed issues:**
-
- Subgraph syntax bug? [\#120](https://github.com/knsv/mermaid/issues/120)
- Live editor [\#115](https://github.com/knsv/mermaid/issues/115)
- Error in "Basic Syntax" wiki page [\#113](https://github.com/knsv/mermaid/issues/113)
- semicolons, anyone? [\#111](https://github.com/knsv/mermaid/issues/111)
- undefined `sequenceConfig` fails [\#109](https://github.com/knsv/mermaid/issues/109)
- Sequence Diagrams: Show Actors below as well [\#106](https://github.com/knsv/mermaid/issues/106)
- Allow overriding sequence diagram configuration \(SVG properties\) [\#103](https://github.com/knsv/mermaid/issues/103)
- Error when rendering A-- This is the text -- B [\#102](https://github.com/knsv/mermaid/issues/102)
- Clipping in documentation [\#97](https://github.com/knsv/mermaid/issues/97)
- isolate class styling to the svg container [\#92](https://github.com/knsv/mermaid/issues/92)
- Make the new graph declaration more visual [\#40](https://github.com/knsv/mermaid/issues/40)
-
-**Merged pull requests:**
-
- Add live editor [\#119](https://github.com/knsv/mermaid/pull/119) ([naseer](https://github.com/naseer))
- Adds CSS option to the CLI [\#116](https://github.com/knsv/mermaid/pull/116) ([fardog](https://github.com/fardog))
- Update flowchart.md in response Issue \#113 [\#114](https://github.com/knsv/mermaid/pull/114) ([vijay40](https://github.com/vijay40))
- Ignore all files except the license and dist/ folder when installing with Bower. [\#112](https://github.com/knsv/mermaid/pull/112) ([jasonbellamy](https://github.com/jasonbellamy))
-
-## [0.3.3](https://github.com/knsv/mermaid/tree/0.3.3) (2015-01-25)
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.3.2...0.3.3)
-
-**Implemented enhancements:**
-
- Support for dotted links [\#26](https://github.com/knsv/mermaid/issues/26)
-
-**Closed issues:**
-
- Missing arrows in sequence diagram [\#98](https://github.com/knsv/mermaid/issues/98)
- Error with \>9 linkStyles [\#95](https://github.com/knsv/mermaid/issues/95)
-
-**Merged pull requests:**
-
- Require d3 directly to better support Node usage [\#107](https://github.com/knsv/mermaid/pull/107) ([markdalgleish](https://github.com/markdalgleish))
- update doc with -c option [\#105](https://github.com/knsv/mermaid/pull/105) ([jjmr](https://github.com/jjmr))
- Add new parameter to the console client to override the svg configuration in sequence diagrams [\#104](https://github.com/knsv/mermaid/pull/104) ([jjmr](https://github.com/jjmr))
- Text based labels, new shape [\#101](https://github.com/knsv/mermaid/pull/101) ([bjowes](https://github.com/bjowes))
- fix html tags in example usage [\#100](https://github.com/knsv/mermaid/pull/100) ([deiwin](https://github.com/deiwin))
-
-## [0.3.2](https://github.com/knsv/mermaid/tree/0.3.2) (2015-01-11)
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.3.1...0.3.2)
-
-**Implemented enhancements:**
-
- Make link text look like it is on the line [\#53](https://github.com/knsv/mermaid/issues/53)
-
-**Closed issues:**
-
- disable auto render [\#91](https://github.com/knsv/mermaid/issues/91)
- Tidy breaks mermaid \(linebreaks in \<div\>\) [\#87](https://github.com/knsv/mermaid/issues/87)
- Bug: \<br\> being rendered as text in node [\#73](https://github.com/knsv/mermaid/issues/73)
- Graph edges appear to render outside of the canvas [\#70](https://github.com/knsv/mermaid/issues/70)
-
-**Merged pull requests:**
-
- Merge pull request \#1 from knsv/master [\#96](https://github.com/knsv/mermaid/pull/96) ([gkchic](https://github.com/gkchic))
- Removed duplicated section in flowchart docs [\#94](https://github.com/knsv/mermaid/pull/94) ([kaime](https://github.com/kaime))
- Grammar changes to sequence page [\#93](https://github.com/knsv/mermaid/pull/93) ([gkchic](https://github.com/gkchic))
- Github buttons [\#89](https://github.com/knsv/mermaid/pull/89) ([gkchic](https://github.com/gkchic))
- Template change [\#88](https://github.com/knsv/mermaid/pull/88) ([gkchic](https://github.com/gkchic))
-
-## [0.3.1](https://github.com/knsv/mermaid/tree/0.3.1) (2015-01-05)
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.3.0...0.3.1)
-
-**Implemented enhancements:**
-
- Support for sequence diagrams [\#16](https://github.com/knsv/mermaid/issues/16)
- Client utility for mermaid [\#6](https://github.com/knsv/mermaid/issues/6)
-
-**Closed issues:**
-
- Non ASCII chars in labels [\#84](https://github.com/knsv/mermaid/issues/84)
- 'undefined' titles of Quicklinks on the usage page [\#80](https://github.com/knsv/mermaid/issues/80)
- \[cli\] Enhancement proposal: not fail --version / --help if phantomjs isn't installed [\#71](https://github.com/knsv/mermaid/issues/71)
-
-**Merged pull requests:**
-
- Flowchart doc: Text in the circle now in a circle [\#81](https://github.com/knsv/mermaid/pull/81) ([Grahack](https://github.com/Grahack))
- Fix for issue \#73 [\#79](https://github.com/knsv/mermaid/pull/79) ([it0a](https://github.com/it0a))
- Ink template [\#78](https://github.com/knsv/mermaid/pull/78) ([gkchic](https://github.com/gkchic))
- Show help and version even if phantom isn't present. Fixes \#71 [\#75](https://github.com/knsv/mermaid/pull/75) ([fardog](https://github.com/fardog))
- Add apostrophe & 'and' [\#72](https://github.com/knsv/mermaid/pull/72) ([sudodoki](https://github.com/sudodoki))
-
-## [0.3.0](https://github.com/knsv/mermaid/tree/0.3.0) (2014-12-22)
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.16...0.3.0)
-
-**Implemented enhancements:**
-
- How do I do comments? [\#47](https://github.com/knsv/mermaid/issues/47)
- Improve readability with new line as terminator and whitespace [\#38](https://github.com/knsv/mermaid/issues/38)
-
-**Fixed bugs:**
-
- This characters failed the lexical parsing [\#46](https://github.com/knsv/mermaid/issues/46)
-
-**Closed issues:**
-
- Trailing whitespace at the end of lines is not ignored [\#55](https://github.com/knsv/mermaid/issues/55)
- Use classes instead of inline style for easy styling [\#24](https://github.com/knsv/mermaid/issues/24)
-
-**Merged pull requests:**
-
- Adds Command Line Interface for generating PNGs from mermaid description files [\#69](https://github.com/knsv/mermaid/pull/69) ([fardog](https://github.com/fardog))
- Allow special symbols for direction along with acronyms [\#66](https://github.com/knsv/mermaid/pull/66) ([vijay40](https://github.com/vijay40))
-
-## [0.2.16](https://github.com/knsv/mermaid/tree/0.2.16) (2014-12-15)
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.15...0.2.16)
-
-**Fixed bugs:**
-
- Lines routed outside visible area [\#19](https://github.com/knsv/mermaid/issues/19)
-
-**Closed issues:**
-
- Mermaid not rendering properly on Wordpress pages [\#59](https://github.com/knsv/mermaid/issues/59)
- Improve example page with live demo [\#52](https://github.com/knsv/mermaid/issues/52)
- Does not render upon AngularJS Updates [\#45](https://github.com/knsv/mermaid/issues/45)
- Download link in README.MD doesn't work. [\#42](https://github.com/knsv/mermaid/issues/42)
- linkStyle usage is not obvious [\#41](https://github.com/knsv/mermaid/issues/41)
- Move \*.spec.js in src/ to test/ [\#35](https://github.com/knsv/mermaid/issues/35)
-
-**Merged pull requests:**
-
- New grammar will allow statements ending without semicolon as disccused in Issue \#38 [\#63](https://github.com/knsv/mermaid/pull/63) ([vijay40](https://github.com/vijay40))
- Class based styling [\#62](https://github.com/knsv/mermaid/pull/62) ([bjowes](https://github.com/bjowes))
- Fix typos [\#60](https://github.com/knsv/mermaid/pull/60) ([sublimino](https://github.com/sublimino))
- Included .DS\_Store in gitignore [\#57](https://github.com/knsv/mermaid/pull/57) ([alvynmcq](https://github.com/alvynmcq))
- Improves readability discussed in issue \#38 [\#56](https://github.com/knsv/mermaid/pull/56) ([vijay40](https://github.com/vijay40))
- Added a linting task for gulp [\#43](https://github.com/knsv/mermaid/pull/43) ([serv](https://github.com/serv))
-
-## [0.2.15](https://github.com/knsv/mermaid/tree/0.2.15) (2014-12-05)
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.14...0.2.15)
-
-**Fixed bugs:**
-
- Error with some characters [\#25](https://github.com/knsv/mermaid/issues/25)
- Cap-cased words break parser [\#8](https://github.com/knsv/mermaid/issues/8)
-
-**Closed issues:**
-
- Question marks don't render properly with /dist/mermaid.full.min.js [\#30](https://github.com/knsv/mermaid/issues/30)
- Provide parse function in browser widthout `require`? [\#21](https://github.com/knsv/mermaid/issues/21)
- Better label text support [\#18](https://github.com/knsv/mermaid/issues/18)
-
-**Merged pull requests:**
-
- Include bower\_components/ to .gitignore [\#33](https://github.com/knsv/mermaid/pull/33) ([serv](https://github.com/serv))
- Fixed reference to Git repo. [\#32](https://github.com/knsv/mermaid/pull/32) ([guyellis](https://github.com/guyellis))
-
-## [0.2.14](https://github.com/knsv/mermaid/tree/0.2.14) (2014-12-03)
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.13...0.2.14)
-
-## [0.2.13](https://github.com/knsv/mermaid/tree/0.2.13) (2014-12-03)
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.10...0.2.13)
-
-**Implemented enhancements:**
-
- Publish to NPM [\#7](https://github.com/knsv/mermaid/issues/7)
-
-**Closed issues:**
-
- modified init to be applied more than once [\#29](https://github.com/knsv/mermaid/issues/29)
- Wanted to know build process for the project. [\#28](https://github.com/knsv/mermaid/issues/28)
- can not support Chinese description [\#20](https://github.com/knsv/mermaid/issues/20)
- Support unicode chars in labels [\#9](https://github.com/knsv/mermaid/issues/9)
-
-## [0.2.10](https://github.com/knsv/mermaid/tree/0.2.10) (2014-12-01)
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.9...0.2.10)
-
-## [0.2.9](https://github.com/knsv/mermaid/tree/0.2.9) (2014-12-01)
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.8...0.2.9)
-
-**Closed issues:**
-
- Add link to jsbin playground to README [\#11](https://github.com/knsv/mermaid/issues/11)
- What are the requirements ? [\#10](https://github.com/knsv/mermaid/issues/10)
-
-**Merged pull requests:**
-
- Allow unicode chars in labels [\#13](https://github.com/knsv/mermaid/pull/13) ([codebeige](https://github.com/codebeige))
-
-## [0.2.8](https://github.com/knsv/mermaid/tree/0.2.8) (2014-12-01)
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.7...0.2.8)
-
-## [0.2.7](https://github.com/knsv/mermaid/tree/0.2.7) (2014-12-01)
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.6...0.2.7)
-
-**Closed issues:**
-
- Provide parser as separate module [\#4](https://github.com/knsv/mermaid/issues/4)
-
-## [0.2.6](https://github.com/knsv/mermaid/tree/0.2.6) (2014-11-27)
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.5...0.2.6)
-
-## [0.2.5](https://github.com/knsv/mermaid/tree/0.2.5) (2014-11-27)
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.4...0.2.5)
-
-**Merged pull requests:**
-
- Added new shapes! [\#1](https://github.com/knsv/mermaid/pull/1) ([bjowes](https://github.com/bjowes))
-
-## [0.2.4](https://github.com/knsv/mermaid/tree/0.2.4) (2014-11-25)
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.3...0.2.4)
-
-## [0.2.3](https://github.com/knsv/mermaid/tree/0.2.3) (2014-11-24)
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.2...0.2.3)
-
-## [0.2.2](https://github.com/knsv/mermaid/tree/0.2.2) (2014-11-22)
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.1...0.2.2)
-
-## [0.2.1](https://github.com/knsv/mermaid/tree/0.2.1) (2014-11-22)
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.0...0.2.1)
-
-## [0.2.0](https://github.com/knsv/mermaid/tree/0.2.0) (2014-11-22)
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.1.1...0.2.0)
-
-## [0.1.1](https://github.com/knsv/mermaid/tree/0.1.1) (2014-11-17)
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.1.0...0.1.1)
-
-## [0.1.0](https://github.com/knsv/mermaid/tree/0.1.0) (2014-11-16)
--- a/docs/tutorials-and-community/README.md
+++ b/docs/tutorials-and-community/README.md
@ -1,6 +0,0 @@
---
-sort: 3
---
-
-# Contributions and Community
-{% include list.liquid %}
--- a/docs/tutorials-and-community/development.md
+++ b/docs/tutorials-and-community/development.md
@ -1,154 +0,0 @@
---
-sort: 1
-title: Development and Contribution
---
-
-# Development 🙌
-
-
-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.
-
-**All the documents displayed in the github.io page are listed in [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/docs/assets/_sidebar.md)**
- 
-**Note: You will have to edit the document to see its contents. Commits and PR's should be directed to the develop branch.**
-
-## Branching
-
-Going forward we will use a **Git 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 to master and kill the release branch.
-
-This means... **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. It is as follows:
-
-* Large changes reviewed by knsv or other developer asked to review by knsv
-* Smaller low-risk changes like dependecies, documentation etc can be merged by active collaborators
-* documentation (updates to the docs folder are enocouraged and also allowed via direct commits)
-
-When you commit code, create a branch, let it start with the type like feature or bug followed by the issue number for reference and text that describes the issue. 
-
-
-**One example:**
-
-`feature/945_state_diagrams`
-
-**Another:**
-
-`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: 
-
-**All the documents displayed in the github.io page are listed in [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/docs/assets/_sidebar.md). Click edit it to see them.**
-
-The contents of [https://mermaid-js.github.io/mermaid/](https://mermaid-js.github.io/mermaid/) are based on the docs from **Master** Branch. 
-
-## How to Contribute to Docs
-
-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 [jekyll-rtd-theme](https://github.com/rundocs/jekyll-rtd-theme).
-
-## Preview
-If you want to preview the documentation site on your machine, you will need to install  [Ruby development environment](https://jekyllrb.com/docs/installation/):
-
-1. Install a full [Ruby development environment](https://jekyllrb.com/docs/installation/)
-2. Change into docs directory
-```sh
-make
-```
-3. Build the site and make it available on a local server
-```sh
-make server
-```
-4. Browse to [http://localhost:4000/mermaid/](http://localhost:4000/mermaid/)
-
-### **Add unit tests for the parsing part**
-
-This is important so that, if someone else does a change to the grammar that does not know about this great feature, gets 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 diagram. This ensures that the rendering of that feature in the e2e will be reviewed in the release process going forward. Less chance that it breaks!
-
-To start working with the e2e tests, run `yarn dev` to start the dev server, after that start cypress by running `cypress open` in the mermaid folder. (Make sure you have path to cypress in order, the binary is located in node_modules/.bin).
-
-The rendering tests are very straightforward to create. There is a function imgSnapshotTest. This function takes a diagram in text form, the mermaid options and 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 for review it if it differs.
-
-This is what a rendering test looks like:
-```
-  it('should render forks and joins', () => {
-    imgSnapshotTest(
-      `
-    stateDiagram
-    state fork_state &lt;&lt;fork&gt;&gt;
-      [*] --> fork_state
-      fork_state --> State2
-      fork_state --> State3
-
-      state join_state &lt;&lt;join&gt;&gt;
-      State2 --> join_state
-      State3 --> join_state
-      join_state --> State4
-      State4 --> [*]
-    `,
-      { logLevel: 0 }
-    );
-    cy.get('svg');
-  });
-  ```
-
-
-### **Docs or it Didn't Happen**
-
-Finally, if it is not in the documentation, no one will know about it and then **no one will use it**. Wouldn't that be sad? With all the effort that was put into the feature?
-
-The docs are located in the docs folder and are ofc written in markdown. Just pick the right section and start typing. If you want to add to the structure as in adding a new section and new file you do that via the _navbar.md.
-
-The changes in master is reflected in [https://mermaid-js.github.io/mermaid/](https://mermaid-js.github.io/mermaid/) once released the updates are commited to [https://mermaid-js.github.io/#/](https://mermaid-js.github.io/mermaid/#/).
-
-### Questions and/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).
-
-If you want to use an editor on your own computer, you may follow these steps:
-* Find the Markdown file (.md) to edit in the [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs) directory on the develop branch.
-* Create a fork of the develop branch.
-* Make changes or add new documentation.
-* Commit changes to your fork and push it to GitHub.
-* Create a pull request of your fork.
-
-If you don't have such editor on your computer, you may follow these steps:
-* Login at [GitHub.com](https://www.github.com).
-* Navigate to [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs).
-* To edit a file, click the pencil icon at the top-right of the file contents panel.
-* Describe what you changed in the "Propose file change" section, located at the bottom of the page.
-* Submit your changes by clicking the button "Propose file change" at the bottom (by automatic creation of a fork and a new branch).
-* 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)
--- a/docs/tutorials-and-community/newDiagram.md
+++ b/docs/tutorials-and-community/newDiagram.md
@ -1,118 +0,0 @@
---
-sort: 2
-title: Adding a New Diagram/Chart 
---
-
-# Adding a New Diagram/Chart 📊
-
-
-### Step 1: Grammar & Parsing
-
-
-#### Grammar
-
-This would be to define a jison grammar for the new diagram type. That should start with a way to identify that the text in the mermaid tag is a diagram of that type. Create a new folder under diagrams for your new diagram type and a parser folder in it. This leads us to step 2.
-
-For instance:
-
-* the flowchart starts with the keyword graph.
-* the sequence diagram starts with the keyword sequenceDiagram
-
-
-#### Store data found during parsing
-
-There are some jison specific sub steps here where the parser stores the data encountered when parsing the diagram, this data is later used by the renderer. You can during the parsing call a object provided to the parser by the user of the parser. This object can be called during parsing for storing data.
-
-```
-statement
-	: 'participant' actor  { $$='actor'; }
-	| signal               { $$='signal'; }
-	| note_statement       { $$='note';  }
-	| 'title' message      { yy.setTitle($2);  }
-	;
-```
-
-In the extract of the grammar above, it is defined that a call to the setTitle method in the data object will be done when parsing and the title keyword is encountered.
-
-```tip
-Make sure that the `parseError` function for the parser is defined and calling `mermaidPAI.parseError`. This way a common way of detecting parse errors is provided for the end-user.
-```
-
-For more info look in the example diagram type:
-
-The `yy` object has the following function:
-
-```javascript
-exports.parseError = function(err, hash){
-   mermaidAPI.parseError(err, hash)
-};
-```
-
-when parsing the `yy` object is initialized as per below:
-
-```javascript
-var parser
-parser = exampleParser.parser
-parser.yy = db
-```
-
-
-### Step 2: Rendering
-
-Write a renderer that given the data found during parsing renders the diagram. To look at an example look at sequendeRenderer.js rather then the flowchart renderer as this is a more generic example.
-
-Place the renderer in the diagram folder.
-
-
-### Step 3: Detection of the new diagram type
-
-The second thing to do is to add the capability to detect the new new diagram to type to the detectType in utils.js. The detection should return a key for the new diagram type.
-
-
-### Step 4: The final piece - triggering the rendering
-
-At this point when mermaid is trying to render the diagram, it will detect it as being of the new type but there will be no match when trying to render the diagram. To fix this add a new case in the switch statement in main.js:init this should match the diagram type returned from step #2. The code in this new case statement should call the renderer for the diagram type with the data found by the parser as an argument.
-
-
-## Usage of the parser as a separate module
-
-
-### Setup
-
-```javascript
-var graph = require('./graphDb')
-var flow = require('./parser/flow')
-flow.parser.yy = graph
-```
-
-
-### Parsing
-
-```javascript
-flow.parser.parse(text)
-```
-
-
-### Data extraction
-
-```javascript
-graph.getDirection()
-graph.getVertices()
-graph.getEdges()
-```
-
-The parser is also exposed in the mermaid api by calling:
-
-```javascript
-var parser = mermaid.getParser()
-```
-
-Note that the parse needs a graph object to store the data as per:
-
-```javascript
-flow.parser.yy = graph
-```
-
-Look at `graphDb.js` for more details on that object.
-
-
--- a/jisonLoader.js
+++ b/jisonLoader.js
@ -1,6 +0,0 @@
-const { Generator } = require('jison')
-const { getOptions } = require('loader-utils')
-
-module.exports = function jisonLoader (source) {
-  return new Generator(source, getOptions(this)).generate()
-}
--- a/jisonTransformer.js
+++ b/jisonTransformer.js
@ -1,9 +0,0 @@
-const { Generator } = require('jison')
-
-module.exports = {
-  process (source, filename, config, transformOptions) {
-    return new Generator(source, {
-      'token-stack': true
-    }).generate()
-  }
-}
--- a/src/defaultConfig.js
+++ b/src/defaultConfig.js
@ -410,9 +410,9 @@ const config = {
     * | --------------- | ---------------------------------------------------- | ------ | -------- | --------------------------- |
     * | actorFontFamily | This sets the font family of the actor's description | string | Required | Any Possible CSS FontFamily |
     *
-     * **Notes:** Default value: "'Open-Sans", "sans-serif"'
+     * **Notes:** Default value: "'Open Sans", sans-serif'
     */
-    actorFontFamily: '"Open-Sans", "sans-serif"',
+    actorFontFamily: '"Open Sans", sans-serif',

    /**
     * This sets the font weight of the actor's description
@ -802,7 +802,7 @@ const config = {
     */
    rightAngles: false,
    taskFontSize: 14,
-    taskFontFamily: '"Open-Sans", "sans-serif"',
+    taskFontFamily: '"Open Sans", sans-serif',
    taskMargin: 50,
    // width of activation box
    activationWidth: 10,
@ -1064,25 +1064,6 @@ const config = {
    rect_padding: 10,
    line_height: 20,
  },
-  gitGraph: {
-    diagramPadding: 8,
-    nodeSpacing: 150,
-    nodeFillColor: 'yellow',
-    nodeStrokeWidth: 2,
-    nodeStrokeColor: 'grey',
-    lineStrokeWidth: 4,
-    branchOffset: 50,
-    lineColor: 'grey',
-    leftMargin: 50,
-    branchColors: ['#442f74', '#983351', '#609732', '#AA9A39'],
-    nodeRadius: 10,
-    nodeLabel: {
-      width: 75,
-      height: 100,
-      x: -25,
-      y: 0,
-    },
-  },
 };

 config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
--- a/src/mermaidAPI.js
+++ b/src/mermaidAPI.js
@ -551,6 +551,7 @@ const handleDirective = function (p, directive, type) {
 /** @param {any} conf */
 function updateRendererConfigs(conf) {
  // Todo remove, all diagrams should get config on demoand from the config object, no need for this
+
  // gitGraphRenderer.setConf(conf.git); // Todo Remove all  of these
  flowRenderer.setConf(conf.flowchart);
  flowRendererV2.setConf(conf.flowchart);
@ -697,7 +698,7 @@ export default mermaidAPI;
 *       leftPadding: 75,
 *       gridLineStartPadding: 35,
 *       fontSize: 11,
- *       fontFamily: '"Open-Sans", "sans-serif"',
+ *       fontFamily: '"Open Sans", sans-serif',
 *       numberSectionStyles: 4,
 *       axisFormat: '%Y-%m-%d',
 *       topAxis: false,
--- a/todo.md
+++ b/todo.md
@ -1,3 +0,0 @@
- git graph requires a blank line at the end. why?
- Create a desktop client
- Do the rendering in an iframe to avoid global CSS to affect rendering.
--- a/Show More
+++ b/Show More