Merge pull request #3469 from mermaid-js/sidv/mergeRelease

Merge release 9.1.7

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/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/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,