flowchart TB
    subgraph UI["使用者介面"]
        Controls["控制面板<br/>開始 | 暫停 | 重置 | 隨機"]
        Patterns["預設圖案選擇器"]
        SpeedSlider["速度滑桿"]
    end

    subgraph Render["d3.js 渲染引擎"]
        GridSVG["網格 SVG<br/>50×50 細胞"]
        ChartSVG["統計圖表 SVG<br/>活細胞折線圖"]
        Animation["動畫系統<br/>彈跳 | 縮放 | 漸變"]
    end

    subgraph Core["遊戲核心"]
        GameLoop["遊戲迴圈<br/>setTimeout"]
        Rules["Conway 規則引擎<br/>鄰居計算 | 生死判定"]
        State["狀態管理<br/>細胞生死 + 年齡陣列"]
    end

    UI --> |"事件觸發"| Core
    Core --> |"狀態更新"| Render
    Render --> |"視覺回饋"| UI

    Controls --> GameLoop
    Patterns --> State
    SpeedSlider --> GameLoop

    GameLoop --> Rules
    Rules --> State
    State --> GridSVG
    State --> ChartSVG
    GridSVG --> Animation

sequenceDiagram
    participant User as 使用者
    participant UI as 控制面板
    participant Timer as 遊戲迴圈
    participant Rules as 規則引擎
    participant State as 狀態陣列
    participant D3 as d3.js 渲染

    User->>UI: 點擊「開始」
    UI->>Timer: start()

    loop 每個世代
        Timer->>Rules: step()
        Rules->>Rules: countNeighbors()
        Rules->>State: 更新狀態陣列
        State->>D3: drawGrid(animate=true)
        D3->>D3: 執行進入/更新動畫
        State->>D3: updateChart()
        D3-->>User: 視覺更新
    end

    User->>UI: 點擊「暫停」
    UI->>Timer: pause()

flowchart LR
    subgraph Input["當前狀態"]
        Alive["活細胞"]
        Dead["死細胞"]
    end

    subgraph Check["鄰居數量"]
        N2["= 2"]
        N3["= 3"]
        NLT2["< 2"]
        NGT3["> 3"]
    end

    subgraph Output["下一狀態"]
        Live["存活"]
        Die["死亡"]
        Born["復活"]
    end

    Alive --> N2 --> Live
    Alive --> N3 --> Live
    Alive --> NLT2 --> |"孤獨"| Die
    Alive --> NGT3 --> |"擁擠"| Die
    Dead --> N3 --> Born