enable eslint fix and eslint-plugin-jsdoc

.eslintrc.json

@@ -6,15 +6,12 @@
   },
   "parser": "@babel/eslint-parser",
   "parserOptions": {
-      "ecmaFeatures": {
+    "ecmaFeatures": {
-          "experimentalObjectRestSpread": true,
+      "experimentalObjectRestSpread": true,
-          "jsx": true
+      "jsx": true
-      },
+    },
-      "sourceType": "module"
+    "sourceType": "module"
   },
-  "extends": ["prettier", "eslint:recommended"],
+  "extends": ["eslint:recommended", "plugin:jsdoc/recommended", "plugin:prettier/recommended"],
-  "plugins": ["prettier"],
+  "plugins": ["jsdoc", "prettier"]
-  "rules": {
-    "prettier/prettier": ["error"]
-  }
 }

docs/Setup.md

@@ -228,9 +228,8 @@ Default value: true
 **Notes:**
 
 Decides which rendering engine that is to be used for the rendering. Legal values are:
-
+dagre-d3
--   dagre-d3
+dagre-wrapper - wrapper for dagre implemented in mermaid
--   dagre-wrapper - wrapper for dagre implemented in mermaid
 
 Default value: 'dagre-d3'
 
@@ -795,12 +794,11 @@ Default value: true
 | --------------- | ----------- | ------- | -------- | ----------------------- |
 | defaultRenderer | See notes   | boolean | 4        | dagre-d3, dagre-wrapper |
 
-**Notes:**
+**Notes**:
 
 Decides which rendering engine that is to be used for the rendering. Legal values are:
-
+dagre-d3
--   dagre-d3
+dagre-wrapper - wrapper for dagre implemented in mermaid
--   dagre-wrapper - wrapper for dagre implemented in mermaid
 
 Default value: 'dagre-d3'
 
@@ -839,9 +837,8 @@ Default value: true
 **Notes:**
 
 Decides which rendering engine that is to be used for the rendering. Legal values are:
-
+dagre-d3
--   dagre-d3
+dagre-wrapper - wrapper for dagre implemented in mermaid
--   dagre-wrapper - wrapper for dagre implemented in mermaid
 
 Default value: 'dagre-d3'
 
@@ -999,14 +996,22 @@ Sets the siteConfig. The siteConfig is a protected configuration for repeat use.
 the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) will reset siteConfig and currentConfig
 to the defaultConfig
 Note: currentConfig is set in this function
-\*Default value: At default, will mirror Global Config\*\*
+Default value: At default, will mirror Global Config
 
 ### Parameters
 
--   `conf`  the base currentConfig to use as siteConfig
+-   `conf` **any** the base currentConfig to use as siteConfig
 
 Returns **any** the siteConfig
 
+## parse
+
+### Parameters
+
+-   `text`  
+
+Returns **any** 
+
 ## getSiteConfig
 
 ## getSiteConfig
@@ -1035,7 +1040,7 @@ siteConfig value.
 
 ### Parameters
 
--   `conf`  the potential currentConfig
+-   `conf` **any** the potential currentConfig
 
 Returns **any** the currentConfig merged with the sanitized conf
 
@@ -1061,11 +1066,12 @@ Returns **any** the currentConfig
 | sanitize | Sets the siteConfig to desired values. | Put Request | None   |
 
 Ensures options parameter does not attempt to override siteConfig secure keys
-Note: modifies options in-place
+**Notes**:
+modifies options in-place
 
 ### Parameters
 
--   `options`  the potential setConfig parameter
+-   `options` **any** the potential setConfig parameter
 
 ## reset
 
@@ -1079,13 +1085,9 @@ Note: modifies options in-place
 | --------- | ------------------------------------------------------------- | ---------- | -------- | -------------------------------------------- |
 | conf      | base set of values, which currentConfig coul be **reset** to. | Dictionary | Required | Any Values, with respect to the secure Array |
 
-\*Notes :
+**Notes**:
 (default: current siteConfig ) (optional, default `getSiteConfig()`)
 
-### Parameters
-
--   `conf`  the base currentConfig to reset to (default: current siteConfig ) (optional, default `getSiteConfig()`)
-
 ## render
 
 Function that renders an svg with a graph from a chart definition. Usage example below.
@@ -1105,13 +1107,29 @@ mermaidAPI.initialize({
 
 ### Parameters
 
--   `id`  the id of the element to be rendered
+-   `id` **any** the id of the element to be rendered
--   `_txt`  the graph definition
+-   `_txt` **any** the graph definition
--   `cb`  callback which is called after rendering is finished with the svg code as inparam.
+-   `cb` **any** 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
+-   `container` **any** 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.
 
+Returns **any** 
+
+## updateRendererConfigs
+
+### Parameters
+
+-   `conf` **any** 
+
+## reinitialize
+
+## initialize
+
+### Parameters
+
+-   `options` **any** 
+
 ## 
 
 ## mermaidAPI configuration defaults

package.json

@@ -28,6 +28,7 @@
     "build:watch": "yarn build:development --watch",
     "release": "yarn build",
     "lint": "eslint src",
+    "lint:fix": "yarn lint --fix",
     "e2e:depr": "yarn lint && jest e2e --config e2e/jest.config.js",
     "cypress": "percy exec -- cypress run",
     "e2e": "start-server-and-test dev http://localhost:9000/ cypress",
@@ -82,6 +83,7 @@
     "documentation": "13.2.0",
     "eslint": "^8.0.0",
     "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-jsdoc": "^37.0.3",
     "eslint-plugin-prettier": "^4.0.0",
     "husky": "^7.0.1",
     "identity-obj-proxy": "^3.0.0",
@@ -110,4 +112,4 @@
       "pre-push": "yarn test"
     }
   }
-}
+}

src/config.js

@@ -51,8 +51,9 @@ export const updateCurrentConfig = (siteCfg, _directives) => {
  *the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) will reset siteConfig and currentConfig
  *to the defaultConfig
  *Note: currentConfig is set in this function
- **Default value: At default, will mirror Global Config**
+ *Default value: At default, will mirror Global Config
- * @param conf - the base currentConfig to use as siteConfig
+ *
+ * @param {any} conf - the base currentConfig to use as siteConfig
  * @returns {*} - the siteConfig
  */
 export const setSiteConfig = (conf) => {
@@ -84,6 +85,7 @@ export const updateSiteConfig = (conf) => {
  *| setSiteConfig|Returns the current siteConfig base configuration | Get Request | Returns Any Values  in siteConfig|
  ***Notes**:
  *Returns **any** values in siteConfig.
+ *
  * @returns {*}
  */
 export const getSiteConfig = () => {
@@ -98,7 +100,8 @@ export const getSiteConfig = () => {
  *Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any
  *values found in conf with key found in siteConfig.secure will be replaced with the corresponding
  *siteConfig value.
- * @param conf - the potential currentConfig
+ *
+ * @param {any} conf - the potential currentConfig
  * @returns {*} - the currentConfig merged with the sanitized conf
  */
 export const setConfig = (conf) => {
@@ -120,6 +123,7 @@ export const setConfig = (conf) => {
  *| getConfig |Obtains the currentConfig | Get Request | Any Values from currentConfig|
  ***Notes**:
  *Returns **any** the currentConfig
+ *
  * @returns {*} - the currentConfig
  */
 export const getConfig = () => {
@@ -131,8 +135,10 @@ export const getConfig = () => {
  *| --------- | ------------------- | ------- | ------------------ |
  *| sanitize  |Sets the siteConfig to desired values. | Put Request |None|
  *Ensures options parameter does not attempt to override siteConfig secure keys
- *Note: modifies options in-place
+ ***Notes**:
- * @param options - the potential setConfig parameter
+ * modifies options in-place
+ *
+ * @param {any} options - the potential setConfig parameter
  */
 export const sanitize = (options) => {
   // Checking that options are not in the list of excluded options
@@ -196,9 +202,9 @@ export const addDirective = (directive) => {
  *| --- | --- | --- | --- | --- |
  *| conf| base set of values, which currentConfig coul be **reset** to.| Dictionary | Required | Any Values, with respect to the secure Array|
  *
- **Notes :
+ ***Notes**:
- (default: current siteConfig ) (optional, default `getSiteConfig()`)
+ * (default: current siteConfig ) (optional, default `getSiteConfig()`)
- * @param conf  the base currentConfig to reset to (default: current siteConfig ) (optional, default `getSiteConfig()`)
+ *
  */
 export const reset = () => {
   // Replace current config with siteConfig

src/config_org.js

@@ -3,13 +3,6 @@ import { log } from './logger'; // eslint-disable-line
 import theme from './themes';
 import config from './defaultConfig';
 
-// import { unflatten } from 'flat';
-// import flatten from 'flat';
-
-// import themeVariables from './theme-default';
-// import themeForestVariables from './theme-forest';
-// import themeNeutralVariables from './theme-neutral';
-
 const handleThemeVariables = (value) => {
   return theme[value] ? theme[value].getThemeVariables() : theme.default.getThemeVariables();
 };
@@ -36,8 +29,9 @@ const currentConfig = assignWithDepth({}, defaultConfig);
  *the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) will reset siteConfig and currentConfig
  *to the defaultConfig
  *Note: currentConfig is set in this function
- **Default value: At default, will mirror Global Config**
+ *Default value: At default, will mirror Global Config
- * @param conf - the base currentConfig to use as siteConfig
+ *
+ * @param {any} conf - the base currentConfig to use as siteConfig
  * @returns {*} - the siteConfig
  */
 export const setSiteConfig = (conf) => {
@@ -61,6 +55,7 @@ export const setSiteConfig = (conf) => {
  *| setSiteConfig|Returns the current siteConfig base configuration | Get Request | Returns Any Values  in siteConfig|
  ***Notes**:
  *Returns **any** values in siteConfig.
+ *
  * @returns {*}
  */
 export const getSiteConfig = () => {
@@ -75,7 +70,8 @@ export const getSiteConfig = () => {
  *Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any
  *values found in conf with key found in siteConfig.secure will be replaced with the corresponding
  *siteConfig value.
- * @param conf - the potential currentConfig
+ *
+ * @param {any} conf - the potential currentConfig
  * @returns {*} - the currentConfig merged with the sanitized conf
  */
 export const setConfig = (conf) => {
@@ -96,6 +92,7 @@ export const setConfig = (conf) => {
  *| getConfig |Obtains the currentConfig | Get Request | Any Values from currentConfig|
  ***Notes**:
  *Returns **any** the currentConfig
+ *
  * @returns {*} - the currentConfig
  */
 export const getConfig = () => {
@@ -107,8 +104,10 @@ export const getConfig = () => {
  *| --------- | ------------------- | ------- | ------------------ |
  *| sanitize  |Sets the siteConfig to desired values. | Put Request |None|
  *Ensures options parameter does not attempt to override siteConfig secure keys
- *Note: modifies options in-place
+ ***Notes**:
- * @param options - the potential setConfig parameter
+ *modifies options in-place
+ *
+ * @param {any} options - the potential setConfig parameter
  */
 export const sanitize = (options) => {
   Object.keys(siteConfig.secure).forEach((key) => {
@@ -133,9 +132,10 @@ export const sanitize = (options) => {
  *| --- | --- | --- | --- | --- |
  *| conf| base set of values, which currentConfig coul be **reset** to.| Dictionary | Required | Any Values, with respect to the secure Array|
  *
- **Notes :
+ ***Notes**:
- (default: current siteConfig ) (optional, default `getSiteConfig()`)
+ *(default: current siteConfig ) (optional, default `getSiteConfig()`)
- * @param conf - the base currentConfig to reset to (default: current siteConfig )
+ *
+ * @param {any} conf - the base currentConfig to reset to (default: current siteConfig )
  */
 export const reset = (conf = getSiteConfig()) => {
   console.warn('reset');

src/dagre-wrapper/clusters.js

@@ -79,6 +79,10 @@ const rect = (parent, node) => {
 
 /**
  * Non visiable cluster where the note is group with its
+ *
+ * @param {any} parent
+ * @param {any} node
+ * @returns {*} shapeSvg
  */
 const noteGroup = (parent, node) => {
   // Add outer g element

src/dagre-wrapper/createLabel.js

@@ -1,66 +1,23 @@
 import { select } from 'd3';
 import { log } from '../logger'; // eslint-disable-line
 import { evaluate } from '../diagrams/common/common';
-// let vertexNode;
-// if (evaluate(getConfig().flowchart.htmlLabels)) {
-//   // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
-//   const node = {
-//     label: vertexText.replace(/fa[lrsb]?:fa-[\w-]+/g, s => `<i class='${s.replace(':', ' ')}'></i>`)
-//   };
-//   vertexNode = addHtmlLabel(svg, node).node();
-//   vertexNode.parentNode.removeChild(vertexNode);
-// } else {
-//   const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-//   svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:'));
-
-//   const rows = vertexText.split(common.lineBreakRegex);
-
-//   for (let j = 0; j < rows.length; j++) {
-//     const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
-//     tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
-//     tspan.setAttribute('dy', '1em');
-//     tspan.setAttribute('x', '1');
-//     tspan.textContent = rows[j];
-//     svgLabel.appendChild(tspan);
-//   }
-//   vertexNode = svgLabel;
-// }
 import { getConfig } from '../config';
 
+/**
+ * @param dom
+ * @param styleFn
+ */
 function applyStyle(dom, styleFn) {
   if (styleFn) {
     dom.attr('style', styleFn);
   }
 }
 
+/**
+ * @param {any} node
+ * @returns {SVGForeignObjectElement} node
+ */
 function addHtmlLabel(node) {
-  // var fo = root.append('foreignObject').attr('width', '100000');
-
-  // var div = fo.append('xhtml:div');
-  // div.attr('xmlns', 'http://www.w3.org/1999/xhtml');
-
-  // var label = node.label;
-  // switch (typeof label) {
-  //   case 'function':
-  //     div.insert(label);
-  //     break;
-  //   case 'object':
-  //     // Currently we assume this is a DOM object.
-  //     div.insert(function() {
-  //       return label;
-  //     });
-  //     break;
-  //   default:
-  //     div.html(label);
-  // }
-
-  // applyStyle(div, node.labelStyle);
-  // div.style('display', 'inline-block');
-  // // Fix for firefox
-  // div.style('white-space', 'nowrap');
-
-  // var client = div.node().getBoundingClientRect();
-  // fo.attr('width', client.width).attr('height', client.height);
   const fo = select(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'));
   const div = fo.append('xhtml:div');
 

src/dagre-wrapper/edges.js

@@ -1,6 +1,5 @@
 import { log } from '../logger'; // eslint-disable-line
 import createLabel from './createLabel';
-// import { line, curveBasis, curveLinear, select } from 'd3';
 import { line, curveBasis, select } from 'd3';
 import { getConfig } from '../config';
 import utils from '../utils';
@@ -110,6 +109,10 @@ export const insertEdgeLabel = (elem, edge) => {
   }
 };
 
+/**
+ * @param {any} fo
+ * @param {any} value
+ */
 function setTerminalWidth(fo, value) {
   if (getConfig().flowchart.htmlLabels && fo) {
     fo.style.width = value.length * 9 + 'px';
@@ -306,9 +309,10 @@ export const intersection = (node, outsidePoint, insidePoint) => {
 /**
  * This function will page a path and node where the last point(s) in the path is inside the node
  * and return an update path ending by the border of the node.
- * @param {*} points
+ *
+ * @param {Array} _points
  * @param {*} boundryNode
- * @returns
+ * @returns {Array} points
  */
 const cutPathAtIntersect = (_points, boundryNode) => {
   log.warn('abc88 cutPathAtIntersect', _points, boundryNode);

src/dagre-wrapper/intersect/intersect-circle.js

@@ -1,5 +1,10 @@
 import intersectEllipse from './intersect-ellipse';
 
+/**
+ * @param node
+ * @param rx
+ * @param point
+ */
 function intersectCircle(node, rx, point) {
   return intersectEllipse(node, rx, rx, point);
 }

src/dagre-wrapper/intersect/intersect-ellipse.js

@@ -1,3 +1,9 @@
+/**
+ * @param node
+ * @param rx
+ * @param ry
+ * @param point
+ */
 function intersectEllipse(node, rx, ry, point) {
   // Formulae from: http://mathworld.wolfram.com/Ellipse-LineIntersection.html
 

src/dagre-wrapper/intersect/intersect-line.js

@@ -1,6 +1,12 @@
-/*
+/**
  * Returns the point at which two lines, p and q, intersect or returns
  * undefined if they do not intersect.
+ *
+ *
+ * @param p1
+ * @param p2
+ * @param q1
+ * @param q2
  */
 function intersectLine(p1, p2, q1, q2) {
   // Algorithm from J. Avro, (ed.) Graphics Gems, No 2, Morgan Kaufmann, 1994,
@@ -63,6 +69,10 @@ function intersectLine(p1, p2, q1, q2) {
   return { x: x, y: y };
 }
 
+/**
+ * @param r1
+ * @param r2
+ */
 function sameSign(r1, r2) {
   return r1 * r2 > 0;
 }

src/dagre-wrapper/intersect/intersect-node.js

@@ -1,5 +1,9 @@
 module.exports = intersectNode;
 
+/**
+ * @param node
+ * @param point
+ */
 function intersectNode(node, point) {
   // console.info('Intersect Node');
   return node.intersect(point);

src/dagre-wrapper/intersect/intersect-polygon.js

@@ -4,9 +4,13 @@ import intersectLine from './intersect-line';
 
 export default intersectPolygon;
 
-/*
+/**
  * Returns the point ({x, y}) at which the point argument intersects with the
  * node argument assuming that it has the shape specified by polygon.
+ *
+ * @param node
+ * @param polyPoints
+ * @param point
  */
 function intersectPolygon(node, polyPoints, point) {
   var x1 = node.x;

src/dagre-wrapper/mermaid-graphlib.js

@@ -145,7 +145,8 @@ export const extractDecendants = (id, graph) => {
 /**
  * Validates the graph, checking that all parent child relation points to existing nodes and that
  * edges between nodes also ia correct. When not correct the function logs the discrepancies.
- * @param {graphlib graph} g
+ *
+ * @param graph
  */
 export const validate = (graph) => {
   const edges = graph.edges();
@@ -165,6 +166,7 @@ export const validate = (graph) => {
 
 /**
  * Finds a child that is not a cluster. When faking a edge between a node and a cluster.
+ *
  * @param {Finds a } id
  * @param {*} graph
  */

src/dagre-wrapper/shapes/util.js

@@ -55,6 +55,12 @@ export const updateNodeBounds = (node, element) => {
   node.height = bbox.height;
 };
 
+/**
+ * @param parent
+ * @param w
+ * @param h
+ * @param points
+ */
 export function insertPolygonShape(parent, w, h, points) {
   return parent
     .insert('polygon', ':first-child')

src/defaultConfig.js

@@ -123,8 +123,8 @@ const config = {
    * call to mermaidAPI.initialize. Calls to mermaidAPI.reinitialize cannot make changes to
    * the `secure` keys in the current currentConfig. This prevents malicious graph directives from
    * overriding a site's default security.
-
+   *
-   * **Notes**:
+   ***Notes**:
    *
    * Default value: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
    */
@@ -236,8 +236,8 @@ const config = {
      * **Notes:**
      *
      * Decides which rendering engine that is to be used for the rendering. Legal values are:
-     * * dagre-d3
+     * dagre-d3
-     * * dagre-wrapper - wrapper for dagre implemented in mermaid
+     * dagre-wrapper - wrapper for dagre implemented in mermaid
      *
      * Default value: 'dagre-d3'
      */
@@ -903,11 +903,11 @@ top of the chart
      * | --- | --- | --- | --- | --- |
      * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper |
      *
-     * **Notes:**
+     ***Notes**:
      *
      * Decides which rendering engine that is to be used for the rendering. Legal values are:
-     * * dagre-d3
+     * dagre-d3
-     * * dagre-wrapper - wrapper for dagre implemented in mermaid
+     * dagre-wrapper - wrapper for dagre implemented in mermaid
      *
      * Default value: 'dagre-d3'
      */
@@ -972,8 +972,8 @@ top of the chart
      * **Notes:**
      *
      * Decides which rendering engine that is to be used for the rendering. Legal values are:
-     * * dagre-d3
+     * dagre-d3
-     * * dagre-wrapper - wrapper for dagre implemented in mermaid
+     * dagre-wrapper - wrapper for dagre implemented in mermaid
      *
      * Default value: 'dagre-d3'
      */

src/diagrams/class/classDb.js

@@ -33,6 +33,7 @@ const splitClassNameAndType = function (id) {
 
 /**
  * Function called by parser when a node definition has been found.
+ *
  * @param id
  * @public
  */
@@ -56,6 +57,7 @@ export const addClass = function (id) {
 
 /**
  * Function to lookup domId from id in the graph definition.
+ *
  * @param id
  * @public
  */
@@ -100,6 +102,7 @@ export const addRelation = function (relation) {
 /**
  * Adds an annotation to the specified class
  * Annotations mark special properties of the given type (like 'interface' or 'service')
+ *
  * @param className The class name
  * @param annotation The name of the annotation without any brackets
  * @public
@@ -111,6 +114,7 @@ export const addAnnotation = function (className, annotation) {
 
 /**
  * Adds a member to the specified class
+ *
  * @param className The class name
  * @param member The full name of the member.
  * If the member is enclosed in <<brackets>> it is treated as an annotation
@@ -154,6 +158,7 @@ export const cleanupLabel = function (label) {
 
 /**
  * Called by parser when a special node is found, e.g. a clickable element.
+ *
  * @param ids Comma separated list of ids
  * @param className Class to add
  */
@@ -169,6 +174,7 @@ export const setCssClass = function (ids, className) {
 
 /**
  * Called by parser when a tooltip is found, e.g. a clickable element.
+ *
  * @param ids Comma separated list of ids
  * @param tooltip Tooltip to add
  */
@@ -183,6 +189,7 @@ const setTooltip = function (ids, tooltip) {
 
 /**
  * Called by parser when a link is found. Adds the URL to the vertex data.
+ *
  * @param ids Comma separated list of ids
  * @param linkStr URL to create a link for
  * @param target Target of the link, _blank by default as originally defined in the svgDraw.js file
@@ -206,6 +213,7 @@ export const setLink = function (ids, linkStr, target) {
 
 /**
  * Called by parser when a click definition is found. Registers an event handler.
+ *
  * @param ids Comma separated list of ids
  * @param functionName Function to be called on click
  * @param functionArgs Function args the function should be called with

src/diagrams/class/classRenderer-v2.js

@@ -25,7 +25,8 @@ const conf = {
 
 /**
  * Function that adds the vertices found during parsing to the graph to be rendered.
- * @param vert Object containing the vertices.
+ *
+ * @param classes
  * @param g The graph that is to be drawn.
  */
 export const addClasses = function (classes, g) {
@@ -40,6 +41,7 @@ export const addClasses = function (classes, g) {
 
     /**
      * Variable for storing the classes for the vertex
+     *
      * @type {string}
      */
     let cssClassStr = '';
@@ -130,8 +132,9 @@ export const addClasses = function (classes, g) {
 
 /**
  * Add edges to graph based on parsed graph defninition
- * @param {Object} edges The edges to add to the graph
+ *
- * @param {Object} g The graph object
+ * @param relations
+ * @param {object} g The graph object
  */
 export const addRelations = function (relations, g) {
   let cnt = 0;
@@ -249,6 +252,7 @@ export const setConf = function (cnf) {
 
 /**
  * Draws a flowchart in the tag with id: id based on the graph definition in text.
+ *
  * @param text
  * @param id
  */
@@ -502,6 +506,9 @@ export default {
   setConf,
   draw,
 };
+/**
+ * @param type
+ */
 function getArrowMarker(type) {
   let marker;
   switch (type) {

src/diagrams/class/classRenderer.js

@@ -33,6 +33,8 @@ const getGraphId = function (label) {
 
 /**
  * Setup arrow head and define the marker. The result is appended to the svg.
+ *
+ * @param elem
  */
 const insertMarkers = function (elem) {
   elem
@@ -146,6 +148,7 @@ export const setConf = function (cnf) {
 
 /**
  * Draws a flowchart in the tag with id: id based on the graph definition in text.
+ *
  * @param text
  * @param id
  */

src/diagrams/er/erDb.js

@@ -49,6 +49,7 @@ const addAttributes = function (entityName, attribs) {
 
 /**
  * Add a relationship
+ *
  * @param entA The first entity in the relationship
  * @param rolA The role played by the first entity in relation to the second
  * @param entB The second entity in the relationship

src/diagrams/er/erMarkers.js

@@ -11,6 +11,9 @@ const ERMarkers = {
 
 /**
  * Put the markers into the svg DOM for later use with edge paths
+ *
+ * @param elem
+ * @param conf
  */
 const insertMarkers = function (elem, conf) {
   let marker;

src/diagrams/er/erRenderer.js

@@ -14,6 +14,8 @@ const conf = {};
  * Allows the top-level API module to inject config specific to this renderer,
  * storing it in the local conf object. Note that generic config still needs to be
  * retrieved using getConfig() imported from the config module
+ *
+ * @param cnf
  */
 export const setConf = function (cnf) {
   const keys = Object.keys(cnf);
@@ -24,10 +26,11 @@ export const setConf = function (cnf) {
 
 /**
  * Draw attributes for an entity
+ *
  * @param groupNode the svg group node for the entity
  * @param entityTextNode the svg node for the entity label text
  * @param attributes an array of attributes defined for the entity (each attribute has a type and a name)
- * @return the bounding box of the entity, after attributes have been added
+ * @returns the bounding box of the entity, after attributes have been added
  */
 const drawAttributes = (groupNode, entityTextNode, attributes) => {
   const heightPadding = conf.entityPadding / 3; // Padding internal to attribute boxes
@@ -269,10 +272,11 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => {
 
 /**
  * Use D3 to construct the svg elements for the entities
+ *
  * @param svgNode the svg node that contains the diagram
  * @param entities The entities to be drawn
  * @param graph The graph that contains the vertex and edge definitions post-layout
- * @return The first entity that was inserted
+ * @returns The first entity that was inserted
  */
 const drawEntities = function (svgNode, entities, graph) {
   const keys = Object.keys(entities);
@@ -356,9 +360,10 @@ const getEdgeName = function (rel) {
 
 /**
  * Add each relationship to the graph
+ *
  * @param relationships the relationships to be added
  * @param g the graph
- * @return {Array} The array of relationships
+ * @returns {Array} The array of relationships
  */
 const addRelationships = function (relationships, g) {
   relationships.forEach(function (r) {
@@ -370,6 +375,7 @@ const addRelationships = function (relationships, g) {
 let relCnt = 0;
 /**
  * Draw a relationship using edge information from the graph
+ *
  * @param svg the svg node
  * @param rel the relationship to draw in the svg
  * @param g the graph containing the edge information
@@ -502,6 +508,7 @@ const drawRelationshipFromLayout = function (svg, rel, g, insert) {
 
 /**
  * Draw en E-R diagram in the tag with id: id based on the text definition of the diagram
+ *
  * @param text the text of the diagram
  * @param id the unique id of the DOM node that contains the diagram
  */

src/diagrams/flowchart/flowChartShapes.js

@@ -1,5 +1,10 @@
 import dagreD3 from 'dagre-d3';
 
+/**
+ * @param parent
+ * @param bbox
+ * @param node
+ */
 function question(parent, bbox, node) {
   const w = bbox.width;
   const h = bbox.height;
@@ -17,6 +22,11 @@ function question(parent, bbox, node) {
   return shapeSvg;
 }
 
+/**
+ * @param parent
+ * @param bbox
+ * @param node
+ */
 function hexagon(parent, bbox, node) {
   const f = 4;
   const h = bbox.height;
@@ -37,6 +47,11 @@ function hexagon(parent, bbox, node) {
   return shapeSvg;
 }
 
+/**
+ * @param parent
+ * @param bbox
+ * @param node
+ */
 function rect_left_inv_arrow(parent, bbox, node) {
   const w = bbox.width;
   const h = bbox.height;
@@ -54,6 +69,11 @@ function rect_left_inv_arrow(parent, bbox, node) {
   return shapeSvg;
 }
 
+/**
+ * @param parent
+ * @param bbox
+ * @param node
+ */
 function lean_right(parent, bbox, node) {
   const w = bbox.width;
   const h = bbox.height;
@@ -70,6 +90,11 @@ function lean_right(parent, bbox, node) {
   return shapeSvg;
 }
 
+/**
+ * @param parent
+ * @param bbox
+ * @param node
+ */
 function lean_left(parent, bbox, node) {
   const w = bbox.width;
   const h = bbox.height;
@@ -86,6 +111,11 @@ function lean_left(parent, bbox, node) {
   return shapeSvg;
 }
 
+/**
+ * @param parent
+ * @param bbox
+ * @param node
+ */
 function trapezoid(parent, bbox, node) {
   const w = bbox.width;
   const h = bbox.height;
@@ -102,6 +132,11 @@ function trapezoid(parent, bbox, node) {
   return shapeSvg;
 }
 
+/**
+ * @param parent
+ * @param bbox
+ * @param node
+ */
 function inv_trapezoid(parent, bbox, node) {
   const w = bbox.width;
   const h = bbox.height;
@@ -118,6 +153,11 @@ function inv_trapezoid(parent, bbox, node) {
   return shapeSvg;
 }
 
+/**
+ * @param parent
+ * @param bbox
+ * @param node
+ */
 function rect_right_inv_arrow(parent, bbox, node) {
   const w = bbox.width;
   const h = bbox.height;
@@ -135,6 +175,11 @@ function rect_right_inv_arrow(parent, bbox, node) {
   return shapeSvg;
 }
 
+/**
+ * @param parent
+ * @param bbox
+ * @param node
+ */
 function stadium(parent, bbox, node) {
   const h = bbox.height;
   const w = bbox.width + h / 4;
@@ -154,6 +199,11 @@ function stadium(parent, bbox, node) {
   return shapeSvg;
 }
 
+/**
+ * @param parent
+ * @param bbox
+ * @param node
+ */
 function subroutine(parent, bbox, node) {
   const w = bbox.width;
   const h = bbox.height;
@@ -176,6 +226,11 @@ function subroutine(parent, bbox, node) {
   return shapeSvg;
 }
 
+/**
+ * @param parent
+ * @param bbox
+ * @param node
+ */
 function cylinder(parent, bbox, node) {
   const w = bbox.width;
   const rx = w / 2;
@@ -239,6 +294,9 @@ function cylinder(parent, bbox, node) {
   return shapeSvg;
 }
 
+/**
+ * @param render
+ */
 export function addToRender(render) {
   render.shapes().question = question;
   render.shapes().hexagon = hexagon;
@@ -265,6 +323,9 @@ export function addToRender(render) {
   render.shapes().rect_right_inv_arrow = rect_right_inv_arrow;
 }
 
+/**
+ * @param addShape
+ */
 export function addToRenderV2(addShape) {
   addShape({ question });
   addShape({ hexagon });
@@ -291,6 +352,12 @@ export function addToRenderV2(addShape) {
   addShape({ rect_right_inv_arrow });
 }
 
+/**
+ * @param parent
+ * @param w
+ * @param h
+ * @param points
+ */
 function insertPolygonShape(parent, w, h, points) {
   return parent
     .insert('polygon', ':first-child')

src/diagrams/flowchart/flowDb.js

@@ -29,6 +29,7 @@ export const parseDirective = function (statement, context, type) {
 
 /**
  * Function to lookup domId from id in the graph definition.
+ *
  * @param id
  * @public
  */
@@ -44,11 +45,13 @@ export const lookUpDomId = function (id) {
 
 /**
  * Function called by parser when a node definition has been found
- * @param id
+ *
+ * @param _id
  * @param text
  * @param type
  * @param style
  * @param classes
+ * @param dir
  */
 export const addVertex = function (_id, text, type, style, classes, dir) {
   let txt;
@@ -110,8 +113,9 @@ export const addVertex = function (_id, text, type, style, classes, dir) {
 
 /**
  * Function called by parser when a link/edge definition has been found
- * @param start
+ *
- * @param end
+ * @param _start
+ * @param _end
  * @param type
  * @param linktext
  */
@@ -152,8 +156,9 @@ export const addLink = function (_start, _end, type, linktext) {
 
 /**
  * Updates a link's line interpolation algorithm
- * @param pos
+ *
- * @param interpolate
+ * @param positions
+ * @param interp
  */
 export const updateLinkInterpolate = function (positions, interp) {
   positions.forEach(function (pos) {
@@ -167,7 +172,8 @@ export const updateLinkInterpolate = function (positions, interp) {
 
 /**
  * Updates a link with a style
- * @param pos
+ *
+ * @param positions
  * @param style
  */
 export const updateLink = function (positions, style) {
@@ -204,6 +210,7 @@ export const addClass = function (id, style) {
 
 /**
  * Called by parser when a graph definition is found, stores the direction of the chart.
+ *
  * @param dir
  */
 export const setDirection = function (dir) {
@@ -224,6 +231,7 @@ export const setDirection = function (dir) {
 
 /**
  * Called by parser when a special node is found, e.g. a clickable element.
+ *
  * @param ids Comma separated list of ids
  * @param className Class to add
  */
@@ -298,8 +306,10 @@ const setClickFun = function (id, functionName, functionArgs) {
 
 /**
  * Called by parser when a link is found. Adds the URL to the vertex data.
+ *
  * @param ids Comma separated list of ids
  * @param linkStr URL to create a link for
+ * @param target
  */
 export const setLink = function (ids, linkStr, target) {
   ids.split(',').forEach(function (id) {
@@ -316,9 +326,10 @@ export const getTooltip = function (id) {
 
 /**
  * Called by parser when a click definition is found. Registers an event handler.
+ *
  * @param ids Comma separated list of ids
  * @param functionName Function to be called on click
- * @param tooltip Tooltip for the clickable element
+ * @param functionArgs
  */
 export const setClickEvent = function (ids, functionName, functionArgs) {
   ids.split(',').forEach(function (id) {
@@ -337,6 +348,7 @@ export const getDirection = function () {
 };
 /**
  * Retrieval function for fetching the found nodes after parsing has completed.
+ *
  * @returns {{}|*|vertices}
  */
 export const getVertices = function () {
@@ -345,6 +357,7 @@ export const getVertices = function () {
 
 /**
  * Retrieval function for fetching the found links after parsing has completed.
+ *
  * @returns {{}|*|edges}
  */
 export const getEdges = function () {
@@ -353,6 +366,7 @@ export const getEdges = function () {
 
 /**
  * Retrieval function for fetching the found class definitions after parsing has completed.
+ *
  * @returns {{}|*|classes}
  */
 export const getClasses = function () {
@@ -396,6 +410,8 @@ funs.push(setupToolTips);
 
 /**
  * Clears the internal graph db so that a new graph can be parsed.
+ *
+ * @param ver
  */
 export const clear = function (ver) {
   vertices = {};
@@ -423,6 +439,10 @@ export const defaultStyle = function () {
 
 /**
  * Clears the internal graph db so that a new graph can be parsed.
+ *
+ * @param _id
+ * @param list
+ * @param _title
  */
 export const addSubGraph = function (_id, list, _title) {
   // console.log('addSubGraph', _id, list, _title);
@@ -431,6 +451,9 @@ export const addSubGraph = function (_id, list, _title) {
   if (_id === _title && _title.match(/\s/)) {
     id = undefined;
   }
+  /**
+   * @param a
+   */
   function uniq(a) {
     const prims = { boolean: {}, number: {}, string: {} };
     const objs = [];
@@ -701,6 +724,9 @@ const exists = (allSgs, _id) => {
 };
 /**
  * Deletes an id from all subgraphs
+ *
+ * @param sg
+ * @param allSubgraphs
  */
 const makeUniq = (sg, allSubgraphs) => {
   const res = [];

src/diagrams/flowchart/flowRenderer-v2.js

@@ -21,8 +21,10 @@ export const setConf = function (cnf) {
 
 /**
  * Function that adds the vertices found during parsing to the graph to be rendered.
+ *
  * @param vert Object containing the vertices.
  * @param g The graph that is to be drawn.
+ * @param svgId
  */
 export const addVertices = function (vert, g, svgId) {
   const svg = select(`[id="${svgId}"]`);
@@ -34,6 +36,7 @@ export const addVertices = function (vert, g, svgId) {
 
     /**
      * Variable for storing the classes for the vertex
+     *
      * @type {string}
      */
     let classStr = 'default';
@@ -172,8 +175,9 @@ export const addVertices = function (vert, g, svgId) {
 
 /**
  * Add edges to graph based on parsed graph defninition
- * @param {Object} edges The edges to add to the graph
+ *
- * @param {Object} g The graph object
+ * @param {object} edges The edges to add to the graph
+ * @param {object} g The graph object
  */
 export const addEdges = function (edges, g) {
   log.info('abc78 edges = ', edges);
@@ -317,6 +321,8 @@ export const addEdges = function (edges, g) {
 
 /**
  * Returns the all the styles from classDef statements in the graph definition.
+ *
+ * @param text
  * @returns {object} classDef styles
  */
 export const getClasses = function (text) {
@@ -337,6 +343,7 @@ export const getClasses = function (text) {
 
 /**
  * Draws a flowchart in the tag with id: id based on the graph definition in text.
+ *
  * @param text
  * @param id
  */

src/diagrams/flowchart/flowRenderer.js

@@ -22,8 +22,10 @@ export const setConf = function (cnf) {
 
 /**
  * Function that adds the vertices found in the graph definition to the graph to be rendered.
+ *
  * @param vert Object containing the vertices.
  * @param g The graph that is to be drawn.
+ * @param svgId
  */
 export const addVertices = function (vert, g, svgId) {
   const svg = select(`[id="${svgId}"]`);
@@ -35,6 +37,7 @@ export const addVertices = function (vert, g, svgId) {
 
     /**
      * Variable for storing the classes for the vertex
+     *
      * @type {string}
      */
     let classStr = 'default';
@@ -150,8 +153,9 @@ export const addVertices = function (vert, g, svgId) {
 
 /**
  * Add edges to graph based on parsed graph defninition
- * @param {Object} edges The edges to add to the graph
+ *
- * @param {Object} g The graph object
+ * @param {object} edges The edges to add to the graph
+ * @param {object} g The graph object
  */
 export const addEdges = function (edges, g) {
   let cnt = 0;
@@ -257,6 +261,8 @@ export const addEdges = function (edges, g) {
 
 /**
  * Returns the all the styles from classDef statements in the graph definition.
+ *
+ * @param text
  * @returns {object} classDef styles
  */
 export const getClasses = function (text) {
@@ -276,6 +282,7 @@ export const getClasses = function (text) {
 
 /**
  * Draws a flowchart in the tag with id: id based on the graph definition in text.
+ *
  * @param text
  * @param id
  */

src/diagrams/gantt/ganttDb.js

@@ -490,8 +490,9 @@ const compileTasks = function () {
 
 /**
  * Called by parser when a link is found. Adds the URL to the vertex data.
+ *
  * @param ids Comma separated list of ids
- * @param linkStr URL to create a link for
+ * @param _linkStr URL to create a link for
  */
 export const setLink = function (ids, _linkStr) {
   let linkStr = _linkStr;
@@ -511,6 +512,7 @@ export const setLink = function (ids, _linkStr) {
 
 /**
  * Called by parser when a special node is found, e.g. a clickable element.
+ *
  * @param ids Comma separated list of ids
  * @param className Class to add
  */
@@ -561,6 +563,7 @@ const setClickFun = function (id, functionName, functionArgs) {
 
 /**
  * The callbackFunction is executed in a click event bound to the task with the specified id or the task's assigned text
+ *
  * @param id The task's id
  * @param callbackFunction A function to be executed when clicked on the task or the task's text
  */
@@ -587,6 +590,7 @@ const pushFun = function (id, callbackFunction) {
 
 /**
  * Called by parser when a click definition is found. Registers an event handler.
+ *
  * @param ids Comma separated list of ids
  * @param functionName Function to be called on click
  * @param functionArgs Function args the function should be called with
@@ -600,6 +604,7 @@ export const setClickEvent = function (ids, functionName, functionArgs) {
 
 /**
  * Binds all functions previously added to fun (specified through click) to the element
+ *
  * @param element
  */
 export const bindFunctions = function (element) {
@@ -641,6 +646,11 @@ export default {
   isInvalidDate,
 };
 
+/**
+ * @param data
+ * @param task
+ * @param tags
+ */
 function getTaskTags(data, task, tags) {
   let matchFound = true;
   while (matchFound) {

src/diagrams/gantt/ganttRenderer.js

@@ -71,6 +71,10 @@ export const draw = function (text, id) {
 
   categories = checkUnique(categories);
 
+  /**
+   * @param a
+   * @param b
+   */
   function taskCompare(a, b) {
     const taskA = a.startTime;
     const taskB = b.startTime;
@@ -98,6 +102,11 @@ export const draw = function (text, id) {
     .attr('y', conf.titleTopMargin)
     .attr('class', 'titleText');
 
+  /**
+   * @param tasks
+   * @param pageWidth
+   * @param pageHeight
+   */
   function makeGant(tasks, pageWidth, pageHeight) {
     const barHeight = conf.barHeight;
     const gap = barHeight + conf.barGap;
@@ -125,6 +134,15 @@ export const draw = function (text, id) {
     drawToday(leftPadding, topPadding, pageWidth, pageHeight);
   }
 
+  /**
+   * @param theArray
+   * @param theGap
+   * @param theTopPad
+   * @param theSidePad
+   * @param theBarHeight
+   * @param theColorScale
+   * @param w
+   */
   function drawRects(theArray, theGap, theTopPad, theSidePad, theBarHeight, theColorScale, w) {
     // Draw background rects covering the entire width of the graph, these form the section rows.
     svg
@@ -352,6 +370,16 @@ export const draw = function (text, id) {
         }
       });
   }
+  /**
+   * @param theGap
+   * @param theTopPad
+   * @param theSidePad
+   * @param w
+   * @param h
+   * @param tasks
+   * @param excludes
+   * @param includes
+   */
   function drawExcludeDays(theGap, theTopPad, theSidePad, w, h, tasks, excludes, includes) {
     const minTime = tasks.reduce(
       (min, { startTime }) => (min ? Math.min(min, startTime) : startTime),
@@ -414,6 +442,12 @@ export const draw = function (text, id) {
       .attr('class', 'exclude-range');
   }
 
+  /**
+   * @param theSidePad
+   * @param theTopPad
+   * @param w
+   * @param h
+   */
   function makeGrid(theSidePad, theTopPad, w, h) {
     let bottomXAxis = axisBottom(timeScale)
       .tickSize(-h + theTopPad + conf.gridLineStartPadding)
@@ -450,6 +484,10 @@ export const draw = function (text, id) {
     }
   }
 
+  /**
+   * @param theGap
+   * @param theTopPad
+   */
   function vertLabels(theGap, theTopPad) {
     const numOccurances = [];
     let prevGap = 0;
@@ -503,6 +541,12 @@ export const draw = function (text, id) {
       });
   }
 
+  /**
+   * @param theSidePad
+   * @param theTopPad
+   * @param w
+   * @param h
+   */
   function drawToday(theSidePad, theTopPad, w, h) {
     const todayMarker = ganttDb.getTodayMarker();
     if (todayMarker === 'off') {
@@ -525,7 +569,11 @@ export const draw = function (text, id) {
     }
   }
 
-  // from this stackexchange question: http://stackoverflow.com/questions/1890203/unique-for-arrays-in-javascript
+  /**
+   * from this stackexchange question: http://stackoverflow.com/questions/1890203/unique-for-arrays-in-javascript
+   *
+   * @param arr
+   */
   function checkUnique(arr) {
     const hash = {};
     const result = [];
@@ -540,7 +588,11 @@ export const draw = function (text, id) {
     return result;
   }
 
-  // from this stackexchange question: http://stackoverflow.com/questions/14227981/count-how-many-strings-in-an-array-have-duplicates-in-the-same-array
+  /**
+   *from this stackexchange question: http://stackoverflow.com/questions/14227981/count-how-many-strings-in-an-array-have-duplicates-in-the-same-array
+   *
+   * @param arr
+   */
   function getCounts(arr) {
     let i = arr.length; // const to loop over
     const obj = {}; // obj to store results
@@ -550,7 +602,12 @@ export const draw = function (text, id) {
     return obj;
   }
 
-  // get specific from everything
+  /**
+   * get specific from everything
+   *
+   * @param word
+   * @param arr
+   */
   function getCount(word, arr) {
     return getCounts(arr)[word] || 0;
   }

src/diagrams/git/gitGraphAst.js

@@ -7,10 +7,17 @@ let curBranch = 'master';
 let direction = 'LR';
 let seq = 0;
 
+/**
+ *
+ */
 function getId() {
   return random({ length: 7 });
 }
 
+/**
+ * @param currentCommit
+ * @param otherCommit
+ */
 function isfastforwardable(currentCommit, otherCommit) {
   log.debug('Entering isfastforwardable:', currentCommit.id, otherCommit.id);
   while (currentCommit.seq <= otherCommit.seq && currentCommit !== otherCommit) {
@@ -30,6 +37,10 @@ function isfastforwardable(currentCommit, otherCommit) {
   return currentCommit.id === otherCommit.id;
 }
 
+/**
+ * @param currentCommit
+ * @param otherCommit
+ */
 function isReachableFrom(currentCommit, otherCommit) {
   const currentSeq = currentCommit.seq;
   const otherSeq = otherCommit.seq;
@@ -37,6 +48,10 @@ function isReachableFrom(currentCommit, otherCommit) {
   return false;
 }
 
+/**
+ * @param list
+ * @param fn
+ */
 function uniqBy(list, fn) {
   const recordMap = Object.create(null);
   return list.reduce((out, item) => {
@@ -138,6 +153,11 @@ export const reset = function (commitRef) {
   branches[curBranch] = commit.id;
 };
 
+/**
+ * @param arr
+ * @param key
+ * @param newval
+ */
 function upsert(arr, key, newval) {
   const index = arr.indexOf(key);
   if (index === -1) {
@@ -147,6 +167,9 @@ function upsert(arr, key, newval) {
   }
 }
 
+/**
+ * @param commitArr
+ */
 function prettyPrintCommitHistory(commitArr) {
   const commit = commitArr.reduce((out, commit) => {
     if (out.seq > commit.seq) return out;

src/diagrams/git/gitGraphRenderer.js

@@ -30,6 +30,9 @@ export const setConf = function (c) {
   apiConfig = c;
 };
 
+/**
+ * @param svg
+ */
 function svgCreateDefs(svg) {
   svg
     .append('defs')
@@ -52,6 +55,12 @@ function svgCreateDefs(svg) {
     .html('');
 }
 
+/**
+ * @param svg
+ * @param points
+ * @param colorIdx
+ * @param interpolate
+ */
 function svgDrawLine(svg, points, colorIdx, interpolate) {
   const curve = interpolateToCurve(interpolate, curveBasis);
   const color = config.branchColors[colorIdx % config.branchColors.length];
@@ -72,7 +81,12 @@ function svgDrawLine(svg, points, colorIdx, interpolate) {
     .style('fill', 'none');
 }
 
-// Pass in the element and its pre-transform coords
+/**
+ * Pass in the element and its pre-transform coords
+ *
+ * @param element
+ * @param coords
+ */
 function getElementCoords(element, coords) {
   coords = coords || element.node().getBBox();
   const ctm = element.node().getCTM();
@@ -86,6 +100,13 @@ function getElementCoords(element, coords) {
   };
 }
 
+/**
+ * @param svg
+ * @param fromId
+ * @param toId
+ * @param direction
+ * @param color
+ */
 function svgDrawLineForCommits(svg, fromId, toId, direction, color) {
   log.debug('svgDrawLineForCommits: ', fromId, toId);
   const fromBbox = getElementCoords(svg.select('#node-' + fromId + ' circle'));
@@ -190,10 +211,20 @@ function svgDrawLineForCommits(svg, fromId, toId, direction, color) {
   }
 }
 
+/**
+ * @param svg
+ * @param selector
+ */
 function cloneNode(svg, selector) {
   return svg.select(selector).node().cloneNode(true);
 }
 
+/**
+ * @param svg
+ * @param commitid
+ * @param branches
+ * @param direction
+ */
 function renderCommitHistory(svg, commitid, branches, direction) {
   let commit;
   const numCommits = Object.keys(allCommitsDict).length;
@@ -276,6 +307,12 @@ function renderCommitHistory(svg, commitid, branches, direction) {
   }
 }
 
+/**
+ * @param svg
+ * @param commit
+ * @param direction
+ * @param branchColor
+ */
 function renderLines(svg, commit, direction, branchColor) {
   branchColor = branchColor || 0;
   while (commit.seq > 0 && !commit.lineDrawn) {

src/diagrams/info/infoRenderer.js

@@ -17,16 +17,18 @@ export const setConf = function (cnf) {
 
 /**
  * Draws a an info picture in the tag with id: id based on the graph definition in text.
- * @param text
+ *
- * @param id
+ * @param {any} text
+ * @param {any} id
+ * @param {any} version
  */
-export const draw = (txt, id, ver) => {
+export const draw = (text, id, version) => {
   try {
     const parser = infoParser.parser;
     parser.yy = db;
-    log.debug('Renering info diagram\n' + txt);
+    log.debug('Renering info diagram\n' + text);
     // Parse the graph definition
-    parser.parse(txt);
+    parser.parse(text);
     log.debug('Parsed info diagram');
     // Fetch the default direction, use TD if none was found
     const svg = select('#' + id);
@@ -39,7 +41,7 @@ export const draw = (txt, id, ver) => {
       .attr('class', 'version')
       .attr('font-size', '32px')
       .style('text-anchor', 'middle')
-      .text('v ' + ver);
+      .text('v ' + version);
 
     svg.attr('height', 100);
     svg.attr('width', 400);

src/diagrams/pie/pieRenderer.js

@@ -12,6 +12,7 @@ let conf = configApi.getConfig();
 
 /**
  * Draws a Pie Chart with the data given in text.
+ *
  * @param text
  * @param id
  */

src/diagrams/sequence/sequenceDb.js

@@ -251,6 +251,10 @@ export const addALink = function (actorId, text) {
   }
 };
 
+/**
+ * @param {any} actor
+ * @param {any} links
+ */
 function insertLinks(actor, links) {
   if (actor.links == null) {
     actor.links = links;
@@ -275,6 +279,10 @@ export const addProperties = function (actorId, text) {
   }
 };
 
+/**
+ * @param {any} actor
+ * @param {any} properties
+ */
 function insertProperties(actor, properties) {
   if (actor.properties == null) {
     actor.properties = properties;

src/diagrams/sequence/sequenceRenderer.js

@@ -97,6 +97,9 @@ export const bounds = {
   updateBounds: function (startx, starty, stopx, stopy) {
     const _self = this;
     let cnt = 0;
+    /**
+     * @param {any} type
+     */
     function updateFn(type) {
       return function updateItemBounds(item) {
         cnt++;
@@ -198,8 +201,9 @@ export const bounds = {
 
 /**
  * Draws an note in the diagram with the attached line
- * @param elem - The diagram to draw to.
+ *
- * @param noteModel:{x: number, y: number, message: string, width: number} - startx: x axis start position, verticalPos: y axis position, messsage: the message to be shown, width: Set this with a custom width to override the default configured width.
+ * @param {any} elem - The diagram to draw to.
+ * @param {{x: number, y: number, message: string, width: number}} noteModel - startx: x axis start position, verticalPos: y axis position, messsage: the message to be shown, width: Set this with a custom width to override the default configured width.
  */
 const drawNote = function (elem, noteModel) {
   bounds.bumpVerticalPos(conf.boxMargin);
@@ -268,8 +272,9 @@ const actorFont = (cnf) => {
 
 /**
  * Draws a message
- * @param g - the parent of the message element
+ *
- * @param msgModel - the model containing fields describing a message
+ * @param {any} g - the parent of the message element
+ * @param {any} msgModel - the model containing fields describing a message
  */
 const drawMessage = function (g, msgModel) {
   bounds.bumpVerticalPos(10);
@@ -499,6 +504,13 @@ const activationBounds = function (actor, actors) {
   return [left, right];
 };
 
+/**
+ * @param {any} loopWidths
+ * @param {any} msg
+ * @param {any} preMargin
+ * @param {any} postMargin
+ * @param {any} addLoopFn
+ */
 function adjustLoopHeightForWrap(loopWidths, msg, preMargin, postMargin, addLoopFn) {
   bounds.bumpVerticalPos(preMargin);
   let heightAdjust = postMargin;
@@ -521,8 +533,9 @@ function adjustLoopHeightForWrap(loopWidths, msg, preMargin, postMargin, addLoop
 
 /**
  * Draws a sequenceDiagram in the tag with id: id based on the graph definition in text.
- * @param text
+ *
- * @param id
+ * @param {any} text
+ * @param {any} id
  */
 export const draw = function (text, id) {
   conf = configApi.getConfig().sequence;
@@ -556,6 +569,10 @@ export const draw = function (text, id) {
   svgDraw.insertArrowFilledHead(diagram);
   svgDraw.insertSequenceNumber(diagram);
 
+  /**
+   * @param {any} msg
+   * @param {any} verticalPos
+   */
   function activeEnd(msg, verticalPos) {
     const activationData = bounds.endActivation(msg);
     if (activationData.starty + 18 > verticalPos) {
@@ -775,8 +792,9 @@ export const draw = function (text, id) {
  * It will enumerate each given message, and will determine its text width, in relation
  * to the actor it originates from, and destined to.
  *
- * @param actors - The actors map
+ * @param {any} actors - The actors map
- * @param messages - A list of message objects to iterate
+ * @param {Array} messages - A list of message objects to iterate
+ * @returns {any}
  */
 const getMaxMessageWidthPerActor = function (actors, messages) {
   const maxMessageWidthPerActor = {};
@@ -894,8 +912,8 @@ const getRequiredPopupWidth = function (actor) {
  * An actor's margin is determined by the width of the actor, the width of the
  * largest message that originates from it, and the configured conf.actorMargin.
  *
- * @param actors - The actors map to calculate margins for
+ * @param {any} actors - The actors map to calculate margins for
- * @param actorToMessageWidth - A map of actor key -> max message width it holds
+ * @param {any} actorToMessageWidth - A map of actor key -> max message width it holds
  */
 const calculateActorMargins = function (actors, actorToMessageWidth) {
   let maxHeight = 0;

src/diagrams/sequence/svgDraw.js

@@ -275,6 +275,14 @@ export const drawText = function (elem, textData) {
 };
 
 export const drawLabel = function (elem, txtObject) {
+  /**
+   * @param {any} x
+   * @param {any} y
+   * @param {any} width
+   * @param {any} height
+   * @param {any} cut
+   * @returns {any}
+   */
   function genPoints(x, y, width, height, cut) {
     return (
       x +
@@ -320,9 +328,10 @@ export const fixLifeLineHeights = (diagram, bounds) => {
 
 /**
  * Draws an actor in the diagram with the attached line
- * @param elem - The diagram we'll draw to.
+ *
- * @param actor - The actor to draw.
+ * @param {any} elem - The diagram we'll draw to.
- * @param conf - drawText implementation discriminator object
+ * @param {any} actor - The actor to draw.
+ * @param {any} conf - drawText implementation discriminator object
  */
 const drawActorTypeParticipant = function (elem, actor, conf) {
   const center = actor.x + actor.width / 2;
@@ -494,11 +503,12 @@ export const anchorElement = function (elem) {
 };
 /**
  * Draws an activation in the diagram
- * @param elem - element to append activation rect.
+ *
- * @param bounds - activation box bounds.
+ * @param {any} elem - element to append activation rect.
- * @param verticalPos - precise y cooridnate of bottom activation box edge.
+ * @param {any} bounds - activation box bounds.
- * @param conf - sequence diagram config object.
+ * @param {any} verticalPos - precise y cooridnate of bottom activation box edge.
- * @param actorActivations - number of activations on the actor.
+ * @param {any} conf - sequence diagram config object.
+ * @param {any} actorActivations - number of activations on the actor.
  */
 export const drawActivation = function (elem, bounds, verticalPos, conf, actorActivations) {
   const rect = getNoteRect();
@@ -513,10 +523,12 @@ export const drawActivation = function (elem, bounds, verticalPos, conf, actorAc
 
 /**
  * Draws a loop in the diagram
- * @param elem - elemenet to append the loop to.
+ *
- * @param loopModel - loopModel of the given loop.
+ * @param {any} elem - elemenet to append the loop to.
- * @param labelText - Text within the loop.
+ * @param {any} loopModel - loopModel of the given loop.
- * @param conf - diagrom configuration
+ * @param {any} labelText - Text within the loop.
+ * @param {any} conf - diagrom configuration
+ * @returns {any}
  */
 export const drawLoop = function (elem, loopModel, labelText, conf) {
   const {
@@ -613,8 +625,9 @@ export const drawLoop = function (elem, loopModel, labelText, conf) {
 
 /**
  * Draws a background rectangle
- * @param elem diagram (reference for bounds)
+ *
- * @param bounds shape of the rectangle
+ * @param {any} elem diagram (reference for bounds)
+ * @param {any} bounds shape of the rectangle
  */
 export const drawBackgroundRect = function (elem, bounds) {
   const rectElem = drawRect(elem, {
@@ -675,6 +688,8 @@ export const insertClockIcon = function (elem) {
 
 /**
  * Setup arrow head and define the marker. The result is appended to the svg.
+ *
+ * @param elem
  */
 export const insertArrowHead = function (elem) {
   elem
@@ -692,6 +707,8 @@ export const insertArrowHead = function (elem) {
 };
 /**
  * Setup arrow head and define the marker. The result is appended to the svg.
+ *
+ * @param {any} elem
  */
 export const insertArrowFilledHead = function (elem) {
   elem
@@ -708,6 +725,8 @@ export const insertArrowFilledHead = function (elem) {
 };
 /**
  * Setup node number. The result is appended to the svg.
+ *
+ * @param {any} elem
  */
 export const insertSequenceNumber = function (elem) {
   elem
@@ -727,6 +746,8 @@ export const insertSequenceNumber = function (elem) {
 };
 /**
  * Setup arrow head and define the marker. The result is appended to the svg.
+ *
+ * @param {any} elem
  */
 export const insertArrowCrossHead = function (elem) {
   const defs = elem.append('defs');
@@ -791,6 +812,15 @@ export const getNoteRect = function () {
 };
 
 const _drawTextCandidateFunc = (function () {
+  /**
+   * @param {any} content
+   * @param {any} g
+   * @param {any} x
+   * @param {any} y
+   * @param {any} width
+   * @param {any} height
+   * @param {any} textAttrs
+   */
   function byText(content, g, x, y, width, height, textAttrs) {
     const text = g
       .append('text')
@@ -801,6 +831,16 @@ const _drawTextCandidateFunc = (function () {
     _setTextAttrs(text, textAttrs);
   }
 
+  /**
+   * @param {any} content
+   * @param {any} g
+   * @param {any} x
+   * @param {any} y
+   * @param {any} width
+   * @param {any} height
+   * @param {any} textAttrs
+   * @param {any} conf
+   */
   function byTspan(content, g, x, y, width, height, textAttrs, conf) {
     const { actorFontSize, actorFontFamily, actorFontWeight } = conf;
 
@@ -830,6 +870,16 @@ const _drawTextCandidateFunc = (function () {
     }
   }
 
+  /**
+   * @param {any} content
+   * @param {any} g
+   * @param {any} x
+   * @param {any} y
+   * @param {any} width
+   * @param {any} height
+   * @param {any} textAttrs
+   * @param {any} conf
+   */
   function byFo(content, g, x, y, width, height, textAttrs, conf) {
     const s = g.append('switch');
     const f = s
@@ -856,6 +906,10 @@ const _drawTextCandidateFunc = (function () {
     _setTextAttrs(text, textAttrs);
   }
 
+  /**
+   * @param {any} toText
+   * @param {any} fromTextAttrsDict
+   */
   function _setTextAttrs(toText, fromTextAttrsDict) {
     for (const key in fromTextAttrsDict) {
       if (fromTextAttrsDict.hasOwnProperty(key)) { // eslint-disable-line
@@ -870,6 +924,15 @@ const _drawTextCandidateFunc = (function () {
 })();
 
 const _drawMenuItemTextCandidateFunc = (function () {
+  /**
+   * @param {any} content
+   * @param {any} g
+   * @param {any} x
+   * @param {any} y
+   * @param {any} width
+   * @param {any} height
+   * @param {any} textAttrs
+   */
   function byText(content, g, x, y, width, height, textAttrs) {
     const text = g
       .append('text')
@@ -880,6 +943,16 @@ const _drawMenuItemTextCandidateFunc = (function () {
     _setTextAttrs(text, textAttrs);
   }
 
+  /**
+   * @param {any} content
+   * @param {any} g
+   * @param {any} x
+   * @param {any} y
+   * @param {any} width
+   * @param {any} height
+   * @param {any} textAttrs
+   * @param {any} conf
+   */
   function byTspan(content, g, x, y, width, height, textAttrs, conf) {
     const { actorFontSize, actorFontFamily, actorFontWeight } = conf;
 
@@ -905,6 +978,16 @@ const _drawMenuItemTextCandidateFunc = (function () {
     }
   }
 
+  /**
+   * @param {any} content
+   * @param {any} g
+   * @param {any} x
+   * @param {any} y
+   * @param {any} width
+   * @param {any} height
+   * @param {any} textAttrs
+   * @param {any} conf
+   */
   function byFo(content, g, x, y, width, height, textAttrs, conf) {
     const s = g.append('switch');
     const f = s
@@ -931,6 +1014,10 @@ const _drawMenuItemTextCandidateFunc = (function () {
     _setTextAttrs(text, textAttrs);
   }
 
+  /**
+   * @param {any} toText
+   * @param {any} fromTextAttrsDict
+   */
   function _setTextAttrs(toText, fromTextAttrsDict) {
     for (const key in fromTextAttrsDict) {
       if (fromTextAttrsDict.hasOwnProperty(key)) { // eslint-disable-line

src/diagrams/state/shapes.js

@@ -6,10 +6,10 @@ import common from '../common/common';
 import { getConfig } from '../../config';
 import { log } from '../../logger';
 
-// let conf;
-
 /**
  * Draws a start state as a black circle
+ *
+ * @param {any} g
  */
 export const drawStartState = (g) =>
   g
@@ -23,6 +23,8 @@ export const drawStartState = (g) =>
 
 /**
  * Draws a start state as a black circle
+ *
+ * @param {any} g
  */
 export const drawDivider = (g) =>
   g
@@ -37,6 +39,9 @@ export const drawDivider = (g) =>
 
 /**
  * Draws a an end state as a black circle
+ *
+ * @param {any} g
+ * @param {any} stateDef
  */
 export const drawSimpleState = (g, stateDef) => {
   const state = g
@@ -60,8 +65,10 @@ export const drawSimpleState = (g, stateDef) => {
 
 /**
  * Draws a state with descriptions
+ *
  * @param {*} g
  * @param {*} stateDef
+ * @returns
  */
 export const drawDescrState = (g, stateDef) => {
   const addTspan = function (textEl, txt, isFirst) {
@@ -135,8 +142,10 @@ export const drawDescrState = (g, stateDef) => {
 /**
  * Function that creates an title row and a frame around a substate for a composit state diagram.
  * The function returns a new d3 svg object with updated width and height properties;
+ *
  * @param {*} g The d3 svg object for the substate to framed
  * @param {*} stateDef The info about the
+ * @param {any} altBkg
  */
 export const addTitleAndBox = (g, stateDef, altBkg) => {
   const pad = getConfig().state.padding;
@@ -337,6 +346,7 @@ const _drawLongText = (_text, x, y, g) => {
 
 /**
  * Draws a note to the diagram
+ *
  * @param text - The text of the given note.
  * @param g - The element the note is attached to.
  */
@@ -356,6 +366,7 @@ export const drawNote = (text, g) => {
 /**
  * Starting point for drawing a state. The function finds out the specifics
  * about the state and renders with approprtiate function.
+ *
  * @param {*} elem
  * @param {*} stateDef
  */

src/diagrams/state/stateDb.js

@@ -117,10 +117,12 @@ let endCnt = 0; // eslint-disable-line
 
 /**
  * Function called by parser when a node definition has been found.
- * @param id
+ *
- * @param text
+ * @param {any} id
- * @param type
+ * @param {any} type
- * @param style
+ * @param {any} doc
+ * @param {any} descr
+ * @param {any} note
  */
 export const addState = function (id, type, doc, descr, note) {
   if (typeof currentDocument.states[id] === 'undefined') {

src/diagrams/state/stateRenderer-v2.js

@@ -20,6 +20,8 @@ let nodeDb = {};
 
 /**
  * Returns the all the styles from classDef statements in the graph definition.
+ *
+ * @param {any} text
  * @returns {object} classDef styles
  */
 export const getClasses = function (text) {
@@ -223,8 +225,9 @@ const getDir = (nodes, defaultDir) => {
 };
 /**
  * Draws a flowchart in the tag with id: id based on the graph definition in text.
- * @param text
+ *
- * @param id
+ * @param {any} text
+ * @param {any} id
  */
 export const draw = function (text, id) {
   log.info('Drawing state diagram (v2)', id);

src/diagrams/state/stateRenderer.js

@@ -19,10 +19,10 @@ const transformationLog = {};
 
 export const setConf = function () {};
 
-// Todo optimize
-
 /**
  * Setup arrow head and define the marker. The result is appended to the svg.
+ *
+ * @param {any} elem
  */
 const insertMarkers = function (elem) {
   elem
@@ -40,8 +40,9 @@ const insertMarkers = function (elem) {
 
 /**
  * Draws a flowchart in the tag with id: id based on the graph definition in text.
- * @param text
+ *
- * @param id
+ * @param {any} text
+ * @param {any} id
  */
 export const draw = function (text, id) {
   conf = getConfig().state;
@@ -90,7 +91,7 @@ const getLabelWidth = (text) => {
 };
 
 const renderDoc = (doc, diagram, parentId, altBkg) => {
-  // // Layout graph, Create a new directed graph
+  // Layout graph, Create a new directed graph
   const graph = new graphlib.Graph({
     compound: true,
     multigraph: true,

src/diagrams/user-journey/journeyRenderer.js

@@ -17,6 +17,9 @@ export const setConf = function (cnf) {
 
 const actors = {};
 
+/**
+ * @param {any} diagram
+ */
 function drawActorLegend(diagram) {
   const conf = getConfig().journey;
   // Draw the actors
@@ -140,6 +143,9 @@ export const bounds = {
     const conf = getConfig().journey;
     const _self = this;
     let cnt = 0;
+    /**
+     * @param {any} type
+     */
     function updateFn(type) {
       return function updateItemBounds(item) {
         cnt++;

src/diagrams/user-journey/svgDraw.js

@@ -51,6 +51,9 @@ export const drawFace = function (element, faceData) {
     .attr('fill', '#666')
     .attr('stroke', '#666');
 
+  /**
+   * @param {any} face
+   */
   function smile(face) {
     const arc = d3arc()
       .startAngle(Math.PI / 2)
@@ -65,6 +68,9 @@ export const drawFace = function (element, faceData) {
       .attr('transform', 'translate(' + faceData.cx + ',' + (faceData.cy + 2) + ')');
   }
 
+  /**
+   * @param {any} face
+   */
   function sad(face) {
     const arc = d3arc()
       .startAngle((3 * Math.PI) / 2)
@@ -79,6 +85,9 @@ export const drawFace = function (element, faceData) {
       .attr('transform', 'translate(' + faceData.cx + ',' + (faceData.cy + 7) + ')');
   }
 
+  /**
+   * @param {any} face
+   */
   function ambivalent(face) {
     face
       .append('line')
@@ -147,6 +156,13 @@ export const drawText = function (elem, textData) {
 };
 
 export const drawLabel = function (elem, txtObject) {
+  /**
+   * @param {any} x
+   * @param {any} y
+   * @param {any} width
+   * @param {any} height
+   * @param {any} cut
+   */
   function genPoints(x, y, width, height, cut) {
     return (
       x +
@@ -209,9 +225,10 @@ export const drawSection = function (elem, section, conf) {
 let taskCount = -1;
 /**
  * Draws an actor in the diagram with the attaced line
- * @param elem The HTML element
+ *
- * @param task The task to render
+ * @param {any} elem The HTML element
- * @param conf The global configuration
+ * @param {any} task The task to render
+ * @param {any} conf The global configuration
  */
 export const drawTask = function (elem, task, conf) {
   const center = task.x + conf.width / 2;
@@ -279,8 +296,9 @@ export const drawTask = function (elem, task, conf) {
 
 /**
  * Draws a background rectangle
- * @param elem The html element
+ *
- * @param bounds The bounds of the drawing
+ * @param {any} elem The html element
+ * @param {any} bounds The bounds of the drawing
  */
 export const drawBackgroundRect = function (elem, bounds) {
   const rectElem = drawRect(elem, {
@@ -321,6 +339,16 @@ export const getNoteRect = function () {
 };
 
 const _drawTextCandidateFunc = (function () {
+  /**
+   * @param {any} content
+   * @param {any} g
+   * @param {any} x
+   * @param {any} y
+   * @param {any} width
+   * @param {any} height
+   * @param {any} textAttrs
+   * @param {any} colour
+   */
   function byText(content, g, x, y, width, height, textAttrs, colour) {
     const text = g
       .append('text')
@@ -332,6 +360,17 @@ const _drawTextCandidateFunc = (function () {
     _setTextAttrs(text, textAttrs);
   }
 
+  /**
+   * @param {any} content
+   * @param {any} g
+   * @param {any} x
+   * @param {any} y
+   * @param {any} width
+   * @param {any} height
+   * @param {any} textAttrs
+   * @param {any} conf
+   * @param {any} colour
+   */
   function byTspan(content, g, x, y, width, height, textAttrs, conf, colour) {
     const { taskFontSize, taskFontFamily } = conf;
 
@@ -361,6 +400,16 @@ const _drawTextCandidateFunc = (function () {
     }
   }
 
+  /**
+   * @param {any} content
+   * @param {any} g
+   * @param {any} x
+   * @param {any} y
+   * @param {any} width
+   * @param {any} height
+   * @param {any} textAttrs
+   * @param {any} conf
+   */
   function byFo(content, g, x, y, width, height, textAttrs, conf) {
     const body = g.append('switch');
     const f = body
@@ -383,13 +432,16 @@ const _drawTextCandidateFunc = (function () {
       .style('display', 'table-cell')
       .style('text-align', 'center')
       .style('vertical-align', 'middle')
-      // .style('color', colour)
       .text(content);
 
     byTspan(content, body, x, y, width, height, textAttrs, conf);
     _setTextAttrs(text, textAttrs);
   }
 
+  /**
+   * @param {any} toText
+   * @param {any} fromTextAttrsDict
+   */
   function _setTextAttrs(toText, fromTextAttrsDict) {
     for (const key in fromTextAttrsDict) {
       if (key in fromTextAttrsDict) {

src/errorRenderer.js

@@ -15,8 +15,9 @@ export const setConf = function (cnf) {
 
 /**
  * Draws a an info picture in the tag with id: id based on the graph definition in text.
- * @param text
+ *
- * @param id
+ * @param {any} id
+ * @param {any} ver
  */
 export const draw = (id, ver) => {
   try {

src/mermaid.js

@@ -25,7 +25,7 @@ import utils from './utils';
  *  b-->|No |d(Transform)
  * ```
  * Renders the mermaid diagrams
- * @param nodes a css selector or an array of nodes
+ *
  */
 const init = function () {
   const conf = mermaidAPI.getConfig();

src/mermaidAPI.js

@@ -55,21 +55,15 @@ import journeyRenderer from './diagrams/user-journey/journeyRenderer';
 import journeyParser from './diagrams/user-journey/parser/journey';
 import errorRenderer from './errorRenderer';
 import { attachFunctions } from './interactionDb';
-
-// import * as configApi from './config';
-// // , {
-// //   setConfig,
-// //   configApi.getConfig,
-// //   configApi.updateSiteConfig,
-// //   configApi.setSiteConfig,
-// //   configApi.getSiteConfig,
-// //   configApi.defaultConfig
-// // }
 import { log, setLogLevel } from './logger';
 import getStyles from './styles';
 import theme from './themes';
 import utils, { directiveSanitizer, assignWithDepth } from './utils';
 
+/**
+ * @param text
+ * @returns {any}
+ */
 function parse(text) {
   const cnf = configApi.getConfig();
   const graphInit = utils.detectInit(text, cnf);
@@ -213,12 +207,14 @@ export const decodeEntities = function (text) {
  *      mermaidAPI.render('id1',graphDefinition,cb);
  *  });
  *```
- * @param id the id of the element to be rendered
+ *
- * @param _txt the graph definition
+ * @param {any} id the id of the element to be rendered
- * @param cb callback which is called after rendering is finished with the svg code as inparam.
+ * @param {any} _txt the graph definition
- * @param container selector to element in which a div with the graph temporarily will be inserted. In one is
+ * @param {any} cb callback which is called after rendering is finished with the svg code as inparam.
+ * @param {any} 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.
+ * @returns {any}
  */
 const render = function (id, _txt, cb, container) {
   configApi.reset();
@@ -227,13 +223,6 @@ const render = function (id, _txt, cb, container) {
   if (graphInit) {
     configApi.addDirective(graphInit);
   }
-  // else {
-  //   configApi.reset();
-  //   const siteConfig = configApi.getSiteConfig();
-  //   configApi.addDirective(siteConfig);
-  // }
-  // console.warn('Render fetching config');
-
   let cnf = configApi.getConfig();
   // Check the maximum allowed text size
   if (_txt.length > cnf.maxTextSize) {
@@ -442,17 +431,6 @@ const render = function (id, _txt, cb, container) {
     .selectAll('foreignobject > *')
     .attr('xmlns', 'http://www.w3.org/1999/xhtml');
 
-  // if (cnf.arrowMarkerAbsolute) {
-  //   url =
-  //     window.location.protocol +
-  //     '//' +
-  //     window.location.host +
-  //     window.location.pathname +
-  //     window.location.search;
-  //   url = url.replace(/\(/g, '\\(');
-  //   url = url.replace(/\)/g, '\\)');
-  // }
-
   // Fix for when the base tag is used
   let svgCode = select('#d' + id).node().innerHTML;
   log.debug('cnf.arrowMarkerAbsolute', cnf.arrowMarkerAbsolute);
@@ -564,6 +542,9 @@ const handleDirective = function (p, directive, type) {
   }
 };
 
+/**
+ * @param {any} conf
+ */
 function updateRendererConfigs(conf) {
   // Todo remove, all diagrams should get config on demoand from the config object, no need for this
   gitGraphRenderer.setConf(conf.git);
@@ -585,6 +566,9 @@ function updateRendererConfigs(conf) {
   errorRenderer.setConf(conf.class);
 }
 
+/**
+ *
+ */
 function reinitialize() {
   // `mermaidAPI.reinitialize: v${pkg.version}`,
   //   JSON.stringify(options),
@@ -600,6 +584,9 @@ function reinitialize() {
   // log.debug('mermaidAPI.reinitialize: ', config);
 }
 
+/**
+ * @param {any} options
+ */
 function initialize(options) {
   // console.warn(`mermaidAPI.initialize: v${pkg.version} `, options);
 

src/utils.js

@@ -63,8 +63,8 @@ const anyComment = /\s*%%.*\n/gm;
  *  f-->g
  *  g-->h
  * ```
- *
  * @param {string} text The text defining the graph
+ * @param {any} cnf
  * @returns {object} the json object representing the init passed to mermaid.initialize()
  */
 export const detectInit = function (text, cnf) {
@@ -111,7 +111,6 @@ export const detectInit = function (text, cnf) {
  *  f-->g
  *  g-->h
  * ```
- *
  * @param {string} text The text defining the graph
  * @param {string|RegExp} type The directive to return (default: null)
  * @returns {object | Array} An object or Array representing the directive(s): { type: string, args: object|null } matched by the input type
@@ -173,8 +172,8 @@ export const detectDirective = function (text, type = null) {
  *  f-->g
  *  g-->h
  * ```
- *
  * @param {string} text The text defining the graph
+ * @param {any} cnf
  * @returns {string} A graph definition key
  */
 export const detectType = function (text, cnf) {
@@ -252,9 +251,9 @@ const memoize = (fn, resolver) => {
  * @function isSubstringInArray
  * Detects whether a substring in present in a given array
  * @param {string} str The substring to detect
- * @param {array} arr The array to search
+ * @param {Array} arr The array to search
  * @returns {number} the array index containing the substring or -1 if not present
- **/
+ */
 export const isSubstringInArray = function (str, arr) {
   for (let i = 0; i < arr.length; i++) {
     if (arr[i].match(str)) return i;
@@ -393,6 +392,11 @@ const calcCardinalityPosition = (isRelationTypePresent, points, initialPosition)
 
 /**
  * position ['start_left', 'start_right', 'end_left', 'end_right']
+ *
+ * @param {any} terminalMarkerSize
+ * @param {any} position
+ * @param {any} _points
+ * @returns {any}
  */
 const calcTerminalLabelPosition = (terminalMarkerSize, position, _points) => {
   // Todo looking to faster cloning method
@@ -486,6 +490,10 @@ export const generateId = () => {
   return 'id-' + Math.random().toString(36).substr(2, 12) + '-' + cnt;
 };
 
+/**
+ * @param {any} length
+ * @returns {any}
+ */
 function makeid(length) {
   var result = '';
   var characters = '0123456789abcdef';
@@ -520,9 +528,9 @@ export const random = (options) => {
  * <p>
  * If src is a destructured array of objects and dst is not an array, assignWithDepth will apply each element of src to dst
  * in order.
- * @param dst:any - the destination of the merge
+ * @param {any} dst - the destination of the merge
- * @param src:any - the source object(s) to merge into destination
+ * @param {any} src - the source object(s) to merge into destination
- * @param config:{ depth: number, clobber: boolean } - depth: depth to traverse within src and dst for merging -
+ * @param {{ depth: number, clobber: boolean }} config - depth: depth to traverse within src and dst for merging -
  * clobber: should dissimilar types clobber (default: { depth: 2, clobber: false })
  * @returns {*}
  */
@@ -679,9 +687,9 @@ const breakString = memoize(
  * If the wrapped text text has greater height, we extend the height, so it's
  * value won't overflow.
  *
- * @return - The height for the given text
+ * @param {any} text the text to measure
- * @param text the text to measure
+ * @param {any} config - the config for fontSize, fontFamily, and fontWeight all impacting the resulting size
- * @param config - the config for fontSize, fontFamily, and fontWeight all impacting the resulting size
+ * @returns {any} - The height for the given text
  */
 export const calculateTextHeight = function (text, config) {
   config = Object.assign(
@@ -694,9 +702,9 @@ export const calculateTextHeight = function (text, config) {
 /**
  * This calculates the width of the given text, font size and family.
  *
- * @return - The width for the given text
+ * @param {any} text - The text to calculate the width of
- * @param text - The text to calculate the width of
+ * @param {any} config - the config for fontSize, fontFamily, and fontWeight all impacting the resulting size
- * @param config - the config for fontSize, fontFamily, and fontWeight all impacting the resulting size
+ * @returns {any} - The width for the given text
  */
 export const calculateTextWidth = function (text, config) {
   config = Object.assign({ fontSize: 12, fontWeight: 400, fontFamily: 'Arial' }, config);
@@ -706,9 +714,9 @@ export const calculateTextWidth = function (text, config) {
 /**
  * This calculates the dimensions of the given text, font size, font family, font weight, and margins.
  *
- * @return - The width for the given text
+ * @param {any} text - The text to calculate the width of
- * @param text - The text to calculate the width of
+ * @param {any} config - the config for fontSize, fontFamily, fontWeight, and margin all impacting the resulting size
- * @param config - the config for fontSize, fontFamily, fontWeight, and margin all impacting the resulting size
+ * @returns - The width for the given text
  */
 export const calculateTextDimensions = memoize(
   function (text, config) {

yarn.lock

@@ -1272,6 +1272,15 @@
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.3.tgz#90420f9f9c6d3987f176a19a7d8e764271a2f55d"
   integrity sha512-Fxt+AfXgjMoin2maPIYzFZnQjAXjAL0PHscM5pRTtatFqB+vZxAM9tLp2Optnuw3QOQC40jTNeGYFOMvyf7v9g==
 
+"@es-joy/jsdoccomment@0.12.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/@es-joy/jsdoccomment/-/jsdoccomment-0.12.0.tgz#47de05d86e9728ae3a5f1c57d6e9b63b07c6dc98"
+  integrity sha512-Gw4/j9v36IKY8ET+W0GoOzrRw17xjf21EIFFRL3zx21fF5MnqmeNpNi+PU/LKjqLpPb2Pw2XdlJbYM31VVo/PQ==
+  dependencies:
+    comment-parser "1.2.4"
+    esquery "^1.4.0"
+    jsdoc-type-pratt-parser "2.0.0"
+
 "@eslint/eslintrc@^1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.0.4.tgz#dfe0ff7ba270848d10c5add0715e04964c034b31"
@@ -3157,6 +3166,11 @@ commander@^5.1.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
   integrity sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==
 
+comment-parser@1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/comment-parser/-/comment-parser-1.2.4.tgz#489f3ee55dfd184a6e4bffb31baba284453cb760"
+  integrity sha512-pm0b+qv+CkWNriSTMsfnjChF9kH0kxz55y44Wo5le9qLxMj5xDQAaEd9ZN1ovSuk9CsrncWaFwgpOMg7ClJwkw==
+
 common-tags@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.0.tgz#8e3153e542d4a39e9b10554434afaaf98956a937"
@@ -4652,6 +4666,21 @@ eslint-config-prettier@^8.3.0:
   resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz#f7471b20b6fe8a9a9254cc684454202886a2dd7a"
   integrity sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==
 
+eslint-plugin-jsdoc@^37.0.3:
+  version "37.0.3"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-37.0.3.tgz#42ddd0393c166c2724a7fdee808b94ab1d9dfb00"
+  integrity sha512-Qg/gIZAfcrM4Qu/JzcnxPGD45Je6wPLFzMZQboeqit/CL4aY6wuzBTkgUMiWXfw/PaPl+sb0GF1XdBlV23ReDA==
+  dependencies:
+    "@es-joy/jsdoccomment" "0.12.0"
+    comment-parser "1.2.4"
+    debug "^4.3.2"
+    esquery "^1.4.0"
+    jsdoc-type-pratt-parser "^2.0.0"
+    lodash "^4.17.21"
+    regextras "^0.8.0"
+    semver "^7.3.5"
+    spdx-expression-parse "^3.0.1"
+
 eslint-plugin-prettier@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.0.0.tgz#8b99d1e4b8b24a762472b4567992023619cb98e0"
@@ -6883,6 +6912,11 @@ jsbn@~0.1.0:
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
   integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
 
+jsdoc-type-pratt-parser@2.0.0, jsdoc-type-pratt-parser@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-2.0.0.tgz#ec739a0868922515fcb179852e990e89b52b9044"
+  integrity sha512-sUuj2j48wxrEpbFjDp1sAesAxPiLT+z0SWVmMafyIINs6Lj5gIPKh3VrkBZu4E/Dv+wHpOot0m6H8zlHQjwqeQ==
+
 jsdom@^16.6.0:
   version "16.6.0"
   resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-16.6.0.tgz#f79b3786682065492a3da6a60a4695da983805ac"
@@ -8680,6 +8714,11 @@ regexpu-core@^4.7.1:
     unicode-match-property-ecmascript "^1.0.4"
     unicode-match-property-value-ecmascript "^1.2.0"
 
+regextras@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/regextras/-/regextras-0.8.0.tgz#ec0f99853d4912839321172f608b544814b02217"
+  integrity sha512-k519uI04Z3SaY0fLX843MRXnDeG2+vHOFsyhiPZvNLe7r8rD2YNRjq4BQLZZ0oAr2NrtvZlICsXysGNFPGa3CQ==
+
 regjsgen@^0.5.1:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.5.2.tgz#92ff295fb1deecbf6ecdab2543d207e91aa33733"
@@ -9063,7 +9102,7 @@ semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
-semver@^7.1.1, semver@^7.2.1, semver@^7.3.2, semver@^7.3.4:
+semver@^7.1.1, semver@^7.2.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5:
   version "7.3.5"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7"
   integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==
@@ -9327,7 +9366,7 @@ spdx-exceptions@^2.1.0:
   resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz#3f28ce1a77a00372683eade4a433183527a2163d"
   integrity sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==
 
-spdx-expression-parse@^3.0.0:
+spdx-expression-parse@^3.0.0, spdx-expression-parse@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz#cf70f50482eefdc98e3ce0a6833e4a53ceeba679"
   integrity sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==