diagram-design으로 Mermaid 아키텍처 그림을 서비스 색으로 다시 그리는 법

스킬을 깔고 이름을 붙여 부른다

diagram-design은 서비스의 색과 글꼴을 한 번 배워 두고, 그림을 그릴 때마다 입혀 HTML 한 파일로 주는 Claude Code 스킬입니다. 예시는 src/styles/tokens.css에 브랜드 색을 두고, docs/architecture.mmd에 Browser → Next.js frontend → API server → Redis cache·Postgres 그림을 둔 서비스입니다. 프로젝트 폴더에서 명령 한 줄로 깝니다.

github.com↗

GitHub - cathrynlavery/diagram-design: Editorial diagram design for Claude Code, Codex, GitHub Copilot, Cursor, Factory Droid, and Pi. 44 diagram types. Self-contained HTML + SVG. No shadows. No Merma

Editorial diagram design for Claude Code, Codex, GitHub Copilot, Cursor, Factory Droid, and Pi. 44 diagram types. Self-contained HTML + SVG. No shadows. No Mermaid slop. - cathrynlavery/diagram-design

1npx skills add cathrynlavery/diagram-design

처음 그리기 전에 한 번 온보딩합니다. 온보딩은 스킬이 서비스의 색과 글꼴을 배워 두는 과정이고, 디자인 소스가 든 폴더를 알려 주면 됩니다.

1diagram-design 스킬로 온보딩해 줘. 디자인 소스는 ./src/styles 폴더야.

그다음부터는 요청 앞에 /diagram-design을 붙입니다. 이름 없이 보내면 스킬이 불리지 않을 수 있습니다.

1/diagram-design docs/architecture.mmd 를 src/styles/tokens.css 의 색과 글꼴에 맞춰 다시 그려서 docs/architecture.html 로 저장해 줘. 확인 없이 바로 진행해.

스킬 없이 탭은 같은 문장에서 /diagram-design만 빼고 스킬 없는 프로젝트에 보낸 결과입니다.

스킬 없이스킬로 부름

스킬 없이도 Claude는 토큰 값을 HTML에 복사해 넣습니다. 스킬로 부르면 Claude가 노드 다섯 개와 연결선 넷을 빼지 않고 다시 그렸다고 보고하고, 바탕과 글꼴을 바꾼 이유를 따로 적습니다.

스킬 없이스킬로 부름

결과 파일을 열면 배치가 다릅니다. 스킬 없이 그린 쪽은 API server에서 갈라지는 선이 곡선이고 저장소가 원통입니다. 스킬로 그린 쪽은 선이 직각으로 꺾이고, 노드마다 분류 표시가 붙고, 아래에 범례가 생깁니다.

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

색은 그림 파일에 hex로 박힌다

온보딩한 스킬은 색을 역할별로 나눠 스킬 폴더의 style-guide.md 표에 적습니다. Mermaid 파일을 주면 그 파일을 렌더하지 않고 새로 그립니다.

1. 노드·연결선·라벨만 뽑습니다.
2. 배치는 직각 연결선 규칙으로 다시 잡습니다.
3. 색은 표의 값을 그림 파일에 복사합니다.

브랜드 색을 바꾼 날에는 다시 온보딩하고, 이미 그린 그림도 다시 그려야 새 색이 들어갑니다.

1| `paper` | Page background, default node fill | `#ffffff` | `#0f172a` |

1/diagram-design:profile save my-service

자주 고치는 그림은 Mermaid에 둔다

결과 HTML에는 고칠 원본 텍스트가 남지 않습니다. Git에 두고 diff로 리뷰하는 그림은 Mermaid에 두고, 한 번 그려 오래 두는 그림만 /diagram-design으로 다시 그립니다.

1---
2config:
3  theme: base
4  fontFamily: "Inter, system-ui, sans-serif"
5  themeVariables:
6    primaryColor: "#f8fafc"
7    primaryBorderColor: "#2563eb"
8    primaryTextColor: "#0f172a"
9    lineColor: "#64748b"
10---
11flowchart LR
12  B[Browser] --> F[Next.js frontend]
13  F -->|REST| A[API server]
14  A -->|cache lookup| R[(Redis cache)]
15  A -->|SQL| P[(Postgres)]