fix(mermaid): fix styles and escape html

fixes: #389
fixes: #391

Author: hiroppy

packages/client/assets/style/customize.css

@@ -38,6 +38,7 @@
   max-width: var(--base-max-width);
   min-width: 320px;
   z-index: 2;
+  width: 100vw; /* for mermaid */
 }
 
 .slide-background {
@@ -67,3 +68,7 @@
   height: var(--qr-code-image-size);
   margin: 0 auto;
 }
+
+.mermaid {
+  width: 100%;
+}

packages/client/src/setup/Mermaid.js

@@ -4,26 +4,25 @@ export class Mermaid {
   constructor() {
     mermaid.initialize({
       startOnLoad: false,
+      er: {
+        useMaxWidth: false,
+      },
+      flowchart: {
+        useMaxWidth: false,
+      },
+      sequence: {
+        useMaxWidth: false,
+      },
+      gantt: {
+        useMaxWidth: false,
+      },
     });
   }
 
   getElms() {
     return document.querySelectorAll('.mermaid');
   }
 
-  encode(elm) {
-    const encodedString = `data:image/svg+xml;base64,${btoa(elm.innerHTML)}`;
-
-    elm.innerHTML = ''; // delete svg
-    Object.assign(elm.style, {
-      visibility: 'initial',
-      background: `url(${encodedString})`,
-      backgroundRepeat: 'no-repeat',
-      backgroundPosition: 'center',
-      margin: '0 auto',
-    });
-  }
-
   init() {
     const elms = this.getElms();
 
@@ -33,7 +32,6 @@ export class Mermaid {
       });
 
       mermaid.init();
-      // this.encode(elm);
     });
   }
 
@@ -57,12 +55,11 @@ export class Mermaid {
 
       elm.removeAttribute('data-processed');
 
-      mermaid.init();
       Object.assign(elm.style, {
         visibility: 'initial',
       });
 
-      // this.encode(elm);
+      mermaid.init();
     }
   }
 }