Math and Diagrams
Contents
OnyxFolio supports two diagram/formula systems: KaTeX for mathematical notation and Mermaid for flowcharts and diagrams. Both are rendered client-side in the browser.
LaTeX / KaTeX
Math expressions are written in standard LaTeX syntax and rendered by KaTeX.
Inline math
Wrap expressions in single $ delimiters:
The formula is $E = mc^2$ inline.
Renders as: The formula is E = mc^2 inline.
Block math
Wrap expressions in double $$ delimiters:
$$
\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
$$
Renders as:
How it works
OnyxFolio protects math expressions from the markdown parser before standard rendering:
$$...$$→<div class="math-block">...</div>$...$→<span class="math-inline">...</span>
The KaTeX library (loaded in base.html) then renders these elements in the browser. Expressions inside backtick code spans are left untouched.
KaTeX limitations
KaTeX supports most common LaTeX math commands. It does not support every package or macro from full LaTeX/MathJax. See the KaTeX support table for the full list of supported functions.
Mermaid diagrams
Fenced code blocks with the mermaid language tag are rendered as diagrams:
ONYXMERMAID0ONYXEND
Supported diagram types
Mermaid supports a wide range of diagram types:
| Type | Syntax keyword |
|---|---|
| Flowchart | graph LR / graph TD |
| Sequence diagram | sequenceDiagram |
| Class diagram | classDiagram |
| State diagram | stateDiagram-v2 |
| Entity–relationship | erDiagram |
| Gantt chart | gantt |
| Pie chart | pie |
| Gitgraph | gitGraph |
Theme adaptation
Mermaid diagrams automatically adapt to the active dark or light theme. When the user toggles the theme, the diagrams re-render with matching colours.
How it works
Mermaid is loaded as a client-side library in base.html. Fenced mermaid blocks are passed through the markdown pipeline as literal <code class="language-mermaid"> blocks, which Mermaid's initializer then finds and renders into SVG.
See also
- Code Blocks — syntax-highlighted code blocks
- Themes — dark/light mode toggle