Skip to content

Instantly share code, notes, and snippets.

@mtolk
Created September 16, 2020 12:59
Show Gist options
  • Save mtolk/7b24e452f9b0e197d63ced900e087ff9 to your computer and use it in GitHub Desktop.
Save mtolk/7b24e452f9b0e197d63ced900e087ff9 to your computer and use it in GitHub Desktop.
This gist was created to anwser a question about using mermaidjs in the zola static site generator: https://zola.discourse.group/t/mermaid-integration/573?u=marco
<!-- should be in templates/ -->
<html>
<head>
<style>
div.mermaid {
width:25%;
}
</style>
</head>
<body>
<h1>{{page.title}}</h1>
{{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="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
</body>
</html>

+++ 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 }}
</div>
@wendajiang
Copy link

My question is, the mermaid content every single line must end with semicolon. And the {{ body }} can not be parser correctly natively by the javascript mermaid.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment