Mermaid.js 図の完全ガイド
シンプルなテキストベースの構文でプロフェッショナルな図を作成する方法を学ぶ
Mermaid.js とは？
Mermaid は、Markdown 風のテキスト定義を使って図を動的に作成・変更できる JavaScript ベースの図表作成ツールです。シンプルなテキスト説明から図を生成できるオープンソースプロジェクトです。
複雑な描画ツールの代わりに、図を説明するコード風の構文を書き、Mermaid がそれを視覚的な図としてレンダリングします。このアプローチにより、図はバージョン管理しやすく、更新も容易で、ドキュメント作成に最適になります。
Mermaid はドキュメントプラットフォーム、Wiki、Markdown ファイルにシームレスに統合でき、開発者やテクニカルライターに好まれるツールです。
Mermaid.js を使う理由
- バージョン管理: 図はテキストファイルなので、コードと一緒に Git で管理できます
- 素早い更新: 図を描き直す代わりに数行のテキストを変更するだけで済みます
- 一貫性: Mermaid がレイアウトとスタイルを自動で処理し、統一された図を保ちます
- デザインツール不要: Visio や Lucidchart など高価なツールは不要です
- コードとしてのドキュメント: 図をドキュメントと同じリポジトリに保存できます
- クロスプラットフォーム: ブラウザと Node.js で動作し、多くのプラットフォームに統合できます
- 無料・オープンソース: ライセンス費用なし、活発なコミュニティ
- 複数の図の種類: フローチャート、シーケンス図、クラス図などに対応
対応する図の種類
Mermaid はさまざまなドキュメントニーズに対応する多様な図の種類をサポートしています:
フローチャート
ノードとエッジでワークフロー、プロセス、意思決定ツリーを可視化します。
flowchart TD
A[Start] --> B{Decision}
B -->|Yes| C[Process]
B -->|No| D[Alternative]
C --> E[End]
D --> Eユースケース: プロセスフロー、アルゴリズム、意思決定ロジック
シーケンス図
時間の経過に沿ったアクターやシステム間のやり取りを示します。
sequenceDiagram
participant User
participant API
participant DB
User->>API: Request data
API->>DB: Query
DB-->>API: Results
API-->>User: Responseユースケース: API のやり取り、システム間通信、ユーザーフロー
クラス図
クラス、属性、関係を用いてオブジェクト指向システムをモデル化します。
classDiagram
class Animal {
+String name
+int age
+makeSound()
}
class Dog {
+bark()
}
Animal <|-- Dogユースケース: ソフトウェアアーキテクチャ、OOP 設計、データベーススキーマ
状態図
システムやプロセスの状態と遷移を表現します。
stateDiagram-v2
[*] --> Idle
Idle --> Loading: Start
Loading --> Success: Complete
Loading --> Error: Fail
Success --> [*]
Error --> Idle: Retryユースケース: ステートマシン、ライフサイクル管理、UI 状態
ER 図
データベース構造とエンティティ間の関係をモデル化します。
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
CUSTOMER {
int id
string name
string email
}ユースケース: データベース設計、データモデリング、システムアーキテクチャ
ガントチャート
プロジェクトのスケジュールやタイムラインを計画・可視化します。
gantt
title Project Timeline
dateFormat YYYY-MM-DD
section Phase 1
Design :a1, 2024-01-01, 30d
Development :a2, after a1, 45dユースケース: プロジェクト計画、スプリントタイムライン、ロードマップ
円グラフ
比率データや割合を視覚的に表示します。
pie title Distribution
"Category A" : 42
"Category B" : 30
"Category C" : 28ユースケース: アンケート結果、市場シェア、リソース配分
Git グラフ
Git のブランチ戦略とコミット履歴を可視化します。
gitGraph
commit
branch develop
checkout develop
commit
checkout main
merge developユースケース: Git ワークフローのドキュメント化、ブランチ戦略
Mermaid の始め方
1. 図の種類を選ぶ
まず、表示したい内容に最適な図の種類を決めます。各種類は 'flowchart'、'sequenceDiagram'、'classDiagram' のような特定のキーワードから始まります。
2. テキスト構文を書く
Mermaid のシンプルな構文を使って図を記述します。構文は直感的で、ほとんど自然言語のように読めます。例えば 'A --> B' は A から B への矢印を作成します。
3. 図をプレビューする
オンラインビューアーまたは Mermaid 対応ツールで図をリアルタイムに確認します。満足するまで調整してください。
4. エクスポートして共有
図を SVG または PNG としてエクスポートしてプレゼンに使ったり、URL をチームと共有したりできます。Mermaid を Markdown ファイルに直接埋め込むこともできます。
ベストプラクティス
- 図は 1 つの概念やワークフローに集中させる
- 実際のビジネスロジックを表す意味のあるラベルを使う
- 複雑な図は小さく相互に関連する図に分割する
- 複雑な部分を説明するために %% を使ってコメントを追加する
- 図全体で一貫した命名規則を使う
- 最終化する前に対象環境で図をテストする
- 必要に応じて方向指定 (TD, LR) を入れてレイアウトを制御する
- フローチャートで関連ノードをまとめるために subgraph を使う
- 読みやすさを保つためにスタイル設定は控えめに使う
- 図のソースファイルをコードと一緒にバージョン管理する
一般的なユースケース
ソフトウェアドキュメント
コードと一緒にシステムアーキテクチャ、API フロー、コンポーネント間のやり取りを文書化します。
プロジェクト計画
スプリント計画、プロジェクトのタイムライン、リソース配分のためにガントチャートを作成します。
技術提案
提案された解決策、システム設計、アーキテクチャ上の意思決定を可視化します。
ユーザージャーニー
ユーザーフロー、顧客体験、インタラクションパターンをマッピングします。
データベース設計
エンティティ関係、スキーマ構造、データ依存関係をモデル化します。
プロセスドキュメント
ビジネスプロセス、ワークフロー、標準操作手順を文書化します。
教育資料
チュートリアルや技術コース向けに明確でバージョン管理された図を作成します。
API ドキュメント
リクエスト/レスポンスのフロー、認証シーケンス、エンドポイントのやり取りを示します。
追加リソース
よくある質問
Mermaid Viewer の使い方と図の作成に関するよくある質問
最初の図を作成する準備はできましたか？
無料のオンライン Mermaid ビューアーを試して、数分でプロ品質の図を作り始めましょう。
Mermaid Viewer を開く