图表

Diagrams

Use fenced code blocks and markdown render hooks to display diagrams.

New in v0.93.0

GoAT Diagrams (Ascii)

Hugo supports GoAT natively. This means that this code block:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
```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:

image-20230418212959281

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:

1
2
3
4
<div class="mermaid">
  {{- .Inner | safeHTML }}
</div>
{{ .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):

1
2
3
4
5
6
{{ 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

image-20230418213039435

Complex

image-20230418213057019

Process

image-20230418213112054

File tree

Created from https://arthursonzogni.com/Diagon/#Tree

image-20230418213127200

Sequence Diagram

https://arthursonzogni.com/Diagon/#Sequence

image-20230418213140087

Flowchart

https://arthursonzogni.com/Diagon/#Flowchart

image-20230418213154601

Table

https://arthursonzogni.com/Diagon/#Table

image-20230418213220528

最后修改 May 22, 2023: 第一次提交 (9f24e27)