---
name: mermaid-diagram
description: Generate Mermaid diagrams including flowcharts, sequence diagrams, and class diagrams. Use when creating visual diagrams in documentation.
---
# Mermaid Diagram Skill
Mermaid記法でダイアグラムを生成するスキルです。
## 概要
フローチャート、シーケンス図、ガントチャート等をテキストから生成します。
## 主な機能
- **フローチャート**: プロセスフロー
- **シーケンス図**: インタラクション
- **クラス図**: UML クラス図
- **ER図**: データベース設計
- **ガントチャート**: プロジェクト管理
- **パイチャート**: 割合表示
- **状態遷移図**: ステートマシン
- **ジャーニーマップ**: ユーザージャーニー
## 使用方法
```
以下のプロセスのフローチャートをMermaidで作成：
1. ユーザー登録
2. メール検証
3. プロフィール設定
```
## ダイアグラムタイプ
### フローチャート
```mermaid
graph TD
A[開始] --> B{条件分岐}
B -->|Yes| C[処理A]
B -->|No| D[処理B]
C --> E[終了]
D --> E
```
```
graph TD
A[開始] --> B{条件分岐}
B -->|Yes| C[処理A]
B -->|No| D[処理B]
C --> E[終了]
D --> E
```
### シーケンス図
```mermaid
sequenceDiagram
participant User
participant Frontend
participant Backend
participant Database
User->>Frontend: ログイン
Frontend->>Backend: POST /api/login
Backend->>Database: SELECT user
Database-->>Backend: User data
Backend-->>Frontend: JWT token
Frontend-->>User: ログイン成功
```
```
sequenceDiagram
participant User
participant Frontend
participant Backend
participant Database
User->>Frontend: ログイン
Frontend->>Backend: POST /api/login
Backend->>Database: SELECT user
Database-->>Backend: User data
Backend-->>Frontend: JWT token
Frontend-->>User: ログイン成功
```
### クラス図
```mermaid
classDiagram
class User {
+String id
+String name
+String email
+login()
+logout()
}
class Order {
+String id
+Date date
+Float total
+addItem()
+removeItem()
}
User "1" --> "*" Order : places
```
```
classDiagram
class User {
+String id
+String name
+String email
+login()
+logout()
}
class Order {
+String id
+Date date
+Float total
+addItem()
+removeItem()
}
User "1" --> "*" Order : places
```
### ER図
```mermaid
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ ORDER_ITEM : contains
PRODUCT ||--o{ ORDER_ITEM : "ordered in"
USER {
int id PK
string name
string email
}
ORDER {
int id PK
int user_id FK
date created_at
}
ORDER_ITEM {
int order_id FK
int product_id FK
int quantity
}
PRODUCT {
int id PK
string name
decimal price
}
```
```
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ ORDER_ITEM : contains
PRODUCT ||--o{ ORDER_ITEM : "ordered in"
USER {
int id PK
string name
string email
}
```
### ガントチャート
```mermaid
gantt
title プロジェクトスケジュール
dateFormat YYYY-MM-DD
section フェーズ1
要件定義 :a1, 2024-01-01, 30d
設計 :a2, after a1, 20d
section フェーズ2
開発 :b1, after a2, 60d
テスト :b2, after b1, 30d
section デプロイ
リリース準備 :c1, after b2, 10d
本番リリース :milestone, c2, after c1, 1d
```
```
gantt
title プロジェクトスケジュール
dateFormat YYYY-MM-DD
section フェーズ1
要件定義 :a1, 2024-01-01, 30d
設計 :a2, after a1, 20d
```
### 状態遷移図
```mermaid
stateDiagram-v2
[*] --> Draft
Draft --> Review : Submit
Review --> Approved : Approve
Review --> Draft : Reject
Approved --> Published : Publish
Published --> [*]
```
```
stateDiagram-v2
[*] --> Draft
Draft --> Review : Submit
Review --> Approved : Approve
Review --> Draft : Reject
Approved --> Published : Publish
Published --> [*]
```
### パイチャート
```mermaid
pie title 売上構成
"製品A" : 42
"製品B" : 30
"製品C" : 18
"その他" : 10
```
```
pie title 売上構成
"製品A" : 42
"製品B" : 30
"製品C" : 18
"その他" : 10
```
### ユーザージャーニー
```mermaid
journey
title ユーザー登録のジャーニー
section 発見
ランディングページ訪問: 5: User
機能を確認: 4: User
section 登録
サインアップクリック: 3: User
情報入力: 2: User
メール認証: 3: User
section 利用開始
チュートリアル: 4: User
初回利用: 5: User
```
## HTMLへの埋め込み
```html
graph TD
A[開始] --> B[処理]
B --> C[終了]
```
## ベストプラクティス
1. **明確なラベル**: ノード名を分かりやすく
2. **方向性**: TD（上下）、LR（左右）を適切に選択
3. **色分け**: 重要な部分を強調
4. **コメント**: 複雑な図には説明を追加
## バージョン情報
- スキルバージョン: 1.0.0
- 最終更新: 2025-01-22