diagram-design

에이전트 스킬로, 다이어그램을 하나의 자체 완결형 HTML + SVG 파일로, 당신의 브랜드에 맞춰 그립니다.
45가지 다이어그램 유형. 그림자 없음. Mermaid식 조잡함 없음.

Website · Gallery · Changelog

Install · What it makes · Quickstart · Match your brand · Import · Export · Contributing

npx skills add cathrynlavery/diagram-design

에이전트에게 평범한 말로 요청하세요:

"내 앱의 아키텍처 다이어그램을 만들어줘: 프론트엔드, 백엔드, 데이터베이스, Redis 캐시."
"Q2 프로젝트를 임팩트 대 노력 기준으로 보여주는 사분면이 필요해."
"401에서 토큰 갱신이 일어나는 bearer 호출의 시퀀스를 만들어줘."
"diagram-design을 https://yoursite.com 에 온보딩해줘" (당신의 팔레트와 폰트를 가져와서 이후의 모든 다이어그램이 당신의 사이트와 일치하게 합니다)

에이전트가 유형을 고르고, 계획을 밝히고, 더블클릭으로 열 수 있는 하나의 .html 파일을 작성합니다.

Install
Agent Skills를 읽는 모든 호스트에서 작동합니다. Cursor, Claude Code, Codex, Qoder, GitHub Copilot, Gemini CLI, Cline, Windsurf, Amp 포함:

npx skills add cathrynlavery/diagram-design
Claude Code에서는 플러그인 마켓플레이스를 통해 업데이트와 슬래시 명령을 받을 수 있습니다:

/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

공식 빌드는 이 저장소에서만 나옵니다. Cathryn Lavery의 회사인 LittleMight가 플러그인 디렉터리 목록을 게시합니다; 다른 이름으로 된 목록은 비공식 복사본입니다. PRIVACY.md에 스킬이 네트워크로 전송하는 내용이 나열되어 있습니다.

Claude Code : 자동 업데이트 켜기
설치 후 /plugin 을 실행하고, Marketplaces 를 열고, diagram-design 을 선택한 뒤 Enable auto-update 를 고르세요. Claude Code는 서드파티 마켓플레이스에 대해 기본적으로 자동 업데이트를 비활성화합니다; 이 토글 이후에는 시작 후 백그라운드에서 마켓플레이스와 설치된 플러그인을 새로고침합니다. 프롬프트가 나오면 /reload-plugins 를 실행하거나, 다음 세션이 업데이트를 로드하도록 두세요.

Cursor , Cline, Gemini CLI, Windsurf, Amp, Zed, Warp, Roo, Kilo 및 기타 Agent Skills 호스트
크로스 에이전트 skills CLI가 이 저장소를 해석하고, skills/diagram-design/SKILL.md 를 감지하며, 전체 스킬( references/ , assets/ , scripts/ )을 선택한 모든 호스트 루트에 설치합니다. Cursor의 경우도 포함:

npx skills add cathrynlavery/diagram-design
선택한 루트가 둘 이상의 skills 디렉터리로 해석되면, CLI가 설치 방법을 묻고 Symlink 를 권장합니다: 하나의 정본 복사본을 각 루트에 링크하여, 이후 업데이트가 한 번에 모두에 도달하도록 합니다. 대신 호스트별 독립 복사본을 원하면 --copy 를 전달하세요. 단일 디렉터리로 해석되는 선택은 복사됩니다, 왜냐하면 그 경우 구분이 무의미하기 때문입니다. 심볼릭 링크를 사용할 수 없는 경우(Developer Mode가 없는 Windows) CLI는 복사로 폴백하고 어떤 루트를 복사했는지 보고합니다.

이것은 아래 마켓플레이스와 별개인 독립 설치입니다: 마켓플레이스 업데이트를 자동으로 따르지 않습니다. 병합된 업데이트는 npx skills update diagram-design 으로 가져오세요. 또한 Agent Skill만 설치하므로, /export-diagram , /import-mermaid , /profile , /doctor 명령 표면은 네이티브 패키지에 남습니다. 아래 마켓플레이스 중 하나가 있는 호스트에서는 마켓플레이스를 선호하세요.

일회성 마이그레이션: 기존의 독립 npx skills add 복사본은 Codex 마켓플레이스를 자동으로 따르기 시작하지 않습니다. 그 독립 복사본을 제거한 뒤, Codex 마켓플레이스 명령을 사용하세요. 마찬가지로 개인 Cowork 복사본을 제거하고 조직의 마켓플레이스에서 Diagram Design을 재설치하세요. 이후의 마켓플레이스 버전 범프는 각 클라이언트의 네이티브 업데이트 경로를 통해 흐릅니다.

Codex
codex plugin marketplace add cathrynlavery/diagram-design
codex plugin add diagram-design@diagram-design
Codex는 시작 시 구성된 Git 마켓플레이스를 새로고침합니다. 즉시 가져오려면 codex plugin marketplace upgrade diagram-design 을 실행하고 새 세션을 시작하세요.

Qoder
저장소를 클론하고, 네이티브 플러그인을 검증하고, 로컬에 설치하세요:

git clone https://github.com/cathrynlavery/diagram-design.git
qoder plugins validate ./diagram-design
qoder plugins install ./diagram-design
qoder plugins list
Qoder는 정본 skills/diagram-design/ 트리와 공유 명령
정의를 직접 로드합니다; Qoder 전용 복사본은 유지되지 않습니다. Qoder IDE의 경우,
추적된 플러그인 표면으로부터 경계가 정해진 ZIP을 만들어
Extensions → Plugins → Add Plugins → Upload Plugin 을 통해 가져오세요:

git -C diagram-design archive --format=zip \
--output=../diagram-design-qoder.zip HEAD \
.qoder-plugin commands skills LICENSE
플러그인을 설치하거나 업데이트한 후 새 작업을 시작하세요.

GitHub Copilot
copilot plugin marketplace add cathrynlavery/diagram-design
copilot plugin install diagram-design@diagram-design
Copilot은 기존 저장소 마켓플레이스에서 공유 Diagram Design 스킬과 그 doctor, export, import, profile 기능을 설치합니다. copilot skill list (또는 대화형 세션에서 /skills )로 검색을 확인한 뒤, 자연어로 다이어그램을 요청하세요. 병합된 업데이트를 가져오려면 copilot plugin marketplace update diagram-design 을 실행한 뒤, copilot plugin update diagram-design@diagram-design 을 실행하세요.

Factory Droid
droid plugin marketplace add https://github.com/cathrynlavery/diagram-design
droid plugin install diagram-design@diagram-design --scope user
Droid는 Git 플러그인을 매니페스트의 표시 버전이 아니라 커밋으로 추적합니다. 병합된 업데이트를 가져오려면 droid plugin marketplace update diagram-design 을 실행한 뒤, droid plugin update diagram-design@diagram-design --scope user 를 실행하고 새 세션을 시작하세요.

Claude Cowork (조직 마켓플레이스)
조직 GitHub 마켓플레이스는 현재 비공개 또는 내부 저장소를 요구하므로, 먼저 이 공개 저장소를 조직 소유의 저장소로 미러링하세요. Organization settings → Plugins 에서 Add plugin → GitHub 를 선택하고, 그 미러를 연결한 뒤, 마켓플레이스 메뉴에서 Sync automatically 를 활성화하세요. 자동 동기화는 플러그인 버전 범프를 포함한 풀 리퀘스트가 미러의 기본 브랜치에 병합될 때 실행됩니다; 직접 푸시는 웹훅을 트리거하지 않습니다. 결과로 생긴 조직 마켓플레이스에서 Diagram Design을 설치하세요.

Pi
pi install https://github.com/cathrynlavery/diagram-design
열린 Pi 세션에서 /reload 를 실행하세요. Pi는 일치하는 다이어그램 요청에 스킬을 사용할 수 있게 합니다; 명시적으로 호출하려면 /skill:diagram-design 을 사용하세요. Pi는 또한 /export-diagram , /import-mermaid , /import-excalidraw , /profile , /doctor 프롬프트 템플릿을 로드합니다. 고정되지 않은 Git 설치는 의도된 것입니다: Pi에는 자동 패키지 새로고침이 없으므로, 병합된 업데이트를 가져오려면 pi update --extensions 를 실행하세요.

Kiro
저장소 하위 디렉터리 URL에서 Agent Skill을 가져오세요:

https://github.com/cathrynlavery/diagram-design/tree/main/skills/diagram-design

Kiro는 가져온 스킬을 워크스페이스의 경우 .kiro/skills/ 에, 전역의 경우 ~/.kiro/skills/ 에 복사하므로, 업데이트를 받으려면 URL을 다시 가져오세요. 리소스를 선언하는 커스텀 에이전트는 skill://diagram-design/**/SKILL.md 를 포함해야 합니다.

OpenCode
skills/diagram-design/ 를 프로젝트의 .opencode/skills/diagram-design 또는 전역의 ~/.config/opencode/skills/diagram-design 에 복사하거나 심볼릭 링크하세요. OpenCode에는 Diagram Design 마켓플레이스 패키지가 없습니다; 복사 설치본은 더 새로운 체크아웃에서 디렉터리를 교체할 때만 업데이트됩니다.

편집 가능한 설치 (클론에서 스타일 가이드 커스터마이즈)
관리형 설치는 편리하지만, references/style-guide.md 에 대한 변경은 패키지 업데이트로 대체될 수 있습니다. ~/.diagram-design/profiles/ 에 저장된 프로필은 업데이트에서 살아남고, .diagram-design 마커가 있는 프로젝트는 영향을 받지 않습니다. 작업 중인 스타일 가이드를 직접 커스터마이즈할 계획이라면 저장소를 클론하고 로컬 경로를 설치하세요:

git clone [email protected]:cathrynlavery/diagram-design.git ~ /code/diagram-design

# Pi: 체크아웃을 로컬 패키지로 등록
pi install ~ /code/diagram-design

# Claude Code: 내부 스킬을 심볼릭 링크
ln -s ~ /code/diagram-design/skills/diagram-design ~ /.claude/skills/diagram-design

# 기타 Agent Skills 호스트: 사용하는 루트만 생성
mkdir -p ~ /.agents/skills ~ /.cursor/skills ~ /.cline/skills ~ /.kiro/skills ~ /.config/opencode/skills ~ /.copilot/skills
ln -s ~ /code/diagram-design/skills/diagram-design ~ /.agents/skills/diagram-design
ln -s ~ /code/diagram-design/skills/diagram-design ~ /.cursor/skills/diagram-design
ln -s ~ /code/diagram-design/skills/diagram-design ~ /.cline/skills/diagram-design
ln -s ~ /code/diagram-design/skills/diagram-design ~ /.kiro/skills/diagram-design
ln -s ~ /code/diagram-design/skills/diagram-design ~ /.config/opencode/skills/diagram-design
ln -s ~ /code/diagram-design/skills/diagram-design ~ /.copilot/skills/diagram-design
공유 스킬은 skills/diagram-design/ 에 있습니다. Pi는 저장소의 표준 skills/ 패키지 디렉터리를 통해 이를 발견합니다; Claude Code, GitHub Copilot, Codex, Factory Droid, Cursor 및 기타 Agent Skills 호환 도구는 동일한 파일을 사용합니다.

How it compares

Mermaid / PlantUML
draw.io / Excalidraw
Diagram Design

만드는 방법
텍스트 작성
도형을 손으로 드래그
에이전트에게 설명

레이아웃
자동
수동
에이전트가 4px 그리드에 배치, 겹침과 잘림에 대한 CI 검사 포함

모양
렌더러의 테마
당신이 그린 그대로
하나의 확고한 편집 스타일, 당신의 브랜드에 맞춤

출력
GitHub에서 렌더링되는 텍스트
편집 가능한 .drawio 또는 .excalidraw 파일
인라인 SVG가 포함된 하나의 HTML 파일, SVG 또는 PNG로 내보내기 가능

나중에 변경
텍스트 편집
캔버스 편집
에이전트에게 다시 요청하거나, SVG를 편집

기존 다이어그램

Mermaid, draw.io, Excalidraw 파일을 다시 그림

단점은 실재합니다. 출력 품질은 함께 실행하는 모델에 달려 있고, 같은 프롬프트가 두 번 다르게 배치될 수 있습니다. 결과물은 편집 가능한 소스 형식이 아닙니다: 풀 리퀘스트에서 diff할 텍스트도, 상자를 드래그할 캔버스도 없습니다. Git에 살고 매 스프린트마다 바뀌는 문서에는 Mermaid가 여전히 더 나은 선택입니다. Diagram Design은 당신이 게시할 다이어그램을 위한 것입니다.

Why I built it
littlemight.com 의 블로그 글에 쓸, 정말 마음에 드는 다이어그램을 원했습니다. 필요할 때마다, 아키텍처 스케치든, 플로차트든, 가장 중요한 것들의 피라미드든, Claude에게 요청하면 사이트의 나머지와 전혀 닮지 않은 흔한 둥근 상자 같은 걸 돌려받곤 했습니다. Figma와 30분씩 씨름하거나, 다이어그램을 건너뛰거나 둘 중 하나였죠.

모델은 이미 내용을 이해하고 있었습니다. 빠져 있던 것은 취향이었고, 그래서 취향을 적어 내려갔습니다: 중요한 한두 가지를 위한 하나의 액센트 색, 1px 헤어라인, 그림자 없음, 모든 좌표를 4px 그리드에.

가장 품질을 높이는 행동은 보통 삭제입니다. 모든 노드는 제자리를 얻어야 합니다. 액센트 색은 독자가 가장 먼저 봐야 할 한두 가지를 위해 남겨둡니다. 목표 밀도: 4/10.

What it makes
45가지 다이어그램 유형, 각각 세 가지 정적 변형으로: 미니멀 라이트, 미니멀 다크, 풀 에디토리얼. 어느 것이든 브라우저에서 직접 여세요. 빌드 단계, JavaScript, 외부 이미지 의존성이 없습니다.

Architecture
컴포넌트 + 연결

IT current-state
레거시 환경 + 현대화

Flowchart
의사결정 로직

Sequence
시간에 따른 메시지

State machine
상태 + 전이

ER / data model
엔티티 + 필드

Timeline
축 위의 이벤트

Swimlane
교차 기능 흐름

Quadrant
2축 포지셔닝

Radar / spider
다축 비교

Loop / flywheel
강화 순환 + 공유 허브

Nested
포함에 의한 계층

Tree
부모 → 자식

Org chart
소유권 + 라우팅

Layer stack
적층된 추상화

Venn
집합 겹침

Pyramid / funnel
순위 계층 또는 이탈

Bar chart
범주형 비교

Treemap
면적에 의한 부분-전체

Line chart
시간에 따른 추세

Gantt
타임라인 위의 작업 + 단계

Scatter plot
분포 + 상관관계

High-Level
클러스터 위의 엔드투엔드 스택

Process
다중 행위자 순차 워크플로

Medallion
다중 계층 데이터 저장

Data flow
역할 범위 파이프라인 단계

DP integration
소스 → 코어 → 소비자

DP security matrix
역할별 접근 권한

Sankey
분할 + 병합되는 수량

Fishbone
그룹화된 원인 → 하나의 결과

Wardley map
가치 사슬 × 진화

Kanban
상태별 진행 중 작업

User journey
단계, 행동 + 감정

Deployment
영역, 호스트 + 아티팩트

Depen…