Skip to content

Instantly share code, notes, and snippets.

@mtolk
Created Sep 16, 2020
Embed
What would you like to do?
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment