From 07f6572816d7de1e3689e7081649e29f3058d366 Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Sat, 18 Jul 2020 18:04:03 -0700 Subject: [PATCH] Update usage.md --- docs/usage.md | 56 +++++++++++++++++++++++++++++++-------------------- 1 file changed, 34 insertions(+), 22 deletions(-) diff --git a/docs/usage.md b/docs/usage.md index 1e50060da..8f2a0de0b 100644 --- a/docs/usage.md +++ b/docs/usage.md @@ -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
@@ -53,26 +61,7 @@ Would end up like this:
``` -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 @@ -93,6 +82,29 @@ If your application is taking resposibility for the diagram source security you ``` +## 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