Fix Doc
This commit is contained in:
parent
bdeefb212e
commit
0a3042322f
|
@ -1,9 +1,6 @@
|
||||||
# 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
|
|
||||||
|
|
||||||
**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.
|
||||||
|
@ -46,22 +43,24 @@ 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>
|
<script>mermaid.initialize({startOnLoad:true});
|
||||||
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">graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);</div>
|
<div class="mermaid">
|
||||||
|
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
|
||||||
|
@ -73,13 +72,17 @@ locate the graph definitions inside the `div` tags with `class="mermaid"` and re
|
||||||
<!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">graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);</div>
|
<div class="mermaid">
|
||||||
|
graph LR
|
||||||
|
A --- B
|
||||||
|
B-->C[fa:fa-ban forbidden]
|
||||||
|
B-->D(fa:fa-spinner);
|
||||||
|
</div>
|
||||||
<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>
|
||||||
<script>
|
<script>mermaid.initialize({startOnLoad:true});
|
||||||
mermaid.initialize({ startOnLoad: true });
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
@ -102,15 +105,15 @@ 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.
|
||||||
|
@ -123,7 +126,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'
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -162,22 +165,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
|
||||||
|
@ -200,16 +203,10 @@ 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 });
|
mermaid.mermaidAPI.initialize({ startOnLoad:false }); $(function(){ // Example of using the API var
|
||||||
$(function () {
|
element = document.querySelector("#graphDiv"); var insertSvg = function(svgCode, bindFunctions){
|
||||||
// Example of using the API var
|
element.innerHTML = svgCode; }; var graphDefinition = 'graph TB\na-->b'; var graph =
|
||||||
element = document.querySelector('#graphDiv');
|
mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg); });
|
||||||
var insertSvg = function (svgCode, bindFunctions) {
|
|
||||||
element.innerHTML = svgCode;
|
|
||||||
};
|
|
||||||
var graphDefinition = 'graph TB\na-->b';
|
|
||||||
var graph = mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -232,6 +229,7 @@ var insertSvg = function (svgCode, bindFunctions) {
|
||||||
|
|
||||||
var id = 'theGraph';
|
var id = 'theGraph';
|
||||||
|
|
||||||
|
|
||||||
mermaidAPI.render(id,txt,insertSvg, element);
|
mermaidAPI.render(id,txt,insertSvg, element);
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -250,7 +248,8 @@ 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>';
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -301,7 +300,7 @@ var textFieldUpdated = function () {
|
||||||
var textStr = getTextFromFormField('code');
|
var textStr = getTextFromFormField('code');
|
||||||
|
|
||||||
if(mermaid.parse(textStr)){
|
if(mermaid.parse(textStr)){
|
||||||
reRender(textStr);
|
reRender(textStr)
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -317,8 +316,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
|
||||||
|
@ -348,8 +347,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;
|
||||||
|
@ -359,13 +358,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;
|
||||||
|
@ -379,8 +378,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;
|
||||||
|
|
Loading…
Reference in New Issue