클로드스킬마트스킬 둘러보기바로 쓰는 문장영상으로 배우기터미널 사용법스킬이 뭐예요?
 
← 목록으로

Excalidraw 다이어그램 생성기

손그림 느낌의 Excalidraw 다이어그램을 JSON으로 직접 만들고 PNG/SVG로 내보내주는 스킬.

디자인·UI중급★ 185⑂ 18AI 점수 10/10마지막 업데이트: 2026. 7. 16.

무엇을 해주나

  • 사용자가 "다이어그램", "플로차트", "아키텍처 그려줘" 같은 요청을 하면 .excalidraw JSON 파일을 직접 생성합니다.
  • 3개 이상 구성요소가 등장하는 시스템 설명처럼 시각화가 도움이 되는 상황에서는 알아서 먼저 제안하기도 합니다.
  • 내보내기는 두 가지: 설치가 필요 없는 Kroki API(curl, SVG 전용)와 로컬 excalidraw-brute-export-cli(Firefox 기반, PNG + SVG).
  • 색상 팔레트(의미별 8종), 폰트 크기 위계(28→14px), 요소 간 간격표, 화살표 스타일 의미 등 디자인 규칙이 표로 정리되어 있어 결과물이 들쭉날쭉하지 않습니다.
  • 내보낸 PNG를 실제로 열어보고 텍스트 잘림·박스 겹침·도형을 뚫고 지나가는 화살표를 잡아내는 렌더 검증 루프와, 사용자 피드백을 최소 수정으로 반영하는 리뷰 루프까지 포함합니다.
  • AWS/Azure/GCP/UML 아이콘이 필요하면 커뮤니티 라이브러리를 검색·병합하는 scripts/excalidraw_lib.py 헬퍼를 사용합니다.

이런 분께 추천

  • 설계 문서나 기술 블로그에 들어갈 아키텍처 도식을 자주 그려야 하는 개발자·아키텍트
  • Mermaid의 자동 배치가 답답해서 위치·색을 직접 통제하고 싶은 분
  • 발표 자료용으로 딱딱하지 않은 스타일의 다이어그램이 필요한 기획자·PM

활용 예시

  1. "우리 서비스의 인증 흐름을 아키텍처 다이어그램으로 그려줘" → API Gateway·Auth 서비스·DB를 의미별 색으로 배치한 .excalidraw 생성 후 PNG 내보내기.
  2. "주문 처리 프로세스를 플로차트로" → 시작/종료는 타원, 분기는 마름모, Yes는 앞으로 No는 아래로 배치한 규칙 기반 플로차트.
  3. "이 아이디어를 마인드맵으로 정리해줘" → 중심 노드 기준 반지름 280px 원 위에 1단계 가지를 균등 배치해 선이 꼬이지 않는 마인드맵.

· · · 설치 가이드 · · ·

설치 없이 지금 한 번 써보기

아래를 Claude에 붙여넣으면 설치하지 않고도 이 스킬을 그대로 씁니다.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/Agents365-ai/excalidraw-skill/HEAD/skills/excalidraw-skill/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

Claude가 링크를 열지 못하면, 링크를 직접 열어 내용을 복사해 붙여넣으세요.

↓ 쓸 만하면 아래에서 ZIP을 받아 설치하세요. 그러면 매번 붙여넣지 않아도 알아서 작동합니다.

Claude 앱에 설치 (터미널 필요 없음)
  1. 아래 버튼으로 ZIP 파일을 받으세요.
  2. Claude 설정 → Capabilities에서 '코드 실행 및 파일 생성'을 켭니다. (한 번만)
  3. Claude에서 Customize → Skills → + → '스킬 업로드'를 누르고 받은 ZIP을 올립니다.
↓ ZIP 내려받기
Claude Code에 설치

Claude에게 맡기기 — 아래 문장을 Claude Code에 붙여넣으세요

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 Agents365-ai/excalidraw-skill 의 skills/excalidraw-skill 폴더를 내 ~/.claude/skills/excalidraw/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.

직접 명령으로 설치하기

git clone https://github.com/Agents365-ai/excalidraw-skill.git /tmp/excalidraw-skill && mkdir -p ~/.claude/skills && cp -r /tmp/excalidraw-skill/skills/excalidraw-skill ~/.claude/skills/

⚠ 제3자가 만든 스킬입니다. 설치 전 원본 저장소를 한 번 확인하세요.

  1. 터미널을 엽니다.
  2. 저장소를 내려받습니다: git clone https://github.com/Agents365-ai/excalidraw-skill.git /tmp/excalidraw-skill
  3. 스킬 폴더를 복사합니다: mkdir -p ~/.claude/skills && cp -r /tmp/excalidraw-skill/skills/excalidraw-skill ~/.claude/skills/
  4. curl --version으로 curl이 있는지 확인합니다. (Kroki로 SVG만 뽑을 거라면 여기서 끝입니다.)
  5. PNG 출력과 렌더 검증까지 쓰려면: npm install -g excalidraw-brute-export-cli 후 npx playwright install firefox
  6. macOS 사용자는 SKILL.md의 sed 한 줄 패치(Control→Meta 키 변경)를 1회 적용합니다.
  7. Claude Code를 재시작하고 "아키텍처 다이어그램 그려줘"라고 요청해 동작을 확인합니다.
GitHub에서 원본 보기 ↗라이선스: MIT