marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-23 10:16:43 +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:
```html
<script src="mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
<script src="https://cdn.jsdelivr.net/npm/mermaid@8.6.0/dist/mermaid.min.js"></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
@@ -47,7 +47,10 @@ read the chart definiton and replace it with the svg chart.
```html
<div class="mermaid">
CHART DEFINITION GOES HERE
graph LR
A --- B
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
</div>
```
@@ -76,12 +79,12 @@ Would end up like this:
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
</div>
<script src="mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
<script src="https://cdn.jsdelivr.net/npm/mermaid@8.6.0/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
</body>
</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