はてなブログでmermaidを図を表示させる

はじめに

この記事では、「はてなブログでmermaidを図を表示させる方法」について書いています。

現在mermaidの書き方を勉強しており、いくつかmermaidに関する記事を投稿したのですが、内容を見返して見ると「あれ？ちゃんと図として表示されていない」となったのが記事を書いたきっかけでした。

自分に向けた備忘録でもありますが、「はてなブログでmermaidを図を表示させたい」な人の一助になれば嬉しいです。

方法

正直、このリンク先の記事を読んでください、で終わります（笑）

cartman0.hatenablog.com

例えば拡張機能でmermaidを表示できるようにしたVSCodeだと

```mermaid
pie 
    "cat" : 21
    "dog" : 35
    "bird" : 44
```

と書けばプレビューで表示されますが、はてなブログではこれだと表示されません。ただこのコードがそのまま表示されます。

はてなブログで表示されるようにするには以下のように書きます。

```
<div class="mermaid">
pie showdata
    title 円グラフのタイトル部分
    "アルファ" : 3.45
    "ベータ" : 16.32
    "ガンマ" : 44.10
    "デルタ" : 36.13
</div>


<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad: true});</script>
```

と、divタグの間にmermaidのコードを記述してください。

Note

記事編集画面でのプレビューではmermaidが表示されません。確認する場合は一回記事を投稿し、実際のブログの記事の画面で見る必要があります（プレビューでも表示されるようになって欲しい）

また、例えば複数のmermaidの図を載せたい場合、<script...>の部分は1つだけでよく、

```
１つ目の図表です
<div class="mermaid">
pie 
    "cat" : 21
    "dog" : 35
    "bird" : 44
</div>

２つ目の図表です

<div class="mermaid">
pie 
    "alpha" : 14
    "beta" : 58
    "gamma" : 28
</div>

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad: true});</script>

```

という記述で複数のmermaid図表を表示させることができます。

おわりに

「はてなブログでmermaidを図を表示させる方法」について解説しました。

mermaidはテキストベースで簡単に図が書けるので、はてなブログでも使っていきたいと思います。