Also fix for error handling when setting mermaid.parseError

src/diagrams/flowchart/flowRenderer-v2.js

@@ -285,11 +285,11 @@ export const draw = function(text, id) {
   parser.yy = flowDb;
 
   // Parse the graph definition
-  try {
+  // try {
     parser.parse(text);
-  } catch (err) {
-    logger.debug('Parsing failed');
-  }
+  // } catch (err) {
+    // logger.debug('Parsing failed');
+  // }
 
   // Fetch the default direction, use TD if none was found
   let dir = flowDb.getDirection();

src/diagrams/flowchart/flowRenderer.js

@@ -247,12 +247,16 @@ export const addEdges = function(edges, g) {
 export const getClasses = function(text) {
   logger.info('Extracting classes');
   flowDb.clear();
-  const parser = flow.parser;
-  parser.yy = flowDb;
+  try {
+    const parser = flow.parser;
+    parser.yy = flowDb;
 
-  // Parse the graph definition
-  parser.parse(text);
-  return flowDb.getClasses();
+    // Parse the graph definition
+    parser.parse(text);
+    return flowDb.getClasses();
+  } catch (e) {
+    return;
+  }
 };
 
 /**
@@ -267,11 +271,11 @@ export const draw = function(text, id) {
   parser.yy = flowDb;
 
   // Parse the graph definition
-  try {
+  // try {
     parser.parse(text);
-  } catch (err) {
-    logger.debug('Parsing failed');
-  }
+  // } catch (err) {
+    // logger.debug('Parsing failed');
+  // }
 
   // Fetch the default direction, use TD if none was found
   let dir = flowDb.getDirection();

src/errorRenderer.js

@@ -0,0 +1,89 @@
+/**
+ * Created by knut on 14-12-11.
+ */
+import { select } from 'd3';
+import { logger } from './logger';
+
+const conf = {};
+export const setConf = function(cnf) {
+  const keys = Object.keys(cnf);
+
+  keys.forEach(function(key) {
+    conf[key] = cnf[key];
+  });
+};
+
+/**
+ * Draws a an info picture in the tag with id: id based on the graph definition in text.
+ * @param text
+ * @param id
+ */
+export const draw = (id,ver) => {
+  try {
+    logger.debug('Renering svg for syntax error\n');
+
+    const svg = select('#' + id);
+
+    const g = svg.append('g');
+
+    g
+      .append('path')
+      .attr('class', 'error-icon')
+      .attr('d', 'm411.313,123.313c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32-9.375,9.375-20.688-20.688c-12.484-12.5-32.766-12.5-45.25,0l-16,16c-1.261,1.261-2.304,2.648-3.31,4.051-21.739-8.561-45.324-13.426-70.065-13.426-105.867,0-192,86.133-192,192s86.133,192 192,192 192-86.133 192-192c0-24.741-4.864-48.327-13.426-70.065 1.402-1.007 2.79-2.049 4.051-3.31l16-16c12.5-12.492 12.5-32.758 0-45.25l-20.688-20.688 9.375-9.375 32.001-31.999zm-219.313,100.687c-52.938,0-96,43.063-96,96 0,8.836-7.164,16-16,16s-16-7.164-16-16c0-70.578 57.422-128 128-128 8.836,0 16,7.164 16,16s-7.164,16-16,16z');
+
+    g
+      .append('path')
+      .attr('class', 'error-icon')
+      .attr('d', 'm459.02,148.98c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l16,16c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16.001-16z');
+
+    g
+      .append('path')
+      .attr('class', 'error-icon')
+      .attr('d', 'm340.395,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16-16c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l15.999,16z');
+
+    g
+      .append('path')
+      .attr('class', 'error-icon')
+      .attr('d', 'm400,64c8.844,0 16-7.164 16-16v-32c0-8.836-7.156-16-16-16-8.844,0-16,7.164-16,16v32c0,8.836 7.156,16 16,16z');
+
+    g
+      .append('path')
+      .attr('class', 'error-icon')
+      .attr('d', 'm496,96.586h-32c-8.844,0-16,7.164-16,16 0,8.836 7.156,16 16,16h32c8.844,0 16-7.164 16-16 0-8.836-7.156-16-16-16z');
+
+    g
+      .append('path')
+      .attr('class', 'error-icon')
+      .attr('d', 'm436.98,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688l32-32c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32c-6.251,6.25-6.251,16.375-0.001,22.625z')
+      ;
+
+    g
+      .append('text') // text label for the x axis
+      .attr('class', 'error-text')
+      .attr('x', 1240)
+      .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('y', 400)
+      .attr('font-size', '100px')
+      .style('text-anchor', 'middle')
+      .text('mermaid version '+ver);
+
+    svg.attr('height', 100);
+    svg.attr('width', 400);
+    svg.attr('viewBox', '768 0 512 512');
+  } catch (e) {
+    logger.error('Error while rendering info diagram');
+    logger.error(e.message);
+  }
+};
+
+export default {
+  setConf,
+  draw
+};

src/mermaid.js

@@ -98,6 +98,7 @@ const init = function() {
       .trim()
       .replace(/<br\s*\/?>/gi, '<br/>');
 
+    try {
     mermaidAPI.render(
       id,
       txt,
@@ -110,6 +111,13 @@ const init = function() {
       },
       element
     );
+    } catch (e) {
+      logger.warn('Syntax Error rendering');
+      logger.warn(e);
+      if (this.parseError) {
+        this.parseError(e);
+      }
+    }
   }
 };
 

src/mermaidAPI.js

@@ -37,6 +37,7 @@ import gitGraphRenderer from './diagrams/git/gitGraphRenderer';
 import gitGraphParser from './diagrams/git/parser/gitGraph';
 import gitGraphAst from './diagrams/git/gitGraphAst';
 import infoRenderer from './diagrams/info/infoRenderer';
+import errorRenderer from './errorRenderer';
 import infoParser from './diagrams/info/parser/info';
 import infoDb from './diagrams/info/infoDb';
 import pieRenderer from './diagrams/pie/pieRenderer';
@@ -667,7 +668,7 @@ export const decodeEntities = function(text) {
  * provided a hidden div will be inserted in the body of the page instead. The element will be removed when rendering is
  * completed.
  */
-const render = function(id, _txt, cb, container) {
+const render = function (id, _txt, cb, container) {
   // Check the maximum allowed text size
   let txt = _txt;
   if (_txt.length > config.maxTextSize) {
@@ -762,73 +763,79 @@ const render = function(id, _txt, cb, container) {
   }`;
   svg.insertBefore(style2, firstChild);
 
-  switch (graphType) {
-    case 'git':
-      config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-      gitGraphRenderer.setConf(config.git);
-      gitGraphRenderer.draw(txt, id, false);
-      break;
-    case 'flowchart':
-      config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-      flowRenderer.setConf(config.flowchart);
-      flowRenderer.draw(txt, id, false);
-      break;
-    case 'flowchart-v2':
-      config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-      flowRendererV2.setConf(config.flowchart);
-      flowRendererV2.draw(txt, id, false);
-      break;
-    case 'sequence':
-      config.sequence.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-      if (config.sequenceDiagram) {
-        // backwards compatibility
-        sequenceRenderer.setConf(Object.assign(config.sequence, config.sequenceDiagram));
-        console.error(
-          '`mermaid config.sequenceDiagram` has been renamed to `config.sequence`. Please update your mermaid config.'
-        );
-      } else {
-        sequenceRenderer.setConf(config.sequence);
-      }
-      sequenceRenderer.draw(txt, id);
-      break;
-    case 'gantt':
-      config.gantt.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-      ganttRenderer.setConf(config.gantt);
-      ganttRenderer.draw(txt, id);
-      break;
-    case 'class':
-      config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-      classRenderer.setConf(config.class);
-      classRenderer.draw(txt, id);
-      break;
-    case 'state':
-      // config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-      stateRenderer.setConf(config.state);
-      stateRenderer.draw(txt, id);
-      break;
-    case 'stateDiagram':
-      // config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-      stateRendererV2.setConf(config.state);
-      stateRendererV2.draw(txt, id);
-      break;
-    case 'info':
-      config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-      infoRenderer.setConf(config.class);
-      infoRenderer.draw(txt, id, pkg.version);
-      break;
-    case 'pie':
-      config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-      pieRenderer.setConf(config.class);
-      pieRenderer.draw(txt, id, pkg.version);
-      break;
-    case 'er':
-      erRenderer.setConf(config.er);
-      erRenderer.draw(txt, id, pkg.version);
-      break;
-    case 'journey':
-      journeyRenderer.setConf(config.journey);
-      journeyRenderer.draw(txt, id, pkg.version);
-      break;
+  try {
+    switch (graphType) {
+      case 'git':
+        config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
+        gitGraphRenderer.setConf(config.git);
+        gitGraphRenderer.draw(txt, id, false);
+        break;
+      case 'flowchart':
+        config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
+        flowRenderer.setConf(config.flowchart);
+        flowRenderer.draw(txt, id, false);
+        break;
+      case 'flowchart-v2':
+        config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
+        flowRendererV2.setConf(config.flowchart);
+        flowRendererV2.draw(txt, id, false);
+        break;
+      case 'sequence':
+        config.sequence.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
+        if (config.sequenceDiagram) {
+          // backwards compatibility
+          sequenceRenderer.setConf(Object.assign(config.sequence, config.sequenceDiagram));
+          console.error(
+            '`mermaid config.sequenceDiagram` has been renamed to `config.sequence`. Please update your mermaid config.'
+          );
+        } else {
+          sequenceRenderer.setConf(config.sequence);
+        }
+        sequenceRenderer.draw(txt, id);
+        break;
+      case 'gantt':
+        config.gantt.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
+        ganttRenderer.setConf(config.gantt);
+        ganttRenderer.draw(txt, id);
+        break;
+      case 'class':
+        config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
+        classRenderer.setConf(config.class);
+        classRenderer.draw(txt, id);
+        break;
+      case 'state':
+        // config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
+        stateRenderer.setConf(config.state);
+        stateRenderer.draw(txt, id);
+        break;
+      case 'stateDiagram':
+        // config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
+        stateRendererV2.setConf(config.state);
+        stateRendererV2.draw(txt, id);
+        break;
+      case 'info':
+        config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
+        infoRenderer.setConf(config.class);
+        infoRenderer.draw(txt, id, pkg.version);
+        break;
+      case 'pie':
+        config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
+        pieRenderer.setConf(config.class);
+        pieRenderer.draw(txt, id, pkg.version);
+        break;
+      case 'er':
+        erRenderer.setConf(config.er);
+        erRenderer.draw(txt, id, pkg.version);
+        break;
+      case 'journey':
+        journeyRenderer.setConf(config.journey);
+        journeyRenderer.draw(txt, id, pkg.version);
+        break;
+    }
+  } catch (e) {
+    errorRenderer.setConf(config.class);
+    errorRenderer.draw(id, pkg.version);
+    throw (e)
   }
 
   select(`[id="${id}"]`)

src/themes/dark/index.scss

@@ -59,4 +59,7 @@ $todayLineColor: #DB5757;
 /* state colors */
 $labelColor: black;
 
+$errorBkgColor: #a44141;
+$errorTextColor: #ddd;
+
 @import '../mermaid';

src/themes/default/index.scss

@@ -57,4 +57,7 @@ $todayLineColor: red;
 /* state colors */
 $labelColor: black;
 
+$errorBkgColor: #552222;
+$errorTextColor: #552222;
+
 @import '../mermaid';

src/themes/forest/index.scss

@@ -58,4 +58,7 @@ $todayLineColor: red;
 /* state colors */
 $labelColor: black;
 
+$errorBkgColor: #552222;
+$errorTextColor: #552222;
+
 @import '../mermaid';

src/themes/mermaid.scss

@@ -17,3 +17,10 @@
   // --mermaid-alt-font-family: '"Lucida Console", Monaco, monospace';
 }
 
+.error-icon {
+  fill: $errorBkgColor;
+}
+.error-text {
+  fill: $errorTextColor;
+  stroke: $errorTextColor;
+}

src/themes/neutral/index.scss

@@ -62,4 +62,7 @@ $todayLineColor: $critBkgColor;
 /* state colors */
 $labelColor: black;
 
+$errorBkgColor: #552222;
+$errorTextColor: #552222;
+
 @import '../mermaid';