mermaid.jsを試してみる
mermaid.jsとは mermaid.jsは、JavaScriptのライブラリで、テキストベースの独自の構文(Mermaid記法)を記述し、フローチャートやダイヤグラム、ガントチャートなど、複雑な図表をグラフィカルに表示できます。 GitHubやQiita、Notionなど、いろいろなサービスでも採用されています。今回は、hugoでmermaid.jsを使えるようにしてみます。 hugoでmermaid.jsを使えるようにする 手順は以下の通りです。 layouts/partials/extend_footer.htmlに以下を追加。 {{ if or .Params.mermaid .Site.Params.mermaid }} <script src="https://cdn.jsdelivr.net/npm/mermaid@10.3.0/dist/mermaid.min.js"></script> {{- $loadmermaid := resources.Get "js/load-mermaid.js" }} <script src="{{ $loadmermaid.RelPermalink }}"></script> <script> window.initMermaid(); if (isDarkTheme()) { setPrefTheme('dark'); } else { setPrefTheme('light'); } </script> {{ end }} ※if文でmermaid: trueとした場合のみmermaid.min.jsを読み込むようにしています。このライブラリは3MBほどあり意外と大きい。 assets/js/load-mermaid.jsを作成。この処理は初期化および動的にテーマが切り替えられた際、再描画するために使われます。 (function(window){ 'use strict' const elementCode = '.mermaid' const loadMermaid = function(theme) { window.mermaid.initialize({theme}) window.mermaid.init({theme}, document.querySelectorAll(elementCode)) } const saveOriginalData = function(){ return new Promise((resolve, reject) => { try { var els = document....