Communitygithub.com

hraness/graphics

Graphics는 작고 명확한 다이어그램을 위한 헤드리스 CLI 및 에이전트 스킬입니다.

graphics란 무엇인가요?

이 스킬은 개발자와 AI 에이전트가 코드 기반으로 일관성 있고 정확한 다이어그램을 생성하고 유지할 수 있도록 지원합니다. 'graphics' CLI를 결정론적 어댑터로 사용하여 사용자가 제공한 `.diagram.json` 소스 파일을 기반으로 `.light.svg`, `.dark.svg`, `.light.png`, `.dark.png`, `.tldr` 등의 출력물을 생성합니다. 특히 사용자의 프롬프트를 완전한 내용 명세로 취급하며, 레이블, 값, 관계, 상대적 크기 등을 그대로 보존하고 불필요한 장식을 추가하지 않습니다. 이 스킬은 Claude Code, Cursor, Codex 등 다양한 AI 에이전트 플랫폼에서 사용할 수 있도록 설계되었으며, 지식 베이스(kb/)와의 연동을 지원하여 다이어그램과 관련 노트를 체계적으로 관리할 수 있습니다. 시각적 커뮤니케이션 원칙(visual-communication.md)을 참조하여 둥근 사각형, 적절한 간격(96px 이상), 일관된 스타일링, 최소한의 색상 사용 등 명확하고 전문적인 다이어그램 작성을 위한 구체적인 가이드라인을 제공합니다. 또한 tldraw 파일(.tldr)을 생성하여 사용자가 직접 캔버스 편집을 할 수 있도록 지원하며, 엄격한 검증(`graphics check --strict`)과 렌더링 과정을 통해 품질을 보장합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add hraness/graphics

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

명확한 다이어그램 만들기

설치된 graphics CLI를 결정론적 어댑터로 사용하세요. 작성된 .diagram.json 소스는 유지하고, .light.svg, .dark.svg, .light.png, .dark.png, .tldr는 교체 가능한 내보내기 파일로 취급하세요.

프롬프트를 문자 그대로 따르세요

사용자의 프롬프트를 완전한 내용 명세로 취급하세요.

  • 제공된 레이블, 값, 관계, 상대적 크기, 생략 사항을 보존하세요.
  • 해당 사실을 그리기 위해 필요한 중립적인 메커니즘만 추가하세요.
  • 제목, 부제목, 범례, 주석, 예시, 함의, 범주, 측정값, 눈금, 커넥터 또는 장식적 주장을 임의로 만들지 마세요.
  • 짧은 레이블을 문장으로 확장하지 마세요. 사용자가 제공한 한두 단어의 레이블을 선호하세요.
  • 업데이트할 때는 거부된 내용을 제거하고 새로운 설명으로 대체하지 마세요.

소스 찾기

  1. 로컬 저장소의 지침을 읽고 graphics.config.* 파일을 찾으세요.
  2. 새로 만들기 전에 기존에 동일한 주제의 .diagram.json 파일이 있는지 검색하세요.
  3. 생성된 이미지를 편집하거나 복제본을 만드는 대신 해당 소스를 업데이트하세요.
  4. kb/가 있는 지식 베이스에서는 kb/diagrams/<slug>.diagram.json을 사용하고 kb/notes/<slug>.md와 짝을 지으세요. 렌더링된 라이트/다크 이미지를 호스트의 규칙에 따라 임베드하거나 링크하고, 바이너리 캔버스가 아닌 노트를 통해 지식을 연결하세요.
  5. 지식 베이스 외부에서는 기본적으로 diagrams/<slug>.diagram.json을 사용하세요.

시각적 구성

다이어그램을 만들거나 실질적으로 재설계하기 전에 visual-communication.md를 읽으세요.

다음 기본 설정을 깊이 적용하세요:

  • 일반적인 개념에는 둥근 사각형을 사용하세요. 동등한 역할에는 동일한 크기, 반경, 선 두께, 아이콘 크기 및 레이블 처리를 적용하세요.
  • 연결된 도형 사이에는 최소 96px, 가급적 120–200px의 간격을 두어 화살표가 연결부가 아닌 관계로 읽히도록 하세요.
  • 아이콘은 해당 의미적 도형 내부에 직접 배치하세요. 테두리가 있는 아이콘 타일을 테두리가 있는 다른 카드 안에 넣지 마세요.
  • 프롬프트가 추상화를 허용하는 경우 3~7개의 기본 요소를 사용하세요.
  • 명확한 읽기 순서를 정하고 동등한 요소들을 공유된 그리드에 정렬하세요.
  • 그룹을 구분할 때는 테두리, 색상 또는 문장보다 여백을 먼저 사용하세요.
  • 최대 하나의 의미적 구분에만 색상을 사용하세요. 프롬프트가 제공하지 않은 차이를 암시하는 임의의 크기나 스타일 변경을 절대 하지 마세요.
  • 아이콘은 보조적으로 유지하세요: 레이블이 여전히 의미를 전달해야 합니다.
  • 객체당 하나의 가시적 경계와 축 또는 커넥터당 하나의 가시적 선을 선호하세요.

이러한 선호 사항을 충족시키기 위해 리터럴 데이터를 '개선'하지 마세요. 프롬프트가 우선입니다.

작성 및 렌더링

공개 스키마 URL을 사용하거나 시작 파일을 위해 graphics init을 실행하세요:

graphics check diagrams/<slug>.diagram.json --strict
graphics render diagrams/<slug>.diagram.json

렌더 명령은 일관된 동일-줄기 내보내기 파일을 덮어씁니다. 레이아웃이나 대비가 확실하지 않은 경우 라이트 및 다크 출력물을 모두 검사하세요. 유용한 린트 결과를 모두 해결하고, 소스를 변경한 후 다시 렌더링하세요.

저장소가 자체 글꼴이나 아이콘 패키지를 사용하는 경우 customization.md를 읽으세요. MonoLisa 또는 다른 라이센스가 있는 글꼴을 저장소에 추가하지 마세요. 기본 렌더링은 시스템 산세리프 스택을 사용합니다.

tldraw를 의도적으로 사용하세요

생성된 .tldr 파일은 편집 가능한 교환 형식이며 tldraw SDK나 데스크탑 앱이 없어도 만들 수 있습니다. 사용자가 직접 캔버스 편집을 원할 때 tldraw Offline에서 엽니다:

graphics open diagrams/<slug>.tldr

선택적 앱이 없는 경우 graphics desktop install이 현재 공식 릴리스를 다운로드하고, 게시된 SHA-256 다이제스트를 확인하며, 플랫폼 설치 프로그램을 실행합니다. 앱은 .tldr을 저장되지 않은 문서로 가져옵니다; 거기에 저장하여 최신 네이티브 .tldraw 번들을 만드세요. 네이티브 .tldraw ZIP/SQLite 번들을 직접 덮어쓰지 마세요.

검증

  1. graphics check <source> --strict를 실행하세요.
  2. graphics render <source>를 실행하세요.
  3. 소스 옆 또는 요청된 출력 디렉토리에 다섯 개의 아티팩트가 모두 존재하는지 확인하세요.
  4. 라이트 및 다크 출력물을 실제 크기로 검사하세요.
  5. 동등한 도형이 잘못된 차이를 암시하지 않는지 확인하세요.
  6. 커넥터가 길고, 의도된 도형에 .tldr에서 바인딩되어 있으며, 레이블을 교차하지 않는지 확인하세요.
  7. 동반 노트가 필요한 경우 해당 경로와 시각적 참조를 확인하세요.

관련 스킬