静的な画像を超えて：Mermaid と AI ツールを活用した図をコードとして扱う力の解放

gitGraph
    commit id: "初期アーキテクチャ"
    commit id: "ユーザー・サービスを追加"
    branch feature/order-service
    commit id: "注文サービス v1"
    commit id: "決済ゲートウェイを追加"
    checkout main
    merge feature/order-service
    commit id: "APIゲートウェイを更新"

flowchart LR
    A[開発者がコードをプッシュ] --> B[CIパイプラインを実行]
    B --> C[テストを実行]
    B --> D[Mermaid図をレンダリング]
    D --> E{構文が正しいか？}
    E -->|はい| F[ドキュメントにアップロード]
    E -->|いいえ| G[ビルド失敗＆チームに警告]
    F --> H[アプリケーションをデプロイ]
    G --> I[開発者が構文を修正]
    I --> A

flowchart TB
    subgraph "クライアント層"
        MobileApp[モバイルアプリ]
        WebApp[Webアプリケーション]
    end

    subgraph "APIゲートウェイ"
        Gateway[APIゲートウェイ]
    end

    subgraph "マイクロサービス"
        UserSvc[ユーザーサービス]
        OrderSvc[注文サービス]
        ProductSvc[製品サービス]
        PaymentSvc[支払いサービス]
    end

    subgraph "データ層"
        UserDB[(ユーザーDB)]
        OrderDB[(注文DB)]
        ProductDB[(製品DB)]
        Redis[(Redisキャッシュ)]
    end

    subgraph "外部サービス"
        Stripe[Stripe決済]
        EmailAPI[メールAPI]
    end

    MobileApp --> Gateway
    WebApp --> Gateway
    Gateway --> UserSvc
    Gateway --> OrderSvc
    Gateway --> ProductSvc
    Gateway --> PaymentSvc

    UserSvc --> UserDB
    UserSvc --> Redis
    OrderSvc --> OrderDB
    OrderSvc --> Redis
    ProductSvc --> ProductDB
    ProductSvc --> Redis

    PaymentSvc --> Stripe
    OrderSvc --> EmailAPI
    PaymentSvc --> EmailAPI

sequenceDiagram
    autonumber
    participant User
    participant Frontend
    participant AuthSvc as 認証サービス
    participant UserDB as ユーザーデータベース
    participant Cache as Redisキャッシュ
    participant EmailSvc as メールサービス

    User->>Frontend: 認証情報入力
    Frontend->>AuthSvc: POST /login (メールアドレス、パスワード)
    AuthSvc->>UserDB: メールアドレスでユーザーを照会
    UserDB-->>AuthSvc: ハッシュ化されたパスワードとユーザー情報を返却
    AuthSvc->>AuthSvc: bcryptでパスワードを検証
    
    alt 正しい認証情報
        AuthSvc->>AuthSvc: JWTトークンを生成
        AuthSvc->>Cache: セッションを保存（キー：user_id、有効期限：1時間）
        AuthSvc-->>Frontend: 200 OK + JWTトークン
        Frontend-->>User: ダッシュボードにリダイレクト
    else 不正な認証情報
        AuthSvc->>EmailSvc: ログイン失敗アラートを発動
        AuthSvc-->>Frontend: 401 Unauthorized
        Frontend-->>User: エラーメッセージを表示
    end
    
    Note over AuthSvc,EmailSvc: 5回の失敗後、アカウントを15分間ロック

classDiagram
    class VPC {
        +string cidr_block
        +string region
        +createSubnet()
        +deleteSubnet()
    }

    class Subnet {
        +string availability_zone
        +string cidr_block
        +boolean is_public
        +attachRouteTable()
    }

    class EC2Instance {
        +string instance_type
        +string ami_id
        +int storage_gb
        +start()
        +stop()
        +reboot()
    }

    class RDSDatabase {
        +string engine
        +string version
        +int storage_gb
        +boolean multi_az
        +takeSnapshot()
        +restoreFromSnapshot()
    }

    class S3Bucket {
        +string bucket_name
        +string region
        +boolean versioning_enabled
        +uploadFile()
        +downloadFile()
    }

    class IAMRole {
        +string role_name
        +string policy_document
        +attachPolicy()
        +detachPolicy()
    }

    VPC "1" --> "*" Subnet
    Subnet "1" --> "*" EC2Instance
    Subnet "1" --> "0..1" RDSDatabase
    VPC "1" --> "0..*" S3Bucket
    EC2Instance --> IAMRole
    RDSDatabase --> IAMRole

stateDiagram-v2
    [*] --> カート: ユーザーがアイテムを追加
    カート --> チェックアウト: ユーザーがチェックアウトへ進む
    
    チェックアウト --> 支払い保留中: ユーザーが注文を提出
    支払い保留中 --> 支払い処理中: 支払いゲートウェイを開始
    
    支払い処理中 --> 支払い完了: 支払い成功
    支払い処理中 --> 支払い失敗: 支払いが拒否された
    
    支払い失敗 --> チェックアウト: ユーザーが支払いを再試行
    支払い失敗 --> [*]: ユーザーがカートを放棄
    
    支払い完了 --> 注文確認済み: 確認メールを送信
    注文確認済み --> 処理準備中: 倉庫に割り当て
    
    処理準備中 --> 発送済み: 運送業者に引き渡し
    発送済み --> 途中配送中: 運送業者が引き取り
    
    途中配送中 --> 配達完了: 配達が確認された
    配達完了 --> レビュー依頼済み: ユーザーにレビューを依頼
    
    レビュー依頼済み --> [*]: ユーザーがレビューを提出
    配達完了 --> 返金依頼中: ユーザーが返金を申請
    
    返金依頼中 --> 返金承認済み: サポートが承認
    返金承認済み --> 返金処理済み: 金額が返還
    返金処理済み --> [*]: 注文が完了
    
    state "高リスク詐欺検査" as フラウドチェック {
        [*] --> スコア確認
        スコア確認 --> 低リスク: スコア < 50
        スコア確認 --> 高リスク: スコア >= 50
        高リスク --> 手動レビュー: チームにフラグを立てる
        手動レビュー --> 低リスク: 承認済み
        手動レビュー --> 支払い失敗: 拒否済み
    }
    
    支払い保留中 --> フラウドチェック: リスク評価がトリガーされた
    フラウドチェック --> 支払い処理中: 低リスク

gitGraph
    commit id: "スプリント計画" type: HIGHLIGHT
    
    branch スプリント-1
    commit id: "ユーザーストーリー #101: ログインページ"
    commit id: "ユーザーストーリー #102: ユーザー登録"
    
    branch バグ修正/ホットフィックス
    commit id: "ホットフィックス: 認証トークンの有効期限切れ"
    checkout スプリント-1
    merge バグ修正/ホットフィックス
    
    commit id: "ユーザーストーリー #103: パスワードリセット"
    
    checkout main
    merge スプリント-1 tag: "v1.0.0"
    
    branch スプリント-2
    commit id: "機能 #201: ショッピングカート"
    commit id: "機能 #202: チェックアウトフロー"
    
    branch 実験/aiレコメンデーション
    commit id: "POC: MLレコメンデーションエンジン"
    
    checkout スプリント-2
    commit id: "機能 #203: 注文履歴"
    
    checkout main
    merge スプリント-2 tag: "v2.0.0"
    
    commit id: "リリースノート: スプリント1および2完了"

flowchart LR
    A[フロントエンド] --> B(APIゲートウェイ)
    B --> C[ユーザー サービス]
    C --> D[(データベース)]
    D --> E[キャッシュ]

flowchart TD
    Start([ユーザーがログインを試行]) --> EnterCreds[メールアドレスとパスワードを入力]
    EnterCreds --> Validate{認証情報の検証}
    Validate -->|有効| Dashboard[ダッシュボードにリダイレクト]
    Validate -->|無効| CheckAttempts{試行回数 < 3}
    CheckAttempts -->|はい| Increment[試行回数カウンターを増加]
    Increment --> ShowError[エラーメッセージを表示]
    ShowError --> EnterCreds
    CheckAttempts -->|いいえ| LockAccount[アカウントを15分間ロック]
    LockAccount --> SendAlert[セキュリティアラートメールを送信]
    SendAlert --> End([プロセス終了])
    Dashboard --> End

sequenceDiagram
    actor ユーザー
    participant フロントエンド
    participant バックエンド
    participant データベース
    
    ユーザー->>フロントエンド: ログインをクリック
    フロントエンド->>バックエンド: POST /login
    バックエンド->>データベース: SELECT user
    データベース-->>バックエンド: ユーザーデータ
    バックエンド-->>フロントエンド: JWTトークン
    フロントエンド-->>ユーザー: ダッシュボードを表示