diff --git a/_vendor/github.com/gohugoio/gohugoioTheme/layouts/_default/baseof.html b/_vendor/github.com/gohugoio/gohugoioTheme/layouts/_default/baseof.html
index 47019072c..e2886a0b8 100644
--- a/_vendor/github.com/gohugoio/gohugoioTheme/layouts/_default/baseof.html
+++ b/_vendor/github.com/gohugoio/gohugoioTheme/layouts/_default/baseof.html
@@ -66,6 +66,14 @@
 
   {{ block "footer" . }}{{ partialCached "site-footer.html" . }}{{ end }}
 
+  {{ if .Page.Store.Get "hasMermaid" }}
+  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+  <script>
+    mermaid.initialize({ startOnLoad: true });
+  </script>
+{{ end }}
+
+
 </body>
 
 </html>
diff --git a/content/en/content-management/diagrams.md b/content/en/content-management/diagrams.md
new file mode 100644
index 000000000..4e3f6164b
--- /dev/null
+++ b/content/en/content-management/diagrams.md
@@ -0,0 +1,217 @@
+---
+title: Diagrams
+date: 2022-02-20
+categories: [content management]
+keywords: [diagrams,drawing]
+menu:
+  docs:
+    parent: "content-management"
+    weight: 22
+weight: 22
+toc: true
+---
+
+
+## Mermaid Diagrams
+
+```mermaid
+sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>John: Hello John, how are you?
+    loop Healthcheck
+        John->>John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts <br/>prevail!
+    John-->>Alice: Great!
+    John->>Bob: How about you?
+    Bob-->>John: Jolly good!
+```
+
+
+
+## Goat Ascii Diagram Examples
+
+### Graphics
+
+```goat
+                                                                             .
+    0       3                          P *              Eye /         ^     /
+     *-------*      +y                    \                +)          \   /  Reflection
+  1 /|    2 /|       ^                     \                \           \ v
+   *-------* |       |                v0    \       v3           --------*--------
+   | |4    | |7      |                  *----\-----*
+   | *-----|-*       +-----> +x        /      v X   \          .-.<--------        o
+   |/      |/       /                 /        o     \        | / | Refraction    / \
+   *-------*       v                 /                \        +-'               /   \
+  5       6      +z              v1 *------------------* v2    |                o-----o
+                                                               v
+
+```
+
+### Complex
+
+```goat
++-------------------+                           ^                      .---.
+|    A Box          |__.--.__    __.-->         |      .-.             |   |
+|                   |        '--'               v     | * |<---        |   |
++-------------------+                                  '-'             |   |
+                       Round                                       *---(-. |
+  .-----------------.  .-------.    .----------.         .-------.     | | |
+ |   Mixed Rounded  | |         |  / Diagonals  \        |   |   |     | | |
+ | & Square Corners |  '--. .--'  /              \       |---+---|     '-)-'       .--------.
+ '--+------------+-'  .--. |     '-------+--------'      |   |   |       |        / Search /
+    |            |   |    | '---.        |               '-------'       |       '-+------'
+    |<---------->|   |    |      |       v                Interior                 |     ^
+    '           <---'      '----'   .-----------.              ---.     .---       v     |
+ .------------------.  Diag line    | .-------. +---.              \   /           .     |
+ |   if (a > b)     +---.      .--->| |       | |    | Curved line  \ /           / \    |
+ |   obj->fcn()     |    \    /     | '-------' |<--'                +           /   \   |
+ '------------------'     '--'      '--+--------'      .--. .--.     |  .-.     +Done?+-'
+    .---+-----.                        |   ^           |\ | | /|  .--+ |   |     \   /
+    |   |     | Join        \|/        |   | Curved    | \| |/ | |    \    |      \ /
+    |   |     +---->  o    --o--        '-'  Vertical  '--' '--'  '--  '--'        +  .---.
+ <--+---+-----'       |     /|\                                                    |  | 3 |
+                      v                             not:line    'quotes'        .-'   '---'
+  .-.             .---+--------.            /            A || B   *bold*       |        ^
+ |   |           |   Not a dot  |      <---+---<--    A dash--is not a line    v        |
+  '-'             '---------+--'          /           Nor/is this.            ---
+
+```
+
+### Process
+
+```goat
+                                      .
+   .---------.                       / \
+  |   START   |                     /   \        .-+-------+-.      ___________
+   '----+----'    .-------.    A   /     \   B   | |COMPLEX| |     /           \      .-.
+        |        |   END   |<-----+CHOICE +----->| |       | +--->+ PREPARATION +--->| X |
+        v         '-------'        \     /       | |PROCESS| |     \___________/      '-'
+    .---------.                     \   /        '-+---+---+-'
+   /  INPUT  /                       \ /
+  '-----+---'                         '
+        |                             ^
+        v                             |
+  .-----------.                 .-----+-----.        .-.
+  |  PROCESS  +---------------->|  PROCESS  |<------+ X |
+  '-----------'                 '-----------'        '-'
+```
+
+### File tree
+
+Created from https://arthursonzogni.com/Diagon/#Tree
+
+```goat  { width=300  color="orange" }
+───Linux─┬─Android
+         ├─Debian─┬─Ubuntu─┬─Lubuntu
+         │        │        ├─Kubuntu
+         │        │        ├─Xubuntu
+         │        │        └─Xubuntu
+         │        └─Mint
+         ├─Centos
+         └─Fedora
+```
+
+
+### Sequence Diagram
+
+https://arthursonzogni.com/Diagon/#Sequence
+
+```goat { class="w-40" }
+┌─────┐       ┌───┐
+│Alice│       │Bob│
+└──┬──┘       └─┬─┘
+   │            │  
+   │ Hello Bob! │  
+   │───────────>│  
+   │            │  
+   │Hello Alice!│  
+   │<───────────│  
+┌──┴──┐       ┌─┴─┐
+│Alice│       │Bob│
+└─────┘       └───┘
+
+```
+
+
+### Flowchart
+
+https://arthursonzogni.com/Diagon/#Flowchart
+
+```goat
+   _________________                                                              
+  ╱                 ╲                                                     ┌─────┐ 
+ ╱ DO YOU UNDERSTAND ╲____________________________________________________│GOOD!│ 
+ ╲ FLOW CHARTS?      ╱yes                                                 └──┬──┘ 
+  ╲_________________╱                                                        │    
+           │no                                                               │    
+  _________▽_________                    ______________________              │    
+ ╱                   ╲                  ╱                      ╲    ┌────┐   │    
+╱ OKAY, YOU SEE THE   ╲________________╱ ... AND YOU CAN SEE    ╲___│GOOD│   │    
+╲ LINE LABELED 'YES'? ╱yes             ╲ THE ONES LABELED 'NO'? ╱yes└──┬─┘   │    
+ ╲___________________╱                  ╲______________________╱       │     │    
+           │no                                     │no                 │     │    
+   ________▽_________                     _________▽__________         │     │    
+  ╱                  ╲    ┌───────────┐  ╱                    ╲        │     │    
+ ╱ BUT YOU SEE THE    ╲___│WAIT, WHAT?│ ╱ BUT YOU JUST         ╲___    │     │    
+ ╲ ONES LABELED 'NO'? ╱yes└───────────┘ ╲ FOLLOWED THEM TWICE? ╱yes│   │     │    
+  ╲__________________╱                   ╲____________________╱    │   │     │    
+           │no                                     │no             │   │     │    
+       ┌───▽───┐                                   │               │   │     │    
+       │LISTEN.│                                   └───────┬───────┘   │     │    
+       └───┬───┘                                    ┌──────▽─────┐     │     │    
+     ┌─────▽────┐                                   │(THAT WASN'T│     │     │    
+     │I HATE YOU│                                   │A QUESTION) │     │     │    
+     └──────────┘                                   └──────┬─────┘     │     │    
+                                                      ┌────▽───┐       │     │    
+                                                      │SCREW IT│       │     │    
+                                                      └────┬───┘       │     │    
+                                                           └─────┬─────┘     │    
+                                                                 │           │    
+                                                                 └─────┬─────┘    
+                                                               ┌───────▽──────┐   
+                                                               │LET'S GO DRING│   
+                                                               └───────┬──────┘   
+                                                             ┌─────────▽─────────┐
+                                                             │HEY, I SHOULD TRY  │
+                                                             │INSTALLING FREEBSD!│
+                                                             └───────────────────┘
+
+```
+
+
+### Table
+
+https://arthursonzogni.com/Diagon/#Table
+
+```goat { class="w-80 dark-blue" }
+┌────────────────────────────────────────────────┐
+│                                                │
+├────────────────────────────────────────────────┤
+│SYNTAX     = { PRODUCTION } .                   │
+├────────────────────────────────────────────────┤
+│PRODUCTION = IDENTIFIER "=" EXPRESSION "." .    │
+├────────────────────────────────────────────────┤
+│EXPRESSION = TERM { "|" TERM } .                │
+├────────────────────────────────────────────────┤
+│TERM       = FACTOR { FACTOR } .                │
+├────────────────────────────────────────────────┤
+│FACTOR     = IDENTIFIER                         │
+├────────────────────────────────────────────────┤
+│          | LITERAL                             │
+├────────────────────────────────────────────────┤
+│          | "[" EXPRESSION "]"                  │
+├────────────────────────────────────────────────┤
+│          | "(" EXPRESSION ")"                  │
+├────────────────────────────────────────────────┤
+│          | "{" EXPRESSION "}" .                │
+├────────────────────────────────────────────────┤
+│IDENTIFIER = letter { letter } .                │
+├────────────────────────────────────────────────┤
+│LITERAL    = """" character { character } """" .│
+└────────────────────────────────────────────────┘
+```
+
+
+
diff --git a/layouts/_default/_markup/render-codeblock-goat.html b/layouts/_default/_markup/render-codeblock-goat.html
new file mode 100644
index 000000000..b1e57e94a
--- /dev/null
+++ b/layouts/_default/_markup/render-codeblock-goat.html
@@ -0,0 +1,18 @@
+{{ $width := .Attributes.width }}
+{{ $height := .Attributes.height }}
+{{ $class := .Attributes.class | default "" }}
+<div class="goat svg-container {{ $class }}">
+  {{ with diagrams.Goat .Code }}
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      font-family="Menlo,Lucida Console,monospace"
+      {{ if or $width $height }}
+        {{ with $width }}width="{{ . }}"{{ end }}
+        {{ with $height }}height="{{ . }}"{{ end }}
+      {{ else }}
+        viewBox="0 0 {{ .Width }} {{ .Height }}"
+      {{ end }}>
+      {{ .Body }}
+    </svg>
+  {{ end }}
+</div>
diff --git a/layouts/_default/_markup/render-codeblock-mermaid.html b/layouts/_default/_markup/render-codeblock-mermaid.html
new file mode 100644
index 000000000..15e4fdfbb
--- /dev/null
+++ b/layouts/_default/_markup/render-codeblock-mermaid.html
@@ -0,0 +1,4 @@
+<div class="mermaid">
+  {{- .Code | safeHTML }}
+</div>
+{{ .Page.Store.Set "hasMermaid" true }}