diff --git a/docs/n00b-gettingStarted.md b/docs/n00b-gettingStarted.md index 24bad4b8e..3032922c2 100644 --- a/docs/n00b-gettingStarted.md +++ b/docs/n00b-gettingStarted.md @@ -1,8 +1,9 @@ # A Mermaid User-Guide for Beginners -Creating diagrams and charts using mermaid code is simple. +This section talks about the ways of deploying mermaid. The next section will talk about the other half, which is configuration of values that dictate how diagrams are rendered. + +>Generally the live editor is enough for most general uses of mermaid. ->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.** @@ -10,14 +11,14 @@ Creating diagrams and charts using mermaid code is simple. 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. -3. Hosting mermaid on a webpage, with an absolute link. -4. Downloading mermaid and hosting it on your Web Page. +3. Calling the Mermaid Javascript API. +4. Deploying Mermaid as a dependency. **Note: It is our recommendation that you review all approaches, and choose the one that is best for your project.** >More in depth information can be found on [Usage](./usage.md). -## 1. Using [The 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) @@ -32,7 +33,7 @@ You may choose any of the methods below, to save it **Configuration** -*The Mermaid configuration* is for configuring the appearance and behavior of mermaid diagrams. An easy introduction to mermaid configuration is found in the [Advanced usage](./n00b-advanced.md) section. A complete configuration reference cataloguing default values is found on the [mermaidAPI](Setup.md) page. +*The Configuration Section* is for changing the appearance and behavior of mermaid diagrams. An easy introduction to mermaid configuration is found in the [Advanced usage](./n00b-advanced.md) section. A complete configuration reference cataloguing default values is found on the [mermaidAPI](Setup.md) page. ![Flowchart](./img/Configuration.png) @@ -43,27 +44,26 @@ Using plug-ins you can generate mermaid diagrams from within popular application **This is covered in greater detail in the [Usage section](usage.md)** -## 3. Mermaid with Inline JavaScript +## 3. Calling the Javascript API -This method can be used with any common web server. Apache, IIS, nginx, node express [...], you pick your favourite. +This method can be used with any common web server. Apache, IIS, nginx, node express, you are free to choose. -You will need a text editting tool like Notepad++, to generate an html file. It is then deployed by a web browser (such as Firefox, Chrome, Safari, but not Internet Explorer). +You will also need a text editting tool like Notepad++, to generate an html file. It is then deployed by a web browser (such as Firefox, Chrome, Safari, but not Internet Explorer). -Just create an HTML file locally and open it using a desired browser. +The API works by pulling rendering instructions from a source from `mermaid.js` to render diagrams in the page. -### Written in the html `` section of the web page. + +### Requirements for the Mermaid API. When writing the html file, we give the web browser three instructions inside the html code: -a. A reference for fetching the online mermaid renderer, which is written in Javascript. +a. A reference for fetching the online mermaid renderer, through the `mermaid.js` or `mermaid.min.js`. b. The mermaid code for the diagram we want to create. -c. The `mermaid.initialize()` call to start the rendering process. +c. The `mermaid.initialize()` call, which can dictate the appreance of diagrams and also start the rendering process . -## Requirements for mermaidAPI to render a diagram: - **a. A reference to the external CDN in a ` @@ -105,6 +105,8 @@ Mermaid rendering is initalized with `mermaid.initialize()`.You can place `merma | --------- | --------------- | ------ | ---------------------------------------------------- | |startOnLoad| Toggle for Rendering upon loading | Boolean | true, false | +### Working Examples + **Here is a full working example of the mermaidAPI being called through the CDN:** ```html