cypress/platform/knsv2.html

<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
      rel="stylesheet"
    />
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
    <style>
      body {
        /* background: rgb(221, 208, 208); */
        /* background:#333; */
        font-family: 'Arial';
        /* font-size: 18px !important; */
        }
      h1 { color: grey;}
      .mermaid2 {
        display: none;
      }
      .mermaid svg {
        /* font-size: 18px !important; */
      }
      .malware {
        position: fixed;
        bottom:0;
        left:0;
        right:0;
        height: 150px;
        background: red;
        color: black;
        display: flex;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: monospace;
        font-size: 72px;
      }
    </style>
  </head>
  <body>
    <div>Security check</div>
    <div class="flex">
      <div id="diagram" class="mermaid">
sequenceDiagram
  Nothing:Valid;
      </div>
      <div id="res" class=""></div>
  <script src="./mermaid.js"></script>
    <script>
      mermaid.parseError = function (err, hash) {
        // console.error('Mermaid error: ', err);
      };
      mermaid.initialize({
        startOnLoad: false,
        // themeVariables: {relationLabelColor: 'red'}
      });
      function callback() {
  alert('It worked');
}

// document.querySelector('#diagram').innerHTML = diagram;
try {
  mermaid.initThrowsErrors(undefined, '#diagram');
} catch (err) {
  console.log('Caught error:', err);
}
    </script>
  </body>
</html>