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

Cathryn Lavery가 공개한 Diagram Design은 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은 39,536 stars와 2,503 forks를 기록했어요. 같은 시각 GeekNews 첫 화면에서는 전체 2위, 26점·1댓글로 관측됐고, 당시 화면에 나온 AI 도구 가운데 순위가 가장 높았어요. 수치는 관측 뒤 바뀔 수 있어요. 저장소의 최신 push는 9월 10일 22:33:54 UTC였고 라이선스는 MIT예요. 데이터