diff --git a/cypress/platform/current.html b/cypress/platform/current.html
index 6bcf91507..cb041e7f4 100644
--- a/cypress/platform/current.html
+++ b/cypress/platform/current.html
@@ -40,22 +40,8 @@
         G-->c
       </div>
       <div class="mermaid" style="width: 50%; height: 20%;">
-stateDiagram-v2
-   [*] --> First
-
-    state First {
-        [*] --> Second
-
-        state Second {
-            [*] --> second
-            second --> Third
-
-            state Third {
-                [*] --> third
-                third --> [*]
-            }
-        }
-    }
+flowchart LR
+    id1[[This is the text in the box]]
 
       </div>
       <div class="mermaid2" style="width: 50%; height: 20%;">
diff --git a/docs/flowchart.md b/docs/flowchart.md
index 970f494e7..2cfd1f191 100644
--- a/docs/flowchart.md
+++ b/docs/flowchart.md
@@ -359,6 +359,40 @@ graph TB
     B --> D
 ```
 
+## Beta: New arrow types
+
+When using flowchart instead of graph there is the are new types of arrows supported as per below:
+
+```
+flowchart LR
+    A --o B
+    B --x C
+```
+
+```mermaid
+flowchart LR
+    A --o B
+    B --x C
+```
+
+
+## Beta: multi directional arrows
+
+When using flowchart instead of graph there is the possibility to use multidirectional arrows.
+
+```
+flowchart LR
+    A o--o B
+    B <--> C
+    C x--x D
+```
+
+```mermaid
+flowchart LR
+    A o--o B
+    B <--> C
+    C x--x D
+```
 
 ## Special characters that break syntax
 
diff --git a/src/dagre-wrapper/nodes.js b/src/dagre-wrapper/nodes.js
index 3a1370f3f..212d6b055 100644
--- a/src/dagre-wrapper/nodes.js
+++ b/src/dagre-wrapper/nodes.js
@@ -384,6 +384,34 @@ const circle = (parent, node) => {
 
   return shapeSvg;
 };
+
+const subroutine = (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, y: 0 },
+    { x: w, y: -h },
+    { x: 0, y: -h },
+    { x: 0, y: 0 },
+    { x: -8, y: 0 },
+    { x: w + 8, y: 0 },
+    { x: w + 8, y: -h },
+    { x: -8, y: -h },
+    { x: -8, y: 0 }
+  ];
+  const el = insertPolygonShape(shapeSvg, w, h, points);
+  updateNodeBounds(node, el);
+
+  node.intersect = function(point) {
+    return intersect.polygon(node, point);
+  };
+
+  return shapeSvg;
+};
+
 const start = (parent, node) => {
   const shapeSvg = parent
     .insert('g')
@@ -487,6 +515,7 @@ const shapes = {
   start,
   end,
   note,
+  subroutine,
   fork: forkJoin,
   join: forkJoin
 };