From c2f72402f2be83a710377b8da39dd9f2b5919e80 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sat, 3 Sep 2022 11:02:14 +0530 Subject: [PATCH] Test --- docs/usage.md | 131 +++++++++++++++++++++++++------------------------- 1 file changed, 66 insertions(+), 65 deletions(-) diff --git a/docs/usage.md b/docs/usage.md index d5ddead78..4f672f3bc 100644 --- a/docs/usage.md +++ b/docs/usage.md @@ -1,6 +1,9 @@ # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. + # Usage +Test lint failure + **Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/usage.md) Mermaid is a JavaScript tool that makes use of a Markdown based syntax to render customizable diagrams, charts and visualizations. @@ -43,24 +46,22 @@ We have compiled some Video [Tutorials](./Tutorials.md) on how to use the mermai 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.Example: + ```html ``` 2. The `mermaidAPI` call, in a separate `script` tag. Example: + ```html - ``` 3. A graph definition, inside `
` tags labeled `class=mermaid`. Example: ```html -
- graph LR - A --- B - B-->C[fa:fa-ban forbidden] - B-->D(fa:fa-spinner); -
+
graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);
``` **Following these directions, mermaid starts at page load and (when the page has loaded) it will @@ -71,20 +72,16 @@ locate the graph definitions inside the `div` tags with `class="mermaid"` and re ```html - - - - -
- graph LR - A --- B - B-->C[fa:fa-ban forbidden] - B-->D(fa:fa-spinner); -
- - - + + + + +
graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);
+ + + ``` @@ -104,20 +101,20 @@ A `securityLevel` configuration has to first be cleared, `securityLevel` sets th ## securityLevel -| Parameter | Description | Type | Required | Values | -| ------------- | --------------------------------- | ------ | -------- | ------------------------- | +| Parameter | Description | Type | Required | Values | +| ------------- | --------------------------------- | ------ | -------- | ------------------------------------------ | | securityLevel | Level of trust for parsed diagram | String | Required | 'sandbox', 'strict', 'loose', 'antiscript' | Values: -* **strict**: (**default**) tags in text are encoded, click functionality is disabled -* **loose**: tags in text are allowed, click functionality is enabled -* **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled -* **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This prevent any JavaScript running in the context. This may hinder interactive functionality of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc. +- **strict**: (**default**) tags in text are encoded, click functionality is disabled +- **loose**: tags in text are allowed, click functionality is enabled +- **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled +- **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This prevent any JavaScript running in the context. This may hinder interactive functionality of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc. ```note This changes the default behaviour of mermaid so that after upgrade to 8.2, unless the `securityLevel` is not changed, tags in flowcharts are encoded as tags and clicking is disabled. -**sandbox** security level is still in the beta version. +**sandbox** security level is still in the beta version. ``` **If you are taking responsibility for the diagram source security you can set the `securityLevel` to a value of your choosing . This allows clicks and tags are allowed.** @@ -126,7 +123,7 @@ This changes the default behaviour of mermaid so that after upgrade to 8.2, unle ```javascript mermaidAPI.initialize({ - securityLevel: 'loose' + securityLevel: 'loose', }); ``` @@ -136,7 +133,7 @@ If you use dynamically loaded fonts that are loaded through CSS, such as Google whole page to load (dom + assets, particularly the fonts file). ```javascript -$(document).load(function() { +$(document).load(function () { mermaid.initialize(); }); ``` @@ -144,7 +141,7 @@ $(document).load(function() { or ```javascript -$(document).ready(function() { +$(document).ready(function () { mermaid.initialize(); }); ``` @@ -165,22 +162,22 @@ By default, `mermaid.init` will be called when the document is ready, finding al `class="mermaid"`. If you are adding content after mermaid is loaded, or otherwise need finer-grained control of this behavior, you can call `init` yourself with: -* a configuration object -* some nodes, as - * a node - * an array-like of nodes - * or W3C selector that will find your nodes +- a configuration object +- some nodes, as + - a node + - an array-like of nodes + - or W3C selector that will find your nodes Example: ```javascript -mermaid.init({noteMargin: 10}, ".someOtherClass"); +mermaid.init({ noteMargin: 10 }, '.someOtherClass'); ``` Or with no config object, and a jQuery selection: ```javascript -mermaid.init(undefined, $("#someId .yetAnotherClass")); +mermaid.init(undefined, $('#someId .yetAnotherClass')); ``` ```warning @@ -203,10 +200,16 @@ The example below show an outline of how this could be used. The example just lo ``` @@ -219,9 +222,9 @@ The example code below is an extract of what mermaid does when using the API. Th bind events to an SVG when using the API for rendering. ```javascript -var insertSvg = function(svgCode, bindFunctions) { +var insertSvg = function (svgCode, bindFunctions) { element.innerHTML = svgCode; - if(typeof callback !== 'undefined'){ + if (typeof callback !== 'undefined') { callback(id); } bindFunctions(element); @@ -229,8 +232,7 @@ var insertSvg = function(svgCode, bindFunctions) { var id = 'theGraph'; - -mermaidAPI.render(id,txt,insertSvg, element); +mermaidAPI.render(id, txt, insertSvg, element); ``` 1. The graph is generated using the render call. @@ -246,11 +248,10 @@ This is the renderer used for transforming the documentation from Markdown to ht ```javascript var renderer = new marked.Renderer(); renderer.code = function (code, language) { - if(code.match(/^sequenceDiagram/)||code.match(/^graph/)){ - return '
'+code+'
'; - } - else{ - return '
'+code+'
'; + if (code.match(/^sequenceDiagram/) || code.match(/^graph/)) { + return '
' + code + '
'; + } else { + return '
' + code + '
'; } }; ``` @@ -292,15 +293,15 @@ function in order to handle the error in an application-specific way. The code-example below in meta code illustrates how this could work: ```javascript -mermaid.parseError = function(err,hash){ +mermaid.parseError = function (err, hash) { displayErrorInGui(err); }; -var textFieldUpdated = function(){ +var textFieldUpdated = function () { var textStr = getTextFromFormField('code'); - if(mermaid.parse(textStr)){ - reRender(textStr) + if (mermaid.parse(textStr)) { + reRender(textStr); } }; @@ -316,8 +317,8 @@ Mermaid takes a number of options which lets you tweak the rendering of the diag setting the options in mermaid. 1. Instantiation of the configuration using the initialize call -2. *Using the global mermaid object* - **Deprecated** -3. *using the global mermaid\_config object* - **Deprecated** +2. _Using the global mermaid object_ - **Deprecated** +3. _using the global mermaid_config object_ - **Deprecated** 4. Instantiation of the configuration using the **mermaid.init** call- **Deprecated** The list above has two ways too many of doing this. Three are deprecated and will eventually be removed. The list of @@ -331,7 +332,7 @@ on what kind of integration you use. ```html ``` @@ -347,8 +348,8 @@ This is the preferred way of configuring mermaid. Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this approach are: -* mermaid.startOnLoad -* mermaid.htmlLabels +- mermaid.startOnLoad +- mermaid.htmlLabels ```javascript mermaid.startOnLoad = true; @@ -358,13 +359,13 @@ mermaid.startOnLoad = true; This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility. ``` -## Using the mermaid\_config +## Using the mermaid_config It is possible to set some configuration via the mermaid object. The two parameters that are supported using this approach are: -* mermaid\_config.startOnLoad -* mermaid\_config.htmlLabels +- mermaid_config.startOnLoad +- mermaid_config.htmlLabels ```javascript mermaid_config.startOnLoad = true; @@ -378,8 +379,8 @@ This way of setting the configuration is deprecated. Instead the preferred way i To set some configuration via the mermaid object. The two parameters that are supported using this approach are: -* mermaid\_config.startOnLoad -* mermaid\_config.htmlLabels +- mermaid_config.startOnLoad +- mermaid_config.htmlLabels ```javascript mermaid_config.startOnLoad = true;