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

Update n00b-gettingStarted.md

Browse Source
This commit is contained in:
Neil Cuzon
2021-04-16 23:41:27 -07:00
committed by GitHub
parent 0c60ee5f1d
commit 8666f4efbf
1 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
docs/n00b-gettingStarted.md
View File

@@ -3,10 +3,10 @@
Creating diagrams and charts using mermaid code is simple. Creating diagrams and charts using mermaid code is simple.
>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.**
## For beginners, there are Four ways you can use mermaid: ## Four ways of using mermaid:
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.
@@ -17,7 +17,7 @@ Creating diagrams and charts using mermaid code is simple.
>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 mermaid 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)
@@ -39,13 +39,13 @@ Downloading the image is recommended.
![Flowchart](./img/Configuration.png) ![Flowchart](./img/Configuration.png)
## 2. Using mermaid plugins: ## 2. Using Mermaid Plugins:
Using plug-ins you can generate mermaid diagrams from within popular applications, the same way that you would use the Live Editor. Here's a list of [Mermaid Plugins](./integrations.md). Using plug-ins you can generate mermaid diagrams from within popular applications, the same way that you would use the Live Editor. Here's a list of [Mermaid Plugins](./integrations.md).
**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. Deploying mermaid with Inline JavaScript ## 3. Mermaid with Inline JavaScript
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 pick your favourite.
@@ -64,9 +64,9 @@ 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 to start the rendering process.
## Three requirements for the mermaidAPI to render a diagram: ## 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
<body> <body>
@@ -74,7 +74,7 @@ c. The `mermaid.initialize()` call to start the rendering process.
</body> </body>
``` ```
### b. The embedded mermaid diagram definition inside a `<div class="mermaid">`: **b. The embedded mermaid diagram definition inside a `<div class="mermaid">`:**
```html ```html
<body> <body>
@@ -89,7 +89,7 @@ c. The `mermaid.initialize()` call to start the rendering process.
``` ```
**Notes**: every mermaid chart/graph/diagram definition, has to have separate `<div>` tags. **Notes**: every mermaid chart/graph/diagram definition, has to have separate `<div>` tags.
### 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 render. Example:
```html ```html
@@ -107,7 +107,7 @@ 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 |
### 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
<html> <html>
@@ -161,7 +161,7 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
--- ---
## 4. Adding mermaid as a dependency. ## 4. Adding Mermaid as a dependency.
1. install node v10 or 12, which would have npm 1. install node v10 or 12, which would have npm