---
name: uml-generator
description: 프로젝트 아키텍처를 분석하여 UML 다이어그램을 자체 완결형 HTML로 생성합니다. UML, 클래스 다이어그램, 아키텍처 시각화 요청 시 활성화됩니다.
allowed-tools: Read, Write, Edit, Glob, Grep, Bash
---

# UML Generator

프로젝트 구조를 분석하여 UML 다이어그램을 생성하는 스킬입니다.

## 기능

### 지원하는 다이어그램 유형
- **클래스 다이어그램**: 클래스, 인터페이스, 상속/구현 관계
- **패키지 다이어그램**: 모듈/패키지 간 의존성
- **시퀀스 다이어그램**: 객체 간 메시지 흐름
- **컴포넌트 다이어그램**: 시스템 컴포넌트 구조

### 분석 대상
- 클래스 및 인터페이스 정의
- 상속 및 구현 관계
- 메서드 시그니처 및 속성
- 모듈 간 import/export 관계
- 의존성 주입 패턴

### 출력 형식
- Mermaid.js 기반 인터랙티브 HTML
- 자체 완결형 단일 파일

## HTML 템플릿

```html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>UML 다이어그램</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    <style>
        * { font-family: 'Noto Sans KR', sans-serif; }
        .mermaid { background: #f8fafc; padding: 1rem; border-radius: 0.5rem; }
    </style>
</head>
<body class="bg-gray-100 min-h-screen">
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="max-w-6xl mx-auto px-4 py-4">
            <h1 class="text-xl font-bold text-slate-800">UML 다이어그램</h1>
        </div>
    </header>

    <main class="max-w-6xl mx-auto px-4 py-8">
        <!-- 클래스 다이어그램 -->
        <section class="bg-white rounded-xl shadow-sm p-6 mb-6">
            <h2 class="text-lg font-bold text-slate-700 mb-4">클래스 다이어그램</h2>
            <div class="mermaid">
                classDiagram
                    class ClassName {
                        +attribute: type
                        +method(): returnType
                    }
            </div>
        </section>

        <!-- 시퀀스 다이어그램 -->
        <section class="bg-white rounded-xl shadow-sm p-6 mb-6">
            <h2 class="text-lg font-bold text-slate-700 mb-4">시퀀스 다이어그램</h2>
            <div class="mermaid">
                sequenceDiagram
                    participant A
                    participant B
                    A->>B: message
            </div>
        </section>
    </main>

    <script>
        mermaid.initialize({ startOnLoad: true, theme: 'default' });
    </script>
</body>
</html>
```

## 사용 예시

```
이 프로젝트의 클래스 다이어그램을 만들어줘
src 폴더의 UML 다이어그램을 HTML로 생성해줘
이 코드의 시퀀스 다이어그램을 그려줘
```

## 출처
Original skill from skills.cokac.com
