Merge branch 'develop' into 2177_dependency_updates

mermaid-js · Jul 15, 2021 · 6a3991b · 6a3991b
2 parents 5d2a9fe + 52a4011
commit 6a3991b
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 66 deletions.
diff --git a/docs/img/Code-Preview-Config.png b/docs/img/Code-Preview-Config.png
diff --git a/docs/img/Configuration.png b/docs/img/Configuration.png
diff --git a/docs/img/DiagramDefinition.png b/docs/img/DiagramDefinition.png
diff --git a/docs/img/DownloadChoices.png b/docs/img/DownloadChoices.png
diff --git a/docs/img/Live-Editor-Choices.png b/docs/img/Live-Editor-Choices.png
diff --git a/docs/n00b-gettingStarted.md b/docs/n00b-gettingStarted.md
@@ -1,43 +1,59 @@
 # A Mermaid User-Guide for Beginners
+
 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.
 
->Generally the live editor is enough for most general uses of mermaid, and is a good place to start learning.
+> Generally the live editor is enough for most general uses of mermaid, and is a good place to start learning.
 
 **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:
+
 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.
 3. Calling the Mermaid Javascript API.
 4. Deploying Mermaid as a dependency.
 
 **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).
+> 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)
 
 In the `Code` section one can write or edit raw mermaid code, and instantly `Preview` the rendered result on the panel beside it.
 
 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)
 
+### 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:
+
 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.**
 
 ![Flowchart](./img/Live-Editor-Choices.png)
 
 ### Editing your diagrams
+
 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:
 
@@ -53,8 +69,7 @@ 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.
 
-
-###  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:
 
@@ -64,36 +79,36 @@ 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 .
 
-
 **a. A reference to the external CDN in a `<script src>` tag, or a reference to mermaid.js as a separate file.:**
 
 ```html
 <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>
 </body>
 ```
 
 **b. The embedded mermaid diagram definition inside a `<div class="mermaid">`:**
 
 ```html
 <body>
-  Here is a mermaid diagram:
-  <div class="mermaid">
-    graph TD
-    A[Client] --> B[Load Balancer]
-    B --> C[Server01]
-    B --> D[Server02]
-  </div>
+    Here is a mermaid diagram:
+    <div class="mermaid">
+        graph TD A[Client] --> B[Load Balancer] B --> C[Server01] B --> D[Server02]
+    </div>
 </body>
 ```
+
 **Notes**: every mermaid chart/graph/diagram definition, has to have separate `<div>` tags.
 
 **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:
+
 ```html
 <body>
-  <script>mermaid.initialize({startOnLoad:true});</script>
+    <script>
+        mermaid.initialize({ startOnLoad: true });
+    </script>
 </body>
 ```
 
@@ -102,80 +117,74 @@ Mermaid rendering is initalized with `mermaid.initialize()`.You can place `merma
 
 `startOnLoad` is one of the parameters that can be defined by `mermaid.initialize()`
 
-| Parameter | Description     | Type   | Values                                               |
-| --------- | --------------- | ------ | ---------------------------------------------------- |
-|startOnLoad| Toggle for Rendering upon loading | Boolean | true, false                       |
+| Parameter   | Description                       | Type    | Values      |
+| ----------- | --------------------------------- | ------- | ----------- |
+| 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:**
 
 ```html
 <html>
-  <body>
-    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
-    <script>mermaid.initialize({startOnLoad:true});</script>
-
-    Here is one mermaid diagram:
-    <div class="mermaid">
-      graph TD
-      A[Client] --> B[Load Balancer]
-      B --> C[Server1]
-      B --> D[Server2]
-    </div>
-
-    And here is another:
-    <div class="mermaid">
-      graph TD
-      A[Client] -->|tcp_123| B(Load Balancer)
-      B -->|tcp_456| C[Server1]
-      B -->|tcp_456| D[Server2]
-    </div>
-  </body>
+    <body>
+        <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+        <script>
+            mermaid.initialize({ startOnLoad: true });
+        </script>
+
+        Here is one mermaid diagram:
+        <div class="mermaid">
+            graph TD A[Client] --> B[Load Balancer] B --> C[Server1] B --> D[Server2]
+        </div>
+
+        And here is another:
+        <div class="mermaid">
+            graph TD A[Client] -->|tcp_123| B(Load Balancer) B -->|tcp_456| C[Server1] B
+            -->|tcp_456| D[Server2]
+        </div>
+    </body>
 </html>
 ```
+
 **Another Option:**
 In this example mermaid.js is referenced in `src` as a separate JavaScript file, in an example Path.
+
 ```html
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-</head>
-<body>
-  <div class="mermaid">
-  graph LR
-      A --- B
-      B-->C[fa:fa-ban forbidden]
-      B-->D(fa:fa-spinner);
-  </div>
-  <div class="mermaid">
-     graph TD
-     A[Client] --> B[Load Balancer]
-     B --> C[Server1]
-     B --> D[Server2]
-  </div>
-  <script src="The\Path\In\Your\Package\mermaid.js"></script>
-  <script>mermaid.initialize({startOnLoad:true});</script>
-</body>
+    <head>
+        <meta charset="utf-8" />
+    </head>
+    <body>
+        <div class="mermaid">
+            graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);
+        </div>
+        <div class="mermaid">
+            graph TD A[Client] --> B[Load Balancer] B --> C[Server1] B --> D[Server2]
+        </div>
+        <script src="The\Path\In\Your\Package\mermaid.js"></script>
+        <script>
+            mermaid.initialize({ startOnLoad: true });
+        </script>
+    </body>
 </html>
 ```
 
-
 ---
+
 ## 4. Adding Mermaid as a dependency.
 
 1. install node v16, which would have npm
 
 2. download yarn using npm by entering the command below:
-    npm install -g yarn
+   npm install -g yarn
 
 3. After yarn installs, enter the following command:
-    yarn add mermaid
+   yarn add mermaid
 
 4. To add Mermaid as a Dev Dependency
-    yarn add --dev mermaid
-
-
+   yarn add --dev 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.