Merge commit '00c4484c7092181729f6f470805bc7d72e8ad17b'

docs/content/en/content-management/diagrams.md

@@ -1,25 +1,23 @@
 ---
 title: Diagrams
-date: 2022-02-20
+LinkTitle: Diagrams
+description: Use fenced code blocks and markdown render hooks to display diagrams.
 categories: [content management]
 keywords: [diagrams,drawing]
 menu:
   docs:
-    parent: "content-management"
-    weight: 22
-weight: 22
+    parent: content-management
+    weight: 50
 toc: true
+weight: 50
 ---
-
-
 {{< new-in "0.93.0" >}}
 
-
 ## GoAT Diagrams (Ascii)
 
-Hugo! supports [GoAT](https://github.com/bep/goat) natively. This means that this code block:
+Hugo supports [GoAT](https://github.com/bep/goat) natively. This means that this code block:
 
-````
+````txt
 ```goat
       .               .                .               .--- 1          .-- 1     / 1
      / \              |                |           .---+            .-+         +
@@ -45,14 +43,9 @@ Will be rendered as:
      1   2 3   4    1   2   3   4    1   2   3   4         '--- 4          '-- 4     \ 4
 ```
 
-
-
-
-
 ## 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 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`:
 
 ```go-html-template
 <div class="mermaid">
@@ -61,7 +54,7 @@ Hugo currently does not provide default templates for Mermaid diagrams. But you
 {{ .Page.Store.Set "hasMermaid" true }}
 ```
 
-And then include this snippet at the bottom of the content template (below `.Content`):
+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):
 
 ```go-html-template
 {{ if .Page.Store.Get "hasMermaid" }}
@@ -88,8 +81,6 @@ sequenceDiagram
     Bob-->>John: Jolly good!
 ```
 
-
-
 ## Goat Ascii Diagram Examples
 
 ### Graphics
@@ -160,7 +151,7 @@ sequenceDiagram
 
 ### File tree
 
-Created from https://arthursonzogni.com/Diagon/#Tree
+Created from <https://arthursonzogni.com/Diagon/#Tree>
 
 ```goat  { width=300  color="orange" }
 ───Linux─┬─Android
@@ -176,7 +167,7 @@ Created from https://arthursonzogni.com/Diagon/#Tree
 
 ### Sequence Diagram
 
-https://arthursonzogni.com/Diagon/#Sequence
+<https://arthursonzogni.com/Diagon/#Sequence>
 
 ```goat { class="w-40" }
 ┌─────┐       ┌───┐
@@ -197,7 +188,7 @@ https://arthursonzogni.com/Diagon/#Sequence
 
 ### Flowchart
 
-https://arthursonzogni.com/Diagon/#Flowchart
+<https://arthursonzogni.com/Diagon/#Flowchart>
 
 ```goat
    _________________                                                              
@@ -243,7 +234,7 @@ https://arthursonzogni.com/Diagon/#Flowchart
 
 ### Table
 
-https://arthursonzogni.com/Diagon/#Table
+<https://arthursonzogni.com/Diagon/#Table>
 
 ```goat { class="w-80 dark-blue" }
 ┌────────────────────────────────────────────────┐
@@ -272,6 +263,3 @@ https://arthursonzogni.com/Diagon/#Table
 │LITERAL    = """" character { character } """" .│
 └────────────────────────────────────────────────┘
 ```
-
-
-