5
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

Hugoにmermaidを組み込んでみた

Hugoにmermaidを組み込んでみたの抜粋版です

What's mermaid ?

フローチャートやシーケンスダイヤグラムやガントチャートをサクサクと書くことのできるライブラリです

01.png

公式サイト:mermaid

設定メモ

mermaidを取ってくる

mermaid.jshttps://unpkg.com/mermaid/から取ってきて、themes/theme/static/assetmermaidフォルダを作成してコピーする

mermaidをよきに計らうショートコードを書く

themes/theme/layouts/shortcodes

<div class="mermaid" align="{{ if .Get "align" }}{{ .Get "align" }}{{ else }}center{{ end }}">
    {{ safeHTML .Inner }}
</div>

mermaid.htmlとして書いておいた

ページでmermaidが呼び出されるように書いておく

ページで呼び出されるscriptをthemes/theme/layouts/partialsheader.htmlfooter.htmlのscriptタグが書かれているところに追記しておく
個人的にはthemes/theme/layouts/partialsscripts.htmlにまとめるようにしているので、そこにmermaidも追記しておいた

<script src="{{"asset/mermaid/mermaid.js" | relURL}}"></script>

きちんと動作するかテストしてみる

たとえば

{{<mermaid align="center">}}
  graph TD

  A[お正月] -->|お年玉をゲット| B(買い物に行くよ)
  B --> C{どれにしようかな}
  C -->|これかな| D[iTunes Card]
  C -->|これかな| E[iPhone XS Max]
  C -->|ま まさか| F[fa:fa-car The CLS Coupé]
{{< /mermaid >}}

な風に書いておくと

02.png

こうなってくれます

素晴らしい!!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
5
Help us understand the problem. What are the problem?