mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-14 21:09:50 +02:00
217bd1f4bf
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)
93 lines
2.5 KiB
Markdown
93 lines
2.5 KiB
Markdown
<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
|
|
|
|
## mermaidAPI
|
|
|
|
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**][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.
|
|
|
|
In addition to the render function, a number of behavioral configuration options are available.
|
|
|
|
## render
|
|
|
|
Function that renders an svg with a graph from a chart definition. Usage example below.
|
|
|
|
```js
|
|
mermaidAPI.initialize({
|
|
startOnLoad:true
|
|
});
|
|
$(function(){
|
|
const graphDefinition = 'graph TB\na-->b';
|
|
const cb = function(svgGraph){
|
|
console.log(svgGraph);
|
|
};
|
|
mermaidAPI.render('id1',graphDefinition,cb);
|
|
});
|
|
```
|
|
|
|
### 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.
|
|
|
|
##
|
|
|
|
## mermaidAPI configuration defaults
|
|
|
|
<pre>
|
|
|
|
<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,
|
|
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);
|
|
</script>
|
|
</pre>
|
|
|
|
[1]: https://github.com/knsv/mermaid/blob/master/docs/mermaidAPI.md#render
|