svg-diagram

younwony's avatarfrom younwony

직접 SVG 코드를 작성하여 다이어그램을 생성합니다. 구조도, 비교 다이어그램, 테이블 형식 등 정교한 레이아웃이 필요할 때 사용하세요.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 3, 2026
[Architecture Design]

When & Why to Use This Skill

This Claude skill enables the direct generation of high-quality, professional SVG diagrams through precise code implementation. It solves the challenge of creating complex technical visualizations—such as system architectures, network topologies, and data structures—directly within the workflow. By utilizing custom SVG templates, it ensures perfect alignment, professional gradients, and scalable vector output optimized for technical documentation and system design clarity.

Use Cases

  • System Architecture Mapping: Visualizing complex cloud infrastructures, network topologies, and microservices interactions with precise layout control.
  • Technical Documentation: Generating high-fidelity diagrams for OSI layers, memory layouts, and data packet structures to enhance technical manuals.
  • Software Logic Visualization: Creating state machine diagrams, sequence flows, and circuit breaker patterns to explain intricate software behaviors.
  • Data Comparison & Analysis: Building professional comparison tables and specification charts using consistent color palettes and structured layouts.
namesvg-diagram
description직접 SVG 코드를 작성하여 다이어그램을 생성합니다. 구조도, 비교 다이어그램, 테이블 형식 등 정교한 레이아웃이 필요할 때 사용하세요.

SVG 직접 생성 스킬

직접 SVG 코드를 작성하여 정교한 다이어그램을 생성합니다.

언제 이 방식을 사용하는가?

상황 SVG 직접 생성 적합
계층 구조 OSI 7계층, 조직도, 폴더 구조
구조도 아키텍처, 시스템 구성, 네트워크 토폴로지
데이터 구조 패킷/프레임 구조, 메모리 레이아웃
테이블 형식 비교표, 스펙 정리
비교 다이어그램 좌우 비교, 전후 비교
상태 다이어그램 서킷브레이커, 상태 머신
정교한 레이아웃 정확한 위치, 크기, 정렬이 필요한 경우

장점

  • 정확한 레이아웃 제어
  • 그라디언트, 그림자 등 시각 효과
  • 일관된 색상 팔레트 적용
  • 한글 텍스트 완벽 지원
  • 추가 도구 설치 불필요

파일 구조

cs/{category}/
├── {document}.md                    # 마크다운 문서
└── images/
    └── {diagram-name}.svg           # SVG 이미지

SVG 생성 규칙

1. 기본 구조

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 {width} {height}">
  <defs>
    <!-- 그라디언트, 마커 정의 -->
  </defs>
  <!-- 다이어그램 요소 -->
</svg>

2. 색상 팔레트 (필수)

기본 노드 색상

용도 그라디언트 시작색 그라디언트 끝색 텍스트색
파랑 (기본) #3498DB #2980B9 white
초록 (성공) #2ECC71 #27AE60 white
빨강 (경고) #E74C3C #C0392B white
주황 #E67E22 #D35400 white
노랑 #F1C40F #F39C12 white
보라 #9B59B6 #8E44AD white
청록 #1ABC9C #16A085 white

배경/보조 색상

용도 색상 사용처
제목 텍스트 #2C3E50 헤더, 타이틀
보조 텍스트 #7F8C8D 부제, 레이블
선/테두리 #7F8C8D 간선, 구분선
연한 배경 #ECF0F1 컨테이너

3. 그라디언트 정의 템플릿

<defs>
  <linearGradient id="nodeBlue" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" style="stop-color:#3498DB"/>
    <stop offset="100%" style="stop-color:#2980B9"/>
  </linearGradient>
  <linearGradient id="nodeGreen" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" style="stop-color:#2ECC71"/>
    <stop offset="100%" style="stop-color:#27AE60"/>
  </linearGradient>
  <linearGradient id="nodeRed" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" style="stop-color:#E74C3C"/>
    <stop offset="100%" style="stop-color:#C0392B"/>
  </linearGradient>
  <linearGradient id="nodePurple" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" style="stop-color:#9B59B6"/>
    <stop offset="100%" style="stop-color:#8E44AD"/>
  </linearGradient>
  <linearGradient id="nodeOrange" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" style="stop-color:#E67E22"/>
    <stop offset="100%" style="stop-color:#D35400"/>
  </linearGradient>
</defs>

4. 화살표 마커 정의

<defs>
  <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
    <polygon points="0 0, 10 3.5, 0 7" fill="#7F8C8D"/>
  </marker>
  <marker id="arrowRed" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
    <polygon points="0 0, 10 3.5, 0 7" fill="#E74C3C"/>
  </marker>
  <marker id="arrowGreen" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
    <polygon points="0 0, 10 3.5, 0 7" fill="#27AE60"/>
  </marker>
</defs>

5. 요소 스타일 규칙

원형 노드 (트리, 그래프)

<circle cx="150" cy="50" r="18" fill="url(#nodeBlue)"/>
<text x="150" y="55" text-anchor="middle" fill="white" font-family="Arial, sans-serif" font-size="14" font-weight="bold">1</text>

사각형 박스 (프레임, 블록)

<rect x="20" y="30" width="120" height="35" rx="5" fill="url(#nodeBlue)"/>
<text x="80" y="53" text-anchor="middle" fill="white" font-family="Arial, sans-serif" font-size="12" font-weight="bold">텍스트</text>

연결선

<!-- 일반 선 -->
<line x1="50" y1="50" x2="150" y2="50" stroke="#7F8C8D" stroke-width="2"/>

<!-- 화살표 선 -->
<line x1="50" y1="50" x2="150" y2="50" stroke="#7F8C8D" stroke-width="2" marker-end="url(#arrowhead)"/>

<!-- 점선 -->
<line x1="50" y1="50" x2="150" y2="50" stroke="#BDC3C7" stroke-width="2" stroke-dasharray="5,5"/>

텍스트

<!-- 타이틀 -->
<text x="200" y="25" text-anchor="middle" fill="#2C3E50" font-family="Arial, sans-serif" font-size="14" font-weight="bold">제목</text>

<!-- 부제 -->
<text x="200" y="40" text-anchor="middle" fill="#7F8C8D" font-family="Arial, sans-serif" font-size="10">부제목</text>

<!-- 레이블 -->
<text x="100" y="80" fill="#7F8C8D" font-family="Arial, sans-serif" font-size="9">레이블</text>

다이어그램 유형별 템플릿

1. 트리 다이어그램

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
  <defs>
    <linearGradient id="nodeBlue" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#3498DB"/>
      <stop offset="100%" style="stop-color:#2980B9"/>
    </linearGradient>
  </defs>

  <!-- 간선 먼저 그리기 -->
  <line x1="150" y1="35" x2="80" y2="85" stroke="#7F8C8D" stroke-width="2"/>
  <line x1="150" y1="35" x2="220" y2="85" stroke="#7F8C8D" stroke-width="2"/>

  <!-- 노드 그리기 -->
  <circle cx="150" cy="25" r="18" fill="url(#nodeBlue)"/>
  <text x="150" y="30" text-anchor="middle" fill="white" font-family="Arial, sans-serif" font-size="14" font-weight="bold">1</text>
</svg>

2. 계층 테이블 (OSI 스타일)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 200">
  <defs>
    <linearGradient id="layer1" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#E74C3C"/>
      <stop offset="100%" style="stop-color:#C0392B"/>
    </linearGradient>
  </defs>

  <!-- 타이틀 -->
  <text x="250" y="20" text-anchor="middle" fill="#2C3E50" font-family="Arial, sans-serif" font-size="14" font-weight="bold">계층 구조</text>

  <!-- 행 -->
  <rect x="20" y="35" width="40" height="25" fill="url(#layer1)" rx="3"/>
  <text x="40" y="52" text-anchor="middle" fill="white" font-family="Arial, sans-serif" font-size="11" font-weight="bold">1</text>
</svg>

3. 시퀀스/핸드셰이크 다이어그램

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 300">
  <defs>
    <linearGradient id="clientGrad" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#3498DB"/>
      <stop offset="100%" style="stop-color:#2980B9"/>
    </linearGradient>
    <marker id="arrowR" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
      <polygon points="0 0, 10 3.5, 0 7" fill="#E74C3C"/>
    </marker>
  </defs>

  <!-- 엔티티 -->
  <rect x="80" y="40" width="80" height="30" fill="url(#clientGrad)" rx="5"/>
  <text x="120" y="60" text-anchor="middle" fill="white" font-family="Arial, sans-serif" font-size="12" font-weight="bold">Client</text>

  <!-- 세로선 -->
  <line x1="120" y1="70" x2="120" y2="280" stroke="#3498DB" stroke-width="3"/>

  <!-- 메시지 화살표 -->
  <line x1="120" y1="100" x2="370" y2="100" stroke="#E74C3C" stroke-width="2" marker-end="url(#arrowR)"/>
  <rect x="200" y="85" width="100" height="22" fill="#E74C3C" rx="3"/>
  <text x="250" y="100" text-anchor="middle" fill="white" font-family="Arial, sans-serif" font-size="10" font-weight="bold">SYN</text>
</svg>

4. 아키텍처/시스템 구성도

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400">
  <defs>
    <linearGradient id="lbGrad" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#E74C3C"/>
      <stop offset="100%" style="stop-color:#C0392B"/>
    </linearGradient>
    <marker id="arrow" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
      <polygon points="0 0, 10 3.5, 0 7" fill="#7F8C8D"/>
    </marker>
  </defs>

  <!-- Load Balancer -->
  <rect x="200" y="50" width="200" height="40" fill="url(#lbGrad)" rx="5"/>
  <text x="300" y="75" text-anchor="middle" fill="white" font-family="Arial, sans-serif" font-size="12" font-weight="bold">Load Balancer</text>

  <!-- 화살표 -->
  <line x1="300" y1="90" x2="300" y2="130" stroke="#7F8C8D" stroke-width="2" marker-end="url(#arrow)"/>
</svg>

5. 상태 다이어그램 (서킷브레이커 스타일)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 450 280">
  <defs>
    <linearGradient id="closedGrad" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#2ECC71"/>
      <stop offset="100%" style="stop-color:#27AE60"/>
    </linearGradient>
    <linearGradient id="openGrad" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#E74C3C"/>
      <stop offset="100%" style="stop-color:#C0392B"/>
    </linearGradient>
  </defs>

  <!-- 상태 원 -->
  <circle cx="100" cy="100" r="45" fill="url(#closedGrad)"/>
  <text x="100" y="105" text-anchor="middle" fill="white" font-family="Arial, sans-serif" font-size="11" font-weight="bold">Closed</text>

  <!-- 전이 화살표 (곡선) -->
  <path d="M 145 85 Q 225 40 305 85" fill="none" stroke="#E74C3C" stroke-width="2"/>
</svg>

작성 절차

  1. 다이어그램 유형 결정: 표현하려는 내용에 맞는 템플릿 선택
  2. SVG 파일 생성: cs/{category}/images/{diagram-name}.svg
  3. 마크다운에서 참조: ![설명](./images/{diagram-name}.svg)
  4. git add 실행

주의사항

  1. 파일명: kebab-case 사용 (예: osi-7-layer-structure.svg)
  2. 위치: cs/{category}/images/ 폴더에 저장
  3. 폰트: Arial, sans-serif 사용 (크로스 플랫폼 호환)
  4. viewBox: 컨텐츠 크기에 맞게 조정
  5. 그라디언트: 계층/중요도에 따라 색상 구분
  6. 간선: 노드보다 먼저 그리기 (노드 아래에 위치)
  7. 텍스트 크기: 타이틀 14px, 본문 11-12px, 레이블 9-10px