Merge branch 'develop' into sidv/esbuild

* develop:
  Replace GoogleAnalytics with Plausible
  fix(git): support single character branch names
  Cleanup unused variables and some commented out code
  Release 9.1.7
  Fix for broken rendering test
  Fix for issue #3428, load the configured diagrams even when initialize has not been called.
  #3395 Renabling the error graph which is rendered on error
  #3395 Fix for lopp stopping at first failure

src/diagram-api/diagram-orchestration.ts

@@ -97,7 +97,29 @@ import journeyDb from '../diagrams/user-journey/journeyDb';
 import journeyRenderer from '../diagrams/user-journey/journeyRenderer';
 import journeyStyles from '../diagrams/user-journey/styles';
 
+import errorRenderer from '../diagrams/error/errorRenderer';
+import errorStyles from '../diagrams/error/styles';
+
 export const addDiagrams = () => {
+  registerDiagram(
+    'error',
+    // Special diagram with error messages but setup as a regular diagram
+    {
+      db: {},
+      styles: errorStyles,
+      renderer: errorRenderer,
+      parser: {
+        parser: { yy: {} },
+        parse: () => {
+          // no op
+        },
+      },
+      init: () => {
+        // no op
+      },
+    },
+    (text) => text.toLowerCase().trim() === 'error'
+  );
   registerDiagram(
     'c4',
     {

src/diagrams/error/errorRenderer.ts

@@ -1,7 +1,7 @@
 /** Created by knut on 14-12-11. */
 import { select } from 'd3';
-import { log } from './logger';
-import { getErrorMessage } from './utils';
+import { log } from '../../logger';
+import { getErrorMessage } from '../../utils';
 
 let conf = {};
 
@@ -72,22 +72,22 @@ export const draw = (id: string, mermaidVersion: string) => {
 
     g.append('text') // text label for the x axis
       .attr('class', 'error-text')
-      .attr('x', 1240)
+      .attr('x', 1440)
       .attr('y', 250)
       .attr('font-size', '150px')
       .style('text-anchor', 'middle')
       .text('Syntax error in graph');
     g.append('text') // text label for the x axis
       .attr('class', 'error-text')
-      .attr('x', 1050)
+      .attr('x', 1250)
       .attr('y', 400)
       .attr('font-size', '100px')
       .style('text-anchor', 'middle')
       .text('mermaid version ' + mermaidVersion);
 
     svg.attr('height', 100);
-    svg.attr('width', 400);
-    svg.attr('viewBox', '768 0 512 512');
+    svg.attr('width', 500);
+    svg.attr('viewBox', '768 0 912 512');
   } catch (e) {
     log.error('Error while rendering info diagram');
     log.error(getErrorMessage(e));

src/diagrams/error/styles.js

@@ -0,0 +1,3 @@
+const getStyles = () => ``;
+
+export default getStyles;

src/diagrams/git/gitGraphParserV2.spec.js

@@ -372,14 +372,16 @@ describe('when parsing a gitGraph', function () {
     branch cherry-pick03
     branch branch/example-branch
     branch merge/test_merge
+    %% single character branch name
+    branch A
     `;
 
     parser.parse(str);
     const commits = parser.yy.getCommits();
     expect(Object.keys(commits).length).toBe(1);
-    expect(parser.yy.getCurrentBranch()).toBe('merge/test_merge');
+    expect(parser.yy.getCurrentBranch()).toBe('A');
     expect(parser.yy.getDirection()).toBe('LR');
-    expect(Object.keys(parser.yy.getBranches()).length).toBe(6);
+    expect(Object.keys(parser.yy.getBranches()).length).toBe(7);
     expect(Object.keys(parser.yy.getBranches())).toEqual(
       expect.arrayContaining([
         'branch01',
@@ -387,6 +389,7 @@ describe('when parsing a gitGraph', function () {
         'cherry-pick03',
         'branch/example-branch',
         'merge/test_merge',
+        'A',
       ])
     );
   });

src/diagrams/git/gitGraphRenderer.js

@@ -91,7 +91,9 @@ const drawCommits = (svg, commits, modifyGraph) => {
     if (modifyGraph) {
       let typeClass;
       let commitSymbolType =
-        typeof commit.customType !== 'undefined' ? commit.customType : commit.type;
+        typeof commit.customType !== 'undefined' && commit.customType !== ''
+          ? commit.customType
+          : commit.type;
       switch (commitSymbolType) {
         case commitType.NORMAL:
           typeClass = 'commit-normal';

src/diagrams/git/parser/gitGraph.jison

@@ -61,7 +61,7 @@ checkout(?=\s|$)                        return 'CHECKOUT';
 <string>["]                             this.popState();
 <string>[^"]*                           return 'STR';
 [0-9]+(?=\s|$)                          return 'NUM';
-\w[-\./\w]*[-\w]                        return 'ID'; // only a subset of https://git-scm.com/docs/git-check-ref-format
+\w([-\./\w]*[-\w])?                     return 'ID'; // only a subset of https://git-scm.com/docs/git-check-ref-format
 <<EOF>>                                 return 'EOF';
 \s+                                    /* skip all whitespace */ // lowest priority so we can use lookaheads in earlier regex
 

src/diagrams/mindmap/mindmapRenderer.js

@@ -85,9 +85,8 @@ function rightToLeft(mindmap) {
 /**
  * @param mindmap
  * @param dir
- * @param conf
  */
-function layout(mindmap, dir, conf) {
+function layout(mindmap, dir) {
   const bb = new BoundingBox(30, 60);
 
   const layout = new Layout(bb);

src/diagrams/mindmap/svgDraw.js

@@ -47,9 +47,9 @@ function wrap(text, width) {
   });
 }
 
-const defaultBkg = function (elem, node, section, conf) {
+const defaultBkg = function (elem, node, section) {
   const rd = 5;
-  const r = elem
+  elem
     .append('path')
     .attr('id', 'node-' + node.id)
     .attr('class', 'node-bkg node-' + db.type2Str(node.type))
@@ -68,25 +68,22 @@ const defaultBkg = function (elem, node, section, conf) {
     .attr('x2', node.width)
     .attr('y2', node.height);
 };
-const rectBkg = function (elem, node, section, conf) {
-  const r = elem
+const rectBkg = function (elem, node) {
+  elem
     .append('rect')
     .attr('id', 'node-' + node.id)
     .attr('class', 'node-bkg node-' + db.type2Str(node.type))
     .attr('height', node.height)
     .attr('width', node.width);
 };
-const cloudBkg = function (elem, node, section, conf) {
-  const rd = 5;
-  const r = elem;
+const cloudBkg = function (elem, node) {
   const w = node.width;
   const h = node.height;
-  const r0 = 0.1 * w;
   const r1 = 0.15 * w;
   const r2 = 0.25 * w;
   const r3 = 0.35 * w;
   const r4 = 0.2 * w;
-  const p = elem
+  elem
     .append('path')
     .attr('id', 'node-' + node.id)
     .attr('class', 'node-bkg node-' + db.type2Str(node.type))
@@ -109,12 +106,11 @@ const cloudBkg = function (elem, node, section, conf) {
     H0 V0 Z`
     );
 };
-const bangBkg = function (elem, node, section, conf) {
-  const rd = 5;
+const bangBkg = function (elem, node) {
   const w = node.width;
   const h = node.height;
   const r = 0.15 * w;
-  const p = elem
+  elem
     .append('path')
     .attr('id', 'node-' + node.id)
     .attr('class', 'node-bkg node-' + db.type2Str(node.type))
@@ -141,16 +137,15 @@ const bangBkg = function (elem, node, section, conf) {
     H0 V0 Z`
     );
 };
-const circleBkg = function (elem, node, section, conf) {
-  const r = elem
+const circleBkg = function (elem, node) {
+  elem
     .append('circle')
     .attr('id', 'node-' + node.id)
     .attr('class', 'node-bkg node-' + db.type2Str(node.type))
     .attr('r', node.width / 2);
-  // .attr('width', node.width);
 };
-const roundedRectBkg = function (elem, node, section, conf) {
-  const r = elem
+const roundedRectBkg = function (elem, node) {
+  elem
     .append('rect')
     .attr('id', 'node-' + node.id)
     .attr('class', 'node-bkg node-' + db.type2Str(node.type))
@@ -183,7 +178,6 @@ export const drawNode = function (elem, node, section, conf) {
     .append('text')
     .text(node.descr)
     .attr('dy', '1em')
-    // .attr('dy', '0')
     .attr('alignment-baseline', 'middle')
     .attr('dominant-baseline', 'middle')
     .attr('text-anchor', 'middle')
@@ -195,18 +189,12 @@ export const drawNode = function (elem, node, section, conf) {
   if (node.icon) {
     if (node.type === db.nodeType.CIRCLE) {
       node.height += 50;
-      const orgWidth = node.width;
       node.width += 50;
-      // node.width = Math.max(orgWidth, 100);
-      const widthDiff = Math.abs(node.width - orgWidth);
       const icon = nodeElem
         .append('foreignObject')
         .attr('height', '50px')
         .attr('width', node.width)
         .attr('style', 'text-align: center;');
-      // .attr('x', 0)
-      // .attr('y', 0)
-      // .attr('class', 'node-icon ' + node.icon);
       icon
         .append('div')
         .attr('class', 'icon-container')
@@ -226,9 +214,7 @@ export const drawNode = function (elem, node, section, conf) {
         .attr('width', '60px')
         .attr('height', node.height)
         .attr('style', 'text-align: center;margin-top:' + heightDiff / 2 + 'px;');
-      // .attr('x', 0)
-      // .attr('y', 0)
-      // .attr('class', 'node-icon ' + node.icon);
+
       icon
         .append('div')
         .attr('class', 'icon-container')
@@ -258,15 +244,11 @@ export const drawNode = function (elem, node, section, conf) {
       circleBkg(bkgElem, node, section, conf);
       break;
     case db.nodeType.CLOUD:
-      // bkgElem.attr('transform', 'translate(' + node.width / 2 + ', ' + +node.height / 2 + ')');
       cloudBkg(bkgElem, node, section, conf);
       break;
     case db.nodeType.BANG:
-      // bkgElem.attr('transform', 'translate(' + node.width / 2 + ', ' + +node.height / 2 + ')');
       bangBkg(bkgElem, node, section, conf);
       break;
-    default:
-    // defaultBkg(bkgElem, node, section, conf);
   }
 
   // Position the node to its coordinate
@@ -277,17 +259,7 @@ export const drawNode = function (elem, node, section, conf) {
   return node.height;
 };
 
-export const drawEdge = function drawEdge(edgesElem, mindmap, parent, depth, section, conf) {
-  // edgesElem
-  //   .append('line')
-  //   .attr('x1', parent.x + parent.width / 2)
-  //   .attr('y1', parent.y + parent.height / 2)
-  //   .attr('x2', mindmap.x + mindmap.width / 2)
-  //   .attr('y2', mindmap.y + mindmap.height / 2)
-  //   .attr('class', 'edge section-edge-' + section + ' edge-depth-' + depth);
-
-  //<path d="M100,250 Q250,100 400,250 T700,250" />
-
+export const drawEdge = function drawEdge(edgesElem, mindmap, parent, depth, section) {
   const sx = parent.x + parent.width / 2;
   const sy = parent.y + parent.height / 2;
   const ex = mindmap.x + mindmap.width / 2;
@@ -308,7 +280,7 @@ export const drawEdge = function drawEdge(edgesElem, mindmap, parent, depth, sec
     .attr('class', 'edge section-edge-' + section + ' edge-depth-' + depth);
 };
 
-export const positionNode = function (node, conf) {
+export const positionNode = function (node) {
   const nodeElem = db.getElementById(node.id);
 
   const x = node.x || 0;

src/mermaid.ts

@@ -95,9 +95,11 @@ const initThrowsErrors = function (
   const idGenerator = new utils.initIdGenerator(conf.deterministicIds, conf.deterministicIDSeed);
 
   let txt;
+  const errors = [];
 
   // element is the current div with mermaid class
   for (const element of Array.from(nodesToProcess)) {
+    log.info('Rendering diagram: ' + element.id);
     /*! Check if previously processed */
     if (element.getAttribute('data-processed')) {
       continue;
@@ -135,10 +137,17 @@ const initThrowsErrors = function (
     } catch (error) {
       log.warn('Catching Error (bootstrap)', error);
       // @ts-ignore: TODO Fix ts errors
-      // TODO: We should be throwing an error object.
-      throw { error, message: error.str };
+      const mermaidError = { error, str: error.str, hash: error.hash, message: error.str };
+      if (typeof mermaid.parseError === 'function') {
+        mermaid.parseError(mermaidError);
+      }
+      errors.push(mermaidError);
     }
   }
+  if (errors.length > 0) {
+    // TODO: We should be throwing an error object.
+    throw errors[0];
+  }
 };
 
 const initialize = function (config: MermaidConfig) {

src/mermaidAPI.ts

@@ -26,7 +26,7 @@ import flowDb from './diagrams/flowchart/flowDb';
 import flowRenderer from './diagrams/flowchart/flowRenderer';
 import ganttDb from './diagrams/gantt/ganttDb';
 import Diagram from './Diagram';
-import errorRenderer from './errorRenderer';
+import errorRenderer from './diagrams/error/errorRenderer';
 import { attachFunctions } from './interactionDb';
 import { log, setLogLevel } from './logger';
 import getStyles from './styles';
@@ -124,6 +124,10 @@ const render = function (
   cb: (svgCode: string, bindFunctions?: (element: Element) => void) => void,
   container?: Element
 ): void {
+  if (!hasLoadedDiagrams) {
+    addDiagrams();
+    hasLoadedDiagrams = true;
+  }
   configApi.reset();
   text = text.replace(/\r\n?/g, '\n'); // parser problems on CRLF ignore all CR and leave LF;;
   const graphInit = utils.detectInit(text);
@@ -228,7 +232,14 @@ const render = function (
   text = encodeEntities(text);
 
   // Important that we do not create the diagram until after the directives have been included
-  const diag = new Diagram(text);
+  let diag;
+  let parseEncounteredException;
+  try {
+    diag = new Diagram(text);
+  } catch (error) {
+    diag = new Diagram('error');
+    parseEncounteredException = error;
+  }
   // Get the tmp element containing the the svg
   const element = root.select('#d' + id).node();
   const graphType = diag.type;
@@ -371,6 +382,10 @@ const render = function (
     node.remove();
   }
 
+  if (parseEncounteredException) {
+    throw parseEncounteredException;
+  }
+
   return svgCode;
 };
 

src/styles.ts

@@ -1,5 +1,6 @@
 import classDiagram from './diagrams/class/styles';
 import er from './diagrams/er/styles';
+import error from './diagrams/error/styles';
 import flowchart from './diagrams/flowchart/styles';
 import gantt from './diagrams/gantt/styles';
 // import gitGraph from './diagrams/git/styles';
@@ -28,6 +29,7 @@ const themes: Record<string, any> = {
   info,
   pie,
   er,
+  error,
   journey,
   requirement,
   c4,