mirror of
https://github.com/gohugoio/hugo.git
synced 2024-11-14 20:37:55 -05:00
87de22d746
c43daf45f Update build-options.md 3ebbfedd4 Build options: Improve readability 5091bf6a0 Improve safeHTMLAttr explanation b64cbce2e Fix description of collections.Apply 6ea264b9c netlify: Hugo 0.115.4 b42e7c542 Revert "config: Remove disableLiveReload" 35ce2290e Remove excess spaces in configuration docs 2edf761de Update listed titleCaseStyle default value 887f6fb97 config: Remove disableLiveReload c9f49fb26 Fix typo 37d8569ac Remove tools associated with Atom 871d11b72 Fix URL in postprocess docs bbb17d29f Update GitLab workflow bc53ea5ce Use sentence-style capitalization for headings 7ca578786 netlify: Hugo 0.115.3 c5e010bd0 Merge branch 'tempv0.115.3' c885604bf Remove starter kits page 4c0fe269e Update mention of Netlify CMS to Decap CMS 05067175c Consistently use file name instead of filename 763dd6404 Improve multilingual config example and descriptions e5aa61ec5 Use lowercase when referring to front matter (#2132) 7ba3d0c72 docs: Refresh docs.json de8bddedf Update description of timeout configuration value e1245d9f8 netify: Hugo 0.115.2 153a36bdf Merge branch 'tempv0.115.2' 707cec754 Fix typo in figure example in shortcodes.md 128cbe1e5 Improve taxonomy template examples 4e743ec36 Improve highlight function example f96fa6805 transpile sass: Fixes typo e4a8a21f7 Compile Sass to CSS, not SCSS c1538bd00 docs: Regenerate CLI docs bd4e33436 Add titleCaseStyle none and firstupper 6ff93d478 Update quick-start.md 5c6653cb1 Update build config examples and explanation 1458d9a43 Remove the `url` parameter 6a1e92044 netlify: Hugo 0.115.1 a9d5d6f2f Merge branch 'tempv0.115.1' 4c4882384 docs: Regen docs helper d1aa1c1f5 Add link to PowerShell vs Windows PowerShell documentation 6e3b70c21 Fix link to Git installation instructions 4f8a9ca38 Clarify resources.Copy arguments ee86dd121 Update theme dc7c305cf Update theme 60c23920b Clarify caching for resources.FromString (#2120) 5bf2fef6d netlify: Hugo 0.115.0 46bde87c5 Merge branch 'tempv0.115.0' 42cc48c16 Specify target path caching for resources.ExecuteAsTemplate (#2027) a54bf4cd0 Correct the sample code of mermaid (#2119) 8c49b06fc docs: Update permalinks documentation a4818d99b Page bundles: link to info about single vs. list page templates (#2116) 3fc7744d7 snap: Document removable media access dbd08f58a Update theme df5b88633 netlify: Hugo 0.114.1 6b859834a Fix typo 9ec92cf68 Improve Dart Sass example for Netlify 2d294ece9 Add Dart Sass installation and usage documentation 4c6b77d6c Fix placement of curly braces 897812a50 Update template-debugging.md to include a jsonify example 22bca519b Update GitHub Pages hosting instructions (#2109) a964d93ce Document math functions new in v0.114.0 (#2108) 9f4cb040e netlify: Hugo 0.114.0 55b4d9221 Merge branch 'tempv0.114.0' 93c4dcf93 docs: Regen docshelper 96f03c77f docs: Regen CLI docs 8e22a228a Clarify resource media type variables (#2106) 2652da8d4 Update transform.Unmarshal.md (#2105) 92657177a Update theme 4601c1d65 Update theme a216f3145 Merge commit '3c1deaf201a35de08d23cc58f8f03682cace3349' eed8794f5 cache: Set default cache path based on $USER git-subtree-dir: docs git-subtree-split: c43daf45fdc36c254f4274a0815ea62d4d8c37e0
14 KiB
14 KiB
| title | description | categories | keywords | menu | toc | weight | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Diagrams | Use fenced code blocks and markdown render hooks to display diagrams. |
|
|
|
true | 50 |
{{< new-in "0.93.0" >}}
GoAT diagrams (Ascii)
Hugo supports GoAT natively. This means that this code block:
```goat
. . . .--- 1 .-- 1 / 1
/ \ | | .---+ .-+ +
/ \ .---+---. .--+--. | '--- 2 | '-- 2 / \ 2
+ + | | | | ---+ ---+ +
/ \ / \ .-+-. .-+-. .+. .+. | .--- 3 | .-- 3 \ / 3
/ \ / \ | | | | | | | | '---+ '-+ +
1 2 3 4 1 2 3 4 1 2 3 4 '--- 4 '-- 4 \ 4
```
Will be rendered as:
. . . .--- 1 .-- 1 / 1
/ \ | | .---+ .-+ +
/ \ .---+---. .--+--. | '--- 2 | '-- 2 / \ 2
+ + | | | | ---+ ---+ +
/ \ / \ .-+-. .-+-. .+. .+. | .--- 3 | .-- 3 \ / 3
/ \ / \ | | | | | | | | '---+ '-+ +
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:
<pre class="mermaid">
{{- .Inner | safeHTML }}
</pre>
{{ .Page.Store.Set "hasMermaid" true }}
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):
{{ if .Page.Store.Get "hasMermaid" }}
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
{{ end }}
With that you can use the mermaid language in Markdown code blocks:
```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
.
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
+-------------------+ ^ .---.
| 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
.
.---------. / \
| START | / \ .-+-------+-. ___________
'----+----' .-------. A / \ B | |COMPLEX| | / \ .-.
| | END |<-----+CHOICE +----->| | | +--->+ PREPARATION +--->| X |
v '-------' \ / | |PROCESS| | \___________/ '-'
.---------. \ / '-+---+---+-'
/ INPUT / \ /
'-----+---' '
| ^
v |
.-----------. .-----+-----. .-.
| PROCESS +---------------->| PROCESS |<------+ X |
'-----------' '-----------' '-'
File tree
Created from https://arthursonzogni.com/Diagon/#Tree
───Linux─┬─Android
├─Debian─┬─Ubuntu─┬─Lubuntu
│ │ ├─Kubuntu
│ │ ├─Xubuntu
│ │ └─Xubuntu
│ └─Mint
├─Centos
└─Fedora
Sequence diagram
https://arthursonzogni.com/Diagon/#Sequence
┌─────┐ ┌───┐
│Alice│ │Bob│
└──┬──┘ └─┬─┘
│ │
│ Hello Bob! │
│───────────>│
│ │
│Hello Alice!│
│<───────────│
┌──┴──┐ ┌─┴─┐
│Alice│ │Bob│
└─────┘ └───┘
Flowchart
https://arthursonzogni.com/Diagon/#Flowchart
_________________
╱ ╲ ┌─────┐
╱ 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
┌────────────────────────────────────────────────┐
│ │
├────────────────────────────────────────────────┤
│SYNTAX = { PRODUCTION } . │
├────────────────────────────────────────────────┤
│PRODUCTION = IDENTIFIER "=" EXPRESSION "." . │
├────────────────────────────────────────────────┤
│EXPRESSION = TERM { "|" TERM } . │
├────────────────────────────────────────────────┤
│TERM = FACTOR { FACTOR } . │
├────────────────────────────────────────────────┤
│FACTOR = IDENTIFIER │
├────────────────────────────────────────────────┤
│ | LITERAL │
├────────────────────────────────────────────────┤
│ | "[" EXPRESSION "]" │
├────────────────────────────────────────────────┤
│ | "(" EXPRESSION ")" │
├────────────────────────────────────────────────┤
│ | "{" EXPRESSION "}" . │
├────────────────────────────────────────────────┤
│IDENTIFIER = letter { letter } . │
├────────────────────────────────────────────────┤
│LITERAL = """" character { character } """" .│
└────────────────────────────────────────────────┘