Mermaid Integration

Im trying to use MermaidJS in zola.
Could you give me a hint where to start?
i looked into https://www.getzola.org/documentation/content/syntax-highlighting/
But im not sure if thats the right place to start.
Would Template be enough?

1 Like

Hi @paul-asvb,

i found your question when trying to learn the ins and out of zola myself.

I’m not aware of a way of generating the svg diagram during the zola build.
But using mermaid in the browser there’s an easy way to include mermaid diagrams in your markdown content.

I created this simple example:

To create this example I used three files:

i created a shortcode. All it does is wrap the actual mermaid diagram in a div that the mermaid library will look for:

i created a template file that include the mermaid javascript library and tells it to start when the page is loaded in the browser.

and i created a markdown file using the previous template and shortcode.

you can find the actual file in this gist https://gist.github.com/mtolk/7b24e452f9b0e197d63ced900e087ff9

I hope you find this usefull,

Regards Marco

1 Like

Thanks!