Docs & writingNov 4, 2026@donghyeok99Staff

Diagram Design: 에이전트가 HTML 한 파일로 그려 주는 편집 디자인급 다이어그램

말 한 줄이면 다이어그램 45종을 내 브랜드 색으로 HTML 한 파일에 그려 주는 스킬, GitHub 별이 6만 4천 개를 넘었어요

프롬프트 한 줄 뒤에 흔한 둥근 상자 그림이 지워지고, 4px 격자 위에 가는 선 상자와 직각 연결선, 강조색 하나로 다이어그램이 그려진 뒤 self_check.py가 OK를 찍어요.

누가: Cathryn Lavery(LittleMight)가 자기 블로그 글에 쓸 다이어그램이 마음에 안 들어서 만들었어요. 글, 발표, 문서에 그림을 넣는 사람을 위한 스킬이에요.
언제: 2026년 4월 16일에 저장소가 열렸고, 플러그인 버전은 2.6.141(2026년 11월 3일 푸시 기준)이에요. GitHub 릴리스 태그는 없고 CHANGELOG로 기록해요.
어디서: Claude Code, Codex, Cursor, Copilot, Gemini CLI, Pi 등 Agent Skills를 읽는 에이전트에서 돌아요. 결과는 내 PC의 HTML 파일, 네트워크는 Google Fonts뿐이에요.

이게 불편했어요

글이나 발표 자료에 넣을 그림이 필요할 때마다 에이전트한테 부탁하면 둥근 회색 상자에 그림자 진 비슷한 그림이 돌아왔어요. 그걸 사이트 분위기에 맞추려면 Figma에서 30분을 보내거나, 그냥 그림 없이 내보내야 했어요.

그래서 이렇게 풀어요

Diagram Design은 모델이 몰랐던 「취향」을 글로 적어 둔 스킬이에요. 강조색은 한두 군데만, 1px 가는 선, 그림자 없음, 모든 좌표는 4px 격자 위라는 규칙으로 45종의 다이어그램을 인라인 SVG가 든 HTML 파일 하나로 그려요. 사이트 주소를 주면 그 사이트의 색과 폰트를 뽑아 이후 모든 그림에 입히고, 이미 있는 draw.io, Mermaid, Excalidraw 파일은 내용만 남기고 이 스타일로 다시 그려요.

README의 데모: 프롬프트 한 줄이 아키텍처 다이어그램이 되고, 밋밋한 첫 그림이 스킬로 다시 그려져요

노드 12개짜리 draw.io 파일을 balanced로 다시 그린 것, 파스텔 6색이 강조색 하나로 — README의 데모: 프롬프트 한 줄이 아키텍처 다이어그램이 되고, 밋밋한 첫 그림이 스킬로 다시 그려져요

이걸로 만든 사람들

GitHub@tpanagos2026-10-19

Vibe Rooster의 Tim이 주간 운영 페이지를 이 스킬로 다시 그린 전후 페이지를 만들어, README에 예시로 넣자고 PR을 올렸어요. 막힌 카드 하나만 강조색인 칸반 보드예요.

drawn as a Kanban board in the full-editorial variant with the default skin: one blocked card as the only accent, WIP chips, a bottom legend, and three summary cards of varied widths

좋아요 1 · 댓글 1 (2026-11-04 기준)GitHub ↗

안에서는 이렇게 돌아가요

1
나 → Claude Code
「앱 아키텍처 다이어그램 그려 줘」README의 예시처럼 평범한 문장으로 부탁해요. 에이전트는 시작할 때 스킬의 이름과 설명만 알고 있어요.README.md
2
Claude Code → SKILL.md
요청이 맞으면 SKILL.md를 읽어요첫 사용이면 스타일 가이드가 기본값인지 보고, 사이트 URL, 토큰 붙여넣기, 기본값 중 어떻게 할지 물어요.skills/diagram-design/SKILL.md
3
SKILL.md → style-guide.md
사이트에서 색과 폰트를 뽑아 토큰으로홈페이지의 배경·본문·강조색과 h1·body 폰트를 paper, ink, accent 역할에 매긴 diff를 보여 주고, 승인하면 style-guide.md에 써요.skills/diagram-design/references/onboarding.md
4
SKILL.md → Claude Code
타입 하나 고르고 그 참조만 읽어요행동이 핵심이면 의미 패턴부터 고르고, 그리기 전에 타입·크기·뺄 것을 한 줄로 말해요. 노드 9개, 강조 2개가 상한이에요.skills/diagram-design/references/type-architecture.md
5
Claude Code → self_check.py
template.html을 채우고 self_check.py직각 연결선, 라벨 마스크, role=img와 title/desc, 외부 자원 없음, viewBox 안에 다 들어갔는지를 검사해요.skills/diagram-design/scripts/self_check.py
6
self_check.py → 다이어그램 .html
OK면 .html 한 파일, 필요하면 PNG/SVG더블클릭으로 열리는 HTML이 결과예요. 내보내기는 export_svg.py와 Playwright를 쓰는 export_png.py가 맡아요.skills/diagram-design/scripts/export_png.py

넣으면 이렇게 나와요

「앱 아키텍처: 프런트엔드, 백엔드, DB, Redis 캐시」강조 노드 하나가 있는 아키텍처 HTML

노드 12개짜리 platform.drawiobalanced 상세도로 8개 노드만 남긴 블로그용 그림과, 무엇을 합치고 뺐는지 적은 ledger

onboard diagram-design to https://yoursite.com사이트의 paper, ink, accent 색과 폰트가 담긴 style-guide.md

Q2 프로젝트를 영향 대비 노력으로2축 쿼드런트 다이어그램

나한테 맞을까요

이럴 때 좋아요

블로그 글이나 문서에 들어갈 아키텍처, 플로우, 시퀀스 그림을 내 사이트 톤으로 뽑고 싶을 때
발표 슬라이드용 16:9 그림이 필요할 때(size 프리셋이 글자 크기까지 바꿔요)
draw.io나 Mermaid로 그려 둔 그림을 공개용으로 다시 다듬을 때
여러 클라이언트의 브랜드를 프로필로 저장해 두고 번갈아 쓸 때

이건 안 돼요

결과물은 편집 가능한 원본 포맷이 아니에요. 매 스프린트 바뀌는 Git 문서라면 README가 Mermaid를 권해요
출력 품질은 쓰는 모델에 달렸고, 같은 프롬프트가 두 번 다르게 배치될 수 있다고 README가 말해요
PNG 내보내기는 Playwright와 Chromium 설치가 필요하고, 기본 폰트는 Google Fonts를 한 번 불러와요(system fonts 옵션 있음)
노드 9개, 화살표 12개가 한 그림의 상한이라 큰 시스템은 개요와 상세로 나눠야 해요

Diagram Design: editorial diagrams your agent draws as one HTML file

One sentence gets any of 45 diagram types drawn in your brand colours as a single HTML file, and the repo has passed 64,000 stars

One prompt, the glowing rounded boxes are struck out; hairline boxes and elbow connectors appear on a 4px grid with one accent, then self_check.py says OK.

Who: Cathryn Lavery (LittleMight) built it after disliking the diagrams she got for her blog; for anyone who puts figures in posts and decks.
When: Repository opened 16 April 2026; the plugin is at 2.6.141 (last push 3 November 2026). No GitHub release tags, just a CHANGELOG.
Where: Claude Code, Codex, Cursor, Copilot, Pi and other Agent Skills hosts. Output: an HTML file on your PC that fetches only Google Fonts.

What was hard

Every time a post or a deck needed a figure, asking an agent returned the same rounded grey boxes with drop shadows. Matching it to the site meant thirty minutes in Figma, or shipping without the diagram.

What it does about it

Diagram Design writes down the taste the model was missing. One or two accents, 1px hairlines, no shadows and every coordinate on a 4px grid, applied to 45 diagram types, each delivered as one HTML file with inline SVG. Give it your site's address and it pulls the palette and fonts into every diagram after that; give it an existing draw.io, Mermaid or Excalidraw file and it keeps the content and redraws it in this style.

The README demo: a prompt becomes a diagram, and a plain first pass is redrawn

A 12-node draw.io file redrawn at balanced detail, six fills now one accent — The README demo: a prompt becomes a diagram, and a plain first pass is redrawn

What people made with it

GitHub@tpanagos2026-10-19

Tim of Vibe Rooster redrew a weekly ops page with the skill as a Kanban board, one blocked card as the only accent, and opened a PR to add the before/after pages to the README.

drawn as a Kanban board in the full-editorial variant with the default skin: one blocked card as the only accent, WIP chips, a bottom legend, and three summary cards of varied widths

likes 1 · comments 1 (2026-11-04 as of)GitHub ↗

How it runs inside

1
You → Claude Code
"Make me an architecture diagram"Ask in plain words, like the README's examples. At startup the agent only knows the skill's name and description.README.md
2
Claude Code → SKILL.md
Loads SKILL.md when a request matchesOn first use it checks whether the style guide is still default and asks: site URL, pasted tokens or default.skills/diagram-design/SKILL.md
3
SKILL.md → style-guide.md
Pulls colours and fonts from your siteMaps the site's colours and fonts to paper, ink and accent roles, shows a diff, then writes style-guide.md.skills/diagram-design/references/onboarding.md
4
SKILL.md → Claude Code
Picks one type, loads only its referencePicks a semantic pattern first when behaviour matters, states type, size and cuts in one line; max 9 nodes, 2 accents.skills/diagram-design/references/type-architecture.md
5
Claude Code → self_check.py
Fills template.html, runs self_check.pyChecks right-angle connectors, label masks, role=img with title/desc, no remote assets, everything inside the viewBox.skills/diagram-design/scripts/self_check.py
6
self_check.py → diagram .html
OK means one .html file, PNG/SVG on requestThe result opens by double-clicking. Export is export_svg.py and export_png.py, which renders through Playwright.skills/diagram-design/scripts/export_png.py

What goes in, what comes out

"Architecture: frontend, backend, database, Redis cache"an architecture HTML with one focal node

a 12-node platform.drawioa blog figure at balanced detail with 8 nodes, plus a ledger of what was merged or dropped

onboard diagram-design to https://yoursite.comstyle-guide.md holding the site's paper, ink and accent colours and fonts

Q2 projects by impact vs efforta two-axis quadrant

Is it for you

Good for

Architecture, flow and sequence figures for blog posts or docs in your own site's tone
16:9 slide figures (the size preset changes the type ramp too)
Cleaning up draw.io or Mermaid diagrams for publication
Keeping several clients' brands as saved profiles and switching between them

Not for

The output is not an editable source format; for docs that live in Git and change every sprint the README still recommends Mermaid
Quality depends on the model, and the same prompt can lay out differently twice, as the README says
PNG export needs Playwright and Chromium; the default fonts load once from Google Fonts (a system-fonts option exists)
Nine nodes and twelve arrows per diagram is the budget, so big systems split into overview and detail

Repositorycathrynlavery/diagram-design ↗

Stars64.7k

LicenseMIT

SiteOpen ↗

바로 써 보기

필요한 것

npx근거: README.md
python3근거: README.md
Playwright근거: README.md
돌아가는 곳 Windows · macOS · Linux

Claude Code는 /plugin 마켓플레이스로, 그 밖의 에이전트는 npx skills add로 설치해요. python3는 자체 검사와 가져오기·내보내기 스크립트에만 필요해요.

있는지 확인하는 명령

npx -v
python3 --version
playwright --version

설치

npx skills add cathrynlavery/diagram-design

써 보기

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

써 보기

/diagram-design:import-drawio platform.drawio
/diagram-design:import-drawio platform.drawio --size=slide-16x9 --detail=simplified --audience=executive
/diagram-design:import-drawio platform.drawio --detail=faithful --format=png --page=all
/diagram-design:import-mermaid README.md --diagram=all
/diagram-design:import-mermaid architecture.mmd --size=slide-16x9 --detail=simplified
/diagram-design:import-excalidraw whiteboard.excalidraw --size=slide-16x9 --detail=simplified

원본: github.com/cathrynlavery/diagram-design · ⭐ 64.7k, 2026-11-04 기준 · MIT · 사이트

에이전트에게 붙여 넣기

빈 폴더에서 Claude Code나 Codex를 열고 그대로 붙여 넣으세요.

처음 붙여 넣을 것

https://github.com/cathrynlavery/diagram-design 를 설치해 주세요. 먼저 `node -v`와 `python3 --version`으로 Node와 Python 3가 있는지 확인해요. Claude Code라면 README대로 `/plugin marketplace add cathrynlavery/diagram-design` 다음 `/plugin install diagram-design@diagram-design`을 실행하고, 다른 에이전트라면 `npx skills add cathrynlavery/diagram-design`로 설치해요. 설치가 끝나면 간단한 플로우차트 하나를 그려 .html 파일로 저장하고, 저장소 체크아웃이 있으면 `python3 skills/diagram-design/scripts/self_check.py <file>`로 검사한 뒤 파일 경로를 알려 주세요. 스타일 가이드가 기본값이라 물어보면 일단 「기본값으로 진행」을 골라요.

설치가 끝나면

방금 설치한 diagram-design으로 {내 서비스 이름}의 아키텍처 다이어그램을 그려 주세요. 구성은 {프런트엔드, 백엔드, 데이터베이스, 캐시 등}이고, 가장 중요한 경로 하나만 강조색으로 잡아요. 크기는 블로그 본문용(doc-inline), 노드는 9개 이하로 정리하고, 그리기 전에 고른 타입과 계획을 한 줄로 먼저 말해 주세요. 결과는 {파일 이름}.html로 저장하고 브라우저로 열어 볼 수 있게 경로를 알려 주세요.

Try it

What it needs

npxfrom: README.md
python3from: README.md
Playwrightfrom: README.md
Runs on Windows · macOS · Linux

Claude Code installs from the plugin marketplace, other agents with npx skills add. python3 is only for the self-check and the import/export scripts.

Commands to check

npx -v
python3 --version
playwright --version

Install

npx skills add cathrynlavery/diagram-design

Try it

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

Try it

/diagram-design:import-drawio platform.drawio
/diagram-design:import-drawio platform.drawio --size=slide-16x9 --detail=simplified --audience=executive
/diagram-design:import-drawio platform.drawio --detail=faithful --format=png --page=all
/diagram-design:import-mermaid README.md --diagram=all
/diagram-design:import-mermaid architecture.mmd --size=slide-16x9 --detail=simplified
/diagram-design:import-excalidraw whiteboard.excalidraw --size=slide-16x9 --detail=simplified

Source: github.com/cathrynlavery/diagram-design · ⭐ 64.7k as of 2026-11-04 · MIT · Website

Paste into your agent

Open Claude Code or Codex in an empty folder and paste this as it is.

Paste first

Please install https://github.com/cathrynlavery/diagram-design. First check Node and Python 3 with `node -v` and `python3 --version`. In Claude Code follow the README: run `/plugin marketplace add cathrynlavery/diagram-design` and then `/plugin install diagram-design@diagram-design`; in any other agent run `npx skills add cathrynlavery/diagram-design`. Once installed, draw a simple flowchart, save it as an .html file, and if a repository checkout is available check it with `python3 skills/diagram-design/scripts/self_check.py <file>`, then tell me the file path. If it asks about the default style guide, choose to proceed with the default for now.

Once it is installed

With the diagram-design skill you just installed, draw an architecture diagram of {my service}. The parts are {frontend, backend, database, cache, ...}; put the accent colour on the single most important path only. Size it for a blog body (doc-inline), keep it to 9 nodes or fewer, and state the chosen type and plan in one line before drawing. Save it as {file name}.html and give me the path so I can open it in a browser.

0 comments

Be the first to comment.