marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-11 11:29:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

Review comments.

Browse Source
This commit is contained in:
Sidharth Vinod
2022-08-23 21:49:01 +05:30
parent 8d3617f0c7
commit 248a7aff7a
3 changed files with 105 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
docs/Setup.md
View File

@@ -80,8 +80,11 @@ Theme , the CSS style sheet
- **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
- **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. functionality is enabled
- **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This
prevent any JavaScript from 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.
## startOnLoad ## startOnLoad
@@ -1405,10 +1408,10 @@ This sets the auto-wrap padding for the diagram (sides only)
### Parameters ### Parameters
- `text` - `text`
- `dia` - `dia`
Returns **any** Returns **any**
## setSiteConfig ## setSiteConfig
@@ -1425,7 +1428,7 @@ function _Default value: At default, will mirror Global Config_
### Parameters ### Parameters
- `conf` The base currentConfig to use as siteConfig - `conf` The base currentConfig to use as siteConfig
Returns **[object][5]** The siteConfig Returns **[object][5]** The siteConfig
@@ -1471,34 +1474,6 @@ Returns **any** The currentConfig merged with the sanitized conf
Returns **any** The currentConfig Returns **any** The currentConfig
## render
Function that renders an svg with a graph from a chart definition. Usage example below.
```javascript
mermaidAPI.initialize({
startOnLoad: true,
});
$(function () {
const graphDefinition = 'graph TB\na-->b';
const cb = function (svgGraph) {
console.log(svgGraph);
};
mermaidAPI.render('id1', graphDefinition, cb);
});
```
### Parameters
- `id` **any** The id of the element to be rendered
- `_txt` **any** The graph definition
- `cb` **any** Callback which is called after rendering is finished with the svg code as inparam.
- `container` **any** Selector to element in which a div with the graph temporarily will be
inserted. In one is provided a hidden div will be inserted in the body of the page instead. The
element will be removed when rendering is completed.
Returns **any**
## sanitize ## sanitize
## sanitize ## sanitize
@@ -1514,6 +1489,34 @@ options in-place
- `options` **any** The potential setConfig parameter - `options` **any** The potential setConfig parameter
## render
Function that renders an svg with a graph from a chart definition. Usage example below.
```javascript
mermaidAPI.initialize({
startOnLoad: true,
});
$(function () {
const graphDefinition = 'graph TB\na-->b';
const cb = function (svgGraph) {
console.log(svgGraph);
};
mermaidAPI.render('id1', graphDefinition, cb);
});
```
### Parameters
- `id` **any** The id of the element to be rendered
- `_txt` **any** The graph definition
- `cb` **any** Callback which is called after rendering is finished with the svg code as inparam.
- `container` **any** Selector to element in which a div with the graph temporarily will be
inserted. If one is provided a hidden div will be inserted in the body of the page instead. The
element will be removed when rendering is completed.
Returns **any**
## addDirective ## addDirective
Pushes in a directive to the configuration Pushes in a directive to the configuration
@@ -1542,80 +1545,84 @@ Pushes in a directive to the configuration
### Parameters ### Parameters
- `conf` **any** - `conf` **any**
## initialize ## initialize
### Parameters ### Parameters
- `options` **any** - `options` **any**
## ##
## mermaidAPI configuration defaults ## mermaidAPI configuration defaults
```html ```html
<script> <script>
var config = { var config = {
theme: 'default', theme: 'default',
logLevel: 'fatal', logLevel: 'fatal',
securityLevel: 'strict', securityLevel: 'strict',
startOnLoad: true, startOnLoad: true,
arrowMarkerAbsolute: false, arrowMarkerAbsolute: false,
er: { er: {
diagramPadding: 20, diagramPadding: 20,
layoutDirection: 'TB', layoutDirection: 'TB',
minEntityWidth: 100, minEntityWidth: 100,
minEntityHeight: 75, minEntityHeight: 75,
entityPadding: 15, entityPadding: 15,
stroke: 'gray', stroke: 'gray',
fill: 'honeydew', fill: 'honeydew',
fontSize: 12, fontSize: 12,
useMaxWidth: true, useMaxWidth: true,
}, },
flowchart: { flowchart: {
diagramPadding: 8, diagramPadding: 8,
htmlLabels: true, htmlLabels: true,
curve: 'basis', curve: 'basis',
}, },
sequence: { sequence: {
diagramMarginX: 50, diagramMarginX: 50,
diagramMarginY: 10, diagramMarginY: 10,
actorMargin: 50, actorMargin: 50,
width: 150, width: 150,
height: 65, height: 65,
boxMargin: 10, boxMargin: 10,
boxTextMargin: 5, boxTextMargin: 5,
noteMargin: 10, noteMargin: 10,
messageMargin: 35, messageMargin: 35,
messageAlign: 'center', messageAlign: 'center',
mirrorActors: true, mirrorActors: true,
bottomMarginAdj: 1, bottomMarginAdj: 1,
useMaxWidth: true, useMaxWidth: true,
rightAngles: false, rightAngles: false,
showSequenceNumbers: false, showSequenceNumbers: false,
}, },
gantt: { gantt: {
titleTopMargin: 25, titleTopMargin: 25,
barHeight: 20, barHeight: 20,
barGap: 4, barGap: 4,
topPadding: 50, topPadding: 50,
leftPadding: 75, leftPadding: 75,
gridLineStartPadding: 35, gridLineStartPadding: 35,
fontSize: 11, fontSize: 11,
fontFamily: '"Open Sans", sans-serif', fontFamily: '"Open Sans", sans-serif',
numberSectionStyles: 4, numberSectionStyles: 4,
axisFormat: '%Y-%m-%d', axisFormat: '%Y-%m-%d',
topAxis: false, topAxis: false,
}, },
}; };
mermaid.initialize(config); mermaid.initialize(config);
</script> </script>
``` ```
[1]: https://github.com/mermaid-js/mermaid/blob/develop/src/mermaidAPI.js [1]: https://github.com/mermaid-js/mermaid/blob/develop/src/mermaidAPI.js
[2]: Setup.md?id=render [2]: Setup.md?id=render
[3]: 8.6.0_docs.md [3]: 8.6.0_docs.md
[4]: #mermaidapi-configuration-defaults [4]: #mermaidapi-configuration-defaults
[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object [5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object

9
src/defaultConfig.js
View File

@@ -64,9 +64,9 @@ const config = {
logLevel: 5, logLevel: 5,
/** /**
* | Parameter | Description | Type | Required | Values | * | Parameter | Description | Type | Required | Values |
* | ------------- | --------------------------------- | ------ | -------- | ------------------------------- | * | ------------- | --------------------------------- | ------ | -------- | ------------------------------------------ |
* | securitylevel | Level of trust for parsed diagram | string | Required | 'strict', 'loose', 'antiscript' | * | securityLevel | Level of trust for parsed diagram | string | Required | 'sandbox', 'strict', 'loose', 'antiscript' |
* *
* **Notes**: * **Notes**:
* *
@@ -74,6 +74,9 @@ const config = {
* - **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 * - **antiscript**: html tags in text are allowed, (only script element is removed), click
* functionality is enabled * functionality is enabled
* - **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This
* prevent any JavaScript from 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.
*/ */
securityLevel: 'strict', securityLevel: 'strict',

2
src/mermaidAPI.js
View File

@@ -141,7 +141,7 @@ export const decodeEntities = function (text) {
* @param {any} _txt The graph definition * @param {any} _txt The graph definition
* @param {any} cb Callback which is called after rendering is finished with the svg code as inparam. * @param {any} cb Callback which is called after rendering is finished with the svg code as inparam.
* @param {any} container Selector to element in which a div with the graph temporarily will be * @param {any} container Selector to element in which a div with the graph temporarily will be
* inserted. In one is provided a hidden div will be inserted in the body of the page instead. The * inserted. If one is provided a hidden div will be inserted in the body of the page instead. The
* element will be removed when rendering is completed. * element will be removed when rendering is completed.
* @returns {any} * @returns {any}
*/ */