AI 스킬마트스킬 둘러보기명령어프로그램배우기스킬이 뭐예요?
 
← 목록으로

SeeCode 다이어그램 생성기

짧은 JSON 스펙만 쓰면 45종 다이어그램을 애니메이션 HTML로 만들고 PNG·SVG·GIF·MP4로 내보내 주는 스킬.

디자인·UI중급★ 738⑂ 41AI 점수 10/10마지막 업데이트: 2026. 10. 26.

무엇을 해주나

  • 아키텍처, 플로차트, 시퀀스, 상태도, ER/DB 스키마, UML 클래스, 스윔레인, 타임라인/간트, 트리·조직도, 벤·사분면·피시본·워들리, 막대·선·산점·생키·트리맵·히트맵, 3D 아이소메트릭(가구·평면도·분해도)까지 45가지 유형을 지원합니다.
  • Claude는 SVG/HTML을 직접 쓰지 않고 컴팩트한 JSON 스펙만 작성합니다. 레이아웃·스타일·모션·검증·내보내기는 동봉된 seecode.mjs 스크립트가 처리합니다.
  • Mermaid, Graphviz/DOT, PlantUML, D2, draw.io, Excalidraw, SQL, CSV, OpenAPI를 가져와 깔끔한 다이어그램으로 다시 그립니다.
  • SC scan <dir>로 실제 코드베이스를 스캔해 모듈·임포트·인프라를 파일:라인 근거와 함께 도식화합니다.
  • 용도별 내보내기: --for pdf|docs|readme|slides|social|video 또는 --formats png,svg,gif,mp4.

이런 분께 추천

  • README·설계 문서·슬라이드에 넣을 시스템 구조도를 자주 그리는 개발자/아키텍트
  • 기존 Mermaid나 SQL 스키마를 보기 좋은 그림으로 바꾸고 싶은 분
  • 여행·이사·구직·예산처럼 일상 계획도 한 장으로 정리하고 싶은 일반 사용자

활용 예시

  1. "우리 서비스 결제 API 호출 순서를 시퀀스 다이어그램으로 그려줘" → 스펙 생성 → SC render spec.json → 인터랙티브 HTML.
  2. "이 Mermaid 코드를 README용 SVG로 바꿔줘" → SC import flow.mmd → 재작성 → SC export x.html --for readme.
  3. "sales.csv로 매출 막대그래프 만들고 PNG로 줘" → "data":"sales.csv" 스펙 → --formats png.

· · · 설치 가이드 · · ·

설치 없이 지금 한 번 써보기

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

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/Aryanutkarsh/SeeCode/HEAD/skills/seecode/SKILL.md

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

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

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

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

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

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

직접 명령으로 설치하기

git clone https://github.com/Aryanutkarsh/SeeCode.git /tmp/seecode && mkdir -p ~/.claude/skills && cp -r /tmp/seecode/skills/seecode ~/.claude/skills/

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

  1. Node.js가 설치돼 있는지 확인합니다: node -v (없으면 nodejs.org에서 LTS 설치).
  2. 저장소를 내려받습니다: git clone https://github.com/Aryanutkarsh/SeeCode.git /tmp/seecode
  3. 스킬 폴더를 통째로 복사합니다(스크립트·references 포함 필수): mkdir -p ~/.claude/skills && cp -r /tmp/seecode/skills/seecode ~/.claude/skills/
  4. Claude Code를 재시작한 뒤 "시스템 아키텍처 다이어그램 그려줘"처럼 요청하면 스킬이 자동 발동합니다.
  5. 첫 실행 시 설정 질문이 뜨면 SC config init --use global 로 저장하고, GIF/MP4가 필요하면 SC doctor로 외부 도구 설치 여부를 점검하세요.
GitHub에서 원본 보기 ↗라이선스: MIT