Web上で図やフローチャートを手軽に描けるMermaid。特にシーケンス図は、システム間のやりとりやプロセスの流れを視覚的に表現できるので、技術記事やプレゼン資料にも活用されています。 今回は、はてなブログにMermaidを組み込んでシーケンス図を描く方法について解説します。 なかなか試したことがない人も、これで「こんな感じで書けばいいんじゃないか」と思えるかもしれないです。
plantUMLは導入がめんどかったりする方へもオススメかも。。
1. Mermaidって何？
Mermaidは、テキストベースの記法で図を自動生成してくれるJavaScriptライブラリ。 シーケンス図、フローチャート、ガントチャートなど様々な図を記述できるのが特徴。 たとえば、以下のような記法でシーケンス図が作成できる。
sequenceDiagram
participant A as ユーザー
participant B as システム
A->>B: リクエスト送信
B->>A: レスポンス返却
↑をMermaidで出力すると↓
sequenceDiagram
participant A as ユーザー
participant B as システム
A->>B: リクエスト送信
B->>A: レスポンス返却
2. はてなブログでMermaidを使うには？
はてなブログ自体にはMermaidの描画機能が標準搭載されていないため、外部のJavaScriptライブラリを読み込む必要がある。 まず、はてなブログの「デザインCSS」や「フッター」部分にMermaidのスクリプトを読み込むためのコードを追加しました。 例えば、以下のように記述します。
<script type="module"> import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs'; mermaid.initialize({ startOnLoad: true }); </script>
また、私の場合、PCだと、背景が黒く、スマートフォンだと背景が白かったので、 以下の設定もカスタムCSSに入れました。
.mermaid {
background-color: #ffffff !important;
}
staff.hatenablog.com こちらの開発者の記事を参考に入れています。
また、Mermaid記法の図を記事に埋め込むには、僕はMarkdownで書いているので、以下のようにバッククォート３つにmermaidで書いています。 下記の参考コードは、スペースが入っていますので、コピーされる際はお気をつけください。
```mermaid sequenceDiagram participant A as ユーザー participant B as システム A->>B: リクエスト送信 B->>A: レスポンス返却 </div> ```
このコードを記事中に挿入すれば、読み込み時にMermaidが自動で解析してシーケンス図を表示してくれる（はず）。。
3. 実際にシーケンス図を描いてみる
sequenceDiagram
participant C as クライアント
participant S as サーバー
participant D as データベース
C->>S: APIリクエスト送信
S->>D: データ照会
D-->>S: 結果返却
S-->>C: レスポンス返却
sequenceDiagram
participant C as クライアント
participant S as サーバー
participant D as データベース
C->>S: APIリクエスト送信
S->>D: データ照会
D-->>S: 結果返却
S-->>C: レスポンス返却
この図は、クライアントからのAPIリクエストがサーバーを介してデータベースに問い合わせられ、最終的にレスポンスが返される流れを示している。 実際に記事に貼り付けてプレビューしてみると、パワポで書くより綺麗なシーケンス図が描かれていて、テキストなので、差分も取りやすい！
いいですよね。 差分もそうですが、エンジニアってなかなか、伝えるの難しい時あるから、シーケンスなどが簡単に出せて、Webで共有できると、伝わりやすい！
4. 注意点とカスタマイズ
- キャッシュのクリア
ブラウザキャッシュにより、Mermaid.jsの更新が反映されない場合があるので、キャッシュをクリアするか、シークレットモードで確認するといいかもしれない。
- スタイルの調整
MermaidはCSSでスタイル調整が可能。はてなブログのカスタムCSS設定で、図のフォントサイズや色、レイアウトを調整することも検討してみると良さそう。
- セキュリティの注意
外部CDNからJavaScriptを読み込む際は、記事全体のセキュリティリスクも考慮する必要がある。信頼できるCDN（今回の例ではjsdelivr）を使うのが無難。
5. まとめ
はてなブログでMermaidを使ってシーケンス図を描く方法について、簡単な手順を解説しました。
Mermaidは、テキストベースで図を描ける便利なツールであり、シーケンス図などを視覚的に表現できる点が魅力。
はてなブログにMermaid.jsのCDNを読み込むHTMLブロックを挿入し、記事中に mermaid"を使ってMermaid記法で図を記述すれば、APIの流れやシステム間のやりとりを簡単に図示できる。
この手法を使えば、技術記事やプロジェクトの仕様書など、さまざまなシーンでビジュアルな情報提供が可能になるはず。 今後、さらにカスタマイズして自分好みのデザインに調整することで、より洗練されたブログ記事作成にも役立つかな。。。
皆さんの参考になれば、うれしいです。 引き続きよろしくお願いいたします。
今日の広告はコチラです。
