# Diagram Design, AI 코딩 도구에 그림 문법 39개를 더하다

> 오픈소스 Diagram Design은 Claude Code와 Codex가 39가지 편집용 다이어그램을 self-contained HTML+SVG로 만들고 기존 Mermaid·draw.io·Excalidraw도 다시 그리게 해요.

- 출처 사이트: AI피셜 (https://aifficial.net/posts/diagram-design-skill/)
- 발행: 2026-09-14
- 카테고리: AI 도구 · 태그: Codex, Claude Code, 다이어그램, 오픈소스

## 핵심 답변

Cathryn Lavery가 공개한 Diagram Design은 Claude Code·Codex 같은 AI 코딩 도구가 39가지 편집용 다이어그램을 일관된 규칙으로 만들게 하는 open-source skill이에요. 결과는 외부 파일이 필요 없는 HTML+SVG이고, 화면낭독기용 이름과 설명을 포함하며 Mermaid·draw.io·Excalidraw 자료도 같은 디자인 체계로 다시 그릴 수 있어요.

## 한 장 요약(만화)

![메모와 기존 Mermaid 그림이 AI 코딩 도구를 거쳐 편집 가능한 HTML+SVG 다이어그램으로 바뀌는 과정을 설명하는 만화](https://aifficial.net/images/posts/diagram-design-skill/comic-v1.0.0.webp)

## 요약

- Diagram Design은 Claude Code·Codex 같은 AI 코딩 도구에 flowchart·timeline·architecture 등 39가지 다이어그램의 구조와 디자인 규칙을 제공하는 open-source skill이에요.
- 결과는 브라우저에서 바로 여는 self-contained HTML+SVG예요. 39종마다 밝은 화면·어두운 화면·full-editorial 세 변형이 있고, 기본 출력은 움직임이 없는 정적 화면이에요.
- 기존 Mermaid·draw.io·Excalidraw의 구성요소와 관계는 보존하면서 좌표·색·폰트를 새 체계로 다시 배치할 수 있어요. 모든 SVG에는 화면낭독기용 title과 description을 넣도록 검사해요.
- 9월 14일 오전 6시 16분 뉴욕 시간 GitHub API 관측값은 39,536 stars와 2,503 forks였어요. 같은 시각 GeekNews 첫 화면 전체 순위에서는 2위였고, 그 화면에 오른 AI 도구 가운데 가장 높은 순위였어요. 당시 반응은 26점·1댓글이었어요.

## 핵심 사실

| 항목 | 값 |
|---|---|
| 다이어그램 종류 | 39가지 (각각 light·dark·full-editorial 변형 제공) |
| 출력 형식 | HTML + SVG (외부 이미지·빌드 과정 없이 브라우저에서 열림) |
| GitHub 관심 | 39,536 stars (2026-09-14 06:16 EDT API 관측) |
| 라이선스 | MIT (공개 저장소 LICENSE 기준) |


Cathryn Lavery가 공개한 <strong>Diagram Design</strong>은 Claude Code와 Codex 같은 AI 코딩 도구가 39가지 편집용 다이어그램을 만들게 하는 open-source skill이에요. 사용자가 설명할 내용을 주면 AI가 관계를 먼저 정리하고, flowchart·timeline·architecture·Sankey 같은 구조를 골라 브라우저에서 바로 열고 고칠 수 있는 HTML+SVG 파일을 만들어요. 

## AI에게 그림 문법을 주면 무엇이 달라지나요?

생성형 AI에게 “보기 좋은 도식으로 만들어 줘”라고만 하면 상자와 화살표가 많고 의미의 우선순위가 흐린 결과가 나오기 쉬워요. Diagram Design은 먼저 누가 무엇과 연결되는지, 독자가 어느 방향으로 읽어야 하는지, 가장 중요한 결론이 무엇인지 정하게 해요. 그런 다음 39가지 시각 유형 가운데 이야기와 맞는 구조를 선택해요. 

각 유형에는 밝은 화면, 어두운 화면, 기사형 구성을 갖춘 full-editorial의 세 변형이 있어요. 출력은 외부 이미지나 build step이 필요 없는 self-contained HTML+SVG이고, 기본값은 움직이지 않는 정적 화면이에요. 필요할 때만 reveal·step·loop motion을 고를 수 있으며, 움직임을 줄이도록 설정한 환경에서는 완성된 정적 장면을 보여 줘요. 



## 기존 그림도 다시 쓸 수 있나요?

Diagram Design은 Mermaid 코드와 draw.io·Excalidraw 파일을 읽어 새 디자인으로 다시 그려요. 이때 원본에서 보존하는 것은 구성요소, 관계, 그룹, 흐름의 방향이에요. 손으로 끌어 놓은 좌표나 여러 색, 원본 폰트는 그대로 복사하지 않고 4px grid와 제한된 색 체계에 맞춰 다시 배치해요. 

그래서 이미 회의에서 만든 복잡한 화이트보드도 출발점으로 쓸 수 있어요. 예를 들어 12개 상자가 연결된 draw.io 파일을 기사에 넣고 싶다면 “balanced detail로 블로그용 다이어그램을 다시 그려 달라”고 요청할 수 있어요. 결과는 그림 전체가 하나의 이미지로 굳는 대신 텍스트와 선을 HTML에서 다시 고칠 수 있어요. 

## 예쁜 그림 다음에 무엇을 검사하나요?

이 저장소는 SVG마다 `role="img"`와 연결된 `title`·`description`을 넣게 해 화면낭독기(screen reader)가 그림의 이름과 뜻을 읽도록 해요. 같은 페이지에 여러 그림을 넣어도 접근성 ID가 겹치지 않게 접두사를 붙이고, 장식용 아이콘은 보조 기술에서 숨겨요. 저장소의 linter는 이 이름 연결이 풀린 SVG를 오류로 처리해요. 

9월 14일 오전 6시 16분 뉴욕 시간 GitHub API에서 Diagram Design은 <strong>39,536 stars</strong>와 <strong>2,503 forks</strong>를 기록했어요. 같은 시각 GeekNews 첫 화면에서는 전체 2위, 26점·1댓글로 관측됐고, 당시 화면에 나온 AI 도구 가운데 순위가 가장 높았어요. 수치는 관측 뒤 바뀔 수 있어요. 저장소의 최신 push는 9월 10일 22:33:54 UTC였고 라이선스는 MIT예요. 


<strong>저는 39라는 숫자보다 ‘내용을 먼저 정하고 그림을 나중에 고른다’는 순서가 더 눈에 남았습니다.</strong> 발표 자료를 만들다 보면 도형을 예쁘게 맞추는 데 시간을 쓰면서도, 정작 독자가 무엇부터 읽어야 하는지는 늦게 생각할 때가 있습니다. Diagram Design은 AI에게 색상보다 관계와 읽는 방향을 먼저 묻게 합니다. 좋은 도식이 장식이 아니라 생각의 순서를 드러내는 도구라는 뜻처럼 보입니다.

이 방식은 AI 도구를 쓰는 사람에게도 꽤 현실적인 선택을 줍니다. 낯선 이미지를 한 번 생성하고 끝내는 대신, 회의에서 만든 Mermaid나 draw.io 자료를 가져와 같은 내용으로 다시 정리할 수 있습니다. 결과가 HTML과 SVG라서 이름 하나를 고치거나 화살표를 옮길 때 처음부터 다시 뽑지 않아도 됩니다. 팀 문서에서 사람이 마지막 편집권을 갖는다는 점이 실제 사용에서는 큰 차이를 만들 것 같습니다.

접근성 규칙을 선택 사항이 아니라 검사 대상으로 둔 점도 흥미롭습니다. 화면에 보이는 사람에게만 멋진 그림이라면 정보 전달의 절반만 해결한 셈입니다. title과 description이 연결되지 않은 SVG를 linter가 막는 구조는, AI가 만든 결과에도 사람이 정한 품질 기준을 코드로 적용할 수 있다는 구체적인 예가 아닐까 싶습니다.

여러분은 AI에게 다음 그림을 부탁할 때 어떤 모양을 원하는지부터 말하시겠습니까, 아니면 독자가 어떤 관계를 먼저 이해해야 하는지부터 말하시겠습니까? 편집 가능한 결과와 한 번에 완성된 이미지 가운데 우리 일에 더 오래 남는 것은 무엇일까요? 



## 자주 묻는 질문

**Q. Diagram Design은 그림 생성 AI인가요?**

픽셀 이미지를 새로 그리는 모델이 아니라 AI 코딩 도구가 HTML과 SVG로 다이어그램을 작성할 때 따르는 skill과 template 모음이에요. 내용과 관계를 구조화하고 브라우저에서 편집 가능한 결과를 만들어요.

**Q. 어떤 입력을 다시 그릴 수 있나요?**

Mermaid 코드, draw.io 파일, Excalidraw JSON을 읽어 구성요소·관계·그룹·방향을 보존하고 새 좌표와 색·폰트로 다시 배치할 수 있어요. 원본 렌더러의 좌표와 색상은 그대로 복사하지 않아요.

**Q. 접근성은 어떻게 다루나요?**

각 SVG에 role=img, 연결된 title과 description을 넣어 화면낭독기가 그림의 이름과 설명을 읽게 해요. 선택형 motion도 reduced-motion 환경에서는 완성된 정적 화면을 보여 주게 설계돼 있어요.

## 출처

1. [Diagram Design 공식 GitHub 저장소와 README](https://github.com/cathrynlavery/diagram-design) (official)
2. [Diagram Design 공식 갤러리](https://cathrynlavery.github.io/diagram-design/) (data)
3. [GeekNews 소개와 토론](https://news.hada.io/topic?id=33664) (other)

_이 문서는 AI피셜 편집부가 작성했습니다. 인용 시 출처를 표기해 주세요._