2019-07-14 15:07:27 +02:00
|
|
|
<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
|
2019-07-12 20:40:54 +02:00
|
|
|
|
2019-07-14 15:07:27 +02:00
|
|
|
## mermaidAPI
|
2019-07-12 20:40:54 +02:00
|
|
|
|
2019-07-14 15:07:27 +02:00
|
|
|
This is the api to be used when handling the integration with the web page instead of using the default integration
|
|
|
|
(mermaid.js).
|
2019-07-12 20:40:54 +02:00
|
|
|
|
2019-07-14 15:07:27 +02:00
|
|
|
The core of this api is the **render** function that given a graph definitionas text renders the graph/diagram and
|
|
|
|
returns a svg element for the graph. It is is then up to the user of the API to make use of the svg, either insert it
|
|
|
|
somewhere in the page or something completely different.
|
2019-07-12 20:40:54 +02:00
|
|
|
|
|
|
|
## Configuration
|
|
|
|
|
|
|
|
These are the default options which can be overridden with the initialization call as in the example below:
|
|
|
|
|
2019-07-14 15:07:27 +02:00
|
|
|
mermaid.initialize({
|
|
|
|
flowchart:{
|
|
|
|
htmlLabels: false
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
## theme
|
|
|
|
|
|
|
|
theme , the CSS style sheet
|
2019-07-12 20:40:54 +02:00
|
|
|
|
2019-07-14 15:07:27 +02:00
|
|
|
**theme** - Choose one of the built-in themes: default, forest, dark or neutral. To disable any pre-defined mermaid theme, use "null".
|
|
|
|
**themeCSS** - Use your own CSS. This overrides **theme**.
|
|
|
|
|
|
|
|
"theme": "forest",
|
|
|
|
"themeCSS": ".node rect { fill: red; }"
|
2019-07-12 20:40:54 +02:00
|
|
|
|
|
|
|
## logLevel
|
|
|
|
|
2019-07-14 15:07:27 +02:00
|
|
|
This option decides the amount of logging to be used.
|
|
|
|
|
|
|
|
- debug: 1
|
|
|
|
- info: 2
|
|
|
|
- warn: 3
|
|
|
|
- error: 4
|
|
|
|
- fatal: (**default**) 5
|
|
|
|
|
|
|
|
## securityLevel
|
2019-07-12 20:40:54 +02:00
|
|
|
|
2019-07-14 15:07:27 +02:00
|
|
|
Sets the level of trust to be used on the parsed diagrams.
|
2019-07-12 20:40:54 +02:00
|
|
|
|
2019-07-14 15:07:27 +02:00
|
|
|
- **true**: (**default**) tags in text are encoded, click functionality is disabeled
|
|
|
|
- **false**: tags in text are allowed, click functionality is enabled
|
2019-07-12 20:40:54 +02:00
|
|
|
|
2019-07-14 15:07:27 +02:00
|
|
|
## startOnLoad
|
|
|
|
|
|
|
|
This options controls whether or mermaid starts when the page loads
|
|
|
|
**Default value true**.
|
|
|
|
|
|
|
|
## arrowMarkerAbsolute
|
|
|
|
|
|
|
|
This options controls whether or arrow markers in html code will be absolute paths or
|
|
|
|
an anchor, #. This matters if you are using base tag settings.
|
|
|
|
**Default value false**.
|
2019-07-12 20:40:54 +02:00
|
|
|
|
|
|
|
## flowchart
|
|
|
|
|
|
|
|
The object containing configurations specific for flowcharts
|
|
|
|
|
2019-07-14 15:07:27 +02:00
|
|
|
### htmlLabels
|
|
|
|
|
|
|
|
Flag for setting whether or not a html tag should be used for rendering labels
|
|
|
|
on the edges.
|
|
|
|
**Default value true**.
|
|
|
|
|
|
|
|
### curve
|
|
|
|
|
2019-08-20 20:07:12 +02:00
|
|
|
How mermaid renders curves for flowcharts. Possibel values are basis, linear and cardinal. **Default value linear**.
|
2019-07-12 20:40:54 +02:00
|
|
|
|
|
|
|
## sequence
|
|
|
|
|
|
|
|
The object containing configurations specific for sequence diagrams
|
|
|
|
|
2019-07-14 15:07:27 +02:00
|
|
|
### diagramMarginX
|
|
|
|
|
|
|
|
margin to the right and left of the sequence diagram
|
|
|
|
**Default value 50**.
|
|
|
|
|
|
|
|
### diagramMarginY
|
|
|
|
|
|
|
|
margin to the over and under the sequence diagram.
|
|
|
|
**Default value 10**.
|
|
|
|
|
|
|
|
### actorMargin
|
|
|
|
|
|
|
|
Margin between actors.
|
|
|
|
**Default value 50**.
|
|
|
|
|
|
|
|
### width
|
|
|
|
|
|
|
|
Width of actor boxes
|
|
|
|
**Default value 150**.
|
|
|
|
|
|
|
|
### height
|
|
|
|
|
|
|
|
Height of actor boxes
|
|
|
|
**Default value 65**.
|
|
|
|
|
|
|
|
### boxMargin
|
|
|
|
|
|
|
|
Margin around loop boxes
|
|
|
|
**Default value 10**.
|
|
|
|
|
|
|
|
### boxTextMargin
|
|
|
|
|
|
|
|
margin around the text in loop/alt/opt boxes
|
|
|
|
**Default value 5**.
|
|
|
|
|
|
|
|
### noteMargin
|
2019-07-12 20:40:54 +02:00
|
|
|
|
2019-07-14 15:07:27 +02:00
|
|
|
margin around notes.
|
|
|
|
**Default value 10**.
|
|
|
|
|
|
|
|
### messageMargin
|
|
|
|
|
|
|
|
Space between messages.
|
|
|
|
**Default value 35**.
|
|
|
|
|
|
|
|
### mirrorActors
|
|
|
|
|
|
|
|
mirror actors under diagram.
|
|
|
|
**Default value true**.
|
|
|
|
|
|
|
|
### bottomMarginAdj
|
|
|
|
|
|
|
|
Depending on css styling this might need adjustment.
|
|
|
|
Prolongs the edge of the diagram downwards.
|
|
|
|
**Default value 1**.
|
|
|
|
|
|
|
|
### useMaxWidth
|
|
|
|
|
|
|
|
when this flag is set the height and width is set to 100% and is then scaling with the
|
|
|
|
available space if not the absolute space required is used.
|
|
|
|
**Default value true**.
|
|
|
|
|
|
|
|
### rightAngles
|
|
|
|
|
|
|
|
This will display arrows that start and begin at the same node as right angles, rather than a curve
|
|
|
|
**Default value false**.
|
|
|
|
|
|
|
|
### showSequenceNumbers
|
|
|
|
|
|
|
|
This will show the node numbers
|
|
|
|
**Default value false**.
|
2019-07-12 20:40:54 +02:00
|
|
|
|
|
|
|
## gantt
|
|
|
|
|
2019-07-14 15:07:27 +02:00
|
|
|
The object containing configurations specific for gantt diagrams\*
|
|
|
|
|
|
|
|
### titleTopMargin
|
2019-07-12 20:40:54 +02:00
|
|
|
|
2019-07-14 15:07:27 +02:00
|
|
|
Margin top for the text over the gantt diagram
|
|
|
|
**Default value 25**.
|
2019-07-12 20:40:54 +02:00
|
|
|
|
2019-07-14 15:07:27 +02:00
|
|
|
### barHeight
|
2019-07-12 20:40:54 +02:00
|
|
|
|
2019-07-14 15:07:27 +02:00
|
|
|
The height of the bars in the graph
|
|
|
|
**Default value 20**.
|
2019-07-12 20:40:54 +02:00
|
|
|
|
2019-07-14 15:07:27 +02:00
|
|
|
### barGap
|
2019-07-12 20:40:54 +02:00
|
|
|
|
2019-07-14 15:07:27 +02:00
|
|
|
The margin between the different activities in the gantt diagram.
|
|
|
|
**Default value 4**.
|
2019-07-12 20:40:54 +02:00
|
|
|
|
2019-07-14 15:07:27 +02:00
|
|
|
### topPadding
|
2019-07-12 20:40:54 +02:00
|
|
|
|
2019-07-14 15:07:27 +02:00
|
|
|
Margin between title and gantt diagram and between axis and gantt diagram.
|
|
|
|
**Default value 50**.
|
2019-07-12 20:40:54 +02:00
|
|
|
|
2019-07-14 15:07:27 +02:00
|
|
|
### leftPadding
|
|
|
|
|
|
|
|
The space allocated for the section name to the left of the activities.
|
|
|
|
**Default value 75**.
|
|
|
|
|
|
|
|
### gridLineStartPadding
|
|
|
|
|
|
|
|
Vertical starting position of the grid lines.
|
|
|
|
**Default value 35**.
|
|
|
|
|
|
|
|
### fontSize
|
|
|
|
|
|
|
|
Font size ...
|
|
|
|
**Default value 11**.
|
|
|
|
|
|
|
|
### fontFamily
|
|
|
|
|
|
|
|
font family ...
|
|
|
|
**Default value '"Open-Sans", "sans-serif"'**.
|
|
|
|
|
|
|
|
### numberSectionStyles
|
|
|
|
|
|
|
|
The number of alternating section styles.
|
|
|
|
**Default value 4**.
|
|
|
|
|
|
|
|
### axisFormat
|
|
|
|
|
|
|
|
Datetime format of the axis, this might need adjustment to match your locale and preferences
|
|
|
|
**Default value '%Y-%m-%d'**.
|
2019-07-12 20:40:54 +02:00
|
|
|
|
|
|
|
## render
|
|
|
|
|
2019-07-14 15:07:27 +02:00
|
|
|
Function that renders an svg with a graph from a chart definition. Usage example below.
|
2019-07-12 20:40:54 +02:00
|
|
|
|
2019-07-14 15:07:27 +02:00
|
|
|
```js
|
2019-07-12 20:40:54 +02:00
|
|
|
mermaidAPI.initialize({
|
2019-07-14 15:07:27 +02:00
|
|
|
startOnLoad:true
|
|
|
|
});
|
|
|
|
$(function(){
|
|
|
|
const graphDefinition = 'graph TB\na-->b';
|
|
|
|
const cb = function(svgGraph){
|
|
|
|
console.log(svgGraph);
|
|
|
|
};
|
|
|
|
mermaidAPI.render('id1',graphDefinition,cb);
|
|
|
|
});
|
2019-07-12 20:40:54 +02:00
|
|
|
```
|
2019-07-14 15:07:27 +02:00
|
|
|
|
|
|
|
### Parameters
|
|
|
|
|
|
|
|
- `id` the id of the element to be rendered
|
|
|
|
- `txt` the graph definition
|
|
|
|
- `cb` callback which is called after rendering is finished with the svg code as inparam.
|
|
|
|
- `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 element will be removed when rendering is
|
|
|
|
completed.
|