개요
29가지 자체 포함형 HTML+SVG 에디터급 차트 유형을 포함하며, Agent Skill 형태로 Claude Code, Codex, Pi 등에서 사용할 수 있고, 스타일 가이드를 통해 브랜드 색상 및 글꼴 매칭을 지원하며, 라이트, 다크 및 전체 편집 스타일의 세 가지 변형을 출력합니다.
README 미리보기
# Diagram Design\n\n**Editorial diagrams your designer won't hate.**\n\n\n\n\n\n*New in 2.0 — the Loop: flywheels with a shared-memory hub. The dashed lines are the write-backs.*\n\n27 types. One agent skill for Claude Code, Codex, and Pi. Your brand in 60 seconds — the skill reads your website and maps colors + fonts to every diagram. Already have diagrams in draw.io? Point it at the file and it redraws them at the format, size, and level of detail your audience needs.\n\nNo Figma. No generic rounded boxes. No 30-minute color-picking sessions.\n\n---\n\n## Why I built it\n\nI write at [littlemight.com](https://littlemight.com?utm_source=diagram-design&utm_medium=readme&utm_campaign=github&utm_content=intro) (and run [BestSelf.co](https://bestself.co?utm_source=diagram-design&utm_medium=readme&utm_campaign=github&utm_content=intro) on the side). Every time I needed a diagram — an architecture sketch, a flowchart, a pyramid of what matters most — I'd ask Claude and get back a generic rounded-box thing that looked nothing like the rest of the site. I'd either fight with Figma for 30 minutes or just skip the diagram.\n\nSo I built a Claude Code skill for it. Twenty-seven types, editorial quality, matches your brand in 60 seconds by reading your website.\n\n> *The highest-quality move is usually deletion.* Every node earns its place. The accent color is reserved for the 1–2 things the reader should look at first. Target density: 4/10.\n\n---\n\n## What it makes\n\nAll 27 diagrams ship in three variants: minimal light, minimal dark, and full-editorial. Open any of them directly in a browser — no build step, no JS, no external images.\n\n\n\n ArchitectureComponents + connections\n FlowchartDecision logic\n SequenceMessages over time\n\n\n State machineStates + transitions\n ER / data modelEntities + fields\n TimelineEvents on an axis\n\n\n SwimlaneCross-functional flow\n QuadrantTwo-axis positioning\n NestedHierarchy by containment\n\n\n TreeParent → children\n
FAQ (5)
문제 해결Architecture 다이어그램에서 사용자 지정 페이퍼 또는 스킨을 사용할 때 zone 레이블이 거의 보이지 않는 문제는 어떻게 해결하나요?
버전 2.4.0에서는 type-architecture.md의 zone eyebrow가 fill="rgba(45,49,66,0.40)"을 하드코딩하고 있으며, 이는 기본 paper #f5f5f5에만 맞춰져 있습니다. #faf8f6처럼 더 밝거나 따뜻한 톤의 paper에서는 명암비가 약 2.22:1까지 떨어질 수 있습니다.
하드코딩된 색상과 폰트를 시맨틱 스킨 역할로 교체하세요:
-<text … fill="rgba(45,49,66,0.40)" font-size="7"
- font-family="'Geist Mono', monospace" …>LAYER</text>
+<text … fill="{soft}" font-size="7"
+ font-family="{sublabel font}" …>LAYER</text>soft는 sublabel과 경계 레이블을 위한 역할이므로, 활성 스킨과 다크 모드를 자동으로 따릅니다. 따라서 별도의 다크 모드 rgba 오버라이드는 제거할 수 있습니다.
영구적인 해결을 위해서는 issue #65에 대한 type-reference 스킨 토큰 수정이 포함된 릴리스로 업그레이드하세요. 2.4.0으로 고정(pinned)된 설치본을 패치해야 하는 경우에는 버전별 캐시 경로 아래에 있는 파일을 편집하세요. 예를 들면:
plugins/cache/diagram-design/diagram-design/2.4.0/skills/diagram-design/references/type-architecture.md다른 SVG 스니펫들도 리터럴 hex 값이나 폰트 패밀리 대신 {ink}, {paper}, {accent @ 0.50}, {callout font}, {sublabel font}와 같은 플레이스홀더를 사용해야 합니다.
문제 해결verify-geometry.py가 translate가 적용된 SVG 패널에 대해 label-mask 클리핑을 잘못 보고하는 이유는 무엇인가요?
지오메트리 검사기가 라벨 마스크와 노드 사각형을 캔버스 좌표로 변환하는 대신 로컬 SVG 좌표에서 비교했습니다. 교차 여부를 확인하기 전에 기존에 지원되는 translate() 처리를 라벨 마스크와 나중에 그려지는 노드에 적용하는 이슈 #293 수정 사항으로 scripts/verify-geometry.py를 업데이트하세요. 업데이트 후 다음을 다시 실행하세요:
python3 scripts/verify-geometry.py <file>.svgtranslate 변환이 적용된 패널은 더 이상 거짓 겹침 검출을 발생시키지 않으며, 캔버스 좌표에서 실제로 겹치는 마스크는 감지됩니다. 이 수정은 일반적인 SVG transform 지원을 추가하지 않으며, 이미 지원되는 그룹/요소 translate만 처리합니다.
문제 해결왜 verify-motion.py는 aria-hidden 장식용 아이콘에 대해 SVG title/description 누락 오류를 보고하는 반면 lint-skin.py는 통과하나요?
이는 verify-motion.py의 버그였습니다. 이 스크립트는 aria-hidden="true"로 표시된 장식용 아이콘을 포함하여 모든 루트 SVG 요소에 다이어그램 이름 검사를 적용했습니다. PR #295가 포함된 릴리스로 업데이트한 후, 장식용 SVG 루트를 다음과 같이 표시하세요:
<svg aria-hidden="true" focusable="false">
<!-- decorative icon -->
</svg>다시 실행하세요:
python3 scripts/verify-motion.py <file>.html수정된 스크립트는 장식용 SVG 루트를 이름 및 개수 검사에서 제외하지만, 의미 있는 모션 다이어그램에 대해서는 여전히 접근 가능한 이름을 요구합니다. 즉시 업데이트할 수 없는 경우 검증 중에만 장식용 아이콘을 제거하거나 PR 패치를 적용하세요. 실제로 장식용인 아이콘에서는 aria-hidden을 제거하지 마세요.
문제 해결exploded 또는 axonometric 검증기가 scientific notation으로 작성된 유효한 SVG path 좌표를 거부하는 문제를 어떻게 해결하나요?
이 문제는 공유 verify-exploded.parse_path 토크나이저의 버그로 인해 발생합니다: 이 토크나이저는 1e-3이나 -2.5E2 같은 유효한 SVG 숫자를 별도의 피연산자로 분할하여 읽을 수 없는 실루엣이라고 보고합니다. verifier를 fix(verifiers): read scientific notation in projected SVG path coordinates가 포함된 릴리스로 업데이트하세요. 이 수정은 절대 M/L/A/Z 명령에서 부호, 선행 소수점, 지수를 지원하면서도 arc 플래그는 리터럴 0 또는 1로 유지합니다. 임시 해결 방법으로, 검증 전에 과학적 표기법 좌표를 동등한 십진 표기법으로 정규화하세요. 예를 들어 1e-3 → 0.001, -2.5E2 → -250입니다. 지오메트리는 유효하며, Chromium 151이 포함된 Playwright 1.62.0은 동등한 경로를 올바르게 렌더링합니다.
문제 해결유효한 카운트가 10억을 초과할 때 heatmap verifier가 "no parseable cells"라고 보고하는 문제를 어떻게 해결하나요?
검증기는 히트맵 형식에 카운트 상한이 없음에도 불구하고 value >= 1e9인 유한한 비음수 값을 잘못 거부합니다. PR fix(heatmap): accept finite billion-scale counts의 수정이 포함된 릴리스로 업그레이드하세요. 이제 파서는 NaN, Infinity 및 음수 값은 계속 거부하면서 모든 유한한 비음수를 허용합니다. 임시 해결 방법으로, 최댓값이 1,000,000,000 미만이 되도록 모든 셀 카운트를 동일한 양수 계수로 나눈 다음 범례/단위의 레이블을 다시 지정하세요. 스케일링이 균일하므로 상대적 순서와 불투명도는 유지됩니다.