Merge pull request #22 from mermaid-js/develop

merge from base fork
2020-06-08 18:42:10 -07:00 · 2020-06-08 18:42:10 -07:00 · 6298a7a357
parent 97b8684e1a 7c4bff567b
commit 6298a7a357
33 changed files with 89339 additions and 182 deletions
--- a/.gitignore
+++ b/.gitignore
@ -4,9 +4,6 @@ node_modules/
 coverage/
 .idea/

-dist/*.js
-dist/*.map
-
 yarn-error.log
 .npmrc
 token
--- a/cypress/platform/current.html
+++ b/cypress/platform/current.html
@ -4,10 +4,12 @@
      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
      rel="stylesheet"
    />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
    <style>
      body {
-        background: rgb(221, 208, 208);
+        /* background: rgb(221, 208, 208); */
+        background:#333;
        font-family: 'Arial';
        }
      h1 { color: white;}
@ -19,16 +21,8 @@
  <body>
    <h1>info below</h1>
      <div class="mermaid" style="width: 100%; height: 20%;">
-      stateDiagram-v2
-
-      [*] --> S1
-      state "Some long name" as S1: The
-      </div>
-      <div class="mermaid" style="width: 100%; height: 20%;">
-      stateDiagram-v2
-
-      [*] --> S1
-      state "Some long name" as S1: The description\nwith multiple lines
+        flowchart LR
+          user1[fa:fa-user User 1] -- edit -> folder
      </div>
      <div class="mermaid2" style="width: 50%; height: 20%;">
 flowchart LR
@ -59,11 +53,6 @@ graph LR
        State4 --> [*]
      }
      </div>
-      <div class="mermaid2 mermaid-apa" style="width: 100%; height: 20%;">
-        stateDiagram
-        [*] --> Still
-        Still --> [*]
-      </div>
      <div class="mermaid2" style="width: 100%; height: 100%;">
        stateDiagram-v2
        [*] --> Still
@ -250,12 +239,15 @@ stateDiagram-v2
 </div>
  <script src="./mermaid.js"></script>
    <script>
+      mermaid.parseError = function (err, hash) {
+          // console.error('Mermaid error: ', err);
+        };
      mermaid.initialize({
-        // theme: 'dark',
+        theme: 'dark',
        // arrowMarkerAbsolute: true,
        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
        logLevel: 0,
-        flowchart: { curve: 'linear', "htmlLabels": true },
+        flowchart: { curve: 'linear', "htmlLabels": false },
        // gantt: { axisFormat: '%m/%d/%Y' },
        sequence: { actorMargin: 50, showSequenceNumbers: true },
        // sequenceDiagram: { actorMargin: 300 } // deprecated
--- a/dist/mermaid.core.js
+++ b/dist/mermaid.core.js
--- a/dist/mermaid.core.js.map
+++ b/dist/mermaid.core.js.map
--- a/dist/mermaid.js
+++ b/dist/mermaid.js
--- a/dist/mermaid.js.map
+++ b/dist/mermaid.js.map
--- a/dist/mermaid.min.js
+++ b/dist/mermaid.min.js
--- a/dist/mermaid.min.js.map
+++ b/dist/mermaid.min.js.map
--- a/dist_dev/mermaid.core.js
+++ b/dist_dev/mermaid.core.js
--- a/dist_dev/mermaid.core.js.map
+++ b/dist_dev/mermaid.core.js.map
--- a/dist_dev/mermaid.js
+++ b/dist_dev/mermaid.js
--- a/dist_dev/mermaid.js.map
+++ b/dist_dev/mermaid.js.map
--- a/dist_dev/mermaid.min.js
+++ b/dist_dev/mermaid.min.js
--- a/dist_dev/mermaid.min.js.map
+++ b/dist_dev/mermaid.min.js.map
--- a/docs/flowchart.md
+++ b/docs/flowchart.md
@ -65,7 +65,7 @@ graph LR
    id1[This is the text in the box]
 ```
 ```mermaid
-flowchart LR
+graph LR
    id1[This is the text in the box]
 ```

@ -73,66 +73,66 @@ flowchart LR
 ### A node with round edges

 ```
-flowchart LR
+graph LR
    id1(This is the text in the box)
 ```
 ```mermaid
-flowchart LR
+graph LR
    id1(This is the text in the box)
 ```

 ### A stadium-shaped node

 ```
-flowchart LR
+graph LR
    id1([This is the text in the box])
 ```
 ```mermaid
-flowchart LR
+graph LR
    id1([This is the text in the box])
 ```

 ### A node in a subroutine shape

 ```
-flowchart LR
+graph LR
    id1[[This is the text in the box]]
 ```
 ```mermaid
-flowchart LR
+graph LR
    id1[[This is the text in the box]]
 ```

 ### A node in a cylindrical shape

 ```
-flowchart LR
+graph LR
    id1[(Database)]
 ```
 ```mermaid
-flowchart LR
+graph LR
    id1[(Database)]
 ```

 ### A node in the form of a circle

 ```
-flowchart LR
+graph LR
    id1((This is the text in the circle))
 ```
 ```mermaid
-flowchart LR
+graph LR
    id1((This is the text in the circle))
 ```

 ### A node in an asymetric shape

 ```
-flowchart LR
+graph LR
    id1>This is the text in the box]
 ```
 ```mermaid
-flowchart LR
+graph LR
    id1>This is the text in the box]
 ```
 Currently only the shape above is possible and not its mirror. *This might change with future releases.*
@ -140,22 +140,22 @@ Currently only the shape above is possible and not its mirror. *This might chang
 ### A node (rhombus)

 ```
-flowchart LR
+graph LR
    id1{This is the text in the box}
 ```
 ```mermaid
-flowchart LR
+graph LR
    id1{This is the text in the box}
 ```

 ### A hexagon node

 ```
-flowchart LR
+graph LR
    id1{{This is the text in the box}}
 ```
 ```mermaid
-flowchart LR
+graph LR
    id1{{This is the text in the box}}
 ```

@ -209,22 +209,22 @@ Nodes can be connected with links/edges. It is possible to have different types
 ### A link with arrow head

 ```
-flowchart LR
+graph LR
    A-->B
 ```
 ```mermaid
-flowchart LR
+graph LR
    A-->B
 ```

 ### An open link

 ```
-flowchart LR
+graph LR
    A --- B
 ```
 ```mermaid
-flowchart LR
+graph LR
    A --- B
 ```

@ -235,84 +235,84 @@ graph LR
    A-- This is the text! ---B
 ```
 ```mermaid
-flowchart LR
+graph LR
    A-- This is the text ---B
 ```

 or

 ```
-flowchart LR
+graph LR
    A---|This is the text|B
 ```
 ```mermaid
-flowchart LR
+graph LR
    A---|This is the text|B
 ```

 ### A link with arrow head and text

 ```
-flowchart LR
+graph LR
    A-->|text|B
 ```
 ```mermaid
-flowchart LR
+graph LR
    A-->|text|B
 ```

 or

 ```
-flowchart LR
+graph LR
    A-- text -->B
 ```
 ```mermaid
-flowchart LR
+graph LR
    A-- text -->B
 ```

 ### Dotted link

 ```
-flowchart LR;
+graph LR;
   A-.->B;
 ```
 ```mermaid
-flowchart LR;
+graph LR;
   A-.->B;
 ```

 ### Dotted link with text

 ```
-flowchart LR
+graph LR
   A-. text .-> B
 ```
 ```mermaid
-flowchart LR
+graph LR
   A-. text .-> B
 ```

 ### Thick link

 ```
-flowchart LR
+graph LR
   A ==> B
 ```
 ```mermaid
-flowchart LR
+graph LR
   A ==> B
 ```

 ### Thick link with text

 ```
-flowchart LR
+graph LR
   A == text ==> B
 ```
 ```mermaid
-flowchart LR
+graph LR
   A == text ==> B
 ```

@ -320,21 +320,21 @@ flowchart LR

 It is possible declare many links in the same line as per below:
 ```
-flowchart LR
+graph LR
   A -- text --> B -- text2 --> C
 ```
 ```mermaid
-flowchart LR
+graph LR
   A -- text --> B -- text2 --> C
 ```

 It is also possible to declare multiple nodes links in the same line as per below:
 ```
-flowchart LR
+graph LR
   a --> b & c--> d
 ```
 ```mermaid
-flowchart LR
+graph LR
   a --> b & c--> d
 ```

@ -399,11 +399,11 @@ flowchart LR
 It is possible to put text within quotes in order to render more troublesome characters. As in the example below:

 ```
-flowchart LR
+graph LR
    id1["This is the (text) in the box"]
 ```
 ```mermaid
-flowchart LR
+graph LR
    id1["This is the (text) in the box"]
 ```

@ -412,11 +412,11 @@ flowchart LR
 It is possible to escape characters using the syntax examplified here.

 ```
-    flowchart LR
+    graph LR
        A["A double quote:#quot;"] -->B["A dec char:#9829;"]
 ```
 ```mermaid
-    flowchart LR
+    graph LR
        A["A double quote:#quot;"] -->B["A dec char:#9829;"]
 ```

@ -534,7 +534,7 @@ Examples of tooltip usage below:
 ```

 ```
-flowchart LR;
+graph LR;
    A-->B;
    click A callback "Tooltip for a callback"
    click B "http://www.github.com" "This is a tooltip for a link"
--- a/docs/index.html
+++ b/docs/index.html
@ -7,8 +7,8 @@
  <meta name="description" content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
-  <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@8.5.0/dist/mermaid.min.js"></script> -->
-  <script src="http://localhost:9000/mermaid.js"></script>
+  <script src="//cdn.jsdelivr.net/npm/mermaid@8.5.2/dist/mermaid.min.js"></script>
+  <!-- <script src="http://localhost:9000/mermaid.js"></script> -->
  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
@ -70,4 +70,4 @@
  <scrpt src="//unpkg.com/docsify/lib/plugins/ga.min.js"></scrpt>
 </body>
 </html>
-<!--  -->
+<!--  -->
--- a/img/bomb-svgrepo-com.svg
+++ b/img/bomb-svgrepo-com.svg
@ -0,0 +1,12 @@
+<?xml version='1.0' encoding='iso-8859-1'?>
+<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 512 512">
+  <g>
+    <path 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"/>
+    <path 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"/>
+    <path 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"/>
+    <path 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"/>
+    <path 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"/>
+    <path 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>
+</svg>
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "mermaid",
-  "version": "8.5.0",
+  "version": "8.5.2",
  "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
  "main": "dist/mermaid.core.js",
  "keywords": [
@ -13,11 +13,13 @@
    "git graph"
  ],
  "scripts": {
-    "build": "webpack --progress --colors -p",
+    "build:development": "webpack --progress --colors",
+    "build:production": "yarn build:development -p --config webpack.config.prod.babel.js",
+    "build": "yarn build:development && yarn build:production",
    "postbuild": "documentation build src/mermaidAPI.js --shallow -f md --markdown-toc false -o docs/mermaidAPI.md",
    "build:watch": "yarn build --watch",
    "minify": "minify ./dist/mermaid.js > ./dist/mermaid.min.js",
-    "release": "yarn build -p --config webpack.config.prod.babel.js",
+    "release": "yarn build",
    "lint": "eslint src",
    "e2e:depr": "yarn lint && jest e2e --config e2e/jest.config.js",
    "cypress": "percy exec -- cypress run",
@ -26,7 +28,7 @@
    "dev": "webpack-dev-server --config webpack.config.e2e.js",
    "test": "yarn lint && jest src/.*",
    "test:watch": "jest --watch src",
-    "prepublishOnly": "yarn build && yarn release && yarn test && yarn e2e",
+    "prepublishOnly": "yarn build && yarn test && yarn e2e",
    "prepush": "yarn test",
    "prepare": "yarn build"
  },
--- a/src/dagre-wrapper/edges.js
+++ b/src/dagre-wrapper/edges.js
@ -107,8 +107,24 @@ const intersection = (node, outsidePoint, insidePoint) => {
  }
 };

-export const insertEdge = function(elem, edge, clusterDb, diagramType) {
+//(edgePaths, e, edge, clusterDb, diagramtype, graph)
+export const insertEdge = function(elem, e, edge, clusterDb, diagramType, graph) {
  let points = edge.points;
+
+  const tail = graph.node(e.v);
+  var head = graph.node(e.w);
+
+  if (head.intersect && tail.intersect) {
+    points = points.slice(1, edge.points.length - 1);
+    points.unshift(tail.intersect(points[0]));
+    logger.info(
+      'Last point',
+      points[points.length - 1],
+      head,
+      head.intersect(points[points.length - 1])
+    );
+    points.push(head.intersect(points[points.length - 1]));
+  }
  if (edge.toCluster) {
    logger.trace('edge', edge);
    logger.trace('to cluster', clusterDb[edge.toCluster]);
--- a/src/dagre-wrapper/index.js
+++ b/src/dagre-wrapper/index.js
@ -93,8 +93,8 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
  // Move the nodes to the correct place
  graph.nodes().forEach(function(v) {
    const node = graph.node(v);
-    // log.trace('Position ' + v + ': ' + JSON.stringify(graph.node(v)));
-    log.trace(
+    log.trace('Position ' + v + ': ' + JSON.stringify(graph.node(v)));
+    log.info(
      'Position ' + v + ': (' + node.x,
      ',' + node.y,
      ') width: ',
@ -124,7 +124,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
    const edge = graph.edge(e);
    log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge);

-    insertEdge(edgePaths, edge, clusterDb, diagramtype);
+    insertEdge(edgePaths, e, edge, clusterDb, diagramtype, graph);
    positionEdgeLabel(edge);
  });

--- a/src/dagre-wrapper/intersect/intersect-node.js
+++ b/src/dagre-wrapper/intersect/intersect-node.js
@ -1,5 +1,6 @@
 module.exports = intersectNode;

 function intersectNode(node, point) {
+  console.info('Intersect Node');
  return node.intersect(point);
 }
--- a/src/dagre-wrapper/nodes.js
+++ b/src/dagre-wrapper/nodes.js
@ -11,7 +11,7 @@ const question = (parent, node) => {

  const w = bbox.width + node.padding;
  const h = bbox.height + node.padding;
-  const s = (w + h) * 0.9;
+  const s = w + h;
  const points = [
    { x: s / 2, y: 0 },
    { x: s, y: -s / 2 },
@ -19,10 +19,13 @@ const question = (parent, node) => {
    { x: 0, y: -s / 2 }
  ];

+  logger.info('Question main (Circle)');
+
  const questionElem = insertPolygonShape(shapeSvg, s, s, points);
  updateNodeBounds(node, questionElem);
  node.intersect = function(point) {
-    return intersect.polugon(node, points, point);
+    logger.warn('Intersect called');
+    return intersect.polygon(node, points, point);
  };

  return shapeSvg;
@ -411,10 +414,13 @@ const circle = (parent, node) => {
    .attr('width', bbox.width + node.padding)
    .attr('height', bbox.height + node.padding);

+  logger.info('Circle main');
+
  updateNodeBounds(node, circle);

  node.intersect = function(point) {
-    return intersect.circle(node, point);
+    logger.info('Circle intersect', node, bbox.width / 2 + halfPadding, point);
+    return intersect.circle(node, bbox.width / 2 + halfPadding, point);
  };

  return shapeSvg;
@ -464,7 +470,7 @@ const start = (parent, node) => {
  updateNodeBounds(node, circle);

  node.intersect = function(point) {
-    return intersect.circle(node, point);
+    return intersect.circle(node, 7, point);
  };

  return shapeSvg;
@ -527,7 +533,7 @@ const end = (parent, node) => {
  updateNodeBounds(node, circle);

  node.intersect = function(point) {
-    return intersect.circle(node, point);
+    return intersect.circle(node, 7, point);
  };

  return shapeSvg;
--- a/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/src/diagrams/flowchart/flowRenderer-v2.js
@ -268,8 +268,13 @@ export const getClasses = function(text) {
  const parser = flow.parser;
  parser.yy = flowDb;

-  // Parse the graph definition
-  parser.parse(text);
+  try {
+    // Parse the graph definition
+    parser.parse(text);
+  } catch (e) {
+    return;
+  }
+
  return flowDb.getClasses();
 };

@ -278,6 +283,7 @@ export const getClasses = function(text) {
 * @param text
 * @param id
 */
+
 export const draw = function(text, id) {
  logger.info('Drawing flowchart');
  flowDb.clear();
@ -285,11 +291,11 @@ export const draw = function(text, id) {
  parser.yy = flowDb;

  // Parse the graph definition
-  try {
-    parser.parse(text);
-  } catch (err) {
-    logger.debug('Parsing failed');
-  }
+  // try {
+  parser.parse(text);
+  // } catch (err) {
+  // logger.debug('Parsing failed');
+  // }

  // Fetch the default direction, use TD if none was found
  let dir = flowDb.getDirection();
--- a/src/diagrams/flowchart/flowRenderer.js
+++ b/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 {
-    parser.parse(text);
-  } catch (err) {
-    logger.debug('Parsing failed');
-  }
+  // try {
+  parser.parse(text);
+  // } catch (err) {
+  // logger.debug('Parsing failed');
+  // }

  // Fetch the default direction, use TD if none was found
  let dir = flowDb.getDirection();
--- a/src/errorRenderer.js
+++ b/src/errorRenderer.js
@ -0,0 +1,98 @@
+/**
+ * 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
+};
--- a/src/mermaid.js
+++ b/src/mermaid.js
@ -98,18 +98,26 @@ const init = function() {
      .trim()
      .replace(/<br\s*\/?>/gi, '<br/>');

-    mermaidAPI.render(
-      id,
-      txt,
-      (svgCode, bindFunctions) => {
-        element.innerHTML = svgCode;
-        if (typeof callback !== 'undefined') {
-          callback(id);
-        }
-        if (bindFunctions) bindFunctions(element);
-      },
-      element
-    );
+    try {
+      mermaidAPI.render(
+        id,
+        txt,
+        (svgCode, bindFunctions) => {
+          element.innerHTML = svgCode;
+          if (typeof callback !== 'undefined') {
+            callback(id);
+          }
+          if (bindFunctions) bindFunctions(element);
+        },
+        element
+      );
+    } catch (e) {
+      logger.warn('Syntax Error rendering');
+      logger.warn(e);
+      if (this.parseError) {
+        this.parseError(e);
+      }
+    }
  }
 };

--- a/src/mermaidAPI.js
+++ b/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';
@ -551,7 +552,7 @@ function parse(text) {
      break;
    case 'flowchart-v2':
      flowDb.clear();
-      parser = flowRendererV2;
+      parser = flowParser;
      parser.parser.yy = flowDb;
      break;
    case 'sequence':
@ -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}"]`)
--- a/src/themes/dark/index.scss
+++ b/src/themes/dark/index.scss
@ -59,4 +59,7 @@ $todayLineColor: #DB5757;
 /* state colors */
 $labelColor: black;

+$errorBkgColor: #a44141;
+$errorTextColor: #ddd;
+
@import '../mermaid';
--- a/src/themes/default/index.scss
+++ b/src/themes/default/index.scss
@ -57,4 +57,7 @@ $todayLineColor: red;
 /* state colors */
 $labelColor: black;

+$errorBkgColor: #552222;
+$errorTextColor: #552222;
+
@import '../mermaid';
--- a/src/themes/forest/index.scss
+++ b/src/themes/forest/index.scss
@ -58,4 +58,7 @@ $todayLineColor: red;
 /* state colors */
 $labelColor: black;

+$errorBkgColor: #552222;
+$errorTextColor: #552222;
+
@import '../mermaid';
--- a/src/themes/mermaid.scss
+++ b/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;
+}
--- a/src/themes/neutral/index.scss
+++ b/src/themes/neutral/index.scss
@ -62,4 +62,7 @@ $todayLineColor: $critBkgColor;
 /* state colors */
 $labelColor: black;

+$errorBkgColor: #552222;
+$errorTextColor: #552222;
+
@import '../mermaid';
--- a/yarn.lock
+++ b/yarn.lock
@ -11079,9 +11079,9 @@ websocket-driver@>=0.5.1:
    websocket-extensions ">=0.1.1"

 websocket-extensions@>=0.1.1:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.3.tgz#5d2ff22977003ec687a4b87073dfbbac146ccf29"
-  integrity sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.4.tgz#7f8473bc839dfd87608adb95d7eb075211578a42"
+  integrity sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==

 whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3:
  version "1.0.5"