다이어그램 생성기은(는) 무엇을 하나요?
ACTION REQUIRED（읽은 후 즉시 실행）
NOW：현재 작업이 이 스킬의 적용 범위에 해당하는지 확인NOW：../tool-index.md를 읽어 도구 가용성 및 실제 경로 확인NEXT：도구가 없으면 bootstrap을 호출하고 경로를 추측하지 않음ACT："워크플로우" 첫 단계로 진입하여 실행, 확인 상태에서 멈추지 않음
목적
지저분하거나 구조화된 입력으로부터 명확하고 편집 가능한 다이어그램을 만듭니다. 결과를 검토하고, 버전을 관리하고, 개선할 수 있도록 텍스트 기반 다이어그램 소스를 우선시합니다. 사용자가 이미지/PDF를 요청하거나 다운로드 가능한 아티팩트가 실질적으로 도움이 되는 경우에만 파일로 렌더링합니다.
기본 워크플로우
- 사용자의 의도, 대상 및 소스 자료를 파악합니다.
- 아래 의사 결정 테이블을 사용하여 다이어그램 패밀리와 언어를 선택합니다.
- 다이어그램 코드를 작성하기 전에 엔티티, 관계, 레이블, 상태, 분기 및 시간/순서 정보를 정규화합니다.
- 간결하고 읽기 쉬운 다이어그램 소스를 생성합니다.
- 구문을 정신적으로 검증하고, 파일을 생성할 때는
scripts/render_diagram.py를 실행합니다. - 다이어그램 소스와 가정에 대한 간단한 메모를 반환합니다. 파일이 생성된 경우 출력 파일에 대한 링크를 포함합니다.
설명을 위해 지나치게 질문하지 마십시오. 요청이 불충분하게 명시된 경우 합리적인 가정을 하고 간략히 레이블을 지정합니다.
다이어그램 언어 의사 결정 테이블
다른 언어가 명백히 더 나은 경우가 아니라면 Mermaid를 사용합니다.
| 사용자가 원하는 것 | 선호 | 이유 |
|---|---|---|
| 프로세스 흐름, 의사 결정 트리, 간단한 스윔레인 | Mermaid flowchart | 읽기 쉽고 Markdown에 붙여넣기 쉬움 |
| 시스템/사용자 상호 작용 순서 | Mermaid sequenceDiagram 또는 PlantUML sequence | 문서에는 Mermaid, UML 형식성에는 PlantUML |
| 생명 주기, 상태 머신, 전이 | Mermaid stateDiagram-v2 또는 PlantUML state | 간결한 전이 구문 |
| 데이터베이스 스키마, 엔티티, 관계 | Mermaid erDiagram | 이식 가능한 ER 표기법 |
| 클래스/인터페이스/객체 모델 | Mermaid classDiagram 또는 PlantUML class | 문서에는 Mermaid, 상세 UML에는 PlantUML |
| 프로젝트 일정 | Mermaid gantt | 간결한 타임라인 구문 |
| 계층 구조, 아이디어, 노트 | Mermaid mindmap | 아이디어 맵에 적합한 기본값 |
| 고객/제품 여정 | Mermaid journey | 내장 여정 표기법 |
| Git 기록 | Mermaid gitGraph | 내장 Git 표기법 |
| 의존성 그래프, 패키지 그래프, 대규모 네트워크 | Graphviz DOT | 밀집 그래프에 더 나은 레이아웃 엔진 |
| 계층, 클러스터, 경계가 있는 아키텍처 | Mermaid flowchart with subgraphs, Graphviz clusters, 또는 PlantUML C4 스타일 | 요청된 충실도에 따라 선택 |
| 가중치 흐름/생키 유사 관계 | 지원 시 Mermaid sankey-beta, 그렇지 않으면 SVG 또는 Graphviz | 렌더러에 따라 Mermaid 지원이 다를 수 있음 |
| 소스 언어가 잘 맞지 않는 사용자 정의 시각화 | SVG | 레이아웃 및 스타일에 대한 정밀한 제어 |
출력 정책
- 사용자가 명시적으로 이미지만을 요청하지 않는 한 항상 편집 가능한 소스를 제공합니다.
- 기본적으로 단일 최상의 다이어그램을 제공합니다. 진정으로 유용한 경우에만 대안을 제시합니다.
- 이전 Mermaid/PlantUML 버전에서 렌더링되지 않을 수 있는 화려한 기능보다 안정적이고 간단한 구문을 선호합니다.
- 짧은 레이블을 사용합니다. 필요한 경우 긴 텍스트는 다이어그램 외부의 노트로 분할합니다.
- 모호한 노드 ID를 피하십시오. ASCII ID와 사람이 읽을 수 있는 레이블을 사용합니다.
- 사용자 용어를 유지하지만 다이어그램 내에서 대소문자를 표준화합니다.
- 기술 다이어그램의 경우 클라이언트, 서비스, 데이터베이스, 큐, 외부 API 및 운영자/사용자와 같은 경계가 암시될 때 포함합니다.
- 비즈니스 프로세스 다이어그램의 경우 행복 경로, 의사 결정 지점, 실패, 재시도 및 수동 단계가 있을 때 구분합니다.
- 불확실한 텍스트에서 생성된 다이어그램의 경우 코드 뒤에
가정섹션을 포함합니다.
Mermaid 생성 규칙
간결한 템플릿은 references/diagram-patterns.md를 참조하십시오.
일반 Mermaid 규칙:
- 올바른 다이어그램 지시문으로 시작합니다(예:
flowchart TD,sequenceDiagram,erDiagram,gantt,mindmap,journey). - 플로차트의 경우
flowchart TD를 사용하고, 사용자가 왼쪽에서 오른쪽 방향을 요청하지 않는 한flowchart LR은 아키텍처 및 파이프라인에 사용합니다. - 스윔레인 또는 아키텍처 계층에는 서브그래프를 사용합니다. 서브그래프 이름은 읽기 쉬운 레이블로 지정합니다.
- 노드 ID는 안정적이고 ASCII만 사용합니다(예:
ingest_service[Ingest Service]). - 구문 분석기를 혼란스럽게 할 수 있는 구두점이 포함된 레이블은 따옴표로 묶습니다.
- 분기에는 결정 다이아몬드 사용:
decision{Condition?}. - 일관된 엣지 레이블 사용:
-- yes -->,-- no -->,-. async .->, 또는== critical ==>는 의미가 있을 때만 사용합니다. - 시퀀스 다이어그램에서는 메시지 전에 참가자를 선언합니다. 사람에게는
actor를, 시스템에는participant를 사용합니다. alt/else/end,opt/end,loop/end및par/and/end블록을 조건부, 선택적, 반복 및 병렬 흐름에 사용합니다.
Graphviz DOT 생성 규칙
크고 밀집되거나 레이아웃에 민감한 관계 다이어그램에는 Graphviz를 사용합니다.
- 방향 관계에는
digraph G를, 무방향 네트워크에는graph G를 선호합니다. - 도움이 될 때 상단에 레이아웃 친화적인 그래프 속성을 설정합니다:
rankdir=LR,nodesep,ranksep,splines=true. - 경계 및 하위 시스템에는
subgraph cluster_name을 사용합니다. - 일반 레이블과 절제된 스타일을 사용합니다.
- 의미를 추가할 때만 엣지 레이블을 사용합니다.
- 많은 노드의 경우 클러스터로 도메인별로 그룹화하고 교차가 많은 전체 연결 엣지를 피합니다.
PlantUML 생성 규칙
사용자가 UML을 요청하거나 공식 UML 표기법이 필요할 때 PlantUML을 사용합니다.
@startuml및@enduml로 다이어그램을 감쌉니다.- 유용할 때
actor,participant,database,queue,collections또는component스테레오타입을 사용합니다. - 아키텍처 경계에는
package,rectangle또는node를 사용합니다. - 클래스 다이어그램의 경우 사용자가 완전한 세부 정보를 요청하지 않는 한 중요한 필드/메서드만 포함합니다.
- 활동 다이어그램의 경우 명확한 시작/종료 마커와 명시적인 분기 레이블을 사용합니다.
SVG 생성 규칙
텍스트 다이어그램 언어가 요청된 시각적 표현을 안정적으로 표현할 수 없는 경우에만 SVG를 사용합니다.
- SVG를 단순하고, 접근 가능하며, 편집 가능하게 유지합니다.
<title>과 의미 있는 텍스트 레이블을 포함합니다.- 복잡한 경로보다는 사각형, 선, 화살표 및 그룹을 선호합니다.
- 외부 글꼴이나 원격 이미지를 포함하지 마십시오.
파일 렌더링
사용자가 PNG/SVG/PDF를 요청하면 소스 파일을 만들고 다음을 실행합니다:
python "<SKILL_ROOT>/diagram-generator/scripts/render_diagram.py" input.mmd --format svg --out output.svg
python "<SKILL_ROOT>/diagram-generator/scripts/render_diagram.py" input.dot --format png --out output.png
python "<SKILL_ROOT>/diagram-generator/scripts/render_diagram.py" input.puml --format svg --out output.svg
<SKILL_ROOT>는 이 패키지의skills/디렉토리 실제 경로이며, AI가 자동으로 감지해야 합니다.
렌더러는 의도적으로 종속성 허용 오차가 있습니다. 일반적인 로컬 도구를 시도하고 렌더러를 사용할 수 없는 경우 실행 가능한 설치 힌트를 보고합니다. 스크립트가 성공적으로 완료되고 출력 파일이 존재하지 않으면 이미지가 렌더링되었다고 주장하지 마십시오.
검증 체크리스트
마무리하기 전에:
- 다이어그램 유형이 사용자의 작업과 일치하는지 확인합니다.
- 소스가 선택한 언어에 대해 구문적으로 타당한지 확인합니다.
- 레이블이 들어갈 만큼 충분히 짧은지 확인합니다.
- 엣지와 메시지 순서가 입력을 정확하게 반영하는지 확인합니다.
- 입력이 불완전했을 때 가정이 명시되는지 확인합니다.
- 생성된 파일의 경우 출력이 존재하고 열리거나 크기가 0이 아닌지 확인합니다.
일반 응답 템플릿
대부분의 다이어그램 답변에 이 구조를 사용합니다:
편집 가능한 [language] 버전입니다:
```[language]
[source]
가정:
- [필요한 경우에만]
렌더링된 파일: [링크] [생성된 경우에만]
영어 사용자 요청에는 영어로 응답합니다. 중국어 사용자 요청에는 별도로 요청하지 않는 한 중국어로 응답합니다.
---
## 온디맨드 부트스트랩
### 자동화 기능 경계
| 도구 | 자동 설치 가능 | 설치 방식 | 설명 |
|------|---------------|---------|------|
| Mermaid CLI (mmdc) | ✓ | npm install -g @mermaid-js/mermaid-cli | Mermaid를 PNG/SVG로 렌더링 |
| Graphviz (dot) | ✗ | 수동 설치 | https://graphviz.org/download/ |
| PlantUML | ✗ | Java + plantuml.jar 필요 | https://plantuml.com/download |
| Python (렌더 스크립트) | ✓ | 이미 bootstrap에 포함됨 | `scripts/render_diagram.py` 의존성 |
### 설명
이 스킬은 주로 텍스트 형식의 다이어그램 소스 코드(Mermaid/DOT/PlantUML)를 출력하므로 로컬 렌더링 도구가 반드시 필요한 것은 아닙니다. 사용자가 명시적으로 PNG/SVG/PDF 파일 생성을 요청하는 경우에만 해당 렌더러가 필요합니다.
렌더러를 사용할 수 없는 경우 `scripts/render_diagram.py`는 오류 대신 설치 힌트를 출력합니다.
---
## 라우팅 컨텍스트
**상위 진입점**: `skills/SKILL.md` (총괄), `routing.md`
**트리거 조건**: 사용자가 "그림", "플로차트", "아키텍처 다이어그램", "공격 경로 다이어그램", "시퀀스 다이어그램", "Mermaid", "Graphviz", "PlantUML" 언급
**하위 출력**:
- 생성된 다이어그램은 `docs-generator/`의 보고서에 포함 가능
- 공격 경로 다이어그램은 `pentest-tools/`의 침투 테스트 보고서와 함께 사용 가능
**동일 레벨 관련 모듈**: `docs-generator/` (보고서에 다이어그램 포함)
## 작업 완료 자체 점검 (완료를 주장하기 전에 MUST 통과)
- [ ] 워크플로우의 각 단계를 수행했는가 (단순히 읽기만 한 것이 아니라)?
- [ ] `tool-index`를 기반으로 실제 도구 경로를 사용했는가?
- [ ] 재현 가능한 증거(명령어/스크립트/스크린샷/보고서)를 생성했는가?
- [ ] RULES가 요구하는 Checklist 항목을 완료하고 다시 기록했는가?