Community이미지github.com

Draw.io 다이어그램 스킬

아키텍처 다이어그램, 순서도, 네트워크 다이어그램 및 기술 일러스트레이션을 위한 draw.io 다이어그램 파일(.drawio)을 생성하고 편집합니다. 사용자가 다이어그램, 아키텍처 시각 자료, 순서도, 와이어프레임, 네트워크 토폴로지 등 draw.io/diagrams.net에서 편집 가능한 시각 자료를 요청할 때 사용하세요. draw.io 데스크톱 또는 웹 앱으로 직접 가져올 수 있는 XML 기반 .drawio 파일을 출력합니다.

Draw.io 다이어그램 스킬란 무엇인가요?

이 스킬은 AI 에이전트가 draw.io(diagrams.net)의 기본 XML 형식으로 전문적인 다이어그램 파일을 생성하고 편집할 수 있도록 설계되었습니다. 아키텍처 다이어그램, 순서도, 네트워크 토폴로지, 기술 일러스트레이션 등 다양한 시각 자료를 지원하며, 기본 도형(사각형, 원형, 실린더 등), 컨테이너(스윔레인), 커넥터(화살표, 점선) 및 텍스트 요소를 제공합니다. AWS, Azure, GCP 아이콘을 기본 포함하여 클라우드 아키텍처 다이어그램을 손쉽게 작성할 수 있으며, 브랜딩 색상과 스타일을 사용자 정의할 수 있는 기능도 포함되어 있습니다. 모든 출력은 특별한 라이브러리 없이도 draw.io 앱에서 바로 열고 편집할 수 있는 .drawio XML 파일로 저장됩니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/davidodediran/Draw.io-claude-skills/tree/HEAD/drawio-skill

Installed? Explore more 이미지 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

원본 보기→모든 스킬 둘러보기

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

Draw.io 다이어그램 스킬은(는) 무엇을 하나요?

draw.io 기본 XML 형식으로 전문적이고 편집 가능한 다이어그램 파일을 생성합니다.

출력 형식

Draw.io 파일은 다음과 같은 구조의 XML입니다:

<mxfile host="app.diagrams.net" modified="DATE" agent="Claude" version="21.0.0" type="device">
  <diagram name="DIAGRAM_NAME" id="UNIQUE_ID">
    <mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1100" pageHeight="850" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <!-- 모든 다이어그램 요소는 여기에 위치합니다 -->
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

핵심 요소 유형

기본 도형

<!-- 사각형 -->
<mxCell id="unique-id" value="레이블 텍스트" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="120" height="60" as="geometry" />
</mxCell>

<!-- 둥근 사각형 -->
<mxCell id="unique-id" value="레이블" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="120" height="60" as="geometry" />
</mxCell>

<!-- 실린더 (데이터베이스) -->
<mxCell id="unique-id" value="데이터베이스" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="80" height="80" as="geometry" />
</mxCell>

<!-- 타원 -->
<mxCell id="unique-id" value="노드" style="ellipse;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="80" height="80" as="geometry" />
</mxCell>

컨테이너 및 그룹

<!-- 스윔레인 (헤더가 있는 컨테이너) -->
<mxCell id="unique-id" value="섹션 제목" style="swimlane;fontStyle=1;align=center;verticalAlign=top;childLayout=stackLayout;horizontal=1;startSize=30;fillColor=#f5f5f5;strokeColor=#666666;fontColor=#333333;" vertex="1" parent="1">
  <mxGeometry x="40" y="40" width="200" height="150" as="geometry" />
</mxCell>

<!-- 헤더 바 (브랜드 주요 색상 사용) -->
<mxCell id="unique-id" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#0066CC;strokeColor=#0066CC;" vertex="1" parent="1">
  <mxGeometry x="40" y="40" width="400" height="40" as="geometry" />
</mxCell>

커넥터 및 화살표

<!-- 기본 화살표 -->
<mxCell id="unique-id" value="" style="endArrow=classic;html=1;rounded=0;strokeWidth=2;strokeColor=#666666;" edge="1" parent="1" source="source-id" target="target-id">
  <mxGeometry relative="1" as="geometry" />
</mxCell>

<!-- 양방향 화살표 -->
<mxCell id="unique-id" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;strokeWidth=2;" edge="1" parent="1">
  <mxGeometry relative="1" as="geometry">
    <mxPoint x="200" y="200" as="sourcePoint" />
    <mxPoint x="400" y="200" as="targetPoint" />
  </mxGeometry>
</mxCell>

<!-- 플렉스 화살표 (블록 화살표) -->
<mxCell id="unique-id" value="" style="shape=flexArrow;endArrow=classic;html=1;fillColor=#FFB800;strokeColor=#cc9400;width=20;endSize=8;" edge="1" parent="1">
  <mxGeometry relative="1" as="geometry">
    <mxPoint x="200" y="200" as="sourcePoint" />
    <mxPoint x="400" y="200" as="targetPoint" />
  </mxGeometry>
</mxCell>

<!-- 점선 -->
<mxCell id="unique-id" value="" style="endArrow=classic;html=1;dashed=1;dashPattern=8 8;strokeColor=#999999;" edge="1" parent="1">
  <mxGeometry relative="1" as="geometry">
    <mxPoint x="200" y="200" as="sourcePoint" />
    <mxPoint x="400" y="200" as="targetPoint" />
  </mxGeometry>
</mxCell>

텍스트 요소

<!-- 일반 텍스트 -->
<mxCell id="unique-id" value="레이블 텍스트" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=12;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="100" height="30" as="geometry" />
</mxCell>

<!-- 굵은 제목 -->
<mxCell id="unique-id" value="제목" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=18;fontStyle=1;fontColor=#333333;" vertex="1" parent="1">
  <mxGeometry x="100" y="20" width="300" height="40" as="geometry" />
</mxCell>

<!-- 여러 줄 텍스트 (줄바꿈은 &#xa; 사용) -->
<mxCell id="unique-id" value="1번 줄&#xa;2번 줄&#xa;3번 줄" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=top;whiteSpace=wrap;rounded=0;fontSize=10;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="150" height="60" as="geometry" />
</mxCell>

일반적인 스타일 속성

색상 (16진수 코드 사용)

속성용도예시
fillColor배경색fillColor=#dae8fc
strokeColor테두리색strokeColor=#6c8ebf
fontColor텍스트색fontColor=#333333

표준 색상 팔레트

파랑:   fillColor=#dae8fc;strokeColor=#6c8ebf
초록:   fillColor=#d5e8d4;strokeColor=#82b366
노랑:   fillColor=#fff2cc;strokeColor=#d6b656
주황:   fillColor=#ffe6cc;strokeColor=#d79b00
빨강:   fillColor=#f8cecc;strokeColor=#b85450
보라:   fillColor=#e1d5e7;strokeColor=#9673a6
회색:   fillColor=#f5f5f5;strokeColor=#666666

타이포그래피

속성값예시
fontSize숫자fontSize=12
fontStyle0=보통, 1=굵게, 2=기울임, 3=굵게+기울임fontStyle=1
alignleft, center, rightalign=center
verticalAligntop, middle, bottomverticalAlign=middle

테두리 및 효과

속성값예시
rounded0 또는 1rounded=1
strokeWidth숫자strokeWidth=2
dashed0 또는 1dashed=1
dashPattern패턴dashPattern=8 8
shadow0 또는 1shadow=1

회사 브랜딩 (사용자 정의 가능)

이 스킬은 회사별 브랜딩을 지원합니다. references/branding.md를 편집하여 조직의 색상과 스타일을 설정하세요.

기본 브랜드 자리 표시자 (직접 만든 것으로 교체하세요):

기본:   fillColor=#0066CC;strokeColor=#0052a3;fontColor=#FFFFFF
보조:   fillColor=#FFB800;strokeColor=#cc9400;fontColor=#333333
어두움:  fillColor=#1a1a2e;strokeColor=#1a1a2e;fontColor=#FFFFFF
밝은 배경:  fillColor=#f0f4f8;strokeColor=#0066CC

전체 사용자 정의 지침은 references/branding.md를 참조하세요.

다이어그램 패턴

아키텍처 다이어그램 레이아웃

  1. 제목 표시줄을 맨 위에 (전체 너비, 브랜드 색상)
  2. 주요 섹션을 스윔레인 또는 둥근 컨테이너로
  3. 구성 요소를 섹션 내부의 둥근 사각형으로
  4. 데이터베이스를 실린더로
  5. 외부 시스템을 좌우 가장자리에
  6. 화살표로 데이터/제어 흐름 표시
  7. 범례를 모서리에 배치하여 색상/기호 설명
  8. 바닥글에 메타데이터 포함

계층형 아키텍처 (위에서 아래로)

┌─────────────────────────────────────┐
│           사용자 / 클라이언트              │  ← 최상위 계층
├─────────────────────────────────────┤
│           API / 인터페이스              │
├─────────────────────────────────────┤
│         비즈니스 로직                    │
├─────────────────────────────────────┤
│         데이터 / 저장소                  │  ← 최하위 계층
└─────────────────────────────────────┘

왼쪽에서 오른쪽으로 흐름

┌──────┐     ┌──────────┐     ┌──────────┐
│소스│ ──► │ 처리     │ ──► │  대상    │
└──────┘     └──────────┘     └──────────┘

모범 사례

  1. 고유 ID: 모든 mxCell은 고유한 id 속성이 필요합니다
  2. 부모 계층 구조: 최상위 요소의 경우 parent="1"로 설정합니다
  3. 위치 지정: mxGeometry와 x, y, width, height를 사용합니다
  4. 레이어링: 나중에 정의된 요소가 위에 표시됩니다
  5. 정렬: 일관된 x/y 간격을 사용합니다 (10-20px 그리드)
  6. 색상: 팔레트의 조화로운 채우기/테두리 쌍을 사용합니다
  7. 레이블: 텍스트를 간결하게 유지하고, 설명은 별도의 텍스트 요소를 사용합니다
  8. 여백: 컨테이너 내부에 여백을 둡니다 (20-40px 패딩)

워크플로우

  1. 다이어그램 유형과 레이아웃 패턴을 결정합니다
  2. mxGraphModel에서 페이지 크기를 설정합니다 (pageWidth, pageHeight)
  3. 컨테이너 구조를 만듭니다 (스윔레인, 그룹)
  4. 고유 ID로 구성 요소를 추가합니다
  5. 소스/대상 ID를 참조하는 커넥터를 추가합니다
  6. 레이블과 주석을 추가합니다
  7. 색상 코딩을 사용하는 경우 범례를 추가합니다
  8. .drawio 파일로 저장합니다
  9. /mnt/user-data/outputs/에 복사하고 사용자에게 제시합니다

클라우드 제공업체 아이콘 (AWS, Azure, GCP)

Draw.io에는 주요 클라우드 제공업체의 기본 제공 도형 라이브러리가 포함되어 있습니다. 전문적인 아키텍처 다이어그램을 위해 공식 아이콘을 사용하세요.

AWS 아이콘 (빠른 참조)

AWS는 shape=mxgraph.aws4.resourceIcon 및 resIcon=mxgraph.aws4.SERVICE를 사용합니다:

<mxCell id="lambda-1" value="Lambda" style="sketch=0;outlineConnect=0;fontColor=#232F3E;fillColor=#ED7100;strokeColor=#ffffff;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;fontSize=12;fontStyle=0;aspect=fixed;shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.lambda;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="78" height="78" as="geometry" />
</mxCell>

일반적인 AWS resIcon 값:

  • 컴퓨팅: ec2, lambda, ecs, eks, fargate
  • 스토리지: s3, elastic_block_store, elastic_file_system
  • 데이터베이스: rds, dynamodb, aurora, elasticache, redshift
  • 네트워킹: vpc, cloudfront, route_53, api_gateway, elastic_load_balancing
  • 보안: iam, cognito, secrets_manager, kms, waf

AWS 카테고리 색상:

  • 컴퓨팅: #ED7100
  • 스토리지: #7AA116
  • 데이터베이스: #C925D1
  • 네트워킹: #8C4FFF
  • 보안: #DD344C

Azure 아이콘 (빠른 참조)

Azure은 image=img/lib/azure2/CATEGORY/SERVICE.svg를 사용합니다:

<mxCell id="vm-1" value="VM" style="aspect=fixed;html=1;points=[];align=center;image;fontSize=12;image=img/lib/azure2/compute/Virtual_Machine.svg;verticalLabelPosition=bottom;verticalAlign=top;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="68" height="68" as="geometry" />
</mxCell>

일반적인 Azure 이미지 경로:

  • compute/Virtual_Machine.svg, compute/Function_Apps.svg
  • containers/Kubernetes_Services.svg
  • storage/Storage_Accounts.svg, storage/Blob_Storage.svg
  • databases/SQL_Database.svg, databases/Azure_Cosmos_DB.svg
  • networking/Virtual_Networks.svg, networking/Load_Balancers.svg
  • security/Key_Vaults.svg, identity/Azure_Active_Directory.svg

AWS 그룹 컨테이너

<!-- VPC -->
<mxCell id="vpc" value="VPC" style="sketch=0;outlineConnect=0;gradientColor=none;html=1;whiteSpace=wrap;fontSize=12;fontStyle=0;shape=mxgraph.aws4.group;grIcon=mxgraph.aws4.group_vpc;strokeColor=#8C4FFF;fillColor=none;verticalAlign=top;align=left;spacingLeft=30;dashed=0;" vertex="1" parent="1">
  <mxGeometry x="40" y="40" width="400" height="300" as="geometry" />
</mxCell>

<!-- 퍼블릭 서브넷 -->
grIcon=mxgraph.aws4.group_public_subnet;strokeColor=#7AA116;fillColor=#E9F3E6

<!-- 프라이빗 서브넷 -->
grIcon=mxgraph.aws4.group_private_subnet;strokeColor=#00A4A6;fillColor=#E6F6F7

참조

고급 패턴 및 전체 아이콘 목록은 다음을 참조하세요:

  • references/architecture-patterns.md - 일반적인 아키텍처 다이어그램 레이아웃
  • references/style-guide.md - 확장된 스타일 옵션 및 아이콘 배치
  • references/cloud-icons.md - 전체 AWS, Azure, GCP 아이콘 참조
  • references/branding.md - 회사 브랜딩 사용자 정의 가이드

관련 스킬

steipete/songsee

Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.

community

affaan-m/frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.

community

mattpocock/improve-codebase-architecture

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

community

lobehub/add-provider-doc

Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.

community

addyosmani/browser-testing-with-devtools

Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.

community

bytedance/chart-visualization

This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.

community
← More 이미지 skills