Help us understand the problem. What is going on with this article?

Hugoにmermaidを組み込んでみた

More than 1 year has passed since last update.

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした