Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What is going on with this article?
@_takeuchi_

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

こうなってくれます

素晴らしい!!

4
Help us understand the problem. What is going on with this article?
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.
Sign Up
If you already have a Qiita account Login
4
Help us understand the problem. What is going on with this article?