diff --git a/frontend/js/app.js b/frontend/js/app.js
index e299280..ee47153 100644
--- a/frontend/js/app.js
+++ b/frontend/js/app.js
@@ -16,6 +16,7 @@ import * as Legacy from './legacy.js';
 import { initCommandPalette } from './palette.js';
 import { initMobileToolbar } from './mobile-toolbar.js';
 import { initDragDrop } from './dragdrop.js';
+import { initMermaid, setupFocusMode } from './mermaid-viewer.js';
 
 // =========================================================================
 // Initialization — mirrors the original app.js init() ordering
@@ -85,6 +86,8 @@ async function init() {
   }
 
   initGraphView();
+  initMermaid();
+  setupFocusMode();
   Utils.safeCreateIcons();
 }
 
diff --git a/frontend/js/utils.js b/frontend/js/utils.js
index cdd0421..b2c944b 100644
--- a/frontend/js/utils.js
+++ b/frontend/js/utils.js
@@ -248,6 +248,8 @@ function flushIcons() {
 }
 
 function safeHighlight(block) {
+  // Skip mermaid blocks — they're rendered by Mermaid.js, not highlighted
+  if (block.className && block.className.indexOf('language-mermaid') !== -1) return;
   if (typeof hljs !== "undefined" && hljs.highlightElement) {
     try {
       hljs.highlightElement(block);