Adding some test pages

Bug/subgraphs number in id and space in titles 895 and 900

.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/

.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,19 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 60
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 7
+# 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: false

.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

.travis.yml

@@ -1,22 +1,8 @@
-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
+  - "8"
 script:
-  - yarn test
-after_script:
-  - cat coverage/lcov.info | codeclimate
-cache:
-  directories:
-    - node_modules
+  - yarn test --coverage
+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,39 +1,53 @@
-# 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)
 
+# 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 resposibility 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.
 
 Ever wanted to simplify documentation and avoid heavy tools like Visio when explaining your code?
 
 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 nomiated 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 +55,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 +168,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 +178,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 +200,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 +222,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"
-  }
-}

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;
-}

dist/www/stylesheets/screen.css

@@ -1,908 +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, .content h5, .content h6, html, body {
-    font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "微软雅黑", STXihei, "华文细黑", sans-serif;
-    font-size: 13px
-}
-
-.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
-    font-weight: bold
-}
-
-.content code, .content pre {
-    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 code {
-    word-break: break-all;
-    word-break: break-word;
-    -webkit-hyphens: auto;
-    -moz-hyphens: auto;
-    -ms-hyphens: auto;
-    hyphens: auto
-
-}
-
-.highlight table td {
-    padding: 5px
-}
-
-.highlight table pre {
-    margin: 0
-}
-
-.highlight, .highlight .w {
-    color: #f8f8f2;
-    background-color: #272822
-}
-
-.highlight .err {
-    color: #151515;
-    background-color: #ac4142
-}
-
-.highlight .c, .highlight .cd, .highlight .cm, .highlight .c1, .highlight .cs {
-    color: #505050
-}
-
-.highlight .cp {
-    color: #f4bf75
-}
-
-.highlight .nt {
-    color: #f4bf75
-}
-
-.highlight .o, .highlight .ow {
-    color: #d0d0d0
-}
-
-.highlight .p, .highlight .pi {
-    color: #d0d0d0
-}
-
-.highlight .gi {
-    color: #90a959
-}
-
-.highlight .gd {
-    color: #ac4142
-}
-
-.highlight .gh {
-    color: #6a9fb5;
-    background-color: #151515;
-    font-weight: bold
-}
-
-.highlight .k, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kv {
-    color: #aa759f
-}
-
-.highlight .kc {
-    color: #d28445
-}
-
-.highlight .kt {
-    color: #d28445
-}
-
-.highlight .kd {
-    color: #d28445
-}
-
-.highlight .s, .highlight .sb, .highlight .sc, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .sx, .highlight .s1 {
-    color: #90a959
-}
-
-.highlight .sr {
-    color: #75b5aa
-}
-
-.highlight .si {
-    color: #8f5536
-}
-
-.highlight .se {
-    color: #8f5536
-}
-
-.highlight .nn {
-    color: #f4bf75
-}
-
-.highlight .nc {
-    color: #f4bf75
-}
-
-.highlight .no {
-    color: #f4bf75
-}
-
-.highlight .na {
-    color: #6a9fb5
-}
-
-.highlight .m, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mb, .highlight .mx {
-    color: #90a959
-}
-
-.highlight .ss {
-    color: #90a959
-}
-
-.highlight .c, .highlight .cm, .highlight .c1, .highlight .cs {
-    color: #909090
-}
-
-.highlight, .highlight .w {
-    background-color: #292929
-}
-
-@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, .tocify-wrapper > .search: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-wrapper > .search:before {
-    content: "\e607"
-}
-
-html, body {
-    color: #333;
-    padding: 0;
-    margin: 0;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    background-color: #ffffff;
-    height: 100%;
-    -webkit-text-size-adjust: none
-}
-
-#toc > ul > li > a > span {
-    float: right;
-    background-color: #2484FF;
-    border-radius: 40px;
-    width: 20px
-}
-
-.tocify-wrapper {
-    transition: left 0.3s ease-in-out;
-    overflow-y: auto;
-    overflow-x: hidden;
-    position: fixed;
-    z-index: 30;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 230px;
-    background-color: #FEFFE0;
-    border-right: 2px solid #EFEFEF;
-    font-size: 13px;
-    font-weight: bold
-}
-
-.tocify-wrapper .lang-selector {
-    display: none
-}
-
-.tocify-wrapper .lang-selector a {
-    padding-top: 0.5em;
-    padding-bottom: 0.5em
-}
-
-.tocify-wrapper > img {
-    display: block
-}
-
-.tocify-wrapper > .search {
-    position: relative
-}
-
-.tocify-wrapper > .search input {
-    background: #e7e7e7;
-    border-width: 0 0 1px 0;
-    border-color: #666;
-    padding: 6px 0 6px 20px;
-    box-sizing: border-box;
-    margin: 10px 15px;
-    width: 200px;
-    outline: none;
-    color: #000;
-    border-radius: 0
-}
-
-.tocify-wrapper > .search:before {
-    position: absolute;
-    top: 17px;
-    left: 15px;
-    color: #444
-}
-
-.tocify-wrapper img + .tocify {
-    margin-top: 20px
-}
-
-.tocify-wrapper .search-results {
-    margin-top: 0;
-    box-sizing: border-box;
-    height: 0;
-    overflow-y: auto;
-    overflow-x: hidden;
-    transition-property: height, margin;
-    transition-duration: 180ms;
-    transition-timing-function: ease-in-out;
-    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 8px), linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent 8px), linear-gradient(to bottom, #000, transparent 1.5px), linear-gradient(to top, #939393, rgba(147, 147, 147, 0) 1.5px), #FEFFE0
-}
-
-.tocify-wrapper .search-results.visible {
-    height: 30%;
-    margin-bottom: 1em
-}
-
-.tocify-wrapper .search-results li {
-    margin: 1em 15px;
-    line-height: 1
-}
-
-.tocify-wrapper .search-results a {
-    color: #000;
-    text-decoration: none
-}
-
-.tocify-wrapper .search-results a:hover {
-    text-decoration: underline
-}
-
-.tocify-wrapper .tocify-item > a, .tocify-wrapper .toc-footer li {
-    padding: 0 15px 0 15px;
-    display: block;
-    overflow-x: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis
-}
-
-.tocify-wrapper ul, .tocify-wrapper li {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    line-height: 28px
-}
-
-.tocify-wrapper li {
-    color: #383838;
-    transition-property: background;
-    transition-timing-function: linear;
-    transition-duration: 230ms
-}
-
-.tocify-wrapper .tocify-focus {
-    box-shadow: 0px 1px 0px #000;
-    background-color: #2467af;
-    color: #fff
-}
-
-.tocify-wrapper .tocify-subheader {
-    display: none;
-    background-color: #FFFFF7;
-    font-weight: 500;
-    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 8px), linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent 8px), linear-gradient(to bottom, #000, transparent 1.5px), linear-gradient(to top, #939393, rgba(147, 147, 147, 0) 1.5px), #FEFFE0
-}
-
-.tocify-wrapper .tocify-subheader .tocify-item > a {
-    padding-left: 25px;
-    font-size: 12px
-}
-
-.tocify-wrapper .tocify-subheader > li:last-child {
-    box-shadow: none
-}
-
-.tocify-wrapper .toc-footer {
-    padding: 1em 0;
-    margin-top: 1em;
-    border-top: 1px dashed #666
-}
-
-.tocify-wrapper .toc-footer li, .tocify-wrapper .toc-footer a {
-    color: #fff;
-    text-decoration: none
-}
-
-.tocify-wrapper .toc-footer a:hover {
-    text-decoration: underline
-}
-
-.tocify-wrapper .toc-footer li {
-    font-size: 0.8em;
-    line-height: 1.7;
-    text-decoration: none
-}
-
-#nav-button {
-    padding: 0 1.5em 5em 0;
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 100;
-    color: #000;
-    text-decoration: none;
-    font-weight: bold;
-    opacity: 0.7;
-    line-height: 16px;
-    transition: left 0.3s ease-in-out
-}
-
-#nav-button span {
-    display: block;
-    padding: 6px 6px 6px;
-    background-color: rgba(234, 242, 246, 0.7);
-    -webkit-transform-origin: 0 0;
-    transform-origin: 0 0;
-    -webkit-transform: rotate(-90deg) translate(-100%, 0);
-    transform: rotate(-90deg) translate(-100%, 0);
-    border-radius: 0 0 0 5px
-}
-
-#nav-button img {
-    height: 16px;
-    vertical-align: bottom
-}
-
-#nav-button:hover {
-    opacity: 1
-}
-
-#nav-button.open {
-    left: 230px
-}
-
-.page-wrapper {
-    margin-left: 230px;
-    position: relative;
-    z-index: 10;
-    background-color: #eaf2f6;
-    min-height: 100%;
-    padding-bottom: 1px
-}
-
-.page-wrapper .dark-box {
-    width: 50%;
-    background-color: #393939;
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0
-}
-
-.page-wrapper .lang-selector {
-    position: fixed;
-    z-index: 50;
-    border-bottom: 5px solid #393939
-}
-
-.lang-selector {
-    background-color: #222;
-    width: 100%;
-    font-weight: bold
-}
-
-.lang-selector a {
-    display: block;
-    float: left;
-    color: #fff;
-    text-decoration: none;
-    padding: 0 10px;
-    line-height: 30px;
-    outline: 0
-}
-
-.lang-selector a:active, .lang-selector a:focus {
-    background-color: #111;
-    color: #fff
-}
-
-.lang-selector a.active {
-    background-color: #393939;
-    color: #fff
-}
-
-.lang-selector:after {
-    content: '';
-    clear: both;
-    display: block
-}
-
-.content {
-    position: relative;
-    z-index: 30
-}
-
-.content:after {
-    content: '';
-    display: block;
-    clear: both
-}
-
-.content > h1, .content > h2, .content > h3, .content > h4, .content > h5, .content > h6, .content > p, .content > table, .content > ul, .content > ol, .content > aside, .content > dl {
-    margin-right: 50%;
-    padding: 0 28px;
-    box-sizing: border-box;
-    display: block;
-}
-
-.content > ul, .content > ol {
-    padding-left: 43px
-}
-
-.content > h1, .content > h2, .content > div {
-    clear: both
-}
-
-.content h1 {
-    font-size: 30px;
-    padding-top: 0.5em;
-    padding-bottom: 0.5em;
-    border-bottom: 1px solid #ccc;
-    margin-bottom: 21px;
-    margin-top: 2em;
-    border-top: 1px solid #ddd;
-    background-image: linear-gradient(to bottom, #fff, #f9f9f9)
-}
-
-.content h1:first-child, .content div:first-child + h1 {
-    border-top-width: 0;
-    margin-top: 0
-}
-
-.content h2 {
-    font-size: 20px;
-    margin-top: 4em;
-    margin-bottom: 0;
-    border-top: 1px solid #ccc;
-    padding-top: 1.2em;
-    padding-bottom: 1.2em;
-    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0))
-}
-
-.content h1 + h2, .content h1 + div + h2 {
-    margin-top: -21px;
-    border-top: none
-}
-
-.content h3, .content h4, .content h5, .content h6 {
-    font-size: 15px;
-    margin-top: 2.5em;
-    margin-bottom: 0.8em
-}
-
-.content h4, .content h5, .content h6 {
-    font-size: 10px
-}
-
-.content hr {
-    margin: 2em 0;
-    border-top: 2px solid #393939;
-    border-bottom: 2px solid #eaf2f6
-}
-
-.content table {
-    margin-bottom: 1em;
-    overflow: auto
-}
-
-.content table th, .content table td {
-    text-align: left;
-    vertical-align: top;
-    line-height: 1.6
-}
-
-.content table th {
-    padding: 5px 10px;
-    border-bottom: 1px solid #ccc;
-    vertical-align: bottom
-}
-
-.content table td {
-    padding: 10px
-}
-
-.content table tr:last-child {
-    border-bottom: 1px solid #ccc
-}
-
-.content table tr:nth-child(odd) > td {
-    background-color: #f9fbfc
-}
-
-.content table tr:nth-child(even) > td {
-    background-color: #f3f7fa
-}
-
-.content dt {
-    font-weight: bold
-}
-
-.content dd {
-    margin-left: 15px
-}
-
-.content p, .content li, .content dt, .content dd {
-    line-height: 1.6;
-    margin-top: 0
-}
-
-.content img {
-    max-width: 100%
-}
-
-.content code {
-    background-color: rgba(0, 0, 0, 0.05);
-    padding: 3px;
-    border-radius: 3px
-}
-
-.content pre > code {
-    background-color: transparent;
-    padding: 0
-}
-
-.content aside {
-    padding-top: 1em;
-    padding-bottom: 1em;
-    margin-top: 1.5em;
-    margin-bottom: 1.5em;
-    background: #8fbcd4;
-    line-height: 1.6
-}
-
-.content aside.warning {
-    background-color: #c97a7e;
-}
-
-.content aside.success {
-    background-color: #6ac174;
-}
-
-.content aside:before {
-    vertical-align: middle;
-    padding-right: 0.5em;
-    font-size: 14px
-}
-
-.content .search-highlight {
-    padding: 2px;
-    margin: -2px;
-    border-radius: 4px;
-    border: 1px solid #F7E633;
-    background: linear-gradient(to top left, #f7e633 0%, #f1d32f 100%)
-}
-
-.content pre, .content blockquote {
-    /*background-color: #292929;*/
-    background-color: #FBF8EF;
-    color: #fff;
-    padding: 2em 28px;
-    margin: 0;
-    width: 50%;
-    float: right;
-    clear: right;
-    box-sizing: border-box;
-}
-
-.content pre > p, .content blockquote > p {
-    margin: 0
-}
-
-.content pre a, .content blockquote a {
-    color: #fff;
-    text-decoration: none;
-    border-bottom: dashed 1px #ccc
-}
-
-.content blockquote > p {
-    background-color: #eee;
-    border-radius: 0px;
-    padding: 13px;
-    color: #000;
-    border-left: 4px solid #f0ad4e;
-/*background-color: #eee;*/
-    /*border-radius: 5px;*/
-    /*padding: 13px;*/
-    /*color: #ccc;*/
-    /*border-top: 1px solid #000;*/
-    /*border-bottom: 1px solid #404040*/
-}
-
-@media (max-width: 930px) {
-    .tocify-wrapper {
-        left: -230px
-    }
-
-    .tocify-wrapper.open {
-        left: 0
-    }
-
-    .page-wrapper {
-        margin-left: 0
-    }
-
-    #nav-button {
-        display: block
-    }
-
-    .tocify-wrapper .tocify-item > a {
-        padding-top: 0.3em;
-        padding-bottom: 0.3em
-    }
-}
-
-/*@media (max-width: 700px) {*/
-    .dark-box {
-        display: none
-    }
-
-    .content > h1, .content > h2, .content > h3, .content > h4, .content > h5, .content > h6, .content > p, .content > table, .content > ul, .content > ol, .content > aside, .content > dl {
-        margin-right: 0
-    }
-
-    .tocify-wrapper .lang-selector {
-        display: block
-    }
-
-    .page-wrapper .lang-selector {
-        display: none
-    }
-
-    .content pre, .content blockquote {
-        width: auto;
-        float: none
-    }
-
-    .content > pre + h1, .content > blockquote + h1, .content > pre + h2, .content > blockquote + h2, .content > pre + h3, .content > blockquote + h3, .content > pre + h4, .content > blockquote + h4, .content > pre + h5, .content > blockquote + h5, .content > pre + h6, .content > blockquote + h6, .content > pre + p, .content > blockquote + p, .content > pre + table, .content > blockquote + table, .content > pre + ul, .content > blockquote + ul, .content > pre + ol, .content > blockquote + ol, .content > pre + aside, .content > blockquote + aside, .content > pre + dl, .content > blockquote + dl {
-        margin-top: 28px
-    }
-/*}*/
-
-.content code, .content pre {
-    font-size: 12px;
-    /*-webkit-box-shadow: 0 0 0 3px #eee;*/
-    /*box-shadow: 0 0 0 3px #eee;*/
-    overflow: auto !important;
-    margin-bottom: 0;
-    padding: 10px;
-    background-color: #fff;
-    color: #4d4d4c;
-    margin-bottom: 0;
-}
-.content pre {
-    border-radius: 3px;
-}
-
-.content pre {
-    -webkit-box-shadow: 0 0 0 3px #eee;
-    box-shadow: 0 0 0 3px #eee;
-    width:900px;
-    margin-left:auto;
-    margin-right:auto;
-    background: #FBF8EF;
-}
-
-svg {
-    margin-left:auto;
-    margin-right:auto;
-}
-
-.content {
-    background: #FFF;
-}

dist/www/stylesheets/solarized_light.css

@@ -1,107 +0,0 @@
-/*
-
-Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmail.com>
-
-*/
-
-.hljs {
-  display: block;
-  overflow-x: auto;
-  padding: 0.5em;
-  background: #fdf6e3;
-  color: #657b83;
-  -webkit-text-size-adjust: none;
-}
-
-.hljs-comment,
-.diff .hljs-header,
-.hljs-doctype,
-.hljs-pi,
-.lisp .hljs-string {
-  color: #93a1a1;
-}
-
-/* Solarized Green */
-.hljs-keyword,
-.hljs-winutils,
-.method,
-.hljs-addition,
-.css .hljs-tag,
-.hljs-request,
-.hljs-status,
-.nginx .hljs-title {
-  color: #859900;
-}
-
-/* Solarized Cyan */
-.hljs-number,
-.hljs-command,
-.hljs-string,
-.hljs-tag .hljs-value,
-.hljs-rule .hljs-value,
-.hljs-doctag,
-.tex .hljs-formula,
-.hljs-regexp,
-.hljs-hexcolor,
-.hljs-link_url {
-  color: #2aa198;
-}
-
-/* Solarized Blue */
-.hljs-title,
-.hljs-localvars,
-.hljs-chunk,
-.hljs-decorator,
-.hljs-built_in,
-.hljs-identifier,
-.vhdl .hljs-literal,
-.hljs-id,
-.css .hljs-function,
-.hljs-name {
-  color: #268bd2;
-}
-
-/* Solarized Yellow */
-.hljs-attribute,
-.hljs-variable,
-.lisp .hljs-body,
-.smalltalk .hljs-number,
-.hljs-constant,
-.hljs-class .hljs-title,
-.hljs-parent,
-.hljs-type,
-.hljs-link_reference {
-  color: #b58900;
-}
-
-/* Solarized Orange */
-.hljs-preprocessor,
-.hljs-preprocessor .hljs-keyword,
-.hljs-pragma,
-.hljs-shebang,
-.hljs-symbol,
-.hljs-symbol .hljs-string,
-.diff .hljs-change,
-.hljs-special,
-.hljs-attr_selector,
-.hljs-subst,
-.hljs-cdata,
-.css .hljs-pseudo,
-.hljs-header {
-  color: #cb4b16;
-}
-
-/* Solarized Red */
-.hljs-deletion,
-.hljs-important {
-  color: #dc322f;
-}
-
-/* Solarized Violet */
-.hljs-link_label {
-  color: #6c71c4;
-}
-
-.tex .hljs-formula {
-  background: #eee8d5;
-}

dist/www/upgrading.html

@@ -1,117 +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="upgrading-to-from-version-0-4-0">Upgrading to from version -0.4.0</h1>
-<p>Some of the interfaces has been upgraded.</p>
-<h2 id="initialization">Initialization</h2>
-<p>mermaid_config is no longer used. Instead a call to mermaid initialize is done as in the example below:</p>
-<h3 id="version-0-4-0">version 0.4.0</h3>
-<pre class="css"><code>mermaid_config = {
-    startOnLoad:true
-    };</code></pre><h3 id="will-look-like-below-in-version-0-5-0">will look like below in version 0.5.0</h3>
-<pre class="css"><code>mermaid.initialize({
-    startOnLoad:true
-});</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/usage.html

@@ -1,337 +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="usage">Usage</h1>
-<h2 id="installation">Installation</h2>
-<p>Either use the npm or bower package managers as per below:</p>
-<pre class="css"><code>bower install mermaid --save-dev</code></pre><pre class="css"><code>npm install mermaid --save-dev</code></pre><p>Or download a javascript bundle and a stylesheet, e.g. the urls below are for the default style and the all-in-one javascript - note that #version# should be replaced with version of choice:</p>
-<pre class="css"><code>https://cdn.rawgit.com/knsv/mermaid/#version#/dist/mermaid.css
-https://cdn.rawgit.com/knsv/mermaid/#version#/dist/mermaid.min.js</code></pre><p>Ex:</p>
-<ul>
-<li><a href="https://cdn.rawgit.com/knsv/mermaid/6.0.0/dist/mermaid.min.js">js version 6.0.0</a></li>
-</ul>
-<p>Checkout the <a href="https://github.com/knsv/mermaid/releases">latest version</a> and <a href="https://github.com/knsv/mermaid/tree/master/dist">other styles</a> such as <code>forest</code> and <code>dark</code>.</p>
-<p>There are some bundles to choose from:</p>
-<ul>
-<li>mermaid.js, mermaid.min.js This bundle contains all the javascript libraries you need to run mermaid</li>
-<li>mermaid.slim.js, mermaid.slim.min.js This bundle does not contain d3 which is useful for sites that already have d3 in place</li>
-<li>mermaidAPI.js, mermaidAPI.min.js, This bundle does not contain the web integration provided in the other packages but has a render function instead returns svg code.</li>
-</ul>
-<p><strong> Important: </strong></p>
-<blockquote>
-<p>It&#39;s best to use a specific tag or commit hash in the URL (not a branch). Files are cached permanently after the first request.</p>
-</blockquote>
-<p>Read more about that at <a href="https://rawgit.com/">https://rawgit.com/</a></p>
-<h2 id="simple-usage-on-a-web-page">Simple usage on a web page</h2>
-<p>The easiest way to integrate mermaid on a web page requires two elements:</p>
-<ol>
-<li>Inclusion of the mermaid framework in the html page using a script tag</li>
-<li>A graph definition on the web page</li>
-</ol>
-<p>If these things are in place mermaid listens to the page load event and when fires, when the page has loaded, it will<br>locate the graphs n the page and transform them to svg files.</p>
-<h3 id="include-mermaid-on-your-web-page-">Include mermaid on your web page:</h3>
-<pre class="css"><code><link rel="stylesheet" href="mermaid.css">
-&lt;script src=&quot;mermaid.min.js&quot;&gt;&lt;/script&gt;
-&lt;script&gt;mermaid.initialize({startOnLoad:true});&lt;/script&gt;</code></pre><p>Further down on your page mermaid will look for tags with <code>class=&quot;mermaid&quot;</code>. From these tags mermaid will try to<br>read the chart definiton which will be replaced with the svg chart.</p>
-<h3 id="define-a-chart-like-this-">Define a chart like this:</h3>
-<pre class="css"><code>&lt;div class=&quot;mermaid&quot;&gt;
-    CHART DEFINITION GOES HERE
-&lt;/div&gt;</code></pre><p>Would end up like this:</p>
-<pre class="css"><code>&lt;div class=&quot;mermaid&quot; id=&quot;mermaidChart0&quot;&gt;
-    &lt;svg&gt;
-        Chart ends up here
-    &lt;/svg&gt;
-&lt;/div&gt;</code></pre><p>An id is also added to mermaid tags without id.</p>
-<h3 id="labels-out-of-bounds">Labels out of bounds</h3>
-<p>If you use dynamically loaded fonts that are loaded through CSS, such as Google fonts, mermaid should wait for the<br>whole page to have been loaded (dom + assets, particularly the fonts file).</p>
-<p>$(document).load(function() {<br>    mermaid.initialize();<br>});<br>over</p>
-<p>$(document).ready(function() {<br>    mermaid.initialize();<br>});</p>
-<p>Not doing so will most likely result in mermaid rendering graphs that have labels out of bounds. The default integration<br>in mermaid uses the window.load event to start rendering.</p>
-<h3 id="calling-mermaid-init-">Calling <strong>mermaid.init</strong></h3>
-<p>By default, <strong>mermaid.init</strong> will be called when the document is ready, finding all elements with<br><code>class=&quot;mermaid&quot;</code>. If you are adding content after mermaid is loaded, or otherwise need<br>finer-grained control of this behavior, you can call <code>init</code> yourself with:</p>
-<ul>
-<li>a configuration object</li>
-<li>some nodes, as<ul>
-<li>a node</li>
-<li>an a array-like of nodes</li>
-<li>or W3C selector that will find your nodes</li>
-</ul>
-</li>
-</ul>
-<p>Example:</p>
-<pre class="css"><code>mermaid.init({noteMargin: 10}, ".someOtherClass");</code></pre><p>Or with no config object, and a jQuery selection:</p>
-<pre class="css"><code>mermaid.init(undefined, $("#someId .yetAnotherClass"));</code></pre><aside class="warning">This type of integration is deprecated instead the preferred way of handling more complex integration is to us the mermaidAPI instead.</aside>
-
-<h2 id="usage-with-browserify">Usage with browserify</h2>
-<p>The reader is assumed to know about CommonJS style of module handling and how to use browserify. If not a good place<br>to start would be <a href="http://browserify.org/">http://browserify.org/</a> website.</p>
-<p>Minimalistic javascript:</p>
-<pre class="css"><code>mermaid = require('mermaid');
-console.log('Test page! mermaid version'+mermaid.version());</code></pre><p>Bundle the javascript with browserify.</p>
-<p>Us the created bundle on a web page as per example below:</p>
-<pre class="css"><code>&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-    &lt;meta charset=&quot;UTF-8&quot;&gt;
-    &lt;link rel=&quot;stylesheet&quot; href=&quot;mermaid.css&quot; /&gt;
-    &lt;script src=&quot;bundle.js&quot;&gt;&lt;/script&gt;
-&lt;/head&gt;
-&lt;body&gt;
-    &lt;div class=&quot;mermaid&quot;&gt;
-        graph LR
-            A--&gt;B
-            B--&gt;C
-            C--&gt;A
-            D--&gt;C
-    &lt;/div&gt;
-&lt;/body&gt;
-&lt;/html&gt;</code></pre><h2 id="api-usage">API usage</h2>
-<p>The main idea with the API is to be able to call a render function with graph defintion as a string. The render function<br>will render the graph and call a callback with the resulting svg code. With this approach it is up to the site creator to<br>fetch the graph definition from the site, perhaps from a textarea, render it and place the graph somewhere in the site.</p>
-<p>To do this, include mermaidAPI on your web website instead of mermaid.js. The example below show an outline of how this<br>could be used. The example just logs the resulting svg to the javascript console.</p>
-<pre class="css"><code>&lt;script src=&quot;mermaidAPI.js&quot;&gt;&lt;/script&gt;
-
-&lt;script&gt;
-    mermaidAPI.initialize({
-        startOnLoad:false
-    });
-    $(function(){
-    // Example of using the API
-        var element = document.querySelector("#graphDiv");
-
-        var insertSvg = function(svgCode, bindFunctions){
-            element.innerHTML = svgCode;
-        };
-
-        var graphDefinition = 'graph TB\na-->b';
-        var graph = mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
-    });
-&lt;/script&gt;</code></pre><h2 id="sample-of-api-usage-together-with-browserify">Sample of API usage together with browserify</h2>
-<pre class="css"><code>$ = require('jquery');
-mermaidAPI = require('mermaid').mermaidAPI;
-mermaidAPI.initialize({
-        startOnLoad:false
-    });
-
-$(function(){
-    var graphDefinition = 'graph TB\na-->b';
-    var cb = function(html){
-        console.log(html);
-    }
-    mermaidAPI.render('id1',graphDefinition,cb);
-});</code></pre><h3 id="binding-events">Binding events</h3>
-<p>Sometimes the generated graph also has defined interactions like tooltip and click events. When using the API one must<br>add those events after the graph has been inserted into the DOM.</p>
-<p>The example code below is an extract of wheat mermaid does when using the API. The example show how it is possible to<br>bind events to a svg when using the API for rendering.</p>
-<pre class="css"><code>     var insertSvg = function(svgCode, bindFunctions){
-         element.innerHTML = svgCode;
-         if(typeof callback !== 'undefined'){
-             callback(id);
-         }
-         bindFunctions(element);
-     };
-
-     var id = 'theGraph';
-
-
-     mermaidAPI.render(id,txt,insertSvg, element);</code></pre><ol>
-<li>The graph is generated using the render call. </li>
-<li>After generation the render function calls the provided callback function, in this case its called insertSvg.</li>
-<li>The callback function is called with two parameters, the svg code of the generated graph and a function. This<br>function binds events to the svg <strong>after</strong> it is inserted into the DOM.</li>
-<li>Insert the svg code into the DOM for presentation</li>
-<li>Call the binding function that bainds the events</li>
-</ol>
-<h2 id="example-of-a-marked-renderer">Example of a marked renderer</h2>
-<p>This is the renderer used for transforming the documentation from markdown to html with mermaid diagrams in the html.</p>
-<pre class="css"><code>    var renderer = new marked.Renderer();
-    renderer.code = function (code, language) {
-        if(code.match(/^sequenceDiagram/)||code.match(/^graph/)){
-            return '&lt;div class="mermaid">'+code+'&lt;/div>';
-        }
-        else{
-            return '&lt;pre>&lt;code>'+code+'&lt;/code>&lt;/pre>';
-        }
-    };</code></pre><p>Another example in coffeescript that also includes the mermaid script tag into the generated markup.</p>
-<pre class="css"><code>marked = require &#39;marked&#39;
-
-module.exports = (options) -&gt;
-  hasMermaid = false
-  renderer = new marked.Renderer()
-  renderer.defaultCode = renderer.code
-  renderer.code = (code, language) -&gt;
-    if language is &#39;mermaid&#39;
-      html = &#39;&#39;
-      if not hasMermaid
-        hasMermaid = true
-        html += &#39;&amp;ltscript src=&quot;&#39;+options.mermaidPath+&#39;&quot;&gt;&lt;/script&gt;&#39;
-      html + &#39;&amp;ltdiv class=&quot;mermaid&quot;&gt;&#39;+code+&#39;&lt;/div&gt;&#39;
-    else
-      @defaultCode(code, language)
-
-  renderer</code></pre><h2 id="advanced-usage">Advanced usage</h2>
-<p><strong>Error handling</strong></p>
-<p>When the parser encounters invalid syntax the <strong>mermaid.parseError</strong> function is called. It is possible to override this<br>function in order to handle the error in an application specific way.</p>
-<p><strong>Parsing text without rendering</strong></p>
-<p>It is also possible to validate the syntax before rendering in order to streamline the user experience. The function<br><strong>mermaid.parse(txt)</strong> takes a text string as an argument and returns true if the text is syntactically correct and<br>false if it is not. The parseError function will be called when the parse function returns false.</p>
-<p>The code-example below in meta code illustrates how this could work:</p>
-<pre class="css"><code>
-mermaid.parseError = function(err,hash){
-    displayErrorInGui(err);
-};
-
-var textFieldUpdated = function(){
-    var textStr = getTextFromFormField('code');
-
-    if(mermaid.parse(textStr)){
-        reRender(textStr)
-    }
-};
-
-bindEventHandler('change', 'code', textFieldUpdated);</code></pre><h1 id="configuration">Configuration</h1>
-<p>Mermaid takes a number of options which lets you tweak the rendering of the diagrams. Currently there are three ways of<br>setting the options in mermaid.</p>
-<ol>
-<li>Instantiation of the configuration using the initialize call</li>
-<li><em>Using the global mermaid object</em> - deprecated</li>
-<li><em>using the global mermaid_config object</em> - deprecated</li>
-<li>Instantiation of the configuration using the <strong>mermaid.init</strong> call</li>
-</ol>
-<p>The list above has two ways to many of doing this. Three are deprecated and will eventually be removed. The list of<br>configuration objects are described <a href="http://knsv.github.io/mermaid/index.html#configuration28">in the mermaidAPI documentation</a>.</p>
-<h2 id="using-the-mermaidapi-initialize-mermaid-initialize-call">Using the mermaidAPI.initialize/mermaid.initialize call</h2>
-<p>The future proof way of setting the configuration is by using the initialization call to mermaid or mermaidAPi depending<br>on what kind of integration you use.</p>
-<pre class="css"><code>    &lt;script src=&quot;../dist/mermaid.js&quot;&gt;&lt;/script&gt;
-    &lt;script&gt;
-        var config = {
-            startOnLoad:true,
-            flowchart:{
-                    useMaxWidth:false,
-                    htmlLabels:true
-            }
-        };
-        mermaid.initialize(config);
-    &lt;/script&gt;</code></pre><aside class="success">This is the preferred way of configuring mermaid.</aside>
-
-
-<h2 id="using-the-mermaid-object">Using the mermaid object</h2>
-<p>Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this<br>approach are:</p>
-<ul>
-<li>mermaid.startOnLoad</li>
-<li>mermaid.htmlLabels</li>
-</ul>
-<pre class="css"><code>mermaid.startOnLoad = true;</code></pre><aside class="info">This way of setting the configuration is deprecated instead the preferred way of is to use the initialize method. This functionality is only kept for not breaking existing integrations</aside>
-
-<h2 id="using-the-mermaid_config">Using the mermaid_config</h2>
-<p>Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this<br>approach are:</p>
-<ul>
-<li>mermaid_config.startOnLoad</li>
-<li>mermaid_config.htmlLabels</li>
-</ul>
-<pre class="css"><code>mermaid_config.startOnLoad = true;</code></pre><aside class="info">This way of setting the configuration is deprecated instead the preferred way of is to use the initialize method. This functionality is only kept for not breaking existing integrations</aside>
-
-<h2 id="using-the-mermaid-init-call">Using the mermaid.init call</h2>
-<p>Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this<br>approach are:</p>
-<ul>
-<li>mermaid_config.startOnLoad</li>
-<li>mermaid_config.htmlLabels</li>
-</ul>
-<pre class="css"><code>mermaid_config.startOnLoad = true;</code></pre><aside class="info">This way of setting the configuration is deprecated instead the preferred way of is to use the initialize method. This functionality is only kept for not breaking existing integrations</aside>
-
-
-    </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/xssi.html

@@ -0,0 +1,202 @@
+<!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=">
+  <script>   
+  function xss(x){
+    alert(x + ' cause an xss attack');
+  }
+</script>
+<style>
+.label text { fill: red}
+</style>
+</head>
+<body>
+  <div class="mermaid">
+    info
+  </div>
+  <div class="mermaid">
+    graph LR;
+    alert`xss`-->B;
+    click B "javaSc
+ript:alert`salt`" "This is a tooltip for a link"
+  </div>
+  <div class="mermaid">
+    graph LR;
+    alert`xss`-->B;
+    click B "java
+script:alert`xss`" "This is a tooltip for a link"
+  </div>
+  <div class="mermaid">
+    graph LR;
+    alert`base64`-->B;
+    click B "data:image/png;base64,HNjcmlwdD5hbGVydCgiSGVsbG8iKTs8L3NjcmlwdD4="
+  </div>
+  <img src=xss.png />
+    <div class="mermaid">
+      graph TD
+      A["<strong>If bold then xss</strong>Christmas"] -->|Get <strong>If bold then xss</strong> money| B(Go <strong>If bold then xss</strong> 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 TB
+	subgraph "<strong>If bold then xss</strong>"
+		a1-->a2
+	end
+  </div>
+  <div class="mermaid">
+graph TD
+A[Click on] -->|Get happines| BBBB(Clickable)
+BBBB --> C{Let me think}
+C -->|One| D[Laptop]
+C -->|Two| E[iPhone]
+C -->|Three| F[Car]
+click A "http://localhost:9000/index.html#link-clicked" "link test"
+click BBBB testClick "click test"
+click C "javascript:alert" "link test"
+classDef someclass fill:#f96;
+class A someclass;
+  </div>
+  <div class="mermaid">
+    graph LR;
+    alert`md5_salt`-->B;
+    click alert`md5_salt` eval "Tooltip for a callback"
+    click B "javascript:alert`salt`" "This is a tooltip for a link"
+  </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 "javascript:alert`salt`"
+    click cl2 call ganttTestClick("test", test, test)
+    
+    section Last section
+    Describe gantt syntax               :after doc1, 3d
+    Add gantt diagram to demo page      : 20h
+    Add another diagram to demo page    : 48h
+      </div>
+  <div class="mermaid">
+sequenceDiagram
+participant "Alice"
+participant Bob
+participant John as John<br/>Second Line
+Alice ->> Bob: Hello Bob, how are you?
+Bob-->>John: How about you <strong>If bold then xss</strong>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
+  </div>
+
+  <div class="mermaid">
+classDiagram
+Class01 <|-- AveryLongClass : Co<strong>If bold then xss</strong>ol
+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>
+  <div class="mermaid">
+    graph LR
+
+    SavePropertyController --> SavePropertyCommand
+    SavePropertyCommand --> SavePropertyCommandHandler
+    SavePropertyCommandHandler --> EventElastica[elastica.postupdate]
+    SavePropertyCommandHandler --> EventProperty[property.postdisable]
+    
+    SavePropertyController --> Exceptions
+    Exceptions --> ExceptionList(SecurityException<br/>EmptyRequestBodyException<br/>Throwable)
+    
+    classDef Ui fill:#FFFFFF
+    classDef object fill:#1E98EC
+    classDef event fill:#ECB11E
+    
+    class EventElastica,EventProperty event
+    class SavePropertyCommand,SavePropertyCommandHandler object
+    class SavePropertyController Ui
+  </div>
+
+  <script src="./mermaid.js"></script>
+  <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@8.2.1/dist/mermaid.min.js"></script> -->
+  <script>
+    mermaid.initialize({
+      theme: 'forest',
+      // themeCSS: '.node rect { fill: red; }',
+      logLevel: 4,
+      flowchart: { htmlLabels: false, curve: 'linear' },
+      gantt: { axisFormat: '%m/%d/%Y' },
+      sequence: { actorMargin: 50 },
+      // sequenceDiagram: { actorMargin: 300 } // deprecated
+      securityLevel:'strict',
+      
+    });
+  </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>

docs/CHANGELOG.md

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

docs/README.md

@@ -0,0 +1,227 @@
+[![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)
+
+# mermaid
+
+## Special note regarding version 8.2
+
+In version 8.2 a security improvement was introduced. A securityLevel configuration was introduced wich sets the level of trust to be used on the parsed diagrams.
+
+* **true**: (default) tags in text are encoded, click functionality is disabled
+* false: 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 resposibility 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.
+
+Ever wanted to simplify documentation and avoid heavy tools like Visio when explaining your code?
+
+This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript.
+
+**Mermaid was nomiated and won the JS Open Source Awards (2019) in the catory The most existing 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;
+```
+![Flowchart](./img/flow.png)
+
+
+### Sequence diagram
+
+```
+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!
+```
+![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 <|-- 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
+{
+    "nodeSpacing": 150,
+    "nodeRadius": 10
+}
+end
+commit
+branch newbranch
+checkout newbranch
+commit
+commit
+checkout master
+commit
+commit
+merge newbranch
+
+```
+
+![Git graph](./img/git.png)
+
+
+## Installation
+
+### 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
+
+Things are piling up and I have hard time keeping up. To remedy this
+it would be great if we could form a core team of developers to cooperate
+with the future development mermaid.
+
+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:
+* 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.
+
+
+# For contributors
+
+## Setup
+
+    yarn install
+
+
+## Build
+
+    yarn build:watch
+
+
+## Lint
+
+    yarn lint
+
+We use [JavaScript Standard Style](https://github.com/feross/standard).
+We recommend you installing [editor plugins](https://github.com/feross/standard#are-there-text-editor-plugins) so you can get real time lint result.
+
+
+## Test
+
+    yarn test
+
+Manual test in browser:
+
+    open dist/index.html
+
+
+## Release
+
+For those who have the permission to do so:
+
+Update version number in `package.json`.
+
+    npm publish
+
+Command above generates files into the `dist` folder and publishes them to npmjs.org.
+
+
+# Credits
+
+Many thanks to the [d3](http://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!
+
+Thanks also to the [js-sequence-diagram](http://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering.
+
+*Mermaid was created by Knut Sveidqvist for easier documentation.*
+
+*[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).

docs/SUMMARY.md

@@ -0,0 +1,15 @@
+# Summary
+
+- [mermaid](README.md)
+- [FAQ](faq.md)
+- [Breaking changes](breakingChanges.md)
+- [Usage](usage.md)
+- [Flowchart](flowchart.md)
+- [Sequence diagram](sequenceDiagram.md)
+- [Gantt diagram](gantt.md)
+- [mermaid CLI](mermaidCLI.md)
+- [Demos](demos.md)
+- [mermaidAPI](mermaidAPI.md)
+- [Development](development.md)
+- [Upgrading](upgrading.md)
+- [Contribute to this website](https://github.com/mermaidjs/mermaid-gitbook)

docs/_navbar.md

@@ -0,0 +1,13 @@
+* Getting started
+
+  * [Quick start](quickstart.md)
+  * [Writing more pages](more-pages.md)
+  * [Custom navbar](custom-navbar.md)
+  * [Cover page](cover.md)
+
+* Configuration
+  * [Configuration](configuration.md)
+  * [Themes](themes.md)
+  * [Using plugins](plugins.md)
+  * [Markdown configuration](markdown.md)
+  * [Language highlight](language-highlight.md)

docs/_sidebar.md

@@ -0,0 +1,19 @@
+- Getting started
+
+  - [mermaid](README.md)
+  - [FAQ](faq.md)
+  - [Usage](usage.md)
+  - [Examples](examples.md)
+  - [mermaid CLI](mermaidCLI.md)
+
+- Diagrams
+
+  - [Flowchart](flowchart.md)
+  - [Sequence diagram](sequenceDiagram.md)
+  - [Gantt](gantt.md)
+
+- Guide
+
+  - [Development](development.md)
+  - [mermaidAPI](mermaidAPI.md)
+  - [Changelog](CHANGELOG.md)

docs/breakingChanges.md

@@ -0,0 +1,51 @@
+# Breaking changes
+
+### Breaking changes from history version to latest version:
+
+## #1
+
+```javascript
+mermaid.initialize({
+    sequenceDiagram:{
+        ...
+    }
+})
+```
+
+has been changed to
+
+```javascript
+mermaid.initialize({
+    sequence:{
+        ...
+    }
+})
+```
+
+## #2
+
+In old versions you need to add CSS file to your HTML:
+
+```html
+<link rel="stylesheet" href="mermaid.min.css">
+```
+
+or
+
+```html
+<link rel="stylesheet" href="mermaid.forest.min.css">
+```
+
+Now it is not needed to do so. And there are no more CSS files in distrubtion files.
+
+You just
+
+```javascript
+mermaid.initialize({
+    theme: 'forest'
+})
+```
+
+and it works like a charm.
+
+This is because now the CSS is inline with SVG for portability.

docs/content/demos.md

@@ -1,159 +0,0 @@
----
-title: Demos
-order: 5
----
-# Demos
-## Basic flowchart
-```
-%% Example diagram
-graph LR
-	A[Square Rect] -- Link text --> B((Circle))
-	A --> C(Round Rect)
-	B --> D{Rhombus}
-	C --> D
-```
-
-```mermaid
-graph LR
-	A[Square Rect] -- Link text --> B((Circle))
-	A --> C(Round Rect)
-	B --> D{Rhombus}
-	C --> D
-```
-
-## Larger flowchart with some styling
-
-
-```
-%% Code for flowchart below
-graph TB
-	sq[Square shape] --> ci((Circle shape))
-
-	subgraph A subgraph
-		od>Odd shape]-- Two line<br>edge comment --> ro
-		di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
-		di==>ro2(Rounded square shape)
-	end
-
-	%% Notice that no text in shape are added here instead that is appended further down
-	e --> od3>Really long text with linebreak<br>in an Odd shape]
-
-	%% Comments after double percent signs
-	e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
-
-	cyr[Cyrillic]-->cyr2((Circle shape Начало));
-
- 	classDef green fill:#9f6,stroke:#333,stroke-width:2px;
- 	classDef orange fill:#f96,stroke:#333,stroke-width:4px;
- 	class sq,e green
- 	class di orange
-```
-
-```mermaid
-graph TB
-	sq[Square shape] --> ci((Circle shape))
-
-	subgraph A subgraph
-		od>Odd shape]-- Two line<br>edge comment --> ro
-		di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
-		di==>ro2(Rounded square shape)
-	end
-
-	%% Notice that no text in shape are added here instead that is appended further down
-	e --> od3>Really long text with linebreak<br>in an Odd shape]
-
-	%% Comments after double percent signs
-	e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
-
-	cyr[Cyrillic]-->cyr2((Circle shape Начало));
-
- 	classDef green fill:#9f6,stroke:#333,stroke-width:2px;
- 	classDef orange fill:#f96,stroke:#333,stroke-width:4px;
- 	class sq,e green
- 	class di orange
-```
-## Basic sequence diagram
-```
-%% 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?
-```
-```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?
-```
-## Loops, alt and opt
-```
-%% 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
-```
-```mermaid
-sequenceDiagram
-	loop Daily query
-		Alice->>Bob: Hello Bob, how are you?
-		alt is sick
-			Bob->>Alice: Not so good :(
-		else is well
-			Bob->>Alice: Feeling fresh like a daisy
-		end
-
-		opt Extra response
-			Bob->>Alice: Thanks for asking
-		end
-	end
-```
-## Message to self in loop
-```
-%% 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!
-```
-```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!
-```

docs/content/index.md

@@ -1,99 +0,0 @@
----
-order: 0
----
-
-mermaid
-=======
-![Header Image](images/header.png)
-
->Generation of diagrams and flowcharts from text in a similar manner as markdown.
-
-Ever wanted to simplify documentation and avoid heavy tools like Visio when explaining your code?
-
-This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript. [Try it using our editor][live_editor].
-
-Code examples below:
-
-### An example of a flowchart
-```
-graph TD;
-    A-->B;
-    A-->C;
-    B-->D;
-    C-->D;
-```
-
-### An example of a sequence diagram
-```
-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!
-```
-
-### Example code for a gantt diagram
-```
-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
-```
-
-Play with mermaid using this [editor](https://danielmschmidt.github.io/mermaid-demo/) or this [live editor][live_editor].
-
-## Credits
-Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!
-Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams.
-
-*Mermaid was created by Knut Sveidqvist for easier documentation.*
-
-Knut has not done all work by himself, here is the full list of the projects [contributors](https://github.com/knsv/mermaid/graphs/contributors).
-
-# Downstream projects
-
-Mermaid is supported in a number of publishing systems and editors. Please report if a plugin/editor is missing from the list below:
-
-* Support in LightPaper 1.2+. [Howto](https://github.com/42Squares/LightPaper/blob/master/doc/Adding%20Mermaid%20Diagrams.md). Discout with code MERMAID_25
-* [gitbook-plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
-* light table
-* [Confluence plugin](https://marketplace.atlassian.com/plugins/org.anvard.atlassian.mermaid-plugin/server/overview)
-* [Using mermaid via docpad](http://nauvalatmaja.com/2015/01/13/rendering-mermaid-in-docpad/)
-* [Using mermaid in Jekyll](https://rubygems.org/gems/jekyll-mermaid/versions/1.0.0)
-* [Using mermaid via Octopress](http://mostlyblather.com/blog/2015/05/23/mermaid-jekyll-octopress/)
-* [Mardown editor Haroopad](http://pad.haroopress.com/user.html)
-* [Plugin for atom](https://atom.io/packages/atom-mermaid)
-* [Markdown Plus](https://mdp.tylingsoft.com/)
-* [Vim Plugin](https://github.com/kannokanno/previm)
-* [Sphinx extension](https://github.com/mgaitan/sphinxcontrib-mermaid)
-* [Pandoc filter](https://github.com/raghur/mermaid-filter)
-* [hads](https://github.com/sinedied/hads)
-
-# Online live editor
-
-An editor is available for creating diagrams. With it you can quickly start writing mermaid diagrams. It is possible to:
-
-* save the result as a svg
-* get a link to a viewer of the diagram
-* 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
-
-* [Editor][live_editor]
-
-[live_editor]: https://knsv.github.io/mermaid/live_editor/

docs/content/mermaidCLI.md

@@ -1,77 +0,0 @@
----
-order: 4
----
-
-# mermaid CLI
-
-Installing mermaid globally (`npm install -g mermaid`) will expose the `mermaid` command to your environment, allowing you to generate PNGs from any file containing mermaid markup via the command line.
-
-**Note:** The `mermaid` command requires [PhantomJS](http://phantomjs.org/) (version `^1.9.0`) to be installed and available in your *$PATH*, or you can specify it's location with the `-e` option. For most environments, `npm install -g phantomjs` will satisfy this requirement.
-
-## Usage
-
-```
-$ 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`
-  -O --outputSuffix    Suffix to output filenames in front of '.svg' or '.png', defaults to ''
-  -e --phantomPath     Specify the path to the phantomjs executable
-  -t --css             Specify the path to a CSS file to be included when processing output
-  -c --sequenceConfig  Specify the path to the file with the configuration to be applied in the sequence diagram
-  -g --ganttConfig     Specify the path to the file with the configuration to be applied in the gantt diagram
-  -h --help            Show this message
-  -v --verbose         Show logging
-  -w --width           width of the generated png (number)
-  --version            Print version and quit
-```
-
-```
-mermaid testGraph.mmd
-mermaid testGraph.mmd -w 980
-```
-
-## Sequence diagram configuration
-
-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.
-
-The content of the file must be a JSON like this:
-
-```
-
-{
-    "diagramMarginX": 100,
-    "diagramMarginY": 10,
-    "actorMargin": 150,
-    "width": 150,
-    "height": 65,
-    "boxMargin": 10,
-    "boxTextMargin": 5,
-    "noteMargin": 10,
-    "messageMargin": 35
-}
-
-```
-
-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:
-
-- diagramMarginX: Size of the empty space to add at the left-right of the diagram.
-- diagramMarginY: Size of the empty space to add at the top-bottom of the diagram.
-- actorMargin: Horizontal space between each participant. The arrows between them would have this size too.
-- width: Width of the participant box.
-- height: Height of the participant box.
-- boxMargin: Blank area around loop boxes.
-- boxTextMargin: Blank area between the text and the border in a loop box.
-- noteMargin: Size of the empty space around a note.
-- messageMargin: Space between messages
-
-## CLI Known Issues
-
-- SVG output currently does some replacement on text, as mermaid'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.
-- SVG output is decidedly non-standard. It works, but may cause issues in some viewers.

docs/content/upgrading.md

@@ -1,27 +0,0 @@
----
-order: 10
----
-
-# Upgrading to from version -0.4.0
-
-Some of the interfaces has been upgraded.
-
-## Initialization
-
-mermaid_config is no longer used. Instead a call to mermaid initialize is done as in the example below:
-
-### version 0.4.0
-
-```
-mermaid_config = {
-    startOnLoad:true
-    };
-```
-
-### will look like below in version 0.5.0
-
-```
-mermaid.initialize({
-    startOnLoad:true
-});
-```

docs/content/usage.md

@@ -1,403 +0,0 @@
----
-title: Usage
-order: 1
----
-# Usage
-## Installation
-
-Either use the npm or bower package managers as per below:
-
-```
-bower install mermaid --save-dev
-```
-
-```
-npm install mermaid --save-dev
-```
-
-Or download a javascript bundle and a stylesheet, e.g. the urls below are for the default style and the all-in-one javascript - note that #version# should be replaced with version of choice:
-
-```
-https://cdn.rawgit.com/knsv/mermaid/#version#/dist/mermaid.css
-https://cdn.rawgit.com/knsv/mermaid/#version#/dist/mermaid.min.js
-```
-
-Ex:
-* [js version 6.0.0](https://cdn.rawgit.com/knsv/mermaid/6.0.0/dist/mermaid.min.js)
-
-Checkout the [latest version](https://github.com/knsv/mermaid/releases) and [other styles](https://github.com/knsv/mermaid/tree/master/dist) such as `forest` and `dark`.
-
-There are some bundles to choose from:
-* mermaid.js, mermaid.min.js This bundle contains all the javascript libraries you need to run mermaid
-* mermaid.slim.js, mermaid.slim.min.js This bundle does not contain d3 which is useful for sites that already have d3 in place
-* mermaidAPI.js, mermaidAPI.min.js, This bundle does not contain the web integration provided in the other packages but has a render function instead returns svg code.
-
-
-** Important: **
-> It's best to use a specific tag or commit hash in the URL (not a branch). Files are cached permanently after the first request.
-
-Read more about that at [https://rawgit.com/](https://rawgit.com/)
-
-## Simple usage on a web page
-
-The easiest way to integrate mermaid on a web page requires two elements:
-1. Inclusion of the mermaid framework in the html page using a script tag
-2. A graph definition on the web page
-
-If these things are in place mermaid listens to the page load event and when fires, when the page has loaded, it will
-locate the graphs n the page and transform them to svg files.
-
-### Include mermaid on your web page:
-
-```html
-<link rel="stylesheet" href="mermaid.css">
-&lt;script src=&quot;mermaid.min.js&quot;&gt;&lt;/script&gt;
-&lt;script&gt;mermaid.initialize({startOnLoad:true});&lt;/script&gt;
-```
-
-Further down on your page mermaid will look for tags with ```class="mermaid"```. From these tags mermaid will try to
-read the chart definiton which will be replaced with the svg chart.
-
-
-### Define a chart like this:
-
-```
-&lt;div class=&quot;mermaid&quot;&gt;
-    CHART DEFINITION GOES HERE
-&lt;/div&gt;
-
-```
-
-Would end up like this:
-```
-&lt;div class=&quot;mermaid&quot; id=&quot;mermaidChart0&quot;&gt;
-    &lt;svg&gt;
-        Chart ends up here
-    &lt;/svg&gt;
-&lt;/div&gt;
-
-```
-An id is also added to mermaid tags without id.
-
-### Simple full example:
-```html
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <!-- Downloaded as per http://knsv.github.io/mermaid/#installation -->
-  <!-- Stored in the same directory as html file                     -->
-  <link rel="stylesheet" href="mermaid.css">
-
-  <!-- Optional to use fontawesome                                   -->
-  <!-- Downloaded as per http://fontawesome.io/get-started/          -->
-  <!-- Stored in the same directory as html file                     -->
-  <script src="https://use.fontawesome.com/7065416dc9.js"></script>
-
-</head>
-<body>
-
-  <!-- Include mermaid on your web page:                             -->
-  <script src="mermaid.min.js"></script>
-  <script>mermaid.initialize({startOnLoad:true});</script>
-
-  <div class="mermaid">
-  graph LR
-      A --- B
-      B-->C[fa:fa-ban forbidden]
-      B-->D(fa:fa-spinner);
-  </div>
-
-</body>
-</html>
-```
-### Labels out of bounds
-
-If you use dynamically loaded fonts that are loaded through CSS, such as Google fonts, mermaid should wait for the 
-whole page to have been loaded (dom + assets, particularly the fonts file).
-
-$(document).load(function() {
-    mermaid.initialize();
-});
-over
-
-$(document).ready(function() {
-    mermaid.initialize();
-});
-
-Not doing so will most likely result in mermaid rendering graphs that have labels out of bounds. The default integration 
-in mermaid uses the window.load event to start rendering.
-
-### Calling **mermaid.init**
-By default, **mermaid.init** will be called when the document is ready, finding all elements with
-``class="mermaid"``. If you are adding content after mermaid is loaded, or otherwise need
-finer-grained control of this behavior, you can call `init` yourself with:
-- a configuration object
-- some nodes, as
-  - a node
-  - an a array-like of nodes
-  - or W3C selector that will find your nodes
-
-Example:
-```
-mermaid.init({noteMargin: 10}, ".someOtherClass");
-```
-Or with no config object, and a jQuery selection:
-```
-mermaid.init(undefined, $("#someId .yetAnotherClass"));
-```
-
-<aside class="warning">This type of integration is deprecated instead the preferred way of handling more complex integration is to us the mermaidAPI instead.</aside>
-
-## Usage with browserify
-The reader is assumed to know about CommonJS style of module handling and how to use browserify. If not a good place
-to start would be http://browserify.org/ website.
-
-Minimalistic javascript:
-```
-mermaid = require('mermaid');
-console.log('Test page! mermaid version'+mermaid.version());
-```
-Bundle the javascript with browserify.
-
-Us the created bundle on a web page as per example below:
-```html
-&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-    &lt;meta charset=&quot;UTF-8&quot;&gt;
-    &lt;link rel=&quot;stylesheet&quot; href=&quot;mermaid.css&quot; /&gt;
-    &lt;script src=&quot;bundle.js&quot;&gt;&lt;/script&gt;
-&lt;/head&gt;
-&lt;body&gt;
-    &lt;div class=&quot;mermaid&quot;&gt;
-        graph LR
-            A--&gt;B
-            B--&gt;C
-            C--&gt;A
-            D--&gt;C
-    &lt;/div&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-```
-
-## API usage
-The main idea with the API is to be able to call a render function with graph defintion as a string. The render function
-will render the graph and call a callback with the resulting svg code. With this approach it is up to the site creator to
-fetch the graph definition from the site, perhaps from a textarea, render it and place the graph somewhere in the site.
-
-To do this, include mermaidAPI on your web website instead of mermaid.js. The example below show an outline of how this
-could be used. The example just logs the resulting svg to the javascript console.
-
-```
-&lt;script src=&quot;mermaidAPI.js&quot;&gt;&lt;/script&gt;
-
-&lt;script&gt;
-    mermaidAPI.initialize({
-        startOnLoad:false
-    });
-    $(function(){
-    // Example of using the API
-        var element = document.querySelector("#graphDiv");
-
-        var insertSvg = function(svgCode, bindFunctions){
-            element.innerHTML = svgCode;
-        };
-
-        var graphDefinition = 'graph TB\na-->b';
-        var graph = mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
-    });
-&lt;/script&gt;
-```
-## Sample of API usage together with browserify
-```
-$ = require('jquery');
-mermaidAPI = require('mermaid').mermaidAPI;
-mermaidAPI.initialize({
-        startOnLoad:false
-    });
-
-$(function(){
-    var graphDefinition = 'graph TB\na-->b';
-    var cb = function(html){
-	    console.log(html);
-    }
-    mermaidAPI.render('id1',graphDefinition,cb);
-});
-```
-
-### Binding events
-
-Sometimes the generated graph also has defined interactions like tooltip and click events. When using the API one must 
-add those events after the graph has been inserted into the DOM.
- 
-The example code below is an extract of wheat mermaid does when using the API. The example show how it is possible to 
-bind events to a svg when using the API for rendering.
- 
-```
-     var insertSvg = function(svgCode, bindFunctions){
-         element.innerHTML = svgCode;
-         if(typeof callback !== 'undefined'){
-             callback(id);
-         }
-         bindFunctions(element);
-     };
-
-     var id = 'theGraph';
-
-
-     mermaidAPI.render(id,txt,insertSvg, element);
-```
-
-1. The graph is generated using the render call. 
-2. After generation the render function calls the provided callback function, in this case its called insertSvg.
-3. The callback function is called with two parameters, the svg code of the generated graph and a function. This 
-function binds events to the svg **after** it is inserted into the DOM.
-4. Insert the svg code into the DOM for presentation
-5. Call the binding function that bainds the events
-
-## Example of a marked renderer
-
-This is the renderer used for transforming the documentation from markdown to html with mermaid diagrams in the html.
-
-```
-    var renderer = new marked.Renderer();
-    renderer.code = function (code, language) {
-        if(code.match(/^sequenceDiagram/)||code.match(/^graph/)){
-            return '&lt;div class="mermaid">'+code+'&lt;/div>';
-        }
-        else{
-            return '&lt;pre>&lt;code>'+code+'&lt;/code>&lt;/pre>';
-        }
-    };
-```
-
-Another example in coffeescript that also includes the mermaid script tag into the generated markup.
-```
-marked = require &#39;marked&#39;
-
-module.exports = (options) -&gt;
-  hasMermaid = false
-  renderer = new marked.Renderer()
-  renderer.defaultCode = renderer.code
-  renderer.code = (code, language) -&gt;
-    if language is &#39;mermaid&#39;
-      html = &#39;&#39;
-      if not hasMermaid
-        hasMermaid = true
-        html += &#39;&amp;ltscript src=&quot;&#39;+options.mermaidPath+&#39;&quot;&gt;&lt;/script&gt;&#39;
-      html + &#39;&amp;ltdiv class=&quot;mermaid&quot;&gt;&#39;+code+&#39;&lt;/div&gt;&#39;
-    else
-      @defaultCode(code, language)
-
-  renderer
-```
-
-## Advanced usage
-
-**Error handling**
-
-When the parser encounters invalid syntax the **mermaid.parseError** function is called. It is possible to override this
-function in order to handle the error in an application specific way.
-
-**Parsing text without rendering**
-
-It is also possible to validate the syntax before rendering in order to streamline the user experience. The function
-**mermaid.parse(txt)** takes a text string as an argument and returns true if the text is syntactically correct and
-false if it is not. The parseError function will be called when the parse function returns false.
-
-The code-example below in meta code illustrates how this could work:
-
-```js
-
-mermaid.parseError = function(err,hash){
-    displayErrorInGui(err);
-};
-
-var textFieldUpdated = function(){
-    var textStr = getTextFromFormField('code');
-
-    if(mermaid.parse(textStr)){
-        reRender(textStr)
-    }
-};
-
-bindEventHandler('change', 'code', textFieldUpdated);
-```
-
-# Configuration
-Mermaid takes a number of options which lets you tweak the rendering of the diagrams. Currently there are three ways of
-setting the options in mermaid.
-
-1. Instantiation of the configuration using the initialize call
-2. *Using the global mermaid object* - deprecated
-3. *using the global mermaid_config object* - deprecated
-4. Instantiation of the configuration using the **mermaid.init** call
-
-The list above has two ways to many of doing this. Three are deprecated and will eventually be removed. The list of
-configuration objects are described [in the mermaidAPI documentation](http://knsv.github.io/mermaid/index.html#configuration28).
-
-## Using the mermaidAPI.initialize/mermaid.initialize call
-
-The future proof way of setting the configuration is by using the initialization call to mermaid or mermaidAPi depending
-on what kind of integration you use.
-
-```
-    &lt;script src=&quot;../dist/mermaid.js&quot;&gt;&lt;/script&gt;
-    &lt;script&gt;
-        var config = {
-            startOnLoad:true,
-            flowchart:{
-                    useMaxWidth:false,
-                    htmlLabels:true
-            }
-        };
-        mermaid.initialize(config);
-    &lt;/script&gt;
-```
-
-<aside class="success">This is the preferred way of configuring mermaid.</aside>
-
-
-## Using the mermaid object
-
-Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this
-approach are:
-
-* mermaid.startOnLoad
-* mermaid.htmlLabels
-
-```
-mermaid.startOnLoad = true;
-```
-
-<aside class="info">This way of setting the configuration is deprecated instead the preferred way of is to use the initialize method. This functionality is only kept for not breaking existing integrations</aside>
-
-## Using the mermaid_config
-
-Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this
-approach are:
-
-* mermaid_config.startOnLoad
-* mermaid_config.htmlLabels
-
-```
-mermaid_config.startOnLoad = true;
-```
-
-<aside class="info">This way of setting the configuration is deprecated instead the preferred way of is to use the initialize method. This functionality is only kept for not breaking existing integrations</aside>
-
-## Using the mermaid.init call
-
-Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this
-approach are:
-
-* mermaid_config.startOnLoad
-* mermaid_config.htmlLabels
-
-```
-mermaid_config.startOnLoad = true;
-```
-
-<aside class="info">This way of setting the configuration is deprecated instead the preferred way of is to use the initialize method. This functionality is only kept for not breaking existing integrations</aside>

docs/development.md

@@ -1,33 +1,21 @@
----
-order: 9
----
 # Development
 
+
 ## Updating the documentation
 
-## Getting the development environment up
-1. Fork the gh-pages branch in the the mermaid repository
-2. Do npm install
+We write documention with GitBook.
 
-## Working with the documentation
+Please continue with the [mermaid-gitbook](https://github.com/mermaidjs/mermaid-gitbook) project.
 
-The html files are generated from the source and the markdown files in the docs folder. The site generation is done
-using the docker.js framework with the command below.
 
-```
-docker -i ../mermaid/ -x "*git*|*travis*|*bin*|*dist*|*node_modules*|*gulp*|*lib*|*editor*|*conf*|*scripts*|*test*|*htmlDocs*" --extras mermaid -w -o htmlDocs
-```
+## How to add a new diagram type
 
-Thus ... One important thing to remember. * Do not edit the html files directly! * Those changes will be overwritten
-when the site is re-generated.
 
-## Committing the changes
-
-Do a pull request to merge the changes to the site.
-
-## Things to be done in order to add a new diagram type
 ### Step 1: Grammar & Parsing
+
+
 #### Grammar
+
 This would be to define a jison grammar for the new diagram type. That should start with a way to identify that the text in the mermaid tag is a diagram of that type. Create a new folder under diagrams for your new diagram type and a parser folder in it. This leads us to step 2.
 
 For instance:
@@ -35,7 +23,9 @@ For instance:
 * the flowchart starts with the keyword graph.
 * the sequence diagram starts with the keyword sequenceDiagram
 
+
 #### Store data found during parsing
+
 There are some jison specific sub steps here where the parser stores the data encountered when parsing the diagram, this data is later used by the renderer. You can during the parsing call a object provided to the parser by the user of the parser. This object can be called during parsing for storing data.
 
 ```
@@ -49,66 +39,81 @@ statement
 
 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.
 
-**Note:** 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.
+> **Info** Make sure that the `parseError` function for the parser is defined and calling `mermaidPAI.parseError`. This way a common way of detecting parse errors is provided for the end-user.
 
 For more info look in the example diagram type:
 
-The yy object has the following function:
+The `yy` object has the following function:
+
 ```javascript
-exports.parseError = function(err,hash){
-   mermaidAPI.parseError(err,hash);
+exports.parseError = function(err, hash){
+   mermaidAPI.parseError(err, hash)
 };
 ```
 
-when parsing the yy object is initialized as per below:
+when parsing the `yy` object is initialized as per below:
+
 ```javascript
-    var parser;
-    parser = exampleParser.parser;
-    parser.yy = db;
+var parser
+parser = exampleParser.parser
+parser.yy = db
 ```
 
+
 ### Step 2: Rendering
+
 Write a renderer that given the data found during parsing renders the diagram. To look at an example look at sequendeRenderer.js rather then the flowchart renderer as this is a more generic example.
 
 Place the renderer in the diagram folder.
 
+
 ### Step 3: Detection of the new diagram type
+
 The second thing to do is to add the capability to detect the new new diagram to type to the detectType in utils.js. The detection should return a key for the new diagram type.
 
+
 ### Step 4: The final piece - triggering the rendering
-At this point when mermaid is trying to render the diagram, it will detect it as being of the new type but there will be no match when trying to render the diagram. To fix this add a new case in the switch statement in main.js:init this should match the diagram type returned from step 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.
+
+At this point when mermaid is trying to render the diagram, it will detect it as being of the new type but there will be no match when trying to render the diagram. To fix this add a new case in the switch statement in main.js:init this should match the diagram type returned from step #2. The code in this new case statement should call the renderer for the diagram type with the data found by the parser as an argument.
+
 
 ## Usage of the parser as a separate module
 
+
 ### Setup
+
+```javascript
+var graph = require('./graphDb')
+var flow = require('./parser/flow')
+flow.parser.yy = graph
 ```
-var graph = require('./graphDb');
-var flow = require('./parser/flow');
-flow.parser.yy = graph;
-```
+
 
 ### Parsing
 
+```javascript
+flow.parser.parse(text)
 ```
-flow.parser.parse(text);
-```
+
 
 ### Data extraction
 
-```
-// Javascript example
-graph.getDirection();
-graph.getVertices();
-graph.getEdges();
+```javascript
+graph.getDirection()
+graph.getVertices()
+graph.getEdges()
 ```
 
 The parser is also exposed in the mermaid api by calling:
-```
-var parser = mermaid.getParser();
-```
-Note that the parse needs a graph object to store the data as per:
-```
-flow.parser.yy = graph;
+
+```javascript
+var parser = mermaid.getParser()
 ```
 
-Look at graphDb.js for more details on that object.
+Note that the parse needs a graph object to store the data as per:
+
+```javascript
+flow.parser.yy = graph
+```
+
+Look at `graphDb.js` for more details on that object.

docs/examples.md

@@ -0,0 +1,100 @@
+## Basic sequence diagram
+
+```
+sequenceDiagram
+    Alice ->> Bob: Hello Bob, how are you?
+    Bob-->>John: How about you John?
+    Bob--x Alice: I am good thanks!
+    Bob-x John: I am good thanks!
+    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
+
+    Bob-->Alice: Checking with John...
+    Alice->John: Yes... John, how are you?
+```
+
+
+```mermaid
+sequenceDiagram
+    Alice ->> Bob: Hello Bob, how are you?
+    Bob-->>John: How about you John?
+    Bob--x Alice: I am good thanks!
+    Bob-x John: I am good thanks!
+    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
+
+    Bob-->Alice: Checking with John...
+    Alice->John: Yes... John, how are you?
+```
+
+
+## Basic flowchart
+
+```mermaid
+graph LR
+    A[Square Rect] -- Link text --> B((Circle))
+    A --> C(Round Rect)
+    B --> D{Rhombus}
+    C --> D
+```
+
+
+## Larger flowchart with some styling
+
+```mermaid
+graph TB
+    sq[Square shape] --> ci((Circle shape))
+
+    subgraph A
+        od>Odd shape]-- Two line<br/>edge comment --> ro
+        di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
+        di==>ro2(Rounded square shape)
+    end
+
+    %% Notice that no text in shape are added here instead that is appended further down
+    e --> od3>Really long text with linebreak<br>in an Odd shape]
+
+    %% Comments after double percent signs
+    e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
+
+    cyr[Cyrillic]-->cyr2((Circle shape Начало));
+
+     classDef green fill:#9f6,stroke:#333,stroke-width:2px;
+     classDef orange fill:#f96,stroke:#333,stroke-width:4px;
+     class sq,e green
+     class di orange
+```
+
+
+## Loops, alt and opt
+
+```mermaid
+sequenceDiagram
+    loop Daily query
+        Alice->>Bob: Hello Bob, how are you?
+        alt is sick
+            Bob->>Alice: Not so good :(
+        else is well
+            Bob->>Alice: Feeling fresh like a daisy
+        end
+
+        opt Extra response
+            Bob->>Alice: Thanks for asking
+        end
+    end
+```
+
+
+## Message to self in loop
+
+```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!
+```

docs/faq.md

@@ -0,0 +1,8 @@
+1. [How to add title to flowchart?](https://github.com/knsv/mermaid/issues/556#issuecomment-363182217)
+1. [How to specify custom CSS file?](https://github.com/mermaidjs/mermaid.cli/pull/24#issuecomment-373402785)
+1. [How to fix tooltip misplacement issue?](https://github.com/knsv/mermaid/issues/542#issuecomment-3343564621)
+1. [How to specify gantt diagram xAxis format?](https://github.com/knsv/mermaid/issues/269#issuecomment-373229136)
+1. [How to bind an event?](https://github.com/knsv/mermaid/issues/372)
+1. [How to add newline in the text?](https://github.com/knsv/mermaid/issues/384#issuecomment-281339381)
+1. [How to have special characters in link text?](https://github.com/knsv/mermaid/issues/407#issuecomment-329944735)
+1. [How to change flowchart curve style?](https://github.com/knsv/mermaid/issues/580#issuecomment-373929046)

docs/flowchart.md

@@ -1,25 +1,18 @@
----
-order: 3
----
-
 # Flowcharts - Basic Syntax
+
 ## Graph
+
 This statement declares a new graph and the direction of the graph layout.
 
-```
-%% Example code
-graph TD
-```
 This declares a graph oriented from top to bottom.
 
-```mermaid
+```
 graph TD
     Start --> Stop
 ```
-
-```
-%% Example code
-graph LR
+```mermaid
+graph TD
+    Start --> Stop
 ```
 
 This declares a graph oriented from left to right.
@@ -33,6 +26,10 @@ Possible directions are:
 
 * TD - same as TB
 
+```
+graph LR
+    Start --> Stop
+```
 ```mermaid
 graph LR
     Start --> Stop
@@ -41,10 +38,12 @@ graph LR
 ## Nodes & shapes
 
 ### A node (default)
+
 ```
 graph LR
-    id1
+    id
 ```
+
 ```mermaid
 graph LR
     id
@@ -52,6 +51,7 @@ graph LR
 Note that the id is what is displayed in the box.
 
 ### A node with text
+
 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
 found for the node that will be used. Also if you define edges for the node later on, you can omit text definitions. The
 one previously defined will be used when rendering the box.
@@ -60,7 +60,6 @@ one previously defined will be used when rendering the box.
 graph LR
     id1[This is the text in the box]
 ```
-
 ```mermaid
 graph LR
     id1[This is the text in the box]
@@ -68,33 +67,33 @@ graph LR
 
 
 ### A node with round edges
+
 ```
 graph LR
-    id1(This is the text in the box);
+    id1(This is the text in the box)
 ```
-
 ```mermaid
 graph LR
     id1(This is the text in the box)
 ```
 
 ### A node in the form of a circle
+
 ```
 graph LR
-    id1((This is the text in the circle));
+    id1((This is the text in the circle))
 ```
-
 ```mermaid
 graph LR
     id1((This is the text in the circle))
 ```
 
 ### A node in an asymetric shape
+
 ```
 graph LR
     id1>This is the text in the box]
 ```
-
 ```mermaid
 graph LR
     id1>This is the text in the box]
@@ -102,26 +101,41 @@ graph LR
 Currently only the shape above is possible and not its mirror. *This might change with future releases.*
 
 ### A node (rhombus)
+
 ```
 graph LR
     id1{This is the text in the box}
 ```
-
 ```mermaid
 graph LR
     id1{This is the text in the box}
 ```
+
+### Trapezoid
+
+```mermaid
+graph TD
+    A[/Christmas\]
+```
+### Trapezoid alt
+
+```mermaid
+graph TD
+    B[\Go shopping/]
+```
+
 ## Links between nodes
 
 Nodes can be connected with links/edges. It is possible to have different types of links or attach a text string to a link.
 
 ### A link with arrow head
+
 ```
 graph LR
     A-->B
 ```
-```
-graph LR;
+```mermaid
+graph LR
     A-->B
 ```
 
@@ -131,70 +145,96 @@ graph LR;
 graph LR
     A --- B
 ```
-
 ```mermaid
-graph LR;
+graph LR
     A --- B
 ```
 
 ### Text on links
 
 ```
-A-- This is the text --- B
+graph LR
+    A-- This is the text ---B
 ```
-or
-```
-A---|This is the text|B;
-```
-
 ```mermaid
-graph LR;
-   A-- This is the text ---B
+graph LR
+    A-- This is the text ---B
+```
 
+or
+
+```
+graph LR
+    A---|This is the text|B
+```
+```mermaid
+graph LR
+    A---|This is the text|B
 ```
 
 ### A link with arrow head and text
+
 ```
-A-->|text|B
+graph LR
+    A-->|text|B
 ```
 ```mermaid
-graph LR;
+graph LR
     A-->|text|B
 ```
 
 or
+
 ```
-A-- text -->B
+graph LR
+    A-- text -->B
 ```
 ```mermaid
-graph LR;
+graph LR
     A-- text -->B
 ```
 
-
-
 ### Dotted link
--.->
+
+```
+graph LR;
+   A-.->B;
+```
 ```mermaid
 graph LR;
    A-.->B;
 ```
+
 ### Dotted link with text
--. text .->
-```mermaid
-graph LR;
+
+```
+graph LR
    A-. text .-> B
 ```
-### Thick link
-==>
 ```mermaid
-graph LR;
+graph LR
+   A-. text .-> B
+```
+
+### Thick link
+
+```
+graph LR
    A ==> B
 ```
-### Thick link with text
-== text ==>
 ```mermaid
-graph LR;
+graph LR
+   A ==> B
+```
+
+### Thick link with text
+
+```
+graph LR
+   A == text ==> B
+```
+```mermaid
+graph LR
    A == text ==> B
 ```
 
@@ -204,9 +244,8 @@ It is possible to put text within quotes in order to render more troublesome cha
 
 ```
 graph LR
-    d1["This is the (text) in the box"]
+    id1["This is the (text) in the box"]
 ```
-
 ```mermaid
 graph LR
     id1["This is the (text) in the box"]
@@ -216,14 +255,10 @@ graph LR
 
 It is possible to escape characters using the syntax examplified here.
 
-The flowchart defined by the following code:
 ```
     graph LR
         A["A double quote:#quot;"] -->B["A dec char:#9829;"]
 ```
-
-This would render to the diagram below:
-
 ```mermaid
     graph LR
         A["A double quote:#quot;"] -->B["A dec char:#9829;"]
@@ -238,22 +273,21 @@ end
 ```
 
 An example below:
- ```
- %% Subgraph example
- graph TB
-         subgraph one
-         a1-->a2
-         end
-         subgraph two
-         b1-->b2
-         end
-         subgraph three
-         c1-->c2
-         end
-         c1-->a2
- ```
 
- ```mermaid
+```
+graph TB
+    c1-->a2
+    subgraph one
+    a1-->a2
+    end
+    subgraph two
+    b1-->b2
+    end
+    subgraph three
+    c1-->c2
+    end
+ ```
+```mermaid
 graph TB
     c1-->a2
     subgraph one
@@ -265,13 +299,12 @@ graph TB
     subgraph three
     c1-->c2
     end
-
  ```
 
 
 ## Interaction
 
-It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab.
+It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using securityLevel='strict'
 
 ```
 click nodeId callback
@@ -283,11 +316,11 @@ click nodeId callback
 Examples of tooltip usage below:
 
 ```
-<script>
+<script>
     var callback = function(){
-        alert(&#39;A callback was triggered&#39;);
+        alert('A callback was triggered');
     }
-&lt;script&gt;
+<script>
 ```
 
 ```
@@ -297,7 +330,6 @@ graph LR;
     click B "http://www.github.com" "This is a tooltip for a link"
 ```
 
-
 The tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class .mermaidTooltip.
 
 ```mermaid
@@ -306,13 +338,13 @@ graph LR;
     click A callback "Tooltip"
     click B "http://www.github.com" "This is a link"
 ```
-<aside class="success">The tooltip functionality and the ability to link to urls are available from version 0.5.2.</aside>
+> **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.
 
-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 [API usage](#api-usage) section.
 
 ## Styling and classes
 
 ### Styling links
+
 It is possible to style links. For instance you might want to style a link that is going backwards in the flow. As links
 have no ids in the same way as nodes, some other way of deciding what style the links should be attached to is required.
 Instead of ids, the order number of when the link was defined in the graph is used. In the example below the style
@@ -322,15 +354,16 @@ defined in the linkStyle statement will belong to the fourth link in the graph:
 linkStyle 3 stroke:#ff3,stroke-width:4px;
 ```
 
+
 ### Styling a node
+
 It is possible to apply specific styles such as a thicker border or a different background color to a node.
 
 ```
-%% 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;
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+    style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5
 ```
 ```mermaid
 graph LR
@@ -339,7 +372,9 @@ graph LR
     style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5
 ```
 
+
 #### Classes
+
 More convenient then defining the style every time is to define a class of styles and attach this class to the nodes that
 should have a different look.
 
@@ -361,12 +396,16 @@ It is also possible to attach a class to a list of nodes in one statement:
 ```
     class nodeId1,nodeId2 className;
 ```
+
+
 ### Css classes
 
-It is also possible to pre dine classes in css styles that can be applied from the graph definition as in the example
+It is also possible to predefine classes in css styles that can be applied from the graph definition as in the example
 below:
+
 **Example style**
-```
+
+```html
 <style>
     .cssClass > rect{
         fill:#FF0000;
@@ -375,16 +414,21 @@ below:
     }
 </style>
 ```
+
 **Example definition**
+
 ```
 graph LR;
     A-->B[AAA<span>BBB</span>];
     B-->D;
     class A cssClass;
 ```
-
-<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>
-
+```mermaid
+graph LR;
+    A-->B[AAA<span>BBB</span>];
+    B-->D;
+    class A cssClass;
+```
 
 
 ### Default class
@@ -395,14 +439,13 @@ If a class is named default it will be assigned to all classes without specific
     classDef default fill:#f9f,stroke:#333,stroke-width:4px;
 ```
 
+
 ## Basic support for fontawesome
 
-It is possible to add icons from fontawesome. In order to do so, you need to add the fontawesome as described in the instructions at 
-[the fontawesome web site](https://fortawesome.github.io/Font-Awesome/).
+It is possible to add icons from fontawesome.
 
 The icons are acessed via the syntax fa:#icon class name#.
 
-The example code below
 ```
 graph TD
     B["fa:fa-twitter for peace"]
@@ -410,9 +453,6 @@ graph TD
     B-->D(fa:fa-spinner);
     B-->E(A fa:fa-camera-retro perhaps?);
 ```
-
-Would render the graph below:
-
 ```mermaid
 graph TD
     B["fa:fa-twitter for peace"]
@@ -421,7 +461,6 @@ graph TD
     B-->E(A fa:fa-camera-retro perhaps?);
 ```
 
-<aside class="success">Support for fontawesome has been comitted to the  master branch and will be included in 0.5.3</aside>
 
 ## Graph declarations with spaces between vertices and link and without semicolon
 
@@ -432,13 +471,13 @@ graph TD
 Below is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges.
 
 ```
+graph LR
     A[Hard edge] -->|Link text| B(Round edge)
     B --> C{Decision}
     C -->|One| D[Result one]
     C -->|Two| E[Result two]
 ```
 
-
 ```mermaid
 graph LR
     A[Hard edge] -->|Link text| B(Round edge)
@@ -446,3 +485,18 @@ graph LR
     C -->|One| D[Result one]
     C -->|Two| E[Result two]
 ```
+
+
+## Configuration...
+
+Is it possible to adjust the width of the rendered flowchart.
+
+This is done by defining **mermaid.flowchartConfig** or by the CLI to use a json file with the configuration. How to use
+the CLI is described in the mermaidCLI page.
+mermaid.flowchartConfig can be set to a JSON string with config parameters or the corresponding object.
+
+```javascript
+mermaid.flowchartConfig = {
+    width: 100%
+}
+```

docs/gantt.md

@@ -1,17 +1,13 @@
----
-order: 4
----
-
-# Gant diagrams
+# Gantt diagrams
 
 > A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrates a project schedule. Gantt charts illustrate the start and finish dates of the terminal elements and summary elements of a project.
 
-Mermaid can render Gantt diagrams. The code snippet below:
+Mermaid can render Gantt diagrams.
+
 ```
-%% Example of sequence diagram
 gantt
     title A Gantt Diagram
-
+    dateFormat  YYYY-MM-DD
     section Section
     A task           :a1, 2014-01-01, 30d
     Another task     :after a1  , 20d
@@ -19,9 +15,6 @@ gantt
     Task in sec      :2014-01-12  , 12d
     another task      : 24d
 ```
-
-Renders the following diagram:
-
 ```mermaid
 gantt
     title A Gantt Diagram
@@ -34,40 +27,38 @@ gantt
     another task      : 24d
 ```
 
+
 ## Syntax
+
 ```
-%% Example with slection of syntaxes
-        gantt
-        dateFormat  YYYY-MM-DD
-        title Adding GANTT diagram functionality to 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 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 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
-``` 
-
-Renders like below:
+       section Documentation
+       Describe gantt syntax               :active, a1, after des1, 3d
+       Add gantt diagram to demo page      :after a1  , 20h
+       Add another diagram to demo page    :doc1, after a1  , 48h
 
+       section Last section
+       Describe gantt syntax               :after doc1, 3d
+       Add gantt diagram to demo page      :20h
+       Add another diagram to demo page    :48h
+   ```
 ```mermaid
 gantt
        dateFormat  YYYY-MM-DD
@@ -91,30 +82,37 @@ gantt
        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
-```  
+   ```
+
 ### Title
 
 Tbd
 
+
 ## Sections statements
 
 Tbd
 
+
 ## Setting dates
 
 Tbd
 
+
 ### Date format
 
 Tbd
 
-#### Diagram definition
+
+### Diagram definition
+
 Input	Example	Description:
+
 ```
 YYYY	2014	4 digit year
 YY	14	2 digit year
@@ -141,7 +139,8 @@ Z ZZ	+12:00	Offset from UTC as +-HH:mm, +-HHmm, or Z
 
 More info in: http://momentjs.com/docs/#/parsing/string-format/
 
-#### Scale
+
+### Scale
 
 ```
 %a - abbreviated weekday name.
@@ -169,11 +168,13 @@ More info in: http://momentjs.com/docs/#/parsing/string-format/
 %Z - time zone offset, such as "-0700".
 %% - a literal "%" character.
 ```
+
 More info in: https://github.com/mbostock/d3/wiki/Time-Formatting
 
+
 ## Styling
 
-Styling of the a sequence diagram is done by defining a number of css classes.  During rendering these classes are extracted from the
+Styling of the a gantt diagram is done by defining a number of css classes.  During rendering these classes are extracted from the
 
 ### Classes used
 
@@ -196,59 +197,75 @@ noteText     | Styles for the text on in the note boxes.
 
 
 ```css
+.grid .tick {
+    stroke: lightgrey;
+    opacity: 0.3;
+    shape-rendering: crispEdges;
+}
+.grid path {
+    stroke-width: 0;
+}
 
-            .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;
-            }
+#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;
+}
 ```
+
+
 ## Configuration
 
-Is it possible to adjust the margins for rendering the sequence diagram.
+Is it possible to adjust the margins for rendering the gantt diagram.
 
-This is done by defining the **sequenceConfig** part of the configuration object. Read more about it [here](#configuration35).
-How to use the CLI is described in the [mermaidCLI](#mermaid-cli8) page.
+This is done by defining the `ganttConfig` part of the configuration object.
+How to use the CLI is described in the [mermaidCLI](mermaidCLI.html) page.
+
+mermaid.ganttConfig can be set to a JSON string with config parameters or the corresponding object.
+
+```javascript
+mermaid.ganttConfig = {
+    titleTopMargin:25,
+    barHeight:20,
+    barGap:4,
+    topPadding:75,
+    sidePadding:75
+}
+```
+
+### Possible configration params:
+
+Param | Descriotion | Default value
+--- | --- | ---
+mirrorActor|Turns on/off the rendering of actors below the diagram as well as above it|false
+bottomMarginAdj|Adjusts how far down the graph ended. Wide borders styles with css could generate unwantewd clipping which is why this config param exists.|1

docs/index.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.</title>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="description" content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.">
+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
+  <!-- <script src="//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> -->
+  <script src="//localhost:9000/mermaid.js"></script>
+  <style>
+  .markdown-section {
+    max-width: 1200px;
+  }
+  </style>
+</head>
+<body>
+  <div id="app"></div>
+  <script>
+    window.$docsify = {
+      search: 'auto',
+      name: 'mermaid',
+      repo: 'https://github.com/knsv/mermaid',
+      loadSidebar: true,
+      mergeNavbar: true,
+      maxLevel: 4,
+      subMaxLevel: 2,
+      markdown: {
+        renderer: {
+          code: function(code, lang) {
+            if (lang === "mermaid") {
+              return (
+                '<div class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + "</div>"
+              );
+            }
+            return this.origin.code.apply(this, arguments);
+          }
+        }
+      }
+    }
+
+    var num = 0;
+    mermaid.initialize({ logLevel:0, startOnLoad: false, themeCSS:'.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }' });
+
+  </script>
+  <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
+  <script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
+</body>
+</html>

docs/mermaidAPI.md

@@ -0,0 +1,228 @@
+<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
+
+## mermaidAPI
+
+This is the api to be used when handling the integration with the web page instead of using the default integration
+(mermaid.js).
+
+The core of this api is the **render** function that given a graph definitionas text renders the graph/diagram and
+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
+somewhere in the page or something completely different.
+
+## Configuration
+
+These are the default options which can be overridden with the initialization call as in the example below:
+
+    mermaid.initialize({
+      flowchart:{
+         htmlLabels: false
+      }
+    });
+
+## theme
+
+theme , the CSS style sheet
+
+**theme** - Choose one of the built-in themes: default, forest, dark or neutral. To disable any pre-defined mermaid theme, use "null".
+**themeCSS** - Use your own CSS. This overrides **theme**.
+
+    "theme": "forest",
+    "themeCSS": ".node rect { fill: red; }"
+
+## logLevel
+
+This option decides the amount of logging to be used.
+
+-   debug: 1
+-   info: 2
+-   warn: 3
+-   error: 4
+-   fatal: (**default**) 5
+
+## securityLevel
+
+Sets the level of trust to be used on the parsed diagrams.
+
+-   **true**: (**default**) tags in text are encoded, click functionality is disabeled
+-   **false**: tags in text are allowed, click functionality is enabled
+
+## startOnLoad
+
+This options controls whether or mermaid starts when the page loads
+**Default value true**.
+
+## arrowMarkerAbsolute
+
+This options controls whether or arrow markers in html code will be absolute paths or
+an anchor, #. This matters if you are using base tag settings.
+**Default value false**.
+
+## flowchart
+
+The object containing configurations specific for flowcharts
+
+### htmlLabels
+
+Flag for setting whether or not a html tag should be used for rendering labels
+on the edges.
+**Default value true**.
+
+### curve
+
+How mermaid renders curves for flowcharts. Possibel values are basis, linear and cardinal. **Default value linear**.
+
+## sequence
+
+The object containing configurations specific for sequence diagrams
+
+### diagramMarginX
+
+margin to the right and left of the sequence diagram
+**Default value 50**.
+
+### diagramMarginY
+
+margin to the over and under the sequence diagram.
+**Default value 10**.
+
+### actorMargin
+
+Margin between actors.
+**Default value 50**.
+
+### width
+
+Width of actor boxes
+**Default value 150**.
+
+### height
+
+Height of actor boxes
+**Default value 65**.
+
+### boxMargin
+
+Margin around loop boxes
+**Default value 10**.
+
+### boxTextMargin
+
+margin around the text in loop/alt/opt boxes
+**Default value 5**.
+
+### noteMargin
+
+margin around notes.
+**Default value 10**.
+
+### messageMargin
+
+Space between messages.
+**Default value 35**.
+
+### mirrorActors
+
+mirror actors under diagram.
+**Default value true**.
+
+### bottomMarginAdj
+
+Depending on css styling this might need adjustment.
+Prolongs the edge of the diagram downwards.
+**Default value 1**.
+
+### useMaxWidth
+
+when this flag is set the height and width is set to 100% and is then scaling with the
+available space if not the absolute space required is used.
+**Default value true**.
+
+### rightAngles
+
+This will display arrows that start and begin at the same node as right angles, rather than a curve
+**Default value false**.
+
+### showSequenceNumbers
+
+This will show the node numbers
+**Default value false**.
+
+## gantt
+
+The object containing configurations specific for gantt diagrams\*
+
+### titleTopMargin
+
+Margin top for the text over the gantt diagram
+**Default value 25**.
+
+### barHeight
+
+The height of the bars in the graph
+**Default value 20**.
+
+### barGap
+
+The margin between the different activities in the gantt diagram.
+**Default value 4**.
+
+### topPadding
+
+Margin between title and gantt diagram and between axis and gantt diagram.
+**Default value 50**.
+
+### leftPadding
+
+The space allocated for the section name to the left of the activities.
+**Default value 75**.
+
+### gridLineStartPadding
+
+Vertical starting position of the grid lines.
+**Default value 35**.
+
+### fontSize
+
+Font size ...
+**Default value 11**.
+
+### fontFamily
+
+font family ...
+**Default value '"Open-Sans", "sans-serif"'**.
+
+### numberSectionStyles
+
+The number of alternating section styles.
+**Default value 4**.
+
+### axisFormat
+
+Datetime format of the axis, this might need adjustment to match your locale and preferences
+**Default value '%Y-%m-%d'**.
+
+## render
+
+Function that renders an svg with a graph from a chart definition. Usage example below.
+
+```js
+mermaidAPI.initialize({
+     startOnLoad:true
+ });
+ $(function(){
+     const graphDefinition = 'graph TB\na-->b';
+     const cb = function(svgGraph){
+         console.log(svgGraph);
+     };
+     mermaidAPI.render('id1',graphDefinition,cb);
+ });
+```
+
+### Parameters
+
+-   `id`  the id of the element to be rendered
+-   `txt`  the graph definition
+-   `cb`  callback which is called after rendering is finished with the svg code as inparam.
+-   `container`  selector to element in which a div with the graph temporarily will be inserted. In one is
+    provided a hidden div will be inserted in the body of the page instead. The element will be removed when rendering is
+    completed.

docs/mermaidCLI.md

@@ -0,0 +1,3 @@
+# mermaid CLI
+
+mermaid CLI has been moved to [mermaid.cli](https://github.com/mermaidjs/mermaid.cli). Please read its documentation instead.

docs/sequenceDiagram.md

@@ -1,21 +1,14 @@
----
-title: Sequence Diagram
-order: 3
----
 # Sequence diagrams
 
 > A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.
 
-Mermaid can render sequence diagrams. The code snippet below:
+Mermaid can render sequence diagrams.
+
 ```
-%% Example of sequence diagram
 sequenceDiagram
     Alice->>John: Hello John, how are you?
     John-->>Alice: Great!
 ```
-
-Renders the following diagram:
-
 ```mermaid
 sequenceDiagram
     Alice->>John: Hello John, how are you?
@@ -32,16 +25,12 @@ different order than how they appear in the first message. It is possible to spe
 appearance by doing the following:
 
 ```
-%% Example of sequence diagram
 sequenceDiagram
     participant John
     participant Alice
     Alice->>John: Hello John, how are you?
     John-->>Alice: Great!
 ```
-
-Renders to the diagram below:
-
 ```mermaid
 sequenceDiagram
     participant John
@@ -50,7 +39,27 @@ sequenceDiagram
     John-->>Alice: Great!
 ```
 
+### Aliases
+
+The actor can have a convenient identifier and a descriptive label.
+
+```
+sequenceDiagram
+    participant A as Alice
+    participant J as John
+    A->>J: Hello John, how are you?
+    J->>A: Great!
+```
+```mermaid
+sequenceDiagram
+    participant A as Alice
+    participant J as John
+    A->>J: Hello John, how are you?
+    J->>A: Great!
+```
+
 ## Messages
+
 Messages can be of two displayed either solid or with a dotted line.
 
 ```
@@ -70,6 +79,7 @@ Type | Description
 
 
 ## Activations
+
 It is possible to activate and deactivate an actor. (de)activation can be dedicated declarations:
 
 ```
@@ -79,9 +89,6 @@ sequenceDiagram
     John-->>Alice: Great!
     deactivate John
 ```
-
-Renders to the diagram below:
-
 ```mermaid
 sequenceDiagram
     Alice->>John: Hello John, how are you?
@@ -90,13 +97,18 @@ sequenceDiagram
     deactivate John
 ```
 
-There is also a shortcut notation by appending `+`/`-` suffix to the message arrow:  
+There is also a shortcut notation by appending `+`/`-` suffix to the message arrow:
 
 ```
 sequenceDiagram
     Alice->>+John: Hello John, how are you?
     John-->>-Alice: Great!
 ```
+```mermaid
+sequenceDiagram
+    Alice->>+John: Hello John, how are you?
+    John-->>-Alice: Great!
+```
 
 Activations can be stacked for same actor:
 
@@ -107,9 +119,6 @@ sequenceDiagram
     John-->>-Alice: Hi Alice, I can hear you!
     John-->>-Alice: I feel great!
 ```
-
-Stacked activations look like this:
-
 ```mermaid
 sequenceDiagram
     Alice->>+John: Hello John, how are you?
@@ -118,20 +127,19 @@ sequenceDiagram
     John-->>-Alice: I feel great!
 ```
 
+
 ## Notes
+
 It is possible to add notes to a sequence diagram. This is done by the notation
 Note [ right of | left of | over ] [Actor]: Text in note content
 
 See the example below:
+
 ```
-%% Example of sequence diagram
 sequenceDiagram
     participant John
     Note right of John: Text in note
 ```
-
-Renders to the diagram below:
-
 ```mermaid
 sequenceDiagram
     participant John
@@ -139,36 +147,38 @@ sequenceDiagram
 ```
 
 It is also possible to create notes spanning two participants:
+
 ```
 sequenceDiagram
     Alice->John: Hello John, how are you?
     Note over Alice,John: A typical interaction
 ```
-
 ```mermaid
 sequenceDiagram
     Alice->John: Hello John, how are you?
     Note over Alice,John: A typical interaction
 ```
 
+
 ## Loops
+
 It is possible to express loops in a sequence diagram. This is done by the notation
+
 ```
 loop Loop text
 ... statements ...
 end
 ```
 
-See the example below
+See the example below:
+
 ```
-%% Example of sequence diagram
 sequenceDiagram
     Alice->John: Hello John, how are you?
-    loop Reply every minute
+    loop Every minute
         John-->Alice: Great!
     end
 ```
-
 ```mermaid
 sequenceDiagram
     Alice->John: Hello John, how are you?
@@ -177,8 +187,11 @@ sequenceDiagram
     end
 ```
 
+
 ## Alt
+
 It is possible to express alternative paths in a sequence diagram. This is done by the notation
+
 ```
 alt Describing text
 ... statements ...
@@ -195,22 +208,20 @@ opt Describing text
 end
 ```
 
-See the example below
-```
-%% 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
+See the example below:
 
 ```
-
+sequenceDiagram
+    Alice->>Bob: Hello Bob, how are you?
+    alt is sick
+        Bob->>Alice: Not so good :(
+    else is well
+        Bob->>Alice: Feeling fresh like a daisy
+    end
+    opt Extra response
+        Bob->>Alice: Thanks for asking
+    end
+```
 ```mermaid
 sequenceDiagram
     Alice->>Bob: Hello Bob, how are you?
@@ -223,13 +234,52 @@ sequenceDiagram
         Bob->>Alice: Thanks for asking
     end
 ```
+
+## Background Highlighting
+It is possible to highlight flows by providing colored background rects. This is done by the notation
+
+The colors are defined using rgb and rgba syntax.
+```
+rect rgb(0, 255, 0)
+... content ...
+end
+```
+```
+rect rgba(0, 0, 255, .1) 
+... content ...
+end
+```
+
+See the examples below:
+
+```mermaid
+sequenceDiagram
+    participant Alice
+    participant John
+
+    rect rgb(191, 223, 255)
+    note right of Alice: Alice calls John.
+    Alice->>+John: Hello John, how are you?
+    rect rgb(200, 150, 255)
+    Alice->>+John: John, can you hear me?
+    John-->>-Alice: Hi Alice, I can hear you!
+    end
+    John-->>-Alice: I feel great!
+    end
+    Alice ->>+ John: Did you want to go to the game tonight?
+    John -->>- Alice: Yeah! See you there.
+
+```
+
+
+
 ## Styling
 
 Styling of the a sequence diagram is done by defining a number of css classes.  During rendering these classes are extracted from the
 
 ### Classes used
 
-Class | Description
+Class        | Description
 ---          | ---
 actor        | Style for the actor box at the top of the diagram.
 text.actor   | Styles for text in the actor box at the top of the diagram.
@@ -244,11 +294,11 @@ loopLine     | Defines styles for the lines in the loop box.
 note         | Styles for the note box.
 noteText     | Styles for the text on in the note boxes.
 
+
 ### Sample stylesheet
 
 
 ```css
-
 body {
     background: white;
 }
@@ -328,17 +378,18 @@ text.actor {
     font-family: 'trebuchet ms', verdana, arial;
     font-size:14px;
 }
-
 ```
+
+
 ## Configuration
 
 Is it possible to adjust the margins for rendering the sequence diagram.
 
-This is done by defining **mermaid.sequenceConfig** or by the CLI to use a json file with the configuration.
-How to use the CLI is described in the [mermaidCLI](#mermaid-cli8) page.
-**mermaid.sequenceConfig** can be set to a JSON string with config parameters or the corresponding object.
+This is done by defining `mermaid.sequenceConfig` or by the CLI to use a json file with the configuration.
+How to use the CLI is described in the [mermaidCLI](mermaidCLI.html) page.
+`mermaid.sequenceConfig` can be set to a JSON string with config parameters or the corresponding object.
 
-```
+```javascript
 mermaid.sequenceConfig = {
     diagramMarginX:50,
     diagramMarginY:10,
@@ -346,12 +397,12 @@ mermaid.sequenceConfig = {
     noteMargin:10,
     messageMargin:35,
     mirrorActors:true
-    };
+};
 ```
 
-### Possible configration params:
+### Possible configuration params:
 
-Param | Descriotion | Default value
+Param | Description | Default value
 --- | --- | ---
-mirrorActor     | Turns on/off the rendering of actors below the diagram as well as above it                                                                  | false
+mirrorActor | Turns on/off the rendering of actors below the diagram as well as above it | false
 bottomMarginAdj | Adjusts how far down the graph ended. Wide borders styles with css could generate unwantewd clipping which is why this config param exists. | 1

docs/site/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>

docs/site/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}

docs/site/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;
-}

docs/site/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;
-}

docs/site/stylesheets/screen.css

@@ -1,908 +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, .content h5, .content h6, html, body {
-    font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "微软雅黑", STXihei, "华文细黑", sans-serif;
-    font-size: 13px
-}
-
-.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
-    font-weight: bold
-}
-
-.content code, .content pre {
-    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 code {
-    word-break: break-all;
-    word-break: break-word;
-    -webkit-hyphens: auto;
-    -moz-hyphens: auto;
-    -ms-hyphens: auto;
-    hyphens: auto
-
-}
-
-.highlight table td {
-    padding: 5px
-}
-
-.highlight table pre {
-    margin: 0
-}
-
-.highlight, .highlight .w {
-    color: #f8f8f2;
-    background-color: #272822
-}
-
-.highlight .err {
-    color: #151515;
-    background-color: #ac4142
-}
-
-.highlight .c, .highlight .cd, .highlight .cm, .highlight .c1, .highlight .cs {
-    color: #505050
-}
-
-.highlight .cp {
-    color: #f4bf75
-}
-
-.highlight .nt {
-    color: #f4bf75
-}
-
-.highlight .o, .highlight .ow {
-    color: #d0d0d0
-}
-
-.highlight .p, .highlight .pi {
-    color: #d0d0d0
-}
-
-.highlight .gi {
-    color: #90a959
-}
-
-.highlight .gd {
-    color: #ac4142
-}
-
-.highlight .gh {
-    color: #6a9fb5;
-    background-color: #151515;
-    font-weight: bold
-}
-
-.highlight .k, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kv {
-    color: #aa759f
-}
-
-.highlight .kc {
-    color: #d28445
-}
-
-.highlight .kt {
-    color: #d28445
-}
-
-.highlight .kd {
-    color: #d28445
-}
-
-.highlight .s, .highlight .sb, .highlight .sc, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .sx, .highlight .s1 {
-    color: #90a959
-}
-
-.highlight .sr {
-    color: #75b5aa
-}
-
-.highlight .si {
-    color: #8f5536
-}
-
-.highlight .se {
-    color: #8f5536
-}
-
-.highlight .nn {
-    color: #f4bf75
-}
-
-.highlight .nc {
-    color: #f4bf75
-}
-
-.highlight .no {
-    color: #f4bf75
-}
-
-.highlight .na {
-    color: #6a9fb5
-}
-
-.highlight .m, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mb, .highlight .mx {
-    color: #90a959
-}
-
-.highlight .ss {
-    color: #90a959
-}
-
-.highlight .c, .highlight .cm, .highlight .c1, .highlight .cs {
-    color: #909090
-}
-
-.highlight, .highlight .w {
-    background-color: #292929
-}
-
-@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, .tocify-wrapper > .search: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-wrapper > .search:before {
-    content: "\e607"
-}
-
-html, body {
-    color: #333;
-    padding: 0;
-    margin: 0;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    background-color: #ffffff;
-    height: 100%;
-    -webkit-text-size-adjust: none
-}
-
-#toc > ul > li > a > span {
-    float: right;
-    background-color: #2484FF;
-    border-radius: 40px;
-    width: 20px
-}
-
-.tocify-wrapper {
-    transition: left 0.3s ease-in-out;
-    overflow-y: auto;
-    overflow-x: hidden;
-    position: fixed;
-    z-index: 30;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 230px;
-    background-color: #FEFFE0;
-    border-right: 2px solid #EFEFEF;
-    font-size: 13px;
-    font-weight: bold
-}
-
-.tocify-wrapper .lang-selector {
-    display: none
-}
-
-.tocify-wrapper .lang-selector a {
-    padding-top: 0.5em;
-    padding-bottom: 0.5em
-}
-
-.tocify-wrapper > img {
-    display: block
-}
-
-.tocify-wrapper > .search {
-    position: relative
-}
-
-.tocify-wrapper > .search input {
-    background: #e7e7e7;
-    border-width: 0 0 1px 0;
-    border-color: #666;
-    padding: 6px 0 6px 20px;
-    box-sizing: border-box;
-    margin: 10px 15px;
-    width: 200px;
-    outline: none;
-    color: #000;
-    border-radius: 0
-}
-
-.tocify-wrapper > .search:before {
-    position: absolute;
-    top: 17px;
-    left: 15px;
-    color: #444
-}
-
-.tocify-wrapper img + .tocify {
-    margin-top: 20px
-}
-
-.tocify-wrapper .search-results {
-    margin-top: 0;
-    box-sizing: border-box;
-    height: 0;
-    overflow-y: auto;
-    overflow-x: hidden;
-    transition-property: height, margin;
-    transition-duration: 180ms;
-    transition-timing-function: ease-in-out;
-    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 8px), linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent 8px), linear-gradient(to bottom, #000, transparent 1.5px), linear-gradient(to top, #939393, rgba(147, 147, 147, 0) 1.5px), #FEFFE0
-}
-
-.tocify-wrapper .search-results.visible {
-    height: 30%;
-    margin-bottom: 1em
-}
-
-.tocify-wrapper .search-results li {
-    margin: 1em 15px;
-    line-height: 1
-}
-
-.tocify-wrapper .search-results a {
-    color: #000;
-    text-decoration: none
-}
-
-.tocify-wrapper .search-results a:hover {
-    text-decoration: underline
-}
-
-.tocify-wrapper .tocify-item > a, .tocify-wrapper .toc-footer li {
-    padding: 0 15px 0 15px;
-    display: block;
-    overflow-x: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis
-}
-
-.tocify-wrapper ul, .tocify-wrapper li {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    line-height: 28px
-}
-
-.tocify-wrapper li {
-    color: #383838;
-    transition-property: background;
-    transition-timing-function: linear;
-    transition-duration: 230ms
-}
-
-.tocify-wrapper .tocify-focus {
-    box-shadow: 0px 1px 0px #000;
-    background-color: #2467af;
-    color: #fff
-}
-
-.tocify-wrapper .tocify-subheader {
-    display: none;
-    background-color: #FFFFF7;
-    font-weight: 500;
-    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 8px), linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent 8px), linear-gradient(to bottom, #000, transparent 1.5px), linear-gradient(to top, #939393, rgba(147, 147, 147, 0) 1.5px), #FEFFE0
-}
-
-.tocify-wrapper .tocify-subheader .tocify-item > a {
-    padding-left: 25px;
-    font-size: 12px
-}
-
-.tocify-wrapper .tocify-subheader > li:last-child {
-    box-shadow: none
-}
-
-.tocify-wrapper .toc-footer {
-    padding: 1em 0;
-    margin-top: 1em;
-    border-top: 1px dashed #666
-}
-
-.tocify-wrapper .toc-footer li, .tocify-wrapper .toc-footer a {
-    color: #fff;
-    text-decoration: none
-}
-
-.tocify-wrapper .toc-footer a:hover {
-    text-decoration: underline
-}
-
-.tocify-wrapper .toc-footer li {
-    font-size: 0.8em;
-    line-height: 1.7;
-    text-decoration: none
-}
-
-#nav-button {
-    padding: 0 1.5em 5em 0;
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 100;
-    color: #000;
-    text-decoration: none;
-    font-weight: bold;
-    opacity: 0.7;
-    line-height: 16px;
-    transition: left 0.3s ease-in-out
-}
-
-#nav-button span {
-    display: block;
-    padding: 6px 6px 6px;
-    background-color: rgba(234, 242, 246, 0.7);
-    -webkit-transform-origin: 0 0;
-    transform-origin: 0 0;
-    -webkit-transform: rotate(-90deg) translate(-100%, 0);
-    transform: rotate(-90deg) translate(-100%, 0);
-    border-radius: 0 0 0 5px
-}
-
-#nav-button img {
-    height: 16px;
-    vertical-align: bottom
-}
-
-#nav-button:hover {
-    opacity: 1
-}
-
-#nav-button.open {
-    left: 230px
-}
-
-.page-wrapper {
-    margin-left: 230px;
-    position: relative;
-    z-index: 10;
-    background-color: #eaf2f6;
-    min-height: 100%;
-    padding-bottom: 1px
-}
-
-.page-wrapper .dark-box {
-    width: 50%;
-    background-color: #393939;
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0
-}
-
-.page-wrapper .lang-selector {
-    position: fixed;
-    z-index: 50;
-    border-bottom: 5px solid #393939
-}
-
-.lang-selector {
-    background-color: #222;
-    width: 100%;
-    font-weight: bold
-}
-
-.lang-selector a {
-    display: block;
-    float: left;
-    color: #fff;
-    text-decoration: none;
-    padding: 0 10px;
-    line-height: 30px;
-    outline: 0
-}
-
-.lang-selector a:active, .lang-selector a:focus {
-    background-color: #111;
-    color: #fff
-}
-
-.lang-selector a.active {
-    background-color: #393939;
-    color: #fff
-}
-
-.lang-selector:after {
-    content: '';
-    clear: both;
-    display: block
-}
-
-.content {
-    position: relative;
-    z-index: 30
-}
-
-.content:after {
-    content: '';
-    display: block;
-    clear: both
-}
-
-.content > h1, .content > h2, .content > h3, .content > h4, .content > h5, .content > h6, .content > p, .content > table, .content > ul, .content > ol, .content > aside, .content > dl {
-    margin-right: 50%;
-    padding: 0 28px;
-    box-sizing: border-box;
-    display: block;
-}
-
-.content > ul, .content > ol {
-    padding-left: 43px
-}
-
-.content > h1, .content > h2, .content > div {
-    clear: both
-}
-
-.content h1 {
-    font-size: 30px;
-    padding-top: 0.5em;
-    padding-bottom: 0.5em;
-    border-bottom: 1px solid #ccc;
-    margin-bottom: 21px;
-    margin-top: 2em;
-    border-top: 1px solid #ddd;
-    background-image: linear-gradient(to bottom, #fff, #f9f9f9)
-}
-
-.content h1:first-child, .content div:first-child + h1 {
-    border-top-width: 0;
-    margin-top: 0
-}
-
-.content h2 {
-    font-size: 20px;
-    margin-top: 4em;
-    margin-bottom: 0;
-    border-top: 1px solid #ccc;
-    padding-top: 1.2em;
-    padding-bottom: 1.2em;
-    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0))
-}
-
-.content h1 + h2, .content h1 + div + h2 {
-    margin-top: -21px;
-    border-top: none
-}
-
-.content h3, .content h4, .content h5, .content h6 {
-    font-size: 15px;
-    margin-top: 2.5em;
-    margin-bottom: 0.8em
-}
-
-.content h4, .content h5, .content h6 {
-    font-size: 10px
-}
-
-.content hr {
-    margin: 2em 0;
-    border-top: 2px solid #393939;
-    border-bottom: 2px solid #eaf2f6
-}
-
-.content table {
-    margin-bottom: 1em;
-    overflow: auto
-}
-
-.content table th, .content table td {
-    text-align: left;
-    vertical-align: top;
-    line-height: 1.6
-}
-
-.content table th {
-    padding: 5px 10px;
-    border-bottom: 1px solid #ccc;
-    vertical-align: bottom
-}
-
-.content table td {
-    padding: 10px
-}
-
-.content table tr:last-child {
-    border-bottom: 1px solid #ccc
-}
-
-.content table tr:nth-child(odd) > td {
-    background-color: #f9fbfc
-}
-
-.content table tr:nth-child(even) > td {
-    background-color: #f3f7fa
-}
-
-.content dt {
-    font-weight: bold
-}
-
-.content dd {
-    margin-left: 15px
-}
-
-.content p, .content li, .content dt, .content dd {
-    line-height: 1.6;
-    margin-top: 0
-}
-
-.content img {
-    max-width: 100%
-}
-
-.content code {
-    background-color: rgba(0, 0, 0, 0.05);
-    padding: 3px;
-    border-radius: 3px
-}
-
-.content pre > code {
-    background-color: transparent;
-    padding: 0
-}
-
-.content aside {
-    padding-top: 1em;
-    padding-bottom: 1em;
-    margin-top: 1.5em;
-    margin-bottom: 1.5em;
-    background: #8fbcd4;
-    line-height: 1.6
-}
-
-.content aside.warning {
-    background-color: #c97a7e;
-}
-
-.content aside.success {
-    background-color: #6ac174;
-}
-
-.content aside:before {
-    vertical-align: middle;
-    padding-right: 0.5em;
-    font-size: 14px
-}
-
-.content .search-highlight {
-    padding: 2px;
-    margin: -2px;
-    border-radius: 4px;
-    border: 1px solid #F7E633;
-    background: linear-gradient(to top left, #f7e633 0%, #f1d32f 100%)
-}
-
-.content pre, .content blockquote {
-    /*background-color: #292929;*/
-    background-color: #FBF8EF;
-    color: #fff;
-    padding: 2em 28px;
-    margin: 0;
-    width: 50%;
-    float: right;
-    clear: right;
-    box-sizing: border-box;
-}
-
-.content pre > p, .content blockquote > p {
-    margin: 0
-}
-
-.content pre a, .content blockquote a {
-    color: #fff;
-    text-decoration: none;
-    border-bottom: dashed 1px #ccc
-}
-
-.content blockquote > p {
-    background-color: #eee;
-    border-radius: 0px;
-    padding: 13px;
-    color: #000;
-    border-left: 4px solid #f0ad4e;
-/*background-color: #eee;*/
-    /*border-radius: 5px;*/
-    /*padding: 13px;*/
-    /*color: #ccc;*/
-    /*border-top: 1px solid #000;*/
-    /*border-bottom: 1px solid #404040*/
-}
-
-@media (max-width: 930px) {
-    .tocify-wrapper {
-        left: -230px
-    }
-
-    .tocify-wrapper.open {
-        left: 0
-    }
-
-    .page-wrapper {
-        margin-left: 0
-    }
-
-    #nav-button {
-        display: block
-    }
-
-    .tocify-wrapper .tocify-item > a {
-        padding-top: 0.3em;
-        padding-bottom: 0.3em
-    }
-}
-
-/*@media (max-width: 700px) {*/
-    .dark-box {
-        display: none
-    }
-
-    .content > h1, .content > h2, .content > h3, .content > h4, .content > h5, .content > h6, .content > p, .content > table, .content > ul, .content > ol, .content > aside, .content > dl {
-        margin-right: 0
-    }
-
-    .tocify-wrapper .lang-selector {
-        display: block
-    }
-
-    .page-wrapper .lang-selector {
-        display: none
-    }
-
-    .content pre, .content blockquote {
-        width: auto;
-        float: none
-    }
-
-    .content > pre + h1, .content > blockquote + h1, .content > pre + h2, .content > blockquote + h2, .content > pre + h3, .content > blockquote + h3, .content > pre + h4, .content > blockquote + h4, .content > pre + h5, .content > blockquote + h5, .content > pre + h6, .content > blockquote + h6, .content > pre + p, .content > blockquote + p, .content > pre + table, .content > blockquote + table, .content > pre + ul, .content > blockquote + ul, .content > pre + ol, .content > blockquote + ol, .content > pre + aside, .content > blockquote + aside, .content > pre + dl, .content > blockquote + dl {
-        margin-top: 28px
-    }
-/*}*/
-
-.content code, .content pre {
-    font-size: 12px;
-    /*-webkit-box-shadow: 0 0 0 3px #eee;*/
-    /*box-shadow: 0 0 0 3px #eee;*/
-    overflow: auto !important;
-    margin-bottom: 0;
-    padding: 10px;
-    background-color: #fff;
-    color: #4d4d4c;
-    margin-bottom: 0;
-}
-.content pre {
-    border-radius: 3px;
-}
-
-.content pre {
-    -webkit-box-shadow: 0 0 0 3px #eee;
-    box-shadow: 0 0 0 3px #eee;
-    width:900px;
-    margin-left:auto;
-    margin-right:auto;
-    background: #FBF8EF;
-}
-
-svg {
-    margin-left:auto;
-    margin-right:auto;
-}
-
-.content {
-    background: #FFF;
-}

docs/site/stylesheets/solarized_light.css

@@ -1,107 +0,0 @@
-/*
-
-Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmail.com>
-
-*/
-
-.hljs {
-  display: block;
-  overflow-x: auto;
-  padding: 0.5em;
-  background: #fdf6e3;
-  color: #657b83;
-  -webkit-text-size-adjust: none;
-}
-
-.hljs-comment,
-.diff .hljs-header,
-.hljs-doctype,
-.hljs-pi,
-.lisp .hljs-string {
-  color: #93a1a1;
-}
-
-/* Solarized Green */
-.hljs-keyword,
-.hljs-winutils,
-.method,
-.hljs-addition,
-.css .hljs-tag,
-.hljs-request,
-.hljs-status,
-.nginx .hljs-title {
-  color: #859900;
-}
-
-/* Solarized Cyan */
-.hljs-number,
-.hljs-command,
-.hljs-string,
-.hljs-tag .hljs-value,
-.hljs-rule .hljs-value,
-.hljs-doctag,
-.tex .hljs-formula,
-.hljs-regexp,
-.hljs-hexcolor,
-.hljs-link_url {
-  color: #2aa198;
-}
-
-/* Solarized Blue */
-.hljs-title,
-.hljs-localvars,
-.hljs-chunk,
-.hljs-decorator,
-.hljs-built_in,
-.hljs-identifier,
-.vhdl .hljs-literal,
-.hljs-id,
-.css .hljs-function,
-.hljs-name {
-  color: #268bd2;
-}
-
-/* Solarized Yellow */
-.hljs-attribute,
-.hljs-variable,
-.lisp .hljs-body,
-.smalltalk .hljs-number,
-.hljs-constant,
-.hljs-class .hljs-title,
-.hljs-parent,
-.hljs-type,
-.hljs-link_reference {
-  color: #b58900;
-}
-
-/* Solarized Orange */
-.hljs-preprocessor,
-.hljs-preprocessor .hljs-keyword,
-.hljs-pragma,
-.hljs-shebang,
-.hljs-symbol,
-.hljs-symbol .hljs-string,
-.diff .hljs-change,
-.hljs-special,
-.hljs-attr_selector,
-.hljs-subst,
-.hljs-cdata,
-.css .hljs-pseudo,
-.hljs-header {
-  color: #cb4b16;
-}
-
-/* Solarized Red */
-.hljs-deletion,
-.hljs-important {
-  color: #dc322f;
-}
-
-/* Solarized Violet */
-.hljs-link_label {
-  color: #6c71c4;
-}
-
-.tex .hljs-formula {
-  background: #eee8d5;
-}

docs/tpl/slate.html

@@ -1,107 +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">
-        {{{contents}}}
-
-    </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>

docs/upgrading.md

@@ -0,0 +1,28 @@
+# Upgrading
+
+Some of the interfaces has been upgraded.
+
+
+## From version 0.4.0 to 0.5.0
+
+
+### Initialization
+
+`mermaid_config` is no longer used. Instead a call to mermaid initialize is done as in the example below:
+
+
+#### version 0.4.0
+
+```javascript
+mermaid_config = {
+    startOnLoad: true
+}
+```
+
+#### version 0.5.0
+
+```javascript
+mermaid.initialize({
+    startOnLoad: true
+})
+```

docs/usage.md

@@ -0,0 +1,365 @@
+# Usage
+
+## Installation
+
+### npm package
+
+```
+yarn add mermaid
+```
+
+### CDN
+
+https://unpkg.com/mermaid/
+
+Please note that you can switch versions through the dropdown box on top right.
+
+
+## Simple usage on a web page
+
+The easiest way to integrate mermaid on a web page requires two elements:
+1. Inclusion of the mermaid framework in the html page using a script tag
+2. A graph definition on the web page
+
+If these things are in place mermaid listens to the page load event and when fires, when the page has loaded, it will
+locate the graphs n the page and transform them to svg files.
+
+### Include mermaid on your web page:
+
+```html
+<script src="mermaid.min.js"></script>
+<script>mermaid.initialize({startOnLoad:true});</script>
+```
+
+Further down on your page mermaid will look for tags with `class="mermaid"`. From these tags mermaid will try to
+read the chart definiton which will be replaced with the svg chart.
+
+
+### Define a chart like this:
+
+```html
+<div class="mermaid">
+    CHART DEFINITION GOES HERE
+</div>
+```
+
+Would end up like this:
+
+```html
+<div class="mermaid" id="mermaidChart0">
+    <svg>
+        Chart ends up here
+    </svg>
+</div>
+```
+
+An id is also added to mermaid tags without id.
+
+### To enable click event and tags in nodes
+
+In version 8.2 a security improvement was introduced. A securityLevel configuration was introduced wich sets the level of trust to be used on the parsed diagrams.
+
+* **true**: (default) tags in text are encoded, click functionality is disabled
+* false: 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 resposibility 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'
+    });
+```
+
+### Simple full example:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="mermaid.min.css">
+</head>
+<body>
+  <div class="mermaid">
+  graph LR
+      A --- B
+      B-->C[fa:fa-ban forbidden]
+      B-->D(fa:fa-spinner);
+  </div>
+  <script src="mermaid.min.js"></script>
+  <script>mermaid.initialize({startOnLoad:true});</script>
+</body>
+</html>
+```
+
+### Labels out of bounds
+
+If you use dynamically loaded fonts that are loaded through CSS, such as Google fonts, mermaid should wait for the
+whole page to have been loaded (dom + assets, particularly the fonts file).
+
+```javascript
+$(document).load(function() {
+    mermaid.initialize();
+});
+```
+
+or
+
+```javascript
+$(document).ready(function() {
+    mermaid.initialize();
+});
+```
+
+Not doing so will most likely result in mermaid rendering graphs that have labels out of bounds. The default integration in mermaid uses the window.load event to start rendering. Also note that when rendering the width of lebale sare calucated of what width it bening meassured at the time.
+
+If your page has other fonts in its body those might be used instead of the mermaid font. Specifying the font in your styling is a workaround for this. 
+```
+    div.mermaid {
+        font-family: 'trebuchet ms', verdana, arial;
+    }
+```
+
+### Calling `mermaid.init`
+
+By default, `mermaid.init` will be called when the document is ready, finding all elements with
+`class="mermaid"`. If you are adding content after mermaid is loaded, or otherwise need
+finer-grained control of this behavior, you can call `init` yourself with:
+
+- a configuration object
+- some nodes, as
+  - a node
+  - an a array-like of nodes
+  - or W3C selector that will find your nodes
+
+Example:
+
+```javascript
+mermaid.init({noteMargin: 10}, ".someOtherClass");
+```
+
+Or with no config object, and a jQuery selection:
+
+```javascript
+mermaid.init(undefined, $("#someId .yetAnotherClass"));
+```
+
+> **Warning** This type of integration is deprecated instead the preferred way of handling more complex integration is to us the mermaidAPI instead.
+
+
+## Usage with webpack
+
+mermaid fully supports webpack. Here is a [working demo](https://github.com/mermaidjs/mermaid-webpack-demo).
+
+
+## API usage
+
+The main idea with the API is to be able to call a render function with graph defintion as a string. The render function
+will render the graph and call a callback with the resulting svg code. With this approach it is up to the site creator to
+fetch the graph definition from the site, perhaps from a textarea, render it and place the graph somewhere in the site.
+
+To do this, include mermaidAPI on your web website instead of mermaid.js. The example below show an outline of how this
+could be used. The example just logs the resulting svg to the javascript console.
+
+```html
+<script src="mermaidAPI.js"></script>
+
+<script>
+    mermaidAPI.initialize({
+        startOnLoad:false
+    });
+    $(function(){
+        // Example of using the API
+        var element = document.querySelector("#graphDiv");
+
+        var insertSvg = function(svgCode, bindFunctions){
+            element.innerHTML = svgCode;
+        };
+
+        var graphDefinition = 'graph TB\na-->b';
+        var graph = mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
+    });
+</script>
+```
+
+
+### Binding events
+
+Sometimes the generated graph also has defined interactions like tooltip and click events. When using the API one must
+add those events after the graph has been inserted into the DOM.
+
+The example code below is an extract of what mermaid does when using the API. The example shows how it is possible to
+bind events to an svg when using the API for rendering.
+
+```javascript
+var insertSvg = function(svgCode, bindFunctions) {
+    element.innerHTML = svgCode;
+    if(typeof callback !== 'undefined'){
+        callback(id);
+    }
+    bindFunctions(element);
+};
+
+var id = 'theGraph';
+
+
+mermaidAPI.render(id,txt,insertSvg, element);
+```
+
+1. The graph is generated using the render call.
+2. After generation the render function calls the provided callback function, in this case it's called insertSvg.
+3. The callback function is called with two parameters, the svg code of the generated graph and a function. This function binds events to the svg **after** it is inserted into the DOM.
+4. Insert the svg code into the DOM for presentation
+5. Call the binding function that binds the events
+
+
+## Example of a marked renderer
+
+This is the renderer used for transforming the documentation from markdown to html with mermaid diagrams in the html.
+
+```javascript
+var renderer = new marked.Renderer();
+renderer.code = function (code, language) {
+    if(code.match(/^sequenceDiagram/)||code.match(/^graph/)){
+        return '<div class="mermaid">'+code+'</div>';
+    }
+    else{
+        return '<pre><code>'+code+'</code></pre>';
+    }
+};
+```
+
+Another example in coffeescript that also includes the mermaid script tag into the generated markup.
+
+```CoffeeScript
+marked = require 'marked'
+
+module.exports = (options) ->
+  hasMermaid = false
+  renderer = new marked.Renderer()
+  renderer.defaultCode = renderer.code
+  renderer.code = (code, language) ->
+    if language is 'mermaid'
+      html = ''
+      if not hasMermaid
+        hasMermaid = true
+        html += '<script src="'+options.mermaidPath+'"></script>'
+      html + '<div class="mermaid">'+code+'</div>'
+    else
+      @defaultCode(code, language)
+
+  renderer
+```
+
+
+## Advanced usage
+
+**Error handling**
+
+When the parser encounters invalid syntax the **mermaid.parseError** function is called. It is possible to override this
+function in order to handle the error in an application specific way.
+
+**Parsing text without rendering**
+
+It is also possible to validate the syntax before rendering in order to streamline the user experience. The function
+**mermaid.parse(txt)** takes a text string as an argument and returns true if the text is syntactically correct and
+false if it is not. The parseError function will be called when the parse function returns false.
+
+The code-example below in meta code illustrates how this could work:
+
+```javascript
+mermaid.parseError = function(err,hash){
+    displayErrorInGui(err);
+};
+
+var textFieldUpdated = function(){
+    var textStr = getTextFromFormField('code');
+
+    if(mermaid.parse(textStr)){
+        reRender(textStr)
+    }
+};
+
+bindEventHandler('change', 'code', textFieldUpdated);
+```
+
+
+## Configuration
+
+Mermaid takes a number of options which lets you tweak the rendering of the diagrams. Currently there are three ways of
+setting the options in mermaid.
+
+1. Instantiation of the configuration using the initialize call
+2. *Using the global mermaid object* - deprecated
+3. *using the global mermaid_config object* - deprecated
+4. Instantiation of the configuration using the **mermaid.init** call
+
+The list above has two ways to many of doing this. Three are deprecated and will eventually be removed. The list of
+configuration objects are described [in the mermaidAPI documentation](mermaidAPI.html).
+
+
+## Using the `mermaidAPI.initialize`/`mermaid.initialize` call
+
+The future proof way of setting the configuration is by using the initialization call to mermaid or mermaidAPi depending
+on what kind of integration you use.
+
+```html
+<script src="../dist/mermaid.js"></script>
+<script>
+    var config = {
+        startOnLoad:true,
+        flowchart:{
+            useMaxWidth:false,
+            htmlLabels:true
+        }
+    };
+    mermaid.initialize(config);
+</script>
+```
+
+> **Success** This is the preferred way of configuring mermaid.
+
+
+## Using the mermaid object
+
+Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this
+approach are:
+
+* mermaid.startOnLoad
+* mermaid.htmlLabels
+
+```
+mermaid.startOnLoad = true;
+```
+
+> **Warning** This way of setting the configuration is deprecated instead the preferred way of is to use the initialize method. This functionality is only kept for not breaking existing integrations
+
+## Using the mermaid_config
+
+Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this
+approach are:
+
+* mermaid_config.startOnLoad
+* mermaid_config.htmlLabels
+
+```javascript
+mermaid_config.startOnLoad = true;
+```
+
+> **Warning** This way of setting the configuration is deprecated instead the preferred way of is to use the initialize method. This functionality is only kept for not breaking existing integrations
+
+## Using the mermaid.init call
+
+Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this
+approach are:
+
+* mermaid_config.startOnLoad
+* mermaid_config.htmlLabels
+
+```
+mermaid_config.startOnLoad = true;
+```
+
+> **Warning** This way of setting the configuration is deprecated instead the preferred way of is to use the initialize method. This functionality is only kept for not breaking existing integrations

e2e/README.md

@@ -0,0 +1,9 @@
+# End to end tests
+
+These tests are end to end tests in the sense that they actually render a full diagram in the browser. The purpose of these tests is to simplify handling of merge requests and releases by highlighting possible unexpected side-effects.
+
+Apart from beeing rendered in a browser the tests perform image snapshots of the diagrams. The tests is handled in the same way as regular jest snapshots tests with the difference that an image comparison is performed instead of a comparison of the generated code.
+
+## To run the tests
+1. Start the dev server by running ***yarn dev***
+2. Run yarn e2e to run the tests

e2e/helpers/util.js

@@ -0,0 +1,30 @@
+/* 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
+  }
+
+  return url
+}
+
+export const imgSnapshotTest = async (page, graphStr, options, api) => {
+  return new Promise(async resolve => {
+    const url = mermaidUrl(graphStr, options, api)
+
+    await page.goto(url)
+
+    const image = await page.screenshot()
+
+    expect(image).toMatchImageSnapshot()
+    resolve()
+  })
+  // page.close()
+}