Mermaidでテキストベースのダイアグラム図を作成する - コードで描く効率的な図の作成方法
どうも、Shinyaです。この記事では、テキストベースでダイアグラム図を作成できるライブラリ「Mermaid」について解説します。ExcelやWordでの図作成と比較しながら、Mermaidの基本的な使い方と対応する図の種類を紹介します。
- フローチャートやシーケンス図をテキストベースで作成したい人
- ExcelやWordでの図の作成・管理に非効率さを感じている人
- マークダウンに図を統合して管理したい人
- LLMなどのAI技術と親和性の高い図の作成方法を探している人
従来の図作成の課題
フローチャートやアーキテクチャ図の作成には、ExcelやWordなどのOfficeアプリケーション、または専用のダイアグラムツールが使われることが多いです。しかし、これらのアプリケーションでの図作成にはいくつかの課題があります。
- 作成・更新に時間がかかる: 図形を一つずつ配置し、矢印で接続する作業が必要
- 保守性が低い: フローを追加する際に全体の配置を手動で調整する必要がある
- テキストベースでない: Gitでの差分管理が困難で、LLMなどのテキストを扱う技術との親和性が低い
| 項目 | ExcelやWord | Mermaid |
|---|---|---|
| 作成方法 | 図形をGUIで配置 | テキスト（コード）で記述 |
| フローの追加 | 全体の再配置が必要 | 1〜数行のテキスト追加 |
| バージョン管理 | バイナリファイルのため差分管理が困難 | テキストのためGitで差分管理が可能 |
| LLMとの親和性 | 低い（バイナリ形式） | 高い（テキスト形式） |
| レイアウト | 手動で調整 | 自動レイアウト |
Mermaidとは
Mermaidは、JavaScriptベースのオープンソースライブラリで、テキスト（コード）からダイアグラム図を動的に生成します。マークダウンに統合できるため、ドキュメントと図を一元管理することが可能です。
JavaScript Open Source Awards 2019では「The Most Exciting Use of Technology」として表彰されています。
Mermaidの主な特徴
- テキストベース: コードで図を記述するため、Gitでのバージョン管理が可能
- 自動レイアウト: ノードの配置やフローの描画を自動で処理
- 多様な図に対応: フローチャート、シーケンス図、クラス図など多くの図をサポート
- 幅広い統合: GitHub、GitLab、VSCode、Docusaurusなど多くのプラットフォームで利用可能
Mermaidの基本的な使い方
Mermaidでは、マークダウンのコードブロック内にmermaidを指定して図を記述します。
フローチャート
フローチャートは、処理の流れや分岐を表現する図です。flowchartキーワードで定義し、TD（上から下）やLR（左から右）で方向を指定します。
以下はMermaid公式サイトで紹介されているコード例です。
```mermaid
flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
```
このコードをMermaidで描画すると、次のようなフローチャートが生成されます。
構文は直感的で、A[テキスト]でノードを定義し、-->で矢印を描画、|ラベル|でラベルを付与します。[]は四角形、()は角丸、{}はひし形（分岐）を表します。
フローの追加と削除
4番目の選択肢として「Sweet」を追加する場合、1行追加するだけで対応できます。
```mermaid
flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
C -->|Four| G[Sweet]
```
レイアウトはMermaidが自動で調整するため、ノードの位置を手動で変更する必要はありません。不要なフローを削除する場合も、該当する行を削除するだけです。
シーケンス図
シーケンス図は、システム間のメッセージのやり取りを時系列で表現する図です。API通信や認証フローの可視化に適しています。
クラス図
クラス図は、クラスの構造と関係を表現する図です。オブジェクト指向設計の可視化に利用されます。
状態図
状態図は、オブジェクトの状態遷移を表現する図です。ライフサイクルやワークフローの可視化に適しています。
ER図（エンティティ関係図）
ER図は、データベースのテーブル構造とリレーションを表現する図です。
Mermaidはここで紹介した図以外にも、ガントチャート、円グラフ、Git Graph、マインドマップ、タイムラインなど多くの図に対応しています。対応する図の一覧はMermaid公式ドキュメントで確認できます。
Mermaidの導入方法
Mermaidは多くのプラットフォームで利用可能です。代表的な導入方法を紹介します。
Visual Studio Code
VSCodeでは、拡張機能「Markdown Preview Mermaid Support」をインストールすることで、マークダウンのプレビュー画面でMermaid図を描画できます。
VSCodeのインストールについては、HomebrewでVisual Studio Codeをインストールするで解説しています。
GitHub / GitLab
GitHubとGitLabでは、マークダウンファイル内のmermaidコードブロックがネイティブで描画されます。READMEやIssue、Pull Requestの説明文にMermaid図を含めることが可能です。
Docusaurus
Docusaurusでは、@docusaurus/theme-mermaidテーマを導入することでMermaid図を利用できます。docusaurus.config.tsで以下のように設定します。
export default {
markdown: {
mermaid: true,
},
themes: ['@docusaurus/theme-mermaid'],
};
Docusaurusの基本的な使い方については、Docusaurusで静的サイトを構築するで解説しています。
Mermaid Live Editor
Mermaid Live Editorは、ブラウザ上でMermaid図を編集・プレビューできる公式ツールです。環境構築不要で、Mermaidの構文を試すことができます。
関連記事
まとめ
この記事では、テキストベースでダイアグラム図を作成できるMermaidについて解説しました。Mermaidを使用することで、フローチャート、シーケンス図、クラス図、状態図、ER図など多様な図をコードで記述でき、Gitでのバージョン管理やLLMとの連携も可能になります。VSCode、GitHub、Docusaurusなど多くのプラットフォームで利用できるため、ドキュメント作成の効率化に有効です。
参考リンク: