diagram-design

diagram-design

에이전트로 그리는 편집 도식

누가 쓰나기획자 · 기술 문서 담당자 · 마케터

개발자용

편집 디자인 관점의 도형 38종을 HTML·SVG로 만들어 줍니다.

★ 40.2k▲ +548 / 7d최근 14일 · 하루 별 증가기준 09-16 21:00 UTC

별 40,194 · GitHub에서 09-15 19:33 UTC 확인 GitHub 확인 30시간 지연 · 그 뒤 GH Archive 관측 +31 포함 · 7일 +548은 GH Archive 관측 (기준 09-16 21:00 UTC)

스킬이 만든 아키텍처 도식 예시. 브라우저→Cloudflare→Astro 원본→콘텐츠 묶음으로 이어지는 상자와 화살표, 아래 범례가 있습니다.

TESIGN TAKE

에이전트 도식이 늘 비슷해지는 문제를 '유형 39종 + 편집 디자인 규칙'으로 푼 점이 실용적입니다.

한눈에 보는 사실

왜 볼 만한가

에이전트에 도식을 맡기면 대개 어디서 본 듯한 기본 다이어그램이 돌아옵니다. diagram-design은 편집 디자인 관점에서 정리한 38가지 도형 종류를 스킬로 묶어 Claude Code·Codex·Pi에서 골라 쓰게 합니다. 결과는 의존성 없는 HTML과 SVG라 문서에 그대로 넣을 수 있습니다. MIT 라이선스로 공개돼 있습니다.

이걸로 무엇을 만들 수 있나

보고서에 그대로 넣는 도식 세트
제품 문서에 쓰는 다이어그램 스타일 기준
발표 자료에 붙일 SVG 도형 묶음

누구에게 맞나

기획자: 보고서·제안서에 넣을 도식이 필요할 때
기술 문서 담당자: 제품 문서의 도식 스타일을 통일할 때
마케터: 발표 자료용 SVG 도형이 필요할 때

5분 안에 시작하기

# Claude Code 프롬프트에서:
# /plugin marketplace add cathrynlavery/diagram-design
# /plugin install diagram-design@diagram-design
# Codex:
$ codex plugin marketplace add cathrynlavery/diagram-design
$ codex plugin add diagram-design@diagram-design

주의할 점

Claude Code는 서드파티 마켓플레이스 자동 업데이트가 기본 꺼져 있습니다
Figma 같은 편집기가 아니라 에이전트에 요청해 생성하는 방식입니다

영수증

비슷한 도구

디자인 분야에서 ★ 총합 순으로 최대 5개. 편집 항목 먼저, 그다음 저장소 카드이며 이 항목은 강조되어 있습니다. 순위와 같은 저장 스냅샷에서 뽑은 비교표이고 추천은 아닙니다. 기준 09-16 21:00 UTC

이름	★ 총합	▲ 7d	라이선스	플랫폼	마지막 push
Taste-Skill에이전트의 화면 디자인 감각	★ 87.4k	▲ +265	MIT허용적	—	2026-08-24
archify에이전트 사용자용 구조도 생성	★ 63.6k	▲ +1,307	MIT허용적	—	2026-09-15
diagram-design에이전트로 그리는 편집 도식이 항목	★ 40.2k	▲ +548	MIT허용적	—	2026-09-15
toeverything/affine카드	★ 72.5k	▲ +8	라이선스 미확인미확인	—	2026-09-13
penpot/penpot카드	★ 59.9k	▲ +10	MPL-2.0허용적	—	2026-09-11