arianpg/mermaid有効

mermaidを有効にして、フローやグラフを出せるようにする。

• 参考リンク
  • mermaid github
  • Hugoにmermaidを組み込んでみた

mermaidのcdn追加

headに追加

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.4.4/mermaid.min.js"></script>

mermaid用のshortcode追加

themes/m10c/layouts/shortcodes/mermaid.html

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

背景調整

このテーマでそのままmermaidを出力すると線が見えなかったりするので、背景を強制的に白くする。

<style>
  .mermaid {
    background-color:#f6f8fa;
  }
</style>

出力確認

graph LR
subgraph Netlify
  MD(Markdown) --Hugo--> SH(Shortcode)
end
subgraph Client
  SH --mermaid.js--> FH(Flow)
end