bybit-exchange/svg-diagram

어떤 프로젝트인가요?

핵심 기능

• 01viewBox 여백, 상자 높이, 연결선 기하를 다루는 SVG 요소 직접 배치 레이아웃 규칙.
• 02완성된 SVG 파일이 공통 스타일을 따르는지 검사하는 무의존성 svg-lint 도구.
• 03발견된 값과 기대한 값을 표시하고 수정 제안을 제공하는 검사 결과.
• 04레이블 넘침을 검사하기 위한 라틴 문자 및 CJK 문자 너비 표.
• 05CSS 클래스 없이 프레젠테이션 속성을 통해 적용하는 의미 기반 색상 조합 5종.

활용 사례

• 문서 전체에서 일관된 아키텍처 다이어그램이나 시퀀스 다이어그램을 코딩 에이전트가 생성하도록 하기.
• 중국어 레이블이 포함된 다이어그램을 글리프 누락 문제 없이 Markdown 문서에 삽입하기.
• 모든 좌표가 명시적인 값이므로 SVG 다이어그램을 텍스트 diff로 검토하기.

빠른 시작

1. 1

   에이전트에 스킬 설치하기

   npx skills add bybit-exchange/svg-diagram -g
2. 2

   다이어그램에 린터 실행하기(설치 불필요)

   node ~/.claude/skills/svg-diagram/tools/svg-lint/bin/svg-lint.mjs diagram.svg

사용 전 알아둘 점

• !린터는 메인테이너가 수동으로 사용하는 도구이며, 자동으로 실행되지 않습니다.
• !Claude.ai 사용자는 스킬 텍스트만 제공받습니다. 린터를 사용하려면 로컬 Node가 필요합니다.

토픽

자주 묻는 질문

svg-diagram은(는) 무엇인가요?

코딩 에이전트가 일관된 스타일로 요소를 직접 배치한 SVG 다이어그램을 그리도록 돕는 에이전트 스킬이자 무의존성 린터입니다. svg-diagram은 Claude Code, Codex, opencode 같은 코딩 어시스턴트를 위한 에이전트 스킬입니다. 자동 레이아웃 결과물 대신 요소를 명시적으로 배치해 아키텍처, 플로차트, 시퀀스, 데이터 흐름, 라이프사이클 다이어그램을 일반 SVG로 그리는 데 필요한 레이아웃 계산법, 색상 체계, 타이포그래피 규칙을 제공합니다.

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

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

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

6개월 이내 업데이트. svg-diagram의 마지막 커밋은 2026년 9월 3일입니다.

svg-diagram은(는) 어디에 사용할 수 있나요?

문서 전체에서 일관된 아키텍처 다이어그램이나 시퀀스 다이어그램을 코딩 에이전트가 생성하도록 하기. 중국어 레이블이 포함된 다이어그램을 글리프 누락 문제 없이 Markdown 문서에 삽입하기. 모든 좌표가 명시적인 값이므로 SVG 다이어그램을 텍스트 diff로 검토하기.

svg-diagram는 어떻게 설치하나요?

에이전트에 스킬 설치하기: npx skills add bybit-exchange/svg-diagram -g 다이어그램에 린터 실행하기(설치 불필요): node ~/.claude/skills/svg-diagram/tools/svg-lint/bin/svg-lint.mjs diagram.svg

svg-diagram은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/bybit-exchange/svg-diagram