Merge pull request #1533 from 72636c/feature/config_flowchart_diagram_padding

Add `flowchart.diagramPadding` config option

cypress/integration/rendering/flowchart-v2.spec.js

@@ -0,0 +1,31 @@
+/* eslint-env jest */
+import { imgSnapshotTest } from '../../helpers/util';
+
+describe('Flowchart v2', () => {
+  it('1: should render a simple flowchart', () => {
+    imgSnapshotTest(
+      `flowchart TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      B --> C{Let me think}
+      C -->|One| D[Laptop]
+      C -->|Two| E[iPhone]
+      C -->|Three| F[fa:fa-car Car]
+      `,
+      {}
+    );
+  });
+
+  it('2: should render a simple flowchart with diagramPadding set to 0', () => {
+    imgSnapshotTest(
+      `flowchart 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: { diagramPadding: 0 } }
+    );
+  });
+});

cypress/integration/rendering/flowchart.spec.js

@@ -671,4 +671,18 @@ describe('Flowchart', () => {
       { flowchart: { htmlLabels: false } }
     );
   });
+
+  it('33: should render a simple flowchart with diagramPadding set to 0', () => {
+    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: { diagramPadding: 0 } }
+    );
+  });
 });

docs/Setup.md

@@ -122,6 +122,15 @@ overriding a site's default security.
 
 The object containing configurations specific for flowcharts
 
+### diagramPadding
+
+| Parameter      | Description                                     | Type    | Required | Values             |
+| -------------- | ----------------------------------------------- | ------- | -------- | ------------------ |
+| diagramPadding | amount of padding around the diagram as a whole | Integer | Required | Any Positive Value |
+
+**Notes:**The amount of padding around the diagram as a whole so that embedded diagrams have margins, expressed in pixels
+**Default value: 8**.
+
 ### htmlLabels
 
 | Parameter  | Description                                                                                  | Type    | Required | Values      |
@@ -749,6 +758,7 @@ mermaidAPI.initialize({
     arrowMarkerAbsolute:false,
 
     flowchart:{
+      diagramPadding:8,
       htmlLabels:true,
       curve:'linear',
     },

src/config.js

@@ -118,6 +118,16 @@ const config = {
    * The object containing configurations specific for flowcharts
    */
   flowchart: {
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| diagramPadding | amount of padding around the diagram as a whole | Integer | Required | Any Positive Value |
+     *
+     ***Notes:**The amount of padding around the diagram as a whole so that embedded diagrams have margins, expressed in pixels
+     ***Default value: 8**.
+     */
+    diagramPadding: 8,
+
     /**
      *| Parameter | Description |Type | Required | Values|
      *| --- | --- | --- | --- | --- |

src/diagrams/flowchart/flowRenderer-v2.js

@@ -381,7 +381,7 @@ export const draw = function(text, id) {
     return flowDb.getTooltip(this.id);
   });
 
-  const padding = 8;
+  const padding = conf.diagramPadding;
   const svgBounds = svg.node().getBBox();
   const width = svgBounds.width + padding * 2;
   const height = svgBounds.height + padding * 2;

src/diagrams/flowchart/flowRenderer.js

@@ -394,7 +394,7 @@ export const draw = function(text, id) {
     return flowDb.getTooltip(this.id);
   });
 
-  const padding = 8;
+  const padding = conf.diagramPadding;
   const svgBounds = svg.node().getBBox();
   const width = svgBounds.width + padding * 2;
   const height = svgBounds.height + padding * 2;

src/mermaidAPI.js

@@ -577,6 +577,7 @@ export default mermaidAPI;
  *     arrowMarkerAbsolute:false,
  *
  *     flowchart:{
+ *       diagramPadding:8,
  *       htmlLabels:true,
  *       curve:'linear',
  *     },