図をブログに貼るのは地味に面倒な作業です。

• 描画ソフトで作図
• 画像ファイルで保存
• パスを意識して参照

このような一連の作業になりますし、そもそも画像をストックしておくのも面倒。こんなことを書いていたら、すごい面倒くさがりのようですが・・・🤣

そのため、Hugoで運用している本ブログに、Mermaidを導入しました。

ちなみに、Mermaidとは、公式サイトによると、

JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.

であり、簡単に言えば、テキストのみで手軽にダイアグラムやチャートを描画できるツールです。

関連：テキストのみで図を描画できるMermaidでフローチャートを作図

HugoへのMermaid導入方法

HugoにMermaidを導入、といっても難しいことはなく、Hugoの公式サイトの指示どおりに設定したのみです。

何のトラブルもなく、設定できました👍

以下のようにテキストで書くと、

```mermaid
flowchart TD
    A-->B
    A-->C
    B-->D
    C-->D
```

このように描画されます。

また、Hugoの公式サイトにあるような、描こうとすると少々面倒な以下の複雑な図形もテキストの記述のみで描画できます。

やっぱり便利👍

```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts 
prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
```

参考：Hugo 公式サイト - Diagrams