Merge pull request #1326 from mermaid-js/feature/1295_generic_rendering_engine

Feature/1295 generic rendering engine
2025-01-14 06:43:25 +08:00 · 2020-03-30 21:14:20 +02:00 · 2020-03-30 21:14:20 +02:00 · 231c849451
commit 231c849451
parent 8fede48e7b a5af248715
42 changed files with 2297 additions and 1226 deletions
--- a/cypress/platform/current.html
+++ b/cypress/platform/current.html
@ -8,21 +8,171 @@
    <style>
      body {
        background: white;
-        font-family: 'Noto Sans SC', sans-serif;
+        font-family: 'Arial';
        }
      h1 { color: white;}
-      .arrowheadPath {fill: red;}
-
-      .edgePath .path {stroke: red;}
+      .mermaid2 {
+        display: none;
+      }
    </style>
  </head>
  <body>
    <h1>info below</h1>
-    <div style="display: flex;width: 100%; height: 100%">
-      <div class="mermaid" style="width: 100%; height: 100%">
+      <div class="mermaid2" style="width: 100%; height: 20%;">
        flowchart LR
-          A --> B
+        a --> b
+
+        subgraph id1 [Test]
+            a --apa--> c
+            b
+            c-->b
+            b-->H
+          end
+        G-->H
+        G-->c
      </div>
+      <div class="mermaid2" style="width: 50%; height: 20%;">
+        flowchart LR
+        subgraph id1 [Test]
+            b
+          end
+        a-->id1
+      </div>
+      <div class="mermaid2 mermaid-apa" style="width: 100%; height: 20%;">
+        stateDiagram-v2
+        [*] --> Still
+        [*] --> Moving
+        Still --> [*]
+        Moving --> [*]
+      </div>
+      <div class="mermaid2" style="width: 100%; height: 100%;">
+        stateDiagram-v2
+        [*] --> Still
+        Still --> [*]
+        Still --> Moving
+        Moving --> Still
+        Moving --> Crash
+        Crash --> [*]
+      </div>
+      <div class="mermaid" style="width: 100%; height: 100%;">
+        stateDiagram-v2
+        State1: The state with a note
+        note right of State1
+            Important information! You can write
+            notes.
+        end note
+        State1 --> State2
+        note left of State2 : This is the note to the left.
+    </div>
+      <div class="mermaid2" style="width: 100%; height: 100%;">
+        stateDiagram-v2
+      [*]-->TV
+
+      state TV {
+        [*] --> Off: Off to start with
+        On --> Off : Turn off
+        Off --> On : Turn on
+      }
+
+      TV--> Console
+
+      state Console {
+        [*] --> Off2: Off to start with
+        On2--> Off2 : Turn off
+        Off2 --> On2 : Turn on
+        On2-->Playing
+
+        state Playing {
+          Alive --> Dead
+          Dead-->Alive
+        }
+      }
+
+      </div>
+
+    <div style="display: flex;flex-direction:column;width: 100%; height: 100%">
+      <div class="mermaid2" style="width: 100%; height: 100%;">
+        stateDiagram-v2
+          state apa {
+            [*] --> Still
+            Still --> [*]
+
+            Still --> Moving
+            Moving --> Still
+            Moving --> Crash
+            Crash --> [*]
+          }
+
+      </div>
+      <div class="mermaid2" style="width: 100%; height: 100%">
+        flowchart TB
+        a --> b
+
+        subgraph id1 [Test]
+            a --apa--> c
+            b
+            c-->b
+            b-->H
+          end
+        G-->H
+        G-->id1
+        id1 --> I
+        I --> G
+      </div>
+      <div class="mermaid2" style="width: 100%; height: 100%">
+        flowchart RL
+        a --> b
+
+        subgraph id1 [Test]
+            a --apa--> c
+            b
+            c-->b
+            b-->H
+          end
+        G-->H
+        G-->id1
+        id1 --> I
+        I --> G
+      </div>
+      <div class="mermaid2" style="width: 100%; height: 100%">
+        flowchart RL
+
+        subgraph id1 [Test]
+          a
+        end
+        b-->id1
+      </div>
+      <div class="mermaid2" style="width: 100%; height: 100%">
+        flowchart RL
+
+        subgraph id1 [Test1]
+          a
+        end
+        subgraph id2 [Test2]
+          b
+        end
+        a --> id2
+        a --> b
+        b-->id1
+        id1 --> id2
+      </div>
+      new:
+      <div class="mermaid2" style="width: 100%; height: 100%">
+        flowchart LR
+          a <--> b
+          b o--o c
+          c x--x d
+          a21([In the box]) --> b2
+          b2((b2)) --o c2
+          c2(c2) --x d2 --> id1{{This is the text in the box}} --> A[(cylindrical<br />shape<br />test)]
+      </div>
+      old:
+      <div class="mermaid2" style="width: 100%; height: 100%">
+        graph LR
+          a((a)) --> b --> id1{{This is the text in the box}}
+          A[(cylindrical<br />shape<br />test)]
+      </div>
+
 </div>
  <script src="./mermaid.js"></script>
    <script>
@ -35,7 +185,8 @@
        // gantt: { axisFormat: '%m/%d/%Y' },
        sequence: { actorMargin: 50, showSequenceNumbers: true },
        // sequenceDiagram: { actorMargin: 300 } // deprecated
-        fontFamily: '"Noto Sans SC", sans-serif'
+        fontFamily: '"arial", sans-serif',
+        curve: 'linear',
      });
    </script>
    </script>
--- a/docs/flowchart.md
+++ b/docs/flowchart.md
@ -409,6 +409,22 @@ graph TB
    end
 ```

+ You can also set an excplicit id for the subgraph.
+
+```
+graph TB
+    c1-->a2
+    subgraph ide1 [one]
+    a1-->a2
+    end
+ ```
+```mermaid
+graph TB
+    c1-->a2
+    subgraph id1 [one]
+    a1-->a2
+    end
+ ```

 ## Interaction

--- a/src/dagre-wrapper/GraphObjects.md
+++ b/src/dagre-wrapper/GraphObjects.md
@ -0,0 +1,74 @@
+# Graph objects and their properties
+
+Explains the representation of various objects used to render the flow charts and what the properties mean. This ofc from the perspective of the dagre-wrapper.
+
+## node
+
+Sample object:
+```json
+{
+  "labelType":"svg",
+  "labelStyle":"",
+  "shape":"rect",
+  "label":{},
+  "labelText":"Test",
+  "rx":0,"ry":0,
+  "class":"default",
+  "style":"",
+  "id":"Test",
+  "type":"group",
+  "padding":15}
+```
+
+This is set by the renderer of the diagram and insert the data that the wrapper neds for rendering.
+
+|  property  |                                                 description                                                 |
+| ---------- | ----------------------------------------------------------------------------------------------------------- |
+| labelType  | If the label should be html label or a svg label. Should we continue to support both?                       |
+| labelStyle | Css styles for the label. Not currently used.                                                               |
+| shape      | The shape of the node. Currently on rect is suppoerted. This will change.                                   |
+| label      | ??                                                                                                          |
+| labelText  | The text on the label                                                                                       |
+| rx         | The corner radius - maybe part of the shape instead?                                                        |
+| ry         | The corner radius - maybe part of the shape instead?                                                        |
+| class      | Class to be set for the shape                                                                               |
+| style      | Css styles for the actual shape                                                                             |
+| id         | id of the shape                                                                                             |
+| type       | if set to group then this node indicates *a cluster*.                                                         |
+| padding    | Padding. Passed from the renderr as this might differ between react for different diagrams. Maybe obsolete. |
+
+
+# edge
+
+arrowType sets the type of arrows to use. The following arrow types are currently supported:
+
+arrow_cross
+double_arrow_cross
+arrow_point
+double_arrow_point
+arrow_circle
+double_arrow_circle
+
+Lets try to make these types semantic free so that diagram type semantics does not find its way in to this more generic layer.
+
+
+# Markers
+
+Define what markers that should be included in the diagram with the insert markers function. The function takes two arguments, first the element in which the markers should be included and a list of the markers that should be added.
+
+Ex:
+insertMarkers(el, ['point', 'circle'])
+
+The example above adds the markers point and cross. This means that edges with the arrowTypes arrow_cross, double_arrow_cross, arrow_point and double_arrow_cross will get the corresponding markers but arrowType arrow_cross will have no impact.
+
+Current markers:
+* point - the standard arrow from flowcharts
+* circle - Arrows ending with circle
+* cross - arrows starting and ending with a cross
+
+
+// Todo - in case of common renderer
+# Common functions used by the renderer to be implemented by the Db
+
+getDirection
+getClasses
--- a/src/dagre-wrapper/clusters.js
+++ b/src/dagre-wrapper/clusters.js
@ -0,0 +1,175 @@
+import intersectRect from './intersect/intersect-rect';
+import { logger } from '../logger'; // eslint-disable-line
+import createLabel from './createLabel';
+
+const rect = (parent, node) => {
+  // Add outer g element
+  const shapeSvg = parent
+    .insert('g')
+    .attr('class', 'cluster')
+    .attr('id', node.id);
+
+  // add the rect
+  const rect = shapeSvg.insert('rect', ':first-child');
+
+  // Create the label and insert it after the rect
+  const label = shapeSvg.insert('g').attr('class', 'cluster-label');
+
+  const text = label.node().appendChild(createLabel(node.labelText, node.labelStyle));
+
+  // Get the size of the label
+  const bbox = text.getBBox();
+
+  const padding = 0 * node.padding;
+  const halfPadding = padding / 2;
+
+  // center the rect around its coordinate
+  rect
+    .attr('rx', node.rx)
+    .attr('ry', node.ry)
+    .attr('x', node.x - node.width / 2 - halfPadding)
+    .attr('y', node.y - node.height / 2 - halfPadding)
+    .attr('width', node.width + padding)
+    .attr('height', node.height + padding);
+
+  // logger.info('bbox', bbox.width, node.x, node.width);
+  // Center the label
+  // label.attr('transform', 'translate(' + adj + ', ' + (node.y - node.height / 2) + ')');
+  label.attr(
+    'transform',
+    'translate(' +
+      (node.x - bbox.width / 2) +
+      ', ' +
+      (node.y - node.height / 2 - node.padding / 3 + 3) +
+      ')'
+  );
+
+  const rectBox = rect.node().getBBox();
+  node.width = rectBox.width;
+  node.height = rectBox.height;
+
+  node.intersect = function(point) {
+    return intersectRect(node, point);
+  };
+
+  return shapeSvg;
+};
+
+/**
+ * Non visiable cluster where the note is group with its
+ */
+const noteGroup = (parent, node) => {
+  // Add outer g element
+  const shapeSvg = parent
+    .insert('g')
+    .attr('class', 'note-cluster')
+    .attr('id', node.id);
+
+  // add the rect
+  const rect = shapeSvg.insert('rect', ':first-child');
+
+  const padding = 0 * node.padding;
+  const halfPadding = padding / 2;
+
+  // center the rect around its coordinate
+  rect
+    .attr('rx', node.rx)
+    .attr('ry', node.ry)
+    .attr('x', node.x - node.width / 2 - halfPadding)
+    .attr('y', node.y - node.height / 2 - halfPadding)
+    .attr('width', node.width + padding)
+    .attr('height', node.height + padding)
+    .attr('fill', 'none');
+
+  const rectBox = rect.node().getBBox();
+  node.width = rectBox.width;
+  node.height = rectBox.height;
+
+  node.intersect = function(point) {
+    return intersectRect(node, point);
+  };
+
+  return shapeSvg;
+};
+const roundedWithTitle = (parent, node) => {
+  // Add outer g element
+  const shapeSvg = parent
+    .insert('g')
+    .attr('class', node.classes)
+    .attr('id', node.id);
+
+  // add the rect
+  const rect = shapeSvg.insert('rect', ':first-child');
+
+  // Create the label and insert it after the rect
+  const label = shapeSvg.insert('g').attr('class', 'cluster-label');
+  const innerRect = shapeSvg.append('rect');
+
+  const text = label.node().appendChild(createLabel(node.labelText, node.labelStyle));
+
+  // Get the size of the label
+  const bbox = text.getBBox();
+
+  const padding = 0 * node.padding;
+  const halfPadding = padding / 2;
+
+  // center the rect around its coordinate
+  rect
+    .attr('class', 'outer')
+    .attr('x', node.x - node.width / 2 - halfPadding)
+    .attr('y', node.y - node.height / 2 - halfPadding)
+    .attr('width', node.width + padding)
+    .attr('height', node.height + padding);
+  innerRect
+    .attr('class', 'inner')
+    .attr('x', node.x - node.width / 2 - halfPadding)
+    .attr('y', node.y - node.height / 2 - halfPadding + bbox.height - 1)
+    .attr('width', node.width + padding)
+    .attr('height', node.height + padding - bbox.height - 3);
+
+  // logger.info('bbox', bbox.width, node.x, node.width);
+  // Center the label
+  // label.attr('transform', 'translate(' + adj + ', ' + (node.y - node.height / 2) + ')');
+  label.attr(
+    'transform',
+    'translate(' +
+      (node.x - bbox.width / 2) +
+      ', ' +
+      (node.y - node.height / 2 - node.padding / 3 + 3) +
+      ')'
+  );
+
+  const rectBox = rect.node().getBBox();
+  node.width = rectBox.width;
+  node.height = rectBox.height;
+
+  node.intersect = function(point) {
+    return intersectRect(node, point);
+  };
+
+  return shapeSvg;
+};
+
+const shapes = { rect, roundedWithTitle, noteGroup };
+
+let clusterElems = {};
+
+export const insertCluster = (elem, node) => {
+  clusterElems[node.id] = shapes[node.shape](elem, node);
+};
+export const getClusterTitleWidth = (elem, node) => {
+  const label = createLabel(node.labelText, node.labelStyle);
+  elem.node().appendChild(label);
+  const width = label.getBBox().width;
+  elem.node().removeChild(label);
+  return width;
+};
+
+export const clear = () => {
+  clusterElems = {};
+};
+
+export const positionCluster = node => {
+  const el = clusterElems[node.id];
+  el.attr('transform', 'translate(' + node.x + ', ' + node.y + ')');
+};
--- a/src/dagre-wrapper/createLabel.js
+++ b/src/dagre-wrapper/createLabel.js
@ -0,0 +1,18 @@
+const createLabel = (vertexText, style) => {
+  const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+  svgLabel.setAttribute('style', style.replace('color:', 'fill:'));
+
+  const rows = vertexText.split(/\n|<br\s*\/?>/gi);
+
+  for (let j = 0; j < rows.length; j++) {
+    const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
+    tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
+    tspan.setAttribute('dy', '1em');
+    tspan.setAttribute('x', '0');
+    tspan.textContent = rows[j].trim();
+    svgLabel.appendChild(tspan);
+  }
+  return svgLabel;
+};
+
+export default createLabel;
--- a/src/dagre-wrapper/edges.js
+++ b/src/dagre-wrapper/edges.js
@ -0,0 +1,251 @@
+import { logger } from '../logger'; // eslint-disable-line
+import createLabel from './createLabel';
+import * as d3 from 'd3';
+import { getConfig } from '../config';
+
+let edgeLabels = {};
+
+export const clear = () => {
+  edgeLabels = {};
+};
+
+export const insertEdgeLabel = (elem, edge) => {
+  // Create the actual text element
+  const labelElement = createLabel(edge.label, edge.labelStyle);
+
+  // Create outer g, edgeLabel, this will be positioned after graph layout
+  const edgeLabel = elem.insert('g').attr('class', 'edgeLabel');
+
+  // Create inner g, label, this will be positioned now for centering the text
+  const label = edgeLabel.insert('g').attr('class', 'label');
+  label.node().appendChild(labelElement);
+
+  // Center the label
+  const bbox = labelElement.getBBox();
+  label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');
+
+  // Make element accessible by id for positioning
+  edgeLabels[edge.id] = edgeLabel;
+
+  // Update the abstract data of the edge with the new information about its width and height
+  edge.width = bbox.width;
+  edge.height = bbox.height;
+};
+
+export const positionEdgeLabel = edge => {
+  const el = edgeLabels[edge.id];
+  el.attr('transform', 'translate(' + edge.x + ', ' + edge.y + ')');
+};
+
+// const getRelationType = function(type) {
+//   switch (type) {
+//     case stateDb.relationType.AGGREGATION:
+//       return 'aggregation';
+//     case stateDb.relationType.EXTENSION:
+//       return 'extension';
+//     case stateDb.relationType.COMPOSITION:
+//       return 'composition';
+//     case stateDb.relationType.DEPENDENCY:
+//       return 'dependency';
+//   }
+// };
+
+const outsideNode = (node, point) => {
+  const x = node.x;
+  const y = node.y;
+  const dx = Math.abs(point.x - x);
+  const dy = Math.abs(point.y - y);
+  const w = node.width / 2;
+  const h = node.height / 2;
+  if (dx > w || dy > h) {
+    return true;
+  }
+  return false;
+};
+
+// const intersection = (node, outsidePoint, insidePoint) => {
+//   const x = node.x;
+//   const y = node.y;
+
+//   const dx = Math.abs(x - insidePoint.x);
+//   const w = node.width / 2;
+//   let r = w - dx;
+//   const dy = Math.abs(y - insidePoint.y);
+//   const h = node.height / 2;
+//   const q = h - dy;
+
+//   const Q = Math.abs(outsidePoint.y - insidePoint.y);
+//   const R = Math.abs(outsidePoint.x - insidePoint.x);
+//   r = (R * q) / Q;
+
+//   return { x: insidePoint.x + r, y: insidePoint.y + q };
+// };
+const intersection = (node, outsidePoint, insidePoint) => {
+  // logger.info('intersection', outsidePoint, insidePoint, node);
+  const x = node.x;
+  const y = node.y;
+
+  const dx = Math.abs(x - insidePoint.x);
+  const w = node.width / 2;
+  let r = w - dx;
+  const dy = Math.abs(y - insidePoint.y);
+  const h = node.height / 2;
+  let q = h - dy;
+
+  const Q = Math.abs(outsidePoint.y - insidePoint.y);
+  const R = Math.abs(outsidePoint.x - insidePoint.x);
+  if (Math.abs(y - outsidePoint.y) * w > Math.abs(x - outsidePoint.x) * h || false) { // eslint-disable-line
+    // Intersection is top or bottom of rect.
+
+    r = (R * q) / Q;
+
+    return {
+      x: insidePoint.x < outsidePoint.x ? insidePoint.x + r : insidePoint.x - r,
+      y: insidePoint.y + q
+    };
+  } else {
+    q = (Q * r) / R;
+
+    return {
+      x: insidePoint.x < outsidePoint.x ? insidePoint.x + r : insidePoint.x - r,
+      y: insidePoint.y < outsidePoint.y ? insidePoint.y + q : insidePoint.y - q
+    };
+  }
+};
+
+export const insertEdge = function(elem, edge, clusterDb, diagramType) {
+  logger.info('\n\n\n\n');
+  let points = edge.points;
+  if (edge.toCluster) {
+    // logger.info('edge', edge);
+    // logger.info('to cluster', clusterDb[edge.toCluster]);
+    points = [];
+    let lastPointOutside;
+    let isInside = false;
+    edge.points.forEach(point => {
+      const node = clusterDb[edge.toCluster].node;
+
+      if (!outsideNode(node, point) && !isInside) {
+        // logger.info('inside', edge.toCluster, point);
+
+        // First point inside the rect
+        const insterection = intersection(node, lastPointOutside, point);
+        // logger.info('intersect', inter.rect(node, lastPointOutside));
+        points.push(insterection);
+        // points.push(insterection);
+        isInside = true;
+      } else {
+        if (!isInside) points.push(point);
+      }
+      lastPointOutside = point;
+    });
+  }
+
+  if (edge.fromCluster) {
+    // logger.info('edge', edge);
+    // logger.info('from cluster', clusterDb[edge.toCluster]);
+    const updatedPoints = [];
+    let lastPointOutside;
+    let isInside = false;
+    for (let i = points.length - 1; i >= 0; i--) {
+      const point = points[i];
+      const node = clusterDb[edge.fromCluster].node;
+
+      if (!outsideNode(node, point) && !isInside) {
+        // logger.info('inside', edge.toCluster, point);
+
+        // First point inside the rect
+        const insterection = intersection(node, lastPointOutside, point);
+        // logger.info('intersect', intersection(node, lastPointOutside, point));
+        updatedPoints.unshift(insterection);
+        // points.push(insterection);
+        isInside = true;
+      } else {
+        // at the outside
+        // logger.info('Outside point', point);
+        if (!isInside) updatedPoints.unshift(point);
+      }
+      lastPointOutside = point;
+    }
+    points = updatedPoints;
+  }
+
+  // logger.info('Poibts', points);
+
+  // logger.info('Edge', edge);
+
+  // The data for our line
+  const lineData = points.filter(p => !Number.isNaN(p.y));
+
+  // This is the accessor function we talked about above
+  const lineFunction = d3
+    .line()
+    .x(function(d) {
+      return d.x;
+    })
+    .y(function(d) {
+      return d.y;
+    })
+    .curve(d3.curveBasis);
+
+  const svgPath = elem
+    .append('path')
+    .attr('d', lineFunction(lineData))
+    .attr('id', edge.id)
+    .attr('class', 'transition' + (edge.classes ? ' ' + edge.classes : ''));
+
+  // DEBUG code, adds a red circle at each edge coordinate
+  // edge.points.forEach(point => {
+  //   elem
+  //     .append('circle')
+  //     .style('stroke', 'red')
+  //     .style('fill', 'red')
+  //     .attr('r', 1)
+  //     .attr('cx', point.x)
+  //     .attr('cy', point.y);
+  // });
+
+  let url = '';
+  if (getConfig().state.arrowMarkerAbsolute) {
+    url =
+      window.location.protocol +
+      '//' +
+      window.location.host +
+      window.location.pathname +
+      window.location.search;
+    url = url.replace(/\(/g, '\\(');
+    url = url.replace(/\)/g, '\\)');
+  }
+  // logger.info('arrowType', edge.arrowType);
+  switch (edge.arrowType) {
+    case 'arrow_cross':
+      svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-crossEnd' + ')');
+      break;
+    case 'double_arrow_cross':
+      svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-crossEnd' + ')');
+      svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-crossStart' + ')');
+      break;
+    case 'arrow_point':
+      svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-pointEnd' + ')');
+      break;
+    case 'double_arrow_point':
+      svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-pointEnd' + ')');
+      svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-pointStart' + ')');
+      break;
+    case 'arrow_barb':
+      svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-barbEnd' + ')');
+      break;
+    case 'double_arrow_barb':
+      svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-barnEnd' + ')');
+      svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-barbStart' + ')');
+      break;
+    case 'arrow_circle':
+      svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-circleEnd' + ')');
+      break;
+    case 'double_arrow_circle':
+      svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-circleEnd' + ')');
+      svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-circleStart' + ')');
+      break;
+    default:
+  }
+};
--- a/src/dagre-wrapper/index.js
+++ b/src/dagre-wrapper/index.js
@ -0,0 +1,104 @@
+import dagre from 'dagre';
+import insertMarkers from './markers';
+import { insertNode, positionNode, clear as clearNodes } from './nodes';
+import { insertCluster, clear as clearClusters } from './clusters';
+import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges';
+import { logger } from '../logger';
+
+let clusterDb = {};
+
+const translateClusterId = id => {
+  if (clusterDb[id]) return clusterDb[id].id;
+  return id;
+};
+
+export const render = (elem, graph, markers, diagramtype, id) => {
+  insertMarkers(elem, markers, diagramtype, id);
+  clusterDb = {};
+  clearNodes();
+  clearEdges();
+  clearClusters();
+
+  const clusters = elem.insert('g').attr('class', 'clusters'); // eslint-disable-line
+  const edgePaths = elem.insert('g').attr('class', 'edgePaths');
+  const edgeLabels = elem.insert('g').attr('class', 'edgeLabels');
+  const nodes = elem.insert('g').attr('class', 'nodes');
+
+  logger.warn('graph', graph);
+
+  // Insert nodes, this will insert them into the dom and each node will get a size. The size is updated
+  // to the abstract node and is later used by dagre for the layout
+  graph.nodes().forEach(function(v) {
+    const node = graph.node(v);
+    logger.warn('Node ' + v + ': ' + JSON.stringify(graph.node(v)));
+    if (node.type !== 'group') {
+      insertNode(nodes, graph.node(v));
+    } else {
+      // const width = getClusterTitleWidth(clusters, node);
+      const children = graph.children(v);
+      logger.info('Cluster identified', node.id, children[0]);
+      // nodes2expand.push({ id: children[0], width });
+      clusterDb[node.id] = { id: children[0] };
+      logger.info('Clusters ', clusterDb);
+    }
+  });
+
+  // Insert labels, this will insert them into the dom so that the width can be calculated
+  // Also figure out which edges point to/from clusters and adjust them accordingly
+  // Edges from/to clusters really points to the first child in the cluster.
+  // TODO: pick optimal child in the cluster to us as link anchor
+  graph.edges().forEach(function(e) {
+    const edge = graph.edge(e);
+    logger.warn('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));
+    // logger.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(graph.edge(e)));
+    const v = translateClusterId(e.v);
+    const w = translateClusterId(e.w);
+    if (v !== e.v || w !== e.w) {
+      graph.removeEdge(e.v, e.w, e.name);
+      if (v !== e.v) edge.fromCluster = e.v;
+      if (w !== e.w) edge.toCluster = e.w;
+      graph.setEdge(v, w, edge, e.name);
+    }
+    insertEdgeLabel(edgeLabels, edge);
+  });
+
+  graph.edges().forEach(function(e) {
+    logger.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));
+  });
+  logger.info('#############################################');
+  logger.info('###                Layout                 ###');
+  logger.info('#############################################');
+  logger.info(graph);
+  dagre.layout(graph);
+
+  // Move the nodes to the correct place
+  graph.nodes().forEach(function(v) {
+    const node = graph.node(v);
+    logger.info('Node ' + v + ': ' + JSON.stringify(graph.node(v)));
+    if (node.type !== 'group') {
+      positionNode(node);
+    } else {
+      insertCluster(clusters, node);
+      clusterDb[node.id].node = node;
+    }
+  });
+
+  // Move the edge labels to the correct place after layout
+  graph.edges().forEach(function(e) {
+    const edge = graph.edge(e);
+    logger.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge);
+
+    insertEdge(edgePaths, edge, clusterDb, diagramtype);
+    positionEdgeLabel(edge);
+  });
+};
+
+// const shapeDefinitions = {};
+// export const addShape = ({ shapeType: fun }) => {
+//   shapeDefinitions[shapeType] = fun;
+// };
+
+// const arrowDefinitions = {};
+// export const addArrow = ({ arrowType: fun }) => {
+//   arrowDefinitions[arrowType] = fun;
+// };
--- a/src/dagre-wrapper/intersect.js
+++ b/src/dagre-wrapper/intersect.js
@ -0,0 +1,7 @@
+module.exports = {
+  node: require('./intersect-node'),
+  circle: require('./intersect-circle'),
+  ellipse: require('./intersect-ellipse'),
+  polygon: require('./intersect-polygon'),
+  rect: require('./intersect-rect')
+};
--- a/src/dagre-wrapper/intersect/index.js
+++ b/src/dagre-wrapper/intersect/index.js
@ -0,0 +1,17 @@
+/*
+ * Borrowed with love from from dagrge-d3. Many thanks to cpettitt!
+ */
+
+import node from './intersect-node.js';
+import circle from './intersect-circle.js';
+import ellipse from './intersect-ellipse.js';
+import polygon from './intersect-polygon.js';
+import rect from './intersect-rect.js';
+
+export default {
+  node,
+  circle,
+  ellipse,
+  polygon,
+  rect
+};
--- a/src/dagre-wrapper/intersect/intersect-circle.js
+++ b/src/dagre-wrapper/intersect/intersect-circle.js
@ -0,0 +1,7 @@
+import intersectEllipse from './intersect-ellipse';
+
+function intersectCircle(node, rx, point) {
+  return intersectEllipse(node, rx, rx, point);
+}
+
+export default intersectCircle;
--- a/src/dagre-wrapper/intersect/intersect-ellipse.js
+++ b/src/dagre-wrapper/intersect/intersect-ellipse.js
@ -0,0 +1,24 @@
+function intersectEllipse(node, rx, ry, point) {
+  // Formulae from: http://mathworld.wolfram.com/Ellipse-LineIntersection.html
+
+  var cx = node.x;
+  var cy = node.y;
+
+  var px = cx - point.x;
+  var py = cy - point.y;
+
+  var det = Math.sqrt(rx * rx * py * py + ry * ry * px * px);
+
+  var dx = Math.abs((rx * ry * px) / det);
+  if (point.x < cx) {
+    dx = -dx;
+  }
+  var dy = Math.abs((rx * ry * py) / det);
+  if (point.y < cy) {
+    dy = -dy;
+  }
+
+  return { x: cx + dx, y: cy + dy };
+}
+
+export default intersectEllipse;
--- a/src/dagre-wrapper/intersect/intersect-line.js
+++ b/src/dagre-wrapper/intersect/intersect-line.js
@ -0,0 +1,70 @@
+/*
+ * Returns the point at which two lines, p and q, intersect or returns
+ * undefined if they do not intersect.
+ */
+function intersectLine(p1, p2, q1, q2) {
+  // Algorithm from J. Avro, (ed.) Graphics Gems, No 2, Morgan Kaufmann, 1994,
+  // p7 and p473.
+
+  var a1, a2, b1, b2, c1, c2;
+  var r1, r2, r3, r4;
+  var denom, offset, num;
+  var x, y;
+
+  // Compute a1, b1, c1, where line joining points 1 and 2 is F(x,y) = a1 x +
+  // b1 y + c1 = 0.
+  a1 = p2.y - p1.y;
+  b1 = p1.x - p2.x;
+  c1 = p2.x * p1.y - p1.x * p2.y;
+
+  // Compute r3 and r4.
+  r3 = a1 * q1.x + b1 * q1.y + c1;
+  r4 = a1 * q2.x + b1 * q2.y + c1;
+
+  // Check signs of r3 and r4. If both point 3 and point 4 lie on
+  // same side of line 1, the line segments do not intersect.
+  if (r3 !== 0 && r4 !== 0 && sameSign(r3, r4)) {
+    return /*DONT_INTERSECT*/;
+  }
+
+  // Compute a2, b2, c2 where line joining points 3 and 4 is G(x,y) = a2 x + b2 y + c2 = 0
+  a2 = q2.y - q1.y;
+  b2 = q1.x - q2.x;
+  c2 = q2.x * q1.y - q1.x * q2.y;
+
+  // Compute r1 and r2
+  r1 = a2 * p1.x + b2 * p1.y + c2;
+  r2 = a2 * p2.x + b2 * p2.y + c2;
+
+  // Check signs of r1 and r2. If both point 1 and point 2 lie
+  // on same side of second line segment, the line segments do
+  // not intersect.
+  if (r1 !== 0 && r2 !== 0 && sameSign(r1, r2)) {
+    return /*DONT_INTERSECT*/;
+  }
+
+  // Line segments intersect: compute intersection point.
+  denom = a1 * b2 - a2 * b1;
+  if (denom === 0) {
+    return /*COLLINEAR*/;
+  }
+
+  offset = Math.abs(denom / 2);
+
+  // The denom/2 is to get rounding instead of truncating. It
+  // is added or subtracted to the numerator, depending upon the
+  // sign of the numerator.
+  num = b1 * c2 - b2 * c1;
+  x = num < 0 ? (num - offset) / denom : (num + offset) / denom;
+
+  num = a2 * c1 - a1 * c2;
+  y = num < 0 ? (num - offset) / denom : (num + offset) / denom;
+
+  return { x: x, y: y };
+}
+
+function sameSign(r1, r2) {
+  return r1 * r2 > 0;
+}
+
+export default intersectLine;
--- a/src/dagre-wrapper/intersect/intersect-node.js
+++ b/src/dagre-wrapper/intersect/intersect-node.js
@ -0,0 +1,5 @@
+module.exports = intersectNode;
+
+function intersectNode(node, point) {
+  return node.intersect(point);
+}
--- a/src/dagre-wrapper/intersect/intersect-polygon.js
+++ b/src/dagre-wrapper/intersect/intersect-polygon.js
@ -0,0 +1,61 @@
+/* eslint "no-console": off */
+
+import intersectLine from './intersect-line';
+
+export default intersectPolygon;
+
+/*
+ * Returns the point ({x, y}) at which the point argument intersects with the
+ * node argument assuming that it has the shape specified by polygon.
+ */
+function intersectPolygon(node, polyPoints, point) {
+  var x1 = node.x;
+  var y1 = node.y;
+
+  var intersections = [];
+
+  var minX = Number.POSITIVE_INFINITY;
+  var minY = Number.POSITIVE_INFINITY;
+  polyPoints.forEach(function(entry) {
+    minX = Math.min(minX, entry.x);
+    minY = Math.min(minY, entry.y);
+  });
+
+  var left = x1 - node.width / 2 - minX;
+  var top = y1 - node.height / 2 - minY;
+
+  for (var i = 0; i < polyPoints.length; i++) {
+    var p1 = polyPoints[i];
+    var p2 = polyPoints[i < polyPoints.length - 1 ? i + 1 : 0];
+    var intersect = intersectLine(
+      node,
+      point,
+      { x: left + p1.x, y: top + p1.y },
+      { x: left + p2.x, y: top + p2.y }
+    );
+    if (intersect) {
+      intersections.push(intersect);
+    }
+  }
+
+  if (!intersections.length) {
+    console.log('NO INTERSECTION FOUND, RETURN NODE CENTER', node);
+    return node;
+  }
+
+  if (intersections.length > 1) {
+    // More intersections, find the one nearest to edge end point
+    intersections.sort(function(p, q) {
+      var pdx = p.x - point.x;
+      var pdy = p.y - point.y;
+      var distp = Math.sqrt(pdx * pdx + pdy * pdy);
+
+      var qdx = q.x - point.x;
+      var qdy = q.y - point.y;
+      var distq = Math.sqrt(qdx * qdx + qdy * qdy);
+
+      return distp < distq ? -1 : distp === distq ? 0 : 1;
+    });
+  }
+  return intersections[0];
+}
--- a/src/dagre-wrapper/intersect/intersect-rect.js
+++ b/src/dagre-wrapper/intersect/intersect-rect.js
@ -0,0 +1,33 @@
+const intersectRect = (node, point) => {
+  var x = node.x;
+  var y = node.y;
+
+  console.log(node, point);
+  // Rectangle intersection algorithm from:
+  // http://math.stackexchange.com/questions/108113/find-edge-between-two-boxes
+  var dx = point.x - x;
+  var dy = point.y - y;
+  var w = node.width / 2;
+  var h = node.height / 2;
+
+  var sx, sy;
+  if (Math.abs(dy) * w > Math.abs(dx) * h) {
+    // Intersection is top or bottom of rect.
+    if (dy < 0) {
+      h = -h;
+    }
+    sx = dy === 0 ? 0 : (h * dx) / dy;
+    sy = h;
+  } else {
+    // Intersection is left or right of rect.
+    if (dx < 0) {
+      w = -w;
+    }
+    sx = w;
+    sy = dx === 0 ? 0 : (w * dy) / dx;
+  }
+
+  return { x: x + sx, y: y + sy };
+};
+
+export default intersectRect;
--- a/src/dagre-wrapper/markers.js
+++ b/src/dagre-wrapper/markers.js
@ -0,0 +1,260 @@
+/**
+ * Setup arrow head and define the marker. The result is appended to the svg.
+ */
+
+import { logger } from '../logger';
+
+// Only add the number of markers that the diagram needs
+const insertMarkers = (elem, markerArray, type, id) => {
+  markerArray.forEach(markerName => {
+    markers[markerName](elem, type, id);
+  });
+};
+
+const extension = (elem, type, id) => {
+  logger.trace('Making markers for ', id);
+  elem
+    .append('defs')
+    .append('marker')
+    .attr('id', 'extensionStart')
+    .attr('class', 'extension ' + type)
+    .attr('refX', 0)
+    .attr('refY', 7)
+    .attr('markerWidth', 190)
+    .attr('markerHeight', 240)
+    .attr('orient', 'auto')
+    .append('path')
+    .attr('d', 'M 1,7 L18,13 V 1 Z');
+
+  elem
+    .append('defs')
+    .append('marker')
+    .attr('id', 'extensionEnd ' + type)
+    .attr('class', 'extension ' + type)
+    .attr('refX', 19)
+    .attr('refY', 7)
+    .attr('markerWidth', 20)
+    .attr('markerHeight', 28)
+    .attr('orient', 'auto')
+    .append('path')
+    .attr('d', 'M 1,1 V 13 L18,7 Z'); // this is actual shape for arrowhead
+};
+
+const composition = (elem, type) => {
+  elem
+    .append('defs')
+    .append('marker')
+    .attr('id', 'compositionStart')
+    .attr('class', 'extension ' + type)
+    .attr('refX', 0)
+    .attr('refY', 7)
+    .attr('markerWidth', 190)
+    .attr('markerHeight', 240)
+    .attr('orient', 'auto')
+    .append('path')
+    .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
+
+  elem
+    .append('defs')
+    .append('marker')
+    .attr('id', 'compositionEnd')
+    .attr('class', 'extension ' + type)
+    .attr('refX', 19)
+    .attr('refY', 7)
+    .attr('markerWidth', 20)
+    .attr('markerHeight', 28)
+    .attr('orient', 'auto')
+    .append('path')
+    .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
+};
+const aggregation = (elem, type) => {
+  elem
+    .append('defs')
+    .append('marker')
+    .attr('id', 'aggregationStart')
+    .attr('class', 'extension ' + type)
+    .attr('refX', 0)
+    .attr('refY', 7)
+    .attr('markerWidth', 190)
+    .attr('markerHeight', 240)
+    .attr('orient', 'auto')
+    .append('path')
+    .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
+
+  elem
+    .append('defs')
+    .append('marker')
+    .attr('id', 'aggregationEnd')
+    .attr('class', type)
+    .attr('refX', 19)
+    .attr('refY', 7)
+    .attr('markerWidth', 20)
+    .attr('markerHeight', 28)
+    .attr('orient', 'auto')
+    .append('path')
+    .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
+};
+const dependency = (elem, type) => {
+  elem
+    .append('defs')
+    .append('marker')
+    .attr('id', 'dependencyStart')
+    .attr('class', 'extension ' + type)
+    .attr('refX', 0)
+    .attr('refY', 7)
+    .attr('markerWidth', 190)
+    .attr('markerHeight', 240)
+    .attr('orient', 'auto')
+    .append('path')
+    .attr('d', 'M 5,7 L9,13 L1,7 L9,1 Z');
+
+  elem
+    .append('defs')
+    .append('marker')
+    .attr('id', 'dependencyEnd')
+    .attr('class', type)
+    .attr('refX', 19)
+    .attr('refY', 7)
+    .attr('markerWidth', 20)
+    .attr('markerHeight', 28)
+    .attr('orient', 'auto')
+    .append('path')
+    .attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z');
+};
+const point = (elem, type) => {
+  elem
+    .append('marker')
+    .attr('id', type + '-pointEnd')
+    .attr('class', type)
+    .attr('viewBox', '0 0 10 10')
+    .attr('refX', 10)
+    .attr('refY', 5)
+    .attr('markerUnits', 'strokeWidth')
+    .attr('markerWidth', 8)
+    .attr('markerHeight', 8)
+    .attr('orient', 'auto')
+    .append('path')
+    .attr('d', 'M 0 0 L 10 5 L 0 10 z')
+    .attr('class', 'arrowMarkerPath')
+    .style('stroke-width', 1)
+    .style('stroke-dasharray', '1,0');
+  elem
+    .append('marker')
+    .attr('id', type + '-pointStart')
+    .attr('class', type)
+    .attr('viewBox', '0 0 10 10')
+    .attr('refX', 0)
+    .attr('refY', 5)
+    .attr('markerUnits', 'strokeWidth')
+    .attr('markerWidth', 8)
+    .attr('markerHeight', 8)
+    .attr('orient', 'auto')
+    .append('path')
+    .attr('d', 'M 0 5 L 10 10 L 10 0 z')
+    .attr('class', 'arrowMarkerPath')
+    .style('stroke-width', 1)
+    .style('stroke-dasharray', '1,0');
+};
+const circle = (elem, type) => {
+  elem
+    .append('marker')
+    .attr('id', 'circleEnd')
+    .attr('class', type)
+    .attr('viewBox', '0 0 10 10')
+    .attr('refX', 11)
+    .attr('refY', 5)
+    .attr('markerUnits', 'strokeWidth')
+    .attr('markerWidth', 7)
+    .attr('markerHeight', 7)
+    .attr('orient', 'auto')
+    .append('circle')
+    .attr('cx', '5')
+    .attr('cy', '5')
+    .attr('r', '5')
+    .attr('class', 'arrowMarkerPath')
+    .style('stroke-width', 1)
+    .style('stroke-dasharray', '1,0');
+
+  elem
+    .append('marker')
+    .attr('id', 'circleStart')
+    .attr('class', type)
+    .attr('viewBox', '0 0 10 10')
+    .attr('refX', -1)
+    .attr('refY', 5)
+    .attr('markerUnits', 'strokeWidth')
+    .attr('markerWidth', 7)
+    .attr('markerHeight', 7)
+    .attr('orient', 'auto')
+    .append('circle')
+    .attr('cx', '5')
+    .attr('cy', '5')
+    .attr('r', '5')
+    .attr('class', 'arrowMarkerPath')
+    .style('stroke-width', 1)
+    .style('stroke-dasharray', '1,0');
+};
+const cross = (elem, type) => {
+  elem
+    .append('marker')
+    .attr('id', 'crossEnd')
+    .attr('class', type)
+    .attr('viewBox', '0 0 11 11')
+    .attr('refX', 12)
+    .attr('refY', 5.2)
+    .attr('markerUnits', 'strokeWidth')
+    .attr('markerWidth', 7)
+    .attr('markerHeight', 7)
+    .attr('orient', 'auto')
+    .append('path')
+    .attr('stroke', 'black')
+    .attr('d', 'M 1,1 l 9,9 M 10,1 l -9,9')
+    .attr('class', 'arrowMarkerPath')
+    .style('stroke-width', 2)
+    .style('stroke-dasharray', '1,0');
+
+  elem
+    .append('marker')
+    .attr('id', 'crossStart')
+    .attr('class', type)
+    .attr('viewBox', '0 0 11 11')
+    .attr('refX', -1)
+    .attr('refY', 5.2)
+    .attr('markerUnits', 'strokeWidth')
+    .attr('markerWidth', 7)
+    .attr('markerHeight', 7)
+    .attr('orient', 'auto')
+    .append('path')
+    .attr('stroke', 'black')
+    .attr('d', 'M 1,1 l 9,9 M 10,1 l -9,9')
+    .attr('class', 'arrowMarkerPath')
+    .style('stroke-width', 2)
+    .style('stroke-dasharray', '1,0');
+};
+const barb = (elem, type) => {
+  elem
+    .append('defs')
+    .append('marker')
+    .attr('id', type + '-barbEnd')
+    .attr('refX', 19)
+    .attr('refY', 7)
+    .attr('markerWidth', 20)
+    .attr('markerHeight', 14)
+    .attr('markerUnits', 0)
+    .attr('orient', 'auto')
+    .append('path')
+    .attr('d', 'M 19,7 L9,13 L14,7 L9,1 Z');
+};
+
+// TODO rename the class diagram markers to something shape descriptive and semanitc free
+const markers = {
+  extension,
+  composition,
+  aggregation,
+  dependency,
+  point,
+  circle,
+  cross,
+  barb
+};
+export default insertMarkers;
--- a/src/dagre-wrapper/nodes.js
+++ b/src/dagre-wrapper/nodes.js
@ -0,0 +1,397 @@
+import intersect from './intersect/index.js';
+import { logger } from '../logger'; // eslint-disable-line
+import { labelHelper, updateNodeBounds, insertPolygonShape } from './shapes/util';
+import note from './shapes/note';
+
+const question = (parent, node) => {
+  const { shapeSvg, bbox } = labelHelper(parent, node);
+
+  const w = bbox.width + node.padding;
+  const h = bbox.height + node.padding;
+  const s = (w + h) * 0.9;
+  const points = [
+    { x: s / 2, y: 0 },
+    { x: s, y: -s / 2 },
+    { x: s / 2, y: -s },
+    { x: 0, y: -s / 2 }
+  ];
+
+  const questionElem = insertPolygonShape(shapeSvg, s, s, points);
+  updateNodeBounds(node, questionElem);
+  node.intersect = function(point) {
+    return intersect.polugon(node, points, point);
+  };
+
+  return shapeSvg;
+};
+
+const hexagon = (parent, node) => {
+  const { shapeSvg, bbox } = labelHelper(parent, node);
+
+  const f = 4;
+  const h = bbox.height + node.padding;
+  const m = h / f;
+  const w = bbox.width + 2 * m + node.padding;
+  const points = [
+    { x: m, y: 0 },
+    { x: w - m, y: 0 },
+    { x: w, y: -h / 2 },
+    { x: w - m, y: -h },
+    { x: m, y: -h },
+    { x: 0, y: -h / 2 }
+  ];
+  const hex = insertPolygonShape(shapeSvg, w, h, points);
+  updateNodeBounds(node, hex);
+
+  node.intersect = function(point) {
+    return intersect.polygon(node, point);
+  };
+
+  return shapeSvg;
+};
+
+const rect_left_inv_arrow = (parent, node) => {
+  const { shapeSvg, bbox } = labelHelper(parent, node);
+
+  const w = bbox.width + node.padding;
+  const h = bbox.height + node.padding;
+  const points = [
+    { x: -h / 2, y: 0 },
+    { x: w, y: 0 },
+    { x: w, y: -h },
+    { x: -h / 2, y: -h },
+    { x: 0, y: -h / 2 }
+  ];
+
+  const el = insertPolygonShape(shapeSvg, w, h, points);
+  updateNodeBounds(node, el);
+
+  node.intersect = function(point) {
+    return intersect.polygon(node, point);
+  };
+
+  return shapeSvg;
+};
+const lean_right = (parent, node) => {
+  const { shapeSvg, bbox } = labelHelper(parent, node);
+
+  const w = bbox.width + node.padding;
+  const h = bbox.height + node.padding;
+  const points = [
+    { x: (-2 * h) / 6, y: 0 },
+    { x: w - h / 6, y: 0 },
+    { x: w + (2 * h) / 6, y: -h },
+    { x: h / 6, y: -h }
+  ];
+
+  const el = insertPolygonShape(shapeSvg, w, h, points);
+  updateNodeBounds(node, el);
+
+  node.intersect = function(point) {
+    return intersect.polygon(node, point);
+  };
+
+  return shapeSvg;
+};
+
+const lean_left = (parent, node) => {
+  const { shapeSvg, bbox } = labelHelper(parent, node);
+
+  const w = bbox.width + node.padding;
+  const h = bbox.height + node.padding;
+  const points = [
+    { x: (2 * h) / 6, y: 0 },
+    { x: w + h / 6, y: 0 },
+    { x: w - (2 * h) / 6, y: -h },
+    { x: -h / 6, y: -h }
+  ];
+
+  const el = insertPolygonShape(shapeSvg, w, h, points);
+  updateNodeBounds(node, el);
+
+  node.intersect = function(point) {
+    return intersect.polygon(node, point);
+  };
+
+  return shapeSvg;
+};
+
+const trapezoid = (parent, node) => {
+  const { shapeSvg, bbox } = labelHelper(parent, node);
+
+  const w = bbox.width + node.padding;
+  const h = bbox.height + node.padding;
+  const points = [
+    { x: (-2 * h) / 6, y: 0 },
+    { x: w + (2 * h) / 6, y: 0 },
+    { x: w - h / 6, y: -h },
+    { x: h / 6, y: -h }
+  ];
+  const el = insertPolygonShape(shapeSvg, w, h, points);
+  updateNodeBounds(node, el);
+
+  node.intersect = function(point) {
+    return intersect.polygon(node, point);
+  };
+
+  return shapeSvg;
+};
+
+const inv_trapezoid = (parent, node) => {
+  const { shapeSvg, bbox } = labelHelper(parent, node);
+
+  const w = bbox.width + node.padding;
+  const h = bbox.height + node.padding;
+  const points = [
+    { x: h / 6, y: 0 },
+    { x: w - h / 6, y: 0 },
+    { x: w + (2 * h) / 6, y: -h },
+    { x: (-2 * h) / 6, y: -h }
+  ];
+  const el = insertPolygonShape(shapeSvg, w, h, points);
+  updateNodeBounds(node, el);
+
+  node.intersect = function(point) {
+    return intersect.polygon(node, point);
+  };
+
+  return shapeSvg;
+};
+const rect_right_inv_arrow = (parent, node) => {
+  const { shapeSvg, bbox } = labelHelper(parent, node);
+
+  const w = bbox.width + node.padding;
+  const h = bbox.height + node.padding;
+  const points = [
+    { x: 0, y: 0 },
+    { x: w + h / 2, y: 0 },
+    { x: w, y: -h / 2 },
+    { x: w + h / 2, y: -h },
+    { x: 0, y: -h }
+  ];
+  const el = insertPolygonShape(shapeSvg, w, h, points);
+  updateNodeBounds(node, el);
+
+  node.intersect = function(point) {
+    return intersect.polygon(node, point);
+  };
+
+  return shapeSvg;
+};
+const cylinder = (parent, node) => {
+  const { shapeSvg, bbox } = labelHelper(parent, node);
+
+  const w = bbox.width + node.padding;
+  const rx = w / 2;
+  const ry = rx / (2.5 + w / 50);
+  const h = bbox.height + ry + node.padding;
+
+  const shape =
+    'M 0,' +
+    ry +
+    ' a ' +
+    rx +
+    ',' +
+    ry +
+    ' 0,0,0 ' +
+    w +
+    ' 0 a ' +
+    rx +
+    ',' +
+    ry +
+    ' 0,0,0 ' +
+    -w +
+    ' 0 l 0,' +
+    h +
+    ' a ' +
+    rx +
+    ',' +
+    ry +
+    ' 0,0,0 ' +
+    w +
+    ' 0 l 0,' +
+    -h;
+
+  const el = shapeSvg
+    .attr('label-offset-y', ry)
+    .insert('path', ':first-child')
+    .attr('d', shape)
+    .attr('transform', 'translate(' + -w / 2 + ',' + -(h / 2 + ry) + ')');
+
+  updateNodeBounds(node, el);
+
+  node.intersect = function(point) {
+    const pos = intersect.rect(node, point);
+    const x = pos.x - node.x;
+
+    if (
+      rx != 0 &&
+      (Math.abs(x) < node.width / 2 ||
+        (Math.abs(x) == node.width / 2 && Math.abs(pos.y - node.y) > node.height / 2 - ry))
+    ) {
+      // ellipsis equation: x*x / a*a + y*y / b*b = 1
+      // solve for y to get adjustion value for pos.y
+      let y = ry * ry * (1 - (x * x) / (rx * rx));
+      if (y != 0) y = Math.sqrt(y);
+      y = ry - y;
+      if (point.y - node.y > 0) y = -y;
+
+      pos.y += y;
+    }
+
+    return pos;
+  };
+
+  return shapeSvg;
+};
+
+const rect = (parent, node) => {
+  const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes);
+
+  logger.info('Classes = ', node.classes);
+  // add the rect
+  const rect = shapeSvg.insert('rect', ':first-child');
+
+  rect
+    .attr('rx', node.rx)
+    .attr('ry', node.ry)
+    .attr('x', -bbox.width / 2 - halfPadding)
+    .attr('y', -bbox.height / 2 - halfPadding)
+    .attr('width', bbox.width + node.padding)
+    .attr('height', bbox.height + node.padding);
+
+  updateNodeBounds(node, rect);
+
+  node.intersect = function(point) {
+    return intersect.rect(node, point);
+  };
+
+  return shapeSvg;
+};
+
+const stadium = (parent, node) => {
+  const { shapeSvg, bbox } = labelHelper(parent, node);
+
+  const h = bbox.height + node.padding;
+  const w = bbox.width + h / 4 + node.padding;
+
+  // add the rect
+  const rect = shapeSvg
+    .insert('rect', ':first-child')
+    .attr('rx', h / 2)
+    .attr('ry', h / 2)
+    .attr('x', -w / 2)
+    .attr('y', -h / 2)
+    .attr('width', w)
+    .attr('height', h);
+
+  updateNodeBounds(node, rect);
+
+  node.intersect = function(point) {
+    return intersect.rect(node, point);
+  };
+
+  return shapeSvg;
+};
+const circle = (parent, node) => {
+  const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node);
+  const circle = shapeSvg.insert('circle', ':first-child');
+
+  // center the circle around its coordinate
+  circle
+    .attr('rx', node.rx)
+    .attr('ry', node.ry)
+    .attr('r', bbox.width / 2 + halfPadding)
+    .attr('width', bbox.width + node.padding)
+    .attr('height', bbox.height + node.padding);
+
+  updateNodeBounds(node, circle);
+
+  node.intersect = function(point) {
+    return intersect.circle(node, point);
+  };
+
+  return shapeSvg;
+};
+const start = (parent, node) => {
+  const shapeSvg = parent
+    .insert('g')
+    .attr('class', 'node default')
+    .attr('id', node.id);
+  const circle = shapeSvg.insert('circle', ':first-child');
+
+  // center the circle around its coordinate
+  circle
+    .attr('class', 'state-start')
+    .attr('r', 7)
+    .attr('width', 14)
+    .attr('height', 14);
+
+  updateNodeBounds(node, circle);
+
+  node.intersect = function(point) {
+    return intersect.circle(node, point);
+  };
+
+  return shapeSvg;
+};
+const end = (parent, node) => {
+  const shapeSvg = parent
+    .insert('g')
+    .attr('class', 'node default')
+    .attr('id', node.id);
+  const innerCircle = shapeSvg.insert('circle', ':first-child');
+  const circle = shapeSvg.insert('circle', ':first-child');
+
+  circle
+    .attr('class', 'state-start')
+    .attr('r', 7)
+    .attr('width', 14)
+    .attr('height', 14);
+
+  innerCircle
+    .attr('class', 'state-end')
+    .attr('r', 5)
+    .attr('width', 10)
+    .attr('height', 10);
+
+  updateNodeBounds(node, circle);
+
+  node.intersect = function(point) {
+    return intersect.circle(node, point);
+  };
+
+  return shapeSvg;
+};
+
+const shapes = {
+  question,
+  rect,
+  circle,
+  stadium,
+  hexagon,
+  rect_left_inv_arrow,
+  lean_right,
+  lean_left,
+  trapezoid,
+  inv_trapezoid,
+  rect_right_inv_arrow,
+  cylinder,
+  start,
+  end,
+  note
+};
+
+let nodeElems = {};
+
+export const insertNode = (elem, node) => {
+  nodeElems[node.id] = shapes[node.shape](elem, node);
+};
+export const clear = () => {
+  nodeElems = {};
+};
+
+export const positionNode = node => {
+  const el = nodeElems[node.id];
+  el.attr('transform', 'translate(' + node.x + ', ' + node.y + ')');
+};
--- a/src/dagre-wrapper/shapes/note.js
+++ b/src/dagre-wrapper/shapes/note.js
@ -0,0 +1,29 @@
+import { updateNodeBounds, labelHelper } from './util';
+import { logger } from '../../logger'; // eslint-disable-line
+import intersect from '../intersect/index.js';
+
+const note = (parent, node) => {
+  const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes);
+
+  logger.info('Classes = ', node.classes);
+  // add the rect
+  const rect = shapeSvg.insert('rect', ':first-child');
+
+  rect
+    .attr('rx', node.rx)
+    .attr('ry', node.ry)
+    .attr('x', -bbox.width / 2 - halfPadding)
+    .attr('y', -bbox.height / 2 - halfPadding)
+    .attr('width', bbox.width + node.padding)
+    .attr('height', bbox.height + node.padding);
+
+  updateNodeBounds(node, rect);
+
+  node.intersect = function(point) {
+    return intersect.rect(node, point);
+  };
+
+  return shapeSvg;
+};
+
+export default note;
--- a/src/dagre-wrapper/shapes/util.js
+++ b/src/dagre-wrapper/shapes/util.js
@ -0,0 +1,50 @@
+import createLabel from '../createLabel';
+
+export const labelHelper = (parent, node, _classes) => {
+  let classes;
+  if (!_classes) {
+    classes = 'node default';
+  } else {
+    classes = _classes;
+  }
+  // Add outer g element
+  const shapeSvg = parent
+    .insert('g')
+    .attr('class', classes)
+    .attr('id', node.id);
+
+  // Create the label and insert it after the rect
+  const label = shapeSvg.insert('g').attr('class', 'label');
+
+  const text = label.node().appendChild(createLabel(node.labelText, node.labelStyle));
+
+  // Get the size of the label
+  const bbox = text.getBBox();
+
+  const halfPadding = node.padding / 2;
+
+  // Center the label
+  label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');
+
+  return { shapeSvg, bbox, halfPadding, label };
+};
+
+export const updateNodeBounds = (node, element) => {
+  const bbox = element.node().getBBox();
+  node.width = bbox.width;
+  node.height = bbox.height;
+};
+
+export function insertPolygonShape(parent, w, h, points) {
+  return parent
+    .insert('polygon', ':first-child')
+    .attr(
+      'points',
+      points
+        .map(function(d) {
+          return d.x + ',' + d.y;
+        })
+        .join(' ')
+    )
+    .attr('transform', 'translate(' + -w / 2 + ',' + h / 2 + ')');
+}
--- a/src/diagrams/flowchart-v2/flowChartShapes.js
+++ b/src/diagrams/flowchart-v2/flowChartShapes.js
@ -1,261 +0,0 @@
-import dagreD3 from 'dagre-d3';
-
-function question(parent, bbox, node) {
-  const w = bbox.width;
-  const h = bbox.height;
-  const s = (w + h) * 0.9;
-  const points = [
-    { x: s / 2, y: 0 },
-    { x: s, y: -s / 2 },
-    { x: s / 2, y: -s },
-    { x: 0, y: -s / 2 }
-  ];
-  const shapeSvg = insertPolygonShape(parent, s, s, points);
-  node.intersect = function(point) {
-    return dagreD3.intersect.polygon(node, points, point);
-  };
-  return shapeSvg;
-}
-
-function hexagon(parent, bbox, node) {
-  const f = 4;
-  const h = bbox.height;
-  const m = h / f;
-  const w = bbox.width + 2 * m;
-  const points = [
-    { x: m, y: 0 },
-    { x: w - m, y: 0 },
-    { x: w, y: -h / 2 },
-    { x: w - m, y: -h },
-    { x: m, y: -h },
-    { x: 0, y: -h / 2 }
-  ];
-  const shapeSvg = insertPolygonShape(parent, w, h, points);
-  node.intersect = function(point) {
-    return dagreD3.intersect.polygon(node, points, point);
-  };
-  return shapeSvg;
-}
-
-function rect_left_inv_arrow(parent, bbox, node) {
-  const w = bbox.width;
-  const h = bbox.height;
-  const points = [
-    { x: -h / 2, y: 0 },
-    { x: w, y: 0 },
-    { x: w, y: -h },
-    { x: -h / 2, y: -h },
-    { x: 0, y: -h / 2 }
-  ];
-  const shapeSvg = insertPolygonShape(parent, w, h, points);
-  node.intersect = function(point) {
-    return dagreD3.intersect.polygon(node, points, point);
-  };
-  return shapeSvg;
-}
-
-function lean_right(parent, bbox, node) {
-  const w = bbox.width;
-  const h = bbox.height;
-  const points = [
-    { x: (-2 * h) / 6, y: 0 },
-    { x: w - h / 6, y: 0 },
-    { x: w + (2 * h) / 6, y: -h },
-    { x: h / 6, y: -h }
-  ];
-  const shapeSvg = insertPolygonShape(parent, w, h, points);
-  node.intersect = function(point) {
-    return dagreD3.intersect.polygon(node, points, point);
-  };
-  return shapeSvg;
-}
-
-function lean_left(parent, bbox, node) {
-  const w = bbox.width;
-  const h = bbox.height;
-  const points = [
-    { x: (2 * h) / 6, y: 0 },
-    { x: w + h / 6, y: 0 },
-    { x: w - (2 * h) / 6, y: -h },
-    { x: -h / 6, y: -h }
-  ];
-  const shapeSvg = insertPolygonShape(parent, w, h, points);
-  node.intersect = function(point) {
-    return dagreD3.intersect.polygon(node, points, point);
-  };
-  return shapeSvg;
-}
-
-function trapezoid(parent, bbox, node) {
-  const w = bbox.width;
-  const h = bbox.height;
-  const points = [
-    { x: (-2 * h) / 6, y: 0 },
-    { x: w + (2 * h) / 6, y: 0 },
-    { x: w - h / 6, y: -h },
-    { x: h / 6, y: -h }
-  ];
-  const shapeSvg = insertPolygonShape(parent, w, h, points);
-  node.intersect = function(point) {
-    return dagreD3.intersect.polygon(node, points, point);
-  };
-  return shapeSvg;
-}
-
-function inv_trapezoid(parent, bbox, node) {
-  const w = bbox.width;
-  const h = bbox.height;
-  const points = [
-    { x: h / 6, y: 0 },
-    { x: w - h / 6, y: 0 },
-    { x: w + (2 * h) / 6, y: -h },
-    { x: (-2 * h) / 6, y: -h }
-  ];
-  const shapeSvg = insertPolygonShape(parent, w, h, points);
-  node.intersect = function(point) {
-    return dagreD3.intersect.polygon(node, points, point);
-  };
-  return shapeSvg;
-}
-
-function rect_right_inv_arrow(parent, bbox, node) {
-  const w = bbox.width;
-  const h = bbox.height;
-  const points = [
-    { x: 0, y: 0 },
-    { x: w + h / 2, y: 0 },
-    { x: w, y: -h / 2 },
-    { x: w + h / 2, y: -h },
-    { x: 0, y: -h }
-  ];
-  const shapeSvg = insertPolygonShape(parent, w, h, points);
-  node.intersect = function(point) {
-    return dagreD3.intersect.polygon(node, points, point);
-  };
-  return shapeSvg;
-}
-
-function stadium(parent, bbox, node) {
-  const h = bbox.height;
-  const w = bbox.width + h / 4;
-
-  const shapeSvg = parent
-    .insert('rect', ':first-child')
-    .attr('rx', h / 2)
-    .attr('ry', h / 2)
-    .attr('x', -w / 2)
-    .attr('y', -h / 2)
-    .attr('width', w)
-    .attr('height', h);
-
-  node.intersect = function(point) {
-    return dagreD3.intersect.rect(node, point);
-  };
-  return shapeSvg;
-}
-
-function cylinder(parent, bbox, node) {
-  const w = bbox.width;
-  const rx = w / 2;
-  const ry = rx / (2.5 + w / 50);
-  const h = bbox.height + ry;
-
-  const shape =
-    'M 0,' +
-    ry +
-    ' a ' +
-    rx +
-    ',' +
-    ry +
-    ' 0,0,0 ' +
-    w +
-    ' 0 a ' +
-    rx +
-    ',' +
-    ry +
-    ' 0,0,0 ' +
-    -w +
-    ' 0 l 0,' +
-    h +
-    ' a ' +
-    rx +
-    ',' +
-    ry +
-    ' 0,0,0 ' +
-    w +
-    ' 0 l 0,' +
-    -h;
-
-  const shapeSvg = parent
-    .attr('label-offset-y', ry)
-    .insert('path', ':first-child')
-    .attr('d', shape)
-    .attr('transform', 'translate(' + -w / 2 + ',' + -(h / 2 + ry) + ')');
-
-  node.intersect = function(point) {
-    const pos = dagreD3.intersect.rect(node, point);
-    const x = pos.x - node.x;
-
-    if (
-      rx != 0 &&
-      (Math.abs(x) < node.width / 2 ||
-        (Math.abs(x) == node.width / 2 && Math.abs(pos.y - node.y) > node.height / 2 - ry))
-    ) {
-      // ellipsis equation: x*x / a*a + y*y / b*b = 1
-      // solve for y to get adjustion value for pos.y
-      let y = ry * ry * (1 - (x * x) / (rx * rx));
-      if (y != 0) y = Math.sqrt(y);
-      y = ry - y;
-      if (point.y - node.y > 0) y = -y;
-
-      pos.y += y;
-    }
-
-    return pos;
-  };
-
-  return shapeSvg;
-}
-
-export function addToRender(render) {
-  render.shapes().question = question;
-  render.shapes().hexagon = hexagon;
-  render.shapes().stadium = stadium;
-  render.shapes().cylinder = cylinder;
-
-  // Add custom shape for box with inverted arrow on left side
-  render.shapes().rect_left_inv_arrow = rect_left_inv_arrow;
-
-  // Add custom shape for box with inverted arrow on left side
-  render.shapes().lean_right = lean_right;
-
-  // Add custom shape for box with inverted arrow on left side
-  render.shapes().lean_left = lean_left;
-
-  // Add custom shape for box with inverted arrow on left side
-  render.shapes().trapezoid = trapezoid;
-
-  // Add custom shape for box with inverted arrow on left side
-  render.shapes().inv_trapezoid = inv_trapezoid;
-
-  // Add custom shape for box with inverted arrow on right side
-  render.shapes().rect_right_inv_arrow = rect_right_inv_arrow;
-}
-
-function insertPolygonShape(parent, w, h, points) {
-  return parent
-    .insert('polygon', ':first-child')
-    .attr(
-      'points',
-      points
-        .map(function(d) {
-          return d.x + ',' + d.y;
-        })
-        .join(' ')
-    )
-    .attr('transform', 'translate(' + -w / 2 + ',' + h / 2 + ')');
-}
-
-export default {
-  addToRender
-};
--- a/src/diagrams/flowchart-v2/flowChartShapes.spec.js
+++ b/src/diagrams/flowchart-v2/flowChartShapes.spec.js
@ -1,131 +0,0 @@
-import { addToRender } from './flowChartShapes';
-
-describe('flowchart shapes', function() {
-  // rect-based shapes
-  [
-    ['stadium', useWidth, useHeight]
-  ].forEach(function([shapeType, getW, getH]) {
-    it(`should add a ${shapeType} shape that renders a properly positioned rect element`, function() {
-      const mockRender = MockRender();
-      const mockSvg = MockSvg();
-      addToRender(mockRender);
-
-      [[100, 100], [123, 45], [71, 300]].forEach(function([width, height]) {
-        const shape = mockRender.shapes()[shapeType](mockSvg, { width, height }, {});
-        const w = width + height / 4;
-        const h = height;
-        const dx = -getW(w, h) / 2;
-        const dy = -getH(w, h) / 2;
-        expect(shape.__tag).toEqual('rect');
-        expect(shape.__attrs).toHaveProperty('x', dx);
-        expect(shape.__attrs).toHaveProperty('y', dy);
-      });
-    });
-  });
-
-  // path-based shapes
-  [
-    ['cylinder', useWidth, useHeight]
-  ].forEach(function([shapeType, getW, getH]) {
-    it(`should add a ${shapeType} shape that renders a properly positioned path element`, function() {
-      const mockRender = MockRender();
-      const mockSvg = MockSvg();
-      addToRender(mockRender);
-
-      [[100, 100], [123, 45], [71, 300]].forEach(function([width, height]) {
-        const shape = mockRender.shapes()[shapeType](mockSvg, { width, height }, {});
-        expect(shape.__tag).toEqual('path');
-        expect(shape.__attrs).toHaveProperty('d');
-      });
-    });
-  });
-
-  // polygon-based shapes
-  [
-    [
-      'question',
-      4,
-      function(w, h) {
-        return (w + h) * 0.9;
-      },
-      function(w, h) {
-        return (w + h) * 0.9;
-      }
-    ],
-    [
-      'hexagon',
-      6,
-      function(w, h) {
-        return w + h / 2;
-      },
-      useHeight
-    ],
-    ['rect_left_inv_arrow', 5, useWidth, useHeight],
-    ['rect_right_inv_arrow', 5, useWidth, useHeight],
-    ['lean_right', 4, useWidth, useHeight],
-    ['lean_left', 4, useWidth, useHeight],
-    ['trapezoid', 4, useWidth, useHeight],
-    ['inv_trapezoid', 4, useWidth, useHeight]
-  ].forEach(function([shapeType, expectedPointCount, getW, getH]) {
-    it(`should add a ${shapeType} shape that renders a properly translated polygon element`, function() {
-      const mockRender = MockRender();
-      const mockSvg = MockSvg();
-      addToRender(mockRender);
-
-      [[100, 100], [123, 45], [71, 300]].forEach(function([width, height]) {
-        const shape = mockRender.shapes()[shapeType](mockSvg, { width, height }, {});
-        const dx = -getW(width, height) / 2;
-        const dy = getH(width, height) / 2;
-        const points = shape.__attrs.points.split(' ');
-        expect(shape.__tag).toEqual('polygon');
-        expect(shape.__attrs).toHaveProperty('transform', `translate(${dx},${dy})`);
-        expect(points).toHaveLength(expectedPointCount);
-      });
-    });
-  });
-});
-
-function MockRender() {
-  const shapes = {};
-  return {
-    shapes() {
-      return shapes;
-    }
-  };
-}
-
-function MockSvg(tag, ...args) {
-  const children = [];
-  const attributes = {};
-  return {
-    get __args() {
-      return args;
-    },
-    get __tag() {
-      return tag;
-    },
-    get __children() {
-      return children;
-    },
-    get __attrs() {
-      return attributes;
-    },
-    insert: function(tag, ...args) {
-      const child = MockSvg(tag, ...args);
-      children.push(child);
-      return child;
-    },
-    attr(name, value) {
-      this.__attrs[name] = value;
-      return this;
-    }
-  };
-}
-
-function useWidth(w, h) {
-  return w;
-}
-
-function useHeight(w, h) {
-  return h;
-}
--- a/src/diagrams/flowchart-v2/flowDb.js
+++ b/src/diagrams/flowchart-v2/flowDb.js
@ -1,644 +0,0 @@
-import * as d3 from 'd3';
-import { logger } from '../../logger';
-import utils from '../../utils';
-import { getConfig } from '../../config';
-import common from '../common/common';
-
-// const MERMAID_DOM_ID_PREFIX = 'mermaid-dom-id-';
-const MERMAID_DOM_ID_PREFIX = '';
-
-const config = getConfig();
-let vertices = {};
-let edges = [];
-let classes = [];
-let subGraphs = [];
-let subGraphLookup = {};
-let tooltips = {};
-let subCount = 0;
-let firstGraphFlag = true;
-let direction;
-// Functions to be run after graph rendering
-let funs = [];
-
-/**
- * Function called by parser when a node definition has been found
- * @param id
- * @param text
- * @param type
- * @param style
- * @param classes
- */
-export const addVertex = function(_id, text, type, style, classes) {
-  let txt;
-  let id = _id;
-  if (typeof id === 'undefined') {
-    return;
-  }
-  if (id.trim().length === 0) {
-    return;
-  }
-
-  if (id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
-
-  if (typeof vertices[id] === 'undefined') {
-    vertices[id] = { id: id, styles: [], classes: [] };
-  }
-  if (typeof text !== 'undefined') {
-    txt = common.sanitizeText(text.trim(), config);
-
-    // strip quotes if string starts and ends with a quote
-    if (txt[0] === '"' && txt[txt.length - 1] === '"') {
-      txt = txt.substring(1, txt.length - 1);
-    }
-
-    vertices[id].text = txt;
-  } else {
-    if (typeof vertices[id].text === 'undefined') {
-      vertices[id].text = _id;
-    }
-  }
-  if (typeof type !== 'undefined') {
-    vertices[id].type = type;
-  }
-  if (typeof style !== 'undefined') {
-    if (style !== null) {
-      style.forEach(function(s) {
-        vertices[id].styles.push(s);
-      });
-    }
-  }
-  if (typeof classes !== 'undefined') {
-    if (classes !== null) {
-      classes.forEach(function(s) {
-        vertices[id].classes.push(s);
-      });
-    }
-  }
-};
-
-/**
- * Function called by parser when a link/edge definition has been found
- * @param start
- * @param end
- * @param type
- * @param linktext
- */
-export const addSingleLink = function(_start, _end, type, linktext) {
-  let start = _start;
-  let end = _end;
-  if (start[0].match(/\d/)) start = MERMAID_DOM_ID_PREFIX + start;
-  if (end[0].match(/\d/)) end = MERMAID_DOM_ID_PREFIX + end;
-  logger.info('Got edge...', start, end);
-
-  const edge = { start: start, end: end, type: undefined, text: '' };
-  linktext = type.text;
-
-  if (typeof linktext !== 'undefined') {
-    edge.text = common.sanitizeText(linktext.trim(), config);
-
-    // strip quotes if string starts and exnds with a quote
-    if (edge.text[0] === '"' && edge.text[edge.text.length - 1] === '"') {
-      edge.text = edge.text.substring(1, edge.text.length - 1);
-    }
-  }
-
-  if (typeof type !== 'undefined') {
-    edge.type = type.type;
-    edge.stroke = type.stroke;
-  }
-  edges.push(edge);
-};
-export const addLink = function(_start, _end, type, linktext) {
-  let i, j;
-  for (i = 0; i < _start.length; i++) {
-    for (j = 0; j < _end.length; j++) {
-      addSingleLink(_start[i], _end[j], type, linktext);
-    }
-  }
-};
-
-/**
- * Updates a link's line interpolation algorithm
- * @param pos
- * @param interpolate
- */
-export const updateLinkInterpolate = function(positions, interp) {
-  positions.forEach(function(pos) {
-    if (pos === 'default') {
-      edges.defaultInterpolate = interp;
-    } else {
-      edges[pos].interpolate = interp;
-    }
-  });
-};
-
-/**
- * Updates a link with a style
- * @param pos
- * @param style
- */
-export const updateLink = function(positions, style) {
-  positions.forEach(function(pos) {
-    if (pos === 'default') {
-      edges.defaultStyle = style;
-    } else {
-      if (utils.isSubstringInArray('fill', style) === -1) {
-        style.push('fill:none');
-      }
-      edges[pos].style = style;
-    }
-  });
-};
-
-export const addClass = function(id, style) {
-  if (typeof classes[id] === 'undefined') {
-    classes[id] = { id: id, styles: [], textStyles: [] };
-  }
-
-  if (typeof style !== 'undefined') {
-    if (style !== null) {
-      style.forEach(function(s) {
-        if (s.match('color')) {
-          const newStyle1 = s.replace('fill', 'bgFill');
-          const newStyle2 = newStyle1.replace('color', 'fill');
-          classes[id].textStyles.push(newStyle2);
-        }
-        classes[id].styles.push(s);
-      });
-    }
-  }
-};
-
-/**
- * Called by parser when a graph definition is found, stores the direction of the chart.
- * @param dir
- */
-export const setDirection = function(dir) {
-  direction = dir;
-  if (direction.match(/.*</)) {
-    direction = 'RL';
-  }
-  if (direction.match(/.*\^/)) {
-    direction = 'BT';
-  }
-  if (direction.match(/.*>/)) {
-    direction = 'LR';
-  }
-  if (direction.match(/.*v/)) {
-    direction = 'TB';
-  }
-};
-
-/**
- * Called by parser when a special node is found, e.g. a clickable element.
- * @param ids Comma separated list of ids
- * @param className Class to add
- */
-export const setClass = function(ids, className) {
-  ids.split(',').forEach(function(_id) {
-    let id = _id;
-    if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
-    if (typeof vertices[id] !== 'undefined') {
-      vertices[id].classes.push(className);
-    }
-
-    if (typeof subGraphLookup[id] !== 'undefined') {
-      subGraphLookup[id].classes.push(className);
-    }
-  });
-};
-
-const setTooltip = function(ids, tooltip) {
-  ids.split(',').forEach(function(id) {
-    if (typeof tooltip !== 'undefined') {
-      tooltips[id] = common.sanitizeText(tooltip, config);
-    }
-  });
-};
-
-const setClickFun = function(_id, functionName) {
-  let id = _id;
-  if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
-  if (config.securityLevel !== 'loose') {
-    return;
-  }
-  if (typeof functionName === 'undefined') {
-    return;
-  }
-  if (typeof vertices[id] !== 'undefined') {
-    funs.push(function() {
-      const elem = document.querySelector(`[id="${id}"]`);
-      if (elem !== null) {
-        elem.addEventListener(
-          'click',
-          function() {
-            window[functionName](id);
-          },
-          false
-        );
-      }
-    });
-  }
-};
-
-/**
- * Called by parser when a link is found. Adds the URL to the vertex data.
- * @param ids Comma separated list of ids
- * @param linkStr URL to create a link for
- * @param tooltip Tooltip for the clickable element
- */
-export const setLink = function(ids, linkStr, tooltip) {
-  ids.split(',').forEach(function(_id) {
-    let id = _id;
-    if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
-    if (typeof vertices[id] !== 'undefined') {
-      vertices[id].link = utils.formatUrl(linkStr, config);
-    }
-  });
-  setTooltip(ids, tooltip);
-  setClass(ids, 'clickable');
-};
-export const getTooltip = function(id) {
-  return tooltips[id];
-};
-
-/**
- * Called by parser when a click definition is found. Registers an event handler.
- * @param ids Comma separated list of ids
- * @param functionName Function to be called on click
- * @param tooltip Tooltip for the clickable element
- */
-export const setClickEvent = function(ids, functionName, tooltip) {
-  ids.split(',').forEach(function(id) {
-    setClickFun(id, functionName);
-  });
-  setTooltip(ids, tooltip);
-  setClass(ids, 'clickable');
-};
-
-export const bindFunctions = function(element) {
-  funs.forEach(function(fun) {
-    fun(element);
-  });
-};
-export const getDirection = function() {
-  return direction.trim();
-};
-/**
- * Retrieval function for fetching the found nodes after parsing has completed.
- * @returns {{}|*|vertices}
- */
-export const getVertices = function() {
-  return vertices;
-};
-
-/**
- * Retrieval function for fetching the found links after parsing has completed.
- * @returns {{}|*|edges}
- */
-export const getEdges = function() {
-  return edges;
-};
-
-/**
- * Retrieval function for fetching the found class definitions after parsing has completed.
- * @returns {{}|*|classes}
- */
-export const getClasses = function() {
-  return classes;
-};
-
-const setupToolTips = function(element) {
-  let tooltipElem = d3.select('.mermaidTooltip');
-  if ((tooltipElem._groups || tooltipElem)[0][0] === null) {
-    tooltipElem = d3
-      .select('body')
-      .append('div')
-      .attr('class', 'mermaidTooltip')
-      .style('opacity', 0);
-  }
-
-  const svg = d3.select(element).select('svg');
-
-  const nodes = svg.selectAll('g.node');
-  nodes
-    .on('mouseover', function() {
-      const el = d3.select(this);
-      const title = el.attr('title');
-      // Dont try to draw a tooltip if no data is provided
-      if (title === null) {
-        return;
-      }
-      const rect = this.getBoundingClientRect();
-
-      tooltipElem
-        .transition()
-        .duration(200)
-        .style('opacity', '.9');
-      tooltipElem
-        .html(el.attr('title'))
-        .style('left', rect.left + (rect.right - rect.left) / 2 + 'px')
-        .style('top', rect.top - 14 + document.body.scrollTop + 'px');
-      el.classed('hover', true);
-    })
-    .on('mouseout', function() {
-      tooltipElem
-        .transition()
-        .duration(500)
-        .style('opacity', 0);
-      const el = d3.select(this);
-      el.classed('hover', false);
-    });
-};
-funs.push(setupToolTips);
-
-/**
- * Clears the internal graph db so that a new graph can be parsed.
- */
-export const clear = function() {
-  vertices = {};
-  classes = {};
-  edges = [];
-  funs = [];
-  funs.push(setupToolTips);
-  subGraphs = [];
-  subGraphLookup = {};
-  subCount = 0;
-  tooltips = [];
-  firstGraphFlag = true;
-};
-/**
- *
- * @returns {string}
- */
-export const defaultStyle = function() {
-  return 'fill:#ffa;stroke: #f66; stroke-width: 3px; stroke-dasharray: 5, 5;fill:#ffa;stroke: #666;';
-};
-
-/**
- * Clears the internal graph db so that a new graph can be parsed.
- */
-export const addSubGraph = function(_id, list, _title) {
-  let id = _id.trim();
-  let title = _title;
-  if (_id === _title && _title.match(/\s/)) {
-    id = undefined;
-  }
-  function uniq(a) {
-    const prims = { boolean: {}, number: {}, string: {} };
-    const objs = [];
-
-    return a.filter(function(item) {
-      const type = typeof item;
-      if (item.trim() === '') {
-        return false;
-      }
-      if (type in prims) {
-        return prims[type].hasOwnProperty(item) ? false : (prims[type][item] = true); // eslint-disable-line
-      } else {
-        return objs.indexOf(item) >= 0 ? false : objs.push(item);
-      }
-    });
-  }
-
-  let nodeList = [];
-
-  nodeList = uniq(nodeList.concat.apply(nodeList, list));
-  for (let i = 0; i < nodeList.length; i++) {
-    if (nodeList[i][0].match(/\d/)) nodeList[i] = MERMAID_DOM_ID_PREFIX + nodeList[i];
-  }
-
-  id = id || 'subGraph' + subCount;
-  if (id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
-  title = title || '';
-  title = common.sanitizeText(title, config);
-  subCount = subCount + 1;
-  const subGraph = { id: id, nodes: nodeList, title: title.trim(), classes: [] };
-  subGraphs.push(subGraph);
-  subGraphLookup[id] = subGraph;
-  return id;
-};
-
-const getPosForId = function(id) {
-  for (let i = 0; i < subGraphs.length; i++) {
-    if (subGraphs[i].id === id) {
-      return i;
-    }
-  }
-  return -1;
-};
-let secCount = -1;
-const posCrossRef = [];
-const indexNodes2 = function(id, pos) {
-  const nodes = subGraphs[pos].nodes;
-  secCount = secCount + 1;
-  if (secCount > 2000) {
-    return;
-  }
-  posCrossRef[secCount] = pos;
-  // Check if match
-  if (subGraphs[pos].id === id) {
-    return {
-      result: true,
-      count: 0
-    };
-  }
-
-  let count = 0;
-  let posCount = 1;
-  while (count < nodes.length) {
-    const childPos = getPosForId(nodes[count]);
-    // Ignore regular nodes (pos will be -1)
-    if (childPos >= 0) {
-      const res = indexNodes2(id, childPos);
-      if (res.result) {
-        return {
-          result: true,
-          count: posCount + res.count
-        };
-      } else {
-        posCount = posCount + res.count;
-      }
-    }
-    count = count + 1;
-  }
-
-  return {
-    result: false,
-    count: posCount
-  };
-};
-
-export const getDepthFirstPos = function(pos) {
-  return posCrossRef[pos];
-};
-export const indexNodes = function() {
-  secCount = -1;
-  if (subGraphs.length > 0) {
-    indexNodes2('none', subGraphs.length - 1, 0);
-  }
-};
-
-export const getSubGraphs = function() {
-  return subGraphs;
-};
-
-export const firstGraph = () => {
-  if (firstGraphFlag) {
-    firstGraphFlag = false;
-    return true;
-  }
-  return false;
-};
-
-const destructStartLink = _str => {
-  const str = _str.trim();
-
-  switch (str) {
-    case '<--':
-      return { type: 'arrow', stroke: 'normal' };
-    case 'x--':
-      return { type: 'arrow_cross', stroke: 'normal' };
-    case 'o--':
-      return { type: 'arrow_circle', stroke: 'normal' };
-    case '<-.':
-      return { type: 'arrow', stroke: 'dotted' };
-    case 'x-.':
-      return { type: 'arrow_cross', stroke: 'dotted' };
-    case 'o-.':
-      return { type: 'arrow_circle', stroke: 'dotted' };
-    case '<==':
-      return { type: 'arrow', stroke: 'thick' };
-    case 'x==':
-      return { type: 'arrow_cross', stroke: 'thick' };
-    case 'o==':
-      return { type: 'arrow_circle', stroke: 'thick' };
-    case '--':
-      return { type: 'arrow_open', stroke: 'normal' };
-    case '==':
-      return { type: 'arrow_open', stroke: 'thick' };
-    case '-.':
-      return { type: 'arrow_open', stroke: 'dotted' };
-  }
-};
-
-const destructEndLink = _str => {
-  const str = _str.trim();
-
-  switch (str) {
-    case '--x':
-      return { type: 'arrow_cross', stroke: 'normal' };
-    case '-->':
-      return { type: 'arrow', stroke: 'normal' };
-    case '<-->':
-      return { type: 'double_arrow_point', stroke: 'normal' };
-    case 'x--x':
-      return { type: 'double_arrow_cross', stroke: 'normal' };
-    case 'o--o':
-      return { type: 'double_arrow_circle', stroke: 'normal' };
-    case 'o.-o':
-      return { type: 'double_arrow_circle', stroke: 'dotted' };
-    case '<==>':
-      return { type: 'double_arrow_point', stroke: 'thick' };
-    case 'o==o':
-      return { type: 'double_arrow_circle', stroke: 'thick' };
-    case 'x==x':
-      return { type: 'double_arrow_cross', stroke: 'thick' };
-    case 'x.-x':
-      return { type: 'double_arrow_cross', stroke: 'dotted' };
-    case 'x-.-x':
-      return { type: 'double_arrow_cross', stroke: 'dotted' };
-    case '<.->':
-      return { type: 'double_arrow_point', stroke: 'dotted' };
-    case '<-.->':
-      return { type: 'double_arrow_point', stroke: 'dotted' };
-    case 'o-.-o':
-      return { type: 'double_arrow_circle', stroke: 'dotted' };
-    case '--o':
-      return { type: 'arrow_circle', stroke: 'normal' };
-    case '---':
-      return { type: 'arrow_open', stroke: 'normal' };
-    case '-.-x':
-      return { type: 'arrow_cross', stroke: 'dotted' };
-    case '-.->':
-      return { type: 'arrow', stroke: 'dotted' };
-    case '-.-o':
-      return { type: 'arrow_circle', stroke: 'dotted' };
-    case '-.-':
-      return { type: 'arrow_open', stroke: 'dotted' };
-    case '.-x':
-      return { type: 'arrow_cross', stroke: 'dotted' };
-    case '.->':
-      return { type: 'arrow', stroke: 'dotted' };
-    case '.-o':
-      return { type: 'arrow_circle', stroke: 'dotted' };
-    case '.-':
-      return { type: 'arrow_open', stroke: 'dotted' };
-    case '==x':
-      return { type: 'arrow_cross', stroke: 'thick' };
-    case '==>':
-      return { type: 'arrow', stroke: 'thick' };
-    case '==o':
-      return { type: 'arrow_circle', stroke: 'thick' };
-    case '===':
-      return { type: 'arrow_open', stroke: 'thick' };
-  }
-};
-
-const destructLink = (_str, _startStr) => {
-  const info = destructEndLink(_str);
-  let startInfo;
-  if (_startStr) {
-    startInfo = destructStartLink(_startStr);
-
-    if (startInfo.stroke !== info.stroke) {
-      return { type: 'INVALID', stroke: 'INVALID' };
-    }
-
-    if (startInfo.type === 'arrow_open') {
-      // -- xyz -->  - take arrow type form ending
-      startInfo.type = info.type;
-    } else {
-      // x-- xyz -->  - not supported
-      if (startInfo.type !== info.type) return { type: 'INVALID', stroke: 'INVALID' };
-
-      startInfo.type = 'double_' + startInfo.type;
-    }
-
-    if (startInfo.type === 'double_arrow') {
-      startInfo.type = 'double_arrow_point';
-    }
-
-    return startInfo;
-  }
-
-  return info;
-};
-
-export default {
-  addVertex,
-  addLink,
-  updateLinkInterpolate,
-  updateLink,
-  addClass,
-  setDirection,
-  setClass,
-  getTooltip,
-  setClickEvent,
-  setLink,
-  bindFunctions,
-  getDirection,
-  getVertices,
-  getEdges,
-  getClasses,
-  clear,
-  defaultStyle,
-  addSubGraph,
-  getDepthFirstPos,
-  indexNodes,
-  getSubGraphs,
-  destructLink,
-  lex: {
-    firstGraph
-  }
-};
--- a/src/diagrams/flowchart/flowChartShapes.js
+++ b/src/diagrams/flowchart/flowChartShapes.js
@ -242,6 +242,31 @@ export function addToRender(render) {
  render.shapes().rect_right_inv_arrow = rect_right_inv_arrow;
 }

+export function addToRenderV2(addShape) {
+  addShape({ question });
+  addShape({ hexagon });
+  addShape({ stadium });
+  addShape({ cylinder });
+
+  // Add custom shape for box with inverted arrow on left side
+  addShape({ rect_left_inv_arrow });
+
+  // Add custom shape for box with inverted arrow on left side
+  addShape({ lean_right });
+
+  // Add custom shape for box with inverted arrow on left side
+  addShape({ lean_left });
+
+  // Add custom shape for box with inverted arrow on left side
+  addShape({ trapezoid });
+
+  // Add custom shape for box with inverted arrow on left side
+  addShape({ inv_trapezoid });
+
+  // Add custom shape for box with inverted arrow on right side
+  addShape({ rect_right_inv_arrow });
+}
+
 function insertPolygonShape(parent, w, h, points) {
  return parent
    .insert('polygon', ':first-child')
@ -257,5 +282,6 @@ function insertPolygonShape(parent, w, h, points) {
 }

 export default {
-  addToRender
+  addToRender,
+  addToRenderV2
 };
--- a/src/diagrams/flowchart/flowDb.js
+++ b/src/diagrams/flowchart/flowDb.js
@ -1,5 +1,5 @@
 import * as d3 from 'd3';
-import { logger } from '../../logger';
+import { logger } from '../../logger'; // eslint-disable-line
 import utils from '../../utils';
 import { getConfig } from '../../config';
 import common from '../common/common';
@ -88,7 +88,7 @@ export const addSingleLink = function(_start, _end, type, linktext) {
  let end = _end;
  if (start[0].match(/\d/)) start = MERMAID_DOM_ID_PREFIX + start;
  if (end[0].match(/\d/)) end = MERMAID_DOM_ID_PREFIX + end;
-  logger.info('Got edge...', start, end);
+  // logger.info('Got edge...', start, end);

  const edge = { start: start, end: end, type: undefined, text: '' };
  linktext = type.text;
@ -496,19 +496,19 @@ const destructStartLink = _str => {

  switch (str) {
    case '<--':
-      return { type: 'arrow', stroke: 'normal' };
+      return { type: 'arrow_point', stroke: 'normal' };
    case 'x--':
      return { type: 'arrow_cross', stroke: 'normal' };
    case 'o--':
      return { type: 'arrow_circle', stroke: 'normal' };
    case '<-.':
-      return { type: 'arrow', stroke: 'dotted' };
+      return { type: 'arrow_point', stroke: 'dotted' };
    case 'x-.':
      return { type: 'arrow_cross', stroke: 'dotted' };
    case 'o-.':
      return { type: 'arrow_circle', stroke: 'dotted' };
    case '<==':
-      return { type: 'arrow', stroke: 'thick' };
+      return { type: 'arrow_point', stroke: 'thick' };
    case 'x==':
      return { type: 'arrow_cross', stroke: 'thick' };
    case 'o==':
@ -529,7 +529,7 @@ const destructEndLink = _str => {
    case '--x':
      return { type: 'arrow_cross', stroke: 'normal' };
    case '-->':
-      return { type: 'arrow', stroke: 'normal' };
+      return { type: 'arrow_point', stroke: 'normal' };
    case '<-->':
      return { type: 'double_arrow_point', stroke: 'normal' };
    case 'x--x':
@ -561,7 +561,7 @@ const destructEndLink = _str => {
    case '-.-x':
      return { type: 'arrow_cross', stroke: 'dotted' };
    case '-.->':
-      return { type: 'arrow', stroke: 'dotted' };
+      return { type: 'arrow_point', stroke: 'dotted' };
    case '-.-o':
      return { type: 'arrow_circle', stroke: 'dotted' };
    case '-.-':
@ -569,7 +569,7 @@ const destructEndLink = _str => {
    case '.-x':
      return { type: 'arrow_cross', stroke: 'dotted' };
    case '.->':
-      return { type: 'arrow', stroke: 'dotted' };
+      return { type: 'arrow_point', stroke: 'dotted' };
    case '.-o':
      return { type: 'arrow_circle', stroke: 'dotted' };
    case '.-':
@ -577,7 +577,7 @@ const destructEndLink = _str => {
    case '==x':
      return { type: 'arrow_cross', stroke: 'thick' };
    case '==>':
-      return { type: 'arrow', stroke: 'thick' };
+      return { type: 'arrow_point', stroke: 'thick' };
    case '==o':
      return { type: 'arrow_circle', stroke: 'thick' };
    case '===':
--- a/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/src/diagrams/flowchart/flowRenderer-v2.js
@ -1,15 +1,15 @@
 import graphlib from 'graphlib';
 import * as d3 from 'd3';
+import dagre from 'dagre';

-import flowDb from '../flowchart/flowDb';
-import flow from '../flowchart/parser/flow';
+import flowDb from './flowDb';
+import flow from './parser/flow';
 import { getConfig } from '../../config';

-import dagreD3 from 'dagre-d3';
+import { render } from '../../dagre-wrapper/index.js';
 import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
 import { logger } from '../../logger';
 import { interpolateToCurve, getStylesFromArray } from '../../utils';
-import flowChartShapes from '../flowchart/flowChartShapes';

 const conf = {};
 export const setConf = function(cnf) {
@ -20,7 +20,7 @@ export const setConf = function(cnf) {
 };

 /**
- * Function that adds the vertices found in the graph definition to the graph to be rendered.
+ * Function that adds the vertices found during parsing to the graph to be rendered.
 * @param vert Object containing the vertices.
 * @param g The graph that is to be drawn.
 */
@ -134,11 +134,31 @@ export const addVertices = function(vert, g, svgId) {
      labelStyle: styles.labelStyle,
      shape: _shape,
      label: vertexNode,
+      labelText: vertexText,
      rx: radious,
      ry: radious,
      class: classStr,
      style: styles.style,
-      id: vertex.id
+      id: vertex.id,
+      width: vertex.type === 'group' ? 500 : undefined,
+      type: vertex.type,
+      padding: getConfig().flowchart.padding
+    });
+
+    logger.info('setNode', {
+      labelType: 'svg',
+      labelStyle: styles.labelStyle,
+      shape: _shape,
+      label: vertexNode,
+      labelText: vertexText,
+      rx: radious,
+      ry: radious,
+      class: classStr,
+      style: styles.style,
+      id: vertex.id,
+      width: vertex.type === 'group' ? 500 : undefined,
+      type: vertex.type,
+      padding: getConfig().flowchart.padding
    });
  });
 };
@ -163,13 +183,14 @@ export const addEdges = function(edges, g) {
  edges.forEach(function(edge) {
    cnt++;
    const edgeData = {};
-
+    edgeData.id = 'id' + cnt;
    // Set link type for rendering
    if (edge.type === 'arrow_open') {
      edgeData.arrowhead = 'none';
    } else {
      edgeData.arrowhead = 'normal';
    }
+    edgeData.arrowType = edge.type;

    let style = '';
    let labelStyle = '';
@ -307,6 +328,7 @@ export const draw = function(text, id) {

  const edges = flowDb.getEdges();

+  logger.info(edges);
  let i = 0;
  for (i = subGraphs.length - 1; i >= 0; i--) {
    subG = subGraphs[i];
@ -320,57 +342,16 @@ export const draw = function(text, id) {
  addVertices(vert, g, id);
  addEdges(edges, g);

-  // Create the renderer
-  const Render = dagreD3.render;
-  const render = new Render();
-
  // Add custom shapes
-  flowChartShapes.addToRender(render);
-
-  // Add our custom arrow - an empty arrowhead
-  render.arrows().none = function normal(parent, id, edge, type) {
-    const marker = parent
-      .append('marker')
-      .attr('id', id)
-      .attr('viewBox', '0 0 10 10')
-      .attr('refX', 9)
-      .attr('refY', 5)
-      .attr('markerUnits', 'strokeWidth')
-      .attr('markerWidth', 8)
-      .attr('markerHeight', 6)
-      .attr('orient', 'auto');
-
-    const path = marker.append('path').attr('d', 'M 0 0 L 0 0 L 0 0 z');
-    dagreD3.util.applyStyle(path, edge[type + 'Style']);
-  };
-
-  // Override normal arrowhead defined in d3. Remove style & add class to allow css styling.
-  render.arrows().normal = function normal(parent, id) {
-    const marker = parent
-      .append('marker')
-      .attr('id', id)
-      .attr('viewBox', '0 0 10 10')
-      .attr('refX', 9)
-      .attr('refY', 5)
-      .attr('markerUnits', 'strokeWidth')
-      .attr('markerWidth', 8)
-      .attr('markerHeight', 6)
-      .attr('orient', 'auto');
-
-    marker
-      .append('path')
-      .attr('d', 'M 0 0 L 10 5 L 0 10 z')
-      .attr('class', 'arrowheadPath')
-      .style('stroke-width', 1)
-      .style('stroke-dasharray', '1,0');
-  };
+  // flowChartShapes.addToRenderV2(addShape);

  // Set up an SVG group so that we can translate the final graph.
  const svg = d3.select(`[id="${id}"]`);

  // Run the renderer. This is what draws the final graph.
  const element = d3.select('#' + id + ' g');
-  render(element, g);
+  render(element, g, ['point', 'circle', 'cross'], 'flowchart', id);
+  dagre.layout(g);

  element.selectAll('g.node').attr('title', function() {
    return flowDb.getTooltip(this.id);
--- a/src/diagrams/flowchart/parser/flow-arrows.spec.js
+++ b/src/diagrams/flowchart/parser/flow-arrows.spec.js
@ -23,7 +23,7 @@ describe('[Arrows] when parsing', () => {
    expect(edges.length).toBe(1);
    expect(edges[0].start).toBe('A');
    expect(edges[0].end).toBe('B');
-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
    expect(edges[0].text).toBe('');
  });

@ -41,7 +41,7 @@ describe('[Arrows] when parsing', () => {
    expect(edges.length).toBe(1);
    expect(edges[0].start).toBe('A');
    expect(edges[0].end).toBe('B');
-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
    expect(edges[0].text).toBe('');
  });

@ -59,7 +59,7 @@ describe('[Arrows] when parsing', () => {
    expect(edges.length).toBe(1);
    expect(edges[0].start).toBe('A');
    expect(edges[0].end).toBe('B');
-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
    expect(edges[0].text).toBe('');
  });

@ -77,7 +77,7 @@ describe('[Arrows] when parsing', () => {
    expect(edges.length).toBe(1);
    expect(edges[0].start).toBe('A');
    expect(edges[0].end).toBe('B');
-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
    expect(edges[0].text).toBe('');
  });

@ -95,7 +95,7 @@ describe('[Arrows] when parsing', () => {
    expect(edges.length).toBe(1);
    expect(edges[0].start).toBe('A');
    expect(edges[0].end).toBe('B');
-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
    expect(edges[0].text).toBe('');
  });

@ -110,7 +110,7 @@ describe('[Arrows] when parsing', () => {
    expect(edges.length).toBe(1);
    expect(edges[0].start).toBe('A');
    expect(edges[0].end).toBe('B');
-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
    expect(edges[0].text).toBe('');
  });

@ -125,7 +125,7 @@ describe('[Arrows] when parsing', () => {
    expect(edges.length).toBe(1);
    expect(edges[0].start).toBe('A');
    expect(edges[0].end).toBe('B');
-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
    expect(edges[0].text).toBe('');
  });

@ -140,7 +140,7 @@ describe('[Arrows] when parsing', () => {
    expect(edges.length).toBe(2);
    expect(edges[1].start).toBe('B');
    expect(edges[1].end).toBe('C');
-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
    expect(edges[0].text).toBe('');
  });

--- a/src/diagrams/flowchart/parser/flow-comments.spec.js
+++ b/src/diagrams/flowchart/parser/flow-comments.spec.js
@ -23,7 +23,7 @@ describe('[Comments] when parsing', () => {
    expect(edges.length).toBe(1);
    expect(edges[0].start).toBe('A');
    expect(edges[0].end).toBe('B');
-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
    expect(edges[0].text).toBe('');
  });

@ -38,7 +38,7 @@ describe('[Comments] when parsing', () => {
    expect(edges.length).toBe(1);
    expect(edges[0].start).toBe('A');
    expect(edges[0].end).toBe('B');
-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
    expect(edges[0].text).toBe('');
  });

@ -53,7 +53,7 @@ describe('[Comments] when parsing', () => {
    expect(edges.length).toBe(1);
    expect(edges[0].start).toBe('A');
    expect(edges[0].end).toBe('B');
-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
    expect(edges[0].text).toBe('');
  });

@ -68,7 +68,7 @@ describe('[Comments] when parsing', () => {
    expect(edges.length).toBe(1);
    expect(edges[0].start).toBe('A');
    expect(edges[0].end).toBe('B');
-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
    expect(edges[0].text).toBe('');
  });

@ -83,7 +83,7 @@ describe('[Comments] when parsing', () => {
    expect(edges.length).toBe(1);
    expect(edges[0].start).toBe('A');
    expect(edges[0].end).toBe('B');
-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
    expect(edges[0].text).toBe('');
  });

@ -98,7 +98,7 @@ describe('[Comments] when parsing', () => {
    expect(edges.length).toBe(1);
    expect(edges[0].start).toBe('A');
    expect(edges[0].end).toBe('B');
-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
    expect(edges[0].text).toBe('');
  });

@ -113,7 +113,7 @@ describe('[Comments] when parsing', () => {
    expect(edges.length).toBe(1);
    expect(edges[0].start).toBe('A');
    expect(edges[0].end).toBe('B');
-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
    expect(edges[0].text).toBe('');
  });

@ -128,7 +128,7 @@ describe('[Comments] when parsing', () => {
    expect(edges.length).toBe(1);
    expect(edges[0].start).toBe('A');
    expect(edges[0].end).toBe('B');
-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
    expect(edges[0].text).toBe('');
  });

@ -145,7 +145,7 @@ describe('[Comments] when parsing', () => {
    expect(edges.length).toBe(1);
    expect(edges[0].start).toBe('A');
    expect(edges[0].end).toBe('B');
-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
    expect(edges[0].text).toBe('');
  });
 });
--- a/src/diagrams/flowchart/parser/flow-huge.spec.js
+++ b/src/diagrams/flowchart/parser/flow-huge.spec.js
@ -19,7 +19,7 @@ describe('[Text] when parsing', () => {
      const vert = flow.parser.yy.getVertices();
      const edges = flow.parser.yy.getEdges();

-      expect(edges[0].type).toBe('arrow');
+      expect(edges[0].type).toBe('arrow_point');
      expect(edges.length).toBe(47917);
      console.log(vert);
      expect(Object.keys(vert).length).toBe(2);
--- a/src/diagrams/flowchart/parser/flow-style.spec.js
+++ b/src/diagrams/flowchart/parser/flow-style.spec.js
@ -273,7 +273,7 @@ describe('[Style] when parsing', () => {
    const vert = flow.parser.yy.getVertices();
    const edges = flow.parser.yy.getEdges();

-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
  });

  it('should handle multi-numbered style definitons with more then 1 digit in a row', function() {
@ -297,7 +297,7 @@ describe('[Style] when parsing', () => {
    const vert = flow.parser.yy.getVertices();
    const edges = flow.parser.yy.getEdges();

-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
  });

  it('should handle classDefs with style in classes', function() {
@ -306,7 +306,7 @@ describe('[Style] when parsing', () => {
    const vert = flow.parser.yy.getVertices();
    const edges = flow.parser.yy.getEdges();

-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
  });

  it('should handle classDefs with % in classes', function() {
@ -317,6 +317,6 @@ describe('[Style] when parsing', () => {
    const vert = flow.parser.yy.getVertices();
    const edges = flow.parser.yy.getEdges();

-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
  });
 });
--- a/src/diagrams/flowchart/parser/flow-text.spec.js
+++ b/src/diagrams/flowchart/parser/flow-text.spec.js
@ -74,7 +74,7 @@ describe('[Text] when parsing', () => {
      const vert = flow.parser.yy.getVertices();
      const edges = flow.parser.yy.getEdges();

-      expect(edges[0].type).toBe('arrow');
+      expect(edges[0].type).toBe('arrow_point');
      expect(edges[0].text).toBe('text including URL space and send');
    });
    it('should handle space and send', function() {
@ -83,7 +83,7 @@ describe('[Text] when parsing', () => {
      const vert = flow.parser.yy.getVertices();
      const edges = flow.parser.yy.getEdges();

-      expect(edges[0].type).toBe('arrow');
+      expect(edges[0].type).toBe('arrow_point');
      expect(edges[0].text).toBe('text including URL space and send');
    });

@ -380,7 +380,7 @@ describe('[Text] when parsing', () => {
    const edges = flow.parser.yy.getEdges();

    expect(edges[0].type).toBe('arrow_circle');
-    expect(edges[1].type).toBe('arrow');
+    expect(edges[1].type).toBe('arrow_point');
    expect(vert['A'].id).toBe('A');
    expect(vert['B'].id).toBe('B');
    expect(vert['C'].id).toBe('C');
--- a/src/diagrams/flowchart/parser/flow-vertice-chaining.spec.js
+++ b/src/diagrams/flowchart/parser/flow-vertice-chaining.spec.js
@ -27,11 +27,11 @@ describe('when parsing flowcharts', function() {
    expect(edges.length).toBe(2);
    expect(edges[0].start).toBe('A');
    expect(edges[0].end).toBe('B');
-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
    expect(edges[0].text).toBe('');
    expect(edges[1].start).toBe('B');
    expect(edges[1].end).toBe('C');
-    expect(edges[1].type).toBe('arrow');
+    expect(edges[1].type).toBe('arrow_point');
    expect(edges[1].text).toBe('');
  });
  it('should handle chaining of vertices', function() {
@ -49,11 +49,11 @@ describe('when parsing flowcharts', function() {
    expect(edges.length).toBe(2);
    expect(edges[0].start).toBe('A');
    expect(edges[0].end).toBe('C');
-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
    expect(edges[0].text).toBe('');
    expect(edges[1].start).toBe('B');
    expect(edges[1].end).toBe('C');
-    expect(edges[1].type).toBe('arrow');
+    expect(edges[1].type).toBe('arrow_point');
    expect(edges[1].text).toBe('');
  });
  it('should multiple vertices in link statement in the begining', function() {
@ -71,11 +71,11 @@ describe('when parsing flowcharts', function() {
    expect(edges.length).toBe(2);
    expect(edges[0].start).toBe('A');
    expect(edges[0].end).toBe('B');
-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
    expect(edges[0].text).toBe('');
    expect(edges[1].start).toBe('A');
    expect(edges[1].end).toBe('C');
-    expect(edges[1].type).toBe('arrow');
+    expect(edges[1].type).toBe('arrow_point');
    expect(edges[1].text).toBe('');
  });
  it('should multiple vertices in link statement at the end', function() {
@ -94,19 +94,19 @@ describe('when parsing flowcharts', function() {
    expect(edges.length).toBe(4);
    expect(edges[0].start).toBe('A');
    expect(edges[0].end).toBe('C');
-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
    expect(edges[0].text).toBe('');
    expect(edges[1].start).toBe('A');
    expect(edges[1].end).toBe('D');
-    expect(edges[1].type).toBe('arrow');
+    expect(edges[1].type).toBe('arrow_point');
    expect(edges[1].text).toBe('');
    expect(edges[2].start).toBe('B');
    expect(edges[2].end).toBe('C');
-    expect(edges[2].type).toBe('arrow');
+    expect(edges[2].type).toBe('arrow_point');
    expect(edges[2].text).toBe('');
    expect(edges[3].start).toBe('B');
    expect(edges[3].end).toBe('D');
-    expect(edges[3].type).toBe('arrow');
+    expect(edges[3].type).toBe('arrow_point');
    expect(edges[3].text).toBe('');
  });
  it('should handle chaining of vertices at both ends at once', function() {
@ -125,19 +125,19 @@ describe('when parsing flowcharts', function() {
    expect(edges.length).toBe(4);
    expect(edges[0].start).toBe('A');
    expect(edges[0].end).toBe('C');
-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
    expect(edges[0].text).toBe('');
    expect(edges[1].start).toBe('A');
    expect(edges[1].end).toBe('D');
-    expect(edges[1].type).toBe('arrow');
+    expect(edges[1].type).toBe('arrow_point');
    expect(edges[1].text).toBe('');
    expect(edges[2].start).toBe('B');
    expect(edges[2].end).toBe('C');
-    expect(edges[2].type).toBe('arrow');
+    expect(edges[2].type).toBe('arrow_point');
    expect(edges[2].text).toBe('');
    expect(edges[3].start).toBe('B');
    expect(edges[3].end).toBe('D');
-    expect(edges[3].type).toBe('arrow');
+    expect(edges[3].type).toBe('arrow_point');
    expect(edges[3].text).toBe('');
  });
  it('should handle chaining and multiple nodes in in link statement FVC ', function() {
@ -157,27 +157,27 @@ describe('when parsing flowcharts', function() {
    expect(edges.length).toBe(6);
    expect(edges[0].start).toBe('A');
    expect(edges[0].end).toBe('B');
-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
    expect(edges[0].text).toBe('');
    expect(edges[1].start).toBe('A');
    expect(edges[1].end).toBe('B2');
-    expect(edges[1].type).toBe('arrow');
+    expect(edges[1].type).toBe('arrow_point');
    expect(edges[1].text).toBe('');
    expect(edges[2].start).toBe('A');
    expect(edges[2].end).toBe('C');
-    expect(edges[2].type).toBe('arrow');
+    expect(edges[2].type).toBe('arrow_point');
    expect(edges[2].text).toBe('');
    expect(edges[3].start).toBe('B');
    expect(edges[3].end).toBe('D2');
-    expect(edges[3].type).toBe('arrow');
+    expect(edges[3].type).toBe('arrow_point');
    expect(edges[3].text).toBe('');
    expect(edges[4].start).toBe('B2');
    expect(edges[4].end).toBe('D2');
-    expect(edges[4].type).toBe('arrow');
+    expect(edges[4].type).toBe('arrow_point');
    expect(edges[4].text).toBe('');
    expect(edges[5].start).toBe('C');
    expect(edges[5].end).toBe('D2');
-    expect(edges[5].type).toBe('arrow');
+    expect(edges[5].type).toBe('arrow_point');
    expect(edges[5].text).toBe('');
  });
  it('should handle chaining and multiple nodes in in link statement with extra info in statements', function() {
@ -203,19 +203,19 @@ describe('when parsing flowcharts', function() {
    expect(edges.length).toBe(4);
    expect(edges[0].start).toBe('A');
    expect(edges[0].end).toBe('B');
-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
    expect(edges[0].text).toBe('hello');
    expect(edges[1].start).toBe('A');
    expect(edges[1].end).toBe('C');
-    expect(edges[1].type).toBe('arrow');
+    expect(edges[1].type).toBe('arrow_point');
    expect(edges[1].text).toBe('hello');
    expect(edges[2].start).toBe('B');
    expect(edges[2].end).toBe('D');
-    expect(edges[2].type).toBe('arrow');
+    expect(edges[2].type).toBe('arrow_point');
    expect(edges[2].text).toBe('');
    expect(edges[3].start).toBe('C');
    expect(edges[3].end).toBe('D');
-    expect(edges[3].type).toBe('arrow');
+    expect(edges[3].type).toBe('arrow_point');
    expect(edges[3].text).toBe('');
  });
 });
--- a/src/diagrams/flowchart/parser/flow.spec.js
+++ b/src/diagrams/flowchart/parser/flow.spec.js
@ -23,7 +23,7 @@ describe('when parsing ', function() {
    expect(edges.length).toBe(2);
    expect(edges[0].start).toBe('A');
    expect(edges[0].end).toBe('B');
-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
    expect(edges[0].text).toBe('');
  });

--- a/src/diagrams/flowchart/parser/subgraph.spec.js
+++ b/src/diagrams/flowchart/parser/subgraph.spec.js
@ -93,7 +93,7 @@ describe('when parsing subgraphs', function() {
    const vert = flow.parser.yy.getVertices();
    const edges = flow.parser.yy.getEdges();

-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
  });
  it('should handle subgraphs with title in quotes', function() {
    const res = flow.parser.parse('graph TD;A-->B;subgraph "title in quotes";c-->d;end;');
@ -107,7 +107,7 @@ describe('when parsing subgraphs', function() {

    expect(subgraph.title).toBe('title in quotes');

-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
  });
  it('should handle subgraphs in old style that was broken', function() {
    const res = flow.parser.parse('graph TD;A-->B;subgraph old style that is broken;c-->d;end;');
@ -121,7 +121,7 @@ describe('when parsing subgraphs', function() {

    expect(subgraph.title).toBe('old style that is broken');

-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
  });
  it('should handle subgraphs with dashes in the title', function() {
    const res = flow.parser.parse('graph TD;A-->B;subgraph a-b-c;c-->d;end;');
@ -135,7 +135,7 @@ describe('when parsing subgraphs', function() {

    expect(subgraph.title).toBe('a-b-c');

-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
  });
  it('should handle subgraphs with id and title in brackets', function() {
    const res = flow.parser.parse('graph TD;A-->B;subgraph uid1[text of doom];c-->d;end;');
@ -150,7 +150,7 @@ describe('when parsing subgraphs', function() {
    expect(subgraph.title).toBe('text of doom');
    expect(subgraph.id).toBe('uid1');

-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
  });
  it('should handle subgraphs with id and title in brackets and quotes', function() {
    const res = flow.parser.parse('graph TD;A-->B;subgraph uid2["text of doom"];c-->d;end;');
@ -165,7 +165,7 @@ describe('when parsing subgraphs', function() {
    expect(subgraph.title).toBe('text of doom');
    expect(subgraph.id).toBe('uid2');

-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
  });
  it('should handle subgraphs with id and title in brackets without spaces', function() {
    const res = flow.parser.parse('graph TD;A-->B;subgraph uid2[textofdoom];c-->d;end;');
@ -180,7 +180,7 @@ describe('when parsing subgraphs', function() {
    expect(subgraph.title).toBe('textofdoom');
    expect(subgraph.id).toBe('uid2');

-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
  });

  it('should handle subgraphs2', function() {
@ -189,7 +189,7 @@ describe('when parsing subgraphs', function() {
    const vert = flow.parser.yy.getVertices();
    const edges = flow.parser.yy.getEdges();

-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
  });

  it('should handle subgraphs3', function() {
@ -198,7 +198,7 @@ describe('when parsing subgraphs', function() {
    const vert = flow.parser.yy.getVertices();
    const edges = flow.parser.yy.getEdges();

-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
  });

  it('should handle nested subgraphs', function() {
@ -219,7 +219,7 @@ describe('when parsing subgraphs', function() {
    const vert = flow.parser.yy.getVertices();
    const edges = flow.parser.yy.getEdges();

-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
  });

  it('should handle subgraphs5', function() {
@ -228,7 +228,7 @@ describe('when parsing subgraphs', function() {
    const vert = flow.parser.yy.getVertices();
    const edges = flow.parser.yy.getEdges();

-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
  });
  it('should handle subgraphs with multi node statements in it', function() {
    const res = flow.parser.parse('graph TD\nA-->B\nsubgraph myTitle\na & b --> c & e\n end;');
@ -236,6 +236,6 @@ describe('when parsing subgraphs', function() {
    const vert = flow.parser.yy.getVertices();
    const edges = flow.parser.yy.getEdges();

-    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].type).toBe('arrow_point');
  });
 });
--- a/src/diagrams/state/parser/stateDiagram.jison
+++ b/src/diagrams/state/parser/stateDiagram.jison
@ -71,6 +71,7 @@
 <NOTE_TEXT>\s*[^:;]+"end note"       { this.popState();/*console.log('Got NOTE_TEXT for note',yytext);*/yytext = yytext.slice(0,-8).trim();return 'NOTE_TEXT';}

 "stateDiagram"\s+                   { /*console.log('Got state diagram', yytext,'#');*/return 'SD'; }
+"stateDiagram-v2"\s+                   { /*console.log('Got state diagram', yytext,'#');*/return 'SD'; }
 "hide empty description"    { /*console.log('HIDE_EMPTY', yytext,'#');*/return 'HIDE_EMPTY'; }
 <INITIAL,struct>"[*]"                   { /*console.log('EDGE_STATE=',yytext);*/ return 'EDGE_STATE';}
 <INITIAL,struct>[^:\n\s\-\{]+                { /*console.log('=>ID=',yytext);*/ return 'ID';}
@ -113,7 +114,7 @@ line

 statement
 	: idStatement { /*console.warn('got id and descr', $1);*/$$={ stmt: 'state', id: $1, type: 'default', description: ''};}
-	| idStatement DESCR { /*console.warn('got id and descr', $1, $2.trim());*/$$={ stmt: 'state', id: $1, type: 'default', description: $2.trim()};}
+	| idStatement DESCR { /*console.warn('got id and descr', $1, $2.trim());*/$$={ stmt: 'state', id: $1, type: 'default', description: yy.trimColon($2)};}
 	| idStatement '-->' idStatement
    {
        /*console.warn('got id', $1);yy.addRelation($1, $3);*/
--- a/src/diagrams/state/stateDb.js
+++ b/src/diagrams/state/stateDb.js
@ -3,11 +3,33 @@ import { logger } from '../../logger';
 let rootDoc = [];
 const setRootDoc = o => {
  logger.info('Setting root doc', o);
-  rootDoc = o;
+  rootDoc = { id: 'root', doc: o };
 };

 const getRootDoc = () => rootDoc;

+const docTranslator = (parent, node, first) => {
+  if (node.stmt === 'relation') {
+    docTranslator(parent, node.state1, true);
+    docTranslator(parent, node.state2, false);
+  } else {
+    if (node.stmt === 'state') {
+      if (node.id === '[*]') {
+        node.id = first ? parent.id + '_start' : parent.id + '_end';
+        node.start = first;
+      }
+    }
+
+    if (node.doc) {
+      node.doc.forEach(docNode => docTranslator(node, docNode, true));
+    }
+  }
+};
+const getRootDocV2 = () => {
+  docTranslator({ id: 'root' }, rootDoc, true);
+  return rootDoc;
+};
+
 const extract = doc => {
  // const res = { states: [], relations: [] };
  clear();
@ -145,6 +167,12 @@ const getDividerId = () => {
  return 'divider-id-' + dividerCnt;
 };

+const classes = [];
+
+const getClasses = () => classes;
+
+const getDirection = () => 'TB';
+
 export const relationType = {
  AGGREGATION: 0,
  EXTENSION: 1,
@ -152,12 +180,16 @@ export const relationType = {
  DEPENDENCY: 3
 };

+const trimColon = str => (str && str[0] === ':' ? str.substr(1).trim() : str.trim());
+
 export default {
  addState,
  clear,
  getState,
  getStates,
  getRelations,
+  getClasses,
+  getDirection,
  addRelation,
  getDividerId,
  // addDescription,
@ -167,5 +199,7 @@ export default {
  logDocuments,
  getRootDoc,
  setRootDoc,
-  extract
+  getRootDocV2,
+  extract,
+  trimColon
 };
--- a/src/diagrams/state/stateRenderer-v2.js
+++ b/src/diagrams/state/stateRenderer-v2.js
@ -0,0 +1,304 @@
+import graphlib from 'graphlib';
+import * as d3 from 'd3';
+import stateDb from './stateDb';
+import state from './parser/stateDiagram';
+import { getConfig } from '../../config';
+
+import { render } from '../../dagre-wrapper/index.js';
+import { logger } from '../../logger';
+
+const conf = {};
+export const setConf = function(cnf) {
+  const keys = Object.keys(cnf);
+  for (let i = 0; i < keys.length; i++) {
+    conf[keys[i]] = cnf[keys[i]];
+  }
+};
+
+const nodeDb = {};
+
+/**
+ * Returns the all the styles from classDef statements in the graph definition.
+ * @returns {object} classDef styles
+ */
+export const getClasses = function(text) {
+  logger.trace('Extracting classes');
+  stateDb.clear();
+  const parser = state.parser;
+  parser.yy = stateDb;
+
+  // Parse the graph definition
+  parser.parse(text);
+  return stateDb.getClasses();
+};
+
+const setupNode = (g, parent, node, altFlag) => {
+  // Add the node
+  if (node.id !== 'root') {
+    let shape = 'rect';
+    if (node.start === true) {
+      shape = 'start';
+    }
+    if (node.start === false) {
+      shape = 'end';
+    }
+
+    if (!nodeDb[node.id]) {
+      nodeDb[node.id] = {
+        id: node.id,
+        shape,
+        description: node.id,
+        classes: 'statediagram-state'
+      };
+    }
+
+    // Description
+    if (node.description) {
+      nodeDb[node.id].description = node.description;
+    }
+
+    // Save data for description and group so that for instance a statement without description overwrites
+    // one with description
+
+    // group
+    if (!nodeDb[node.id].type && node.doc) {
+      logger.info('Setting cluser for ', node.id);
+      nodeDb[node.id].type = 'group';
+      nodeDb[node.id].shape = 'roundedWithTitle';
+      nodeDb[node.id].classes =
+        nodeDb[node.id].classes +
+        ' ' +
+        (altFlag ? 'statediagram-cluster statediagram-cluster-alt' : 'statediagram-cluster');
+    }
+
+    const nodeData = {
+      labelType: 'svg',
+      labelStyle: '',
+      shape: nodeDb[node.id].shape,
+      label: node.id,
+      labelText: nodeDb[node.id].description,
+      classes: nodeDb[node.id].classes, //classStr,
+      style: '', //styles.style,
+      id: node.id,
+      type: nodeDb[node.id].type,
+      padding: 15 //getConfig().flowchart.padding
+    };
+
+    if (node.note) {
+      // Todo: set random id
+      const noteData = {
+        labelType: 'svg',
+        labelStyle: '',
+        shape: 'note',
+        label: node.id,
+        labelText: node.note.text,
+        classes: 'statediagram-note', //classStr,
+        style: '', //styles.style,
+        id: node.id + '----note',
+        type: nodeDb[node.id].type,
+        padding: 15 //getConfig().flowchart.padding
+      };
+      const groupData = {
+        labelType: 'svg',
+        labelStyle: '',
+        shape: 'noteGroup',
+        label: node.id + '----parent',
+        labelText: node.note.text,
+        classes: nodeDb[node.id].classes, //classStr,
+        style: '', //styles.style,
+        id: node.id + '----parent',
+        type: 'group',
+        padding: 0 //getConfig().flowchart.padding
+      };
+      g.setNode(node.id + '----parent', groupData);
+
+      g.setNode(noteData.id, noteData);
+      g.setNode(node.id, nodeData);
+
+      g.setParent(node.id, node.id + '----parent');
+      g.setParent(noteData.id, node.id + '----parent');
+
+      let from = node.id;
+      let to = noteData.id;
+
+      if (node.note.position === 'left of') {
+        from = noteData.id;
+        to = node.id;
+      }
+      g.setEdge(from, to, {
+        arrowhead: 'none',
+        arrowType: '',
+        style: 'fill:none',
+        labelStyle: '',
+        classes: 'note-edge',
+        arrowheadStyle: 'fill: #333',
+        labelpos: 'c',
+        labelType: 'text',
+        label: ''
+      });
+    } else {
+      g.setNode(node.id, nodeData);
+    }
+  }
+
+  if (parent) {
+    if (parent.id !== 'root') {
+      logger.trace('Setting node ', node.id, ' to be child of its parent ', parent.id);
+      g.setParent(node.id, parent.id);
+    }
+  }
+  if (node.doc) {
+    logger.trace('Adding nodes children ');
+    setupDoc(g, node, node.doc, !altFlag);
+  }
+};
+let cnt = 0;
+const setupDoc = (g, parent, doc, altFlag) => {
+  logger.trace('items', doc);
+  doc.forEach(item => {
+    if (item.stmt === 'state' || item.stmt === 'default') {
+      setupNode(g, parent, item, altFlag);
+    } else if (item.stmt === 'relation') {
+      setupNode(g, parent, item.state1, altFlag);
+      setupNode(g, parent, item.state2, altFlag);
+      const edgeData = {
+        arrowhead: 'normal',
+        arrowType: 'arrow_barb',
+        style: 'fill:none',
+        labelStyle: '',
+        arrowheadStyle: 'fill: #333',
+        labelpos: 'c',
+        labelType: 'text',
+        label: ''
+      };
+      let startId = item.state1.id;
+      let endId = item.state2.id;
+
+      g.setEdge(startId, endId, edgeData, cnt);
+      cnt++;
+    }
+  });
+};
+
+/**
+ * Draws a flowchart in the tag with id: id based on the graph definition in text.
+ * @param text
+ * @param id
+ */
+export const draw = function(text, id) {
+  logger.info('Drawing state diagram (v2)', id);
+  stateDb.clear();
+  const parser = state.parser;
+  parser.yy = stateDb;
+
+  // Parse the graph definition
+  try {
+    parser.parse(text);
+  } catch (err) {
+    logger.debug('Parsing failed');
+  }
+
+  // Fetch the default direction, use TD if none was found
+  let dir = stateDb.getDirection();
+  if (typeof dir === 'undefined') {
+    dir = 'LR';
+  }
+
+  const conf = getConfig().state;
+  const nodeSpacing = conf.nodeSpacing || 50;
+  const rankSpacing = conf.rankSpacing || 50;
+
+  // Create the input mermaid.graph
+  const g = new graphlib.Graph({
+    multigraph: true,
+    compound: true
+  })
+    .setGraph({
+      rankdir: 'LR',
+      nodesep: nodeSpacing,
+      ranksep: rankSpacing,
+      marginx: 8,
+      marginy: 8
+    })
+    .setDefaultEdgeLabel(function() {
+      return {};
+    });
+
+  // logger.info(stateDb.getRootDoc());
+  stateDb.extract(stateDb.getRootDocV2().doc);
+  logger.info(stateDb.getRootDocV2());
+  setupNode(g, undefined, stateDb.getRootDocV2(), true);
+
+  // Set up an SVG group so that we can translate the final graph.
+  const svg = d3.select(`[id="${id}"]`);
+
+  // Run the renderer. This is what draws the final graph.
+  const element = d3.select('#' + id + ' g');
+  render(element, g, ['barb'], 'statediagram', id);
+
+  const padding = 8;
+  // const svgBounds = svg.node().getBBox();
+  // const width = svgBounds.width + padding * 2;
+  // const height = svgBounds.height + padding * 2;
+  // logger.debug(
+  //   `new ViewBox 0 0 ${width} ${height}`,
+  //   `translate(${padding + g._label.marginx}, ${padding + g._label.marginy})`
+  // );
+
+  // if (conf.useMaxWidth) {
+  //   svg.attr('width', '100%');
+  //   svg.attr('style', `max-width: ${width}px;`);
+  // } else {
+  //   svg.attr('height', height);
+  //   svg.attr('width', width);
+  // }
+
+  // svg.attr('viewBox', `0 0 ${width} ${height}`);
+  // svg
+  //   .select('g')
+  //   .attr('transform', `translate(${padding - g._label.marginx}, ${padding - svgBounds.y})`);
+
+  const bounds = svg.node().getBBox();
+
+  const width = bounds.width + padding * 2;
+  const height = bounds.height + padding * 2;
+
+  // diagram.attr('height', '100%');
+  // diagram.attr('style', `width: ${bounds.width * 3 + conf.padding * 2};`);
+  // diagram.attr('height', height);
+
+  // Zoom in a bit
+  svg.attr('width', width * 1.75);
+  svg.attr('class', 'statediagram');
+  // diagram.attr('height', bounds.height * 3 + conf.padding * 2);
+  svg.attr(
+    'viewBox',
+    `${bounds.x - conf.padding}  ${bounds.y - conf.padding} ` + width + ' ' + height
+  );
+
+  // Add label rects for non html labels
+  if (!conf.htmlLabels) {
+    const labels = document.querySelectorAll('[id="' + id + '"] .edgeLabel .label');
+    for (let k = 0; k < labels.length; k++) {
+      const label = labels[k];
+
+      // Get dimensions of label
+      const dim = label.getBBox();
+
+      const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+      rect.setAttribute('rx', 0);
+      rect.setAttribute('ry', 0);
+      rect.setAttribute('width', dim.width);
+      rect.setAttribute('height', dim.height);
+      rect.setAttribute('style', 'fill:#e8e8e8;');
+
+      label.insertBefore(rect, label.firstChild);
+    }
+  }
+};
+
+export default {
+  setConf,
+  getClasses,
+  draw
+};
--- a/src/diagrams/state/stateRenderer.js
+++ b/src/diagrams/state/stateRenderer.js
@ -75,10 +75,6 @@ export const draw = function(text, id) {
  const width = bounds.width + padding * 2;
  const height = bounds.height + padding * 2;

-  // diagram.attr('height', '100%');
-  // diagram.attr('style', `width: ${bounds.width * 3 + conf.padding * 2};`);
-  // diagram.attr('height', height);
-
  // Zoom in a bit
  diagram.attr('width', width * 1.75);
  // diagram.attr('height', bounds.height * 3 + conf.padding * 2);
@ -86,15 +82,6 @@ export const draw = function(text, id) {
    'viewBox',
    `${bounds.x - conf.padding}  ${bounds.y - conf.padding} ` + width + ' ' + height
  );
-  // diagram.attr('transform', `translate(, 0)`);
-
-  // diagram.attr(
-  //   'viewBox',
-  //   `${conf.padding * -1} ${conf.padding * -1} ` +
-  //     (bounds.width * 1.5 + conf.padding * 2) +
-  //     ' ' +
-  //     (bounds.height + conf.padding * 5)
-  // );
 };
 const getLabelWidth = text => {
  return text ? text.length * conf.fontSizeFactor : 1;
--- a/src/experimental.js
+++ b/src/experimental.js
@ -1,41 +0,0 @@
-import dagre from 'dagre';
-
-// Create a new directed graph
-var g = new dagre.graphlib.Graph({ compound: true });
-
-// Set an object for the graph label
-g.setGraph({});
-
-// Default to assigning a new object as a label for each new edge.
-g.setDefaultEdgeLabel(function() {
-  return {};
-});
-
-// Add nodes to the graph. The first argument is the node id. The second is
-// metadata about the node. In this case we're going to add labels to each of
-// our nodes.
-g.setNode('root', { label: 'Cluster' });
-g.setNode('kspacey', { label: 'Kevin Spacey', width: 144, height: 100, x: 200 });
-// g.setParent('kspacey', 'root');
-g.setNode('swilliams', { label: 'Saul Williams', width: 160, height: 100 });
-// g.setNode('bpitt', { label: 'Brad Pitt', width: 108, height: 100 });
-// g.setNode('hford', { label: 'Harrison Ford', width: 168, height: 100 });
-// g.setNode('lwilson', { label: 'Luke Wilson', width: 144, height: 100 });
-// g.setNode('kbacon', { label: 'Kevin Bacon', width: 121, height: 100 });
-
-// Add edges to the graph.
-g.setEdge('kspacey', 'swilliams');
-g.setEdge('swilliams');
-// g.setEdge('swilliams', 'kbacon');
-// g.setEdge('bpitt', 'kbacon');
-// g.setEdge('hford', 'lwilson');
-// g.setEdge('lwilson', 'kbacon');
-
-dagre.layout(g);
-
-g.nodes().forEach(function(v) {
-  console.log('Node ' + v + ': ' + JSON.stringify(g.node(v)));
-});
-g.edges().forEach(function(e) {
-  console.log('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(g.edge(e)));
-});
--- a/src/logger.js
+++ b/src/logger.js
@ -17,6 +17,7 @@ export const logger = {
 };

 export const setLogLevel = function(level) {
+  logger.trace = () => {};
  logger.debug = () => {};
  logger.info = () => {};
  logger.warn = () => {};
--- a/src/mermaidAPI.js
+++ b/src/mermaidAPI.js
@ -17,7 +17,7 @@ import { setConfig, getConfig } from './config';
 import { logger, setLogLevel } from './logger';
 import utils from './utils';
 import flowRenderer from './diagrams/flowchart/flowRenderer';
-import flowRendererV2 from './diagrams/flowchart-v2/flowRenderer';
+import flowRendererV2 from './diagrams/flowchart/flowRenderer-v2';
 import flowParser from './diagrams/flowchart/parser/flow';
 import flowDb from './diagrams/flowchart/flowDb';
 import sequenceRenderer from './diagrams/sequence/sequenceRenderer';
@ -30,6 +30,7 @@ import classRenderer from './diagrams/class/classRenderer';
 import classParser from './diagrams/class/parser/classDiagram';
 import classDb from './diagrams/class/classDb';
 import stateRenderer from './diagrams/state/stateRenderer';
+import stateRendererV2 from './diagrams/state/stateRenderer-v2';
 import stateParser from './diagrams/state/parser/stateDiagram';
 import stateDb from './diagrams/state/stateDb';
 import gitGraphRenderer from './diagrams/git/gitGraphRenderer';
@ -168,7 +169,10 @@ const config = {
     *   * linear **default**
     *   * cardinal
     */
-    curve: 'linear'
+    curve: 'linear',
+    // Only used in new experimental rendering
+    // repreesents the padding between the labels and the shape
+    padding: 15
  },

  /**
@ -442,6 +446,10 @@ function parse(text) {
      parser = stateParser;
      parser.parser.yy = stateDb;
      break;
+    case 'stateDiagram':
+      parser = stateParser;
+      parser.parser.yy = stateDb;
+      break;
    case 'info':
      logger.debug('info info info');
      parser = infoParser;
@ -669,6 +677,11 @@ const render = function(id, _txt, cb, container) {
      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);
--- a/src/themes/state.scss
+++ b/src/themes/state.scss
@ -67,3 +67,52 @@ g.stateGroup line {
  font-family: 'trebuchet ms', verdana, arial;
  font-family: var(--mermaid-font-family);
 }
+
+.node circle.state-start {
+  fill: black;
+  stroke: black;
+}
+.node circle.state-end {
+  fill: black;
+  stroke: white;
+  stroke-width: 1.5
+}
+#statediagram-barbEnd {
+  fill: $nodeBorder
+}
+
+.statediagram-cluster rect {
+  fill: $nodeBkg;
+  stroke: $nodeBorder;
+  stroke-width: 1px;
+  rx: 5px;
+  ry: 5px;
+}
+.statediagram-cluster.statediagram-cluster .inner {
+  fill: white;
+}
+.statediagram-cluster.statediagram-cluster-alt .inner {
+  fill: #e0e0e0;
+}
+
+.statediagram-cluster .inner {
+  rx:0;
+  ry:0;
+}
+
+.statediagram-state rect {
+  rx: 5px;
+  ry: 5px;
+}
+
+.note-edge {
+  stroke-dasharray: 5;
+}
+
+.statediagram-note rect {
+  fill: $noteBkgColor;
+  stroke: $noteBorderColor;
+  stroke-width: 1px;
+  rx: 0;
+  ry: 0;
+}
--- a/src/utils.js
+++ b/src/utils.js
@ -33,6 +33,9 @@ export const detectType = function(text) {
  if (text.match(/^\s*classDiagram/)) {
    return 'class';
  }
+  if (text.match(/^\s*stateDiagram-v2/)) {
+    return 'stateDiagram';
+  }

  if (text.match(/^\s*stateDiagram/)) {
    return 'state';