From 269722fb6531659c4d821d85a06bae84731b5c9f Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 2 Sep 2022 11:44:06 +0530
Subject: [PATCH 01/24] Introduce stricter linting

---
 .eslintignore                                 |  2 +
 .eslintrc.json                                | 15 +++-
 cypress/support/eyes-index.d.ts               |  2 +-
 demos/index.html                              |  4 +-
 jest.config.js                                |  1 +
 package.json                                  |  4 +-
 src/Diagram.ts                                |  2 +
 src/config.ts                                 |  6 +-
 src/config.type.ts                            |  2 +-
 src/diagram-api/diagram-orchestration.ts      |  2 +-
 src/diagram-api/diagramAPI.ts                 | 22 ++---
 .../class/classDiagramGrammar.spec.js         |  1 +
 src/diagrams/git/mockDb.js                    |  4 +-
 src/diagrams/info/info.spec.js                | 10 ++-
 src/diagrams/mindmap/info.spc.js              |  1 +
 src/diagrams/sequence/sequenceRenderer.js     |  3 +-
 src/diagrams/sequence/svgDraw.spec.js         |  4 +-
 src/diagrams/state/stateRenderer.js           |  4 +-
 src/diagrams/user-journey/journeyRenderer.js  |  1 +
 src/interactionDb.ts                          |  4 +-
 src/jison/transformer.js                      |  1 +
 src/logger.ts                                 |  3 +
 src/mermaid.ts                                | 11 ++-
 src/mermaidAPI.ts                             | 15 ++--
 src/styles.ts                                 |  2 +-
 src/utils.ts                                  | 76 ++++++++---------
 yarn.lock                                     | 81 +++++++++++++++++++
 27 files changed, 208 insertions(+), 75 deletions(-)

diff --git a/.eslintignore b/.eslintignore
index 9d8891de0..60c278861 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,3 +1,5 @@
 dist/**
 .github/**
 docs/Setup.md
+cypress.config.js
+cypress/plugins/index.js
diff --git a/.eslintrc.json b/.eslintrc.json
index 9c755a0e2..a629acdae 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -5,7 +5,7 @@
     "jest/globals": true,
     "node": true
   },
-  "parser": "@babel/eslint-parser",
+  "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaFeatures": {
       "experimentalObjectRestSpread": true,
@@ -15,12 +15,13 @@
   },
   "extends": [
     "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
     "plugin:jsdoc/recommended",
     "plugin:json/recommended",
     "plugin:markdown/recommended",
     "plugin:prettier/recommended"
   ],
-  "plugins": ["html", "jest", "jsdoc", "json", "prettier"],
+  "plugins": ["@typescript-eslint", "html", "jest", "jsdoc", "json", "prettier"],
   "rules": {
     "no-prototype-builtins": "off",
     "no-unused-vars": "off",
@@ -31,6 +32,16 @@
     "jsdoc/newline-after-description": "off",
     "jsdoc/tag-lines": "off",
     "cypress/no-async-tests": "off",
+    "@typescript-eslint/ban-ts-comment": [
+      "error",
+      {
+        "ts-expect-error": "allow-with-description",
+        "ts-ignore": "allow-with-description",
+        "ts-nocheck": "allow-with-description",
+        "ts-check": "allow-with-description",
+        "minimumDescriptionLength": 10
+      }
+    ],
     "json/*": ["error", "allowComments"],
     "no-empty": ["error", { "allowEmptyCatch": true }]
   },
diff --git a/cypress/support/eyes-index.d.ts b/cypress/support/eyes-index.d.ts
index b7a17d9de..59fc1eca4 100644
--- a/cypress/support/eyes-index.d.ts
+++ b/cypress/support/eyes-index.d.ts
@@ -1 +1 @@
-import "@applitools/eyes-cypress"
\ No newline at end of file
+import '@applitools/eyes-cypress';
diff --git a/demos/index.html b/demos/index.html
index 904fde7df..921ffa64e 100644
--- a/demos/index.html
+++ b/demos/index.html
@@ -1087,7 +1087,9 @@ Enterprise_Boundary(b0, "BankBoundary0") {
   <script>
     const testLineEndings = (test, input) => {
       try {
-        mermaid.render(test, input, () => {});
+        mermaid.render(test, input, () => {
+          //no-op
+        });
       } catch (err) {
         console.error('Error in %s:\n\n%s', test, err);
       }
diff --git a/jest.config.js b/jest.config.js
index 65ea3ef58..29858a3d1 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const path = require('path');
 
 /** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
diff --git a/package.json b/package.json
index 1bf1be7ab..42d123871 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "postbuild": "documentation build src/mermaidAPI.ts src/config.ts src/defaultConfig.ts --shallow -f md --markdown-toc false > docs/Setup.md",
     "build:watch": "yarn build:dev --watch",
     "release": "yarn build",
-    "lint": "eslint --cache ./ --ext .js,.json,.html,.md",
+    "lint": "eslint --cache ./ --ext .js,.json,.html,.md,.ts",
     "lint:fix": "yarn lint --fix",
     "e2e:depr": "yarn lint && jest e2e --config e2e/jest.config.js",
     "cypress": "cypress run",
@@ -83,6 +83,8 @@
     "@types/dompurify": "^2.3.3",
     "@types/jest": "^28.1.7",
     "@types/stylis": "^4.0.2",
+    "@typescript-eslint/eslint-plugin": "^5.36.1",
+    "@typescript-eslint/parser": "^5.36.1",
     "babel-jest": "^29.0.1",
     "babel-loader": "^8.2.2",
     "concurrently": "^7.0.0",
diff --git a/src/Diagram.ts b/src/Diagram.ts
index 4f1765899..a54cfbefd 100644
--- a/src/Diagram.ts
+++ b/src/Diagram.ts
@@ -8,6 +8,7 @@ export class Diagram {
   parser;
   renderer;
   db;
+  // eslint-disable-next-line @typescript-eslint/ban-types
   constructor(public txt: string, parseError?: Function) {
     const cnf = configApi.getConfig();
     this.txt = txt;
@@ -33,6 +34,7 @@ export class Diagram {
     this.parse(this.txt, parseError);
   }
 
+  // eslint-disable-next-line @typescript-eslint/ban-types
   parse(text: string, parseError?: Function): boolean {
     try {
       text = text + '\n';
diff --git a/src/config.ts b/src/config.ts
index 9eb688bb4..44dcf8bd1 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -62,9 +62,9 @@ export const setSiteConfig = (conf: MermaidConfig): MermaidConfig => {
   siteConfig = assignWithDepth({}, defaultConfig);
   siteConfig = assignWithDepth(siteConfig, conf);
 
-  // @ts-ignore
+  // @ts-ignore: TODO Fix ts errors
   if (conf.theme && theme[conf.theme]) {
-    // @ts-ignore
+    // @ts-ignore: TODO Fix ts errors
     siteConfig.themeVariables = theme[conf.theme].getThemeVariables(conf.themeVariables);
   }
 
@@ -216,6 +216,8 @@ export const addDirective = (directive: any) => {
  * | conf      | base set of values, which currentConfig could be **reset** to. | Dictionary | Required | Any Values, with respect to the secure Array |
  *
  * **Notes**: (default: current siteConfig ) (optional, default `getSiteConfig()`)
+ *
+ * @param config
  */
 export const reset = (config = siteConfig): void => {
   // Replace current config with siteConfig
diff --git a/src/config.type.ts b/src/config.type.ts
index 40b2b0b5a..549fbecad 100644
--- a/src/config.type.ts
+++ b/src/config.type.ts
@@ -212,7 +212,7 @@ export interface RequirementDiagramConfig extends BaseDiagramConfig {
   line_height?: number;
 }
 
-export interface PieDiagramConfig extends BaseDiagramConfig {}
+export type PieDiagramConfig = BaseDiagramConfig;
 
 export interface ErDiagramConfig extends BaseDiagramConfig {
   diagramPadding?: number;
diff --git a/src/diagram-api/diagram-orchestration.ts b/src/diagram-api/diagram-orchestration.ts
index f8b793ac4..06e8ab7a4 100644
--- a/src/diagram-api/diagram-orchestration.ts
+++ b/src/diagram-api/diagram-orchestration.ts
@@ -6,7 +6,7 @@ import { registerDiagram } from './diagramAPI';
 
 import gitGraphDb from '../diagrams/git/gitGraphAst';
 import gitGraphRenderer from '../diagrams/git/gitGraphRenderer';
-// @ts-ignore
+// @ts-ignore: TODO Fix ts errors
 import gitGraphParser from '../diagrams/git/parser/gitGraph';
 import { gitGraphDetector } from '../diagrams/git/gitGraphDetector';
 
diff --git a/src/diagram-api/diagramAPI.ts b/src/diagram-api/diagramAPI.ts
index 47f484070..35f0f29c4 100644
--- a/src/diagram-api/diagramAPI.ts
+++ b/src/diagram-api/diagramAPI.ts
@@ -1,49 +1,49 @@
 import c4Db from '../diagrams/c4/c4Db';
 import c4Renderer from '../diagrams/c4/c4Renderer';
-// @ts-ignore
+// @ts-ignore: TODO Fix ts errors
 import c4Parser from '../diagrams/c4/parser/c4Diagram';
 import classDb from '../diagrams/class/classDb';
 import classRenderer from '../diagrams/class/classRenderer';
 import classRendererV2 from '../diagrams/class/classRenderer-v2';
-// @ts-ignore
+// @ts-ignore: TODO Fix ts errors
 import classParser from '../diagrams/class/parser/classDiagram';
 import erDb from '../diagrams/er/erDb';
 import erRenderer from '../diagrams/er/erRenderer';
-// @ts-ignore
+// @ts-ignore: TODO Fix ts errors
 import erParser from '../diagrams/er/parser/erDiagram';
 import flowDb from '../diagrams/flowchart/flowDb';
 import flowRenderer from '../diagrams/flowchart/flowRenderer';
 import flowRendererV2 from '../diagrams/flowchart/flowRenderer-v2';
-// @ts-ignore
+// @ts-ignore: TODO Fix ts errors
 import flowParser from '../diagrams/flowchart/parser/flow';
 import ganttDb from '../diagrams/gantt/ganttDb';
 import ganttRenderer from '../diagrams/gantt/ganttRenderer';
-// @ts-ignore
+// @ts-ignore: TODO Fix ts errors
 import ganttParser from '../diagrams/gantt/parser/gantt';
 import infoDb from '../diagrams/info/infoDb';
 import infoRenderer from '../diagrams/info/infoRenderer';
-// @ts-ignore
+// @ts-ignore: TODO Fix ts errors
 import infoParser from '../diagrams/info/parser/info';
-// @ts-ignore
+// @ts-ignore: TODO Fix ts errors
 import pieParser from '../diagrams/pie/parser/pie';
 import pieDb from '../diagrams/pie/pieDb';
 import pieRenderer from '../diagrams/pie/pieRenderer';
-// @ts-ignore
+// @ts-ignore: TODO Fix ts errors
 import requirementParser from '../diagrams/requirement/parser/requirementDiagram';
 import requirementDb from '../diagrams/requirement/requirementDb';
 import requirementRenderer from '../diagrams/requirement/requirementRenderer';
-// @ts-ignore
+// @ts-ignore: TODO Fix ts errors
 import sequenceParser from '../diagrams/sequence/parser/sequenceDiagram';
 import sequenceDb from '../diagrams/sequence/sequenceDb';
 import sequenceRenderer from '../diagrams/sequence/sequenceRenderer';
-// @ts-ignore
+// @ts-ignore: TODO Fix ts errors
 import stateParser from '../diagrams/state/parser/stateDiagram';
 import stateDb from '../diagrams/state/stateDb';
 import stateRenderer from '../diagrams/state/stateRenderer';
 import stateRendererV2 from '../diagrams/state/stateRenderer-v2';
 import journeyDb from '../diagrams/user-journey/journeyDb';
 import journeyRenderer from '../diagrams/user-journey/journeyRenderer';
-// @ts-ignore
+// @ts-ignore: TODO Fix ts errors
 import journeyParser from '../diagrams/user-journey/parser/journey';
 import { addDetector, DiagramDetector } from './detectType';
 import { log } from '../logger';
diff --git a/src/diagrams/class/classDiagramGrammar.spec.js b/src/diagrams/class/classDiagramGrammar.spec.js
index 0bc5af957..4e9e99c70 100644
--- a/src/diagrams/class/classDiagramGrammar.spec.js
+++ b/src/diagrams/class/classDiagramGrammar.spec.js
@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const fs = require('fs');
 
 import { LALRGenerator } from 'jison';
diff --git a/src/diagrams/git/mockDb.js b/src/diagrams/git/mockDb.js
index 9ebaf23d3..dbca4dcdb 100644
--- a/src/diagrams/git/mockDb.js
+++ b/src/diagrams/git/mockDb.js
@@ -173,7 +173,9 @@ export const getCommits = () => {
     },
   };
 };
-export const clear = () => {};
+export const clear = () => {
+  //no-op
+};
 export const getBranchesAsObjArray = () => [
   {
     name: 'master',
diff --git a/src/diagrams/info/info.spec.js b/src/diagrams/info/info.spec.js
index 69a969fb1..8bcce51d4 100644
--- a/src/diagrams/info/info.spec.js
+++ b/src/diagrams/info/info.spec.js
@@ -1,12 +1,14 @@
+import { parser } from './parser/info';
+import infoDb from './infoDb';
 describe('when parsing an info graph it', function () {
-  var ex;
+  let ex;
   beforeEach(function () {
-    ex = require('./parser/info').parser;
-    ex.yy = require('./infoDb');
+    ex = parser;
+    ex.yy = infoDb;
   });
 
   it('should handle an info definition', function () {
-    var str = `info
+    let str = `info
     showInfo`;
 
     ex.parse(str);
diff --git a/src/diagrams/mindmap/info.spc.js b/src/diagrams/mindmap/info.spc.js
index 69a969fb1..3bdaa12e3 100644
--- a/src/diagrams/mindmap/info.spc.js
+++ b/src/diagrams/mindmap/info.spc.js
@@ -1,6 +1,7 @@
 describe('when parsing an info graph it', function () {
   var ex;
   beforeEach(function () {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
     ex = require('./parser/info').parser;
     ex.yy = require('./infoDb');
   });
diff --git a/src/diagrams/sequence/sequenceRenderer.js b/src/diagrams/sequence/sequenceRenderer.js
index c3ea1bcfd..a02f09b74 100644
--- a/src/diagrams/sequence/sequenceRenderer.js
+++ b/src/diagrams/sequence/sequenceRenderer.js
@@ -95,6 +95,7 @@ export const bounds = {
     }
   },
   updateBounds: function (startx, starty, stopx, stopy) {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
     const _self = this;
     let cnt = 0;
     /** @param {any} type */
@@ -653,7 +654,7 @@ export const draw = function (_text, id, _version, diagObj) {
   // Draw the messages/signals
   let sequenceIndex = 1;
   let sequenceIndexStep = 1;
-  let messagesToDraw = Array();
+  let messagesToDraw = [];
   messages.forEach(function (msg) {
     let loopModel, noteModel, msgModel;
 
diff --git a/src/diagrams/sequence/svgDraw.spec.js b/src/diagrams/sequence/svgDraw.spec.js
index 14dd9a202..580dafe89 100644
--- a/src/diagrams/sequence/svgDraw.spec.js
+++ b/src/diagrams/sequence/svgDraw.spec.js
@@ -1,5 +1,5 @@
-const svgDraw = require('./svgDraw').default;
-const { MockD3 } = require('d3');
+import svgDraw from './svgDraw';
+import { MockD3 } from 'd3';
 
 describe('svgDraw', function () {
   describe('drawRect', function () {
diff --git a/src/diagrams/state/stateRenderer.js b/src/diagrams/state/stateRenderer.js
index 53e89da3b..3b8589b92 100644
--- a/src/diagrams/state/stateRenderer.js
+++ b/src/diagrams/state/stateRenderer.js
@@ -13,7 +13,9 @@ let conf;
 
 const transformationLog = {};
 
-export const setConf = function () {};
+export const setConf = function () {
+  //no-op
+};
 
 /**
  * Setup arrow head and define the marker. The result is appended to the svg.
diff --git a/src/diagrams/user-journey/journeyRenderer.js b/src/diagrams/user-journey/journeyRenderer.js
index 0e3f94f34..ac15ed690 100644
--- a/src/diagrams/user-journey/journeyRenderer.js
+++ b/src/diagrams/user-journey/journeyRenderer.js
@@ -151,6 +151,7 @@ export const bounds = {
   },
   updateBounds: function (startx, starty, stopx, stopy) {
     const conf = getConfig().journey;
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
     const _self = this;
     let cnt = 0;
     /** @param {any} type */
diff --git a/src/interactionDb.ts b/src/interactionDb.ts
index 379685c83..06150b927 100644
--- a/src/interactionDb.ts
+++ b/src/interactionDb.ts
@@ -1,5 +1,5 @@
-let interactionFunctions: (() => {})[] = [];
-export const addFunction = (func: () => {}) => {
+let interactionFunctions: (() => void)[] = [];
+export const addFunction = (func: () => void) => {
   interactionFunctions.push(func);
 };
 export const attachFunctions = () => {
diff --git a/src/jison/transformer.js b/src/jison/transformer.js
index 9100235fe..f1f036d13 100644
--- a/src/jison/transformer.js
+++ b/src/jison/transformer.js
@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const { Generator } = require('jison');
 
 module.exports = {
diff --git a/src/logger.ts b/src/logger.ts
index 195cde7f3..94b399877 100644
--- a/src/logger.ts
+++ b/src/logger.ts
@@ -1,3 +1,6 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-empty-function */
 import moment from 'moment-mini';
 
 export type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal';
diff --git a/src/mermaid.ts b/src/mermaid.ts
index a46103f11..8ab526880 100644
--- a/src/mermaid.ts
+++ b/src/mermaid.ts
@@ -30,10 +30,15 @@ import { isDetailedError } from './utils';
  * ```
  *
  * Renders the mermaid diagrams
+ *
+ * @param config
+ * @param nodes
+ * @param callback
  */
 const init = function (
   config?: MermaidConfig,
   nodes?: string | HTMLElement | NodeListOf<HTMLElement>,
+  // eslint-disable-next-line @typescript-eslint/ban-types
   callback?: Function
 ) {
   try {
@@ -52,13 +57,14 @@ const init = function (
 const initThrowsErrors = function (
   config?: MermaidConfig,
   nodes?: string | HTMLElement | NodeListOf<HTMLElement>,
+  // eslint-disable-next-line @typescript-eslint/ban-types
   callback?: Function
 ) {
   const conf = mermaidAPI.getConfig();
   // console.log('Starting rendering diagrams (init) - mermaid.init', conf);
   if (config) {
     // This is a legacy way of setting config. It is not documented and should be removed in the future.
-    // @ts-ignore
+    // @ts-ignore: TODO Fix ts errors
     mermaid.sequenceConfig = config;
   }
 
@@ -126,7 +132,7 @@ const initThrowsErrors = function (
       );
     } catch (error) {
       log.warn('Catching Error (bootstrap)');
-      // @ts-ignore
+      // @ts-ignore: TODO Fix ts errors
       // TODO: We should be throwing an error object.
       throw { error, message: error.str };
     }
@@ -188,6 +194,7 @@ const parse = (txt: string) => {
 const mermaid: {
   startOnLoad: boolean;
   diagrams: any;
+  // eslint-disable-next-line @typescript-eslint/ban-types
   parseError?: Function;
   mermaidAPI: typeof mermaidAPI;
   parse: typeof parse;
diff --git a/src/mermaidAPI.ts b/src/mermaidAPI.ts
index 303a78680..9dd1010a6 100644
--- a/src/mermaidAPI.ts
+++ b/src/mermaidAPI.ts
@@ -17,7 +17,7 @@
  */
 import { select } from 'd3';
 import { compile, serialize, stringify } from 'stylis';
-// @ts-ignore
+// @ts-ignore: TODO Fix ts errors
 import pkg from '../package.json';
 import * as configApi from './config';
 import { addDiagrams } from './diagram-api/diagram-orchestration';
@@ -38,6 +38,11 @@ import { evaluate } from './diagrams/common/common';
 
 let hasLoadedDiagrams = false;
 
+/**
+ * @param text
+ * @param parseError
+ */
+// eslint-disable-next-line @typescript-eslint/ban-types
 function parse(text: string, parseError?: Function): boolean {
   if (!hasLoadedDiagrams) {
     addDiagrams();
@@ -126,7 +131,7 @@ const render = function (
     directiveSanitizer(graphInit);
     configApi.addDirective(graphInit);
   }
-  let cnf = configApi.getConfig();
+  const cnf = configApi.getConfig();
 
   log.debug(cnf);
 
@@ -319,8 +324,8 @@ const render = function (
   svgCode = svgCode.replace(/<br>/g, '<br/>');
 
   if (cnf.securityLevel === 'sandbox') {
-    let svgEl = root.select('#d' + id + ' svg').node();
-    let width = '100%';
+    const svgEl = root.select('#d' + id + ' svg').node();
+    const width = '100%';
     let height = '100%';
     if (svgEl) {
       height = svgEl.viewBox.baseVal.height + 'px';
@@ -397,7 +402,7 @@ const parseDirective = function (p: any, statement: string, context: string, typ
     log.error(
       `Error while rendering sequenceDiagram directive: ${statement} jison context: ${context}`
     );
-    // @ts-ignore
+    // @ts-ignore: TODO Fix ts errors
     log.error(error.message);
   }
 };
diff --git a/src/styles.ts b/src/styles.ts
index 29ebb4fe4..15af0c955 100644
--- a/src/styles.ts
+++ b/src/styles.ts
@@ -45,7 +45,7 @@ const getStyles = (
     lineColor: string;
   } & FlowChartStyleOptions
 ) => {
-  let diagramStyles: string = '';
+  let diagramStyles = '';
   if (type in themes && themes[type as keyof typeof themes]) {
     diagramStyles = themes[type as keyof typeof themes](options);
   } else {
diff --git a/src/utils.ts b/src/utils.ts
index 2876664f9..df5943363 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,4 +1,4 @@
-// @ts-nocheck
+// @ts-nocheck: TODO Fix ts errors
 import { sanitizeUrl } from '@braintree/sanitize-url';
 import {
   curveBasis,
@@ -43,17 +43,19 @@ const anyComment = /\s*%%.*\n/gm;
 
 /**
  * @function detectInit Detects the init config object from the text
+ * @param config
  *
  *   ```mermaid
+ *
  *   %%{init: {"theme": "debug", "logLevel": 1 }}%%
  *   graph LR
- *    a-->b
- *    b-->c
- *    c-->d
- *    d-->e
- *    e-->f
- *    f-->g
- *    g-->h
+ *      a-->b
+ *      b-->c
+ *      c-->d
+ *      d-->e
+ *      e-->f
+ *      f-->g
+ *      g-->h
  * ```
  *
  *   Or
@@ -74,11 +76,11 @@ const anyComment = /\s*%%.*\n/gm;
  * @returns {object} The json object representing the init passed to mermaid.initialize()
  */
 export const detectInit = function (text: string, config?: MermaidConfig): MermaidConfig {
-  let inits = detectDirective(text, /(?:init\b)|(?:initialize\b)/);
+  const inits = detectDirective(text, /(?:init\b)|(?:initialize\b)/);
   let results = {};
 
   if (Array.isArray(inits)) {
-    let args = inits.map((init) => init.args);
+    const args = inits.map((init) => init.args);
     directiveSanitizer(args);
 
     results = assignWithDepth(results, [...args]);
@@ -133,8 +135,8 @@ export const detectDirective = function (text, type = null) {
     log.debug(
       `Detecting diagram directive${type !== null ? ' type:' + type : ''} based on the text:${text}`
     );
-    let match,
-      result = [];
+    let match;
+    const result = [];
     while ((match = directive.exec(text)) !== null) {
       // This is necessary to avoid infinite loops with zero-width matches
       if (match.index === directive.lastIndex) {
@@ -145,8 +147,8 @@ export const detectDirective = function (text, type = null) {
         (type && match[1] && match[1].match(type)) ||
         (type && match[2] && match[2].match(type))
       ) {
-        let type = match[1] ? match[1] : match[2];
-        let args = match[3] ? match[3].trim() : match[4] ? JSON.parse(match[4].trim()) : null;
+        const type = match[1] ? match[1] : match[2];
+        const args = match[3] ? match[3].trim() : match[4] ? JSON.parse(match[4].trim()) : null;
         result.push({ type, args });
       }
     }
@@ -172,13 +174,13 @@ export const detectDirective = function (text, type = null) {
  * @returns {Function} An optimized caching function
  */
 const memoize = (fn, resolver) => {
-  let cache = {};
+  const cache = {};
   return (...args) => {
-    let n = resolver ? resolver.apply(this, args) : args[0];
+    const n = resolver ? resolver.apply(this, args) : args[0];
     if (n in cache) {
       return cache[n];
     } else {
-      let result = fn(...args);
+      const result = fn(...args);
       cache[n] = result;
       return result;
     }
@@ -221,7 +223,7 @@ export const interpolateToCurve = (interpolate, defaultCurve) => {
  * @returns {string | undefined} The formatted URL
  */
 export const formatUrl = (linkStr, config) => {
-  let url = linkStr.trim();
+  const url = linkStr.trim();
 
   if (url) {
     if (config.securityLevel !== 'loose') {
@@ -364,10 +366,10 @@ const calcCardinalityPosition = (isRelationTypePresent, points, initialPosition)
     prevPoint = point;
   });
   // if relation is present (Arrows will be added), change cardinality point off-set distance (d)
-  let d = isRelationTypePresent ? 10 : 5;
+  const d = isRelationTypePresent ? 10 : 5;
   //Calculate Angle for x and y axis
-  let angle = Math.atan2(points[0].y - center.y, points[0].x - center.x);
-  let cardinalityPosition = { x: 0, y: 0 };
+  const angle = Math.atan2(points[0].y - center.y, points[0].x - center.x);
+  const cardinalityPosition = { x: 0, y: 0 };
   //Calculation cardinality position using angle, center point on the line/curve but pendicular and with offset-distance
   cardinalityPosition.x = Math.sin(angle) * d + (points[0].x + center.x) / 2;
   cardinalityPosition.y = -Math.cos(angle) * d + (points[0].y + center.y) / 2;
@@ -425,11 +427,11 @@ const calcTerminalLabelPosition = (terminalMarkerSize, position, _points) => {
     prevPoint = point;
   });
   // if relation is present (Arrows will be added), change cardinality point off-set distance (d)
-  let d = 10 + terminalMarkerSize * 0.5;
+  const d = 10 + terminalMarkerSize * 0.5;
   //Calculate Angle for x and y axis
-  let angle = Math.atan2(points[0].y - center.y, points[0].x - center.x);
+  const angle = Math.atan2(points[0].y - center.y, points[0].x - center.x);
 
-  let cardinalityPosition = { x: 0, y: 0 };
+  const cardinalityPosition = { x: 0, y: 0 };
 
   //Calculation cardinality position using angle, center point on the line/curve but pendicular and with offset-distance
 
@@ -485,10 +487,10 @@ export const generateId = () => {
  * @returns {any}
  */
 function makeid(length) {
-  var result = '';
-  var characters = '0123456789abcdef';
-  var charactersLength = characters.length;
-  for (var i = 0; i < length; i++) {
+  let result = '';
+  const characters = '0123456789abcdef';
+  const charactersLength = characters.length;
+  for (let i = 0; i < length; i++) {
     result += characters.charAt(Math.floor(Math.random() * charactersLength));
   }
   return result;
@@ -675,7 +677,7 @@ export const calculateTextDimensions = memoize(
     // of sans-serif.
     const fontFamilies = ['sans-serif', fontFamily];
     const lines = text.split(common.lineBreakRegex);
-    let dims = [];
+    const dims = [];
 
     const body = select('body');
     // We don't want to leak DOM elements - if a removal operation isn't available
@@ -686,10 +688,10 @@ export const calculateTextDimensions = memoize(
 
     const g = body.append('svg');
 
-    for (let fontFamily of fontFamilies) {
+    for (const fontFamily of fontFamilies) {
       let cheight = 0;
-      let dim = { width: 0, height: 0, lineHeight: 0 };
-      for (let line of lines) {
+      const dim = { width: 0, height: 0, lineHeight: 0 };
+      for (const line of lines) {
         const textObj = getTextObj();
         textObj.text = line;
         const textElem = drawSimpleText(g, textObj)
@@ -697,7 +699,7 @@ export const calculateTextDimensions = memoize(
           .style('font-weight', fontWeight)
           .style('font-family', fontFamily);
 
-        let bBox = (textElem._groups || textElem)[0][0].getBBox();
+        const bBox = (textElem._groups || textElem)[0][0].getBBox();
         dim.width = Math.round(Math.max(dim.width, bBox.width));
         cheight = Math.round(bBox.height);
         dim.height += cheight;
@@ -708,7 +710,7 @@ export const calculateTextDimensions = memoize(
 
     g.remove();
 
-    let index =
+    const index =
       isNaN(dims[1].height) ||
       isNaN(dims[1].width) ||
       isNaN(dims[1].lineHeight) ||
@@ -729,7 +731,7 @@ export const calculateTextDimensions = memoize(
  * @param {[string, string][]} attrs Object.keys equivalent format of key to value mapping of attributes
  */
 const d3Attrs = function (d3Elem, attrs) {
-  for (let attr of attrs) {
+  for (const attr of attrs) {
     d3Elem.attr(attr[0], attr[1]);
   }
 };
@@ -743,7 +745,7 @@ const d3Attrs = function (d3Elem, attrs) {
  * @returns {Map<'height' | 'width' | 'style', string>} Attributes for the SVG
  */
 export const calculateSvgSizeAttrs = function (height, width, useMaxWidth) {
-  let attrs = new Map();
+  const attrs = new Map();
   // attrs.set('height', height);
   if (useMaxWidth) {
     attrs.set('width', '100%');
@@ -945,10 +947,12 @@ export interface DetailedError {
   hash: any;
 }
 
+/** @param error */
 export function isDetailedError(error: unknown): error is DetailedError {
   return 'str' in error;
 }
 
+/** @param error */
 export function getErrorMessage(error: unknown): string {
   if (error instanceof Error) return error.message;
   return String(error);
diff --git a/yarn.lock b/yarn.lock
index 656032594..2547f561d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2795,6 +2795,31 @@
   dependencies:
     "@types/node" "*"
 
+"@typescript-eslint/eslint-plugin@^5.36.1":
+  version "5.36.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.36.1.tgz#471f64dc53600025e470dad2ca4a9f2864139019"
+  integrity sha512-iC40UK8q1tMepSDwiLbTbMXKDxzNy+4TfPWgIL661Ym0sD42vRcQU93IsZIrmi+x292DBr60UI/gSwfdVYexCA==
+  dependencies:
+    "@typescript-eslint/scope-manager" "5.36.1"
+    "@typescript-eslint/type-utils" "5.36.1"
+    "@typescript-eslint/utils" "5.36.1"
+    debug "^4.3.4"
+    functional-red-black-tree "^1.0.1"
+    ignore "^5.2.0"
+    regexpp "^3.2.0"
+    semver "^7.3.7"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/parser@^5.36.1":
+  version "5.36.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.36.1.tgz#931c22c7bacefd17e29734628cdec8b2acdcf1ce"
+  integrity sha512-/IsgNGOkBi7CuDfUbwt1eOqUXF9WGVBW9dwEe1pi+L32XrTsZIgmDFIi2RxjzsvB/8i+MIf5JIoTEH8LOZ368A==
+  dependencies:
+    "@typescript-eslint/scope-manager" "5.36.1"
+    "@typescript-eslint/types" "5.36.1"
+    "@typescript-eslint/typescript-estree" "5.36.1"
+    debug "^4.3.4"
+
 "@typescript-eslint/scope-manager@5.10.1":
   version "5.10.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.10.1.tgz#f0539c73804d2423506db2475352a4dec36cd809"
@@ -2803,11 +2828,34 @@
     "@typescript-eslint/types" "5.10.1"
     "@typescript-eslint/visitor-keys" "5.10.1"
 
+"@typescript-eslint/scope-manager@5.36.1":
+  version "5.36.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.36.1.tgz#23c49b7ddbcffbe09082e6694c2524950766513f"
+  integrity sha512-pGC2SH3/tXdu9IH3ItoqciD3f3RRGCh7hb9zPdN2Drsr341zgd6VbhP5OHQO/reUqihNltfPpMpTNihFMarP2w==
+  dependencies:
+    "@typescript-eslint/types" "5.36.1"
+    "@typescript-eslint/visitor-keys" "5.36.1"
+
+"@typescript-eslint/type-utils@5.36.1":
+  version "5.36.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.36.1.tgz#016fc2bff6679f54c0b2df848a493f0ca3d4f625"
+  integrity sha512-xfZhfmoQT6m3lmlqDvDzv9TiCYdw22cdj06xY0obSznBsT///GK5IEZQdGliXpAOaRL34o8phEvXzEo/VJx13Q==
+  dependencies:
+    "@typescript-eslint/typescript-estree" "5.36.1"
+    "@typescript-eslint/utils" "5.36.1"
+    debug "^4.3.4"
+    tsutils "^3.21.0"
+
 "@typescript-eslint/types@5.10.1":
   version "5.10.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.10.1.tgz#dca9bd4cb8c067fc85304a31f38ec4766ba2d1ea"
   integrity sha512-ZvxQ2QMy49bIIBpTqFiOenucqUyjTQ0WNLhBM6X1fh1NNlYAC6Kxsx8bRTY3jdYsYg44a0Z/uEgQkohbR0H87Q==
 
+"@typescript-eslint/types@5.36.1":
+  version "5.36.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.36.1.tgz#1cf0e28aed1cb3ee676917966eb23c2f8334ce2c"
+  integrity sha512-jd93ShpsIk1KgBTx9E+hCSEuLCUFwi9V/urhjOWnOaksGZFbTOxAT47OH2d4NLJnLhkVD+wDbB48BuaycZPLBg==
+
 "@typescript-eslint/typescript-estree@5.10.1":
   version "5.10.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.10.1.tgz#b268e67be0553f8790ba3fe87113282977adda15"
@@ -2821,6 +2869,31 @@
     semver "^7.3.5"
     tsutils "^3.21.0"
 
+"@typescript-eslint/typescript-estree@5.36.1":
+  version "5.36.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.36.1.tgz#b857f38d6200f7f3f4c65cd0a5afd5ae723f2adb"
+  integrity sha512-ih7V52zvHdiX6WcPjsOdmADhYMDN15SylWRZrT2OMy80wzKbc79n8wFW0xpWpU0x3VpBz/oDgTm2xwDAnFTl+g==
+  dependencies:
+    "@typescript-eslint/types" "5.36.1"
+    "@typescript-eslint/visitor-keys" "5.36.1"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    semver "^7.3.7"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/utils@5.36.1":
+  version "5.36.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.36.1.tgz#136d5208cc7a3314b11c646957f8f0b5c01e07ad"
+  integrity sha512-lNj4FtTiXm5c+u0pUehozaUWhh7UYKnwryku0nxJlYUEWetyG92uw2pr+2Iy4M/u0ONMKzfrx7AsGBTCzORmIg==
+  dependencies:
+    "@types/json-schema" "^7.0.9"
+    "@typescript-eslint/scope-manager" "5.36.1"
+    "@typescript-eslint/types" "5.36.1"
+    "@typescript-eslint/typescript-estree" "5.36.1"
+    eslint-scope "^5.1.1"
+    eslint-utils "^3.0.0"
+
 "@typescript-eslint/utils@^5.10.0":
   version "5.10.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.10.1.tgz#fa682a33af47080ba2c4368ee0ad2128213a1196"
@@ -2841,6 +2914,14 @@
     "@typescript-eslint/types" "5.10.1"
     eslint-visitor-keys "^3.0.0"
 
+"@typescript-eslint/visitor-keys@5.36.1":
+  version "5.36.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.36.1.tgz#7731175312d65738e501780f923896d200ad1615"
+  integrity sha512-ojB9aRyRFzVMN3b5joSYni6FAS10BBSCAfKJhjJAV08t/a95aM6tAhz+O1jF+EtgxktuSO3wJysp2R+Def/IWQ==
+  dependencies:
+    "@typescript-eslint/types" "5.36.1"
+    eslint-visitor-keys "^3.3.0"
+
 "@wdio/config@7.16.11":
   version "7.16.11"
   resolved "https://registry.yarnpkg.com/@wdio/config/-/config-7.16.11.tgz#c35a0efb9c7ec6c80e3324e9818f636010087e97"

From f28c86326de32218d35042cd9ea1b0bcf5614c9e Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 2 Sep 2022 11:50:41 +0530
Subject: [PATCH 02/24] Introduce stricter linting

---
 src/utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils.ts b/src/utils.ts
index df5943363..ddf299931 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,4 +1,4 @@
-// @ts-nocheck: TODO Fix ts errors
+// @ts-nocheck : TODO Fix ts errors
 import { sanitizeUrl } from '@braintree/sanitize-url';
 import {
   curveBasis,

From e9fb2c8a54ac80b90c95c46ac6db45935ed514e9 Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Wed, 24 Aug 2022 17:17:08 +0200
Subject: [PATCH 03/24] Fix test and variable names that were copied from
 flowchart

---
 .../{flow.spec.js => c4Diagram.spec.js}       | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)
 rename src/diagrams/c4/parser/{flow.spec.js => c4Diagram.spec.js} (82%)

diff --git a/src/diagrams/c4/parser/flow.spec.js b/src/diagrams/c4/parser/c4Diagram.spec.js
similarity index 82%
rename from src/diagrams/c4/parser/flow.spec.js
rename to src/diagrams/c4/parser/c4Diagram.spec.js
index c01d99e40..08ad3fcea 100644
--- a/src/diagrams/c4/parser/flow.spec.js
+++ b/src/diagrams/c4/parser/c4Diagram.spec.js
@@ -1,23 +1,23 @@
-import flowDb from '../c4Db';
-import flow from './c4Diagram.jison';
+import c4Db from '../c4Db';
+import c4 from './c4Diagram.jison';
 import { setConfig } from '../../../config';
 
 setConfig({
   securityLevel: 'strict',
 });
 
-describe('parsing a flow chart', function () {
+describe('parsing a C4 diagram', function () {
   beforeEach(function () {
-    flow.parser.yy = flowDb;
-    flow.parser.yy.clear();
+    c4.parser.yy = c4Db;
+    c4.parser.yy.clear();
   });
 
   it('should parse a C4 diagram with one Person correctly', function () {
-    flow.parser.parse(`C4Context
+    c4.parser.parse(`C4Context
 title System Context diagram for Internet Banking System
 Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")`);
 
-    const yy = flow.parser.yy;
+    const yy = c4.parser.yy;
     expect(yy.getC4Type()).toBe('C4Context');
     expect(yy.getTitle()).toBe('System Context diagram for Internet Banking System');
 
@@ -43,7 +43,7 @@ Person(customerA, "Banking Customer A", "A customer of the bank, with personal b
 
   it('should handle a trailing whitespaces after statements', function () {
     const whitespace = ' ';
-    const rendered = flow.parser.parse(`C4Context${whitespace}
+    const rendered = c4.parser.parse(`C4Context${whitespace}
 title System Context diagram for Internet Banking System${whitespace}
 Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")${whitespace}`);
 
@@ -51,11 +51,11 @@ Person(customerA, "Banking Customer A", "A customer of the bank, with personal b
   });
 
   it('should handle parameter names that are keywords', function () {
-    flow.parser.parse(`C4Context
+    c4.parser.parse(`C4Context
 title title
 Person(Person, "Person", "Person")`);
 
-    const yy = flow.parser.yy;
+    const yy = c4.parser.yy;
     expect(yy.getTitle()).toBe('title');
 
     const shapes = yy.getC4ShapeArray();
@@ -68,10 +68,10 @@ Person(Person, "Person", "Person")`);
   });
 
   it('should allow default in the parameters', function () {
-    flow.parser.parse(`C4Context
+    c4.parser.parse(`C4Context
 Person(default, "default", "default")`);
 
-    const yy = flow.parser.yy;
+    const yy = c4.parser.yy;
 
     const shapes = yy.getC4ShapeArray();
     expect(shapes.length).toBe(1);

From aee1a87347da0b04dd555000cccb76a4730002f5 Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Wed, 24 Aug 2022 23:22:50 +0200
Subject: [PATCH 04/24] Move test for basic Person to separate file

---
 src/diagrams/c4/parser/c4Diagram.spec.js | 29 -----------------
 src/diagrams/c4/parser/c4Person.spec.js  | 41 ++++++++++++++++++++++++
 2 files changed, 41 insertions(+), 29 deletions(-)
 create mode 100644 src/diagrams/c4/parser/c4Person.spec.js

diff --git a/src/diagrams/c4/parser/c4Diagram.spec.js b/src/diagrams/c4/parser/c4Diagram.spec.js
index 08ad3fcea..b79934b84 100644
--- a/src/diagrams/c4/parser/c4Diagram.spec.js
+++ b/src/diagrams/c4/parser/c4Diagram.spec.js
@@ -12,35 +12,6 @@ describe('parsing a C4 diagram', function () {
     c4.parser.yy.clear();
   });
 
-  it('should parse a C4 diagram with one Person correctly', function () {
-    c4.parser.parse(`C4Context
-title System Context diagram for Internet Banking System
-Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")`);
-
-    const yy = c4.parser.yy;
-    expect(yy.getC4Type()).toBe('C4Context');
-    expect(yy.getTitle()).toBe('System Context diagram for Internet Banking System');
-
-    const shapes = yy.getC4ShapeArray();
-    expect(shapes.length).toBe(1);
-    const onlyShape = shapes[0];
-
-    expect(onlyShape).toEqual({
-      alias: 'customerA',
-      descr: {
-        text: 'A customer of the bank, with personal bank accounts.',
-      },
-      label: {
-        text: 'Banking Customer A',
-      },
-      parentBoundary: 'global',
-      typeC4Shape: {
-        text: 'person',
-      },
-      wrap: false,
-    });
-  });
-
   it('should handle a trailing whitespaces after statements', function () {
     const whitespace = ' ';
     const rendered = c4.parser.parse(`C4Context${whitespace}
diff --git a/src/diagrams/c4/parser/c4Person.spec.js b/src/diagrams/c4/parser/c4Person.spec.js
new file mode 100644
index 000000000..44294b97e
--- /dev/null
+++ b/src/diagrams/c4/parser/c4Person.spec.js
@@ -0,0 +1,41 @@
+import c4Db from '../c4Db';
+import c4 from './c4Diagram.jison';
+import { setConfig } from '../../../config';
+
+setConfig({
+  securityLevel: 'strict',
+});
+
+describe('parsing a C4 diagram', function () {
+  beforeEach(function () {
+    c4.parser.yy = c4Db;
+    c4.parser.yy.clear();
+  });
+
+  it('should parse a C4 diagram with one Person correctly', function () {
+    c4.parser.parse(`C4Context
+title System Context diagram for Internet Banking System
+Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")`);
+
+    const yy = c4.parser.yy;
+
+    const shapes = yy.getC4ShapeArray();
+    expect(shapes.length).toBe(1);
+    const onlyShape = shapes[0];
+
+    expect(onlyShape).toEqual({
+      alias: 'customerA',
+      descr: {
+        text: 'A customer of the bank, with personal bank accounts.',
+      },
+      label: {
+        text: 'Banking Customer A',
+      },
+      parentBoundary: 'global',
+      typeC4Shape: {
+        text: 'person',
+      },
+      wrap: false,
+    });
+  });
+});

From 8ee534f7fbb5eaef7a5c78833a8a3303abe134bc Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Wed, 24 Aug 2022 23:31:52 +0200
Subject: [PATCH 05/24] Add test for $sprite

---
 src/diagrams/c4/parser/c4Person.spec.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/diagrams/c4/parser/c4Person.spec.js b/src/diagrams/c4/parser/c4Person.spec.js
index 44294b97e..5f620baf9 100644
--- a/src/diagrams/c4/parser/c4Person.spec.js
+++ b/src/diagrams/c4/parser/c4Person.spec.js
@@ -38,4 +38,17 @@ Person(customerA, "Banking Customer A", "A customer of the bank, with personal b
       wrap: false,
     });
   });
+
+  it('should parse a sprite', function () {
+    c4.parser.parse(`C4Context
+Person(customerA, $sprite="users")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: {
+          sprite: 'users',
+        },
+      },
+    });
+  });
 });

From 5378316cc3a0fa0577c69b087656da23f907d01f Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Wed, 24 Aug 2022 23:36:14 +0200
Subject: [PATCH 06/24] Add test for $link

---
 src/diagrams/c4/parser/c4Person.spec.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/diagrams/c4/parser/c4Person.spec.js b/src/diagrams/c4/parser/c4Person.spec.js
index 5f620baf9..1e1b11163 100644
--- a/src/diagrams/c4/parser/c4Person.spec.js
+++ b/src/diagrams/c4/parser/c4Person.spec.js
@@ -51,4 +51,17 @@ Person(customerA, $sprite="users")`);
       },
     });
   });
+
+  it('should parse a link', function () {
+    c4.parser.parse(`C4Context
+Person(customerA, $link="https://github.com/mermaidjs")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: {
+          link: 'https://github.com/mermaidjs',
+        },
+      },
+    });
+  });
 });

From 90d472042ba6820a3463b7e42e3b3fa6a863eb81 Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Wed, 24 Aug 2022 23:38:55 +0200
Subject: [PATCH 07/24] Add test for $tags

---
 src/diagrams/c4/parser/c4Person.spec.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/diagrams/c4/parser/c4Person.spec.js b/src/diagrams/c4/parser/c4Person.spec.js
index 1e1b11163..bf91d74c4 100644
--- a/src/diagrams/c4/parser/c4Person.spec.js
+++ b/src/diagrams/c4/parser/c4Person.spec.js
@@ -64,4 +64,17 @@ Person(customerA, $link="https://github.com/mermaidjs")`);
       },
     });
   });
+
+  it('should parse tags', function () {
+    c4.parser.parse(`C4Context
+Person(customerA, $tags="tag1,tag2")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: {
+          tags: 'tag1,tag2',
+        },
+      },
+    });
+  });
 });

From be5b8012bd17b5d8b32c69059f4eebc419681f39 Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Wed, 24 Aug 2022 23:44:29 +0200
Subject: [PATCH 08/24] Add test for description

---
 src/diagrams/c4/parser/c4Person.spec.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/diagrams/c4/parser/c4Person.spec.js b/src/diagrams/c4/parser/c4Person.spec.js
index bf91d74c4..7d3b92c44 100644
--- a/src/diagrams/c4/parser/c4Person.spec.js
+++ b/src/diagrams/c4/parser/c4Person.spec.js
@@ -39,6 +39,17 @@ Person(customerA, "Banking Customer A", "A customer of the bank, with personal b
     });
   });
 
+  it('should parse the description', function () {
+    c4.parser.parse(`C4Context
+Person(customerA, "", "A customer of the bank, with personal bank accounts.")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      descr: {
+        text: 'A customer of the bank, with personal bank accounts.',
+      },
+    });
+  });
+
   it('should parse a sprite', function () {
     c4.parser.parse(`C4Context
 Person(customerA, $sprite="users")`);

From 6f7ae17fc6e7959b6900ac45ccd6a271077f7c17 Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Wed, 24 Aug 2022 23:46:42 +0200
Subject: [PATCH 09/24] Add test for label

---
 src/diagrams/c4/parser/c4Person.spec.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/diagrams/c4/parser/c4Person.spec.js b/src/diagrams/c4/parser/c4Person.spec.js
index 7d3b92c44..49d52bbea 100644
--- a/src/diagrams/c4/parser/c4Person.spec.js
+++ b/src/diagrams/c4/parser/c4Person.spec.js
@@ -39,6 +39,17 @@ Person(customerA, "Banking Customer A", "A customer of the bank, with personal b
     });
   });
 
+  it('should parse the label', function () {
+    c4.parser.parse(`C4Context
+Person(customerA, "Banking Customer A")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: 'Banking Customer A',
+      },
+    });
+  });
+
   it('should parse the description', function () {
     c4.parser.parse(`C4Context
 Person(customerA, "", "A customer of the bank, with personal bank accounts.")`);

From 3bc5cfa554b548a44fbd8ec64bae20738571407c Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Wed, 24 Aug 2022 23:47:41 +0200
Subject: [PATCH 10/24] Add test for alias

---
 src/diagrams/c4/parser/c4Person.spec.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/diagrams/c4/parser/c4Person.spec.js b/src/diagrams/c4/parser/c4Person.spec.js
index 49d52bbea..f4ea9bc23 100644
--- a/src/diagrams/c4/parser/c4Person.spec.js
+++ b/src/diagrams/c4/parser/c4Person.spec.js
@@ -39,6 +39,15 @@ Person(customerA, "Banking Customer A", "A customer of the bank, with personal b
     });
   });
 
+  it('should parse the alias', function () {
+    c4.parser.parse(`C4Context
+Person(customerA, "Banking Customer A")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      alias: 'customerA',
+    });
+  });
+
   it('should parse the label', function () {
     c4.parser.parse(`C4Context
 Person(customerA, "Banking Customer A")`);

From 92f0c8f8b14407b2c3e0064f2b22bf7dcf55eca6 Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Sat, 27 Aug 2022 15:29:23 +0200
Subject: [PATCH 11/24] Add test for structure of Person_Ext

---
 src/diagrams/c4/parser/c4PersonExt.spec.js | 44 ++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 src/diagrams/c4/parser/c4PersonExt.spec.js

diff --git a/src/diagrams/c4/parser/c4PersonExt.spec.js b/src/diagrams/c4/parser/c4PersonExt.spec.js
new file mode 100644
index 000000000..71faabdc3
--- /dev/null
+++ b/src/diagrams/c4/parser/c4PersonExt.spec.js
@@ -0,0 +1,44 @@
+import c4Db from '../c4Db';
+import c4 from './c4Diagram.jison';
+import { setConfig } from '../../../config';
+
+setConfig({
+  securityLevel: 'strict',
+});
+
+describe('parsing a C4 diagram', function () {
+  beforeEach(function () {
+    c4.parser.yy = c4Db;
+    c4.parser.yy.clear();
+  });
+
+  it('should parse a C4 diagram with one Person_Ext correctly', function () {
+    c4.parser.parse(`C4Context
+title System Context diagram for Internet Banking System
+Person_Ext(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")`);
+
+    const yy = c4.parser.yy;
+
+    const shapes = yy.getC4ShapeArray();
+    expect(shapes.length).toBe(1);
+    const onlyShape = shapes[0];
+
+    expect(onlyShape).toEqual({
+      alias: 'customerA',
+      descr: {
+        text: 'A customer of the bank, with personal bank accounts.',
+      },
+      label: {
+        text: 'Banking Customer A',
+      },
+      link: undefined,
+      sprite: undefined,
+      tags: undefined,
+      parentBoundary: 'global',
+      typeC4Shape: {
+        text: 'external_person',
+      },
+      wrap: false,
+    });
+  });
+});

From a196aeb29b1c45a30987098929b9fd3e311acbf2 Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Sat, 27 Aug 2022 15:32:57 +0200
Subject: [PATCH 12/24] Add question on Person_Ext

---
 src/diagrams/c4/parser/c4PersonExt.spec.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/diagrams/c4/parser/c4PersonExt.spec.js b/src/diagrams/c4/parser/c4PersonExt.spec.js
index 71faabdc3..9841fff35 100644
--- a/src/diagrams/c4/parser/c4PersonExt.spec.js
+++ b/src/diagrams/c4/parser/c4PersonExt.spec.js
@@ -31,6 +31,8 @@ Person_Ext(customerA, "Banking Customer A", "A customer of the bank, with person
       label: {
         text: 'Banking Customer A',
       },
+      // TODO: Why are link, sprite, and tags undefined instead of not appearing at all?
+      //       Compare to Person where they don't show up.
       link: undefined,
       sprite: undefined,
       tags: undefined,

From db0d6075cab3e1a3d65c6e4a8ce88c023c4d0678 Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Sat, 27 Aug 2022 15:34:20 +0200
Subject: [PATCH 13/24] Add test for link to Person_Ext

---
 src/diagrams/c4/parser/c4PersonExt.spec.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/diagrams/c4/parser/c4PersonExt.spec.js b/src/diagrams/c4/parser/c4PersonExt.spec.js
index 9841fff35..38d8777be 100644
--- a/src/diagrams/c4/parser/c4PersonExt.spec.js
+++ b/src/diagrams/c4/parser/c4PersonExt.spec.js
@@ -43,4 +43,17 @@ Person_Ext(customerA, "Banking Customer A", "A customer of the bank, with person
       wrap: false,
     });
   });
+
+  it('should parse a link', function () {
+    c4.parser.parse(`C4Context
+Person_Ext(customerA, $link="https://github.com/mermaidjs")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: {
+          link: 'https://github.com/mermaidjs',
+        },
+      },
+    });
+  });
 });

From 700e25382bf51a9fa8b3609d3e69d1c9198b6355 Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Sat, 27 Aug 2022 15:38:10 +0200
Subject: [PATCH 14/24] Copy tests from Person to PersonExt

---
 src/diagrams/c4/parser/c4PersonExt.spec.js | 57 ++++++++++++++++++++++
 1 file changed, 57 insertions(+)

diff --git a/src/diagrams/c4/parser/c4PersonExt.spec.js b/src/diagrams/c4/parser/c4PersonExt.spec.js
index 38d8777be..b9c0e1d7a 100644
--- a/src/diagrams/c4/parser/c4PersonExt.spec.js
+++ b/src/diagrams/c4/parser/c4PersonExt.spec.js
@@ -44,6 +44,50 @@ Person_Ext(customerA, "Banking Customer A", "A customer of the bank, with person
     });
   });
 
+  it('should parse the alias', function () {
+    c4.parser.parse(`C4Context
+Person_Ext(customerA, "Banking Customer A")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      alias: 'customerA',
+    });
+  });
+
+  it('should parse the label', function () {
+    c4.parser.parse(`C4Context
+Person_Ext(customerA, "Banking Customer A")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: 'Banking Customer A',
+      },
+    });
+  });
+
+  it('should parse the description', function () {
+    c4.parser.parse(`C4Context
+Person_Ext(customerA, "", "A customer of the bank, with personal bank accounts.")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      descr: {
+        text: 'A customer of the bank, with personal bank accounts.',
+      },
+    });
+  });
+
+  it('should parse a sprite', function () {
+    c4.parser.parse(`C4Context
+Person_Ext(customerA, $sprite="users")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: {
+          sprite: 'users',
+        },
+      },
+    });
+  });
+
   it('should parse a link', function () {
     c4.parser.parse(`C4Context
 Person_Ext(customerA, $link="https://github.com/mermaidjs")`);
@@ -56,4 +100,17 @@ Person_Ext(customerA, $link="https://github.com/mermaidjs")`);
       },
     });
   });
+
+  it('should parse tags', function () {
+    c4.parser.parse(`C4Context
+Person_Ext(customerA, $tags="tag1,tag2")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: {
+          tags: 'tag1,tag2',
+        },
+      },
+    });
+  });
 });

From 2afcd54184a5355ca39353fae3040f4a07ed8f4d Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Sat, 27 Aug 2022 15:42:48 +0200
Subject: [PATCH 15/24] Make test grouping more explicit

---
 src/diagrams/c4/parser/c4Person.spec.js    | 2 +-
 src/diagrams/c4/parser/c4PersonExt.spec.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/diagrams/c4/parser/c4Person.spec.js b/src/diagrams/c4/parser/c4Person.spec.js
index f4ea9bc23..b504c0384 100644
--- a/src/diagrams/c4/parser/c4Person.spec.js
+++ b/src/diagrams/c4/parser/c4Person.spec.js
@@ -6,7 +6,7 @@ setConfig({
   securityLevel: 'strict',
 });
 
-describe('parsing a C4 diagram', function () {
+describe('parsing a C4 Person', function () {
   beforeEach(function () {
     c4.parser.yy = c4Db;
     c4.parser.yy.clear();
diff --git a/src/diagrams/c4/parser/c4PersonExt.spec.js b/src/diagrams/c4/parser/c4PersonExt.spec.js
index b9c0e1d7a..76547600a 100644
--- a/src/diagrams/c4/parser/c4PersonExt.spec.js
+++ b/src/diagrams/c4/parser/c4PersonExt.spec.js
@@ -6,7 +6,7 @@ setConfig({
   securityLevel: 'strict',
 });
 
-describe('parsing a C4 diagram', function () {
+describe('parsing a C4 Person_Ext', function () {
   beforeEach(function () {
     c4.parser.yy = c4Db;
     c4.parser.yy.clear();

From 2414435641a1c9b45e677cd3469dd73813e35715 Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Sat, 27 Aug 2022 15:51:49 +0200
Subject: [PATCH 16/24] Add tests for C4 System

---
 src/diagrams/c4/parser/c4System.spec.js | 116 ++++++++++++++++++++++++
 1 file changed, 116 insertions(+)
 create mode 100644 src/diagrams/c4/parser/c4System.spec.js

diff --git a/src/diagrams/c4/parser/c4System.spec.js b/src/diagrams/c4/parser/c4System.spec.js
new file mode 100644
index 000000000..fb8a2aaa4
--- /dev/null
+++ b/src/diagrams/c4/parser/c4System.spec.js
@@ -0,0 +1,116 @@
+import c4Db from '../c4Db';
+import c4 from './c4Diagram.jison';
+import { setConfig } from '../../../config';
+
+setConfig({
+  securityLevel: 'strict',
+});
+
+describe('parsing a C4 System', function () {
+  beforeEach(function () {
+    c4.parser.yy = c4Db;
+    c4.parser.yy.clear();
+  });
+
+  it('should parse a C4 diagram with one System correctly', function () {
+    c4.parser.parse(`C4Context
+title System Context diagram for Internet Banking System
+System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")`);
+
+    const yy = c4.parser.yy;
+
+    const shapes = yy.getC4ShapeArray();
+    expect(shapes.length).toBe(1);
+    const onlyShape = shapes[0];
+
+    expect(onlyShape).toEqual({
+      alias: 'SystemAA',
+      descr: {
+        text: 'Allows customers to view information about their bank accounts, and make payments.',
+      },
+      label: {
+        text: 'Internet Banking System',
+      },
+      // TODO: Why are link, sprite, and tags undefined instead of not appearing at all?
+      //       Compare to Person where they don't show up.
+      link: undefined,
+      sprite: undefined,
+      tags: undefined,
+      parentBoundary: 'global',
+      typeC4Shape: {
+        text: 'system',
+      },
+      wrap: false,
+    });
+  });
+
+  it('should parse the alias', function () {
+    c4.parser.parse(`C4Context
+System(SystemAA, "Internet Banking System")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      alias: 'SystemAA',
+    });
+  });
+
+  it('should parse the label', function () {
+    c4.parser.parse(`C4Context
+System(SystemAA, "Internet Banking System")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: 'Internet Banking System',
+      },
+    });
+  });
+
+  it('should parse the description', function () {
+    c4.parser.parse(`C4Context
+System(SystemAA, "", "Allows customers to view information about their bank accounts, and make payments.")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      descr: {
+        text: 'Allows customers to view information about their bank accounts, and make payments.',
+      },
+    });
+  });
+
+  it('should parse a sprite', function () {
+    c4.parser.parse(`C4Context
+System(SystemAA, $sprite="users")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: {
+          sprite: 'users',
+        },
+      },
+    });
+  });
+
+  it('should parse a link', function () {
+    c4.parser.parse(`C4Context
+System(SystemAA, $link="https://github.com/mermaidjs")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: {
+          link: 'https://github.com/mermaidjs',
+        },
+      },
+    });
+  });
+
+  it('should parse tags', function () {
+    c4.parser.parse(`C4Context
+System(SystemAA, $tags="tag1,tag2")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: {
+          tags: 'tag1,tag2',
+        },
+      },
+    });
+  });
+});

From 65c73f2eec22b91f6ceb6b91749cbacbd8dc2f1a Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Sat, 27 Aug 2022 15:54:32 +0200
Subject: [PATCH 17/24] Introduce shape list in test

---
 src/diagrams/c4/parser/c4System.spec.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/diagrams/c4/parser/c4System.spec.js b/src/diagrams/c4/parser/c4System.spec.js
index fb8a2aaa4..fa0a4b089 100644
--- a/src/diagrams/c4/parser/c4System.spec.js
+++ b/src/diagrams/c4/parser/c4System.spec.js
@@ -6,7 +6,7 @@ setConfig({
   securityLevel: 'strict',
 });
 
-describe('parsing a C4 System', function () {
+describe.each([['System', 'system']])('parsing a C4 %s', function (macroName, elementName) {
   beforeEach(function () {
     c4.parser.yy = c4Db;
     c4.parser.yy.clear();
@@ -15,7 +15,7 @@ describe('parsing a C4 System', function () {
   it('should parse a C4 diagram with one System correctly', function () {
     c4.parser.parse(`C4Context
 title System Context diagram for Internet Banking System
-System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")`);
+${macroName}(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")`);
 
     const yy = c4.parser.yy;
 
@@ -38,7 +38,7 @@ System(SystemAA, "Internet Banking System", "Allows customers to view informatio
       tags: undefined,
       parentBoundary: 'global',
       typeC4Shape: {
-        text: 'system',
+        text: elementName,
       },
       wrap: false,
     });
@@ -46,7 +46,7 @@ System(SystemAA, "Internet Banking System", "Allows customers to view informatio
 
   it('should parse the alias', function () {
     c4.parser.parse(`C4Context
-System(SystemAA, "Internet Banking System")`);
+${macroName}(SystemAA, "Internet Banking System")`);
 
     expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
       alias: 'SystemAA',
@@ -55,7 +55,7 @@ System(SystemAA, "Internet Banking System")`);
 
   it('should parse the label', function () {
     c4.parser.parse(`C4Context
-System(SystemAA, "Internet Banking System")`);
+${macroName}(SystemAA, "Internet Banking System")`);
 
     expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
       label: {
@@ -66,7 +66,7 @@ System(SystemAA, "Internet Banking System")`);
 
   it('should parse the description', function () {
     c4.parser.parse(`C4Context
-System(SystemAA, "", "Allows customers to view information about their bank accounts, and make payments.")`);
+${macroName}(SystemAA, "", "Allows customers to view information about their bank accounts, and make payments.")`);
 
     expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
       descr: {
@@ -77,7 +77,7 @@ System(SystemAA, "", "Allows customers to view information about their bank acco
 
   it('should parse a sprite', function () {
     c4.parser.parse(`C4Context
-System(SystemAA, $sprite="users")`);
+${macroName}(SystemAA, $sprite="users")`);
 
     expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
       label: {
@@ -90,7 +90,7 @@ System(SystemAA, $sprite="users")`);
 
   it('should parse a link', function () {
     c4.parser.parse(`C4Context
-System(SystemAA, $link="https://github.com/mermaidjs")`);
+${macroName}(SystemAA, $link="https://github.com/mermaidjs")`);
 
     expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
       label: {
@@ -103,7 +103,7 @@ System(SystemAA, $link="https://github.com/mermaidjs")`);
 
   it('should parse tags', function () {
     c4.parser.parse(`C4Context
-System(SystemAA, $tags="tag1,tag2")`);
+${macroName}(SystemAA, $tags="tag1,tag2")`);
 
     expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
       label: {

From 092c15a37c16a1b4997f862917118b4b70f653f1 Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Sun, 28 Aug 2022 17:01:39 +0200
Subject: [PATCH 18/24] Test all different types of systems

---
 src/diagrams/c4/parser/c4System.spec.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/diagrams/c4/parser/c4System.spec.js b/src/diagrams/c4/parser/c4System.spec.js
index fa0a4b089..6d81c7379 100644
--- a/src/diagrams/c4/parser/c4System.spec.js
+++ b/src/diagrams/c4/parser/c4System.spec.js
@@ -6,7 +6,14 @@ setConfig({
   securityLevel: 'strict',
 });
 
-describe.each([['System', 'system']])('parsing a C4 %s', function (macroName, elementName) {
+describe.each([
+  ['System', 'system'],
+  ['SystemDb', 'system_db'],
+  ['SystemQueue', 'system_queue'],
+  ['System_Ext', 'external_system'],
+  ['SystemDb_Ext', 'external_system_db'],
+  ['SystemQueue_Ext', 'external_system_queue'],
+])('parsing a C4 %s', function (macroName, elementName) {
   beforeEach(function () {
     c4.parser.yy = c4Db;
     c4.parser.yy.clear();

From b86476331fe74f4332f9ccd7de45be8fb82351b8 Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Sun, 28 Aug 2022 17:14:19 +0200
Subject: [PATCH 19/24] Add first test for Boundary

---
 src/diagrams/c4/parser/c4Boundary.spec.js | 45 +++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 src/diagrams/c4/parser/c4Boundary.spec.js

diff --git a/src/diagrams/c4/parser/c4Boundary.spec.js b/src/diagrams/c4/parser/c4Boundary.spec.js
new file mode 100644
index 000000000..b531b5bd5
--- /dev/null
+++ b/src/diagrams/c4/parser/c4Boundary.spec.js
@@ -0,0 +1,45 @@
+import c4Db from '../c4Db';
+import c4 from './c4Diagram.jison';
+import { setConfig } from '../../../config';
+
+setConfig({
+  securityLevel: 'strict',
+});
+
+describe.each(['Boundary'])('parsing a C4 %s', function (macroName) {
+  beforeEach(function () {
+    c4.parser.yy = c4Db;
+    c4.parser.yy.clear();
+  });
+
+  it('should parse a C4 diagram with one Boundary correctly', function () {
+    c4.parser.parse(`C4Context
+title System Context diagram for Internet Banking System
+${macroName}(b1, "BankBoundary") {
+System(SystemAA, "Internet Banking System")
+}`);
+
+    const yy = c4.parser.yy;
+
+    const boundaries = yy.getBoundarys();
+    expect(boundaries.length).toBe(2);
+    const onlyShape = boundaries[1];
+
+    expect(onlyShape).toEqual({
+      alias: 'b1',
+      label: {
+        text: 'BankBoundary',
+      },
+      // TODO: Why are link, and tags undefined instead of not appearing at all?
+      //       Compare to Person where they don't show up.
+      link: undefined,
+      tags: undefined,
+      parentBoundary: 'global',
+      type: {
+        // TODO: Why is this `system` instead of `boundary`?
+        text: 'system',
+      },
+      wrap: false,
+    });
+  });
+});

From 1a6305c0796780745d6c36edd496c80d02f7de37 Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Sun, 28 Aug 2022 17:22:22 +0200
Subject: [PATCH 20/24] Add tests for other boundary properties

---
 src/diagrams/c4/parser/c4Boundary.spec.js | 69 ++++++++++++++++++++++-
 1 file changed, 67 insertions(+), 2 deletions(-)

diff --git a/src/diagrams/c4/parser/c4Boundary.spec.js b/src/diagrams/c4/parser/c4Boundary.spec.js
index b531b5bd5..c7130f557 100644
--- a/src/diagrams/c4/parser/c4Boundary.spec.js
+++ b/src/diagrams/c4/parser/c4Boundary.spec.js
@@ -23,9 +23,9 @@ System(SystemAA, "Internet Banking System")
 
     const boundaries = yy.getBoundarys();
     expect(boundaries.length).toBe(2);
-    const onlyShape = boundaries[1];
+    const boundary = boundaries[1];
 
-    expect(onlyShape).toEqual({
+    expect(boundary).toEqual({
       alias: 'b1',
       label: {
         text: 'BankBoundary',
@@ -42,4 +42,69 @@ System(SystemAA, "Internet Banking System")
       wrap: false,
     });
   });
+
+  it('should parse the alias', function () {
+    c4.parser.parse(`C4Context
+${macroName}(b1, "BankBoundary") {
+System(SystemAA, "Internet Banking System")
+}`);
+
+    expect(c4.parser.yy.getBoundarys()[1]).toMatchObject({
+      alias: 'b1',
+    });
+  });
+
+  it('should parse the label', function () {
+    c4.parser.parse(`C4Context
+${macroName}(b1, "BankBoundary") {
+System(SystemAA, "Internet Banking System")
+}`);
+
+    expect(c4.parser.yy.getBoundarys()[1]).toMatchObject({
+      label: {
+        text: 'BankBoundary',
+      },
+    });
+  });
+
+  it('should parse the type', function () {
+    c4.parser.parse(`C4Context
+${macroName}(b1, "", "company") {
+System(SystemAA, "Internet Banking System")
+}`);
+
+    expect(c4.parser.yy.getBoundarys()[1]).toMatchObject({
+      type: { text: 'company' },
+    });
+  });
+
+  it('should parse a link', function () {
+    c4.parser.parse(`C4Context
+${macroName}(b1, $link="https://github.com/mermaidjs") {
+System(SystemAA, "Internet Banking System")
+}`);
+
+    expect(c4.parser.yy.getBoundarys()[1]).toMatchObject({
+      label: {
+        text: {
+          link: 'https://github.com/mermaidjs',
+        },
+      },
+    });
+  });
+
+  it('should parse tags', function () {
+    c4.parser.parse(`C4Context
+${macroName}(b1, $tags="tag1,tag2") {
+System(SystemAA, "Internet Banking System")
+}`);
+
+    expect(c4.parser.yy.getBoundarys()[1]).toMatchObject({
+      label: {
+        text: {
+          tags: 'tag1,tag2',
+        },
+      },
+    });
+  });
 });

From cb4935258ce9653969cf55c02fef03abc61521e9 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Sat, 3 Sep 2022 23:34:19 +0100
Subject: [PATCH 21/24] style: forbid using `console` in mermaid src code

Adds an eslint rule forbidding using `console` in the mermaid source
code. Instead, the `src/logger` should be used instead, so that
websites can disable logging.

This is allowed in the `cypress/` and `demos/` folder.

I've also removed the two instances on `console.log`/`console.error`
that currently exist in the mermaid source code.
---
 .eslintrc.json                            | 7 +++++++
 src/diagrams/git/gitGraphParserV2.spec.js | 2 --
 src/diagrams/info/infoRenderer.js         | 1 -
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 9c755a0e2..7b8091dde 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -22,6 +22,7 @@
   ],
   "plugins": ["html", "jest", "jsdoc", "json", "prettier"],
   "rules": {
+    "no-console": "error",
     "no-prototype-builtins": "off",
     "no-unused-vars": "off",
     "jsdoc/check-indentation": "off",
@@ -47,6 +48,12 @@
       "rules": {
         "prettier/prettier": "off"
       }
+    },
+    {
+      "files": ["./cypress/**", "./demos/**"],
+      "rules": {
+        "no-console": "off"
+      }
     }
   ]
 }
diff --git a/src/diagrams/git/gitGraphParserV2.spec.js b/src/diagrams/git/gitGraphParserV2.spec.js
index 9a5cc59f1..219dbb57c 100644
--- a/src/diagrams/git/gitGraphParserV2.spec.js
+++ b/src/diagrams/git/gitGraphParserV2.spec.js
@@ -535,8 +535,6 @@ describe('when parsing a gitGraph', function () {
       testBranch3Merge,
     ] = Object.values(commits);
 
-    console.log(Object.keys(commits));
-
     expect(mainCommit.branch).toBe('main');
     expect(mainCommit.parents).toStrictEqual([]);
 
diff --git a/src/diagrams/info/infoRenderer.js b/src/diagrams/info/infoRenderer.js
index 8976abb75..9e81b9ffb 100644
--- a/src/diagrams/info/infoRenderer.js
+++ b/src/diagrams/info/infoRenderer.js
@@ -49,7 +49,6 @@ export const draw = (text, id, version, diagObj) => {
     svg.attr('width', 400);
     // svg.attr('viewBox', '0 0 300 150');
   } catch (e) {
-    console.error(e);
     log.error('Error while rendering info diagram');
     log.error(e.message);
   }

From 106672bc7564a61ab99f0a3e11d792a0061517b3 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Sat, 3 Sep 2022 23:57:17 +0100
Subject: [PATCH 22/24] refactor: remove `console.log` in c4Diagram.jison

These aren't caught by eslint, since they're in a .jison file.
---
 src/diagrams/c4/parser/c4Diagram.jison | 208 ++++++++++++-------------
 1 file changed, 104 insertions(+), 104 deletions(-)

diff --git a/src/diagrams/c4/parser/c4Diagram.jison b/src/diagrams/c4/parser/c4Diagram.jison
index 10783db53..03b851458 100644
--- a/src/diagrams/c4/parser/c4Diagram.jison
+++ b/src/diagrams/c4/parser/c4Diagram.jison
@@ -115,80 +115,80 @@ accDescr\s*"{"\s*                         { this.begin("acc_descr_multiline");}
 "C4Dynamic"                               return 'C4_DYNAMIC';
 "C4Deployment"                            return 'C4_DEPLOYMENT';
 
-"Person_Ext"                              { this.begin("person_ext"); console.log('begin person_ext'); return 'PERSON_EXT';}
-"Person"                                  { this.begin("person"); console.log('begin person'); return 'PERSON';}
-"SystemQueue_Ext"                         { this.begin("system_ext_queue"); console.log('begin system_ext_queue'); return 'SYSTEM_EXT_QUEUE';}
-"SystemDb_Ext"                            { this.begin("system_ext_db"); console.log('begin system_ext_db'); return 'SYSTEM_EXT_DB';}
-"System_Ext"                              { this.begin("system_ext"); console.log('begin system_ext'); return 'SYSTEM_EXT';}
-"SystemQueue"                             { this.begin("system_queue"); console.log('begin system_queue'); return 'SYSTEM_QUEUE';}
-"SystemDb"                                { this.begin("system_db"); console.log('begin system_db'); return 'SYSTEM_DB';}
-"System"                                  { this.begin("system"); console.log('begin system'); return 'SYSTEM';}
+"Person_Ext"                              { this.begin("person_ext"); return 'PERSON_EXT';}
+"Person"                                  { this.begin("person"); return 'PERSON';}
+"SystemQueue_Ext"                         { this.begin("system_ext_queue"); return 'SYSTEM_EXT_QUEUE';}
+"SystemDb_Ext"                            { this.begin("system_ext_db"); return 'SYSTEM_EXT_DB';}
+"System_Ext"                              { this.begin("system_ext"); return 'SYSTEM_EXT';}
+"SystemQueue"                             { this.begin("system_queue"); return 'SYSTEM_QUEUE';}
+"SystemDb"                                { this.begin("system_db"); return 'SYSTEM_DB';}
+"System"                                  { this.begin("system"); return 'SYSTEM';}
 
-"Boundary"                                { this.begin("boundary"); console.log('begin boundary'); return 'BOUNDARY';}
-"Enterprise_Boundary"                     { this.begin("enterprise_boundary"); console.log('begin enterprise_boundary'); return 'ENTERPRISE_BOUNDARY';}
-"System_Boundary"                         { this.begin("system_boundary"); console.log('begin system_boundary'); return 'SYSTEM_BOUNDARY';}
+"Boundary"                                { this.begin("boundary"); return 'BOUNDARY';}
+"Enterprise_Boundary"                     { this.begin("enterprise_boundary"); return 'ENTERPRISE_BOUNDARY';}
+"System_Boundary"                         { this.begin("system_boundary"); return 'SYSTEM_BOUNDARY';}
 
-"ContainerQueue_Ext"                         { this.begin("container_ext_queue"); console.log('begin container_ext_queue'); return 'CONTAINER_EXT_QUEUE';}
-"ContainerDb_Ext"                            { this.begin("container_ext_db"); console.log('begin container_ext_db'); return 'CONTAINER_EXT_DB';}
-"Container_Ext"                              { this.begin("container_ext"); console.log('begin container_ext'); return 'CONTAINER_EXT';}
-"ContainerQueue"                             { this.begin("container_queue"); console.log('begin container_queue'); return 'CONTAINER_QUEUE';}
-"ContainerDb"                                { this.begin("container_db"); console.log('begin container_db'); return 'CONTAINER_DB';}
-"Container"                                  { this.begin("container"); console.log('begin container'); return 'CONTAINER';}
+"ContainerQueue_Ext"                         { this.begin("container_ext_queue"); return 'CONTAINER_EXT_QUEUE';}
+"ContainerDb_Ext"                            { this.begin("container_ext_db"); return 'CONTAINER_EXT_DB';}
+"Container_Ext"                              { this.begin("container_ext"); return 'CONTAINER_EXT';}
+"ContainerQueue"                             { this.begin("container_queue"); return 'CONTAINER_QUEUE';}
+"ContainerDb"                                { this.begin("container_db"); return 'CONTAINER_DB';}
+"Container"                                  { this.begin("container"); return 'CONTAINER';}
 
-"Container_Boundary"                         { this.begin("container_boundary"); console.log('begin container_boundary'); return 'CONTAINER_BOUNDARY';}
+"Container_Boundary"                         { this.begin("container_boundary"); return 'CONTAINER_BOUNDARY';}
 
-"ComponentQueue_Ext"                         { this.begin("component_ext_queue"); console.log('begin component_ext_queue'); return 'COMPONENT_EXT_QUEUE';}
-"ComponentDb_Ext"                            { this.begin("component_ext_db"); console.log('begin component_ext_db'); return 'COMPONENT_EXT_DB';}
-"Component_Ext"                              { this.begin("component_ext"); console.log('begin component_ext'); return 'COMPONENT_EXT';}
-"ComponentQueue"                             { this.begin("component_queue"); console.log('begin component_queue'); return 'COMPONENT_QUEUE';}
-"ComponentDb"                                { this.begin("component_db"); console.log('begin component_db'); return 'COMPONENT_DB';}
-"Component"                                  { this.begin("component"); console.log('begin component'); return 'COMPONENT';}
+"ComponentQueue_Ext"                         { this.begin("component_ext_queue"); return 'COMPONENT_EXT_QUEUE';}
+"ComponentDb_Ext"                            { this.begin("component_ext_db"); return 'COMPONENT_EXT_DB';}
+"Component_Ext"                              { this.begin("component_ext"); return 'COMPONENT_EXT';}
+"ComponentQueue"                             { this.begin("component_queue"); return 'COMPONENT_QUEUE';}
+"ComponentDb"                                { this.begin("component_db"); return 'COMPONENT_DB';}
+"Component"                                  { this.begin("component"); return 'COMPONENT';}
 
-"Deployment_Node"                         { this.begin("node"); console.log('begin node'); return 'NODE';}
-"Node"                                    { this.begin("node"); console.log('begin node'); return 'NODE';}
-"Node_L"                                  { this.begin("node_l"); console.log('begin node_l'); return 'NODE_L';}
-"Node_R"                                  { this.begin("node_r"); console.log('begin node_r'); return 'NODE_R';}
+"Deployment_Node"                         { this.begin("node"); return 'NODE';}
+"Node"                                    { this.begin("node"); return 'NODE';}
+"Node_L"                                  { this.begin("node_l"); return 'NODE_L';}
+"Node_R"                                  { this.begin("node_r"); return 'NODE_R';}
 
 
-"Rel"                                     { this.begin("rel"); console.log('begin rel'); return 'REL';} 
-"BiRel"                                   { this.begin("birel"); console.log('begin birel'); return 'BIREL';} 
-"Rel_Up"                                  { this.begin("rel_u"); console.log('begin rel_u'); return 'REL_U';}  
-"Rel_U"                                   { this.begin("rel_u"); console.log('begin rel_u'); return 'REL_U';}  
-"Rel_Down"                                { this.begin("rel_d"); console.log('begin rel_d'); return 'REL_D';}  
-"Rel_D"                                   { this.begin("rel_d"); console.log('begin rel_d'); return 'REL_D';}  
-"Rel_Left"                                { this.begin("rel_l"); console.log('begin rel_l'); return 'REL_L';}  
-"Rel_L"                                   { this.begin("rel_l"); console.log('begin rel_l'); return 'REL_L';}  
-"Rel_Right"                               { this.begin("rel_r"); console.log('begin rel_r'); return 'REL_R';}  
-"Rel_R"                                   { this.begin("rel_r"); console.log('begin rel_r'); return 'REL_R';}  
-"Rel_Back"                                { this.begin("rel_b"); console.log('begin rel_b'); return 'REL_B';}  
-"RelIndex"                                { this.begin("rel_index"); console.log('begin rel_index'); return 'REL_INDEX';} 
+"Rel"                                     { this.begin("rel"); return 'REL';} 
+"BiRel"                                   { this.begin("birel"); return 'BIREL';} 
+"Rel_Up"                                  { this.begin("rel_u"); return 'REL_U';}  
+"Rel_U"                                   { this.begin("rel_u"); return 'REL_U';}  
+"Rel_Down"                                { this.begin("rel_d"); return 'REL_D';}  
+"Rel_D"                                   { this.begin("rel_d"); return 'REL_D';}  
+"Rel_Left"                                { this.begin("rel_l"); return 'REL_L';}  
+"Rel_L"                                   { this.begin("rel_l"); return 'REL_L';}  
+"Rel_Right"                               { this.begin("rel_r"); return 'REL_R';}  
+"Rel_R"                                   { this.begin("rel_r"); return 'REL_R';}  
+"Rel_Back"                                { this.begin("rel_b"); return 'REL_B';}  
+"RelIndex"                                { this.begin("rel_index"); return 'REL_INDEX';} 
 
-"UpdateElementStyle"                      { this.begin("update_el_style"); console.log('begin update_el_style'); return 'UPDATE_EL_STYLE';}  
-"UpdateRelStyle"                          { this.begin("update_rel_style"); console.log('begin update_rel_style'); return 'UPDATE_REL_STYLE';} 
-"UpdateLayoutConfig"                      { this.begin("update_layout_config"); console.log('begin update_layout_config'); return 'UPDATE_LAYOUT_CONFIG';} 
+"UpdateElementStyle"                      { this.begin("update_el_style"); return 'UPDATE_EL_STYLE';}  
+"UpdateRelStyle"                          { this.begin("update_rel_style"); return 'UPDATE_REL_STYLE';} 
+"UpdateLayoutConfig"                      { this.begin("update_layout_config"); return 'UPDATE_LAYOUT_CONFIG';} 
 
 <person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config><<EOF>>                return "EOF_IN_STRUCT";
-<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config>[(][ ]*[,]             { console.log('begin attribute with ATTRIBUTE_EMPTY'); this.begin("attribute"); return "ATTRIBUTE_EMPTY";}
-<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config>[(]                    { console.log('begin attribute'); this.begin("attribute"); }
-<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config,attribute>[)]          { console.log('STOP attribute'); this.popState();console.log('STOP diagram'); this.popState();}
+<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config>[(][ ]*[,]             { this.begin("attribute"); return "ATTRIBUTE_EMPTY";}
+<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config>[(]                    { this.begin("attribute"); }
+<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config,attribute>[)]          { this.popState();this.popState();}
 
-<attribute>",,"                           { console.log(',,'); return 'ATTRIBUTE_EMPTY';}
-<attribute>","                            { console.log(','); }
-<attribute>[ ]*["]["]                     { console.log('ATTRIBUTE_EMPTY'); return 'ATTRIBUTE_EMPTY';}
-<attribute>[ ]*["]                        { console.log('begin string'); this.begin("string");}
-<string>["]                               { console.log('STOP string');  this.popState(); }
-<string>[^"]*                             { console.log('STR'); return "STR";}
+<attribute>",,"                           { return 'ATTRIBUTE_EMPTY';}
+<attribute>","                            { }
+<attribute>[ ]*["]["]                     { return 'ATTRIBUTE_EMPTY';}
+<attribute>[ ]*["]                        { this.begin("string");}
+<string>["]                               {  this.popState(); }
+<string>[^"]*                             { return "STR";}
 
-<attribute>[ ]*[\$]                       { console.log('begin string_kv'); this.begin("string_kv");}
-<string_kv>[^=]*                          { console.log('STR_KEY'); this.begin("string_kv_key"); return "STR_KEY";}
-<string_kv_key>[=][ ]*["]                 { console.log('begin string_kv_value'); this.popState(); this.begin("string_kv_value"); }
-<string_kv_value>[^"]+                    { console.log('STR_VALUE'); return "STR_VALUE";}
-<string_kv_value>["]                      { console.log('STOP string_kv_value'); this.popState(); this.popState(); }
+<attribute>[ ]*[\$]                       { this.begin("string_kv");}
+<string_kv>[^=]*                          { this.begin("string_kv_key"); return "STR_KEY";}
+<string_kv_key>[=][ ]*["]                 { this.popState(); this.begin("string_kv_value"); }
+<string_kv_value>[^"]+                    { return "STR_VALUE";}
+<string_kv_value>["]                      { this.popState(); this.popState(); }
 
-<attribute>[^,]+                          { console.log('not STR'); return "STR";}
+<attribute>[^,]+                          { return "STR";}
 
-'{'                                       { /* this.begin("lbrace"); */ console.log('begin boundary block'); return "LBRACE";}
-'}'                                       { /* this.popState(); */ console.log('STOP boundary block'); return "RBRACE";}
+'{'                                       { /* this.begin("lbrace"); */ return "LBRACE";}
+'}'                                       { /* this.popState(); */ return "RBRACE";}
    
 [\s]+                                     return 'SPACE';
 [\n\r]+                                   return 'EOL';
@@ -231,7 +231,7 @@ directive
   ;
 
 openDirective
-  : open_directive { console.log("open_directive: ", $1); yy.parseDirective('%%{', 'open_directive'); }
+  : open_directive { yy.parseDirective('%%{', 'open_directive'); }
   ;
 
 typeDirective
@@ -239,11 +239,11 @@ typeDirective
   ;
 
 argDirective
-  : arg_directive { $1 = $1.trim().replace(/'/g, '"'); console.log("arg_directive: ", $1); yy.parseDirective($1, 'arg_directive'); }
+  : arg_directive { $1 = $1.trim().replace(/'/g, '"'); yy.parseDirective($1, 'arg_directive'); }
   ;
 
 closeDirective
-  : close_directive { console.log("close_directive: ", $1); yy.parseDirective('}%%', 'close_directive', 'c4Context');  }
+  : close_directive { yy.parseDirective('}%%', 'close_directive', 'c4Context');  }
   ;
 
 graphConfig
@@ -285,13 +285,13 @@ boundaryStartStatement
     ;
 
 boundaryStart
-    : ENTERPRISE_BOUNDARY attributes {console.log($1,JSON.stringify($2)); $2.splice(2, 0, 'ENTERPRISE'); yy.addPersonOrSystemBoundary(...$2); $$=$2;}
-    | SYSTEM_BOUNDARY attributes {console.log($1,JSON.stringify($2)); $2.splice(2, 0, 'ENTERPRISE'); yy.addPersonOrSystemBoundary(...$2); $$=$2;}
-    | BOUNDARY attributes {console.log($1,JSON.stringify($2)); yy.addPersonOrSystemBoundary(...$2); $$=$2;}
-    | CONTAINER_BOUNDARY attributes {console.log($1,JSON.stringify($2)); $2.splice(2, 0, 'CONTAINER'); yy.addContainerBoundary(...$2); $$=$2;}
-    | NODE attributes {console.log($1,JSON.stringify($2)); yy.addDeploymentNode('node', ...$2); $$=$2;}
-    | NODE_L attributes {console.log($1,JSON.stringify($2)); yy.addDeploymentNode('nodeL', ...$2); $$=$2;}
-    | NODE_R attributes {console.log($1,JSON.stringify($2)); yy.addDeploymentNode('nodeR', ...$2); $$=$2;}
+    : ENTERPRISE_BOUNDARY attributes {$2.splice(2, 0, 'ENTERPRISE'); yy.addPersonOrSystemBoundary(...$2); $$=$2;}
+    | SYSTEM_BOUNDARY attributes {$2.splice(2, 0, 'ENTERPRISE'); yy.addPersonOrSystemBoundary(...$2); $$=$2;}
+    | BOUNDARY attributes {yy.addPersonOrSystemBoundary(...$2); $$=$2;}
+    | CONTAINER_BOUNDARY attributes {$2.splice(2, 0, 'CONTAINER'); yy.addContainerBoundary(...$2); $$=$2;}
+    | NODE attributes {yy.addDeploymentNode('node', ...$2); $$=$2;}
+    | NODE_L attributes {yy.addDeploymentNode('nodeL', ...$2); $$=$2;}
+    | NODE_R attributes {yy.addDeploymentNode('nodeR', ...$2); $$=$2;}
     ;
 
 boundaryStopStatement
@@ -305,48 +305,48 @@ diagramStatements
     ;
 
 diagramStatement
-    : PERSON attributes {console.log($1,JSON.stringify($2)); yy.addPersonOrSystem('person', ...$2); $$=$2;}
-    | PERSON_EXT attributes {console.log($1,JSON.stringify($2)); yy.addPersonOrSystem('external_person', ...$2); $$=$2;}
-    | SYSTEM attributes {console.log($1,JSON.stringify($2)); yy.addPersonOrSystem('system', ...$2); $$=$2;}
-    | SYSTEM_DB attributes {console.log($1,JSON.stringify($2)); yy.addPersonOrSystem('system_db', ...$2); $$=$2;}
-    | SYSTEM_QUEUE attributes {console.log($1,JSON.stringify($2)); yy.addPersonOrSystem('system_queue', ...$2); $$=$2;}
-    | SYSTEM_EXT attributes {console.log($1,JSON.stringify($2)); yy.addPersonOrSystem('external_system', ...$2); $$=$2;}
-    | SYSTEM_EXT_DB attributes {console.log($1,JSON.stringify($2)); yy.addPersonOrSystem('external_system_db', ...$2); $$=$2;}
-    | SYSTEM_EXT_QUEUE attributes {console.log($1,JSON.stringify($2)); yy.addPersonOrSystem('external_system_queue', ...$2); $$=$2;}      
-    | CONTAINER attributes {console.log($1,JSON.stringify($2)); yy.addContainer('container', ...$2); $$=$2;}
-    | CONTAINER_DB attributes {console.log($1,JSON.stringify($2)); yy.addContainer('container_db', ...$2); $$=$2;}
-    | CONTAINER_QUEUE attributes {console.log($1,JSON.stringify($2)); yy.addContainer('container_queue', ...$2); $$=$2;}
-    | CONTAINER_EXT attributes {console.log($1,JSON.stringify($2)); yy.addContainer('external_container', ...$2); $$=$2;}
-    | CONTAINER_EXT_DB attributes {console.log($1,JSON.stringify($2)); yy.addContainer('external_container_db', ...$2); $$=$2;}
-    | CONTAINER_EXT_QUEUE attributes {console.log($1,JSON.stringify($2)); yy.addContainer('external_container_queue', ...$2); $$=$2;}      
-    | COMPONENT attributes {console.log($1,JSON.stringify($2)); yy.addComponent('component', ...$2); $$=$2;}
-    | COMPONENT_DB attributes {console.log($1,JSON.stringify($2)); yy.addComponent('component_db', ...$2); $$=$2;}
-    | COMPONENT_QUEUE attributes {console.log($1,JSON.stringify($2)); yy.addComponent('component_queue', ...$2); $$=$2;}
-    | COMPONENT_EXT attributes {console.log($1,JSON.stringify($2)); yy.addComponent('external_component', ...$2); $$=$2;}
-    | COMPONENT_EXT_DB attributes {console.log($1,JSON.stringify($2)); yy.addComponent('external_component_db', ...$2); $$=$2;}
-    | COMPONENT_EXT_QUEUE attributes {console.log($1,JSON.stringify($2)); yy.addComponent('external_component_queue', ...$2); $$=$2;}      
+    : PERSON attributes {yy.addPersonOrSystem('person', ...$2); $$=$2;}
+    | PERSON_EXT attributes {yy.addPersonOrSystem('external_person', ...$2); $$=$2;}
+    | SYSTEM attributes {yy.addPersonOrSystem('system', ...$2); $$=$2;}
+    | SYSTEM_DB attributes {yy.addPersonOrSystem('system_db', ...$2); $$=$2;}
+    | SYSTEM_QUEUE attributes {yy.addPersonOrSystem('system_queue', ...$2); $$=$2;}
+    | SYSTEM_EXT attributes {yy.addPersonOrSystem('external_system', ...$2); $$=$2;}
+    | SYSTEM_EXT_DB attributes {yy.addPersonOrSystem('external_system_db', ...$2); $$=$2;}
+    | SYSTEM_EXT_QUEUE attributes {yy.addPersonOrSystem('external_system_queue', ...$2); $$=$2;}      
+    | CONTAINER attributes {yy.addContainer('container', ...$2); $$=$2;}
+    | CONTAINER_DB attributes {yy.addContainer('container_db', ...$2); $$=$2;}
+    | CONTAINER_QUEUE attributes {yy.addContainer('container_queue', ...$2); $$=$2;}
+    | CONTAINER_EXT attributes {yy.addContainer('external_container', ...$2); $$=$2;}
+    | CONTAINER_EXT_DB attributes {yy.addContainer('external_container_db', ...$2); $$=$2;}
+    | CONTAINER_EXT_QUEUE attributes {yy.addContainer('external_container_queue', ...$2); $$=$2;}      
+    | COMPONENT attributes {yy.addComponent('component', ...$2); $$=$2;}
+    | COMPONENT_DB attributes {yy.addComponent('component_db', ...$2); $$=$2;}
+    | COMPONENT_QUEUE attributes {yy.addComponent('component_queue', ...$2); $$=$2;}
+    | COMPONENT_EXT attributes {yy.addComponent('external_component', ...$2); $$=$2;}
+    | COMPONENT_EXT_DB attributes {yy.addComponent('external_component_db', ...$2); $$=$2;}
+    | COMPONENT_EXT_QUEUE attributes {yy.addComponent('external_component_queue', ...$2); $$=$2;}      
     | boundaryStatement
-    | REL attributes {console.log($1,JSON.stringify($2)); yy.addRel('rel', ...$2); $$=$2;}
-    | BIREL attributes {console.log($1,JSON.stringify($2)); yy.addRel('birel', ...$2); $$=$2;}
-    | REL_U attributes {console.log($1,JSON.stringify($2)); yy.addRel('rel_u', ...$2); $$=$2;}
-    | REL_D attributes {console.log($1,JSON.stringify($2)); yy.addRel('rel_d', ...$2); $$=$2;}
-    | REL_L attributes {console.log($1,JSON.stringify($2)); yy.addRel('rel_l', ...$2); $$=$2;}
-    | REL_R attributes {console.log($1,JSON.stringify($2)); yy.addRel('rel_r', ...$2); $$=$2;}
-    | REL_B attributes {console.log($1,JSON.stringify($2)); yy.addRel('rel_b', ...$2); $$=$2;}
-    | REL_INDEX attributes {console.log($1,JSON.stringify($2)); $2.splice(0, 1); yy.addRel('rel', ...$2); $$=$2;}
-    | UPDATE_EL_STYLE attributes {console.log($1,JSON.stringify($2)); yy.updateElStyle('update_el_style', ...$2); $$=$2;}
-    | UPDATE_REL_STYLE attributes {console.log($1,JSON.stringify($2)); yy.updateRelStyle('update_rel_style', ...$2); $$=$2;}
-    | UPDATE_LAYOUT_CONFIG attributes {console.log($1,JSON.stringify($2)); yy.updateLayoutConfig('update_layout_config', ...$2); $$=$2;}
+    | REL attributes {yy.addRel('rel', ...$2); $$=$2;}
+    | BIREL attributes {yy.addRel('birel', ...$2); $$=$2;}
+    | REL_U attributes {yy.addRel('rel_u', ...$2); $$=$2;}
+    | REL_D attributes {yy.addRel('rel_d', ...$2); $$=$2;}
+    | REL_L attributes {yy.addRel('rel_l', ...$2); $$=$2;}
+    | REL_R attributes {yy.addRel('rel_r', ...$2); $$=$2;}
+    | REL_B attributes {yy.addRel('rel_b', ...$2); $$=$2;}
+    | REL_INDEX attributes {$2.splice(0, 1); yy.addRel('rel', ...$2); $$=$2;}
+    | UPDATE_EL_STYLE attributes {yy.updateElStyle('update_el_style', ...$2); $$=$2;}
+    | UPDATE_REL_STYLE attributes {yy.updateRelStyle('update_rel_style', ...$2); $$=$2;}
+    | UPDATE_LAYOUT_CONFIG attributes {yy.updateLayoutConfig('update_layout_config', ...$2); $$=$2;}
     ;
 
 attributes
-    : attribute { console.log('PUSH ATTRIBUTE: ', $1); $$ = [$1]; }
-    | attribute attributes { console.log('PUSH ATTRIBUTE: ', $1); $2.unshift($1); $$=$2;}
+    : attribute { $$ = [$1]; }
+    | attribute attributes { $2.unshift($1); $$=$2;}
     ;
 
 attribute
     : STR {  $$ = $1.trim(); }
-    | STR_KEY STR_VALUE { console.log('kv: ', $1, $2); let kv={}; kv[$1.trim()]=$2.trim(); $$=kv; }
+    | STR_KEY STR_VALUE { let kv={}; kv[$1.trim()]=$2.trim(); $$=kv; }
     | ATTRIBUTE {  $$ = $1.trim(); }
     | ATTRIBUTE_EMPTY {  $$ = ""; }
     ;

From 22d20cc76e670ec521c191519a2ee117dde15784 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Tue, 6 Sep 2022 03:22:18 +0100
Subject: [PATCH 23/24] ci: lint .jison files for any console.log()

Converts the *.jison files into .js, then lints them using just
the `no-console` rule.

To keep things simple, I've just made this run only on CI.

If we want to do more complex linting on `*.jison` files, it might
be worth making an `eslint-plugin-jison`, so that we can directly
parse jison in ESLint.
---
 .github/workflows/lint.yml | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index 050667a8f..e538372ad 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -37,3 +37,17 @@ jobs:
 
     - name: Run Linting
       run: yarn lint
+    - name: Check no `console.log()` in .jison files
+      # ESLint can't parse .jison files directly
+      # In the future, it might be worth making a `eslint-plugin-jison`, so
+      # that this will be built into the `yarn lint` command.
+      run: |
+        shopt -s globstar
+        mkdir -p tmp/
+        for jison_file in src/**/*.jison; do
+          outfile="tmp/$(basename -- "$jison_file" .jison)-jison.js"
+          echo "Converting $jison_file to $outfile"
+          # default module-type (CJS) always adds a console.log()
+          yarn jison "$jison_file" --outfile "$outfile" --module-type "amd"
+        done
+        yarn eslint --no-eslintrc --rule no-console:error --parser "@babel/eslint-parser" "./tmp/*-jison.js"

From 9d0901801b0cfa2c14afda256e70bcc08b91038d Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 9 Sep 2022 18:26:57 +0530
Subject: [PATCH 24/24] Suppress errors

---
 cypress.config.js        | 2 ++
 cypress/plugins/index.js | 1 +
 src/docs.mts             | 4 +++-
 src/logger.ts            | 1 +
 4 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/cypress.config.js b/cypress.config.js
index 044c5d523..d7c9831d4 100644
--- a/cypress.config.js
+++ b/cypress.config.js
@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+
 const { defineConfig } = require('cypress');
 const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
 require('@applitools/eyes-cypress')(module);
diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js
index 2c98a54ad..ca5a37d5a 100644
--- a/cypress/plugins/index.js
+++ b/cypress/plugins/index.js
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 // ***********************************************************
 // This example plugins/index.js can be used to load plugins
 //
diff --git a/src/docs.mts b/src/docs.mts
index 76594c4bf..5bc3a49cf 100644
--- a/src/docs.mts
+++ b/src/docs.mts
@@ -1,7 +1,9 @@
+/* eslint-disable no-console */
+
 import { remark } from 'remark';
 import type { Code, Root } from 'mdast';
 import { readFileSync, writeFileSync, mkdirSync, existsSync } from 'fs';
-// @ts-ignore
+// @ts-ignore: no typings
 import flatmap from 'unist-util-flatmap';
 import { globby } from 'globby';
 import { join, dirname } from 'path';
diff --git a/src/logger.ts b/src/logger.ts
index 94b399877..57c9cf4bb 100644
--- a/src/logger.ts
+++ b/src/logger.ts
@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/no-empty-function */
+/* eslint-disable no-console */
 import moment from 'moment-mini';
 
 export type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal';