mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-12-10 06:24:16 +01:00
Fixed test cases for sequence diagrams
Updated config to match a conversation knut and i had about the relationship between global, site, and integrator configuration (Will update docs) Renamed wrapEnabled to wrap Poor man's caching for calculateTextDimensions, wrapLabel, and breakString (actually makes a huge difference)
This commit is contained in:
chris moran
@@ -11,429 +11,6 @@ It is is then up to the user of the API to make use of the svg, either insert it
|
||||
|
||||
In addition to the render function, a number of behavioral configuration options are available.
|
||||
|
||||
## Configuration
|
||||
|
||||
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>
|
||||
<script>
|
||||
var config = {
|
||||
startOnLoad:true,
|
||||
flowchart:{
|
||||
useMaxWidth:true,
|
||||
htmlLabels:true,
|
||||
curve:'cardinal',
|
||||
},
|
||||
|
||||
securityLevel:'loose',
|
||||
};
|
||||
mermaid.initialize(config);
|
||||
</script>
|
||||
</pre>
|
||||
|
||||
A summary of all options and their defaults is found [here][2]. A description of each option follows below.
|
||||
|
||||
## theme
|
||||
|
||||
theme , the CSS style sheet
|
||||
|
||||
**theme** - Choose one of the built-in themes:
|
||||
|
||||
- default
|
||||
- forest
|
||||
- dark
|
||||
- neutral.
|
||||
To disable any pre-defined mermaid theme, use "null".
|
||||
|
||||
**themeCSS** - Use your own CSS. This overrides **theme**.
|
||||
|
||||
<pre>
|
||||
"theme": "forest",
|
||||
"themeCSS": ".node rect { fill: red; }"
|
||||
</pre>
|
||||
|
||||
## fontFamily
|
||||
|
||||
**fontFamily** The font to be used for the rendered diagrams. Default value is \\"trebuchet ms\\", verdana, arial;
|
||||
|
||||
## logLevel
|
||||
|
||||
This option decides the amount of logging to be used.
|
||||
|
||||
- debug: 1
|
||||
- info: 2
|
||||
- warn: 3
|
||||
- error: 4
|
||||
- fatal: (**default**) 5
|
||||
|
||||
## securityLevel
|
||||
|
||||
Sets the level of trust to be used on the parsed diagrams.
|
||||
|
||||
- **strict**: (**default**) tags in text are encoded, click functionality is disabeled
|
||||
- **loose**: tags in text are allowed, click functionality is enabled
|
||||
|
||||
## 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**.
|
||||
|
||||
## flowchart
|
||||
|
||||
The object containing configurations specific for flowcharts
|
||||
|
||||
### htmlLabels
|
||||
|
||||
Flag for setting whether or not a html tag should be used for rendering labels
|
||||
on the edges.
|
||||
**Default value true**.
|
||||
|
||||
### nodeSpacing
|
||||
|
||||
Defines the spacing between nodes on the same level (meaning horizontal spacing for
|
||||
TB or BT graphs, and the vertical spacing for LR as well as RL graphs).
|
||||
**Default value 50**.
|
||||
|
||||
### rankSpacing
|
||||
|
||||
Defines the spacing between nodes on different levels (meaning vertical spacing for
|
||||
TB or BT graphs, and the horizontal spacing for LR as well as RL graphs).
|
||||
**Default value 50**.
|
||||
|
||||
### curve
|
||||
|
||||
How mermaid renders curves for flowcharts. Possible values are
|
||||
|
||||
- basis
|
||||
- linear **default**
|
||||
- cardinal
|
||||
|
||||
## sequence
|
||||
|
||||
The object containing configurations specific for sequence diagrams
|
||||
|
||||
### 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
|
||||
|
||||
margin around notes.
|
||||
**Default value 10**.
|
||||
|
||||
### messageMargin
|
||||
|
||||
Space between messages.
|
||||
**Default value 35**.
|
||||
|
||||
### messageAlign
|
||||
|
||||
Multiline message alignment. Possible values are:
|
||||
|
||||
- left
|
||||
- center **default**
|
||||
- right
|
||||
|
||||
### 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**.
|
||||
|
||||
### actorFontSize
|
||||
|
||||
This sets the font size of the actor's description
|
||||
**Default value 14**.
|
||||
|
||||
### actorFontFamily
|
||||
|
||||
This sets the font family of the actor's description
|
||||
**Default value "Open-Sans", "sans-serif"**.
|
||||
|
||||
### actorFontWeight
|
||||
|
||||
This sets the font weight of the actor's description
|
||||
\*\*Default value 400.
|
||||
|
||||
### noteFontSize
|
||||
|
||||
This sets the font size of actor-attached notes.
|
||||
**Default value 14**.
|
||||
|
||||
### noteFontFamily
|
||||
|
||||
This sets the font family of actor-attached notes.
|
||||
**Default value "trebuchet ms", verdana, arial**.
|
||||
|
||||
### noteFontWeight
|
||||
|
||||
This sets the font weight of the note's description
|
||||
\*\*Default value 400.
|
||||
|
||||
### noteAlign
|
||||
|
||||
This sets the text alignment of actor-attached notes.
|
||||
**Default value center**.
|
||||
|
||||
### messageFontSize
|
||||
|
||||
This sets the font size of actor messages.
|
||||
**Default value 16**.
|
||||
|
||||
### messageFontFamily
|
||||
|
||||
This sets the font family of actor messages.
|
||||
**Default value "trebuchet ms", verdana, arial**.
|
||||
|
||||
### messageFontWeight
|
||||
|
||||
This sets the font weight of the message's description
|
||||
\*\*Default value 400.
|
||||
|
||||
### wrapEnabled
|
||||
|
||||
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 15.
|
||||
|
||||
## gantt
|
||||
|
||||
The object containing configurations specific for gantt diagrams\*
|
||||
|
||||
### titleTopMargin
|
||||
|
||||
Margin top for the text over the gantt diagram
|
||||
**Default value 25**.
|
||||
|
||||
### barHeight
|
||||
|
||||
The height of the bars in the graph
|
||||
**Default value 20**.
|
||||
|
||||
### barGap
|
||||
|
||||
The margin between the different activities in the gantt diagram.
|
||||
**Default value 4**.
|
||||
|
||||
### topPadding
|
||||
|
||||
Margin between title and gantt diagram and between axis and gantt diagram.
|
||||
**Default value 50**.
|
||||
|
||||
### 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'**.
|
||||
|
||||
## journey
|
||||
|
||||
The object containing configurations specific for sequence diagrams
|
||||
|
||||
### 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
|
||||
|
||||
margin around notes.
|
||||
**Default value 10**.
|
||||
|
||||
### messageMargin
|
||||
|
||||
Space between messages.
|
||||
**Default value 35**.
|
||||
|
||||
### messageAlign
|
||||
|
||||
Multiline message alignment. Possible values are:
|
||||
|
||||
- left
|
||||
- center **default**
|
||||
- right
|
||||
|
||||
### 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**.
|
||||
|
||||
## er
|
||||
|
||||
The object containing configurations specific for entity relationship diagrams
|
||||
|
||||
### diagramPadding
|
||||
|
||||
The amount of padding around the diagram as a whole so that embedded diagrams have margins, expressed in pixels
|
||||
|
||||
### layoutDirection
|
||||
|
||||
Directional bias for layout of entities. Can be either 'TB', 'BT', 'LR', or 'RL',
|
||||
where T = top, B = bottom, L = left, and R = right.
|
||||
|
||||
### minEntityWidth
|
||||
|
||||
The mimimum width of an entity box, expressed in pixels
|
||||
|
||||
### minEntityHeight
|
||||
|
||||
The minimum height of an entity box, expressed in pixels
|
||||
|
||||
### entityPadding
|
||||
|
||||
The minimum internal padding between the text in an entity box and the enclosing box borders, expressed in pixels
|
||||
|
||||
### stroke
|
||||
|
||||
Stroke color of box edges and lines
|
||||
|
||||
### fill
|
||||
|
||||
Fill color of entity boxes
|
||||
|
||||
### fontSize
|
||||
|
||||
Font size (expressed as an integer representing a number of pixels)
|
||||
|
||||
## render
|
||||
|
||||
Function that renders an svg with a graph from a chart definition. Usage example below.
|
||||
@@ -513,5 +90,3 @@ mermaidAPI.initialize({
|
||||
</pre>
|
||||
|
||||
[1]: https://github.com/knsv/mermaid/blob/master/docs/mermaidAPI.md#render
|
||||
|
||||
[2]: https://github.com/knsv/mermaid/blob/master/docs/mermaidAPI.md#mermaidapi-configuration-defaults
|
||||
|
||||
Reference in New Issue
Block a user