第2回：Mermaid実践編 - 図解で伝えるAI概念

flowchart TD
    User([ユーザー]) --> Claude[Claude AIアシスタント]
    Claude --> MCP{Model Context Protocol}
    MCP -->|データ取得| ExternalSources[(外部データソース)]
    MCP -->|APIコール| Tools[外部ツール]
    MCP -->|ファイル読込| LocalFiles[(ローカルファイル)]
    
    ExternalSources --> MCP
    Tools --> MCP
    LocalFiles --> MCP
    
    MCP --> Claude
    Claude --> Response([応答生成])

flowchart TB
    subgraph "ローカル環境"
        Host["MCPクライアントを持つホスト\n(Claude、IDE、ツールなど)"]
        S1["MCPサーバー A"]
        S2["MCPサーバー B"]
        S3["MCPサーバー C"]
        
        Host -->|MCPプロトコル| S1
        Host -->|MCPプロトコル| S2
        Host -->|MCPプロトコル| S3
    end
    
    subgraph "外部環境"
        D3[(リモートサービス)]
    end
    
    D1[(ローカルデータソース1)]
    D2[(ローカルデータソース2)]
    
    S1 --> D1
    S2 --> D2
    S3 -->|Web API| D3

flowchart LR
    A[標準ノード] --> B(丸括弧ノード)
    C([角丸四角ノード]) --> D[[二重角括弧ノード]]
    E[(データベース)] --> F((円ノード))
    G>非対称ノード] --> H{ダイヤモンド}
    I --> J[/平行四辺形/]
    
    K[AIモデル] -->|訓練| L[推論エンジン]
    M[入力] -.->|処理中| N[出力]
    O[ユーザー] ==>|リクエスト| P[サーバー]
    
    style K fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff
    style L fill:#bfb,stroke:#6f6,stroke-width:2px
    linkStyle 7 stroke:#ff3,stroke-width:4px,color:red

sequenceDiagram
    actor User as ユーザー
    participant Claude as Claude AI
    participant MCP as Model Context Protocol
    participant DB as 外部データベース
    
    User->>+Claude: 質問を入力
    Claude->>+MCP: コンテキスト情報を要求
    MCP->>+DB: 関連データをクエリ
    DB-->>-MCP: データ結果を返す
    MCP-->>-Claude: コンテキスト付きデータを提供
    Claude-->>-User: 情報を統合して回答
    
    Note over Claude,MCP: MCPを通じて外部データにアクセス

sequenceDiagram
    actor User as ユーザー
    participant Claude as Claude AI
    participant MCP as Model Context Protocol
    participant Tool as 外部ツール
    
    User->>Claude: 「今日の天気を教えて」
    
    alt MCPでコンテキスト情報を取得
        Claude->>MCP: 位置情報の要求
        MCP->>User: 位置情報へのアクセス許可を要求
        User->>MCP: 許可を与える
        MCP->>Tool: 天気APIにアクセス
        Tool-->>MCP: 天気データ
        MCP-->>Claude: 天気情報を提供
    else コンテキスト情報なし
        Claude-->>User: 位置情報が必要である旨を伝える
    end
    
    Claude->>User: 天気情報を含む回答
    
    loop フォローアップの質問
        User->>Claude: 追加質問
        Claude-->>User: 追加回答
    end

classDiagram
    class MCPClient {
        +connect()
        +sendRequest()
        +receiveResponse()
    }
    
    class MCPServer {
        -dataProviders[]
        +registerProvider()
        +handleRequest()
        +sendResponse()
    }
    
    class DataProvider {
        <<interface>>
        +getData()
        +hasAccessTo()
    }
    
    class DatabaseProvider {
        -connection
        +getData()
        +hasAccessTo()
    }
    
    class APIProvider {
        -endpoint
        -credentials
        +getData()
        +hasAccessTo()
    }
    
    class FileSystemProvider {
        -rootPath
        +getData()
        +hasAccessTo()
    }
    
    MCPClient --> MCPServer: リクエスト送信
    MCPServer *-- DataProvider: 利用する
    DataProvider <|-- DatabaseProvider: 実装
    DataProvider <|-- APIProvider: 実装
    DataProvider <|-- FileSystemProvider: 実装

classDiagram
    class AIAssistant {
        -model
        -context
        +process(input)
        +generateResponse()
    }
    
    class MCPManager {
        -servers[]
        +connectServer(server)
        +requestData(query)
        +processResults()
    }
    
    class MCPServer {
        -providers[]
        +registerProvider(provider)
        +handleRequest(query)
    }
    
    class User {
        -preferences
        +sendQuery()
        +receiveResponse()
    }
    
    User "1" -- "1..*" AIAssistant: 利用する
    AIAssistant "1" -- "1" MCPManager: データ取得
    MCPManager "1" -- "n" MCPServer: 管理する
    MCPServer "1" -- "n" DataProvider: 利用する
    
    note for AIAssistant "Claude, GPT-4などの大規模言語モデル"
    note for MCPManager "複数のMCPサーバーを統合管理"

gantt
    title MCPシステム実装プロジェクト
    dateFormat  YYYY-MM-DD
    
    section 計画フェーズ
    要件定義           :a1, 2025-04-01, 10d
    アーキテクチャ設計 :a2, after a1, 15d
    
    section 開発フェーズ
    MCPクライアント実装 :b1, after a2, 20d
    MCPサーバー実装    :b2, after a2, 25d
    データプロバイダー実装 :b3, after b2, 15d
    
    section テストフェーズ
    単体テスト         :c1, after b1, 10d
    統合テスト         :c2, after b3, 15d
    ユーザーテスト     :c3, after c2, 10d
    
    section デプロイフェーズ
    ステージング環境準備 :d1, after c3, 5d
    本番環境デプロイ    :d2, after d1, 3d
    運用監視設定       :d3, after d2, 7d

flowchart LR
    AI((AIテクノロジー)) -->|進化| Challenge[人材に求められる\n新しいスキル]
    Challenge --> 3C{3Cスキル}
    
    subgraph 人間特有の価値
        3C -->|1| Communication[コミュニケーション]
        3C -->|2| Confidence[コンフィデンス]
        3C -->|3| Consciousness[コンシャスネス]
    end
    
    Communication --> C1[感情・ニュアンスの理解]
    Communication --> C2[共感力]
    Communication --> C3[空気を読む力]
    
    Confidence --> F1[信頼構築能力]
    Confidence --> F2[一貫した行動]
    Confidence --> F3[透明性のある意思決定]
    
    Consciousness --> S1[目的意識]
    Consciousness --> S2[価値観の明確化]
    Consciousness --> S3[主体的コントロール]
    
    AI -.->|代替不可| 人間特有の価値
    
    style AI fill:#f9f,stroke:#333,stroke-width:2px
    style 3C fill:#bbf,stroke:#33f,stroke-width:3px
    style Communication fill:#dfd,stroke:#3a3,stroke-width:1px
    style Confidence fill:#fdd,stroke:#d33,stroke-width:1px
    style Consciousness fill:#ddf,stroke:#33d,stroke-width:1px