Diagrams

January 1, 1

GoAT 圖表 (ASCII)

Hugo 原生支援 GoAT 圖表，並使用嵌入式程式碼區塊渲染掛鉤。這意味著這段程式碼：

```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 圖表

Hugo 沒有內建的 Mermaid 圖表模板。您可以使用程式碼區塊渲染掛鉤來創建自己的模板：

layouts/_default/_markup/render-codeblock-mermaid.html
  
<pre class="mermaid">
  {{- .Inner | htmlEscape | safeHTML }}
</pre>  
{{ .Page.Store.Set "hasMermaid" true }}  

然後在內容模板的底部加入此片段：

{{ if .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 }}

這樣您就可以在 Markdown 程式碼區塊中使用 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 
prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

Diagrams

GoAT 圖表 (ASCII)

Mermaid 圖表

Goat ASCII 圖表範例

圖形

複雜

流程圖

表格