はてなブログでMermaidを使うための設定

フローチャートしか見てないですけど、これは面白い。テキストの編集しやすさが流動的に図形を生む。意外と深いものじゃないかという気がしてきました。

Textwellでプレビューできるようにしたし、はてなブログにも導入しましょう。

はてなブログ

はてなブログ 4.31.0

分類: ソーシャルネットワーキング,ライフスタイル
価格: 無料 (株式会社はてな)

アプリ版を使ってMermaidのスクリプトを埋め込むことにします。

設定の仕方

左上のをタップし「詳細設定」を開きます。

「head要素にメタデータを追加」にMermaid用の下記スクリプトを貼り付けます。

<script type="module">
import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>

「変更する」を押す。設定はこれで完了です。

使い方

編集モードがMarkdownであれば、```mermaidでMermaid記法を表示できます。

```mermaid
flowchart LR
努力 --> 未来 ==> ビューティフルスター
```

このスクリプトが下図のようになります。

flowchart LR
努力 --> 未来 ==> ビューティフルスター

HTMLタグの場合はclassをmermaidにします。

<div class="mermaid">
flowchart LR
モーニング娘 --> 米津玄師
</div>

マインドマップも描けそう。

まとめ

ブログで表示できる意味は大きいけど、どう大きいかは不明。使っていく中で見つけることになるかな。