# アーキテクチャ構成図

## システム全体構成図

```mermaid
flowchart TB
    subgraph HostApp["Host Application"]
        AppLoop["Application Loop"]
    end

    subgraph ImGuiCore["Dear ImGui Core"]
        subgraph PublicAPI["Public API Layer"]
            ImGuiNamespace["ImGui:: Namespace<br/>(imgui.h)"]
        end

        subgraph CoreLayer["Core Layer"]
            Context["ImGuiContext"]
            IO["ImGuiIO"]
            Style["ImGuiStyle"]
        end

        subgraph WidgetLayer["Widget Layer"]
            Widgets["imgui_widgets.cpp<br/>(Button, InputText, Slider...)"]
        end

        subgraph TableLayer["Table Layer"]
            Tables["imgui_tables.cpp<br/>(Table, Columns)"]
        end

        subgraph DrawingLayer["Drawing Layer"]
            DrawList["ImDrawList"]
            DrawData["ImDrawData"]
            FontAtlas["ImFontAtlas"]
            Font["ImFont"]
        end
    end

    subgraph Backends["Backend Layer (backends/)"]
        subgraph PlatformBackends["Platform Backends"]
            Win32["imgui_impl_win32"]
            GLFW["imgui_impl_glfw"]
            SDL2["imgui_impl_sdl2"]
            SDL3["imgui_impl_sdl3"]
            OSX["imgui_impl_osx"]
            Android["imgui_impl_android"]
        end

        subgraph RendererBackends["Renderer Backends"]
            DX9["imgui_impl_dx9"]
            DX11["imgui_impl_dx11"]
            DX12["imgui_impl_dx12"]
            OpenGL3["imgui_impl_opengl3"]
            Vulkan["imgui_impl_vulkan"]
            Metal["imgui_impl_metal"]
            WebGPU["imgui_impl_wgpu"]
        end
    end

    subgraph External["External Systems"]
        PlatformAPI["Platform APIs<br/>(Win32, Cocoa, X11...)"]
        GraphicsAPI["Graphics APIs<br/>(DirectX, OpenGL, Vulkan...)"]
    end

    AppLoop --> ImGuiNamespace
    ImGuiNamespace --> Context
    Context --> IO
    Context --> Style
    ImGuiNamespace --> Widgets
    ImGuiNamespace --> Tables
    Widgets --> DrawList
    Tables --> DrawList
    DrawList --> DrawData
    Context --> FontAtlas
    FontAtlas --> Font
    DrawData --> RendererBackends
    IO --> PlatformBackends
    PlatformBackends --> PlatformAPI
    RendererBackends --> GraphicsAPI
```

## フレームループシーケンス図

```mermaid
sequenceDiagram
    participant App as Host Application
    participant PlatformBE as Platform Backend
    participant RendererBE as Renderer Backend
    participant ImGui as ImGui Core
    participant DrawList as ImDrawList
    participant DrawData as ImDrawData

    App->>PlatformBE: ImGui_ImplXXX_NewFrame()
    activate PlatformBE
    PlatformBE->>ImGui: io.AddXXX() (inputs)
    deactivate PlatformBE

    App->>RendererBE: ImGui_ImplXXX_NewFrame()
    activate RendererBE
    deactivate RendererBE

    App->>ImGui: ImGui::NewFrame()
    activate ImGui
    ImGui->>ImGui: Reset frame state
    deactivate ImGui

    loop UI Definition
        App->>ImGui: ImGui::Begin/End()
        App->>ImGui: ImGui::Button(), Text(), etc.
        ImGui->>DrawList: Add draw commands
    end

    App->>ImGui: ImGui::Render()
    activate ImGui
    ImGui->>DrawData: Finalize draw data
    deactivate ImGui

    App->>ImGui: ImGui::GetDrawData()
    ImGui-->>App: ImDrawData*

    App->>RendererBE: ImGui_ImplXXX_RenderDrawData()
    activate RendererBE
    RendererBE->>RendererBE: Execute GPU draw calls
    deactivate RendererBE
```

## コンポーネント構成図

```mermaid
classDiagram
    class ImGuiContext {
        +ImGuiIO IO
        +ImGuiStyle Style
        +ImFont* Font
        +ImFontAtlas* SharedFontAtlas
        +ImVector~ImGuiWindow*~ Windows
        +ImDrawList DrawListShared
        +void* BackendPlatformUserData
        +void* BackendRendererUserData
    }

    class ImGuiIO {
        +float DeltaTime
        +ImVec2 DisplaySize
        +ImFontAtlas* Fonts
        +int ConfigFlags
        +int BackendFlags
        +AddKeyEvent()
        +AddMousePosEvent()
        +AddMouseButtonEvent()
    }

    class ImGuiStyle {
        +float Alpha
        +float WindowRounding
        +ImVec4[] Colors
        +ImVec2 WindowPadding
        +ImVec2 ItemSpacing
    }

    class ImDrawList {
        +ImVector~ImDrawCmd~ CmdBuffer
        +ImVector~ImDrawIdx~ IdxBuffer
        +ImVector~ImDrawVert~ VtxBuffer
        +AddLine()
        +AddRect()
        +AddText()
        +AddImage()
    }

    class ImDrawData {
        +bool Valid
        +int TotalIdxCount
        +int TotalVtxCount
        +ImVector~ImDrawList*~ CmdLists
        +ImVec2 DisplayPos
        +ImVec2 DisplaySize
    }

    class ImDrawCmd {
        +ImVec4 ClipRect
        +ImTextureRef TexRef
        +unsigned int ElemCount
        +ImDrawCallback UserCallback
    }

    class ImDrawVert {
        +ImVec2 pos
        +ImVec2 uv
        +ImU32 col
    }

    class ImFontAtlas {
        +ImVector~ImFont*~ Fonts
        +ImTextureData* TexData
        +int TexWidth
        +int TexHeight
        +AddFontDefault()
        +AddFontFromFileTTF()
        +Build()
    }

    class ImFont {
        +float FontSize
        +float Scale
        +ImVector~ImFontGlyph~ Glyphs
        +ImFontAtlas* ContainerAtlas
    }

    class ImFontGlyph {
        +ImWchar Codepoint
        +float AdvanceX
        +float X0, Y0, X1, Y1
        +float U0, V0, U1, V1
    }

    ImGuiContext --> ImGuiIO
    ImGuiContext --> ImGuiStyle
    ImGuiContext --> ImFontAtlas
    ImDrawData --> ImDrawList
    ImDrawList --> ImDrawCmd
    ImDrawList --> ImDrawVert
    ImFontAtlas --> ImFont
    ImFont --> ImFontGlyph
    ImDrawCmd --> ImTextureRef
```

## レイヤー依存関係図

```mermaid
flowchart TB
    subgraph Layer1["Layer 1: Host Application"]
        App["Application Code"]
    end

    subgraph Layer2["Layer 2: Public API"]
        API["imgui.h<br/>ImGui:: namespace"]
    end

    subgraph Layer3["Layer 3: Implementation"]
        Core["imgui.cpp<br/>Core/Main Code"]
        Widgets["imgui_widgets.cpp<br/>Widgets"]
        Tables["imgui_tables.cpp<br/>Tables"]
        Internal["imgui_internal.h<br/>Internal API"]
    end

    subgraph Layer4["Layer 4: Drawing/Font"]
        Draw["imgui_draw.cpp<br/>ImDrawList, ImFontAtlas"]
        STB["imstb_*.h<br/>STB Libraries"]
    end

    subgraph Layer5["Layer 5: Backend"]
        Platform["Platform Backends<br/>(win32, glfw, sdl...)"]
        Renderer["Renderer Backends<br/>(dx11, opengl3, vulkan...)"]
    end

    subgraph Layer6["Layer 6: Platform/Graphics"]
        PlatformAPI["OS APIs"]
        GraphicsAPI["Graphics APIs"]
    end

    App --> API
    API --> Core
    API --> Widgets
    API --> Tables
    Core --> Internal
    Widgets --> Internal
    Tables --> Internal
    Internal --> Draw
    Draw --> STB
    Platform --> PlatformAPI
    Renderer --> GraphicsAPI
    API --> Platform
    API --> Renderer

    style Layer1 fill:#e1f5fe
    style Layer2 fill:#b3e5fc
    style Layer3 fill:#81d4fa
    style Layer4 fill:#4fc3f7
    style Layer5 fill:#29b6f6
    style Layer6 fill:#03a9f4
```

## バックエンド組み合わせ図

```mermaid
flowchart LR
    subgraph CoreLib["Core Library"]
        ImGui["imgui.cpp<br/>imgui_widgets.cpp<br/>imgui_tables.cpp<br/>imgui_draw.cpp"]
    end

    subgraph PlatformOptions["Platform Backend (1つ選択)"]
        direction TB
        Win32["Win32"]
        GLFW["GLFW"]
        SDL2["SDL2"]
        SDL3["SDL3"]
        OSX["OSX (macOS)"]
        Android["Android"]
    end

    subgraph RendererOptions["Renderer Backend (1つ選択)"]
        direction TB
        DX9["DirectX 9"]
        DX10["DirectX 10"]
        DX11["DirectX 11"]
        DX12["DirectX 12"]
        OpenGL2["OpenGL 2"]
        OpenGL3["OpenGL 3/ES/WebGL"]
        Vulkan["Vulkan"]
        Metal["Metal"]
        WebGPU["WebGPU"]
        SDLRenderer["SDL_Renderer"]
    end

    ImGui --> PlatformOptions
    ImGui --> RendererOptions

    subgraph Examples["典型的な組み合わせ例"]
        Ex1["Windows: Win32 + DX11"]
        Ex2["Cross-platform: GLFW + OpenGL3"]
        Ex3["Cross-platform: SDL3 + Vulkan"]
        Ex4["macOS: GLFW + Metal"]
        Ex5["Web: SDL2/GLFW + OpenGL3/WebGPU"]
    end
```

## データフロー図

```mermaid
flowchart LR
    subgraph Input["Input Flow"]
        Mouse["Mouse Events"]
        Keyboard["Keyboard Events"]
        Gamepad["Gamepad Events"]
    end

    subgraph Processing["Processing"]
        IO["ImGuiIO"]
        Context["ImGuiContext"]
        Layout["Layout Calculation"]
        Widgets["Widget Processing"]
    end

    subgraph Output["Output Flow"]
        DrawList["ImDrawList"]
        DrawData["ImDrawData"]
        DrawCmd["Draw Commands"]
        VtxBuf["Vertex Buffer"]
        IdxBuf["Index Buffer"]
    end

    subgraph Render["Rendering"]
        Backend["Renderer Backend"]
        GPU["GPU"]
        Screen["Screen Output"]
    end

    Mouse --> IO
    Keyboard --> IO
    Gamepad --> IO
    IO --> Context
    Context --> Layout
    Layout --> Widgets
    Widgets --> DrawList
    DrawList --> DrawData
    DrawData --> DrawCmd
    DrawData --> VtxBuf
    DrawData --> IdxBuf
    DrawCmd --> Backend
    VtxBuf --> Backend
    IdxBuf --> Backend
    Backend --> GPU
    GPU --> Screen
```

## フォントアトラス構成図

```mermaid
flowchart TB
    subgraph FontLoading["Font Loading"]
        TTF["TTF/OTF Files"]
        Loader["Font Loader<br/>(stb_truetype / FreeType)"]
    end

    subgraph Atlas["ImFontAtlas"]
        Builder["Atlas Builder"]
        RectPack["Rectangle Packing<br/>(stb_rect_pack)"]
        TexData["Texture Data"]
    end

    subgraph Fonts["Fonts"]
        Font1["ImFont (Default)"]
        Font2["ImFont (Custom 1)"]
        Font3["ImFont (Custom 2)"]
    end

    subgraph Glyphs["Glyph Data"]
        Glyph1["Glyphs (A-Z, 0-9...)"]
        UV["UV Coordinates"]
        Advance["Advance Width"]
    end

    subgraph Rendering["Texture Rendering"]
        TexUpload["GPU Texture Upload"]
        Sampling["Texture Sampling"]
    end

    TTF --> Loader
    Loader --> Builder
    Builder --> RectPack
    RectPack --> TexData
    Builder --> Font1
    Builder --> Font2
    Builder --> Font3
    Font1 --> Glyph1
    Glyph1 --> UV
    Glyph1 --> Advance
    TexData --> TexUpload
    TexUpload --> Sampling
```
