`:
```html
Here is a mermaid diagram:
- graph TD
- A[Client] --> B[Load Balancer]
- B --> C[Server01]
+ graph TD
+ A[Client] --> B[Load Balancer]
+ B --> C[Server01]
B --> D[Server02]
```
-**Notes**: Every Mermaid chart/graph/diagram definition, should have separate `` tags.
+> **Note**
+> Every Mermaid chart/graph/diagram definition should have separate `` tags.
-**b. The import of mermaid and the `mermaid.initialize()` call.**
+
-`mermaid.initialize()` call takes all the definitions contained in all the `` tags that it finds in the html body and renders them into diagrams. Example:
+- This is an example of a Mermaid import and the `mermaid.initialize()` call.
+
+> **Note**
+> A `mermaid.initialize()` call takes all the definitions contained within `` tags and renders them into diagrams.
```html
@@ -134,8 +218,8 @@ b. The importing of mermaid library through the `mermaid.esm.mjs` or `mermaid.es
```
-**Notes**:
-Rendering in Mermaid is initialized by `mermaid.initialize()` call. However, doing the opposite lets you control when it starts looking for `` tags inside the web page with `mermaid.initialize()`. This is useful when you think that not all `` tags may have loaded on the execution of `mermaid.esm.min.mjs` file.
+> **Note**
+> Rendering in Mermaid is initialized by the `mermaid.initialize()` call. However, doing the opposite lets you control when it starts looking for `` tags inside the web page with `mermaid.initialize()`. This is useful when you think that not all `` tags may have loaded on the execution of `mermaid.esm.min.mjs` file.
`startOnLoad` is one of the parameters that can be defined by `mermaid.initialize()`
@@ -143,9 +227,9 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. However, doi
| ----------- | --------------------------------- | ------- | ----------- |
| 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:**
+In this example, the `mermaidAPI` is being called through the `CDN`:
```html
@@ -175,8 +259,9 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. However, doi
```
-**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:
```html
@@ -204,21 +289,30 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
```
----
+## 5. Adding Mermaid as a dependency
-## 4. Adding Mermaid as a dependency.
+Below are the steps for adding Mermaid as a dependency:
-1. install node v16, which would have npm
+1. Install `node v16`
-2. download yarn using npm by entering the command below:
- npm install -g yarn
+> **Note**
+> To learn more about downloading and installing `Node.js` and `npm`, visit the [npm Docs website](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).
-3. After yarn installs, enter the following command:
- yarn add mermaid
+1. Install `yarn` using `npm` with this command:
-4. To add Mermaid as a Dev Dependency
- yarn add --dev mermaid
+ `npm install -g yarn`
-**Comments from Knut Sveidqvist, creator of mermaid:**
+2. After yarn installs, enter this command:
-- In early versions of mermaid, the `