` tags.)
### c. When initializing mermaid using `mermaid.initialize()`, mermaid takes all the `
` tags it can find in the html body and starts to render them one by one. This is done like so:
@@ -128,11 +131,12 @@ This is what needs to go into the html file:
### *Finally*
### If the three steps mentioned are followed you will end up with something like this:
+### Note that
```
-
+
Here is one mermaid diagram:
@@ -153,16 +157,54 @@ This is what needs to go into the html file:
```
-### Save this to an html file and open it with a browser from the web server (or just drag it into your web browser window) and voila!
+### Save this to an html file and open it 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.
+
+1. install node v10 or 12, which would have npm
+
+2. download yarn using npm.
+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.
+
+5. Find the `mermaid.min.js` file, press the shift key and right click on and select copy as path from the options.
+
+6. Paste it within the `script` tag as the `src`.
+```
+
+
+```
+7. It should look something like this
+```
+
+
+```
+8. Add the graph and diagram definitions as you would in number 3, 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.
+
+**As seen here:**
+```
+
+```
+
+
**Three additional comments from Knut Sveidqvist, creator of mermaid:**
- In early versions of mermaid, the `
+
+
+
+
+
+
+ graph LR
+ A --- B
+ B-->C[fa:fa-ban forbidden]
+ B-->D(fa:fa-spinner);
+
+
+ graph TD
+ A[Client] --> B[Load Balancer]
+ B --> C[Server1]
+ B --> D[Server2]
+
+
+
+
+
```
From c6a1f42c44f0c5044fccf91443faa097a1a17c6a Mon Sep 17 00:00:00 2001
From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com>
Date: Thu, 23 Jul 2020 00:15:44 -0700
Subject: [PATCH 07/27] Update usage.md
---
docs/usage.md | 9 ++++++---
1 file changed, 6 insertions(+), 3 deletions(-)
diff --git a/docs/usage.md b/docs/usage.md
index 5f6039cbc..a6492c08f 100644
--- a/docs/usage.md
+++ b/docs/usage.md
@@ -6,15 +6,18 @@
### npm package
```
-1.You will need to isntall node v10 or 12, which would have npm.
+1.You will need to insall node v10 or 12, which would have npm.
2. download yarn using npm.
-2. enter the following command:
+3. enter the following command:
yarn add mermaid
-3. You can then add mermaid as a dev dependency using this command:
+4. At this point, you can add mermaid as a dev dependency using this command:
yarn add --dev mermaid
+
+5. alternatively, you can deploy it using the script tag in an HTML file with mermaid diagram descriptions. This is explored in greater depth in the [User Guide for Beginners](./n00b-gettingStarted.md)
+
```
### CDN
From 9da8f4d35bd3e6ab486f3eb84236e1a53ffb43dc Mon Sep 17 00:00:00 2001
From: Abhijeet Pathak
Date: Thu, 23 Jul 2020 19:49:01 +0530
Subject: [PATCH 08/27] Fixed the path to 8.6.0_docs.md
---
docs/README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/README.md b/docs/README.md
index 50313a886..3dcab7012 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -37,7 +37,7 @@ You can also watch some popular mermaid tutorials on the [mermaid Overview](./n0
## [New Mermaid Live-Editor Beta](https://mermaid-js.github.io/docs/mermaid-live-editor-beta/#/edit/eyJjb2RlIjoiJSV7aW5pdDoge1widGhlbWVcIjogXCJmb3Jlc3RcIiwgXCJsb2dMZXZlbFwiOiAxIH19JSVcbmdyYXBoIFREXG4gIEFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgQyAtLT58T25lfCBEW0xhcHRvcF1cbiAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl1cblx0XHQiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGFyayJ9fQ)
-## [New Configuration Protocols in version 8.6.0](https://github.com/NeilCuzon/mermaid/edit/develop/docs/8.6.0_docs.md)
+## [New Configuration Protocols in version 8.6.0](./8.6.0_docs.md)
## New diagrams in 8.5
From 52c30e588cdc60207915542559df9cdba8b3cebc Mon Sep 17 00:00:00 2001
From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com>
Date: Thu, 23 Jul 2020 18:33:11 -0700
Subject: [PATCH 09/27] Update 8.6.0_docs.md
---
docs/8.6.0_docs.md | 13 +++++++------
1 file changed, 7 insertions(+), 6 deletions(-)
diff --git a/docs/8.6.0_docs.md b/docs/8.6.0_docs.md
index 483fc314e..c905baa8a 100644
--- a/docs/8.6.0_docs.md
+++ b/docs/8.6.0_docs.md
@@ -42,9 +42,9 @@ Implementors can only modify configurations using directives, but cannot change
# Modifying Configurations and directives:
The Two types of directives: are “init” or “initialize” and “wrap”.
-**Notes**: All directives are enclosed in %%{ }%%.
+**Notes**: All directives are enclosed in `%%{ }%%.`
-Older versions of mermaid will not parse directives because %% will comment out the directive.
+Older versions of mermaid will not parse directives because `%%` will comment out the directive.
# Init
init, or initialize: the init or initialize directive gives the user the ability to overwrite and change the values for configuration parameters, with respect to the secure array that is in effect.
@@ -55,17 +55,18 @@ init, or initialize: the init or initialize directive gives the user the ability
**Notes:**
-init would be an argument-directive: %%{init: { **insert argument here**}}%%
+init would be an argument-directive: `%%{init: { **insert argument here**}}%%`
The json object that is passed as {**argument** } must be valid, quoted json or it will be ignored.
**for example**:
-%%{init: {"theme": default, "logLevel": 1 }}%%
+`%%{init: {"theme": default, "logLevel": 1 }}%%`
Configurations that are passed through init cannot change the parameters in secure arrays of higher levels. In the event of a conflict, mermaid will give priority to secure arrays and parse the request, without changing the values of the parameters in conflict.
When deployed within code, init is called before the graph/diagram description.
**for example**:
+```
%%{init: {"theme": "default", "logLevel": 1 }}%%
graph LR
a-->b
@@ -75,7 +76,7 @@ When deployed within code, init is called before the graph/diagram description.
e-->f
f-->g
g-->
-
+```
# Wrap
| Parameter | Description |Type | Required | Values|
| --- | --- | --- | --- | --- |
@@ -89,7 +90,7 @@ wrap respects manually added so if the user wants to break up their text,
It is a non-argument directive and can be executed thusly:
-%%{wrap}%%.
+`%%{wrap}%%` .
**an example of text wrapping in a sequence diagram**:
From c23caf899fe113238a768b2361f89691800ad9eb Mon Sep 17 00:00:00 2001
From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com>
Date: Thu, 23 Jul 2020 18:39:43 -0700
Subject: [PATCH 10/27] Update examples.md
---
docs/examples.md | 10 ++++++++++
1 file changed, 10 insertions(+)
diff --git a/docs/examples.md b/docs/examples.md
index 2a00995e5..0772fe436 100644
--- a/docs/examples.md
+++ b/docs/examples.md
@@ -1,3 +1,13 @@
+# Examples
+
+**Edit this Page** [](https://github.com/mermaid-js/mermaid/blob/develop/docs/examples.md)
+
+This page contains a collection of examples of diagrams and charts that can be created through mermaid and its myriad applications.
+
+## If you wish to learn how to support mermaid on your webpage, read the [Beginner's Guide](https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted).
+
+## If you wish to learn about mermaid's syntax, Read the [Diagram Syntax](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference) section.
+
## Basic Pie Chart
```
From 701fb1378e2c8513b3eb9f91b98e9db47419eed6 Mon Sep 17 00:00:00 2001
From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com>
Date: Thu, 23 Jul 2020 22:36:16 -0700
Subject: [PATCH 11/27] Update usage.md
---
docs/usage.md | 18 +++++++++++++++---
1 file changed, 15 insertions(+), 3 deletions(-)
diff --git a/docs/usage.md b/docs/usage.md
index a6492c08f..cc34dd4a8 100644
--- a/docs/usage.md
+++ b/docs/usage.md
@@ -1,6 +1,18 @@
# Usage
**Edit this Page** [](https://github.com/mermaid-js/mermaid/blob/develop/docs/usage.md)
+mermaid is a javascript tool that makes use of a markdown based syntax to render customizable diagrams and charts, for greater speed and ease.
+
+mermaid was made to 0help Documentation catch up with Development, in quickly changing projects.
+
+## Using mermaid
+
+For the majority of beginners, using the live editor or deploying mermaid through their browsers is all they would have use for mermaid.
+
+**To learn more go to
+
+# It only gets geekiers beyond this point.
+
## Installation
### npm package
@@ -30,7 +42,7 @@ Please note that you can switch versions through the dropdown box at the top rig
## Simple usage on a web page
The easiest way to integrate mermaid on a web page requires two elements:
-1. Inclusion of the mermaid framework in the html page using a script tag
+1. Inclusion of the mermaid address in the html page using a script tag
2. A graph definition on the web page
If these things are in place mermaid listens to the page load event and when fired (when the page has loaded) it will
@@ -39,7 +51,7 @@ locate the graphs on the page and transform them to svg files.
### Include mermaid on your web page:
```html
-
+
```
@@ -83,7 +95,7 @@ Would end up like this:
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);