diff --git a/cypress/platform/current.html b/cypress/platform/current.html
index 1e2567ea3..5cdd66332 100644
--- a/cypress/platform/current.html
+++ b/cypress/platform/current.html
@@ -49,14 +49,21 @@
             }
       </div>
       <div class="mermaid" style="width: 50%; height: 20%;">
-    stateDiagram-v2
-    State1: This a a single line description
-    State2: This a a multi line description
-    State2: here comes the multi part
-    a
-    [*] --> State1
-    State1 --> State2
-    State2 --> [*]
+     stateDiagram-v2
+      [*]-->TV
+
+      state TV {
+        state fork_state &lt;&lt;fork&gt;&gt;
+        [*] --> fork_state
+        fork_state --> State2
+        fork_state --> State3
+
+        state join_state &lt;&lt;join&gt;&gt;
+        State2 --> join_state
+        State3 --> join_state
+        join_state --> State4
+        State4 --> [*]
+      }
       </div>
       <div class="mermaid2 mermaid-apa" style="width: 100%; height: 20%;">
         stateDiagram
diff --git a/src/dagre-wrapper/nodes.js b/src/dagre-wrapper/nodes.js
index ee05244ce..a67d078b5 100644
--- a/src/dagre-wrapper/nodes.js
+++ b/src/dagre-wrapper/nodes.js
@@ -320,12 +320,7 @@ const rectWithTitle = (parent, node) => {
     .attr('y', -bbox.height / 2 - halfPadding)
     .attr('width', bbox.width + node.padding)
     .attr('height', bbox.height + node.padding);
-  // innerRect
-  //   .attr('class', 'inner')
-  //   .attr('x', -bbox.width / 2 - halfPadding)
-  //   .attr('y', -bbox.height / 2 - halfPadding + titleBox.height + halfPadding)
-  //   .attr('width', bbox.width + node.padding)
-  //   .attr('height', bbox.height + node.padding - titleBox.height - halfPadding);
+
   innerLine
     .attr('class', 'divider')
     .attr('x1', -bbox.width / 2 - halfPadding)
@@ -408,6 +403,32 @@ const start = (parent, node) => {
 
   return shapeSvg;
 };
+
+const forkJoin = (parent, node) => {
+  const shapeSvg = parent
+    .insert('g')
+    .attr('class', 'node default')
+    .attr('id', node.id);
+
+  const shape = shapeSvg
+    .append('rect')
+    .style('stroke', 'black')
+    .style('fill', 'black')
+    .attr('x', -35)
+    .attr('y', -5)
+    .attr('width', 70)
+    .attr('height', 10)
+    .attr('class', 'fork-join');
+
+  updateNodeBounds(node, shape);
+  node.height = node.height + node.padding / 2;
+  node.intersect = function(point) {
+    return intersect.rect(node, point);
+  };
+
+  return shapeSvg;
+};
+
 const end = (parent, node) => {
   const shapeSvg = parent
     .insert('g')
@@ -453,7 +474,9 @@ const shapes = {
   cylinder,
   start,
   end,
-  note
+  note,
+  fork: forkJoin,
+  join: forkJoin
 };
 
 let nodeElems = {};
diff --git a/src/diagrams/state/stateRenderer-v2.js b/src/diagrams/state/stateRenderer-v2.js
index 1399b44bd..d14e46a09 100644
--- a/src/diagrams/state/stateRenderer-v2.js
+++ b/src/diagrams/state/stateRenderer-v2.js
@@ -42,6 +42,9 @@ const setupNode = (g, parent, node, altFlag) => {
     if (node.start === false) {
       shape = 'end';
     }
+    if (node.type !== 'default') {
+      shape = node.type;
+    }
 
     if (!nodeDb[node.id]) {
       nodeDb[node.id] = {