marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-31 14:16:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update usage.md

Browse Source
This commit is contained in:
Neil Cuzon
2020-07-18 18:04:03 -07:00
committed by GitHub
parent ed1c2cb596
commit 07f6572816
1 changed files with 34 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
docs/usage.md
View File

@@ -5,7 +5,15 @@
### npm package
```
yarn add mermaid
1.You will need to isntall node v10 or 12, which would have npm.
2. download yarn using npm.
2. enter the following command:
yarn add mermaid
3. You can then add mermaid as a dev dependency using this command:
yarn add --dev mermaid
```
### CDN
@@ -35,7 +43,7 @@ Further down on your page mermaid will look for tags with `class="mermaid"`. Fro
read the chart definiton and replace it with the svg chart.
### Define a chart like this:
### Define a chart like thi:
```html
<div class="mermaid">
@@ -53,26 +61,7 @@ Would end up like this:
</div>
```
An id attribute is also added to mermaid tags without one.
### To enable click event and tags in nodes
In version 8.2 a security improvement was introduced. A `securityLevel` configuration was introduced which sets the level of trust to be used on the parsed diagrams.
* **true**: (default) tags in text are encoded, click functionality is disabled
* false: tags in text are allowed, click functionality is enabled
⚠️ **Note** : This changes the default behaviour of mermaid so that after upgrade to 8.2, if the `securityLevel` is not configured, tags in flowcharts are encoded as tags and clicking is prohibited.
If your application is taking resposibility for the diagram source security you can set the `securityLevel` accordingly. By doing this clicks and tags are again allowed.
```javascript
mermaidAPI.initialize({
securityLevel: 'loose'
});
```
### Simple full example:
## Simple full example:
```html
<!DOCTYPE html>
@@ -93,6 +82,29 @@ If your application is taking resposibility for the diagram source security you
</html>
```
## Notes:
An id attribute is also added to mermaid tags without one.
Mermaid can load multiple diagrams, in the same page.
## To enable click event and tags in nodes:
In version 8.2 a security improvement was introduced. A `securityLevel` configuration was introduced which sets the level of trust to be used on the parsed diagrams.
* **true**: (default) tags in text are encoded, click functionality is disabled
* false: tags in text are allowed, click functionality is enabled
⚠️ **Note** : This changes the default behaviour of mermaid so that after upgrade to 8.2, if the `securityLevel` is not configured, tags in flowcharts are encoded as tags and clicking is prohibited.
If your application is taking resposibility for the diagram source security you can set the `securityLevel` accordingly. By doing this clicks and tags are again allowed.
```javascript
mermaidAPI.initialize({
securityLevel: 'loose'
});
```
### Labels out of bounds
If you use dynamically loaded fonts that are loaded through CSS, such as Google fonts, mermaid should wait for the