에이전트에게 말로 지시해 브랜드 스타일의 다이어그램을 만드는 법
아키텍처 다이어그램을 그릴 때마다 Figma를 열거나 Mermaid 문법을 외우는 대신, 에이전트에게 "내 앱 구조를 그려줘"라고 말하기만 하면 됩니다. 이 도구는 에이전트가 이해하는 내용을 바탕으로, 웹사이트 색감과 폰트를 그대로 적용한 하나의 HTML 파일을 만들어 줍니다. 결과물은 브라우저에서 바로 열리는 정적 다이어그램으로, 블로그나 문서에 바로 올릴 수 있는 수준입니다.
브랜드를 그대로 입히는 온보딩
이 도구의 핵심은 '편집자적 감각'을 코드에 녹여낸 것입니다. 에이전트가 단순히 박스를 나열하는 것이 아니라, 웹사이트에서 추출한 배경색, 텍스트 색, 강조색, 폰트 스택을 다이어그램에 적용합니다. 웹사이트 주소를 알려주면 에이전트가 해당 사이트의 팔레트와 타이포그래피를 분석해 다이어그램 토큰으로 변환합니다. 이 과정에서 텍스트 가독성을 위한 대비도 자동 검증되어, 브랜드 컬러가 어둡거나 밝아도 읽기 쉬운 다이어그램이 생성됩니다. 한 번 설정한 브랜드 프로필은 여러 프로젝트에서 재사용할 수 있어, 클라이언트별로 다른 스타일을 유지해야 할 때도 유용합니다.
45가지 유형과 세 가지 변형
아키텍처, 시퀀스, 플로우차트, Gantt 차트, Sankey 다이어그램 등 45가지 유형을 지원합니다. 각 유형은 '미니멀 라이트', '미니멀 다크', '풀 에디토리얼' 세 가지 스타일로 제공되어, 사용 목적에 따라 선택할 수 있습니다. 모든 다이어그램은 그림자 없이 1px 헤어라인과 4px 그리드 정렬을 원칙으로 하며, 시각적 노이즈를 최소화한 깔끔한 디자인을 유지합니다. 복잡한 계층 구조나 데이터 흐름도 명확하게 표현할 수 있도록, 각 유형에 맞는 레이아웃 규칙이 적용됩니다.
기존 다이어그램의 재작성
이미 Mermaid, draw.io, Excalidraw로 만든 다이어그램이 있다면 이를 이 도구의 스타일로 다시 그릴 수 있습니다. 원본 파일의 내용을 분석해 동일한 정보를 담되, 디자인 시스템에 맞게 재구성합니다. 이때 '디테일'과 '대상 독자'를 조절할 수 있어, 기술적인 세부사항을 모두 포함할지, 경영진용 요약본으로 만들지 선택할 수 있습니다. 변환 과정에서 어떤 요소가 병합되거나 생략되었는지 기록을 제공하므로, 원본과의 차이를 쉽게 확인할 수 있습니다.
설치와 호환성
Claude Code, Codex, GitHub Copilot, Cursor 등 에이전트 스킬을 지원하는 다양한 도구에서 사용할 수 있습니다. npx skills add cathrynlavery/diagram-design 명령어로 설치하며, 특정 호스트에 맞는 마켓플레이스 플러그인 설치 방법도 제공합니다. 설치 후 에이전트에게 자연어로 다이어그램 생성을 요청하면, 에이전트가 적절한 유형을 선택하고 계획을 설명한 뒤 HTML 파일을 생성합니다. 결과물은 외부 의존성 없이 단독으로 동작하며, SVG나 PNG로 내보낼 수도 있습니다.
출력 품질과 한계
이 도구의 출력 품질은 사용하는 AI 모델의 능력에 크게 의존합니다. 동일한 프롬프트를 입력해도 레이아웃이 조금씩 달라질 수 있으며, 결과물은 편집 가능한 소스 형식이 아닙니다. 즉, Git에서 텍스트 차이를 비교하거나 캔버스에서 요소를 직접 드래그해 수정할 수 없습니다. 따라서 Git 저장소에 저장되어 자주 변경되는 문서용 다이어그램에는 Mermaid가 여전히 더 적합할 수 있습니다. 이 도구는 블로그 포스트, 발표 자료, 웹사이트 등 '발행'을 목적으로 하는 다이어그램에 가장 잘 어울립니다.
