SeeCode은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

SeeCode은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

SeeCode은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. SeeCode의 마지막 커밋은 2026년 10월 17일입니다.

SeeCode은(는) 어디에 사용할 수 있나요?

코딩 에이전트와 함께 작업하면서 팀원에게 서비스 아키텍처나 요청 흐름 설명하기 기존 Mermaid 또는 draw.io 다이어그램을 프레젠테이션 자료나 디자인 문서에 어울리는 세련된 버전으로 바꾸기 일관된 브랜드 스타일로 슬라이드, Confluence 또는 README용 다이어그램 만들기 원본 데이터를 모델에 전달하지 않고 CSV 데이터로 차트 만들기

SeeCode은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/Aryanutkarsh/SeeCode

Aryanutkarsh/SeeCode

짧은 JSON 사양을 HTML, SVG, PNG, GIF, MP4로 내보낼 수 있는 애니메이션·탐색형 다이어그램으로 바꿔 주는 에이전트 스킬

대체할 수 있는 제품:Lucidchart Miro

GitHub에서 보기

스타: 656
포크: 35
열린 이슈: 0
마지막 커밋: 그저께

어떤 프로젝트인가요?

SeeCode는 Claude Code 및 기타 코딩 에이전트를 위한 스킬입니다. 표현하려는 시스템이나 프로세스를 설명하면 에이전트가 짧은 JSON 사양을 작성하고, SeeCode가 이를 하나의 독립 실행형 HTML 다이어그램으로 렌더링합니다. 뷰어에서는 연결 관계를 호버로 추적하고, 클릭해 세부 정보 패널에 초점을 맞추고, 두 노드 사이의 경로를 재생하고, 레이어를 필터링하고, 단계별 프레젠테이션을 진행할 수 있습니다.

이 프로젝트는 아키텍처, 시퀀스, 플로차트, ER, 상태, 간트, 칸반, UML 클래스, Sankey와 여러 아이소메트릭 드로잉을 포함해 약 45가지 다이어그램 유형을 지원합니다. 차트는 CSV 또는 JSON 파일에서 값을 읽어올 수 있습니다. 기존 Mermaid, Graphviz, PlantUML, D2, draw.io, Excalidraw, BPMN, SQL, Prisma, DBML, OpenAPI 소스를 SeeCode 스타일로 다시 그릴 수 있습니다. 웹사이트나 디자인 토큰에서 브랜드 색상과 글꼴을 학습할 수 있으며, 라이트·다크 테마도 기본 제공됩니다.

SVG, PNG, JPEG, GIF, MP4로 내보낼 수 있습니다. 브라우저의 Export 메뉴는 별도 설치가 필요 없으며, CLI 도구를 사용하려면 Node 20 이상이 필요합니다. 래스터 및 동영상 형식에는 로컬 Chrome 또는 Edge를 사용합니다.

핵심 기능

01짧은 JSON 사양으로 애니메이션과 상호작용을 지원하는 HTML 다이어그램 생성
02아키텍처 및 시퀀스 다이어그램부터 차트와 아이소메트릭 드로잉까지 약 45가지 다이어그램 유형 지원
03Mermaid, Graphviz, PlantUML, D2, draw.io, Excalidraw 등 다양한 형식을 가져와 다시 그리기
04웹사이트나 디자인 토큰에서 브랜드 색상과 글꼴을 학습하고 라이트·다크 테마 제공
05SVG, PNG, JPEG, GIF, MP4로 내보내기

활용 사례

코딩 에이전트와 함께 작업하면서 팀원에게 서비스 아키텍처나 요청 흐름 설명하기
기존 Mermaid 또는 draw.io 다이어그램을 프레젠테이션 자료나 디자인 문서에 어울리는 세련된 버전으로 바꾸기
일관된 브랜드 스타일로 슬라이드, Confluence 또는 README용 다이어그램 만들기
원본 데이터를 모델에 전달하지 않고 CSV 데이터로 차트 만들기

토픽

#diagrams #agent-skills #claude-code #architecture-diagram #data-visualization #svg #mermaid #ai-agents #claude-skills #codex

자주 묻는 질문

SeeCode은(는) 무엇인가요?: 짧은 JSON 사양을 HTML, SVG, PNG, GIF, MP4로 내보낼 수 있는 애니메이션·탐색형 다이어그램으로 바꿔 주는 에이전트 스킬 SeeCode는 Claude Code 및 기타 코딩 에이전트를 위한 스킬입니다. 표현하려는 시스템이나 프로세스를 설명하면 에이전트가 짧은 JSON 사양을 작성하고, SeeCode가 이를 하나의 독립 실행형 HTML 다이어그램으로 렌더링합니다. 뷰어에서는 연결 관계를 호버로 추적하고, 클릭해 세부 정보 패널에 초점을 맞추고, 두 노드 사이의 경로를 재생하고, 레이어를 필터링하고, 단계별 프레젠테이션을 진행할 수 있습니다.
SeeCode은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?: SeeCode은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
SeeCode은(는) 아직 유지보수되고 있나요?: 활발히 유지보수 중. SeeCode의 마지막 커밋은 2026년 10월 17일입니다.
SeeCode은(는) 어디에 사용할 수 있나요?: 코딩 에이전트와 함께 작업하면서 팀원에게 서비스 아키텍처나 요청 흐름 설명하기 기존 Mermaid 또는 draw.io 다이어그램을 프레젠테이션 자료나 디자인 문서에 어울리는 세련된 버전으로 바꾸기 일관된 브랜드 스타일로 슬라이드, Confluence 또는 README용 다이어그램 만들기 원본 데이터를 모델에 전달하지 않고 CSV 데이터로 차트 만들기
SeeCode은(는) 어디서 받을 수 있나요?: 소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/Aryanutkarsh/SeeCode

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.