Merge branch 'release/8.8.3'

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

docs/.debug.yml

@@ -1,5 +0,0 @@
-remote_theme: false
-
-baseurl: /mermaid
-
-theme: jekyll-rtd-theme

docs/8.6.0_docs.md

@@ -1,217 +1,212 @@
----
-sort: 4
-title: Directives
----
-
-# Version 8.6.0 Changes
-
-## [New Mermaid Live-Editor Beta](https://mermaid-js.github.io/docs/mermaid-live-editor-beta/#/edit/eyJjb2RlIjoiJSV7aW5pdDoge1widGhlbWVcIjogXCJmb3Jlc3RcIiwgXCJsb2dMZXZlbFwiOiAxIH19JSVcbmdyYXBoIFREXG4gIEFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgQyAtLT58T25lfCBEW0xhcHRvcF1cbiAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl1cblx0XHQiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGFyayJ9fQ)
-
-## [CDN](https://unpkg.com/mermaid/)
-
-With version 8.6.0 comes the release of directives for mermaid, a new system for modifying configurations, with the aim of establishing centralized, sane defaults and simple implementation.
-
-`directives` allow for a diagram specific overriding of `config`, as it has been discussed in [Configurations](./Setup.md).
-This allows site users to input modifications to `config` alongside diagram definitions, when creating diagrams on a private webpage that supports mermaid.
-
-**A likely application for this is in the creation of diagrams/charts inside company/organizational webpages, that rely on mermaid for diagram and chart rendering.**
-
-the `init` directive is the main method of configuration for Site and Current Levels.
-
-The three levels of are Configuration, Global, Site and Current.
-
-| Level of Configuration | Description |
-| --- | --- |
-| Global Configuration| Default Mermaid Configurations|
-| Site Configuration| Configurations made by site owner|
-| Current Configuration| Configurations made by Implementors|
-
-
-# Limits to Modifying Configurations
-**secure Array**
-
-| Parameter | Description |Type | Required | Values|
-| --- | --- | --- | --- | --- |
-| secure | Array of parameters excluded from init directive| Array | Required | Any parameters|
-
-The modifiable parts of the Configuration are limited by the secure array, which is an array of immutable parameters, this array can be expanded by site owners.
-
-**Notes**: secure arrays work like nesting dolls, with the Global Configurations’ secure array being the default and immutable list of immutable parameters, or the smallest doll, to which site owners may add to, but implementors may not modify it.
-
-# Secure Arrays
-
-Site owners can add to the **secure** array using this command:
-mermaidAPI.initialize( { startOnLoad: true, secure: ['parameter1', 'parameter2'] } );
-
-default values for the `secure array` consists of: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']. These default values are immutable.
-
-Implementors can only modify configurations using directives, but cannot change the `secure` array.
-
-# Modifying Configurations and directives:
-The Two types of directives: are `init` or `initialize` and `wrap`.
-
-```note
-All directives are enclosed in `%%{ }%%.`
-```
-
-Older versions of mermaid will not parse directives because `%%` will comment out the directive. This makes the update backward compatible.
-
-# Init
-`init`, or `initialize`: the init or initialize directive gives the user the ability to overwrite and change the values for configuration parameters, with respect to the secure array that is in effect.
-
-| Parameter | Description |Type | Required | Values|
-| --- | --- | --- | --- | --- |
-| init | modifies configurations| Directive| Optional | Any parameters not included in the secure array|
-
-
-```note
-init would be an argument-directive: `%%{init: { **insert argument here**}}%%`
-
-The json object that is passed as {**argument** } must be valid, quoted json or it will be ignored.
-    **for example**:
-
-`%%{init: {"theme": default, "logLevel": 1 }}%%`
-
-Configurations that are passed through init cannot change the parameters in secure arrays of higher levels. In the event of a conflict, mermaid will give priority to secure arrays and parse the request, without changing the values of the parameters in conflict.
-
-When deployed within code, init is called before the graph/diagram description.
-```
-
-**for example**:
-```
-%%{init: {"theme": "default", "logLevel": 1 }}%%
- graph LR
-  a-->b
-  b-->c
-  c-->d
-  d-->e
-  e-->f
-  f-->g
-  g-->
-```
-# Wrap
-
-| Parameter | Description |Type | Required | Values|
-| --- | --- | --- | --- | --- |
-| wrap | a callable text-wrap function| Directive| Optional | %%{wrap}%%|
-
-```note
-Wrap is a function that is currently only deployable for sequence diagrams.
-
-wrap respects manually added <br\> so if the user wants to break up their text, they have full control over those breaks by adding their own <br\> tags.
-
-It is a non-argument directive and can be executed thusly:
-
-`%%{wrap}%%` .
-```
-
-**an example of text wrapping in a sequence diagram**:
-
-![Image showing wrapped text](../assets/img/wrapped%20text.png)
-
-
-# Resetting Configurations:
-There are two more functions in the mermaidAPI that can be called by site owners: **reset** and **globalReset**.
-
-**reset**: resets the configuration to whatever the last configuration was. This can be done to undo more recent changes to the last mermaidAPI.initialize({...}) configuration.
-
-**globalReset** will reset both the current configuration AND the site configuration back to the global defaults.
-
-**Notes**:  both reset and globalReset are only available to site owners, as such implementors would have to edit their configs with init.
-
-# Additional Utils to mermaid
-•	**memoize**: simple caching for computationally expensive functions. It reduces the rendering time for computationally intensive diagrams by about 90%.
-
-•	**assignWithDepth** - this is an improvement on previous functions with config.js and Object.assign. The purpose of this function is to provide a sane mechanism for merging objects, similar to object.assign, but with depth.
-
-Example of **assignWithDepth**:
-
-![Image showing assignWithDepth](../assets/img/assignWithDepth.png)
-
-
-Example of **object.Assign**:
-
-![Image showing object.assign without depth](../assets/img/object.assign%20without%20depth.png)
-
-•	**calculateTextDimensions, calculateTextWidth,** and **calculateTextHeight** - for measuring text dimensions, width and height.
-
-**Notes**:For more information on usage, parameters, and return info for these new functions take a look at the jsdocs for them in the utils package.
-
-
-# New API Requests Introduced in Version 8.6.0
-
-## setSiteConfig
-
-| Function | Description         | Type    | Values             |Parameters|Returns|
-| --------- | ------------------- | ------- | ------------------ | ------------------ | ------------------ |
-| setSiteConfig|Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array|conf|siteConfig|
-
-```note
-Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset
-the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) will reset siteConfig and currentConfig
-to the defaultConfig
-Note: currentConfig is set in this function
-Default value: At default, will mirror Global Config
-```
-
-## getSiteConfig
-
-| Function | Description         | Type    |  Values             |
-| --------- | ------------------- | ------- |  ------------------ |
-| setSiteConfig|Returns the current siteConfig base configuration | Get Request | Returns Any Values  in siteConfig|
-
-```note
-Returns   any   values in siteConfig.
-```
-
-## setConfig
-
-| Function  | Description         | Type    | Values             |Parameters|Returns|
-| --------- | ------------------- | ------- | ------------------ |----------|-------|
-| setSiteConfig|Sets the siteConfig to desired values | Put Request| Any Values, those in secure array|conf|currentConfig merged with the sanitized conf|
-
-```note
-Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any
-values found in conf with key found in siteConfig.secure will be replaced with the corresponding
-siteConfig value.
-```
-
-## getConfig
-
-| Function  | Description         | Type    | Return Values            |
-| --------- | ------------------- | ------- | ------------------ |
-| getConfig |Obtains the currentConfig | Get Request | Any Values from currentConfig|
-
-
-```note
-Returns any values in currentConfig.
-```
-
-## sanitize
-
-| Function  | Description         | Type    | Values             |
-| --------- | ------------------- | ------- | ------------------ |
-| sanitize  |Sets the siteConfig to desired values. | Put Request(?) |None|
-
-```note
-modifies options in-place
-Ensures options parameter does not attempt to override siteConfig secure keys.
-```
-
-## reset
-
-| Function | Description         | Type    | Required | Values             |Parameter|
-| --------- | -------------------| ------- | -------- | ------------------ |---------|
-| reset|Resets currentConfig to conf| Put Request | Required | None| conf|
-
-## conf
-
-| Parameter | Description |Type | Required | Values|
-| --- | --- | --- | --- | --- |
-| conf| base set of values, which currentConfig coul be   reset   to.| Dictionary | Required | Any Values, with respect to the secure Array|
-
-```note
-default: current siteConfig  (optional, default `getSiteConfig()`)
-```
-
-## For more information, read [Setup](Setup.md).
+# Version 8.6.0 Changes
+**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/8.6.0_docs.md)
+## [New Mermaid Live-Editor Beta](https://mermaid-js.github.io/docs/mermaid-live-editor-beta/#/edit/eyJjb2RlIjoiJSV7aW5pdDoge1widGhlbWVcIjogXCJmb3Jlc3RcIiwgXCJsb2dMZXZlbFwiOiAxIH19JSVcbmdyYXBoIFREXG4gIEFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgQyAtLT58T25lfCBEW0xhcHRvcF1cbiAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl1cblx0XHQiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGFyayJ9fQ)
+
+## [CDN](https://unpkg.com/mermaid/)
+
+With version 8.6.0 comes the release of directives for mermaid, a new system for modifying configurations, with the aim of establishing centralized, sane defaults and simple implementation.
+
+`directives` allow for a diagram specific overriding of `config`, as it has been discussed in [Configurations](./Setup.md).
+This allows site users to input modifications to `config` alongside diagram definitions, when creating diagrams on a private webpage that supports mermaid.
+
+**A likely application for this is in the creation of diagrams/charts inside company/organizational webpages, that rely on mermaid for diagram and chart rendering.**
+
+the `init` directive is the main method of configuration for Site and Current Levels.
+
+The three levels of are Configuration, Global, Site and Current.
+
+| Level of Configuration | Description |
+| --- | --- |
+| Global Configuration| Default Mermaid Configurations|
+| Site Configuration| Configurations made by site owner|
+| Current Configuration| Configurations made by Implementors|
+
+
+# Limits to Modifying Configurations
+**secure Array**
+
+| Parameter | Description |Type | Required | Values|
+| --- | --- | --- | --- | --- |
+| secure | Array of parameters excluded from init directive| Array | Required | Any parameters|
+
+The modifiable parts of the Configuration are limited by the secure array, which is an array of immutable parameters, this array can be expanded by site owners.
+
+**Notes**: secure arrays work like nesting dolls, with the Global Configurations’ secure array being the default and immutable list of immutable parameters, or the smallest doll, to which site owners may add to, but implementors may not modify it.
+
+# Secure Arrays
+
+Site owners can add to the **secure** array using this command:
+mermaidAPI.initialize( { startOnLoad: true, secure: ['parameter1', 'parameter2'] } );
+
+default values for the `secure array` consists of: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']. These default values are immutable.
+
+Implementors can only modify configurations using directives, but cannot change the `secure` array.
+
+# Modifying Configurations and directives:
+The Two types of directives: are `init` or `initialize` and `wrap`.
+
+```note
+All directives are enclosed in `%%{ }%%.`
+```
+
+Older versions of mermaid will not parse directives because `%%` will comment out the directive. This makes the update backward compatible.
+
+# Init
+`init`, or `initialize`: the init or initialize directive gives the user the ability to overwrite and change the values for configuration parameters, with respect to the secure array that is in effect.
+
+| Parameter | Description |Type | Required | Values|
+| --- | --- | --- | --- | --- |
+| init | modifies configurations| Directive| Optional | Any parameters not included in the secure array|
+
+
+```note
+init would be an argument-directive: `%%{init: { **insert argument here**}}%%`
+
+The json object that is passed as {**argument** } must be valid, quoted json or it will be ignored.
+    **for example**:
+
+`%%{init: {"theme": default, "logLevel": 1 }}%%`
+
+Configurations that are passed through init cannot change the parameters in secure arrays of higher levels. In the event of a conflict, mermaid will give priority to secure arrays and parse the request, without changing the values of the parameters in conflict.
+
+When deployed within code, init is called before the graph/diagram description.
+```
+
+**for example**:
+```
+%%{init: {"theme": "default", "logLevel": 1 }}%%
+ graph LR
+  a-->b
+  b-->c
+  c-->d
+  d-->e
+  e-->f
+  f-->g
+  g-->
+```
+# Wrap
+
+| Parameter | Description |Type | Required | Values|
+| --- | --- | --- | --- | --- |
+| wrap | a callable text-wrap function| Directive| Optional | %%{wrap}%%|
+
+```note
+Wrap is a function that is currently only deployable for sequence diagrams.
+
+wrap respects manually added <br\> so if the user wants to break up their text, they have full control over those breaks by adding their own <br\> tags.
+
+It is a non-argument directive and can be executed thusly:
+
+`%%{wrap}%%` .
+```
+
+**an example of text wrapping in a sequence diagram**:
+
+![Image showing wrapped text](img/wrapped%20text.png)
+
+
+# Resetting Configurations:
+There are two more functions in the mermaidAPI that can be called by site owners: **reset** and **globalReset**.
+
+**reset**: resets the configuration to whatever the last configuration was. This can be done to undo more recent changes to the last mermaidAPI.initialize({...}) configuration.
+
+**globalReset** will reset both the current configuration AND the site configuration back to the global defaults.
+
+**Notes**:  both reset and globalReset are only available to site owners, as such implementors would have to edit their configs with init.
+
+# Additional Utils to mermaid
+•	**memoize**: simple caching for computationally expensive functions. It reduces the rendering time for computationally intensive diagrams by about 90%.
+
+•	**assignWithDepth** - this is an improvement on previous functions with config.js and Object.assign. The purpose of this function is to provide a sane mechanism for merging objects, similar to object.assign, but with depth.
+
+Example of **assignWithDepth**:
+
+![Image showing assignWithDepth](img/assignWithDepth.png)
+
+
+Example of **object.Assign**:
+
+![Image showing object.assign without depth](img/object.assign%20without%20depth.png)
+
+•	**calculateTextDimensions, calculateTextWidth,** and **calculateTextHeight** - for measuring text dimensions, width and height.
+
+**Notes**:For more information on usage, parameters, and return info for these new functions take a look at the jsdocs for them in the utils package.
+
+
+# New API Requests Introduced in Version 8.6.0
+
+## setSiteConfig
+
+| Function | Description         | Type    | Values             |Parameters|Returns|
+| --------- | ------------------- | ------- | ------------------ | ------------------ | ------------------ |
+| setSiteConfig|Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array|conf|siteConfig|
+
+```note
+Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset
+the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) will reset siteConfig and currentConfig
+to the defaultConfig
+Note: currentConfig is set in this function
+Default value: At default, will mirror Global Config
+```
+
+## getSiteConfig
+
+| Function | Description         | Type    |  Values             |
+| --------- | ------------------- | ------- |  ------------------ |
+| setSiteConfig|Returns the current siteConfig base configuration | Get Request | Returns Any Values  in siteConfig|
+
+```note
+Returns   any   values in siteConfig.
+```
+
+## setConfig
+
+| Function  | Description         | Type    | Values             |Parameters|Returns|
+| --------- | ------------------- | ------- | ------------------ |----------|-------|
+| setSiteConfig|Sets the siteConfig to desired values | Put Request| Any Values, those in secure array|conf|currentConfig merged with the sanitized conf|
+
+```note
+Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any
+values found in conf with key found in siteConfig.secure will be replaced with the corresponding
+siteConfig value.
+```
+
+## getConfig
+
+| Function  | Description         | Type    | Return Values            |
+| --------- | ------------------- | ------- | ------------------ |
+| getConfig |Obtains the currentConfig | Get Request | Any Values from currentConfig|
+
+
+```note
+Returns any values in currentConfig.
+```
+
+## sanitize
+
+| Function  | Description         | Type    | Values             |
+| --------- | ------------------- | ------- | ------------------ |
+| sanitize  |Sets the siteConfig to desired values. | Put Request(?) |None|
+
+```note
+modifies options in-place
+Ensures options parameter does not attempt to override siteConfig secure keys.
+```
+
+## reset
+
+| Function | Description         | Type    | Required | Values             |Parameter|
+| --------- | -------------------| ------- | -------- | ------------------ |---------|
+| reset|Resets currentConfig to conf| Put Request | Required | None| conf|
+
+## conf
+
+| Parameter | Description |Type | Required | Values|
+| --- | --- | --- | --- | --- |
+| conf| base set of values, which currentConfig coul be   reset   to.| Dictionary | Required | Any Values, with respect to the secure Array|
+
+```note
+default: current siteConfig  (optional, default `getSiteConfig()`)
+```
+
+## For more information, read [Setup](Setup.md).

docs/CHANGELOG.md

@@ -1,10 +1,7 @@
----
-sort: 3
-title: Changelog
----
-
 # Change Log
 
+**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/CHANGELOG.md)
+
 Here is the list of the newest versions in Descending Order, beginning from the latest version.
 
 ## Unreleased
@@ -122,13 +119,13 @@ This was introduced in version 8.2 as a security improvement, aimed at preventin
 
 **Notes:**
 
--   **strict**: (**default**) tags in text are encoded, click functionality is disabeled
+-   **strict**: (**default**) tags in text are encoded, click functionality is disabled
 -   **loose**: tags in text are allowed, click functionality is enabled
 -   **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled
 
 ⚠️ **Note**: This changes the default behaviour of mermaid so that after upgrade to 8.2, if the `securityLevel` is not configured, tags in flowcharts are encoded as tags and clicking is prohibited.
 
-If you are taking resposibility for the diagram source security you can set the `securityLevel` to a value of your choosing.
+If you are taking responsibility for the diagram source security you can set the `securityLevel` to a value of your choosing.
 By doing this clicks and tags are again allowed.
 
 ### To change `securityLevel` with `mermaidAPI.initialize`:
@@ -245,7 +242,7 @@ By doing this clicks and tags are again allowed.
 - 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)
+- logLevel's option doesn't work at 7.0.0 [\#501](https://github.com/knsv/mermaid/issues/501)
 - How do I get the log for a render or parse attempt? [\#500](https://github.com/knsv/mermaid/issues/500)
 - Mermaid neutral style style to built in latest release [\#499](https://github.com/knsv/mermaid/issues/499)
 - Any plans for adding a typescript definition file? [\#495](https://github.com/knsv/mermaid/issues/495)
@@ -278,7 +275,7 @@ By doing this clicks and tags are again allowed.
 - 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)
+- 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)
@@ -316,12 +313,12 @@ By doing this clicks and tags are again allowed.
 - 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)
+- 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)
+- some WARN about installation [\#222](https://github.com/knsv/mermaid/issues/222)
 - Live editor offline access [\#217](https://github.com/knsv/mermaid/issues/217)
 - suggest: code highlight mode config for editors [\#212](https://github.com/knsv/mermaid/issues/212)
 - Uncaught RangeError: Maximum call stack size exceeded [\#189](https://github.com/knsv/mermaid/issues/189)
@@ -457,7 +454,7 @@ By doing this clicks and tags are again allowed.
 - 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))
+- added tests to reproduce \#434 in flowchart [\#439](https://github.com/knsv/mermaid/pull/439) ([whyzdev](https://github.com/whyzdev))
 - Code Climate config [\#437](https://github.com/knsv/mermaid/pull/437) ([larkinscott](https://github.com/larkinscott))
 - fix gantt and sequence digram cli cfg [\#435](https://github.com/knsv/mermaid/pull/435) ([whyzdev](https://github.com/whyzdev))
 - fix gantt chart cli configuration broken [\#433](https://github.com/knsv/mermaid/pull/433) ([whyzdev](https://github.com/whyzdev))
@@ -485,7 +482,7 @@ By doing this clicks and tags are again allowed.
 
 - 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)
+- How to link backwards in flowchart? [\#321](https://github.com/knsv/mermaid/issues/321)
 - Help with editor [\#310](https://github.com/knsv/mermaid/issues/310)
 - +1 [\#293](https://github.com/knsv/mermaid/issues/293)
 - Basic chart does not render on Chome, but does in Firefox [\#290](https://github.com/knsv/mermaid/issues/290)
@@ -897,7 +894,7 @@ By doing this clicks and tags are again allowed.
 - 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))
+- Improves readability discussed in issue \#38 [\#56](https://github.com/knsv/mermaid/pull/56) ([vijay40](https://github.com/vijay40))
 - Added a linting task for gulp [\#43](https://github.com/knsv/mermaid/pull/43) ([serv](https://github.com/serv))
 
 ## [0.2.15](https://github.com/knsv/mermaid/tree/0.2.15) (2014-12-05)

docs/Gemfile

@@ -1,5 +0,0 @@
-source "https://rubygems.org"
-
-gem "jekyll-rtd-theme"
-
-gem "github-pages", group: :jekyll_plugins

docs/Makefile

@@ -1,14 +0,0 @@
-default:
-	@gem install jekyll bundler && bundle install
-
-update:
-	@bundle update
-
-clean:
-	@bundle exec jekyll clean
-
-build: clean
-	@bundle exec jekyll build --profile --config _config.yml,.debug.yml
-
-server: clean
-	@bundle exec jekyll server --livereload --config _config.yml,.debug.yml

docs/README.md

@@ -1,16 +1,17 @@
-# mermaid [![Build Status](https://travis-ci.org/mermaid-js/mermaid.svg?branch=master)](https://travis-ci.org/mermaid-js/mermaid) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/Mermaid/mermaid)
+# About Mermaid
 
-![banner](assets/img/header.png)
+**Mermaid lets you represent diagrams using text and code.** This simplifies maintianing complex diagrams. It is a Javascript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. The main purpose of Mermaid is to help Documentation catch up with Development.
 
-:trophy: **Mermaid was nominated and won the [JS Open Source Awards (2019)](https://osawards.com/javascript/#nominees) in the category "The most exciting use of technology"!!!**
+Many editors, wikis and other tools have mermaid integrations already making it easy to start using mermaid. A few of those are described in [Simple start to write diagrams](./n00b-GettingStarted.md).
 
-**Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project 🙏**
+![banner](img/header.png)
 
-## About
+**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/README.md)
+
+
+[![Build Status](https://travis-ci.org/mermaid-js/mermaid.svg?branch=master)](https://travis-ci.org/mermaid-js/mermaid) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/Mermaid/mermaid)
 
 <!-- <Main description> -->
-Mermaid simplifies complex diagrams. It is a Javascript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. The main purpose of Mermaid is to help Documentation catch up with Development.
-
 > Doc-Rot is a Catch-22 that Mermaid helps to solve.
 
 Diagramming and documentation costs precious developer time and gets outdated quickly.
@@ -19,21 +20,26 @@ Mermaid addresses this Catch-22 by cutting the time, effort and tooling that is
 Mermaid, as a text-based diagramming tool allows for quick and easy updates, it can also be made part of production scripts (and other pieces of code), to make documentation much easier.
 With Mermaid less time needs to be spent on making diagrams, as a separate documentation task. <br/>
 
-> Mermaid is a Diagramming tool for everyone. 
+> Mermaid is a Diagramming tool for everyone.
 
-Even non-programmers can create diagrams through the [Mermaid Live Editor](https://github.com/mermaidjs/mermaid-live-editor), Visit the [Tutorials Page](href='https://github.com/mermaid-js/mermaid/blob/develop/docs/Tutorials.md) for the Live Editor video tutorials.
+Even non-programmers can create diagrams through the [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor), Visit the [Tutorials Page](./Tutorials.md) for the Live Editor video tutorials.
 
-Want to see what can be built with mermaid, or what applications already support it? Read the [Integrations and Usages for Mermaid](overview/integrations.md).
+Want to see what can be built with mermaid, or what applications already support it? Read the [Integrations and Usages for Mermaid](./integrations.md).
 
-For a more detailed introduction to Mermaid and some of it's more basic uses, look to the [Beginner's Guide](overview/n00b-overview.md) and [Usage](getting-started/usage.md).
+For a more detailed introduction to Mermaid and some of it's more basic uses, look to the [Overview for Beginners](./n00b-overview.md) and [Usage](./usage.md).
 
-🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/docs/tutorials-and-community/development.md) | 📜 [Version Log](tutorials-and-community/CHANGELOG.md)
+🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/docs/development.md) | 📜 [Version Log](./CHANGELOG.md)
 
 > 🖖 Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/knsv/mermaid/issues/866).
 
-# Diagrams that mermaid can render:
+:trophy: **Mermaid was nominated and won the [JS Open Source Awards (2019)](https://osawards.com/javascript/#nominees) in the category "The most exciting use of technology"!!!**
 
-### [Flowchart](https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/flowchart.html)
+**Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project 🙏**
+
+
+# Diagrams that mermaid can render
+
+### [Flowchart](/flowchart?id=flowcharts-basic-syntax)
 
 ```
 graph TD;
@@ -43,9 +49,9 @@ graph TD;
     C-->D;
 ```
 
-![Flowchart](assets/img/flow.png)
+![Flowchart](img/flow.png)
 
-### [Sequence diagram](https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/sequenceDiagram.html)
+### [Sequence diagram](/sequenceDiagram)
 
 ```
 sequenceDiagram
@@ -61,9 +67,9 @@ sequenceDiagram
     Bob-->>John: Jolly good!
 ```
 
-![Sequence diagram](assets/img/sequence.png)
+![Sequence diagram](img/sequence.png)
 
-### [Gantt diagram](https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/gantt.html)
+### [Gantt diagram](/gantt)
 
 ```
 gantt
@@ -78,9 +84,9 @@ Future task               :         des3, after des2, 5d
 Future task2               :         des4, after des3, 5d
 ```
 
-![Gantt diagram](assets/img/gantt.png)
+![Gantt diagram](img/gantt.png)
 
-### [Class diagram - :exclamation: experimental](https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/classDiagram.html)
+### [Class diagram](/classDiagram)
 
 ```
 classDiagram
@@ -99,7 +105,7 @@ Class01 : int gorilla
 Class08 <--> C2: Cool label
 ```
 
-![Class diagram](assets/img/class.png)
+![Class diagram](img/class.png)
 
 ### Git graph - :exclamation: experimental
 
@@ -122,9 +128,9 @@ commit
 merge newbranch
 
 ```
-![Git graph](assets/img/git.png)
+![Git graph](img/git.png)
 
-### [Entity Relationship Diagram - :exclamation: experimental](https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/entityRelationshipDiagram.html)
+### [Entity Relationship Diagram - :exclamation: experimental](/entityRelationshipDiagram)
 
 ```
 erDiagram
@@ -134,9 +140,9 @@ erDiagram
 
 ```
 
-![ER diagram](assets/img/simple-er.png)
+![ER diagram](img/simple-er.png)
 
-### [User Journey Diagram](https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/user-journey.html)
+### [User Journey Diagram](/user-journey)
 
 ```markdown
 journey
@@ -149,12 +155,13 @@ journey
       Go downstairs: 5: Me
       Sit down: 5: Me
 ```
-![Journey diagram](assets/img/user-journey.png)
+![Journey diagram](img/user-journey.png)
 
 # Installation
-## In depth guides and examples can be found in [Getting Started](getting-started/n00b-gettingStarted.md) and [Usage](getting-started/usage.md).
 
-## It would also be helpful to learn more about mermaid's [Syntax](diagrams-and-syntax-and-examples/n00b-syntaxReference.md).
+**In depth guides and examples can be found in [Getting Started](/n00b-gettingStarted) and [Usage](/usage).**
+
+**It would also be helpful to learn more about mermaid's [Syntax](/n00b-syntaxReference).**
 
 ### CDN
 
@@ -170,7 +177,7 @@ Alternatively, you can also adjust the version number in the page itself.
 
 Latest Version: [https://unpkg.com/browse/mermaid@8.8.0/](https://unpkg.com/browse/mermaid@8.8.0/)
 
-## Incorporating mermaid to a website
+## Mermaid on a website
 To support mermaid on your website, all you have to do is add Mermaid’s JavaScript package
 
 ```
@@ -186,18 +193,18 @@ To support mermaid on your website, all you have to do is add Mermaid’s JavaSc
 
 ```
 
-## To deploy mermaid without a bundler, one can insert a `script` tag with an absolute address and a `mermaidAPI` call into the HTML like so:
+**To deploy mermaid without a bundler, one can insert a `script` tag with an absolute address and a `mermaidAPI` call into the HTML like so:**
 ```html
 <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
 <script>mermaid.initialize({startOnLoad:true});</script>
 ```
-## Doing so will command the mermaid parser to look for the `<div>` tags with `class="mermaid"` in your HTML Document. From these tags mermaid will try to read the diagram/chart definitons and render them as svg charts.
+**Doing so will command the mermaid parser to look for the `<div>` tags with `class="mermaid"` in your HTML Document. From these tags mermaid will try to read the diagram/chart definitons and render them as svg charts.**
 
-## Examples can be found in [Getting Started](getting-started/n00b-gettingStarted.md)
+ **Examples can be found in** [Other examples](/examples)
 
 # Sibling projects
-- [Mermaid Live Editor](https://github.com/mermaidjs/mermaid-live-editor)
-- [Mermaid CLI](https://github.com/mermaidjs/mermaid.cli)
+- [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
+- [Mermaid CLI](https://github.com/mermaid-js/mermaid-cli)
 - [Mermaid Webpack Demo](https://github.com/mermaidjs/mermaid-webpack-demo)
 - [Mermaid Parcel Demo](https://github.com/mermaidjs/mermaid-parcel-demo)
 
@@ -267,6 +274,4 @@ Thanks also to the [js-sequence-diagram](http://bramp.github.io/js-sequence-diag
 
 _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/Setup.md

@@ -1,8 +1,3 @@
----
-sort: 3
-title: Configurations
----
-
 <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
 
 ## mermaidAPI

docs/Tutorials.md

@@ -0,0 +1,36 @@
+# Tutorials
+
+**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/Tutorials.md)
+
+This is  list of publicly available Tutorials for using Mermaid.JS . This is intended as a basic introduction for the use of the Live Editor for generating diagrams, and deploying Mermaid.JS through HTML.  
+
+For most purposes, you can use the [Live Editor](https://mermaid-js.github.io/mermaid-live-editor), to quickly and easily render a diagram. 
+
+
+## Live-Editor Tutorials
+The definitions that can be generated the Live-Editor are also backwards-compatible as of version 8.7.0.
+
+[GitLab Unfiltered: How to Create Mermaid Diagrams](https://www.youtube.com/watch?v=SQ9QmuTHuSI&t=438s)
+
+[GitLab Unfiltered: Emilie adds a mermaid diagram to the handbook](https://www.youtube.com/watch?v=5RQqht3NNSE)
+
+[World of Zero: I Learn How To Build Flowcharts and Signal Diagram's in Mermaid.JS](https://www.youtube.com/watch?v=7_2IroEs6Is&t=207s)
+
+[Eddie Jaoude: Can you code your diagrams?](https://www.youtube.com/watch?v=9HZzKkAqrX8)
+
+
+## Mermaid with HTML
+Examples are provided in [Gettting Started](n00b-gettingStarted.md)
+
+**CodePen Examples:**
+
+https://codepen.io/CarlBoneri/pen/BQwZzq
+
+https://codepen.io/tdkn/pen/vZxQzd
+
+https://codepen.io/janzeteachesit/pen/OWWZKN
+
+
+## Mermaid with Text Area
+
+https://codepen.io/Ryuno-Ki/pen/LNxwgR

docs/_config.yml

@@ -1,37 +0,0 @@
-title: mermaid
-lang: en
-description: Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.
-
-remote_theme: rundocs/jekyll-rtd-theme
-
-mermaid:
-  custom: https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js
-
-copyright:
-  since: 2014
-  revision: true
-
-edit: true
-addons_branch: true
-
-google:
-  gtag: UA-153180559-1
-
-sass:
-  style: compressed
-
-addons:
-  - github
-  - i18n
-  - analytics
-
-plugins:
-  - jemoji
-
-readme_index:
-  with_frontmatter: true
-
-exclude:
-  - Makefile
-  - Gemfile
-  - Gemfile.lock

docs/_sidebar.md

@@ -0,0 +1,38 @@
+- Introduction 📊
+
+  - [About mermaid](Readme.md)
+  - [Simple start to write diagrams](n00b-gettingStarted.md)
+  - [Overview for Beginners](n00b-overview.md)
+
+- Diagram Syntax 📊
+
+  - [Flowchart](flowchart.md)
+  - [Sequence diagram](sequenceDiagram.md)
+  - [Class Diagram](classDiagram.md)
+  - [State Diagram](stateDiagram.md)
+  - [Entity Relationship Diagram](entityRelationshipDiagram.md)
+  - [User Journey](user-journey.md)
+  - [Gantt](gantt.md)
+  - [Pie Chart](pie.md)
+  - [Other Examples](examples.md)
+
+- Adding mermaid✒️
+
+  - [Diagram syntax intro](n00b-syntaxReference.md)
+  - [Tutorials](Tutorials.md)
+  - [API-Usage](usage.md)
+  - [Directives](directives.md)
+  - [Theming](theming.md)
+  - [mermaid CLI](mermaidCLI.md)
+  - [Advanced usage](n00b-advanced.md)
+
+- Misc 📚
+  - [Use-Cases and Integrations](integrations.md)
+  - [FAQ](faq.md)
+
+- Contributions and Community 🙌
+
+  - [Development and Contribution ](development.md)
+  - [Configuration handling in Mermaid API](Setup.md)
+  - [Changelog](CHANGELOG.md)
+  - [Adding Diagrams ](newDiagram.md)

docs/assets/_sidebar.md

@@ -1,37 +0,0 @@
-- Overview
-  - [mermaid](README.md)
-  <!-- - [overview](n00b-overview.md) -->
-  <!-- - [Use-Cases and Integrations](integrations.md) -->
-  <!-- - [FAQ](faq.md) -->
-
-- Getting Started
-
-  <!-- - [Getting started - easier](n00b-gettingStarted.md) -->
-  <!-- - [Tutorials](Tutorials.md) -->
-  <!-- - [API-Usage](usage.md) -->
-  <!-- - [Configurations](Setup.md) -->
-  <!-- - [Directives](8.6.0_docs.md) -->
-  <!-- - [Theming](theming.md) -->
-  <!-- - [mermaid CLI](mermaidCLI.md) -->
-  <!-- - [Advanced usage](n00b-advanced.md) -->
-
-
-- Contributions and Community
-
-  <!-- - [Development and Contribution](development.md)-->
-  <!-- - [Adding Diagrams](newDiagram.md)-->
-  <!-- - [Changelog](CHANGELOG.md) -->
-  
-
-- Diagrams and Syntax and Examples
-
-  <!-- - [Diagram syntax intro](n00b-syntaxReference.md) -->
-  <!-- - [Examples](examples.md)
-  - [Flowchart](flowchart.md) -->
-  <!-- - [Sequence diagram](sequenceDiagram.md)
-  - [Class Diagram](classDiagram.md)
-  - [State Diagram](stateDiagram.md)
-  - [Entity Relationship Diagram](entityRelationshipDiagram.md)
-  - [User Journey](user-journey.md)
-  - [Gantt](gantt.md)
-  - [Pie Chart](pie.md)

docs/classDiagram.md

@@ -1,9 +1,7 @@
----
-sort: 5
----
-
 # Class diagrams
 
+**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/classDiagram.md)
+
 > "In software engineering, a class diagram in the Unified Modeling Language (UML) is a type of static structure diagram that describes the structure of a system by showing the system's classes, their attributes, operations (or methods), and the relationships among objects."
 > Wikipedia
 
@@ -231,7 +229,7 @@ To specify the visibility of a class member (i.e. any attribute or method), thes
 - `#` Protected
 - `~` Package/Internal
 
-> _note_ you can also include additional _classifers_ to a method definition by adding the following notations to the end of the method, i.e.: after the `()`:
+> _note_ you can also include additional _classifiers_ to a method definition by adding the following notations to the end of the method, i.e.: after the `()`:
 
 > - `*` Abstract e.g.: `someAbstractMethod()*`
 > - `$` Static e.g.: `someStaticMethod()$`
@@ -349,7 +347,7 @@ The different cardinality options are :
 - `0..n` zero to n {where n>1}
 - `1..n` one to n {where n>1}
 
-Cardinality can be easily defined by placing cardinality text within qoutes `"` before(optional) and after(optional) a given arrow.
+Cardinality can be easily defined by placing cardinality text within quotes `"` before(optional) and after(optional) a given arrow.
 
 ```
 [classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText
@@ -606,7 +604,7 @@ The main styling of the class diagram is done with a preset number of css classe
 | g.classGroup line  | Styles for class diagram line                                     |
 | .classLabel .box   | Styles for class label box                                        |
 | .classLabel .label | Styles for class label text                                       |
-| composition        | Styles for componsition arrow head and arrow line                 |
+| composition        | Styles for composition arrow head and arrow line                  |
 | aggregation        | Styles for aggregation arrow head and arrow line(dashed or solid) |
 | dependency         | Styles for dependency arrow head and arrow line                   |
 

docs/development.md

@@ -1,10 +1,7 @@
----
-sort: 1
-title: Development and Contribution
----
-
 # Development 🙌
 
+**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/development.md)
+
 
 So you want to help? That's great!
 
@@ -12,9 +9,9 @@ So you want to help? That's great!
 
 Here are a few things to know to get you started on the right path.
 
-**All the documents displayed in the github.io page are listed in [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/docs/assets/_sidebar.md)**
+**All the documents displayed in the github.io page are listed in [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**
  
-**Note:You will have to edit the document to see its contents. Commits and PR's should be directed to the develop branch.**
+**Note: You will have to edit the document to see its contents. Commits and PR's should be directed to the develop branch.**
 
 ## Branching
 
@@ -51,9 +48,9 @@ If it is not in the documentation, it's like it never happened. Wouldn't that be
 
 The docs are located in the `docs` folder and are written in MarkDown. Just pick the right section and start typing. If you want to propose changes to the structure of the documentation: 
 
-**All the documents displayed in the github.io page are listed in [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/docs/assets/_sidebar.md). Click edit it to see them. 
+**All the documents displayed in the github.io page are listed in [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md). Click edit it to see them.**
 
-The contents of http://mermaid-js.github.io/mermaid/ are based on the docs from **Master** Branch. 
+The contents of [https://mermaid-js.github.io/mermaid/](https://mermaid-js.github.io/mermaid/) are based on the docs from **Master** Branch. 
 
 ## How to Contribute to Docs
 
@@ -121,7 +118,7 @@ Finally, if it is not in the documentation, no one will know about it and then *
 
 The docs are located in the docs folder and are ofc written in markdown. Just pick the right section and start typing. If you want to add to the structure as in adding a new section and new file you do that via the _navbar.md.
 
-The changes in master is reflected in http://mermaid-js.github.io/mermaid/ once released the updates are commited to https://mermaid-js.github.io/#/
+The changes in master is reflected in [https://mermaid-js.github.io/mermaid/](https://mermaid-js.github.io/mermaid/) once released the updates are commited to [https://mermaid-js.github.io/#/](https://mermaid-js.github.io/mermaid/#/).
 
 ### Questions and/or suggestions ?
 After logging in at [GitHub.com](https://www.github.com), open or append to an issue [using the GitHub issue tracker of the mermaid-js repository](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Area%3A+Documentation%22).

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

@@ -1,6 +0,0 @@
----
-sort: 4
----
-
-# Diagrams and Syntax and Examples
-{% include list.liquid %}

docs/directives.md

@@ -1,13 +1,9 @@
----
-sort: 10
----
+# Directives
+
+**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/directives.md)
 
 ## Directives
-
-## Directives were added in [Version 8.6.0](../getting-started/8.6.0_docs.md). Please Read it for more information.
-
-## Directives
-With this version, directives are supported. Directives are divided in two sets, by priority. the first set, containing 'init' or 'initialize' directives take priority. While the other set, containing all other kinds of directives are considered only after 'init' and the graph-type declared.
+Directives gives a diagram author the possibility to update the diagram configuration from the diagram text. Directives are divided in two sets by priority. The first set, containing 'init' or 'initialize' directives take priority. While the other set, containing all other kinds of directives are considered only after 'init' and the graph-type declared.
 
 #### Init
 

docs/entityRelationshipDiagram.md

@@ -1,12 +1,9 @@
----
-sort: 7
----
-
 # Entity Relationship Diagrams
 
+**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/entityRelationshipDiagram.md)
 > An entity–relationship model (or ER model) describes interrelated things of interest in a specific domain of knowledge. A basic ER model is composed of entity types (which classify the things of interest) and specifies relationships that can exist between entities (instances of those entity types). Wikipedia.
 
-Note that practitioners of ER modelling almost always refer to *entity types* simply as *entities*.  For example the CUSTOMER entity type would be referred to simply as the CUSTOMER entity.  This is so common it would be inadvisable to do anything else, but technically an entity is an abstract *instance* of an entity type, and this is what an ER diagram shows - abstract instances, and the relationships between them.  This is why entities are always named using singular nouns.
+Note that practitioners of ER modelling almost always refer to *entity types* simply as *entities*.  For example the `CUSTOMER` entity *type* would be referred to simply as the `CUSTOMER` entity.  This is so common it would be inadvisable to do anything else, but technically an entity is an abstract *instance* of an entity type, and this is what an ER diagram shows - abstract instances, and the relationships between them.  This is why entities are always named using singular nouns.
 
 Mermaid can render ER diagrams
 
@@ -30,23 +27,23 @@ Relationships between entities are represented by lines with end markers represe
 
 ## Status
 
-ER diagrams are a new feature in Mermaid and are **experimental**.  There are likely to be a few bugs and constraints, and enhancements will be made in due course.  Currently you can only define entities and relationships, but not attributes.
+ER diagrams are a relatively new feature in Mermaid, so there are likely to be a few bugs and constraints, and enhancements will be made in due course.  Currently you can only define entities and relationships, but not attributes.  Inclusion of attributes is now actively being worked on.
 
 ## Syntax
 
 ### Entities and Relationships
 
-Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to label the relationship.  Each statement consists of the following parts, all of which are mandatory:
+Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to label the relationship.  Each statement consists of the following parts:
 
 ```markdown
-    <first-entity> <relationship> <second-entity> : <relationship-label>
+    <first-entity> [<relationship> <second-entity> : <relationship-label>]
 ```
 
 Where:
 
-- `first-entity` is the name of an entity.  Names must begin with an alphabetic character and may also contain digits and hyphens
+- `first-entity` is the name of an entity.  Names must begin with an alphabetic character and may also contain digits, hyphens, and underscores.
 - `relationship` describes the way that both entities inter-relate.  See below.
-- `second-entity` is the name of the other entity
+- `second-entity` is the name of the other entity.
 - `relationship-label` describes the relationship from the perspective of the first entity.
 
 For example:
@@ -57,6 +54,8 @@ For example:
 
 This statement can be read as *a property contains one or more rooms, and a room is part of one and only one property*. You can see that the label here is from the first entity's perspective: a property contains a room, but a room does not contain a property.  When considered from the perspective of the second entity, the equivalent label is usually very easy to infer. (Some ER diagrams label relationships from both perspectives, but this is not supported here, and is usually superfluous).
 
+Only the `first-entity` part of a statement is mandatory.  This makes it possible to show an entity with no relationships, which can be useful during iterative construction of diagrams.  If any other parts of a statement are specified, then all parts are mandatory.
+
 ### Relationship Syntax
 
 The `relationship` part of each statement can be broken down into three sub-components:
@@ -69,10 +68,10 @@ Cardinality is a property that describes how many elements of another entity can
 
 | Value (left) | Value (right) | Meaning                                                |
 |:------------:|:-------------:|--------------------------------------------------------|
-|     `\|o`    |       `o\|`   | Zero or one                                            |
-|     `\|\|`   |       `\|\|`  | Exactly one                                            |
-|     `}o`     |       `o{`    | Zero or more (no upper limit)                          |
-|     `}\|`    |       `\|{`   | One or more (no upper limit)                           |
+|     `|o`     |      `o|`     | Zero or one                                            |
+|     `||`     |      `||`     | Exactly one                                            |
+|     `}o`     |      `o{`     | Zero or more (no upper limit)                          |
+|     `}|`     |      `|{`     | One or more (no upper limit)                           |
 
 ### Identification
 

docs/examples.md

@@ -1,14 +1,12 @@
----
-sort: 2
----
-
 # Examples
 
+**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/examples.md)
+
 This page contains a collection of examples of diagrams and charts that can be created through mermaid and its myriad applications.
 
-## If you wish to learn how to support mermaid on your webpage, read the [Beginner's Guide](../getting-started/n00b-gettingStarted.md).
+**If you wish to learn how to support mermaid on your webpage, read the [Beginner's Guide](/usage?id=usage).**
 
-## If you wish to learn about mermaid's syntax, Read the [Diagram Syntax](n00b-syntaxReference.md) section.
+**If you wish to learn about mermaid's syntax, Read the [Diagram Syntax](/flowchart?id=flowcharts-basic-syntax) section.**
 
 ## Basic Pie Chart
 
@@ -127,7 +125,7 @@ graph TB
 ```
 
 
-## Loops, alt and opt
+## SequenceDiagram: Loops, alt and opt
 
 ```
 sequenceDiagram
@@ -161,7 +159,7 @@ sequenceDiagram
 ```
 
 
-## Message to self in loop
+## SequenceDiagram: Message to self in loop
 
 ```
 sequenceDiagram

docs/faq.md

@@ -1,10 +1,7 @@
----
-sort: 3
-title: FAQ
----
-
 # Frequently Asked Questions
 
+**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/faq.md)
+
 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)

docs/flowchart.md

@@ -0,0 +1,860 @@
+# Flowcharts - Basic Syntax
+
+
+**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/flowchart.md)
+
+## Graph
+
+This statement declares the direction of the Flowchart.
+
+This declares the graph is oriented from top to bottom (`TD` or `TB`).
+
+```
+graph TD
+    Start --> Stop
+```
+```mermaid
+graph TD
+    Start --> Stop
+```
+
+This declares the graph is oriented from left to right (`LR`).
+
+```
+graph LR
+    Start --> Stop
+```
+```mermaid
+graph LR
+    Start --> Stop
+```
+
+## Flowchart Orientation
+
+Possible FlowChart orientations are:
+
+* TB - top to bottom
+* TD - top-down/ same as top to bottom
+* BT - bottom to top
+* RL - right to left
+* LR - left to right
+
+
+
+## Flowcharts
+
+This renders a flowchart that allows for features such as: more arrow types, multi directional arrows, and linking to and from subgraphs.
+
+Apart from the graph type, the syntax is the same. This is currently experimental but when the beta period is over, both the graph and flowchart keywords will render in the new way. This means it is ok to start beta testing flowcharts.
+
+> **Important note** Do not type the word "end" as a Flowchart node. Capitalize all or any one the letters to keep the flowchart from breaking, i.e, "End" or "END". Or you can apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897).**
+
+## Nodes & shapes
+
+### A node (default)
+
+```
+graph LR
+    id
+```
+
+```mermaid
+graph LR
+    id
+```
+
+> **Note** 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.
+
+```
+graph LR
+    id1[This is the text in the box]
+```
+```mermaid
+graph LR
+    id1[This is the text in the box]
+```
+
+## Node Shapes
+
+### A node with round edges
+
+```
+graph LR
+    id1(This is the text in the box)
+```
+```mermaid
+graph LR
+    id1(This is the text in the box)
+```
+
+### A stadium-shaped node
+
+```
+graph LR
+    id1([This is the text in the box])
+```
+```mermaid
+graph LR
+    id1([This is the text in the box])
+```
+
+### A node in a subroutine shape
+
+```
+graph LR
+    id1[[This is the text in the box]]
+```
+```mermaid
+graph LR
+    id1[[This is the text in the box]]
+```
+
+### A node in a cylindrical shape
+
+```
+graph LR
+    id1[(Database)]
+```
+```mermaid
+graph LR
+    id1[(Database)]
+```
+
+### A node in the form of a circle
+
+```
+graph LR
+    id1((This is the text in the circle))
+```
+```mermaid
+graph LR
+    id1((This is the text in the circle))
+```
+
+### A node in an asymmetric shape
+
+```
+graph LR
+    id1>This is the text in the box]
+```
+```mermaid
+graph LR
+    id1>This is the text in the box]
+```
+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}
+```
+
+### A hexagon node
+```
+graph LR
+    id1{{This is the text in the box}}
+```
+
+```mermaid
+graph LR
+    id1{{This is the text in the box}}
+```
+
+### Parallelogram
+
+```
+graph TD
+    id1[/This is the text in the box/]
+```
+```mermaid
+graph TD
+    id1[/This is the text in the box/]
+```
+
+### Parallelogram alt
+
+```
+graph TD
+    id1[\This is the text in the box\]
+```
+```mermaid
+graph TD
+    id1[\This is the text in the box\]
+```
+
+### Trapezoid
+
+```
+graph TD
+    A[/Christmas\]
+```
+```mermaid
+graph TD
+    A[/Christmas\]
+```
+### Trapezoid alt
+
+```
+graph TD
+    B[\Go shopping/]
+```
+```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
+```
+```mermaid
+graph LR
+    A-->B
+```
+
+### An open link
+
+```
+graph LR
+    A --- B
+```
+```mermaid
+graph LR
+    A --- B
+```
+
+### Text on links
+
+```
+graph LR
+    A-- This is the text! ---B
+```
+```mermaid
+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
+
+```
+graph LR
+    A-->|text|B
+```
+```mermaid
+graph LR
+    A-->|text|B
+```
+
+or
+
+```
+graph LR
+    A-- text -->B
+```
+```mermaid
+graph LR
+    A-- text -->B
+```
+
+### Dotted link
+
+```
+graph LR;
+   A-.->B;
+```
+```mermaid
+graph LR;
+   A-.->B;
+```
+
+### Dotted link with text
+
+```
+graph LR
+   A-. text .-> B
+```
+```mermaid
+graph LR
+   A-. text .-> B
+```
+
+### Thick link
+
+```
+graph LR
+   A ==> B
+```
+```mermaid
+graph LR
+   A ==> B
+```
+
+### Thick link with text
+
+```
+graph LR
+   A == text ==> B
+```
+```mermaid
+graph LR
+   A == text ==> B
+```
+
+### Chaining of links
+
+It is possible declare many links in the same line as per below:
+```
+graph LR
+   A -- text --> B -- text2 --> C
+```
+```mermaid
+graph LR
+   A -- text --> B -- text2 --> C
+```
+
+It is also possible to declare multiple nodes links in the same line as per below:
+```
+graph LR
+   a --> b & c--> d
+```
+```mermaid
+graph LR
+   a --> b & c--> d
+```
+
+You can then describe dependencies in a very expressive way. Like the oneliner below:
+```
+graph TB
+    A & B--> C & D
+```
+```mermaid
+graph TB
+    A & B--> C & D
+```
+If you describe the same diagram using the the basic syntax, it will take four lines. A
+word of warning, one could go overboard with this making the graph harder to read in
+markdown form. The Swedish word `lagom` comes to mind. It means, not to much and not to little.
+This goes for expressive syntaxes as well.
+```
+graph TB
+    A --> C
+    A --> D
+    B --> C
+    B --> D
+```
+
+### Beta: New arrow types
+
+When using flowchart instead of graph there is the are new types of arrows supported as per below:
+
+```
+flowchart LR
+    A --o B
+    B --x C
+```
+
+```mermaid
+flowchart LR
+    A --o B
+    B --x C
+```
+
+
+### Beta: Multi directional arrows
+
+When using flowchart instead of graph there is the possibility to use multidirectional arrows.
+
+```
+flowchart LR
+    A o--o B
+    B <--> C
+    C x--x D
+```
+
+```mermaid
+flowchart LR
+    A o--o B
+    B <--> C
+    C x--x D
+```
+
+### Minimum length of a link
+
+Each node in the flowchart is ultimately assigned to a rank in the rendered
+graph, i.e. to a vertical or horizontal level (depending on the flowchart
+orientation), based on the nodes to which it is linked. By default, links
+can span any number of ranks, but you can ask for any link to be longer
+than the others by adding extra dashes in the link definition.
+
+In the following example, two extra dashes are added in the link from node _B_
+to node _E_, so that it spans two more ranks than regular links:
+
+```
+graph TD
+    A[Start] --> B{Is it?};
+    B -->|Yes| C[OK];
+    C --> D[Rethink];
+    D --> B;
+    B ---->|No| E[End];
+```
+
+```mermaid
+graph TD
+    A[Start] --> B{Is it?};
+    B -->|Yes| C[OK];
+    C --> D[Rethink];
+    D --> B;
+    B ---->|No| E[End];
+```
+
+> **Note** Links may still be made longer than the requested number of ranks
+> by the rendering engine to accommodate other requests.
+
+When the link label is written in the middle of the link, the extra dashes must
+be added on the right side of the link. The following example is equivalent to
+the previous one:
+
+```
+graph TD
+    A[Start] --> B{Is it?};
+    B -- Yes --> C[OK];
+    C --> D[Rethink];
+    D --> B;
+    B -- No ----> E[End];
+```
+
+```mermaid
+graph TD
+    A[Start] --> B{Is it?};
+    B -->|Yes| C[OK];
+    C --> D[Rethink];
+    D --> B;
+    B ---->|No| E[End];
+```
+
+For dotted or thick links, the characters to add are equals signs or dots,
+as summed up in the following table:
+
+| Length            |    1   |    2    |     3    |
+|-------------------|:------:|:-------:|:--------:|
+| Normal            |  `---` |  `----` |  `-----` |
+| Normal with arrow |  `-->` |  `--->` |  `---->` |
+| Thick             |  `===` |  `====` |  `=====` |
+| Thick with arrow  |  `==>` |  `===>` |  `====>` |
+| Dotted            | `-.-`  | `-..-`  | `-...-`  |
+| Dotted with arrow | `-.->` | `-..->` | `-...->` |
+
+## Special characters that break syntax
+
+It is possible to put text within quotes in order to render more troublesome characters. As in the example below:
+
+```
+graph LR
+    id1["This is the (text) in the box"]
+```
+```mermaid
+graph LR
+    id1["This is the (text) in the box"]
+```
+
+### Entity codes to escape characters
+
+It is possible to escape characters using the syntax exemplified here.
+
+```
+    graph LR
+        A["A double quote:#quot;"] -->B["A dec char:#9829;"]
+```
+```mermaid
+    graph LR
+        A["A double quote:#quot;"] -->B["A dec char:#9829;"]
+```
+
+## Subgraphs
+
+```
+subgraph title
+    graph definition
+end
+```
+
+An example below:
+
+```
+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
+    a1-->a2
+    end
+    subgraph two
+    b1-->b2
+    end
+    subgraph three
+    c1-->c2
+    end
+ ```
+
+ You can also set an explicit id for the subgraph.
+
+```
+graph TB
+    c1-->a2
+    subgraph ide1 [one]
+    a1-->a2
+    end
+ ```
+```mermaid
+graph TB
+    c1-->a2
+    subgraph id1 [one]
+    a1-->a2
+    end
+ ```
+
+## Beta: flowcharts
+
+With the graphtype flowcharts it is also possible to set edges to and from subgraphs as in the graph below.
+
+```
+flowchart TB
+    c1-->a2
+    subgraph one
+    a1-->a2
+    end
+    subgraph two
+    b1-->b2
+    end
+    subgraph three
+    c1-->c2
+    end
+    one --> two
+    three --> two
+    two --> c2
+ ```
+
+```mermaid
+flowchart TB
+    c1-->a2
+    subgraph one
+    a1-->a2
+    end
+    subgraph two
+    b1-->b2
+    end
+    subgraph three
+    c1-->c2
+    end
+    one --> two
+    three --> two
+    two --> c2
+ ```
+
+## Interaction
+
+It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
+
+```
+click nodeId callback
+```
+
+* nodeId is the id of the node
+* callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the nodeId as parameter.
+
+Examples of tooltip usage below:
+
+```html
+<script>
+  var callback = function(){
+      alert('A callback was triggered');
+  }
+</script>
+```
+
+```
+graph LR;
+    A-->B;
+    click A callback "Tooltip for a callback"
+    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
+graph LR
+    A-->B;
+    click A callback "Tooltip"
+    click B "http://www.github.com" "This is a link"
+```
+> **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.
+
+?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/s37cjoau/3/).
+
+Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported):
+```
+graph LR;
+    A-->B;
+    B-->C;
+    click A "http://www.github.com" _blank
+    click B "http://www.github.com" "Open this in a new tab" _blank
+```
+
+```mermaid
+graph LR;
+    A-->B;
+    B-->C;
+    click A "http://www.github.com" _blank
+    click B "http://www.github.com" "Open this in a new tab" _blank
+```
+
+Beginners tip, a full example using interactive links in a html context:
+```html
+<body>
+  <div class="mermaid">
+    graph LR;
+        A-->B;
+        click A callback "Tooltip"
+        click B "http://www.github.com" "This is a link"
+  </div>
+
+  <script>
+    var callback = function(){
+        alert('A callback was triggered');
+    }
+    var config = {
+        startOnLoad:true,
+        flowchart:{
+            useMaxWidth:true,
+            htmlLabels:true,
+            curve:'cardinal',
+        },
+        securityLevel:'loose',
+    };
+
+    mermaid.initialize(config);
+  </script>
+</body>
+```
+
+### Comments
+
+Comments can be entered within a flow diagram, which will be ignored by the parser.  Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any flow syntax
+
+```
+graph LR
+%% this is a comment A -- text --> B{node}
+   A -- text --> B -- text2 --> C
+```
+
+## 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
+defined in the linkStyle statement will belong to the fourth link in the graph:
+
+```
+linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
+```
+
+
+### Styling a node
+
+It is possible to apply specific styles such as a thicker border or a different background color to a node.
+
+```
+graph LR
+    id1(Start)-->id2(Stop)
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+```
+```mermaid
+graph LR
+    id1(Start)-->id2(Stop)
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,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.
+
+a class definition looks like the example below:
+
+
+```
+    classDef className fill:#f9f,stroke:#333,stroke-width:4px;
+```
+
+Attachment of a class to a node is done as per below:
+
+```
+    class nodeId1 className;
+```
+
+It is also possible to attach a class to a list of nodes in one statement:
+
+```
+    class nodeId1,nodeId2 className;
+```
+
+A shorter form of adding a class is to attach the classname to the node using the `:::`operator as per below:
+
+```
+graph LR
+    A:::someclass --> B
+    classDef someclass fill:#f96;
+```
+```mermaid
+graph LR
+    A:::someclass --> B
+    classDef someclass fill:#f96;
+```
+
+
+### Css classes
+
+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;
+        stroke:#FFFF00;
+        stroke-width:4px;
+    }
+</style>
+```
+
+**Example definition**
+
+```
+graph LR;
+    A-->B[AAA<span>BBB</span>];
+    B-->D;
+    class A cssClass;
+```
+```mermaid
+graph LR;
+    A-->B[AAA<span>BBB</span>];
+    B-->D;
+    class A cssClass;
+```
+
+
+### Default class
+
+If a class is named default it will be assigned to all classes without specific class definitions.
+
+```
+    classDef default fill:#f9f,stroke:#333,stroke-width:4px;
+```
+
+
+## Basic support for fontawesome
+
+It is possible to add icons from fontawesome.
+
+The icons are accessed via the syntax fa:#icon class name#.
+
+```
+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?);
+```
+```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?);
+```
+
+
+## Graph declarations with spaces between vertices and link and without semicolon
+
+* 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.
+
+* 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.
+
+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)
+    B --> C{Decision}
+    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,18 +1,17 @@
----
-sort: 9
-title: Gantt
----
-
 # Gantt diagrams
 
+**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/gantt.md)
+
 > A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrates a project schedule and the amount of time it would take for any one project to finish. Gantt charts illustrate number of days between the start and finish dates of the terminal elements and summary elements of a project.
 
  ## A note to users
  Gantt Charts will record each scheduled task as one continuous bar that extends from the left to the right. The x axis represents time and the y records the different tasks and the order in which they are to be completed.   
 
+
  It is important to remember that when a date, day, or collection of dates specific to a task are "excluded", the Gantt Chart will accomodate those changes by extending an equal number of day, towards the right, not by creating a gap inside the task.
  As shown here ![](https://raw.githubusercontent.com/NeilCuzon/mermaid/develop/docs/img/Gantt-excluded-days-within.png)
 
+
  However, if the excluded dates are between two tasks that are set to start consecutively, the excluded dates will be skipped graphically and left blank, and the following task will begin after the end of the excluded dates.   
  As shown here ![](https://raw.githubusercontent.com/NeilCuzon/mermaid/develop/docs/img/Gantt-long-weekend-look.png)
 
@@ -107,7 +106,7 @@ gantt
     Add another diagram to demo page    :48h
 ```
 
-It is possible to set multiple depenendenies separated by space:
+It is possible to set multiple dependencies separated by space:
 ```
     gantt
         apple :a, 2017-07-20, 1w
@@ -339,7 +338,7 @@ mermaid.ganttConfig = {
 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
+bottomMarginAdj|Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists.|1
 
 ## Interaction
 

docs/getting-started/README.md

@@ -1,6 +0,0 @@
----
-sort: 2
----
-
-# Getting Started
-{% include list.liquid %}

docs/getting-started/Tutorials.md

@@ -1,37 +0,0 @@
-# Tutorials
-
-This is  list of publicly available Tutorials in Mermaid. This is intended as a basic introduction for the use of the Live Editor and HTML with mermaid.  
-
-For the purposes, the Live-Editor is capable of taking care of all diagramming needs, and these are the most common use cases for it.
-
-
-## Live-Editor Tutorials
-The definitions that can be generated the Live-Editor are also backwards-compatible as of version 8.7.0.
-
-https://www.youtube.com/watch?v=SQ9QmuTHuSI&t=438s
-
-https://www.youtube.com/watch?v=5RQqht3NNSE
-
-https://www.youtube.com/watch?v=7_2IroEs6Is&t=207s
-
-https://www.youtube.com/watch?v=9HZzKkAqrX8
-
-https://www.youtube.com/watch?v=7_2IroEs6Is&t=207s
-
-https://www.youtube.com/watch?v=9HZzKkAqrX8
-
-## Mermaid with HTML:
-Examples are provided in [Gettting Started](n00b-gettingStarted.md)
-
-**CodePen Examples:**
-
-https://codepen.io/CarlBoneri/pen/BQwZzq
-
-https://codepen.io/tdkn/pen/vZxQzd
-
-https://codepen.io/janzeteachesit/pen/OWWZKN
-
-
-## Mermaid with Text Area:
-
-https://codepen.io/Ryuno-Ki/pen/LNxwgR

docs/index.html

@@ -7,7 +7,7 @@
   <meta name="description" content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.">
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
-  <link rel="stylesheet" href="theme.css">  <script src="//cdn.jsdelivr.net/npm/mermaid@8.7.0/dist/mermaid.min.js"></script>
+  <link rel="stylesheet" href="theme.css">  <script src="//cdn.jsdelivr.net/npm/mermaid@8.8.2/dist/mermaid.min.js"></script>
   <!-- <script src="http://localhost:9000/mermaid.js"></script> -->
   <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
@@ -75,3 +75,5 @@
 </body>
 </html>
 <!--  -->
+
+</html>

docs/integrations.md

@@ -1,13 +1,10 @@
----
-sort: 2
-title: Use-Cases and Integrations
----
-
 # Integrations
 
+**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/integrations.md)
+
 The following list is a compilation of different integrations and plugins that allow the rendering of mermaid definitions
 
-They also serve as proof of concept, for the variety of things that cen be built with mermaid.
+They also serve as proof of concept, for the variety of things that can be built with mermaid.
 
 
 ## Productivity

docs/mermaidCLI.md

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

docs/n00b-advanced.md

@@ -1,8 +1,3 @@
----
-sort: 7
-title: Advanced usage
----
-
 # Advanced n00b mermaid (Coming soon..)
 
 ## splitting mermaid code from html

docs/n00b-gettingStarted.md

@@ -1,10 +1,7 @@
----
-sort: 1
-title: Getting started - easier
----
-
 # A basic mermaid User-Guide for Beginners
 
+**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/n00b-gettingStarted.md)
+
 Creating diagrams and charts using mermaid code is simple.
 The code is turned into a diagram in the web page with the use of a mermaid renderer.
 
@@ -31,15 +28,15 @@ In the `Code` section one can write or edit raw mermaid code, and instantly `Pre
 
 **This is a great way to learn how to define a mermaid diagram.**
 
-For some popular video tutorials on the live editor go to [Overview](../overview/n00b-overview.md).
+For some popular video tutorials on the live editor go to [Overview](/overview/n00b-overview.md).
 
-![Flowchart](../assets/img/n00b-liveEditor.png)
+![Flowchart](/img/n00b-liveEditor.png)
 
 **Notes:**
 
 You can also click "Copy Markdown" to copy the markdown code for the diagram, that can then be pasted directly into your documentation.
 
-![Flowchart](../assets/img/liveEditorOptions.png)
+![Flowchart](/img/liveEditorOptions.png)
 
 The `Mermaid configuration` is for controlling mermaid behaviour. An easy introduction to mermaid configuration is found in the [Advanced usage](n00b-advanced.md) section. A complete configuration reference cataloguing default values is found on the [mermaidAPI](Setup.md) page.
 
@@ -57,25 +54,25 @@ When the mermaid plugin is installed on a Confluence server, one can insert a me
 
 - In a Confluence page, Add Other macros.
 
-![Flowchart](../assets/img/n00b-Confluence1.png)
+![Flowchart](../img/n00b-Confluence1.png)
 
 ---
 
 - Search for mermaid.
 
-![Flowchart](../assets/img/n00b-Confluence2.png)
+![Flowchart](../img/n00b-Confluence2.png)
 
 ---
 
 - The mermaid object appears. Paste your mermaid code into it.
 
-![Flowchart](../assets/img/n00b-Confluence3.png)
+![Flowchart](../img/n00b-Confluence3.png)
 
 ---
 
 - Save the page and the diagram appears.
 
-![Flowchart](../assets/img/n00b-Confluence4.png)
+![Flowchart](../img/n00b-Confluence4.png)
 
 ---
 ## The following are two ways of hosting mermaid on a webpage.  
@@ -235,7 +232,7 @@ This method is similar to 3, if only a little more involved. The difference may
 
 
 **Three additional comments from Knut Sveidqvist, creator of mermaid:**
-- In early versions of mermaid, the `<script src>` tag was invoked in the `<head>` part of the web page. Nowdays we can place it directly in `<body>` as seen above. However, older parts of the documentation frequently reflects the previous way which still works.
+- In early versions of mermaid, the `<script src>` tag was invoked in the `<head>` part of the web page. Nowadays we can place it directly in `<body>` as seen above. However, older parts of the documentation frequently reflects the previous way which still works.
 
 - We initialize the mermaid rendering with `mermaid.initialize()` directly in the html code. In principle this could be done through placing `mermaid.initialize()` inside of `mermaid.min.js`. We would then eliminate the need for this explicit line in the html. However, there are use cases where we do want to separate the two steps. Sometimes we want full control over when we start looking for `<div>`tags inside the web page with `mermaid.initialize()`, for example when we think that all `<div>` tags may not have been loaded by the time `mermaid.min.js` runs.
 

docs/n00b-overview.md

@@ -1,33 +1,30 @@
----
-sort: 1
-title: Overview
----
-
 # Overview for Beginners
 
-## There is no explanation like a Good Diagram 	
 
-A picture is worth a thousand words, a good diagram would be worth more. There is no disputing that they are indeed very useful. Yet very few people use them, even fewer still do so, for documentation.
+**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/n00b-overview.md)
 
-mermaid aims to change that.
+## Explaining with a Diagram 	
 
-## Creating and Maintaining Diagrams should not be an expensive and frustrating process.
+A picture is worth a thousand words, a good diagram would be worth more. There is no disputing that they are indeed very useful. Yet very few people use them, even fewer still do so for documentation. Mainly because it takes too much time that could be used for more important functions.
+
+
+## Creating and Maintaining Diagrams
 
 Anyone who has used Visio, or (God Forbid) Excel to make a Gantt Chart, knows how hard it is to make, edit and maintain good visualizations.
 
-In an environment of constantly changing information , diagrams/charts become obsolete/inaccurate very fast. This hobbles the information transfer and productivity in teams.
+In an environment of constantly changing information , diagrams/charts are both very important and also become obsolete/inaccurate very fast. This catch-22 hobbles the information transfer and productivity in teams.
 
-# Doc Rot kills Diagrams
+# Doc Rot in Diagrams
 
-The fast setting Doc-Rot in diagrams makes it quite hard to rationalize taking hours in a desktop application, to produce a diagram that you would need to recreate again the following week in order to account for updates and changes in the app you are documenting. Yet that is often the reality for diagrams and charts and the people who make them.
+Doc-Rot is quite quick on diagrams makes, after a change is made,  it quite hard to rationalize taking hours in a desktop application, to produce a diagram that you would need to recreate again the following week in order to account for updates and changes in the app you are documenting. Yet that is often the reality for diagrams and charts and the people who make them.
 
 mermaid seeks to change that. mermaid is a javascript based tool that utilizes a markdown inspired syntax to generate documentation, which is actually quicker, less complicated and more convenient than most traditional diagramming software. This is a relatively straightforward solution to a major hurdle in software teams.  
 
-# :blue_book: Definition of Terms/ Dictionary
+# Definition of Terms/ Dictionary
 
 **Mermaid definitions**
 
->These are the instrunctions for how the diagram is to rendered, written in mermaid, which is based on Markdown. These can be found inside `<div>` tags, with the `class=mermaid`.
+>These are the instructions for how the diagram is to rendered, written in mermaid, which is based on Markdown. These can be found inside `<div>` tags, with the `class=mermaid`.
 
 ```html
  <div class="mermaid">
@@ -45,7 +42,7 @@ mermaid seeks to change that. mermaid is a javascript based tool that utilizes a
 
 **Nodes**
 
->These are the boxes that contain text or otherwise discrete pieces of each diagram, separated generally by arrows, except for Gantt Charts and User Journey Diagrams. They will be refered to often in the instructions. For Diagram Specific Syntax and Instructions, refer to
+>These are the boxes that contain text or otherwise discrete pieces of each diagram, separated generally by arrows, except for Gantt Charts and User Journey Diagrams. They will be referred to often in the instructions. For Diagram Specific Syntax and Instructions, refer to
 
 ## Advantages of Using Mermaid
 
@@ -63,13 +60,13 @@ mermaid solves this by cutting the time, effort and tooling that is required to
 Because, the text base for  diagrams allows for it to be updated easily, it can also be made part of production scripts (and other pieces of code). So less time needs be spent on documenting, as a separate task.
 
 
-## mermaid helps Documentation catch up with Development, in quickly changing projects.
+## Catching up with Development
 
-Being based on markdown, mermaid can be used, not only by accomplished front-end developers, but by most computer savvy people to render simple diagrams, at much faster speeds.
+Being based on markdown, mermaid can be used, not only by accomplished front-end developers, but by most computer savvy people to render diagrams, at much faster speeds.
 In fact one can pick up the syntax for it quite easily from the examples given and there are many tutorials in the internet.
 
-## mermaid is for everyone.
-Video [Tutorials](./Tutorials.md) are also available for the mermaid [live editor](https://mermaid-js.github.io/mermaid-live-editor/).
+## Mermaid is for everyone.
+Video [Tutorials](./getting-started/Tutorials.md) are also available for the mermaid [live editor](https://mermaid-js.github.io/mermaid-live-editor/).
 
 For information on how to use mermaid, click [here](https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted).
 Alternatively, you could also view the [integrations and uses](https://mermaid-js.github.io/mermaid/#/./integrations), to see how mermaid is used.

docs/n00b-syntaxReference.md

@@ -1,20 +1,18 @@
----
-sort: 1
-title: Diagram syntax intro
----
-
 ## Diagram syntax
 
-If you are new to mermaid, read the [Getting Started](../getting-started/n00b-gettingStarted.md) and [Overview](../overview/n00b-overview.md) sections, to learn the basics of mermaid.
+
+**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/n00b-syntaxReference.md)
+
+If you are new to mermaid, read the [Simple start to write diagrams](/n00b-gettingStarted.md) and [Overview for Beginners](/n00b-overview.md) sections, to learn the basics of mermaid.
 Video Tutorials can be found at the bottom of the Overview Section.
 
-This section is a list of diagram types supported by mermaid. Below is a list of links to aricles that explain the syntax of the diagrams or charts that can be called.
+This section is a list of diagram types supported by mermaid. Below is a list of links to articles that explain the syntax of the diagrams or charts that can be called.
 
 They also detail how diagrams can be defined, or described in the manner with which the diagram is to be rendered by the renderer.
 
-### The benefits of text based diagramming are its speed and modifiability. mermaid allows for easy maintenance and modification of diagrams. This means your diagrams will always be up to date and closely follow your code and improve your documentation.  
+**The benefits of text based diagramming are its speed and modifiability. mermaid allows for easy maintenance and modification of diagrams. This means your diagrams will always be up to date and closely follow your code and improve your documentation.**
 
-## mermaid tag:
+## mermaid tag
 These Diagram Definitions can be entered within a \<div class=mermaid> tag.
 like so :
 ```html
@@ -29,5 +27,3 @@ like so :
 These definitions can also be entered into the [mermaid live editor](https://mermaid-js.github.io/mermaid-live-editor), to render them immediately.
 This would then offer
 
-
-{% include list.liquid %}

docs/newDiagram.md

@@ -1,11 +1,8 @@
----
-sort: 2
-title: Adding a New Diagram/Chart 
----
-
 # Adding a New Diagram/Chart 📊
 
 
+**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/newDiagram.md)
+
 ### Step 1: Grammar & Parsing
 
 

docs/overview/README.md

@@ -1,7 +0,0 @@
----
-sort: 1
----
-
-# Overview
-
-{% include list.liquid %}

docs/pie.md

@@ -1,10 +1,7 @@
----
-sort: 10
-title: Pie Chart
----
-
 # Pie chart diagrams
 
+**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/pie.md)
+
 > A pie chart (or a circle chart) is a circular statistical graphic, which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice (and consequently its central angle and area), is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented. The earliest known pie chart is generally credited to William Playfair's Statistical Breviary of 1801
 -Wikipedia
 
@@ -30,7 +27,7 @@ Drawing a pie chart is really simple in mermaid.
 - Followed by `title` keyword and its value in string to give a title to the pie-chart. This is ***OPTIONAL***
 - Followed by dataSet
     - `label` for a section in the pie diagram within `" "` quotes.
-    - Followed by `:` semi-colon as separator
+    - Followed by `:` colon as separator
     - Followed by `positive numeric value` (supported upto two decimal places)
 
 [pie]

docs/sequenceDiagram.md

@@ -1,9 +1,6 @@
----
-sort: 4
----
-
 # Sequence diagrams
 
+**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/sequenceDiagram.md)
 > A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.
 
 Mermaid can render sequence diagrams.
@@ -508,11 +505,11 @@ mermaid.sequenceConfig = {
 };
 ```
 
-### Possible configuration params:
+### Possible configuration parameters:
 
-| Param             | Description                                                                                                                                | Default value                  |
+| Parameter         | Description                                                                                                                                | Default value                  |
 | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------ |
-| mirrorActors       | Turns on/off the rendering of actors below the diagram as well as above it                                                                 | false                          |
+| mirrorActors      | Turns on/off the rendering of actors below the diagram as well as above it                                                                 | false                          |
 | bottomMarginAdj   | Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists. | 1                              |
 | actorFontSize     | Sets the font size for the actor's description                                                                                             | 14                             |
 | actorFontFamily   | Sets the font family for the actor's description                                                                                           | "Open-Sans", "sans-serif"      |

docs/stateDiagram.md

@@ -1,9 +1,7 @@
----
-sort: 6
----
-
 # State diagrams
 
+**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/stateDiagram.md)
+
 > "A state diagram is a type of diagram used in computer science and related fields to describe the behavior of systems. State diagrams require that the system described is composed of a finite number of states; sometimes, this is indeed the case, while at other times this is a reasonable abstraction." Wikipedia
 
 Mermaid can render state diagrams. The syntax tries to be compliant with the syntax used in plantUml as this will make it easier for users to share diagrams between mermaid and plantUml.

docs/theming.md

@@ -1,9 +1,6 @@
----
-sort: 5
-title: Theming
----
+# Theme Configuration
 
-# Version 8.7.0: Theme Configuration
+**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/theming.md)
 
 With Version 8.7.0 Mermaid comes out with a system for dynamic and integrated configuration of the diagram themes. The objective of this is to increase the customizability of mermaid and the ease of Styling, with the customization of themes through the `%%init%%` directive and `initialize` calls.
 
@@ -108,7 +105,7 @@ Leaving it empty will set all variable values to default.
 
 Color definitions have certain interactions in mermaid, this is in order to ensure visibility for diagrams. mermaid will adjust some variables automatically, when colors are changed in order to compensate and maintain readability.
 
-**The Default Value Column** to the right of the Variable coloumn will denote the Variable paired/associated with the Variable on the left and the nature of this pairing or association. If it for instance says primaryColor it means that it gets primaryColor as default value. If it says "based on primaryColor" it means that it is calculated/ derived from primaryColor. This calculation can be primary color inversion, a change of hue, darkening or lightening by 10%, etc.
+**The Default Value Column** to the right of the Variable column will denote the Variable paired/associated with the Variable on the left and the nature of this pairing or association. If it for instance says primaryColor it means that it gets primaryColor as default value. If it says "based on primaryColor" it means that it is calculated/ derived from primaryColor. This calculation can be primary color inversion, a change of hue, darkening or lightening by 10%, etc.
 
 You can create your own themes, by changing any of the given variables below. If you are using a dark background, set dark mode to true to adjust the colors. It is possible to override the calculations using the variable names below, with `%%init%%` if you wish to style it differently.
 
@@ -129,14 +126,14 @@ Variables that are unique to some diagrams can be affected by changes in Theme V
 | secondaryColor       | based on primaryColor          | *    |                                                                                                                                  |
 | tertiaryColor        | based on primaryColor          | *    |                                                                                                                                  |
 | primaryBorderColor   | based on primaryColor          | *    | Color to be used as border in nodes using primaryColor                                                                           |
-| primaryTextColor     | based on darkMode #ddd/#333    | *    | Color to be used as text color in nodesusing primaryColor                                                                        |
+| primaryTextColor     | based on darkMode #ddd/#333    | *    | Color to be used as text color in nodes using primaryColor                                                                        |
 | secondaryBorderColor | based on secondaryColor        | *    | Color to be used as border in nodes using secondaryColor                                                                         |
-| secondaryTextColor   | based on secondaryColor        | *    | Color to be used as text color in nodesusing secondaryColor                                                                      |
+| secondaryTextColor   | based on secondaryColor        | *    | Color to be used as text color in nodes using secondaryColor                                                                      |
 | tertiaryBorderColor  | based on tertiaryColor         | *    | Color to be used as border in nodes using tertiaryColor                                                                          |
-| tertiaryTextColor    | based on tertiaryColor         | *    | Color to be used as text color in nodesusing tertiaryColor                                                                       |
+| tertiaryTextColor    | based on tertiaryColor         | *    | Color to be used as text color in nodes using tertiaryColor                                                                       |
 | noteBkgColor         | #fff5ad                        |      | Color used as background in notes                                                                                                |
-| noteTextColor        | #333                           |      | Text color in note rectangless.                                                                                                        |
-| noteBorderColor      | based on noteBkgColor          | *    | Border color in note rectangless.                                                                                                      |
+| noteTextColor        | #333                           |      | Text color in note rectangles.                                                                                                        |
+| noteBorderColor      | based on noteBkgColor          | *    | Border color in note rectangles.                                                                                                      |
 | lineColor            | based on background            | *    |                                                                                                                                  |
 | textColor            | based on primaryTextColor      | *    | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in gantt diagram |
 | mainBkg              | based on primaryColor          | *    | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram  etc                                 |
@@ -247,7 +244,7 @@ Variables that are unique to some diagrams can be affected by changes in Theme V
 **This got a bit too dark and bit too colorful. With some easy steps this can be fixed:
 
 * Make the primary color a little lighter
-* set the teriary color to a redish shade as well
+* set the tertiary color to a reddish shade as well
 * make the edge label background differ from the subgraph by setting the edgeLabelBackground
 
 
@@ -336,7 +333,23 @@ In the following examples, the directive `init` is used, with the `theme` being
 
 ### Flowchart (beta)
 ```
-mermaid
+%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
+        flowchart TD
+          A[Christmas] -->|Get money| B(Go shopping)
+          B --> C{Let me think}
+          B --> G[Another]
+          C ==>|One| D[Laptop]
+          C x--x|Two| E[iPhone]
+          C o--o|Three| F[fa:fa-car Car]
+          subgraph section
+            C
+            D
+            E
+            F
+            G
+          end
+```
+```mermaid
 %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
         flowchart TD
           A[Christmas] -->|Get money| B(Go shopping)
@@ -355,10 +368,26 @@ mermaid
 ```
 
 ### Sequence diagram
-
+```
+%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
+        sequenceDiagram
+          autonumber
+          par Action 1
+            Alice->>John: Hello John, how are you?
+          and Action 2
+            Alice->>Bob: Hello Bob, how are you?
+          end
+          Alice->>+John: Hello John, how are you?
+          Alice->>+John: John, can you hear me?
+          John-->>-Alice: Hi Alice, I can hear you!
+          Note right of John: John is perceptive
+          John-->>-Alice: I feel great!
+              loop Every minute
+                John-->Alice: Great!
+            end
+```
 ```mermaid
 %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-
         sequenceDiagram
           autonumber
           par Action 1
@@ -376,8 +405,32 @@ mermaid
             end
 ```
 
-### class diagram
+### Class diagram
+```
+%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
 
+classDiagram
+	Animal "1" <|-- Duck
+	Animal <|-- Fish
+	Animal <--o Zebra
+	Animal : +int age
+	Animal : +String gender
+	Animal: +isMammal()
+	Animal: +mate()
+	class Duck{
+		+String beakColor
+		+swim()
+		+quack()
+	}
+	class Fish{
+		-int sizeInFeet
+		-canEat()
+	}
+	class Zebra{
+		+bool is_wild
+		+run()
+	}
+```
 ```mermaid
 %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
 
@@ -468,7 +521,6 @@ gantt
 
 ### State diagram
 ```
-mermaid
 %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
       stateDiagram
         [*] --> Active

docs/tutorials-and-community/README.md

@@ -1,6 +0,0 @@
----
-sort: 3
----
-
-# Contributions and Community
-{% include list.liquid %}

docs/usage.md

@@ -1,10 +1,7 @@
----
-sort: 2
-title: API-Usage
----
-
 # Usage
 
+**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/usage.md)
+
 mermaid is a javascript tool that makes use of a markdown based syntax to render customizable diagrams and charts, for greater speed and ease.
 
 mermaid was made to help Documentation catch up with Development, in quickly changing projects.
@@ -17,14 +14,14 @@ Please note that you can switch versions through the dropdown box at the top rig
 
 ## Using mermaid
 
-For the majority of beginners, using the live editor or suppoting mermaid on a webpage would cover their uses for mermaid.
+For the majority of beginners, using the live editor or supporting mermaid on a webpage would cover their uses for mermaid.
 
 ## Installing and Hosting mermaid on a webpage
 
 ### Using the npm package
 
 ```
-1.You will need to insall node v10 or 12, which would have npm.
+1.You will need to install node v10 or 12, which would have npm.
 
 2. download yarn using npm.
 
@@ -121,9 +118,9 @@ Mermaid can load multiple diagrams, in the same page.
 This changes the default behaviour of mermaid so that after upgrade to 8.2, if the `securityLevel` is not configured, tags in flowcharts are encoded as tags and clicking is prohibited.
 ```
 
-**If you are taking resposibility for the diagram source security you can set the `securityLevel` to a value of your choosing . By doing this clicks and tags are allowed.**
+**If you are taking responsibility for the diagram source security you can set the `securityLevel` to a value of your choosing . By doing this clicks and tags are allowed.**
 
-## To chage `securityLevel` with `mermaidAPI.initialize`:
+## To change `securityLevel` with `mermaidAPI.initialize`:
 
 ```javascript
 mermaidAPI.initialize({
@@ -198,7 +195,7 @@ mermaid fully supports webpack. Here is a [working demo](https://github.com/merm
 
 ## API usage
 
-The main idea of the API is to be able to call a render function with the graph defintion as a string. The render function
+The main idea of the API is to be able to call a render function with the graph definition as a string. The render function
 will render the graph and call a callback with the resulting svg code. With this approach it is up to the site creator to
 fetch the graph definition from the site (perhaps from a textarea), render it and place the graph somewhere in the site.
 

docs/user-journey.md

@@ -1,9 +1,8 @@
----
-sort: 8
----
-
 # User Journey Diagram
 
+
+**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/user-journey.md)
+
 > User journeys describe at a high level of detail exactly what steps different users take to complete a specific task within a system, application or website. This technique shows the current (as-is) user workflow, and reveals areas of improvement for the to-be workflow. (Wikipedia)
 
 Mermaid can render user journey diagrams: