diff --git a/src/dagre-wrapper/index.js b/src/dagre-wrapper/index.js
index 3e29d8640..1c684f0a8 100644
--- a/src/dagre-wrapper/index.js
+++ b/src/dagre-wrapper/index.js
@@ -15,6 +15,7 @@ import { logger as log } from '../logger';
 
 const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
   log.info('Graph in recursive render:', graphlib.json.write(graph), parentCluster);
+  const dir = graph.graph().rankdir;
   const elem = _elem.insert('g').attr('class', 'root'); // eslint-disable-line
   if (!graph.nodes()) {
     log.trace('No nodes found for', graph);
@@ -59,7 +60,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
         // insertCluster(clusters, graph.node(v));
       } else {
         log.trace('Node - the non recursive path', v, node.id, node);
-        insertNode(nodes, graph.node(v));
+        insertNode(nodes, graph.node(v), dir);
       }
     }
   });
@@ -138,7 +139,7 @@ export const render = (elem, graph, markers, diagramtype, id) => {
   log.warn('Graph before:', graphlib.json.write(graph));
   adjustClustersAndEdges(graph);
   log.warn('Graph after:', graphlib.json.write(graph));
-
+  log.warn('Graph ever  after:', graph.graph());
   recursiveRender(elem, graph, diagramtype);
 };
 
diff --git a/src/dagre-wrapper/mermaid-graphlib.js b/src/dagre-wrapper/mermaid-graphlib.js
index 786af7b46..c9cbd1fd9 100644
--- a/src/dagre-wrapper/mermaid-graphlib.js
+++ b/src/dagre-wrapper/mermaid-graphlib.js
@@ -329,12 +329,14 @@ export const extractor = (graph, depth) => {
         depth
       );
 
+      const graphSettings = graph.graph();
+
       const clusterGraph = new graphlib.Graph({
         multigraph: true,
         compound: true
       })
         .setGraph({
-          rankdir: 'TB',
+          rankdir: graphSettings.rankdir === 'TB' ? 'LR' : 'TB',
           // Todo: set proper spacing
           nodesep: 50,
           ranksep: 50,
diff --git a/src/dagre-wrapper/nodes.js b/src/dagre-wrapper/nodes.js
index a67d078b5..5da5e6d76 100644
--- a/src/dagre-wrapper/nodes.js
+++ b/src/dagre-wrapper/nodes.js
@@ -404,24 +404,33 @@ const start = (parent, node) => {
   return shapeSvg;
 };
 
-const forkJoin = (parent, node) => {
+const forkJoin = (parent, node, dir) => {
   const shapeSvg = parent
     .insert('g')
     .attr('class', 'node default')
     .attr('id', node.id);
 
+  let width = 70;
+  let height = 10;
+
+  if (dir === 'LR') {
+    width = 10;
+    height = 70;
+  }
+
   const shape = shapeSvg
     .append('rect')
     .style('stroke', 'black')
     .style('fill', 'black')
-    .attr('x', -35)
-    .attr('y', -5)
-    .attr('width', 70)
-    .attr('height', 10)
+    .attr('x', (-1 * width) / 2)
+    .attr('y', (-1 * height) / 2)
+    .attr('width', width)
+    .attr('height', height)
     .attr('class', 'fork-join');
 
   updateNodeBounds(node, shape);
   node.height = node.height + node.padding / 2;
+  node.width = node.width + node.padding / 2;
   node.intersect = function(point) {
     return intersect.rect(node, point);
   };
@@ -481,8 +490,8 @@ const shapes = {
 
 let nodeElems = {};
 
-export const insertNode = (elem, node) => {
-  nodeElems[node.id] = shapes[node.shape](elem, node);
+export const insertNode = (elem, node, dir) => {
+  nodeElems[node.id] = shapes[node.shape](elem, node, dir);
 };
 export const setNodeElem = (elem, node) => {
   nodeElems[node.id] = elem;