사용 가이드로 건너뛰기
excalidraw-diagram-generator작성자 GitHub

Excalidraw Diagram Generator 스킬.

다이어그램 및 차트를 위한 Claude Code 및 Codex skill: 자연어로부터 Excalidraw 다이어그램 및 마인드맵을 생성합니다.

  • Diagrams & Data Visualization
  • Diagram
github/awesome-copilot · skills/excalidraw-diagram-generator/SKILL.mdSKILL.md
--- name: excalidraw-diagram-generator description: Generate Excalidraw diagrams from natural language descriptions. Use when asked to "create a diagram", "make a flowchart", "visualize a process", "draw a system architecture", "create a mind map", or "generate an Excalidraw file". Supports flowcharts, relationship diagrams, mind maps, and system architecture diagrams. Outputs .excalidraw JSON files that can be opened directly in Excalidraw. --- ## When to Use This Skill ## Prerequisites ## Step-by-Step Workflow ## Best Practices ## Example Prompts and Responses ## Advanced Techniques
2026-09-14에 업스트림 파일에서 읽은 머리말 및 섹션 제목 · 전체 24,276자

01 기능

Claude Code와 Codex에서 excalidraw-diagram-generator 스킬이 수행하는 작업

요약, 워크플로, 산출물을 모두 해당 스킬의 SKILL.md에서 그대로 읽어 정리한 내용입니다.

SKILL.md에서2026-09-14 읽음 · 실행 기록 아님

스킬 자체의 표현으로

자연어 설명으로부터 Excalidraw 형식의 다이어그램을 생성합니다. 순차적 프로세스를 위한 플로우차트, 엔티티 연결을 위한 관계 다이어그램, 개념 계층을 위한 마인드맵, 시스템 설계를 위한 아키텍처 다이어그램, 데이터 변환 프로세스를 위한 데이터 흐름 다이어그램, 부서 간 워크플로를 위한 비즈니스 플로우 스윔레인 다이어그램, 객체지향 설계를 위한 클래스 다이어그램, 시간에 따른 객체 상호작용을 위한 시퀀스 다이어그램, 데이터베이스 엔티티 관계를 위한 ER 다이어그램 등 아홉 가지 다이어그램 유형을 지원합니다.

계산된 좌표로 배치되고 일관된 색상 체계로 스타일링된 적절한 요소(사각형, 타원, 다이아몬드, 화살표, 텍스트)를 포함하는 .excalidraw JSON 파일을 출력합니다. 파일은 excalidraw.com 또는 VS Code 확장에서 바로 열립니다.

산출물

  • 설명적인 파일명을 가진 완전한 .excalidraw JSON 파일
  • 생성된 다이어그램 유형과 요소 수를 포함한 요약
  • Excalidraw에서 다이어그램을 열고 편집하는 방법에 대한 안내
예시 프롬프트 보기 ↗

작동 방식

  1. 01
    요청 이해

    사용자의 설명을 분석하여 다이어그램 유형(플로차트, 관계도, 마인드맵, 아키텍처), 핵심 요소(엔터티, 단계, 개념), 관계(흐름, 연결, 계층 구조), 복잡도(요소 개수)를 파악합니다.

  2. 02
    적절한 다이어그램 유형 선택

    키워드를 인식하여 사용자의 의도를 다이어그램 유형에 매칭합니다.

  3. 03
    구조화된 정보 추출

    다이어그램 유형에 따라 요소를 나열합니다. 플로차트의 경우: 순차적 단계, 결정 지점, 시작 및 종료 지점.

  4. 04
    Excalidraw JSON 생성

    적절한 요소 유형(rectangle, ellipse, diamond, arrow, text)으로 .excalidraw 파일을 생성하고, 위치(x, y 좌표), 크기(width, height), 스타일(strokeColor, backgroundColor, fillStyle), 폰트(fontFamily: 5는 Excalifont), 연결(화살표를 위한 points 배열)을 포함한 주요 속성을 설정합니다.

  5. 05
    출력 형식 지정

    type, version, source, elements 배열, appState(viewBackgroundColor, gridSize), files 객체를 포함하여 완전한 Excalidraw 파일 구조를 구성합니다.

  6. 06
    저장 및 안내 제공

    descriptive-name.excalidraw로 저장하고, excalidraw.com 방문 후 Open 클릭 또는 파일 드래그 앤 드롭, 또는 Excalidraw VS Code 확장 프로그램 사용을 통해 여는 방법을 사용자에게 안내합니다.

02 적합성 확인

excalidraw-diagram-generator 스킬 사용 시기

작업이 이러한 종류의 다이어그램 및 차트일 때 Claude Code 또는 Codex에서 excalidraw-diagram-generator skill을 사용합니다. 아래의 적합성과 제한 사항은 skill 자체 파일에서 가져온 것입니다.

적합한 경우

  • 플로차트를 사용한 순차적 프로세스, 워크플로, 결정 트리
  • 관계도를 사용한 엔터티 관계, 시스템 구성 요소, 종속성
  • 마인드맵을 사용한 개념 계층 구조, 브레인스토밍 결과, 주제 구성
  • 아키텍처 다이어그램을 사용한 시스템 설계, 모듈 상호작용, 데이터 흐름
  • 비즈니스 흐름 스윔레인 다이어그램을 사용한 부서 간 워크플로 및 행위자 기반 프로세스 흐름

한계 인지하기

  • 복잡한 곡선은 직선 또는 기본 곡선으로 단순화됩니다
  • 자동 생성에서는 이미지 삽입이 지원되지 않습니다
  • 권장 최대 요소 수가 다이어그램당 20개이므로, 20개를 초과하는 다이어그램
  • 스킬이 간격 가이드라인을 사용하므로 자동 충돌 감지는 지원되지 않습니다

제공할 사항

  • 시각화할 내용에 대한 명확한 설명다이어그램으로 표현할 프로세스, 시스템, 관계 또는 개념에 대한 자연어 설명
  • 핵심 엔터티, 단계 또는 개념 식별다이어그램 요소가 될 주요 구성 요소
  • 요소 간 관계 또는 흐름에 대한 이해엔터티들이 연결되는 방식, 단계의 순서, 또는 계층 구조

03 스킬 내부

excalidraw-diagram-generator 스킬이 Claude Code와 Codex에 부여하는 규칙

SKILL.md가 에이전트에게 설정하는 8가지 구체적인 지시, 기본값, 제한 — 결과를 바꾸는 파일의 부분입니다.

  1. 요소 개수 제한

    플로차트 단계: 3~10개 권장, 최대 15개. 관계 엔티티: 3~8개 권장, 최대 12개. 마인드맵 분기: 4~6개 권장, 최대 8개.

  2. 필수 폰트 패밀리

    모든 텍스트 요소는 일관된 시각적 외형을 위해 fontFamily: 5 (Excalifont)를 사용해야 합니다. 이는 검증 체크리스트에서 필수 항목입니다.

  3. 간격 가이드라인

    요소 간 수평 간격: 200~300px. 행 간 수직 간격: 100~150px. 텍스트 크기: 가독성을 위해 16~24px.

  4. 색상 체계 일관성

    주요 요소는 밝은 파란색(#a5d8ff), 보조 요소는 밝은 초록색(#b2f2bb), 중요/중심 요소는 노란색(#ffd43b), 경고/알림은 밝은 빨간색(#ffc9c9)을 사용합니다.

  5. 복잡도 관리

    사용자 요청에 요소가 너무 많을 경우, 여러 다이어그램으로 나눌 것을 제안하고, 먼저 주요 요소에 집중하며, 세부 하위 다이어그램 작성을 제안합니다.

  6. 데이터 흐름 방향

    데이터 흐름 다이어그램의 경우 프로세스 순서가 아니라 데이터 흐름만을 나타냅니다. 데이터 흐름은 좌에서 우로, 또는 좌상단에서 우하단으로 표시해야 합니다.

  7. 요소 개수 최대값

    명확성을 위해 요소 개수는 합리적이어야 하며 20개 미만이어야 합니다. 전달 전 검증 체크리스트에서 이 항목을 확인합니다.

  8. 고유 ID 및 중복 없음

    모든 요소는 고유한 ID를 가져야 하며, 좌표는 겹침을 방지해야 합니다. 이는 다이어그램 전달 전 필수 검증 항목입니다.

04 활용하기

Claude Code 또는 Codex에 excalidraw-diagram-generator 설치

npx skills add 명령 한 번 실행 후, 에이전트에서 첫 번째 작업을 수행하고 결과 체크리스트를 확인합니다.

Claude Code, Codex 또는 사용자 에이전트에 excalidraw-diagram-generator 추가

프로젝트에서 실행합니다. 설치 프로그램이 어떤 에이전트에 추가할지 묻습니다.

Terminal
npx skills add https://github.com/github/awesome-copilot --skill excalidraw-diagram-generator

skills/excalidraw-diagram-generator/SKILL.md에 대한 일반적인 skills CLI 형식입니다. 저장소에서 자체 경로를 문서화할 수 있습니다.

Skill에 첫 다이어그램 및 차트 작업 부여

이 프롬프트를 자신의 콘텐츠와 제약 조건으로 수정한 다음 Claude Code 또는 Codex에서 실행하십시오.

Example prompt
Create a flowchart for user registration

출처: SKILL.md 예시(원문 그대로).

첫 번째 결과 확인

SKILL.md 자체가 올바른 결과의 모습으로 제시하는 내용:

  • 모든 요소가 고유한 ID를 갖는지 확인
  • 텍스트가 16 이상의 폰트 크기로 읽기 쉬운지 확인
  • 모든 텍스트 요소가 fontFamily: 5 (Excalifont)를 사용하는지 확인
  • 화살표가 논리적으로 연결되고 색상이 일관된 체계를 따르는지 확인

OpenDesign에서 excalidraw-diagram-generator를 SKILL.md 링크에서 가져옵니다: Plugins → Add → Skill → Import from link, 그런 다음 상단 바에서 선택합니다.

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.

Author
GitHub
Repository
github.com/github/awesome-copilot 브랜치 main
스킬 파일
skills/excalidraw-diagram-generator/SKILL.md 검증 시 기록된 콘텐츠 체크섬; 커밋 1899b18
License
MIT LICENSE에서 확인
리포지토리 스타
38,981 GitHub 스냅샷은 이 카탈로그에 6개의 스킬을 포함하는 전체 github/awesome-copilot 저장소에 대해 2026-09-14에 수집되었습니다. excalidraw-diagram-generator에 대한 평가 또는 사용 횟수가 아닙니다.
OpenDesign에서 검증됨
2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 스타 수가 확인되었습니다. OpenDesign 메인에 번들로 포함되지 않음(2026-08-28 확인); 이 페이지에 실제 실행 기록이 없습니다.

SKILL.md 내부

  1. 이 스킬을 사용해야 할 때플로차트, 관계도, 마인드맵, 아키텍처, DFD, 스윔레인, 클래스, 시퀀스, ER 다이어그램을 포함한 트리거 문구와 지원되는 다이어그램 유형을 나열합니다
  2. 전제 조건명확한 설명, 핵심 엔티티 또는 단계의 식별, 관계나 흐름에 대한 이해가 필요합니다
  3. 단계별 워크플로우요청 이해부터 다이어그램 유형 선택, 정보 추출, JSON 생성, 출력 포맷팅, 지침과 함께 저장하기까지 6단계 프로세스
  4. 모범 사례요소 개수 가이드라인, 간격 및 배치를 위한 레이아웃 팁, 색상 구성표, 텍스트 크기, 복잡도 관리 전략
  5. 예시 프롬프트와 응답사용자 등록 플로우차트, 사용자-게시물-댓글 관계, 추출 단계가 포함된 머신러닝 마인드맵을 보여주는 세 가지 예시
  6. 문제 해결요소 겹침, 텍스트 맞춤 문제, 요소 과다, 불명확한 레이아웃, 일관성 없는 색상에 대한 해결책
  7. 고급 기법관계 다이어그램을 위한 그리드 레이아웃 공식, 마인드맵을 위한 방사형 레이아웃, 타임스탬프와 무작위 문자열을 사용한 자동 생성 ID 패턴
  8. 출력 형식완전한 .excalidraw JSON 파일과 요소 개수가 포함된 요약, excalidraw.com 또는 VS Code에서 여는 방법에 대한 안내를 항상 제공합니다
  9. 검증 체크리스트고유 ID, 좌표 겹침 없음, 읽기 쉬운 텍스트, Excalifont 글꼴 패밀리, 논리적인 화살표, 일관된 색상, 유효한 JSON, 적절한 요소 개수를 포함해 전달 전 확인할 8가지 항목
  10. 아이콘 라이브러리(선택적 확장 기능)Excalidraw 라이브러리에서 클라우드 서비스 아이콘을 추가하는 Python 스크립트 워크플로우, 설정 지침 및 add-icon-to-diagram.py와 add-arrow.py 사용법 포함
  11. 참고 자료내장된 스키마 문서, 요소 유형 사양, 8종의 다이어그램 템플릿, 아이콘 및 화살표 통합을 위한 3개의 Python 스크립트, 스크립트 README
  12. 제한 사항곡선 단순화, 이미지 임베딩 불가, 최대 20개 요소 권장, 자동 충돌 감지 없음
스킬 자체 설명
자연어 설명에서 Excalidraw 다이어그램을 생성합니다. "다이어그램 만들기", "플로우차트 만들기", "프로세스 시각화", "시스템 아키텍처 그리기", "마인드맵 만들기" 또는 "Excalidraw 파일 생성"을 요청받았을 때 사용합니다. 플로우차트, 관계 다이어그램, 마인드맵 및 시스템 아키텍처 다이어그램을 지원합니다. Excalidraw에서 직접 열 수 있는 .excalidraw JSON 파일을 출력합니다.

SKILL.md의 front-matter 설명입니다. 전체 파일은 약 24,276자입니다. GitHub에서 전체 파일 읽기.

06 설치하기 전에

excalidraw-diagram-generator 스킬에 대한 질문

이 답변은 2026-09-14 기준으로 확인한 SKILL.md 내용을 근거로 하며, 실행 기록을 바탕으로 한 것이 아닙니다.

생성된 다이어그램 파일은 어떻게 여나요?

excalidraw.com에 접속해 Open을 클릭하거나 .excalidraw 파일을 드래그 앤 드롭합니다. 또는 Excalidraw VS Code 확장 프로그램을 사용해 에디터에서 직접 열 수도 있습니다.

다이어그램에 AWS나 클라우드 서비스 아이콘을 사용할 수 있나요?

예, 이 스킬은 excalidraw.com/libraries의 아이콘 라이브러리를 지원합니다. .excalidrawlib 파일을 다운로드한 뒤 split-excalidraw-library.py 스크립트를 실행해 개별 아이콘으로 분리하고, add-icon-to-diagram.py와 add-arrow.py Python 스크립트를 사용해 다이어그램에 아이콘과 연결선을 추가합니다.

이 방식은 토큰 소모를 피하면서 정확한 좌표 변환과 자동 UUID 생성을 제공합니다.

Excalidraw Diagram Generator

실제 다이어그램 및 차트 작업에서 excalidraw-diagram-generator를 실행합니다.

OpenDesign을 다운로드하고, SKILL.md 링크에서 excalidraw-diagram-generator를 가져오고, 위의 프롬프트를 붙여넣고, 결과 전에 계획을 읽습니다.

터미널
npx skills add https://github.com/github/awesome-copilot --skill excalidraw-diagram-generator

OpenDesign 데스크톱

하나의 디자인 시스템으로 모든 결과물에 브랜드 일관성을

완전한 Vibe Design Workspace에서 하나의 브랜드 규칙을 웹사이트, 슬라이드, 인터랙티브 프로토타입, 대시보드, 이미지, HTML 영상에 적용하세요. 로컬 Codex, Claude Code, Cursor 등을 연결해 무료로 제작할 수 있습니다.

  • 웹, 슬라이드, 프로토타입, 대시보드, 이미지, 영상
  • 140개+ 디자인 시스템과 전체 템플릿·스킬 라이브러리
  • 로컬 Codex 및 21개+ 코딩 에이전트 연결 · 무료
무료 다운로드

macOS, Windows 지원