From ec7324e12e45bea0101c2d06ee44da9577a5cc97 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Wed, 11 Sep 2019 20:03:22 +0200 Subject: [PATCH] Restore documention written in autoigenerated file --- docs/mermaidAPI.md | 171 ++++++++++++++++++++++++--------------------- src/mermaidAPI.js | 117 ++++++++++++++++++++++++++----- 2 files changed, 190 insertions(+), 98 deletions(-) diff --git a/docs/mermaidAPI.md b/docs/mermaidAPI.md index 628449f8c..769bc79e9 100644 --- a/docs/mermaidAPI.md +++ b/docs/mermaidAPI.md @@ -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:* +
+mermaid.initialize({
+  flowchart:{
+     htmlLabels: false
+  }
+});
+
- mermaid.initialize({ - flowchart:{ - htmlLabels: false - } - }); +**Example 2:** -*Example 2:* -``` - -``` +
+ 
+
+
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; }" +
+ "theme": "forest",
+ "themeCSS": ".node rect { fill: red; }"
+
## 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 -``` + +
 
 
- ```
+  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);
+
+
+
+ +[1]: https://github.com/knsv/mermaid/blob/master/docs/mermaidAPI.md#render diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js index 22aeadc66..8f5a0d33d 100644 --- a/src/mermaidAPI.js +++ b/src/mermaidAPI.js @@ -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 - * (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. + * + * 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 */ 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:** + * 
  * mermaid.initialize({
  *   flowchart:{
  *      htmlLabels: false
  *   }
  * });
- * ```
+ *
+ * + * **Example 2:** + * 
+ *  
+ *
+ * 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 */ const config = { /** 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**. - *``` - * "theme": "forest", - * "themeCSS": ".node rect { fill: red; }" - *``` + * 
+  *  "theme": "forest",
+  *  "themeCSS": ".node rect { fill: red; }"
+  *
*/ theme: 'default', @@ -75,8 +104,8 @@ const config = { /** * Sets the level of trust to be used on the parsed diagrams. - * * **true**: (**default**) tags in text are encoded, click functionality is disabeled - * * **false**: tags in text are allowed, click functionality is enabled + * * **strict**: (**default**) tags in text are encoded, click functionality is disabeled + * * **loose**: tags in text are allowed, click functionality is enabled */ securityLevel: 'strict', @@ -105,7 +134,10 @@ const config = { 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' }, @@ -116,7 +148,7 @@ const config = { sequence: { /** - * margin to the right and left of the sequence diagram + * margin to the right and left of the sequence diagram. * **Default value 50**. */ diagramMarginX: 50, @@ -261,7 +293,7 @@ const config = { 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'**. */ axisFormat: '%Y-%m-%d' @@ -566,3 +598,52 @@ const mermaidAPI = { } export default mermaidAPI +/** + * ## mermaidAPI configuration defaults + * 
+ *
+ * 
+ *
+ */