Community코딩 & 개발github.com

Agents365-ai/mermaid-skill

자연어로 Mermaid 다이어그램(.mmd)을 생성하고 검증 루프를 포함합니다. 11개 이상의 다이어그램 유형, 다중 백엔드(mmdc / Kroki), PNG/SVG/PDF 출력, 다중 에이전트를 지원합니다.

mermaid-skill란 무엇인가요?

이 스킬은 개발자와 AI 에이전트가 자연어 설명만으로 복잡한 Mermaid 다이어그램(.mmd)을 생성할 수 있도록 설계되었습니다. 11개 이상의 다이어그램 유형(순서도, 시퀀스 다이어그램, 간트 차트, 클래스 다이어그램 등)을 지원하며, 생성된 다이어그램을 자동으로 검증하고 오류가 있을 경우 수정하는 검증 루프를 포함하고 있습니다. mmdc(Mermaid CLI)와 Kroki 두 가지 백엔드를 지원하여 다양한 배포 환경에 유연하게 대응할 수 있으며, PNG, SVG, PDF 형식의 출력을 제공합니다. 멀티 에이전트 워크플로우를 지원하여 여러 AI 에이전트가 협력하여 복잡한 다이어그램을 작성하거나 수정할 수 있습니다. Claude Code, Cursor, Codex와 같은 주요 AI 어시스턴트 플랫폼과 호환되며, 간단한 명령어나 자연어 요청으로 고품질 다이어그램을 즉시 얻을 수 있어 문서화, 설계, 협업 프로세스를 크게 간소화합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add Agents365-ai/mermaid-skill

Installed? Explore more 코딩 & 개발 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

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 다이어그램이 문법적으로 올바른지 자동으로 검증합니다:

  1. 다이어그램 생성 후 .mmd 파일로 저장
  2. 선택한 백엔드로 렌더링 시도
  3. 오류 발생 시 오류 메시지 분석 및 자동 수정
  4. 최대 3회까지 재시도하여 올바른 다이어그램 생성 보장

환경 변수

변수명설명필수 여부
KROKI_URLKroki 서버 URL (Kroki 백엔드 사용 시)No
MERMAID_THEMEMermaid 테마 (default, forest, dark, neutral 등)No
OUTPUT_DIR출력 파일 저장 디렉토리No (기본값: ./output)

플랫폼 호환성

  • Claude Code: 완벽 호환
  • Cursor: 완벽 호환
  • Codex: 완벽 호환
  • 기타 AI 어시스턴트: 대부분 호환 (자연어 명령어 기반)

라이선스

MIT License

관련 스킬