ultimate solution to position the svg

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",

src/diagrams/flowchart/flowRenderer.js

@@ -405,23 +405,10 @@ export const draw = function (text, id) {
       return flowDb.getTooltip(this.id)
     })
 
-  if (conf.useMaxWidth) {
+  const padding = 8
-    // Center the graph
+  svg.attr('width', g.maxX - g.minX + padding * 2)
-    svg.attr('height', '100%')
+  svg.attr('height', g.maxY - g.minY + padding * 2)
-    svg.attr('width', conf.width)
+  svg.select('g').attr('transform', `translate(${padding - g.minX}, ${padding - g.minY})`)
-    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)')
 
   // Index nodes
   flowDb.indexNodes('subGraph' + i)

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'
   },

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:
+dagre-d3-renderer@^0.5.8:
-  version "0.5.6"
+  version "0.5.8"
-  resolved "https://registry.yarnpkg.com/dagre-d3-renderer/-/dagre-d3-renderer-0.5.6.tgz#cf85c18e0ee4dba62b69b0697c28d638237bbc89"
+  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"