` 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
@@ -72,16 +71,20 @@ 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);
+
+
+
+
```
@@ -101,20 +104,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.**
@@ -123,7 +126,7 @@ This changes the default behaviour of mermaid so that after upgrade to 8.2, unle
```javascript
mermaidAPI.initialize({
- securityLevel: 'loose',
+ securityLevel: 'loose'
});
```
@@ -133,7 +136,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();
});
```
@@ -141,7 +144,7 @@ $(document).load(function () {
or
```javascript
-$(document).ready(function () {
+$(document).ready(function() {
mermaid.initialize();
});
```
@@ -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
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
@@ -200,16 +203,10 @@ The example below show an outline of how this could be used. The example just lo
```
@@ -222,9 +219,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);
@@ -232,7 +229,8 @@ 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.
@@ -248,10 +246,11 @@ 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+'
';
}
};
```
@@ -293,15 +292,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)
}
};
@@ -317,8 +316,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
@@ -332,7 +331,7 @@ on what kind of integration you use.
```html
```
@@ -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
approach are:
-- mermaid.startOnLoad
-- mermaid.htmlLabels
+* mermaid.startOnLoad
+* mermaid.htmlLabels
```javascript
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.
```
-## 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;
@@ -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:
-- mermaid_config.startOnLoad
-- mermaid_config.htmlLabels
+* mermaid\_config.startOnLoad
+* mermaid\_config.htmlLabels
```javascript
mermaid_config.startOnLoad = true;
diff --git a/src/docs/index.html b/src/docs/index.html
index d808757c9..4845ed188 100644
--- a/src/docs/index.html
+++ b/src/docs/index.html
@@ -100,24 +100,12 @@
markdown: {
renderer: {
code: function (code, lang) {
- if (lang && (lang.startsWith('mermaid') || lang === 'mmd')) {
- var resultingHTML = '';
-
- if (lang === 'mmd' || lang === 'mermaid-example') {
- currentCodeExample++;
- colorize.push(currentCodeExample);
- resultingHTML +=
- '
' + escapeHTML(code) + '
';
- }
-
- if (lang === 'mermaid' || lang === 'mermaid-example') {
- resultingHTML +=
- '
' + mermaid.render('mermaid-svg-' + num++, code) + '
';
- }
-
- if (resultingHTML !== '') {
- return resultingHTML;
- }
+ if (lang === 'mermaid-example') {
+ currentCodeExample++;
+ colorize.push(currentCodeExample);
+ return '
' + escapeHTML(code) + '
';
+ } else if (lang === 'mermaid') {
+ return '
' + mermaid.render('mermaid-svg-' + num++, code) + '
';
}
return this.origin.code.apply(this, arguments);
},