diff --git a/docs/n00b-gettingStarted.md b/docs/n00b-gettingStarted.md index 6619ebacf..4c3683af1 100644 --- a/docs/n00b-gettingStarted.md +++ b/docs/n00b-gettingStarted.md @@ -1,4 +1,4 @@ -# A basic Walkthrough for beginners +# A basic User-Guide for Beginners Creating diagrams and charts, using mermaid code is simple. @@ -15,17 +15,17 @@ Most widely used web browsers, such as Firefox, Chrome and Safari, can render me # Following either of these examples, you can get started with creating your own diagrams using mermaid code. -## 1. The mermaid live editor +## 1. The mermaid live editor: -The quickest way to get started with mermaid is to visit [The mermaid live editor](https://mermaidjs.github.io/mermaid-live-editor). + A great way to get started with mermaid is to visit [The mermaid live editor](https://mermaidjs.github.io/mermaid-live-editor). In the `Code` section one can write or edit raw mermaid code, and instantly `Preview` the rendered result on the panel beside it. +![Flowchart](./img/n00b-liveEditor.png) -This is a great way to get started. - -It is also the easiest way to develop diagrams. 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 copy the code from the code section and paste it into either a mermaid plugin or in inside an html file, which will be taught in numbers 2 and 3. +It is also an easier way to develop diagrams. 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/liveEditor-options.png.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](mermaidAPI.md) page.