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

Update usage.md

Browse Source
This commit is contained in:
Neil Cuzon
2020-07-25 19:08:11 -07:00
committed by GitHub
parent 1111382b53
commit 654f673def
1 changed files with 11 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
docs/usage.md
View File

@@ -30,31 +30,33 @@ For the majority of beginners, using the live editor or suppoting mermaid on a w
4. At this point, you can add mermaid as a dev dependency using this command: 4. At this point, you can add mermaid as a dev dependency using this command:
yarn add --dev mermaid yarn add --dev mermaid
5. alternatively, you can deploy it using the script tag in an HTML file with mermaid diagram descriptions. 5. Alternatively, you can also deploy mermaid using the script tag in an HTML file with mermaid diagram descriptions.
as is shown in the example below
``` ```
For
## Hosting mermaid on a web page. ## Hosting mermaid on a web page.
**Notes**: This topic explored in greater depth in the [User Guide for Beginners](./n00b-gettingStarted.md) **Notes**: This topic explored in greater depth in the [User Guide for Beginners](./n00b-gettingStarted.md)
The easiest way to integrate mermaid on a web page requires two elements: The easiest way to integrate mermaid on a web page requires three elements:
1. Inclusion of the mermaid address in the html page using a `script` tag, in the `src` section.
1. Inclusion of the mermaid address in the html page using a `script` tag, in the `src` section.Example:
`<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>`
2. The `mermaidAPI` call, in a separate `script` tag. 2. The `mermaidAPI` call, in a separate `script` tag. Example:
`<script>mermaid.initialize({startOnLoad:true});</script>` `<script>mermaid.initialize({startOnLoad:true});</script>`
3. A graph definition, inside `<div>` tags labeled `class=mermaid`. 3. A graph definition, inside `<div>` tags labeled `class=mermaid`. Example:
```
`<div class="mermaid"> <div class="mermaid">
graph LR graph LR
A --- B A --- B
B-->C[fa:fa-ban forbidden] B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner); B-->D(fa:fa-spinner);
</div>` </div>
```
**If these things are in place mermaid starts at the page load event and when fired (when the page has loaded) it will **If these things are in place mermaid starts at the page load event and when fired (when the page has loaded) it will
locate the graph definitions inside the `div` tags with `class="mermaid"` on the page and transform them to svg charts or diagrams.** locate the graph definitions inside the `div` tags with `class="mermaid"` on the page and transform them to svg charts or diagrams.**
@@ -115,14 +117,6 @@ If you are taking resposibility for the diagram source security you can set the
mermaidAPI.initialize({ mermaidAPI.initialize({
securityLevel: 'loose' securityLevel: 'loose'
}); });
```
```javascript
mermaidAPI.initialize({
securityLevel: 'loose'
});
``` ```