marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-28 03:39:38 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update n00b-gettingStarted.md

Browse Source
This commit is contained in:
Neil Cuzon
2020-07-21 16:29:41 -07:00
committed by GitHub
parent a5cfae4b33
commit 7f3f011104
1 changed files with 14 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
docs/n00b-gettingStarted.md
View File

@@ -1,16 +1,17 @@
# 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.
But how is the code turned into a diagram in a web page? This is done with the use of a mermaid renderer.
The mermaid renderer is very accessible, in essence it is a piece of javascript that can be called.
The mermaid renderer is a piece of javascript that parses mermaid definitions, when called.
This then renders a diagram based on that code, which can be seen as
Most web browsers, such as Firefox, Chrome and Safari, can render mermaid, Internet Explorer however cannot. The web browser also needs access to the online mermaid renderer which it downloads from https://cdn.jsdelivr.net/npm/mermaid
## For beginners, there are three relatively easy ways you can use mermaid:
1. Using the mermaid [live editor](https://mermaid-js.github.io/mermaid-live-editor/)
2. Using one of the many mermaid plugins
2. Using one of the many [mermaid plugins](https://mermaid-js.github.io/mermaid/#/integrations).
3. Calling mermaid renderer with HTML, deployed in a friendly browser.
# Following either of these examples, you can get started with creating your own diagrams using mermaid code.
@@ -69,6 +70,7 @@ When the mermaid plugin is installed on a Confluence server, one can insert a me
---
## 3. mermaid using any web server (or just a browser):
**This is covered in detail in the [Usage section](https://mermaid-js.github.io/mermaid/#/usage)**
This method can be used with any common web server. Apache, IIS, nginx, node express [...], you pick your favourite.
@@ -76,8 +78,8 @@ We do not need to install anything on the server, apart from a program (like Not
So if you want to really simplify things when testing this out, don't use a web server at all but just create the file locally and drag it into your browser window. It is the browser which does all the work of rendering mermaid!
# Here are instructions for creating an html file with mermaid code:
# Note that all this is written in the html `<body>` section of the web page.
### Here are instructions for creating an html file with mermaid code:
### Note that all this is written in the html `<body>` section of the web page.
When writing the html file, we give the web browser three instructions inside the html code:
@@ -93,7 +95,7 @@ c. The `mermaid.initialize()` command to start the rendering process.
This is what needs to go into the html file:
# a. The reference to the mermaid renderer has to be contained in a `<script src>` tag like so:
### a. The reference to the mermaid renderer has to be contained in a `<script src>` tag like so:
```
<body>
@@ -101,7 +103,7 @@ This is what needs to go into the html file:
</body>
```
# b. The embedded mermaid code is similarly placed inside a `<div>` tag:
### b. The embedded mermaid code is similarly placed inside a `<div>` tag:
```
<body>
@@ -116,7 +118,7 @@ This is what needs to go into the html file:
```
(take note that every mermaid chart/graph/diagram, has to have separate `<div>` tags.)
# c. When initializing mermaid using `mermaid.initialize()`, mermaid takes all the `<div class="mermaid">` tags it can find in the html body and starts to render them one by one. This is done like so:
### c. When initializing mermaid using `mermaid.initialize()`, mermaid takes all the `<div class="mermaid">` tags it can find in the html body and starts to render them one by one. This is done like so:
```
<body>
@@ -124,8 +126,8 @@ This is what needs to go into the html file:
</body>
```
# *Finally*
# If the three steps mentioned are followed you will end up with something like this:
### *Finally*
### If the three steps mentioned are followed you will end up with something like this:
```
<html>
@@ -151,7 +153,7 @@ This is what needs to go into the html file:
</body>
</html>
```
# Save this to an html file and open it with a browser from the web server (or just drag it into your web browser window) and voila!
### Save this to an html file and open it with a browser from the web server (or just drag it into your web browser window) and voila!
---