diff --git a/cypress/platform/viewer.js b/cypress/platform/viewer.js
index b33c76502..35f487d5b 100644
--- a/cypress/platform/viewer.js
+++ b/cypress/platform/viewer.js
@@ -1,50 +1,59 @@
-import { Base64 } from 'js-base64'
-import mermaid2 from '../../src/mermaid'
+import { Base64 } from 'js-base64';
+import mermaid2 from '../../src/mermaid';
 
 /**
  * ##contentLoaded
  * Callback function that is called when page is loaded. This functions fetches configuration for mermaid rendering and
  * calls init for rendering the mermaid diagrams on the page.
  */
-const contentLoaded = function () {
-  let pos = document.location.href.indexOf('?graph=')
+const contentLoaded = function() {
+  let pos = document.location.href.indexOf('?graph=');
   if (pos > 0) {
-    pos = pos + 7
-    const graphBase64 = document.location.href.substr(pos)
-    const graphObj = JSON.parse(Base64.decode(graphBase64))
+    pos = pos + 7;
+    const graphBase64 = document.location.href.substr(pos);
+    const graphObj = JSON.parse(Base64.decode(graphBase64));
     // const graph = 'hello'
-    console.log(graphObj)
-    const div = document.createElement('div')
-    div.id = 'block'
-    div.className = 'mermaid'
-    div.innerHTML = graphObj.code
-    document.getElementsByTagName('body')[0].appendChild(div)
-    global.mermaid.initialize(graphObj.mermaid)
+    console.log(graphObj);
+    const div = document.createElement('div');
+    div.id = 'block';
+    div.className = 'mermaid';
+    div.innerHTML = graphObj.code;
+    document.getElementsByTagName('body')[0].appendChild(div);
+    global.mermaid.initialize(escapeDiagram(graphObj.mermaid));
     // console.log('graphObj.mermaid', graphObj.mermaid)
-    global.mermaid.init()
+    global.mermaid.init();
   }
-}
-const contentLoadedApi = function () {
-  let pos = document.location.href.indexOf('?graph=')
+};
+const contentLoadedApi = function() {
+  let pos = document.location.href.indexOf('?graph=');
   if (pos > 0) {
-    pos = pos + 7
-    const graphBase64 = document.location.href.substr(pos)
-    const graphObj = JSON.parse(Base64.decode(graphBase64))
+    pos = pos + 7;
+    const graphBase64 = document.location.href.substr(pos);
+    const graphObj = JSON.parse(Base64.decode(graphBase64));
     // const graph = 'hello'
-    const div = document.createElement('div')
-    div.id = 'block'
-    div.className = 'mermaid'
+    const div = document.createElement('div');
+    div.id = 'block';
+    div.className = 'mermaid';
     // div.innerHTML = graphObj.code
-    document.getElementsByTagName('body')[0].appendChild(div)
-    global.mermaid.initialize(graphObj.mermaid)
+    document.getElementsByTagName('body')[0].appendChild(div);
+    global.mermaid.initialize(escapeDiagram(graphObj.mermaid));
 
-    mermaid2.render('newid', graphObj.code, (svgCode, bindFunctions) => {
-      div.innerHTML = svgCode
+    mermaid2.render(
+      'newid',
+      graphObj.code,
+      (svgCode, bindFunctions) => {
+        div.innerHTML = svgCode;
 
-      bindFunctions(div)
-    }, div)
+        bindFunctions(div);
+      },
+      div
+    );
   }
-}
+};
+
+const escapeDiagram = function(diagram) {
+  return diagram.replace(/</g, '&lt;').replace('/>/g', '&gt;');
+};
 
 if (typeof document !== 'undefined') {
   /*!
@@ -52,15 +61,15 @@ if (typeof document !== 'undefined') {
    */
   window.addEventListener(
     'load',
-    function () {
+    function() {
       if (this.location.href.match('xss.html')) {
-        this.console.log('Using api')
-        contentLoadedApi()
+        this.console.log('Using api');
+        contentLoadedApi();
       } else {
-        this.console.log('Not using api')
-        contentLoaded()
+        this.console.log('Not using api');
+        contentLoaded();
       }
     },
     false
-  )
+  );
 }