fix: add mermaid rendering support to Docsify site

- Add mermaid@11 library with dark theme configuration - Add custom markdown renderer to convert ```mermaid blocks to <div> - Add doneEach plugin hook to run mermaid after page navigation - Fix code fence syntax in architecture.md (remove space before 'mermaid')
2026-07-27 17:27:43 +00:00 · 2026-03-15 21:10:07 -07:00
parent 57e69721f5
commit 3b0cdca567
2 changed files with 42 additions and 3 deletions
@@ -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}
    
@@ -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 -->