GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues Projects Releases Wiki Activity

Test

Browse Source
This commit is contained in:
Sidharth Vinod 2022-09-03 11:02:14 +05:30
parent 13e7da10ca
commit c2f72402f2
No known key found for this signature in database
GPG Key ID: FB5CCD378D3907CD
1 changed files with 66 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
docs/usage.md
View File

@ -1,6 +1,9 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Usage # 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) **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. 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: 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: 1. Inclusion of the mermaid address in the html page using a `script` tag, in the `src` section.Example:
```html ```html
<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. Example: 2. The `mermaidAPI` call, in a separate `script` tag. Example:
```html ```html
<script>mermaid.initialize({startOnLoad:true}); <script>
mermaid.initialize({ startOnLoad: true });
</script> </script>
``` ```
3. A graph definition, inside `<div>` tags labeled `class=mermaid`. Example: 3. A graph definition, inside `<div>` tags labeled `class=mermaid`. Example:
```html ```html
<div class="mermaid"> <div class="mermaid">graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);</div>
graph LR
A --- B
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
</div>
``` ```
**Following these directions, mermaid starts at page load and (when the page has loaded) it will **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 ```html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
</head> </head>
<body> <body>
<div class="mermaid"> <div class="mermaid">graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);</div>
graph LR <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
A --- B <script>
B-->C[fa:fa-ban forbidden] mermaid.initialize({ startOnLoad: true });
B-->D(fa:fa-spinner); </script>
</div> </body>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});
</script>
</body>
</html> </html>
``` ```
@ -104,20 +101,20 @@ A `securityLevel` configuration has to first be cleared, `securityLevel` sets th
## securityLevel ## securityLevel
| Parameter | Description | Type | Required | Values | | Parameter | Description | Type | Required | Values |
| ------------- | --------------------------------- | ------ | -------- | ------------------------- | | ------------- | --------------------------------- | ------ | -------- | ------------------------------------------ |
| securityLevel | Level of trust for parsed diagram | String | Required | 'sandbox', 'strict', 'loose', 'antiscript' | | securityLevel | Level of trust for parsed diagram | String | Required | 'sandbox', 'strict', 'loose', 'antiscript' |
Values: Values:
* **strict**: (**default**) tags in text are encoded, click functionality is disabled - **strict**: (**default**) tags in text are encoded, click functionality is disabled
* **loose**: tags in text are allowed, click functionality is enabled - **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 - **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. - **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 ```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. 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.** **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 ```javascript
mermaidAPI.initialize({ 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). whole page to load (dom + assets, particularly the fonts file).
```javascript ```javascript
$(document).load(function() { $(document).load(function () {
mermaid.initialize(); mermaid.initialize();
}); });
``` ```
@ -144,7 +141,7 @@ $(document).load(function() {
or or
```javascript ```javascript
$(document).ready(function() { $(document).ready(function () {
mermaid.initialize(); 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 `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: finer-grained control of this behavior, you can call `init` yourself with:
* a configuration object - a configuration object
* some nodes, as - some nodes, as
* a node - a node
* an array-like of nodes - an array-like of nodes
* or W3C selector that will find your nodes - or W3C selector that will find your nodes
Example: Example:
```javascript ```javascript
mermaid.init({noteMargin: 10}, ".someOtherClass"); mermaid.init({ noteMargin: 10 }, '.someOtherClass');
``` ```
Or with no config object, and a jQuery selection: Or with no config object, and a jQuery selection:
```javascript ```javascript
mermaid.init(undefined, $("#someId .yetAnotherClass")); mermaid.init(undefined, $('#someId .yetAnotherClass'));
``` ```
```warning ```warning
@ -203,10 +200,16 @@ The example below show an outline of how this could be used. The example just lo
<script src="mermaid.js"></script> <script src="mermaid.js"></script>
<script> <script>
mermaid.mermaidAPI.initialize({ startOnLoad:false }); $(function(){ // Example of using the API var mermaid.mermaidAPI.initialize({ startOnLoad: false });
element = document.querySelector("#graphDiv"); var insertSvg = function(svgCode, bindFunctions){ $(function () {
element.innerHTML = svgCode; }; var graphDefinition = 'graph TB\na-->b'; var graph = // Example of using the API var
mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg); }); element = document.querySelector('#graphDiv');
var insertSvg = function (svgCode, bindFunctions) {
element.innerHTML = svgCode;
};
var graphDefinition = 'graph TB\na-->b';
var graph = mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
});
</script> </script>
``` ```
@ -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. bind events to an SVG when using the API for rendering.
```javascript ```javascript
var insertSvg = function(svgCode, bindFunctions) { var insertSvg = function (svgCode, bindFunctions) {
element.innerHTML = svgCode; element.innerHTML = svgCode;
if(typeof callback !== 'undefined'){ if (typeof callback !== 'undefined') {
callback(id); callback(id);
} }
bindFunctions(element); bindFunctions(element);
@ -229,8 +232,7 @@ var insertSvg = function(svgCode, bindFunctions) {
var id = 'theGraph'; var id = 'theGraph';
mermaidAPI.render(id, txt, insertSvg, element);
mermaidAPI.render(id,txt,insertSvg, element);
``` ```
1. The graph is generated using the render call. 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 ```javascript
var renderer = new marked.Renderer(); var renderer = new marked.Renderer();
renderer.code = function (code, language) { renderer.code = function (code, language) {
if(code.match(/^sequenceDiagram/)||code.match(/^graph/)){ if (code.match(/^sequenceDiagram/) || code.match(/^graph/)) {
return '<div class="mermaid">'+code+'</div>'; return '<div class="mermaid">' + code + '</div>';
} } else {
else{ return '<pre><code>' + code + '</code></pre>';
return '<pre><code>'+code+'</code></pre>';
} }
}; };
``` ```
@ -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: The code-example below in meta code illustrates how this could work:
```javascript ```javascript
mermaid.parseError = function(err,hash){ mermaid.parseError = function (err, hash) {
displayErrorInGui(err); displayErrorInGui(err);
}; };
var textFieldUpdated = function(){ var textFieldUpdated = function () {
var textStr = getTextFromFormField('code'); var textStr = getTextFromFormField('code');
if(mermaid.parse(textStr)){ if (mermaid.parse(textStr)) {
reRender(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. setting the options in mermaid.
1. Instantiation of the configuration using the initialize call 1. Instantiation of the configuration using the initialize call
2. *Using the global mermaid object* - **Deprecated** 2. _Using the global mermaid object_ - **Deprecated**
3. *using the global mermaid\_config object* - **Deprecated** 3. _using the global mermaid_config object_ - **Deprecated**
4. Instantiation of the configuration using the **mermaid.init** call- **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 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 ```html
<script src="../dist/mermaid.js"></script> <script src="../dist/mermaid.js"></script>
<script> <script>
var config = { startOnLoad:true, flowchart:{ useMaxWidth:false, htmlLabels:true } }; var config = { startOnLoad: true, flowchart: { useMaxWidth: false, htmlLabels: true } };
mermaid.initialize(config); mermaid.initialize(config);
</script> </script>
``` ```
@ -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 Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this
approach are: approach are:
* mermaid.startOnLoad - mermaid.startOnLoad
* mermaid.htmlLabels - mermaid.htmlLabels
```javascript ```javascript
mermaid.startOnLoad = true; 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. 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 It is possible to set some configuration via the mermaid object. The two parameters that are supported using this
approach are: approach are:
* mermaid\_config.startOnLoad - mermaid_config.startOnLoad
* mermaid\_config.htmlLabels - mermaid_config.htmlLabels
```javascript ```javascript
mermaid_config.startOnLoad = true; 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: To set some configuration via the mermaid object. The two parameters that are supported using this approach are:
* mermaid\_config.startOnLoad - mermaid_config.startOnLoad
* mermaid\_config.htmlLabels - mermaid_config.htmlLabels
```javascript ```javascript
mermaid_config.startOnLoad = true; mermaid_config.startOnLoad = true;