marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-12 20:09:46 +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 ### 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 ### 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. read the chart definiton and replace it with the svg chart.
### Define a chart like this: ### Define a chart like thi:
```html ```html
<div class="mermaid"> <div class="mermaid">
@@ -53,26 +61,7 @@ Would end up like this:
</div> </div>
``` ```
An id attribute is also added to mermaid tags without one. ## Simple full example:
### 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:
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
@@ -93,6 +82,29 @@ If your application is taking resposibility for the diagram source security you
</html> </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 ### Labels out of bounds
If you use dynamically loaded fonts that are loaded through CSS, such as Google fonts, mermaid should wait for the If you use dynamically loaded fonts that are loaded through CSS, such as Google fonts, mermaid should wait for the