Update documents to compatible jekyll-rtd-theme

docs/README.md

@@ -1,7 +1,6 @@
 # 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)
 
-![banner](./img/header.png)
-**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/README.md)
+![banner](assets/img/header.png)
 
 :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"!!!**
 
@@ -42,7 +41,7 @@ graph TD;
     C-->D;
 ```
 
-![Flowchart](./img/flow.png)
+![Flowchart](assets/img/flow.png)
 
 ### [Sequence diagram](https://mermaid-js.github.io/mermaid/#/sequenceDiagram)
 
@@ -60,7 +59,7 @@ sequenceDiagram
     Bob-->>John: Jolly good!
 ```
 
-![Sequence diagram](./img/sequence.png)
+![Sequence diagram](assets/img/sequence.png)
 
 ### [Gantt diagram](https://mermaid-js.github.io/mermaid/#/gantt)
 
@@ -77,7 +76,7 @@ Future task               :         des3, after des2, 5d
 Future task2               :         des4, after des3, 5d
 ```
 
-![Gantt diagram](./img/gantt.png)
+![Gantt diagram](assets/img/gantt.png)
 
 ### [Class diagram - :exclamation: experimental](https://mermaid-js.github.io/mermaid/#/classDiagram)
 
@@ -98,7 +97,7 @@ Class01 : int gorilla
 Class08 <--> C2: Cool label
 ```
 
-![Class diagram](./img/class.png)
+![Class diagram](assets/img/class.png)
 
 ### Git graph - :exclamation: experimental
 
@@ -121,7 +120,7 @@ commit
 merge newbranch
 
 ```
-![Git graph](./img/git.png)
+![Git graph](assets/img/git.png)
 
 ### [Entity Relationship Diagram - :exclamation: experimental](https://mermaid-js.github.io/mermaid/#/entityRelationshipDiagram)
 
@@ -133,7 +132,7 @@ erDiagram
 
 ```
 
-![ER diagram](./img/simple-er.png)
+![ER diagram](assets/img/simple-er.png)
 
 ### [User Journey Diagram](https://mermaid-js.github.io/mermaid/#/user-journey)
 
@@ -148,7 +147,7 @@ journey
       Go downstairs: 5: Me
       Sit down: 5: Me
 ```
-![Journey diagram](./img/user-journey.png)
+![Journey diagram](assets/img/user-journey.png)
 
 # Installation
 ## In depth guides and examples can be found in [Getting Started](./n00b-gettingStarted.md) and [Usage](./usage.md).
@@ -165,12 +164,12 @@ To select a version:
 
 Replace `<version>` with the desired version number.
 
-Alternatively, you can also adjust the version number in the page itself. 
+Alternatively, you can also adjust the version number in the page itself.
 
-Latest Version: https://unpkg.com/browse/mermaid@8.6.0/
+Latest Version: [https://unpkg.com/browse/mermaid@8.6.0/](https://unpkg.com/browse/mermaid@8.6.0/)
 
-## Incorporating mermaid to a website 
-To support mermaid on your website, all you have to do is add Mermaid’s JavaScript package 
+## Incorporating mermaid to a website
+To support mermaid on your website, all you have to do is add Mermaid’s JavaScript package
 
 ```
 1.You will need to isntall node v10 or 12, which would have npm
@@ -180,13 +179,13 @@ To support mermaid on your website, all you have to do is add Mermaid’s JavaSc
 3. enter the following command:
     yarn add mermaid
 
-4. You can then add mermaid as a dev dependency using this command: 
+4. You can then add mermaid as a dev dependency using this command:
     yarn add --dev mermaid
-   
+
 ```
 
 ## 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>
 ```

docs/_config.yml

@@ -5,20 +5,26 @@ description: Markdownish syntax for generating flowcharts, sequence diagrams, cl
 # theme: jekyll-rtd-theme
 remote_theme: rundocs/jekyll-rtd-theme
 
-sass:
-  style: compressed
-
 copyright:
   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
 

docs/_sidebar.md

@@ -1,38 +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)
-
-  
-- Tutorials and Community
-
-  - [Development and Contribution](development.md)
-  - [Mermaid Versions](versionUpdates.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)
-  - [Directives](directives.md)

docs/assets/_sidebar.md

@@ -0,0 +1,38 @@
+- 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) -->
+
+
+- Tutorials and Community
+
+  <!-- - [Development and Contribution](development.md)
+  - [Mermaid Versions](versionUpdates.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)
+  - [Directives](directives.md) -->

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

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

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

@@ -1,6 +1,8 @@
-# Class diagrams
+---
+sort: 5
+---
 
-**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/classDiagram.md)
+# Class diagrams
 
 > "In software engineering, a class diagram in the Unified Modeling Language (UML) is a type of static structure diagram that describes the structure of a system by showing the system's classes, their attributes, operations (or methods), and the relationships among objects."
 > Wikipedia

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

@@ -1,17 +1,17 @@
+---
+sort: 10
+---
+
 ## Directives
 
-**Edit this Page** [![N|Solid](/img/GitHub-Mark-32px.png)](./directives.md)
-Directives were added in [Version 8.6.0](/8.6.0_docs.md)
-
-
 ## Directives were added in [Version 8.6.0](/8.6.0_docs.md). Please Read it for more information.
 
-## Directives 
+## Directives
 With this version, directives are supported. Directives are divided in two sets, by priority. the first set, containing 'init' or 'initialize' directives take priority. While the other set, containing all other kinds of directives are considered only after 'init' and the graph-type declared.
 
-#### Init 
+#### Init
+
 
- 
 | Parameter | Description |Type | Required | Values|
 | --- | --- | --- | --- | --- |
 | init | modifies configurations| Directive| Optional | Any parameters not included in the secure array|
@@ -21,7 +21,7 @@ With this version, directives are supported. Directives are divided in two sets,
 init would be an argument-directive: %%{init: { **insert argument here**}}%%
 
 The json object that is passed as {**argument** } must be valid, quoted json or it will be ignored.
-    
+
 The init/initialize directive is parsed early in the flow, enough to be able to re-initialize mermaid with a new configuration object. Example:
 ```
 %%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
@@ -50,7 +50,7 @@ will result an init object looking like this:
 ```
 
 to be sent to `mermaid.initialize(...)`
- 
+
 
 #### Other directives
 
@@ -63,7 +63,7 @@ sequenceDiagram
 Alice->>Bob: Hi Bob
 Bob->>Alice: Hi Alice
 ```
-## Chronology 
+## Chronology
 This will set the `logLevel` to `debug` and `theme` to `dark` for a sequence diagram. Then, during processing, the config for the sequence diagram is set by the `config` directive. This directive is handled in the `sequenceDb.js`. In this example, the fontFamily, fontSize, and fontWeight are all set for this sequence diagram.
 
 #### Backwards Compatibility
@@ -75,7 +75,7 @@ Multiline directives, however, will pose an issue and will render an error. This
 ### Wrapping
 
 # Wrap
+
 | Parameter | Description |Type | Required | Values|
 | --- | --- | --- | --- | --- |
 | wrap | a callable text-wrap function| Directive| Optional | %%{wrap}%%|
-

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

@@ -1,3 +1,7 @@
+---
+sort: 7
+---
+
 # Entity Relationship Diagrams
 
 > An entity–relationship model (or ER model) describes interrelated things of interest in a specific domain of knowledge. A basic ER model is composed of entity types (which classify the things of interest) and specifies relationships that can exist between entities (instances of those entity types). Wikipedia.

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

@@ -1,8 +1,10 @@
-# Examples 
+---
+sort: 2
+---
 
-**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/examples.md)
+# Examples
 
-This page contains a collection of examples of diagrams and charts that can be created through mermaid and its myriad applications. 
+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](https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted).
 

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

@@ -1,6 +1,10 @@
+---
+sort: 3
+title: Flowchart
+---
+
 # Flowcharts - Basic Syntax
 
-**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](./flowchart.md)
 ## Graph
 
 This statement declares the direction of the Flowchart.
@@ -41,7 +45,7 @@ Possible FlowChart orientations are:
 
 ## Flowcharts
 
-This renders a flowchart that allows for features such as: more arrow types, multi directional arrows, and linking to and from subgraphs. 
+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.
 
@@ -159,14 +163,18 @@ graph LR
 ```
 
 ### A hexagon node
+{% raw %}
+```
+graph LR
+    id1{{This is the text in the box}}
+```
+{% endraw %}
 
-```
-graph LR
-    id1{{This is the text in the box}}
-```
 ```mermaid
+{% raw %}
 graph LR
     id1{{This is the text in the box}}
+{% endraw %}
 ```
 
 ### Parallelogram

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

@@ -1,21 +1,24 @@
+---
+sort: 9
+title: Gantt
+---
+
 # Gantt diagrams
 
-**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](./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)
- 
- A Gantt chart is useful for tracking the amount of time it would take before a project is finished, but it can also be used to graphically represent "non-working days", with a few tweaks. 
- 
-Mermaid can render Gantt diagrams as SVG, PNG or a MarkDown link that can be pasted into docs. 
+
+ A Gantt chart is useful for tracking the amount of time it would take before a project is finished, but it can also be used to graphically represent "non-working days", with a few tweaks.
+
+Mermaid can render Gantt diagrams as SVG, PNG or a MarkDown link that can be pasted into docs.
 
 ```
 gantt
@@ -135,7 +138,7 @@ To do so, start a line with the `section` keyword and give it a name. (Note that
 `dateFormat` defines the format of the date **input** of your gantt elements. How these dates are represented in the rendered chart **output** are defined by `axisFormat`.
 
 
-### Input date format 
+### Input date format
 
 The default input date format is `YYYY-MM-DD`. You can define your custom ``dateFormat``.
 
@@ -175,7 +178,7 @@ More info in: http://momentjs.com/docs/#/parsing/string-format/
 The default output date format is YYYY-MM-DD. You can define your custom ``axisFormat``, like `2020-Q1` for the first quarter of the year 2020.
 
 ```
-axisFormat  %Y-%m-%d 
+axisFormat  %Y-%m-%d
 ```
 
 The following formating strings are supported:

docs/diagrams-and-syntax-and-examples/n00b-syntaxReference.md

@@ -1,19 +1,23 @@
+---
+sort: 1
+title: Diagram syntax intro
+---
+
 ## Diagram syntax
-**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 [Getting Started](n00b-gettingStarted.md) and [Overview](n00b-overview.md) sections, to learn the basics of mermaid. 
-Video Tutorials can be found at the bottom of the Overview Section. 
+If you are new to mermaid, read the [Getting Started](n00b-gettingStarted.md) and [Overview](n00b-overview.md) sections, to learn the basics of mermaid.
+Video Tutorials can be found at the bottom of the Overview Section.
 
-This section is a list of diagram types supported by mermaid. Below is a list of links to aricles that explain the syntax of the diagrams or charts that 0can be called. 
+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 0can 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. 
+They also  detail how diagrams can be defined, or described in the manner with which the diagram is to be rendered by the renderer.
 
 ### The benefits of text based diagramming are its speed and modifiability. mermaid allows for easy maintenance and modification of diagrams. This means your diagrams will always be up to date and closely follow your code and improve your documentation.  
 
 ## mermaid tag:
 These Diagram Definitions can be entered within a \<div class=mermaid> tag.
-like so : 
-```
+like so :
+```html
 <div class="mermaid">
      graph LR
       A --- B

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

@@ -1,6 +1,9 @@
-# Pie chart diagrams
+---
+sort: 10
+title: Pie Chart
+---
 
-**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](./pie.md)
+# Pie chart diagrams
 
 > A pie chart (or a circle chart) is a circular statistical graphic, which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice (and consequently its central angle and area), is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented. The earliest known pie chart is generally credited to William Playfair's Statistical Breviary of 1801
 -Wikipedia
@@ -11,24 +14,24 @@ Mermaid can render Pie Chart diagrams.
 pie title Pets adopted by volunteers
     "Dogs" : 386
     "Cats" : 85
-    "Rats" : 15 
+    "Rats" : 15
 ```
 ```mermaid
-pie title Pets adopted by volunteers 
+pie title Pets adopted by volunteers
     "Dogs" : 386
     "Cats" : 85
-    "Rats" : 35 
+    "Rats" : 35
 ```
 
 
 ## Syntax
-Drawing a pie chart is really simple in mermaid. 
+Drawing a pie chart is really simple in mermaid.
 - Start with `pie` keyword to begin the diagram
 - Followed by `title` keyword and its value in string to give a title to the pie-chart. This is ***OPTIONAL***
 - Followed by dataSet
     - `label` for a section in the pie diagram within `" "` quotes.
     - Followed by `:` semi-colon as separator
-    - Followed by `positive numeric value` (supported upto two decimal places) 
+    - Followed by `positive numeric value` (supported upto two decimal places)
 
 [pie]
      [title] [titlevalue]  (OPTIONAL)  
@@ -38,7 +41,7 @@ Drawing a pie chart is really simple in mermaid.
       .  
       .
 
-## Example 
+## Example
 ```
 pie
     title Key elements in Product X
@@ -48,7 +51,7 @@ pie
     "Iron" :  5
 ```
 ```mermaid
-pie 
+pie
 title Key elements in Product X
     "Calcium" : 42.96
     "Potassium" : 50.05

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

@@ -1,6 +1,8 @@
-# Sequence diagrams
+---
+sort: 4
+---
 
-**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](./sequenceDiagram.md)
+# Sequence diagrams
 
 > A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.
 

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

@@ -1,6 +1,8 @@
-# State diagrams
+---
+sort: 6
+---
 
-**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](./stateDiagram.md)
+# State diagrams
 
 > "A state diagram is a type of diagram used in computer science and related fields to describe the behavior of systems. State diagrams require that the system described is composed of a finite number of states; sometimes, this is indeed the case, while at other times this is a reasonable abstraction." Wikipedia
 

docs/diagrams-and-syntax-and-examples/user-journey.md

@@ -1,5 +1,9 @@
+---
+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:
@@ -31,4 +35,3 @@ Each user journey is split into sections, these describe the part of the task
 the user is trying to complete.
 
 Tasks syntax is `Task name: <score>: <comma separated list of actors>`
-

docs/getting-started/8.6.0_docs.md

@@ -1,6 +1,9 @@
-# Version 8.6.0 Changes
+---
+sort: 4
+title: Directives
+---
 
-**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/8.6.0_docs.md)
+# Version 8.6.0 Changes
 
 ## [New Mermaid Live-Editor Beta](https://mermaid-js.github.io/docs/mermaid-live-editor-beta/#/edit/eyJjb2RlIjoiJSV7aW5pdDoge1widGhlbWVcIjogXCJmb3Jlc3RcIiwgXCJsb2dMZXZlbFwiOiAxIH19JSVcbmdyYXBoIFREXG4gIEFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgQyAtLT58T25lfCBEW0xhcHRvcF1cbiAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl1cblx0XHQiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGFyayJ9fQ)
 
@@ -9,7 +12,7 @@
 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. 
+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.**
 
@@ -47,7 +50,9 @@ Implementors can only modify configurations using directives, but cannot change
 # Modifying Configurations and directives:
 The Two types of directives: are `init` or `initialize` and `wrap`.
 
-**Notes**: All directives are enclosed in `%%{ }%%.`
+```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.
 
@@ -58,18 +63,20 @@ Older versions of mermaid will not parse directives because `%%` will comment ou
 | --- | --- | --- | --- | --- |
 | init | modifies configurations| Directive| Optional | Any parameters not included in the secure array|
 
-**Notes:**
 
+```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 }}%%
@@ -83,12 +90,12 @@ When deployed within code, init is called before the graph/diagram description.
    g-->
 ```
 # Wrap
+
 | Parameter | Description |Type | Required | Values|
 | --- | --- | --- | --- | --- |
 | wrap | a callable text-wrap function| Directive| Optional | %%{wrap}%%|
 
-**Notes:**
-
+```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.
@@ -96,10 +103,11 @@ wrap respects manually added <br\> so if the user wants to break up their text,
 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)
+![Image showing wrapped text](../assets/img/wrapped%20text.png)
 
 
 # Resetting Configurations:
@@ -118,12 +126,12 @@ There are two more functions in the mermaidAPI that can be called by site owners
 
 Example of **assignWithDepth**:
 
-![Image showing assignWithDepth](./img/assignWithDepth.png)
+![Image showing assignWithDepth](../assets/img/assignWithDepth.png)
 
 
 Example of **object.Assign**:
 
-![Image showing object.assign without depth](./img/object.assign%20without%20depth.png)
+![Image showing object.assign without depth](../assets/img/object.assign%20without%20depth.png)
 
 •	**calculateTextDimensions, calculateTextWidth,** and **calculateTextHeight** - for measuring text dimensions, width and height.
 
@@ -133,70 +141,77 @@ Example of **object.Assign**:
 # 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|
- 
-   **Notes:  
-  Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset
-  the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) will reset siteConfig and currentConfig
-  to the defaultConfig
-  Note: currentConfig is set in this function
-  Default value: At default, will mirror Global Config**
-    
-    
-  ## getSiteConfig
-  | Function | Description         | Type    |  Values             |
-  | --------- | ------------------- | ------- |  ------------------ |
-  | setSiteConfig|Returns the current siteConfig base configuration | Get Request | Returns Any Values  in siteConfig|
-  
-  **Notes  :
-  Returns   any   values in siteConfig.**
-    
-    
-  ## 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|
-  
-  
-   **Notes  :
-  Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any
-  values found in conf with key found in siteConfig.secure will be replaced with the corresponding
-  siteConfig value.**
-  
 
-    
-   ## getConfig
-  | Function  | Description         | Type    | Return Values            |
-  | --------- | ------------------- | ------- | ------------------ |
-  | getConfig |Obtains the currentConfig | Get Request | Any Values from currentConfig|
-  
-   **Notes  :
-  Returns any values in currentConfig.**
+| 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|
 
 
-  ## 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.**
+```note
+Returns any values in currentConfig.
+```
 
-  ## 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|
-  
-   **Notes :
- default: current siteConfig  (optional, default `getSiteConfig()`)**
-    
- ## For more information, read [Setup](https://mermaid-js.github.io/mermaid/#/Setup).
+## 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](https://mermaid-js.github.io/mermaid/#/Setup).

docs/getting-started/README.md

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

docs/getting-started/Setup.md

@@ -1,3 +1,8 @@
+---
+sort: 3
+title: Configurations
+---
+
 <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
 
 ## mermaidAPI
@@ -43,7 +48,7 @@ Returns **any** the siteConfig
 **Notes**:
 Returns **any** values in siteConfig.
 
-Returns **any** 
+Returns **any**
 
 ## setConfig
 
@@ -137,13 +142,10 @@ mermaidAPI.initialize({
     provided a hidden div will be inserted in the body of the page instead. The element will be removed when rendering is
     completed.
 
-## 
-
 ## mermaidAPI configuration defaults
 
-<pre>
-
-&lt;script>
+```html
+<script>
   var config = {
     theme:'default',
     logLevel:'fatal',
@@ -198,7 +200,7 @@ mermaidAPI.initialize({
     }
   };
   mermaid.initialize(config);
-&lt;/script>
-</pre>
+</script>
+```
 
 [1]: Setup.md?id=render

docs/getting-started/mermaidCLI.md

@@ -1,3 +1,7 @@
+---
+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/getting-started/n00b-advanced.md

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

docs/getting-started/n00b-gettingStarted.md

@@ -1,11 +1,15 @@
+---
+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.
 
 The mermaid renderer is a piece of javascript that parses mermaid definitions, when called.
-This then renders a diagram based on that code in SVG, alternatively it 
+This then renders a diagram based on that code in SVG, alternatively it
 
 Most web browsers, such as Firefox, Chrome and Safari, can render mermaid, Internet Explorer however cannot.
 
@@ -13,7 +17,7 @@ Most web browsers, such as Firefox, Chrome and Safari, can render mermaid, Inter
 1. Using the mermaid [live editor](https://mermaid-js.github.io/mermaid-live-editor/). For some popular video tutorials on the live editor go to [Overview](./n00b-overview.md).
 2. Using one of the many [mermaid plugins](https://mermaid-js.github.io/mermaid/#/integrations).
 3. Hosting mermaid on a webpage, with an absolute link.
-4. Downloading mermaid and hosting it on your Web Page. 
+4. Downloading mermaid and hosting it on your Web Page.
 
 **Notes**: More in depth information can be found on [Usage](./usage.md).
 .
@@ -25,17 +29,17 @@ Most web browsers, such as Firefox, Chrome and Safari, can render mermaid, Inter
 
 In the `Code` section one can write or edit raw mermaid code, and instantly `Preview` the rendered result on the panel beside it.
 
-**This is a great way to learn how to define a mermaid diagram.** 
+**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](./n00b-overview.md).
 
-![Flowchart](./img/n00b-liveEditor.png) 
+![Flowchart](../assets/img/n00b-liveEditor.png)
 
 **Notes:**
 
-You can also click "Copy Markdown" to copy the markdown code for the diagram, that can then be pasted directly into your documentation. 
+You can also click "Copy Markdown" to copy the markdown code for the diagram, that can then be pasted directly into your documentation.
 
-![Flowchart](./img/liveEditorOptions.png)
+![Flowchart](../assets/img/liveEditorOptions.png)
 
 The `Mermaid configuration` is for controlling mermaid behaviour. An easy introduction to mermaid configuration is found in the [Advanced usage](n00b-advanced.md) section. A complete configuration reference cataloguing default values is found on the [mermaidAPI](https://mermaid-js.github.io/mermaid/#/Setup) page.
 
@@ -44,7 +48,7 @@ The `Mermaid configuration` is for controlling mermaid behaviour. An easy introd
 
 Thanks to the growing popularity of mermaid, many plugins already exist which incorporate a mermaid renderer. An extensive list can be found [here](./integrations.md).
 
-One example in the list is the [Atlassian Confluence mermaid plugin](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview) 
+One example in the list is the [Atlassian Confluence mermaid plugin](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview)
 
 When the mermaid plugin is installed on a Confluence server, one can insert a mermaid object into any Confluence page.
 ### Here is a step by step process for using the mermaid-Confluence plugin:
@@ -53,25 +57,25 @@ When the mermaid plugin is installed on a Confluence server, one can insert a me
 
 - In a Confluence page, Add Other macros.
 
-![Flowchart](./img/n00b-Confluence1.png)
+![Flowchart](../assets/img/n00b-Confluence1.png)
 
 ---
 
 - Search for mermaid.
 
-![Flowchart](./img/n00b-Confluence2.png)
+![Flowchart](../assets/img/n00b-Confluence2.png)
 
 ---
 
 - The mermaid object appears. Paste your mermaid code into it.
 
-![Flowchart](./img/n00b-Confluence3.png)
+![Flowchart](../assets/img/n00b-Confluence3.png)
 
 ---
 
 - Save the page and the diagram appears.
 
-![Flowchart](./img/n00b-Confluence4.png)
+![Flowchart](../../assets/img/n00b-Confluence4.png)
 
 ---
 ## The following are two ways of hosting mermaid on a webpage.  
@@ -81,7 +85,7 @@ When the mermaid plugin is installed on a Confluence server, one can insert a me
 
 This method can be used with any common web server. Apache, IIS, nginx, node express [...], you pick your favourite.
 
-We do not need to install anything on the server, apart from a program (like Notepad++) that can generate an html file, which is then deployed by a web browser (such as Firefox, Chrome, Safari, but not Internet Explorer). 
+We do not need to install anything on the server, apart from a program (like Notepad++) that can generate an html file, which is then deployed by a web browser (such as Firefox, Chrome, Safari, but not Internet Explorer).
 
 So if you want to really simplify things when testing this out, don't use a web server at all but just create an HTML file locally and drag it into your browser window. The browser will do the work of rendering the mermaid diagrams according to the descriptions you've given!
 
@@ -93,7 +97,7 @@ a. A reference for fetching the online mermaid renderer, which is written in Jav
 
 b. The mermaid code for the diagram we want to create.
 
-c. The `mermaid.initialize()` API call to start the rendering process. 
+c. The `mermaid.initialize()` API call to start the rendering process.
 
 
 ## This is what needs to go into the html file (and all of them are important), for the mermaidAPI to render the diagrams:
@@ -125,7 +129,7 @@ c. The `mermaid.initialize()` API call to start the rendering process.
 
 ### c. The `mermaid.initialize()` API call
 
-`mermaid.initialize()` calls take all the definitions contained in `<div class="mermaid">` tags it can find in the html body and starts to render them one by one. It is called this way: 
+`mermaid.initialize()` calls take all the definitions contained in `<div class="mermaid">` tags it can find in the html body and starts to render them one by one. It is called this way:
 
 ```
 <body>
@@ -166,9 +170,9 @@ c. The `mermaid.initialize()` API call to start the rendering process.
 **Notes**: This has to be saved in an `HTML` file and opened with a browser.
 
 ---
-## 4. Calling mermaid from a relative link. 
+## 4. Calling mermaid from a relative link.
 
-This method is similar to 3, if only a little more involved. The difference may be very subtle even, but it offers its own advantages, mainly in speed. 
+This method is similar to 3, if only a little more involved. The difference may be very subtle even, but it offers its own advantages, mainly in speed.
 
 1. install node v10 or 12, which would have npm
 
@@ -183,9 +187,9 @@ This method is similar to 3, if only a little more involved. The difference may
 5. Find the `mermaid.min.js` file,
     a. select the file.
     b. press the shift key and right click on it
-    c. select copy as path from the options. 
+    c. select copy as path from the options.
 
-6. Paste it within the `script` tag as the `src`. 
+6. Paste it within the `script` tag as the `src`.
 ```
 <script src="Paste the mermaid.min.js file address here"></script>
  <script>mermaid.initialize({startOnLoad:true});</script>
@@ -196,11 +200,11 @@ This method is similar to 3, if only a little more involved. The difference may
   <script>mermaid.initialize({startOnLoad:true});</script>
 ```
 8. Add the graph and diagram definitions as you would in number 3.
-    a. be mindful of the `div` tags. 
+    a. be mindful of the `div` tags.
 
 9. Save, load/edit your HTML file to your liking.  
 
- 
+
 **Note** placing the HTML file on the same folder the `mermaid` file you've downloaded is a good practice and allows you to shorten the address on the `src` section.
 
 **As seen here, in this full example:**
@@ -232,12 +236,11 @@ 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.
-  
+
 - We initialize the mermaid rendering with `mermaid.initialize()` directly in the html code. In principle this could be done through placing `mermaid.initialize()` inside of `mermaid.min.js`. We would then eliminate the need for this explicit line in the html. However, there are use cases where we do want to separate the two steps. Sometimes we want full control over when we start looking for `<div>`tags inside the web page with `mermaid.initialize()`, for example when we think that all `<div>` tags may not have been loaded by the time `mermaid.min.js` runs.
 
 - In the third method, `mermaid.min.js` is called using an absolute path. Even worse, the example includes the mermaid version number which of course will change as time goes by. However, the example makes it easy to understand what is going on - even though it is perhaps doomed in a way we do not want in a production environment. When going from testing mermaid out to getting serious with it, I would suggest one of the following approaches for calling `mermaid.min.js`:
-  
+
   1. If you do not enter a specific version, you automatically get the latest one.
   2. If you really need a specific version, hard code it (this is rare but it happens).
   3. If you need to know the current mermaid version, replace a mermaid code block with the word `info` and the version will be returned like [this](https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiaW5mb1xuXG4iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ==)
-   

docs/getting-started/theming.md

@@ -1,6 +1,9 @@
-# Version 8.7.0: Theme Configuration
+---
+sort: 5
+title: Theming
+---
 
-**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/theming.md)
+# Version 8.7.0: Theme Configuration
 
 With Version 8.7.0 Mermaid comes out with a system for dynamic and integrated configuration of the diagram themes. The objective of this is to increase the customizability of mermaid and the ease of Styling, with the customization of themes through the `%%init%%` directive and `initialize` calls.
 
@@ -112,7 +115,9 @@ You can create your own themes, by changing any of the given variables below. If
 
 ## Theme Variables Reference Table
 
-**Notes: Variables that are unique to some diagrams can be affected by changes in Theme Variables.
+```note
+Variables that are unique to some diagrams can be affected by changes in Theme Variables
+```
 
 |       Variable       |         Default/Base/Factor value          | Calc |                                                           Description                                                            |
 | -------------------- | ------------------------------ | ---- | -------------------------------------------------------------------------------------------------------------------------------- |
@@ -155,6 +160,7 @@ You can create your own themes, by changing any of the given variables below. If
 | nodeTextColor        | primaryTextColor               | *    |  Color for text inside Nodes.                                                                                                                                |
 
 # sequence diagram
+
 |         name          |      Default value      | Calc | Description |
 | --------------------- | ----------------------- | ---- | ----------- |
 | actorBorder           | primaryBorderColor      | *    |   Actor Border Color          |

docs/getting-started/usage.md

@@ -1,23 +1,27 @@
-# Usage
-**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/usage.md)
+---
+sort: 2
+title: API-Usage
+---
 
-mermaid is a javascript tool that makes use of a markdown based syntax to render customizable diagrams and charts, for greater speed and ease. 
+# Usage
+
+mermaid is a javascript tool that makes use of a markdown based syntax to render customizable diagrams and charts, for greater speed and ease.
 
 mermaid was made to help Documentation catch up with Development, in quickly changing projects.
 
 ### CDN
 
-https://unpkg.com/mermaid/
+[https://unpkg.com/mermaid/](https://unpkg.com/mermaid/)
 
 Please note that you can switch versions through the dropdown box at the top right.
 
 ## Using mermaid
 
-For the majority of beginners, using the live editor or suppoting mermaid on a webpage would cover their uses for mermaid. 
+For the majority of beginners, using the live editor or suppoting mermaid on a webpage would cover their uses for mermaid.
 
 ## Installing and Hosting mermaid on a webpage
 
-### Using the npm package 
+### Using the npm package
 
 ```
 1.You will need to insall node v10 or 12, which would have npm.
@@ -27,7 +31,7 @@ For the majority of beginners, using the live editor or suppoting mermaid on a w
 3. enter the following command:
     yarn add mermaid
 
-4. At this point, you can add mermaid as a dev dependency using this command: 
+4. At this point, you can add mermaid as a dev dependency using this command:
     yarn add --dev mermaid
 
 5. Alternatively, you can also deploy mermaid using the script tag in an HTML file with mermaid diagram descriptions.
@@ -36,20 +40,23 @@ For the majority of beginners, using the live editor or suppoting mermaid on a w
 
 ## Hosting mermaid on a web page.
 
-**Notes**: This topic explored in greater depth in the [User Guide for Beginners](./n00b-gettingStarted.md)
+```note
+This topic explored in greater depth in the [User Guide for Beginners](./n00b-gettingStarted.md)
+```
 
 The easiest way to integrate mermaid on a web page requires three elements:
 
 1. Inclusion of the mermaid address in the html page using a `script` tag, in the `src` section.Example:
 
   `<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>`
-  
+
 2. The `mermaidAPI` call, in a separate `script` tag. Example:
 
   `<script>mermaid.initialize({startOnLoad:true});</script>`
-  
-3. A graph definition, inside `<div>` tags labeled `class=mermaid`. Example: 
-```
+
+3. A graph definition, inside `<div>` tags labeled `class=mermaid`. Example:
+
+```html
 <div class="mermaid">
      graph LR
       A --- B
@@ -82,20 +89,20 @@ locate the graph definitions inside the `div` tags with `class="mermaid"` on the
 </html>
 ```
 
-## Notes: 
+## Notes:
 An id attribute is also added to mermaid tags without one.
 
 Mermaid can load multiple diagrams, in the same page.
 
-### Try it out, save this code as HTML and load it using any browser.(Except Internet Explorer, please don't use Internet Explorer.) 
+### Try it out, save this code as HTML and load it using any browser.(Except Internet Explorer, please don't use Internet Explorer.)
 
 
-## To enable click event and tags in nodes	
+## To enable click event and tags in nodes
+
+ A `securityLevel` configuration has to first be cleared, `securityLevel` sets the level of trust for the parsed diagrams and limits click functionality. This was introduce in version 8.2 as a security improvement, aimed at preventing malicious use.
 
- A `securityLevel` configuration has to first be cleared, `securityLevel` sets the level of trust for the parsed diagrams and limits click functionality. This was introduce in version 8.2 as a security improvement, aimed at preventing malicious use. 
- 
  **It is the site owner's responsibility to discriminate between trustworthy and untrustworthy user-bases and we encourage the use of discretion.**
- 
+
 ## securityLevel
 
 | Parameter     | Description                       | Type   | Required | Values                    |
@@ -109,16 +116,18 @@ Mermaid can load multiple diagrams, in the same page.
 -   **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.	
+```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 . By doing this clicks and tags are allowed.**	
+**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.**
 
-## To chage `securityLevel` with `mermaidAPI.initialize`: 
+## To chage `securityLevel` with `mermaidAPI.initialize`:
 
-```javascript	
-    mermaidAPI.initialize({	
-        securityLevel: 'loose'	
-    });	
+```javascript
+    mermaidAPI.initialize({
+        securityLevel: 'loose'
+    });
 ```
 
 
@@ -143,13 +152,13 @@ $(document).ready(function() {
 
 Not doing so will most likely result in mermaid rendering graphs that have labels out of bounds. The default integration in mermaid uses the window.load event to start rendering.
 
-If your page has other fonts in its body those might be used instead of the mermaid font. Specifying the font in your styling is a workaround for this. 
+If your page has other fonts in its body those might be used instead of the mermaid font. Specifying the font in your styling is a workaround for this.
 ```
     div.mermaid {
         font-family: 'trebuchet ms', verdana, arial;
     }
 ```
-# This likely requires a `script.js` file, separate from the `HTML`. 
+# This likely requires a `script.js` file, separate from the `HTML`.
 
 ### Calling `mermaid.init`
 
@@ -175,8 +184,9 @@ Or with no config object, and a jQuery selection:
 mermaid.init(undefined, $("#someId .yetAnotherClass"));
 ```
 
-> **Warning** This type of integration is deprecated. Instead the preferred way of handling more complex integration is to use the mermaidAPI instead.
-
+```warning
+This type of integration is deprecated. Instead the preferred way of handling more complex integration is to use the mermaidAPI instead.
+```
 
 ## Usage with webpack
 
@@ -261,7 +271,7 @@ renderer.code = function (code, language) {
 
 Another example in coffeescript that also includes the mermaid script tag in the generated markup.
 
-```CoffeeScript
+```js
 marked = require 'marked'
 
 module.exports = (options) ->
@@ -347,7 +357,9 @@ on what kind of integration you use.
 </script>
 ```
 
-> **Success** This is the preferred way of configuring mermaid.
+```tip
+This is the preferred way of configuring mermaid.
+```
 
 
 ## Using the mermaid object
@@ -358,11 +370,13 @@ approach are:
 * mermaid.startOnLoad
 * mermaid.htmlLabels
 
-```
+```js
 mermaid.startOnLoad = true;
 ```
 
-> **Warning** This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility.
+```warning
+This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility.
+```
 
 ## Using the mermaid_config
 
@@ -376,11 +390,13 @@ approach are:
 mermaid_config.startOnLoad = true;
 ```
 
-> **Warning** This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility.
+```warning
+This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility.
+```
 
 ## Using the mermaid.init call
 
-# 
+#
 Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this
 approach are:
 
@@ -391,4 +407,6 @@ approach are:
 mermaid_config.startOnLoad = true;
 ```
 
-> **Warning** This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility.
+```warning
+This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility.
+```

docs/overview/README.md

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

docs/overview/faq.md

@@ -1,6 +1,9 @@
-Frequently Asked Questions: 
+---
+sort: 3
+title: FAQ
+---
 
-**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/faq.md)
+# Frequently Asked Questions
 
 1. [How to add title to flowchart?](https://github.com/knsv/mermaid/issues/556#issuecomment-363182217)
 1. [How to specify custom CSS file?](https://github.com/mermaidjs/mermaid.cli/pull/24#issuecomment-373402785)

docs/overview/integrations.md

@@ -1,9 +1,13 @@
+---
+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/n00b-gettingStarted.md)
 
-The following list is a compilation of different integrations and plugins that allow the rendering of mermaid definitions 
+The following list is a compilation of different integrations and plugins that allow the rendering of mermaid definitions
 
-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 cen be built with mermaid.
 
 
 ## Productivity

docs/overview/n00b-overview.md

@@ -1,15 +1,19 @@
+---
+sort: 1
+title: Overview
+---
+
 # Overview for Beginners
-**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/n00b-overview.md)
 
 ## 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.
 
-mermaid aims to change that. 
+mermaid aims to change that.
 
-## Creating and Maintaining Diagrams should not be an expensive and frustrating process. 
+## Creating and Maintaining Diagrams should not be an expensive and frustrating process.
 
-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. 
+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.
 
@@ -32,7 +36,7 @@ mermaid seeks to change that. mermaid is a javascript based tool that utilizes a
     B --> D[Server02]
   </div>
   ```
-  
+
 **render**
 
 >This is the core function of Mermaid and its API, it is a function that is called to read all the `Mermaid Definitions` and returns an SVG file, based on the definitions.
@@ -40,32 +44,31 @@ 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 refered to often in the instructions. For Diagram Specific Syntax and Instructions, refer to
 
 ## Advantages of Using Mermaid
 
-- Ease of generate, modify and render diagrams, when you make 
-- The number of integrations and plugins it has. 
-- It can be added to your or your company's website. 
+- Ease of generate, modify and render diagrams, when you make
+- The number of integrations and plugins it has.
+- It can be added to your or your company's website.
 - Diagrams can be created through comments like this in a script:
 
-## The catch-22 of Diagrams and Charts: 
+## The catch-22 of Diagrams and Charts:
 
 **Diagramming and charting is a gigantic waste of developer time, but not having diagrams ruins productivity. **
 
-mermaid solves this by cutting the time, effort and tooling that is required to create diagrams and charts. 
+mermaid solves this by cutting the time, effort and tooling that is required to create diagrams and charts.
 
-Because, the text base for  diagrams allows for it to be updated easily, it can also be made part of production scripts (and other pieces of code). So less time needs be spent on documenting, as a separate task. 
+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. 
+## mermaid helps Documentation catch up with Development, in quickly changing projects.
 
 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.
-In fact one can pick up the syntax for it quite easily from the examples given and there are many tutorials in the internet. 
+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/).
 
 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. 
-
+Alternatively, you could also view the [integrations and uses](https://mermaid-js.github.io/mermaid/#/./integrations), to see how mermaid is used.

docs/tutorials-and-community/CHANGELOG.md

@@ -1,6 +1,9 @@
-# Change Log
+---
+sort: 3
+title: Changelog
+---
 
-**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/CHANGELOG.md)
+# Change Log
 
 ## [Unreleased](https://github.com/knsv/mermaid/tree/HEAD)
 

docs/tutorials-and-community/README.md

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

docs/tutorials-and-community/development.md

@@ -1,6 +1,10 @@
+---
+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)
 ## Updating the documentation
 
 Please continue writing documentation at [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs).
@@ -61,7 +65,9 @@ statement
 
 In the extract of the grammar above, it is defined that a call to the setTitle method in the data object will be done when parsing and the title keyword is encountered.
 
-> **Info** Make sure that the `parseError` function for the parser is defined and calling `mermaidPAI.parseError`. This way a common way of detecting parse errors is provided for the end-user.
+```tip
+Make sure that the `parseError` function for the parser is defined and calling `mermaidPAI.parseError`. This way a common way of detecting parse errors is provided for the end-user.
+```
 
 For more info look in the example diagram type:
 

docs/tutorials-and-community/versionUpdates.md

@@ -1,11 +1,15 @@
+---
+sort: 2
+title: Mermaid Versions
+---
+
 # Version News and Updates
-**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/8.6.0_docs.md)
 
 **This file will track the changes to mermaid and its evolution over time.**
 
 ## Here is the list of the newest versions in Descending Order, beginning from the latest version.
 
-## [Version 8.7.0](./theming.md) brings with it 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. 
+## [Version 8.7.0](./theming.md) brings with it a system for dynamic and integrated configuration of the diagram themes. The objective of this is to increase the customizability of mermaid and the ease of Styling, with the customization of themes through the `%%init%%` directive and `initialize` calls.
 
 Themes follow and build upon the Levels of Configuration and employ `directives` to modify and create custom configurations, as they were introduced in Version [8.6.0](./8.6.0_docs.md).
 
@@ -20,7 +24,7 @@ Example of `Initalize` call setting `theme` to `base`:
         'securityLevel': 'loose', 'theme': 'base'
     });
 ```
-**Notes**: Only site owners can use the `mermaidAPI.initialize` call, to set values. Site-Users will have to use `%%init%%` to modify or create the theme for their diagrams. 
+**Notes**: Only site owners can use the `mermaidAPI.initialize` call, to set values. Site-Users will have to use `%%init%%` to modify or create the theme for their diagrams.
 
 ### Themes at the Local or Current Level
 When Generating a diagram using on a webpage that supports mermaid. It is also possible to override site-wide theme settings locally, for a specific diagram, using directives, as long as it is not prohibited by the `secure` array.
@@ -79,13 +83,13 @@ directives allow for a diagram specific overriding of config, as it has been dis
 
 With version 8.5 there are some bug fixes and enhancements, plus a new diagram type,  entity relationship diagrams.
 
-![Image showing the new ER diagram type](./img/er.png)
+![Image showing the new ER diagram type](../assets/img/er.png)
 
 ## Version 8.2.0, introduces a security improvement
 
 
- A `securityLevel` configuration has to first be cleared, `securityLevel` sets the level of trust for the parsed diagrams and limits click functionality. This was introduce in version 8.2 as a security improvement, aimed at preventing malicious use. 
- 
+ A `securityLevel` configuration has to first be cleared, `securityLevel` sets the level of trust for the parsed diagrams and limits click functionality. This was introduce in version 8.2 as a security improvement, aimed at preventing malicious use.
+
 ### securityLevel
 
 | Parameter     | Description                       | Type   | Required | Values                    |
@@ -99,13 +103,15 @@ With version 8.5 there are some bug fixes and enhancements, plus a new diagram t
 -   **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.	
+```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 . By doing this clicks and tags are again allowed.	
+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 again allowed.
 
-### To change `securityLevel` with `mermaidAPI.initialize`: 
+### To change `securityLevel` with `mermaidAPI.initialize`:
 
-```javascript	
-    mermaidAPI.initialize({	
-        securityLevel: 'loose'	
-    });	
+```javascript
+    mermaidAPI.initialize({
+        securityLevel: 'loose'
+    });