Release 8.3.0

chore(deps): bump eslint-utils from 1.3.1 to 1.4.2

.ackrc

@@ -1,4 +1,4 @@
 --ignore-dir=dist
---ignore-dir=docs
---ignore-dir=editor
 --ignore-file=match:/^yarn\.lock$/
+--ignore-file=match:/^yarn-error\.log$/
+--ignore-dir=coverage

.babelrc

@@ -1,12 +0,0 @@
-{
-  "presets": [
-    [
-      "env",
-      {
-        "targets": {
-          "node": "current"
-        }
-      }
-    ]
-  ]
-}

.codeclimate.yml

@@ -1,14 +0,0 @@
-engines:
-  duplication:
-    enabled: true
-    config:
-      languages:
-        - javascript
-eslint:
-  enabled: true
-ratings:
-  paths:
-    - "**.js"
-exclude_paths:
-  - node_modules/
-  - dist/

.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "parserOptions": {
+      "ecmaFeatures": {
+          "experimentalObjectRestSpread": true,
+          "jsx": true
+      },
+      "sourceType": "module"
+  },
+  "extends": ["prettier"],
+  "plugins": ["prettier"],
+  "rules": {
+    "prettier/prettier": ["error"]
+  }
+}

.gitattributes

@@ -1 +0,0 @@
-*.js text eol=lf

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/custom.md

@@ -0,0 +1,10 @@
+---
+name: Custom issue template
+about: Describe this issue template's purpose here.
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/stale.yml

@@ -0,0 +1,21 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 60
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 14
+# Issues with these labels will never be considered stale
+exemptLabels:
+  - Status: Pinned
+  - Area: Security
+  - pinned
+# Label to use when marking an issue as stale
+staleLabel: Status: Wontfix
+# Comment to post when marking an issue as stale. Set to `false` to disable
+markComment: >
+  This issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed if no further activity occurs. Thank you
+  for your contributions.
+  If you are still interested in this issue and it is still relevant you can comment to revive it.
+# Comment to post when closing a stale issue. Set to `false` to disable
+closeComment: >
+  This issue has been been automatically closed due to a lack of activity. 
+  This is done to maintain a clean list of issues that the community is interested in developing.

.gitignore

@@ -1,15 +1,11 @@
-node_modules
-bower_components
-
-*.sublime-project
-*.sublime-workspace
-
 .DS_Store
-.idea
-coverage
 
-test/tmp_*
-test/fixtures/samples/*.actual*
+node_modules/
+coverage/
 
 dist/*.js
-dist/*.css
+dist/*.map
+
+yarn-error.log
+.npmrc
+token

.percy.yml

@@ -0,0 +1,3 @@
+version: 1
+snapshot:
+  widths: [1280]

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "printWidth": 100,
+  "singleQuote": true
+}

.tern-project

@@ -0,0 +1,22 @@
+{
+  "ecmaVersion": 6,
+  "libs": [
+    "browser"
+  ],
+  "loadEagerly": [
+    "path/to/your/js/**/*.js"
+  ],
+  "dontLoad": [
+    "node_modules/**",
+    "path/to/your/js/**/*.js"
+  ],
+  "plugins": {
+    "modules": {},
+    "es_modules": {},
+    "node": {},
+    "doc_comment": {
+      "fullDocs": true,
+      "strong": true
+    }
+  }
+}

.travis.yml

@@ -1,22 +1,12 @@
-sudo: required
 dist: trusty
-addons:
-  chrome: stable
-  code_climate:
-    repo_token: e87e6bf1c253e0555437ebd23235fdfe2749b889358e7c6d100e4ea5b4f2e091
 language: node_js
 node_js:
-  - "7"
-before_install:
-  - export DISPLAY=:99.0
-  - sh -e /etc/init.d/xvfb start &
-  - sleep 3
-before_script:
-  - yarn build
-script:
-  - yarn test
-after_script:
-  - cat coverage/lcov.info | codeclimate
+  - "10"
 cache:
-  directories:
-    - node_modules
+  npm: false
+script:
+  - yarn build
+  - yarn test --coverage
+  - yarn e2e
+after_success:
+  - cat ./coverage/lcov.info | ./node_modules/.bin/coveralls

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "typescript.format.enable": false,
+  "typescript.reportStyleChecksAsWarnings": false,
+  "typescript.validate.enable": false,
+  "javascript.validate.enable": false,
+  "editor.formatOnSave": false,
+  "standard.enable": true
+}

CONTRIBUTING.md

@@ -1,88 +0,0 @@
-# How to contribute
-
-Great that you want to be involved in this project! Contributing is fun and contributions are GREAT! :)
-
-This page is currently a starting point and is not so rigorous to start with.
-
-Some important guidlines:
-
-* The work will be organized using the issues list
-    * In the list there will be the bugs/enhancements etc we are working with in the project
-    * There will be milestones outlineing the roadmap ahead
-    * There will issues marked with help wanted
-
-The issue list and the items marked with **help wanted** is a good starting point if you want to do some work.
-
-
-## Guidelines for avoiding duplicate work
-
-Contributing is great. It is not so fun when you are done with your issue and just before you're about to push your
-change you can't because someone else just pushed the same fix so you have wasted your time. The guidelines below are in
-place to prevent this:
-
-* Comment in the issue that you are working on it. You will then be added as an assignee (eventually).
-* When you pick an issue to work on.
-    * Check that the issue not assigned
-    * Also check the comments so that no one has started working on it before beeing officially assigned.
-
-
-## Submitting changes
-
-Please send a GitHub Pull Request with a clear list of what you've done (read more about pull requests). When you send
-a pull request, we will love you forever if you include jasmine tests. We can always use more test coverage.
-
-Always write a clear log message for your commits. One-line messages are fine for small changes, but bigger changes should look like this:
-
-$ git commit -m "A brief summary of the commit
->
-> A paragraph describing what changed and its impact."
-Coding conventions
-Start reading our code and you'll get the hang of it. We optimize for readability:
-
-This is open source software. Consider the people who will read your code, and make it look nice for them. It's sort of
-like driving a car: Perhaps you love doing donuts when you're alone, but with passengers the goal is to make the ride as
-smooth as possible.
-
-So that we can consistently serve images from the CDN, always use image_path or image_tag when referring to images.
-Never prepend "/images/" when using image_path or image_tag.
-Also for the CDN, always use cwd-relative paths rather than root-relative paths in image URLs in any CSS. So instead of
-url('/images/blah.gif'), use url('../images/blah.gif').
-
-# Build instructions
-
-Fork, then:
-
-```
-yarn install
-```
-
-Then the dependencies will have been installed. You use gulp and yarn calls as build tools.
-
-The following targets are probably interesting:
-
-* jison - compiles the jison grammars to parser files
-
-for instance:
-```
-gulp jison
-```
-
-To build:
-
-```
-yarn build
-```
-
-To run the tests:
-
-```
-yarn test
-```
-
-Make sure you have Chrome browser installed. We use Chrome headless for testing.
-
-Manual test:
-
-```
-open dist/demo/index.html
-```

LICENSE

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

README.md

@@ -1,7 +1,30 @@
-# mermaid [![Build Status](https://travis-ci.org/knsv/mermaid.svg?branch=master)](https://travis-ci.org/knsv/mermaid)
-
-[![Code Climate](https://codeclimate.com/github/knsv/mermaid/badges/gpa.svg)](https://codeclimate.com/github/knsv/mermaid)
+[![Build Status](https://travis-ci.org/knsv/mermaid.svg?branch=master)](https://travis-ci.org/knsv/mermaid)
+[![Coverage Status](https://coveralls.io/repos/github/knsv/mermaid/badge.svg?branch=master)](https://coveralls.io/github/knsv/mermaid?branch=master)
 [![Join the chat at https://gitter.im/knsv/mermaid](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/knsv/mermaid?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+[![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/Mermaid/mermaid)
+
+# mermaid
+
+## Special note regarding version 8.2
+
+In version 8.2 a security improvement was introduced. A securityLevel configuration was introduced which sets the level of trust to be used on the parsed diagrams.
+
+* **`strict`**: (default) tags in text are encoded, click functionality is disabled
+* `loose`: tags in text are allowed, click functionality is enabledClosed issues:
+
+⚠️ **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 your application is taking responsibility for the diagram source security you can set the securityLevel accordingly. By doing this clicks and tags are again allowed.
+
+```javascript
+    mermaidAPI.initialize({
+        securityLevel: 'loose'
+    });
+```
+
+**🖖 Keep a steady pulse: mermaid needs more Collaborators [#866](https://github.com/knsv/mermaid/issues/866)**
+
+![banner](./img/header.png)
 
 Generation of diagrams and flowcharts from text in a similar manner as markdown.
 
@@ -9,31 +32,23 @@ Ever wanted to simplify documentation and avoid heavy tools like Visio when expl
 
 This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript.
 
-The code below would render the following image
-<table>
-    <tr><th>Code</th><th>Rendered diagram</th></tr>
-    <tr>
-        <td>
-            <pre>
-                <code>
+**Mermaid was nominated and won the JS Open Source Awards (2019) in the category _The most exciting use of technology_!!! Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project.**
+
+### Flowchart
+
+```
 graph TD;
     A-->B;
     A-->C;
     B-->D;
     C-->D;
-                </code>
-            </pre>
-        </td>
-        <td>
-            <p align="center">
-                <img src='http://www.sveido.com/mermaid/img/ex1.png' alt='Example 1'>
-            </p>
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <pre>
-                <code>
+```
+![Flowchart](./img/flow.png)
+
+
+### Sequence diagram
+
+```
 sequenceDiagram
     participant Alice
     participant Bob
@@ -41,81 +56,107 @@ sequenceDiagram
     loop Healthcheck
         John->>John: Fight against hypochondria
     end
-    Note right of John: Rational thoughts &lt;br/>prevail...
+    Note right of John: Rational thoughts <br/>prevail!
     John-->>Alice: Great!
     John->>Bob: How about you?
     Bob-->>John: Jolly good!
-                </code>
-            </pre>
-        </td>
-        <td>
-            <img src='http://www.sveido.com/mermaid/img/seq1.png' alt='Example 2'>
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <pre>
-                <code>
+```
+![Sequence diagram](./img/sequence.png)
+
+
+### Gantt diagram
+
+```
+gantt
+dateFormat  YYYY-MM-DD
+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
+```
+![Gantt diagram](./img/gantt.png)
+
+
+### Class diagram - :exclamation: experimental
+
+```
 classDiagram
-    Class01 &lt;|-- AveryLongClass : Cool
-    Class03 *-- Class04
-    Class05 o-- Class06
-    Class07 .. Class08
-    Class09 --> C2 : Where am i?
-    Class09 --* C3
-    Class09 --|> Class07
-    Class07 : equals()
-    Class07 : Object[] elementData
-    Class01 : size()
-    Class01 : int chimp
-    Class01 : int gorilla
-    Class08 &lt;--> C2: Cool label
-                </code>
-            </pre>
-        </td>
-        <td>
-            <img src='./docs/img/class-diagram.png' alt='Example 3'>
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <pre>
-                <code>
-gitGraph :
+Class01 <|-- AveryLongClass : Cool
+Class03 *-- Class04
+Class05 o-- Class06
+Class07 .. Class08
+Class09 --> C2 : Where am i?
+Class09 --* C3
+Class09 --|> Class07
+Class07 : equals()
+Class07 : Object[] elementData
+Class01 : size()
+Class01 : int chimp
+Class01 : int gorilla
+Class08 <--> C2: Cool label
+```
+![Class diagram](./img/class.png)
+
+
+### Git graph - :exclamation: experimental
+
+```
+gitGraph:
 options
 {
-    "key": "value",
-    "nodeWidth": 150,
-    "nodeSpacing" : 150
+    "nodeSpacing": 150,
+    "nodeRadius": 10
 }
 end
-    commit
-    branch newbranch
-    checkout newbranch
-    commit
-    commit
-    checkout master
-    commit
-    commit
-    merge newbranch
-                </code>
-            </pre>
-        </td>
-        <td>
-            <img src='./docs/img/gitgraph.mm.png' alt='Example 4'>
-        </td>
-    </tr>
+commit
+branch newbranch
+checkout newbranch
+commit
+commit
+checkout master
+commit
+commit
+merge newbranch
 
-</table>
+```
+
+![Git graph](./img/git.png)
 
 
-## Further reading
+## Installation
 
-* [Usage](http://knsv.github.io/mermaid/#usage)
-* [Flowchart syntax](http://knsv.github.io/mermaid/#flowcharts-basic-syntax)
-* [Sequence diagram syntax](http://knsv.github.io/mermaid/#sequence-diagrams)
-* [Mermaid client](http://knsv.github.io/mermaid/#mermaid-cli)
-* [Demos](http://knsv.github.io/mermaid/#demos)
+### CDN
+
+```
+https://unpkg.com/mermaid@<version>/dist/
+```
+
+Replace `<version>` with expected version number.
+
+Example: https://unpkg.com/mermaid@7.1.0/dist/
+
+### Node.js
+
+```
+yarn add mermaid
+```
+
+
+## Documentation
+
+https://mermaidjs.github.io
+
+
+## Sibling projects
+
+- [mermaid CLI](https://github.com/mermaidjs/mermaid.cli)
+- [mermaid live editor](https://github.com/mermaidjs/mermaid-live-editor)
+- [mermaid webpack demo](https://github.com/mermaidjs/mermaid-webpack-demo)
+- [mermaid Parcel demo](https://github.com/mermaidjs/mermaid-parcel-demo)
 
 
 # Request for assistance
@@ -128,10 +169,7 @@ As part of this team you would get write access to the repository and would
 represent the project when answering questions and issues.
 
 Together we could continue the work with things like:
-* port the code to es6
-* improved support for webpack
-* modernizing the build
-* adding more typers of diagrams like mindmaps, ert digrams etc
+* adding more types of diagrams like mindmaps, ert diagrams etc
 * improving existing diagrams
 
 Don't hesitate to contact me if you want to get involved.
@@ -141,18 +179,12 @@ Don't hesitate to contact me if you want to get involved.
 
 ## Setup
 
-Make sure you have Chrome browser installed, this project uses Chrome headless to running tests.
-
     yarn install
 
 
 ## Build
 
-    yarn build
-
-If you want real time incremental build:
-
-    yarn watch
+    yarn build:watch
 
 
 ## Lint
@@ -169,18 +201,18 @@ We recommend you installing [editor plugins](https://github.com/feross/standard#
 
 Manual test in browser:
 
-    open dist/demo/index.html
-
-Manual test in Node.js:
-
-    node dist/demo/index.js
+    open dist/index.html
 
 
-## Distribtion
+## Release
 
-    yarn dist
+For those who have the permission to do so:
 
-Command above generates files into the `dist` folder, then you can publish them to npmjs.org.
+Update version number in `package.json`.
+
+    npm publish
+
+Command above generates files into the `dist` folder and publishes them to npmjs.org.
 
 
 # Credits
@@ -191,4 +223,6 @@ Thanks also to the [js-sequence-diagram](http://bramp.github.io/js-sequence-diag
 
 *Mermaid was created by Knut Sveidqvist for easier documentation.*
 
-Knut has not done all work by him self, here is the full list of the projects [contributors](https://github.com/knsv/mermaid/graphs/contributors).
+*[Tyler Long](https://github.com/tylerlong) has became a collaborator since April 2017.*
+
+Here is the full list of the projects [contributors](https://github.com/knsv/mermaid/graphs/contributors).

__mocks__/MERMAID.js

@@ -0,0 +1,3 @@
+export const curveBasis = 'basis'
+export const curveLinear = 'linear'
+export const curveCardinal = 'cardinal'

__mocks__/d3.js

@@ -0,0 +1,56 @@
+/* eslint-env jest */
+let NewD3 = function () {
+  function returnThis () {
+    return this
+  }
+  return {
+    append: function () {
+      return NewD3()
+    },
+    lower: returnThis,
+    attr: returnThis,
+    style: returnThis,
+    text: returnThis,
+    0: {
+      0: {
+        getBBox: function () {
+          return {
+            height: 10,
+            width: 20
+          }
+        }
+      }
+    }
+  }
+}
+
+export const select = function () {
+  return new NewD3()
+}
+
+export const selectAll = function () {
+  return new NewD3()
+}
+
+export const curveBasis = 'basis'
+export const curveLinear = 'linear'
+export const curveCardinal = 'cardinal'
+
+export const MockD3 = (name, parent) => {
+  const children = []
+  const elem = {
+    get __children () { return children },
+    get __name () { return name },
+    get __parent () { return parent }
+  }
+  elem.append = (name) => {
+    const mockElem = MockD3(name, elem)
+    children.push(mockElem)
+    return mockElem
+  }
+  elem.lower = jest.fn(() => elem)
+  elem.attr = jest.fn(() => elem)
+  elem.text = jest.fn(() => elem)
+  elem.style = jest.fn(() => elem)
+  return elem
+}

babel.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current'
+        }
+      }
+    ]
+  ]
+}

bin/mermaid.js

@@ -1,24 +0,0 @@
-#!/usr/bin/env node
-
-var chalk = require('chalk')
-var cli = require('../lib/cli.js')
-var lib = require('../lib')
-
-cli.parse(process.argv.slice(2), function (err, message, options) {
-  if (err) {
-    console.error(
-      chalk.bold.red('\nYou had errors in your syntax. Use --help for further information.')
-    )
-    err.forEach(function (e) {
-      console.error(e.message)
-    })
-
-    return
-  } else if (message) {
-    console.log(message)
-
-    return
-  }
-
-  lib.process(options.files, options, process.exit)
-})

bower.json

@@ -1,30 +0,0 @@
-{
-  "name": "mermaid",
-  "authors": [
-    "knsv <knut@sveido.com>"
-  ],
-  "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
-  "main": "dist/mermaid.slim.js",
-  "keywords": [
-    "diagram",
-    "markdown",
-    "flowchart",
-    "sequence diagram",
-    "gantt",
-    "class diagram",
-    "git graph"
-  ],
-  "license": "MIT",
-  "ignore": [
-    "*",
-    "!dist/",
-    "!dist/*",
-    "!LICENSE"
-  ],
-  "devDependencies": {
-    "jasmine": "~2.0.4",
-    "dagre": "0.6.2",
-    "d3": "3.3.8",
-    "dagre-d3": "0.3.3"
-  }
-}

cypress.json

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

cypress/examples/actions.spec.js

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

cypress/examples/aliasing.spec.js

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

cypress/examples/assertions.spec.js

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

cypress/examples/connectors.spec.js

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

cypress/examples/cookies.spec.js

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

cypress/examples/cypress_api.spec.js

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

cypress/examples/files.spec.js

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

cypress/examples/local_storage.spec.js

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

cypress/examples/location.spec.js

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

cypress/examples/misc.spec.js

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

cypress/examples/navigation.spec.js

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

cypress/examples/network_requests.spec.js

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

cypress/examples/querying.spec.js

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

cypress/examples/spies_stubs_clocks.spec.js

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

cypress/examples/traversal.spec.js

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

cypress/examples/utilities.spec.js

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

cypress/examples/viewport.spec.js

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

cypress/examples/waiting.spec.js

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

cypress/examples/window.spec.js

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

cypress/fixtures/example.json

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

cypress/helpers/util.js

@@ -0,0 +1,28 @@
+/* eslint-env jest */
+import { Base64 } from 'js-base64';
+
+export const mermaidUrl = (graphStr, options, api) => {
+  const obj = {
+    code: graphStr,
+    mermaid: options
+  };
+  const objStr = JSON.stringify(obj);
+  let url = 'http://localhost:9000/e2e.html?graph=' + Base64.encodeURI(objStr);
+  if (api) {
+    url = 'http://localhost:9000/xss.html?graph=' + graphStr;
+  }
+
+  if (options.listUrl) {
+    cy.log(options.listId, ' ', url);
+  }
+
+  return url;
+};
+
+export const imgSnapshotTest = (graphStr, options, api) => {
+  const url = mermaidUrl(graphStr, options, api);
+
+  cy.visit(url);
+  cy.get('svg');
+  cy.percySnapshot();
+};

cypress/integration/other/interaction.spec.js

@@ -0,0 +1,242 @@
+/* eslint-env jest */
+describe('Interaction', () => {
+  describe('Interaction - security level loose', () => {
+    it('should handle a click on a node with a bound function', () => {
+      const url = 'http://localhost:9000/click_security_loose.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body')
+        .find('g#Function')
+        .click();
+
+      cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
+    });
+    it('should handle a click on a node with a bound function where the node starts with a number', () => {
+      const url = 'http://localhost:9000/click_security_loose.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body')
+        .find('g#s1Function')
+        .click();
+
+      cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
+    });
+    it('should handle a click on a node with a bound url', () => {
+      const url = 'http://localhost:9000/click_security_loose.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body')
+        .find('g#URL')
+        .click();
+
+      cy.location().should(location => {
+        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      });
+    });
+    it('should handle a click on a node with a bound url where the node starts with a number', () => {
+      const url = 'http://localhost:9000/click_security_loose.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body')
+        .find('g#s2URL')
+        .click();
+
+      cy.location().should(location => {
+        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      });
+    });
+
+    it('should handle a click on a task with a bound URL clicking on the rect', () => {
+      const url = 'http://localhost:9000/click_security_loose.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body')
+        .find('rect#cl1')
+        .click({ force: true });
+
+      cy.location().should(location => {
+        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      });
+    });
+    it('should handle a click on a task with a bound URL clicking on the text', () => {
+      const url = 'http://localhost:9000/click_security_loose.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body')
+        .find('text#cl1-text')
+        .click({ force: true });
+
+      cy.location().should(location => {
+        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      });
+    });
+    it('should handle a click on a task with a bound function', () => {
+      const url = 'http://localhost:9000/click_security_loose.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body')
+        .find('rect#cl2')
+        .click({ force: true });
+
+      cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant');
+    });
+    it('should handle a click on a task with a bound function', () => {
+      const url = 'http://localhost:9000/click_security_loose.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body')
+        .find('text#cl2-text')
+        .click({ force: true });
+
+      cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant');
+    });
+  });
+
+  describe('Interaction - security level tight', () => {
+    it('should handle a click on a node without a bound function', () => {
+      const url = 'http://localhost:9000/click_security_strict.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body')
+        .find('g#Function')
+        .click();
+
+      cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
+    });
+    it('should handle a click on a node with a bound function where the node starts with a number', () => {
+      const url = 'http://localhost:9000/click_security_strict.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body')
+        .find('g#s1Function')
+        .click();
+
+      cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
+    });
+    it('should handle a click on a node with a bound url', () => {
+      const url = 'http://localhost:9000/click_security_strict.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body')
+        .find('g#URL')
+        .click();
+
+      cy.location().should(location => {
+        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      });
+    });
+    it('should handle a click on a node with a bound url where the node starts with a number', () => {
+      const url = 'http://localhost:9000/click_security_strict.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body')
+        .find('g#s2URL')
+        .click();
+
+      cy.location().should(location => {
+        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      });
+    });
+
+    it('should handle a click on a task with a bound URL clicking on the rect', () => {
+      const url = 'http://localhost:9000/click_security_strict.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body')
+        .find('rect#cl1')
+        .click({ force: true });
+
+      cy.location().should(location => {
+        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      });
+    });
+    it('should handle a click on a task with a bound URL clicking on the text', () => {
+      const url = 'http://localhost:9000/click_security_strict.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body')
+        .find('text#cl1-text')
+        .click({ force: true });
+
+      cy.location().should(location => {
+        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      });
+    });
+    it('should handle a click on a task with a bound function', () => {
+      const url = 'http://localhost:9000/click_security_strict.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body')
+        .find('rect#cl2')
+        .click({ force: true });
+
+      cy.get('.created-by-gant-click').should('not.have.text', 'Clicked By Gant');
+    });
+    it('should handle a click on a task with a bound function', () => {
+      const url = 'http://localhost:9000/click_security_strict.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body')
+        .find('text#cl2-text')
+        .click({ force: true });
+
+      cy.get('.created-by-gant-click').should('not.have.text', 'Clicked By Gant');
+    });
+  });
+
+  describe('Interaction - security level other, missspelling', () => {
+    it('should handle a click on a node with a bound function', () => {
+      const url = 'http://localhost:9000/click_security_strict.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body')
+        .find('g#Function')
+        .click();
+
+      cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
+    });
+    it('should handle a click on a node with a bound function where the node starts with a number', () => {
+      const url = 'http://localhost:9000/click_security_strict.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body')
+        .find('g#s1Function')
+        .click();
+
+      cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
+    });
+    it('should handle a click on a node with a bound url', () => {
+      const url = 'http://localhost:9000/click_security_strict.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body')
+        .find('g#URL')
+        .click();
+
+      cy.location().should(location => {
+        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      });
+    });
+
+    it('should handle a click on a task with a bound function', () => {
+      const url = 'http://localhost:9000/click_security_strict.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body')
+        .find('rect#cl2')
+        .click({ force: true });
+
+      cy.get('.created-by-gant-click').should('not.have.text', 'Clicked By Gant');
+    });
+    it('should handle a click on a task with a bound function', () => {
+      const url = 'http://localhost:9000/click_security_strict.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body')
+        .find('text#cl2-text')
+        .click({ force: true });
+
+      cy.get('.created-by-gant-click').should('not.have.text', 'Clicked By Gant');
+    });
+  });
+});

cypress/integration/other/webpackUsage.spec.js

@@ -0,0 +1,11 @@
+/* eslint-env jest */
+describe('Sequencediagram', () => {
+  it('should render a simple sequence diagrams', () => {
+    const url = 'http://localhost:9000/webpackUsage.html';
+
+    cy.visit(url);
+    cy.get('body')
+      .find('svg')
+      .should('have.length', 2);
+  });
+});

cypress/integration/other/xss.spec.js

@@ -0,0 +1,16 @@
+/* eslint-env jest */
+import { mermaidUrl } from '../../helpers/util.js';
+
+/* eslint-disable */
+describe('XSS', () => {
+  it('should handle xss in tags', () => {
+    const str = 'eyJjb2RlIjoiXG5ncmFwaCBMUlxuICAgICAgQi0tPkQoPGltZyBvbmVycm9yPWxvY2F0aW9uPWBqYXZhc2NyaXB0XFx1MDAzYXhzc0F0dGFja1xcdTAwMjhkb2N1bWVudC5kb21haW5cXHUwMDI5YCBzcmM9eD4pOyIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0In19';
+
+    const url = mermaidUrl(str,{}, true);
+
+    cy.visit(url);
+    cy.get('svg')
+    cy.percySnapshot()
+
+  })
+})

cypress/integration/rendering/classDiagram.spec.js

@@ -0,0 +1,27 @@
+/* eslint-env jest */
+import { imgSnapshotTest } from '../../helpers/util';
+
+describe('Sequencediagram', () => {
+  it('should render a simple class diagrams', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+      Class01 <|-- AveryLongClass : Cool
+      Class03 *-- Class04
+      Class05 o-- Class06
+      Class07 .. Class08
+      Class09 --> C2 : Where am i?
+      Class09 --* C3
+      Class09 --|> Class07
+      Class07 : equals()
+      Class07 : Object[] elementData
+      Class01 : size()
+      Class01 : int chimp
+      Class01 : int gorilla
+      Class08 <--> C2: Cool label
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+});

cypress/integration/rendering/flowchart.spec.js

@@ -0,0 +1,347 @@
+/* eslint-env jest */
+import { imgSnapshotTest } from '../../helpers/util';
+
+describe('Flowcart', () => {
+  it('should render a simple flowchart', () => {
+    imgSnapshotTest(
+      `graph TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      B --> C{Let me think}
+      C -->|One| D[Laptop]
+      C -->|Two| E[iPhone]
+      C -->|Three| F[fa:fa-car Car]
+      `,
+      {}
+    );
+  });
+  it('should render a simple flowchart with line breaks', () => {
+    imgSnapshotTest(
+      `
+    graph TD
+      A[Christmas] -->|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]
+      `,
+      {}
+    );
+  });
+
+  it('should render a simple flowchart with trapezoid and inverse trapezoid vertex options.', () => {
+    imgSnapshotTest(
+      `
+    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]
+      `,
+      {}
+    );
+  });
+
+  it('should style nodes via a class.', () => {
+    imgSnapshotTest(
+      `
+    graph TD
+      1A --> 1B
+      1B --> 1C
+      1C --> D
+      1C --> E
+
+      classDef processHead fill:#888888,color:white,font-weight:bold,stroke-width:3px,stroke:#001f3f
+      class 1A,1B,D,E processHead
+      `,
+      {}
+    );
+  });
+
+  it('should render a flowchart full of circles', () => {
+    imgSnapshotTest(
+      `
+    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)
+      `,
+      {}
+    );
+  });
+  it('should render a flowchart full of icons', () => {
+    imgSnapshotTest(
+      `
+    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
+      `,
+      {}
+    );
+  });
+
+  it('should render labels with numbers at the start', () => {
+    imgSnapshotTest(
+      `
+    graph TB;subgraph "number as labels";1;end;
+      `,
+      {}
+    );
+  });
+  it('should render subgraphs', () => {
+    imgSnapshotTest(
+      `
+    graph TB
+      subgraph One
+        a1-->a2
+      end
+      `,
+      {}
+    );
+  });
+
+  it('should render subgraphs with a title startign with a digit', () => {
+    imgSnapshotTest(
+      `
+    graph TB
+      subgraph 2Two
+        a1-->a2
+      end
+      `,
+      {}
+    );
+  });
+
+  it('should render styled subgraphs', () => {
+    imgSnapshotTest(
+      `
+    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
+      `,
+      {}
+    );
+  });
+
+  it('should render a flowchart with ling sames and class definitoins', () => {
+    imgSnapshotTest(
+      `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;
+      `,
+      {}
+    );
+  });
+
+  it('should render color of styled nodes', () => {
+    imgSnapshotTest(
+      `
+      graph LR
+        foo-->bar
+
+        classDef foo fill:lightblue,color:green,stroke:#FF9E2C,font-weight:bold
+        style foo fill:#F99,stroke-width:2px,stroke:#F0F
+        style bar fill:#999,color: #00ff00, stroke-width:10px,stroke:#0F0
+      `,
+      {
+        listUrl: false,
+        listId: 'color styling',
+        logLevel: 0
+      }
+    );
+  });
+});

cypress/integration/rendering/gantt.spec.js

@@ -0,0 +1,41 @@
+/* eslint-env jest */
+import { imgSnapshotTest } from '../../helpers/util.js';
+
+describe('Sequencediagram', () => {
+  it('should render a gantt chart', () => {
+    imgSnapshotTest(
+      `
+    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 Last section
+      Describe gantt syntax               :after doc1, 3d
+      Add gantt diagram to demo page      : 20h
+      Add another diagram to demo page    : 48h
+      `,
+      {}
+    );
+  });
+});

cypress/integration/rendering/gitGraph.spec.js

@@ -0,0 +1,28 @@
+/* eslint-env jest */
+import { imgSnapshotTest } from '../../helpers/util.js';
+
+describe('Sequencediagram', () => {
+  it('should render a simple git graph', () => {
+    imgSnapshotTest(
+      `
+    gitGraph:
+      options
+      {
+          "nodeSpacing": 150,
+          "nodeRadius": 10
+      }
+      end
+      commit
+      branch newbranch
+      checkout newbranch
+      commit
+      commit
+      checkout master
+      commit
+      commit
+      merge newbranch
+      `,
+      {}
+    );
+  });
+});

cypress/integration/rendering/info.spec.js

@@ -0,0 +1,14 @@
+/* eslint-env jest */
+import { imgSnapshotTest } from '../../helpers/util.js';
+
+describe('Sequencediagram', () => {
+  it('should render a simple info diagrams', () => {
+    imgSnapshotTest(
+      `
+    info
+       showInfo
+      `,
+      {}
+    );
+  });
+});

cypress/integration/rendering/pie.spec.js

@@ -0,0 +1,16 @@
+/* eslint-env jest */
+import { imgSnapshotTest } from '../../helpers/util.js';
+
+describe('Pie Chart', () => {
+  it('should render a simple pie diagram', () => {
+    imgSnapshotTest(
+      `
+    pie title Sports in Sweden
+       "Bandy" : 40
+       "Ice-Hockey" : 80
+       "Football" : 90
+      `,
+      {}
+    );
+  });
+});

cypress/integration/rendering/sequencediagram.spec.js

@@ -0,0 +1,133 @@
+/// <reference types="Cypress" />
+
+import { imgSnapshotTest } from '../../helpers/util';
+
+context('Aliasing', () => {
+  it('should render a simple sequence diagrams', () => {
+    imgSnapshotTest(
+      `
+      sequenceDiagram
+        participant Alice
+        participant Bob
+        participant John as John<br/>Second Line
+        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...
+        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
+      `,
+      {}
+    );
+  });
+  context('background rects', () => {
+    it('should render a single and nested rects', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+          participant A
+          participant B
+          participant C
+          participant D
+          participant E
+          participant G
+
+          A ->>+ B: Task 1
+          rect rgb(178, 102, 255)
+            B ->>+ C: Task 2
+            C -->>- B: Return
+          end
+
+          A ->> D: Task 3
+          rect rgb(0, 128, 255)
+            D ->>+ E: Task 4
+            rect rgb(0, 204, 0)
+            E ->>+ G: Task 5
+            G -->>- E: Return
+            end
+            E ->> E: Task 6
+          end
+          D -->> A: Complete
+      `,
+        {}
+      );
+    });
+    it('should render rect around and inside loops', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+          A ->> B: 1
+          rect rgb(204, 0, 102)
+            loop check C
+              C ->> C: Every 10 seconds
+            end
+          end
+          A ->> B: 2
+          loop check D
+            C ->> D: 3
+            rect rgb(153, 153, 255)
+            D -->> D: 5
+            D --> C: 4
+            end
+          end
+      `,
+        {}
+      );
+    });
+    it('should render rect around and inside alts', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+          A ->> B: 1
+          rect rgb(204, 0, 102)
+            alt yes
+              C ->> C: 1
+            else no
+              rect rgb(0, 204, 204)
+                C ->> C: 0
+              end
+            end
+          end
+          B ->> A: Return
+      `,
+        {}
+      );
+    });
+    it('should render rect around and inside opts', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+          A ->> B: 1
+          rect rgb(204, 0, 102)
+            opt maybe
+              C -->> D: Do something
+              rect rgb(0, 204, 204)
+                C ->> C: 0
+              end
+            end
+          end
+
+          opt possibly
+            rect rgb(0, 204, 204)
+              C ->> C: 0
+            end
+          end
+          B ->> A: Return
+      `,
+        {}
+      );
+    });
+  });
+});

cypress/platform/bundle-test.js

@@ -0,0 +1,10 @@
+import mermaid from '../../dist/mermaid.core'
+
+mermaid.initialize({
+  theme: 'forest',
+  gantt: { axisFormatter: [
+    ['%Y-%m-%d', (d) => {
+      return d.getDay() === 1
+    }]
+  ] }
+})

cypress/platform/click_security_loose.html

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Mermaid Quick Test Page</title>
+  <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
+</head>
+<body>
+  <div id="FirstLine" class="mermaid">
+    graph TB
+      Function-->URL
+      click Function clickByFlow "Add a div"
+      click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+</div>
+<div id="FirstLine" class="mermaid">
+  graph TB
+    1Function-->2URL
+    click 1Function clickByFlow "Add a div"
+    click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+</div>
+
+<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 "http://localhost:9000/webpackUsage.html"
+    click cl2 call clickByGantt("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>
+
+  <script src="./mermaid.js"></script>
+  <script>
+  function clickByFlow(elemName) {
+    const div = document.createElement('div')
+    div.className = 'created-by-click'
+    div.style = 'padding: 20px; background: green; color: white;'
+    div.innerText = 'Clicked By Flow'
+
+    document.getElementsByTagName('body')[0].appendChild(div)
+  }
+  function clickByGantt(elemName) {
+    const div = document.createElement('div')
+    div.className = 'created-by-gant-click'
+    div.style = 'padding: 20px; background: green; color: white;'
+    div.innerText = 'Clicked By Gant'
+
+    document.getElementsByTagName('body')[0].appendChild(div)
+  }
+  mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
+  </script>
+</body>
+</html>

cypress/platform/click_security_other.html

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Mermaid Quick Test Page</title>
+  <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
+</head>
+<body>
+  <div id="FirstLine" class="mermaid">
+    graph TB
+      Function-->URL
+      click Function clickByFlow "Add a div"
+      click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+</div>
+<div id="FirstLine" class="mermaid">
+  graph TB
+    1Function-->2URL
+    click 1Function clickByFlow "Add a div"
+    click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+</div>
+
+<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 "http://localhost:9000/webpackUsage.html"
+    click cl2 call clickByGantt("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>
+
+  <script src="./mermaid.js"></script>
+  <script>
+  function clickByFlow(elemName) {
+    const div = document.createElement('div')
+    div.className = 'created-by-click'
+    div.style = 'padding: 20px; background: green; color: white;'
+    div.innerText = 'Clicked By Flow'
+
+    document.getElementsByTagName('body')[0].appendChild(div)
+  }
+  function clickByGantt(elemName) {
+    const div = document.createElement('div')
+    div.className = 'created-by-gant-click'
+    div.style = 'padding: 20px; background: green; color: white;'
+    div.innerText = 'Clicked By Gant'
+
+    document.getElementsByTagName('body')[0].appendChild(div)
+  }
+  mermaid.initialize({ startOnLoad: true, securityLevel: 'strct', logLevel: 1 });
+  </script>
+</body>
+</html>

cypress/platform/click_security_strict.html

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Mermaid Quick Test Page</title>
+  <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
+</head>
+<body>
+  <div id="FirstLine" class="mermaid">
+    graph TB
+      Function-->URL
+      click Function clickByFlow "Add a div"
+      click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+</div>
+<div id="FirstLine" class="mermaid">
+  graph TB
+    1Function-->2URL
+    click 1Function clickByFlow "Add a div"
+    click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+</div>
+
+<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 "http://localhost:9000/webpackUsage.html"
+    click cl2 call clickByGantt("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>
+
+  <script src="./mermaid.js"></script>
+  <script>
+  function clickByFlow(elemName) {
+    const div = document.createElement('div')
+    div.className = 'created-by-click'
+    div.style = 'padding: 20px; background: green; color: white;'
+    div.innerText = 'Clicked By Flow'
+
+    document.getElementsByTagName('body')[0].appendChild(div)
+  }
+  function clickByGantt(elemName) {
+    const div = document.createElement('div')
+    div.className = 'created-by-gant-click'
+    div.style = 'padding: 20px; background: green; color: white;'
+    div.innerText = 'Clicked By Gant'
+
+    document.getElementsByTagName('body')[0].appendChild(div)
+  }
+  mermaid.initialize({ startOnLoad: true, securityLevel: 'strict', logLevel: 1 });
+  </script>
+</body>
+</html>

cypress/platform/e2e.html

@@ -0,0 +1,21 @@
+<html>
+  <head>
+    <script src="/e2e.js"></script>
+    <link
+      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+    />
+    <style></style>
+  </head>
+  <body>
+    <script src="./mermaid.js"></script>
+    <script>
+      // Notice startOnLoad=false
+      // This prevents default handling in mermaid from render before the e2e logic is applied
+      mermaid.initialize({
+        startOnLoad: false,
+        useMaxWidth: true,
+      });
+    </script>
+  </body>
+</html>

cypress/platform/flow.html

@@ -0,0 +1,46 @@
+<html>
+  <head>
+    <link
+      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+    />
+    <style>body {
+      font-family: 'trebuchet ms', verdana, arial;
+    }</style>
+  </head>
+  <body>
+    <div class="mermaid">
+      graph TB
+      subgraph One
+        a1-->a2-->a3
+      end
+    </div>
+    <div class="mermaid">
+      graph TB
+        a_a --> b_b:::apa --> c_c:::apa
+        classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
+        class a_a apa;
+    </div>
+    <div class="mermaid">
+      graph TB
+        a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
+        a_a --> c --> d_d --> c_c
+        classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
+        class a_a apa;
+        click a_a "http://www.aftonbladet.se" "apa"
+    </div>
+    <script src="./mermaid.js"></script>
+    <script>
+      mermaid.initialize({
+        theme: 'forest',
+        // themeCSS: '.node rect { fill: red; }',
+        logLevel: 3,
+        flowchart: { curve: 'linear' },
+        gantt: { axisFormat: '%m/%d/%Y' },
+        sequence: { actorMargin: 50 },
+        // sequenceDiagram: { actorMargin: 300 } // deprecated
+      });
+    </script>
+    </script>
+  </body>
+</html>

cypress/platform/info.html

@@ -0,0 +1,26 @@
+<html>
+  <head>
+    <link
+      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+    />
+
+  </head>
+  <body>
+    <h1>info below</h1>
+    <div class="mermaid">info</div>
+    <script src="./mermaid.js"></script>
+    <script>
+      mermaid.initialize({
+        theme: 'forest',
+        // themeCSS: '.node rect { fill: red; }',
+        logLevel: 3,
+        flowchart: { curve: 'linear' },
+        gantt: { axisFormat: '%m/%d/%Y' },
+        sequence: { actorMargin: 50 },
+        // sequenceDiagram: { actorMargin: 300 } // deprecated
+      });
+    </script>
+    </script>
+  </body>
+</html>

cypress/platform/subgraph.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Mermaid Quick Test Page</title>
+  <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
+  <style>
+    body {
+      font-family: 'trebuchet ms', verdana, arial;
+    }
+  </style>
+</head>
+<body>
+  <div class="mermaid">
+    graph TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      subgraph 1test["id starting with number"]
+      A
+      end
+      style 1test fill:#F99,stroke-width:2px,stroke:#F0F
+  </div>
+  <div class="mermaid">
+    graph TD
+      A.a[Christmas]:::someclass -->|Get money| B(Go shopping):::someclass
+      subgraph test["id starting with number"]
+      A.a
+      end
+      style test fill:#F99,stroke-width:2px,stroke:#F0F
+      classDef someclass fill:#f96;
+  </div>
+  <div class="mermaid">
+      graph TD
+      9e122290-->82072290_1ec3_e711_8c5a_005056ad0002
+      style 9e122290 fill:#F99,stroke-width:2px,stroke:#F0F
+  </div>
+  <script src="./mermaid.js"></script>
+  <script>
+     function showFullFirstSquad(elemName) {
+            console.log('show ' + elemName);
+        }
+        mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
+  </script>
+</body>
+</html>

cypress/platform/vertices.html

@@ -0,0 +1,37 @@
+<!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>
+    body {
+      font-family: 'trebuchet ms', verdana, arial;
+    }
+  </style>
+</head>
+<body>
+  <div class="mermaid">
+    info
+  </div>
+  <div class="mermaid">
+    graph TD
+      subgraph one
+        1
+      end
+  </div>
+  <!-- <div class="mermaid">
+    graph TD
+      A --> B --> C
+  </div> -->
+
+  <script src="./mermaid.js"></script>
+  <script>
+     function showFullFirstSquad(elemName) {
+            console.log('show ' + elemName);
+        }
+        mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
+  </script>
+</body>
+</html>

cypress/platform/viewer.js

@@ -0,0 +1,66 @@
+import { Base64 } from 'js-base64'
+import mermaid2 from '../../src/mermaid'
+
+/**
+ * ##contentLoaded
+ * Callback function that is called when page is loaded. This functions fetches configuration for mermaid rendering and
+ * calls init for rendering the mermaid diagrams on the page.
+ */
+const contentLoaded = function () {
+  let pos = document.location.href.indexOf('?graph=')
+  if (pos > 0) {
+    pos = pos + 7
+    const graphBase64 = document.location.href.substr(pos)
+    const graphObj = JSON.parse(Base64.decode(graphBase64))
+    // const graph = 'hello'
+    console.log(graphObj)
+    const div = document.createElement('div')
+    div.id = 'block'
+    div.className = 'mermaid'
+    div.innerHTML = graphObj.code
+    document.getElementsByTagName('body')[0].appendChild(div)
+    global.mermaid.initialize(graphObj.mermaid)
+    // console.log('graphObj.mermaid', graphObj.mermaid)
+    global.mermaid.init()
+  }
+}
+const contentLoadedApi = function () {
+  let pos = document.location.href.indexOf('?graph=')
+  if (pos > 0) {
+    pos = pos + 7
+    const graphBase64 = document.location.href.substr(pos)
+    const graphObj = JSON.parse(Base64.decode(graphBase64))
+    // const graph = 'hello'
+    const div = document.createElement('div')
+    div.id = 'block'
+    div.className = 'mermaid'
+    // div.innerHTML = graphObj.code
+    document.getElementsByTagName('body')[0].appendChild(div)
+    global.mermaid.initialize(graphObj.mermaid)
+
+    mermaid2.render('newid', graphObj.code, (svgCode, bindFunctions) => {
+      div.innerHTML = svgCode
+
+      bindFunctions(div)
+    }, div)
+  }
+}
+
+if (typeof document !== 'undefined') {
+  /*!
+   * Wait for document loaded before starting the execution
+   */
+  window.addEventListener(
+    'load',
+    function () {
+      if (this.location.href.match('xss.html')) {
+        this.console.log('Using api')
+        contentLoadedApi()
+      } else {
+        this.console.log('Not using api')
+        contentLoaded()
+      }
+    },
+    false
+  )
+}

cypress/platform/webpackUsage.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+
+<body>
+  <div class="mermaid">
+graph LR
+A-->B
+  </div>
+  <div class="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
+  </div>
+  <script src="./bundle-test.js" charset="utf-8"></script>
+</body>
+
+</html>

cypress/platform/xss.html

@@ -0,0 +1,44 @@
+<html>
+  <head>
+    <script src="/e2e.js"></script>
+    <link
+      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      .malware {
+        position: fixed;
+        bottom:0;
+        left:0;
+        right:0;
+        height: 150px;
+        background: red;
+        color: black;
+        display: flex;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-family: monospace;
+        font-size: 72px;
+      }
+    </style>
+    <script>
+      function xssAttack(){
+        const div = document.createElement('div')
+        div.id = 'the-malware'
+        div.className = 'malware'
+        div.innerHTML = 'XSS Succeeded'
+        document.getElementsByTagName('body')[0].appendChild(div)
+      }
+    </script>
+  </head>
+  <body>
+    <script src="./mermaid.js"></script>
+    <script>
+      mermaid.initialize({
+        startOnLoad: false,
+        useMaxWidth: true,
+      });
+    </script>
+  </body>
+</html>

cypress/plugins/index.js

@@ -0,0 +1,25 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+// module.exports = (on, config) => {
+//   // `on` is used to hook into various events Cypress emits
+//   // `config` is the resolved Cypress config
+// }
+
+let percyHealthCheck = require("@percy/cypress/task");
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+  on("task", percyHealthCheck);
+};

cypress/support/commands.js

@@ -0,0 +1,27 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This is will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+
+import '@percy/cypress'

cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

dist/demo/index.html

@@ -1,106 +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=">
-  <link rel="stylesheet" href="../mermaid.css">
-</head>
-<body>
-  <div class="mermaid">
-graph TD
-A[Christmas] -->|Get money| B(Go shopping)
-B --> C{Let me think}
-C -->|One| D[Laptop]
-C -->|Two| E[iPhone]
-C -->|Three| F[Car]
-  </div>
-
-  <hr/>
-
-  <div class="mermaid">
-sequenceDiagram
-loop every day
-    Alice->>John: Hello John, how are you?
-    John-->>Alice: Great!
-end
-  </div>
-
-  <hr/>
-
-  <div class="mermaid">
-gantt
-dateFormat  YYYY-MM-DD
-title Adding GANTT diagram to mermaid
-
-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
-  </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
-Class03 *-- Class04
-Class05 o-- Class06
-Class07 .. Class08
-Class09 --> C2 : Where am i?
-Class09 --* C3
-Class09 --|> Class07
-Class07 : equals()
-Class07 : Object[] elementData
-Class01 : size()
-Class01 : int chimp
-Class01 : int gorilla
-Class08 <--> C2: Cool label
-  </div>
-  <script src="../mermaid.js"></script>
-  <script>
-    mermaid.initialize({startOnLoad: true});
-  </script>
-</body>
-</html>

dist/demo/index.js

@@ -1,9 +0,0 @@
-const api = require('../mermaidAPI.js')
-
-const r = api.parse(`sequenceDiagram
-loop every day
-    Alice->>John: Hello John, how are you?
-    John-->>Alice: Great!
-end`)
-
-console.log(r)

dist/index.html

@@ -0,0 +1,443 @@
+<!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>
+  <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">
+      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}
+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>
+
+  <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>
+
+  <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>
+
+  <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
+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
+  </div>
+  <script src="./mermaid.js"></script>
+  <script>
+    mermaid.initialize({
+      theme: 'forest',
+      // themeCSS: '.node rect { fill: red; }',
+      logLevel: 3,
+      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>
+</body>
+</html>

dist/info.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Mermaid Quick Test Page</title>
+  <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
+</head>
+<body>
+    <div class="mermaid">info
+      showInfo
+    </div>
+  <script src="./mermaid.js"></script>
+  <script>
+    mermaid.initialize({
+      theme: 'forest',
+      // themeCSS: '.node rect { fill: red; }',
+      logLevel: 1,
+      flowchart: { curve: 'linear' },
+      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>
+</body>
+</html>

dist/www/demos.html

@@ -1,227 +0,0 @@
-<!doctype html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-    <title>mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown.</title>
-    <link rel="stylesheet" href="fontawesome/css/font-awesome.min.css">
-
-    <link href="stylesheets/screen.css" rel="stylesheet" type="text/css" media="screen"/>
-    <link href="stylesheets/print.css" rel="stylesheet" type="text/css" media="print"/>
-    <link href="stylesheets/mermaid.forest.css" rel="stylesheet" type="text/css"/>
-    <link href="stylesheets/solarized_light.css" rel="stylesheet" type="text/css"/>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-    <script src="javascripts/lib/mermaid.js"></script>
-    <script src="javascripts/all.js" type="text/javascript"></script>
-    <script src="javascripts/highlight.pack.js" type="text/javascript"></script>
-
-    <script>
-        var g = function (hljs) {
-            var r = "[a-z'][a-zA-Z0-9_']*", c = "(" + r + ":" + r + "|" + r + ")";
-            var keyw = {
-                keyword: 'graph sequenceDiagram participant loop end',
-                typename: 'Note',
-                literal: "false true left right"
-            };
-            return {
-                case_insensitive: false,
-                aliases: ["mermaid"],
-                k: keyw,
-                i: 'for',
-                c: [{
-                    cN: "function",
-                    b: "^" + r + "\\s*\\(",
-                    e: "->",
-                    rB: !0,
-                    i: "\\(|#|//|/\\*|\\\\|:|;",
-                    starts: {
-                        e: ";|\\.", k: keyw, c: [
-                            {cN: "comment", b: "%", e: "$"}
-                        ]
-                    }
-                },
-                    {cN: "comment", b: "%", e: "$"}
-                ]
-            };
-        };
-        hljs.registerLanguage('mermaid', g);
-        hljs.initHighlightingOnLoad();
-        $(function () {
-            setupLanguages(["shell", "javascript", "html", "css","mermaid"]);
-        });
-        var callback = function(){
-            alert('A callback was triggered');
-        }
-    </script>
-</head>
-
-<body class="index">
-<a href="#" id="nav-button">
-      <span>
-        NAV
-        <img src="images/navbar.png"/>
-      </span>
-</a>
-
-<div class="tocify-wrapper">
-    <img src="images/logo.png"/>
-
-    <div class="lang-selector" style="display:none">
-        <a href="#" data-language-name="shell">shell</a>
-        <a href="#" data-language-name="javascript">javascript</a>
-        <a href="#" data-language-name="html">html</a>
-        <a href="#" data-language-name="css">css</a>
-    </div>
-    <div class="search">
-        <input type="text" class="search" id="input-search" placeholder="Search">
-    </div>
-    <ul class="search-results"></ul>
-    <div id="toc">
-    </div>
-    <ul class="toc-footer">
-        <div style="margin-left:5px;">
-            <a href="https://github.com/knsv/mermaid" class="github-button" >Star</a>
-            <a href="https://github.com/knsv/mermaid" class="github-button">Fork</a>
-            <a href="https://github.com/knsv/mermaid/archive/master.zip" class="github-button">Download</a>
-        </div>
-        <script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
-        <li><a href='http://github.com/tripit/slate' style="color:grey">Documentation Powered by Slate</a></li>
-    </ul>
-</div>
-<div class="page-wrapper">
-    <div class="dark-box"></div>
-    <div class="content">
-        <h1 id="demos">Demos</h1>
-<h2 id="basic-flowchart">Basic flowchart</h2>
-<pre class="css"><code>%% Example diagram
-graph LR
-    A[Square Rect] -- Link text --> B((Circle))
-    A --> C(Round Rect)
-    B --> D{Rhombus}
-    C --> D</code></pre><div class="mermaid">graph LR
-    A[Square Rect] -- Link text --> B((Circle))
-    A --> C(Round Rect)
-    B --> D{Rhombus}
-    C --> D</div><h2 id="larger-flowchart-with-some-styling">Larger flowchart with some styling</h2>
-<pre class="css"><code>%% Code for flowchart below
-graph TB
-    sq[Square shape] --> ci((Circle shape))
-
-    subgraph A subgraph
-        od>Odd shape]-- Two line&lt;br>edge comment --> ro
-        di{Diamond with &lt;br/> line break} -.-> ro(Rounded&lt;br>square&lt;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&lt;br>in an Odd shape]
-
-    %% Comments after double percent signs
-    e((Inner / circle&lt;br>and some odd &lt;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</code></pre><div class="mermaid">graph TB
-    sq[Square shape] --> ci((Circle shape))
-
-    subgraph A subgraph
-        od>Odd shape]-- Two line&lt;br>edge comment --> ro
-        di{Diamond with &lt;br/> line break} -.-> ro(Rounded&lt;br>square&lt;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</div><h2 id="basic-sequence-diagram">Basic sequence diagram</h2>
-<pre class="css"><code>%% Sequence diagram code
-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&lt;br/>long time, so long&lt;br/>that the text does&lt;br/>not fit on a row.
-
-    Bob-->Alice: Checking with John...
-    Alice->John: Yes... John, how are you?</code></pre><div class="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?</div><h2 id="loops-alt-and-opt">Loops, alt and opt</h2>
-<pre class="css"><code>%% Sequence diagram code
-sequenceDiagram
-    loop Daily query
-        Alice-&gt;&gt;Bob: Hello Bob, how are you?
-        alt is sick
-            Bob-&gt;&gt;Alice: Not so good :(
-        else is well
-            Bob-&gt;&gt;Alice: Feeling fresh like a daisy
-        end
-
-        opt Extra response
-            Bob-&gt;&gt;Alice: Thanks for asking
-        end
-    end</code></pre><div class="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</div><h2 id="message-to-self-in-loop">Message to self in loop</h2>
-<pre class="css"><code>%% Sequence diagram code
-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&lt;br/>prevail...
-    John-->>Alice: Great!
-    John->>Bob: How about you?
-    Bob-->>John: Jolly good!</code></pre><div class="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!</div>
-
-    </div>
-    <div class="dark-box">
-        <div class="lang-selector">
-            <a href="#" data-language-name="shell">shell</a>
-            <a href="#" data-language-name="ruby">ruby</a>
-            <a href="#" data-language-name="python">python</a>
-        </div>
-    </div>
-</div>
-</body>
-</html>

dist/www/development.html

@@ -1,163 +0,0 @@
-<!doctype html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-    <title>mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown.</title>
-    <link rel="stylesheet" href="fontawesome/css/font-awesome.min.css">
-
-    <link href="stylesheets/screen.css" rel="stylesheet" type="text/css" media="screen"/>
-    <link href="stylesheets/print.css" rel="stylesheet" type="text/css" media="print"/>
-    <link href="stylesheets/mermaid.forest.css" rel="stylesheet" type="text/css"/>
-    <link href="stylesheets/solarized_light.css" rel="stylesheet" type="text/css"/>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-    <script src="javascripts/lib/mermaid.js"></script>
-    <script src="javascripts/all.js" type="text/javascript"></script>
-    <script src="javascripts/highlight.pack.js" type="text/javascript"></script>
-
-    <script>
-        var g = function (hljs) {
-            var r = "[a-z'][a-zA-Z0-9_']*", c = "(" + r + ":" + r + "|" + r + ")";
-            var keyw = {
-                keyword: 'graph sequenceDiagram participant loop end',
-                typename: 'Note',
-                literal: "false true left right"
-            };
-            return {
-                case_insensitive: false,
-                aliases: ["mermaid"],
-                k: keyw,
-                i: 'for',
-                c: [{
-                    cN: "function",
-                    b: "^" + r + "\\s*\\(",
-                    e: "->",
-                    rB: !0,
-                    i: "\\(|#|//|/\\*|\\\\|:|;",
-                    starts: {
-                        e: ";|\\.", k: keyw, c: [
-                            {cN: "comment", b: "%", e: "$"}
-                        ]
-                    }
-                },
-                    {cN: "comment", b: "%", e: "$"}
-                ]
-            };
-        };
-        hljs.registerLanguage('mermaid', g);
-        hljs.initHighlightingOnLoad();
-        $(function () {
-            setupLanguages(["shell", "javascript", "html", "css","mermaid"]);
-        });
-        var callback = function(){
-            alert('A callback was triggered');
-        }
-    </script>
-</head>
-
-<body class="index">
-<a href="#" id="nav-button">
-      <span>
-        NAV
-        <img src="images/navbar.png"/>
-      </span>
-</a>
-
-<div class="tocify-wrapper">
-    <img src="images/logo.png"/>
-
-    <div class="lang-selector" style="display:none">
-        <a href="#" data-language-name="shell">shell</a>
-        <a href="#" data-language-name="javascript">javascript</a>
-        <a href="#" data-language-name="html">html</a>
-        <a href="#" data-language-name="css">css</a>
-    </div>
-    <div class="search">
-        <input type="text" class="search" id="input-search" placeholder="Search">
-    </div>
-    <ul class="search-results"></ul>
-    <div id="toc">
-    </div>
-    <ul class="toc-footer">
-        <div style="margin-left:5px;">
-            <a href="https://github.com/knsv/mermaid" class="github-button" >Star</a>
-            <a href="https://github.com/knsv/mermaid" class="github-button">Fork</a>
-            <a href="https://github.com/knsv/mermaid/archive/master.zip" class="github-button">Download</a>
-        </div>
-        <script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
-        <li><a href='http://github.com/tripit/slate' style="color:grey">Documentation Powered by Slate</a></li>
-    </ul>
-</div>
-<div class="page-wrapper">
-    <div class="dark-box"></div>
-    <div class="content">
-        <h1 id="development">Development</h1>
-<h2 id="updating-the-documentation">Updating the documentation</h2>
-<h2 id="getting-the-development-environment-up">Getting the development environment up</h2>
-<ol>
-<li>Fork the gh-pages branch in the the mermaid repository</li>
-<li>Do npm install</li>
-</ol>
-<h2 id="working-with-the-documentation">Working with the documentation</h2>
-<p>The html files are generated from the source and the markdown files in the docs folder. The site generation is done<br>using the docker.js framework with the command below.</p>
-<pre class="css"><code>docker -i ../mermaid/ -x "*git*|*travis*|*bin*|*dist*|*node_modules*|*gulp*|*lib*|*editor*|*conf*|*scripts*|*test*|*htmlDocs*" --extras mermaid -w -o htmlDocs</code></pre><p>Thus ... One important thing to remember. <em> Do not edit the html files directly! </em> Those changes will be overwritten<br>when the site is re-generated.</p>
-<h2 id="committing-the-changes">Committing the changes</h2>
-<p>Do a pull request to merge the changes to the site.</p>
-<h2 id="things-to-be-done-in-order-to-add-a-new-diagram-type">Things to be done in order to add a new diagram type</h2>
-<h3 id="step-1-grammar-parsing">Step 1: Grammar &amp; Parsing</h3>
-<h4 id="grammar">Grammar</h4>
-<p>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.</p>
-<p>For instance:</p>
-<ul>
-<li>the flowchart starts with the keyword graph.</li>
-<li>the sequence diagram starts with the keyword sequenceDiagram</li>
-</ul>
-<h4 id="store-data-found-during-parsing">Store data found during parsing</h4>
-<p>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.</p>
-<pre class="css"><code>statement
-    : 'participant' actor  { $$='actor'; }
-    | signal               { $$='signal'; }
-    | note_statement       { $$='note';  }
-    | 'title' message      { yy.setTitle($2);  }
-    ;</code></pre><p>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.</p>
-<p><strong>Note:</strong> 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.</p>
-<p>For more info look in the example diagram type:</p>
-<p>The yy object has the following function:</p>
-<pre class="css"><code>exports.parseError = function(err,hash){
-   mermaidAPI.parseError(err,hash);
-};</code></pre><p>when parsing the yy object is initialized as per below:</p>
-<pre class="css"><code>    var parser;
-    parser = exampleParser.parser;
-    parser.yy = db;</code></pre><h3 id="step-2-rendering">Step 2: Rendering</h3>
-<p>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.</p>
-<p>Place the renderer in the diagram folder.</p>
-<h3 id="step-3-detection-of-the-new-diagram-type">Step 3: Detection of the new diagram type</h3>
-<p>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.</p>
-<h3 id="step-4-the-final-piece-triggering-the-rendering">Step 4: The final piece - triggering the rendering</h3>
-<p>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 number 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.</p>
-<h2 id="usage-of-the-parser-as-a-separate-module">Usage of the parser as a separate module</h2>
-<h3 id="setup">Setup</h3>
-<pre class="css"><code>var graph = require('./graphDb');
-var flow = require('./parser/flow');
-flow.parser.yy = graph;</code></pre><h3 id="parsing">Parsing</h3>
-<pre class="css"><code>flow.parser.parse(text);</code></pre><h3 id="data-extraction">Data extraction</h3>
-<pre class="css"><code>// Javascript example
-graph.getDirection();
-graph.getVertices();
-graph.getEdges();</code></pre><p>The parser is also exposed in the mermaid api by calling:</p>
-<pre class="css"><code>var parser = mermaid.getParser();</code></pre><p>Note that the parse needs a graph object to store the data as per:</p>
-<pre class="css"><code>flow.parser.yy = graph;</code></pre><p>Look at graphDb.js for more details on that object.</p>
-
-
-    </div>
-    <div class="dark-box">
-        <div class="lang-selector">
-            <a href="#" data-language-name="shell">shell</a>
-            <a href="#" data-language-name="ruby">ruby</a>
-            <a href="#" data-language-name="python">python</a>
-        </div>
-    </div>
-</div>
-</body>
-</html>

dist/www/flowchart.html

@@ -1,296 +0,0 @@
-<!doctype html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-    <title>mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown.</title>
-    <link rel="stylesheet" href="fontawesome/css/font-awesome.min.css">
-
-    <link href="stylesheets/screen.css" rel="stylesheet" type="text/css" media="screen"/>
-    <link href="stylesheets/print.css" rel="stylesheet" type="text/css" media="print"/>
-    <link href="stylesheets/mermaid.forest.css" rel="stylesheet" type="text/css"/>
-    <link href="stylesheets/solarized_light.css" rel="stylesheet" type="text/css"/>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-    <script src="javascripts/lib/mermaid.js"></script>
-    <script src="javascripts/all.js" type="text/javascript"></script>
-    <script src="javascripts/highlight.pack.js" type="text/javascript"></script>
-
-    <script>
-        var g = function (hljs) {
-            var r = "[a-z'][a-zA-Z0-9_']*", c = "(" + r + ":" + r + "|" + r + ")";
-            var keyw = {
-                keyword: 'graph sequenceDiagram participant loop end',
-                typename: 'Note',
-                literal: "false true left right"
-            };
-            return {
-                case_insensitive: false,
-                aliases: ["mermaid"],
-                k: keyw,
-                i: 'for',
-                c: [{
-                    cN: "function",
-                    b: "^" + r + "\\s*\\(",
-                    e: "->",
-                    rB: !0,
-                    i: "\\(|#|//|/\\*|\\\\|:|;",
-                    starts: {
-                        e: ";|\\.", k: keyw, c: [
-                            {cN: "comment", b: "%", e: "$"}
-                        ]
-                    }
-                },
-                    {cN: "comment", b: "%", e: "$"}
-                ]
-            };
-        };
-        hljs.registerLanguage('mermaid', g);
-        hljs.initHighlightingOnLoad();
-        $(function () {
-            setupLanguages(["shell", "javascript", "html", "css","mermaid"]);
-        });
-        var callback = function(){
-            alert('A callback was triggered');
-        }
-    </script>
-</head>
-
-<body class="index">
-<a href="#" id="nav-button">
-      <span>
-        NAV
-        <img src="images/navbar.png"/>
-      </span>
-</a>
-
-<div class="tocify-wrapper">
-    <img src="images/logo.png"/>
-
-    <div class="lang-selector" style="display:none">
-        <a href="#" data-language-name="shell">shell</a>
-        <a href="#" data-language-name="javascript">javascript</a>
-        <a href="#" data-language-name="html">html</a>
-        <a href="#" data-language-name="css">css</a>
-    </div>
-    <div class="search">
-        <input type="text" class="search" id="input-search" placeholder="Search">
-    </div>
-    <ul class="search-results"></ul>
-    <div id="toc">
-    </div>
-    <ul class="toc-footer">
-        <div style="margin-left:5px;">
-            <a href="https://github.com/knsv/mermaid" class="github-button" >Star</a>
-            <a href="https://github.com/knsv/mermaid" class="github-button">Fork</a>
-            <a href="https://github.com/knsv/mermaid/archive/master.zip" class="github-button">Download</a>
-        </div>
-        <script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
-        <li><a href='http://github.com/tripit/slate' style="color:grey">Documentation Powered by Slate</a></li>
-    </ul>
-</div>
-<div class="page-wrapper">
-    <div class="dark-box"></div>
-    <div class="content">
-        <h1 id="flowcharts-basic-syntax">Flowcharts - Basic Syntax</h1>
-<h2 id="graph">Graph</h2>
-<p>This statement declares a new graph and the direction of the graph layout.</p>
-<pre class="css"><code>%% Example code
-graph TD</code></pre><p>This declares a graph oriented from top to bottom.</p>
-<div class="mermaid">graph TD
-    Start --> Stop</div><pre class="css"><code>%% Example code
-graph LR</code></pre><p>This declares a graph oriented from left to right.</p>
-<p>Possible directions are:</p>
-<ul>
-<li>TB - top bottom</li>
-<li>BT - bottom top</li>
-<li>RL - right left</li>
-<li><p>LR - left right</p>
-</li>
-<li><p>TD - same as TB</p>
-</li>
-</ul>
-<div class="mermaid">graph LR
-    Start --> Stop</div><h2 id="nodes-shapes">Nodes &amp; shapes</h2>
-<h3 id="a-node-default-">A node (default)</h3>
-<pre class="css"><code>graph LR
-    id1</code></pre><div class="mermaid">graph LR
-    id</div><p>Note that the id is what is displayed in the box.</p>
-<h3 id="a-node-with-text">A node with text</h3>
-<p>It is also possible to set text in the box that differs from the id. If this is done several times, it is the last text<br>found for the node that will be used. Also if you define edges for the node later on, you can omit text definitions. The<br>one previously defined will be used when rendering the box.</p>
-<pre class="css"><code>graph LR
-    id1[This is the text in the box]</code></pre><div class="mermaid">graph LR
-    id1[This is the text in the box]</div><h3 id="a-node-with-round-edges">A node with round edges</h3>
-<pre class="css"><code>graph LR
-    id1(This is the text in the box);</code></pre><div class="mermaid">graph LR
-    id1(This is the text in the box)</div><h3 id="a-node-in-the-form-of-a-circle">A node in the form of a circle</h3>
-<pre class="css"><code>graph LR
-    id1((This is the text in the circle));</code></pre><div class="mermaid">graph LR
-    id1((This is the text in the circle))</div><h3 id="a-node-in-an-asymetric-shape">A node in an asymetric shape</h3>
-<pre class="css"><code>graph LR
-    id1>This is the text in the box]</code></pre><div class="mermaid">graph LR
-    id1>This is the text in the box]</div><p>Currently only the shape above is possible and not its mirror. <em>This might change with future releases.</em></p>
-<h3 id="a-node-rhombus-">A node (rhombus)</h3>
-<pre class="css"><code>graph LR
-    id1{This is the text in the box}</code></pre><div class="mermaid">graph LR
-    id1{This is the text in the box}</div><h2 id="links-between-nodes">Links between nodes</h2>
-<p>Nodes can be connected with links/edges. It is possible to have different types of links or attach a text string to a link.</p>
-<h3 id="a-link-with-arrow-head">A link with arrow head</h3>
-<pre class="css"><code>graph LR
-    A-->B</code></pre><pre class="css"><code>graph LR;
-    A-->B</code></pre><h3 id="an-open-link">An open link</h3>
-<pre class="css"><code>graph LR
-    A --- B</code></pre><div class="mermaid">graph LR;
-    A --- B</div><h3 id="text-on-links">Text on links</h3>
-<pre class="css"><code>A-- This is the text --- B</code></pre><p>or</p>
-<pre class="css"><code>A---|This is the text|B;</code></pre><div class="mermaid">graph LR;
-   A-- This is the text ---B</div><h3 id="a-link-with-arrow-head-and-text">A link with arrow head and text</h3>
-<pre class="css"><code>A-->|text|B</code></pre><div class="mermaid">graph LR;
-    A-->|text|B</div><p>or</p>
-<pre class="css"><code>A-- text -->B</code></pre><div class="mermaid">graph LR;
-    A-- text -->B</div><h3 id="dotted-link">Dotted link</h3>
-<p>-.-&gt;</p>
-<div class="mermaid">graph LR;
-   A-.->B;</div><h3 id="dotted-link-with-text">Dotted link with text</h3>
-<p>-. text .-&gt;</p>
-<div class="mermaid">graph LR;
-   A-. text .-> B</div><h3 id="thick-link">Thick link</h3>
-<p>==&gt;</p>
-<div class="mermaid">graph LR;
-   A ==> B</div><h3 id="thick-link-with-text">Thick link with text</h3>
-<p>== text ==&gt;</p>
-<div class="mermaid">graph LR;
-   A == text ==> B</div><h2 id="special-characters-that-break-syntax">Special characters that break syntax</h2>
-<p>It is possible to put text within quotes in order to render more troublesome characters. As in the example below:</p>
-<pre class="css"><code>graph LR
-    d1["This is the (text) in the box"]</code></pre><div class="mermaid">graph LR
-    id1["This is the (text) in the box"]</div><h3 id="entity-codes-to-escape-characters">Entity codes to escape characters</h3>
-<p>It is possible to escape characters using the syntax examplified here.</p>
-<p>The flowchart defined by the following code:</p>
-<pre class="css"><code>    graph LR
-        A["A double quote:#quot;"] -->B["A dec char:#9829;"]</code></pre><p>This would render to the diagram below:</p>
-<div class="mermaid">    graph LR
-        A["A double quote:#quot;"] -->B["A dec char:#9829;"]</div><h2 id="subgraphs">Subgraphs</h2>
-<pre class="css"><code>subgraph title
-    graph definition
-end</code></pre><p>An example below:</p>
-<pre class="css"><code> %% Subgraph example
- graph TB
-         subgraph one
-         a1-->a2
-         end
-         subgraph two
-         b1-->b2
-         end
-         subgraph three
-         c1-->c2
-         end
-         c1-->a2</code></pre><div class="mermaid">graph TB
-    c1-->a2
-    subgraph one
-    a1-->a2
-    end
-    subgraph two
-    b1-->b2
-    end
-    subgraph three
-    c1-->c2
-    end</div><h2 id="interaction">Interaction</h2>
-<p>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.</p>
-<pre class="css"><code>click nodeId callback</code></pre><ul>
-<li>nodeId is the id of the node</li>
-<li>callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the nodeId as parameter.</li>
-</ul>
-<p>Examples of tooltip usage below:</p>
-<pre class="css"><code>&lt;script&gt;
-    var callback = function(){
-        alert(&#39;A callback was triggered&#39;);
-    }
-&lt;script&gt;</code></pre><pre class="css"><code>graph LR;
-    A-->B;
-    click A callback "Tooltip for a callback"
-    click B "http://www.github.com" "This is a tooltip for a link"</code></pre><p>The tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class .mermaidTooltip.</p>
-<div class="mermaid">graph LR;
-    A-->B;
-    click A callback "Tooltip"
-    click B "http://www.github.com" "This is a link"</div><aside class="success">The tooltip functionality and the ability to link to urls are available from version 0.5.2.</aside>
-
-<p>When integration mermaid using the mermaidAPI #mermaidapi the function that binds the events need to be run when the finished graph has been added to the page. This is described in the <a href="#api-usage">API usage</a> section.</p>
-<h2 id="styling-and-classes">Styling and classes</h2>
-<h3 id="styling-links">Styling links</h3>
-<p>It is possible to style links. For instance you might want to style a link that is going backwards in the flow. As links<br>have no ids in the same way as nodes, some other way of deciding what style the links should be attached to is required.<br>Instead of ids, the order number of when the link was defined in the graph is used. In the example below the style<br>defined in the linkStyle statement will belong to the fourth link in the graph:</p>
-<pre class="css"><code>linkStyle 3 stroke:#ff3,stroke-width:4px;</code></pre><h3 id="styling-a-node">Styling a node</h3>
-<p>It is possible to apply specific styles such as a thicker border or a different background color to a node.</p>
-<pre class="css"><code>%% Example code
-graph LR
-    id1(Start)-->id2(Stop)
-    style id1 fill:#f9f,stroke:#333,stroke-width:4px;
-    style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5;</code></pre><div class="mermaid">graph LR
-    id1(Start)-->id2(Stop)
-    style id1 fill:#f9f,stroke:#333,stroke-width:4px
-    style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5</div><h4 id="classes">Classes</h4>
-<p>More convenient then defining the style every time is to define a class of styles and attach this class to the nodes that<br>should have a different look.</p>
-<p>a class definition looks like the example below:</p>
-<pre class="css"><code>    classDef className fill:#f9f,stroke:#333,stroke-width:4px;</code></pre><p>Attachment of a class to a node is done as per below:</p>
-<pre class="css"><code>    class nodeId1 className;</code></pre><p>It is also possible to attach a class to a list of nodes in one statement:</p>
-<pre class="css"><code>    class nodeId1,nodeId2 className;</code></pre><h3 id="css-classes">Css classes</h3>
-<p>It is also possible to pre dine classes in css styles that can be applied from the graph definition as in the example<br>below:<br><strong>Example style</strong></p>
-<pre class="css"><code><style>
-    .cssClass > rect{
-        fill:#FF0000;
-        stroke:#FFFF00;
-        stroke-width:4px;
-    }
-</style></code></pre><p><strong>Example definition</strong></p>
-<pre class="css"><code>graph LR;
-    A-->B[AAA<span>BBB</span>];
-    B-->D;
-    class A cssClass;</code></pre><aside class="warning">Class definitions in the graph defnition is broken in version 0.5.1 but has been fixed in the master branch of mermaid. This fix will be included in 0.5.2</aside>
-
-
-
-<h3 id="default-class">Default class</h3>
-<p>If a class is named default it will be assigned to all classes without specific class definitions.</p>
-<pre class="css"><code>    classDef default fill:#f9f,stroke:#333,stroke-width:4px;</code></pre><h2 id="basic-support-for-fontawesome">Basic support for fontawesome</h2>
-<p>It is possible to add icons from fontawesome. In order to do so, you need to add the fontwesome as described in the instructions at<br><a href="https://fortawesome.github.io/Font-Awesome/">the fontawesome web site</a>.</p>
-<p>The icons are acessed via the syntax fa:#icon class name#.</p>
-<p>The example code below</p>
-<pre class="css"><code>graph TD
-    B["fa:fa-twitter for peace"]
-    B-->C[fa:fa-ban forbidden]
-    B-->D(fa:fa-spinner);
-    B-->E(A fa:fa-camera-retro perhaps?);</code></pre><p>Would render the graph below:</p>
-<div class="mermaid">graph TD
-    B["fa:fa-twitter for peace"]
-    B-->C[fa:fa-ban forbidden]
-    B-->D(fa:fa-spinner);
-    B-->E(A fa:fa-camera-retro perhaps?);</div><aside class="success">Support for fontawesome has been comitted to the  master branch and will be included in 0.5.3</aside>
-
-<h2 id="graph-declarations-with-spaces-between-vertices-and-link-and-without-semicolon">Graph declarations with spaces between vertices and link and without semicolon</h2>
-<ul>
-<li><p>In graph declarations, the statements also can now end without a semicolon. After release 0.2.16, ending a graph statement with semicolon is just optional. So the below graph declaration is also valid along with the old declarations of the graph.</p>
-</li>
-<li><p>A single space is allowed between vertices and the link. However there should not be any space between a vertex and its text and a link and its text. The old syntax of graph declaration will also work and hence this new feature is optional and is introduce to improve readability.</p>
-</li>
-</ul>
-<p>Below is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges.</p>
-<pre class="css"><code>    A[Hard edge] -->|Link text| B(Round edge)
-    B --> C{Decision}
-    C -->|One| D[Result one]
-    C -->|Two| E[Result two]</code></pre><div class="mermaid">graph LR
-    A[Hard edge] -->|Link text| B(Round edge)
-    B --> C{Decision}
-    C -->|One| D[Result one]
-    C -->|Two| E[Result two]</div>
-
-    </div>
-    <div class="dark-box">
-        <div class="lang-selector">
-            <a href="#" data-language-name="shell">shell</a>
-            <a href="#" data-language-name="ruby">ruby</a>
-            <a href="#" data-language-name="python">python</a>
-        </div>
-    </div>
-</div>
-</body>
-</html>

dist/www/fonts/slate.svg

@@ -1,14 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
-<svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Generated by IcoMoon</metadata>
-<defs>
-<font id="slate" horiz-adv-x="1024">
-<font-face units-per-em="1024" ascent="960" descent="-64" />
-<missing-glyph horiz-adv-x="1024" />
-<glyph unicode="&#x20;" d="" horiz-adv-x="512" />
-<glyph unicode="&#xe600;" d="M438.857 877.714q119.429 0 220.286-58.857t159.714-159.714 58.857-220.286-58.857-220.286-159.714-159.714-220.286-58.857-220.286 58.857-159.714 159.714-58.857 220.286 58.857 220.286 159.714 159.714 220.286 58.857zM512 165.143v108.571q0 8-5.143 13.429t-12.571 5.429h-109.714q-7.429 0-13.143-5.714t-5.714-13.143v-108.571q0-7.429 5.714-13.143t13.143-5.714h109.714q7.429 0 12.571 5.429t5.143 13.429zM510.857 361.714l10.286 354.857q0 6.857-5.714 10.286-5.714 4.571-13.714 4.571h-125.714q-8 0-13.714-4.571-5.714-3.429-5.714-10.286l9.714-354.857q0-5.714 5.714-10t13.714-4.286h105.714q8 0 13.429 4.286t6 10z" />
-<glyph unicode="&#xe602;" d="M585.143 164.571v91.429q0 8-5.143 13.143t-13.143 5.143h-54.857v292.571q0 8-5.143 13.143t-13.143 5.143h-182.857q-8 0-13.143-5.143t-5.143-13.143v-91.429q0-8 5.143-13.143t13.143-5.143h54.857v-182.857h-54.857q-8 0-13.143-5.143t-5.143-13.143v-91.429q0-8 5.143-13.143t13.143-5.143h256q8 0 13.143 5.143t5.143 13.143zM512 676.571v91.429q0 8-5.143 13.143t-13.143 5.143h-109.714q-8 0-13.143-5.143t-5.143-13.143v-91.429q0-8 5.143-13.143t13.143-5.143h109.714q8 0 13.143 5.143t5.143 13.143zM877.714 438.857q0-119.429-58.857-220.286t-159.714-159.714-220.286-58.857-220.286 58.857-159.714 159.714-58.857 220.286 58.857 220.286 159.714 159.714 220.286 58.857 220.286-58.857 159.714-159.714 58.857-220.286z" />
-<glyph unicode="&#xe606;" d="M733.714 531.428q0 16-10.286 26.286l-52 51.429q-10.857 10.857-25.714 10.857t-25.714-10.857l-233.143-232.571-129.143 129.143q-10.857 10.857-25.714 10.857t-25.714-10.857l-52-51.429q-10.286-10.286-10.286-26.286 0-15.429 10.286-25.714l206.857-206.857q10.857-10.857 25.714-10.857 15.429 0 26.286 10.857l310.286 310.286q10.286 10.286 10.286 25.714zM877.714 438.857q0-119.429-58.857-220.286t-159.714-159.714-220.286-58.857-220.286 58.857-159.714 159.714-58.857 220.286 58.857 220.286 159.714 159.714 220.286 58.857 220.286-58.857 159.714-159.714 58.857-220.286z" />
-<glyph unicode="&#xe607;" d="M658.286 475.428q0 105.714-75.143 180.857t-180.857 75.143-180.857-75.143-75.143-180.857 75.143-180.857 180.857-75.143 180.857 75.143 75.143 180.857zM950.857 0q0-29.714-21.714-51.429t-51.429-21.714q-30.857 0-51.429 21.714l-196 195.429q-102.286-70.857-228-70.857-81.714 0-156.286 31.714t-128.571 85.714-85.714 128.571-31.714 156.286 31.714 156.286 85.714 128.571 128.571 85.714 156.286 31.714 156.286-31.714 128.571-85.714 85.714-128.571 31.714-156.286q0-125.714-70.857-228l196-196q21.143-21.143 21.143-51.429z" horiz-adv-x="951" />
-</font></defs></svg>

dist/www/gantt.html

@@ -1,353 +0,0 @@
-<!doctype html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-    <title>mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown.</title>
-    <link rel="stylesheet" href="fontawesome/css/font-awesome.min.css">
-
-    <link href="stylesheets/screen.css" rel="stylesheet" type="text/css" media="screen"/>
-    <link href="stylesheets/print.css" rel="stylesheet" type="text/css" media="print"/>
-    <link href="stylesheets/mermaid.forest.css" rel="stylesheet" type="text/css"/>
-    <link href="stylesheets/solarized_light.css" rel="stylesheet" type="text/css"/>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-    <script src="javascripts/lib/mermaid.js"></script>
-    <script src="javascripts/all.js" type="text/javascript"></script>
-    <script src="javascripts/highlight.pack.js" type="text/javascript"></script>
-
-    <script>
-        var g = function (hljs) {
-            var r = "[a-z'][a-zA-Z0-9_']*", c = "(" + r + ":" + r + "|" + r + ")";
-            var keyw = {
-                keyword: 'graph sequenceDiagram participant loop end',
-                typename: 'Note',
-                literal: "false true left right"
-            };
-            return {
-                case_insensitive: false,
-                aliases: ["mermaid"],
-                k: keyw,
-                i: 'for',
-                c: [{
-                    cN: "function",
-                    b: "^" + r + "\\s*\\(",
-                    e: "->",
-                    rB: !0,
-                    i: "\\(|#|//|/\\*|\\\\|:|;",
-                    starts: {
-                        e: ";|\\.", k: keyw, c: [
-                            {cN: "comment", b: "%", e: "$"}
-                        ]
-                    }
-                },
-                    {cN: "comment", b: "%", e: "$"}
-                ]
-            };
-        };
-        hljs.registerLanguage('mermaid', g);
-        hljs.initHighlightingOnLoad();
-        $(function () {
-            setupLanguages(["shell", "javascript", "html", "css","mermaid"]);
-        });
-        var callback = function(){
-            alert('A callback was triggered');
-        }
-    </script>
-</head>
-
-<body class="index">
-<a href="#" id="nav-button">
-      <span>
-        NAV
-        <img src="images/navbar.png"/>
-      </span>
-</a>
-
-<div class="tocify-wrapper">
-    <img src="images/logo.png"/>
-
-    <div class="lang-selector" style="display:none">
-        <a href="#" data-language-name="shell">shell</a>
-        <a href="#" data-language-name="javascript">javascript</a>
-        <a href="#" data-language-name="html">html</a>
-        <a href="#" data-language-name="css">css</a>
-    </div>
-    <div class="search">
-        <input type="text" class="search" id="input-search" placeholder="Search">
-    </div>
-    <ul class="search-results"></ul>
-    <div id="toc">
-    </div>
-    <ul class="toc-footer">
-        <div style="margin-left:5px;">
-            <a href="https://github.com/knsv/mermaid" class="github-button" >Star</a>
-            <a href="https://github.com/knsv/mermaid" class="github-button">Fork</a>
-            <a href="https://github.com/knsv/mermaid/archive/master.zip" class="github-button">Download</a>
-        </div>
-        <script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
-        <li><a href='http://github.com/tripit/slate' style="color:grey">Documentation Powered by Slate</a></li>
-    </ul>
-</div>
-<div class="page-wrapper">
-    <div class="dark-box"></div>
-    <div class="content">
-        <h1 id="gant-diagrams">Gant diagrams</h1>
-<blockquote>
-<p>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. Gantt charts illustrate the start and finish dates of the terminal elements and summary elements of a project.</p>
-</blockquote>
-<p>Mermaid can render Gantt diagrams. The code snippet below:</p>
-<pre class="css"><code>%% Example of sequence diagram
-gantt
-    title A Gantt Diagram
-
-    section Section
-    A task           :a1, 2014-01-01, 30d
-    Another task     :after a1  , 20d
-    section Another
-    Task in sec      :2014-01-12  , 12d
-    anther task      : 24d</code></pre><p>Renders the following diagram:</p>
-<div class="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
-    anther task      : 24d</div><h2 id="syntax">Syntax</h2>
-<pre class="css"><code>%% Example with slection of syntaxes
-        gantt
-        dateFormat  YYYY-MM-DD
-        title Adding GANTT diagram functionality to mermaid
-
-        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</code></pre><p>Renders like below:</p>
-<div class="mermaid">gantt
-       dateFormat  YYYY-MM-DD
-       title Adding GANTT diagram functionality to mermaid
-
-       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</div><h3 id="title">title</h3>
-<p>Tbd</p>
-<h2 id="sections-statements">Sections statements</h2>
-<p>Tbd</p>
-<h2 id="setting-dates">Setting dates</h2>
-<p>Tbd</p>
-<h3 id="date-format">Date format</h3>
-<p>Tbd</p>
-<h4 id="diagram-definition">Diagram definition</h4>
-<p>Input    Example    Description:</p>
-<pre class="css"><code>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
-
-Input    Example    Description
-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</code></pre><p>More info in: <a href="http://momentjs.com/docs/#/parsing/string-format/">http://momentjs.com/docs/#/parsing/string-format/</a></p>
-<h4 id="scale">Scale</h4>
-<pre class="css"><code>%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.</code></pre><p>More info in: <a href="https://github.com/mbostock/d3/wiki/Time-Formatting">https://github.com/mbostock/d3/wiki/Time-Formatting</a></p>
-<h2 id="styling">Styling</h2>
-<p>Styling of the a sequence diagram is done by defining a number of css classes.  During rendering these classes are extracted from the</p>
-<h3 id="classes-used">Classes used</h3>
-<table>
-<thead>
-<tr>
-<th>Class</th>
-<th>Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>actor</td>
-<td>Style for the actor box at the top of the diagram.</td>
-</tr>
-<tr>
-<td>text.actor</td>
-<td>Styles for text in the actor box at the top of the diagram.</td>
-</tr>
-<tr>
-<td>actor-line</td>
-<td>The vertical line for an actor.</td>
-</tr>
-<tr>
-<td>messageLine0</td>
-<td>Styles for the solid message line.</td>
-</tr>
-<tr>
-<td>messageLine1</td>
-<td>Styles for the dotted message line.</td>
-</tr>
-<tr>
-<td>messageText</td>
-<td>Defines styles for the text on the message arrows.</td>
-</tr>
-<tr>
-<td>labelBox</td>
-<td>Defines styles label to left in a loop.</td>
-</tr>
-<tr>
-<td>labelText</td>
-<td>Styles for the text in label for loops.</td>
-</tr>
-<tr>
-<td>loopText</td>
-<td>Styles for the text in the loop box.</td>
-</tr>
-<tr>
-<td>loopLine</td>
-<td>Defines styles for the lines in the loop box.</td>
-</tr>
-<tr>
-<td>note</td>
-<td>Styles for the note box.</td>
-</tr>
-<tr>
-<td>noteText</td>
-<td>Styles for the text on in the note boxes.</td>
-</tr>
-</tbody>
-</table>
-<h3 id="sample-stylesheet">Sample stylesheet</h3>
-<pre class="css"><code>
-            .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;
-            }</code></pre><h2 id="configuration">Configuration</h2>
-<p>Is it possible to adjust the margins for rendering the sequence diagram.</p>
-<p>This is done by defining the <strong>sequenceConfig</strong> part of the configuration object. Read more about it <a href="http://knsv.github.io/mermaid/index.html#configuration28">here</a>. How to use<br>the CLI is described in the <a href="(http://knsv.github.io/mermaid/index.html#mermaidCLI">mermaidCLI</a> page.</p>
-
-
-    </div>
-    <div class="dark-box">
-        <div class="lang-selector">
-            <a href="#" data-language-name="shell">shell</a>
-            <a href="#" data-language-name="ruby">ruby</a>
-            <a href="#" data-language-name="python">python</a>
-        </div>
-    </div>
-</div>
-</body>
-</html>

dist/www/index.html

@@ -1,179 +0,0 @@
-<!doctype html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-    <title>mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown.</title>
-    <link rel="stylesheet" href="fontawesome/css/font-awesome.min.css">
-
-    <link href="stylesheets/screen.css" rel="stylesheet" type="text/css" media="screen"/>
-    <link href="stylesheets/print.css" rel="stylesheet" type="text/css" media="print"/>
-    <link href="stylesheets/mermaid.forest.css" rel="stylesheet" type="text/css"/>
-    <link href="stylesheets/solarized_light.css" rel="stylesheet" type="text/css"/>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-    <script src="javascripts/lib/mermaid.js"></script>
-    <script src="javascripts/all.js" type="text/javascript"></script>
-    <script src="javascripts/highlight.pack.js" type="text/javascript"></script>
-
-    <script>
-        var g = function (hljs) {
-            var r = "[a-z'][a-zA-Z0-9_']*", c = "(" + r + ":" + r + "|" + r + ")";
-            var keyw = {
-                keyword: 'graph sequenceDiagram participant loop end',
-                typename: 'Note',
-                literal: "false true left right"
-            };
-            return {
-                case_insensitive: false,
-                aliases: ["mermaid"],
-                k: keyw,
-                i: 'for',
-                c: [{
-                    cN: "function",
-                    b: "^" + r + "\\s*\\(",
-                    e: "->",
-                    rB: !0,
-                    i: "\\(|#|//|/\\*|\\\\|:|;",
-                    starts: {
-                        e: ";|\\.", k: keyw, c: [
-                            {cN: "comment", b: "%", e: "$"}
-                        ]
-                    }
-                },
-                    {cN: "comment", b: "%", e: "$"}
-                ]
-            };
-        };
-        hljs.registerLanguage('mermaid', g);
-        hljs.initHighlightingOnLoad();
-        $(function () {
-            setupLanguages(["shell", "javascript", "html", "css","mermaid"]);
-        });
-        var callback = function(){
-            alert('A callback was triggered');
-        }
-    </script>
-</head>
-
-<body class="index">
-<a href="#" id="nav-button">
-      <span>
-        NAV
-        <img src="images/navbar.png"/>
-      </span>
-</a>
-
-<div class="tocify-wrapper">
-    <img src="images/logo.png"/>
-
-    <div class="lang-selector" style="display:none">
-        <a href="#" data-language-name="shell">shell</a>
-        <a href="#" data-language-name="javascript">javascript</a>
-        <a href="#" data-language-name="html">html</a>
-        <a href="#" data-language-name="css">css</a>
-    </div>
-    <div class="search">
-        <input type="text" class="search" id="input-search" placeholder="Search">
-    </div>
-    <ul class="search-results"></ul>
-    <div id="toc">
-    </div>
-    <ul class="toc-footer">
-        <div style="margin-left:5px;">
-            <a href="https://github.com/knsv/mermaid" class="github-button" >Star</a>
-            <a href="https://github.com/knsv/mermaid" class="github-button">Fork</a>
-            <a href="https://github.com/knsv/mermaid/archive/master.zip" class="github-button">Download</a>
-        </div>
-        <script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
-        <li><a href='http://github.com/tripit/slate' style="color:grey">Documentation Powered by Slate</a></li>
-    </ul>
-</div>
-<div class="page-wrapper">
-    <div class="dark-box"></div>
-    <div class="content">
-        <h1 id="mermaid">mermaid</h1>
-<p><img src="images/header.png" alt="Alt text"></p>
-<blockquote>
-<p>Generation of diagrams and flowcharts from text in a similar manner as markdown.</p>
-</blockquote>
-<p>Ever wanted to simplify documentation and avoid heavy tools like Visio when explaining your code?</p>
-<p>This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript. <a href="http://knsv.github.io/mermaid/live_editor">Try it using our editor</a>.</p>
-<p>Code examples below:</p>
-<h3 id="an-example-of-a-flowchart">An example of a flowchart</h3>
-<pre class="css"><code>graph TD;
-    A-->B;
-    A-->C;
-    B-->D;
-    C-->D;</code></pre><h3 id="an-example-of-a-sequence-diagram">An example of a sequence diagram</h3>
-<pre class="css"><code>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 &lt;br/>prevail...
-    John-->Alice: Great!
-    John->Bob: How about you?
-    Bob-->John: Jolly good!</code></pre><h3 id="example-code-for-a-gantt-diagram">Example code for a gantt diagram</h3>
-<pre class="css"><code>gantt
-        dateFormat  YYYY-MM-DD
-        title Adding GANTT diagram functionality to mermaid
-        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</code></pre><p>Play with mermaid using this <a href="http://danielmschmidt.github.io/mermaid-demo/">editor</a> or this <a href="live_editor">live editor</a>.</p>
-<h2 id="credits">Credits</h2>
-<p>Many thanks to the <a href="http://d3js.org/">d3</a> and <a href="https://github.com/cpettitt/dagre-d3">dagre-d3</a> projects for providing<br>the graphical layout and drawing libraries! Thanks also to the<br><a href="http://bramp.github.io/js-sequence-diagrams">js-sequence-diagram</a> project for usage of the grammar for the<br>sequence diagrams.</p>
-<p><em>Mermaid was created by Knut Sveidqvist for easier documentation.</em></p>
-<p>Knut has not done all work by himself, here is the full list of the projects <a href="https://github.com/knsv/mermaid/graphs/contributors">contributors</a>.</p>
-<h1 id="downstream-projects">Downstream projects</h1>
-<p>Mermaid is supported in a number of publishing systems and editors. Please report if a plugin/editor is missing from the list below:</p>
-<ul>
-<li>Support in LightPaper 1.2+. <a href="https://github.com/42Squares/LightPaper/blob/master/doc/Adding%20Mermaid%20Diagrams.md">Howto</a>. Discout with code MERMAID_25</li>
-<li><a href="https://github.com/JozoVilcek/gitbook-plugin-mermaid">gitbook-plugin</a></li>
-<li>light table</li>
-<li><a href="https://marketplace.atlassian.com/plugins/org.anvard.atlassian.mermaid-plugin/server/overview">Confluence plugin</a></li>
-<li><a href="http://nauvalatmaja.com/2015/01/13/rendering-mermaid-in-docpad/">Using mermaid via docpad</a></li>
-<li><a href="https://rubygems.org/gems/jekyll-mermaid/versions/1.0.0">Using mermaid in Jekyll</a></li>
-<li><a href="http://mostlyblather.com/blog/2015/05/23/mermaid-jekyll-octopress/">Using mermaid via Octopress</a></li>
-<li><a href="http://pad.haroopress.com/user.html">Mardown editor Haroopad</a></li>
-<li><a href="https://atom.io/packages/atom-mermaid">Plugin for atom</a></li>
-<li><a href="http://mdp.tylingsoft.com/">Markdown Plus</a></li>
-<li><a href="https://github.com/kannokanno/previm">Vim Plugin</a></li>
-<li><a href="https://github.com/mgaitan/sphinxcontrib-mermaid">Sphinx extension</a></li>
-<li><a href="https://github.com/raghur/mermaid-filter">Pandoc filter</a></li>
-<li><a href="https://github.com/sinedied/hads">hads</a></li>
-</ul>
-<h1 id="online-live-editor">Online live editor</h1>
-<p>An editor is available for creating diagrams. With it you can quickly start writing mermaid diagrams. It is possible to:</p>
-<ul>
-<li>save the result as a svg</li>
-<li>get a link to a viewer of the diagram</li>
-<li><p>get a link to edit of the diagram to share a diagram so that someone else can tweak it and send a new link back</p>
-</li>
-<li><p><a href="http://knsv.github.io/mermaid/live_editor">Editor</a></p>
-</li>
-</ul>
-
-
-    </div>
-    <div class="dark-box">
-        <div class="lang-selector">
-            <a href="#" data-language-name="shell">shell</a>
-            <a href="#" data-language-name="ruby">ruby</a>
-            <a href="#" data-language-name="python">python</a>
-        </div>
-    </div>
-</div>
-</body>
-</html>

dist/www/mermaidAPI.html

@@ -1,138 +0,0 @@
-<!doctype html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-    <title>mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown.</title>
-    <link rel="stylesheet" href="fontawesome/css/font-awesome.min.css">
-
-    <link href="stylesheets/screen.css" rel="stylesheet" type="text/css" media="screen"/>
-    <link href="stylesheets/print.css" rel="stylesheet" type="text/css" media="print"/>
-    <link href="stylesheets/mermaid.forest.css" rel="stylesheet" type="text/css"/>
-    <link href="stylesheets/solarized_light.css" rel="stylesheet" type="text/css"/>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-    <script src="javascripts/lib/mermaid.js"></script>
-    <script src="javascripts/all.js" type="text/javascript"></script>
-    <script src="javascripts/highlight.pack.js" type="text/javascript"></script>
-
-    <script>
-        var g = function (hljs) {
-            var r = "[a-z'][a-zA-Z0-9_']*", c = "(" + r + ":" + r + "|" + r + ")";
-            var keyw = {
-                keyword: 'graph sequenceDiagram participant loop end',
-                typename: 'Note',
-                literal: "false true left right"
-            };
-            return {
-                case_insensitive: false,
-                aliases: ["mermaid"],
-                k: keyw,
-                i: 'for',
-                c: [{
-                    cN: "function",
-                    b: "^" + r + "\\s*\\(",
-                    e: "->",
-                    rB: !0,
-                    i: "\\(|#|//|/\\*|\\\\|:|;",
-                    starts: {
-                        e: ";|\\.", k: keyw, c: [
-                            {cN: "comment", b: "%", e: "$"}
-                        ]
-                    }
-                },
-                    {cN: "comment", b: "%", e: "$"}
-                ]
-            };
-        };
-        hljs.registerLanguage('mermaid', g);
-        hljs.initHighlightingOnLoad();
-        $(function () {
-            setupLanguages(["shell", "javascript", "html", "css","mermaid"]);
-        });
-        var callback = function(){
-            alert('A callback was triggered');
-        }
-    </script>
-</head>
-
-<body class="index">
-<a href="#" id="nav-button">
-      <span>
-        NAV
-        <img src="images/navbar.png"/>
-      </span>
-</a>
-
-<div class="tocify-wrapper">
-    <img src="images/logo.png"/>
-
-    <div class="lang-selector" style="display:none">
-        <a href="#" data-language-name="shell">shell</a>
-        <a href="#" data-language-name="javascript">javascript</a>
-        <a href="#" data-language-name="html">html</a>
-        <a href="#" data-language-name="css">css</a>
-    </div>
-    <div class="search">
-        <input type="text" class="search" id="input-search" placeholder="Search">
-    </div>
-    <ul class="search-results"></ul>
-    <div id="toc">
-    </div>
-    <ul class="toc-footer">
-        <div style="margin-left:5px;">
-            <a href="https://github.com/knsv/mermaid" class="github-button" >Star</a>
-            <a href="https://github.com/knsv/mermaid" class="github-button">Fork</a>
-            <a href="https://github.com/knsv/mermaid/archive/master.zip" class="github-button">Download</a>
-        </div>
-        <script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
-        <li><a href='http://github.com/tripit/slate' style="color:grey">Documentation Powered by Slate</a></li>
-    </ul>
-</div>
-<div class="page-wrapper">
-    <div class="dark-box"></div>
-    <div class="content">
-        <h1 id="mermaidapi">mermaidAPI</h1>
-<p>This is the api to be used when handling the integration with the web page instead of using the default integration<br>(mermaid.js).</p>
-<p>The core of this api is the <strong>render</strong> function that given a graph definitionas text renders the graph/diagram and<br>returns a 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<br>somewhere in the page or something completely different.</p>
-<h2 id="configuration">Configuration</h2>
-<p>These are the default options which can be overridden with the initialization call as in the example below:</p>
-<pre class="css"><code>mermaid.initialize({
-  flowchart:{
-     htmlLabels: false
-  }
-});</code></pre><p>logLevel , decides the amount of logging to be used.</p>
-<ul>
-<li>debug: 1</li>
-<li>info: 2</li>
-<li>warn: 3</li>
-<li>error: 4</li>
-<li>fatal: 5<br><strong>cloneCssStyles</strong> - This options controls whether or not the css rules should be copied into the generated svg<br><strong>startOnLoad</strong> - This options controls whether or mermaid starts when the page loads<br><strong>arrowMarkerAbsolute</strong> - This options controls whether or arrow markers in html code will be absolute paths or<br>an anchor, #. This matters if you are using base tag settings.<h3 id="flowchart">flowchart</h3>
-<em>The object containing configurations specific for flowcharts</em><br><strong>htmlLabels</strong> - Flag for setting whether or not a html tag should be used for rendering labels<br>on the edges<br><strong>useMaxWidth</strong> - Flag for setting whether or not a all available width should be used for<br>the diagram.<h3 id="sequencediagram">sequenceDiagram</h3>
-The object containing configurations specific for sequence diagrams<br><strong>diagramMarginX</strong> - margin to the right and left of the sequence diagram<br><strong>diagramMarginY</strong> - margin to the over and under the sequence diagram<br><strong>actorMargin</strong> - Margin between actors<br><strong>width</strong> - Width of actor boxes<br><strong>height</strong> - Height of actor boxes<br><strong>boxMargin</strong> - Margin around loop boxes<br><strong>boxTextMargin</strong> - margin around the text in loop/alt/opt boxes<br><strong>noteMargin</strong> - margin around notes<br><strong>messageMargin</strong> - Space between messages<br><strong>mirrorActors</strong> - mirror actors under diagram<br><strong>bottomMarginAdj</strong> - Depending on css styling this might need adjustment.<br>Prolongs the edge of the diagram downwards<br><strong>useMaxWidth</strong> - when this flag is set the height and width is set to 100% and is then scaling with the<br>available space if not the absolute space required is used<h3 id="gantt">gantt</h3>
-The object containing configurations specific for gantt diagrams<em><br><strong>titleTopMargin</strong> - margin top for the text over the gantt diagram<br><strong>barHeight</strong> - the height of the bars in the graph<br><strong>barGap</strong> - the margin between the different activities in the gantt diagram<br><strong>topPadding</strong> - margin between title and gantt diagram and between axis and gantt diagram.<br><strong>leftPadding</strong> - the space allocated for the section name to the left of the activities.<br><strong>gridLineStartPadding</strong> - Vertical starting position of the grid lines<br><strong>fontSize</strong> - font size ...<br><strong>fontFamily</strong> - font family ...<br><strong>numberSectionStyles</strong> - the number of alternating section styles<br><em>*axisFormatter</em></em> - formatting of the axis, this might need adjustment to match your locale and preferences<h2 id="parse">parse</h2>
-Function that parses a mermaid diagram definition. If parsing fails the parseError callback is called and an error is<br>thrown and<h2 id="version">version</h2>
-Function returning version information<br>##render<br>Function that renders an svg with a graph from a chart definition. Usage example below.</li>
-</ul>
-<pre class="css"><code>mermaidAPI.initialize({
-     startOnLoad:true
- });
- $(function(){
-     var graphDefinition = 'graph TB\na-->b';
-     var cb = function(svgGraph){
-         console.log(svgGraph);
-     };
-     mermaidAPI.render('id1',graphDefinition,cb);
- });</code></pre>
-
-    </div>
-    <div class="dark-box">
-        <div class="lang-selector">
-            <a href="#" data-language-name="shell">shell</a>
-            <a href="#" data-language-name="ruby">ruby</a>
-            <a href="#" data-language-name="python">python</a>
-        </div>
-    </div>
-</div>
-</body>
-</html>

dist/www/mermaidCLI.html

@@ -1,158 +0,0 @@
-<!doctype html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-    <title>mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown.</title>
-    <link rel="stylesheet" href="fontawesome/css/font-awesome.min.css">
-
-    <link href="stylesheets/screen.css" rel="stylesheet" type="text/css" media="screen"/>
-    <link href="stylesheets/print.css" rel="stylesheet" type="text/css" media="print"/>
-    <link href="stylesheets/mermaid.forest.css" rel="stylesheet" type="text/css"/>
-    <link href="stylesheets/solarized_light.css" rel="stylesheet" type="text/css"/>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-    <script src="javascripts/lib/mermaid.js"></script>
-    <script src="javascripts/all.js" type="text/javascript"></script>
-    <script src="javascripts/highlight.pack.js" type="text/javascript"></script>
-
-    <script>
-        var g = function (hljs) {
-            var r = "[a-z'][a-zA-Z0-9_']*", c = "(" + r + ":" + r + "|" + r + ")";
-            var keyw = {
-                keyword: 'graph sequenceDiagram participant loop end',
-                typename: 'Note',
-                literal: "false true left right"
-            };
-            return {
-                case_insensitive: false,
-                aliases: ["mermaid"],
-                k: keyw,
-                i: 'for',
-                c: [{
-                    cN: "function",
-                    b: "^" + r + "\\s*\\(",
-                    e: "->",
-                    rB: !0,
-                    i: "\\(|#|//|/\\*|\\\\|:|;",
-                    starts: {
-                        e: ";|\\.", k: keyw, c: [
-                            {cN: "comment", b: "%", e: "$"}
-                        ]
-                    }
-                },
-                    {cN: "comment", b: "%", e: "$"}
-                ]
-            };
-        };
-        hljs.registerLanguage('mermaid', g);
-        hljs.initHighlightingOnLoad();
-        $(function () {
-            setupLanguages(["shell", "javascript", "html", "css","mermaid"]);
-        });
-        var callback = function(){
-            alert('A callback was triggered');
-        }
-    </script>
-</head>
-
-<body class="index">
-<a href="#" id="nav-button">
-      <span>
-        NAV
-        <img src="images/navbar.png"/>
-      </span>
-</a>
-
-<div class="tocify-wrapper">
-    <img src="images/logo.png"/>
-
-    <div class="lang-selector" style="display:none">
-        <a href="#" data-language-name="shell">shell</a>
-        <a href="#" data-language-name="javascript">javascript</a>
-        <a href="#" data-language-name="html">html</a>
-        <a href="#" data-language-name="css">css</a>
-    </div>
-    <div class="search">
-        <input type="text" class="search" id="input-search" placeholder="Search">
-    </div>
-    <ul class="search-results"></ul>
-    <div id="toc">
-    </div>
-    <ul class="toc-footer">
-        <div style="margin-left:5px;">
-            <a href="https://github.com/knsv/mermaid" class="github-button" >Star</a>
-            <a href="https://github.com/knsv/mermaid" class="github-button">Fork</a>
-            <a href="https://github.com/knsv/mermaid/archive/master.zip" class="github-button">Download</a>
-        </div>
-        <script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
-        <li><a href='http://github.com/tripit/slate' style="color:grey">Documentation Powered by Slate</a></li>
-    </ul>
-</div>
-<div class="page-wrapper">
-    <div class="dark-box"></div>
-    <div class="content">
-        <h1 id="mermaid-cli">mermaid CLI</h1>
-<p>Installing mermaid globally (<code>npm install -g mermaid</code>) will expose the <code>mermaid</code> command to your environment, allowing you to generate PNGs from any file containing mermaid markup via the command line.</p>
-<p><strong>Note:</strong> The <code>mermaid</code> command requires <a href="http://phantomjs.org/">PhantomJS</a> (version <code>^1.9.0</code>) to be installed and available in your <em>$PATH</em>, or you can specify it&#39;s location with the <code>-e</code> option. For most environments, <code>npm install -g phantomjs</code> will satisfy this requirement.</p>
-<h2 id="usage">Usage</h2>
-<pre class="css"><code>$ mermaid --help
-
-Usage: mermaid [options] <file>...
-
-file    The mermaid description file to be rendered
-
-Options:
-  -s --svg             Output SVG instead of PNG (experimental)
-  -p --png             If SVG was selected, and you also want PNG, set this flag
-  -o --outputDir       Directory to save files, will be created automatically, defaults to `cwd`
-  -e --phantomPath     Specify the path to the phantomjs executable
-  -c --sequenceConfig  Specify the path to the file with the configuration to be applied in the sequence diagram
-  -h --help            Show this message
-  -v --verbose         Show logging
-  -w --width           width of the generated png (number)
-  --version            Print version and quit</code></pre><pre class="css"><code>mermaid testGraph.mmd
-mermaid testGraph.mmd -w 980</code></pre><h2 id="sequence-diagram-configuration">Sequence diagram configuration</h2>
-<p>The --sequenceConfig option allows overriding the sequence diagram configuration. It could be useful to increase the width between actors, the notes width or the margin to fit some large texts that are not well rendered with the default configuration, for example.</p>
-<p>The content of the file must be a JSON like this:</p>
-<pre class="css"><code>
-{
-    "diagramMarginX": 100,
-    "diagramMarginY": 10,
-    "actorMargin": 150,
-    "width": 150,
-    "height": 65,
-    "boxMargin": 10,
-    "boxTextMargin": 5,
-    "noteMargin": 10,
-    "messageMargin": 35
-}</code></pre><p>These properties will override the default values and if a property is not set in this object, it will left it empty and could raise an error. The current properties (measured in px) are:</p>
-<ul>
-<li>diagramMarginX: Size of the empty space to add at the left-right of the diagram.</li>
-<li>diagramMarginY: Size of the empty space to add at the top-bottom of the diagram.</li>
-<li>actorMargin: Horizontal space between each participant. The arrows between them would have this size too.</li>
-<li>width: Width of the participant box.</li>
-<li>height: Height of the participant box.</li>
-<li>boxMargin: Blank area around loop boxes.</li>
-<li>boxTextMargin: Blank area between the text and the border in a loop box.</li>
-<li>noteMargin: Size of the empty space around a note.</li>
-<li>messageMargin: Space between messages</li>
-</ul>
-<h2 id="cli-known-issues">CLI Known Issues</h2>
-<ul>
-<li>SVG output currently does some replacement on text, as mermaid&#39;s SVG output is only appropriate for browsers. Text color and background color is not yet replicated; please use PNGs for most purposes until this is resolved.</li>
-<li>SVG output is decidedly non-standard. It works, but may cause issues in some viewers.</li>
-</ul>
-
-
-    </div>
-    <div class="dark-box">
-        <div class="lang-selector">
-            <a href="#" data-language-name="shell">shell</a>
-            <a href="#" data-language-name="ruby">ruby</a>
-            <a href="#" data-language-name="python">python</a>
-        </div>
-    </div>
-</div>
-</body>
-</html>

dist/www/sequenceDiagram.html

@@ -1,394 +0,0 @@
-<!doctype html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-    <title>mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown.</title>
-    <link rel="stylesheet" href="fontawesome/css/font-awesome.min.css">
-
-    <link href="stylesheets/screen.css" rel="stylesheet" type="text/css" media="screen"/>
-    <link href="stylesheets/print.css" rel="stylesheet" type="text/css" media="print"/>
-    <link href="stylesheets/mermaid.forest.css" rel="stylesheet" type="text/css"/>
-    <link href="stylesheets/solarized_light.css" rel="stylesheet" type="text/css"/>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-    <script src="javascripts/lib/mermaid.js"></script>
-    <script src="javascripts/all.js" type="text/javascript"></script>
-    <script src="javascripts/highlight.pack.js" type="text/javascript"></script>
-
-    <script>
-        var g = function (hljs) {
-            var r = "[a-z'][a-zA-Z0-9_']*", c = "(" + r + ":" + r + "|" + r + ")";
-            var keyw = {
-                keyword: 'graph sequenceDiagram participant loop end',
-                typename: 'Note',
-                literal: "false true left right"
-            };
-            return {
-                case_insensitive: false,
-                aliases: ["mermaid"],
-                k: keyw,
-                i: 'for',
-                c: [{
-                    cN: "function",
-                    b: "^" + r + "\\s*\\(",
-                    e: "->",
-                    rB: !0,
-                    i: "\\(|#|//|/\\*|\\\\|:|;",
-                    starts: {
-                        e: ";|\\.", k: keyw, c: [
-                            {cN: "comment", b: "%", e: "$"}
-                        ]
-                    }
-                },
-                    {cN: "comment", b: "%", e: "$"}
-                ]
-            };
-        };
-        hljs.registerLanguage('mermaid', g);
-        hljs.initHighlightingOnLoad();
-        $(function () {
-            setupLanguages(["shell", "javascript", "html", "css","mermaid"]);
-        });
-        var callback = function(){
-            alert('A callback was triggered');
-        }
-    </script>
-</head>
-
-<body class="index">
-<a href="#" id="nav-button">
-      <span>
-        NAV
-        <img src="images/navbar.png"/>
-      </span>
-</a>
-
-<div class="tocify-wrapper">
-    <img src="images/logo.png"/>
-
-    <div class="lang-selector" style="display:none">
-        <a href="#" data-language-name="shell">shell</a>
-        <a href="#" data-language-name="javascript">javascript</a>
-        <a href="#" data-language-name="html">html</a>
-        <a href="#" data-language-name="css">css</a>
-    </div>
-    <div class="search">
-        <input type="text" class="search" id="input-search" placeholder="Search">
-    </div>
-    <ul class="search-results"></ul>
-    <div id="toc">
-    </div>
-    <ul class="toc-footer">
-        <div style="margin-left:5px;">
-            <a href="https://github.com/knsv/mermaid" class="github-button" >Star</a>
-            <a href="https://github.com/knsv/mermaid" class="github-button">Fork</a>
-            <a href="https://github.com/knsv/mermaid/archive/master.zip" class="github-button">Download</a>
-        </div>
-        <script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
-        <li><a href='http://github.com/tripit/slate' style="color:grey">Documentation Powered by Slate</a></li>
-    </ul>
-</div>
-<div class="page-wrapper">
-    <div class="dark-box"></div>
-    <div class="content">
-        <h1 id="sequence-diagrams">Sequence diagrams</h1>
-<blockquote>
-<p>A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.</p>
-</blockquote>
-<p>Mermaid can render sequence diagrams. The code snippet below:</p>
-<pre class="css"><code>%% Example of sequence diagram
-sequenceDiagram
-    Alice->>John: Hello John, how are you?
-    John-->>Alice: Great!</code></pre><p>Renders the following diagram:</p>
-<div class="mermaid">sequenceDiagram
-    Alice->>John: Hello John, how are you?
-    John-->>Alice: Great!</div><h2 id="syntax">Syntax</h2>
-<h3 id="participants">Participants</h3>
-<p>The participants can be defined implicitly as in the first example on this page. The participants or actors are<br>rendered in order of appearance in the diagram source text. Sometimes you might want to show the participants in a<br>different order than how they appear in the first message. It is possible to specify the actor&#39;s order of<br>appearance by doing the following:</p>
-<pre class="css"><code>%% Example of sequence diagram
-sequenceDiagram
-    participant John
-    participant Alice
-    Alice->>John: Hello John, how are you?
-    John-->>Alice: Great!</code></pre><p>Renders to the diagram below:</p>
-<div class="mermaid">sequenceDiagram
-    participant John
-    participant Alice
-    Alice->>John: Hello John, how are you?
-    John-->>Alice: Great!</div><h2 id="messages">Messages</h2>
-<p>Messages can be of two displayed either solid or with a dotted line.</p>
-<pre class="css"><code>[Actor][Arrow][Actor]:Message text</code></pre><p>There are six types of arrows currently supported:</p>
-<p>-&gt; which will render a solid line without arrow</p>
-<p>--&gt; which will render a dotted line  without arrow</p>
-<p>-&gt;&gt; which will render a solid line with arrowhead</p>
-<p>--&gt;&gt; which will render a dotted line  with arrowhead</p>
-<p>-x which will render a solid line with a cross at the end (async)</p>
-<p>--x which will render a dotted line with a cross at the end (async)</p>
-<h2 id="activations">Activations</h2>
-<p>It is possible to activate and deactivate an actor. (de)activation can be dedicated declarations:</p>
-<pre class="css"><code>sequenceDiagram
-    Alice->>John: Hello John, how are you?
-    activate John
-    John-->>Alice: Great!
-    deactivate John</code></pre><p>Renders to the diagram below:</p>
-<div class="mermaid">sequenceDiagram
-    Alice->>John: Hello John, how are you?
-    activate John
-    John-->>Alice: Great!
-    deactivate John</div><p>There is also a shortcut notation by appending <code>+</code>/<code>-</code> suffix to the message arrow:  </p>
-<pre class="css"><code>sequenceDiagram
-    Alice->>+John: Hello John, how are you?
-    John-->>-Alice: Great!</code></pre><p>Activations can be stacked for same actor:</p>
-<pre class="css"><code>sequenceDiagram
-    Alice->>+John: Hello John, how are you?
-    Alice->>+John: John, can yoy hear me?
-    John-->>-Alice: Hi Alice, I can hear you!
-    John-->>-Alice: I feel great!</code></pre><p>Stacked activations look like this:</p>
-<div class="mermaid">sequenceDiagram
-    Alice->>+John: Hello John, how are you?
-    Alice->>+John: John, can yoy hear me?
-    John-->>-Alice: Hi Alice, I can hear you!
-    John-->>-Alice: I feel great!</div><h2 id="notes">Notes</h2>
-<p>It is possible to add notes to a sequence diagram. This is done by the notation<br>Note [ right of | left of | over ] [Actor]: Text in note content</p>
-<p>See the example below:</p>
-<pre class="css"><code>%% Example of sequence diagram
-sequenceDiagram
-    participant John
-    Note right of John: Text in note</code></pre><p>Renders to the diagram below:</p>
-<div class="mermaid">sequenceDiagram
-    participant John
-    Note right of John: Text in note</div><p>It is also possible to create notes spanning two participants:</p>
-<pre class="css"><code>sequenceDiagram
-    Alice->John: Hello John, how are you?
-    Note over Alice,John: A typical interaction</code></pre><div class="mermaid">sequenceDiagram
-    Alice->John: Hello John, how are you?
-    Note over Alice,John: A typical interaction</div><h2 id="loops">Loops</h2>
-<p>It is possible to express loops in a sequence diagram. This is done by the notation</p>
-<pre class="css"><code>loop Loop text
-... statements ...
-end</code></pre><p>See the example below</p>
-<pre class="css"><code>%% Example of sequence diagram
-sequenceDiagram
-    Alice->John: Hello John, how are you?
-    loop Reply every minute
-        John-->Alice: Great!
-    end</code></pre><div class="mermaid">sequenceDiagram
-    Alice->John: Hello John, how are you?
-    loop Every minute
-        John-->Alice: Great!
-    end</div><h2 id="alt">Alt</h2>
-<p>It is possible to express alternative paths in a sequence diagram. This is done by the notation</p>
-<pre class="css"><code>alt Describing text
-... statements ...
-else
-... statements ...
-end</code></pre><p>or if there is sequence that is optional (if without else).</p>
-<pre class="css"><code>opt Describing text
-... statements ...
-end</code></pre><p>See the example below</p>
-<pre class="css"><code>%% Example of sequence diagram
-    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</code></pre><div class="mermaid">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</div><h2 id="styling">Styling</h2>
-<p>Styling of the a sequence diagram is done by defining a number of css classes.  During rendering these classes are extracted from the</p>
-<h3 id="classes-used">Classes used</h3>
-<table>
-<thead>
-<tr>
-<th>Class</th>
-<th>Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>actor</td>
-<td>Style for the actor box at the top of the diagram.</td>
-</tr>
-<tr>
-<td>text.actor</td>
-<td>Styles for text in the actor box at the top of the diagram.</td>
-</tr>
-<tr>
-<td>actor-line</td>
-<td>The vertical line for an actor.</td>
-</tr>
-<tr>
-<td>messageLine0</td>
-<td>Styles for the solid message line.</td>
-</tr>
-<tr>
-<td>messageLine1</td>
-<td>Styles for the dotted message line.</td>
-</tr>
-<tr>
-<td>messageText</td>
-<td>Defines styles for the text on the message arrows.</td>
-</tr>
-<tr>
-<td>labelBox</td>
-<td>Defines styles label to left in a loop.</td>
-</tr>
-<tr>
-<td>labelText</td>
-<td>Styles for the text in label for loops.</td>
-</tr>
-<tr>
-<td>loopText</td>
-<td>Styles for the text in the loop box.</td>
-</tr>
-<tr>
-<td>loopLine</td>
-<td>Defines styles for the lines in the loop box.</td>
-</tr>
-<tr>
-<td>note</td>
-<td>Styles for the note box.</td>
-</tr>
-<tr>
-<td>noteText</td>
-<td>Styles for the text on in the note boxes.</td>
-</tr>
-</tbody>
-</table>
-<h3 id="sample-stylesheet">Sample stylesheet</h3>
-<pre class="css"><code>
-body {
-    background: white;
-}
-
-.actor {
-    stroke: #CCCCFF;
-    fill: #ECECFF;
-}
-text.actor {
-    fill:black;
-    stroke:none;
-    font-family: Helvetica;
-}
-
-.actor-line {
-    stroke:grey;
-}
-
-.messageLine0 {
-    stroke-width:1.5;
-    stroke-dasharray: "2 2";
-    marker-end:"url(#arrowhead)";
-    stroke:black;
-}
-
-.messageLine1 {
-    stroke-width:1.5;
-    stroke-dasharray: "2 2";
-    stroke:black;
-}
-
-#arrowhead {
-    fill:black;
-
-}
-
-.messageText {
-    fill:black;
-    stroke:none;
-    font-family: 'trebuchet ms', verdana, arial;
-    font-size:14px;
-}
-
-.labelBox {
-    stroke: #CCCCFF;
-    fill: #ECECFF;
-}
-
-.labelText {
-    fill:black;
-    stroke:none;
-    font-family: 'trebuchet ms', verdana, arial;
-}
-
-.loopText {
-    fill:black;
-    stroke:none;
-    font-family: 'trebuchet ms', verdana, arial;
-}
-
-.loopLine {
-    stroke-width:2;
-    stroke-dasharray: "2 2";
-    marker-end:"url(#arrowhead)";
-    stroke: #CCCCFF;
-}
-
-.note {
-    stroke: #decc93;
-    stroke: #CCCCFF;
-    fill: #fff5ad;
-}
-
-.noteText {
-    fill:black;
-    stroke:none;
-    font-family: 'trebuchet ms', verdana, arial;
-    font-size:14px;
-}</code></pre><h2 id="configuration">Configuration</h2>
-<p>Is it possible to adjust the margins for rendering the sequence diagram.</p>
-<p>This is done by defining <strong>mermaid.sequenceConfig</strong> or by the CLI to use a json file with the configuration. How to use<br>the CLI is described in the mermaidCLI page.<br>mermaid.sequenceConfig can be set to a JSON string with config parameters or the corresponding object.</p>
-<pre class="css"><code>mermaid.sequenceConfig = {
-    diagramMarginX:50,
-    diagramMarginY:10,
-    boxTextMargin:5,
-    noteMargin:10,
-    messageMargin:35,
-    mirrorActors:true
-    };</code></pre><h3 id="possible-configration-params-">Possible configration params:</h3>
-<table>
-<thead>
-<tr>
-<th>Param</th>
-<th>Descriotion</th>
-<th>Default value</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>mirrorActor</td>
-<td>Turns on/off the rendering of actors below the diagram as well as above it</td>
-<td>false</td>
-</tr>
-<tr>
-<td>bottomMarginAdj</td>
-<td>Adjusts how far down the graph ended. Wide borders styles with css could generate unwantewd clipping which is why this config param exists.</td>
-<td>1</td>
-</tr>
-</tbody>
-</table>
-
-
-    </div>
-    <div class="dark-box">
-        <div class="lang-selector">
-            <a href="#" data-language-name="shell">shell</a>
-            <a href="#" data-language-name="ruby">ruby</a>
-            <a href="#" data-language-name="python">python</a>
-        </div>
-    </div>
-</div>
-</body>
-</html>

dist/www/stylesheets/mermaid.forest.css

@@ -1 +0,0 @@
-.mermaid .label{font-family:'trebuchet ms', verdana, arial;color:#333333}.node rect,.node circle,.node polygon{fill:#cde498;stroke:#13540c;stroke-width:1px}.edgePath .path{stroke:green;stroke-width:1.5px}.cluster rect{fill:#cdffb2 !important;rx:4  !important;stroke:#6eaa49 !important;stroke-width:1px !important}.cluster text{fill:#333333}.actor{stroke:#13540c;fill:#cde498}text.actor{fill:black;stroke:none}.actor-line{stroke:grey}.messageLine0{stroke-width:1.5;stroke-dasharray:"2 2";marker-end:"url(#arrowhead)";stroke:#333333}.messageLine1{stroke-width:1.5;stroke-dasharray:"2 2";stroke:#333333}#arrowhead{fill:#333333}#crosshead path{fill:#333333 !important;stroke:#333333 !important}.messageText{fill:#333333;stroke:none}.labelBox{stroke:#326932;fill:#cde498}.labelText{fill:black;stroke:none}.loopText{fill:black;stroke:none}.loopLine{stroke-width:2;stroke-dasharray:"2 2";marker-end:"url(#arrowhead)";stroke:#326932}.note{stroke:#6eaa49;fill:#fff5ad}.noteText{fill:black;stroke:none;font-family:'trebuchet ms', verdana, arial;font-size:14px}.section{stroke:none;opacity:0.2}.section0{fill:#6eaa49}.section2{fill:#6eaa49}.section1,.section3{fill:white;opacity:0.2}.sectionTitle0{fill:#333333}.sectionTitle1{fill:#333333}.sectionTitle2{fill:#333333}.sectionTitle3{fill:#333333}.sectionTitle{text-anchor:start;font-size:11px;text-height:14px}.grid .tick{stroke:lightgrey;opacity:0.3;shape-rendering:crispEdges}.grid path{stroke-width:0}.today{fill:none;stroke:red;stroke-width:2px}.task{stroke-width:2}.taskText{text-anchor:middle;font-size:11px}.taskTextOutsideRight{fill:black;text-anchor:start;font-size:11px}.taskTextOutsideLeft{fill:black;text-anchor:end;font-size:11px}.taskText0,.taskText1,.taskText2,.taskText3{fill:white}.task0,.task1,.task2,.task3{fill:#487e3a;stroke:#13540c}.taskTextOutside0,.taskTextOutside2{fill:black}.taskTextOutside1,.taskTextOutside3{fill:black}.active0,.active1,.active2,.active3{fill:#cde498;stroke:#13540c}.activeText0,.activeText1,.activeText2,.activeText3{fill:black !important}.done0,.done1,.done2,.done3{stroke:grey;fill:lightgrey;stroke-width:2}.doneText0,.doneText1,.doneText2,.doneText3{fill:black !important}.crit0,.crit1,.crit2,.crit3{stroke:#ff8888;fill:red;stroke-width:2}.activeCrit0,.activeCrit1,.activeCrit2,.activeCrit3{stroke:#ff8888;fill:#cde498;stroke-width:2}.doneCrit0,.doneCrit1,.doneCrit2,.doneCrit3{stroke:#ff8888;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}.doneCritText0,.doneCritText1,.doneCritText2,.doneCritText3{fill:black !important}.activeCritText0,.activeCritText1,.activeCritText2,.activeCritText3{fill:black !important}.titleText{text-anchor:middle;font-size:18px;fill:black}text{font-family:'trebuchet ms', verdana, arial;font-size:14px}

dist/www/stylesheets/mono-blue.css

@@ -1,69 +0,0 @@
-/*
-  Five-color theme from a single blue hue.
-*/
-.hljs {
-  display: block;
-  overflow-x: auto;
-  padding: 0.5em;
-  background: #eaeef3;
-  -webkit-text-size-adjust: none;
-}
-
-.hljs,
-.hljs-list .hljs-built_in {
-  color: #00193a;
-}
-
-.hljs-keyword,
-.hljs-title,
-.hljs-important,
-.hljs-request,
-.hljs-header,
-.hljs-javadoctag {
-  font-weight: bold;
-}
-
-.hljs-comment,
-.hljs-chunk {
-  color: #738191;
-}
-
-.hljs-string,
-.hljs-title,
-.hljs-parent,
-.hljs-built_in,
-.hljs-literal,
-.hljs-filename,
-.hljs-value,
-.hljs-addition,
-.hljs-tag,
-.hljs-argument,
-.hljs-link_label,
-.hljs-blockquote,
-.hljs-header {
-  color: #0048ab;
-}
-
-.hljs-decorator,
-.hljs-prompt,
-.hljs-yardoctag,
-.hljs-subst,
-.hljs-symbol,
-.hljs-doctype,
-.hljs-regexp,
-.hljs-preprocessor,
-.hljs-pragma,
-.hljs-pi,
-.hljs-attribute,
-.hljs-attr_selector,
-.hljs-javadoc,
-.hljs-xmlDocTag,
-.hljs-deletion,
-.hljs-shebang,
-.hljs-string .hljs-variable,
-.hljs-link_url,
-.hljs-bullet,
-.hljs-sqbracket,
-.hljs-phony {
-  color: #4c81c9;
-}

dist/www/stylesheets/print.css

@@ -1,261 +0,0 @@
-/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
-html
-{
-	font-family: sans-serif;
-	-ms-text-size-adjust: 100%;
-	-webkit-text-size-adjust: 100%;
-}
-
-body { margin: 0; }
-article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary { display: block; }
-
-audio,canvas,progress,video
-{
-	display: inline-block;
-	vertical-align: baseline;
-}
-
-audio:not([controls])
-{
-	display: none;
-	height: 0;
-}
-
-[hidden],template { display: none; }
-a { background-color: transparent; }
-a:active,a:hover { outline: 0; }
-abbr[title] { border-bottom: 1px dotted; }
-b,strong { font-weight: bold; }
-dfn { font-style: italic; }
-
-h1
-{
-	font-size: 2em;
-	margin: 0.67em 0;
-}
-
-mark
-{
-	background: #ff0;
-	color: #000;
-}
-
-small { font-size: 80%; }
-
-sub,sup
-{
-	font-size: 75%;
-	line-height: 0;
-	position: relative;
-	vertical-align: baseline;
-}
-
-sup { top: -0.5em; }
-sub { bottom: -0.25em; }
-img { border: 0; }
-svg:not(:root) { overflow: hidden; }
-figure { margin: 1em 40px; }
-
-hr
-{
-	box-sizing: content-box;
-	height: 0;
-}
-
-pre { overflow: auto; }
-
-code,kbd,pre,samp
-{
-	font-family: monospace, monospace;
-	font-size: 1em;
-}
-
-button,input,optgroup,select,textarea
-{
-	color: inherit;
-	font: inherit;
-	margin: 0;
-}
-
-button { overflow: visible; }
-button,select { text-transform: none; }
-
-button,html input[type="button"],input[type="reset"],input[type="submit"]
-{
-	-webkit-appearance: button;
-	cursor: pointer;
-}
-
-button[disabled],html input[disabled] { cursor: default; }
-
-button::-moz-focus-inner,input::-moz-focus-inner
-{
-	border: 0;
-	padding: 0;
-}
-
-input { line-height: normal; }
-
-input[type="checkbox"],input[type="radio"]
-{
-	box-sizing: border-box;
-	padding: 0;
-}
-
-input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button { height: auto; }
-
-input[type="search"]
-{
-	-webkit-appearance: textfield;
-	box-sizing: content-box;
-}
-
-input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
-
-fieldset
-{
-	border: 1px solid #c0c0c0;
-	margin: 0 2px;
-	padding: 0.35em 0.625em 0.75em;
-}
-
-legend
-{
-	border: 0;
-	padding: 0;
-}
-
-textarea { overflow: auto; }
-optgroup { font-weight: bold; }
-
-table
-{
-	border-collapse: collapse;
-	border-spacing: 0;
-}
-
-td,th { padding: 0; }
-
-.content h1,.content h2,.content h3,.content h4,body
-{
-	font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif;
-	font-size: 13px;
-}
-
-.content h1,.content h2,.content h3,.content h4 { font-weight: bold; }
-
-.content pre,.content code
-{
-	font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif;
-	font-size: 12px;
-	line-height: 1.5;
-}
-
-.content pre,.content code
-{
-	word-break: break-word;
-	-webkit-hyphens: auto;
-	-moz-hyphens: auto;
-	-ms-hyphens: auto;
-	hyphens: auto;
-}
-
-@font-face{font-family:'slate';src:url("../fonts/slate.eot?-syv14m");src:url("../fonts/slate.eot?#iefix-syv14m")  format("embedded-opentype"),url("../fonts/slate.woff2?-syv14m") format("woff2"),url("../fonts/slate.woff?-syv14m") format("woff"),url("../fonts/slate.ttf?-syv14m") format("truetype"),url("../fonts/slate.svg?-syv14m#slate") format("svg");font-weight:normal;font-style:normal}
-
-.content aside.warning:before,.content aside.notice:before,.content aside.success:before
-{
-	font-family: 'slate';
-	speak: none;
-	font-style: normal;
-	font-weight: normal;
-	font-variant: normal;
-	text-transform: none;
-	line-height: 1;
-}
-
-.content aside.warning:before { content: "\e600"; }
-.content aside.notice:before { content: "\e602"; }
-.content aside.success:before { content: "\e606"; }
-.tocify,.toc-footer,.lang-selector,.search,#nav-button { display: none; }
-
-.tocify-wrapper>img
-{
-	margin: 0 auto;
-	display: block;
-}
-
-.content { font-size: 12px; }
-
-.content pre,.content code
-{
-	border: 1px solid #999;
-	border-radius: 5px;
-	font-size: 0.8em;
-}
-
-.content pre { padding: 1.3em; }
-.content code { padding: 0.2em; }
-.content table { border: 1px solid #999; }
-.content table tr { border-bottom: 1px solid #999; }
-.content table td,.content table th { padding: 0.7em; }
-.content p { line-height: 1.5; }
-
-.content a
-{
-	text-decoration: none;
-	color: #000;
-}
-
-.content h1
-{
-	font-size: 2.5em;
-	padding-top: 0.5em;
-	padding-bottom: 0.5em;
-	margin-top: 1em;
-	margin-bottom: 21px;
-	border: 2px solid #ccc;
-	border-width: 2px 0;
-	text-align: center;
-}
-
-.content h2
-{
-	font-size: 1.8em;
-	margin-top: 2em;
-	border-top: 2px solid #ccc;
-	padding-top: 0.8em;
-}
-
-.content h1+h2,.content h1+div+h2
-{
-	border-top: none;
-	padding-top: 0;
-	margin-top: 0;
-}
-
-.content h3,.content h4
-{
-	font-size: 0.8em;
-	margin-top: 1.5em;
-	margin-bottom: 0.8em;
-	text-transform: uppercase;
-}
-
-.content h5,.content h6 { text-transform: uppercase; }
-
-.content aside
-{
-	padding: 1em;
-	border: 1px solid #ccc;
-	border-radius: 5px;
-	margin-top: 1.5em;
-	margin-bottom: 1.5em;
-	line-height: 1.6;
-}
-
-.content aside:before
-{
-	vertical-align: middle;
-	padding-right: 0.5em;
-	font-size: 14px;
-}