Skip to content

Instantly share code, notes, and snippets.

Created September 16, 2020 12:59
What would you like to do?
This gist was created to anwser a question about using mermaidjs in the zola static site generator:
<!-- should be in templates/ -->
div.mermaid {
{{page.content | safe }}
<!-- when this javascript is loaded and initialized it will look for divs with the class mermaid.
it will replace the content of those divs with the generated svg -->
<script src=""></script>

+++ title = "Mermaid example" description = "an example of using mermaid in zola"

template = "mermaid.html" +++

Let's see can we include mermaid diagrams?

Let's use a shortcode for this.

{% mermaiddiagram() %} journey title My working day section Go to work Make tea: 5: Me Go upstairs: 3: Me Do work: 1: Me, Cat section Go home Go downstairs: 5: Me Sit down: 5: Me {% end %}

<!-- should be in templates/shortcodes/ -->
<div class="mermaid">
{{ body }}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment