graph TD
    A[🏁 システム起動したい] --> B[📱 Jupyter Notebook<br/>AUTOCREATE_System_Test_Guide.ipynb]
    B --> C[🏥 ヘルスチェック実行]
    C --> D{✅ 全て正常？}
    
    D -->|はい| E[🌐 http://localhost:7860<br/>ブラウザでアクセス]
    D -->|いいえ| F[🛠️ トラブルシューティング<br/>該当セルを実行]
    
    F --> G[🔧 自動修復実行]
    G --> C
    
    E --> H[🎯 8つのGradioタブ<br/>利用開始]
    
    style A fill:#e1f5fe
    style B fill:#fff3e0
    style H fill:#c8e6c9
    style F fill:#ffcdd2

graph TB
    subgraph "👤 ユーザー"
        USER[🧑‍💻 開発者・利用者]
        BROWSER[🌐 ブラウザ]
    end
    
    subgraph "🖥️ インターフェース層"
        GRADIO_UI[🎯 Gradio WebUI<br/>8つのタブ統合]
        API_DOCS[📋 FastAPI Swagger<br/>/docs エンドポイント]
        VNC_UI[🖥️ noVNC Desktop<br/>:6080 GUI環境]
    end
    
    subgraph "⚙️ アプリケーション層"
        FASTAPI[🚀 FastAPI Core]
        ASGI[🔌 ASGI Server<br/>mysite/asgi.py]
        API_ROUTER[🛣️ API Routes<br/>routes/api.py]
    end
    
    subgraph "🎯 Gradioコンポーネント群"
        direction TB
        C1[🤖 AIチャット]
        C2[📁 ファイル管理]
        C3[🎯 GitHub Issue自動生成]
        C4[🌐 HTML表示]
        C5[🔧 OpenInterpreter]
        C6[🧠 記憶復元]
        C7[📊 GitHub Issueシステム生成]
        C8[📈 システム監視]
    end
    
    subgraph "💾 データ・ストレージ層"
        DB[🗄️ SQLite Database]
        FILES[📂 ファイルストレージ]
        LOGS[📊 ログ・履歴]
    end
    
    USER --> BROWSER
    BROWSER --> GRADIO_UI
    BROWSER --> API_DOCS
    BROWSER --> VNC_UI
    
    GRADIO_UI --> ASGI
    API_DOCS --> FASTAPI
    ASGI --> FASTAPI
    FASTAPI --> API_ROUTER
    
    ASGI --> C1
    ASGI --> C2
    ASGI --> C3
    ASGI --> C4
    ASGI --> C5
    ASGI --> C6
    ASGI --> C7
    ASGI --> C8
    
    C1 --> DB
    C2 --> FILES
    C6 --> DB
    C8 --> LOGS
    API_ROUTER --> DB
    
    style USER fill:#e3f2fd
    style GRADIO_UI fill:#f3e5f5
    style DB fill:#fff3e0
    style VNC_UI fill:#e8f5e8

graph TD
    START[🤔 何をしたい？] --> PURPOSE{目的は？}
    
    PURPOSE -->|🚀 アプリ起動| APP_FLOW[アプリケーション起動フロー]
    PURPOSE -->|🧪 テスト実行| TEST_FLOW[テスト実行フロー]
    PURPOSE -->|🐳 GUI環境| GUI_FLOW[GUI・Docker環境]
    PURPOSE -->|🛠️ システム管理| SYSTEM_FLOW[システム管理]
    
    APP_FLOW --> A1[make stop-port<br/>🔄 ポートクリア]
    A1 --> A2[make app<br/>🚀 通常起動]
    A2 --> A3[make dev<br/>🔧 開発モード]
    A3 --> A4[make debug<br/>🐛 デバッグモード]
    
    TEST_FLOW --> T1[make test<br/>🧪 基本テスト]
    T1 --> T2[make ci-quick<br/>⚡ クイックCI]
    T2 --> T3[make ci-full<br/>🎯 フルCI]
    T3 --> T4[make ci-comprehensive<br/>📊 包括テスト]
    
    GUI_FLOW --> G1[make gui<br/>🖥️ noVNC起動]
    G1 --> G2[make gui-auto<br/>🚀 自動起動+ブラウザ]
    G2 --> G3[make gui-logs<br/>📊 ログ確認]
    G3 --> G4[make gui-stop<br/>✋ GUI停止]
    
    SYSTEM_FLOW --> S1[make clean<br/>🧹 クリーンアップ]
    S1 --> S2[make requirements<br/>📦 依存関係インストール]
    S2 --> S3[make install<br/>🔧 完全インストール]
    
    style START fill:#e1f5fe
    style A2 fill:#c8e6c9
    style T3 fill:#fff3e0
    style G1 fill:#f3e5f5
    style S3 fill:#e8f5e8

graph TD
    ERROR[🚨 問題発生！] --> NOTEBOOK[📓 テストノートブック<br/>AUTOCREATE_System_Test_Guide.ipynb]
    NOTEBOOK --> HEALTH[🏥 ヘルスチェック実行]
    
    HEALTH --> RESULT{結果は？}
    
    RESULT -->|✅ 全て正常| MYSTERY[🤔 環境固有の問題<br/>詳細調査が必要]
    RESULT -->|⚠️ 一部問題| PARTIAL[🔧 部分的修復]
    RESULT -->|❌ 重大問題| CRITICAL[🚨 重大問題対応]
    
    PARTIAL --> PORT_ISSUE{ポート問題？}
    PORT_ISSUE -->|はい| PORT_FIX[🔄 make stop-port]
    PORT_ISSUE -->|いいえ| DB_ISSUE{DB問題？}
    
    DB_ISSUE -->|はい| DB_FIX[🛠️ データベース修復セル実行]
    DB_ISSUE -->|いいえ| FILE_ISSUE{ファイル不足？}
    
    FILE_ISSUE -->|はい| RESTORE[🔄 ファイル復元<br/>Gitから再取得]
    FILE_ISSUE -->|いいえ| API_ISSUE{API問題？}
    
    API_ISSUE -->|はい| APP_RESTART[🔄 make app<br/>アプリ再起動]
    API_ISSUE -->|いいえ| GRADIO_ISSUE{Gradio問題？}
    
    GRADIO_ISSUE -->|はい| COMPONENT_CHECK[🎯 個別コンポーネント確認]
    
    CRITICAL --> FULL_RESTORE[🔄 完全復元<br/>プロジェクト再構築]
    
    PORT_FIX --> RETEST[🔄 再テスト]
    DB_FIX --> RETEST
    RESTORE --> RETEST
    APP_RESTART --> RETEST
    COMPONENT_CHECK --> RETEST
    FULL_RESTORE --> RETEST
    
    RETEST --> HEALTH
    
    MYSTERY --> MANUAL[📞 手動調査<br/>ログ・詳細確認]
    
    style ERROR fill:#ffcdd2
    style NOTEBOOK fill:#fff3e0
    style RETEST fill:#c8e6c9
    style CRITICAL fill:#ff8a80