This is a skill for generating diagrams using Mermaid notation.
Overview
Generate flowcharts, sequence diagrams, Gantt charts, etc. from text.
Main Features
- Flowchart: Process Flow
- Sequence Diagram: Interaction
- Class Diagram: UML class diagram
- ER Diagram: Database design
- Gantt Chart: Project management
- Pie Chart: Percentage display
- State Transition Diagram: State Machine
- Journey Map: User Journey
How to Use
以下のプロセスのフローチャートをMermaidで作成：
1. ユーザー登録
2. メール検証
3. プロフィール設定
Diagram Type
Flowchart
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
Sequence Diagram
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: ログイン成功
Class Diagram
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 Diagram
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 Chart
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
State Transition Diagram
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 Chart
pie title 売上構成
"製品A" : 42
"製品B" : 30
"製品C" : 18
"その他" : 10
pie title 売上構成
"製品A" : 42
"製品B" : 30
"製品C" : 18
"その他" : 10
User Journey
journey
title ユーザー登録のジャーニー
section 発見
ランディングページ訪問: 5: User
機能を確認: 4: User
section 登録
サインアップクリック: 3: User
情報入力: 2: User
メール認証: 3: User
section 利用開始
チュートリアル: 4: User
初回利用: 5: User
Embedding in 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>
Best Practices
- Clear Labels: Make node names easy to understand
- Direction: Choose TD (top-down) or LR (left-right) appropriately
- Color Coding: Emphasize important parts
- Comments: Add explanations for complex diagrams
Version Information
- Skill Version: 1.0.0
- Last updated: 2025-01-22