From 44ff608868e75d4d4e1aa09859200d4ea515e3b9 Mon Sep 17 00:00:00 2001
From: Tyler Long <tyler4long@gmail.com>
Date: Thu, 12 Apr 2018 09:06:20 +0800
Subject: [PATCH] ultimate solution to position the svg

---
 package.json                           |  4 ++--
 src/diagrams/flowchart/flowRenderer.js | 21 ++++-----------------
 src/mermaidAPI.js                      |  5 -----
 yarn.lock                              |  6 +++---
 4 files changed, 9 insertions(+), 27 deletions(-)

diff --git a/package.json b/package.json
index 21a545b1e..8848c2f91 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "8.0.0-rc.6",
+  "version": "8.0.0-rc.7",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "main": "dist/mermaid.core.js",
   "keywords": [
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "d3": "^4.13.0",
-    "dagre-d3-renderer": "^0.5.6",
+    "dagre-d3-renderer": "^0.5.8",
     "dagre-layout": "^0.8.8",
     "graphlibrary": "^2.2.0",
     "he": "^1.1.1",
diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js
index accf9eab0..c27d7295a 100644
--- a/src/diagrams/flowchart/flowRenderer.js
+++ b/src/diagrams/flowchart/flowRenderer.js
@@ -405,23 +405,10 @@ export const draw = function (text, id) {
       return flowDb.getTooltip(this.id)
     })
 
-  if (conf.useMaxWidth) {
-    // Center the graph
-    svg.attr('height', '100%')
-    svg.attr('width', conf.width)
-    svg.attr('viewBox', '0 0 ' + (g.graph().width + 64) + ' ' + (g.graph().height + 64))
-    svg.attr('style', 'max-width:' + (g.graph().width + 64) + 'px;')
-  } else {
-    // Center the graph
-    svg.attr('height', g.graph().height + 64)
-    if (typeof conf.width === 'undefined') {
-      svg.attr('width', g.graph().width + 64)
-    } else {
-      svg.attr('width', conf.width)
-    }
-    svg.attr('viewBox', '0 0 ' + (g.graph().width + 64) + ' ' + (g.graph().height + 64))
-  }
-  svg.select('g').attr('transform', 'translate(32, 32)')
+  const padding = 8
+  svg.attr('width', g.maxX - g.minX + padding * 2)
+  svg.attr('height', g.maxY - g.minY + padding * 2)
+  svg.select('g').attr('transform', `translate(${padding - g.minX}, ${padding - g.minY})`)
 
   // Index nodes
   flowDb.indexNodes('subGraph' + i)
diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js
index 7b44085d2..d40c336c4 100644
--- a/src/mermaidAPI.js
+++ b/src/mermaidAPI.js
@@ -83,11 +83,6 @@ const config = {
      * on the edges
      */
     htmlLabels: true,
-    /**
-     * **useMaxWidth** - Flag for setting whether or not a all available width should be used for
-     * the diagram.
-     */
-    useMaxWidth: true,
 
     curve: 'linear'
   },
diff --git a/yarn.lock b/yarn.lock
index 94b5a7b7e..764ee6114 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2202,9 +2202,9 @@ d3@^4.13.0:
     d3-voronoi "1.1.2"
     d3-zoom "1.7.1"
 
-dagre-d3-renderer@^0.5.6:
-  version "0.5.6"
-  resolved "https://registry.yarnpkg.com/dagre-d3-renderer/-/dagre-d3-renderer-0.5.6.tgz#cf85c18e0ee4dba62b69b0697c28d638237bbc89"
+dagre-d3-renderer@^0.5.8:
+  version "0.5.8"
+  resolved "https://registry.yarnpkg.com/dagre-d3-renderer/-/dagre-d3-renderer-0.5.8.tgz#aa071bb71d3c4d67426925906f3f6ddead49c1a3"
   dependencies:
     dagre-layout "^0.8.8"
     lodash "^4.17.5"