98.8K+다운로드
사용 가이드로 건너뛰기
diagram작성자 Garry Tan

Diagram 스킬.

다이어그램 및 차트를 위한 Claude Code 및 Codex skill: 설명 또는 Mermaid 소스를 편집 가능한 Excalidraw 파일과 렌더링된 SVG 및 PNG로 변환합니다.

  • Diagrams & Data Visualization
  • Diagram
OpenDesign 다운로드사용 가이드 보기
garrytan/gstack · diagram/SKILL.mdSKILL.md
--- name: diagram description: Turn an English description (or mermaid source) into a diagram triplet: the source, an editable .excalidraw file you can open on excalidraw.com, and rendered SVG + PNG. (gstack) --- ## When to invoke this skill ## Step 1 — Author the diagram ## Step 2 — Stage the render bundle (once per session) ## Step 3 — Render the triplet ## Step 4 — Show and deliver ## Rules
업스트림 파일에서 2026-09-14에 읽은 전문 및 섹션 제목 · 전체 16,276자

01 기능

Claude Code와 Codex에서 diagram 스킬이 하는 일

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

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

스킬 자체의 표현으로

영문 설명이나 Mermaid 소스를 다이어그램 트리플렛으로 변환합니다: Mermaid 소스(.mmd), excalidraw.com에서 열리는 편집 가능한 Excalidraw 파일(.excalidraw), 그리고 렌더링된 SVG + PNG 출력물입니다. 렌더링은 로컬 루프백 서버를 통해 완전히 오프라인으로 이루어집니다 — 실행 중이면 Aside 브라우저를 사용하고, 그렇지 않으면 gstack 자체 헤드리스 브라우저를 사용합니다.

플로차트(graph LR/TD)와 시퀀스 다이어그램은 실제 상자, 화살표, 텍스트로 구성된 완전히 편집 가능한 Excalidraw 씬을 생성합니다. 다른 Mermaid 다이어그램 유형(state, class, gantt)은 SVG/PNG로 렌더링되어 Excalidraw 파일 내 단일 이미지 요소로 내보내집니다 — 이동과 주석은 가능하지만 요소 단위 편집은 불가능합니다. Mermaid 소스는 반복 작업을 위한 단일 소스로 남습니다.

산출물

  • LLM 친화적인 교환 형식이자 단일 소스로 사용되는 Mermaid 소스 파일(.mmd)입니다.
예시 프롬프트 보기 ↗

작동 방식

  1. 01
    Mermaid 소스 작성

    사용자의 요청에 맞는 Mermaid를 작성합니다. 파이프라인/흐름에는 graph LR을, 계층 구조에는 graph TD를 우선합니다.

  2. 02
    세션당 한 번 렌더 번들 스테이징하기

    diagram-render.html을 번들 SHA로 콘텐츠 주소화하여 ${TMPDIR:-/tmp}/gstack-render 아래의 gstack 렌더 스테이징 디렉터리에 스테이징합니다.

  3. 03
    한 번의 명령으로 트리플렛 렌더링하기

    .mmd 파일을 작성한 뒤, 스테이징된 번들로 gstack-render를 실행합니다.

  4. 04
    표시 및 전달

    PNG를 인라인으로 읽어 사용자가 다이어그램을 볼 수 있게 합니다. 세 개의 경로를 나열하고 .excalidraw 파일은 편집을 위해 excalidraw.com에서 열린다는 점을 안내합니다.

02 적합성 확인

diagram 스킬을 사용해야 하는 경우

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

적합한 경우

  • 사용자가 다이어그램을 만들거나, 아키텍처를 그리거나, 플로우차트를 생성하거나, 이것을 다이어그램화하거나, 흐름을 시각화하도록 요청합니다.
  • 채팅, 이슈, README용 래스터 출력과 함께 문서화를 위한 선명한 벡터 다이어그램을 생성합니다.
  • 사용자가 excalidraw.com에서 열어 박스를 옮기고 계속 작업할 수 있는 편집 가능한 Excalidraw 파일을 생성합니다.

한계 인지하기

  • 하나의 장면에 15개 이상의 노드가 있는 다이어그램은 가독성을 위해 여러 다이어그램으로 나눕니다.
  • 상태, 클래스, 간트 등 플로우차트/시퀀스가 아닌 Mermaid 유형은 이동은 가능하지만 요소 편집은 불가능한 Excalidraw 파일을 생성합니다.

제공할 사항

  • 영어 설명 또는 Mermaid 소스사용자가 생성할 다이어그램에 대한 설명을 제공하거나, 렌더링할 기존 Mermaid 소스를 제공합니다.

03 스킬 내부

다이어그램 Skill이 Claude Code와 Codex에게 부여하는 규칙

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

  1. 렌더링 없이는 절대 전달하지 않습니다

    .mmd 파일만으로는 다이어그램이 아닙니다. 렌더링이 불가능한 경우(번들 누락 또는 사용 가능한 브라우저 없음) 문제를 알리고 중단합니다.

  2. 플로우차트와 시퀀스 다이어그램은 완전히 편집 가능합니다

    플로우차트(graph LR/TD)와 시퀀스 다이어그램은 실제 박스, 화살표, 텍스트를 가진 완전히 편집 가능한 Excalidraw 장면으로 변환됩니다. 다른 Mermaid 유형은 하나의 이미지 요소로 내보내집니다.

  3. 브라우저 전송을 위해 소스를 Base64로 인코딩합니다

    소스 내의 백틱, ${ }, 백슬래시 해석을 피하기 위해 Mermaid 소스를 base64로 렌더 페이지에 전달합니다. 파일 내용을 JS 템플릿 리터럴에 절대 삽입하지 않습니다.

  4. 출력 디렉터리는 Git 컨텍스트를 따릅니다

    cwd가 git 저장소인 경우 ./diagrams/에 기록하고(사용자가 커밋할 수 있는 산출물), 그렇지 않으면 /tmp/gstack-diagrams/에 기록합니다. 슬러그는 주제에서 kebab-case로 도출하며 최대 40자입니다.

  5. PNG 너비는 1950px로 고정됩니다

    래스터화된 PNG는 항상 1950픽셀 너비이며, 이는 6.5인치 배치의 300dpi에 해당합니다.

  6. 렌더링은 완전히 오프라인으로 이루어집니다

    diagram-render 번들은 자체 완결적이며 루프백에서 제공됩니다. CDN도, 네트워크도 없습니다.

  7. Mermaid를 건드리지 않고 편집된 Excalidraw를 다시 렌더링합니다

    사용자가 .excalidraw 파일을 편집하고 다시 렌더링하려는 경우, 장면 파일을 불러와 SVG/PNG를 직접 내보냅니다. Mermaid 소스로부터 다시 생성하지 않습니다.

  8. PDF 대상에는 .mmd 임베딩을 선호합니다

    PDF에 들어갈 다이어그램의 경우, make-pdf가 Mermaid 펜스를 네이티브로 렌더링한다는 점을 사용자에게 알립니다. PNG를 임베딩하는 것보다 마크다운에 .mmd를 임베딩하는 것이 더 좋습니다.

04 활용하기

Claude Code 또는 Codex에 diagram 설치

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

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

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

Terminal
npx skills add https://github.com/garrytan/gstack --skill diagram

diagram/SKILL.md용 범용 skills CLI 형식으로, 저장소가 자체 경로를 문서화할 수 있습니다.

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

스킬 자체의 용어로 작성되었습니다. 대괄호 부분은 각자의 자료로 교체합니다.

Starter prompt
Create a flowchart showing the build pipeline for [my TypeScript project]. Include lint, test, build, and deploy stages with their dependencies. Use graph LR layout and output to ./diagrams/.

출처: 스킬 자체의 용어로 SKILL.md에서 작성했습니다.

첫 번째 결과 확인

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

  • PNG 출력을 인라인으로 읽어 다이어그램이 올바르게 렌더링되었는지, 사용자의 요청과 일치하는지 확인합니다.
  • gstack-render 출력에서 Mermaid 파싱 오류를 나타내는 ERROR: 줄을 확인하고, 있으면 .mmd를 수정한 뒤 재시도합니다.
  • PAGE_ERRORS 출력에서 'Error processing Mermaid diagram'을 확인하여 Excalidraw 변환기가 단일 이미지 요소로 대체 처리되었는지 확인합니다.
  • SVG, PNG, Excalidraw 파일이 작성되었음을 확인하기 위해 gstack-render 출력에 세 개의 OK <path> 줄이 모두 나타나는지 확인합니다.
  • 편집된 Excalidraw 재렌더링의 경우, PAGE_ERRORS의 무해한 WorkerInTheMainChunkError는 무시합니다 — SVG/PNG는 올바릅니다.

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

OpenDesign 다운로드빠른 시작 가이드 읽기

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

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

Author
Garry Tan
Repository
github.com/garrytan/gstack 브랜치 main
스킬 파일
diagram/SKILL.md 검증 시 기록된 콘텐츠 체크섬; 커밋 71f6048
License
MIT LICENSE에서 확인.
리포지토리 스타
132,921 garrytan/gstack 저장소 전체에 대한 GitHub 스냅샷, 2026-09-14 촬영. 이 저장소는 카탈로그에 7개의 스킬을 포함합니다. diagram에 대한 평가나 사용 횟수가 아닙니다.
OpenDesign에서 검증됨
2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 스타 수가 확인되었습니다. OpenDesign 메인에 번들로 포함되지 않음(2026-08-28 확인); 이 페이지에 실제 실행 기록이 없습니다.

SKILL.md 내부

  1. 이 skill을 호출해야 하는 경우다이어그램, 아키텍처, 플로차트, 시각화 요청에 사용합니다. SVG/PNG는 Mermaid 스타일을 사용하며, Excalidraw는 손그림 느낌을 가집니다.
  2. 1단계 — 다이어그램 작성Mermaid 소스를 작성합니다. 플로차트와 시퀀스 다이어그램은 완전히 편집 가능한 Excalidraw로 변환되며, 다른 유형은 단일 이미지로 내보내집니다.
  3. 2단계 — 렌더 번들 준비(세션당 1회)diagram-render.html을 gstack의 렌더 스테이징 디렉터리에 복사합니다. SHA 기반 콘텐츠 주소로 처리되어 동시 세션을 덮어쓰지 않습니다.
  4. 3단계 — 삼중 산출물 렌더링.mmd를 작성하고, base64로 인코딩된 소스로 gstack-render를 실행하여 SVG/PNG/Excalidraw를 출력합니다. 파싱 오류와 PAGE_ERRORS를 확인합니다.
  5. 4단계 — 표시 및 전달PNG를 인라인으로 읽고, 삼중 산출물 경로를 나열하며, Excalidraw 편집 가능성을 언급합니다. 변경이 필요하면 .mmd를 수정하고 다시 렌더링합니다.
  6. 규칙렌더링 없이 전달하지 않습니다. PDF 대상의 경우 make-pdf가 Mermaid 펜스를 네이티브로 렌더링한다는 것을 사용자에게 알려줍니다.
  7. 완료 상태삼중 산출물이 전달되면 DONE입니다. 번들이 없거나 사용 가능한 브라우저가 없으면 BLOCKED입니다.
스킬 자체 설명
"영어 설명(또는 mermaid 소스)을 다이어그램 세트로 변환합니다: 소스, excalidraw.com에서 열 수 있는 편집 가능한 .excalidraw 파일, 그리고 렌더링된 SVG + PNG. (gstack)"

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

06 설치하기 전에

diagram Skill에 대한 질문

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

렌더 번들이 없거나 사용 가능한 브라우저가 없으면 어떻게 됩니까?

skill은 중단되며, gstack 저장소에서 bun run build:diagram-render를 실행하여 번들을 빌드하거나, gstack의 브라우저가 빌드되지 않은 경우 Aside(macOS 15+)를 열도록 안내합니다. 이 skill은 사용자를 대신하여 Aside를 설치하거나 CDN 또는 다른 렌더러로 대체하지 않습니다.

Diagram

실제 다이어그램 및 차트 작업에서 diagram을 실행합니다.

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

OpenDesign 다운로드모든 스킬 보기
터미널
npx skills add https://github.com/garrytan/gstack --skill diagram

OpenDesign 데스크톱

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

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

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

macOS, Windows 지원