butiran

Mermaid support

Add support for drawing flowchart with Mermaid .

shortcodes

Copy mermaid.html from themes\hugo-coder\layouts\shortcodes to layouts\shortcodes.

Copy baseof.html from themes\default\layouts\_default to layouts\_default.

Add following lines from Hugo Coder to baseof.html

  {{ if .HasShortcode "mermaid" }}
  <script src="https://cdn.jsdelivr.net/npm/mermaid@9.3.0/dist/mermaid.min.js"
    integrity=[Hugo Coder](https://themes.gohugo.io/themes/hugo-coder/)"sha256-QdTG1YTLLTwD3b95jLqFxpQX9uYuJMNAtVZgwKX4oYU=" crossorigin="anonymous"></script>
  <script>
    mermaid.initialize({ startOnLoad: true });
  </script>
  {{ end }}

before </body>.

create post

Create new post

$ hugo new content posts/mermaid-support.md
Content "D:\\blank\\content\\posts\\mermaid-support.md" created

And edit it.

test mermaid

1
2
{{< mermaid >}}
flowchart LR
  A --> B
  A(("1"))
  B(("2"))
{{< /mermaid >}}
3
4
{{< mermaid >}}
flowchart TB
  A --> B
  A(("3"))
  B(("4"))
{{< /mermaid >}}
``