diff --git a/public/js/extra.js b/public/js/extra.js
index b62f0e6f..03f04664 100644
--- a/public/js/extra.js
+++ b/public/js/extra.js
@@ -30,7 +30,7 @@ require('prismjs/components/prism-gherkin')
require('./lib/common/login')
require('../vendor/md-toc')
-var Viz = require('viz.js')
+const viz = new window.Viz()
const plantumlEncoder = require('plantuml-encoder')
const ui = getUIElements()
@@ -369,13 +369,15 @@ export function finishView (view) {
try {
var $value = $(value)
var $ele = $(value).parent().parent()
+ $value.unwrap()
+ viz.renderString($value.text())
+ .then(graphviz => {
+ if (!graphviz) throw Error('viz.js output empty graph')
+ $value.html(graphviz)
- var 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()
+ })
} catch (err) {
$value.unwrap()
$value.parent().append(`
${escapeHTML(err)}
`)
diff --git a/public/views/codimd/foot.ejs b/public/views/codimd/foot.ejs
index babddf76..5dbaa2cb 100644
--- a/public/views/codimd/foot.ejs
+++ b/public/views/codimd/foot.ejs
@@ -1,7 +1,7 @@
<% if(useCDN) { %>
-
+
@@ -9,16 +9,17 @@
-
+
-
-
+
+
-
-
+
+
+
diff --git a/public/views/index/foot.ejs b/public/views/index/foot.ejs
index 78bbc867..e9af48e5 100644
--- a/public/views/index/foot.ejs
+++ b/public/views/index/foot.ejs
@@ -1,10 +1,10 @@
<% if(useCDN) { %>
-
-
+
+
-
+
<%- include ../build/cover-scripts %>
diff --git a/public/views/index/head.ejs b/public/views/index/head.ejs
index 0a6ac3f0..6fc56fc8 100644
--- a/public/views/index/head.ejs
+++ b/public/views/index/head.ejs
@@ -11,10 +11,10 @@
<% if(useCDN) { %>
-
+
-
-
+
+
<%- include ../build/cover-header %>
<%- include ../shared/polyfill %>
<% } else { %>
diff --git a/public/views/pretty.ejs b/public/views/pretty.ejs
index 28c67213..2c0ccffb 100644
--- a/public/views/pretty.ejs
+++ b/public/views/pretty.ejs
@@ -73,21 +73,22 @@