diff --git a/bower.json b/bower.json
index 6ff59e2..da93a2a 100644
--- a/bower.json
+++ b/bower.json
@@ -28,6 +28,7 @@
     "moment": "~2.10.6",
     "handlebars": "~4.0.5",
     "js-url": "~2.0.2",
-    "socket.io-client": "~1.3.7"
+    "socket.io-client": "~1.3.7",
+    "viz.js": "~1.3.0"
   }
 }
diff --git a/public/js/extra.js b/public/js/extra.js
index efc89cc..07e85ac 100644
--- a/public/js/extra.js
+++ b/public/js/extra.js
@@ -167,6 +167,17 @@ function finishView(view) {
             console.error(err);
         }
     });
+    //graphviz
+    var graphvizs = view.find(".graphviz.raw").removeClass("raw");
+    graphvizs.each(function (key, value) {
+        try {
+            var graphviz = Viz($(value).text());
+            $(value).html(graphviz);
+            $(value).parent().parent().replaceWith(value);
+        } catch (err) {
+            console.error(err);
+        }
+    });
     //image href new window(emoji not included)
     var images = view.find("img.raw[src]").removeClass("raw");
     images.each(function (key, value) {
@@ -536,6 +547,8 @@ function highlightRender(code, lang) {
         return '<div class="sequence-diagram raw">' + code + '</div>';
     } else if (lang == 'flow') {
         return '<div class="flow-chart raw">' + code + '</div>';
+    } else if (lang == 'graphviz') {
+        return '<div class="graphviz raw">' + code + '</div>';
     }
     var reallang = lang.replace(/\=$|\=\d+$|\=\+$/, '');
     var languages = hljs.listLanguages();
diff --git a/public/views/foot.ejs b/public/views/foot.ejs
index 0f2d2f5..ee04d44 100644
--- a/public/views/foot.ejs
+++ b/public/views/foot.ejs
@@ -38,6 +38,7 @@
 <script src="/vendor/lodash.min.js" defer></script>
 <script src="/vendor/sequence-diagrams/sequence-diagram-min.js" defer></script>
 <script src="/vendor/flowchart/flowchart-1.4.0.min.js" defer></script>
+<script src="/vendor/viz.js/viz.js" defer></script>
 <script src="/vendor/FileSaver.min.js" defer></script>
 <script src="/vendor/store.min.js" defer></script>
 <script src="/vendor/js-url/url.min.js" defer></script>
diff --git a/public/views/pretty.ejs b/public/views/pretty.ejs
index 6618c54..46c559f 100644
--- a/public/views/pretty.ejs
+++ b/public/views/pretty.ejs
@@ -76,6 +76,7 @@
 <script src="<%- url %>/vendor/lodash.min.js" defer></script>
 <script src="<%- url %>/vendor/sequence-diagrams/sequence-diagram-min.js" defer></script>
 <script src="<%- url %>/vendor/flowchart/flowchart-1.4.0.min.js" defer></script>
+<script src="<%- url %>/vendor/viz.js/viz.js" defer></script>
 <script src="<%- url %>/vendor/md-toc.js" defer></script>
 <script type="text/x-mathjax-config">
     MathJax.Hub.Config({ messageStyle: "none", skipStartupTypeset: true ,tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']], processEscapes: true }});