excalidraw-skill은(는) 무엇을 하나요?
자연어로 손글씨 스타일의 Excalidraw 다이어그램을 생성합니다. 5가지 패턴, 8가지 의미론적 색상 팔레트, Kroki API 또는 로컬 CLI를 지원합니다. PNG/SVG 출력, 멀티 에이전트 지원.
개요
이 스킬을 사용하면 AI 에이전트가 자연어 설명을 기반으로 Excalidraw 다이어그램을 생성할 수 있습니다. 손으로 그린 듯한 독특한 스타일로, 프레젠테이션, 문서화, 브레인스토밍에 이상적입니다.
기능
- 5가지 다이어그램 패턴: 플로우차트, 와이어프레임, 시스템 아키텍처, 마인드맵, 시퀀스 다이어그램
- 8가지 의미론적 색상: 빨강(위험/강조), 파랑(정보/프로세스), 초록(성공/완료), 노랑(경고), 보라(보안/권한), 주황(사용자 입력), 회색(비활성/백그라운드), 검정(기본/텍스트)
- 출력 형식: PNG (래스터 이미지) 및 SVG (벡터 그래픽)
- 렌더링 엔진:
- Kroki API (원격, 기본값)
- 로컬 Excalidraw CLI (로컬 실행)
- 멀티 에이전트 지원: 여러 AI 에이전트가 협업하여 복잡한 다이어그램을 단계별로 구성
설치
# 로컬 CLI 이용 시 (선택 사항)
npm install -g @excalidraw/excalidraw-cli
설정
환경 변수를 설정합니다:
| 변수명 | 설명 | 기본값 | 필수 여부 |
|---|---|---|---|
KROKI_URL | Kroki API 엔드포인트 | https://kroki.io | 아니오 |
EXCALIDRAW_CLI_PATH | 로컬 Excalidraw CLI 경로 | - | 아니오 |
OUTPUT_DIR | 다이어그램 출력 디렉터리 | ./diagrams | 아니오 |
사용법
기본 예시
에이전트: 간단한 로그인 플로우의 플로우차트를 만들어 줘.
결과: 사용자가 로그인 페이지에서 자격 증명을 입력하고, 서버가 검증한 후 대시보드로 리디렉션되는 과정을 보여주는 손글씨 스타일 플로우차트가 `login-flow.svg` 파일로 생성됩니다.
패턴 사용 예시
에이전트: 시스템 아키텍처 다이어그램을 그려 줘. 사용자 -> 로드 밸런서 -> API 게이트웨이 -> 마이크로서비스 A, B, C -> 데이터베이스 클러스터로 구성되고, 서비스 간 통신은 파란색, 데이터 흐름은 초록색으로 표시해 줘.
출력 예시
생성된 다이어그램은 다음과 같은 구조로 저장됩니다:
./diagrams/
├── login-flow.png
├── login-flow.svg
├── architecture.svg
└── mindmap.png
멀티 에이전트 워크플로우
멀티 에이전트 시나리오에서는 각 에이전트가 다이어그램의 특정 부분을 담당할 수 있습니다:
- 설계 에이전트: 다이어그램의 전체 구조와 패턴 결정
- 콘텐츠 에이전트: 각 요소에 대한 텍스트와 설명 작성
- 스타일 에이전트: 색상과 스타일 지정 후 최종 렌더링
제한 사항
- 복잡한 레이아웃은 수동 조정이 필요할 수 있습니다.
- Kroki API 사용 시 인터넷 연결이 필요합니다.
- 매우 큰 다이어그램은 렌더링 시간이 오래 걸릴 수 있습니다.
라이선스
MIT