Merge commit '8b9803425e63e1b1801f8d5d676e96368d706722'

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 });