marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-27 19:29:38 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update n00b-gettingStarted.md

Browse Source
This commit is contained in:
Neil Cuzon
2020-07-15 21:30:23 -07:00
committed by GitHub
parent 369e6d1e61
commit 14388f4bb1
1 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
docs/n00b-gettingStarted.md
View File

@@ -1,16 +1,16 @@
# A basic mermaid User-Guide for Beginners
Creating diagrams and charts, using mermaid code is simple.
Creating diagrams and charts using mermaid code is simple.
But how is the code turned into a diagram in a web page? This is done with the use of a mermaid renderer.
Thankfully the mermaid renderer is very accessible, in essence it is a piece of javascript that can be called.
Most widely used web browsers, such as Firefox, Chrome and Safari, can render mermaid, Internet Explorer however cannot. The web browser also needs access to the online mermaid renderer which it downloads from https://cdn.jsdelivr.net/npm/mermaid
Most web browsers, such as Firefox, Chrome and Safari, can render mermaid, Internet Explorer however cannot. The web browser also needs access to the online mermaid renderer which it downloads from https://cdn.jsdelivr.net/npm/mermaid
# For beginners, there are three relatively easy ways you can use mermaid:
1. Using the mermaid [live editor](https://mermaid-js.github.io/mermaid-live-editor/)
2. Using a mermaid plugin, such as that for Confluence or [Atom](https://atom.io/packages/atom-mermaid).
2. Using one of the many mermaid plugins
3. Calling mermaid renderer with HTML, deployed in a friendly browser.
# Following either of these examples, you can get started with creating your own diagrams using mermaid code.
@@ -126,10 +126,11 @@ 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:
```
<html>
<body>
<script src="https://cdn.jsdelivr.net/npm/mermaid@8.4.0/dist/mermaid.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mermaid@8.6.0/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
Here is one mermaid diagram:
@@ -150,7 +151,7 @@ This is what needs to go into the html file:
</body>
</html>
```
# Save this to a html file and fetch 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 from the web server (or just drag it into your web browser window) and voila!
---