Mermaid で描ける図の種類カタログ：flowchart／class／state／journey／timeline ほか完全整理
ドキュメントに図を埋め込みたいとき、画像ファイルを別途用意するのは手間がかかりますよね。Mermaid を使えば、Markdown にテキストで記述するだけで、さまざまな種類の図を自動生成できます。
本記事では、Mermaid で描ける図の種類を完全網羅し、それぞれの特徴と使い方を実例とともにご紹介します。フローチャートやクラス図といった定番の図から、ユーザージャーニーやタイムラインまで、幅広い用途に対応できる Mermaid の魅力を体感していただけるでしょう。
背景
ドキュメントにおける図の重要性
技術ドキュメントやプロジェクト資料では、文章だけでは伝わりにくい概念や構造を図で表現することが欠かせません。フローチャートでプロセスを可視化したり、クラス図でシステム設計を共有したりすることで、チーム全体の理解が深まります。
しかし、従来の図作成には課題がありました。専用のツールでビジュアルを作成し、画像として保存し、ドキュメントに埋め込む――この一連の作業は時間がかかる上、更新のたびに同じ手順を繰り返す必要があったのです。
Mermaid の登場
Mermaid は、テキストベースで図を記述できる JavaScript ライブラリです。2014 年にオープンソースプロジェクトとして誕生し、GitHub や GitLab、Notion といった多くのプラットフォームで標準サポートされるようになりました。
Markdown のコードブロック内に図の構造を書くだけで、レンダリング時に自動的に美しい図が生成されます。バージョン管理との相性も良く、差分確認や共同編集がスムーズに行えるのが大きな魅力です。
以下の図は、Mermaid を使った図作成のワークフローを示しています。
mermaidflowchart LR
write["テキストで<br/>図を記述"] --> render["Mermaid が<br/>レンダリング"]
render --> display["ブラウザに<br/>図を表示"]
display --> update["修正が必要?"]
update -->|"はい"| write
update -->|"いいえ"| done["完成"]
図で理解できる要点：
- テキスト記述から図の表示までが自動化されている
- 修正が必要な場合は記述を変更するだけで即座に反映される
- 画像ファイルの管理が不要
Mermaid のバージョンと進化
Mermaid は継続的に機能が拡張されており、現在では 10 種類以上の図が描けるようになっています。初期バージョンではフローチャートとシーケンス図が中心でしたが、クラス図、状態図、ガントチャート、ER 図、ユーザージャーニー、円グラフ、タイムラインなど、多彩な図形式に対応しました。
バージョンによってサポートされる図の種類や構文が異なるため、プラットフォームが採用している Mermaid のバージョンを確認することが重要です。
課題
図作成における従来の課題
技術ドキュメントで図を使う際、多くのチームが以下のような課題に直面していました。
作成と更新のコストが高い 専用ツール（Visio、draw.io、Lucidchart など）で図を作成すると、デザインに時間がかかります。さらに、仕様変更のたびに図を開いて編集し、エクスポートし直す必要がありました。複数の図を管理していると、どれが最新版か分からなくなることもあります。
バージョン管理が困難 画像ファイルは Git などのバージョン管理システムで差分を確認できません。「どこが変わったのか」を把握するには、変更前後の画像を目視で比較するしかなく、レビューの効率が悪くなります。
共同編集の制約 画像ファイルは複数人で同時編集できないため、図の更新は特定のメンバーに集中しがちです。ドキュメント全体の編集フローから図だけが切り離されてしまい、チーム全体での保守が難しくなります。
以下の図は、従来の図作成フローにおける課題を示しています。
mermaidflowchart TD
start["図が必要"] --> tool["専用ツールで<br/>図を作成"]
tool --> export["画像として<br/>エクスポート"]
export --> embed["ドキュメントに<br/>埋め込み"]
embed --> change["仕様変更が<br/>発生"]
change --> tool
style change fill:#ffcccc
図で理解できる要点：
- 仕様変更のたびにツールでの編集とエクスポートを繰り返す必要がある
- 作業が循環し、更新コストが高い
- 画像ファイルの管理とバージョン管理が課題
図の種類選択の難しさ
もう一つの課題は、「どの図を使えば良いか分からない」という点です。伝えたい内容に対して最適な図の種類を選ばないと、かえって理解しにくくなってしまいます。
例えば、処理の流れを示すにはフローチャートが適していますが、システム間のやり取りを表現するにはシーケンス図の方が分かりやすいでしょう。データベースの構造を説明するなら ER 図、ユーザー体験を描くならユーザージャーニー図が最適です。
Mermaid は多様な図に対応していますが、それぞれの特徴と用途を理解していないと、適切に使い分けることができません。
解決策
Mermaid によるテキストベース図作成
Mermaid を導入することで、従来の図作成における課題を解決できます。テキストで図を記述するため、以下のメリットが得られます。
作成と更新が高速 コードを書くようにテキストで図を記述するため、マウス操作で要素を配置する必要がありません。記述を変更すれば即座に図が更新されるので、試行錯誤もスムーズです。
バージョン管理が可能 テキストファイルなので Git で差分確認ができます。コードレビューと同じ感覚で図の変更をレビューでき、変更履歴も明確に残ります。
共同編集が容易 Markdown ファイル内に図を記述するため、ドキュメント全体を複数人で同時に編集できます。図だけを特別扱いする必要がなく、チーム全体で保守できるようになります。
用途別の図の選び方
Mermaid が提供する図の種類を用途別に整理すると、以下のようになります。
| # | 図の種類 | 主な用途 | 適したシーン |
|---|---|---|---|
| 1 | Flowchart | プロセス、処理の流れ | アルゴリズム、業務フロー |
| 2 | Sequence Diagram | システム間のやり取り | API 呼び出し、通信シーケンス |
| 3 | Class Diagram | クラス構造、関係性 | オブジェクト指向設計 |
| 4 | State Diagram | 状態遷移 | ライフサイクル、ステートマシン |
| 5 | ER Diagram | データベース構造 | テーブル設計、リレーション |
| 6 | User Journey | ユーザー体験 | UX デザイン、カスタマージャーニー |
| 7 | Gantt Chart | スケジュール管理 | プロジェクト計画、タスク管理 |
| 8 | Pie Chart | 割合、構成比 | 統計データ、比率の可視化 |
| 9 | Timeline | 時系列の出来事 | 歴史、プロジェクト年表 |
この表を参考に、目的に応じた図を選択することで、効果的なドキュメントを作成できます。
以下の図は、Mermaid による図作成の全体像を示しています。
mermaidflowchart TB
purpose["目的を明確化"] --> select["適切な図の<br/>種類を選択"]
select --> write["テキストで<br/>図を記述"]
write --> preview["プレビューで<br/>確認"]
preview --> adjust{"調整が<br/>必要?"}
adjust -->|"はい"| write
adjust -->|"いいえ"| commit["Git に<br/>コミット"]
commit --> share["チームで<br/>共有"]
図で理解できる要点：
- 目的に応じた図の種類を選ぶことが最初のステップ
- テキストベースなので修正と確認が高速
- Git でバージョン管理し、チームで共有できる
具体例
それでは、Mermaid で描ける主要な図の種類を、実際のコード例とともに詳しく見ていきましょう。
Flowchart（フローチャート）
フローチャートは、処理の流れや判断の分岐を視覚化するための最もポピュラーな図です。アルゴリズムの説明や業務プロセスの可視化に広く使われます。
基本的な記述方法
Mermaid のフローチャートは flowchart キーワードで開始し、続けて方向を指定します。方向には LR（左から右）、TB（上から下）などがあります。
markdown```mermaid
flowchart LR
start["開始"] --> process["処理を実行"]
process --> decision{"条件判定"}
decision -->|"Yes"| success["成功"]
decision -->|"No"| failure["失敗"]
```
この記述により、以下のようなフローチャートが生成されます。
mermaidflowchart LR
start["開始"] --> process["処理を実行"]
process --> decision{"条件判定"}
decision -->|"Yes"| success["成功"]
decision -->|"No"| failure["失敗"]
ノードの形状
ノードの形状を変えることで、意味を視覚的に区別できます。
markdown```mermaid
flowchart TB
A["長方形：処理"]
B(["丸角長方形：開始/終了"])
C{"ひし形：条件分岐"}
D[("円柱：データベース")]
E(("円：接続点"))
```
この記述により、以下のような図が生成されます。
mermaidflowchart TB
nodeA["長方形：処理"]
nodeB(["丸角長方形：開始/終了"])
nodeC{"ひし形：条件分岐"}
nodeD[("円柱：データベース")]
nodeE(("円：接続点"))
実践例：ユーザー認証フロー
実際の開発シーンでよく使われる、ユーザー認証フローをフローチャートで表現してみましょう。
markdown```mermaid
flowchart TD
login_start["ログイン画面"] --> input["認証情報を<br/>入力"]
input --> validate{"入力値<br/>チェック"}
validate -->|"NG"| error1["エラー表示"]
error1 --> input
validate -->|"OK"| api["API に<br/>認証リクエスト"]
api --> auth{"認証<br/>成功?"}
auth -->|"失敗"| error2["認証エラー"]
error2 --> input
auth -->|"成功"| token["トークン保存"]
token --> redirect["ホーム画面へ<br/>遷移"]
```
この記述により、ユーザー認証の流れが一目で理解できる図が生成されます。
mermaidflowchart TD
login_start["ログイン画面"] --> input["認証情報を<br/>入力"]
input --> validate{"入力値<br/>チェック"}
validate -->|"NG"| error1["エラー表示"]
error1 --> input
validate -->|"OK"| api["API に<br/>認証リクエスト"]
api --> auth{"認証<br/>成功?"}
auth -->|"失敗"| error2["認証エラー"]
error2 --> input
auth -->|"成功"| token["トークン保存"]
token --> redirect["ホーム画面へ<br/>遷移"]
図で理解できる要点：
- 入力値チェックと API 認証の 2 段階の検証がある
- エラー時は入力画面に戻る仕組み
- 成功時はトークンを保存してからホーム画面へ遷移
Sequence Diagram（シーケンス図）
シーケンス図は、システムやコンポーネント間のやり取りを時系列で表現します。API 呼び出しの流れや、マイクロサービス間の通信を説明する際に非常に効果的です。
基本的な記述方法
シーケンス図は sequenceDiagram キーワードで開始します。参加者（participant）を定義し、矢印でメッセージのやり取りを表現します。
markdown```mermaid
sequenceDiagram
participant User as ユーザー
participant App as アプリ
participant API as API サーバー
User->>App: ボタンをクリック
App->>API: データ取得リクエスト
API-->>App: データを返却
App-->>User: 画面に表示
```
この記述により、以下のようなシーケンス図が生成されます。
mermaidsequenceDiagram
participant User as ユーザー
participant App as アプリ
participant API as API サーバー
User->>App: ボタンをクリック
App->>API: データ取得リクエスト
API-->>App: データを返却
App-->>User: 画面に表示
矢印の種類
矢印の種類を変えることで、同期/非同期、応答などを区別できます。
| # | 記法 | 意味 |
|---|---|---|
| 1 | ->> | 実線矢印（同期呼び出し） |
| 2 | -->> | 点線矢印（応答） |
| 3 | --) | 点線矢印（非同期応答） |
| 4 | -x | 実線矢印に ×（失敗） |
実践例：EC サイトの注文処理
EC サイトでユーザーが商品を注文する際のシステム間のやり取りを表現してみましょう。
markdown```mermaid
sequenceDiagram
participant U as ユーザー
participant F as フロントエンド
participant O as 注文 API
participant P as 決済 API
participant D as DB
U->>F: 注文ボタンをクリック
F->>O: 注文データを送信
O->>D: 在庫確認
D-->>O: 在庫あり
O->>P: 決済リクエスト
P-->>O: 決済成功
O->>D: 注文を保存
D-->>O: 保存完了
O-->>F: 注文完了通知
F-->>U: 完了画面を表示
```
この記述により、以下のようなシーケンス図が生成されます。
mermaidsequenceDiagram
participant U as ユーザー
participant F as フロントエンド
participant O as 注文 API
participant P as 決済 API
participant D as DB
U->>F: 注文ボタンをクリック
F->>O: 注文データを送信
O->>D: 在庫確認
D-->>O: 在庫あり
O->>P: 決済リクエスト
P-->>O: 決済成功
O->>D: 注文を保存
D-->>O: 保存完了
O-->>F: 注文完了通知
F-->>U: 完了画面を表示
図で理解できる要点：
- 注文処理は在庫確認、決済、データ保存の 3 ステップで構成される
- 各ステップで API や DB とのやり取りが発生
- すべて成功して初めてユーザーに完了画面が表示される
Class Diagram（クラス図）
クラス図は、オブジェクト指向プログラミングにおけるクラスの構造と関係性を表現します。システム設計やコードレビューの際に、全体像を共有するために使われます。
基本的な記述方法
クラス図は classDiagram キーワードで開始します。クラス名、属性、メソッドを記述し、クラス間の関係を矢印で表現します。
markdown```mermaid
classDiagram
class User {
+String name
+String email
+login()
+logout()
}
class Order {
+int orderId
+Date orderDate
+calculate()
}
User "1" --> "*" Order : 注文する
```
この記述により、以下のようなクラス図が生成されます。
mermaidclassDiagram
class User {
+String name
+String email
+login()
+logout()
}
class Order {
+int orderId
+Date orderDate
+calculate()
}
User "1" --> "*" Order : 注文する
クラス間の関係
クラス間の関係には、継承、実装、関連、集約、コンポジションなどがあります。
| # | 記法 | 関係 | 意味 |
|---|---|---|---|
| 1 | <|-- | 継承 | is-a 関係 |
| 2 | <|.. | 実装 | インターフェース実装 |
| 3 | --> | 関連 | has-a 関係 |
| 4 | --o | 集約 | 部分全体（弱い所有） |
| 5 | --* | コンポジション | 部分全体（強い所有） |
実践例：ブログシステムのクラス設計
ブログシステムの主要なクラスとその関係を表現してみましょう。
markdown```mermaid
classDiagram
class User {
+String userId
+String name
+String email
+register()
+authenticate()
}
class Post {
+String postId
+String title
+String content
+Date publishedAt
+publish()
+update()
}
class Comment {
+String commentId
+String content
+Date createdAt
+submit()
}
User "1" --> "*" Post : 投稿する
Post "1" --> "*" Comment : 含む
User "1" --> "*" Comment : 書き込む
```
この記述により、以下のようなクラス図が生成されます。
mermaidclassDiagram
class User {
+String userId
+String name
+String email
+register()
+authenticate()
}
class Post {
+String postId
+String title
+String content
+Date publishedAt
+publish()
+update()
}
class Comment {
+String commentId
+String content
+Date createdAt
+submit()
}
User "1" --> "*" Post : 投稿する
Post "1" --> "*" Comment : 含む
User "1" --> "*" Comment : 書き込む
図で理解できる要点：
- User は複数の Post を投稿できる（1 対多）
- Post は複数の Comment を持つ（1 対多）
- User は複数の Comment を書き込める（1 対多）
State Diagram（状態図）
状態図は、オブジェクトやシステムが取りうる状態と、状態間の遷移を表現します。ライフサイクルやワークフローの設計に有効です。
基本的な記述方法
状態図は stateDiagram-v2 キーワードで開始します（v2 は新バージョンの記法です）。状態を定義し、矢印で遷移を表現します。
markdown```mermaid
stateDiagram-v2
[*] --> 下書き
下書き --> レビュー中 : 提出
レビュー中 --> 公開済み : 承認
レビュー中 --> 下書き : 差し戻し
公開済み --> アーカイブ : 期限切れ
アーカイブ --> [*]
```
この記述により、以下のような状態図が生成されます。
mermaidstateDiagram-v2
[*] --> 下書き
下書き --> レビュー中 : 提出
レビュー中 --> 公開済み : 承認
レビュー中 --> 下書き : 差し戻し
公開済み --> アーカイブ : 期限切れ
アーカイブ --> [*]
複合状態
状態の中にさらに状態を持つ複合状態も表現できます。
markdown```mermaid
stateDiagram-v2
[*] --> Active
state Active {
[*] --> Running
Running --> Paused : 一時停止
Paused --> Running : 再開
}
Active --> Terminated : 終了
Terminated --> [*]
```
この記述により、以下のような複合状態の図が生成されます。
mermaidstateDiagram-v2
[*] --> Active
state Active {
[*] --> Running
Running --> Paused : 一時停止
Paused --> Running : 再開
}
Active --> Terminated : 終了
Terminated --> [*]
実践例：注文ステータスの状態遷移
EC サイトの注文がどのような状態を経て完了するかを表現してみましょう。
markdown```mermaid
stateDiagram-v2
[*] --> 注文受付
注文受付 --> 決済待ち : 注文確定
決済待ち --> 決済完了 : 支払い成功
決済待ち --> キャンセル : 支払い失敗
決済完了 --> 配送準備中 : 処理開始
配送準備中 --> 配送中 : 発送
配送中 --> 配達完了 : 受け取り
配達完了 --> [*]
キャンセル --> [*]
```
この記述により、以下のような状態遷移図が生成されます。
mermaidstateDiagram-v2
[*] --> 注文受付
注文受付 --> 決済待ち : 注文確定
決済待ち --> 決済完了 : 支払い成功
決済待ち --> キャンセル : 支払い失敗
決済完了 --> 配送準備中 : 処理開始
配送準備中 --> 配送中 : 発送
配送中 --> 配達完了 : 受け取り
配達完了 --> [*]
キャンセル --> [*]
図で理解できる要点：
- 注文は 7 つの状態を遷移する
- 決済失敗時はキャンセル状態へ遷移
- 正常系は配達完了で終了、異常系はキャンセルで終了
ER Diagram（ER 図）
ER 図は、データベースのテーブル構造とリレーションシップを表現します。データベース設計やスキーマのドキュメント化に欠かせません。
基本的な記述方法
ER 図は erDiagram キーワードで開始します。エンティティとリレーションシップを記述します。
markdown```mermaid
erDiagram
USER ||--o{ ORDER : "注文する"
ORDER ||--|{ ORDER_ITEM : "含む"
PRODUCT ||--o{ ORDER_ITEM : "注文される"
```
この記述により、以下のような ER 図が生成されます。
mermaiderDiagram
USER ||--o{ ORDER : "注文する"
ORDER ||--|{ ORDER_ITEM : "含む"
PRODUCT ||--o{ ORDER_ITEM : "注文される"
リレーションシップの記法
リレーションシップは以下の記号で表現します。
| # | 記法 | 意味 |
|---|---|---|
| 1 | ||--o{ | 1 対多 |
| 2 | }|--|| | 多対 1 |
| 3 | }|--o{ | 多対多 |
| 4 | ||--|| | 1 対 1 |
| 5 | ||..o{ | 1 対多（任意） |
実践例：EC サイトのデータベース設計
EC サイトの主要なテーブルとリレーションシップを表現してみましょう。
markdown```mermaid
erDiagram
USER {
int user_id PK
string name
string email
datetime created_at
}
ORDER {
int order_id PK
int user_id FK
datetime order_date
int total_amount
}
ORDER_ITEM {
int order_item_id PK
int order_id FK
int product_id FK
int quantity
int price
}
PRODUCT {
int product_id PK
string name
int price
int stock
}
USER ||--o{ ORDER : "注文する"
ORDER ||--|{ ORDER_ITEM : "含む"
PRODUCT ||--o{ ORDER_ITEM : "注文される"
```
この記述により、以下のような ER 図が生成されます。
mermaiderDiagram
USER {
int user_id PK
string name
string email
datetime created_at
}
ORDER {
int order_id PK
int user_id FK
datetime order_date
int total_amount
}
ORDER_ITEM {
int order_item_id PK
int order_id FK
int product_id FK
int quantity
int price
}
PRODUCT {
int product_id PK
string name
int price
int stock
}
USER ||--o{ ORDER : "注文する"
ORDER ||--|{ ORDER_ITEM : "含む"
PRODUCT ||--o{ ORDER_ITEM : "注文される"
図で理解できる要点：
- USER と ORDER は 1 対多の関係
- ORDER と PRODUCT の間に ORDER_ITEM という中間テーブルがある
- 各テーブルの主キー（PK）と外部キー（FK）が明示されている
User Journey（ユーザージャーニー）
ユーザージャーニー図は、ユーザーがサービスを利用する過程での体験を可視化します。各段階でのユーザーの感情や満足度を表現できるため、UX 設計に有効です。
基本的な記述方法
ユーザージャーニー図は journey キーワードで開始します。タイトル、セクション、タスクと評価を記述します。
markdown```mermaid
journey
title ユーザーの 1 日
section 朝
起床: 3: ユーザー
朝食: 5: ユーザー
section 昼
仕事: 3: ユーザー
昼食: 4: ユーザー
section 夜
帰宅: 4: ユーザー
夕食: 5: ユーザー
```
評価は 1 から 5 の数値で表現し、数値が高いほど満足度が高いことを示します。
この記述により、以下のようなユーザージャーニー図が生成されます。
mermaidjourney
title ユーザーの 1 日
section 朝
起床: 3: ユーザー
朝食: 5: ユーザー
section 昼
仕事: 3: ユーザー
昼食: 4: ユーザー
section 夜
帰宅: 4: ユーザー
夕食: 5: ユーザー
実践例：EC サイトでの購入体験
ユーザーが EC サイトで商品を購入する際の体験を、各ステップの満足度とともに表現してみましょう。
markdown```mermaid
journey
title EC サイトでの購入体験
section 商品探索
サイトにアクセス: 4: ユーザー
商品を検索: 3: ユーザー
商品詳細を確認: 5: ユーザー
section 購入手続き
カートに追加: 5: ユーザー
配送先を入力: 2: ユーザー
決済情報を入力: 2: ユーザー
section 完了
注文確定: 4: ユーザー
確認メール受信: 5: ユーザー
```
この記述により、以下のようなユーザージャーニー図が生成されます。
mermaidjourney
title EC サイトでの購入体験
section 商品探索
サイトにアクセス: 4: ユーザー
商品を検索: 3: ユーザー
商品詳細を確認: 5: ユーザー
section 購入手続き
カートに追加: 5: ユーザー
配送先を入力: 2: ユーザー
決済情報を入力: 2: ユーザー
section 完了
注文確定: 4: ユーザー
確認メール受信: 5: ユーザー
図で理解できる要点：
- 商品詳細確認とカート追加は満足度が高い（5）
- 配送先と決済情報の入力は満足度が低い（2）
- この分析から、入力フォームの改善が UX 向上のポイントと分かる
Gantt Chart（ガントチャート）
ガントチャートは、プロジェクトのスケジュールやタスクの進捗を時間軸で表現します。プロジェクト管理やマイルストーンの可視化に使われます。
基本的な記述方法
ガントチャートは gantt キーワードで開始します。日付形式、タイトル、セクション、タスクを記述します。
markdown```mermaid
gantt
title プロジェクトスケジュール
dateFormat YYYY-MM-DD
section 設計フェーズ
要件定義 :a1, 2024-01-01, 10d
基本設計 :a2, after a1, 15d
section 開発フェーズ
実装 :a3, after a2, 30d
テスト :a4, after a3, 15d
```
この記述により、以下のようなガントチャートが生成されます。
mermaidgantt
title プロジェクトスケジュール
dateFormat YYYY-MM-DD
section 設計フェーズ
要件定義 :a1, 2024-01-01, 10d
基本設計 :a2, after a1, 15d
section 開発フェーズ
実装 :a3, after a2, 30d
テスト :a4, after a3, 15d
タスクの依存関係
after キーワードを使うことで、タスクの依存関係を表現できます。あるタスクが終わってから次のタスクを開始する、という関係性を明示できます。
実践例：Web アプリ開発プロジェクト
Web アプリケーション開発プロジェクトの全体スケジュールを表現してみましょう。
markdown```mermaid
gantt
title Web アプリ開発プロジェクト
dateFormat YYYY-MM-DD
section 企画
要件定義 :req, 2024-04-01, 7d
画面設計 :design, after req, 10d
section 開発
フロントエンド開発 :front, after design, 20d
バックエンド開発 :back, after design, 25d
API 統合 :api, after front, 10d
section テスト
単体テスト :unit, after api, 7d
結合テスト :int, after unit, 7d
section リリース
本番環境構築 :prod, after int, 3d
リリース :release, after prod, 1d
```
この記述により、以下のようなガントチャートが生成されます。
mermaidgantt
title Web アプリ開発プロジェクト
dateFormat YYYY-MM-DD
section 企画
要件定義 :req, 2024-04-01, 7d
画面設計 :design, after req, 10d
section 開発
フロントエンド開発 :front, after design, 20d
バックエンド開発 :back, after design, 25d
API 統合 :api, after front, 10d
section テスト
単体テスト :unit, after api, 7d
結合テスト :int, after unit, 7d
section リリース
本番環境構築 :prod, after int, 3d
リリース :release, after prod, 1d
図で理解できる要点：
- フロントエンドとバックエンドは並行して開発できる
- API 統合はフロントエンド完了後に実施
- テストは段階的に実施され、最後にリリース
Pie Chart（円グラフ）
円グラフは、全体に対する各要素の割合を視覚的に表現します。統計データや構成比を示す際に効果的です。
基本的な記述方法
円グラフは pie キーワードで開始し、タイトルとデータを記述します。
markdown```mermaid
pie title 言語別使用率
"JavaScript" : 40
"TypeScript" : 30
"Python" : 20
"Go" : 10
```
この記述により、以下のような円グラフが生成されます。
mermaidpie title 言語別使用率
"JavaScript" : 40
"TypeScript" : 30
"Python" : 20
"Go" : 10
実践例：プロジェクトの工数配分
プロジェクト全体の工数がどのフェーズに配分されているかを表現してみましょう。
markdown```mermaid
pie title プロジェクト工数配分
"要件定義" : 10
"設計" : 15
"実装" : 40
"テスト" : 25
"リリース準備" : 10
```
この記述により、以下のような円グラフが生成されます。
mermaidpie title プロジェクト工数配分
"要件定義" : 10
"設計" : 15
"実装" : 40
"テスト" : 25
"リリース準備" : 10
この図から、実装フェーズが全体の 40%を占めており、最も工数がかかることが一目で分かります。テストフェーズも 25%と大きな割合を占めており、品質担保に十分な時間を確保していることが読み取れます。
Timeline（タイムライン）
タイムライン図は、時系列で出来事や変化を表現します。プロジェクトの歴史やバージョンリリースの経緯を示すのに適しています。
基本的な記述方法
タイムライン図は timeline キーワードで開始し、タイトルとセクション、イベントを記述します。
markdown```mermaid
timeline
title サービスの歴史
2020 : サービス開始
2021 : モバイルアプリリリース
: ユーザー数 10 万人突破
2022 : API 公開
: 海外展開開始
2023 : AI 機能追加
```
この記述により、以下のようなタイムライン図が生成されます。
mermaidtimeline
title サービスの歴史
2020 : サービス開始
2021 : モバイルアプリリリース
: ユーザー数 10 万人突破
2022 : API 公開
: 海外展開開始
2023 : AI 機能追加
実践例：フレームワークのバージョン履歴
人気の Web フレームワークのメジャーバージョンリリースの歴史を表現してみましょう。
markdown```mermaid
timeline
title Next.js バージョン履歴
2016 : v1.0 リリース
: React SSR 対応
2018 : v7.0 リリース
: 静的サイト生成追加
2020 : v10.0 リリース
: 画像最適化機能
2022 : v13.0 リリース
: App Router 導入
2024 : v14.0 リリース
: Server Actions 安定版
```
この記述により、以下のようなタイムライン図が生成されます。
mermaidtimeline
title Next.js バージョン履歴
2016 : v1.0 リリース
: React SSR 対応
2018 : v7.0 リリース
: 静的サイト生成追加
2020 : v10.0 リリース
: 画像最適化機能
2022 : v13.0 リリース
: App Router 導入
2024 : v14.0 リリース
: Server Actions 安定版
図で理解できる要点：
- Next.js は 2016 年から継続的に進化している
- 約 2 年ごとにメジャーアップデートがリリースされている
- SSR、静的生成、App Router など、大きな機能追加が段階的に行われている
まとめ
本記事では、Mermaid で描ける主要な図の種類を網羅的にご紹介しました。フローチャート、シーケンス図、クラス図、状態図、ER 図、ユーザージャーニー、ガントチャート、円グラフ、タイムラインなど、用途に応じた多彩な図を作成できることがお分かりいただけたでしょう。
Mermaid の最大の魅力は、テキストで図を記述できる点です。専用ツールを開く必要がなく、Markdown ファイル内に直接記述できるため、ドキュメント作成の効率が大幅に向上します。バージョン管理システムとの相性も良く、コードレビューと同じ感覚で図の変更を追跡できます。
また、図の種類ごとに適した用途があることも重要なポイントです。処理の流れはフローチャート、システム間のやり取りはシーケンス図、データベース設計は ER 図といったように、目的に応じて最適な図を選択することで、情報を効果的に伝えられます。
Mermaid は GitHub、GitLab、Notion、VS Code など、多くのプラットフォームで標準サポートされています。すぐに使い始められる環境が整っているので、ぜひ日々のドキュメント作成に取り入れてみてください。テキストベースの図作成がもたらす生産性の向上を、実感していただけるはずです。
図の種類選択の基本方針
最後に、図の種類を選ぶ際の基本方針をまとめます。
| # | 伝えたい内容 | 推奨する図 | 理由 |
|---|---|---|---|
| 1 | 処理の流れ | Flowchart | 分岐や繰り返しを直感的に表現 |
| 2 | システム間通信 | Sequence Diagram | 時系列のメッセージ交換が明確 |
| 3 | クラス設計 | Class Diagram | 継承や関連を構造的に表現 |
| 4 | 状態遷移 | State Diagram | ライフサイクルを体系的に表現 |
| 5 | DB 設計 | ER Diagram | テーブル間の関係が一目瞭然 |
| 6 | UX 設計 | User Journey | ユーザー体験を感情込みで表現 |
| 7 | スケジュール | Gantt Chart | タスクの期間と依存関係を表現 |
| 8 | 構成比 | Pie Chart | 全体に占める割合を視覚化 |
| 9 | 時系列の変化 | Timeline | 歴史や変遷を時間軸で表現 |
この表を参考にしながら、適切な図を選択し、分かりやすいドキュメントを作成していきましょう。Mermaid を活用することで、チーム全体のコミュニケーションがより円滑になり、プロジェクトの成功につながるはずです。
関連リンク
- Mermaid 公式サイト
- Mermaid 公式ドキュメント
- Mermaid Live Editor - ブラウザで Mermaid を試せるオンラインエディタ
- GitHub における Mermaid サポート
- Mermaid Cheat Sheet
- article
Mermaid で描ける図の種類カタログ：flowchart／class／state／journey／timeline ほか完全整理
- article
Mermaid を CI に組み込む運用設計：PR ごと画像生成・差分サムネでレビュ―短縮
- article
Mermaid で日本語が潰れる問題を解決：フォント・エンコード・SVG 設定の勘所
- article
Mermaid でデータ基盤のラインジを図解：ETL／DAG／品質チェックの全体像
- article
Mermaid 矢印・接続子チートシート：線種・方向・注釈の一覧早見
- article
Mermaid 図面の命名規約：ノード ID・エッジ記法・クラス名の統一ガイド
articleNext.js を Bun で動かす開発環境：起動速度・互換性・落とし穴
articleObsidian Properties 速見表：型・表示名・テンプレ連携の実例カタログ
articleNuxt useHead／useSeoMeta 定番スニペット集：OGP／構造化データ／国際化メタ
- article
Mermaid で描ける図の種類カタログ：flowchart／class／state／journey／timeline ほか完全整理
articleMCP サーバーを活用した AI チャットボット構築：実用的な事例と実装
articleNginx 変数 100 選：$request_id／$upstream_status／$ssl_protocol ほか即戦力まとめ
blogiPhone 17シリーズの発表！全モデルiPhone 16から進化したポイントを見やすく整理
blogGoogleストアから訂正案内！Pixel 10ポイント有効期限「1年」表示は誤りだった
- blog
【2025年8月】Googleストア「ストアポイント」は1年表記はミス？2年ルールとの整合性を検証
blogGoogleストアの注文キャンセルはなぜ起きる？Pixel 10購入前に知るべき注意点
- blog
Pixcel 10シリーズの発表！全モデル Pixcel 9 から進化したポイントを見やすく整理
blogフロントエンドエンジニアの成長戦略：コーチングで最速スキルアップする方法
review今の自分に満足していますか？『持たざる者の逆襲 まだ何者でもない君へ』溝口勇児
reviewついに語られた業界の裏側！『フジテレビの正体』堀江貴文が描くテレビ局の本当の姿
review愛する勇気を持てば人生が変わる！『幸せになる勇気』岸見一郎・古賀史健のアドラー実践編で真の幸福を手に入れる
review週末を変えれば年収も変わる！『世界の一流は「休日」に何をしているのか』越川慎司の一流週末メソッド
review新しい自分に会いに行こう！『自分の変え方』村岡大樹の認知科学コーチングで人生リセット
review科学革命から AI 時代へ！『サピエンス全史 下巻』ユヴァル・ノア・ハラリが予見する人類の未来