summaryrefslogtreecommitdiffstats
path: root/docs/content/en/content-management/diagrams.md
diff options
context:
space:
mode:
Diffstat (limited to 'docs/content/en/content-management/diagrams.md')
-rw-r--r--docs/content/en/content-management/diagrams.md24
1 files changed, 14 insertions, 10 deletions
diff --git a/docs/content/en/content-management/diagrams.md b/docs/content/en/content-management/diagrams.md
index 17407098f..8851034c6 100644
--- a/docs/content/en/content-management/diagrams.md
+++ b/docs/content/en/content-management/diagrams.md
@@ -1,20 +1,22 @@
---
title: Diagrams
-description: Use fenced code blocks and markdown render hooks to display diagrams.
+description: Use fenced code blocks and Markdown render hooks to include diagrams in your content.
categories: [content management]
keywords: [diagrams,drawing]
menu:
docs:
parent: content-management
- weight: 50
-weight: 50
+ weight: 260
+weight: 260
toc: true
---
-{{< new-in 0.93.0 >}}
## GoAT diagrams (ASCII)
-Hugo supports [GoAT](https://github.com/bep/goat) natively. This means that this code block:
+Hugo natively supports [GoAT] diagrams with an [embedded code block render hook]. This means that this code block:
+
+[GoAT]: https://github.com/bep/goat
+[embedded code block render hook]: {{% eturl render-codeblock-goat %}}
````txt
```goat
@@ -44,19 +46,21 @@ Will be rendered as:
## Mermaid diagrams
-Hugo currently does not provide default templates for Mermaid diagrams. But you can easily add your own. One way to do it would be to create `layouts/_default/_markup/render-codeblock-mermaid.html`:
+Hugo does not provide a built-in template for Mermaid diagrams. Create your own using a [code block render hook]:
-```go-html-template
+[code block render hook]: /render-hooks/code-blocks/
+
+{{< code file=layouts/_default/_markup/render-codeblock-mermaid.html >}}
<pre class="mermaid">
{{- .Inner | safeHTML }}
</pre>
{{ .Page.Store.Set "hasMermaid" true }}
-```
+{{< /code >}}
-And then include this snippet at the bottom of the content template (**Note**: below `.Content` as the render hook is not processed until `.Content` is executed):
+And then include this snippet at the bottom of the content template:
```go-html-template
-{{ if .Page.Store.Get "hasMermaid" }}
+{{ if .Store.Get "hasMermaid" }}
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });