Merge branch 'develop' into vaceletm-add-tuleap-integration

docs/Configuration.md

@@ -0,0 +1,19 @@
+# Configuration
+
+Configuration is the second half of Mermaid for one or for many diagrams.
+
+This section will briefly introduce the different methods of configuring of the behaviors and apperances of Mermaid Diagrams. 
+The Following are the most commonly used methods, and are all tied to the [Deployment](./n00b-gettingStarted.md) methods. 
+
+1. Configuration Section in the [Live Editor](./Live-Editor.md). 
+
+
+2. The [Initialize call](), for when Mermaid is called via an API, or through a <script> tag. 
+
+
+3. [Directives](./directives.md), these are perhaps the most accessible of all, as they can be used by the 
+    
+    a. [Themes](./theming.md) are set up using `%%{init}%%` Directives and happen to be the fastest way of changing 
+    
+ 
+If you are interested in altering and customizing your Mermaid Diagrams, this list of [Configurations](./Setup.md) would be helpful. 

docs/README.md

@@ -40,7 +40,7 @@ For a more detailed introduction to Mermaid and some of it's more basic uses, lo
 **Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project 🙏**
 
 
-# Diagrams that mermaid can render
+# Diagram Types
 
 ### [Flowchart](/flowchart?id=flowcharts-basic-syntax)
 

docs/development.md

@@ -74,7 +74,7 @@ To start working with the e2e tests:
 
 The rendering tests are very straightforward to create. There is a function `imgSnapshotTest`, which takes a diagram in text form and the mermaid options, and it renders that diagram in Cypress.
 
-When running in CI it will take a snapshot of the rendered diagram and compare it with the snapshot from last build and flag for review it if it differs.
+When running in CI it will take a snapshot of the rendered diagram and compare it with the snapshot from last build and flag it for review if it differs.
 
 This is what a rendering test looks like:
 

docs/directives.md

@@ -79,4 +79,6 @@ Init directives and any other non-multiline directives should be backwards compa
 
 Multiline directives, however, will pose an issue and will render an error. This is unavoidable.
 
+# example 
+
 

docs/integrations.md

@@ -10,6 +10,7 @@ They also serve as proof of concept, for the variety of things that can be built
 - [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) (**Native support**)
 - [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) (**Native support**)
 - [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) (**Native support**)
+- [Joplin](https://joplinapp.org) (**Native support**)
 - [GitHub](https://github.com)
   - [Github action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
   - [svg-generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)

docs/n00b-gettingStarted.md

@@ -3,10 +3,10 @@
 Creating diagrams and charts using mermaid code is simple.
 
 >The live editor is enough for most general uses of mermaid
-## Absolute beginners are recommended to view the Video [Tutorials](./Tutorials.md) on the Live Editor, to gain a better understanding of mermaid.
+**Absolute beginners are recommended to view the Video [Tutorials](./Tutorials.md) on the Live Editor, to gain a better understanding of mermaid.**
 
 
-## For beginners, there are Four ways you can use mermaid:
+## Four ways of using mermaid:
 1. Using the mermaid [Live Editor](https://mermaid-js.github.io/mermaid-live-editor/).
     - Learning the [Syntax](./n00b-syntaxReference) would be helpful.
 2. Using [mermaid plugins](./integrations.md) with programs you are familiar with.
@@ -17,18 +17,16 @@ Creating diagrams and charts using mermaid code is simple.
 
 >More in depth information can be found on [Usage](./usage.md).
 
-## 1. Using [The mermaid live editor](https://mermaidjs.github.io/mermaid-live-editor).
+## 1. Using [The Live Editor](https://mermaidjs.github.io/mermaid-live-editor).
 
 ![Flowchart](./img/Live-Editor-Usage.png)
 
 In the `Code` section one can write or edit raw mermaid code, and instantly `Preview` the rendered result on the panel beside it.
 
-The Live Editor opens on a [Flowchart](./flowchart.md), one of the many charts that mermaid can render. 
-
 ![Flowchart](./img/DiagramDefinition.png)
 
 **Saving a Diagram:**
-Downloading the image is recommended. 
+You may choose any of the methods below, to save it 
 
 ![Flowchart](./img/Live-Editor-Choices.png)
 
@@ -39,13 +37,13 @@ Downloading the image is recommended.
 ![Flowchart](./img/Configuration.png)
 
 
-## 2. Using mermaid plugins:
+## 2. Using Mermaid Plugins:
 
 Using plug-ins you can generate mermaid diagrams from within popular applications, the same way that you would use the Live Editor. Here's a list of [Mermaid Plugins](./integrations.md).
 
 **This is covered in greater detail in the [Usage section](usage.md)**
 
-## 3. Deploying mermaid with Inline JavaScript
+## 3. Mermaid with Inline JavaScript
 
 This method can be used with any common web server. Apache, IIS, nginx, node express [...], you pick your favourite.
 
@@ -64,9 +62,9 @@ b. The mermaid code for the diagram we want to create.
 c. The `mermaid.initialize()` call to start the rendering process.
 
 
-## Three requirements for the mermaidAPI to render a diagram:
+## Requirements for mermaidAPI to render a diagram:
 
-### a. A reference to the external CDN in a `<script src>` tag, or a reference to mermaid.js as a separate file.:
+**a. A reference to the external CDN in a `<script src>` tag, or a reference to mermaid.js as a separate file.:**
 
 ```html
 <body>
@@ -74,7 +72,7 @@ c. The `mermaid.initialize()` call to start the rendering process.
 </body>
 ```
 
-### b. The embedded mermaid diagram definition inside a `<div class="mermaid">`:
+**b. The embedded mermaid diagram definition inside a `<div class="mermaid">`:**
 
 ```html
 <body>
@@ -89,7 +87,7 @@ c. The `mermaid.initialize()` call to start the rendering process.
 ```
 **Notes**: every mermaid chart/graph/diagram definition, has to have separate `<div>` tags.
 
-### c. The `mermaid.initialize()` call.
+**c. The `mermaid.initialize()` call.**
 
 `mermaid.initialize()` calls take all the definitions contained in `<div class="mermaid">` tags it can find in the html body and render. Example:
 ```html
@@ -107,7 +105,7 @@ Mermaid rendering is initalized with `mermaid.initialize()`.You can place `merma
 | --------- | --------------- | ------ | ---------------------------------------------------- |
 |startOnLoad| Toggle for Rendering upon loading | Boolean | true, false                       |
 
-### Here is a full working example of the mermaidAPI being called through the CDN:
+**Here is a full working example of the mermaidAPI being called through the CDN:**
 
 ```html
 <html>
@@ -161,7 +159,7 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
 
 
 ---
-## 4. Adding mermaid as a dependency.
+## 4. Adding Mermaid as a dependency.
 
 1. install node v10 or 12, which would have npm
 

docs/n00b-overview.md

@@ -1,6 +1,6 @@
 # Overview for Beginners
 
-## Explaining with a Diagram
+**Explaining with a Diagram**
 
 A picture is worth a thousand words, a good diagram is certainly worth more. 
 
@@ -20,7 +20,7 @@ This is a relatively straightforward solution to a major hurdle in software team
 
 # Definition of Terms/ Dictionary
 
-**Mermaid definitions**
+**Mermaid text definitions can be saved for later reuse and editing.**
 
 >These are the Mermaid diagram deffinitions inside `<div>` tags, with the `class=mermaid`.