diff --git a/public/js/extra.js b/public/js/extra.js
index ba6ab12a6..d247df018 100644
--- a/public/js/extra.js
+++ b/public/js/extra.js
@@ -31,7 +31,6 @@ require('prismjs/components/prism-gherkin')
 require('./lib/common/login')
 require('./locale')
 require('../vendor/md-toc')
-const Viz = require('viz.js')
 const ui = getUIElements()
 
 // auto update last change
@@ -367,13 +366,15 @@ export function finishView (view) {
     try {
       $value = $(value)
       const $ele = $(value).parent().parent()
+      require.ensure([], function (require) {
+        const Viz = require('viz.js')
+        const graphviz = Viz($value.text())
+        if (!graphviz) throw Error('viz.js output empty graph')
+        $value.html(graphviz)
 
-      const graphviz = Viz($value.text())
-      if (!graphviz) throw Error('viz.js output empty graph')
-      $value.html(graphviz)
-
-      $ele.addClass('graphviz')
-      $value.children().unwrap().unwrap()
+        $ele.addClass('graphviz')
+        $value.children().unwrap().unwrap()
+      })
     } catch (err) {
       $value.unwrap()
       $value.parent().append(`<div class="alert alert-warning">${escapeHTML(err)}</div>`)
@@ -496,7 +497,7 @@ export function finishView (view) {
       const langDiv = $(value)
       if (langDiv.length > 0) {
         const reallang = langDiv[0].className.replace(/hljs|wrap/g, '').trim()
-        if (reallang === 'mermaid' || reallang === 'abc') {
+        if (reallang === 'mermaid' || reallang === 'abc' || reallang === 'graphviz') {
           return
         }
         const codeDiv = langDiv.find('.code')
diff --git a/webpack.common.js b/webpack.common.js
index 4a10ef9c9..199e209d4 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -253,7 +253,6 @@ module.exports = {
       'expose-loader?exposes=LZString!lz-string',
       'flowchart.js',
       'js-sequence-diagrams',
-      'expose-loader?exposes=Viz!viz.js',
       'expose-loader?exposes=io!socket.io-client',
       'expose-loader?exposes=RevealMarkdown!reveal-markdown',
       path.join(__dirname, 'public/js/index.js')
@@ -284,7 +283,6 @@ module.exports = {
       'expose-loader?exposes=emojify!emojify.js',
       'flowchart.js',
       'js-sequence-diagrams',
-      'expose-loader?exposes=Viz!viz.js',
       'expose-loader?exposes=RevealMarkdown!reveal-markdown',
       path.join(__dirname, 'public/js/pretty.js')
     ],
@@ -318,7 +316,6 @@ module.exports = {
       'expose-loader?exposes=emojify!emojify.js',
       'flowchart.js',
       'js-sequence-diagrams',
-      'expose-loader?exposes=Viz!viz.js',
       'expose-loader?exposes=Reveal!reveal.js',
       'expose-loader?exposes=RevealMarkdown!reveal-markdown',
       path.join(__dirname, 'public/js/slide.js')
@@ -342,7 +339,6 @@ module.exports = {
   },
 
   externals: {
-    'viz.js': 'Viz',
     'socket.io-client': 'io',
     'jquery': '$',
     'moment': 'moment',