graph LR
    subgraph 인증
        A1[Github 로그인] --> A2{최초 로그인?}
        A2 -->|Yes| A3[캐릭터 생성]
        A2 -->|No| A4[로그인 완료]
        A3 --> A4
        A4 --> A5[JWT 발급]
        A5 --> A6[메인화면]
    end

    subgraph 스터디룸참여
        B1{참여방식} -->|생성| B2[스터디룸 생성]
        B1 -->|초대| B3[초대코드 입력]
        B1 -->|기존| B6[스터디룸 선택]
        B2 & B3 & B6 --> B4[스터디룸 입장]
        B4 --> B5[소켓 연결]
    end

    subgraph 실시간기능
        C1[앱 사용 감지] --> C2{유해앱?}
        C2 -->|Yes| C3[상태 업데이트]
        C3 --> C4[경고 알림]
        C4 --> C5[화면 캡처]
        C5 --> C6[자동 업로드]
        C2 -->|No| C7[상태 업데이트]
    end

    subgraph 협업도구
        D1[자료실] --> D2[파일 업로드]
        D1 --> D3[파일 조회]
        D4[이슈관리] --> D5[Github 이슈발생]
        D4 --> D6[이슈 조회]
    end

    A6 --> B1
    B5 --> C1
    B5 --> D1
    B5 --> D4

    classDef default fill:#f9f9f9,stroke:#333,stroke-width:2px,rx:10,ry:10;
    classDef login fill:#ffecb3,stroke:#ffa000,stroke-width:2px,rx:10,ry:10;
    classDef room fill:#bbdefb,stroke:#1976d2,stroke-width:2px,rx:10,ry:10;
    classDef monitor fill:#c8e6c9,stroke:#388e3c,stroke-width:2px,rx:10,ry:10;
    classDef collab fill:#e1bee7,stroke:#7b1fa2,stroke-width:2px,rx:10,ry:10;
    classDef decision fill:#ffcdd2,stroke:#d32f2f,stroke-width:2px,rx:10,ry:10;
    classDef endpoint fill:#b2dfdb,stroke:#00796b,stroke-width:2px,rx:10,ry:10;

    class A1,A3,A4,A5,A6 login;
    class B2,B3,B4,B5,B6 room;
    class C1,C3,C4,C5,C6,C7 monitor;
    class D2,D3,D5,D6 collab;
    class A2,B1,C2 decision;
    class D1,D4 endpoint;

    style 인증 fill:#fff3e0,stroke:#ff6f00,stroke-width:4px,rx:15,ry:15
    style 스터디룸참여 fill:#e3f2fd,stroke:#0d47a1,stroke-width:4px,rx:15,ry:15
    style 실시간기능 fill:#e8f5e9,stroke:#1b5e20,stroke-width:4px,rx:15,ry:15
    style 협업도구 fill:#f3e5f5,stroke:#4a148c,stroke-width:4px,rx:15,ry:15