Mermaid 記法完全解説：Markdown でダイアグラム作成
現代の情報社会では、複雑な概念やプロセスを視覚的に伝える能力がますます重要になっています。しかし、従来のダイアグラム作成ツールは習得に時間がかかり、ファイル管理も煩雑でした。そんな課題を解決する革新的なソリューションが Mermaid です。
Mermaid は、シンプルなテキスト記法で美しいダイアグラムを作成できる JavaScript ライブラリです。フローチャート、シーケンス図、ガントチャート、クラス図など、様々な種類の図表を Markdown ファイル内に直接記述できるため、エンジニアからビジネスパーソンまで幅広い方々の業務効率化に貢献しています。
本記事では、Mermaid の基本的な使い方から高度なカスタマイズまで、実践的なサンプルコードと共に詳しく解説いたします。読み終える頃には、あなたも美しく機能的なダイアグラムを自在に作成できるようになることでしょう。
Mermaid とは：テキストベースでダイアグラムを描く革新的ツール
Mermaid の特徴と革新性
Mermaid は 2014 年に Knut Sveidqvist によって開発されたオープンソースのダイアグラム生成ツールです。最大の特徴は、テキストベースの記法でダイアグラムを作成できることです。
従来のツールとの比較：
| 項目 | 従来のツール | Mermaid |
|---|---|---|
| 学習コスト | 高（UI 操作を覚える必要） | 低（シンプルな記法） |
| ファイル管理 | 複雑（専用ファイル形式） | 簡単（テキストファイル） |
| バージョン管理 | 困難 | 容易（Git で管理可能） |
| チーム共有 | 有料プランが必要な場合が多い | 無料（オープンソース） |
| 保守性 | 低（ツール依存） | 高（テキストベース） |
なぜ Mermaid を選ぶべきか
1. 高い生産性 コードを書くようにダイアグラムを作成できるため、一度慣れてしまえば圧倒的に速く図表を作成できます。
2. 優れた保守性 テキストファイルなので、差分管理やバージョン管理が容易です。GitHub や GitLab での変更履歴も一目瞭然です。
3. 豊富な対応プラットフォーム GitHub、GitLab、Notion、Obsidian、VS Code など、多くのプラットフォームでネイティブサポートされています。
4. 拡張性とカスタマイズ性 CSS スタイルや JavaScript を用いた高度なカスタマイズが可能です。
Markdown との組み合わせがもたらす文書作成の効率化
ドキュメント作成革命
Markdown と Mermaid の組み合わせは、技術文書作成に革命をもたらしました。以下のような統合的な文書作成が可能になります：
markdown# システム設計書
## 概要
本システムは、以下のような処理フローで動作します。
```mermaid
flowchart TD
A[ユーザーリクエスト] --> B{認証確認}
B -->|認証OK| C[データ処理]
B -->|認証NG| D[エラー応答]
C --> E[レスポンス生成]
E --> F[ユーザーに応答]
D --> F
```
## API 仕様
システム間の通信は以下のシーケンスで行われます。
```mermaid
sequenceDiagram
participant Client
participant API
participant DB
Client->>API: POST /api/data
API->>DB: SELECT * FROM users
DB-->>API: User data
API-->>Client: Response
```
Mermaid の基本セットアップ
主要エディタ・プラットフォームでの有効化方法
Mermaid を利用するための環境設定は、使用するプラットフォームによって異なります。以下、主要な環境での設定方法をご紹介します。
GitHub / GitLab での利用
GitHub GitHub では 2022 年 2 月から Mermaid が標準サポートされています。特別な設定は不要で、以下のように記述するだけで自動的にダイアグラムが表示されます：
markdown```mermaid
graph TD
A[開始] --> B[処理]
B --> C[終了]
```
GitLab GitLab でも同様に、Mermaid ブロックが自動認識されます。GitLab CI でのドキュメント生成時にも対応しています。
VS Code での設定
1. 拡張機能のインストール
推奨拡張機能：
Markdown Preview Mermaid Supportby Matt BiernerMermaid Editorby tomoyukim
bash# コマンドパレットから
Ctrl+Shift+P (Cmd+Shift+P) > "Extensions: Install Extensions"
# "Mermaid" で検索してインストール
2. settings.json の設定
json{
"markdown.mermaid.enabledLanguageIds": [
"markdown",
"mermaid"
],
"mermaidEditor.generate.theme": "default",
"mermaidEditor.generate.backgroundColor": "white"
}
3. プレビューでの確認
markdown<!-- ファイル: README.md -->
# プロジェクト概要
```mermaid
flowchart LR
A[要件定義] --> B[設計]
B --> C[実装]
C --> D[テスト]
D --> E[リリース]
```
Ctrl+Shift+V (Cmd+Shift+V) でプレビューを開くと、ダイアグラムが表示されます。
Obsidian での設定
Obsidian では、コアプラグインとして Mermaid がサポートされています。
1. プラグインの有効化
設定 > コアプラグイン > Mermaid を有効化
2. 記法例
markdown# システム構成図
```mermaid
graph TB
subgraph "フロントエンド"
A[React App]
B[State Management]
end
subgraph "バックエンド"
C[Node.js API]
D[PostgreSQL]
end
A --> C
B --> A
C --> D
```
3. カスタム CSS（オプション）
css/* .obsidian/snippets/mermaid-custom.css */
.mermaid {
background-color: var(--background-primary);
border-radius: 8px;
padding: 16px;
}
.mermaid .node rect {
fill: var(--interactive-accent);
stroke: var(--interactive-accent);
}
GitHubPages、Notion、VS Code、Obsidian での設定
Notion での利用
Notion では 2021 年から Mermaid ダイアグラムがサポートされています。
1. コードブロックの作成
bash/code > 言語に "Mermaid" を選択
2. 基本的な使用例
mermaidpie title プロジェクト進捗
"完了" : 70
"進行中" : 20
"未着手" : 10
3. Notion での制限事項
- 一部の新しいダイアグラムタイプは未対応
- カスタムスタイルには制限あり
- 印刷時のレイアウトに注意が必要
Jekyll (GitHub Pages) での設定
GitHub Pages で静的サイトを構築する際の Mermaid 設定方法：
1. _config.yml の設定
yaml# _config.yml
markdown: kramdown
kramdown:
syntax_highlighter: rouge
plugins:
- jekyll-mermaid
2. Gemfile の更新
ruby# Gemfile
gem 'jekyll-mermaid'
3. レイアウトファイルの更新
html<!-- _layouts/default.html -->
<!DOCTYPE html>
<html>
<head>
<!-- 他のhead要素 -->
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({ startOnLoad: true });
</script>
</head>
<body>
{{ content }}
</body>
</html>
4. 記事での使用
markdown---
layout: default
---
# 記事タイトル
<div class="mermaid">
graph TD
A[記事作成] --> B[Git Push]
B --> C[GitHub Actions]
C --> D[サイト更新]
</div>
オンラインエディタとローカル環境の使い分け
オンラインエディタの活用
Mermaid Live Editor
- URL: https://mermaid.live/
- 特徴：公式のオンラインエディタ
- 用途：クイックプロトタイピング、学習
mermaidsequenceDiagram
participant A as アリス
participant B as ボブ
A->>B: こんにちは
B-->>A: こんにちは！
Note over A,B: 会話の開始
A->>B: 元気ですか？
B-->>A: とても元気です
その他のオンラインツール
- Diagrams.net (旧 Draw.io) - Mermaid インポート機能
- CodePen - HTML プレビューでの確認
- JSFiddle - JavaScript と組み合わせたテスト
ローカル環境での開発
Node.js プロジェクトでの統合
bash# Mermaidのインストール
yarn add mermaid
# 開発用ツールのインストール
yarn add --dev @mermaid-js/mermaid-cli
javascript// mermaid-config.js
import mermaid from 'mermaid';
mermaid.initialize({
startOnLoad: true,
theme: 'dark',
themeVariables: {
primaryColor: '#ff6b6b',
primaryTextColor: '#fff',
primaryBorderColor: '#ff4757',
lineColor: '#7bed9f',
secondaryColor: '#70a1ff',
tertiaryColor: '#5352ed',
},
});
CLI ツールでの画像生成
bash# SVG形式で出力
yarn mmdc -i input.mmd -o output.svg
# PNG形式で出力
yarn mmdc -i input.mmd -o output.png
# 複数ファイルの一括変換
yarn mmdc -i 'diagrams/*.mmd' -o 'images/'
Docker 環境での活用
dockerfile# Dockerfile
FROM node:18-alpine
RUN npm install -g @mermaid-js/mermaid-cli
WORKDIR /workspace
COPY package*.json ./
RUN npm install
COPY . .
CMD ["npm", "start"]
yaml# docker-compose.yml
version: '3.8'
services:
mermaid-generator:
build: .
volumes:
- ./src:/workspace/src
- ./output:/workspace/output
command: mmdc -i src/ -o output/
この基本的なセットアップを完了すると、様々な環境で Mermaid ダイアグラムを作成・表示できるようになります。次のセクションでは、最も基本的で重要なダイアグラムタイプであるフローチャートについて詳しく学んでいきましょう。
フローチャート（Flowchart）完全マスター
フローチャートは、プロセスや意思決定の流れを視覚的に表現する最も基本的で重要なダイアグラムです。Mermaid では、直感的な記法で複雑なフローチャートを作成できます。
基本的なノードとエッジの記法
ノード（節点）の種類
Mermaid では、様々な形状のノードを使用できます：
mermaidflowchart TD
A[長方形ノード]
B(丸角長方形ノード)
C([スタジアム型ノード])
D[[サブルーチンノード]]
E[(データベースノード)]
F((円形ノード))
G{ダイヤモンドノード}
H{{六角形ノード}}
I[/平行四辺形ノード/]
J[\逆平行四辺形ノード\]
K[/台形ノード\]
L[\逆台形ノード/]
エッジ（矢印）の種類
mermaidflowchart TD
A --> B
C --- D
E -.-> F
G ==> H
I --o J
K --x L
M o--o N
O <--> P
Q -.・R
S == T
矢印の意味：
| 記法 | 意味 | 用途 |
|---|---|---|
--> | 実線矢印 | 通常のフロー |
--- | 実線（矢印なし） | 関連を示す |
-.-> | 点線矢印 | 条件付きフロー |
==> | 太い矢印 | 重要なフロー |
--o | 円付き矢印 | 集約 |
--x | X 付き矢印 | 例外・エラー |
分岐・判定・ループの表現方法
基本的な分岐構造
mermaidflowchart TD
A[開始] --> B{条件判定}
B -->|Yes| C[処理A実行]
B -->|No| D[処理B実行]
C --> E[終了]
D --> E
複数分岐の表現
mermaidflowchart TD
A[ユーザー入力] --> B{入力値チェック}
B -->|有効| C[データ保存]
B -->|無効| D[エラー表示]
B -->|空| E[デフォルト値設定]
C --> F[成功メッセージ]
D --> G[再入力要求]
E --> C
F --> H[終了]
G --> A
ループ構造の表現
mermaidflowchart TD
A[開始] --> B[カウンター初期化]
B --> C{条件確認}
C -->|継続| D[処理実行]
D --> E[カウンター更新]
E --> C
C -->|終了| F[結果出力]
F --> G[終了]
複雑なビジネスプロセスの図解例
注文処理システムのフローチャート
mermaidflowchart TD
A[注文受付] --> B{在庫確認}
B -->|在庫あり| C[在庫引当]
B -->|在庫なし| D[バックオーダー]
C --> E{支払確認}
E -->|支払済み| F[出荷準備]
E -->|未払い| G[請求書発行]
G --> H{支払期限}
H -->|期限内| I[支払確認]
H -->|期限切れ| J[催促通知]
I --> F
J --> K{再催促}
K -->|継続| L[再催促送信]
K -->|キャンセル| M[注文キャンセル]
L --> H
F --> N[配送手配]
N --> O[配送完了]
D --> P[入荷待ち]
P --> Q{入荷確認}
Q -->|入荷| C
Q -->|未入荷| R[入荷予定通知]
R --> P
O --> S[注文完了]
M --> T[キャンセル処理完了]
ソフトウェア開発のレビュープロセス
mermaidflowchart TD
A[コード作成] --> B[セルフレビュー]
B --> C{基本チェック}
C -->|NG| D[修正作業]
D --> B
C -->|OK| E[プルリクエスト作成]
E --> F[レビュー依頼]
F --> G[チームレビュー]
G --> H{レビュー結果}
H -->|承認| I[マージ]
H -->|要修正| J[修正指示]
H -->|追加調査| K[調査・議論]
J --> L[修正実施]
L --> M[修正完了報告]
M --> G
K --> N[調査結果報告]
N --> O{継続判定}
O -->|継続| P[追加開発]
O -->|中止| Q[開発中止]
P --> A
I --> R[CI/CD実行]
R --> S{テスト結果}
S -->|成功| T[本番デプロイ]
S -->|失敗| U[ロールバック]
U --> V[原因調査]
V --> W[緊急修正]
W --> R
T --> X[デプロイ完了]
スタイリングとテーマの適用
基本的なスタイリング
mermaidflowchart TD
A[開始] --> B[処理]
B --> C[終了]
classDef startEnd fill:#e1f5fe,stroke:#01579b,stroke-width:2px
classDef process fill:#f3e5f5,stroke:#4a148c,stroke-width:2px
class A,C startEnd
class B process
カスタムテーマの適用
mermaid%%{init: {"theme": "dark", "themeVariables": {"primaryColor": "#ff6b6b", "primaryTextColor": "#ffffff", "primaryBorderColor": "#ff4757", "lineColor": "#7bed9f", "secondaryColor": "#70a1ff", "tertiaryColor": "#5352ed"}}}%%
flowchart TD
A[Dark Theme] --> B[Custom Colors]
B --> C[Professional Look]
C --> D[Enhanced Readability]
シーケンス図（Sequence Diagram）の活用術
シーケンス図は、オブジェクト間の相互作用を時系列で表現する UML ダイアグラムです。API 設計、システム間通信、ユーザーインタラクションの可視化に特に有効です。
参加者（Actor）とメッセージの基本記法
基本的なシーケンス図
mermaidsequenceDiagram
participant A as ユーザー
participant B as ウェブサイト
participant C as データベース
A->>B: ログイン要求
B->>C: ユーザー情報照会
C-->>B: ユーザーデータ
B-->>A: ログイン成功
参加者の定義方法
mermaidsequenceDiagram
participant Frontend as フロントエンド
participant API as REST API
participant Auth as 認証サービス
participant DB as データベース
Frontend->>API: GET /api/user/profile
API->>Auth: トークン検証
Auth-->>API: 認証結果
alt 認証成功
API->>DB: SELECT user_data
DB-->>API: ユーザーデータ
API-->>Frontend: 200 OK + データ
else 認証失敗
API-->>Frontend: 401 Unauthorized
end
同期・非同期通信の表現
同期通信の表現
mermaidsequenceDiagram
participant Client as クライアント
participant Server as サーバー
participant Database as データベース
Client->>+Server: POST /api/orders
Note over Server: リクエスト処理開始
Server->>+Database: BEGIN TRANSACTION
Server->>Database: INSERT INTO orders
Server->>Database: UPDATE inventory
Database-->>-Server: 処理完了
Server-->>-Client: 201 Created
Note over Client,Database: 同期処理：レスポンスを待つ
非同期通信の表現
mermaidsequenceDiagram
participant Client as クライアント
participant API as API Gateway
participant Queue as メッセージキュー
participant Worker as ワーカー
participant DB as データベース
Client->>API: POST /api/process
API->>Queue: メッセージ送信
API-->>Client: 202 Accepted (Job ID)
Note over Queue,Worker: 非同期処理
Queue->>Worker: ジョブ実行
Worker->>DB: データ処理
DB-->>Worker: 処理結果
Worker->>Queue: 処理完了通知
Client->>API: GET /api/status/{job_id}
API-->>Client: 処理状況
API 設計やユーザーフローの可視化
REST API の設計
mermaidsequenceDiagram
participant Mobile as モバイルアプリ
participant Gateway as API Gateway
participant Auth as 認証サービス
participant User as ユーザーサービス
participant Order as 注文サービス
participant Payment as 決済サービス
participant Notification as 通知サービス
Mobile->>Gateway: POST /api/v1/orders
Gateway->>Auth: JWT トークン検証
Auth-->>Gateway: 認証OK
Gateway->>User: GET /users/{user_id}
User-->>Gateway: ユーザー情報
Gateway->>Order: POST /orders
Order->>Payment: POST /payments
Payment-->>Order: 決済結果
alt 決済成功
Order->>Notification: 注文完了通知
Notification-->>Mobile: プッシュ通知
Order-->>Gateway: 注文ID
Gateway-->>Mobile: 201 Created
else 決済失敗
Order-->>Gateway: 400 Bad Request
Gateway-->>Mobile: エラーレスポンス
end
ユーザー体験フローの可視化
mermaidsequenceDiagram
participant User as ユーザー
participant App as アプリケーション
participant Analytics as 分析サービス
participant Recommendation as 推薦エンジン
participant Cache as キャッシュ
User->>App: アプリ起動
App->>Analytics: 起動イベント送信
App->>Cache: ユーザー設定取得
alt キャッシュヒット
Cache-->>App: 設定データ
else キャッシュミス
App->>Recommendation: 個人化データ要求
Recommendation-->>App: 推薦データ
App->>Cache: データキャッシュ
end
App-->>User: ホーム画面表示
User->>App: 商品検索
App->>Recommendation: 検索結果最適化
App->>Analytics: 検索イベント記録
Recommendation-->>App: 最適化結果
App-->>User: 検索結果表示
User->>App: 商品選択
App->>Analytics: 商品閲覧イベント
Analytics-->>App: 関連商品推薦
App-->>User: 商品詳細表示
条件分岐とループの記述方法
条件分岐（alt/else）の使用
mermaidsequenceDiagram
participant User as ユーザー
participant System as システム
participant DB as データベース
participant Cache as キャッシュ
User->>System: データ要求
alt データがキャッシュに存在
System->>Cache: データ取得
Cache-->>System: キャッシュデータ
System-->>User: 高速レスポンス
else データがキャッシュに存在しない
System->>DB: データベース照会
DB-->>System: データ
System->>Cache: データキャッシュ
System-->>User: レスポンス
end
Note over User,Cache: キャッシュ戦略により応答速度を最適化
複数の条件分岐
mermaidsequenceDiagram
participant User as ユーザー
participant Auth as 認証システム
participant Admin as 管理者
participant DB as データベース
User->>Auth: ログイン試行
alt 正常ログイン
Auth->>DB: ユーザー情報取得
DB-->>Auth: ユーザーデータ
Auth-->>User: ログイン成功
else パスワード間違い
Auth->>DB: 失敗回数記録
Auth-->>User: 認証失敗
else アカウントロック
Auth->>Admin: アラート送信
Auth-->>User: アカウントロック通知
else システムエラー
Auth->>Admin: エラー通知
Auth-->>User: システムエラー
end
ループ処理の表現
mermaidsequenceDiagram
participant Client as クライアント
participant API as API
participant DB as データベース
Client->>API: バッチ処理要求
loop 各データに対して
API->>DB: データ処理
DB-->>API: 処理結果
alt 処理成功
Note over API: 成功カウント++
else 処理失敗
Note over API: エラーログ記録
end
end
API-->>Client: バッチ処理結果
並列処理の表現
mermaidsequenceDiagram
participant User as ユーザー
participant Frontend as フロントエンド
participant API1 as API1
participant API2 as API2
participant API3 as API3
User->>Frontend: ページ表示要求
par 並列データ取得
Frontend->>API1: ユーザー情報取得
and
Frontend->>API2: 商品一覧取得
and
Frontend->>API3: 推薦商品取得
end
API1-->>Frontend: ユーザー情報
API2-->>Frontend: 商品一覧
API3-->>Frontend: 推薦商品
Frontend-->>User: 完全なページ表示
この段階で、フローチャートとシーケンス図の基本的な使い方から高度な活用方法まで理解いただけたでしょう。次のセクションでは、プロジェクト管理に欠かせないガントチャートについて詳しく解説いたします。
ガントチャート（Gantt Chart）でプロジェクト管理
ガントチャートは、プロジェクトのスケジュール管理において最も重要なツールの一つです。Mermaid では、テキストベースでガントチャートを作成し、プロジェクトの進捗を視覚的に管理できます。
タスクとタイムラインの定義
基本的なガントチャート
mermaidgantt
title Webアプリケーション開発プロジェクト
dateFormat YYYY-MM-DD
section 要件定義
要件ヒアリング :active, req1, 2024-01-01, 7d
要件分析 :req2, after req1, 5d
要件書作成 :req3, after req2, 3d
section 設計
システム設計 :design1, after req3, 10d
UI/UX設計 :design2, after req3, 8d
データベース設計 :design3, after design1, 5d
section 開発
フロントエンド開発 :dev1, after design2, 20d
バックエンド開発 :dev2, after design3, 25d
API開発 :dev3, after design1, 15d
詳細な日付指定
mermaidgantt
title プロダクトローンチスケジュール
dateFormat YYYY-MM-DD
axisFormat %m/%d
section Phase 1
市場調査 :done, market, 2024-01-15, 2024-02-15
競合分析 :done, competitor, 2024-01-20, 2024-02-10
section Phase 2
プロトタイプ開発 :active, proto, 2024-02-16, 2024-03-15
ユーザーテスト :testing, 2024-03-16, 2024-04-05
section Phase 3
正式版開発 :dev, after testing, 30d
品質保証 :qa, after dev, 14d
section Launch
マーケティング準備 :marketing, 2024-04-01, 2024-05-15
ローンチ :milestone, launch, after qa, 0d
依存関係とマイルストーンの表現
複雑な依存関係
mermaidgantt
title システム統合プロジェクト
dateFormat YYYY-MM-DD
section 基盤構築
インフラ設計 :infra1, 2024-03-01, 10d
サーバー構築 :infra2, after infra1, 7d
ネットワーク設定 :infra3, after infra2, 5d
section アプリケーション
認証システム :auth, after infra3, 15d
ユーザー管理 :user, after auth, 12d
データ管理 :data, after infra3, 20d
section 統合テスト
単体テスト :unit, after user, 8d
結合テスト :integration, after data, 10d
システムテスト :system, after integration, 7d
section デプロイ
ステージング環境 :staging, after system, 3d
本番デプロイ :milestone, prod, after staging, 0d
監視設定 :monitoring, after prod, 2d
マイルストーンの活用
mermaidgantt
title アジャイル開発サイクル
dateFormat YYYY-MM-DD
section Sprint 1
スプリント計画 :milestone, sp1-start, 2024-04-01, 0d
ユーザーストーリー1 :story1, 2024-04-01, 5d
ユーザーストーリー2 :story2, 2024-04-03, 7d
スプリントレビュー :milestone, sp1-review, 2024-04-14, 0d
section Sprint 2
スプリント計画 :milestone, sp2-start, 2024-04-15, 0d
機能開発A :feature-a, 2024-04-15, 8d
機能開発B :feature-b, 2024-04-17, 6d
統合テスト :integration, 2024-04-23, 3d
スプリントレビュー :milestone, sp2-review, 2024-04-28, 0d
section リリース準備
ドキュメント作成 :docs, after sp2-review, 3d
最終テスト :final-test, after docs, 2d
リリース :milestone, release, after final-test, 0d
実際のプロジェクトスケジュール作成例
Web サービス開発プロジェクト
mermaidgantt
title ECサイト構築プロジェクト
dateFormat YYYY-MM-DD
section プロジェクト管理
プロジェクト開始 :milestone, start, 2024-05-01, 0d
週次MTG :meeting, 2024-05-06, 2024-08-30
section 要件定義フェーズ
ステークホルダーヒアリング :done, req1, 2024-05-01, 7d
業務フロー分析 :done, req2, after req1, 5d
機能要件定義 :done, req3, after req2, 8d
非機能要件定義 :done, req4, after req3, 5d
要件定義書作成 :done, req5, after req4, 3d
要件レビュー :milestone, req-review, after req5, 0d
section 基本設計フェーズ
システム構成設計 :design1, after req-review, 10d
画面設計 :design2, after req-review, 12d
データベース設計 :design3, after req-review, 8d
API設計 :design4, after design1, 7d
セキュリティ設計 :design5, after design4, 5d
基本設計レビュー :milestone, design-review, after design5, 0d
section 詳細設計フェーズ
詳細設計書作成 :detail1, after design-review, 12d
テスト設計 :detail2, after detail1, 8d
詳細設計レビュー :milestone, detail-review, after detail2, 0d
section 開発フェーズ
開発環境構築 :env, after detail-review, 3d
フロントエンド開発 :frontend, after env, 25d
バックエンド開発 :backend, after env, 30d
管理画面開発 :admin, after backend, 15d
決済システム連携 :payment, after backend, 10d
section テストフェーズ
単体テスト :unit-test, after frontend, 10d
結合テスト :int-test, after admin, 12d
システムテスト :sys-test, after int-test, 8d
受入テスト :accept-test, after sys-test, 5d
性能テスト :perf-test, after accept-test, 7d
section リリース準備
本番環境構築 :prod-env, after perf-test, 5d
データ移行 :migration, after prod-env, 3d
運用手順書作成 :operation, after migration, 5d
section 本番リリース
本番リリース :milestone, release, after operation, 0d
監視・保守開始 :maintenance, after release, 30d
プロジェクト完了 :milestone, end, after maintenance, 0d
進捗管理での活用テクニック
進捗状況の可視化
mermaidgantt
title プロジェクト進捗状況（2024年4月時点）
dateFormat YYYY-MM-DD
section 完了済みタスク
要件定義 :done, req, 2024-03-01, 14d
基本設計 :done, design, after req, 12d
section 進行中タスク
フロントエンド開発 :active, frontend, 2024-04-01, 20d
バックエンドAPI :active, backend, 2024-04-05, 18d
section 予定タスク
統合テスト :test, after frontend, 8d
本番デプロイ :deploy, after test, 3d
section 遅延タスク
データベース設計 :crit, db-design, 2024-03-25, 10d
セキュリティ監査 :crit, security, after db-design, 5d
チーム別作業分担
mermaidgantt
title チーム別作業スケジュール
dateFormat YYYY-MM-DD
section フロントエンドチーム
UIコンポーネント開発 :ui-comp, 2024-06-01, 15d
画面実装 :ui-pages, after ui-comp, 20d
レスポンシブ対応 :responsive, after ui-pages, 8d
section バックエンドチーム
API開発 :api-dev, 2024-06-01, 25d
データベース実装 :db-impl, 2024-06-05, 20d
認証システム :auth-sys, after api-dev, 10d
section QAチーム
テスト計画作成 :test-plan, 2024-06-10, 7d
自動テスト構築 :auto-test, after test-plan, 12d
手動テスト実行 :manual-test, after responsive, 10d
section DevOpsチーム
CI/CD構築 :cicd, 2024-06-01, 10d
インフラ構築 :infra, after cicd, 8d
監視システム :monitoring, after infra, 5d
クラス図（Class Diagram）でシステム設計
クラス図は、オブジェクト指向システムの構造を表現する UML ダイアグラムの中核となるものです。Mermaid では、クラス間の関係性を明確に表現し、システム設計の理解を深めることができます。
クラス定義とアクセス修飾子
基本的なクラス定義
mermaidclassDiagram
class User {
-id: string
-name: string
-email: string
-password: string
+getId(): string
+getName(): string
+setName(name: string)
+validateEmail(): boolean
-hashPassword(): string
}
class Product {
-id: string
-name: string
-price: number
-stock: number
+getId(): string
+getPrice(): number
+updateStock(quantity: number)
+isAvailable(): boolean
}
アクセス修飾子の表現
mermaidclassDiagram
class BankAccount {
-accountNumber: string
-balance: number
#interestRate: number
+owner: string
+deposit(amount: number): void
+withdraw(amount: number): boolean
+getBalance(): number
-calculateInterest(): number
#validateAmount(amount: number): boolean
~getAccountType(): string
}
note for BankAccount "アクセス修飾子:
+ public
- private
# protected
~ package"
継承・実装・関連の表現方法
継承関係
mermaidclassDiagram
class Animal {
-name: string
-age: number
+getName(): string
+makeSound(): void
}
class Dog {
-breed: string
+bark(): void
+fetch(): void
}
class Cat {
-indoor: boolean
+meow(): void
+scratch(): void
}
Animal <|-- Dog
Animal <|-- Cat
インターフェース実装
mermaidclassDiagram
class <<interface>> Drawable {
+draw(): void
+resize(scale: number): void
}
class <<interface>> Movable {
+move(x: number, y: number): void
+getPosition(): Position
}
class Shape {
-x: number
-y: number
-color: string
+getColor(): string
+setColor(color: string): void
}
class Circle {
-radius: number
+getArea(): number
+draw(): void
+resize(scale: number): void
+move(x: number, y: number): void
}
class Rectangle {
-width: number
-height: number
+getArea(): number
+draw(): void
+resize(scale: number): void
}
Drawable <|.. Circle
Movable <|.. Circle
Shape <|-- Circle
Shape <|-- Rectangle
Drawable <|.. Rectangle
関連・集約・合成関係
mermaidclassDiagram
class University {
-name: string
-departments: Department[]
+addDepartment(dept: Department): void
}
class Department {
-name: string
-professors: Professor[]
+addProfessor(prof: Professor): void
}
class Professor {
-name: string
-title: string
+teach(course: Course): void
}
class Course {
-code: string
-name: string
-credits: number
}
class Student {
-studentId: string
-name: string
+enroll(course: Course): void
}
University ||--o{ Department : 構成
Department ||--o{ Professor : 雇用
Professor ||--o{ Course : 担当
Student }o--o{ Course : 履修
UML 準拠の設計図作成
EC サイトのドメインモデル
mermaidclassDiagram
class Customer {
-customerId: string
-name: string
-email: string
-address: Address
-orders: Order[]
+placeOrder(items: CartItem[]): Order
+getOrderHistory(): Order[]
+updateProfile(info: CustomerInfo): void
}
class Order {
-orderId: string
-orderDate: Date
-status: OrderStatus
-items: OrderItem[]
-totalAmount: number
-shippingAddress: Address
+calculateTotal(): number
+updateStatus(status: OrderStatus): void
+addItem(item: OrderItem): void
}
class OrderItem {
-product: Product
-quantity: number
-unitPrice: number
+getSubtotal(): number
}
class Product {
-productId: string
-name: string
-description: string
-price: number
-category: Category
-inventory: Inventory
+isAvailable(): boolean
+updatePrice(newPrice: number): void
}
class Category {
-categoryId: string
-name: string
-parentCategory: Category
-subCategories: Category[]
+addSubCategory(category: Category): void
}
class Inventory {
-productId: string
-quantity: number
-reservedQuantity: number
+reserve(quantity: number): boolean
+release(quantity: number): void
+getAvailableQuantity(): number
}
class Address {
-street: string
-city: string
-postalCode: string
-country: string
+getFullAddress(): string
+validate(): boolean
}
class Payment {
-paymentId: string
-orderId: string
-amount: number
-method: PaymentMethod
-status: PaymentStatus
+process(): boolean
+refund(): boolean
}
Customer ||--o{ Order : 注文
Order ||--o{ OrderItem : 含む
OrderItem }o--|| Product : 商品
Product }o--|| Category : 分類
Product ||--|| Inventory : 在庫
Order ||--|| Payment : 支払い
Customer ||--o{ Address : 住所
Order }o--|| Address : 配送先
オブジェクト指向設計での実践例
MVC アーキテクチャの表現
mermaidclassDiagram
class <<interface>> View {
+render(data: any): void
+handleUserInput(): void
}
class <<interface>> Model {
+getData(): any
+setData(data: any): void
+validate(): boolean
}
class Controller {
-model: Model
-view: View
+handleRequest(request: Request): Response
+updateModel(data: any): void
+updateView(): void
}
class UserController {
-userService: UserService
+createUser(userData: UserData): User
+getUserById(id: string): User
+updateUser(id: string, data: UserData): User
+deleteUser(id: string): boolean
}
class UserModel {
-id: string
-name: string
-email: string
+validate(): boolean
+save(): boolean
+delete(): boolean
}
class UserView {
-template: string
+renderUserList(users: User[]): string
+renderUserForm(): string
+renderUserDetails(user: User): string
}
class UserService {
-repository: UserRepository
+createUser(data: UserData): User
+findUserById(id: string): User
+updateUser(user: User): User
+deleteUser(id: string): boolean
}
class UserRepository {
-database: Database
+save(user: User): boolean
+findById(id: string): User
+findAll(): User[]
+delete(id: string): boolean
}
Controller --> Model : 更新
Controller --> View : 描画指示
View --> Controller : イベント通知
UserController --|> Controller
UserModel ..|> Model
UserView ..|> View
UserController --> UserService : 依存
UserService --> UserRepository : 依存
UserController --> UserModel : 操作
UserController --> UserView : 描画
デザインパターンの実装例
mermaidclassDiagram
%% Singleton Pattern
class DatabaseConnection {
-instance: DatabaseConnection
-connection: Connection
-DatabaseConnection()
+getInstance(): DatabaseConnection
+getConnection(): Connection
+close(): void
}
%% Factory Pattern
class <<interface>> Animal {
+makeSound(): string
}
class Dog {
+makeSound(): string
}
class Cat {
+makeSound(): string
}
class AnimalFactory {
+createAnimal(type: string): Animal
}
%% Observer Pattern
class <<interface>> Observer {
+update(data: any): void
}
class Subject {
-observers: Observer[]
+addObserver(observer: Observer): void
+removeObserver(observer: Observer): void
+notifyObservers(data: any): void
}
class NewsAgency {
-news: string
+setNews(news: string): void
+getNews(): string
}
class NewsChannel {
-name: string
+update(news: string): void
}
%% Strategy Pattern
class <<interface>> PaymentStrategy {
+pay(amount: number): boolean
}
class CreditCardPayment {
-cardNumber: string
-cvv: string
+pay(amount: number): boolean
}
class PayPalPayment {
-email: string
+pay(amount: number): boolean
}
class PaymentContext {
-strategy: PaymentStrategy
+setStrategy(strategy: PaymentStrategy): void
+executePayment(amount: number): boolean
}
%% 関係性の定義
Animal <|.. Dog
Animal <|.. Cat
AnimalFactory --> Animal : creates
Observer <|.. NewsChannel
Subject <|-- NewsAgency
NewsAgency --> Observer : notifies
PaymentStrategy <|.. CreditCardPayment
PaymentStrategy <|.. PayPalPayment
PaymentContext --> PaymentStrategy : uses
この段階で、プロジェクト管理に効果的なガントチャートと、システム設計に不可欠なクラス図について詳しく学習できました。次のセクションでは、システムの状態遷移を表現する状態図について解説いたします。
状態図（State Diagram）で状態遷移を可視化
状態図は、システムやオブジェクトが取りうる状態とその間の遷移を表現するダイアグラムです。UI/UX フロー、ビジネスプロセス、システムの動作状態を明確に可視化できます。
状態とトランジションの基本記法
基本的な状態図
mermaidstateDiagram-v2
[*] --> 待機中
待機中 --> 処理中 : 開始
処理中 --> 完了 : 成功
処理中 --> エラー : 失敗
完了 --> [*]
エラー --> 待機中 : リトライ
エラー --> [*] : 終了
詳細な状態遷移
mermaidstateDiagram-v2
[*] --> 初期化
初期化 --> 認証待ち : 初期化完了
認証待ち --> 認証中 : ログイン試行
認証中 --> ログイン済み : 認証成功
認証中 --> 認証待ち : 認証失敗
ログイン済み --> データ読み込み中 : データ要求
データ読み込み中 --> データ表示 : 読み込み完了
データ読み込み中 --> エラー表示 : 読み込み失敗
データ表示 --> データ更新中 : 更新要求
データ更新中 --> データ表示 : 更新成功
データ更新中 --> エラー表示 : 更新失敗
エラー表示 --> データ表示 : 再試行
ログイン済み --> [*] : ログアウト
複合状態と並行状態の表現
複合状態（ネストした状態）
mermaidstateDiagram-v2
[*] --> オフライン
オフライン --> オンライン : 接続
state オンライン {
[*] --> アイドル
アイドル --> 同期中 : データ同期開始
同期中 --> アイドル : 同期完了
state 同期中 {
[*] --> アップロード中
アップロード中 --> ダウンロード中 : アップロード完了
ダウンロード中 --> [*] : ダウンロード完了
}
}
オンライン --> オフライン : 切断
オフライン --> [*] : 終了
並行状態
mermaidstateDiagram-v2
[*] --> アプリケーション起動
state アプリケーション起動 {
state "UI処理" as ui
state "バックグラウンド処理" as bg
state ui {
[*] --> UI初期化
UI初期化 --> ユーザー入力待ち
ユーザー入力待ち --> 画面更新中
画面更新中 --> ユーザー入力待ち
}
state bg {
[*] --> サービス初期化
サービス初期化 --> データ監視中
データ監視中 --> データ処理中
データ処理中 --> データ監視中
}
ui --> [*]
bg --> [*]
}
アプリケーション起動 --> [*] : アプリ終了
UI/UX フローやシステム状態の設計
モバイルアプリのユーザーフロー
mermaidstateDiagram-v2
[*] --> スプラッシュ画面
スプラッシュ画面 --> チュートリアル : 初回起動
スプラッシュ画面 --> ログイン画面 : リピーター
チュートリアル --> ログイン画面 : 完了
ログイン画面 --> ログイン中 : ログイン実行
ログイン中 --> ホーム画面 : 成功
ログイン中 --> エラー表示 : 失敗
エラー表示 --> ログイン画面 : 再試行
ホーム画面 --> 商品一覧 : 商品検索
ホーム画面 --> プロフィール : プロフィール選択
ホーム画面 --> カート : カート選択
商品一覧 --> 商品詳細 : 商品選択
商品詳細 --> カート : カートに追加
商品詳細 --> 商品一覧 : 戻る
カート --> 決済画面 : 決済開始
決済画面 --> 決済処理中 : 決済実行
決済処理中 --> 完了画面 : 決済成功
決済処理中 --> エラー画面 : 決済失敗
完了画面 --> ホーム画面 : ホームに戻る
エラー画面 --> 決済画面 : 再試行
プロフィール --> ホーム画面 : 戻る
カート --> ホーム画面 : 戻る
note right of 決済処理中 : タイムアウト処理
note for 完了画面 : 注文確認メール送信
Web アプリケーションの状態管理
mermaidstateDiagram-v2
[*] --> 初期化中
初期化中 --> 認証チェック中 : 初期化完了
認証チェック中 --> 未認証 : トークンなし/無効
認証チェック中 --> 認証済み : 有効なトークン
未認証 --> ログインフォーム表示 : --
ログインフォーム表示 --> ログイン処理中 : ログイン送信
ログイン処理中 --> 認証済み : 認証成功
ログイン処理中 --> ログインエラー : 認証失敗
ログインエラー --> ログインフォーム表示 : エラー表示
認証済み --> データ読み込み中 : --
データ読み込み中 --> メイン画面 : データ取得成功
データ読み込み中 --> エラー画面 : データ取得失敗
メイン画面 --> 編集モード : 編集開始
編集モード --> 保存中 : 保存実行
保存中 --> メイン画面 : 保存成功
保存中 --> 編集エラー : 保存失敗
編集エラー --> 編集モード : エラー表示
メイン画面 --> セッション期限切れ : トークン期限切れ
編集モード --> セッション期限切れ : トークン期限切れ
セッション期限切れ --> 未認証 : --
エラー画面 --> データ読み込み中 : 再試行
メイン画面 --> [*] : ログアウト
実際のアプリケーション設計例
ユーザー認証システム
mermaidstateDiagram-v2
[*] --> ゲスト
ゲスト --> 登録中 : 新規登録
ゲスト --> ログイン中 : ログイン
登録中 --> メール認証待ち : 登録完了
登録中 --> 登録エラー : バリデーションエラー
登録エラー --> ゲスト : 修正
メール認証待ち --> アクティブユーザー : メール認証完了
メール認証待ち --> 認証期限切れ : 期限切れ
認証期限切れ --> ゲスト : 再登録要求
ログイン中 --> アクティブユーザー : ログイン成功
ログイン中 --> ログインエラー : ログイン失敗
ログインエラー --> ゲスト : 再試行
ログインエラー --> アカウントロック : 試行回数上限
アカウントロック --> ゲスト : ロック解除
アクティブユーザー --> パスワード変更中 : パスワード変更
パスワード変更中 --> アクティブユーザー : 変更完了
パスワード変更中 --> アクティブユーザー : 変更キャンセル
アクティブユーザー --> 一時停止 : 管理者による停止
一時停止 --> アクティブユーザー : 停止解除
一時停止 --> 削除済み : アカウント削除
アクティブユーザー --> [*] : ログアウト
削除済み --> [*]
注文処理システム
mermaidstateDiagram-v2
[*] --> カート空
カート空 --> 商品選択中 : 商品追加
商品選択中 --> カート内商品あり : 商品確定
商品選択中 --> カート空 : キャンセル
カート内商品あり --> 配送情報入力中 : 注文手続き開始
カート内商品あり --> 商品選択中 : 商品変更
カート内商品あり --> カート空 : カート空にする
配送情報入力中 --> 決済方法選択中 : 配送情報確定
配送情報入力中 --> カート内商品あり : 戻る
決済方法選択中 --> 注文確認中 : 決済方法確定
決済方法選択中 --> 配送情報入力中 : 戻る
注文確認中 --> 決済処理中 : 注文確定
注文確認中 --> 決済方法選択中 : 戻る
決済処理中 --> 注文完了 : 決済成功
決済処理中 --> 決済エラー : 決済失敗
決済エラー --> 注文確認中 : 再試行
決済エラー --> カート内商品あり : 注文中止
注文完了 --> 出荷準備中 : --
出荷準備中 --> 出荷済み : 出荷完了
出荷準備中 --> 注文キャンセル済み : キャンセル要求
出荷済み --> 配送中 : 配送開始
配送中 --> 配送完了 : 配送完了
配送完了 --> [*]
注文キャンセル済み --> [*]
note for 決済処理中 : タイムアウト: 30秒
note for 出荷準備中 : 在庫確認・引当処理
ER ダイアグラム（ER Diagram）でデータベース設計
ER ダイアグラムは、データベースの構造とエンティティ間の関係を表現する重要なツールです。Mermaid では、データモデリングから実際のテーブル設計まで、視覚的に理解しやすい図を作成できます。
エンティティとリレーションシップの定義
基本的な ER ダイアグラム
mermaiderDiagram
USER {
int user_id PK
string username UK
string email UK
string password
datetime created_at
datetime updated_at
}
PROFILE {
int profile_id PK
int user_id FK
string first_name
string last_name
date birth_date
string phone
text bio
}
POST {
int post_id PK
int user_id FK
string title
text content
datetime published_at
datetime created_at
datetime updated_at
}
USER ||--|| PROFILE : has
USER ||--o{ POST : creates
詳細なエンティティ定義
mermaiderDiagram
CUSTOMER {
uuid customer_id PK "顧客ID"
string email UK "メールアドレス"
string first_name "名"
string last_name "姓"
string phone "電話番号"
date birth_date "生年月日"
enum gender "性別"
datetime created_at "作成日時"
datetime updated_at "更新日時"
boolean is_active "アクティブフラグ"
}
ADDRESS {
uuid address_id PK "住所ID"
uuid customer_id FK "顧客ID"
string type "住所タイプ"
string postal_code "郵便番号"
string prefecture "都道府県"
string city "市区町村"
string street "番地"
string building "建物名"
boolean is_default "デフォルトフラグ"
}
CUSTOMER ||--o{ ADDRESS : "住所を持つ"
カーディナリティと制約の表現
関係の種類と記法
mermaiderDiagram
%% 1対1の関係
USER ||--|| USER_PROFILE : has
%% 1対多の関係
CATEGORY ||--o{ PRODUCT : contains
%% 多対多の関係
PRODUCT }o--o{ TAG : "tagged with"
%% オプショナルな関係
ORDER ||--o| COUPON : uses
USER {
int id PK
string username UK
string email UK
}
USER_PROFILE {
int id PK
int user_id FK
string bio
string avatar_url
}
CATEGORY {
int id PK
string name UK
string description
}
PRODUCT {
int id PK
int category_id FK
string name
decimal price
int stock
}
TAG {
int id PK
string name UK
string color
}
ORDER {
int id PK
int user_id FK
datetime order_date
decimal total_amount
}
COUPON {
int id PK
string code UK
decimal discount_rate
date valid_until
}
実際のデータベーススキーマ設計
EC サイトのデータベース設計
mermaiderDiagram
CUSTOMER {
uuid customer_id PK
string email UK
string password_hash
string first_name
string last_name
string phone
date birth_date
enum gender
datetime registered_at
datetime last_login_at
boolean is_verified
boolean is_active
}
CUSTOMER_ADDRESS {
uuid address_id PK
uuid customer_id FK
enum address_type
string postal_code
string prefecture
string city
string street_address
string building_name
boolean is_default
datetime created_at
}
CATEGORY {
int category_id PK
int parent_category_id FK
string category_name UK
string description
string image_url
int sort_order
boolean is_active
}
PRODUCT {
uuid product_id PK
int category_id FK
string product_name
text description
decimal price
decimal cost_price
int stock_quantity
int reserved_quantity
string sku UK
json specifications
datetime created_at
datetime updated_at
boolean is_active
}
PRODUCT_IMAGE {
uuid image_id PK
uuid product_id FK
string image_url
string alt_text
int sort_order
boolean is_primary
}
CART {
uuid cart_id PK
uuid customer_id FK
datetime created_at
datetime updated_at
}
CART_ITEM {
uuid cart_item_id PK
uuid cart_id FK
uuid product_id FK
int quantity
decimal unit_price
datetime added_at
}
ORDER {
uuid order_id PK
uuid customer_id FK
string order_number UK
datetime order_date
enum order_status
decimal subtotal
decimal tax_amount
decimal shipping_fee
decimal discount_amount
decimal total_amount
json shipping_address
json billing_address
datetime created_at
datetime updated_at
}
ORDER_ITEM {
uuid order_item_id PK
uuid order_id FK
uuid product_id FK
string product_name
int quantity
decimal unit_price
decimal total_price
}
PAYMENT {
uuid payment_id PK
uuid order_id FK
enum payment_method
enum payment_status
decimal amount
string transaction_id
datetime processed_at
text payment_details
}
REVIEW {
uuid review_id PK
uuid product_id FK
uuid customer_id FK
int rating
string title
text comment
datetime created_at
boolean is_verified_purchase
}
%% 関係の定義
CUSTOMER ||--o{ CUSTOMER_ADDRESS : "has addresses"
CUSTOMER ||--|| CART : "has cart"
CUSTOMER ||--o{ ORDER : "places orders"
CUSTOMER ||--o{ REVIEW : "writes reviews"
CATEGORY ||--o{ CATEGORY : "has subcategories"
CATEGORY ||--o{ PRODUCT : "contains products"
PRODUCT ||--o{ PRODUCT_IMAGE : "has images"
PRODUCT ||--o{ CART_ITEM : "added to cart"
PRODUCT ||--o{ ORDER_ITEM : "ordered"
PRODUCT ||--o{ REVIEW : "receives reviews"
CART ||--o{ CART_ITEM : "contains items"
ORDER ||--o{ ORDER_ITEM : "contains items"
ORDER ||--|| PAYMENT : "has payment"
正規化とテーブル関係の可視化
正規化プロセスの表現
mermaiderDiagram
%% 第1正規形違反の例（繰り返しグループあり）
STUDENT_UNNORMALIZED {
int student_id PK
string student_name
string course1
string course2
string course3
string instructor1
string instructor2
string instructor3
}
%% 第1正規形適用後
STUDENT {
int student_id PK
string student_name
}
ENROLLMENT {
int enrollment_id PK
int student_id FK
string course_name
string instructor_name
}
%% 第2正規形適用後（部分関数従属を排除）
COURSE {
string course_code PK
string course_name UK
string instructor_name
int credits
}
STUDENT_COURSE {
int enrollment_id PK
int student_id FK
string course_code FK
date enrollment_date
char grade
}
%% 第3正規形適用後（推移関数従属を排除）
INSTRUCTOR {
int instructor_id PK
string instructor_name UK
string department
string email
}
COURSE_NORMALIZED {
string course_code PK
string course_name UK
int instructor_id FK
int credits
string description
}
%% 関係の定義
STUDENT ||--o{ STUDENT_COURSE : enrolls
COURSE_NORMALIZED ||--o{ STUDENT_COURSE : "enrolled by"
INSTRUCTOR ||--o{ COURSE_NORMALIZED : teaches
複雑な関係の表現
mermaiderDiagram
ORGANIZATION {
uuid org_id PK
string org_name UK
string description
datetime founded_date
boolean is_active
}
DEPARTMENT {
uuid dept_id PK
uuid org_id FK
uuid parent_dept_id FK
string dept_name
string description
uuid manager_id FK
}
EMPLOYEE {
uuid emp_id PK
uuid dept_id FK
uuid manager_id FK
string employee_number UK
string first_name
string last_name
string email UK
string phone
date hire_date
decimal salary
enum employment_type
boolean is_active
}
PROJECT {
uuid project_id PK
uuid org_id FK
string project_name
text description
date start_date
date end_date
enum status
decimal budget
}
PROJECT_ASSIGNMENT {
uuid assignment_id PK
uuid project_id FK
uuid emp_id FK
enum role
date assigned_date
date end_date
decimal allocation_percentage
}
SKILL {
int skill_id PK
string skill_name UK
string category
string description
}
EMPLOYEE_SKILL {
uuid emp_skill_id PK
uuid emp_id FK
int skill_id FK
enum proficiency_level
date acquired_date
date certified_date
}
%% 関係の定義
ORGANIZATION ||--o{ DEPARTMENT : "has departments"
ORGANIZATION ||--o{ PROJECT : "manages projects"
DEPARTMENT ||--o{ DEPARTMENT : "has subdepartments"
DEPARTMENT ||--o{ EMPLOYEE : "employs"
EMPLOYEE ||--o{ EMPLOYEE : "manages"
DEPARTMENT }o--|| EMPLOYEE : "managed by"
EMPLOYEE ||--o{ PROJECT_ASSIGNMENT : "assigned to"
PROJECT ||--o{ PROJECT_ASSIGNMENT : "has assignments"
EMPLOYEE ||--o{ EMPLOYEE_SKILL : "has skills"
SKILL ||--o{ EMPLOYEE_SKILL : "possessed by"
その他の特殊ダイアグラム活用法
Mermaid では、基本的なダイアグラムに加えて、特定の用途に特化した多様なダイアグラムタイプが利用できます。これらを効果的に活用することで、より豊かな表現が可能になります。
ジャーニーマップ（User Journey）
基本的なジャーニーマップ
mermaidjourney
title ユーザーのオンラインショッピング体験
section 商品発見
商品検索 : 7: ユーザー
商品比較 : 5: ユーザー
レビュー確認 : 6: ユーザー
section 購入検討
価格比較 : 4: ユーザー
在庫確認 : 8: ユーザー
配送オプション確認: 7: ユーザー
section 購入
カート追加 : 8: ユーザー
決済情報入力 : 3: ユーザー
注文確定 : 6: ユーザー
section アフターサービス
配送状況確認 : 9: ユーザー
商品受取 : 9: ユーザー
レビュー投稿 : 7: ユーザー
複雑なカスタマージャーニー
mermaidjourney
title 新規顧客獲得からリピーター化まで
section 認知段階
SNS広告表示 : 3: 見込み客
友人からの紹介 : 8: 見込み客
検索結果表示 : 5: 見込み客
section 興味関心段階
ウェブサイト訪問 : 6: 見込み客
サービス詳細確認 : 5: 見込み客
価格プラン比較 : 4: 見込み客
競合他社との比較 : 3: 見込み客
section 検討段階
無料トライアル登録: 7: 見込み客
機能テスト : 6: 見込み客
サポート問い合わせ: 8: 見込み客, サポート
導入相談 : 9: 見込み客, 営業
section 購入段階
プラン選択 : 7: 見込み客
契約手続き : 5: 見込み客, 営業
初期設定サポート : 8: 新規顧客, サポート
section 利用段階
オンボーディング : 6: 新規顧客, サポート
日常利用 : 8: 既存顧客
トラブル対応 : 7: 既存顧客, サポート
section 継続段階
プラン見直し : 6: 既存顧客, 営業
機能拡張 : 9: 既存顧客
他社への推薦 : 9: 既存顧客
パイチャート（Pie Chart）
基本的なパイチャート
mermaidpie title 売上構成比（2024年第1四半期）
"商品A" : 35
"商品B" : 25
"商品C" : 20
"商品D" : 15
"その他" : 5
詳細なパイチャート
mermaidpie title ウェブサイト訪問者の流入元
"オーガニック検索" : 42.3
"直接アクセス" : 28.7
"ソーシャルメディア" : 12.1
"リファラル" : 8.9
"有料広告" : 5.2
"メールマーケティング" : 2.8
Git Graph
基本的な Git フロー
mermaidgitgraph
commit id: "Initial commit"
branch develop
checkout develop
commit id: "Add user model"
commit id: "Add authentication"
branch feature/payment
checkout feature/payment
commit id: "Add payment gateway"
commit id: "Add payment tests"
checkout develop
merge feature/payment
commit id: "Update documentation"
checkout main
merge develop tag: "v1.0.0"
複雑な開発フロー
mermaidgitgraph
commit id: "プロジェクト初期化"
branch develop
checkout develop
commit id: "基本構造作成"
branch feature/user-auth
checkout feature/user-auth
commit id: "ユーザー認証実装"
commit id: "認証テスト追加"
checkout develop
branch feature/product-catalog
checkout feature/product-catalog
commit id: "商品カタログ実装"
commit id: "検索機能追加"
checkout develop
merge feature/user-auth
commit id: "認証機能統合"
branch hotfix/security-patch
checkout main
checkout hotfix/security-patch
commit id: "セキュリティ修正"
checkout main
merge hotfix/security-patch tag: "v1.0.1"
checkout develop
merge main
merge feature/product-catalog
commit id: "カタログ機能統合"
checkout main
merge develop tag: "v1.1.0"
マインドマップ（Mindmap）
基本的なマインドマップ
mermaidmindmap
root((プロジェクト計画))
要件定義
機能要件
ユーザー管理
商品管理
注文処理
非機能要件
性能
セキュリティ
可用性
設計
システム設計
アーキテクチャ
インフラ
UI/UX設計
ワイヤーフレーム
プロトタイプ
開発
フロントエンド
React
TypeScript
バックエンド
Node.js
PostgreSQL
テスト
単体テスト
統合テスト
E2Eテスト
複雑なマインドマップ
mermaidmindmap
root((Webアプリ開発))
技術スタック
フロントエンド
フレームワーク
React
Vue.js
Angular
スタイリング
CSS Modules
Styled Components
Tailwind CSS
状態管理
Redux
Zustand
Context API
バックエンド
言語・フレームワーク
Node.js/Express
Python/Django
Java/Spring
データベース
PostgreSQL
MongoDB
Redis
API設計
REST
GraphQL
gRPC
開発プロセス
計画
要件定義
スケジュール
リスク管理
実装
コーディング規約
レビュープロセス
テスト戦略
デプロイ
CI/CD
監視
ログ管理
品質保証
テスト
単体テスト
統合テスト
E2Eテスト
パフォーマンステスト
コード品質
静的解析
コードレビュー
技術的負債管理
この段階で、Mermaid で利用可能な主要なダイアグラムタイプについて包括的に学習できました。次のセクションでは、これらのダイアグラムを実際の業務シーンでどのように活用するかについて、具体的なサンプル集をご紹介いたします。
実践的な活用シーン別サンプル集
ここまで学習した Mermaid の各種ダイアグラムを、実際の業務シーンで効果的に活用するための実践的なサンプル集をご紹介します。
システム開発での要件定義書
ユーザー管理システムの要件定義
markdown# ユーザー管理システム要件定義書
## システム概要
本システムは、企業内でのユーザーアカウント管理を効率化するシステムです。
## 業務フロー
```mermaid
flowchart TD
A[新規ユーザー申請] --> B{申請内容確認}
B -->|承認| C[アカウント作成]
B -->|却下| D[却下通知]
C --> E[初期パスワード発行]
E --> F[ユーザー通知]
F --> G[初回ログイン]
G --> H[パスワード変更強制]
H --> I[アカウント有効化]
D --> J[申請者へ理由通知]
K[定期的なアカウント監査] --> L{アカウント活動確認}
L -->|非活性| M[アカウント無効化通知]
L -->|活性| N[監査完了]
M --> O[アカウント無効化]
```
システム構成
mermaidgraph TB
subgraph "プレゼンテーション層"
A[管理者画面]
B[ユーザー画面]
C[API Gateway]
end
subgraph "アプリケーション層"
D[ユーザー管理サービス]
E[認証サービス]
F[通知サービス]
end
subgraph "データ層"
G[ユーザーDB]
H[ログDB]
I[設定DB]
end
A --> C
B --> C
C --> D
C --> E
C --> F
D --> G
E --> G
F --> H
D --> I
データモデル
mermaiderDiagram
USER {
uuid user_id PK
string username UK
string email UK
string password_hash
enum status
datetime created_at
datetime last_login
boolean is_admin
}
ROLE {
int role_id PK
string role_name UK
text description
json permissions
}
USER_ROLE {
uuid user_role_id PK
uuid user_id FK
int role_id FK
datetime assigned_at
datetime expires_at
}
AUDIT_LOG {
uuid log_id PK
uuid user_id FK
string action
text details
datetime timestamp
string ip_address
}
USER ||--o{ USER_ROLE : has
ROLE ||--o{ USER_ROLE : assigned
USER ||--o{ AUDIT_LOG : generates
業務フロー改善提案書
承認プロセスの改善提案
markdown# 承認プロセス改善提案書
## 現行プロセスの課題
### 現在の承認フロー
```mermaid
flowchart TD
A[申請書作成] --> B[上司確認]
B --> C[部長承認]
C --> D[役員承認]
D --> E[総務確認]
E --> F[経理承認]
F --> G[完了]
B -->|差し戻し| H[修正依頼]
C -->|差し戻し| H
D -->|差し戻し| H
E -->|差し戻し| H
F -->|差し戻し| H
H --> A
style H fill:#ff9999
```
**問題点：**
- 承認ステップが多すぎる（6 段階）
- 差し戻し時の修正対応が非効率
- 承認者の不在時に処理が停止
### 改善後の承認フロー
```mermaid
flowchart TD
A[申請書作成] --> B{金額判定}
B -->|10万円未満| C[上司承認]
B -->|10万円以上| D[部長承認]
B -->|100万円以上| E[役員承認]
C --> F[自動処理]
D --> G{緊急度判定}
E --> G
G -->|通常| F
G -->|緊急| H[即時処理]
F --> I[完了通知]
H --> I
D -->|代理承認可能| J[代理者承認]
J --> F
style F fill:#99ff99
style H fill:#99ccff
```
## 改善効果の試算
```mermaid
gantt
title 承認プロセス改善効果
dateFormat X
axisFormat %d日
section 現行プロセス
申請から完了まで :done, current, 0, 14
section 改善後プロセス
通常案件（10万円未満）:improved1, 0, 3
通常案件（10万円以上）:improved2, 0, 5
緊急案件 :improved3, 0, 1
```
技術ブログでの解説図
マイクロサービスアーキテクチャの解説
markdown# マイクロサービスアーキテクチャへの移行戦略
## アーキテクチャ概要
マイクロサービス化により、システムの柔軟性と保守性を向上させます。
### 現行のモノリシック構成
```mermaid
graph TB
subgraph "Monolithic Application"
A[Web Layer]
B[Business Logic]
C[Data Access Layer]
end
D[Database]
A --> B
B --> C
C --> D
style "Monolithic Application" fill:#ffcccc
```
### 目標のマイクロサービス構成
```mermaid
graph TB
subgraph "API Gateway"
GW[Load Balancer]
end
subgraph "User Service"
US[User API]
USD[User DB]
end
subgraph "Product Service"
PS[Product API]
PSD[Product DB]
end
subgraph "Order Service"
OS[Order API]
OSD[Order DB]
end
subgraph "Notification Service"
NS[Notification API]
NSQ[Message Queue]
end
GW --> US
GW --> PS
GW --> OS
US --> USD
PS --> PSD
OS --> OSD
NS --> NSQ
OS -.-> NS
US -.-> NS
```
## 移行プロセス
### フェーズ別移行計画
```mermaid
gantt
title マイクロサービス移行ロードマップ
dateFormat YYYY-MM-DD
section Phase 1
アーキテクチャ設計 :design1, 2024-07-01, 30d
インフラ準備 :infra1, after design1, 20d
section Phase 2
User Service分離 :user-svc, after infra1, 45d
API Gateway構築 :gateway, after infra1, 30d
section Phase 3
Product Service分離 :product-svc, after user-svc, 35d
Order Service分離 :order-svc, after product-svc, 40d
section Phase 4
統合テスト :integration, after order-svc, 20d
パフォーマンステスト :perf-test, after integration, 15d
本番切替 :milestone, cutover, after perf-test, 0d
```
### サービス間通信パターン
```mermaid
sequenceDiagram
participant Client
participant Gateway as API Gateway
participant UserSvc as User Service
participant OrderSvc as Order Service
participant ProductSvc as Product Service
participant Queue as Message Queue
Client->>Gateway: 注文作成リクエスト
Gateway->>UserSvc: ユーザー認証確認
UserSvc-->>Gateway: 認証結果
alt 認証成功
Gateway->>ProductSvc: 在庫確認
ProductSvc-->>Gateway: 在庫状況
Gateway->>OrderSvc: 注文作成
OrderSvc->>Queue: 注文完了イベント
OrderSvc-->>Gateway: 注文ID
Gateway-->>Client: 注文完了レスポンス
Queue->>UserSvc: 通知送信要求
Queue->>ProductSvc: 在庫更新要求
else 認証失敗
Gateway-->>Client: 認証エラー
end
```
プレゼンテーション資料
新サービス企画プレゼンテーション
markdown# 新サービス「SmartDelivery」企画提案
## サービス概要
AI を活用した配送最適化サービスで、配送コストを 30%削減します。
### ユーザージャーニー
```mermaid
journey
title 配送業者のSmartDelivery利用体験
section 登録・設定
サービス登録 : 6: 配送業者
車両情報登録 : 5: 配送業者
エリア設定 : 7: 配送業者
section 日次利用
配送依頼受付 : 8: 配送業者
AIルート最適化 : 9: 配送業者, AI
配送実行 : 8: 配送業者
section 効果確認
コスト分析 : 9: 配送業者
効率改善レポート : 8: 配送業者
継続利用決定 : 9: 配送業者
```
### 技術アーキテクチャ
```mermaid
graph TB
subgraph "Client Applications"
A[Mobile App]
B[Web Dashboard]
C[API Integration]
end
subgraph "Application Layer"
D[API Gateway]
E[Route Optimization Service]
F[Machine Learning Engine]
G[Analytics Service]
end
subgraph "Data Layer"
H[Route Database]
I[Traffic Data]
J[Historical Analytics]
K[Real-time Cache]
end
subgraph "External Services"
L[Map Service API]
M[Weather API]
N[Traffic API]
end
A --> D
B --> D
C --> D
D --> E
D --> G
E --> F
F --> H
F --> I
G --> J
E --> K
F --> L
F --> M
F --> N
```
### ビジネスモデル
```mermaid
pie title 収益構成予測（3年後）
"基本プラン（月額）" : 45
"プレミアムプラン（月額）" : 35
"API利用料（従量課金）" : 15
"カスタム開発" : 5
```
### 開発ロードマップ
```mermaid
gantt
title SmartDelivery開発スケジュール
dateFormat YYYY-MM-DD
section MVP開発
基本機能開発 :mvp1, 2024-08-01, 60d
AIアルゴリズム実装 :mvp2, 2024-08-15, 75d
section ベータ版
ベータテスト :beta1, after mvp1, 30d
フィードバック反映 :beta2, after beta1, 20d
section 正式リリース
最終テスト :final1, after beta2, 15d
マーケティング準備 :marketing, 2024-10-01, 45d
正式ローンチ :milestone, launch, after final1, 0d
```
高度なカスタマイズとベストプラクティス
Mermaid をより効果的に活用するための高度な技術とベストプラクティスをご紹介します。
CSS スタイルの適用方法
基本的なスタイリング
mermaidflowchart TD
A[開始] --> B[処理]
B --> C[終了]
classDef startClass fill:#e1f5fe,stroke:#01579b,stroke-width:3px,color:#000
classDef processClass fill:#f3e5f5,stroke:#4a148c,stroke-width:2px,color:#000
classDef endClass fill:#e8f5e8,stroke:#2e7d32,stroke-width:3px,color:#000
class A startClass
class B processClass
class C endClass
高度なスタイリング
html<style>
.mermaid {
font-family: 'Helvetica Neue', Arial, sans-serif;
}
.mermaid .node rect {
fill: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
stroke: #4f46e5;
stroke-width: 2px;
rx: 8px;
ry: 8px;
}
.mermaid .node .label {
color: white;
font-weight: 600;
font-size: 14px;
}
.mermaid .edgePath path {
stroke: #6366f1;
stroke-width: 2px;
fill: none;
}
.mermaid .arrowheadPath {
fill: #6366f1;
}
</style>
```mermaid flowchart LR A[モダンデザイン] -->
B[グラデーション効果] B --> C[角丸スタイル] C -->
D[美しい仕上がり]
テーマとカラーパレットの設定
プリセットテーマの活用
mermaid%%{init: {"theme": "dark"}}%%
flowchart TD
A[ダークテーマ] --> B[高いコントラスト]
B --> C[目に優しい]
mermaid%%{init: {"theme": "forest"}}%%
flowchart TD
A[フォレストテーマ] --> B[自然な色調]
B --> C[落ち着いた印象]
カスタムテーマの作成
mermaid%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#ff6b6b", "primaryTextColor": "#ffffff", "primaryBorderColor": "#ff4757", "lineColor": "#7bed9f", "secondaryColor": "#70a1ff", "tertiaryColor": "#5352ed", "background": "#f8f9fa", "mainBkg": "#ffffff", "secondBkg": "#e9ecef"}}}%%
flowchart TD
A[カスタムテーマ] --> B[ブランドカラー]
B --> C[統一感のあるデザイン]
C --> D[プロフェッショナルな印象]
大規模図表の分割・整理術
サブグラフを活用した構造化
mermaidflowchart TB
subgraph "フロントエンド"
A[React App]
B[State Management]
C[UI Components]
end
subgraph "バックエンド"
D[API Server]
E[Business Logic]
F[Data Access]
end
subgraph "データベース"
G[User Data]
H[Application Data]
I[System Logs]
end
subgraph "外部サービス"
J[Payment Gateway]
K[Email Service]
L[Analytics]
end
A --> D
B --> A
C --> A
D --> E
E --> F
F --> G
F --> H
F --> I
E --> J
E --> K
E --> L
モジュラー設計
mermaidflowchart TD
%% ユーザー認証モジュール
subgraph "認証モジュール"
AUTH1[ログイン]
AUTH2[パスワード確認]
AUTH3[セッション管理]
end
%% 商品管理モジュール
subgraph "商品管理モジュール"
PROD1[商品登録]
PROD2[在庫管理]
PROD3[価格管理]
end
%% 注文処理モジュール
subgraph "注文処理モジュール"
ORDER1[カート管理]
ORDER2[決済処理]
ORDER3[配送管理]
end
%% モジュール間の関係
AUTH1 --> PROD1
AUTH1 --> ORDER1
PROD2 --> ORDER1
ORDER2 --> ORDER3
可読性向上のコツ
適切な命名規則
mermaidflowchart TD
%% 良い例：意味のある名前
UserRegistration[ユーザー登録] --> EmailValidation[メール認証]
EmailValidation --> AccountActivation[アカウント有効化]
AccountActivation --> WelcomeMessage[ウェルカムメッセージ]
%% 悪い例を避ける
%% A --> B --> C --> D
ノートとコメントの活用
mermaidflowchart TD
A[注文受付] --> B{在庫確認}
B -->|在庫あり| C[注文確定]
B -->|在庫なし| D[入荷待ち]
C --> E[決済処理]
E --> F[配送手配]
note right of B : 在庫数をリアルタイムで確認
note for E : 複数の決済方法に対応
%% 処理時間の目安
click A "https://example.com/order-process" "注文プロセス詳細"
click E "https://example.com/payment-guide" "決済ガイド"
レイアウトの最適化
mermaidflowchart LR
%% 水平レイアウトで段階的な流れを表現
subgraph "Phase 1"
P1A[要件定義]
P1B[基本設計]
end
subgraph "Phase 2"
P2A[詳細設計]
P2B[実装]
end
subgraph "Phase 3"
P3A[テスト]
P3B[デプロイ]
end
P1A --> P1B
P1B --> P2A
P2A --> P2B
P2B --> P3A
P3A --> P3B
パフォーマンス最適化
図表サイズの最適化
javascript// mermaid設定の最適化
mermaid.initialize({
startOnLoad: true,
theme: 'default',
flowchart: {
htmlLabels: false,
curve: 'linear',
useMaxWidth: true,
padding: 15,
},
sequence: {
diagramMarginX: 50,
diagramMarginY: 10,
boxTextMargin: 5,
noteMargin: 10,
messageMargin: 35,
},
gantt: {
fontSize: 11,
gridLineStartPadding: 35,
bottomPadding: 25,
},
});
レンダリング最適化
html<!-- 遅延ローディングの実装 -->
<div class="mermaid-container" data-mermaid="true">
<script type="text/mermaid">
flowchart TD
A[重要な図表] --> B[最適化済み]
B --> C[高速表示]
</script>
</div>
<script>
// Intersection Observer APIを使用した遅延ローディング
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const container = entry.target;
const mermaidCode = container.querySelector(
'script[type="text/mermaid"]'
).textContent;
container.innerHTML =
'<div class="mermaid">' + mermaidCode + '</div>';
mermaid.init(
undefined,
container.querySelector('.mermaid')
);
observer.unobserve(container);
}
});
});
document
.querySelectorAll('.mermaid-container')
.forEach((container) => {
observer.observe(container);
});
</script>
まとめ
この記事では、Mermaid を使ったダイアグラム作成について、基礎から実践的な活用まで包括的に解説いたしました。
Mermaid による視覚的コミュニケーションの価値
生産性の向上 テキストベースでダイアグラムを作成できることで、従来のツールと比較して圧倒的に効率的な図表作成が可能になります。コードを書くような感覚で、素早く正確な図表を作成できるため、アイデアの可視化から仕様書の作成まで、あらゆる場面で生産性が向上します。
コミュニケーションの改善 視覚的な表現により、複雑な概念やプロセスを分かりやすく伝達できます。特に、チーム内での情報共有や、ステークホルダーとの要件確認において、図表による説明は理解を深め、認識の相違を減らす効果があります。
保守性の確保 テキストファイルとして管理できるため、バージョン管理システムとの親和性が高く、変更履歴の追跡や差分確認が容易です。また、ツールに依存しない形式であるため、長期的な保守性も確保できます。
標準化の促進 統一された記法により、組織内での図表作成の標準化が進みます。これにより、誰が作成した図表でも一定の品質が保たれ、メンテナンスや引き継ぎが容易になります。
関連リンク
公式リソース
Mermaid 公式サイト
- Mermaid 公式ドキュメント - 最新の仕様と使用方法
- Mermaid Live Editor - オンラインでの編集・プレビュー
- GitHub リポジトリ - ソースコードと課題管理
エディタとツール
VS Code 拡張機能
- Markdown Preview Mermaid Support - プレビュー機能
- Mermaid Editor - 専用エディタ
その他のエディタサポート
reviewもう朝起きるのが辛くない！『スタンフォード式 最高の睡眠』西野精治著で学んだ、たった 90 分で人生が変わる睡眠革命
reviewもう「なんとなく」で決めない！『解像度を上げる』馬田隆明著で身につけた、曖昧思考を一瞬で明晰にする技術
reviewもう疲れ知らず！『最高の体調』鈴木祐著で手に入れた、一生モノの健康習慣術
review人生が激変！『苦しかったときの話をしようか』森岡毅著で発見した、本当に幸せなキャリアの築き方
reviewもう「何言ってるの？」とは言わせない！『バナナの魅力を 100 文字で伝えてください』柿内尚文著 で今日からあなたも伝え方の達人！
reviewもう時間に追われない！『エッセンシャル思考』グレッグ・マキューンで本当に重要なことを見抜く！