diff --git a/.gitignore b/.gitignore
index 0bd4d30..52ac90c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 node_modules/
 package-lock.json
-.notes
\ No newline at end of file
+.notes
+test*
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index d626577..361a123 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -12,13 +12,8 @@
   <div id="app"></div>
   <script src="//cdn.jsdelivr.net/npm/mermaid@8.0.0-rc.8/dist/mermaid.min.js"></script>
   <script>
-    function makeid(len) {
-      var text = new Array(len);
-      var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
-      for (var i = 0; i < len; i++) text[i] = possible.charAt(Math.floor(Math.random() * possible.length));
-      return text.join("");
-    }
     mermaid.initialize({ startOnLoad: false });
+    let id = 0;
     window.$docsify = {
       name: 'docsify-katex',
       repo: 'https://github.com/upupming/docsify-katex',
@@ -31,9 +26,8 @@
         renderer: {
           code: function(code, lang) {
             if (lang === "mermaid") {
-              let id = makeid(10);
               return (
-                '<div class="mermaid">' + mermaid.render(id, code) + "</div>"
+                '<div class="mermaid">' + mermaid.render('mermaid-svg-' + id++, code) + "</div>"
               );
             }
             return this.origin.code.apply(this, arguments);
@@ -42,7 +36,7 @@
       }
     }
   </script>
-  <script src="../dist/docsify-katex.js"></script>
+  <script src="//cdn.jsdelivr.net/npm/docsify-katex@latest/dist/docsify-katex.js"></script>
   <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css">
   <script src="//cdn.jsdelivr.net/npm/docsify@latest/lib/docsify.min.js"></script>
   <script src="//cdn.jsdelivr.net/npm/docsify@latest/lib/plugins/search.min.js"></script>