Diagram Design - AI가 만드는 다이어그램에 디자인 규칙을 더하는 스킬

4 days ago 20

Claude Code/Codex/Pi 등에서 블로그와 문서, 발표 자료에 넣을 다이어그램을 자연어로 요청해 만드는 에이전트 스킬
비슷한 둥근 상자와 화살표를 늘어놓는 대신, 정보의 위계와 읽는 순서가 드러나도록 배치와 글꼴, 색상, 연결선 규칙을 적용
아키텍처/순서도/시퀀스/ER 다이어그램부터 타임라인/조직도/사용자 여정/각종 차트까지 다양한 유형을 포함하며, 내용에 맞는 표현 방식을 선택
불필요한 요소와 연결선을 줄이고 강조색은 핵심 요소 1~2개에만 사용하며, 복잡한 그림은 개요와 상세로 나누도록 설계
웹사이트에서 브랜드 색상과 글꼴을 추출해 다이어그램에 적용하고, 여러 프로젝트의 스타일을 프로필로 저장해 재사용 가능
결과물은 HTML 안에 SVG와 CSS를 담은 형태로 생성하며, 기본 정적 출력은 빌드나 JavaScript 없이 브라우저에서 열 수 있음
밝은 테마와 어두운 테마, 설명 카드가 포함된 편집형 레이아웃을 제공하고, 필요한 경우 단계별 표시와 애니메이션도 추가 가능
기존 draw.io/Mermaid/Excalidraw 다이어그램을 다시 디자인하며, 발표 화면이나 문서 크기에 맞춰 상세 수준과 용어를 조절
- 원본의 배치와 색상을 그대로 옮기지 않으며, 합치거나 생략한 내용을 별도로 표시
SVG/PNG 내보내기 지원
글자와 배경의 대비를 검사하고 SVG에 접근성 이름과 설명을 넣으며, 움직임 줄이기 설정도 고려함
MIT 라이선스

Read Entire Article

Diagram Design - AI가 만드는 다이어그램에 디자인 규칙을 더하는 스킬

Related

LLM과 함께 글 쓰는 법

Show GN: 묻기 전에 먼저 움직이는 Slack AI 팀원

Show GN: 채널톡, intercom 에 지친 팀들을 위해,, 레닛(lenit)을 소개합니다.

Qwen 3.8 Omni Flash

배달의민족 전자계약서 화면 개편기: AI에게 맡긴 것과 사람이 챙긴 것

Show GN: SQLBraid - SQL을 그대로 쓰는 TypeScript 라이브러리

OpenAI 해킹

사진작가 오스틴 만의 iPhone 18 Pro 카메라 리뷰

Tips

Trending

Popular

[美특징주]월마트, 동일매장 매출 성장 둔화에 주가 10% 급락

[속보] 네팔 홍수로 고립됐던 한국인 10명 중 9명 안전지역 이송

“돌발적으로 저질렀다”…제자 물통에 소변 넣은 교사, 日 교육계 ‘발칵’

한로로, 코르티스 ‘조롱 가사’ 논란 직접 등판…“좋은 뜻으로 받아들여”

베테랑 김현수 끝내기안타…KT 선두 지켰다, 4년차 김정운은 데뷔 첫 승 감격 [SD 수원 스타]

네팔 홍수 버티고 명소된 ‘기적의 초록집’…집주인이 밝힌 비밀은

Qwen 3.8-Flash-Next(125B a6B), 2026년 8월 26일 공개 예정

부러진 히말라야 빙하가 물 가뒀다가 ‘펑’…“화산 폭발 같았다”

에브리봇, 中 피지컬 AI 기업 엑스스퀘어와 MOU…휴머노이드 사업 확대

'AI 의약 플랫폼' 미라보 바이오, 프리 A 40억원 투자 유치[마켓인]