uncomfyhalomacro/mermaid.html

## mermaid.html
<!-- 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>

## mermaid.md

      
    Raw
  

              mermaid.md
            
          
    +++
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 %}

  
## mermaiddiagram.html
<!-- should be in templates/shortcodes/ -->
<div class="mermaid">
{{ body }}
</div>
	<!-- 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>
	<!-- should be in templates/shortcodes/ -->
	<div class="mermaid">
	{{ body }}
	</div>