---
name: code-flow-web-doc-generator
description: 소스 코드를 분석하여 호출 흐름과 데이터 흐름 다이어그램이 포함된 자체 완결형 HTML 문서를 생성합니다. 코드 흐름 문서화, 시퀀스 다이어그램 생성, 코드 이해를 위한 시각화 요청 시 활성화됩니다.
allowed-tools: Read, Write, Edit, Glob, Grep
---

# Code Flow Web Document Generator

소스 코드를 분석하여 시각적 다이어그램과 설명이 포함된 자체 완결형 HTML 문서를 생성하는 스킬입니다.

## 주요 기능

프로그램 동작과 구조를 이해하는 데 도움이 되는 호출 흐름 및 데이터 흐름 다이어그램과 간결한 노드 수준 설명이 포함된 웹 문서를 생성합니다.

## 워크플로우

1. 코드 입력 수신 (단일 파일, 다중 파일, 저장소, 또는 코드 스니펫)
2. 함수, 클래스, import, 호출 관계 추출
3. 컴포넌트 간 데이터 흐름 식별
4. Mermaid 형식으로 모듈 및 시퀀스 다이어그램 생성
5. 요약, 다이어그램, 상세 노드 설명 섹션이 포함된 구조화된 HTML 생성

## 기능 상세

### 다이어그램 유형
- 고수준 모듈 다이어그램
- 호출 시퀀스 흐름

### 출력 형식
- 인라인 CSS 및 스크립트가 포함된 단일 자체 완결형 HTML 파일

### 코드 분석
- 함수 역할, 입력, 출력, 부작용 추출

### 문서화
- 코드 발췌 (3-12줄)
- 핫스팟 분석
- 재생성 지침 포함

## 사용 사례

- 단일 파일 스크립트 분석
- 다중 모듈 웹 서비스 문서화
- 이벤트 기반 코드 설명
- 코드 리뷰 준비 및 온보딩

## HTML 출력 템플릿

```html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>코드 흐름 문서</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">
        <!-- 네비게이션 -->
    </header>

    <main class="max-w-6xl mx-auto px-4 py-8">
        <!-- 1. 프로젝트 요약 -->
        <section id="summary">
            <h2>프로젝트 요약</h2>
            <!-- 목적, 주요 기능, 기술 스택 -->
        </section>

        <!-- 2. 모듈 다이어그램 -->
        <section id="module-diagram">
            <h2>모듈 구조</h2>
            <div class="mermaid">
                graph TD
                    A[Entry Point] --> B[Module A]
                    A --> C[Module B]
            </div>
        </section>

        <!-- 3. 호출 흐름 -->
        <section id="call-flow">
            <h2>호출 흐름</h2>
            <div class="mermaid">
                sequenceDiagram
                    participant User
                    participant API
                    participant DB
            </div>
        </section>

        <!-- 4. 함수별 상세 설명 -->
        <section id="function-details">
            <h2>함수 상세</h2>
            <!-- 각 함수의 역할, 입력, 출력, 코드 발췌 -->
        </section>

        <!-- 5. 데이터 흐름 -->
        <section id="data-flow">
            <h2>데이터 흐름</h2>
            <!-- 데이터가 어떻게 변환되고 전달되는지 -->
        </section>
    </main>

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

## 사용 예시

```
이 파일의 코드 흐름을 다이어그램으로 문서화해줘
src 폴더의 호출 관계를 시퀀스 다이어그램으로 만들어줘
이 함수들의 데이터 흐름을 HTML 문서로 생성해줘
```

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