Merge branch 'eslint-fix' of https://github.com/mmorel-35/mermaid into mmorel-35-eslint-fix

2025-09-21 00:09:51 +02:00 · 2021-11-18 18:05:15 +01:00
parent 6318eee07e 5b8a4a0b7a
commit 9d1f32cc0a
61 changed files with 4465 additions and 3079 deletions
--- a/src/diagrams/class/classDb.js
+++ b/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
 */
@@ -98,8 +100,9 @@ export const addRelation = function (relation) {
 };

 /**
- * Adds an annotation to the specified class
- * Annotations mark special properties of the given type (like 'interface' or 'service')
+ * 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,11 +114,11 @@ 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
- * If the member is ending with a closing bracket ) it is treated as a method
- * Otherwise the member will be treated as a normal property
+ * @param member The full name of the member. If the member is enclosed in <<brackets>> it is
+ *   treated as an annotation If the member is ending with a closing bracket ) it is treated as a
+ *   method Otherwise the member will be treated as a normal property
 * @public
 */
 export const addMember = function (className, member) {
@@ -154,6 +157,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 +173,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 +188,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 +212,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
--- a/src/diagrams/class/classRenderer-v2.js
+++ b/src/diagrams/class/classRenderer-v2.js
@@ -25,7 +25,12 @@ const conf = {

 /**
 * Function that adds the vertices found during parsing to the graph to be rendered.
- * @param {Object<string, { cssClasses: Array<string>; text: string; id: string; type: string; domId: string; }>} classes Object containing the vertices.
+ *
+ * @param {Object<
+ *   string,
+ *   { cssClasses: string[]; text: string; id: string; type: string; domId: string }
+ * >} classes
+ *   Object containing the vertices.
 * @param {SVGGElement} g The graph that is to be drawn.
 */
 export const addClasses = function (classes, g) {
@@ -40,6 +45,7 @@ export const addClasses = function (classes, g) {

    /**
     * Variable for storing the classes for the vertex
+     *
     * @type {string}
     */
    let cssClassStr = '';
@@ -130,8 +136,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;
@@ -207,7 +214,8 @@ export const addRelations = function (relations, g) {
      edgeData.arrowheadStyle = 'fill: #333';
      edgeData.labelpos = 'c';

-      if (getConfig().flowchart.htmlLabels) { // eslint-disable-line
+      if (getConfig().flowchart.htmlLabels) {
+        // eslint-disable-line
        edgeData.labelType = 'html';
        edgeData.label = '<span class="edgeLabel">' + edge.text + '</span>';
      } else {
@@ -228,6 +236,7 @@ export const addRelations = function (relations, g) {

 /**
 * Gets the ID with the same label as in the cache
+ *
 * @param {string} label The label to look for
 * @returns {string} The resulting ID
 */
@@ -241,7 +250,8 @@ const getGraphId = function (label) {

 /**
 * Merges the value of `conf` with the passed `cnf`
- * @param {Object} cnf Config to merge
+ *
+ * @param {object} cnf Config to merge
 */
 export const setConf = function (cnf) {
  const keys = Object.keys(cnf);
@@ -253,6 +263,7 @@ export const setConf = function (cnf) {

 /**
 * Draws a flowchart in the tag with id: id based on the graph definition in text.
+ *
 * @param {string} text
 * @param {string} id
 */
@@ -504,8 +515,9 @@ export const draw = function (text, id) {

 /**
 * Gets the arrow marker for a type index
+ *
 * @param {number} type The type to look for
- * @returns {"aggregation" | "extension" | "composition" | "dependency"} The arrow marker
+ * @returns {'aggregation' | 'extension' | 'composition' | 'dependency'} The arrow marker
 */
 function getArrowMarker(type) {
  let marker;
--- a/src/diagrams/class/classRenderer.js
+++ b/src/diagrams/class/classRenderer.js
@@ -20,6 +20,7 @@ const conf = {

 /**
 * Gets the ID with the same label as in the cache
+ *
 * @param {string} label The label to look for
 * @returns {string} The resulting ID
 */
@@ -33,6 +34,7 @@ const getGraphId = function (label) {

 /**
 * Setup arrow head and define the marker. The result is appended to the svg.
+ *
 * @param {SVGSVGElement} elem The SVG element to append to
 */
 const insertMarkers = function (elem) {
@@ -139,7 +141,8 @@ const insertMarkers = function (elem) {

 /**
 * Merges the value of `conf` with the passed `cnf`
- * @param {Object} cnf Config to merge
+ *
+ * @param {object} cnf Config to merge
 */
 export const setConf = function (cnf) {
  const keys = Object.keys(cnf);
@@ -151,6 +154,7 @@ export const setConf = function (cnf) {

 /**
 * Draws a flowchart in the tag with id: id based on the graph definition in text.
+ *
 * @param {string} text
 * @param {string} id
 */
--- a/src/diagrams/class/svgDraw.js
+++ b/src/diagrams/class/svgDraw.js
@@ -146,7 +146,10 @@ export const drawEdge = function (elem, path, relation, conf) {

 /**
 * Renders a class diagram
+ *
 * @param {SVGSVGElement} elem The element to draw it into
+ * @param classDef
+ * @param conf
 * @todo Add more information in the JSDOC here
 */
 export const drawClass = function (elem, classDef, conf) {
@@ -389,10 +392,11 @@ const buildLegacyDisplay = function (text) {

 /**
 * Adds a <tspan> for a member in a diagram
+ *
 * @param {SVGElement} textEl The element to append to
 * @param {string} txt The member
 * @param {boolean} isFirst
- * @param {{ padding: string; textHeight: string; }} conf The configuration for the member
+ * @param {{ padding: string; textHeight: string }} conf The configuration for the member
 */
 const addTspan = function (textEl, txt, isFirst, conf) {
  let member = parseMember(txt);
@@ -410,9 +414,11 @@ const addTspan = function (textEl, txt, isFirst, conf) {

 /**
 * Makes generics in typescript syntax
+ *
 * @example <caption>Array of array of strings in typescript syntax</caption>
- * // returns "Array<Array<string>>"
- * parseGenericTypes("Array~Array~string~~");
+ *   // returns "Array<Array<string>>"
+ *   parseGenericTypes('Array~Array~string~~');
+ *
 * @param {string} text The text to convert
 * @returns {string} The converted string
 */
@@ -431,7 +437,8 @@ const parseGenericTypes = function (text) {

 /**
 * Gives the styles for a classifier
- * @param {"+" | "-" | "#" | "~" | "*" | "$"} classifier The classifier string
+ *
+ * @param {'+' | '-' | '#' | '~' | '*' | '$'} classifier The classifier string
 * @returns {string} Styling for the classifier
 */
 const parseClassifier = function (classifier) {
--- a/src/diagrams/common/common.js
+++ b/src/diagrams/common/common.js
@@ -2,6 +2,7 @@ import DOMPurify from 'dompurify';

 /**
 * Gets the number of lines in a string
+ *
 * @param {string | undefined} s The string to check the lines for
 * @returns {number} The number of lines in that string
 */
@@ -14,6 +15,7 @@ export const getRows = (s) => {

 /**
 * Removes script tags from a text
+ *
 * @param {string} txt The text to sanitize
 * @returns {string} The safer text
 */
@@ -91,6 +93,7 @@ export const lineBreakRegex = /<br\s*\/?>/gi;

 /**
 * Whether or not a text has any linebreaks
+ *
 * @param {string} text The text to test
 * @returns {boolean} Whether or not the text has breaks
 */
@@ -100,8 +103,9 @@ export const hasBreaks = (text) => {

 /**
 * Splits on <br> tags
+ *
 * @param {string} text Text to split
- * @returns {Array<string>} List of lines as strings
+ * @returns {string[]} List of lines as strings
 */
 export const splitBreaks = (text) => {
  return text.split(lineBreakRegex);
@@ -109,6 +113,7 @@ export const splitBreaks = (text) => {

 /**
 * Converts placeholders to linebreaks in HTML
+ *
 * @param {string} s HTML with placeholders
 * @returns {string} HTML with breaks instead of placeholders
 */
@@ -118,6 +123,7 @@ const placeholderToBreak = (s) => {

 /**
 * Opposite of `placeholderToBreak`, converts breaks to placeholders
+ *
 * @param {string} s HTML string
 * @returns {string} String with placeholders
 */
@@ -127,6 +133,7 @@ const breakToPlaceholder = (s) => {

 /**
 * Gets the current URL
+ *
 * @param {boolean} useAbsolute Whether to return the absolute URL or not
 * @returns {string} The current URL
 */
@@ -148,6 +155,7 @@ const getUrl = (useAbsolute) => {

 /**
 * Converts a string/boolean into a boolean
+ *
 * @param {string | boolean} val String or boolean to convert
 * @returns {boolean} The result from the input
 */
--- a/src/diagrams/er/erDb.js
+++ b/src/diagrams/er/erDb.js
@@ -1,6 +1,3 @@
-/**
- *
- */
 import { log } from '../../logger';
 import mermaidAPI from '../../mermaidAPI';
 import * as configApi from '../../config';
@@ -49,6 +46,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
--- a/src/diagrams/er/erMarkers.js
+++ b/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;
--- a/src/diagrams/er/erRenderer.js
+++ b/src/diagrams/er/erRenderer.js
@@ -11,9 +11,11 @@ import { configureSvgSize } from '../../utils';
 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
+ * 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
+ *
+ * @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)
+ * @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 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
+ *
+ * @param relationships The relationships to be added
+ * @param g The graph
+ * @returns {Array} The array of relationships
 */
 const addRelationships = function (relationships, g) {
  relationships.forEach(function (r) {
@@ -370,10 +375,12 @@ 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
- * @param insert the insertion point in the svg DOM (because relationships have markers that need to sit 'behind' opaque entity boxes)
+ *
+ * @param svg The svg node
+ * @param rel The relationship to draw in the svg
+ * @param g The graph containing the edge information
+ * @param insert The insertion point in the svg DOM (because relationships have markers that need to
+ *   sit 'behind' opaque entity boxes)
 */
 const drawRelationshipFromLayout = function (svg, rel, g, insert) {
  relCnt++;
@@ -502,8 +509,9 @@ 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
+ *
+ * @param text The text of the diagram
+ * @param id The unique id of the DOM node that contains the diagram
 */
 export const draw = function (text, id) {
  log.info('Drawing ER diagram');
--- a/src/diagrams/flowchart/flowChartShapes.js
+++ b/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,7 @@ function cylinder(parent, bbox, node) {
  return shapeSvg;
 }

+/** @param render */
 export function addToRender(render) {
  render.shapes().question = question;
  render.shapes().hexagon = hexagon;
@@ -265,6 +321,7 @@ 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 +348,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')
--- a/src/diagrams/flowchart/flowDb.js
+++ b/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,7 +348,8 @@ export const getDirection = function () {
 };
 /**
 * Retrieval function for fetching the found nodes after parsing has completed.
- * @returns {{}|*|vertices}
+ *
+ * @returns {{} | any | vertices}
 */
 export const getVertices = function () {
  return vertices;
@@ -345,7 +357,8 @@ export const getVertices = function () {

 /**
 * Retrieval function for fetching the found links after parsing has completed.
- * @returns {{}|*|edges}
+ *
+ * @returns {{} | any | edges}
 */
 export const getEdges = function () {
  return edges;
@@ -353,7 +366,8 @@ export const getEdges = function () {

 /**
 * Retrieval function for fetching the found class definitions after parsing has completed.
- * @returns {{}|*|classes}
+ *
+ * @returns {{} | any | classes}
 */
 export const getClasses = function () {
  return classes;
@@ -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 = {};
@@ -413,16 +429,17 @@ export const clear = function (ver) {
 export const setGen = (ver) => {
  version = ver || 'gen-1';
 };
-/**
- *
- * @returns {string}
- */
+/** @returns {string} */
 export const defaultStyle = function () {
  return 'fill:#ffa;stroke: #f66; stroke-width: 3px; stroke-dasharray: 5, 5;fill:#ffa;stroke: #666;';
 };

 /**
 * 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 +448,7 @@ 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 = [];
@@ -474,9 +492,7 @@ export const addSubGraph = function (_id, list, _title) {

  log.info('Adding', subGraph.id, subGraph.nodes, subGraph.dir);

-  /**
-   * Deletes an id from all subgraphs
-   */
+  /** Deletes an id from all subgraphs */
  // const del = _id => {
  //   subGraphs.forEach(sg => {
  //     const pos = sg.nodes.indexOf(_id);
@@ -701,6 +717,9 @@ const exists = (allSgs, _id) => {
 };
 /**
 * Deletes an id from all subgraphs
+ *
+ * @param sg
+ * @param allSubgraphs
 */
 const makeUniq = (sg, allSubgraphs) => {
  const res = [];
--- a/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/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,7 +321,9 @@ export const addEdges = function (edges, g) {

 /**
 * Returns the all the styles from classDef statements in the graph definition.
- * @returns {object} classDef styles
+ *
+ * @param text
+ * @returns {object} ClassDef styles
 */
 export const getClasses = function (text) {
  log.info('Extracting classes');
@@ -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
 */
--- a/src/diagrams/flowchart/flowRenderer.js
+++ b/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,7 +261,9 @@ export const addEdges = function (edges, g) {

 /**
 * Returns the all the styles from classDef statements in the graph definition.
- * @returns {object} classDef styles
+ *
+ * @param text
+ * @returns {object} ClassDef styles
 */
 export const getClasses = function (text) {
  log.info('Extracting classes');
@@ -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
 */
--- a/src/diagrams/flowchart/styles.js
+++ b/src/diagrams/flowchart/styles.js
@@ -1,6 +1,22 @@
 /**
 * Returns the styles given options
- * @param {{ fontFamily: string; nodeTextColor: string; textColor: string; titleColor: string; mainBkg: string; nodeBorder: string; arrowheadColor: string; lineColor: string; edgeLabelBackground: string; clusterBkg: string; clusterBorder: string; tertiaryColor: string; border2: string; }} options The options for the styles
+ *
+ * @param {{
+ *   fontFamily: string;
+ *   nodeTextColor: string;
+ *   textColor: string;
+ *   titleColor: string;
+ *   mainBkg: string;
+ *   nodeBorder: string;
+ *   arrowheadColor: string;
+ *   lineColor: string;
+ *   edgeLabelBackground: string;
+ *   clusterBkg: string;
+ *   clusterBorder: string;
+ *   tertiaryColor: string;
+ *   border2: string;
+ * }} options
+ *   The options for the styles
 * @returns {string} The resulting styles
 */
 const getStyles = (options) =>
--- a/src/diagrams/gantt/ganttDb.js
+++ b/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
 */
@@ -560,7 +562,9 @@ 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
+ * 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 +591,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 +605,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 +647,11 @@ export default {
  isInvalidDate,
 };

+/**
+ * @param data
+ * @param task
+ * @param tags
+ */
 function getTaskTags(data, task, tags) {
  let matchFound = true;
  while (matchFound) {
--- a/src/diagrams/gantt/ganttRenderer.js
+++ b/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,12 @@ 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 +589,12 @@ 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 +604,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;
  }
--- a/src/diagrams/git/gitGraphAst.js
+++ b/src/diagrams/git/gitGraphAst.js
@@ -11,6 +11,10 @@ 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 +34,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 +45,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 +150,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 +164,7 @@ function upsert(arr, key, newval) {
  }
 }

+/** @param commitArr */
 function prettyPrintCommitHistory(commitArr) {
  const commit = commitArr.reduce((out, commit) => {
    if (out.seq > commit.seq) return out;
--- a/src/diagrams/git/gitGraphRenderer.js
+++ b/src/diagrams/git/gitGraphRenderer.js
@@ -30,6 +30,7 @@ export const setConf = function (c) {
  apiConfig = c;
 };

+/** @param svg */
 function svgCreateDefs(svg) {
  svg
    .append('defs')
@@ -52,6 +53,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 +79,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 +98,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 +209,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 +305,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) {
--- a/src/diagrams/info/infoDb.js
+++ b/src/diagrams/info/infoDb.js
@@ -1,6 +1,4 @@
-/**
- * Created by knut on 15-01-14.
- */
+/** Created by knut on 15-01-14. */
 import { log } from '../../logger';

 var message = '';
--- a/src/diagrams/info/infoRenderer.js
+++ b/src/diagrams/info/infoRenderer.js
@@ -1,6 +1,4 @@
-/**
- * Created by knut on 14-12-11.
- */
+/** Created by knut on 14-12-11. */
 import { select } from 'd3';
 import db from './infoDb';
 import infoParser from './parser/info';
@@ -17,16 +15,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 +39,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);
--- a/src/diagrams/pie/pieDb.js
+++ b/src/diagrams/pie/pieDb.js
@@ -1,6 +1,3 @@
-/**
- *
- */
 import { log } from '../../logger';
 import mermaidAPI from '../../mermaidAPI';
 import * as configApi from '../../config';
--- a/src/diagrams/pie/pieRenderer.js
+++ b/src/diagrams/pie/pieRenderer.js
@@ -1,6 +1,4 @@
-/**
- * Created by AshishJ on 11-09-2019.
- */
+/** Created by AshishJ on 11-09-2019. */
 import { select, scaleOrdinal, pie as d3pie, arc } from 'd3';
 import pieData from './pieDb';
 import pieParser from './parser/pie';
@@ -12,6 +10,7 @@ let conf = configApi.getConfig();

 /**
 * Draws a Pie Chart with the data given in text.
+ *
 * @param text
 * @param id
 */
--- a/src/diagrams/sequence/sequenceDb.js
+++ b/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;
--- a/src/diagrams/sequence/sequenceRenderer.js
+++ b/src/diagrams/sequence/sequenceRenderer.js
@@ -97,6 +97,7 @@ 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 +199,11 @@ 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) {
@@ -769,14 +786,14 @@ export const draw = function (text, id) {
 };

 /**
- * Retrieves the max message width of each actor, supports signals (messages, loops)
- * and notes.
+ * Retrieves the max message width of each actor, supports signals (messages, loops) and notes.
 *
- * It will enumerate each given message, and will determine its text width, in relation
- * to the actor it originates from, and destined to.
+ * 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 messages - A list of message objects to iterate
+ * @param {any} actors - The actors map
+ * @param {Array} messages - A list of message objects to iterate
+ * @returns {any}
 */
 const getMaxMessageWidthPerActor = function (actors, messages) {
  const maxMessageWidthPerActor = {};
@@ -888,14 +905,13 @@ const getRequiredPopupWidth = function (actor) {
 };

 /**
- * This will calculate the optimal margin for each given actor, for a given
- * actor->messageWidth map.
+ * This will calculate the optimal margin for each given actor, for a given actor->messageWidth map.
 *
- * 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.
+ * 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 actorToMessageWidth - A map of actor key -> max message width it holds
+ * @param {any} actors - The actors map to calculate margins for
+ * @param {any} actorToMessageWidth - A map of actor key -> max message width it holds
 */
 const calculateActorMargins = function (actors, actorToMessageWidth) {
  let maxHeight = 0;
--- a/src/diagrams/sequence/svgDraw.js
+++ b/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 conf - drawText implementation discriminator object
+ *
+ * @param {any} elem - The diagram we'll draw to.
+ * @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 verticalPos - precise y cooridnate of bottom activation box edge.
- * @param conf - sequence diagram config object.
- * @param actorActivations - number of activations on the actor.
+ *
+ * @param {any} elem - Element to append activation rect.
+ * @param {any} bounds - Activation box bounds.
+ * @param {any} verticalPos - Precise y cooridnate of bottom activation box edge.
+ * @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 labelText - Text within the loop.
- * @param conf - diagrom configuration
+ *
+ * @param {any} elem - Elemenet to append the loop to.
+ * @param {any} loopModel - LoopModel of the given loop.
+ * @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
--- a/src/diagrams/state/shapes.js
+++ b/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
+ *
+ * @param {any} g
+ * @param {any} stateDef
+ * @returns
 */
 export const drawDescrState = (g, stateDef) => {
  const addTspan = function (textEl, txt, isFirst) {
@@ -128,15 +135,14 @@ export const drawDescrState = (g, stateDef) => {
  return g;
 };

-/**
- * Adds the creates a box around the existing content and adds a
- * panel for the id on top of the content.
- */
+/** Adds the creates a box around the existing content and adds a panel for the id on top of the content. */
 /**
 * 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} g The d3 svg object for the substate to framed
+ * @param {any} stateDef The info about the
+ * @param {any} altBkg
 */
 export const addTitleAndBox = (g, stateDef, altBkg) => {
  const pad = getConfig().state.padding;
@@ -337,6 +343,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.
 */
@@ -354,10 +361,11 @@ 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
+ * Starting point for drawing a state. The function finds out the specifics about the state and
+ * renders with approprtiate function.
+ *
+ * @param {any} elem
+ * @param {any} stateDef
 */

 export const drawState = function (elem, stateDef) {
--- a/src/diagrams/state/stateDb.js
+++ b/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 type
- * @param style
+ *
+ * @param {any} id
+ * @param {any} type
+ * @param {any} doc
+ * @param {any} descr
+ * @param {any} note
 */
 export const addState = function (id, type, doc, descr, note) {
  if (typeof currentDocument.states[id] === 'undefined') {
--- a/src/diagrams/state/stateRenderer-v2.js
+++ b/src/diagrams/state/stateRenderer-v2.js
@@ -20,7 +20,9 @@ let nodeDb = {};

 /**
 * Returns the all the styles from classDef statements in the graph definition.
- * @returns {object} classDef styles
+ *
+ * @param {any} text
+ * @returns {object} ClassDef styles
 */
 export const getClasses = function (text) {
  log.trace('Extracting classes');
@@ -227,8 +229,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);
--- a/src/diagrams/state/stateRenderer.js
+++ b/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,
--- a/src/diagrams/user-journey/journeyRenderer.js
+++ b/src/diagrams/user-journey/journeyRenderer.js
@@ -17,6 +17,7 @@ export const setConf = function (cnf) {

 const actors = {};

+/** @param {any} diagram */
 function drawActorLegend(diagram) {
  const conf = getConfig().journey;
  // Draw the actors
@@ -140,6 +141,7 @@ export const bounds = {
    const conf = getConfig().journey;
    const _self = this;
    let cnt = 0;
+    /** @param {any} type */
    function updateFn(type) {
      return function updateItemBounds(item) {
        cnt++;
--- a/src/diagrams/user-journey/svgDraw.js
+++ b/src/diagrams/user-journey/svgDraw.js
@@ -51,6 +51,7 @@ 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 +66,7 @@ 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 +81,7 @@ 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 +150,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 +219,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 conf The global configuration
+ *
+ * @param {any} elem The HTML element
+ * @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 +290,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 +333,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 +354,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 +394,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 +426,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) {