mirror/hugo
1
0
Fork 0
mirror of https://github.com/gohugoio/hugo.git synced 2025-08-26 22:04:32 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge commit 'd706529720b3b2ccb99719ccd578062ca25a0cc2'

Browse Source
This commit is contained in:
Bjørn Erik Pedersen
2022-03-08 19:39:33 +01:00
parent 4576c82ed4 d706529720
commit 9d76b8fa34
23 changed files with 389 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
docs/content/en/content-management/diagrams.md
View File

@@ -12,8 +12,68 @@ 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:
````
```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:
```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
```
## 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`:
```go-html-template
<div class="mermaid">
{{- .Inner | safeHTML }}
</div>
{{ .Page.Store.Set "hasMermaid" true }}
```
And then include this snippet at the bottom of the content template (below `.Content`):
```go-html-template
{{ 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 }}
```
With that you can use the `mermaid` language in Markdown code blocks:
```mermaid
sequenceDiagram
participant Alice