最近読んだGoF本を記事としてまとめたくて、このサイト内でmermaidを記述したかったので組み込みました。その時の備忘録です。
※「エラーを出さずに動くようにする」をメインに進めていったので、「こっちの方がいい」「これやらない方がいい」等もあるかもです。適宜読み替えて実施してください。
手順
- mermaidのUNPKGから、
mermaild.min.jsとmermaild.min.js.mapをダウンロードする static/jsあたりに取得した2つのファイルを置く- 適宜リネームしてください。私はVersion情報を入れて
mermaild.min.9.2.jsにしました
- 適宜リネームしてください。私はVersion情報を入れて
layouts/shortcodes/mermaid.htmlを作成する。
<script src="{{"js/mermaid.min.9.2.js" | relURL}}" defer></script>
<div class="mermaid" align="{{ if .Get "align" }}{{ .Get "align" }}{{ else }}center{{ end }}">
{{ safeHTML .Inner }}
</div>
- (ローカルで確認するときは)ビルド＆devサーバ立ち上げ
- 記事内に
{{<mermaid>}} mermaidの記述 {{< /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!
prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!
参考
下記を参考にさせていただきました！ ありがとうございました。