mermaid-skill은(는) 무엇을 하나요?
자연어로 Mermaid 다이어그램(.mmd)을 생성하고 검증 루프를 포함합니다. 11개 이상의 다이어그램 유형, 다중 백엔드(mmdc / Kroki), PNG/SVG/PDF 출력, 다중 에이전트를 지원합니다.
기능
- 자연어에서 다이어그램 생성: "고객이 주문하면 주문 처리 시스템이 결제를 확인하고 배송을 시작하는 순서도를 만들어줘"와 같은 설명을 입력하면 Mermaid 다이어그램을 생성합니다.
- 자동 검증 루프: 생성된
.mmd파일의 문법을 자동으로 확인하고 오류가 있으면 수정합니다. - 11개 이상의 다이어그램 유형 지원: 순서도(Flowchart), 시퀀스 다이어그램(Sequence Diagram), 클래스 다이어그램(Class Diagram), 상태 다이어그램(State Diagram), ER 다이어그램(Entity Relationship Diagram), 사용자 여정(User Journey), 간트 차트(Gantt), 파이 차트(Pie Chart), 요구사항 다이어그램(Requirement Diagram) 등 다양한 유형을 지원합니다.
- 다중 백엔드:
- mmdc: Mermaid CLI를 사용한 로컬 렌더링
- Kroki: 원격 API를 통한 렌더링(Kroki 서버 필요)
- 다양한 출력 형식: PNG, SVG, PDF
- 멀티 에이전트 워크플로우: 여러 AI 에이전트가 협력하여 복잡한 다이어그램을 작성하거나 수정할 수 있습니다.
사용 방법
설치
# mmdc 백엔드 사용 시 (권장)
npm install -g @mermaid-js/mermaid-cli
# 또는 Kroki 백엔드 사용 시 (별도 설치 불필요, Kroki 서버 주소만 설정)
기본 사용법
# 자연어로 다이어그램 생성
/mermaid <설명>
# 예시
/mermaid 사용자가 로그인하고 대시보드를 볼 수 있는 시퀀스 다이어그램을 만들어줘
고급 옵션
| 옵션 | 설명 | 기본값 |
|---|---|---|
--type | 다이어그램 유형 지정 (flowchart, sequence, class, state, er, journey, gantt, pie, requirement 등) | 자동 감지 |
--backend | 사용할 백엔드 (mmdc, kroki) | mmdc |
--format | 출력 형식 (png, svg, pdf) | svg |
--output | 출력 파일 경로 | ./output.svg |
--no-validate | 검증 루프 비활성화 | false |
예제
순서도 생성
/mermaid 주문 처리 프로세스를 보여주는 순서도를 만들어줘 --type flowchart
복잡한 다이어그램
/mermaid 마이크로서비스 아키텍처의 컴포넌트 다이어그램을 만들어줘 --type class --format png
Kroki 백엔드 사용
/mermaid 데이터베이스 스키마 ER 다이어그램을 만들어줘 --type er --backend kroki
검증 루프
이 스킬은 생성된 Mermaid 다이어그램이 문법적으로 올바른지 자동으로 검증합니다:
- 다이어그램 생성 후
.mmd파일로 저장 - 선택한 백엔드로 렌더링 시도
- 오류 발생 시 오류 메시지 분석 및 자동 수정
- 최대 3회까지 재시도하여 올바른 다이어그램 생성 보장
환경 변수
| 변수명 | 설명 | 필수 여부 |
|---|---|---|
KROKI_URL | Kroki 서버 URL (Kroki 백엔드 사용 시) | No |
MERMAID_THEME | Mermaid 테마 (default, forest, dark, neutral 등) | No |
OUTPUT_DIR | 출력 파일 저장 디렉토리 | No (기본값: ./output) |
플랫폼 호환성
- Claude Code: 완벽 호환
- Cursor: 완벽 호환
- Codex: 완벽 호환
- 기타 AI 어시스턴트: 대부분 호환 (자연어 명령어 기반)
라이선스
MIT License