Repolode
제출하기
coleam00

coleam00/excalidraw-diagram-skill

자연어 설명을 바탕으로 Claude Code 같은 에이전트가 Excalidraw 다이어그램을 생성하도록 하는 코딩 에이전트 스킬입니다.

대체할 수 있는 제품:Lucidchart

GitHub에서 보기
스타
5,043
포크
584
열린 이슈
34
마지막 커밋
8개월 전

어떤 프로젝트인가요?

이 스킬을 사용하면 Claude Code와 OpenCode 같은 코딩 에이전트가 일상적인 문장으로 된 설명을 바탕으로 Excalidraw 다이어그램을 만들 수 있습니다. 에이전트가 개념 매핑, 레이아웃 구성, JSON 생성과 렌더링을 처리하므로, 사용자는 시스템이나 프로토콜 다이어그램을 요청하고 편집 가능한 Excalidraw 파일을 받을 수 있습니다.

이 프로젝트는 단순한 상자와 화살표가 아니라 다이어그램의 구조에 중점을 둡니다. 예를 들어 일대다 관계에는 방사형 분기 형태를, 순서에는 타임라인을, 집계에는 여러 요소가 하나로 모이는 형태를 사용해 개념이 드러나도록 도형을 배치합니다. 기술 다이어그램에는 코드 조각과 JSON 페이로드 예시도 포함할 수 있습니다.

Playwright 기반 렌더링 파이프라인을 통해 에이전트는 결과물을 확인하고, 텍스트가 겹치거나 화살표가 어긋난 부분을 점검한 뒤 전달 전에 수정할 수 있습니다. 색상과 브랜드 스타일은 단일 팔레트 파일에서 정의하며, 이 파일을 교체할 수 있습니다.

핵심 기능

  • 01자연어 설명을 바탕으로 Excalidraw 다이어그램을 생성합니다.
  • 02방사형 분기, 타임라인, 여러 요소가 하나로 모이는 형태 등 개념에 맞게 도형을 배치합니다.
  • 03Playwright로 결과물을 렌더링해 에이전트가 레이아웃 문제를 확인하고 수정할 수 있습니다.
  • 04기술 다이어그램에 코드 조각과 JSON 페이로드 예시를 포함합니다.
  • 05브랜드 색상을 하나의 팔레트 파일에서 관리해 쉽게 커스터마이즈할 수 있습니다.

활용 사례

  • 코딩 에이전트 세션에서 시스템 아키텍처나 데이터 흐름을 문서화합니다.
  • 설계 문서에 넣을 API 또는 프로토콜 시퀀스를 시각화합니다.
  • 색상 팔레트 파일을 편집해 브랜드 스타일에 맞는 다이어그램을 만듭니다.

빠른 시작

  1. 1

    저장소를 클론합니다

    git clone https://github.com/coleam00/excalidraw-diagram-skill.git
  2. 2

    스킬을 프로젝트의 skills 디렉터리에 복사합니다

    cp -r excalidraw-diagram-skill .claude/skills/excalidraw-diagram
  3. 3

    렌더러 종속 항목과 Chromium을 설치합니다

    cd .claude/skills/excalidraw-diagram/references && uv sync && uv run playwright install chromium
  4. 4

    코딩 에이전트에게 다이어그램을 만들어 달라고 요청합니다

사용 전 알아둘 점

  • README에 라이선스가 명시되어 있지 않아 사용 권한이 불분명합니다.
  • 렌더링 파이프라인을 사용하려면 uv와 Chromium이 설치된 Playwright가 필요합니다.

토픽

#excalidraw#diagrams#claude-code#agent-skills#playwright#visualization

자주 묻는 질문

excalidraw-diagram-skill은(는) 무엇인가요?
자연어 설명을 바탕으로 Claude Code 같은 에이전트가 Excalidraw 다이어그램을 생성하도록 하는 코딩 에이전트 스킬입니다. 이 스킬을 사용하면 Claude Code와 OpenCode 같은 코딩 에이전트가 일상적인 문장으로 된 설명을 바탕으로 Excalidraw 다이어그램을 만들 수 있습니다. 에이전트가 개념 매핑, 레이아웃 구성, JSON 생성과 렌더링을 처리하므로, 사용자는 시스템이나 프로토콜 다이어그램을 요청하고 편집 가능한 Excalidraw 파일을 받을 수 있습니다.
excalidraw-diagram-skill은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
excalidraw-diagram-skill에는 명시된 라이선스가 없습니다. 코드는 공개되어 있지만 라이선스가 없으면 재사용 허가가 명확하지 않으므로, 사용 전에 작성자에게 문의하는 것이 좋습니다.
excalidraw-diagram-skill은(는) 아직 유지보수되고 있나요?
6개월 이상 커밋 없음. excalidraw-diagram-skill의 마지막 커밋은 2026년 3월 1일입니다.
excalidraw-diagram-skill은(는) 어디에 사용할 수 있나요?
코딩 에이전트 세션에서 시스템 아키텍처나 데이터 흐름을 문서화합니다. 설계 문서에 넣을 API 또는 프로토콜 시퀀스를 시각화합니다. 색상 팔레트 파일을 편집해 브랜드 스타일에 맞는 다이어그램을 만듭니다.
excalidraw-diagram-skill는 어떻게 설치하나요?
저장소를 클론합니다: git clone https://github.com/coleam00/excalidraw-diagram-skill.git 스킬을 프로젝트의 skills 디렉터리에 복사합니다: cp -r excalidraw-diagram-skill .claude/skills/excalidraw-diagram 렌더러 종속 항목과 Chromium을 설치합니다: cd .claude/skills/excalidraw-diagram/references && uv sync && uv run playwright install chromium 코딩 에이전트에게 다이어그램을 만들어 달라고 요청합니다
excalidraw-diagram-skill은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/coleam00/excalidraw-diagram-skill

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트