Set SVG viewBox

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "8.0.0-rc.7",
+  "version": "8.0.0-rc.8",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "main": "dist/mermaid.core.js",
   "keywords": [

src/diagrams/flowchart/flowRenderer.js

@@ -406,8 +406,11 @@ export const draw = function (text, id) {
     })
 
   const padding = 8
-  svg.attr('width', g.maxX - g.minX + padding * 2)
-  svg.attr('height', g.maxY - g.minY + padding * 2)
+  const width = g.maxX - g.minX + padding * 2
+  const height = g.maxY - g.minY + padding * 2
+  svg.attr('width', '100%')
+  svg.attr('style', `max-width: ${width}px;`)
+  svg.attr('viewBox', `0 0 ${width} ${height}`)
   svg.select('g').attr('transform', `translate(${padding - g.minX}, ${padding - g.minY})`)
 
   // Index nodes