바오위 다이어그램 (SVG 도식 생성기)

아키텍처·플로차트·시퀀스·마인드맵 등 9종 도식을 다크 테마 SVG 한 파일로 만들어 주는 스킬입니다.

디자인·UI중급★ 24,749⑂ 2,764AI 점수 8/10마지막 업데이트: 2026. 7. 4.

무엇을 해주나

요청한 내용을 분석해 어떤 종류의 도식이 적합한지 판단하고, 자체 완결형(single file) SVG 파일로 그려 줍니다.

지원 유형: 아키텍처, 플로차트, 시퀀스, 구조도(클래스/ER/조직도), 마인드맵, 타임라인, 개념 일러스트, 상태 머신, 데이터 흐름도
다크 슬레이트 배경 + 격자 패턴, 역할별 시맨틱 색상(프론트=시안, 백엔드=에메랄드, DB=바이올렛, 보안=로즈 등)
박스 높이·최소 간격·범례 위치·viewBox 여백까지 규칙으로 못 박아 겹침 없는 결과물
반투명 박스 아래로 화살표가 비쳐 보이는 문제를 막는 "불투명 마스크 사각형" 기법 적용
저장 후 scripts/main.ts로 @2x PNG까지 자동 변환

이런 분께 추천

설계 문서·README·기술 블로그에 넣을 그림을 매번 Figma로 그리기 지친 개발자
Mermaid 스타일의 밋밋한 도식 대신 발표용 퀄리티가 필요한 테크리드/아키텍트
회의록·요구사항 문서를 바로 시각화하고 싶은 기획자, 데브렐 담당자

활용 예시

"우리 서비스의 AWS 아키텍처 그려줘 — ALB, ECS 3개 서비스, RDS, Redis, S3" → 리전 경계 박스와 계층별 데이터 흐름이 들어간 아키텍처 SVG + @2x PNG 생성
"결제 실패 재시도 로직을 플로차트로" → 마름모 분기에 Yes/No 라벨, 정상 경로는 하이라이트 색으로 강조
스펙 문서(.md)를 첨부하고 "로그인 흐름을 시퀀스 다이어그램으로 만들어줘" → 생명선·활성화 바가 있는 시퀀스 도식을 원본 파일 옆 diagram/ 폴더에 저장

· · · 설치 가이드 · · ·

Claude 앱에 설치 (터미널 필요 없음)

아래 버튼으로 ZIP 파일을 받으세요.
Claude 설정 → Capabilities에서 '코드 실행 및 파일 생성'을 켭니다. (한 번만)
Claude에서 Customize → Skills → + → '스킬 업로드'를 누르고 받은 ZIP을 올립니다.

↓ ZIP 내려받기

Claude Code에 설치

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

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

직접 명령으로 설치하기

git clone https://github.com/JimLiu/baoyu-skills.git && mkdir -p ~/.claude/skills && cp -r baoyu-skills/skills/baoyu-diagram ~/.claude/skills/

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

터미널을 엽니다. (macOS는 터미널, Windows는 WSL 또는 Git Bash 권장)
스킬 폴더가 없으면 만듭니다: mkdir -p ~/.claude/skills
저장소를 내려받습니다: git clone https://github.com/JimLiu/baoyu-skills.git
이 스킬만 복사합니다: cp -r baoyu-skills/skills/baoyu-diagram ~/.claude/skills/
(PNG 변환을 쓰려면) bun을 설치합니다: curl -fsSL https://bun.sh/install | bash. 설치가 어렵다면 npx가 있으면 자동으로 대체 실행됩니다.
Claude Code를 재시작하고 "아키텍처 다이어그램 그려줘"처럼 요청하면 스킬이 자동으로 호출됩니다.
결과물은 diagram/ 하위 폴더에 .svg와 @2x.png로 저장됩니다.

GitHub에서 원본 보기 ↗라이선스: MIT