diff --git a/demos/flowchart.html b/demos/flowchart.html
index d7032a663..c2e1276fc 100644
--- a/demos/flowchart.html
+++ b/demos/flowchart.html
@@ -1540,6 +1540,30 @@
     </pre>
     <hr />
 
+    <pre class="mermaid">
+      ---
+      title: Subgraph nodeSpacing and rankSpacing example
+      ---
+      %%{init:{'flowchart':{'nodeSpacing': 1, 'rankSpacing':'1'}}}%%
+
+      flowchart LR
+      
+      X --> Y
+      
+      subgraph X
+        direction LR
+        A
+        C
+      end
+      
+      subgraph Y
+        direction LR
+        B
+        D
+      end
+    </pre>
+    <hr />
+
     <h1 id="link-clicked">Anchor for "link-clicked" test</h1>
 
     <script type="module">
diff --git a/packages/mermaid/src/dagre-wrapper/index.js b/packages/mermaid/src/dagre-wrapper/index.js
index 76685dd7b..dfa6db503 100644
--- a/packages/mermaid/src/dagre-wrapper/index.js
+++ b/packages/mermaid/src/dagre-wrapper/index.js
@@ -54,6 +54,10 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster, sit
       if (node && node.clusterNode) {
         // 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()).setDefaultEdgeLabel(function () {
+          return {};
+        });
         const o = await recursiveRender(
           nodes,
           node.graph,