diagram-creator

ダイアグラム作成スキル

概要

Mermaid や PlantUML などのテキストベースのダイアグラムツールを使用して、プロフェッショナルなダイアグラムを作成します。これらのダイアグラムは、ドキュメント、プレゼンテーション、開発ツールでレンダリングできます。

できること：

• フローチャートやプロセス図の作成
• シーケンス図の生成
• アーキテクチャ図やシステム図の構築
• ER（エンティティ・リレーションシップ）図の設計
• クラス図や UML の作成
• 組織図の生成
• ガントチャートやタイムラインの作成

できないこと：

• 画像の直接レンダリング（Mermaid Live Editor などを使用してください）
• ピクセル単位で正確なカスタムデザインの作成
• ラスター画像の生成

---

使い方

ステップ 1：ダイアグラムの説明

以下を教えてください：

• 視覚化したいプロセス／システム／概念
• 必要なダイアグラムの種類
• 詳細度
• 対象読者

ステップ 2：形式の選択

• Mermaid：ウェブ、Markdown、GitHub に最適
• PlantUML：UML や複雑なダイアグラムに最適
• ASCII：シンプルで、幅広く互換性があります
• D2：モダンでスタイリッシュなダイアグラム

ステップ 3：スタイルの指定

• 色とテーマ
• 方向（上から下、左から右）
• 詳細度

---

ダイアグラムの種類

1. フローチャート／プロセス図

用途：ビジネスプロセス、決定木、ワークフロー

flowchart TD
    A[Start] --> B{Decision?}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E

2. シーケンス図

用途：API 呼び出し、ユーザーインタラクション、システム間の通信

sequenceDiagram
    participant U as User
    participant A as App
    participant S as Server
    participant D as Database
    
    U->>A: Click Login
    A->>S: POST /auth/login
    S->>D: Query user
    D-->>S: User data
    S-->>A: JWT token
    A-->>U: Redirect to dashboard

3. アーキテクチャ図

用途：システム設計、インフラストラクチャ、コンポーネント間の関係

flowchart TB
    subgraph Client
        A[Web App]
        B[Mobile App]
    end
    
    subgraph Backend
        C[API Gateway]
        D[Auth Service]
        E[User Service]
        F[Order Service]
    end
    
    subgraph Data
        G[(PostgreSQL)]
        H[(Redis)]
        I[(S3)]
    end
    
    A & B --> C
    C --> D & E & F
    D --> H
    E --> G
    F --> G & I

4. エンティティ・リレーションシップ図

用途：データベース設計、データモデル

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains
    PRODUCT ||--o{ LINE_ITEM : "ordered in"
    
    CUSTOMER {
        int id PK
        string name
        string email
    }
    ORDER {
        int id PK
        date created_at
        int customer_id FK
    }
    PRODUCT {
        int id PK
        string name
        decimal price
    }

5. クラス図

用途：OOP 設計、コード構造

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
    }
    class Dog {
        +String breed
        +bark()
    }
    class Cat {
        +boolean indoor
        +meow()
    }
    
    Animal <|-- Dog
    Animal <|-- Cat

6. 状態図

用途：状態マシン、ステータスのワークフロー

stateDiagram-v2
    [*] --> Draft
    Draft --> Submitted: Submit
    Submitted --> InReview: Assign reviewer
    InReview --> Approved: Approve
    InReview --> Rejected: Reject
    Rejected --> Draft: Revise
    Approved --> [*]

7. ガントチャート

用途：プロジェクトのタイムライン、スケジュール

gantt
    title Project Timeline
    dateFormat  YYYY-MM-DD
    
    section Planning
    Requirements    :a1, 2024-01-01, 14d
    Design          :a2, after a1, 21d
    
    section Development
    Backend         :b1, after a2, 30d
    Frontend        :b2, after a2, 30d
    
    section Testing
    QA Testing      :c1, after b1, 14d
    UAT             :c2, after c1, 7d

8. マインドマップ

用途：ブレインストーミング、概念の整理

mindmap
    root((Project))
        Features
            Feature A
            Feature B
            Feature C
        Team
            Frontend
            Backend
            Design
        Timeline
            Q1
            Q2
            Q3

9. Git グラフ

用途：ブランチの可視化、git のワークフロー

gitGraph
    commit
    commit
    branch feature
    checkout feature
    commit
    commit
    checkout main
    merge feature
    commit

---

出力形式

# Diagram: [Name]

**Type**: [Flowchart / Sequence / Architecture / etc.]
**Tool**: [Mermaid / PlantUML]
**Purpose**: [What it illustrates]

---

## Diagram Code

### Mermaid

```mermaid
[Mermaid code here]

PlantUML（代替）

[PlantUML code here]

---

レンダリング手順

1. Mermaid Live Editor：https://mermaid.live/
2. GitHub：Markdown ファイルに直接貼り付けます
3. VS Code：Mermaid 拡張機能をインストールします
4. Notion：mermaid タイプのコードブロックを使用します

---

カスタマイズオプション

カラーテーマ

冒頭に追加します：

%%{init: {'theme':'forest'}}%%

使用可能なテーマ：default、forest、dark、neutral

方向

• TB（上から下）
• BT（下から上）
• LR（左から右）
• RL（右から左）

---

メモ

• [ダイアグラムに関するメモ]
• [設定した前提]

---

## PlantUML Examples

### Sequence Diagram
```plantuml
@startuml
actor User
participant "Web App" as App
participant "API Server" as API
database "Database" as DB

User -> App: Login request
App -> API: POST /auth/login
API -> DB: SELECT user
DB --> API: User record
API --> App: JWT token
App --> User: Redirect to dashboard
@enduml

コンポーネント図

@startuml
package "Frontend" {
    [React App]
    [Mobile App]
}

package "Backend" {
    [API Gateway]
    [Auth Service]
    [User Service]
}

database "PostgreSQL" as DB

[React App] --> [API Gateway]
[Mobile App] --> [API Gateway]
[API Gateway] --> [Auth Service]
[API Gateway] --> [User Service]
[User Service] --> DB
@enduml

---

より良いダイアグラムを作成するためのヒント

1. シンプルに保つ - 要素を詰め込みすぎない
2. 一貫した命名を使う - 明確で説明的なラベルを付ける
3. 関連項目をグループ化する - サブグラフ／パッケージを使う
4. 適切な種類を選ぶ - 概念に合ったダイアグラムを選ぶ
5. 対象読者を考慮する - 技術者向けかビジネス向けか
6. 色は控えめに使う - 強調する場合にのみ使用する
7. 凡例を追加する - 記号や色を使う場合
8. 階層を維持する - 上から下、または左から右への流れ

---

レンダリングツール

ツール	URL	最適な用途
Mermaid Live	mermaid.live	素早い編集
PlantUML Server	plantuml.com	PlantUML のレンダリング
Draw.io	draw.io	手動編集
Excalidraw	excalidraw.com	手描き風のスタイル
Lucidchart	lucidchart.com	プロフェッショナルなダイアグラム

---

制限事項

• 画像を直接レンダリングできません
• 複雑なレイアウトは手動で調整が必要な場合があります
• デザインツールと比べてスタイル設定に制限があります
• 一部のダイアグラムの種類は、すべてのツールでサポートされているわけではありません

---

Claude Office Skills コミュニティによって作成されました。コントリビューションを歓迎します！