From af0d40e907f44aec86fd4d0edc5d441c83afe830 Mon Sep 17 00:00:00 2001
From: phairow <phairow@yahoo.com>
Date: Thu, 2 Jul 2015 14:53:35 -0700
Subject: [PATCH 1/3] Update phantomscript.js

Computing the display size seems to cause the svg rendering to complete bofore saving the image. Referencing issue #181 https://github.com/knsv/mermaid/issues/181
---
 lib/phantomscript.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/lib/phantomscript.js b/lib/phantomscript.js
index 11a0b42d59..2fe4225898 100644
--- a/lib/phantomscript.js
+++ b/lib/phantomscript.js
@@ -256,6 +256,10 @@ function executeInPage(data) {
   svg = document.querySelector('svg')
   svgValue = xmlSerializer.serializeToString(svg)
 
+  // make sure the entire view area is calculated before exiting
+  // this solves an issue where the svg is not done rendering when the image is created
+  svg.getBBox();
+
   //console.log(document.body.outerHTML);
 
   return svgValue

From 4d7f7d075605559f709e8463bae24700b6a2edf5 Mon Sep 17 00:00:00 2001
From: phairow <phairow@yahoo.com>
Date: Thu, 2 Jul 2015 17:32:13 -0700
Subject: [PATCH 2/3] Update phantomscript.js

attempt two at fixing the rendering issue
---
 lib/phantomscript.js | 28 ++++++++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/lib/phantomscript.js b/lib/phantomscript.js
index 2fe4225898..2f3a6513f8 100644
--- a/lib/phantomscript.js
+++ b/lib/phantomscript.js
@@ -254,11 +254,31 @@ function executeInPage(data) {
   mermaid.init();
 
   svg = document.querySelector('svg')
-  svgValue = xmlSerializer.serializeToString(svg)
 
-  // make sure the entire view area is calculated before exiting
-  // this solves an issue where the svg is not done rendering when the image is created
-  svg.getBBox();
+  var boundingBox = svg.getBoundingClientRect(); // the initial bonding box of the svg
+
+  // resizing the body to fit the svg
+  document.body.setAttribute(
+    'style'
+    , 'width: ' + (boundingBox.width * 1.5) + '; height: ' + (boundingBox.height * 1.5) + ';'
+  )
+  // resizing the svg via css for consistent display
+  svg.setAttribute(
+    'style'
+    , 'width: ' + (boundingBox.width * 1.5) + '; height: ' + (boundingBox.height * 1.5) + ';'
+  )
+
+  // set witdth and height attributes used to set the viewport when rending png image
+  svg.setAttribute(
+    'width'
+    , boundingBox.width *  1.5
+  )
+  svg.setAttribute(
+    'height'
+    , boundingBox.height * 1.5  
+  )
+
+  svgValue = xmlSerializer.serializeToString(svg)
 
   //console.log(document.body.outerHTML);
 

From 590fa0894bb84c6818b86f24cda2a8a74eb084fb Mon Sep 17 00:00:00 2001
From: phairow <phairow@yahoo.com>
Date: Thu, 2 Jul 2015 17:52:37 -0700
Subject: [PATCH 3/3] Update phantomscript.js

clean up
---
 lib/phantomscript.js | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/lib/phantomscript.js b/lib/phantomscript.js
index 2f3a6513f8..20a750ce4f 100644
--- a/lib/phantomscript.js
+++ b/lib/phantomscript.js
@@ -210,6 +210,9 @@ function executeInPage(data) {
     , elContent
     , svg
     , svgValue
+    , boundingBox
+    , width
+    , height
 
   toRemove = document.getElementsByClassName('mermaid')
   if (toRemove && toRemove.length) {
@@ -255,27 +258,29 @@ function executeInPage(data) {
 
   svg = document.querySelector('svg')
 
-  var boundingBox = svg.getBoundingClientRect(); // the initial bonding box of the svg
+  boundingBox = svg.getBoundingClientRect(); // the initial bonding box of the svg
+  width = boundingBox.width * 1.5; // adding the scale factor for consistency with output in chrome browser
+  height = boundingBox.height * 1.5; // adding the scale factor for consistency with output in chrome browser
 
   // resizing the body to fit the svg
   document.body.setAttribute(
     'style'
-    , 'width: ' + (boundingBox.width * 1.5) + '; height: ' + (boundingBox.height * 1.5) + ';'
+    , 'width: ' + width + '; height: ' + height + ';'
   )
   // resizing the svg via css for consistent display
   svg.setAttribute(
     'style'
-    , 'width: ' + (boundingBox.width * 1.5) + '; height: ' + (boundingBox.height * 1.5) + ';'
+    , 'width: ' + width + '; height: ' + height + ';'
   )
 
   // set witdth and height attributes used to set the viewport when rending png image
   svg.setAttribute(
     'width'
-    , boundingBox.width *  1.5
+    , width
   )
   svg.setAttribute(
     'height'
-    , boundingBox.height * 1.5  
+    , height
   )
 
   svgValue = xmlSerializer.serializeToString(svg)