arianpg arianpg

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 graph LR subgraph Netlify MD(Markdown) --Hugo--> SH(Shortcode) end subgraph Client SH --mermaid.js--> FH(Flow) end