diff options
Diffstat (limited to 'docs/content/en/content-management/diagrams.md')
| -rw-r--r-- | docs/content/en/content-management/diagrams.md | 38 |
1 files changed, 13 insertions, 25 deletions
diff --git a/docs/content/en/content-management/diagrams.md b/docs/content/en/content-management/diagrams.md index 243a70fd4..c95548249 100644 --- a/docs/content/en/content-management/diagrams.md +++ b/docs/content/en/content-management/diagrams.md @@ -1,25 +1,23 @@ --- title: Diagrams -date: 2022-02-20 +LinkTitle: Diagrams +description: Use fenced code blocks and markdown render hooks to display diagrams. categories: [content management] keywords: [diagrams,drawing] menu: docs: - parent: "content-management" - weight: 22 -weight: 22 + parent: content-management + weight: 50 toc: true +weight: 50 --- - - {{< new-in "0.93.0" >}} - ## GoAT Diagrams (Ascii) -Hugo! supports [GoAT](https://github.com/bep/goat) natively. This means that this code block: +Hugo supports [GoAT](https://github.com/bep/goat) natively. This means that this code block: -```` +````txt ```goat . . . .--- 1 .-- 1 / 1 / \ | | .---+ .-+ + @@ -45,14 +43,9 @@ Will be rendered as: 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`: - +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"> @@ -61,7 +54,7 @@ Hugo currently does not provide default templates for Mermaid diagrams. But you {{ .Page.Store.Set "hasMermaid" true }} ``` -And then include this snippet at the bottom of the content template (below `.Content`): +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): ```go-html-template {{ if .Page.Store.Get "hasMermaid" }} @@ -88,8 +81,6 @@ sequenceDiagram Bob-->>John: Jolly good! ``` - - ## Goat Ascii Diagram Examples ### Graphics @@ -160,7 +151,7 @@ sequenceDiagram ### File tree -Created from https://arthursonzogni.com/Diagon/#Tree +Created from <https://arthursonzogni.com/Diagon/#Tree> ```goat { width=300 color="orange" } ───Linux─┬─Android @@ -176,7 +167,7 @@ Created from https://arthursonzogni.com/Diagon/#Tree ### Sequence Diagram -https://arthursonzogni.com/Diagon/#Sequence +<https://arthursonzogni.com/Diagon/#Sequence> ```goat { class="w-40" } ┌─────┐ ┌───┐ @@ -197,7 +188,7 @@ https://arthursonzogni.com/Diagon/#Sequence ### Flowchart -https://arthursonzogni.com/Diagon/#Flowchart +<https://arthursonzogni.com/Diagon/#Flowchart> ```goat _________________ @@ -243,7 +234,7 @@ https://arthursonzogni.com/Diagon/#Flowchart ### Table -https://arthursonzogni.com/Diagon/#Table +<https://arthursonzogni.com/Diagon/#Table> ```goat { class="w-80 dark-blue" } ┌────────────────────────────────────────────────┐ @@ -272,6 +263,3 @@ https://arthursonzogni.com/Diagon/#Table │LITERAL = """" character { character } """" .│ └────────────────────────────────────────────────┘ ``` - - - |