화이트보드은(는) 무엇을 하나요?

설명을 사용자가 보고 저장하고 어디든 붙여넣을 수 있는 다이어그램으로 변환합니다. 당신이 다이어그램 소스를 작성하면 scripts/render.mjs가 사용자의 로컬에 설치된 CLI로 렌더링하고, 구문 분석에 실패하면 정확히 무엇이 잘못되었는지 알려줍니다.

워크플로우

다이어그램 유형과 언어를 선택합니다. 기본값은 Mermaid입니다. 중첩된 컨테이너가 있는 대규모 아키텍처 다이어그램에는 D2를 사용하고, 사용자가 요청하거나 프로젝트가 이미 사용 중인 경우에만 PlantUML을 사용합니다. 각 유형의 구문은 references/syntax.md를 참조하세요.
그리기 전에 읽습니다. 다이어그램이 코드를 설명하는 경우 먼저 코드를 읽으세요. 일반적인 그림이 아니라 실제 이름을 사용하여 존재하는 것을 그리세요. 전체 프로젝트 요청(아키텍처, 제어 흐름, 데이터 모델)의 경우 references/modes.md를 따르세요.
소스를 작성하고 렌더링합니다. 짧은 제목(최대 80자)과 함께 stdin으로 전달하세요. 제목은 파일 이름을 지정하므로 동일한 다이어그램을 다시 그릴 때 재사용하세요:
```
node <skill-dir>/scripts/render.mjs --title "체크아웃 시퀀스" <<'EOF'
sequenceDiagram
  Browser->>API: POST /checkout
  API->>Payments: charge(card)
  Payments-->>API: ok
  API-->>Browser: 201 Created
EOF
```
<skill-dir>은 이 파일이 있는 폴더입니다. 해당 언어의 경우 --language d2 또는 --language plantuml을 추가하세요. Windows에서 또는 heredoc 사용이 불편할 경우 소스를 임시 파일에 작성하고 대신 --file <path>를 전달하세요.
실패 시 수정하고 재실행합니다. 종료 코드 1은 렌더러가 소스를 거부했음을 의미하며, 메시지가 해당 줄을 알려줍니다. 해당 줄을 수정하고 동일한 명령을 다시 실행하세요. 렌더링되지 않은 다이어그램을 사용자에게 제공하지 마십시오. 일반적인 수정 사항은 references/syntax.md 끝에 나열되어 있습니다.
간략하게 보고합니다. 다이어그램이 무엇을 보여주는지 설명하고 스크립트가 출력한 파일 경로(예: diagrams/checkout-sequence.svg)를 알려줍니다. 사용자가 README, 이슈 또는 위키에 붙여넣고 싶어하는 경우, 펜스 처리된 ```mermaid 블록으로 소스를 제공하세요: GitHub, GitLab 및 Notion에서 렌더링됩니다.

스크립트 참조

옵션	용도
`--title <text>`	필수. 파일 이름을 지정합니다: `diagrams/<slug>.svg` 및 그 옆에 소스 파일.
`--language <name>`	`mermaid` (기본값), `d2` 또는 `plantuml`.
`--file <path>`	stdin 대신 파일에서 소스를 읽습니다.
`--out <dir>`	출력 폴더; 기본값은 현재 폴더의 `diagrams`.
`--png`	PNG도 작성합니다 (슬라이드, 채팅 앱, 이미지를 표시하는 터미널).
`--theme <name>`	`default`, `neutral`, `dark` 또는 `forest`.
`--config <file>`	팀 색상 및 글꼴을 위한 Mermaid JSON 설정.
`--check`	검증만 수행하며 아무것도 작성하지 않습니다.
`--open`	사용자의 기본 뷰어에서 SVG를 엽니다. 사용자가 지금 다이어그램을 보고 싶어할 때 사용합니다.
`--share`	소스를 비밀 GitHub Gist에 업로드하고 링크를 출력합니다. 사용자가 공유를 요청하고 업로드에 동의한 후에만 실행하세요.
`--json`	기계가 읽을 수 있는 결과.
`--doctor`	Node, 각 렌더러 및 GitHub CLI를 확인하고 설치해야 할 항목을 알려줍니다.

종료 코드: 0 렌더링 성공, 1 소스 거부됨 (수정 후 재실행), 2 잘못된 인수, 3 렌더러가 설치되지 않음.

다이어그램은 이미지에 로컬 파일, 환경 변수 또는 URL을 절대 읽지 않습니다:

Mermaid: 샌드박스 처리된 브라우저 페이지에서 렌더링되며 네트워크나 디스크에서 아무것도 로드할 수 없습니다. 모든 Mermaid 구문이 작동하지만 원격 또는 로컬 이미지 및 CSS 리소스는 빈 상태로 유지됩니다. 이미지가 반드시 표시되어야 한다면 data: URL로 인라인 처리하세요.
PlantUML: 일반 지시문(!define, !if, !procedure, !$var, !theme <name>, !include <stdlib> ...) 이외의 %getenv 및 유사 내장 함수, <img:…>는 거부됩니다. 대신 콘텐츠를 인라인 처리하세요.
D2: @ 임포트가 거부됩니다. 아이콘, 블록 문자열, HTML 또는 URL이 포함된 다이어그램은 SVG로만 렌더링되며 링크로 유지됩니다.

사용자가 명시적으로 include 또는 외부 이미지를 원하는 경우에만 WHITEBOARD_ALLOW_INCLUDES=1을 설정하여 재실행하세요.

동일한 제목으로 다시 그리면 이전 파일이 diagrams/.versions/<slug>/<n>/에 보관되므로 다이어그램을 반복 작업해도 이전 버전이 손실되지 않습니다.

렌더러가 누락된 경우

종료 코드 3은 설치 명령어를 출력합니다. 사용자에게 실행해야 할 내용을 알려주고, 사용자가 요청하지 않는 한 직접 전역 패키지를 설치하지 마십시오:

Mermaid: npm i -g @mermaid-js/mermaid-cli
D2: brew install d2, 또는 https://d2lang.com/tour/install 참조
PlantUML: brew install plantuml 또는 apt install plantuml (Java 필요)

렌더러가 설치되었지만 찾을 수 없는 경우(로그인 셸의 PATH 없이 시작되는 데스크톱 앱에서 자주 발생), WHITEBOARD_MMDC, WHITEBOARD_D2 또는 WHITEBOARD_PLANTUML을 전체 경로로 설정하세요. Mermaid 렌더링은 mermaid-cli와 함께 제공되는 브라우저 및 Mermaid 번들을 사용합니다. 스크립트가 mmdc를 찾지만 해당 패키지를 찾지 못하면 WHITEBOARD_MERMAID_CLI_DIR을 @mermaid-js/mermaid-cli 폴더로 설정하세요. 아무것도 설치할 수 없는 경우, 펜스 처리된 블록에 Mermaid 소스를 제공하여 GitHub에서 여전히 렌더링되도록 하고 렌더러가 확인되지 않았음을 알려주세요.

좋은 다이어그램

다이어그램당 하나의 아이디어. 약 15개 노드 또는 20개 메시지를 초과하는 내용은 개요 다이어그램과 세부 다이어그램으로 분할하세요.
모든 엣지에 흐르거나 발생하는 것을 레이블로 표시하세요 (HTTP, publishes OrderPlaced, 1..*).
코드의 이름을 사용하세요: 클래스, 모듈 및 서비스 이름, 실제 엔드포인트, 실제 테이블.
질문에 맞는 유형을 선택하세요: 누가 누구를 시간에 따라 호출하는가 → 시퀀스; 부품이 무엇인가 → 아키텍처/순서도; 데이터가 어떻게 보이는가 → ER 또는 클래스; 시간에 따라 어떻게 변하는가 → 상태.
노드 내부의 텍스트를 짧게 유지하고 세부 사항은 엣지 레이블이나 노트에 넣으세요.

화이트보드