# A basic mermaid User-Guide for Beginners Creating diagrams and charts using mermaid code is simple. mermaid allows you to dynamically code and modify diagrams. when called, mermaid renders code definitions into a diagram in SVG format. >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. ## For beginners, there are four relatively easy ways you can use 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 one of the many [mermaid plugins](./integrations.md). 3. Hosting mermaid on a webpage, with an absolute link. 4. Downloading mermaid and hosting it on your Web Page. **Notes**: More in depth information can be found on [Usage](./usage.md). # Following any of these examples, you can get started with creating your own diagrams using mermaid code. ## 1. The 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. **This is a great way to learn how to define a mermaid diagram.** The Live Editor opens on a [Flowchart](./flowchart.md). ![Flowchart](./img/DiagramDefinition.png) **Saving a Diagram:** Downloading the image may be a ideal for a majority uses. The Links and the markdown code can be referenced to display the diagram. ![Flowchart](./img/Live-Editor-Choices.png) **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. ![Flowchart](./img/Configuration.png) ## 2. Using mermaid plugins: Thanks to the growing popularity of mermaid, many plugins already allow the generation of mermaid diagrams from within popular applications. An extensive list of applications the support mermaid plugins can be found [here](./integrations.md). **This is covered in greater detail in the [Usage section](usage.md)** ## 3. Deploying mermaid on the Browser 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). 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! ### Note that all this is written in the html `
` section of the web page. 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. b. The mermaid code for the diagram we want to create. c. The `mermaid.initialize()` 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: ### a. A reference to the address of the `mermaid.js` or the `mermaid.min.js` file has to be contained in a ` ``` ### b. The embedded mermaid diagram definition needs to be contained inside a `