From 40aacbf279c9eaec27031c55d46b87075bef4120 Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Fri, 24 Jul 2020 12:30:06 -0700 Subject: [PATCH] Update n00b-gettingStarted.md --- docs/n00b-gettingStarted.md | 54 ++++++++++++++++++++++--------------- 1 file changed, 33 insertions(+), 21 deletions(-) diff --git a/docs/n00b-gettingStarted.md b/docs/n00b-gettingStarted.md index 5c0d49011..96d7cfd8c 100644 --- a/docs/n00b-gettingStarted.md +++ b/docs/n00b-gettingStarted.md @@ -10,12 +10,14 @@ This then renders a diagram based on that code in SVG, alternatively it Most web browsers, such as Firefox, Chrome and Safari, can render mermaid, Internet Explorer however cannot. ## For beginners, there are four relatively easy ways you can use mermaid: -1. Using the mermaid [live editor](https://mermaid-js.github.io/mermaid-live-editor/) For some popular video tutorials on the live editor go to [Overview](./n00b-overview.md). +1. Using the mermaid [live editor](https://mermaid-js.github.io/mermaid-live-editor/). For some popular video tutorials on the live editor go to [Overview](./n00b-overview.md). 2. Using one of the many [mermaid plugins](https://mermaid-js.github.io/mermaid/#/integrations). -3. Calling mermaid renderer with HTML,click here for more in depth information on [Usage](./usage.md). -4. Installing mermaid with npm and deploying it using a relative link in the ` ``` +**Notes**:It is good practice to keep the `mermaid.initialize()` API call right next the `mermaid.min.js` `script` tag. + + startOnLoad is a parameter that can optionally be changed to false, this would then prevent mermaid from immediately rendering upon loading. -### *Finally* ### If the three steps mentioned are followed you will end up with something like this: -### Note that + ``` @@ -157,27 +163,32 @@ c. The `mermaid.initialize()` command to start the rendering process. ``` -### Save this to an html file and open it with a browser. + +**Notes**: This has to be saved in an `HTML` file and opened with a browser. --- ## 4. Calling mermaid from a relative link. -This method is similar to 3, if only a little more involved. The difference may be very subtle even, insignificant to a majority of people, but it offers its own advantages. + +This method is similar to 3, if only a little more involved. The difference may be very subtle even, but it offers its own advantages, mainly in speed. 1. install node v10 or 12, which would have npm -2. download yarn using npm. -npm install -g yarn +2. download yarn using npm by entering the command below: + npm install -g yarn 3. After yarn installs, enter the following command: yarn add mermaid -4. After downloading mermaid, you can then open the mermaid you’ve downloaded and go to the `dist` folder. +4. After downloading mermaid, you can then open the mermaid file you’ve downloaded and go to the `dist` folder. -5. Find the `mermaid.min.js` file, press the shift key and right click on and select copy as path from the options. +5. Find the `mermaid.min.js` file, + a. select the file. + b. press the shift key and right click on it + c. select copy as path from the options. 6. Paste it within the `script` tag as the `src`. ``` - + ``` 7. It should look something like this @@ -185,12 +196,13 @@ npm install -g yarn ``` -8. Add the graph and diagram definitions as you would in number 3, be mindful of the `div` tags. +8. Add the graph and diagram definitions as you would in number 3. + a. be mindful of the `div` tags. 9. Save, load/edit your HTML file to your liking. -**Note** placing the HTML file on the same folder the mermaid filed you've downloaded, is a good practice and allows you to shorten the address on the `src` section. +**Note** placing the HTML file on the same folder the `mermaid` file you've downloaded is a good practice and allows you to shorten the address on the `src` section. **As seen here, in this full example:** ``` @@ -211,7 +223,7 @@ npm install -g yarn B --> C[Server1] B --> D[Server2] - +