marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-23 17:29:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update n00b-gettingStarted.md

Browse Source
This commit is contained in:
Neil Cuzon
2021-04-30 15:18:06 -07:00
committed by GitHub
parent ebafb9c316
commit 5dc7c62cd4
1 changed files with 18 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
docs/n00b-gettingStarted.md
View File

@@ -1,8 +1,9 @@
# A Mermaid User-Guide for Beginners # 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.** **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/). 1. Using the mermaid [Live Editor](https://mermaid-js.github.io/mermaid-live-editor/).
- Learning the [Syntax](./n00b-syntaxReference) would be helpful. - Learning the [Syntax](./n00b-syntaxReference) would be helpful.
2. Using [mermaid plugins](./integrations.md) with programs you are familiar with. 2. Using [mermaid plugins](./integrations.md) with programs you are familiar with.
3. Hosting mermaid on a webpage, with an absolute link. 3. Calling the Mermaid Javascript API.
4. Downloading mermaid and hosting it on your Web Page. 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.** **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). >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) ![Flowchart](./img/Live-Editor-Usage.png)
@@ -32,7 +33,7 @@ You may choose any of the methods below, to save it
**Configuration** **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) ![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)** **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 `<body>` 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: 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. 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 `<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 ```html
@@ -89,7 +89,7 @@ c. The `mermaid.initialize()` call to start the rendering process.
**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: `mermaid.initialize()` calls take all the definitions contained in `<div class="mermaid">` tags it can find in the html body and renders them into diagrams. Example:
```html ```html
<body> <body>
<script>mermaid.initialize({startOnLoad:true});</script> <script>mermaid.initialize({startOnLoad:true});</script>
@@ -105,6 +105,8 @@ Mermaid rendering is initalized with `mermaid.initialize()`.You can place `merma
| --------- | --------------- | ------ | ---------------------------------------------------- | | --------- | --------------- | ------ | ---------------------------------------------------- |
|startOnLoad| Toggle for Rendering upon loading | Boolean | true, false | |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:** **Here is a full working example of the mermaidAPI being called through the CDN:**
```html ```html