스킬 자체의 표현으로
올바른 mxGraph XML을 생성하여 draw.io 다이어그램 파일(.drawio, .drawio.svg, .drawio.png)을 생성, 편집 및 검증하는 스킬입니다. assets/templates/의 템플릿을 통해 플로차트, 시스템 아키텍처, 시퀀스 다이어그램, ER 다이어그램, UML 클래스 다이어그램을 처리하며, 네트워크 토폴로지, BPMN, 마인드맵은 셰이프 라이브러리 또는 수작업으로 대체됩니다.
에이전트는 6단계 워크플로, 즉시 사용 가능한 스타일 문자열이 포함된 시맨틱 색상 팔레트, 전달 전 검증 체크리스트, 선택적인 Python 스크립트(validate-drawio.py, add-shape.py)를 제공받습니다. 이는 다이어그램이 문서화하는 코드와 함께 저장소에 위치하는 환경에서 작업하는 에이전트를 대상으로 하며, 생성된 파일은 hediet.vscode-drawio VS Code 확장에서 바로 열리도록 설계되었습니다.
산출물
- 요청한 경로에 기록된 .drawio 파일 자체입니다.
- 다이어그램이 나타내는 내용을 한 문장으로 요약한 것입니다.
- 검증 스크립트가 실행되었는지, 통과했는지를 보고하는 검증 상태입니다.
- 다이어그램을 커스터마이즈할 가능성이 있을 때의 편집 안내입니다: 셰이프를 클릭하여 선택하고, 더블클릭하여 레이블을 편집하고, 드래그하여 위치를 재조정합니다.
작동 방식
- 01요청 확정하기
워크플로는 다이어그램 유형, 엔티티 또는 행위자, 관계, 출력 경로, 그리고 파일이 신규인지 편집인지를 확정하는 것으로 시작합니다.
- 02템플릿 또는 최소 스켈레톤 재사용하기
다이어그램 유형이 assets/templates/ 아래의 것과 일치하면 해당 구조를 복사하고 자리 표시자 값을 교체합니다. 새로운 레이아웃의 경우 두 개의 루트 셀을 가진 최소 유효 mxfile 스켈레톤에서 시작합니다.
- 03XML을 작성하기 전에 레이아웃을 계획하기
먼저 행이나 계층을 스케치한 다음 그리드 위에 도형을 배치합니다. 기본 A4 가로 캔버스(1169 x 827 px)에서 같은 행의 도형 사이에는 가로로 40-60px, 계층 행 사이에는 80-120px를 둡니다.
- 04mxGraph XML 생성
고유한 id와 일치하는 parent 참조를 가진 vertex 및 edge 셀을 작성하고, 라벨 안의 XML 특수 문자를 이스케이프하여 파일이 올바른 형식을 유지하도록 합니다.
- 05팔레트의 스타일 적용
스타일 문자열은 고정된 시맨틱 팔레트에서 가져옵니다 — primary/info는 #6c8ebf와 함께 #dae8fc, warning/decision은 #d6b656와 함께 #fff2cc, error/end는 #b85450와 함께 #f8cecc — 그래서 프로젝트 전체에서 같은 목적은 같은 색을 유지합니다.
- 06저장, 검증, 전달
요청된 경로에 .drawio 확장자로 파일을 작성하고, 필요하면 검증기를 실행한 다음, 사용자에게 파일을 여는 방법을 안내하고 다이어그램의 내용을 요약합니다.