Use undefined instead of null

.eslintrc.json

@@ -69,6 +69,7 @@
     "unicorn/no-abusive-eslint-disable": "error",
     "unicorn/no-array-push-push": "error",
     "unicorn/no-for-loop": "error",
+    "unicorn/no-null": "error",
     "unicorn/no-instanceof-array": "error",
     "unicorn/no-typeof-undefined": "error",
     "unicorn/no-unnecessary-await": "error",

packages/mermaid-example-diagram/src/mermaidUtils.ts

@@ -1,4 +1,4 @@
-const warning = () => null;
+const warning = () => undefined;
 
 export type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal';
 

packages/mermaid-mindmap/src/mindmapDb.js

@@ -17,11 +17,11 @@ const getParent = function (level) {
     }
   }
   // No parent found
-  return null;
+  return undefined;
 };
 
 export const getMindmap = () => {
-  return nodes.length > 0 ? nodes[0] : null;
+  return nodes.length > 0 ? nodes[0] : undefined;
 };
 export const addNode = (level, id, descr, type) => {
   log.info('addNode', level, id, descr, type);

packages/mermaid-mindmap/src/svgDraw.js

@@ -19,7 +19,7 @@ function wrap(text, width) {
       y = text.attr('y'),
       dy = parseFloat(text.attr('dy')),
       tspan = text
-        .text(null)
+        .text(undefined)
         .append('tspan')
         .attr('x', 0)
         .attr('y', y)

packages/mermaid/src/diagram-api/diagram-orchestration.ts

@@ -141,12 +141,12 @@ export const addDiagrams = () => {
         parse: () => {
           throw new Error(
             'Diagrams beginning with --- are not valid. ' +
-              'If you were trying to use a YAML front-matter, please ensure that ' +
-              "you've correctly opened and closed the YAML front-matter with unindented `---` blocks"
+            'If you were trying to use a YAML front-matter, please ensure that ' +
+            "you've correctly opened and closed the YAML front-matter with unindented `---` blocks"
           );
         },
       },
-      init: () => null, // no op
+      init: () => undefined, // no op
     },
     (text) => {
       return text.toLowerCase().trimStart().startsWith('---');

packages/mermaid/src/diagrams/c4/c4Db.js

@@ -12,8 +12,8 @@ let boundarys = [
     alias: 'global',
     label: { text: 'global' },
     type: { text: 'global' },
-    tags: null,
-    link: null,
+    tags: undefined,
+    link: undefined,
     parentBoundary: '',
   },
 ];
@@ -728,8 +728,8 @@ export const clear = function () {
       alias: 'global',
       label: { text: 'global' },
       type: { text: 'global' },
-      tags: null,
-      link: null,
+      tags: undefined,
+      link: undefined,
       parentBoundary: '',
     },
   ];

packages/mermaid/src/diagrams/c4/c4Renderer.js

@@ -347,7 +347,7 @@ let getIntersectPoint = function (fromNode, endPoint) {
 
   let fromDYX = fromNode.height / fromNode.width;
 
-  let returnPoint = null;
+  let returnPoint = undefined;
 
   if (y1 == y2 && x1 < x2) {
     returnPoint = new Point(x1 + fromNode.width, fromCenterY);
@@ -599,7 +599,7 @@ export const draw = function (_text, id, _version, diagObj) {
   c4ShapeInRow = db.getC4ShapeInRow();
   c4BoundaryInRow = db.getC4BoundaryInRow();
 
-  log.debug(`C:${JSON.stringify(conf, null, 2)}`);
+  log.debug(`C:${JSON.stringify(conf, undefined, 2)}`);
 
   const diagram =
     securityLevel === 'sandbox' ? root.select(`[id="${id}"]`) : select(`[id="${id}"]`);

packages/mermaid/src/diagrams/gantt/ganttDb.js

@@ -176,7 +176,7 @@ const checkTaskDates = function (task, dateFormat, excludes, includes) {
 
 const fixTaskDates = function (startTime, endTime, dateFormat, excludes, includes) {
   let invalid = false;
-  let renderEndTime = null;
+  let renderEndTime = undefined;
   while (startTime <= endTime) {
     if (!invalid) {
       renderEndTime = endTime.toDate();
@@ -199,7 +199,7 @@ const getStartDate = function (prevTime, dateFormat, str) {
 
   if (afterStatement !== null) {
     // check all after ids and take the latest
-    let latestEndingTask = null;
+    let latestEndingTask = undefined;
     afterStatement[1].split(' ').forEach(function (id) {
       let task = findTaskById(id);
       if (task !== undefined) {
@@ -419,7 +419,7 @@ export const addTask = function (descr, data) {
     type: currentSection,
     processed: false,
     manualEndTime: false,
-    renderEndTime: null,
+    renderEndTime: undefined,
     raw: { data: data },
     task: descr,
     classes: [],

packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts

@@ -191,7 +191,7 @@ describe('when using the ganttDb', function () {
 
     expect(tasks[3].startTime).toEqual(moment('2019-02-01', 'YYYY-MM-DD').toDate());
     expect(tasks[3].endTime).toEqual(moment('2019-02-20', 'YYYY-MM-DD').toDate());
-    expect(tasks[3].renderEndTime).toBeNull(); // Fixed end
+    expect(tasks[3].renderEndTime).toBeUndefined(); // Fixed end
     expect(tasks[3].id).toEqual('id4');
     expect(tasks[3].task).toEqual('test4');
 
@@ -360,13 +360,13 @@ describe('when using the ganttDb', function () {
 
     expect(tasks[0].startTime).toEqual(moment('2019-09-30', 'YYYY-MM-DD').toDate());
     expect(tasks[0].endTime).toEqual(moment('2019-10-11', 'YYYY-MM-DD').toDate());
-    expect(tasks[1].renderEndTime).toBeNull(); // Fixed end
+    expect(tasks[1].renderEndTime).toBeUndefined(); // Fixed end
     expect(tasks[0].id).toEqual('id1');
     expect(tasks[0].task).toEqual('test1');
 
     expect(tasks[1].startTime).toEqual(moment('2019-10-11', 'YYYY-MM-DD').toDate());
     expect(tasks[1].endTime).toEqual(moment('2019-10-31', 'YYYY-MM-DD').toDate());
-    expect(tasks[1].renderEndTime).toBeNull(); // Fixed end
+    expect(tasks[1].renderEndTime).toBeUndefined(); // Fixed end
     expect(tasks[1].id).toEqual('id2');
     expect(tasks[1].task).toEqual('test2');
   });
@@ -387,7 +387,7 @@ describe('when using the ganttDb', function () {
 
       expect(tasks[1].startTime).toEqual(moment('2019-02-01', 'YYYY-MM-DD').toDate());
       expect(tasks[1].endTime).toEqual(moment('2019-02-04', 'YYYY-MM-DD').toDate());
-      expect(tasks[1].renderEndTime).toBeNull(); // Fixed end
+      expect(tasks[1].renderEndTime).toBeUndefined(); // Fixed end
       expect(tasks[1].manualEndTime).toBeTruthy();
       expect(tasks[1].id).toEqual('id2');
       expect(tasks[1].task).toEqual('test2');

packages/mermaid/src/diagrams/gantt/ganttRenderer.js

@@ -434,7 +434,7 @@ export const draw = function (text, id, version, diagObj) {
     }
 
     const excludeRanges = [];
-    let range = null;
+    let range = undefined;
     let d = moment(minTime);
     while (d.valueOf() <= maxTime) {
       if (diagObj.db.isInvalidDate(d, dateFormat, excludes, includes)) {
@@ -449,7 +449,7 @@ export const draw = function (text, id, version, diagObj) {
       } else {
         if (range) {
           excludeRanges.push(range);
-          range = null;
+          range = undefined;
         }
       }
       d.add(1, 'd');

packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js

@@ -125,6 +125,7 @@ describe('when parsing a gantt diagram it', function () {
       'click cl2 call ganttTestClick()\n';
 
     expect(parserFnConstructor(str)).not.toThrow();
+    // eslint-disable-next-line unicorn/no-null
     expect(ganttDb.setClickEvent).toHaveBeenCalledWith('cl2', 'ganttTestClick', null);
   });
   it('should parse callback specifier with arbitrary number of args', function () {

packages/mermaid/src/diagrams/git/gitGraphAst.js

@@ -17,7 +17,7 @@ import {
 let mainBranchName = getConfig().gitGraph.mainBranchName;
 let mainBranchOrder = getConfig().gitGraph.mainBranchOrder;
 let commits = {};
-let head = null;
+let head = undefined;
 let branchesConfig = {};
 branchesConfig[mainBranchName] = { name: mainBranchName, order: mainBranchOrder };
 let branches = {};
@@ -120,7 +120,7 @@ export const commit = function (msg, id, type, tag) {
     seq: seq++,
     type: type ? type : commitType.NORMAL,
     tag: tag ? tag : '',
-    parents: head == null ? [] : [head.id],
+    parents: head == undefined ? [] : [head.id],
     branch: curBranch,
   };
   head = commit;
@@ -246,7 +246,7 @@ export const merge = function (otherBranch, custom_id, override_type, custom_tag
     id: custom_id ? custom_id : seq + '-' + getId(),
     message: 'merged branch ' + otherBranch + ' into ' + curBranch,
     seq: seq++,
-    parents: [head == null ? null : head.id, branches[otherBranch]],
+    parents: [head?.id, branches[otherBranch]],
     branch: curBranch,
     type: commitType.MERGE,
     customType: override_type,
@@ -330,7 +330,7 @@ export const cherryPick = function (sourceId, targetId, tag) {
       id: seq + '-' + getId(),
       message: 'cherry-picked ' + sourceCommit + ' into ' + curBranch,
       seq: seq++,
-      parents: [head == null ? null : head.id, sourceCommit.id],
+      parents: [head?.id, sourceCommit.id],
       branch: curBranch,
       type: commitType.CHERRY_PICK,
       tag: tag ?? 'cherry-pick:' + sourceCommit.id,
@@ -443,7 +443,7 @@ export const prettyPrint = function () {
 
 export const clear = function () {
   commits = {};
-  head = null;
+  head = undefined;
   let mainBranch = getConfig().gitGraph.mainBranchName;
   let mainBranchOrder = getConfig().gitGraph.mainBranchOrder;
   branches = {};

packages/mermaid/src/diagrams/git/gitGraphParserV2.spec.js

@@ -851,15 +851,9 @@ describe('when parsing a gitGraph', function () {
     merge test1
     `;
 
-    try {
-      parser.parse(str);
-      // Fail test if above expression doesn't throw anything.
-      expect(true).toBe(false);
-    } catch (e) {
-      expect(e.message).toBe(
-        'Incorrect usage of "merge". Branch to be merged (test1) has no commits'
-      );
-    }
+    expect(() => parser.parse(str)).to.throw(
+      'Incorrect usage of "merge". Branch to be merged (test1) has no commits'
+    );
   });
   describe('accessibility', () => {
     it('should handle a title and a description (accDescr)', () => {

packages/mermaid/src/diagrams/git/mockDb.js

@@ -6,10 +6,10 @@ export const getCommits = () => {
       seq: 1,
       message: '',
       branch: 'master',
-      parents: null,
+      parents: undefined,
       tag: 'v0.1',
       commitType: 'normal',
-      note: null,
+      note: undefined,
     },
     '0000002': {
       id: '0000002',
@@ -17,9 +17,9 @@ export const getCommits = () => {
       message: '',
       branch: 'develop',
       parents: ['0000001'],
-      tag: null,
+      tag: undefined,
       commitType: 'normal',
-      note: null,
+      note: undefined,
     },
     '0000003': {
       id: '0000003',
@@ -27,9 +27,9 @@ export const getCommits = () => {
       message: '',
       branch: 'featureB',
       parents: ['0000002'],
-      tag: null,
+      tag: undefined,
       commitType: 'normal',
-      note: null,
+      note: undefined,
     },
     '0000004': {
       id: '0000004',
@@ -37,9 +37,9 @@ export const getCommits = () => {
       message: '',
       branch: 'hotfix',
       parents: ['0000001'],
-      tag: null,
+      tag: undefined,
       commitType: 'normal',
-      note: null,
+      note: undefined,
     },
     '0000005': {
       id: '0000005',
@@ -47,9 +47,9 @@ export const getCommits = () => {
       message: '',
       branch: 'develop',
       parents: ['0000002'],
-      tag: null,
+      tag: undefined,
       commitType: 'normal',
-      note: null,
+      note: undefined,
     },
     '0000006': {
       id: '0000006',
@@ -57,9 +57,9 @@ export const getCommits = () => {
       message: '',
       branch: 'featureB',
       parents: ['0000003'],
-      tag: null,
+      tag: undefined,
       commitType: 'normal',
-      note: null,
+      note: undefined,
     },
     '0000007': {
       id: '0000007',
@@ -69,7 +69,7 @@ export const getCommits = () => {
       parents: ['0000004'],
       tag: 'v0.2',
       commitType: 'normal',
-      note: null,
+      note: undefined,
     },
     '0000008': {
       id: '0000008',
@@ -77,9 +77,9 @@ export const getCommits = () => {
       message: '',
       branch: 'featureB',
       parents: ['0000006'],
-      tag: null,
+      tag: undefined,
       commitType: 'normal',
-      note: null,
+      note: undefined,
     },
     '0000009': {
       id: '0000009',
@@ -87,9 +87,9 @@ export const getCommits = () => {
       message: '',
       branch: 'featureA',
       parents: ['0000005'],
-      tag: null,
+      tag: undefined,
       commitType: 'normal',
-      note: null,
+      note: undefined,
     },
     '0000010': {
       id: '0000010',
@@ -97,9 +97,9 @@ export const getCommits = () => {
       message: '',
       branch: 'develop',
       parents: ['0000004', '0000005'],
-      tag: null,
+      tag: undefined,
       commitType: 'normal',
-      note: null,
+      note: undefined,
     },
     '0000011': {
       id: '0000011',
@@ -107,7 +107,7 @@ export const getCommits = () => {
       message: '',
       branch: 'featureA',
       parents: ['0000009'],
-      tag: null,
+      tag: undefined,
       commitType: 'normal',
       note: '',
     },
@@ -117,9 +117,9 @@ export const getCommits = () => {
       message: '',
       branch: 'featureB',
       parents: ['0000008'],
-      tag: null,
+      tag: undefined,
       commitType: 'normal',
-      note: null,
+      note: undefined,
     },
     '0000013': {
       id: '0000013',
@@ -127,9 +127,9 @@ export const getCommits = () => {
       message: '',
       branch: 'develop',
       parents: ['0000010', '0000011'],
-      tag: null,
+      tag: undefined,
       commitType: 'normal',
-      note: null,
+      note: undefined,
     },
     '0000014': {
       id: '0000014',
@@ -137,9 +137,9 @@ export const getCommits = () => {
       message: '',
       branch: 'release',
       parents: ['0000013'],
-      tag: null,
+      tag: undefined,
       commitType: 'normal',
-      note: null,
+      note: undefined,
     },
     '0000015': {
       id: '0000015',
@@ -147,9 +147,9 @@ export const getCommits = () => {
       message: '',
       branch: 'master',
       parents: ['0000007'],
-      tag: null,
+      tag: undefined,
       commitType: 'normal',
-      note: null,
+      note: undefined,
     },
     '0000016': {
       id: '0000016',
@@ -159,7 +159,7 @@ export const getCommits = () => {
       parents: ['0000014', '0000015'],
       tag: 'v1.0',
       commitType: 'normal',
-      note: null,
+      note: undefined,
     },
     '0000017': {
       id: '0000017',
@@ -167,9 +167,9 @@ export const getCommits = () => {
       message: '',
       branch: 'develop',
       parents: ['0000013', '0000016'],
-      tag: null,
+      tag: undefined,
       commitType: 'normal',
-      note: null,
+      note: undefined,
     },
   };
 };

packages/mermaid/src/diagrams/sequence/sequenceDb.js

@@ -26,16 +26,16 @@ export const parseDirective = function (statement, context, type) {
 export const addActor = function (id, name, description, type) {
   // Don't allow description nulling
   const old = actors[id];
-  if (old && name === old.name && description == null) {
+  if (old && name === old.name && description == undefined) {
     return;
   }
 
   // Don't allow null descriptions, either
-  if (description == null || description.text == null) {
-    description = { text: name, wrap: null, type };
+  if (description == undefined || description.text == undefined) {
+    description = { text: name, wrap: undefined, type };
   }
-  if (type == null || description.text == null) {
-    description = { text: name, wrap: null, type };
+  if (type == undefined || description.text == undefined) {
+    description = { text: name, wrap: undefined, type };
   }
 
   actors[id] = {
@@ -45,8 +45,8 @@ export const addActor = function (id, name, description, type) {
     prevActor: prevActor,
     links: {},
     properties: {},
-    actorCnt: null,
-    rectData: null,
+    actorCnt: undefined,
+    rectData: undefined,
     type: type || 'participant',
   };
   if (prevActor && actors[prevActor]) {
@@ -274,13 +274,10 @@ export const addALink = function (actorId, text) {
  * @param {any} links
  */
 function insertLinks(actor, links) {
-  if (actor.links == null) {
-    actor.links = links;
-  } else {
-    for (let key in links) {
-      actor.links[key] = links[key];
-    }
-  }
+  actor.links = {
+    ...actor.links,
+    ...links,
+  };
 }
 
 export const addProperties = function (actorId, text) {
@@ -302,7 +299,7 @@ export const addProperties = function (actorId, text) {
  * @param {any} properties
  */
 function insertProperties(actor, properties) {
-  if (actor.properties == null) {
+  if (actor.properties == undefined) {
     actor.properties = properties;
   } else {
     for (let key in properties) {

packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts

@@ -27,7 +27,7 @@ export const bounds = {
     getHeight: function () {
       return (
         Math.max.apply(
-          null,
+          undefined,
           this.actors.length === 0 ? [0] : this.actors.map((actor) => actor.height || 0)
         ) +
         (this.loops.length === 0
@@ -370,8 +370,7 @@ const drawMessage = function (diagram, msgModel, lineStartY: number, diagObj: Di
         .append('path')
         .attr(
           'd',
-          `M  ${startx},${lineStartY} H ${startx + Math.max(conf.width / 2, textWidth / 2)} V ${
-            lineStartY + 25
+          `M  ${startx},${lineStartY} H ${startx + Math.max(conf.width / 2, textWidth / 2)} V ${lineStartY + 25
           } H ${startx}`
         );
     } else {
@@ -380,21 +379,21 @@ const drawMessage = function (diagram, msgModel, lineStartY: number, diagObj: Di
         .attr(
           'd',
           'M ' +
-            startx +
-            ',' +
-            lineStartY +
-            ' C ' +
-            (startx + 60) +
-            ',' +
-            (lineStartY - 10) +
-            ' ' +
-            (startx + 60) +
-            ',' +
-            (lineStartY + 30) +
-            ' ' +
-            startx +
-            ',' +
-            (lineStartY + 20)
+          startx +
+          ',' +
+          lineStartY +
+          ' C ' +
+          (startx + 60) +
+          ',' +
+          (lineStartY - 10) +
+          ' ' +
+          (startx + 60) +
+          ',' +
+          (lineStartY + 30) +
+          ' ' +
+          startx +
+          ',' +
+          (lineStartY + 20)
         );
     }
   } else {
@@ -894,13 +893,13 @@ export const draw = function (_text: string, id: string, _version: string, diagO
   diagram.attr(
     'viewBox',
     box.startx -
-      conf.diagramMarginX +
-      ' -' +
-      (conf.diagramMarginY + extraVertForTitle) +
-      ' ' +
-      width +
-      ' ' +
-      (height + extraVertForTitle)
+    conf.diagramMarginX +
+    ' -' +
+    (conf.diagramMarginY + extraVertForTitle) +
+    ' ' +
+    width +
+    ' ' +
+    (height + extraVertForTitle)
   );
 
   log.debug(`models:`, bounds.models);
@@ -1110,17 +1109,17 @@ const buildNoteModel = function (msg, actors, diagObj) {
     noteModel.width = shouldWrap
       ? Math.max(conf.width, textDimensions.width)
       : Math.max(
-          actors[msg.from].width / 2 + actors[msg.to].width / 2,
-          textDimensions.width + 2 * conf.noteMargin
-        );
+        actors[msg.from].width / 2 + actors[msg.to].width / 2,
+        textDimensions.width + 2 * conf.noteMargin
+      );
     noteModel.startx = startx + (actors[msg.from].width + conf.actorMargin) / 2;
   } else if (msg.placement === diagObj.db.PLACEMENT.LEFTOF) {
     noteModel.width = shouldWrap
       ? Math.max(conf.width, textDimensions.width + 2 * conf.noteMargin)
       : Math.max(
-          actors[msg.from].width / 2 + actors[msg.to].width / 2,
-          textDimensions.width + 2 * conf.noteMargin
-        );
+        actors[msg.from].width / 2 + actors[msg.to].width / 2,
+        textDimensions.width + 2 * conf.noteMargin
+      );
     noteModel.startx = startx - noteModel.width + (actors[msg.from].width - conf.actorMargin) / 2;
   } else if (msg.to === msg.from) {
     textDimensions = utils.calculateTextDimensions(
@@ -1203,8 +1202,8 @@ const buildMessageModel = function (msg, actors, diagObj) {
     message: msg.message,
     type: msg.type,
     wrap: msg.wrap,
-    fromBounds: Math.min.apply(null, allBounds),
-    toBounds: Math.max.apply(null, allBounds),
+    fromBounds: Math.min.apply(undefined, allBounds),
+    toBounds: Math.max.apply(undefined, allBounds),
   };
 };
 

packages/mermaid/src/diagrams/sequence/svgDraw.js

@@ -78,7 +78,7 @@ export const drawPopup = function (elem, actor, minMenuWidth, textAttrs, forceMe
   rectElem.attr('height', rectData.height);
   rectElem.attr('rx', rectData.rx);
   rectElem.attr('ry', rectData.ry);
-  if (links != null) {
+  if (links != undefined) {
     var linkY = 20;
     for (let key in links) {
       var linkElem = g.append('a');
@@ -140,14 +140,14 @@ export const popdownMenu = function (popid) {
 
 const popupMenuUpFunc = function (popupId) {
   var pu = document.getElementById(popupId);
-  if (pu != null) {
+  if (pu !== null) {
     pu.style.display = 'block';
   }
 };
 
 const popupMenuDownFunc = function (popupId) {
   var pu = document.getElementById(popupId);
-  if (pu != null) {
+  if (pu !== null) {
     pu.style.display = 'none';
   }
 };
@@ -360,7 +360,7 @@ const drawActorTypeParticipant = function (elem, actor, conf) {
     g = boxpluslineGroup.append('g');
     actor.actorCnt = actorCnt;
 
-    if (actor.links != null) {
+    if (actor.links != undefined) {
       g.attr('id', 'root-' + actorCnt);
       addPopupInteraction('#root-' + actorCnt, actorCnt);
     }
@@ -368,8 +368,8 @@ const drawActorTypeParticipant = function (elem, actor, conf) {
 
   const rect = getNoteRect();
   var cssclass = 'actor';
-  if (actor.properties != null && actor.properties['class']) {
-    cssclass = actor.properties['class'];
+  if (actor?.properties?.class) {
+    cssclass = actor.properties.class;
   } else {
     rect.fill = '#eaeaea';
   }
@@ -383,7 +383,7 @@ const drawActorTypeParticipant = function (elem, actor, conf) {
   const rectElem = drawRect(g, rect);
   actor.rectData = rect;
 
-  if (actor.properties != null && actor.properties['icon']) {
+  if (actor.properties?.icon) {
     const iconSrc = actor.properties['icon'].trim();
     if (iconSrc.charAt(0) === '@') {
       drawEmbeddedImage(g, rect.x + rect.width - 20, rect.y + 10, iconSrc.substr(1));

packages/mermaid/src/diagrams/state/stateDb.js

@@ -196,24 +196,24 @@ const extract = (_doc) => {
 /**
  * Function called by parser when a node definition has been found.
  *
- * @param {null | string} id
- * @param {null | string} type
- * @param {null | string} doc
- * @param {null | string | string[]} descr - description for the state. Can be a string or a list or strings
- * @param {null | string} note
- * @param {null | string | string[]} classes - class styles to apply to this state. Can be a string (1 style) or an array of styles. If it's just 1 class, convert it to an array of that 1 class.
- * @param {null | string | string[]} styles - styles to apply to this state. Can be a string (1 style) or an array of styles. If it's just 1 style, convert it to an array of that 1 style.
- * @param {null | string | string[]} textStyles - text styles to apply to this state. Can be a string (1 text test) or an array of text styles. If it's just 1 text style, convert it to an array of that 1 text style.
+ * @param {undefined | string} id
+ * @param {undefined | string} type
+ * @param {undefined | string} doc
+ * @param {undefined | string | string[]} descr - description for the state. Can be a string or a list or strings
+ * @param {undefined | string} note
+ * @param {undefined | string | string[]} classes - class styles to apply to this state. Can be a string (1 style) or an array of styles. If it's just 1 class, convert it to an array of that 1 class.
+ * @param {undefined | string | string[]} styles - styles to apply to this state. Can be a string (1 style) or an array of styles. If it's just 1 style, convert it to an array of that 1 style.
+ * @param {undefined | string | string[]} textStyles - text styles to apply to this state. Can be a string (1 text test) or an array of text styles. If it's just 1 text style, convert it to an array of that 1 text style.
  */
 export const addState = function (
   id,
   type = DEFAULT_STATE_TYPE,
-  doc = null,
-  descr = null,
-  note = null,
-  classes = null,
-  styles = null,
-  textStyles = null
+  doc = undefined,
+  descr = undefined,
+  note = undefined,
+  classes = undefined,
+  styles = undefined,
+  textStyles = undefined
 ) {
   // add the state if needed
   if (currentDocument.states[id] === undefined) {

packages/mermaid/src/mermaidAPI.spec.ts

@@ -123,8 +123,8 @@ describe('mermaidAPI', function () {
       const result = encodeEntities(text);
       expect(result).toEqual(
         'style this; is ; everything :something#not-nothing; and this too \n' +
-          'classDef this; is ; everything :something#not-nothing; and this too \n' +
-          'Hello fl°there¶ß fl°andHere¶ßfl°°77653¶ß'
+        'classDef this; is ; everything :something#not-nothing; and this too \n' +
+        'Hello fl°there¶ß fl°andHere¶ßfl°°77653¶ß'
       );
     });
   });
@@ -287,7 +287,7 @@ describe('mermaidAPI', function () {
     };
 
     it('gets the cssStyles from the theme', () => {
-      const styles = createCssStyles(mocked_config_with_htmlLabels, 'graphType', null);
+      const styles = createCssStyles(mocked_config_with_htmlLabels, 'graphType', undefined);
       expect(styles).toMatch(/^\ndefault(.*)/);
     });
     it('gets the fontFamily from the config', () => {
@@ -663,8 +663,8 @@ describe('mermaidAPI', function () {
       `)
       ).toThrow(
         'Diagrams beginning with --- are not valid. ' +
-          'If you were trying to use a YAML front-matter, please ensure that ' +
-          "you've correctly opened and closed the YAML front-matter with unindented `---` blocks"
+        'If you were trying to use a YAML front-matter, please ensure that ' +
+        "you've correctly opened and closed the YAML front-matter with unindented `---` blocks"
       );
     });
     it('does not throw for a valid definition', function () {

packages/mermaid/src/mermaidAPI.ts

@@ -166,7 +166,7 @@ export const cssImportantStyles = (
 export const createCssStyles = (
   config: MermaidConfig,
   graphType: string,
-  classDefs: Record<string, DiagramStyleClassDef> | null | undefined = {}
+  classDefs: Record<string, DiagramStyleClassDef> | undefined = {}
 ): string => {
   let cssStyles = '';
 

packages/mermaid/src/utils.ts

@@ -123,13 +123,13 @@ export const detectInit = function (text: string, config?: MermaidConfig): Merma
  * ```
  *
  * @param text - The text defining the graph
- * @param type - The directive to return (default: `null`)
+ * @param type - The directive to return (default: `undefined`)
  * @returns An object or Array representing the directive(s) matched by the input type.
  * If a single directive was found, that directive object will be returned.
  */
 export const detectDirective = function (
   text: string,
-  type: string | RegExp = null
+  type: string | RegExp = undefined
 ): { type?: string; args?: any } | { type?: string; args?: any }[] {
   try {
     const commentWithoutDirectives = new RegExp(
@@ -153,12 +153,12 @@ export const detectDirective = function (
         (type && match[2] && match[2].match(type))
       ) {
         const type = match[1] ? match[1] : match[2];
-        const args = match[3] ? match[3].trim() : match[4] ? JSON.parse(match[4].trim()) : null;
+        const args = match[3] ? match[3].trim() : match[4] ? JSON.parse(match[4].trim()) : undefined;
         result.push({ type, args });
       }
     }
     if (result.length === 0) {
-      result.push({ type: text, args: null });
+      result.push({ type: text, args: undefined });
     }
 
     return result.length === 1 ? result[0] : result;
@@ -167,7 +167,7 @@ export const detectDirective = function (
       `ERROR: ${error.message} - Unable to parse directive
       ${type !== null ? ' type:' + type : ''} based on the text:${text}`
     );
-    return { type: null, args: null };
+    return { type: undefined, args: undefined };
   }
 };
 
@@ -762,11 +762,11 @@ export const calculateTextDimensions: (
 
     const index =
       isNaN(dims[1].height) ||
-      isNaN(dims[1].width) ||
-      isNaN(dims[1].lineHeight) ||
-      (dims[0].height > dims[1].height &&
-        dims[0].width > dims[1].width &&
-        dims[0].lineHeight > dims[1].lineHeight)
+        isNaN(dims[1].width) ||
+        isNaN(dims[1].lineHeight) ||
+        (dims[0].height > dims[1].height &&
+          dims[0].width > dims[1].width &&
+          dims[0].lineHeight > dims[1].lineHeight)
         ? 0
         : 1;
     return dims[index];