diff --git a/browser/components/render/MermaidRender.js b/browser/components/render/MermaidRender.js
index 12dce327c..bac52b2c2 100644
--- a/browser/components/render/MermaidRender.js
+++ b/browser/components/render/MermaidRender.js
@@ -28,6 +28,7 @@ function render (element, content, theme) {
     })
     mermaidAPI.render(getId(), content, (svgGraph) => {
       element.innerHTML = svgGraph
+      element.style.height = element.attributes.getNamedItem('data-height').value + 'vh'
     })
   } catch (e) {
     console.error(e)
diff --git a/browser/lib/markdown.js b/browser/lib/markdown.js
index 49fd2f862..d4bc72e4c 100644
--- a/browser/lib/markdown.js
+++ b/browser/lib/markdown.js
@@ -44,7 +44,7 @@ class Markdown {
           return `<pre class="chart">${str}</pre>`
         }
         if (langType === 'mermaid') {
-          return `<pre class="mermaid">${str}</pre>`
+          return `<pre class="mermaid" data-height="${fileName}">${str}</pre>`
         }
         return '<pre class="code CodeMirror">' +
           '<span class="filename">' + fileName + '</span>' +
diff --git a/browser/styles/index.styl b/browser/styles/index.styl
index 7d32e77a7..8f917fcf1 100644
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -383,4 +383,8 @@ modalmonokai()
   width 100%
   background-color $ui-monokai-backgroundColor
   overflow hidden
-  border-radius $modal-border-radius
\ No newline at end of file
+  border-radius $modal-border-radius
+
+pre.mermaid svg {
+  max-width 100% !important
+}
\ No newline at end of file