Update usage.md

This commit is contained in:
Neil Cuzon
2020-07-23 22:36:16 -07:00
committed by GitHub
parent c23caf899f
commit 701fb1378e

View File

@@ -1,6 +1,18 @@
# Usage # Usage
**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/usage.md) **Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](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 ## Installation
### npm package ### 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 ## Simple usage on a web page
The easiest way to integrate mermaid on a web page requires two elements: 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 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 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: ### Include mermaid on your web page:
```html ```html
<script src="https://cdn.jsdelivr.net/npm/mermaid@8.6.0/dist/mermaid.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script> <script>mermaid.initialize({startOnLoad:true});</script>
``` ```
@@ -83,7 +95,7 @@ Would end up like this:
B-->C[fa:fa-ban forbidden] B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner); B-->D(fa:fa-spinner);
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/mermaid@8.6.0/dist/mermaid.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script> <script>mermaid.initialize({startOnLoad:true});</script>
</body> </body>
</html> </html>