Mermaid チュートリアル
Mermaid はテキストで図を記述する言語です。フローチャート、シーケンス図、ガントチャートなどの基本構文と例を紹介します。
1. フローチャート
graph / flowchart と TD（縦）または LR（横）を使います。
graph TD
A[開始] --> B{判定}
B -->|はい| C[実行]
B -->|いいえ| D[終了]
プレビュー
2. シーケンス図
participant で参加者を定義し、矢印でメッセージを表します。
sequenceDiagram
participant ユーザー
participant API
ユーザー->>API: リクエスト
API-->>ユーザー: レスポンス
プレビュー
3. ガントチャート
dateFormat と section でスケジュールを記述します。
gantt
title 計画
dateFormat YYYY-MM-DD
section 開発
分析 :a1, 2025-01-01, 7d
実装 :a2, after a1, 10d
プレビュー
4. クラス図
classDiagram でクラス・属性・継承を表現します。
classDiagram
class Animal {
+String name
+makeSound()
}
class Dog {
+bark()
}
Animal <|-- Dog
プレビュー
5. 状態図
stateDiagram-v2 で状態遷移を記述します。[*] は開始・終了です。
stateDiagram-v2
[*] --> 待機
待機 --> 実行中: 開始
実行中 --> 完了: 終了
完了 --> [*]
プレビュー
6. ER 図
erDiagram でエンティティとリレーションを定義します。
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
CUSTOMER {
string id
string name
}
プレビュー
7. 円グラフ
pie で構成比を表現します。"ラベル" : 数値 の形式です。
pie title シェア
"A" : 40
"B" : 35
"C" : 25
プレビュー
8. マインドマップ
mindmap で階層構造を表現します。インデントで子ノードを示します。
mindmap
root((製品))
機能
認証
技術
フロント
バック
プレビュー
9. タイムライン
timeline で時系列のイベントやマイルストーンを列挙します。
timeline
title マイルストーン
2025-01 : キックオフ
2025-02 : 設計レビュー
2025-03 : 開発完了
2025-04 : リリース
プレビュー
10. ユーザージャーニー
journey でユーザー体験を記述します。数値は満足度（1–5）です。
journey
title 予約フロー
section 閲覧
サイトを開く: 5: ユーザー
検索する: 3: ユーザー
section 購入
座席選択: 4: ユーザー
支払い: 2: ユーザー, システム
プレビュー
11. Git グラフ
gitGraph でブランチ・コミット・マージを可視化します。
gitGraph
commit id: "init"
branch develop
checkout develop
commit id: "feat-A"
checkout main
merge develop id: "release-1.0"
プレビュー
12. クアドラントチャート
quadrantChart で四象限に項目を配置します。座標 [x, y] は 0–1 です。
quadrantChart
title 優先度マトリクス
x-axis 低影響 --> 高影響
y-axis 低緊急 --> 高緊急
quadrant-1 即対応
quadrant-2 計画
quadrant-3 延期
quadrant-4 監視
バグ修正: [0.8, 0.9]
新機能: [0.7, 0.5]
プレビュー
13. ブロック図
block-beta でモジュールやデータフローを表現します。
block-beta
columns 3
A["入力"] B["処理"] C["出力"]
A --> B
B --> C
プレビュー
14. サンキーダイアグラム
sankey の後に CSV（source,target,value）で記述。ノード名は英字推奨（日本語・中国語は一部バージョンで未対応）。
sankey
Visit,Signup,5
Visit,Leave,20
Signup,Trial,4
Trial,Pay,3
プレビュー
15. 要件図
requirementDiagram で要件とシステム要素の関係を記述します。
requirementDiagram
requirement user_login {
id: 1
text: "パスワード認証をサポート"
risk: medium
verifymethod: test
}
element auth_module {
type: system
}
auth_module - satisfies -> user_login
プレビュー
16. ヒント
エディタでテーマ切替、手描きスタイル、ズーム、SVG/PNG エクスポートが利用できます。