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

Update Tutorails for LiveEditor V2

Browse Source
This commit is contained in:
Sidharth Vinod
2021-07-07 02:11:06 +05:30
parent 5070d992dd
commit b5aaf0f990
6 changed files with 83 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/img/Code-Preview-Config.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 49 KiB

After

Width:  |  Height:  |  Size: 321 KiB

BIN
docs/img/Configuration.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 40 KiB

BIN
docs/img/DiagramDefinition.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 39 KiB

BIN
docs/img/DownloadChoices.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 29 KiB

BIN
docs/img/Live-Editor-Choices.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 62 KiB

73
docs/n00b-gettingStarted.md
View File

@@ -1,4 +1,5 @@
# A Mermaid User-Guide for Beginners # A Mermaid User-Guide for Beginners
Mermaid is composed of three parts, Deployment, Syntax and Configuration. Mermaid is composed of three parts, Deployment, Syntax and Configuration.
This section talks about the different ways to deploy Mermaid. Learning the [Syntax](./n00b-syntaxReference.md) ahead of time would be more helpful to the beginner. This section talks about the different ways to deploy Mermaid. Learning the [Syntax](./n00b-syntaxReference.md) ahead of time would be more helpful to the beginner.
@@ -8,6 +9,7 @@ This section talks about the different ways to deploy Mermaid. Learning the [Syn
**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.**
## Four ways of using 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/).
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. Calling the Mermaid Javascript API. 3. Calling the Mermaid Javascript API.
@@ -17,7 +19,7 @@ This section talks about the different ways to deploy Mermaid. Learning the [Syn
> 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/edit).
![EditingProcess](./img/Editing-process.png) ![EditingProcess](./img/Editing-process.png)
@@ -25,10 +27,16 @@ In the `Code` section one can write or edit raw mermaid code, and instantly `Pre
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. 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.
![Code,Config and Preview](./img/Code-Preview-Config.png) ![Code,Config and Preview](./img/Code-Preview-Config.png)
### Editing History
Your code will be autosaved every minute into the Timeline tab of History, having the most recent 30 items.
You can also manually save code by clicking the Save icon in History section which can be accessed in the Saved tab. This is stored only in the browser storage.
### Saving a Diagram: ### Saving a Diagram:
You may choose any of the methods below, to save it You may choose any of the methods below, to save it
**We recommend that you save your diagram code on top of any method you choose, in order to make edits and modifications further down the line.** **We recommend that you save your diagram code on top of any method you choose, in order to make edits and modifications further down the line.**
@@ -36,8 +44,16 @@ You may choose any of the methods below, to save it
![Flowchart](./img/Live-Editor-Choices.png) ![Flowchart](./img/Live-Editor-Choices.png)
### Editing your diagrams ### Editing your diagrams
Editing is as easy as pasting your **Diagram code**, into the `code` section of the `Live Editor`. Editing is as easy as pasting your **Diagram code**, into the `code` section of the `Live Editor`.
### Loading from Gists
The Gist you create should have a code.mmd file and optionally a config.json. [Example](https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a)
To load a gist into the Editor, you can use https://mermaid-js.github.io/mermaid-live-editor/edit?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a
and to View, https://mermaid-js.github.io/mermaid-live-editor/view?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a
## 2. Using Mermaid Plugins: ## 2. Using Mermaid Plugins:
@@ -53,7 +69,6 @@ You will also need a text editting tool like Notepad++, to generate an html file
The API works by pulling rendering instructions from a source from `mermaid.js` to render diagrams in the page. The API works by pulling rendering instructions from a source from `mermaid.js` to render diagrams in the page.
### Requirements for the Mermaid API. ### 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:
@@ -64,7 +79,6 @@ b. The mermaid code for the diagram we want to create.
c. The `mermaid.initialize()` call, which can dictate the appreance of diagrams and also start the rendering process . c. The `mermaid.initialize()` call, which can dictate the appreance of diagrams and also start the rendering process .
**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
@@ -79,21 +93,22 @@ c. The `mermaid.initialize()` call, which can dictate the appreance of diagrams
<body> <body>
Here is a mermaid diagram: Here is a mermaid diagram:
<div class="mermaid"> <div class="mermaid">
graph TD graph TD A[Client] --> B[Load Balancer] B --> C[Server01] B --> D[Server02]
A[Client] --> B[Load Balancer]
B --> C[Server01]
B --> D[Server02]
</div> </div>
</body> </body>
``` ```
**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 renders them into diagrams. 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>
</body> </body>
``` ```
@@ -103,7 +118,7 @@ Mermaid rendering is initalized with `mermaid.initialize()`.You can place `merma
`startOnLoad` is one of the parameters that can be defined by `mermaid.initialize()` `startOnLoad` is one of the parameters that can be defined by `mermaid.initialize()`
| Parameter | Description | Type | Values | | Parameter | Description | Type | Values |
| --------- | --------------- | ------ | ---------------------------------------------------- | | ----------- | --------------------------------- | ------- | ----------- |
| startOnLoad | Toggle for Rendering upon loading | Boolean | true, false | | startOnLoad | Toggle for Rendering upon loading | Boolean | true, false |
### Working Examples ### Working Examples
@@ -114,54 +129,49 @@ Mermaid rendering is initalized with `mermaid.initialize()`.You can place `merma
<html> <html>
<body> <body>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script> <script>
mermaid.initialize({ startOnLoad: true });
</script>
Here is one mermaid diagram: Here is one mermaid diagram:
<div class="mermaid"> <div class="mermaid">
graph TD graph TD A[Client] --> B[Load Balancer] B --> C[Server1] B --> D[Server2]
A[Client] --> B[Load Balancer]
B --> C[Server1]
B --> D[Server2]
</div> </div>
And here is another: And here is another:
<div class="mermaid"> <div class="mermaid">
graph TD graph TD A[Client] -->|tcp_123| B(Load Balancer) B -->|tcp_456| C[Server1] B
A[Client] -->|tcp_123| B(Load Balancer) -->|tcp_456| D[Server2]
B -->|tcp_456| C[Server1]
B -->|tcp_456| D[Server2]
</div> </div>
</body> </body>
</html> </html>
``` ```
**Another Option:** **Another Option:**
In this example mermaid.js is referenced in `src` as a separate JavaScript file, in an example Path. In this example mermaid.js is referenced in `src` as a separate JavaScript file, in an example Path.
```html ```html
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
</head> </head>
<body> <body>
<div class="mermaid"> <div class="mermaid">
graph LR graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);
A --- B
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
</div> </div>
<div class="mermaid"> <div class="mermaid">
graph TD graph TD A[Client] --> B[Load Balancer] B --> C[Server1] B --> D[Server2]
A[Client] --> B[Load Balancer]
B --> C[Server1]
B --> D[Server2]
</div> </div>
<script src="The\Path\In\Your\Package\mermaid.js"></script> <script src="The\Path\In\Your\Package\mermaid.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script> <script>
mermaid.initialize({ startOnLoad: true });
</script>
</body> </body>
</html> </html>
``` ```
--- ---
## 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
@@ -175,7 +185,6 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
4. To add Mermaid as a Dev Dependency 4. To add Mermaid as a Dev Dependency
yarn add --dev mermaid yarn add --dev mermaid
**Comments from Knut Sveidqvist, creator of mermaid:** **Comments from Knut Sveidqvist, creator of mermaid:**
- In early versions of mermaid, the `<script src>` tag was invoked in the `<head>` part of the web page. Nowadays we can place it in the `<body>` as seen above. Older parts of the documentation frequently reflects the previous way which still works. - In early versions of mermaid, the `<script src>` tag was invoked in the `<head>` part of the web page. Nowadays we can place it in the `<body>` as seen above. Older parts of the documentation frequently reflects the previous way which still works.