From a4992963b3873ec7a566ba91b92596d2a360e3b9 Mon Sep 17 00:00:00 2001
From: Tyler Long <tyler4long@gmail.com>
Date: Thu, 12 Apr 2018 23:05:08 +0800
Subject: [PATCH] Set SVG viewBox

---
 package.json                           | 2 +-
 src/diagrams/flowchart/flowRenderer.js | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 8848c2f91..3c2a5b38f 100644
--- a/package.json
+++ b/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": [
diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js
index c27d7295a..237526505 100644
--- a/src/diagrams/flowchart/flowRenderer.js
+++ b/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