mermaid-diagram

Mermaid Diagram Skill

Mermaid記法でダイアグラムを生成するスキルです。

概要

フローチャート、シーケンス図、ガントチャート等をテキストから生成します。

主な機能

フローチャート: プロセスフロー
シーケンス図: インタラクション
クラス図: UML クラス図
ER図: データベース設計
ガントチャート: プロジェクト管理
パイチャート: 割合表示
状態遷移図: ステートマシン
ジャーニーマップ: ユーザージャーニー

使用方法

以下のプロセスのフローチャートをMermaidで作成：

ユーザー登録
メール検証
プロフィール設定

ダイアグラムタイプ

フローチャート

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

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 --> []

パイチャート

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

mermaid-diagram

Safety Notice

Copy this and send it to your AI assistant to learn

Source Transparency

Related Skills

pptx-generator

document-summarizer

excel-processor

document-formatter