mcpField
M
mermaid-diagram-generator

mermaid-diagram-generator

github.com/patricio0312revドキュメント63334 回インストール42 週間前に更新
リポジトリ

mermaid-diagram-generator について

mermaid-diagram-generatorは、Markdown文書向けにMermaid構文で保守しやすい図を作るスキルです。フローチャートやシーケンス図から、アーキテクチャ図やタイムラインまで扱います。

主な機能

  1. 01フローチャートとシーケンス図の作成
  2. 02ERD、状態図、クラス図のモデル化
  3. 03アーキテクチャ図とGitグラフの描画
  4. 04円グラフ、タイムライン、マインドマップの生成
  5. 05スタイル、グループ、ラベルの設定

活用シーン

  1. 01APIリクエストフローの文書化
  2. 02データベーススキーマと状態機械の図示
  3. 03Markdownでのソフトウェアアーキテクチャ表現

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/patricio0312rev/skills --skill mermaid-diagram-generator

インストール後、Claude Code で/mermaid-diagram-generatorを入力して読み込まれたか確認します。

詳細

Mermaid 図ジェネレーター

Markdown で Mermaid 構文を使用し、明確で保守しやすい図を作成します。

基本的なワークフロー

  1. 図の種類を特定する：フロー、シーケンス、ERD など
  2. 要素を定義する：ノード、接続、ラベル
  3. スタイルを適用する：色、形状、方向
  4. インタラクションを追加する：クリックハンドラー（任意）
  5. ドキュメントに埋め込む：Markdown との統合

フローチャート

基本的なフローチャート
flowchart TD
    A[Start] --> B{Is user logged in?}
    B -->|Yes| C[Show Dashboard]
    B -->|No| D[Show Login Page]
    D --> E[Enter Credentials]
    E --> F{Valid credentials?}
    F -->|Yes| C
    F -->|No| G[Show Error]
    G --> D
    C --> H[End]
ノードの形状
flowchart LR
    A[Rectangle] --> B(Rounded)
    B --> C([Stadium])
    C --> D[[Subroutine]]
    D --> E[(Database)]
    E --> F((Circle))
    F --> G>Asymmetric]
    G --> H{Diamond}
    H --> I{{Hexagon}}
    I --> J[/Parallelogram/]
    J --> K[\Parallelogram Alt\]
    K --> L[/Trapezoid\]
    L --> M[\Trapezoid Alt/]
サブグラフ
flowchart TB
    subgraph Frontend
        A[React App] --> B[Redux Store]
        B --> C[Components]
    end

    subgraph Backend
        D[API Gateway] --> E[Auth Service]
        D --> F[User Service]
        D --> G[Order Service]
    end

    subgraph Database
        H[(PostgreSQL)]
        I[(Redis Cache)]
    end

    C --> D
    E --> H
    F --> H
    G --> H
    E --> I
スタイル付きフローチャート
flowchart TD
    A[Request] --> B{Rate Limited?}
    B -->|Yes| C[429 Too Many Requests]
    B -->|No| D{Authenticated?}
    D -->|No| E[401 Unauthorized]
    D -->|Yes| F{Authorized?}
    F -->|No| G[403 Forbidden]
    F -->|Yes| H[Process Request]
    H --> I[200 OK]

    style A fill:#e1f5fe
    style I fill:#c8e6c9
    style C fill:#ffcdd2
    style E fill:#ffcdd2
    style G fill:#ffcdd2

    classDef error fill:#ffcdd2,stroke:#c62828
    classDef success fill:#c8e6c9,stroke:#2e7d32
    class C,E,G error
    class I success

シーケンス図

API リクエストのフロー
sequenceDiagram
    autonumber
    actor User
    participant Client
    participant API
    participant Auth
    participant DB

    User->>Client: Click Login
    Client->>API: POST /auth/login
    API->>Auth: Validate credentials
    Auth->>DB: Query user
    DB-->>Auth: User data
    Auth-->>API: JWT token
    API-->>Client: 200 OK + token
    Client->>Client: Store token
    Client-->>User: Show dashboard
ループと条件を含む場合
sequenceDiagram
    participant C as Client
    participant S as Server
    participant Q as Queue
    participant W as Worker

    C->>S: Submit job
    S->>Q: Enqueue job
    S-->>C: Job ID

    loop Poll status
        C->>S: GET /jobs/{id}
        S-->>C: Status: processing
    end

    W->>Q: Dequeue job
    W->>W: Process job

    alt Success
        W->>S: Job completed
        S-->>C: Status: completed
    else Failure
        W->>S: Job failed
        S-->>C: Status: failed
    end
ノートとアクティベーションを含む場合
sequenceDiagram
    participant U as User
    participant F as Frontend
    participant B as Backend
    participant D as Database

    Note over U,D: User Registration Flow

    U->>+F: Fill registration form
    F->>F: Validate input
    F->>+B: POST /api/users

    activate B
    B->>B: Hash password
    B->>+D: INSERT user
    D-->>-B: User created
    B->>B: Generate verification email
    deactivate B

    B-->>-F: 201 Created
    F-->>-U: Success message

    Note right of B: Email sent async

エンティティ関係図

データベーススキーマ
erDiagram
    USERS ||--o{ ORDERS : places
    USERS ||--o{ REVIEWS : writes
    USERS {
        uuid id PK
        string email UK
        string password_hash
        string name
        timestamp created_at
        timestamp updated_at
    }

    ORDERS ||--|{ ORDER_ITEMS : contains
    ORDERS {
        uuid id PK
        uuid user_id FK
        decimal total
        string status
        timestamp created_at
    }

    PRODUCTS ||--o{ ORDER_ITEMS : "ordered in"
    PRODUCTS ||--o{ REVIEWS : "reviewed in"
    PRODUCTS {
        uuid id PK
        string name
        text description
        decimal price
        int stock
        uuid category_id FK
    }

    ORDER_ITEMS {
        uuid id PK
        uuid order_id FK
        uuid product_id FK
        int quantity
        decimal price
    }

    CATEGORIES ||--o{ PRODUCTS : contains
    CATEGORIES {
        uuid id PK
        string name
        uuid parent_id FK
    }

    REVIEWS {
        uuid id PK
        uuid user_id FK
        uuid product_id FK
        int rating
        text content
        timestamp created_at
    }

状態図

注文の状態マシン
stateDiagram-v2
    [*] --> Pending: Order created

    Pending --> Processing: Payment received
    Pending --> Cancelled: User cancels

    Processing --> Shipped: Items dispatched
    Processing --> Cancelled: Out of stock

    Shipped --> Delivered: Package delivered
    Shipped --> Returned: Return requested

    Delivered --> Returned: Return requested
    Delivered --> [*]: Complete

    Returned --> Refunded: Refund processed
    Refunded --> [*]

    Cancelled --> [*]

    note right of Processing
        Inventory checked
        and reserved
    end note
複合状態を含む場合
stateDiagram-v2
    [*] --> Idle

    state Active {
        [*] --> Running
        Running --> Paused: pause
        Paused --> Running: resume
        Running --> [*]: complete
    }

    Idle --> Active: start
    Active --> Idle: stop
    Active --> Error: error
    Error --> Idle: reset

クラス図

TypeScript クラス
classDiagram
    class User {
        +string id
        +string email
        +string name
        -string passwordHash
        +login(password: string) boolean
        +updateProfile(data: ProfileData) void
        +getOrders() Order[]
    }

    class Order {
        +string id
        +string userId
        +OrderItem[] items
        +OrderStatus status
        +decimal total
        +addItem(product: Product, qty: number) void
        +removeItem(itemId: string) void
        +checkout() boolean
    }

    class OrderItem {
        +string id
        +string productId
        +number quantity
        +decimal price
    }

    class Product {
        +string id
        +string name
        +decimal price
        +number stock
        +reserve(qty: number) boolean
        +release(qty: number) void
    }

    User "1" --> "*" Order: places
    Order "1" --> "*" OrderItem: contains
    OrderItem "*" --> "1" Product: references

    class OrderStatus {
        <<enumeration>>
        PENDING
        PROCESSING
        SHIPPED
        DELIVERED
        CANCELLED
    }

アーキテクチャ図

C4 コンテキスト図
flowchart TB
    subgraph boundary[System Boundary]
        system[E-commerce Platform]
    end

    user[fa:fa-user Customer]
    admin[fa:fa-user-cog Admin]

    payment[fa:fa-credit-card Payment Provider]
    shipping[fa:fa-truck Shipping API]
    email[fa:fa-envelope Email Service]

    user --> system
    admin --> system
    system --> payment
    system --> shipping
    system --> email

    style system fill:#438dd5,color:#fff
    style user fill:#08427b,color:#fff
    style admin fill:#08427b,color:#fff
    style payment fill:#999,color:#fff
    style shipping fill:#999,color:#fff
    style email fill:#999,color:#fff
マイクロサービスアーキテクチャ
flowchart TB
    subgraph Client Layer
        web[Web App]
        mobile[Mobile App]
    end

    subgraph API Layer
        gateway[API Gateway]
        auth[Auth Service]
    end

    subgraph Services
        users[User Service]
        orders[Order Service]
        products[Product Service]
        payments[Payment Service]
        notifications[Notification Service]
    end

    subgraph Data Layer
        pg1[(Users DB)]
        pg2[(Orders DB)]
        pg3[(Products DB)]
        redis[(Redis Cache)]
        kafka[Kafka]
    end

    web --> gateway
    mobile --> gateway
    gateway --> auth
    gateway --> users
    gateway --> orders
    gateway --> products

    users --> pg1
    orders --> pg2
    products --> pg3

    users --> redis
    products --> redis

    orders --> kafka
    payments --> kafka
    notifications --> kafka

    kafka --> payments
    kafka --> notifications

Git グラフ

gitGraph
    commit id: "Initial commit"
    branch develop
    checkout develop
    commit id: "Setup project"
    commit id: "Add components"
    branch feature/auth
    checkout feature/auth
    commit id: "Add login"
    commit id: "Add signup"
    checkout develop
    merge feature/auth id: "Merge auth"
    branch feature/dashboard
    checkout feature/dashboard
    commit id: "Add dashboard"
    checkout develop
    merge feature/dashboard id: "Merge dashboard"
    checkout main
    merge develop id: "Release v1.0" tag: "v1.0.0"

円グラフ

pie showData
    title Technology Stack Distribution
    "TypeScript" : 45
    "React" : 25
    "Node.js" : 15
    "PostgreSQL" : 10
    "Other" : 5

タイムライン

timeline
    title Project Roadmap 2024
    section Q1
        January : Project Kickoff
                : Team Setup
        February : MVP Development
        March : Alpha Release
    section Q2
        April : Beta Testing
        May : Bug Fixes
        June : Public Launch
    section Q3
        July : Feature Expansion
        August : Performance Optimization
        September : Mobile App
    section Q4
        October : Enterprise Features
        November : International Expansion
        December : Year Review

マインドマップ

mindmap
    root((Project))
        Frontend
            React
            Next.js
            Tailwind CSS
        Backend
            Node.js
            Express
            GraphQL
        Database
            PostgreSQL
            Redis
            MongoDB
        DevOps
            Docker
            Kubernetes
            CI/CD
        Testing
            Jest
            Cypress
            Playwright

ベストプラクティス

  1. シンプルに保つ：図が混み合いすぎないようにします
  2. サブグラフを使用する：関連する要素をグループ化します
  3. 一貫したスタイルにする：クラススタイルを定義します
  4. 方向が重要です：プロセスには LR、階層には TD を使用します
  5. ノートを追加する：複雑な部分を明確にします
  6. アイコンを使用する：Font Awesome と統合します
  7. バージョン管理する：図もコードです
  8. 目的を記録する：タイトルと説明を追加します

出力チェックリスト

すべての Mermaid 図には、次の項目を含めてください。

  • 適切な図の種類
  • 明確なノードラベル
  • 論理的なフローの方向
  • グループ化のためのサブグラフ
  • 一貫したスタイル
  • 意味のある接続
  • 必要に応じたノート
  • タイトルまたは説明
  • 適切な構文検証
  • 想定されるサイズで読みやすいこと

コメント

Markdown 対応