TheCloud/hugoDocs
1
0
Fork 0
mirror of https://github.com/gohugoio/hugoDocs.git synced 2025-09-12 18:34:50 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add Markdown diagrams and render hooks for code blocks

Browse Source 
You can now create custom hook templates for code blocks, either one for all (`render-codeblock.html`) or for a given code language (e.g. `render-codeblock-go.html`).

We also used this new hook to add support for diagrams in Hugo:

* Goat (Go ASCII Tool) is built-in and enabled by default; just create a fenced code block with the language `goat` and start draw your Ascii diagrams.
* Another popular alternative for diagrams in Markdown, Mermaid (supported by GitHub), can also be implemented with a simple template. See the Hugo documentation for more information.

Updates #7765
Closes #9538
Fixes #9553
Fixes #8520
Fixes #6702
Fixes #9558
This commit is contained in:
Bjørn Erik Pedersen 2022-02-17 13:04:00 +01:00
parent bd8037d432
commit 2df37e9e80
4 changed files with 247 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
_vendor/github.com/gohugoio/gohugoioTheme/layouts/_default/baseof.html generated
View File

@ -66,6 +66,14 @@
{{ block "footer" . }}{{ partialCached "site-footer.html" . }}{{ end }} {{ 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> </body>
</html> </html>

217
content/en/content-management/diagrams.md Normal file
View File

@ -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 } """" .│
└────────────────────────────────────────────────┘
```

18
layouts/_default/_markup/render-codeblock-goat.html Normal file
View File

@ -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>

4
layouts/_default/_markup/render-codeblock-mermaid.html Normal file
View File

@ -0,0 +1,4 @@
<div class="mermaid">
{{- .Code | safeHTML }}
</div>
{{ .Page.Store.Set "hasMermaid" true }}