Mathjax (mathematical expressions) and Mermaid (graphs)

samples samples, 11ty-customized

Posted Jul 12, 2021

By BaHI

1 min reading time

Sample on using Mathjax and Mermaid for mathematical expression and grap rendering.

There’s just one thing for an articla author to do, thus including values into Front Matter to load the required tool.

mathjax: true
mermaid: true

HTML mathjax: $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

Mathjax via markdown

x = {-b \pm \sqrt{b^2-4ac} \over 2a}.

HTML mermaid:

erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

Mermaid via MD:

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;