gavindiaz/QuanTAlib
1
0
Fork 0
mirror of https://github.com/mihakralj/QuanTAlib.git synced 2026-08-20 03:28:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: add mermaid rendering support to Docsify site

Browse Source 
- 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')
This commit is contained in:
Miha Kralj
2026-03-15 21:10:07 -07:00
parent 57e69721f5
commit 3b0cdca567
2 changed files with 42 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/architecture.md
+3 -3
View File
@@ -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. 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 graph LR
subgraph AoS [Array of Structures: CPU chokes on interleaved data] subgraph AoS [Array of Structures: CPU chokes on interleaved data]
direction LR 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. 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 graph TD
Event[Eventing Mode<br/>Reactive Chain] -->|Adds pub/sub overhead| Stream Event[Eventing Mode<br/>Reactive Chain] -->|Adds pub/sub overhead| Stream
Stream[Streaming Mode<br/>Stateful O1 Updates] -->|Maintains state across| Span Stream[Streaming Mode<br/>Stateful O1 Updates] -->|Maintains state across| Span
@@ -202,7 +202,7 @@ else
CalculateScalar(source, output); CalculateScalar(source, output);
``` ```
``` mermaid ```mermaid
graph TD graph TD
Start{JIT Hardware Detection} Start{JIT Hardware Detection}
index.html
+39
View File
@@ -257,12 +257,28 @@
.sidebar .search .clear-btn { .sidebar .search .clear-btn {
color: #8b949e; color: #8b949e;
} }
/* Mermaid diagram styling for dark theme */
.mermaid {
background: transparent !important;
text-align: center;
margin: 1em 0;
}
</style> </style>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script> <script>
globalThis.$docsify = { 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', 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', repo: 'https://github.com/mihakralj/QuanTAlib',
loadSidebar: true, loadSidebar: true,
@@ -316,9 +332,32 @@
}, 100); }, 100);
}); });
}, },
function(hook) {
hook.doneEach(function() {
mermaid.run({ querySelector: '.mermaid' });
});
},
], ],
} }
</script> </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 --> <!-- Docsify v4 -->
<script src="https://cdn.jsdelivr.net/npm/docsify@4"></script> <script src="https://cdn.jsdelivr.net/npm/docsify@4"></script>
<!-- Search Plugin --> <!-- Search Plugin -->