marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-24 18:56:58 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update usage.md

Browse Source
This commit is contained in:
Neil Cuzon
2020-07-18 20:20:48 -07:00
committed by GitHub
parent ac2c1e019f
commit 56e328f31f
1 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
docs/usage.md
View File

@@ -35,8 +35,8 @@ 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="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> <script>mermaid.initialize({startOnLoad:true});</script>
``` ```
Further down on your page mermaid will look for tags with `class="mermaid"`. From these tags mermaid will try to Further down on your page mermaid will look for tags with `class="mermaid"`. From these tags mermaid will try to
@@ -47,7 +47,10 @@ read the chart definiton and replace it with the svg chart.
```html ```html
<div class="mermaid"> <div class="mermaid">
CHART DEFINITION GOES HERE graph LR
A --- B
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
</div> </div>
``` ```
@@ -76,12 +79,12 @@ 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="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> <script>mermaid.initialize({startOnLoad:true});</script>
</body> </body>
</html> </html>
``` ```
An id attribute is also added to mermaid tags without one. ## Simple full example: ## Try it out, save this code as HTML and load it.
### To enable click event and tags in nodes ### To enable click event and tags in nodes