marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-15 05:19:58 +02:00
Code Issues Packages Projects Releases Wiki Activity

Restore documention written in autoigenerated file

Browse Source
This commit is contained in:
Knut Sveidqvist
2019-09-11 20:03:22 +02:00
parent d097b673bb
commit ec7324e12e
2 changed files with 190 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
docs/mermaidAPI.md
View File

@@ -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. 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. 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 ## Configuration
These are the default options which can be overridden with the initialization call like so: 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({ **Example 2:**
flowchart:{
htmlLabels: false
}
});
*Example 2:* <pre>
``` <script>
<script> var config = {
var config = { startOnLoad:true,
startOnLoad:true, flowchart:{
flowchart:{ useMaxWidth:true,
useMaxWidth:true, htmlLabels:true,
htmlLabels:true, curve:'cardinal',
curve:'cardinal', },
},
securityLevel:'loose', securityLevel:'loose',
}; };
mermaid.initialize(config); mermaid.initialize(config);
</script> </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. 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
theme , the CSS style sheet theme , the CSS style sheet
**theme** - Choose one of the built-in themes: **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**. **themeCSS** - Use your own CSS. This overrides **theme**.
"theme": "forest", <pre>
"themeCSS": ".node rect { fill: red; }" "theme": "forest",
"themeCSS": ".node rect { fill: red; }"
</pre>
## logLevel ## logLevel
@@ -98,10 +103,11 @@ on the edges.
### curve ### curve
How mermaid renders curves for flowcharts. Possibel values are How mermaid renders curves for flowcharts. Possible values are
- basis
- linear (**default**) - basis
- cardinal - linear **default**
- cardinal
## sequence ## sequence
@@ -231,7 +237,6 @@ The number of alternating section styles.
### axisFormat ### axisFormat
Datetime format of the axis. This might need adjustment to match your locale and preferences Datetime format of the axis. This might need adjustment to match your locale and preferences
**Default value '%Y-%m-%d'**. **Default value '%Y-%m-%d'**.
## render ## 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 provided a hidden div will be inserted in the body of the page instead. The element will be removed when rendering is
completed. completed.
##
## mermaidAPI configuration defaults ## mermaidAPI configuration defaults
```
<pre>
<script> <script>
var config = { var config = {
theme:'default', theme:'default',
logLevel:'fatal', logLevel:'fatal',
securityLevel:'strict', securityLevel:'strict',
startOnLoad:true, startOnLoad:true,
arrowMarkerAbsolute:false, arrowMarkerAbsolute:false,
flowchart:{ flowchart:{
htmlLabels:false, htmlLabels:false,
curve:'linear', curve:'linear',
}, },
sequence:{ sequence:{
diagramMarginX:50, diagramMarginX:50,
diagramMarginY:10, diagramMarginY:10,
actorMargin:50, actorMargin:50,
width:150, width:150,
height:65, height:65,
boxMargin:10, boxMargin:10,
boxTextMargin:5, boxTextMargin:5,
noteMargin:10, noteMargin:10,
messageMargin:35, messageMargin:35,
mirrorActors:true, mirrorActors:true,
bottomMarginAdj:1, bottomMarginAdj:1,
useMaxWidth:true, useMaxWidth:true,
rightAngles:false, rightAngles:false,
showSequenceNumbers:false, showSequenceNumbers:false,
}, },
gantt:{ gantt:{
titleTopMargin:25, titleTopMargin:25,
barHeight:20, barHeight:20,
barGap:4, barGap:4,
topPadding:50, topPadding:50,
leftPadding:75, leftPadding:75,
gridLineStartPadding:35, gridLineStartPadding:35,
fontSize:11, fontSize:11,
fontFamily:'"Open-Sans", "sans-serif"', fontFamily:'"Open-Sans", "sans-serif"',
numberSectionStyles:4, numberSectionStyles:4,
axisFormat:'%Y-%m-%d', axisFormat:'%Y-%m-%d',
} }
}; };
mermaid.initialize(config); mermaid.initialize(config);
</script> </script>
```
</pre>
[1]: https://github.com/knsv/mermaid/blob/master/docs/mermaidAPI.md#render

117
src/mermaidAPI.js
View File

@@ -1,10 +1,13 @@
/** /**
* This is the api to be used when handling the integration with the web page instead of using the default integration * 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.
* (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.
*
* 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.
* *
* The core of this api is the **render** function that given a graph definitionas text renders the graph/diagram and
* returns a 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 something completely different.
* @name mermaidAPI * @name mermaidAPI
*/ */
import * as d3 from 'd3' import * as d3 from 'd3'
@@ -38,26 +41,52 @@ for (const themeName of ['default', 'forest', 'dark', 'neutral']) {
} }
/** /**
* These are the default options which can be overridden with the initialization call as in the example below: * These are the default options which can be overridden with the initialization call like so:
* ``` * **Example 1:**
* <pre>
* mermaid.initialize({ * mermaid.initialize({
* flowchart:{ * flowchart:{
* htmlLabels: false * 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](https://github.com/knsv/mermaid/blob/master/docs/mermaidAPI.md#mermaidapi-configuration-defaults). A description of each option follows below.
*
* @name Configuration * @name Configuration
*/ */
const config = { const config = {
/** theme , the CSS style sheet /** theme , the CSS style sheet
* *
* **theme** - Choose one of the built-in themes: default, forest, dark or neutral. To disable any pre-defined mermaid theme, use "null". * **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**. * **themeCSS** - Use your own CSS. This overrides **theme**.
*``` * <pre>
* "theme": "forest", * "theme": "forest",
* "themeCSS": ".node rect { fill: red; }" * "themeCSS": ".node rect { fill: red; }"
*``` * </pre>
*/ */
theme: 'default', theme: 'default',
@@ -75,8 +104,8 @@ const config = {
/** /**
* Sets the level of trust to be used on the parsed diagrams. * Sets the level of trust to be used on the parsed diagrams.
* * **true**: (**default**) tags in text are encoded, click functionality is disabeled * * **strict**: (**default**) tags in text are encoded, click functionality is disabeled
* * **false**: tags in text are allowed, click functionality is enabled * * **loose**: tags in text are allowed, click functionality is enabled
*/ */
securityLevel: 'strict', securityLevel: 'strict',
@@ -105,7 +134,10 @@ const config = {
htmlLabels: true, htmlLabels: true,
/** /**
* How mermaid renders curves for flowcharts. Possibel values are basis, linear and cardinal. **Default value linear**. * How mermaid renders curves for flowcharts. Possible values are
* * basis
* * linear **default**
* * cardinal
*/ */
curve: 'linear' curve: 'linear'
}, },
@@ -116,7 +148,7 @@ const config = {
sequence: { sequence: {
/** /**
* margin to the right and left of the sequence diagram * margin to the right and left of the sequence diagram.
* **Default value 50**. * **Default value 50**.
*/ */
diagramMarginX: 50, diagramMarginX: 50,
@@ -261,7 +293,7 @@ const config = {
numberSectionStyles: 4, numberSectionStyles: 4,
/** /**
* Datetime format of the axis, this might need adjustment to match your locale and preferences * Datetime format of the axis. This might need adjustment to match your locale and preferences
* **Default value '%Y-%m-%d'**. * **Default value '%Y-%m-%d'**.
*/ */
axisFormat: '%Y-%m-%d' axisFormat: '%Y-%m-%d'
@@ -566,3 +598,52 @@ const mermaidAPI = {
} }
export default mermaidAPI export default mermaidAPI
/**
* ## 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>
*</pre>
*/