2019-07-14 06:07:27 -07:00
<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
2019-07-12 20:40:54 +02:00
2019-07-14 06:07:27 -07:00
## mermaidAPI
2019-07-12 20:40:54 +02:00
2019-08-28 21:55:35 +02:00
This is the api to be used when optionally handling the integration with the web page, instead of using the default integration provided by mermaid.js.
2019-07-12 20:40:54 +02:00
2019-09-11 20:03:22 +02:00
The core of this api is the [**render**][1] function which, given a graph
definition as text, renders the graph/diagram and returns an svg element for the graph.
2019-08-28 21:50:44 +02:00
2019-08-28 21:55:35 +02:00
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 do something completely different.
2019-08-28 21:56:27 +02:00
In addition to the render function, a number of behavioral configuration options are available.
2019-07-12 20:40:54 +02:00
## Configuration
2020-07-13 16:39:52 +02:00
**Configuration methods in Mermaid version 8.6.0 have been updated, to learn more\[[click here][2]].**
2020-07-09 11:15:50 -07:00
## **What follows are config instructions for older versions**
2019-07-12 20:40:54 +02:00
2019-08-28 22:01:19 +02:00
These are the default options which can be overridden with the initialization call like so:
2019-09-11 20:03:22 +02:00
**Example 1:**
< pre >
mermaid.initialize({
flowchart:{
2020-01-12 14:38:57 +01:00
htmlLabels: false
2019-09-11 20:03:22 +02:00
}
});
< / pre >
**Example 2:**
< pre >
2020-01-12 14:38:57 +01:00
< script>
2019-09-11 20:03:22 +02:00
var config = {
startOnLoad:true,
flowchart:{
useMaxWidth:true,
htmlLabels:true,
curve:'cardinal',
},
securityLevel:'loose',
};
mermaid.initialize(config);
2020-01-12 14:38:57 +01:00
< /script>
2019-09-11 20:03:22 +02:00
< / pre >
2020-01-12 14:38:57 +01:00
2020-07-13 16:39:52 +02:00
A summary of all options and their defaults is found [here][3]. A description of each option follows below.
2019-08-28 22:01:19 +02:00
2019-07-14 06:07:27 -07:00
## theme
theme , the CSS style sheet
2019-07-12 20:40:54 +02:00
2020-07-02 16:59:09 +02:00
theme , the CSS style sheet
2020-07-09 11:15:50 -07:00
2020-07-13 16:39:52 +02:00
| Parameter | Description | Type | Required | Values |
| --------- | --------------- | ------ | -------- | ---------------------------------------------------- |
| Theme | Built in Themes | String | Optional | Values include, default, forest, dark, neutral, null |
2020-07-09 11:15:50 -07:00
2020-07-02 16:59:09 +02:00
**Notes:**To disable any pre-defined mermaid theme, use "null".
2019-07-14 06:07:27 -07:00
2019-09-11 20:03:22 +02:00
< pre >
"theme": "forest",
"themeCSS": ".node rect { fill: red; }"
< / pre >
2019-07-12 20:40:54 +02:00
2019-10-13 19:16:35 +02:00
## fontFamily
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| ---------- | ------------------------------------------------------ | ------ | -------- | ----------------------------- |
| fontFamily | specifies the font to be used in the rendered diagrams | String | Required | Verdana, Arial, Trebuchet MS, |
\*\*notes: Default value is \\"trebuchet ms\\".
2019-10-13 19:16:35 +02:00
2019-07-12 20:40:54 +02:00
## logLevel
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| --------- | ----------------------------------------------------- | ------ | -------- | ------------- |
| logLevel | This option decides the amount of logging to be used. | String | Required | 1, 2, 3, 4, 5 |
**Notes:**
2019-07-14 06:07:27 -07:00
2020-07-02 16:59:09 +02:00
- debug: 1.
- info: 2.
- warn: 3.
- error: 4.
- fatal: 5(default).
2019-07-14 06:07:27 -07:00
## securityLevel
2019-07-12 20:40:54 +02:00
2020-07-15 12:12:57 +02:00
| Parameter | Description | Type | Required | Values |
| ------------- | --------------------------------- | ------ | -------- | ------------------------- |
| securitylevel | Level of trust for parsed diagram | String | Required | Strict, Loose, antiscript |
2020-07-02 16:59:09 +02:00
\*\*Notes:
2019-07-12 20:40:54 +02:00
2019-10-04 22:03:20 -04:00
- **strict** : (**default**) tags in text are encoded, click functionality is disabeled
2019-08-28 21:08:27 +02:00
- **loose** : tags in text are allowed, click functionality is enabled
2020-07-15 12:12:57 +02:00
- **antiscript** : html tags in text are allowed, (only script element is removed), click functionality is enabled
2019-07-12 20:40:54 +02:00
2019-07-14 06:07:27 -07:00
## startOnLoad
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| ----------- | --------------------------------------------- | ------- | -------- | ----------- |
| startOnLoad | Dictates whether mermaind starts on Page load | Boolean | Required | True, False |
**Notes:**
**Default value: true**
2019-07-14 06:07:27 -07:00
## arrowMarkerAbsolute
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| ------------------- | ---------------------------------------------------------------------------- | ------- | -------- | ----------- |
| arrowMarkerAbsolute | Controls whether or arrow markers in html code are absolute paths or anchors | Boolean | Required | True, False |
## Notes\*\*: This matters if you are using base tag settings.
**Default value: false**.
2019-07-12 20:40:54 +02:00
2020-07-04 14:25:14 +02:00
## secure
This option controls which currentConfig keys are considered _secure_ and can only be changed via
call to mermaidAPI.initialize. Calls to mermaidAPI.reinitialize cannot make changes to
the `secure` keys in the current currentConfig. This prevents malicious graph directives from
overriding a site's default security.
2019-07-12 20:40:54 +02:00
## flowchart
The object containing configurations specific for flowcharts
2020-07-11 18:59:43 +10:00
### diagramPadding
| Parameter | Description | Type | Required | Values |
| -------------- | ----------------------------------------------- | ------- | -------- | ------------------ |
| diagramPadding | amount of padding around the diagram as a whole | Integer | Required | Any Positive Value |
**Notes:**The amount of padding around the diagram as a whole so that embedded diagrams have margins, expressed in pixels
**Default value: 8**.
2019-07-14 06:07:27 -07:00
### htmlLabels
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| ---------- | -------------------------------------------------------------------------------------------- | ------- | -------- | ----------- |
| htmlLabels | Flag for setting whether or not a html tag should be used for rendering labels on the edges. | Boolean | Required | True, False |
**Notes: Default value: true**.
2019-07-14 06:07:27 -07:00
2020-01-12 14:09:24 +01:00
### nodeSpacing
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| ----------- | --------------------------------------------------- | ------- | -------- | -------------------- |
| nodeSpacing | Defines the spacing between nodes on the same level | Integer | Required | Any positive Numbers |
**Notes:
Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs, and the vertical spacing for LR as well as RL graphs.**
2020-01-12 14:09:24 +01:00
**Default value 50**.
### rankSpacing
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| ----------- | ----------------------------------------------------- | ------- | -------- | -------------------- |
| rankSpacing | Defines the spacing between nodes on different levels | Integer | Required | Any Positive Numbers |
**Notes: pertains to vertical spacing for TB (top to bottom) or BT (bottom to top), and the horizontal spacing for LR as well as RL graphs.
**Default value 50\*\*.
2020-01-12 14:09:24 +01:00
2019-07-14 06:07:27 -07:00
### curve
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| --------- | -------------------------------------------------- | ------ | -------- | ----------------------- |
| curve | Defines how mermaid renders curves for flowcharts. | String | Required | Basis, Linear, Cardinal |
2019-09-11 20:03:22 +02:00
2020-07-02 16:59:09 +02:00
**Notes:
Default Vaue: Linear**
2019-07-12 20:40:54 +02:00
## sequence
The object containing configurations specific for sequence diagrams
2020-07-04 14:25:14 +02:00
### activationWidth
widt of the activation rect
**Default value 10**.
2019-07-14 06:07:27 -07:00
### diagramMarginX
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| -------------- | ---------------------------------------------------- | ------- | -------- | ------------------- |
| diagramMarginX | margin to the right and left of the sequence diagram | Integer | Required | Any Positive Values |
**Notes:**
2019-07-14 06:07:27 -07:00
**Default value 50**.
### diagramMarginY
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| -------------- | ------------------------------------------------- | ------- | -------- | ------------------- |
| diagramMarginY | Margin to the over and under the sequence diagram | Integer | Required | Any Positive Values |
**Notes:**
2019-07-14 06:07:27 -07:00
**Default value 10**.
### actorMargin
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| ----------- | ---------------------- | ------- | -------- | ------------------ |
| actorMargin | Margin between actors. | Integer | Required | Any Positive Value |
**Notes:**
2019-07-14 06:07:27 -07:00
**Default value 50**.
### width
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| --------- | -------------------- | ------- | -------- | ------------------ |
| width | Width of actor boxes | Integer | Required | Any Positive Value |
**Notes:**
2019-07-14 06:07:27 -07:00
**Default value 150**.
### height
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| --------- | --------------------- | ------- | -------- | ------------------ |
| height | Height of actor boxes | Integer | Required | Any Positive Value |
**Notes:**
**Default value 65**..
2019-07-14 06:07:27 -07:00
### boxMargin
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| --------- | ------------------------ | ------- | -------- | ------------------ |
| boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |
**Notes:**
2019-07-14 06:07:27 -07:00
**Default value 10**.
### boxTextMargin
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| ------------- | -------------------------------------------- | ------- | -------- | ------------------ |
| boxTextMargin | margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value |
**Notes:**
2019-07-14 06:07:27 -07:00
**Default value 5**.
### noteMargin
2019-07-12 20:40:54 +02:00
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| ---------- | -------------------- | ------- | -------- | ------------------ |
| noteMargin | margin around notes. | Integer | Required | Any Positive Value |
**Notes:**
2019-07-14 06:07:27 -07:00
**Default value 10**.
### messageMargin
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| ------------- | ----------------------- | ------- | -------- | ------------------ |
| messageMargin | Space between messages. | Integer | Required | Any Positive Value |
**Notes:**
2019-07-14 06:07:27 -07:00
Space between messages.
**Default value 35**.
2020-03-24 22:14:19 +01:00
### messageAlign
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| ------------ | --------------------------- | ------- | -------- | ------------------- |
| messageAlign | Multiline message alignment | Integer | Required | left, center, right |
2020-03-24 22:14:19 +01:00
2020-07-02 16:59:09 +02:00
**Notes:**center **default**
2020-03-24 22:14:19 +01:00
2019-07-14 06:07:27 -07:00
### mirrorActors
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| ------------ | ---------------------------- | ------- | -------- | ----------- |
| mirrorActors | mirror actors under diagram. | Boolean | Required | True, False |
**Notes:**
2019-07-14 06:07:27 -07:00
**Default value true**.
### bottomMarginAdj
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| --------------- | ------------------------------------------- | ------- | -------- | ------------------ |
| bottomMarginAdj | Prolongs the edge of the diagram downwards. | Integer | Required | Any Positive Value |
**Notes:**Depending on css styling this might need adjustment.
2019-07-14 06:07:27 -07:00
**Default value 1**.
### useMaxWidth
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| ----------- | ----------- | ------- | -------- | ----------- |
| useMaxWidth | See Notes | Boolean | Required | True, False |
**Notes:**
when this flag is set to true, the height and width is set to 100% and is then scaling with the
available space. If set to false, the absolute space required is used.
**Default value: True**.
2019-07-14 06:07:27 -07:00
### rightAngles
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| ----------- | ------------------------------------ | ------- | -------- | ----------- |
| rightAngles | display curve arrows as right angles | Boolean | Required | True, False |
**Notes:**
2019-07-14 06:07:27 -07:00
This will display arrows that start and begin at the same node as right angles, rather than a curve
**Default value false**.
### showSequenceNumbers
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| ------------------- | ------------------------------- | ------- | -------- | ----------- |
| showSequenceNumbers | This will show the node numbers | Boolean | Required | True, False |
**Notes:**
2019-07-14 06:07:27 -07:00
**Default value false**.
2019-07-12 20:40:54 +02:00
2020-04-28 08:28:16 +01:00
### actorFontSize
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| ------------- | -------------------------------------------------- | ------- | -------- | ------------------ |
| actorFontSize | This sets the font size of the actor's description | Integer | Require | Any Positive Value |
**Notes:**
**Default value 14**..
2020-04-28 08:28:16 +01:00
### actorFontFamily
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| --------------- | ---------------------------------------------------- | ---- | -------- | --------------------- |
| actorFontFamily | This sets the font family of the actor's description | 3 | 4 | Open-Sans, Sans-Serif |
**Notes:**
2020-04-28 08:28:16 +01:00
**Default value "Open-Sans", "sans-serif"**.
2020-06-08 14:48:03 -04:00
### actorFontWeight
This sets the font weight of the actor's description
\*\*Default value 400.
2020-04-28 08:28:16 +01:00
### noteFontSize
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| ------------ | ------------------------------------------------ | ------- | -------- | ------------------ |
| noteFontSize | This sets the font size of actor-attached notes. | Integer | Required | Any Positive Value |
**Notes:**
**Default value 14**..
2020-04-28 08:28:16 +01:00
### noteFontFamily
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| -------------- | -------------------------------------------------- | ------ | -------- | ---------------------------- |
| noteFontFamily | This sets the font family of actor-attached notes. | String | Required | trebuchet ms, verdana, arial |
**Notes:**
**Default value: trebuchet ms ** .
2020-04-28 08:28:16 +01:00
2020-06-08 14:48:03 -04:00
### noteFontWeight
This sets the font weight of the note's description
\*\*Default value 400.
2020-04-28 08:28:16 +01:00
### noteAlign
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| --------- | ----------------------------------------------------- | ------ | -------- | ------------------- |
| noteAlign | This sets the text alignment of actor-attached notes. | string | required | left, center, right |
**Notes:**
2020-04-28 08:28:16 +01:00
**Default value center**.
### messageFontSize
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| --------------- | ------------------------------------------ | ------- | -------- | ------------------- |
| messageFontSize | This sets the font size of actor messages. | Integer | Required | Any Positive Number |
**Notes:**
2020-04-28 08:28:16 +01:00
**Default value 16**.
### messageFontFamily
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| ----------------- | -------------------------------------------- | ------ | -------- | ---------------------------- |
| messageFontFamily | This sets the font family of actor messages. | String | Required | trebuchet ms", verdana, aria |
**Notes:**
**Default value:"trebuchet ms**.
2020-04-28 08:28:16 +01:00
2020-06-08 14:48:03 -04:00
### messageFontWeight
This sets the font weight of the message's description
\*\*Default value 400.
2020-07-04 14:25:14 +02:00
### wrap
2020-06-08 14:48:03 -04:00
This sets the auto-wrap state for the diagram
\*\*Default value false.
### wrapPadding
This sets the auto-wrap padding for the diagram (sides only)
2020-07-04 14:25:14 +02:00
\*\*Default value 10.
### labelBoxWidth
This sets the width of the loop-box (loop, alt, opt, par)
\*\*Default value 50.
### labelBoxHeight
This sets the height of the loop-box (loop, alt, opt, par)
\*\*Default value 20.
2020-06-08 14:48:03 -04:00
2019-07-12 20:40:54 +02:00
## gantt
2019-07-14 06:07:27 -07:00
The object containing configurations specific for gantt diagrams\*
### titleTopMargin
2019-07-12 20:40:54 +02:00
2020-07-02 16:59:09 +02:00
### titleTopMargin
| Parameter | Description | Type | Required | Values |
| -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
| titleTopMargin | Margin top for the text over the gantt diagram | Integer | Required | Any Positive Value |
**Notes:**
2019-07-14 06:07:27 -07:00
**Default value 25**.
2019-07-12 20:40:54 +02:00
2019-07-14 06:07:27 -07:00
### barHeight
2019-07-12 20:40:54 +02:00
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| --------- | ----------------------------------- | ------- | -------- | ------------------ |
| barHeight | The height of the bars in the graph | Integer | Required | Any Positive Value |
**Notes:**
2019-07-14 06:07:27 -07:00
**Default value 20**.
2019-07-12 20:40:54 +02:00
2019-07-14 06:07:27 -07:00
### barGap
2019-07-12 20:40:54 +02:00
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| --------- | ----------------------------------------------------------------- | ------- | -------- | ------------------ |
| barGap | The margin between the different activities in the gantt diagram. | Integer | Optional | Any Positive Value |
**Notes:**
2019-07-14 06:07:27 -07:00
**Default value 4**.
2019-07-12 20:40:54 +02:00
2019-07-14 06:07:27 -07:00
### topPadding
2019-07-12 20:40:54 +02:00
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| ---------- | -------------------------------------------------------------------------- | ------- | -------- | ------------------ |
| topPadding | Margin between title and gantt diagram and between axis and gantt diagram. | Integer | Required | Any Positive Value |
**Notes:**
2019-07-14 06:07:27 -07:00
**Default value 50**.
2019-07-12 20:40:54 +02:00
2019-07-14 06:07:27 -07:00
### leftPadding
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| ----------- | ----------------------------------------------------------------------- | ------- | -------- | ------------------ |
| leftPadding | The space allocated for the section name to the left of the activities. | Integer | Required | Any Positive Value |
**Notes:**
2019-07-14 06:07:27 -07:00
**Default value 75**.
### gridLineStartPadding
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| -------------------- | --------------------------------------------- | ------- | -------- | ------------------ |
| gridLineStartPadding | Vertical starting position of the grid lines. | Integer | Required | Any Positive Value |
**Notes:**
2019-07-14 06:07:27 -07:00
**Default value 35**.
### fontSize
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| --------- | ----------- | ------- | -------- | ------------------ |
| fontSize | Font size | Integer | Required | Any Positive Value |
**Notes:**
2019-07-14 06:07:27 -07:00
**Default value 11**.
### fontFamily
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| ---------- | ----------- | ------ | -------- | ------------------------- |
| fontFamily | font Family | string | required | "Open-Sans", "sans-serif" |
**Notes:**
2019-07-14 06:07:27 -07:00
**Default value '"Open-Sans", "sans-serif"'**.
### numberSectionStyles
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| ------------------- | ---------------------------------------- | ------- | -------- | ------------------ |
| numberSectionStyles | The number of alternating section styles | Integer | 4 | Any Positive Value |
**Notes:**
2019-07-14 06:07:27 -07:00
**Default value 4**.
### axisFormat
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| ---------- | ---------------------------- | ---- | -------- | ---------------- |
| axisFormat | Datetime format of the axis. | 3 | Required | Date in yy-mm-dd |
**Notes:**
This might need adjustment to match your locale and preferences
2019-07-14 06:07:27 -07:00
**Default value '%Y-%m-%d'**.
2019-07-12 20:40:54 +02:00
2020-04-28 08:28:16 +01:00
## journey
The object containing configurations specific for sequence diagrams
### diagramMarginX
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ |
| diagramMarginX | margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value |
**Notes:**
2020-04-28 08:28:16 +01:00
**Default value 50**.
### diagramMarginY
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| -------------- | -------------------------------------------------- | ------- | -------- | ------------------ |
| diagramMarginY | margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value |
**Notes:**
**Default value 10**..
2020-04-28 08:28:16 +01:00
### actorMargin
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| ----------- | ---------------------- | ------- | -------- | ------------------ |
| actorMargin | Margin between actors. | Integer | Required | Any Positive Value |
**Notes:**
2020-04-28 08:28:16 +01:00
**Default value 50**.
### width
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| --------- | -------------------- | ------- | -------- | ------------------ |
| width | Width of actor boxes | Integer | Required | Any Positive Value |
**Notes:**
2020-04-28 08:28:16 +01:00
**Default value 150**.
### height
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| --------- | --------------------- | ------- | -------- | ------------------ |
| height | Height of actor boxes | Integer | Required | Any Positive Value |
**Notes:**
2020-04-28 08:28:16 +01:00
**Default value 65**.
### boxMargin
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| --------- | ------------------------ | ------- | -------- | ------------------ |
| boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |
**Notes:**
2020-04-28 08:28:16 +01:00
**Default value 10**.
### boxTextMargin
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| ------------- | -------------------------------------------- | ------- | -------- | ------------------ |
| boxTextMargin | margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value |
**Notes:**
2020-04-28 08:28:16 +01:00
### noteMargin
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| ---------- | -------------------- | ------- | -------- | ------------------ |
| noteMargin | margin around notes. | Integer | Required | Any Positive Value |
**Notes:**
2020-04-28 08:28:16 +01:00
**Default value 10**.
### messageMargin
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| ------------- | ----------------------- | ------- | -------- | ------------------ |
| messageMargin | Space between messages. | Integer | Required | Any Positive Value |
**Notes:**
2020-04-28 08:28:16 +01:00
Space between messages.
**Default value 35**.
### messageAlign
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| ------------ | --------------------------- | ---- | -------- | ------------------- |
| messageAlign | Multiline message alignment | 3 | 4 | left, center, right |
2020-04-28 08:28:16 +01:00
2020-07-02 16:59:09 +02:00
**Notes:**default:center\*\*
2020-04-28 08:28:16 +01:00
### bottomMarginAdj
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| --------------- | ------------------------------------------- | ------- | -------- | ------------------ |
| bottomMarginAdj | Prolongs the edge of the diagram downwards. | Integer | 4 | Any Positive Value |
**Notes:**Depending on css styling this might need adjustment.
2020-04-28 08:28:16 +01:00
**Default value 1**.
### useMaxWidth
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| ----------- | ----------- | ------- | -------- | ----------- |
| useMaxWidth | See notes | Boolean | 4 | True, False |
**Notes:**when this flag is set the height and width is set to 100% and is then scaling with the
2020-04-28 08:28:16 +01:00
available space if not the absolute space required is used.
2020-07-02 16:59:09 +02:00
2020-04-28 08:28:16 +01:00
**Default value true**.
### rightAngles
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| ----------- | ---------------------------------- | ---- | -------- | ----------- |
| rightAngles | Curved Arrows become Right Angles, | 3 | 4 | True, False |
**Notes:**This will display arrows that start and begin at the same node as right angles, rather than a curves
2020-04-28 08:28:16 +01:00
**Default value false**.
2020-04-11 18:02:05 +02:00
## er
The object containing configurations specific for entity relationship diagrams
### diagramPadding
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| -------------- | ----------------------------------------------- | ------- | -------- | ------------------ |
| diagramPadding | amount of padding around the diagram as a whole | Integer | Required | Any Positive Value |
**Notes:**The amount of padding around the diagram as a whole so that embedded diagrams have margins, expressed in pixels
**Default value: 20**.
2020-04-11 18:02:05 +02:00
### layoutDirection
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| --------------- | ---------------------------------------- | ------ | -------- | -------------------- |
| layoutDirection | Directional bias for layout of entities. | String | Required | "TB", "BT","LR","RL" |
**Notes:**
'TB' for Top-Bottom, 'BT'for Bottom-Top, 'LR' for Left-Right, or 'RL' for Right to Left.
T = top, B = bottom, L = left, and R = right.
**Default value: TB ** .
2020-04-11 18:02:05 +02:00
### minEntityWidth
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| -------------- | ----------------------------------- | ------- | -------- | ------------------ |
| minEntityWidth | The mimimum width of an entity box, | Integer | Required | Any Positive Value |
**Notes:**expressed in pixels
**Default value: 100**.
2020-04-11 18:02:05 +02:00
### minEntityHeight
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| --------------- | ------------------------------------ | ------- | -------- | ------------------ |
| minEntityHeight | The minimum height of an entity box, | Integer | 4 | Any Positive Value |
**Notes:**expressed in pixels
**Default value: 75 **
2020-04-11 18:02:05 +02:00
### entityPadding
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| ------------- | ------------------------------------------------------------ | ------- | -------- | ------------------ |
| entityPadding | minimum internal padding betweentext in box and box borders | Integer | 4 | Any Positive Value |
**Notes:**The minimum internal padding betweentext in an entity box and the enclosing box borders, expressed in pixels.
**Default value: 15 **
2020-04-11 18:02:05 +02:00
### stroke
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| --------- | ----------------------------------- | ------ | -------- | -------------------- |
| stroke | Stroke color of box edges and lines | String | 4 | Any recognized color |
**Default value: gray **
2020-04-11 18:02:05 +02:00
### fill
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| --------- | -------------------------- | ------ | -------- | -------------------- |
| fill | Fill color of entity boxes | String | 4 | Any recognized color |
**Notes:**
**Default value:'honeydew'**
2020-04-11 18:02:05 +02:00
### fontSize
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| --------- | ------------------- | ------- | -------- | ------------------ |
| fontSize | Font Size in pixels | Integer | | Any Positive Value |
2020-07-11 18:54:26 +10:00
**Notes:**Font size (expressed as an integer representing a number of pixels)
2020-07-02 16:59:09 +02:00
**Default value: 12 **
2020-04-11 18:02:05 +02:00
2020-07-11 18:54:26 +10:00
### useMaxWidth
| Parameter | Description | Type | Required | Values |
| ----------- | ----------- | ------- | -------- | ----------- |
| useMaxWidth | See Notes | Boolean | Required | true, false |
**Notes:**
When this flag is set to true, the diagram width is locked to 100% and
scaled based on available space. If set to false, the diagram reserves its
absolute width.
**Default value: true**.
2019-07-12 20:40:54 +02:00
## render
2019-07-14 06:07:27 -07: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 06:07:27 -07:00
```js
2019-07-12 20:40:54 +02:00
mermaidAPI.initialize({
2019-07-14 06:07:27 -07: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 06:07:27 -07:00
### Parameters
- `id` the id of the element to be rendered
2020-06-17 05:54:24 -04:00
- `_txt` the graph definition
2019-07-14 06:07:27 -07:00
- `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.
2019-08-28 21:50:44 +02:00
2020-07-11 18:59:43 +10:00
##
2019-09-11 20:03:22 +02:00
2019-08-28 21:57:10 +02:00
## mermaidAPI configuration defaults
2019-09-11 20:03:22 +02:00
< pre >
2019-08-28 21:50:44 +02:00
2019-11-07 23:15:53 +01:00
< script>
2019-09-11 20:03:22 +02:00
var config = {
theme:'default',
logLevel:'fatal',
securityLevel:'strict',
startOnLoad:true,
arrowMarkerAbsolute:false,
2020-07-11 20:50:36 +10:00
er:{
diagramPadding:20,
layoutDirection:'TB',
minEntityWidth:100,
minEntityHeight:75,
entityPadding:15,
stroke:'gray',
fill:'honeydew',
fontSize:12,
useMaxWidth:true,
},
2019-09-11 20:03:22 +02:00
flowchart:{
2020-07-11 16:54:00 +10:00
diagramPadding:8,
2019-09-18 13:05:08 +02:00
htmlLabels:true,
2019-09-11 20:03:22 +02:00
curve:'linear',
},
sequence:{
diagramMarginX:50,
diagramMarginY:10,
actorMargin:50,
width:150,
height:65,
boxMargin:10,
boxTextMargin:5,
noteMargin:10,
messageMargin:35,
2020-04-11 18:02:05 +02:00
messageAlign:'center',
2019-09-11 20:03:22 +02:00
mirrorActors:true,
bottomMarginAdj:1,
useMaxWidth:true,
rightAngles:false,
showSequenceNumbers:false,
},
gantt:{
titleTopMargin:25,
barHeight:20,
barGap:4,
topPadding:50,
leftPadding:75,
gridLineStartPadding:35,
fontSize:11,
fontFamily:'"Open-Sans", "sans-serif"',
numberSectionStyles:4,
axisFormat:'%Y-%m-%d',
}
};
mermaid.initialize(config);
2019-11-07 23:15:53 +01:00
< /script>
2019-09-11 20:03:22 +02:00
< / pre >
2020-07-04 14:25:14 +02:00
## setSiteConfig
2020-07-16 12:17:21 +02:00
## setSiteConfig
| Function | Description | Type | Values |
| ------------- | ------------------------------------- | ----------- | --------------------------------------- |
| setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array |
**Notes:**
2020-07-04 14:25:14 +02:00
Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset
the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) will reset siteConfig and currentConfig
to the defaultConfig
Note: currentConfig is set in this function
2020-07-16 12:17:21 +02:00
\*Default value: At default, will mirror Global Config\*\*
2020-07-04 14:25:14 +02:00
### Parameters
- `conf` the base currentConfig to use as siteConfig
Returns **any** the siteConfig
## getSiteConfig
2020-07-16 12:17:21 +02:00
## getSiteConfig
| Function | Description | Type | Values |
| ------------- | ------------------------------------------------- | ----------- | --------------------------------- |
| setSiteConfig | Returns the current siteConfig base configuration | Get Request | Returns Any Values in siteConfig |
**Notes**:
Returns **any** values in siteConfig.
2020-07-04 14:25:14 +02:00
2020-07-11 18:59:43 +10:00
Returns **any**
2020-07-04 14:25:14 +02:00
## setConfig
2020-07-16 12:17:21 +02:00
## setConfig
| Function | Description | Type | Values |
| ------------- | ------------------------------------- | ----------- | --------------------------------------- |
| setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array |
**Notes**:
Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any
2020-07-04 14:25:14 +02:00
values found in conf with key found in siteConfig.secure will be replaced with the corresponding
siteConfig value.
### Parameters
- `conf` the potential currentConfig
Returns **any** the currentConfig merged with the sanitized conf
## getConfig
2020-07-16 12:17:21 +02:00
## getConfig
| Function | Description | Type | Return Values |
| --------- | ------------------------- | ----------- | ----------------------------- |
| getConfig | Obtains the currentConfig | Get Request | Any Values from currentConfig |
2020-07-04 14:25:14 +02:00
2020-07-16 12:17:21 +02:00
**Notes**:
2020-07-04 14:25:14 +02:00
Returns **any** the currentConfig
Returns **any** the currentConfig
## sanitize
## sanitize
2020-07-16 12:17:21 +02:00
| Function | Description | Type | Values |
| -------- | -------------------------------------- | ----------- | ------ |
| sanitize | Sets the siteConfig to desired values. | Put Request | None |
2020-07-04 14:25:14 +02:00
Ensures options parameter does not attempt to override siteConfig secure keys
Note: modifies options in-place
### Parameters
- `options` the potential setConfig parameter
## reset
2020-07-16 12:17:21 +02:00
## reset
| Function | Description | Type | Required | Values |
| -------- | ---------------------------- | ----------- | -------- | ------ |
| reset | Resets currentConfig to conf | Put Request | Required | None |
| Parameter | Description | Type | Required | Values |
| --------- | ------------------------------------------------------------- | ---------- | -------- | -------------------------------------------- |
| conf | base set of values, which currentConfig coul be **reset** to. | Dictionary | Required | Any Values, with respect to the secure Array |
\*Notes :
(default: current siteConfig ) (optional, default `getSiteConfig()` )
2020-07-04 14:25:14 +02:00
### Parameters
- `conf` the base currentConfig to reset to (default: current siteConfig ) (optional, default `getSiteConfig()` )
2020-07-13 16:39:52 +02:00
[1]: Setup.md?id=render
[2]: 8.6.0_docs.md
2020-07-04 14:25:14 +02:00
2020-07-13 16:39:52 +02:00
[3]: #mermaidapi -configuration-defaults