영상 링크: Build BEAUTIFUL Diagrams with Claude Code (Full Workflow)
채널명: Cole Medin
Claude Code로 아름다운 다이어그램을 만드는 전체 워크플로우 핵심 요약
- 영상 제목은 “Claude Code로 아름다운 다이어그램을 만드는 전체 워크플로우”로, 시청자들이 시각적으로 정보를 더 쉽게 습득할 수 있도록 하는 방법에 초점을 맞춤
- 코딩 에이전트(Claude Code 등)는 기본적으로 시각적 결과물이 약하므로, Excaladra Diagram Skill을 만들어 이를 보완함
- Excaladra Diagram Skill은 GitHub에서 클론하여 에이전트의 skill 디렉터리에 등록, 어떤 코딩 에이전트에서도 사용 가능함
- 핵심 파일(skill.md)이 에이전트에게 시각적으로 논리적으로 주장하는 방법과 Excal/Jason 파일 구조를 안내함
- 사용자는 Claude 같은 코딩 에이전트에 해당 스킬을 적용하게 한 뒤, 다양한 경로(예: 파일 경로, PDF, YouTube 스크립트 등)로 입력해 다이어그램 생성을 요청할 수 있음
- 다이어그램 JSON 결과물을 얻은 후, excalraw.com 또는 Obsidian의 Excalibraw 플러그인에서 시각화 및 검증 작업을 수행
- Excaladra Skill의 가장 큰 장점은 “자기 검증(self-validation)” 단계로, 생성된 다이어그램을 렌더링하여 PNG로 확인 후 자동으로 반복적으로 개선함
- 완벽하지 않지만, 반복적 수정을 통해 누구나 쉽게 원하는 정보 구조와 스타일에 맞는 교육용 다이어그램을 만들 수 있음
- 복잡한 다이어그램의 경우 토큰 한계(32,000 토큰 등)에 유의해야 하며, 섹션별로 나눠서 생성해야 함
- 색상 팔레트 및 시각적 패턴 등 모든 요소의 커스터마이즈가 자유롭고, 반복적 작업을 크게 줄여줌
세부 요약 - 주제별 정리
코딩 에이전트의 시각적 한계를 Excaladra Skill로 극복할 수 있음을 보여줌
- 대부분의 사람들은 시각적으로 학습하는 경향이 강함
- 대표적 코딩 에이전트(Claude Code 등)는 본질적으로 텍스트 기반이라 시각적 설명에 약점이 있음
- 시각적 설명이 필요할 때마다 많은 프롬프트와 반복된 작업이 필요했음
- 이를 보완하기 위해 Excaladra Diagram Skill을 직접 개발하여, 복잡하고 직관적인 다이어그램 생성을 자동화함
- 이 스킬은 채널 및 Dynamis 커뮤니티에서 매월 수십 건의 다이어그램 제작에 실질적으로 활용되고 있음
Excaladra Diagram Skill의 설치, 적용, 파일 구조 및 주요 역할이 상세히 안내됨
- 영상 설명란에서 Excaladra Diagram Skill의 GitHub 저장소 링크 제공됨
- 설치법: Skill 리포지토리 클론 → 사용 중인 코딩 에이전트의 skills 디렉터리에 새 폴더(예, excal_diagram) 생성 후 모든 파일 복사
- 핵심 파일인 skill.md가 workflow 안내 및 Claude Code 등 코딩 에이전트에게 시각적 주장 방법, 다이어그램 JSON 생성 규칙 제공
- 다양한 경로(유튜브 스크립트, PDF, 텍스트 등)를 입력하면 자동으로 맞춤형 다이어그램을 생성할 수 있음
다이어그램 제작을 위한 입력 및 Prompt 과정이 매우 유연함을 설명함
- Claude Code에서 “이 파일을 설명하는 다이어그램을 만들어줘”와 같이 요청
- 입력값으로 로컬 파일, 유튜브 스크립트, PDF 등 활용 가능
- “단계별 워크플로우”가 skill.md를 참고하여 적용됨
- 에이전트는 skill을 감지하고, 필요한 워크플로우와 검증 메커니즘까지 포함해 자동 실행함
만들어진 JSON 다이어그램 파일의 시각화 및 결과 활용법을 구체적으로 제시함
- Claude 등 코딩 에이전트가 생성한 Excaladra JSON 파일을 excalraw.com에 업로드해 즉시 확인 가능
- Obsidian 내 Excalibraw 플러그인 사용도 가능하며, excalraw.com은 완전히 무료임
- 결과물은 쉽게 시각적으로 확인하고, 필요한 경우 추가적으로 편집하거나 재생성이 가능함
self-validation 기능을 활용하여 생성 다이어그램의 품질을 단계별로 개선함
- 자동화된 검증 단계에서 코딩 에이전트가 다이어그램을 렌더링 후 PNG 이미지를 분석하여 오류, 레이아웃 문제, 정보 흐름 개선점 등을 감지함
- Python 스크립트를 활용해 이미지 렌더링 및 반복적 피드백(2~4회) 후, 자동으로 JSON을 수정해 품질 향상
- 이 self-validation 과정을 통해, 코딩 에이전트의 시각적 한계를 실질적으로 개선함
인간과 LLM이 협력하여 반복적으로 다이어그램 결과를 개선하는 과정을 보여줌
- 첫 시도 결과는 항상 완벽하지 않으므로, 사용자가 직접 평가하고 간단한 지시사항(예: 색상, 정보량, 화살표 길이 등)을 추가로 전달하며 반복적 수정을 진행
- 반복 작업이 매우 간단하게 설계되어 신속히 원하는 수준으로 업그레이드 가능
복잡한 다이어그램을 생성할 때 LLM의 토큰 한계와 해결 방법에 대해 현실적으로 안내함
- 복잡하거나 대용량 데이터를 시각화할 때 LLM의 토큰 한계(32,000토큰 등) 문제가 발생할 수 있음
- 이 문제를 해결하기 위해, 다이어그램을 섹션별로 분할하여 단계적으로 생성할 것을 권장
- 전체 워크플로우: 아이디어 정립 → 다이어그램 복잡도(깊이) 평가 및 분할 → 각 섹션별 패턴 매핑 및 JSON 생성 → 반복적 검증 및 수정 반환
다이어그램 설계 철학, 시각적 설명, 색상 팔레트 및 디자인 패턴 안내가 포함됨
- “시각적 주장(Arguing visually)”의 중요성을 강조하며, 단순히 박스만 나열하지 않고 구조와 레이블을 통해 전체 개념을 전달하도록 유도함
- skill.md 파일에 주요 디자인 패턴, 시각 정보 계층, 시선을 유도하는 구조 등 구체적 예시 및 규칙 다수 포함
- 다이어그램에 담아야 할 구체적 증거/자료(artifact)도 명시해 두었으며, 필요하면 사용자 수준에서 쉽게 커스터마이즈 가능
다이어그램의 색상 팔레트와 각종 요소(템플릿)의 커스터마이즈 방법을 구체적으로 안내함
- 색상 팔레트 파일이 GitHub repo 내에 포함, 사용자가 원하는 브랜드 컬러(예: 보라색, 노란색, 파란색 등)로 쉽게 수정 가능
- Claude 등 에이전트에게 “보라/노란 색상 쓰고 싶다” 요청하면 자동으로 HEX코드로 팔레트 생성 및 적용
- 각종 디자인 템플릿, 색상, 레이아웃 구조 등도 skill 내 파일을 손쉽게 편집하여 맞춤 적용 가능
Excaladra Diagram Skill의 장점 및 실질적 활용 결과가 정리됨
- PDF, 코드베이스, 텍스트, 리서치 문서 등 다양한 입력으로 누구나 손쉽게 다이어그램 생성 가능
- 빠른 반복과 self-validation 덕에 매주 수 시간 이상의 수작업이 절약됨
- 설치 직후 바로 사용 가능하며, 고급 사용자는 추가 커스터마이즈로 브랜드화, 교육용 맞춤화 등 여러 목적에 활용
- 워크플로우 예시, 반복적 개선 케이스, 다양한 입력 예시를 영상에서 직접 시연함
결론적으로, Excaladra Diagram Skill로 누구나 에이전트 기반 다이어그램 자동화를 시작할 수 있음
- GitHub 리포를 클론하여 Skill 적용 후 Claude 또는 다른 코딩 에이전트에서 바로 사용 가능
- 반복 작업이 줄어들고, 작업자의 논리와 브랜드에 맞게 다이어그램을 맞춤화함
- 다양한 포맷과 입력을 소화하며, 시각적 설명의 효율성을 극대화한 솔루션임