TheCloud/hugoDocs
1
0
Fork 0
mirror of https://github.com/gohugoio/hugoDocs.git synced 2025-09-15 03:14:51 -04:00
Code Issues Packages Projects Releases Wiki Activity

Adjust diagram docs

Browse Source
This commit is contained in:
Bjørn Erik Pedersen 2022-02-28 10:50:52 +01:00
parent f1d6000444
commit 64ac75367a
No known key found for this signature in database
GPG Key ID: 330E6E2BD4859D8F
2 changed files with 68 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
content/en/content-management/diagrams.md
View File

@ -12,8 +12,70 @@ 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
.---. .-. .-. .-. .-.
| A +----->| 1 +<---->| 2 |<----+ 4 +------------------. | 8 |
'---' '-' '+' '-' | '-'
| ^ | ^
v | v |
.-. .-+-. .-. .-+-. .-. .+. .---.
| 3 +---->| B |<----->| 5 +---->| C +---->| 6 +---->| 7 |<---->| D |
'-' '---' '-' '---' '-' '-' '---'
```
```
Will be rendered as:
```goat
.---. .-. .-. .-. .-.
| A +----->| 1 +<---->| 2 |<----+ 4 +------------------. | 8 |
'---' '-' '+' '-' | '-'
| ^ | ^
v | v |
.-. .-+-. .-. .-+-. .-. .+. .---.
| 3 +---->| B |<----->| 5 +---->| C +---->| 6 +---->| 7 |<---->| D |
'-' '---' '-' '---' '-' '-' '---'
```
## 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

6
layouts/partials/hooks/before-body-end.html Normal file
View File

@ -0,0 +1,6 @@
{{ 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 }}