Merge pull request #1534 from 72636c/feature/er_use_max_width

Add `er.useMaxWidth` config option

docs/Setup.md

@@ -714,9 +714,21 @@ T = top, B = bottom, L = left, and R = right.
 | --------- | ------------------- | ------- | -------- | ------------------ |
 | fontSize  | Font Size in pixels | Integer |          | Any Positive Value |
 
-**Notes:**Font size (expressed as an integer representing a number of  pixels)
+**Notes:**Font size (expressed as an integer representing a number of pixels)
 **Default value: 12 **
 
+### useMaxWidth
+
+| Parameter   | Description | Type    | Required | Values      |
+| ----------- | ----------- | ------- | -------- | ----------- |
+| useMaxWidth | See Notes   | Boolean | Required | true, false |
+
+**Notes:**
+When this flag is set to true, the diagram width is locked to 100% and
+scaled based on available space. If set to false, the diagram reserves its
+absolute width.
+**Default value: true**.
+
 ## render
 
 Function that renders an svg with a graph from a chart definition. Usage example below.
@@ -757,6 +769,17 @@ mermaidAPI.initialize({
     startOnLoad:true,
     arrowMarkerAbsolute:false,
 
+    er:{
+      diagramPadding:20,
+      layoutDirection:'TB',
+      minEntityWidth:100,
+      minEntityHeight:75,
+      entityPadding:15,
+      stroke:'gray',
+      fill:'honeydew',
+      fontSize:12,
+      useMaxWidth:true,
+    },
     flowchart:{
       diagramPadding:8,
       htmlLabels:true,

src/config.js

@@ -811,10 +811,23 @@ const config = {
      *| --- | --- | --- | --- | --- |
      *| fontSize| Font Size in pixels| Integer |  | Any Positive Value |
      *
-     ***Notes:**Font size (expressed as an integer representing a number of  pixels)
+     ***Notes:**Font size (expressed as an integer representing a number of pixels)
      ***Default value: 12 **
      */
-    fontSize: 12
+    fontSize: 12,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| useMaxWidth | See Notes | Boolean | Required | true, false |
+     *
+     ***Notes:**
+     *When this flag is set to true, the diagram width is locked to 100% and
+     *scaled based on available space. If set to false, the diagram reserves its
+     *absolute width.
+     ***Default value: true**.
+     */
+    useMaxWidth: true
   }
 };
 config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;

src/diagrams/er/erRenderer.js

@@ -339,9 +339,14 @@ export const draw = function(text, id) {
   const width = svgBounds.width + padding * 2;
   const height = svgBounds.height + padding * 2;
 
-  svg.attr('height', height);
+  if (conf.useMaxWidth) {
-  svg.attr('width', '100%');
+    svg.attr('width', '100%');
-  svg.attr('style', `max-width: ${width}px;`);
+    svg.attr('style', `max-width: ${width}px;`);
+  } else {
+    svg.attr('height', height);
+    svg.attr('width', width);
+  }
+
   svg.attr('viewBox', `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`);
 }; // draw
 

src/mermaidAPI.js

@@ -576,6 +576,17 @@ export default mermaidAPI;
  *     startOnLoad:true,
  *     arrowMarkerAbsolute:false,
  *
+ *     er:{
+ *       diagramPadding:20,
+ *       layoutDirection:'TB',
+ *       minEntityWidth:100,
+ *       minEntityHeight:75,
+ *       entityPadding:15,
+ *       stroke:'gray',
+ *       fill:'honeydew',
+ *       fontSize:12,
+ *       useMaxWidth:true,
+ *     },
  *     flowchart:{
  *       diagramPadding:8,
  *       htmlLabels:true,