diagramlisted

# 다이어그램 ## 기본 동작 (강제) 관계/흐름/구조/순서/데이터/비교/의사결정 중 하나라도 설명에 포함되면 다음을 기본으로 한다: 1. 텍스트 불릿 나열보다 다이어그램 우선 2. 해당 시 즉시 `scripts/render-mermaid.mjs`로 렌더링 3. 결과를 답변에 `text` 코드 블록으로 포함 4. 렌더링 실패 시 원인 보고 후 텍스트 설명으로 폴백 스킵 허용: 단일 사실 질문, 단순 정의, 항목 1-2개 나열, 짧은 수정/명령 응답. ## 활용 시점 텍스트보다 그림이 빠른 상황이면 사용한다. 1. 관계 — 컴포넌트 구조, 모듈 의존성, 클래스 계층 2. 흐름 — 상태 머신, 워크플로, 파이프라인, 의사결정 분기 3. 순서 — API 호출, 이벤트 흐름, 에이전트 간 통신, 요청/응답 4. 데이터 — 엔티티 관계, 스키마, 데이터 흐름 5. 수치 — 성능 지표, 트렌드, 비교 차트 6. 개념 정리 — 복잡한 로직 설명, 디버깅 흐름, before/after 비교 7. 의사결정 — 옵션 분기, 조건별 경로, 트레이드오프 시각화 ## 렌더링 스크립트: 이 SKILL.md와 같은 디렉토리의 `scripts/render-mermaid.mjs` 라이브러리 미설치 시 스킬 디렉토리에 자동 설치된다 (프로젝트 오염 없음). ### 렌더링 절차 1. 이 스킬의 scripts/render-mermaid.mjs 절대 경로를 구성한다 2. Bash로 스크립트 실행하여 ASCII 출력을 얻는다 3. 출력 결과를 답변 텍스트에 직접 포함한다 (Bash 실행 결과는 사용자에게 보이지 않을 수 있음) 4. 마크다운 파일에서는 ```text 코드 블록에 삽입한다 ### 예시 ``` echo 'graph LR A --> B --> C' | node ~/.claude/skills/diagram/scripts/render-mermaid.mjs ``` 실행 후 결과를 답변에 직접 포함: ```text ┌───┐ ┌───┐ ┌───┐ │ │ │ │ │ │ │ A ├────►│ B ├────►│ C │ │ │ │ │ │ │ └───┘ └───┘ └───┘ ``` ### 금지 - Bash 실행만 하고 결과를 답변에 포함하지 않는 것 - mermaid 코드 블록 사용 (뷰어 미지원 환경에서 깨짐) ## 지원 다이어그램 | 타입 | 헤더 | 용도 | |------|------|------| | flowchart | `graph TD`, `graph LR` | 흐름도, 의사결정 | | stateDiagram | `stateDiagram-v2` | 상태 머신 | | sequenceDiagram | `sequenceDiagram` | 호출 순서 | | classDiagram | `classDiagram` | 클래스 구조 | | erDiagram | `erDiagram` | 엔티티 관계 | | xychart | `xychart-beta` | 차트 (bar,