| 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. プロフィール設定
ダイアグラムタイプ
フローチャート
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
シーケンス図
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: ログイン成功
クラス図
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図
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
}
ガントチャート
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
状態遷移図
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 --> [*]
パイチャート
pie title 売上構成
"製品A" : 42
"製品B" : 30
"製品C" : 18
"その他" : 10
pie title 売上構成
"製品A" : 42
"製品B" : 30
"製品C" : 18
"その他" : 10
ユーザージャーニー
journey
title ユーザー登録のジャーニー
section 発見
ランディングページ訪問: 5: User
機能を確認: 4: User
section 登録
サインアップクリック: 3: User
情報入力: 2: User
メール認証: 3: User
section 利用開始
チュートリアル: 4: User
初回利用: 5: User
HTMLへの埋め込み
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({ startOnLoad: true });</script>
</head>
<body>
<div class="mermaid">
graph TD
A[開始] --> B[処理]
B --> C[終了]
</div>
</body>
</html>
ベストプラクティス
- 明確なラベル: ノード名を分かりやすく
- 方向性: TD（上下）、LR（左右）を適切に選択
- 色分け: 重要な部分を強調
- コメント: 複雑な図には説明を追加
バージョン情報
- スキルバージョン: 1.0.0
- 最終更新: 2025-01-22