※当サイトはリンクに広告ページが含まれている場合があります
図をブログに貼るのは地味に面倒な作業です。
- 描画ソフトで作図
- 画像ファイルで保存
- パスを意識して参照
このような一連の作業になりますし、そもそも画像をストックしておくのも面倒。こんなことを書いていたら、すごい面倒くさがりのようですが・・・🤣
そのため、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
```
このように描画されます。
flowchart TD
A-->B
A-->C
B-->D
C-->D
また、Hugoの公式サイトにあるような、描こうとすると少々面倒な以下の複雑な図形もテキストの記述のみで描画できます。
やっぱり便利👍
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 <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```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!
```
【無料】効率的に人事労務の情報を入手しませんか？
- 毎年のように改正される労働法令への対応に頭を悩ませている
- 総務や経理などの他の業務を兼務しているので、人事労務業務だけに時間を割けない
といった悩みを抱える企業の経営者・人事労務担当者向けに、公開型のブログでは書けない、本音を交えた人事労務に関する情報・ノウハウ、時期的なトピックに関するメールマガジンを「無料」で配信しています。
過去の配信分は公開しません。
情報が必要な方は、いますぐ以下のフォームから購読の登録をしてください。購読して不要と思ったら簡単に解除できますのでご安心ください。