diff --git a/packages/mermaid/src/dagre-wrapper/index.js b/packages/mermaid/src/dagre-wrapper/index.js
index a74f15279..57ff0d276 100644
--- a/packages/mermaid/src/dagre-wrapper/index.js
+++ b/packages/mermaid/src/dagre-wrapper/index.js
@@ -53,7 +53,10 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster) =>
         // const children = graph.children(v);
         log.info('Cluster identified', v, node.width, graph.node(v));
         // node.graph.setGraph applies the graph configurations such as nodeSpacing to subgraphs as without this the default values would be used
-        node.graph.setGraph(graph.graph());
+        // We override the `rankdir` variable to allow for the subgraph's direction to override the graphs direction in the subgraph
+        node.graph.setGraph({...graph.graph(), rankdir: node.graph.graph().rankdir});
+        
+
         const o = await recursiveRender(nodes, node.graph, diagramtype, id, graph.node(v));
         const newEl = o.elem;
         updateNodeBounds(node, newEl);