From 05bd2329c73338665df0a2b047f0fa3131f0d6d8 Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Thu, 11 Mar 2021 23:46:59 -0800 Subject: [PATCH] Update n00b-gettingStarted.md --- docs/n00b-gettingStarted.md | 72 +++++++++++++++++++------------------ 1 file changed, 37 insertions(+), 35 deletions(-) diff --git a/docs/n00b-gettingStarted.md b/docs/n00b-gettingStarted.md index 1dd06f35b..68ba74ab2 100644 --- a/docs/n00b-gettingStarted.md +++ b/docs/n00b-gettingStarted.md @@ -5,17 +5,19 @@ mermaid allows you to dynamically code and modify diagrams. when called, mermaid renders code definitions into a diagram in SVG format. >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 relatively easy ways you can use mermaid: +## For beginners, there are Four ways you can use mermaid: 1. Using the mermaid [Live Editor](https://mermaid-js.github.io/mermaid-live-editor/). - Learning the [Syntax](./n00b-syntaxReference) would be helpful. 2. Using one of the many [mermaid plugins](./integrations.md). 3. Hosting mermaid on a webpage, with an absolute link. 4. Downloading mermaid and hosting it on your Web Page. -**Notes**: More in depth information can be found on [Usage](./usage.md). +**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). # Following any of these examples, you can get started with creating your own diagrams using mermaid code. @@ -55,7 +57,7 @@ Thanks to the growing popularity of mermaid, many plugins already allow the gene This method can be used with any common web server. Apache, IIS, nginx, node express [...], you pick your favourite. -We do not need to install anything on the server, apart from a program (like Notepad++) that can generate an html file, which is then deployed by a web browser (such as Firefox, Chrome, Safari, but not Internet Explorer). +You will need a text editting tool like Notepad++, t can 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. @@ -72,7 +74,7 @@ c. The `mermaid.initialize()` call to start the rendering process. ## Three requirements for the mermaidAPI to render a diagram: -### a. A reference to the external CDN in a ` ``` -**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. +**Notes**:You can place `mermaid.initialize()` inside of `mermaid.min.js` or `mermaid.js`, for brevity. -### Here is a full working example of the mermaidAPI being called through HTML: + + +### Here is a full working example of the mermaidAPI being called through the CDN: ```html @@ -135,23 +140,8 @@ startOnLoad:true ``` - - ---- -## 4. Adding mermaid as a dependency. - -1. install node v10 or 12, which would have npm - -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. To add Mermaid as a Dev Dependency - yarn add --dev mermaid - -**As seen here, in this full example:** +**Another full example:** +In this example mermaid.js is referenced as a separate JavaScript file, in an example Path. ```html @@ -170,21 +160,33 @@ startOnLoad:true B --> C[Server1] B --> D[Server2] - + ``` +--- +## 4. Adding mermaid as a dependency. + +1. install node v10 or 12, which would have npm + +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. To add Mermaid as a Dev Dependency + yarn add --dev mermaid + + + + **Three additional comments from Knut Sveidqvist, creator of mermaid:** -- In early versions of mermaid, the `