diff --git a/src/routes/viewer.ts b/src/routes/viewer.ts
index 2c4f8df..b53e80a 100644
--- a/src/routes/viewer.ts
+++ b/src/routes/viewer.ts
@@ -81,28 +81,13 @@ router.get(/.*/, async (req: Request, res: Response) => {
                     ${body}
                 </div>
             </body>
+
             <script>
                 window.VIV_PORT = "${config.port}";
                 window.VIV_PATH = "${urlToPath(req.path)}";
             </script>
-
             ${config.scripts ? `<script type="text/javascript">${config.scripts}</script>` : ''}
-
-            <script type="module">
-                import mermaid from '/static/mermaid/mermaid.esm.min.mjs';
-                const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
-                mermaid.initialize({ startOnLoad: true, theme: darkModePreference.matches ? 'dark' : 'default' })
-
-                function updateTheme() {
-                    if (document.getElementsByClassName('mermaid').length > 0) {
-                        window.location.reload()
-                    }
-                }
-                darkModePreference.addEventListener("change", () => updateTheme());
-                // deprecated method for backward compatibility
-                darkModePreference.addEventListener(() => updateTheme());
-            </script>
-            <script type="text/javascript" src="/static/client.js"></script>
+            <script type="module" src="/static/client.mjs"></script>
         </html>
     `);
 });
diff --git a/static/client.js b/static/client.js
deleted file mode 100644
index a40699d..0000000
--- a/static/client.js
+++ /dev/null
@@ -1,42 +0,0 @@
-function viv_scrollTo(value) {
-    let line = parseInt(value);
-    while (line) {
-        const targets = document.querySelectorAll(`[data-source-line="${line - 1}"]`);
-        if (targets.length) {
-            targets[0].scrollIntoView({
-                behavior: 'smooth',
-                block: 'nearest',
-            });
-            break;
-        }
-        line -= 1;
-    }
-}
-
-const ws = new WebSocket(`ws://localhost:${window.VIV_PORT}`);
-
-ws.addEventListener('message', (event) => {
-    const fields = event.data.toString().split(': ');
-    if (fields.length < 2) return;
-    const [key, ...values] = fields;
-    const value = values.join(': ');
-
-    switch (key) {
-        case 'UPDATE':
-            document.getElementById('body-content').innerHTML = value;
-            break;
-        case 'SCROLL':
-            viv_scrollTo(value);
-            break;
-        case 'RELOAD':
-            window.location.reload();
-            break;
-        case 'PRINT':
-            console.log(value);
-            break;
-    }
-});
-
-ws.addEventListener('open', () => {
-    ws.send(`PATH: ${window.VIV_PATH}`);
-});
diff --git a/static/client.mjs b/static/client.mjs
new file mode 100644
index 0000000..863ee24
--- /dev/null
+++ b/static/client.mjs
@@ -0,0 +1,67 @@
+/* --------------------------------------------------------------------------
+ * MERMAID ------------------------------------------------------------------ */
+
+import mermaid from '/static/mermaid/mermaid.esm.min.mjs';
+
+const darkModePreference = window.matchMedia('(prefers-color-scheme: dark)');
+mermaid.initialize({ startOnLoad: true, theme: darkModePreference.matches ? 'dark' : 'default' });
+
+function updateTheme() {
+    if (document.getElementsByClassName('mermaid').length > 0) {
+        window.location.reload();
+    }
+}
+try {
+    darkModePreference.addEventListener('change', () => updateTheme());
+} catch {
+    try {
+        // deprecated method for backward compatibility
+        darkModePreference.addEventListener(() => updateTheme());
+    } catch {}
+}
+
+/* --------------------------------------------------------------------------
+ * WEBSOCKET COMMUNICATION WITH SERVER -------------------------------------- */
+
+const ws = new WebSocket(`ws://localhost:${window.VIV_PORT}`);
+
+ws.addEventListener('message', async (event) => {
+    const fields = event.data.toString().split(': ');
+    if (fields.length < 2) return;
+    const [key, ...values] = fields;
+    const value = values.join(': ');
+
+    switch (key) {
+        case 'UPDATE':
+            document.getElementById('body-content').innerHTML = value;
+            await mermaid.run({ querySelector: '.mermaid' });
+            break;
+
+        case 'SCROLL':
+            let line = parseInt(value);
+            while (line) {
+                const targets = document.querySelectorAll(`[data-source-line="${line - 1}"]`);
+                if (targets.length) {
+                    targets[0].scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'nearest',
+                    });
+                    break;
+                }
+                line -= 1;
+            }
+            break;
+
+        case 'RELOAD':
+            window.location.reload();
+            break;
+
+        case 'PRINT':
+            console.log(value);
+            break;
+    }
+});
+
+ws.addEventListener('open', () => {
+    ws.send(`PATH: ${window.VIV_PATH}`);
+});