ダイアグラム
MarkdownはMermaid構文を使って様々なダイアグラムやフローチャートを作成でき、ドキュメントに視覚的な表現力を与えます。
Mermaidの概要
Mermaidはテキストベースのダイアグラム生成ツールで、複数のダイアグラムタイプをサポートします：
- フローチャート
- シーケンス図
- ガントチャート
- クラス図
- 状態遷移図
- 円グラフ
- ユーザージャーニー
- Gitグラフ
基本構文
フローチャート
markdown
```mermaid
flowchart TD
A[開始] --> B{ログイン済み?}
B -->|はい| C[ホームを表示]
B -->|いいえ| D[ログイン画面を表示]
C --> E[終了]
D --> F[ユーザーログイン]
F --> G{ログイン成功?}
G -->|はい| C
G -->|いいえ| H[エラー表示]
H --> D
**レンダリング結果：**
```mermaid
flowchart TD
A[開始] --> B{ログイン済み?}
B -->|はい| C[ホームを表示]
B -->|いいえ| D[ログイン画面を表示]
C --> E[終了]
D --> F[ユーザーログイン]
F --> G{ログイン成功?}
G -->|はい| C
G -->|いいえ| H[エラー表示]
H --> Dシーケンス図
markdown
```mermaid
sequenceDiagram
participant ユーザー
participant フロントエンド
participant バックエンド
participant データベース
ユーザー->>フロントエンド: ログインリクエスト
フロントエンド->>バックエンド: ユーザー検証
バックエンド->>データベース: ユーザーデータ照会
データベース-->>バックエンド: ユーザー情報返却
バックエンド-->>フロントエンド: 検証結果
フロントエンド-->>ユーザー: ログイン応答
**レンダリング結果：**
```mermaid
sequenceDiagram
participant ユーザー
participant フロントエンド
participant バックエンド
participant データベース
ユーザー->>フロントエンド: ログインリクエスト
フロントエンド->>バックエンド: ユーザー検証
バックエンド->>データベース: ユーザーデータ照会
データベース-->>バックエンド: ユーザー情報返却
バックエンド-->>フロントエンド: 検証結果
フロントエンド-->>ユーザー: ログイン応答フローチャート詳細
ノードタイプ
markdown
```mermaid
flowchart LR
A[長方形ノード]
B(角丸ノード)
C((円形ノード))
D{ひし形ノード}
E[[サブルーチン]]
F[(データベース)]
G>ラベルノード]
**レンダリング結果：**
```mermaid
flowchart LR
A[長方形ノード]
B(角丸ノード)
C((円形ノード))
D{ひし形ノード}
E[[サブルーチン]]
F[(データベース)]
G>ラベルノード]エッジタイプ
markdown
```mermaid
flowchart TD
A --> B
C --- D
E -.-> F
G ==> H
I --o J
K --x L
**レンダリング結果：**
```mermaid
flowchart TD
A --> B
C --- D
E -.-> F
G ==> H
I --o J
K --x L方向制御
markdown
<!-- 上から下 -->
```mermaid
flowchart TD
A --> Bmermaid
flowchart BT
A --> Bmermaid
flowchart LR
A --> Bmermaid
flowchart RL
A --> B
### 複雑なフローチャート例
```markdown
```mermaid
flowchart TD
Start([プロジェクト開始]) --> Analysis[要件分析]
Analysis --> Design[システム設計]
Design --> Dev{開発段階}
Dev --> Frontend[フロントエンド開発]
Dev --> Backend[バックエンド開発]
Dev --> Database[データベース設計]
Frontend --> FrontTest[フロントテスト]
Backend --> BackTest[バックテスト]
Database --> DataTest[データテスト]
FrontTest --> Integration[統合テスト]
BackTest --> Integration
DataTest --> Integration
Integration --> Deploy{デプロイ準備}
Deploy -->|合格| Production[本番環境]
Deploy -->|失敗| Bug[問題修正]
Bug --> Integration
Production --> Monitor[監視]
Monitor --> End([プロジェクト完了])
style Start fill:#e1f5fe
style End fill:#e8f5e8
style Bug fill:#ffebee
**レンダリング結果：**
```mermaid
flowchart TD
Start([プロジェクト開始]) --> Analysis[要件分析]
Analysis --> Design[システム設計]
Design --> Dev{開発段階}
Dev --> Frontend[フロントエンド開発]
Dev --> Backend[バックエンド開発]
Dev --> Database[データベース設計]
Frontend --> FrontTest[フロントテスト]
Backend --> BackTest[バックテスト]
Database --> DataTest[データテスト]
FrontTest --> Integration[統合テスト]
BackTest --> Integration
DataTest --> Integration
Integration --> Deploy{デプロイ準備}
Deploy -->|合格| Production[本番環境]
Deploy -->|失敗| Bug[問題修正]
Bug --> Integration
Production --> Monitor[監視]
Monitor --> End([プロジェクト完了])
style Start fill:#e1f5fe
style End fill:#e8f5e8
style Bug fill:#ffebeeシーケンス図詳細
基本構文
mermaid
sequenceDiagramRendered Output:
mermaid
sequenceDiagramアクティベーションバーとライフライン
mermaid
sequenceDiagram
participant A as クライアント
participant B as サーバー
A->>+B: データ要求
Note right of B: リクエスト処理中
B-->>-A: データ返却
A->>+B: 別のリクエスト
B->>+B: 内部処理
B-->>-B: 処理完了
B-->>-A: 結果返却Rendered Output:
mermaid
sequenceDiagram
participant A as クライアント
participant B as サーバー
A->>+B: データ要求
Note right of B: リクエスト処理中
B-->>-A: データ返却
A->>+B: 別のリクエスト
B->>+B: 内部処理
B-->>-B: 処理完了
B-->>-A: 結果返却ループと条件分岐
mermaid
sequenceDiagram
participant U as ユーザー
participant S as システム
U->>S: ログインリクエスト
alt ユーザー名が存在
S->>S: パスワード検証
alt パスワード正しい
S-->>U: ログイン成功
else パスワード間違い
S-->>U: パスワード誤り
end
else ユーザー名なし
S-->>U: ユーザー未登録
end
opt 「ログイン状態を記憶」
S->>S: ログイン状態保存
endRendered Output:
mermaid
sequenceDiagram
participant U as ユーザー
participant S as システム
U->>S: ログインリクエスト
alt ユーザー名が存在
S->>S: パスワード検証
alt パスワード正しい
S-->>U: ログイン成功
else パスワード間違い
S-->>U: パスワード誤り
end
else ユーザー名なし
S-->>U: ユーザー未登録
end
opt 「ログイン状態を記憶」
S->>S: ログイン状態保存
endクラス図
mermaid
classDiagram
class 動物 {
+String 名前
+int 年齢
+食べる()
+眠る()
}
class 犬 {
+String 犬種
+吠える()
+しっぽを振る()
}
class 猫 {
+String 色
+鳴く()
+ゴロゴロする()
}
動物 <|-- 犬
動物 <|-- 猫
class 飼い主 {
+String 名前
+ペットに餌をやる()
}
飼い主 --> 動物 : 飼うRendered Output:
mermaid
classDiagram
class 動物 {
+String 名前
+int 年齢
+食べる()
+眠る()
}
class 犬 {
+String 犬種
+吠える()
+しっぽを振る()
}
class 猫 {
+String 色
+鳴く()
+ゴロゴロする()
}
動物 <|-- 犬
動物 <|-- 猫
class 飼い主 {
+String 名前
+ペットに餌をやる()
}
飼い主 --> 動物 : 飼う状態遷移図
mermaid
stateDiagram-v2
[*] --> 待機
待機 --> 実行中 : 開始
実行中 --> 一時停止 : 一時停止
実行中 --> 完了 : 終了
一時停止 --> 実行中 : 再開
一時停止 --> 停止 : 停止
停止 --> 待機 : リセット
完了 --> 待機 : リセット
完了 --> [*]
state 実行中 {
[*] --> 初期化
初期化 --> 処理中
処理中 --> 検証
検証 --> [*]
}Rendered Output:
mermaid
stateDiagram-v2
[*] --> 待機
待機 --> 実行中 : 開始
実行中 --> 一時停止 : 一時停止
実行中 --> 完了 : 終了
一時停止 --> 実行中 : 再開
一時停止 --> 停止 : 停止
停止 --> 待機 : リセット
完了 --> 待機 : リセット
完了 --> [*]
state 実行中 {
[*] --> 初期化
初期化 --> 処理中
処理中 --> 検証
検証 --> [*]
}ガントチャート
mermaid
gantt
title プロジェクト開発タイムライン
dateFormat YYYY-MM-DD
section 要件分析
要件収集 :done, des1, 2024-01-01,2024-01-05
要件分析 :done, des2, after des1, 5d
要件レビュー :done, des3, after des2, 2d
section 設計フェーズ
システム設計 :active, design1, 2024-01-12, 7d
UI設計 : design2, after design1, 5d
データベース設計 : design3, after design1, 3d
section 開発フェーズ
フロントエンド開発 : dev1, after design2, 10d
バックエンド開発 : dev2, after design3, 12d
テスト : test1, after dev1, 5d円グラフ
mermaid
pie title ウェブサイト流入元
"検索エンジン" : 45
"ソーシャルメディア" : 25
"ダイレクト" : 20
"メールマーケティング" : 7
"その他" : 3ユーザージャーニー
mermaid
journey
title ユーザーショッピングジャーニー
section 発見
ホームページ訪問: 3: ユーザー
商品閲覧: 4: ユーザー
商品検索: 4: ユーザー
section 検討
詳細を見る: 4: ユーザー
価格比較: 3: ユーザー
レビューを読む: 5: ユーザーGit Graph
mermaid
gitgraph
commit id: "初回コミット"
commit id: "ユーザーモジュール追加"
branch feature/auth
commit id: "ログイン機能追加"
commit id: "登録機能追加"
checkout main
commit id: "ホームバグ修正"
merge feature/auth
commit id: "v1.0リリース"
branch hotfix
commit id: "緊急修正"
checkout main
merge hotfix
commit id: "v1.0.1リリース"実践シナリオ
システムアーキテクチャ図
mermaid
flowchart TB
subgraph "ユーザー層"
Web[Webブラウザ]
Mobile[モバイルアプリ]
API[APIクライアント]
end
subgraph "ゲートウェイ層"
Gateway[APIゲートウェイ]
Auth[認証サービス]
end
subgraph "サービス層"
UserService[ユーザーサービス]
OrderService[注文サービス]
PaymentService[決済サービス]
NotificationService[通知サービス]
end
subgraph "データ層"
UserDB[(ユーザーDB)]
OrderDB[(注文DB)]
Cache[(Redisキャッシュ)]
Queue[メッセージキュー]
end
Web --> Gateway
Mobile --> Gateway
API --> Gateway
Gateway --> Auth
Gateway --> UserService
Gateway --> OrderService
Gateway --> PaymentService
UserService --> UserDB
OrderService --> OrderDB
PaymentService --> Queue
NotificationService --> Queue
UserService --> Cache
OrderService --> Cache
style Gateway fill:#e1f5fe
style Auth fill:#fff3e0
style Cache fill:#f3e5f5APIコールフロー
mermaid
sequenceDiagram
participant C as クライアント
participant G as APIゲートウェイ
participant A as 認証サービス
participant U as ユーザーサービス
participant D as データベース
participant R as Redis
C->>G: ユーザー情報リクエスト
G->>A: トークン検証
A->>R: トークンキャッシュ確認
R-->>A: トークン有効
A-->>G: 認証成功
G->>U: ユーザー情報取得
U->>R: ユーザーキャッシュ確認
alt キャッシュあり
R-->>U: ユーザーデータ返却
else キャッシュなし
U->>D: データベース照会
D-->>U: ユーザー情報返却
U->>R: キャッシュ更新
end
U-->>G: ユーザー情報返却
G-->>C: ユーザーデータ応答業務フローチャート
mermaid
flowchart TD
Start([ユーザー注文]) --> Check{在庫確認}
Check -->|在庫あり| Reserve[在庫確保]
Check -->|在庫なし| OutOfStock[在庫切れ]
OutOfStock --> Notify[ユーザー通知]
Notify --> End1([終了])
Reserve --> Payment{決済処理}
Payment -->|成功| ConfirmOrder[注文確定]
Payment -->|失敗| ReleaseStock[在庫解放]
ReleaseStock --> PaymentFailed[決済失敗]
PaymentFailed --> End2([終了])
ConfirmOrder --> UpdateInventory[在庫更新]
UpdateInventory --> SendNotification[通知送信]
SendNotification --> Logistics[物流手配]
Logistics --> End3([注文完了])
style Start fill:#e8f5e8
style End1 fill:#ffebee
style End2 fill:#ffebee
style End3 fill:#e8f5e8
style OutOfStock fill:#ffebee
style PaymentFailed fill:#ffebeeスタイルとテーマ
ノードスタイル
mermaid
flowchart LR
A[デフォルトスタイル] --> B[スタイル1]
A --> C[スタイル2]
A --> D[スタイル3]
style B fill:#f9f,stroke:#333,stroke-width:4px
style C fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
style D fill:#f96,stroke:#333,stroke-width:4px,color:#fffクラススタイル
mermaid
flowchart LR
A[ノードA]:::classA --> B[ノードB]:::classB
A --> C[ノードC]:::classC
classDef classA fill:#e1f5fe,stroke:#01579b,stroke-width:2px
classDef classB fill:#f3e5f5,stroke:#4a148c,stroke-width:2px
classDef classC fill:#e8f5e8,stroke:#1b5e20,stroke-width:2px設定と互換性
VitePressの設定
javascript
// .vitepress/config.js
export default {
markdown: {
mermaid: true
}
}GitHubサポート
GitHubはMermaidをネイティブサポートしており、Markdownファイル内で直接利用できます：
markdown
```mermaid
graph LR
A --> B
### その他プラットフォームのサポート
| プラットフォーム | サポート | 設定要件 |
|--------------|--------------|-------------------|
| **GitHub** | ✅ ネイティブ | なし |
| **GitLab** | ✅ ネイティブ | なし |
| **VitePress**| ✅ プラグイン | 設定が必要 |
| **Jekyll** | ✅ プラグイン | プラグイン導入 |
| **Hugo** | ✅ テーマ | テーマ依存 |
## ベストプラクティス
### 設計のヒント
```markdown
✅ 推奨：
1. **シンプルを保つ：**
- 複雑すぎるダイアグラムを避ける
- 明確なラベルと接続を使う
2. **論理的なレイアウト：**
- 適切なダイアグラム方向を選ぶ
- 論理的な流れを明確に
3. **一貫したスタイル：**
- 一貫したカラーテーマを使う
- ダイアグラムのスタイルを統一
4. **説明を追加：**
- 複雑なダイアグラムにはタイトルを
- 必要なテキスト説明を加える
❌ 避けるべき：
1. 理解しにくいほど複雑な図
2. 交差線が多すぎる
3. 曖昧なラベル
4. 凡例の欠如パフォーマンス考慮
markdown
- **大きなダイアグラムの最適化：**
- 複雑な図は分割を検討
- サブグラフで整理
- **読み込みパフォーマンス：**
- 1ページにダイアグラムを詰め込みすぎない
- 遅延読み込みを検討
- **モバイル対応：**
- 小さい画面でも読めるように
- 横スクロールを検討関連構文
ツールとリソース
オンラインエディタ
- Mermaid Live Editor: 公式オンラインエディタ
- Draw.io: 汎用ダイアグラムツール
- Lucidchart: プロ向けダイアグラムプラットフォーム
- Excalidraw: 手書き風ダイアグラム
開発者向けツール
- Mermaid CLI: コマンドラインツール
- VS Code Mermaid: Visual Studio Code拡張
- Atom Mermaid: Atomエディタ拡張
- IntelliJ Mermaid: JetBrains IDE拡張
参考資料
- Mermaid公式ドキュメント: 全構文リファレンス
- Mermaidサンプル集: 各種ダイアグラム例
- GitHub Mermaid: GitHubでの利用方法
- Awesome Mermaid: リソースコレクション
フローチャート構文をマスターすれば、ドキュメント内でプロフェッショナルな視覚ダイアグラムを作成でき、明瞭さと表現力が大幅に向上します。