mermaid-js#1152 add node spacing to flowchart configuration

cypress/integration/rendering/flowchart.spec.js

@@ -474,4 +474,30 @@ describe('Flowchart', () => {
       { flowchart: { htmlLabels: false } }
     );
   });
+  it('22: Render a simple flowchart with nodeSpacing set to 100', () => {
+    imgSnapshotTest(
+      `graph TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      B --> C{Let me think}
+      %% this is a comment
+      C -->|One| D[Laptop]
+      C -->|Two| E[iPhone]
+      C -->|Three| F[fa:fa-car Car]
+      `,
+      { flowchart: { nodeSpacing: 50 } }
+    );
+  });
+  it('23: Render a simple flowchart with rankSpacing set to 100', () => {
+    imgSnapshotTest(
+      `graph TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      B --> C{Let me think}
+      %% this is a comment
+      C -->|One| D[Laptop]
+      C -->|Two| E[iPhone]
+      C -->|Three| F[fa:fa-car Car]
+      `,
+      { flowchart: { rankSpacing: '100' } }
+    );
+  });
 });

docs/mermaidAPI.md

@@ -27,7 +27,6 @@ mermaid.initialize({
 **Example 2:**
 
 <pre>
- <script>
   var config = {
     startOnLoad:true,
     flowchart:{
@@ -39,8 +38,6 @@ mermaid.initialize({
     securityLevel:'loose',
   };
   mermaid.initialize(config);
-</script>
-
 </pre>
 A summary of all options and their defaults is found [here](https://github.com/knsv/mermaid/blob/master/docs/mermaidAPI.md#mermaidapi-configuration-defaults). A description of each option follows below.
 
@@ -105,6 +102,18 @@ Flag for setting whether or not a html tag should be used for rendering labels
 on the edges.
 **Default value true**.
 
+### nodeSpacing
+
+Defines the spacing between nodes on the same level (meaning horizontal spacing for
+TB or BT graphs, and the vertical spacing for LR as well as RL graphs).
+**Default value 50**.
+
+### rankSpacing
+
+Defines the spacing between nodes on different levels (meaning vertical spacing for
+TB or BT graphs, and the horizontal spacing for LR as well as RL graphs).
+**Default value 50**.
+
 ### curve
 
 How mermaid renders curves for flowcharts. Possible values are

src/diagrams/flowchart/flowRenderer.js

@@ -291,6 +291,10 @@ export const draw = function(text, id) {
     dir = 'TD';
   }
 
+  const conf = getConfig().flowchart;
+  const nodeSpacing = conf.nodeSpacing || 50;
+  const rankSpacing = conf.rankSpacing || 50;
+
   // Create the input mermaid.graph
   let g;
   // Todo remove newDagreD3 when properly verified
@@ -301,6 +305,8 @@ export const draw = function(text, id) {
     })
       .setGraph({
         rankdir: dir,
+        nodesep: nodeSpacing,
+        ranksep: rankSpacing,
         marginx: 8,
         marginy: 8
       })
@@ -314,6 +320,8 @@ export const draw = function(text, id) {
     })
       .setGraph({
         rankdir: dir,
+        nodesep: nodeSpacing,
+        ranksep: rankSpacing,
         marginx: 20,
         marginy: 20
       })
@@ -403,7 +411,6 @@ export const draw = function(text, id) {
     return flowDb.getTooltip(this.id);
   });
 
-  const conf = getConfig().flowchart;
   const padding = 8;
   // Todo remove newDagreD3 when properly verified
   if (newDagreD3) {