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

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

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

활발히 유지보수 중. diagram-design의 마지막 커밋은 2026년 10월 16일입니다.

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

기술 블로그 게시물이나 문서 페이지에 넣을 아키텍처 또는 시퀀스 다이어그램 만들기 Mermaid나 draw.io 다이어그램을 프레젠테이션에 쓸 세련된 시각 자료로 바꾸기 프로젝트 전반에서 회사 웹사이트 브랜드에 맞춰 다이어그램의 일관성 유지하기 프레젠테이션에 쓸 사분면, 벤 다이어그램, 타임라인 그래픽 만들기

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

skills CLI로 스킬을 설치합니다: npx skills add cathrynlavery/diagram-design Claude Code에서 플러그인 마켓플레이스를 추가합니다(선택 사항): /plugin marketplace add cathrynlavery/diagram-design Claude Code에서 플러그인을 설치합니다(선택 사항): /plugin install diagram-design@diagram-design 에이전트에게 자연스러운 말로 다이어그램을 요청하면 브라우저에서 열 수 있는 .html 파일 하나를 작성합니다

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

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

cathrynlavery/diagram-design

45가지 다이어그램 유형과 브랜드 맞춤을 지원하는 단일 HTML·SVG 에디토리얼 다이어그램 에이전트 스킬입니다.

대체할 수 있는 제품:Figma Lucidchart

GitHub에서 보기 웹사이트

스타: 58,066
포크: 3,725
열린 이슈: 47
마지막 커밋: 4일 전

어떤 프로젝트인가요?

Diagram Design은 Claude Code, Codex, GitHub Copilot, Cursor, Pi 같은 코딩 에이전트를 위한 스킬입니다. 원하는 다이어그램을 일상적인 문장으로 설명하면 에이전트가 45가지 유형 중 하나를 골라 인라인 SVG를 포함한 단일 HTML 파일을 작성합니다. 빌드 과정이나 JavaScript 없이 브라우저에서 바로 열 수 있습니다.

이 스킬은 절제된 포인트 색상, 1px 가는 선, 그림자 없음, 4px 그리드에 맞춘 좌표라는 일관된 에디토리얼 스타일을 적용합니다. 온보딩 과정에서 웹사이트의 색상과 글꼴을 가져와 이후 모든 다이어그램에 브랜드를 반영할 수 있으며, 토큰을 작성하기 전에 WCAG AA 명암 대비를 확인합니다.

기존 draw.io, Mermaid, Excalidraw 파일도 같은 스타일로 다시 그릴 수 있고, 다이어그램을 SVG나 PNG로 내보낼 수 있습니다. 레이아웃은 자동 엔진이 아니라 에이전트가 결정하므로 실행할 때마다 결과가 달라질 수 있습니다.

핵심 기능

01브라우저에서 바로 열 수 있는 인라인 SVG 포함 단일 HTML 파일을 생성합니다.
02아키텍처, 시퀀스, 플로차트, ER, 간트 차트, 차트 등 45가지 다이어그램 유형을 지원합니다.
03웹사이트에서 색상 팔레트와 글꼴을 추출해 모든 다이어그램에 브랜드를 적용합니다.
04기존 draw.io, Mermaid, Excalidraw 파일을 같은 스타일로 다시 그립니다.
05선택적으로 오프라인 글꼴 모드를 사용해 다이어그램을 SVG나 PNG로 내보냅니다.

활용 사례

기술 블로그 게시물이나 문서 페이지에 넣을 아키텍처 또는 시퀀스 다이어그램 만들기
Mermaid나 draw.io 다이어그램을 프레젠테이션에 쓸 세련된 시각 자료로 바꾸기
프로젝트 전반에서 회사 웹사이트 브랜드에 맞춰 다이어그램의 일관성 유지하기
프레젠테이션에 쓸 사분면, 벤 다이어그램, 타임라인 그래픽 만들기

빠른 시작

1
skills CLI로 스킬을 설치합니다
npx skills add cathrynlavery/diagram-design
2
Claude Code에서 플러그인 마켓플레이스를 추가합니다(선택 사항)
/plugin marketplace add cathrynlavery/diagram-design
3
Claude Code에서 플러그인을 설치합니다(선택 사항)
/plugin install diagram-design@diagram-design
4
에이전트에게 자연스러운 말로 다이어그램을 요청하면 브라우저에서 열 수 있는 .html 파일 하나를 작성합니다

사용 전 알아둘 점

출력 품질은 사용하는 모델에 따라 달라지며, 같은 프롬프트로도 레이아웃이 다르게 생성될 수 있습니다.
출력은 편집 가능한 소스 형식이 아니므로 diff를 확인할 텍스트도, 직접 편집할 캔버스도 없습니다.
README에 따르면 관리형 설치를 통해 스타일 가이드를 사용자 지정한 경우 패키지 업데이트로 스킬의 스타일 가이드가 대체될 수 있습니다.

토픽

#agent-skills #diagrams #svg #data-visualization #claude-code #html #mermaid #codex #drawio

자주 묻는 질문

diagram-design은(는) 무엇인가요?: 45가지 다이어그램 유형과 브랜드 맞춤을 지원하는 단일 HTML·SVG 에디토리얼 다이어그램 에이전트 스킬입니다. Diagram Design은 Claude Code, Codex, GitHub Copilot, Cursor, Pi 같은 코딩 에이전트를 위한 스킬입니다. 원하는 다이어그램을 일상적인 문장으로 설명하면 에이전트가 45가지 유형 중 하나를 골라 인라인 SVG를 포함한 단일 HTML 파일을 작성합니다. 빌드 과정이나 JavaScript 없이 브라우저에서 바로 열 수 있습니다.
diagram-design은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?: diagram-design은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
diagram-design은(는) 아직 유지보수되고 있나요?: 활발히 유지보수 중. diagram-design의 마지막 커밋은 2026년 10월 16일입니다.
diagram-design은(는) 어디에 사용할 수 있나요?: 기술 블로그 게시물이나 문서 페이지에 넣을 아키텍처 또는 시퀀스 다이어그램 만들기 Mermaid나 draw.io 다이어그램을 프레젠테이션에 쓸 세련된 시각 자료로 바꾸기 프로젝트 전반에서 회사 웹사이트 브랜드에 맞춰 다이어그램의 일관성 유지하기 프레젠테이션에 쓸 사분면, 벤 다이어그램, 타임라인 그래픽 만들기
diagram-design는 어떻게 설치하나요?: skills CLI로 스킬을 설치합니다: npx skills add cathrynlavery/diagram-design Claude Code에서 플러그인 마켓플레이스를 추가합니다(선택 사항): /plugin marketplace add cathrynlavery/diagram-design Claude Code에서 플러그인을 설치합니다(선택 사항): /plugin install diagram-design@diagram-design 에이전트에게 자연스러운 말로 다이어그램을 요청하면 브라우저에서 열 수 있는 .html 파일 하나를 작성합니다
diagram-design은(는) 어디서 받을 수 있나요?: 소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/cathrynlavery/diagram-design

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