Diagrams Default Active v1.1.0

SVG 다이어그램, Mermaid 차트, 인터랙티브 시각화 — 채팅 UI에 인라인으로 렌더링됩니다. 아키텍처 개요부터 인터랙티브 데이터 대시보드까지, 이 스킬은 모든 시각적 요청을 대화 내에서 직접 렌더링된 결과물로 변환합니다.

디자인 원칙

이 스킬이 생성하는 모든 다이어그램은 네 가지 핵심 원칙을 따릅니다:

• 플랫 — 그라데이션, 그림자, 블러, 글로우 또는 장식 효과 없음. 깔끔한 플랫 표면만 사용합니다.
• 컴팩트 — 핵심만 인라인으로 표시합니다. 나머지는 응답 텍스트로 설명합니다.
• 테마 인식 — 모든 색상이 라이트/다크 모드 모두에서 작동합니다. SVG에는 CSS 클래스, canvas/JS에는 window.__jawTokens를 사용합니다.
• 텍스트는 응답에, 비주얼은 도구에 — 모든 설명 텍스트는 다이어그램 외부에 배치합니다. SVG나 위젯 HTML 내부에 설명 문단을 넣지 마세요.

복잡도 제한

시각적 노이즈를 방지하기 위해 모든 다이어그램에 적용되는 엄격한 제한:

다이어그램 유형 선택

이 스킬은 명사가 아닌 동사에 따라 분기합니다. 같은 주제라도 사용자의 요청에 따라 다른 다이어그램 유형이 생성될 수 있습니다. Mermaid 네이티브 구문으로 깔끔하게 표현 가능한 유형은 직접 작성한 SVG보다 Mermaid가 우선됩니다.

SVG 유형

Mermaid 유형

인터랙티브 HTML 위젯 유형

Mermaid 주의사항

Mermaid 다이어그램 유형 작업 시 중요한 주의사항:

추가 참고사항:

• sankey-beta / xychart-beta는 좁은 채팅 너비에서 깨집니다. Sankey 차트는 diagram-html + ECharts를, XY 차트는 Chart.js를 권장합니다.
• radar-beta는 -beta 접미사가 필요합니다 (Mermaid v11.6+). 기타 베타 유형: treemap-beta, block-beta, architecture-beta, packet-beta, kanban.
• 모든 안정 Mermaid 유형은 호스트의 다크/라이트 테마를 자동으로 상속합니다. 의미적 이유로 재정의하는 경우가 아니라면 %%{init: ...}%%에서 명시적 색상을 설정하지 마세요.

출력 형식

1. 인라인 SVG (정적 다이어그램)

응답에 직접 출력되는 원시 <svg> 마크업입니다. 채팅 UI가 인라인으로 렌더링합니다.

<svg viewBox="0 0 680 {height}" xmlns="http://www.w3.org/2000/svg"
  role="img" aria-labelledby="title-id desc-id">
  <title id="title-id">Diagram Title</title>
  <desc id="desc-id">Brief description for screen readers</desc>
  <!-- shapes, text, paths -->
</svg>

인라인 SVG 규칙

• viewBox 너비는 반드시 680이어야 합니다 (컨테이너 너비와 일치 — 절대 변경하지 마세요)
• 높이는 콘텐츠에 따라 달라짐: 마지막 요소 하단 + 40px 패딩
• 모든 SVG에 role="img" + <title> + <desc>가 반드시 있어야 합니다
• 디자인 시스템의 CSS 클래스 사용 (.node, .connector, .label, .label-start)
• .label은 text-anchor: middle을 강제합니다 (중앙 정렬만 가능); 왼쪽 정렬 텍스트에는 .label-start 사용
• 색상: 인라인 fill/stroke가 아닌 CSS 클래스 사용
• 폰트 패밀리는 호스트에서 상속 — 명시적 폰트를 설정하지 마세요

2. Mermaid (구조화된 다이어그램)

표준 ```mermaid 코드 블록입니다. 기존 렌더러가 자동으로 처리합니다.

```mermaid
sequenceDiagram
    participant A as Client
    participant B as Server
    A->>B: GET /api/data
    B-->>A: 200 OK (JSON)
```

3. 인터랙티브 HTML 위젯 (차트, 컨트롤, 시뮬레이션)

```diagram-html 코드 블록으로 래핑됩니다. 호스트가 생성하는 샌드박스 iframe 내부에서 렌더링됩니다.

```diagram-html
<div id="chart-wrapper" style="position: relative; width: 100%; height: 300px;">
  <canvas id="myChart" role="img" aria-label="Chart description">
    Fallback text
  </canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"
  onerror="document.body.innerHTML='<p>Chart library failed to load.</p>'">
</script>
<script>
  const isDark = window.__jawTheme?.isDark ?? true;
  // ... Chart.js code
</script>
```

전달 메커니즘

세 가지 형식 모두 — 인라인 SVG, ```mermaid, ```diagram-html — 채팅 응답에 인라인으로 렌더링됩니다. jaw 프론트엔드가 응답 텍스트를 파싱하여 자동으로 마운트합니다. diagram-html은 호스트가 생성하는 샌드박스 <iframe>에 들어갑니다; 스킬이 iframe을 직접 생성하지 않습니다.

SVG 디자인 시스템

디자인 금지 목록

모든 SVG 출력에 적용되는 품질 규칙 (아래 보안 제한 사항과 별도):

• 그라데이션, 드롭 섀도우, 블러, 글로우 또는 네온 효과 금지
• 이모지 금지 — CSS 도형 또는 SVG 경로 사용
• 장식적 단계 번호 또는 과도하게 큰 제목 금지
• 순서도 박스 내부에 아이콘 또는 일러스트레이션 금지 — 텍스트만 허용
• 회전된 텍스트 금지
• 외부 컨테이너에 어두운/색상 배경 금지 (투명만 허용 — 호스트가 배경을 제공)
• 선 두께: 테두리와 모서리에 0.5px (1px나 2px가 아님)
• 폰트 두께: 400 (보통)과 500 (볼드)만 허용 — 600이나 700은 절대 사용 금지
• 폰트 크기: 14px (노드 라벨)와 12px (부제목/화살표 라벨)만 허용
• 소문자 시작 항상 — Title Case나 ALL CAPS 금지

보안 제한 사항 (인라인 SVG)

다음 요소와 속성은 DOMPurify에 의해 제거됩니다. 인라인 <svg>에서 절대 사용하지 마세요:

색상 램프 (9가지 시맨틱 색상)

각 램프에는 3가지 쉐이드가 있습니다: fill (배경), stroke (테두리), text (라벨). 인라인 색상이 아닌 항상 CSS 클래스 이름을 사용하세요.

레이아웃 패턴

테마 통합

CSS 변수 매핑

cli-jaw 호스트는 다이어그램 테마를 위해 다음 CSS 변수를 제공합니다:

형식별 테마 감지

참조 모듈

다이어그램 스킬은 특수 다이어그램 유형을 위한 추가 참조 파일을 로드합니다. 이 파일들은 상세한 패턴, 라이브러리 통합 가이드, 템플릿을 제공합니다:

사용 예시

빠른 참조

올바른 출력 형식을 선택하기 위한 의사결정 트리: