다이어그램 메이커

다이어그램 메이커은(는) 무엇을 하나요?

다이어그램을 텍스트 대신 아티팩트로 생성합니다. 다음 출력 모드 중 하나를 선택하세요:

• clean-svg: 교육적 개념, 물리적 시스템, 프로세스, 생애주기, 단순 데이터 흐름.
• architecture-svg: 소프트웨어/클라우드/인프라 토폴로지, 서비스, 데이터베이스, 큐, 신뢰 영역.
• excalidraw: 편집 가능한 손그림 화이트보드, 순서도, 시퀀스, 아키텍처 스케치.

라우팅

• 사용자가 편집 가능/협업 가능을 원함: Excalidraw 선택.
• 사용자가 정제된 독립형 브라우저 출력을 원함: SVG/HTML 선택.
• 인프라 구성 요소가 있는 소프트웨어 아키텍처: 아키텍처 SVG 선택.
• 과학, 제품, 프로세스, 개념 맵, 물리적 객체: 깨끗한 SVG 선택.
• 확실하지 않음: 출력 형식이 중요한 경우에만 짧은 질문 한 번; 그 외에는 깨끗한 SVG 선택.

워크플로

1. 노드, 그룹, 레이블 및 방향 관계를 추출합니다.
2. 먼저 레이아웃을 선택합니다: 좌→우, 위→아래, 허브-스포크, 스윔레인, 계층형 스택, 시퀀스.
3. 레이블을 짧게 유지합니다. 밀집된 다이어그램보다 5~9개의 주요 요소를 선호합니다.
4. 요청된 경로에 파일을 생성하거나, ./diagram.html / ./diagram.excalidraw에 생성합니다.
5. 가능한 경우 구문을 열거나 파싱하여 확인합니다.

SVG/HTML 규칙

• 인라인 CSS와 인라인 SVG가 포함된 단일 독립형 .html 파일입니다.
• 외부 글꼴, JS, 이미지, 그라디언트, 광택, 장식용 블롭 또는 원격 자산이 없습니다.
• 무지개 순서가 아닌 의미론적 색상을 사용합니다: 중립, 입력, 처리, 저장, 외부, 위험.
• 커넥터를 노드보다 먼저 그려 화살표가 상자 뒤에 위치하도록 합니다.
• 모든 커넥터 경로에는 fill="none"이 있으며, 방향이 있을 때 마커 화살표가 있습니다.
• 상자 내부에 24px 텍스트 패딩을 남깁니다. 텍스트가 테두리에 닿지 않도록 합니다.
• 기호/색상이 명확하지 않은 경우에만 범례를 추가합니다.

SVG 템플릿

references/svg-template.md를 래퍼로 사용하고 <!-- SVG -->를 교체합니다.

Excalidraw 규칙

• type, version, source, elements, appState가 포함된 .excalidraw JSON으로 저장합니다.
• 도형 레이블에는 바운드 텍스트를 사용합니다. 비표준 label 속성을 사용하지 마십시오.
• 바운드 텍스트는 elements 배열에서 컨테이너 바로 뒤에 배치합니다.
• 최소 레이블 지정 도형: 120x60. 최소 본문 텍스트: 16px.
• 거칠기 1, fontFamily: 1, 단순 채우기를 사용합니다.

정확한 Excalidraw 요소 스니펫은 references/excalidraw-patterns.md를 참조하세요.