diff --git a/docs/architecture.md b/docs/architecture.md
index 3bb5ac4b..c0cceae1 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -10,7 +10,7 @@ Traditional object-oriented design stores data as arrays of objects: `List<Price
 
 QuanTAlib stores timestamps and values in separate contiguous arrays. When calculating an average, the CPU loads a cache line filled entirely with price values, without wasting space on interleaved timestamps or object headers.
 
-``` mermaid
+```mermaid
 graph LR
     subgraph AoS [Array of Structures: CPU chokes on interleaved data]
         direction LR
@@ -83,7 +83,7 @@ The math to calculate averages works with limited history. A 14-period SMA with
 
 Trading systems have different data flow patterns. Backtesting engines process years of historical data in batch. Real-time systems update indicators bar-by-bar. Event-driven architectures react to changes asynchronously. QuanTAlib provides four modes optimized for these patterns.
 
-``` mermaid
+```mermaid
 graph TD
     Event[Eventing Mode<br/>Reactive Chain] -->|Adds pub/sub overhead| Stream
     Stream[Streaming Mode<br/>Stateful O1 Updates] -->|Maintains state across| Span
@@ -202,7 +202,7 @@ else
     CalculateScalar(source, output);
 ```
 
-``` mermaid
+```mermaid
 graph TD
     Start{JIT Hardware Detection}
     
diff --git a/index.html b/index.html
index 2d36d830..6b68ba62 100644
--- a/index.html
+++ b/index.html
@@ -257,12 +257,28 @@
     .sidebar .search .clear-btn {
       color: #8b949e;
     }
+  /* Mermaid diagram styling for dark theme */
+  .mermaid {
+    background: transparent !important;
+    text-align: center;
+    margin: 1em 0;
+  }
   </style>
 </head>
 <body>
   <div id="app"></div>
   <script>
     globalThis.$docsify = {
+      markdown: {
+        renderer: {
+          code: function(code, lang) {
+            if (lang === 'mermaid') {
+              return '<div class="mermaid">' + code + '</div>';
+            }
+            return this.origin.code.apply(this, arguments);
+          }
+        }
+      },
       name: '<img src="docs/img/QuanTAlib2.png" style="width:32px;height:32px;vertical-align:middle;margin-right:6px;">QuanTAlib',
       repo: 'https://github.com/mihakralj/QuanTAlib',
       loadSidebar: true,
@@ -316,9 +332,32 @@
             }, 100);
           });
         },
+        function(hook) {
+          hook.doneEach(function() {
+            mermaid.run({ querySelector: '.mermaid' });
+          });
+        },
       ],
     }
   </script>
+  <!-- Mermaid diagrams (must load before Docsify) -->
+  <script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
+  <script>
+    mermaid.initialize({
+      startOnLoad: false,
+      theme: 'dark',
+      themeVariables: {
+        darkMode: true,
+        background: '#0d1117',
+        primaryColor: '#238636',
+        primaryTextColor: '#c9d1d9',
+        primaryBorderColor: '#30363d',
+        lineColor: '#8b949e',
+        secondaryColor: '#161b22',
+        tertiaryColor: '#21262d'
+      }
+    });
+  </script>
   <!-- Docsify v4 -->
   <script src="https://cdn.jsdelivr.net/npm/docsify@4"></script>
   <!-- Search Plugin -->
