mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-14 04:49:44 +02:00
Restore documention written in autoigenerated file
This commit is contained in:
Knut Sveidqvist
@@ -4,7 +4,8 @@
|
||||
|
||||
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.
|
||||
|
||||
The core of this api is the [**render**](https://github.com/knsv/mermaid/blob/master/docs/mermaidAPI.md#render) function which, given a graph definition as text, renders the graph/diagram and returns an svg element for the graph.
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
@@ -13,50 +14,54 @@ In addition to the render function, a number of behavioral configuration options
|
||||
## Configuration
|
||||
|
||||
These are the default options which can be overridden with the initialization call like so:
|
||||
**Example 1:**
|
||||
|
||||
*Example 1:*
|
||||
<pre>
|
||||
mermaid.initialize({
|
||||
flowchart:{
|
||||
htmlLabels: false
|
||||
}
|
||||
});
|
||||
</pre>
|
||||
|
||||
mermaid.initialize({
|
||||
flowchart:{
|
||||
htmlLabels: false
|
||||
}
|
||||
});
|
||||
**Example 2:**
|
||||
|
||||
*Example 2:*
|
||||
```
|
||||
<script>
|
||||
var config = {
|
||||
startOnLoad:true,
|
||||
flowchart:{
|
||||
useMaxWidth:true,
|
||||
htmlLabels:true,
|
||||
curve:'cardinal',
|
||||
},
|
||||
|
||||
securityLevel:'loose',
|
||||
};
|
||||
mermaid.initialize(config);
|
||||
</script>
|
||||
```
|
||||
<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](https://github.com/knsv/mermaid/blob/master/docs/mermaidAPI.md#mermaidapi-configuration-defaults). 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".
|
||||
- default
|
||||
- forest
|
||||
- dark
|
||||
- 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; }"
|
||||
<pre>
|
||||
"theme": "forest",
|
||||
"themeCSS": ".node rect { fill: red; }"
|
||||
</pre>
|
||||
|
||||
## logLevel
|
||||
|
||||
@@ -98,10 +103,11 @@ on the edges.
|
||||
|
||||
### curve
|
||||
|
||||
How mermaid renders curves for flowcharts. Possibel values are
|
||||
- basis
|
||||
- linear (**default**)
|
||||
- cardinal
|
||||
How mermaid renders curves for flowcharts. Possible values are
|
||||
|
||||
- basis
|
||||
- linear **default**
|
||||
- cardinal
|
||||
|
||||
## sequence
|
||||
|
||||
@@ -231,7 +237,6 @@ The number of alternating section styles.
|
||||
### axisFormat
|
||||
|
||||
Datetime format of the axis. This might need adjustment to match your locale and preferences
|
||||
|
||||
**Default value '%Y-%m-%d'**.
|
||||
|
||||
## render
|
||||
@@ -260,50 +265,56 @@ mermaidAPI.initialize({
|
||||
provided a hidden div will be inserted in the body of the page instead. The element will be removed when rendering is
|
||||
completed.
|
||||
|
||||
##
|
||||
|
||||
## mermaidAPI configuration defaults
|
||||
```
|
||||
|
||||
<pre>
|
||||
|
||||
<script>
|
||||
var config = {
|
||||
theme:'default',
|
||||
logLevel:'fatal',
|
||||
securityLevel:'strict',
|
||||
startOnLoad:true,
|
||||
arrowMarkerAbsolute:false,
|
||||
|
||||
flowchart:{
|
||||
htmlLabels:false,
|
||||
curve:'linear',
|
||||
},
|
||||
sequence:{
|
||||
diagramMarginX:50,
|
||||
diagramMarginY:10,
|
||||
actorMargin:50,
|
||||
width:150,
|
||||
height:65,
|
||||
boxMargin:10,
|
||||
boxTextMargin:5,
|
||||
noteMargin:10,
|
||||
messageMargin:35,
|
||||
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);
|
||||
</script>
|
||||
```
|
||||
var config = {
|
||||
theme:'default',
|
||||
logLevel:'fatal',
|
||||
securityLevel:'strict',
|
||||
startOnLoad:true,
|
||||
arrowMarkerAbsolute:false,
|
||||
|
||||
flowchart:{
|
||||
htmlLabels:false,
|
||||
curve:'linear',
|
||||
},
|
||||
sequence:{
|
||||
diagramMarginX:50,
|
||||
diagramMarginY:10,
|
||||
actorMargin:50,
|
||||
width:150,
|
||||
height:65,
|
||||
boxMargin:10,
|
||||
boxTextMargin:5,
|
||||
noteMargin:10,
|
||||
messageMargin:35,
|
||||
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);
|
||||
</script>
|
||||
|
||||
</pre>
|
||||
|
||||
[1]: https://github.com/knsv/mermaid/blob/master/docs/mermaidAPI.md#render
|
||||
|
||||
Reference in New Issue
Block a user