diagram-design

2.0에 새로 추가된 기능 — Loop: 공유 메모리 허브를 가진 플라이휠(flywheels). 점선은 쓰기 백업(write-backs)을 나타냅니다.

2.3에 새로 추가된 기능: 의미론적 시스템 패턴과 선택적 접근 가능한 모션이 추가되었으며, 정적 출력은 기본값으로 유지됩니다.

2.5.10에 새로 추가된 기능: Sankey, fishbone, Wardley map, kanban, 사용자 여정(user journey), 배포(deployment), 의존성 그래프(dependency graph), UML 클래스(UML class), 스토리 맵(story map), 데이터베이스 스키마(database schema) 등 총 10가지 레이아웃 문법이 추가되었습니다.

Claude Code, Codex, Factory Droid, Pi, 그리고 Agent Skills와 호환되는 호스트를 위한 편집용 다이어그램 유형을 제공합니다. 자체 포함된 HTML + SVG 형식입니다. 그림자 효과는 없습니다. Mermaid의 단순한 구현은 없습니다. 의미론적 패턴은 레이아웃과 별개로 행동을 설명하므로, 큐(queue), 정책 추적(policy trace) 또는 신뢰 경계(trust boundary)와 같은 요소가 유형 개수를 늘리지 않고 가장 가까운 기존 유형을 사용할 수 있습니다. 정적 HTML이 기본값이며, 선택적 모션은 순서화된 설명을 위해 사용 가능합니다. 이 스킬은 또한 지정된 형식, 크기 및 상세 수준에서 draw.io, Mermaid 또는 Excalidraw 소스를 다시 그립니다.

Figma는 없습니다. 일반적인 둥근 상자도 없습니다. 30분 동안 색상을 고르는 과정도 없습니다.

프로젝트 사이트: diagramdesign.dev

저는 littlemight.com에서 글을 쓰고 (사이드 프로젝트로 BestSelf.co를 운영합니다). 제가 다이어그램이 필요할 때마다 — 아키텍처 스케치, 순서도(flowchart), 가장 중요한 것의 피라미드 같은 것이 필요했을 때 — Claude에게 요청하면 사이트의 나머지 부분과 전혀 어울리지 않는 일반적인 둥근 상자 형태를 받곤 했습니다. 저는 Figma와 30분 동안 씨름하거나 아예 다이어그램을 건너뛰기만 했습니다.

그래서 이를 위해 Claude Code 스킬을 직접 만들었습니다. 웹사이트를 읽어 60초 만에 브랜드에 맞는 편집 품질의 시각적 유형을 제공합니다.

가장 높은 품질의 개선은 보통 삭제입니다. 모든 노드는 그 자리를 얻습니다. 강조 색상은 독자가 가장 먼저 봐야 할 1~2가지 항목을 위해 예약되어 있습니다. 목표 밀도(Target density): 4/10.

모든 시각적 유형은 세 가지 정적 변형으로 제공됩니다: 미니멀 라이트, 미니멀 다크, 그리고 풀-에디토리얼(full-editorial). 이 중 어느 것을 선택하든 브라우저에서 직접 열 수 있습니다. 빌드 단계, JavaScript 또는 외부 이미지 의존성이 전혀 없습니다.

Architecture delta는 추가되거나 제거되고 변경되거나 이동하거나 재배선된 객체에 대한 Before · Changes · After 원장(ledger)을 통해 동기화된 토폴로지를 비교합니다. 참고 자료와 주문 이행 예시를 확인해 보세요. 속성만 비교하는 것은 여전히 표 형태를 유지하며, 단일 스냅샷은 Architecture를 사용합니다.

Exploded axonometric은 하나의 객체를 2:1 치수 투영(dimetric projection)으로 그리고 그 부품들을 동일한 간격으로 분리하여 보여줍니다. 예를 들어 휴대폰의 분해 과정, 개봉하는 모습, 앱 스택, AI 에이전트 스택 또는 기계식 키보드 등이 될 수 있습니다. 모든 좌표는 하나의 투영 함수에서 나오며, 애니메이션화된 휴대폰은 조립된 상태로 열린 후 한 번에 폭발합니다. 참고 자료를 확인해 보세요.

Axonometric plan은 같은 투영을 사용하여 한 층 또는 한 부지를 표현합니다. 책상 높이로 잘린 벽들 덕분에 모든 방이 단일 뷰에서 읽히거나, 캠퍼스 내 건물들이 구축 단계별로 태그될 수 있습니다. 사무실 평면도, 캠퍼스 전경, 커피숍, 물류 공간, 단계별 캠퍼스 애니메이션 및 참고 자료를 확인해 보세요.

v2.5.10 릴리스에서는 열 가지 레이아웃 문법(layout grammars)이 추가되었습니다. 30가지 변형을 담은 연락처 시트에서 라이트, 다크, 전체 편집본(full-editorial) 버전을 비교할 수 있습니다.

실시간 갤러리 둘러보기: cathrynlavery.github.io/diagram-design — 또는 로컬에서 skills/diagram-design/assets/index.html을 열어 라이트 / 다크 / 전체 편집본 탭으로 모든 다이어그램을 넘겨보세요.

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

Claude Code:

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

그런 다음 업데이트를 한 번 활성화하세요: /plugin을 실행하고 Marketplaces를 열어 diagram-design을 선택한 후 **자동 업데이트 사용(Enable auto-update)**을 선택합니다. Claude Code는 기본적으로 타사 마켓플레이스의 자동 업데이트 기능을 비활성화하며, 이 토글을 수행하면 시작 후 백그라운드에서 마켓플레이스와 설치된 플러그인을 새로 고칩니다. 프롬프트가 나타나면 /reload-plugins를 실행하거나 다음 세션이 업데이트를 로드하도록 두세요.

Codex:

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

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

GitHub Copilot:

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

Copilot은 기존 리포지토리 마켓플레이스에서 공유 Diagram Design 스킬과 그 의사(doctor), 내보내기(export), 가져오기(import), 프로필 기능들을 설치합니다. 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

/reload을 실행하세요.

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

Kiro: 저장소 하위 디렉터리 URL에서 에이전트 스킬을 가져옵니다:

Kiro는 가져온 스킬을 작업 공간용으로 .kiro/skills/에, 전역적으로는 ~/.kiro/skills/에 복사하므로, 업데이트를 적용하려면 URL을 다시 가져와야 합니다. 리소스를 선언하는 사용자 지정 에이전트는 skill://diagram-design/**/SKILL.md를 포함해야 합니다.

OpenCode: 프로젝트의 .opencode/skills/diagram-design 또는 전역적으로는 ~/.config/opencode/skills/diagram-design에 skills/diagram-design/을 복사하거나 심볼릭 링크합니다. OpenCode에는 Diagram Design 마켓플레이스 패키지가 없으므로, 복사된 설치는 더 최신 체크아웃에서 디렉터리를 교체할 때만 업데이트됩니다.

다른 모든 에이전트 스킬 호스트 (Cursor, Cline, Amp, Gemini CLI, Windsurf, Zed, Warp, Roo, Kilo 및 나머지): 크로스-에이전트 skills CLI가 이 저장소를 해결하고, skills/diagram-design/SKILL.md를 감지하며, 전체 스킬(references/, assets/, scripts/)을 선택한 모든 호스트 루트에 설치합니다:
npx skills add cathrynlavery/diagram-design

선택된 루트가 하나 이상의 스킬 디렉터리로 해결되는 경우, CLI는 설치 방법을 묻고 **심볼릭 링크(Symlink)**를 권장합니다. 이는 하나의 표준 복사본을 각 루트에 연결하여 나중에 업데이트가 한 번에 모두 도달하게 합니다. 독립적인 호스트별 사본이 필요하면 --copy를 전달하세요. 단일 디렉터리로 해결되는 선택지는 그 구분이 중요하지 않기 때문에 복사됩니다. 심볼릭 링크를 사용할 수 없는 경우(개발자 모드가 없는 Windows) CLI는 복사로 폴백하고 어떤 루트에 복사했는지 보고합니다.

이것은 위에 나열된 모든 마켓플레이스와 분리된 독립형 설치(standalone install)입니다. 따라서 마켓플레이스 업데이트를 자동으로 따르지 않습니다. npx skills update diagram-design을 사용하여 병합된 업데이트를 가져오세요.

또한 Agent Skill만 설치하므로, /export-diagram, /import-mermaid, /profile, 그리고 /doctor 명령어는 네이티브 패키지와 함께 유지됩니다. 위에 나열된 마켓플레이스가 있는 호스트에서는 마켓플레이스를 사용하는 것이 좋습니다.

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

관리형 설치(Managed installs)는 편리하지만, 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
...

공유된 스킬은 skills/diagram-design/에 위치합니다. Pi는 레포지토리의 표준 skills/ 패키지 디렉토리를 통해 이를 발견합니다. Claude Code, GitHub Copilot, Codex, Factory Droid 및 기타 Agent Skill과 호환되는 도구들은 동일한 파일을 사용합니다.

핵심은 이것입니다: 일반적인 템플릿이 아닌 사용자의 색상과 타이포그래피로 편집 품질의 다이어그램을 제작하는 것입니다.

기본적으로 다이어그램은 깨끗한 제트 블랙 + 아토믹 탠저린 팔레트로 렌더링됩니다 (화이트 스모크 용지, 제트 블랙 잉크, 아토믹 탠저린 악센트, 블루 슬레이트 뮤트, 실버 헤어라인). 바로 스크린샷을 찍기에 충분히 좋습니다. 하지만 온보딩에 60초를 투자하는 것이 더 좋습니다. 이 기술은 사용자의 웹사이트에서 브랜드 요소를 추출하여 모든 다이어그램에 적용할 수 있게 해줍니다.

You: "onboard diagram-design to https://yoursite.com"
Agent: → 홈페이지 가져오기
→ 지배적인 팔레트 + 폰트 스택 추출
...

이제 모든 새로운 다이어그램은 사용자의 색상을 사용합니다. 웹사이트의 용지색이 다이어그램 배경이 됩니다. CTA(Call to Action) 색상이 초점 악센트가 됩니다. 본문 폰트 스택이 노드 레이블 패밀리가 됩니다.

브랜드 매칭은 또한 충실도 영수증을 제공합니다: 샘플링된 URL, 정확한 색상 역할, 폰트 패밀리 및 가중치, 폰트 소스 URL, 그리고 모든 폴백(fallback) 정보입니다. 공용 사이트의 폰트는 일반 시스템 폰트로 조용히 대체되는 것이 아니라, 직접 사용되고 렌더링 후 검증됩니다.

토큰을 작성하기 전에, 이 기술은 paper 위에 있는 ink의 WCAG AA 대비를 검증합니다. 만약 사용자의 사이트에 다이어그램 크기(9–12px)에서 대비에 실패하는 색상이 있다면, 조정된 값을 제안하고 그 이유를 설명합니다.

모든 다이어그램 템플릿은 인라인 SVG에 접근 가능한 이름과 설명을 제공합니다: `role=

토큰을 수동으로 설정하는 것을 선호하십니까? skills/diagram-design/references/style-guide.md를 열고 테이블을 편집하세요. 하위 모든 부분은 여기서 읽어옵니다 — 모든 다이어그램, 주석 원시 요소(annotation primitive), 그리고 갤러리가 의미론적 역할 이름(accent, #eb6c36가 아닌)을 상속받습니다.

이 스킬은 브랜딩된 프로젝트에 기본 스타일의 다이어그램을 조용히 포함하지 않습니다. 새 프로젝트에서 처음 사용할 때, style-guide.md가 사용자 정의되었는지 확인합니다. 그렇지 않다면, 일시 정지하고 다음과 같이 묻습니다:

"이 프로젝트의 첫 번째 다이어그램입니다. 스타일 가이드가 여전히 기본값입니다. 온보딩을 실행하거나, 토큰을 수동으로 붙여넣거나, 아니면 기본값으로 진행하시겠습니까?"

전체 사양은 skills/diagram-design/references/onboarding.md를 참조하세요.

브랜드를 한 번 온보딩하고 그 결과를 이름이 지정된 프로필로 저장한 다음, 각 클라이언트 프로젝트에 profile: <slug>를 포함하는 .diagram-design 마커를 추가합니다. 마커 프로젝트는 ~/.diagram-design/profiles/<slug>.md를 직접 읽기 때문에, 병렬 작업 공간에서 공유 설치된 style-guide.md를 덮어쓰지 않고도 다른 브랜드를 사용할 수 있습니다.

프로필 라이브러리는 Claude Code, Codex, Factory Droid, 그리고 Pi 전반에 걸쳐 공유됩니다. /diagram-design:profile를 사용하세요.