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).
@@ -167,7 +166,7 @@ Replace `<version>` with the desired version number.
 
 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
@@ -186,7 +185,7 @@ 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:
-```
+```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,9 +1,9 @@
+---
+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
@@ -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,6 +1,8 @@
-# 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.
 

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.
@@ -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,6 +1,9 @@
-# Gantt diagrams
+---
+sort: 9
+title: Gantt
+---
 
-**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](./gantt.md)
+# Gantt diagrams
 
 > A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrates a project schedule and the amount of time it would take for any one project to finish. Gantt charts illustrate number of days between the start and finish dates of the terminal elements and summary elements of a project.
 

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

@@ -1,5 +1,9 @@
+---
+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.
@@ -13,7 +17,7 @@ They also  detail how diagrams can be defined, or described in the manner with w
 ## mermaid tag:
 These Diagram Definitions can be entered within a \<div class=mermaid> tag.
 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

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)
 
@@ -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,8 +63,8 @@ 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.
@@ -70,6 +75,8 @@ The json object that is passed as {**argument** } must be valid, quoted json or
 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.
 
@@ -138,52 +146,57 @@ Example of **object.Assign**:
 | --------- | ------------------- | ------- | ------------------ | ------------------ | ------------------ |
 | setSiteConfig|Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array|conf|siteConfig|
 
-   **Notes:  
+```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**
-    
+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.**
-    
+```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|
 
-  
-   **Notes  :
+```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.**
-  
-
+siteConfig value.
+```
 
 ## getConfig
+
 | Function  | Description         | Type    | Return Values            |
 | --------- | ------------------- | ------- | ------------------ |
 | getConfig |Obtains the currentConfig | Get Request | Any Values from currentConfig|
 
-   **Notes  :
-  Returns any values in 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.**
+```note
+modifies options in-place
+Ensures options parameter does not attempt to override siteConfig secure keys.
+```
 
 ## reset
 
@@ -192,11 +205,13 @@ Example of **object.Assign**:
 | 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()`)**
+```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
@@ -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,5 +1,9 @@
+---
+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.
@@ -29,13 +33,13 @@ In the `Code` section one can write or edit raw mermaid code, and instantly `Pre
 
 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.
 
-![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.
 
@@ -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.  
@@ -240,4 +244,3 @@ This method is similar to 3, if only a little more involved. The difference may
   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,5 +1,9 @@
+---
+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.
 
@@ -7,7 +11,7 @@ mermaid was made to help Documentation catch up with Development, in quickly cha
 
 ### 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.
 
@@ -36,7 +40,9 @@ 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:
 
@@ -49,7 +55,8 @@ The easiest way to integrate mermaid on a web page requires three elements:
   `<script>mermaid.initialize({startOnLoad:true});</script>`
 
 3. A graph definition, inside `<div>` tags labeled `class=mermaid`. Example:
-```
+
+```html
 <div class="mermaid">
      graph LR
       A --- B
@@ -109,7 +116,9 @@ 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.**
 
@@ -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,7 +390,9 @@ 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
 
@@ -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,5 +1,9 @@
+---
+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
 

docs/overview/n00b-overview.md

@@ -1,5 +1,9 @@
+---
+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 	
 
@@ -68,4 +72,3 @@ Video [Tutorials](./Tutorials.md) are also available for the mermaid [live edito
 
 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/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,5 +1,9 @@
+---
+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.**
 
@@ -79,7 +83,7 @@ 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
 
@@ -99,7 +103,9 @@ 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.