mermaid/docs/Setup.md

858 lines
30 KiB
Markdown
Raw Normal View History

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
2019-07-12 20:40:54 +02: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
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
2019-08-28 22:01:19 +02:00
These are the default options which can be overridden with the initialization call like so:
**Example 1:**
<pre>
mermaid.initialize({
flowchart:{
htmlLabels: false
}
});
</pre>
**Example 2:**
<pre>
&lt;script>
var config = {
startOnLoad:true,
flowchart:{
useMaxWidth:true,
htmlLabels:true,
curve:'cardinal',
},
securityLevel:'loose',
};
mermaid.initialize(config);
&lt;/script>
</pre>
A summary of all options and their defaults is found [here][2]. A description of each option follows below.
2019-08-28 22:01:19 +02: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
| Parameter | Description |Type | Required | Values|
\| --- \| --- \| --- \| --- \| --- \|
| Theme |Built in Themes| String | Optional | Values include, default, forest, dark, neutral, null|
**Notes:**To disable any pre-defined mermaid theme, use "null".
<pre>
"theme": "forest",
"themeCSS": ".node rect { fill: red; }"
</pre>
2019-07-12 20:40:54 +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-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:**
2020-07-02 16:59:09 +02:00
- debug: 1.
- info: 2.
- warn: 3.
- error: 4.
- fatal: 5(default).
## securityLevel
2019-07-12 20:40:54 +02:00
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| ------------- | --------------------------------- | ------ | -------- | ------------- |
| securitylevel | Level of trust for parsed diagram | String | Required | Strict, Loose |
\*\*Notes:
2019-07-12 20:40:54 +02: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
2019-07-12 20:40:54 +02: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**
## 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
## 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
### 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**.
### 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.**
**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\*\*.
### 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 |
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
### activationWidth
widt of the activation rect
**Default value 10**.
### 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:**
**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:**
**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:**
**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:**
**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**..
### 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:**
**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:**
**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:**
**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:**
Space between messages.
**Default value 35**.
### messageAlign
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| ------------ | --------------------------- | ------- | -------- | ------------------- |
| messageAlign | Multiline message alignment | Integer | Required | left, center, right |
2020-07-02 16:59:09 +02:00
**Notes:**center **default**
### mirrorActors
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| ------------ | ---------------------------- | ------- | -------- | ----------- |
| mirrorActors | mirror actors under diagram. | Boolean | Required | True, False |
**Notes:**
**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.
**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**.
### 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:**
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:**
**Default value false**.
2019-07-12 20:40:54 +02: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**..
### 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:**
**Default value "Open-Sans", "sans-serif"**.
### actorFontWeight
This sets the font weight of the actor's description
\*\*Default value 400.
### 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**..
### 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 **.
### noteFontWeight
This sets the font weight of the note's description
\*\*Default value 400.
### 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:**
**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:**
**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**.
### messageFontWeight
This sets the font weight of the message's description
\*\*Default value 400.
### wrap
This sets the auto-wrap state for the diagram
\*\*Default value false.
### wrapPadding
This sets the auto-wrap padding for the diagram (sides only)
\*\*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.
2019-07-12 20:40:54 +02:00
## gantt
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:**
**Default value 25**.
2019-07-12 20:40:54 +02: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:**
**Default value 20**.
2019-07-12 20:40:54 +02: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:**
**Default value 4**.
2019-07-12 20:40:54 +02: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:**
**Default value 50**.
2019-07-12 20:40:54 +02: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:**
**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:**
**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:**
**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:**
**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:**
**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
**Default value '%Y-%m-%d'**.
2019-07-12 20:40:54 +02: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:**
**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**..
### actorMargin
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| ----------- | ---------------------- | ------- | -------- | ------------------ |
| actorMargin | Margin between actors. | Integer | Required | Any Positive Value |
**Notes:**
**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:**
**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**.
### 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:**
**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:**
### noteMargin
2020-07-02 16:59:09 +02:00
| Parameter | Description | Type | Required | Values |
| ---------- | -------------------- | ------- | -------- | ------------------ |
| noteMargin | margin around notes. | Integer | Required | Any Positive Value |
**Notes:**
**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:**
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-07-02 16:59:09 +02:00
**Notes:**default:center\*\*
### 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.
**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
available space if not the absolute space required is used.
2020-07-02 16:59:09 +02: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
**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 |
**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
### 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
Function that renders an svg with a graph from a chart definition. Usage example below.
2019-07-12 20:40:54 +02:00
```js
2019-07-12 20:40:54 +02:00
mermaidAPI.initialize({
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
```
### Parameters
- `id` the id of the element to be rendered
2020-06-17 11:54:24 +02:00
- `_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.
2019-08-28 21:50:44 +02:00
##
2019-08-28 21:57:10 +02:00
## mermaidAPI configuration defaults
<pre>
2019-08-28 21:50:44 +02:00
&lt;script>
var config = {
theme:'default',
logLevel:'fatal',
securityLevel:'strict',
startOnLoad:true,
arrowMarkerAbsolute:false,
flowchart:{
htmlLabels:true,
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',
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);
&lt;/script>
</pre>
## setSiteConfig
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
### Parameters
- `conf` the base currentConfig to use as siteConfig
Returns **any** the siteConfig
## getSiteConfig
Obtains the current siteConfig base configuration
Returns **any**
## setConfig
Sets the currentConfig. The param conf is sanitized based on the siteConfig.secure keys. Any
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
Obtains the currentConfig
Returns **any** the currentConfig
## sanitize
Ensures options parameter does not attempt to override siteConfig secure keys
Note: modifies options in-place
### Parameters
- `options` the potential setConfig parameter
## reset
Resets this currentConfig to conf
### Parameters
- `conf` the base currentConfig to reset to (default: current siteConfig ) (optional, default `getSiteConfig()`)
[1]: https://github.com/knsv/mermaid/blob/master/docs/mermaidAPI.md#render
[2]: https://github.com/knsv/mermaid/blob/master/docs/Setup.md#mermaidapi-configuration-defaults